@W-20276592: Address autocompletion feature (#3484)

* @W-20276592: Address autocompletion feature

- Implemented address autocomplete dropdown using mock addresses
- Auto-fill address on choosing suggestion from dropdown
- Added Google API integration
- Sourced GCP API Key from Configuration API
- Added ShopperConfigurations hook for API key management
- Fixed accessibility, cleanup, and introduced caching by component
- Added translations and various fixes

* @W-20276592: clean up

Signed-off-by: d.phan <d.phan@salesforce.com>

* update API key rules

Signed-off-by: d.phan <d.phan@salesforce.com>

* quick fix

Signed-off-by: d.phan <d.phan@salesforce.com>

---------

Signed-off-by: d.phan <d.phan@salesforce.com>

Author: dannyphan2000

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,5 +1,7 @@
 ## v4.3.0-dev (Nov 05, 2025)
 
+- Upgrade to commerce-sdk-isomorphic v4.2.0 and introduce Shopper Configurations SCAPI integration [#3071](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3071)
+
 ## v4.2.0 (Nov 04, 2025)
 
 - Upgrade to commerce-sdk-isomorphic v4.0.1 [#3449](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3449)

packages/commerce-sdk-react/package-lock.json

@@ -40,7 +40,7 @@
     "version": "node ./scripts/version.js"
   },
   "dependencies": {
-    "commerce-sdk-isomorphic": "^4.0.1",
+    "commerce-sdk-isomorphic": "4.2.0",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0"
   },

packages/commerce-sdk-react/package.json

@@ -174,6 +174,14 @@ const DATA_MAP: AuthDataMap = {
         storageType: 'local',
         key: 'idp_access_token'
     },
+    idp_refresh_token: {
+        storageType: 'local',
+        key: 'idp_refresh_token'
+    },
+    dnt: {
+        storageType: 'local',
+        key: 'dnt'
+    },
     token_type: {
         storageType: 'local',
         key: 'token_type'

packages/commerce-sdk-react/src/auth/index.ts

@@ -56,5 +56,6 @@ export const CLIENT_KEYS = {
     SHOPPER_PROMOTIONS: 'shopperPromotions',
     SHOPPER_SEARCH: 'shopperSearch',
     SHOPPER_SEO: 'shopperSeo',
-    SHOPPER_STORES: 'shopperStores'
+    SHOPPER_STORES: 'shopperStores',
+    SHOPPER_CONFIGURATIONS: 'shopperConfigurations'
 } as const

packages/commerce-sdk-react/src/constant.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2023, 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 {CLIENT_KEYS} from '../../constant'
+import {ApiClients, CacheUpdateMatrix} from '../types'
+
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_CONFIGURATIONS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
+
+// ShopperConfigurations API is primarily for reading configuration data
+// No mutations are currently supported
+export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {}

packages/commerce-sdk-react/src/hooks/ShopperConfigurations/cache.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2023, 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 {useConfigurations} from './query'
+
+describe('ShopperConfigurations', () => {
+    describe('useConfigurations', () => {
+        it('should be defined', () => {
+            expect(useConfigurations).toBeDefined()
+        })
+    })
+})

packages/commerce-sdk-react/src/hooks/ShopperConfigurations/index.test.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+export * from './query'

packages/commerce-sdk-react/src/hooks/ShopperConfigurations/index.ts

@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2023, 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 nock from 'nock'
+import {
+    mockQueryEndpoint,
+    renderHookWithProviders,
+    waitAndExpectError,
+    waitAndExpectSuccess,
+    createQueryClient
+} from '../../test-utils'
+
+import {Argument} from '../types'
+import * as queries from './query'
+
+jest.mock('../../auth/index.ts', () => {
+    const {default: mockAuth} = jest.requireActual('../../auth/index.ts')
+    mockAuth.prototype.ready = jest.fn().mockResolvedValue({access_token: 'access_token'})
+    return mockAuth
+})
+
+type Queries = typeof queries
+const configurationsEndpoint = '/organizations/'
+// Not all endpoints use all parameters, but unused parameters are safely discarded
+const OPTIONS: Argument<Queries[keyof Queries]> = {
+    parameters: {organizationId: 'f_ecom_zzrmy_orgf_001'}
+}
+
+// Mock data for configurations
+const mockConfigurationsData = {
+    configurations: [
+        {
+            id: 'gcp',
+            value: 'test-gcp-api-key'
+        },
+        {
+            id: 'einstein',
+            value: 'test-einstein-api-key'
+        }
+    ]
+}
+
+describe('Shopper Configurations query hooks', () => {
+    beforeEach(() => nock.cleanAll())
+    afterEach(() => {
+        expect(nock.pendingMocks()).toHaveLength(0)
+    })
+
+    test('`useConfigurations` has meta.displayName defined', async () => {
+        mockQueryEndpoint(configurationsEndpoint, mockConfigurationsData)
+        const queryClient = createQueryClient()
+        const {result} = renderHookWithProviders(
+            () => {
+                return queries.useConfigurations(OPTIONS)
+            },
+            {queryClient}
+        )
+        await waitAndExpectSuccess(() => result.current)
+        expect(queryClient.getQueryCache().getAll()[0].meta?.displayName).toBe('useConfigurations')
+    })
+
+    test('`useConfigurations` returns data on success', async () => {
+        mockQueryEndpoint(configurationsEndpoint, mockConfigurationsData)
+        const {result} = renderHookWithProviders(() => {
+            return queries.useConfigurations(OPTIONS)
+        })
+        await waitAndExpectSuccess(() => result.current)
+        expect(result.current.data).toEqual(mockConfigurationsData)
+    })
+
+    test('`useConfigurations` returns error on error', async () => {
+        mockQueryEndpoint(configurationsEndpoint, {}, 400)
+        const {result} = renderHookWithProviders(() => {
+            return queries.useConfigurations(OPTIONS)
+        })
+        await waitAndExpectError(() => result.current)
+    })
+
+    test('`useConfigurations` handles 500 server error', async () => {
+        mockQueryEndpoint(configurationsEndpoint, {}, 500)
+        const {result} = renderHookWithProviders(() => {
+            return queries.useConfigurations(OPTIONS)
+        })
+        await waitAndExpectError(() => result.current)
+    })
+})

packages/commerce-sdk-react/src/hooks/ShopperConfigurations/query.test.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2023, 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 {UseQueryResult} from '@tanstack/react-query'
+import {ShopperConfigurations} from 'commerce-sdk-isomorphic'
+import {ApiClients, ApiQueryOptions, Argument, DataType, NullableParameters} from '../types'
+import {useQuery} from '../useQuery'
+import {mergeOptions, omitNullableParameters, pickValidParams} from '../utils'
+import * as queryKeyHelpers from './queryKeyHelpers'
+import {CLIENT_KEYS} from '../../constant'
+import useCommerceApi from '../useCommerceApi'
+
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_CONFIGURATIONS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
+
+/**
+ * Gets configuration information that encompasses toggles, preferences, and configuration that allow the application to be reactive to changes performed by the merchant, admin, or support engineer.
+ *
+ * @group ShopperConfigurations
+ * @category Query
+ * @parameter apiOptions - Options to pass through to `commerce-sdk-isomorphic`, with `null` accepted for unset API parameters.
+ * @parameter queryOptions - TanStack Query query options, with `enabled` by default set to check that all required API parameters have been set.
+ * @returns A TanStack Query query hook with data from the Shopper Configurations `getConfigurations` endpoint.
+ * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-configurations?meta=getConfigurations| Salesforce Developer Center} for more information about the API endpoint.
+ * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperconfigurations.shopperconfigurations-1.html#getconfigurations | `commerce-sdk-isomorphic` documentation} for more information on the parameters and returned data type.
+ * @see {@link https://tanstack.com/query/latest/docs/react/reference/useQuery | TanStack Query `useQuery` reference} for more information about the return value.
+ */
+export const useConfigurations = (
+    apiOptions: NullableParameters<Argument<Client['getConfigurations']>>,
+    queryOptions: ApiQueryOptions<Client['getConfigurations']> = {}
+): UseQueryResult<DataType<Client['getConfigurations']>> => {
+    type Options = Argument<Client['getConfigurations']>
+    type Data = DataType<Client['getConfigurations']>
+    const client = useCommerceApi(CLIENT_KEY)
+    const methodName = 'getConfigurations'
+    const requiredParameters = ShopperConfigurations.paramKeys[`${methodName}Required`]
+
+    // Parameters can be set in `apiOptions` or `client.clientConfig`
+    // we must merge them in order to generate the correct query key.
+    const netOptions = omitNullableParameters(mergeOptions(client, apiOptions || {}))
+    const parameters = pickValidParams(
+        netOptions.parameters,
+        ShopperConfigurations.paramKeys[methodName]
+    )
+    const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters)
+    // We don't use `netOptions` here because we manipulate the options in `useQuery`.
+    const method = async (options: Options) => await client[methodName](options)
+
+    queryOptions.meta = {
+        displayName: 'useConfigurations',
+        ...queryOptions.meta
+    }
+
+    // For some reason, if we don't explicitly set these generic parameters, the inferred type for
+    // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
+        method,
+        queryKey,
+        requiredParameters
+    })
+}