From 7a79859d28c8ec30ecf17015652f3381ac74c2f2 Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Thu, 9 Jan 2025 11:24:38 -0800
Subject: [PATCH 01/12] add a default commerce api provider to store locator
 extension

---
 .../extension-chakra-store-locator/README.md  | 13 ++++-
 ...h-optional-commerce-sdk-react-provider.tsx | 48 +++++++++++++++++++
 .../src/setup-app.ts                          |  3 +-
 .../src/types/config.ts                       | 11 +++++
 .../template-typescript-minimal/package.json  | 39 +++++++++++++++
 5 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx

diff --git a/packages/extension-chakra-store-locator/README.md b/packages/extension-chakra-store-locator/README.md
index 008f4d9c7d..5b7d39cd9c 100644
--- 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
new file mode 100644
index 0000000000..9c493c4315
--- /dev/null
+++ 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
index f1fb30ed79..d94e261bce 100644
--- 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
index 192cf1e9ed..68f5e41af3 100644
--- 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
index 7708e8dde5..cf67e317ed 100644
--- 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",

From 02349dd5f7868863e33896b742da83f029922b45 Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Thu, 9 Jan 2025 14:32:55 -0800
Subject: [PATCH 02/12] fix comments

---
 .../with-optional-commerce-sdk-react-provider.tsx         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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
index 9c493c4315..3bb1e7b79d 100644
--- 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
@@ -13,11 +13,11 @@ import {UserConfig} from '../types/config'
 type WithOptionalCommerceSdkReactProvider = React.ComponentPropsWithoutRef<any>
 
 /**
- * Higher-order component that conditionally wraps a given component with ChakraProvider.
+ * Higher-order component that conditionally installs the CommerceApiProvider if the config is provided.
  *
- * @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.
+ * @param WrappedComponent - The component to be optionally wrapped with CommerceApiProvider.
+ * @param config - The configuration object for the CommerceApiProvider.
+ * @returns A component that wraps the given component with CommerceApiProvider if it is not already present in the component tree.
  */
 export const withOptionalCommerceSdkReactProvider = <P extends object>(
     WrappedComponent: React.ComponentType<P>,

From 8320948dda8fabef4bfbe35f7f388b735fc3c60a Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Fri, 10 Jan 2025 09:45:54 -0800
Subject: [PATCH 03/12] detect commerce api provider

---
 ...h-optional-commerce-sdk-react-provider.tsx | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

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
index 3bb1e7b79d..2688e22b1f 100644
--- 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
@@ -7,9 +7,31 @@
 
 import React from 'react'
 import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
-import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
+import {CommerceApiProvider, useCommerceApi} from '@salesforce/commerce-sdk-react'
 import {UserConfig} from '../types/config'
 
+/**
+ * Checks if the CommerceApiProvider is already installed in the component tree.
+ * @returns boolean, true if the CommerceApiProvider is installed, false otherwise.
+ */
+const useHasCommerceApiProvider = () => {
+    let hasProvider = false
+
+    try {
+        const api = useCommerceApi()
+
+        // the api object is an object with a bunch of api clients like ShopperProduct, ShopperOrder, etc.
+        // if the object is empty, then the CommerceApiProvider is not installed
+        if (Object.keys(api).length > 0) {
+            hasProvider = true
+        }
+    } catch (_) {
+        hasProvider = false
+    }
+
+    return hasProvider
+} 
+
 type WithOptionalCommerceSdkReactProvider = React.ComponentPropsWithoutRef<any>
 
 /**
@@ -24,6 +46,9 @@ export const withOptionalCommerceSdkReactProvider = <P extends object>(
     config: UserConfig
 ) => {
     const HOC: React.FC<P> = (props: WithOptionalCommerceSdkReactProvider) => {
+        if (useHasCommerceApiProvider()) {
+            return <WrappedComponent {...(props as P)} />
+        }
         if (!config.commerceApi || !config.commerceApi?.parameters) {
             return <WrappedComponent {...(props as P)} />
         }

From fc5b271cfcdf01fcccfb0ffb5b614a89445a76c1 Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Mon, 13 Jan 2025 08:13:39 -0800
Subject: [PATCH 04/12] add logger

---
 .../components/with-optional-commerce-sdk-react-provider.tsx  | 4 +++-
 packages/extension-chakra-store-locator/src/logger.ts         | 3 +++
 packages/extension-chakra-store-locator/src/setup-app.ts      | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 packages/extension-chakra-store-locator/src/logger.ts

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
index 2688e22b1f..4380072c41 100644
--- 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
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2024, salesforce.com, inc.
+ * Copyright (c) 2025, 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
@@ -9,6 +9,7 @@ import React from 'react'
 import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
 import {CommerceApiProvider, useCommerceApi} from '@salesforce/commerce-sdk-react'
 import {UserConfig} from '../types/config'
+import {logger} from '../logger'
 
 /**
  * Checks if the CommerceApiProvider is already installed in the component tree.
@@ -50,6 +51,7 @@ export const withOptionalCommerceSdkReactProvider = <P extends object>(
             return <WrappedComponent {...(props as P)} />
         }
         if (!config.commerceApi || !config.commerceApi?.parameters) {
+            logger.error('CommerceApiProvider is not installed and no commerceApi config is provided, this extension may not work as expected.')
             return <WrappedComponent {...(props as P)} />
         }
         const appOrigin = getAppOrigin()
diff --git a/packages/extension-chakra-store-locator/src/logger.ts b/packages/extension-chakra-store-locator/src/logger.ts
new file mode 100644
index 0000000000..6c27da2bbb
--- /dev/null
+++ b/packages/extension-chakra-store-locator/src/logger.ts
@@ -0,0 +1,3 @@
+import createLogger from '@salesforce/pwa-kit-runtime/utils/logger-factory'
+
+export const logger = createLogger({packageName: 'extension-chakra-store-locator'})
diff --git a/packages/extension-chakra-store-locator/src/setup-app.ts b/packages/extension-chakra-store-locator/src/setup-app.ts
index d94e261bce..083842d8eb 100644
--- a/packages/extension-chakra-store-locator/src/setup-app.ts
+++ b/packages/extension-chakra-store-locator/src/setup-app.ts
@@ -19,6 +19,7 @@ import {withStoreLocator} from './components/with-store-locator'
 import {Config} from './types'
 
 import StoreLocatorPage from './pages/store-locator'
+import {logger} from './logger'
 import extensionMeta from '../extension-meta.json'
 
 class StoreLocatorExtension extends ApplicationExtension<Config> {
@@ -30,8 +31,7 @@ class StoreLocatorExtension extends ApplicationExtension<Config> {
         const config = this.getConfig()
 
         if (!config.supportedCountries || config.supportedCountries.length === 0) {
-            // TODO: use our logger
-            console.warn(
+            logger.error(
                 '[extension-chakra-store-locator] Missing supportedCountries, this extension will not work.'
             )
         }

From 7173909c0eace5aa921a7569219ec7dfef3187dd Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Mon, 13 Jan 2025 08:20:43 -0800
Subject: [PATCH 05/12] add unit tests

---
 ...ional-commerce-sdk-react-provider.test.jsx | 96 +++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.test.jsx

diff --git a/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.test.jsx b/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.test.jsx
new file mode 100644
index 0000000000..21cc4be215
--- /dev/null
+++ b/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.test.jsx
@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2025, Salesforce, 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 {render, screen} from '@testing-library/react'
+import {withOptionalCommerceSdkReactProvider} from './with-optional-commerce-sdk-react-provider'
+import PropTypes from 'prop-types'
+
+// Mock external dependencies
+jest.mock('@salesforce/commerce-sdk-react', () => ({
+    useCommerceApi: jest.fn(),
+    CommerceApiProvider: ({children}) => <div data-testid="commerce-provider">{children}</div>
+}))
+
+jest.mock('@salesforce/pwa-kit-react-sdk/utils/url', () => ({
+    getAppOrigin: jest.fn(() => 'https://example.com')
+}))
+
+describe('withOptionalCommerceSdkReactProvider', () => {
+    const TestComponent = () => <div>Test Component</div>
+    const mockConfig = {
+        commerceApi: {
+            parameters: {
+                shortCode: 'test',
+                clientId: 'test-client',
+                organizationId: 'test-org',
+                siteId: 'test-site',
+                locale: 'en-US',
+                currency: 'USD'
+            },
+            proxyPath: '/api'
+        }
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('wraps component with CommerceApiProvider when no provider exists', () => {
+        const {useCommerceApi} = require('@salesforce/commerce-sdk-react')
+        useCommerceApi.mockImplementation(() => {
+            throw new Error('No provider')
+        })
+
+        const WrappedComponent = withOptionalCommerceSdkReactProvider(TestComponent, mockConfig)
+        const {container} = render(<WrappedComponent />)
+
+        expect(screen.getByTestId('commerce-provider')).toBeTruthy()
+        expect(screen.getByText('Test Component')).toBeTruthy()
+    })
+
+    it('does not wrap component when provider already exists', () => {
+        const {useCommerceApi} = require('@salesforce/commerce-sdk-react')
+        useCommerceApi.mockReturnValue({ ShopperProducts: {}, ShopperBaskets: {} })
+
+        const WrappedComponent = withOptionalCommerceSdkReactProvider(TestComponent, mockConfig)
+        const {container} = render(<WrappedComponent />)
+
+        expect(container.querySelector('[data-testid="commerce-provider"]')).toBeNull()
+        expect(screen.getByText('Test Component')).toBeTruthy()
+    })
+
+    it('passes props to wrapped component', () => {
+        const TestComponentWithProps = ({testProp}) => <div>{testProp}</div>
+        TestComponentWithProps.propTypes = {
+            testProp: PropTypes.string
+        }
+
+        const {useCommerceApi} = require('@salesforce/commerce-sdk-react')
+        useCommerceApi.mockImplementation(() => {
+            throw new Error('No provider')
+        })
+
+        const WrappedComponent = withOptionalCommerceSdkReactProvider(TestComponentWithProps, mockConfig)
+        render(<WrappedComponent testProp="test value" />)
+
+        expect(screen.getByText('test value')).toBeTruthy()
+    })
+
+    it('renders wrapped component without provider when config is missing', () => {
+        const {useCommerceApi} = require('@salesforce/commerce-sdk-react')
+        useCommerceApi.mockImplementation(() => {
+            throw new Error('No provider')
+        })
+
+        const invalidConfig = {}
+        const WrappedComponent = withOptionalCommerceSdkReactProvider(TestComponent, invalidConfig)
+        const {container} = render(<WrappedComponent />)
+
+        expect(container.querySelector('[data-testid="commerce-provider"]')).toBeNull()
+        expect(screen.getByText('Test Component')).toBeTruthy()
+    })
+}) 
\ No newline at end of file

From d69e3a255e8e6539b04933aaa5c1a5bccead2333 Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Mon, 13 Jan 2025 08:28:15 -0800
Subject: [PATCH 06/12] use applyHOCs

---
 packages/extension-chakra-store-locator/src/setup-app.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/extension-chakra-store-locator/src/setup-app.ts b/packages/extension-chakra-store-locator/src/setup-app.ts
index 083842d8eb..3c851e246c 100644
--- a/packages/extension-chakra-store-locator/src/setup-app.ts
+++ b/packages/extension-chakra-store-locator/src/setup-app.ts
@@ -11,6 +11,7 @@ import {RouteProps} from 'react-router-dom'
 
 // Platform Imports
 import {ApplicationExtension} from '@salesforce/pwa-kit-extension-sdk/react'
+import {applyHOCs} from '@salesforce/pwa-kit-extension-sdk/react/utils'
 
 // Local Imports
 import {withOptionalChakra} from './components/with-optional-chakra-provider'
@@ -36,7 +37,13 @@ class StoreLocatorExtension extends ApplicationExtension<Config> {
             )
         }
 
-        return withStoreLocator(withOptionalCommerceSdkReactProvider(withOptionalChakra(App), config), config)
+        const HOCs = [
+            (component: React.ComponentType<any>) => withStoreLocator(component, config),
+            (component: React.ComponentType<any>) => withOptionalCommerceSdkReactProvider(component, config),
+            (component: React.ComponentType<any>) => withOptionalChakra(component)
+        ]
+
+        return applyHOCs(App, HOCs)
     }
 
     extendRoutes(routes: RouteProps[]): RouteProps[] {

From cb4964fe1e9172325ea58d7704bf7edbc3082068 Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Mon, 13 Jan 2025 08:40:52 -0800
Subject: [PATCH 07/12] lint

---
 ...ional-commerce-sdk-react-provider.test.jsx | 19 ++++++++++++++-----
 ...h-optional-commerce-sdk-react-provider.tsx |  6 ++++--
 .../src/logger.ts                             |  6 ++++++
 .../src/setup-app.ts                          |  3 ++-
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.test.jsx b/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.test.jsx
index 21cc4be215..f6d1e7e796 100644
--- a/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.test.jsx
+++ b/packages/extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.test.jsx
@@ -9,10 +9,12 @@ import {render, screen} from '@testing-library/react'
 import {withOptionalCommerceSdkReactProvider} from './with-optional-commerce-sdk-react-provider'
 import PropTypes from 'prop-types'
 
-// Mock external dependencies
 jest.mock('@salesforce/commerce-sdk-react', () => ({
     useCommerceApi: jest.fn(),
-    CommerceApiProvider: ({children}) => <div data-testid="commerce-provider">{children}</div>
+    // eslint-disable-next-line react/prop-types
+    CommerceApiProvider: ({children}) => {
+        return <div data-testid="commerce-provider">{children}</div>
+    }
 }))
 
 jest.mock('@salesforce/pwa-kit-react-sdk/utils/url', () => ({
@@ -40,6 +42,7 @@ describe('withOptionalCommerceSdkReactProvider', () => {
     })
 
     it('wraps component with CommerceApiProvider when no provider exists', () => {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
         const {useCommerceApi} = require('@salesforce/commerce-sdk-react')
         useCommerceApi.mockImplementation(() => {
             throw new Error('No provider')
@@ -53,8 +56,9 @@ describe('withOptionalCommerceSdkReactProvider', () => {
     })
 
     it('does not wrap component when provider already exists', () => {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
         const {useCommerceApi} = require('@salesforce/commerce-sdk-react')
-        useCommerceApi.mockReturnValue({ ShopperProducts: {}, ShopperBaskets: {} })
+        useCommerceApi.mockReturnValue({ShopperProducts: {}, ShopperBaskets: {}})
 
         const WrappedComponent = withOptionalCommerceSdkReactProvider(TestComponent, mockConfig)
         const {container} = render(<WrappedComponent />)
@@ -69,18 +73,23 @@ describe('withOptionalCommerceSdkReactProvider', () => {
             testProp: PropTypes.string
         }
 
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
         const {useCommerceApi} = require('@salesforce/commerce-sdk-react')
         useCommerceApi.mockImplementation(() => {
             throw new Error('No provider')
         })
 
-        const WrappedComponent = withOptionalCommerceSdkReactProvider(TestComponentWithProps, mockConfig)
+        const WrappedComponent = withOptionalCommerceSdkReactProvider(
+            TestComponentWithProps,
+            mockConfig
+        )
         render(<WrappedComponent testProp="test value" />)
 
         expect(screen.getByText('test value')).toBeTruthy()
     })
 
     it('renders wrapped component without provider when config is missing', () => {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
         const {useCommerceApi} = require('@salesforce/commerce-sdk-react')
         useCommerceApi.mockImplementation(() => {
             throw new Error('No provider')
@@ -93,4 +102,4 @@ describe('withOptionalCommerceSdkReactProvider', () => {
         expect(container.querySelector('[data-testid="commerce-provider"]')).toBeNull()
         expect(screen.getByText('Test Component')).toBeTruthy()
     })
-}) 
\ No newline at end of file
+})
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
index 4380072c41..d8734f8c4d 100644
--- 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
@@ -31,7 +31,7 @@ const useHasCommerceApiProvider = () => {
     }
 
     return hasProvider
-} 
+}
 
 type WithOptionalCommerceSdkReactProvider = React.ComponentPropsWithoutRef<any>
 
@@ -51,7 +51,9 @@ export const withOptionalCommerceSdkReactProvider = <P extends object>(
             return <WrappedComponent {...(props as P)} />
         }
         if (!config.commerceApi || !config.commerceApi?.parameters) {
-            logger.error('CommerceApiProvider is not installed and no commerceApi config is provided, this extension may not work as expected.')
+            logger.error(
+                'CommerceApiProvider is not installed and no commerceApi config is provided, this extension may not work as expected.'
+            )
             return <WrappedComponent {...(props as P)} />
         }
         const appOrigin = getAppOrigin()
diff --git a/packages/extension-chakra-store-locator/src/logger.ts b/packages/extension-chakra-store-locator/src/logger.ts
index 6c27da2bbb..8f30ca05ab 100644
--- a/packages/extension-chakra-store-locator/src/logger.ts
+++ b/packages/extension-chakra-store-locator/src/logger.ts
@@ -1,3 +1,9 @@
+/*
+ * Copyright (c) 2025, Salesforce, 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 createLogger from '@salesforce/pwa-kit-runtime/utils/logger-factory'
 
 export const logger = createLogger({packageName: 'extension-chakra-store-locator'})
diff --git a/packages/extension-chakra-store-locator/src/setup-app.ts b/packages/extension-chakra-store-locator/src/setup-app.ts
index 3c851e246c..34e07c582d 100644
--- a/packages/extension-chakra-store-locator/src/setup-app.ts
+++ b/packages/extension-chakra-store-locator/src/setup-app.ts
@@ -39,7 +39,8 @@ 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>) =>
+                withOptionalCommerceSdkReactProvider(component, config),
             (component: React.ComponentType<any>) => withOptionalChakra(component)
         ]
 

From 5027ecc8f22b5d4fcca4a72244fb888cfcbfe46a Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Mon, 13 Jan 2025 16:05:53 -0800
Subject: [PATCH 08/12] try to fix ci error

---
 .../src/pages/checkout/index.test.js                          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/extension-chakra-storefront/src/pages/checkout/index.test.js b/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
index 5f66fac6ed..7cc6cd18f7 100644
--- a/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
+++ b/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
@@ -391,7 +391,7 @@ test('Can proceed through checkout steps as guest', async () => {
     // Fill out credit card payment form
     await user.type(screen.getByLabelText(/card number/i), '4111111111111111')
     await user.type(screen.getByLabelText(/name on card/i), 'Testy McTester')
-    await user.type(screen.getByLabelText(/expiration date/i), '1224')
+    await user.type(screen.getByLabelText(/expiration date/i), '1240')
     await user.type(screen.getByLabelText(/^security code$/i /* not "security code info" */), '123')
 
     // Same as shipping checkbox selected by default
@@ -482,7 +482,7 @@ test('Can proceed through checkout as registered customer', async () => {
     // (we no longer have saved payment methods)
     await user.type(screen.getByLabelText(/card number/i), '4111111111111111')
     await user.type(screen.getByLabelText(/name on card/i), 'Testy McTester')
-    await user.type(screen.getByLabelText(/expiration date/i), '1224')
+    await user.type(screen.getByLabelText(/expiration date/i), '1240')
     await user.type(screen.getByLabelText(/^security code$/i /* not "security code info" */), '123')
 
     // Same as shipping checkbox selected by default

From 532c84cb62067435bd7586cad5e1c4d7540c1684 Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Tue, 14 Jan 2025 09:18:00 -0800
Subject: [PATCH 09/12] try to fix ci error 2

---
 .../src/pages/checkout/index.test.js                      | 4 ++--
 .../app/pages/checkout/index.test.js                      | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/extension-chakra-storefront/src/pages/checkout/index.test.js b/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
index 7cc6cd18f7..bb5b444408 100644
--- a/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
+++ b/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
@@ -414,7 +414,7 @@ test('Can proceed through checkout steps as guest', async () => {
     // Verify applied payment and billing address
     expect(step3Content.getByText('Visa')).toBeInTheDocument()
     expect(step3Content.getByText('•••• 1111')).toBeInTheDocument()
-    expect(step3Content.getByText('12/2024')).toBeInTheDocument()
+    expect(step3Content.getByText('12/2040')).toBeInTheDocument()
 
     expect(step3Content.getByText('Tester McTesting')).toBeInTheDocument()
     expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
@@ -502,7 +502,7 @@ test('Can proceed through checkout as registered customer', async () => {
     // Verify applied payment and billing address
     expect(step3Content.getByText('Master Card')).toBeInTheDocument()
     expect(step3Content.getByText('•••• 5454')).toBeInTheDocument()
-    expect(step3Content.getByText('1/2030')).toBeInTheDocument()
+    expect(step3Content.getByText('1/2040')).toBeInTheDocument()
 
     expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
 
diff --git a/packages/template-retail-react-app/app/pages/checkout/index.test.js b/packages/template-retail-react-app/app/pages/checkout/index.test.js
index 82a377d6b0..58afe1775c 100644
--- a/packages/template-retail-react-app/app/pages/checkout/index.test.js
+++ b/packages/template-retail-react-app/app/pages/checkout/index.test.js
@@ -394,7 +394,7 @@ test('Can proceed through checkout steps as guest', async () => {
     // Fill out credit card payment form
     await user.type(screen.getByLabelText(/card number/i), '4111111111111111')
     await user.type(screen.getByLabelText(/name on card/i), 'Testy McTester')
-    await user.type(screen.getByLabelText(/expiration date/i), '1224')
+    await user.type(screen.getByLabelText(/expiration date/i), '1240')
     await user.type(screen.getByLabelText(/^security code$/i /* not "security code info" */), '123')
 
     // Same as shipping checkbox selected by default
@@ -417,7 +417,7 @@ test('Can proceed through checkout steps as guest', async () => {
     // Verify applied payment and billing address
     expect(step3Content.getByText('Visa')).toBeInTheDocument()
     expect(step3Content.getByText('•••• 1111')).toBeInTheDocument()
-    expect(step3Content.getByText('12/2024')).toBeInTheDocument()
+    expect(step3Content.getByText('12/2040')).toBeInTheDocument()
 
     expect(step3Content.getByText('Tester McTesting')).toBeInTheDocument()
     expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
@@ -485,7 +485,7 @@ test('Can proceed through checkout as registered customer', async () => {
     // (we no longer have saved payment methods)
     await user.type(screen.getByLabelText(/card number/i), '4111111111111111')
     await user.type(screen.getByLabelText(/name on card/i), 'Testy McTester')
-    await user.type(screen.getByLabelText(/expiration date/i), '1224')
+    await user.type(screen.getByLabelText(/expiration date/i), '1240')
     await user.type(screen.getByLabelText(/^security code$/i /* not "security code info" */), '123')
 
     // Same as shipping checkbox selected by default
@@ -505,7 +505,7 @@ test('Can proceed through checkout as registered customer', async () => {
     // Verify applied payment and billing address
     expect(step3Content.getByText('Master Card')).toBeInTheDocument()
     expect(step3Content.getByText('•••• 5454')).toBeInTheDocument()
-    expect(step3Content.getByText('1/2030')).toBeInTheDocument()
+    expect(step3Content.getByText('1/2040')).toBeInTheDocument()
 
     expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
 

From 04947432693feffd3db2cb26cfd3849e912da0c6 Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Tue, 14 Jan 2025 09:18:55 -0800
Subject: [PATCH 10/12] try to fix ci error 3

---
 .../src/pages/checkout/index.test.js                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension-chakra-storefront/src/pages/checkout/index.test.js b/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
index bb5b444408..9f4f477165 100644
--- a/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
+++ b/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
@@ -502,7 +502,7 @@ test('Can proceed through checkout as registered customer', async () => {
     // Verify applied payment and billing address
     expect(step3Content.getByText('Master Card')).toBeInTheDocument()
     expect(step3Content.getByText('•••• 5454')).toBeInTheDocument()
-    expect(step3Content.getByText('1/2040')).toBeInTheDocument()
+    expect(step3Content.getByText('12/2040')).toBeInTheDocument()
 
     expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
 

From c3f1d67cf14f0cf32fe79bd49a610d51e61d3073 Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Tue, 14 Jan 2025 09:27:30 -0800
Subject: [PATCH 11/12] try to fix ci error 4

---
 .../src/pages/checkout/index.test.js                      | 6 +++---
 .../app/pages/checkout/index.test.js                      | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/extension-chakra-storefront/src/pages/checkout/index.test.js b/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
index 9f4f477165..9938fc37ed 100644
--- a/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
+++ b/packages/extension-chakra-storefront/src/pages/checkout/index.test.js
@@ -155,8 +155,8 @@ beforeEach(() => {
                     paymentCard: {
                         cardType: 'Master Card',
                         creditCardExpired: false,
-                        expirationMonth: 1,
-                        expirationYear: 2030,
+                        expirationMonth: 12,
+                        expirationYear: 2040,
                         holder: 'Test McTester',
                         maskedNumber: '************5454',
                         numberLastDigits: '5454',
@@ -273,7 +273,7 @@ test('Can proceed through checkout steps as guest', async () => {
                         cardType: 'Visa',
                         creditCardExpired: false,
                         expirationMonth: 12,
-                        expirationYear: 2024,
+                        expirationYear: 2040,
                         holder: 'Testy McTester',
                         maskedNumber: '************1111',
                         numberLastDigits: '1111',
diff --git a/packages/template-retail-react-app/app/pages/checkout/index.test.js b/packages/template-retail-react-app/app/pages/checkout/index.test.js
index 58afe1775c..bdd33d4abf 100644
--- a/packages/template-retail-react-app/app/pages/checkout/index.test.js
+++ b/packages/template-retail-react-app/app/pages/checkout/index.test.js
@@ -158,8 +158,8 @@ beforeEach(() => {
                     paymentCard: {
                         cardType: 'Master Card',
                         creditCardExpired: false,
-                        expirationMonth: 1,
-                        expirationYear: 2030,
+                        expirationMonth: 12,
+                        expirationYear: 2040,
                         holder: 'Test McTester',
                         maskedNumber: '************5454',
                         numberLastDigits: '5454',
@@ -276,7 +276,7 @@ test('Can proceed through checkout steps as guest', async () => {
                         cardType: 'Visa',
                         creditCardExpired: false,
                         expirationMonth: 12,
-                        expirationYear: 2024,
+                        expirationYear: 2040,
                         holder: 'Testy McTester',
                         maskedNumber: '************1111',
                         numberLastDigits: '1111',
@@ -505,7 +505,7 @@ test('Can proceed through checkout as registered customer', async () => {
     // Verify applied payment and billing address
     expect(step3Content.getByText('Master Card')).toBeInTheDocument()
     expect(step3Content.getByText('•••• 5454')).toBeInTheDocument()
-    expect(step3Content.getByText('1/2040')).toBeInTheDocument()
+    expect(step3Content.getByText('12/2040')).toBeInTheDocument()
 
     expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
 

From f240cdc853767b9ae8d407980a3b43556550360f Mon Sep 17 00:00:00 2001
From: Kevin He <kevin.he@salesforce.com>
Date: Tue, 14 Jan 2025 09:31:44 -0800
Subject: [PATCH 12/12] empty commit