Simplify hooks logic

packages/commerce-sdk-react/src/hooks/ShopperBaskets/config.ts

@@ -0,0 +1,79 @@
+/*
+ * 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 {ShopperBasketsTypes} from 'commerce-sdk-isomorphic'
+import {ApiClients, CacheUpdateMatrix} from '../types'
+import {CacheUpdate} from '../types'
+
+const updateBasketQuery = (basketId?: string): CacheUpdate => {
+    // TODO: we're missing headers, rawResponse -> not only {basketId}
+    const arg = {basketId}
+    return basketId
+        ? {
+              update: [['/baskets', basketId, arg]]
+          }
+        : {}
+}
+
+const removeBasketQuery = (basketId?: string): CacheUpdate => {
+    const arg = {basketId}
+    return basketId
+        ? {
+              remove: [['/baskets', basketId, arg]]
+          }
+        : {}
+}
+
+const invalidateCustomerBasketsQuery = (customerId: string | null): CacheUpdate => {
+    // TODO: should we use arg here or not? The invalidate method does not need exact query key.
+    const arg = {customerId}
+    return customerId
+        ? {
+              invalidate: [['/customers', customerId, '/baskets', arg]]
+          }
+        : {}
+}
+
+const updateBasketFromRequest = (
+    customerId: string | null,
+    params: {
+        parameters: ShopperBasketsTypes.Basket
+    }
+): CacheUpdate => ({
+    ...updateBasketQuery(params.parameters.basketId),
+    ...invalidateCustomerBasketsQuery(customerId)
+})
+
+const updateBasketFromResponse = (
+    customerId: string | null,
+    params: unknown, // not used,
+    response: ShopperBasketsTypes.Basket
+): CacheUpdate => ({
+    ...updateBasketQuery(response.basketId),
+    ...invalidateCustomerBasketsQuery(customerId)
+})
+
+export const cacheUpdateMatrix: CacheUpdateMatrix<ApiClients['shopperBaskets']> = {
+    addCouponToBasket: updateBasketFromRequest,
+    addItemToBasket: updateBasketFromRequest,
+    removeItemFromBasket: updateBasketFromRequest,
+    addPaymentInstrumentToBasket: updateBasketFromRequest,
+    createBasket: updateBasketFromResponse, // Response!
+    deleteBasket: (customerId, params): CacheUpdate => ({
+        ...invalidateCustomerBasketsQuery(customerId),
+        ...removeBasketQuery(params.parameters.basketId)
+    }),
+    mergeBasket: updateBasketFromResponse, // Response!
+    removeCouponFromBasket: updateBasketFromRequest,
+    removePaymentInstrumentFromBasket: updateBasketFromRequest,
+    updateBasket: updateBasketFromRequest,
+    updateBillingAddressForBasket: updateBasketFromRequest,
+    updateCustomerForBasket: updateBasketFromRequest,
+    updateItemInBasket: updateBasketFromRequest,
+    updatePaymentInstrumentInBasket: updateBasketFromRequest,
+    updateShippingAddressForShipment: updateBasketFromRequest,
+    updateShippingMethodForShipment: updateBasketFromRequest
+}

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

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

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022, Salesforce, Inc.
+ * 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
@@ -13,6 +13,8 @@ import {
     assertUpdateQuery,
     DEFAULT_TEST_HOST,
     mockMutationEndpoints,
+    NEW_DATA,
+    OLD_DATA,
     renderHookWithProviders
 } from '../../test-utils'
 import {
@@ -21,7 +23,7 @@ import {
     useShopperBasketsMutation
 } from './mutation'
 import {useBasket} from './query'
-import {useCustomerBaskets} from '../ShopperCustomers'
+import {useCustomerBaskets} from '../ShopperCustomers/query'
 import {CacheUpdateMatrixElement} from '../utils'
 
 const CUSTOMER_ID = 'CUSTOMER_ID'
@@ -42,10 +44,7 @@ jest.mock('../useCustomerId.ts', () => {
     return jest.fn().mockReturnValue(CUSTOMER_ID)
 })
 
-type MutationPayloads = {
-    [key in ShopperBasketsMutationType]?: {body: any; parameters: any}
-}
-const mutationPayloads: MutationPayloads = {
+const mutationPayloads = {
     updateBasket: {
         parameters: {basketId: BASKET_ID},
         body: {}
@@ -110,27 +109,9 @@ const mutationPayloads: MutationPayloads = {
         parameters: {basketId: BASKET_ID, shipmentId: SHIPMENT_ID},
         body: {id: '001'}
     }
-}
-const oldCustomerBaskets = {
-    total: 1,
-    baskets: [{basketId: BASKET_ID, hello: 'world'}]
-}
-
-const newCustomerBaskets = {
-    total: 1,
-    baskets: [{basketId: BASKET_ID, hello: 'world_modified'}]
-}
+} as const
 
-const oldBasket = {
-    basketId: BASKET_ID,
-    hello: 'world'
-}
-
-const newBasket = {
-    basketId: BASKET_ID,
-    hello: 'world_modified'
-}
-const tests = (Object.keys(mutationPayloads) as ShopperBasketsMutationType[]).map(
+const tests = (Object.keys(mutationPayloads) as Array<keyof typeof mutationPayloads>).map(
     (mutationName) => {
         const payload = mutationPayloads[mutationName]
 
@@ -140,11 +121,7 @@ const tests = (Object.keys(mutationPayloads) as ShopperBasketsMutationType[]).ma
                 {
                     name: 'success',
                     assertions: async () => {
-                        mockMutationEndpoints(
-                            '/checkout/shopper-baskets/',
-                            {errorResponse: 200},
-                            newBasket
-                        )
+                        mockMutationEndpoints('/checkout/shopper-baskets/')
                         mockRelatedQueries()
 
                         const {result, waitForValueToChange} = renderHookWithProviders(() => {
@@ -171,24 +148,21 @@ const tests = (Object.keys(mutationPayloads) as ShopperBasketsMutationType[]).ma
 
                         await waitForValueToChange(() => result.current.mutation.isSuccess)
                         expect(result.current.mutation.isSuccess).toBe(true)
+
                         // On successful mutation, the query cache gets updated too. Let's assert it.
                         const cacheUpdateMatrix = getCacheUpdateMatrix(CUSTOMER_ID)
                         // @ts-ignore
                         const matrixElement = cacheUpdateMatrix[mutationName](payload, {})
                         const {invalidate, update, remove}: CacheUpdateMatrixElement = matrixElement
 
-                        const assertionData = {
-                            basket: newBasket,
-                            customerBaskets: newCustomerBaskets
-                        }
                         update?.forEach(({name}) => {
                             // @ts-ignore
-                            assertUpdateQuery(result.current.queries[name], assertionData[name])
+                            assertUpdateQuery(result.current.queries[name], NEW_DATA)
                         })
 
                         invalidate?.forEach(({name}) => {
                             // @ts-ignore
-                            assertInvalidateQuery(result.current.queries[name], oldCustomerBaskets)
+                            assertInvalidateQuery(result.current.queries[name], OLD_DATA)
                         })
 
                         remove?.forEach(({name}) => {
@@ -244,24 +218,24 @@ const mockRelatedQueries = () => {
         .get((uri) => {
             return uri.includes(basketEndpoint)
         })
-        .reply(200, oldBasket)
+        .reply(200, OLD_DATA)
     nock(DEFAULT_TEST_HOST)
         .persist()
         .get((uri) => {
             return uri.includes(basketEndpoint)
         })
-        .reply(200, newBasket)
+        .reply(200, NEW_DATA)
 
     // For get customer basket
     nock(DEFAULT_TEST_HOST)
         .get((uri) => {
             return uri.includes(customerEndpoint)
         })
-        .reply(200, oldCustomerBaskets)
+        .reply(200, OLD_DATA)
     nock(DEFAULT_TEST_HOST)
         .persist()
         .get((uri) => {
             return uri.includes(customerEndpoint)
         })
-        .reply(200, newCustomerBaskets)
+        .reply(200, NEW_DATA)
 }