Break Footer into smaller pieces using composition

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.7.0] - 2019-04-11
+
+### Added
+
+- Add new interfaces: `footer-layout`, `social-networks`, `accepted-payment-methods`, `powered-by`, `footer-row` and `footer-spacer`.
+
 ## [2.6.17] - 2019-04-03
 
 ### Fixed

manifest.json

@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "store-footer",
-  "version": "2.6.17",
+  "version": "2.7.0",
   "title": "VTEX Store Footer component",
   "defaultLocale": "pt-BR",
   "description": "The canonical VTEX store footer component",
@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "vtex.store-components": "3.x",
-    "vtex.store-icons": "0.x"
+    "vtex.store-icons": "0.x",
+    "vtex.rich-text": "0.x",
+    "vtex.menu": "2.x"
   }
 }

messages/context.json

@@ -11,7 +11,7 @@
   "editor.footer.numberOfMoreInformationLinks.title": "editor.footer.numberOfMoreInformationLinks.title",
   "editor.footer.numberOfBadges.title": "editor.footer.numberOfBadges.title",
   "editor.footer.numberOfPaymentForms.title": "editor.footer.numberOfPaymentForms.title",
-  "editor.footer.showPaymentFormsInColor.title": "editor.footer.showPaymentFormsInColor.title",
+  "editor.footer.showPaymentMethodsInColor.title": "editor.footer.showPaymentMethodsInColor.title",
   "editor.footer.showSocialNetworksInColor.title": "editor.footer.showSocialNetworksInColor.title",
   "editor.footer.showVtexLogoInColor.title": "editor.footer.showVtexLogoInColor.title",
   "editor.footer.linksSections": "editor.footer.linksSections",
@@ -38,6 +38,11 @@
   "editor.footer.paymentForms.paymentForm.title": "editor.footer.paymentForms.paymentForm.title",
   "editor.footer.paymentForms.paymentForm.paymentTypes": "editor.footer.paymentForms.paymentForm.paymentTypes",
   "editor.footer.paymentForm.paymentForm.paymentTypes.paymentType": "editor.footer.paymentForm.paymentForm.paymentTypes.paymentType",
+  "editor.footer.acceptedPaymentMethods.title": "Accepted Payment Methods",
+  "editor.footer.acceptedPaymentMethods.description": "Payment methods accepted by the store",
+  "editor.footer.paymentMethodIcon.title": "Payment Method",
+  "editor.footer.paymentMethodIcon.description": "Payment method icon",
+  "editor.footer.paymentMethodIcon.method": "Payment method name",
   "editor.footer.storeInformations": "editor.footer.storeInformations",
   "editor.footer.storeInformations.storeInformation": "editor.footer.storeInformations.storeInformation"
 }

messages/en.json

@@ -10,8 +10,8 @@
   "editor.footer.numberOfSectionLinks.title": "Number of section links",
   "editor.footer.numberOfMoreInformationLinks.title": "Number of more information links",
   "editor.footer.numberOfBadges.title": "Number of badges to be displayed",
-  "editor.footer.numberOfPaymentForms.title": "Number of payment forms available",
-  "editor.footer.showPaymentFormsInColor.title": "Show payment form icons in color",
+  "editor.footer.numberOfPaymentForms.title": "Number of payment methods available",
+  "editor.footer.showPaymentMethodsInColor.title": "Show payment methods icons in color",
   "editor.footer.showSocialNetworksInColor.title": "Show social networks icons in color",
   "editor.footer.showVtexLogoInColor.title": "Show VTEX logo in color",
   "editor.footer.linksSections": "Links Sections",
@@ -38,6 +38,11 @@
   "editor.footer.paymentForms.paymentForm.title": "Payment Form Title",
   "editor.footer.paymentForms.paymentForm.paymentTypes": "Payment Types",
   "editor.footer.paymentForm.paymentForm.paymentTypes.paymentType": "Payment Type",
+  "editor.footer.acceptedPaymentMethods.title": "Accepted Payment Methods",
+  "editor.footer.acceptedPaymentMethods.description": "Payment methods accepted by the store",
+  "editor.footer.paymentMethodIcon.title": "Payment Method",
+  "editor.footer.paymentMethodIcon.description": "Payment method icon",
+  "editor.footer.paymentMethodIcon.method": "Payment method name",
   "editor.footer.storeInformations": "Store Informations",
   "editor.footer.storeInformations.storeInformation": "Store Information"
 }

messages/es.json

@@ -11,7 +11,7 @@
   "editor.footer.numberOfMoreInformationLinks.title": "Número de enlaces para más información",
   "editor.footer.numberOfBadges.title": "Número de medallas a mostrar",
   "editor.footer.numberOfPaymentForms.title": "Número de formas de pago disponibles",
-  "editor.footer.showPaymentFormsInColor.title": "Mostrar los iconos de las formas de pago de colores",
+  "editor.footer.showPaymentMethodsInColor.title": "Mostrar los iconos de las formas de pago de colores",
   "editor.footer.showSocialNetworksInColor.title": "Mostrar los iconos de las redes sociales de colores",
   "editor.footer.showVtexLogoInColor.title": "Mostrar el logotipo de la VTEX de color",
   "editor.footer.linksSections": "Secciones de Enlaces",
@@ -38,6 +38,11 @@
   "editor.footer.paymentForms.paymentForm.title": "Título de la Forma de pago",
   "editor.footer.paymentForms.paymentForm.paymentTypes": "Tipos de pago",
   "editor.footer.paymentForm.paymentForm.paymentTypes.paymentType": "Tipo de pago",
+  "editor.footer.acceptedPaymentMethods.title": "Métodos de pago aceptados",
+  "editor.footer.acceptedPaymentMethods.description": "Métodos de pago aceptados por la tienda",
+  "editor.footer.paymentMethodIcon.title": "Método de Pago",
+  "editor.footer.paymentMethodIcon.description": "Icono del método de pago",
+  "editor.footer.paymentMethodIcon.method": "Nombre del método de pago",
   "editor.footer.storeInformations": "Informaciónes de la Tienda",
   "editor.footer.storeInformations.storeInformation": "Información de la Tienda"
 }

messages/pt.json

@@ -11,7 +11,7 @@
   "editor.footer.numberOfMoreInformationLinks.title": "Número de links para mais informações",
   "editor.footer.numberOfBadges.title": "Número de medalhas a serem exibidas",
   "editor.footer.numberOfPaymentForms.title": "Número de formas de pagamento disponíveis",
-  "editor.footer.showPaymentFormsInColor.title": "Mostrar os ícones das formas de pagamento coloridos",
+  "editor.footer.showPaymentMethodsInColor.title": "Mostrar os ícones das formas de pagamento coloridos",
   "editor.footer.showSocialNetworksInColor.title": "Mostrar os ícones das redes sociais coloridos",
   "editor.footer.showVtexLogoInColor.title": "Mostrar o logo da VTEX colorido",
   "editor.footer.linksSections": "Seções de Links",
@@ -36,6 +36,11 @@
   "editor.footer.paymentForms.paymentForm.title": "Título da Forma de pagamento",
   "editor.footer.paymentForms.paymentForm.paymentTypes": "Tipos de pagamento",
   "editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Tipos de pagamento",
+  "editor.footer.acceptedPaymentMethods.title": "Métodos de Pagamento Aceitos",
+  "editor.footer.acceptedPaymentMethods.description": "Métodos de pagamentos aceitos pela loja",
+  "editor.footer.paymentMethodIcon.title": "Método de Pagamento",
+  "editor.footer.paymentMethodIcon.description": "Ícone do método de pagamento",
+  "editor.footer.paymentMethodIcon.method": "Nome do método de pagamento",
   "editor.footer.storeInformations": "Informações da Loja",
   "editor.footer.storeInformations.storeInformation": "Informação da Loja"
 }

react/.eslintrc

@@ -0,0 +1,19 @@
+{
+  "extends": "vtex",
+  "env": {
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "rules": {
+    "prettier/prettier": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-object-literal-type-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "globals": {
+    "metrics": true
+  }
+}

react/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "jsxBracketSameLine": true
+}

react/AcceptedPaymentMethods.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import PaymentMethodIcon, {
+  PaymentMethod,
+} from './components/PaymentMethodIcon'
+import style from './components/AcceptedPaymentMethods.css'
+
+const AcceptedPaymentMethods: StorefrontFunctionComponent<
+  AcceptedPaymentMethodsProps
+> = props => {
+  return (
+    <div className={`${style.acceptedPaymentMethodContainer} nh2 flex`}>
+      {props.paymentMethods.map(paymentMethod => (
+        <PaymentMethodIcon
+          paymentMethod={paymentMethod}
+          showInColor={props.showInColor}
+        />
+      ))}
+    </div>
+  )
+}
+
+AcceptedPaymentMethods.defaultProps = {
+  paymentMethods: [],
+  showInColor: false,
+}
+
+interface AcceptedPaymentMethodsProps {
+  paymentMethods: PaymentMethod[]
+  showInColor: boolean
+}
+
+// tslint:disable: object-literal-sort-keys
+AcceptedPaymentMethods.schema = {
+  title: 'editor.footer.acceptedPaymentMethods.title',
+  description: 'editor.footer.acceptedPaymentMethods.description',
+  type: 'object',
+  properties: {
+    showInColor: {
+      default: false,
+      isLayout: true,
+      title: 'editor.footer.showPaymentMethodsInColor.title',
+      type: 'boolean',
+    },
+    paymentMethods: {
+      title: 'editor.footer.acceptedPaymentMethods.title',
+      type: 'array',
+      minItems: 1,
+      maxItems: 5,
+      items: {
+        title: 'editor.footer.paymentMethodIcon.method',
+        type: 'string',
+        default: 'MasterCard',
+        enum: ['MasterCard', 'Visa', 'Diners Club'],
+      },
+    },
+  },
+}
+
+export default AcceptedPaymentMethods

react/Footer.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { ExtensionPoint, useChildBlock, useRuntime } from 'vtex.render-runtime'
+import LegacyFooter from './legacy/Footer'
+import Media from 'react-media'
+
+const Footer = props => {
+  const footerDesktop = !!useChildBlock({
+    id: 'footer-layout.desktop',
+  })
+  const footerMobile = !!useChildBlock({
+    id: 'footer-layout.mobile',
+  })
+
+  const {
+    hints: { mobile },
+  } = useRuntime()
+
+  const hasFooterLayout = footerDesktop || footerMobile
+
+  if (!hasFooterLayout) {
+    return <LegacyFooter {...props} />
+  }
+
+  // SSR fallback
+  if (!window || !window.matchMedia) {
+    return mobile ? (
+      <ExtensionPoint id="footer-layout.mobile" />
+    ) : (
+      <ExtensionPoint id="footer-layout.desktop" />
+    )
+  }
+
+  return (
+    <Media query="(max-width:40rem)">
+      {matches =>
+        matches ? (
+          <ExtensionPoint id="footer-layout.mobile" />
+        ) : (
+          <ExtensionPoint id="footer-layout.desktop" />
+        )
+      }
+    </Media>
+  )
+}
+
+Footer.schema = LegacyFooter.schema
+
+export default Footer

react/FooterLayout.tsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import style from './components/FooterLayout.css'
+
+const FooterLayout: StorefrontFunctionComponent<FooterLayoutProps> = props => {
+  return <div className={style.footerLayout}>{props.children}</div>
+}
+
+interface FooterLayoutProps {
+  children: Component
+}
+
+FooterLayout.getSchema = () => {
+  // tslint:disable: object-literal-sort-keys
+  return {
+    title: 'editor.footer.title',
+    description: 'editor.footer.description',
+    type: 'object',
+  }
+}
+
+export default FooterLayout

react/PoweredBy.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import classNames from 'classnames'
+import { withRuntimeContext } from 'vtex.render-runtime'
+import { Functions } from '@gocommerce/utils'
+import withImage from './components/withImage'
+import style from './components/PoweredBy.css'
+
+/**
+ * "Powered By VTEX/GoCommerce" image component, used in Footer
+ */
+const PoweredBy: StorefrontFunctionComponent<PoweredByProps> = ({
+  runtime,
+  imageSrc,
+}) => {
+  if (!imageSrc) {
+    return null
+  }
+
+  const isPlatformGCResult = Functions.isGoCommerceAcc(runtime.account)
+
+  return (
+    <div
+      className={classNames(style.poweredBy, 'flex items-center', {
+        w4: isPlatformGCResult,
+        'h3 w3': !isPlatformGCResult,
+      })}>
+      <img
+        className={`${style.poweredByImage} w-100`}
+        src={imageSrc}
+        alt={isPlatformGCResult ? 'GoCommerce' : 'VTEX'}
+      />
+    </div>
+  )
+}
+
+interface PoweredByProps extends PoweredBySchema {
+  runtime: {
+    account: string
+  }
+  logoUrl: string
+  imageSrc: string
+}
+
+interface PoweredBySchema {
+  showInColor: boolean
+}
+
+PoweredBy.displayName = 'PoweredBy'
+
+const getImagePathFromProps = ({ runtime, showInColor }: PoweredByProps) =>
+  `${Functions.isGoCommerceAcc(runtime.account) ? 'GoCommerce' : 'VTEX'}${
+    showInColor ? '' : '-BW'
+  }.svg`
+
+export default withRuntimeContext(withImage(getImagePathFromProps)(PoweredBy))