@salesforce/retail-react-app 8.3.0-nightly-20251209080224 → 8.3.0-preview.1

package/app/pages/checkout/util/checkout-context.js

@@ -11,12 +11,14 @@ import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-cur
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {useConfigurations} from '@salesforce/commerce-sdk-react'
 
 const CheckoutContext = React.createContext()
 
 export const CheckoutProvider = ({children}) => {
     const {data: customer} = useCurrentCustomer()
     const {data: basket, derivedData, isLoading: isBasketLoading} = useCurrentBasket()
+    const {data: configurations} = useConfigurations()
     const einstein = useEinstein()
     const [step, setStep] = useState()
     const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
@@ -105,7 +107,8 @@ export const CheckoutProvider = ({children}) => {
         step,
         STEPS,
         goToNextStep,
-        goToStep
+        goToStep,
+        configurations
     }
 
     return <CheckoutContext.Provider value={value}>{children}</CheckoutContext.Provider>

package/app/pages/checkout/util/google-api-provider.js

@@ -0,0 +1,45 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import {APIProvider} from '@vis.gl/react-google-maps'
+import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+
+/**
+ * Resolve the Google Cloud API key from the configurations
+ * User-defined environment variable (GOOGLE_CLOUD_API_KEY) always take precedence over the platform provided key
+ * If no custom key is set, the platform provided key is used (only if feature toggle is enabled in production)
+ */
+function resolveGoogleCloudAPIKey(configurations) {
+    const customKey = getConfig()?.app?.googleCloudAPI?.apiKey
+    if (customKey) {
+        return customKey
+    }
+
+    const platformProvidedKey = configurations?.configurations?.find(
+        (config) => config.id === 'gcp'
+    )?.value
+
+    return platformProvidedKey
+}
+
+export const GoogleAPIProvider = ({children}) => {
+    const {configurations} = useCheckout()
+    const googleCloudAPIKey = resolveGoogleCloudAPIKey(configurations)
+
+    return googleCloudAPIKey ? (
+        <APIProvider apiKey={googleCloudAPIKey}>{children}</APIProvider>
+    ) : (
+        children
+    )
+}
+
+GoogleAPIProvider.propTypes = {
+    googleCloudAPIKey: PropTypes.string,
+    children: PropTypes.node.isRequired
+}

package/app/pages/checkout/util/google-api-provider.test.js

@@ -0,0 +1,395 @@
+/*
+ * 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} from '@testing-library/react'
+import {GoogleAPIProvider} from '@salesforce/retail-react-app/app/pages/checkout/util/google-api-provider'
+
+// Mock the dependencies
+const mockUseCheckout = jest.fn()
+const mockGetConfig = jest.fn()
+
+jest.mock('@salesforce/retail-react-app/app/pages/checkout/util/checkout-context', () => ({
+    useCheckout: () => mockUseCheckout()
+}))
+
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: () => mockGetConfig()
+}))
+
+jest.mock('@vis.gl/react-google-maps', () => ({
+    // eslint-disable-next-line react/prop-types
+    APIProvider: ({children, apiKey}) => (
+        <div data-testid="api-provider" data-api-key={apiKey}>
+            {children}
+        </div>
+    )
+}))
+
+describe('GoogleAPIProvider', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    afterEach(() => {
+        jest.resetModules()
+    })
+
+    test('should render children directly when platform provided key is not present and no custom key', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: []
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {}
+        })
+
+        const {getByTestId, queryByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        expect(getByTestId('test-child')).toBeInTheDocument()
+        expect(queryByTestId('api-provider')).not.toBeInTheDocument()
+    })
+
+    test('should render children directly when configurations is undefined and no custom key', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: undefined
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {}
+        })
+
+        const {getByTestId, queryByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        expect(getByTestId('test-child')).toBeInTheDocument()
+        expect(queryByTestId('api-provider')).not.toBeInTheDocument()
+    })
+
+    test('should render children directly when configurations is null and no custom key', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: null
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {}
+        })
+
+        const {getByTestId, queryByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        expect(getByTestId('test-child')).toBeInTheDocument()
+        expect(queryByTestId('api-provider')).not.toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider when platform provided key is available and no custom key is configured', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: [
+                    {
+                        id: 'gcp',
+                        value: 'platform-provided-key'
+                    }
+                ]
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {}
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'platform-provided-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider when platform provided key is available and custom key is not configured', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: [
+                    {
+                        id: 'gcp',
+                        value: 'platform-provided-key'
+                    }
+                ]
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {}
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'platform-provided-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider with platform key when custom key is empty string', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: [
+                    {
+                        id: 'gcp',
+                        value: 'platform-provided-key'
+                    }
+                ]
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {
+                googleCloudAPI: {
+                    apiKey: ''
+                }
+            }
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'platform-provided-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider with platform key when custom key is null', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: [
+                    {
+                        id: 'gcp',
+                        value: 'platform-provided-key'
+                    }
+                ]
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {
+                googleCloudAPI: {
+                    apiKey: null
+                }
+            }
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'platform-provided-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider with platform key when custom key is undefined', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: [
+                    {
+                        id: 'gcp',
+                        value: 'platform-provided-key'
+                    }
+                ]
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {
+                googleCloudAPI: {}
+            }
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'platform-provided-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider with custom key when custom key is configured', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: [
+                    {
+                        id: 'gcp',
+                        value: 'platform-provided-key'
+                    }
+                ]
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {
+                googleCloudAPI: {
+                    apiKey: 'custom-api-key'
+                }
+            }
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'custom-api-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider with custom key when custom key is configured and platform key is not present', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: []
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {
+                googleCloudAPI: {
+                    apiKey: 'custom-api-key'
+                }
+            }
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'custom-api-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider with custom key when custom key is configured and configurations is undefined', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: undefined
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {
+                googleCloudAPI: {
+                    apiKey: 'custom-api-key'
+                }
+            }
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'custom-api-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should wrap children in APIProvider with custom key when custom key is configured and configurations is null', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: null
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {
+                googleCloudAPI: {
+                    apiKey: 'custom-api-key'
+                }
+            }
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'custom-api-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+
+    test('should handle multiple configurations and find the correct gcp one', () => {
+        mockUseCheckout.mockReturnValue({
+            configurations: {
+                configurations: [
+                    {
+                        id: 'other-config',
+                        value: 'other-value'
+                    },
+                    {
+                        id: 'gcp',
+                        value: 'platform-provided-key'
+                    },
+                    {
+                        id: 'another-config',
+                        value: 'another-value'
+                    }
+                ]
+            }
+        })
+
+        mockGetConfig.mockReturnValue({
+            app: {}
+        })
+
+        const {getByTestId} = render(
+            <GoogleAPIProvider>
+                <div data-testid="test-child">Test Child</div>
+            </GoogleAPIProvider>
+        )
+
+        const apiProvider = getByTestId('api-provider')
+        expect(apiProvider).toBeInTheDocument()
+        expect(apiProvider).toHaveAttribute('data-api-key', 'platform-provided-key')
+        expect(getByTestId('test-child')).toBeInTheDocument()
+    })
+})

package/app/ssr.js

@@ -359,13 +359,17 @@ const {handler} = runtime.createHandler(options, (app) => {
                     ],
                     'script-src': [
                         // Used by the service worker in /worker/main.js
-                        'storage.googleapis.com'
+                        'storage.googleapis.com',
+                        'maps.googleapis.com',
+                        'places.googleapis.com'
                     ],
                     'connect-src': [
                         // Connect to Einstein APIs
                         'api.cquotient.com',
                         // Connect to DataCloud APIs
                         '*.c360a.salesforce.com',
+                        'maps.googleapis.com',
+                        'places.googleapis.com',
                         // Connect to SCRT2 URLs
                         '*.salesforce-scrt.com'
                     ],

package/app/static/translations/compiled/en-GB.json

@@ -407,6 +407,12 @@
       "value": "You Might Also Like"
     }
   ],
+  "addressSuggestionDropdown.suggested": [
+    {
+      "type": 0,
+      "value": "SUGGESTED"
+    }
+  ],
   "auth_modal.button.close.assistive_msg": [
     {
       "type": 0,

package/app/static/translations/compiled/en-US.json

@@ -407,6 +407,12 @@
       "value": "You Might Also Like"
     }
   ],
+  "addressSuggestionDropdown.suggested": [
+    {
+      "type": 0,
+      "value": "SUGGESTED"
+    }
+  ],
   "auth_modal.button.close.assistive_msg": [
     {
       "type": 0,

package/app/static/translations/compiled/en-XA.json

@@ -839,6 +839,20 @@
       "value": "]"
     }
   ],
+  "addressSuggestionDropdown.suggested": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "ŞŬƓƓḖŞŦḖḒ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "auth_modal.button.close.assistive_msg": [
     {
       "type": 0,
@@ -10499,4 +10513,4 @@
       "value": "]"
     }
   ]
-}
+}

package/app/theme/components/project/swatch-group.js

@@ -41,7 +41,7 @@ export default {
                 marginRight: 2,
                 marginLeft: 0,
                 marginBottom: 2,
-                color: `${props.selected ? 'black' : 'gray.200'}`,
+                color: `${props.selected ? 'black' : 'gray.600'}`,
                 border: `${props.selected ? '1px' : '0'}`,
                 _hover: {
                     borderColor: `${props.selected ? 'black' : 'gray.200'}`,