W-21432256: Few follow up fixes to address Basket V2-V1 gaps and content security policy headers

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## v5.1.0-dev
 - Add Page Designer Support [#3727](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3727)
 - Bump commerce-sdk-isomorphic to 5.1.0 [#3725](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3725)
+- Update ShopperBasketsV2 hooks documentation and query keys
 - Add Node 24 support. Drop Node 16 support. [#3652](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3652)
 - Add Shopper Consents API support [#3674](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3674)
 

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

@@ -183,7 +183,7 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
             ],
             remove: [
                 // We want to fuzzy match all queryKeys with `basketId` in their path
-                // [`/commerce-sdk-react,/organizations/,${organization},/baskets/,${basketId}`]
+                // [`/commerce-sdk-react,/organizations/,${organization},/baskets/v2/,${basketId}`]
                 {queryKey: getBasket.path(parameters)}
             ]
         }

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

@@ -10,7 +10,7 @@ import {cacheUpdateMatrix} from './cache'
 import {ShopperBasketsMutations as mutations} from './mutation'
 import * as queries from './query'
 
-describe('Shopper Baskets hooks', () => {
+describe('Shopper Baskets V2 hooks', () => {
     test('all endpoints have hooks', () => {
         // unimplemented = SDK method exists, but no query hook or value in mutations enum
         const unimplemented = getUnimplementedEndpoints(ShopperBasketsV2, queries, mutations)

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023, Salesforce, Inc.
+ * Copyright (c) 2026, 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

packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.test.ts

@@ -203,7 +203,7 @@ const emptyResponseTestCases = [
 // Most test cases only apply to non-empty response test cases, some (error handling) can include deleteBasket
 const allTestCases = [...nonEmptyResponseTestCases, ...emptyResponseTestCases]
 
-describe('ShopperBaskets mutations', () => {
+describe('ShopperBasketsV2 mutations', () => {
     const storedCustomerIdKey = `customer_id_${DEFAULT_TEST_CONFIG.siteId}`
     beforeAll(() => {
         // Make sure we don't accidentally overwrite something before setting up our test state

packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.ts

@@ -15,8 +15,8 @@ const CLIENT_KEY = CLIENT_KEYS.SHOPPER_BASKETS_V2
 type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 
 /**
- * Mutations available for Shopper Baskets.
- * @group ShopperBaskets
+ * Mutations available for Shopper Baskets V2.
+ * @group ShopperBasketsV2
  * @category Mutation
  * @enum
  */
@@ -165,16 +165,16 @@ export const ShopperBasketsMutations = {
 } as const
 
 /**
- * Type for Shopper Baskets Mutation.
- * @group ShopperBaskets
+ * Type for Shopper Baskets V2 Mutation.
+ * @group ShopperBasketsV2
  * @category Mutation
  */
 export type ShopperBasketsMutation =
     (typeof ShopperBasketsMutations)[keyof typeof ShopperBasketsMutations]
 
 /**
- * Mutation hook for Shopper Baskets.
- * @group ShopperBaskets
+ * Mutation hook for Shopper Baskets V2.
+ * @group ShopperBasketsV2
  * @category Mutation
  */
 export function useShopperBasketsMutation<Mutation extends ShopperBasketsMutation>(

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

@@ -41,7 +41,7 @@ const testMap: TestMap = {
 }
 // Type assertion is necessary because `Object.entries` is limited
 const testCases = Object.entries(testMap) as Array<[keyof TestMap, TestMap[keyof TestMap]]>
-describe('Shopper Baskets query hooks', () => {
+describe('Shopper Baskets V2 query hooks', () => {
     beforeEach(() => nock.cleanAll())
     afterEach(() => {
         expect(nock.pendingMocks()).toHaveLength(0)

packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.ts

@@ -18,11 +18,11 @@ type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 
 /**
  * Gets a basket.
- * @group ShopperBaskets
+ * @group ShopperBasketsV2
  * @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 Baskets `getBasket` endpoint.
+ * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getBasket` endpoint.
  * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getBasket| Salesforce Developer Center} for more information about the API endpoint.
  * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#getbasket | `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.
@@ -63,11 +63,11 @@ export const useBasket = (
 }
 /**
  * Gets applicable payment methods for an existing basket considering the open payment amount only.
- * @group ShopperBaskets
+ * @group ShopperBasketsV2
  * @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 Baskets `getPaymentMethodsForBasket` endpoint.
+ * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getPaymentMethodsForBasket` endpoint.
  * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getPaymentMethodsForBasket| Salesforce Developer Center} for more information about the API endpoint.
  * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#getpaymentmethodsforbasket | `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.
@@ -108,11 +108,11 @@ export const usePaymentMethodsForBasket = (
 }
 /**
  * Gets applicable price books for an existing basket.
- * @group ShopperBaskets
+ * @group ShopperBasketsV2
  * @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 Baskets `getPriceBooksForBasket` endpoint.
+ * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getPriceBooksForBasket` endpoint.
  * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getPriceBooksForBasket| Salesforce Developer Center} for more information about the API endpoint.
  * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#getpricebooksforbasket | `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.
@@ -153,11 +153,11 @@ export const usePriceBooksForBasket = (
 }
 /**
  * Gets the applicable shipping methods for a certain shipment of a basket.
- * @group ShopperBaskets
+ * @group ShopperBasketsV2
  * @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 Baskets `getShippingMethodsForShipment` endpoint.
+ * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getShippingMethodsForShipment` endpoint.
  * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getShippingMethodsForShipment| Salesforce Developer Center} for more information about the API endpoint.
  * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#getshippingmethodsforshipment | `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.
@@ -198,11 +198,11 @@ export const useShippingMethodsForShipment = (
 }
 /**
  * This method gives you the external taxation data set by the PUT taxes API. This endpoint can be called only if external taxation mode was used for basket creation. See POST /baskets for more information.
- * @group ShopperBaskets
+ * @group ShopperBasketsV2
  * @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 Baskets `getTaxesFromBasket` endpoint.
+ * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getTaxesFromBasket` endpoint.
  * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getTaxesFromBasket| Salesforce Developer Center} for more information about the API endpoint.
  * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#gettaxesfrombasket | `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.

packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/queryKeyHelpers.ts

@@ -16,15 +16,15 @@ export type QueryKeys = {
         '/commerce-sdk-react',
         '/organizations/',
         string | undefined,
-        '/baskets/',
+        '/baskets/v2/',
         string | undefined,
         Params<'getBasket'>
     ]
     getPaymentMethodsForBasket: [
         '/commerce-sdk-react',
         '/organizations/',
         string | undefined,
-        '/baskets/',
+        '/baskets/v2/',
         string | undefined,
         '/payment-methods',
         Params<'getPaymentMethodsForBasket'>
@@ -33,7 +33,7 @@ export type QueryKeys = {
         '/commerce-sdk-react',
         '/organizations/',
         string | undefined,
-        '/baskets/',
+        '/baskets/v2/',
         string | undefined,
         '/price-books',
         Params<'getPriceBooksForBasket'>
@@ -42,7 +42,7 @@ export type QueryKeys = {
         '/commerce-sdk-react',
         '/organizations/',
         string | undefined,
-        '/baskets/',
+        '/baskets/v2/',
         string | undefined,
         '/shipments/',
         string | undefined,
@@ -53,7 +53,7 @@ export type QueryKeys = {
         '/commerce-sdk-react',
         '/organizations/',
         string | undefined,
-        '/baskets/',
+        '/baskets/v2/',
         string | undefined,
         '/taxes',
         Params<'getTaxesFromBasket'>
@@ -74,7 +74,7 @@ export const getBasket: QueryKeyHelper<'getBasket'> = {
         '/commerce-sdk-react',
         '/organizations/',
         params?.organizationId,
-        '/baskets/',
+        '/baskets/v2/',
         params?.basketId
     ],
     queryKey: (params: Params<'getBasket'>) => {
@@ -90,7 +90,7 @@ export const getPaymentMethodsForBasket: QueryKeyHelper<'getPaymentMethodsForBas
         '/commerce-sdk-react',
         '/organizations/',
         params?.organizationId,
-        '/baskets/',
+        '/baskets/v2/',
         params?.basketId,
         '/payment-methods'
     ],
@@ -107,7 +107,7 @@ export const getPriceBooksForBasket: QueryKeyHelper<'getPriceBooksForBasket'> =
         '/commerce-sdk-react',
         '/organizations/',
         params?.organizationId,
-        '/baskets/',
+        '/baskets/v2/',
         params?.basketId,
         '/price-books'
     ],
@@ -124,7 +124,7 @@ export const getShippingMethodsForShipment: QueryKeyHelper<'getShippingMethodsFo
         '/commerce-sdk-react',
         '/organizations/',
         params?.organizationId,
-        '/baskets/',
+        '/baskets/v2/',
         params?.basketId,
         '/shipments/',
         params?.shipmentId,
@@ -143,7 +143,7 @@ export const getTaxesFromBasket: QueryKeyHelper<'getTaxesFromBasket'> = {
         '/commerce-sdk-react',
         '/organizations/',
         params?.organizationId,
-        '/baskets/',
+        '/baskets/v2/',
         params?.basketId,
         '/taxes'
     ],

packages/pwa-kit-create-app/CHANGELOG.md

@@ -1,5 +1,5 @@
 ## v3.17.0-dev
-- Add Salesforce Payments configuration to generated projects
+- Add Salesforce Payments configuration to generated projects [#3725] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3725)
 - Clear verdaccio npm cache during project generation [#3652](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3652)
 - Add Node 24 support, remove legacy `url` module import. Drop Node 16 support [#3652](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3652)
 

packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs

@@ -160,10 +160,9 @@ module.exports = {
         // Salesforce Payments configuration
         // Set enabled to true to enable Salesforce Payments (requires the Salesforce Payments feature toggle to be enabled on the Commerce Cloud instance).
         // Set enabled to false to disable Salesforce Payments on the storefront (the Commerce Cloud feature toggle is unaffected).
-        // sdkUrl and metadataUrl are hosted on your Commerce Cloud instance. Replace <hostname> with your instance hostname.
-        // This may be a demandware.net hostname (e.g., myinstance.unified.demandware.net) or a vanity/custom hostname.
-        //   sdkUrl:       'https://<hostname>/on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js'
-        //   metadataUrl:  'https://<hostname>/on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json'
+        // Set the sdkUrl and metadataUrl values to point to your Commerce Cloud instance host by replacing the [bm_or_vanity_host] placeholder with your Business Manager or vanity URL host name.
+        //   sdkUrl:       'https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js'
+        //   metadataUrl:  'https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json'
         sfPayments: {
             enabled: false,
             sdkUrl: '',

packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/ssr.js.hbs

@@ -33,9 +33,14 @@ const options = {
     port: 3000,
 
     // The protocol on which the development Express app listens.
+    // Set DEV_SERVER_PROTOCOL to 'https' for HTTPS; defaults to 'http' when unset.
     // Note that http://localhost is treated as a secure context for development,
     // except by Safari.
-    protocol: 'http',
+    protocol: process.env.DEV_SERVER_PROTOCOL || 'http',
+
+    // Optional. Path to SSL certificate (.pem) for HTTPS development. Typically a
+    // self-signed cert for localhost; set DEV_SERVER_SSL_FILE_PATH when using https.
+    sslFilePath: process.env.DEV_SERVER_SSL_FILE_PATH,
 
     // Option for whether to set up a special endpoint for handling
     // private SLAS clients
@@ -346,7 +351,9 @@ const {handler} = runtime.createHandler(options, (app) => {
                 // Default source for product images - replace with your CDN
                 '*.commercecloud.salesforce.com',
                 '*.demandware.net',
-                '*.adyen.com' // Payment gateways
+                '*.adyen.com', // Payment gateways
+                'pay.google.com', // Google Pay payment handler icon
+                'www.gstatic.com' // optional, if icon is on gstatic
             ],
             'script-src': [
                 // Used by the service worker in /worker/main.js
@@ -373,13 +380,20 @@ const {handler} = runtime.createHandler(options, (app) => {
                 // Connect to SCRT2 URLs
                 '*.salesforce-scrt.com',
                 // Payment gateways
+                // Note: Google Pay requires different CSP entries depending on the integration and environment.
+                // - 'pay.google.com' and 'payments.google.com' are generally needed for the SDK to load and create payment tokens.
+                // - 'google.com/pay/' and 'www.google.com/pay/' may be required for certain flows (especially with Adyen) or in some browsers
+                //   where the interactive payment sheet makes server calls directly to google.com/pay.
+                // - You may need to adjust these URLs based on your environments.
                 '*.demandware.net', // Used to load a valid payment scripts in test environment
                 '*.adyen.com',
                 '*.paypal.com',
                 'pay.google.com',
                 'payments.google.com',
-                'google.com',
-                'www.google.com'
+                'google.com/pay',
+                'google.com/pay/',
+                'www.google.com/pay',
+                'www.google.com/pay/'
             ],
             'frame-src': [
                 // Allow frames from Salesforce site.com (Needed for MIAW)