Add a default commerce api provider to store locator extension by kevinxh · Pull Request #2194 · SalesforceCommerceCloud/pwa-kit

kevinxh · 2025-01-09T19:34:46Z

Description

This PR adds a default CommerceApiProvider to the store locator extension. This allows the extension to be run as a standalone project, without having to be coupled with the storefront extension. Before this change, the store locator page throws error by default.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

added optional commerce api provider to the store locator extension

How to Test-Drive This PR

npm start in the typescript-minimal example project, add configs if necessary

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

kevinxh · 2025-01-09T23:08:07Z

.../extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx

+        if (!config.commerceApi || !config.commerceApi?.parameters) {
+            return <WrappedComponent {...(props as P)} />
+        }


It would be nice if there is a way to "automatically" detect the existence of the CommerceApiProvider.

I wish the commerce-sdk-react package can throw a "Context not found" error, but currently it throws a weird error

pwa-kit-react-sdk.react-rendering.render ERROR TypeError: Cannot read properties of undefined (reading 'clientConfig') at mergeOptions (/Users/kevin.he/dev/pwa-kit/packages/template-typescript-minimal/build/main-server.js:9348:56) at useSearchStores (/Users/kevin.he/dev/pwa-kit/packages/template-typescript-minimal/build/main-server.js:7780:81)

I'm hesitant to catch this "unofficial" error

I'm going to create a ticket to fix it in the sdk

As mentioned in our meeting, it is a common pattern to use a hook to see if it throws or not like this:

import {useCommerceApi} from '@salesforce/commerce-sdk-react' const hasCommerceApiProvider = () => { const hasProvider = true try { const api = useCommerceApi() // you can technically use other hooks here, but we might want to stick to using one that has it's own context defined in the lib, and not one relying on react query contexts. } catch () { hasProvider = false } return hasProvider }

Then inside this file you can use this locally defined hook to determine if there is already a provider.

bendvc · 2025-01-09T23:23:23Z

.../extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2024, salesforce.com, inc.


Get with the times man.. it's 2025 😄

bendvc · 2025-01-09T23:25:18Z

.../extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx

+import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
+import {UserConfig} from '../types/config'
+
+type WithOptionalCommerceSdkReactProvider = React.ComponentPropsWithoutRef<any>


I know this comment isn't related to what you are implementing in your PR.. but seeing any triggered me to ask a question.

I'm not sure if there is a better option for this, maybe I should use unknown? since the underlying wrapped component props is unknown?

bendvc · 2025-01-09T23:37:33Z

.../extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx

+ * @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>(


Not required, but if this is going to be a pattern that we intend on suggesting extension developers use, then it might be worth while to create a utility that will take a provider component and a hook that is used to determine if there is a preexisting provider already and spit out an optional provider. Something like this:

import {withOptional} from '@salesforce/pwa-kit-react-sdk/...' import {useCommerceApi} from '@salesforce/commerce-sdk-react' const withOptionalCommerceSdkReactprovider = withOptional(CommerceApiProvider, {assertionHook: useCommerceApi})

Where the first arg is the component that you want to optionally wrap and assertionHook option is a hook that will best tested to see if it returns a truthy value.

bendvc · 2025-01-09T23:38:26Z

packages/extension-chakra-store-locator/src/types/config.ts

+    commerceApi?: {
+        proxyPath: string
+        parameters: {
+            shortCode: string
+            clientId: string
+            organizationId: string
+            siteId: string
+            locale: string
+            currency: string
+        }
+    }


bendvc · 2025-01-10T22:09:43Z

.../extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx

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


thanks to your good suggestion!

bendvc · 2025-01-10T22:13:34Z

.../extension-chakra-store-locator/src/components/with-optional-commerce-sdk-react-provider.tsx

+        if (!config.commerceApi || !config.commerceApi?.parameters) {
+            return <WrappedComponent {...(props as P)} />
+        }


Should we be we be warning or erroring out don't have a configuration supplied instead of not using the provider. I think thing would end up erroring out and that error wouldn't be as close to the source as this warning/error.

added a logger.error

bendvc · 2025-01-10T22:17:09Z

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

        }

-        return withStoreLocator(withOptionalChakra(App), config)
+        return withStoreLocator(withOptionalCommerceSdkReactProvider(withOptionalChakra(App), config), config)


There is a utility in the extensibility sdk that allows you to apply multiple hoc's. import {applyHOCs} from '@salesforce/pwa-kit-extension-sdk/react/utils' Can you give that a shot? It's possible that it might require some modification to allow each hoc to provide it's own configuration. But I think it's worth it since extension developers will end up using that utility .

…mmerce-provider-store-locator

bendvc · 2025-01-14T21:02:01Z

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

+        const HOCs = [
+            (component: React.ComponentType<any>) => withStoreLocator(component, config),
+            (component: React.ComponentType<any>) =>
+                withOptionalCommerceSdkReactProvider(component, config),
+            (component: React.ComponentType<any>) => withOptionalChakra(component)
+        ]


add a default commerce api provider to store locator extension

7a79859

kevinxh requested a review from a team as a code owner January 9, 2025 19:34

fix comments

02349dd

kevinxh commented Jan 9, 2025

View reviewed changes

bendvc reviewed Jan 9, 2025

View reviewed changes

detect commerce api provider

8320948

bendvc reviewed Jan 10, 2025

View reviewed changes

kevinxh added 9 commits January 13, 2025 08:13

add logger

fc5b271

add unit tests

7173909

use applyHOCs

d69e3a2

Merge branch 'feature/extensibility-v2' into extensibility/default-co…

2020b94

…mmerce-provider-store-locator

lint

cb4964f

try to fix ci error

5027ecc

try to fix ci error 2

532c84c

try to fix ci error 3

0494743

try to fix ci error 4

c3f1d67

kevinxh added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Jan 14, 2025

kevinxh added 2 commits January 14, 2025 09:31

empty commit

f240cdc

resolve merge conflicts

790c11b

bendvc reviewed Jan 14, 2025

View reviewed changes

bendvc approved these changes Jan 14, 2025

View reviewed changes

kevinxh merged commit 9363706 into feature/extensibility-v2 Jan 14, 2025
23 of 26 checks passed

kevinxh deleted the extensibility/default-commerce-provider-store-locator branch January 14, 2025 22:08

		@@ -0,0 +1,48 @@
		/*
		* Copyright (c) 2024, salesforce.com, inc.

Conversation

kevinxh commented Jan 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kevinxh Jan 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kevinxh Jan 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kevinxh commented Jan 9, 2025 •

edited

Loading

kevinxh Jan 9, 2025 •

edited

Loading

kevinxh Jan 13, 2025 •

edited

Loading