Store locator extension integration @@W-17273365@@

packages/extension-chakra-store-locator/src/components/with-store-locator.tsx

@@ -5,8 +5,10 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React from 'react'
+import {useExtensionStore} from '../hooks/use-extension-store'
 import {Config as StoreLocatorConfig} from '../types/config'
 import {StoreLocatorProvider} from './provider'
+import {StoreLocatorModal} from './modal'
 
 /**
  * Higher-order component that wraps a component with the StoreLocatorProvider
@@ -18,9 +20,12 @@ export const withStoreLocator = <P extends object>(
     config: StoreLocatorConfig
 ): React.ComponentType<P> => {
     const WithConfig = (props: P) => {
+        const store = useExtensionStore()
+        const isModalOpen = store?.isModalOpen
         return (
             <StoreLocatorProvider config={config}>
                 <WrappedComponent {...props} />
+                <StoreLocatorModal isOpen={isModalOpen} onClose={store.closeModal}/>
             </StoreLocatorProvider>
         )
     }

packages/extension-chakra-store-locator/src/setup-app.ts

@@ -27,20 +27,23 @@ import StoreLocatorPage from './pages/store-locator'
 import {logger} from './logger'
 import extensionMeta from '../extension-meta.json'
 
-// NOTE: Hey Kevin, this is where you are going to define the type of the store slice for your extension. I imagine that you'll
-// have something that manages the modal being open/closed here.
 interface StoreSlice {
-    count: number
-    increment: () => void
-    decrement: () => void
+    isModalOpen: boolean
+    openModal: () => void
+    closeModal: () => void
 }
 
-// This is the store slice definition that we are adding via the `withApplicationExtensionStore` HOC below in the extendApp
-// method.
+// @TODO: I noticed a bug that the initial render on client with have the store state always default to {}.
 const storeSliceInitializer: SliceInitializer<StoreSlice> = (set) => ({
-    count: 0,
-    increment: () => set((state) => ({count: state.count + 1})),
-    decrement: () => set((state) => ({count: state.count - 1}))
+    isModalOpen: false,
+    openModal: () => {
+        console.log('openModal')
+        set((state) => ({...state, isModalOpen: true}))
+    },
+    closeModal: () => {
+        console.log('closeModal')
+        set((state) => ({...state, isModalOpen: false}))
+    }
 })
 class StoreLocatorExtension extends ApplicationExtension<Config> {
     static readonly id = extensionMeta.id
@@ -57,15 +60,16 @@ class StoreLocatorExtension extends ApplicationExtension<Config> {
         }
 
         const HOCs = [
-            (component: React.ComponentType<any>) => withStoreLocator(component, config),
-            (component: React.ComponentType<any>) =>
-                withOptionalCommerceSdkReactProvider(component, config),
-            (component: React.ComponentType<any>) => withOptionalChakra(component),
             (component: React.ComponentType<any>) =>
                 withApplicationExtensionStore(component, {
                     id: extensionMeta.id,
                     initializer: storeSliceInitializer
-                })
+                }),
+            (component: React.ComponentType<any>) => withStoreLocator(component, config),
+            (component: React.ComponentType<any>) =>
+                withOptionalCommerceSdkReactProvider(component, config),
+            (component: React.ComponentType<any>) => withOptionalChakra(component),
+
         ]
 
         return applyHOCs(App, HOCs)

packages/extension-chakra-storefront/src/components/header/index.jsx

@@ -28,6 +28,7 @@ import {
     useMediaQuery
 } from '@chakra-ui/react'
 import {AuthHelpers, useAuthHelper, useCustomerType} from '@salesforce/commerce-sdk-react'
+import {useApplicationExtension, useApplicationExtensionsStore} from '@salesforce/pwa-kit-extension-sdk/react'
 
 import {useCurrentBasket} from '../../hooks/use-current-basket'
 
@@ -41,7 +42,8 @@ import {
     HamburgerIcon,
     ChevronDownIcon,
     HeartIcon,
-    SignoutIcon
+    SignoutIcon,
+    StoreIcon
 } from '../../components/icons'
 
 import {navLinks, messages} from '../../pages/account/constant'
@@ -123,6 +125,12 @@ const Header = ({
         onOpen: onAccountMenuOpen
     } = useDisclosure()
     const [isDesktop] = useMediaQuery('(min-width: 992px)')
+    const storeLocatorExtension = useApplicationExtension('@salesforce/extension-chakra-store-locator')
+    const isStoreLocatorEnabled = !!storeLocatorExtension && storeLocatorExtension.isEnabled
+    const {openModal} = useApplicationExtensionsStore(
+        (state) =>
+            state.state['@salesforce/extension-chakra-store-locator'] || {}
+    )
 
     const [showLoading, setShowLoading] = useState(false)
     // tracking if users enter the popover Content,
@@ -304,6 +312,20 @@ const Header = ({
                         {...styles.wishlistIcon}
                         onClick={onWishlistClick}
                     />
+                    {isStoreLocatorEnabled && <IconButton
+                        // @TODO: Add store locator aria-label
+                            // aria-label={intl.formatMessage({
+                            //     defaultMessage: 'Store Locator',
+                            //     id: 'header.button.assistive_msg.store_locator'
+                            // })}
+                            icon={<StoreIcon />}
+                            {...styles.icons}
+                            variant="unstyled"
+                            onClick={() => {
+                                console.log('open modal test')
+                                openModal()
+                            }}
+                        />}
                     <IconButton
                         aria-label={intl.formatMessage(
                             {

packages/template-typescript-minimal/package.json

@@ -22,6 +22,8 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@loadable/component": "^5.15.3",
+    "@salesforce/extension-chakra-store-locator": "^0.1.0-extensibility-preview.3",
+    "@salesforce/extension-chakra-storefront": "^0.1.0-extensibility-preview.3",
     "@salesforce/pwa-kit-dev": "4.0.0-extensibility-preview.3",
     "@salesforce/pwa-kit-extension-sdk": "4.0.0-extensibility-preview.3",
     "@salesforce/pwa-kit-react-sdk": "4.0.0-extensibility-preview.3",
@@ -47,7 +49,192 @@
   },
   "mobify": {
     "app": {
-      "extensions": []
+      "extensions": [
+        ["@salesforce/extension-chakra-storefront",
+        {
+          "enabled": true,
+          "activeDataEnabled": false,
+          "categoryNav": {
+              "defaultNavSsrDepth": 1,
+              "defaultRootCategory": "root"
+          },
+          "commerceAPI": {
+              "proxyPath": "/mobify/proxy/api",
+              "parameters": {
+                  "clientId": "c9c45bfd-0ed3-4aa2-9971-40f88962b836",
+                  "organizationId": "f_ecom_zzrf_001",
+                  "shortCode": "8o7m175y",
+                  "siteId": "RefArchGlobal"
+              }
+          },
+          "defaultSite": "RefArchGlobal",
+          "defaultAppLocale": "en-US",
+          "defaultSiteTitle": "Retail React App",
+          "einsteinAPI": {
+              "host": "https://api.cquotient.com",
+              "einsteinId": "1ea06c6e-c936-4324-bcf0-fada93f83bb1",
+              "siteId": "aaij-MobileFirst",
+              "isProduction": false
+          },
+          "maxCacheAge": 900,
+          "pages": {
+              "Account": {
+                  "path": "/account",
+                  "orderSearchParam": {"limit": 10, "offset": 0, "sort": "best-matches", "refine": []}
+              },
+              "Cart": {
+                  "path": "/cart"
+              },
+              "Checkout": {
+                  "path": "/checkout",
+                  "shippingCountryCode": [
+                      {"value": "CA", "label": "Canada"},
+                      {"value": "US", "label": "United States"}
+                  ]
+              },
+              "CheckoutConfirmation": {
+                  "path": "/checkout/confirmation/:orderNo"
+              },
+              "Home": {
+                  "path": "/",
+                  "productLimit": 10,
+                  "mainCategory": "newarrivals"
+              },
+              "Login": {
+                  "path": "/login"
+              },
+              "Registration": {
+                  "path": "/registration"
+              },
+              "ResetPassword": {
+                  "path": "/reset-password"
+              },
+              "LoginRedirect": {
+                  "path": "/callback"
+              },
+              "ProductDetail": {
+                  "path": "/product/:productId"
+              },
+              "ProductList": {
+                  "path": ["/search", "/category/:categoryId"],
+                  "imageViewType": "large",
+                  "selectableAttributeId": "color",
+                  "filterAccordionSate": "filters-expanded-index"
+              }
+          },
+          "search": {
+              "defaultLimitValues": [25, 50, 100],
+              "defaultSearchParams": {"limit": 25, "offset": 0, "sort": "best-matches", "refine": []},
+              "recentSearchKey": "recent-search-key",
+              "recentSearchLimit": 5,
+              "recentSearchMinLength": 3
+          },
+          "siteAliases": {
+              "RefArch": "us",
+              "RefArchGlobal": "global"
+          },
+          "sites": [
+              {
+                  "id": "RefArch",
+                  "l10n": {
+                      "supportedCurrencies": ["USD"],
+                      "defaultCurrency": "USD",
+                      "defaultLocale": "en-US",
+                      "supportedLocales": [
+                          {
+                              "id": "en-US",
+                              "preferredCurrency": "USD"
+                          },
+                          {
+                              "id": "en-CA",
+                              "preferredCurrency": "USD"
+                          }
+                      ]
+                  }
+              },
+              {
+                  "id": "RefArchGlobal",
+                  "l10n": {
+                      "supportedCurrencies": ["GBP", "EUR", "CNY", "JPY"],
+                      "defaultCurrency": "GBP",
+                      "supportedLocales": [
+                          {
+                              "id": "de-DE",
+                              "preferredCurrency": "EUR"
+                          },
+                          {
+                              "id": "en-GB",
+                              "preferredCurrency": "GBP"
+                          },
+                          {
+                              "id": "es-MX",
+                              "preferredCurrency": "MXN"
+                          },
+                          {
+                              "id": "fr-FR",
+                              "preferredCurrency": "EUR"
+                          },
+                          {
+                              "id": "it-IT",
+                              "preferredCurrency": "EUR"
+                          },
+                          {
+                              "id": "ja-JP",
+                              "preferredCurrency": "JPY"
+                          },
+                          {
+                              "id": "ko-KR",
+                              "preferredCurrency": "KRW"
+                          },
+                          {
+                              "id": "pt-BR",
+                              "preferredCurrency": "BRL"
+                          },
+                          {
+                              "id": "zh-CN",
+                              "preferredCurrency": "CNY"
+                          },
+                          {
+                              "id": "zh-TW",
+                              "preferredCurrency": "TWD"
+                          }
+                      ],
+                      "defaultLocale": "en-GB"
+                  }
+              }
+          ],
+          "staleWhileRevalidate": 900,
+          "url": {
+              "site": "path",
+              "locale": "path",
+              "showDefaults": true,
+              "interpretPlusSignAsSpace": false
+          }
+      }],
+        [
+          "@salesforce/extension-chakra-store-locator",
+          {
+            "enabled": true,
+            "path": "/store-locator",
+            "radius": 100,
+            "radiusUnit": "km",
+            "defaultPageSize": 10,
+            "defaultPostalCode": "10178",
+            "defaultCountry": "Germany",
+            "defaultCountryCode": "DE",
+            "supportedCountries": [
+              {
+                "countryCode": "US",
+                "countryName": "United States"
+              },
+              {
+                "countryCode": "DE",
+                "countryName": "Germany"
+              }
+            ]
+          }
+        ]
+      ]
     },
     "ssrEnabled": true,
     "ssrOnly": [