Merge 07287b6 into 00211ba

vtex-apps · May 27, 2019 · 183ab21 · 183ab21
2 parents 00211ba + 07287b6
commit 183ab21
Show file tree

Hide file tree

Showing 24 changed files with 495 additions and 355 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Content schema.
 
 ## [2.12.0] - 2019-05-25
 ### Added

diff --git a/manifest.json b/manifest.json
@@ -19,6 +19,8 @@
     "vtex.store-icons": "0.x",
     "vtex.rich-text": "0.x",
     "vtex.menu": "2.x",
-    "vtex.flex-layout": "0.x"
-  }
+    "vtex.flex-layout": "0.x",
+    "vtex.native-types": "0.x"
+  },
+  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }
diff --git a/react/.eslintrc b/react/.eslintrc
@@ -1,9 +1,9 @@
 {
-  "extends": "vtex",
+  "extends": "vtex-react",
   "env": {
+    "browser": true,
     "es6": true,
-    "jest": true,
-    "node": true
+    "jest": true
   },
   "rules": {
     "prettier/prettier": "off",
@@ -16,4 +16,4 @@
   "globals": {
     "metrics": true
   }
-}
+}
diff --git a/react/.prettierrc b/react/.prettierrc
@@ -1,6 +1,5 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "es5",
-  "jsxBracketSameLine": true
-}
+  "trailingComma": "es5"
+}
diff --git a/react/AcceptedPaymentMethods.tsx b/react/AcceptedPaymentMethods.tsx
@@ -1,12 +1,16 @@
 import React from 'react'
+
 import PaymentMethodIcon, {
   PaymentMethod,
 } from './components/PaymentMethodIcon'
 import style from './components/AcceptedPaymentMethods.css'
 
-const AcceptedPaymentMethods: StorefrontFunctionComponent<
-  AcceptedPaymentMethodsProps
-> = props => {
+interface Props {
+  paymentMethods: PaymentMethod[]
+  showInColor: boolean
+}
+
+const AcceptedPaymentMethods: React.FC<Props> = props => {
   return (
     <div className={`${style.acceptedPaymentMethodContainer} nh2 flex`}>
       {props.paymentMethods.map(paymentMethod => (
@@ -24,14 +28,7 @@ AcceptedPaymentMethods.defaultProps = {
   paymentMethods: [],
   showInColor: false,
 }
-
-interface AcceptedPaymentMethodsProps {
-  paymentMethods: PaymentMethod[]
-  showInColor: boolean
-}
-
-// tslint:disable: object-literal-sort-keys
-AcceptedPaymentMethods.schema = {
+;(AcceptedPaymentMethods as any).schema = {
   title: 'admin/editor.footer.acceptedPaymentMethods.title',
   description: 'admin/editor.footer.acceptedPaymentMethods.description',
   type: 'object',
@@ -42,18 +39,6 @@ AcceptedPaymentMethods.schema = {
       title: 'admin/editor.footer.showPaymentMethodsInColor.title',
       type: 'boolean',
     },
-    paymentMethods: {
-      title: 'admin/editor.footer.acceptedPaymentMethods.title',
-      type: 'array',
-      minItems: 1,
-      maxItems: 5,
-      items: {
-        title: 'admin/editor.footer.paymentMethodIcon.method',
-        type: 'string',
-        default: 'MasterCard',
-        enum: ['MasterCard', 'Visa', 'Diners Club'],
-      },
-    },
   },
 }
 

diff --git a/react/Footer.js b/react/Footer.js
@@ -43,6 +43,30 @@ const Footer = props => {
   )
 }
 
-Footer.schema = LegacyFooter.schema
+Footer.schema = {
+  title: 'admin/editor.footer.title',
+  description: 'admin/editor.footer.description',
+  type: 'object',
+  properties: {
+    showPaymentFormsInColor: {
+      type: 'boolean',
+      title: 'admin/editor.footer.showPaymentMethodsInColor.title',
+      default: false,
+      isLayout: true,
+    },
+    showSocialNetworksInColor: {
+      type: 'boolean',
+      title: 'admin/editor.footer.showSocialNetworksInColor.title',
+      default: false,
+      isLayout: true,
+    },
+    showVtexLogoInColor: {
+      type: 'boolean',
+      title: 'admin/editor.footer.showVtexLogoInColor.title',
+      default: false,
+      isLayout: true,
+    },
+  },
+}
 
 export default Footer
diff --git a/react/FooterLayout.tsx b/react/FooterLayout.tsx
@@ -1,21 +1,8 @@
-import React, { Component } from 'react'
+import React from 'react'
 import style from './components/FooterLayout.css'
 
-const FooterLayout: StorefrontFunctionComponent<FooterLayoutProps> = props => {
+const FooterLayout: React.FC = props => {
   return <div className={style.footerLayout}>{props.children}</div>
 }
 
-interface FooterLayoutProps {
-  children: Component
-}
-
-FooterLayout.getSchema = () => {
-  // tslint:disable: object-literal-sort-keys
-  return {
-    title: 'admin/editor.footer.title',
-    description: 'admin/editor.footer.description',
-    type: 'object',
-  }
-}
-
 export default FooterLayout
diff --git a/react/Row.tsx b/react/Row.tsx
@@ -4,13 +4,23 @@ import { Container } from 'vtex.store-components'
 import { generateBlockClass } from '@vtex/css-handles'
 import style from './components/Row.css'
 
-const Row: StorefrontFunctionComponent<RowProps> = ({
+interface RowProps {
+  fullWidth?: boolean
+  inverted?: boolean
+  blockClass?: string
+}
+
+const Row: React.FC<RowProps> = ({
   blockClass,
   children,
   fullWidth,
   inverted,
 }) => {
-  const content = <div className={`${style.rowContainer} w-100 flex items-center`}>{children}</div>
+  const content = (
+    <div className={`${style.rowContainer} w-100 flex items-center`}>
+      {children}
+    </div>
+  )
 
   const classes = generateBlockClass(style.row, blockClass)
 
@@ -30,32 +40,26 @@ const Row: StorefrontFunctionComponent<RowProps> = ({
   )
 }
 
-interface RowProps {
-  fullWidth?: boolean
-  inverted?: boolean
-  blockClass?: string
-}
-
-Row.schema = {
-  title: 'editor.row.title',
+;(Row as any).schema = {
+  title: 'admin/editor.row.title',
   type: 'object',
   properties: {
     blockClass: {
-      title: 'editor.blockClass.title',
-      description: 'editor.blockClass.description',
+      title: 'admin/editor.blockClass.title',
+      description: 'admin/editor.blockClass.description',
       type: 'string',
       isLayout: true,
     },
     inverted: {
-      title: 'editor.inverted.title',
-      description: 'editor.inverted.description',
+      title: 'admin/editor.inverted.title',
+      description: 'admin/editor.inverted.description',
       type: 'boolean',
       default: true,
       isLayout: true,
     },
     fullWidth: {
-      title: 'editor.fullWidth.title',
-      description: 'editor.fullWidth.description',
+      title: 'admin/editor.fullWidth.title',
+      description: 'admin/editor.fullWidth.description',
       type: 'boolean',
       default: false,
       isLayout: true,

diff --git a/react/SocialNetworks.tsx b/react/SocialNetworks.tsx
@@ -1,15 +1,27 @@
 import React from 'react'
+import { IOMessage } from 'vtex.native-types'
+
 import SocialNetwork from './components/SocialNetwork'
 import style from './components/SocialNetworks.css'
 
-const SocialNetworks: StorefrontFunctionComponent<SocialNetworksSchema> = ({
-  title,
-  socialNetworks,
-}) => {
+interface SocialNetworkData {
+  url: string
+  name: string
+}
+
+interface Props {
+  title?: string
+  socialNetworks: SocialNetworkData[]
+  showInColor: boolean
+}
+
+const SocialNetworks: React.FC<Props> = ({ title, socialNetworks }) => {
   return (
     <div>
       {title && (
-        <div className={`${style.socialNetworksTitle} mb4`}>{title}</div>
+        <div className={`${style.socialNetworksTitle} mb4`}>
+          <IOMessage id={title} />
+        </div>
       )}
       <div className={`${style.socialNetworksContainer} nh2 flex`}>
         {socialNetworks.map(socialNetworkData => (
@@ -27,19 +39,7 @@ SocialNetworks.defaultProps = {
   socialNetworks: [],
   showInColor: false,
 }
-
-interface SocialNetworksSchema {
-  title?: string
-  socialNetworks: SocialNetworkData[]
-  showInColor: boolean
-}
-
-interface SocialNetworkData {
-  url: string
-  name: string
-}
-
-SocialNetworks.schema = {
+;(SocialNetworks as any).schema = {
   title: 'admin/editor.footer.socialNetworks.title',
   description: 'admin/editor.footer.socialNetworks.description',
   type: 'object',
@@ -50,34 +50,6 @@ SocialNetworks.schema = {
       title: 'admin/editor.footer.showSocialNetworksInColor.title',
       type: 'boolean',
     },
-    socialNetworks: {
-      title: 'admin/editor.footer.socialNetworks',
-      type: 'array',
-      minItems: 1,
-      maxItems: 6,
-      items: {
-        title: 'admin/editor.footer.socialNetworks.title',
-        type: 'object',
-        properties: {
-          url: {
-            title: 'admin/editor.footer.socialNetworks.url.title',
-            type: 'string',
-          },
-          name: {
-            title: 'admin/editor.footer.socialNetworks.title',
-            type: 'string',
-            enum: [
-              'Facebook',
-              'Twitter',
-              'Instagram',
-              'YouTube',
-              'LinkedIn',
-              'Pinterest',
-            ],
-          },
-        },
-      },
-    },
   },
 }
 

diff --git a/react/__mocks__/vtex.native-types.tsx b/react/__mocks__/vtex.native-types.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const IOMessage: React.FC<{ id: string }> = ({ id }) => <>{id}</>
+
+export const formatIOMessage = ({ id }: { id: string }) => id
diff --git a/react/__mocks__/vtex.render-runtime.tsx b/react/__mocks__/vtex.render-runtime.tsx
@@ -2,6 +2,7 @@ import React, { ElementType } from 'react'
 
 const runtime = { account: 'account' }
 
+// eslint-disable-next-line react/display-name
 export const withRuntimeContext = (Comp: ElementType) => (props: any) => (
   <Comp {...props} runtime={runtime} />
 )
diff --git a/react/components/PaymentMethodIcon.tsx b/react/components/PaymentMethodIcon.tsx
@@ -1,24 +1,36 @@
 import React from 'react'
+import { injectIntl } from 'react-intl'
+import { formatIOMessage } from 'vtex.native-types'
+
 import style from './PaymentMethodIcon.css'
 import withImage from './withImage'
 
+interface PaymentMethodIconProps {
+  imageSrc?: string
+  /** If true, the original logo (with color) is used. If not, the grayscale's one */
+  showInColor?: boolean
+  /** Indicates which one of the payments method should the component show its image */
+  paymentMethod: PaymentMethod
+  intl: any
+}
+
 /**
  * Shows an image for the payments forms accepted
  */
 const PaymentMethodIcon: StorefrontFunctionComponent<
   PaymentMethodIconProps
-> = ({ imageSrc, paymentMethod }) => {
+> = ({ imageSrc, paymentMethod, intl }) => {
   if (!imageSrc) {
     return null
   }
-  
+
   return (
     <div className={`${style.paymentMethodIcon} w2 h2 mh2 flex items-center`}>
       <img
         className={`${style.paymentMethodIconImage} w-100`}
         src={imageSrc}
-        alt={paymentMethod}
-        title={paymentMethod}
+        alt={formatIOMessage({ id: paymentMethod, intl })}
+        title={formatIOMessage({ id: paymentMethod, intl })}
       />
     </div>
   )
@@ -30,17 +42,10 @@ export enum PaymentMethod {
   'visa' = 'visa',
 }
 
-interface PaymentMethodIconProps {
-  imageSrc?: string
-  /** If true, the original logo (with color) is used. If not, the grayscale's one */
-  showInColor?: boolean
-  /** Indicates which one of the payments method should the component show its image */
-  paymentMethod: PaymentMethod
-}
-
 const getImagePathFromProps = ({
   paymentMethod,
   showInColor,
-}: PaymentMethodIconProps) => `${paymentMethod.toLowerCase()}${showInColor ? '' : '-bw'}.svg`
+}: PaymentMethodIconProps) =>
+  `${paymentMethod.toLowerCase()}${showInColor ? '' : '-bw'}.svg`
 
-export default withImage(getImagePathFromProps)(PaymentMethodIcon)
+export default withImage(getImagePathFromProps)(injectIntl(PaymentMethodIcon))