Skip to content

Commit

Permalink
Merge 1242bd4 into 2246b60
Browse files Browse the repository at this point in the history
  • Loading branch information
klzns committed Apr 11, 2019
2 parents 2246b60 + 1242bd4 commit 13b4cb1
Show file tree
Hide file tree
Showing 59 changed files with 1,339 additions and 193 deletions.
28 changes: 0 additions & 28 deletions .eslintrc

This file was deleted.

5 changes: 0 additions & 5 deletions .prettierrc

This file was deleted.

4 changes: 4 additions & 0 deletions CHANGELOG.md
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

### 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
Expand Down
4 changes: 3 additions & 1 deletion manifest.json
Expand Up @@ -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"
}
}
7 changes: 6 additions & 1 deletion messages/context.json
Expand Up @@ -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",
Expand All @@ -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"
}
9 changes: 7 additions & 2 deletions messages/en.json
Expand Up @@ -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",
Expand All @@ -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"
}
7 changes: 6 additions & 1 deletion messages/es.json
Expand Up @@ -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",
Expand All @@ -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"
}
7 changes: 6 additions & 1 deletion messages/pt.json
Expand Up @@ -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",
Expand All @@ -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"
}
3 changes: 0 additions & 3 deletions react/.babelrc

This file was deleted.

19 changes: 19 additions & 0 deletions 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
}
}
6 changes: 6 additions & 0 deletions react/.prettierrc
@@ -0,0 +1,6 @@
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"jsxBracketSameLine": true
}
59 changes: 59 additions & 0 deletions 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
48 changes: 48 additions & 0 deletions 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
21 changes: 21 additions & 0 deletions 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
55 changes: 55 additions & 0 deletions 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}
title={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))

0 comments on commit 13b4cb1

Please sign in to comment.