From 194de5137c8a95a38de1a567bd4565f111bdf326 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20L=C3=B3pez=20Luna?= Date: Sun, 14 Aug 2022 21:54:12 -0500 Subject: [PATCH] Add interface to show reference information --- docs/README.md | 7 ++++++ messages/context.json | 3 ++- messages/en.json | 1 + messages/es.json | 3 ++- messages/pt.json | 3 ++- react/StoreReference.tsx | 49 ++++++++++++++++++++++++++++++++++++++++ store/interfaces.json | 4 ++++ 7 files changed, 67 insertions(+), 3 deletions(-) create mode 100644 react/StoreReference.tsx diff --git a/docs/README.md b/docs/README.md index d0065da..ee5c029 100644 --- a/docs/README.md +++ b/docs/README.md @@ -47,6 +47,7 @@ In order to define the Store Locator custom page UI, you must use the blocks exp | `store-back-link` | Renders a link to return to the previous page. | | `store-map` | Renders a map with the retail store localization. | | `store-address` | Renders the store's address. | +| `store-reference` | Renders the store's reference information. | | `store-hours` | Renders the store's opening hours. This information comes by default from the Pickup Points configuration, but you can also define manually through the Store's theme | | `store-instructions` | Renders the desired instructions to access the retail store. | @@ -235,6 +236,12 @@ In order to define the Store Locator custom page UI, you must use the blocks exp | :-------: | :------: | :---------------------------------------------------------: | :-------------: | | `label` | `string` | Entitles the `store-address` block when rendered on the UI. | `Store address` | +#### `store-reference` props + +| Prop name | Type | Description | Default value | +| :-------: | :------: | :-----------------------------------------------------------: | :-----------: | +| `label` | `string` | Entitles the `store-reference` block when rendered on the UI. | `Reference` | + #### `store-hours` props | Prop name | Type | Description | Default value. | diff --git a/messages/context.json b/messages/context.json index 80b15de..5c05e07 100644 --- a/messages/context.json +++ b/messages/context.json @@ -4,6 +4,7 @@ "store/load-all": "store/load-all", "store/back-link": "store/back-link", "store/address-label": "store/address-label", + "store/reference-label": "store/reference-label", "store/information-label": "store/information-label", "store/store-closed": "store/store-closed", "store/hours-label": "store/hours-label", @@ -14,4 +15,4 @@ "store/day-of-week-thursday": "store/day-of-week-thursday", "store/day-of-week-friday": "store/day-of-week-friday", "store/day-of-week-saturday": "store/day-of-week-saturday" -} \ No newline at end of file +} diff --git a/messages/en.json b/messages/en.json index f686281..5126029 100644 --- a/messages/en.json +++ b/messages/en.json @@ -4,6 +4,7 @@ "store/load-all": "Load all stores", "store/back-link": "Back to all stores", "store/address-label": "Store address", + "store/reference-label": "Reference", "store/information-label": "Information", "store/store-closed": "Closed", "store/hours-label": "Store hours", diff --git a/messages/es.json b/messages/es.json index f56ab6e..a145742 100644 --- a/messages/es.json +++ b/messages/es.json @@ -4,6 +4,7 @@ "store/load-all": "Cargar todas las tiendas", "store/back-link": "Volver a todas las tiendas", "store/address-label": "Dirección de la tienda", + "store/reference-label": "Referencia", "store/information-label": "Información", "store/store-closed": "Cerrado", "store/hours-label": "Horario de la tienda", @@ -14,4 +15,4 @@ "store/day-of-week-thursday": "Jueves", "store/day-of-week-friday": "Viernes", "store/day-of-week-saturday": "Sábado" -} \ No newline at end of file +} diff --git a/messages/pt.json b/messages/pt.json index b0598aa..ae0fb93 100644 --- a/messages/pt.json +++ b/messages/pt.json @@ -4,6 +4,7 @@ "store/load-all": "Listar todas as lojas", "store/back-link": "Voltar para lista de lojas", "store/address-label": "Endereço", + "store/reference-label": "Referência", "store/information-label": "Informações", "store/store-closed": "Fechado", "store/hours-label": "Horário de funcionamento", @@ -14,4 +15,4 @@ "store/day-of-week-thursday": "Quinta", "store/day-of-week-friday": "Sexta", "store/day-of-week-saturday": "Sábado" -} \ No newline at end of file +} diff --git a/react/StoreReference.tsx b/react/StoreReference.tsx new file mode 100644 index 0000000..f2d76ee --- /dev/null +++ b/react/StoreReference.tsx @@ -0,0 +1,49 @@ +import type { FC } from 'react' +import React from 'react' +import type { WrappedComponentProps } from 'react-intl' +import { defineMessages, injectIntl } from 'react-intl' +import { useCssHandles } from 'vtex.css-handles' + +import { useStoreGroup } from './StoreGroup' + +const CSS_HANDLES = [ + 'referenceContainer', + 'referenceLabel', + 'referenceText', +] as const + +const messages = defineMessages({ + reference: { + defaultMessage: 'Reference', + id: 'store/reference-label', + }, +}) + +interface StoreReferenceProps { + label: string +} + +const StoreReference: FC = ({ + label, + intl, +}) => { + const group = useStoreGroup() + + const handles = useCssHandles(CSS_HANDLES) + + if (!group?.address?.reference) { + return null + } + + return ( +
+ + {label ?? intl.formatMessage(messages.reference)} + + + {group.address.reference} +
+ ) +} + +export default injectIntl(StoreReference) diff --git a/store/interfaces.json b/store/interfaces.json index 5a70f05..c4b79a0 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -22,6 +22,10 @@ "component": "StoreAddress", "composition": "children" }, + "store-reference": { + "component": "StoreReference", + "composition": "children" + }, "store-back-link": { "component": "StoreBackLink", "composition": "children"