Add interface to show reference information

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. |

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"
-}
+}

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",

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"
-}
+}

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"
-}
+}

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<StoreReferenceProps & WrappedComponentProps> = ({
+  label,
+  intl,
+}) => {
+  const group = useStoreGroup()
+
+  const handles = useCssHandles(CSS_HANDLES)
+
+  if (!group?.address?.reference) {
+    return null
+  }
+
+  return (
+    <div className={handles.referenceContainer}>
+      <span className={handles.referenceLabel}>
+        {label ?? intl.formatMessage(messages.reference)}
+      </span>
+
+      <span className={handles.referenceText}>{group.address.reference}</span>
+    </div>
+  )
+}
+
+export default injectIntl(StoreReference)

store/interfaces.json

@@ -22,6 +22,10 @@
     "component": "StoreAddress",
     "composition": "children"
   },
+  "store-reference": {
+    "component": "StoreReference",
+    "composition": "children"
+  },
   "store-back-link": {
     "component": "StoreBackLink",
     "composition": "children"