add a default commerce api provider to store locator extension

kevinxh · kevinxh · commit 7a79859d28c8 · 2025-01-09T11:24:38.000-08:00
diff --git a/packages/extension-chakra-store-locator/README.md b/packages/extension-chakra-store-locator/README.md
@@ -35,7 +35,7 @@ If you want to use this without having to install `@chakra-ui` in your project,
 
 ### `@salesforce/commerce-sdk-react` Provider
 
-This extension uses the `@salesforce/commerce-sdk-react` package to fetch the store locator data from SCAPI. Your application must use the `CommerceApiProvider` in the React component tree.
+This extension uses the `@salesforce/commerce-sdk-react` package to fetch the store locator data from SCAPI. If you provide a `commerceApi` configuration in the extension config, the `CommerceApiProvider` will be added to the React component tree as the default provider. If you already have a `CommerceApiProvider` in your application, do not include the `commerceApi` configuration in the extension config.
 
 ## Configurations
 
@@ -66,7 +66,16 @@ The Store Locator extension is configured via the `mobify.app.extensions` proper
                 "countryCode": "DE",
                 "countryName": "Germany"
               }
-            ]
+            ],
+            "commerceApi": {
+              "proxyPath": "/mobify/proxy/api",
+              "parameters": {
+                "shortCode": "8o7m175y",
+                "clientId": "c9c45bfd-0ed3-4aa2-9971-40f88962b836",
+                "organizationId": "f_ecom_zzrf_001",
+                "siteId": "RefArchGlobal"
+              }
+            }
           }
         ]
       ]
diff --git a/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx b/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * 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 {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
+import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
+import {UserConfig} from '../types/config'
+
+type WithOptionalCommerceSdkReactProvider = React.ComponentPropsWithoutRef<any>
+
+/**
+ * Higher-order component that conditionally wraps a given component with ChakraProvider.
+ *
+ * @param WrappedComponent - The component to be optionally wrapped with ChakraProvider.
+ * @param theme - Optional Chakra UI theme to be used
+ * @returns A component that wraps the given component with ChakraProvider if it is not already present in the component tree.
+ */
+export const withOptionalCommerceSdkReactProvider = <P extends object>(
+    WrappedComponent: React.ComponentType<P>,
+    config: UserConfig
+) => {
+    const HOC: React.FC<P> = (props: WithOptionalCommerceSdkReactProvider) => {
+        if (!config.commerceApi || !config.commerceApi?.parameters) {
+            return <WrappedComponent {...(props as P)} />
+        }
+        const appOrigin = getAppOrigin()
+        return (
+            <CommerceApiProvider
+                shortCode={config.commerceApi.parameters.shortCode}
+                clientId={config.commerceApi.parameters.clientId}
+                organizationId={config.commerceApi.parameters.organizationId}
+                siteId={config.commerceApi.parameters.siteId}
+                locale={config.commerceApi.parameters.locale}
+                currency={config.commerceApi.parameters.currency}
+                redirectURI={`${appOrigin}/callback`}
+                proxy={`${appOrigin}${config.commerceApi.proxyPath}`}
+            >
+                <WrappedComponent {...(props as P)} />
+            </CommerceApiProvider>
+        )
+    }
+
+    return HOC
+}
diff --git a/packages/extension-chakra-store-locator/src/setup-app.ts b/packages/extension-chakra-store-locator/src/setup-app.ts
@@ -14,6 +14,7 @@ import {ApplicationExtension} from '@salesforce/pwa-kit-extension-sdk/react'
 
 // Local Imports
 import {withOptionalChakra} from './components/with-optional-chakra-provider'
+import {withOptionalCommerceSdkReactProvider} from './components/with-optional-commerce-sdk-react-provider'
 import {withStoreLocator} from './components/with-store-locator'
 import {Config} from './types'
 
@@ -35,7 +36,7 @@ class StoreLocatorExtension extends ApplicationExtension<Config> {
             )
         }
 
-        return withStoreLocator(withOptionalChakra(App), config)
+        return withStoreLocator(withOptionalCommerceSdkReactProvider(withOptionalChakra(App), config), config)
     }
 
     extendRoutes(routes: RouteProps[]): RouteProps[] {
diff --git a/packages/extension-chakra-store-locator/src/types/config.ts b/packages/extension-chakra-store-locator/src/types/config.ts
@@ -21,6 +21,17 @@ export interface UserConfig extends ApplicationExtensionConfig {
         countryCode: string
         countryName: string
     }>
+    commerceApi?: {
+        proxyPath: string
+        parameters: {
+            shortCode: string
+            clientId: string
+            organizationId: string
+            siteId: string
+            locale: string
+            currency: string
+        }
+    }
 }
 
 /**
diff --git a/packages/template-typescript-minimal/package.json b/packages/template-typescript-minimal/package.json
@@ -22,6 +22,7 @@
     "@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/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",
@@ -44,6 +45,44 @@
     "npm": "^8.0.0 || ^9.0.0 || ^10.0.0"
   },
   "mobify": {
+    "app": {
+      "extensions": [
+        [
+          "@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"
+              }
+            ],
+            "commerceApi": {
+              "proxyPath": "/mobify/proxy/api",
+              "parameters": {
+                "shortCode": "8o7m175y",
+                "clientId": "c9c45bfd-0ed3-4aa2-9971-40f88962b836",
+                "organizationId": "f_ecom_zzrf_001",
+                "siteId": "RefArchGlobal",
+                "locale": "en-GB",
+                "currency": "USD"
+              }
+            }
+          }
+        ]
+      ]
+    },
     "ssrEnabled": true,
     "ssrOnly": [
       "ssr.js",

Original file line number	Diff line number	Diff line change
@@ -35,7 +35,7 @@ If you want to use this without having to install `@chakra-ui` in your project,
`35`	`35`
`36`	`36`	### `@salesforce/commerce-sdk-react` Provider
`37`	`37`
`38`		-This extension uses the `@salesforce/commerce-sdk-react` package to fetch the store locator data from SCAPI. Your application must use the `CommerceApiProvider` in the React component tree.
	`38`	+This extension uses the `@salesforce/commerce-sdk-react` package to fetch the store locator data from SCAPI. If you provide a `commerceApi` configuration in the extension config, the `CommerceApiProvider` will be added to the React component tree as the default provider. If you already have a `CommerceApiProvider` in your application, do not include the `commerceApi` configuration in the extension config.
`39`	`39`
`40`	`40`	`## Configurations`
`41`	`41`
@@ -66,7 +66,16 @@ The Store Locator extension is configured via the `mobify.app.extensions` proper
`66`	`66`	`"countryCode": "DE",`
`67`	`67`	`"countryName": "Germany"`
`68`	`68`	`}`
`69`		`- ]`
	`69`	`+ ],`
	`70`	`+ "commerceApi": {`
	`71`	`+ "proxyPath": "/mobify/proxy/api",`
	`72`	`+ "parameters": {`
	`73`	`+ "shortCode": "8o7m175y",`
	`74`	`+ "clientId": "c9c45bfd-0ed3-4aa2-9971-40f88962b836",`
	`75`	`+ "organizationId": "f_ecom_zzrf_001",`
	`76`	`+ "siteId": "RefArchGlobal"`
	`77`	`+ }`
	`78`	`+ }`
`70`	`79`	`}`
`71`	`80`	`]`
`72`	`81`	`]`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ import {ApplicationExtension} from '@salesforce/pwa-kit-extension-sdk/react'`
`14`	`14`
`15`	`15`	`// Local Imports`
`16`	`16`	`import {withOptionalChakra} from './components/with-optional-chakra-provider'`
	`17`	`+import {withOptionalCommerceSdkReactProvider} from './components/with-optional-commerce-sdk-react-provider'`
`17`	`18`	`import {withStoreLocator} from './components/with-store-locator'`
`18`	`19`	`import {Config} from './types'`
`19`	`20`
`@@ -35,7 +36,7 @@ class StoreLocatorExtension extends ApplicationExtension<Config> {`
`35`	`36`	`)`
`36`	`37`	`}`
`37`	`38`
`38`		`- return withStoreLocator(withOptionalChakra(App), config)`
	`39`	`+ return withStoreLocator(withOptionalCommerceSdkReactProvider(withOptionalChakra(App), config), config)`
`39`	`40`	`}`
`40`	`41`
`41`	`42`	`extendRoutes(routes: RouteProps[]): RouteProps[] {`