Simplify hooks logic

packages/commerce-sdk-react/src/auth/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
@@ -12,11 +12,12 @@ import {
     ShopperCustomersTypes
 } from 'commerce-sdk-isomorphic'
 import jwtDecode from 'jwt-decode'
-import {ApiClientConfigParams, Argument} from '../hooks/types'
+import {ApiClientConfigParams, Prettify, RemoveStringIndex} from '../hooks/types'
 import {BaseStorage, LocalStorage, CookieStorage, MemoryStorage, StorageType} from './storage'
 import {CustomerType} from '../hooks/useCustomerType'
 import {onClient} from '../utils'
 
+type TokenResponse = ShopperLoginTypes.TokenResponse
 type Helpers = typeof helpers
 interface AuthConfig extends ApiClientConfigParams {
     redirectURI: string
@@ -29,24 +30,25 @@ interface JWTHeaders {
     iat: number
 }
 
-// this type is slightly different from ShopperLoginTypes.TokenResponse, reasons:
-// 1. TokenResponse is too generic (with & {[key:string]: any}), we need a more
-//    restrictive type to make sure type safe
-// 2. The refresh tokens are stored separately for guest and registered user. Instead
-//    of refresh_token, we have refresh_token_guest and refresh_token_registered
+/**
+ * The extended field is not from api response, we manually store the auth type,
+ * so we don't need to make another API call when we already have the data.
+ * Plus, the getCustomer endpoint only works for registered user, it returns a 404 for a guest user,
+ * and it's not easy to grab this info in user land, so we add it into the Auth object, and expose it via a hook
+ */
+type AuthData = Prettify<
+    RemoveStringIndex<TokenResponse> & {
+        customer_type: CustomerType
+        idp_access_token: string
+    }
+>
+
+/** A shopper could be guest or registered, so we store the refresh tokens individually. */
 type AuthDataKeys =
-    | 'access_token'
-    | 'customer_id'
-    | 'enc_user_id'
-    | 'expires_in'
-    | 'id_token'
-    | 'idp_access_token'
+    | Exclude<keyof AuthData, 'refresh_token'>
     | 'refresh_token_guest'
     | 'refresh_token_registered'
-    | 'token_type'
-    | 'usid'
-    | 'site_id'
-    | 'customer_type'
+
 type AuthDataMap = Record<
     AuthDataKeys,
     {
@@ -56,16 +58,6 @@ type AuthDataMap = Record<
     }
 >
 
-/**
- * The extended field is not from api response, we manually store the auth type,
- * so we don't need to make another API call when we already have the data.
- * Plus, the getCustomer endpoint only works for registered user, it returns a 404 for a guest user,
- * and it's not easy to grab this info in user land, so we add it into the Auth object, and expose it via a hook
- */
-type AuthData = ShopperLoginTypes.TokenResponse & {
-    customer_type: CustomerType
-}
-
 /**
  * A map of the data that this auth module stores. This maps the name of the property to
  * the storage type and the key when stored in that storage. You can also pass in a "callback"
@@ -118,10 +110,6 @@ const DATA_MAP: AuthDataMap = {
             store.delete('cc-nx-g')
         }
     },
-    site_id: {
-        storageType: 'cookie',
-        key: 'cc-site-id'
-    },
     customer_type: {
         storageType: 'local',
         key: 'customer_type'
@@ -140,7 +128,7 @@ class Auth {
     private client: ShopperLogin<ApiClientConfigParams>
     private shopperCustomersClient: ShopperCustomers<ApiClientConfigParams>
     private redirectURI: string
-    private pendingToken: Promise<ShopperLoginTypes.TokenResponse> | undefined
+    private pendingToken: Promise<TokenResponse> | undefined
     private REFRESH_TOKEN_EXPIRATION_DAYS = 90
     private stores: Record<StorageType, BaseStorage>
 
@@ -204,9 +192,10 @@ class Auth {
     }
 
     private clearStorage() {
-        Object.keys(DATA_MAP).forEach((keyName) => {
-            type Key = keyof AuthDataMap
-            const {key, storageType} = DATA_MAP[keyName as Key]
+        // Type assertion because Object.keys is silly and limited :(
+        const keys = Object.keys(DATA_MAP) as AuthDataKeys[]
+        keys.forEach((keyName) => {
+            const {key, storageType} = DATA_MAP[keyName]
             const store = this.stores[storageType]
             store.delete(key)
         })
@@ -244,7 +233,7 @@ class Auth {
      * This method stores the TokenResponse object retrived from SLAS, and
      * store the data in storage.
      */
-    private handleTokenResponse(res: ShopperLoginTypes.TokenResponse, isGuest: boolean) {
+    private handleTokenResponse(res: TokenResponse, isGuest: boolean) {
         this.set('access_token', res.access_token)
         this.set('customer_id', res.customer_id)
         this.set('enc_user_id', res.enc_user_id)
@@ -268,7 +257,7 @@ class Auth {
      *
      * @Internal
      */
-    async queueRequest(fn: () => Promise<ShopperLoginTypes.TokenResponse>, isGuest: boolean) {
+    async queueRequest(fn: () => Promise<TokenResponse>, isGuest: boolean) {
         const queue = this.pendingToken ?? Promise.resolve()
         this.pendingToken = queue.then(async () => {
             const token = await fn()
@@ -326,6 +315,20 @@ class Auth {
         )
     }
 
+    /**
+     * Creates a function that only executes after a session is initialized.
+     * @param fn Function that needs to wait until the session is initialized.
+     * @returns Wrapped function
+     */
+    whenReady<Args extends unknown[], Data>(
+        fn: (...args: Args) => Promise<Data>
+    ): (...args: Args) => Promise<Data> {
+        return async (...args) => {
+            await this.ready()
+            return await fn(...args)
+        }
+    }
+
     /**
      * A wrapper method for commerce-sdk-isomorphic helper: loginGuestUser.
      *

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

@@ -0,0 +1,120 @@
+/*
+ * 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, ShopperCustomersTypes} from 'commerce-sdk-isomorphic'
+import {
+    ApiClients,
+    ApiOptions,
+    CacheUpdate,
+    CacheUpdateMatrix,
+    CacheUpdateUpdate,
+    MergedOptions
+} from '../types'
+import {and, matchesApiConfig, pathStartsWith} from '../utils'
+
+type Client = ApiClients['shopperBaskets']
+type Basket = ShopperBasketsTypes.Basket
+type CustomerBasketsResult = ShopperCustomersTypes.BasketsResult
+type BasketOptions = MergedOptions<Client, ApiOptions<Basket>>
+
+const updateBasketQuery = (
+    customerId: string | null,
+    basketId: string | undefined,
+    newBasket: Basket
+): Pick<CacheUpdate, 'update'> => {
+    if (!basketId) return {}
+    const update: Array<CacheUpdateUpdate<Basket> | CacheUpdateUpdate<CustomerBasketsResult>> = [
+        {
+            queryKey: ['/baskets', basketId, {basketId}]
+        }
+    ]
+    if (customerId) {
+        const updateCustomerBaskets: CacheUpdateUpdate<CustomerBasketsResult> = {
+            // Since we use baskets from customer basket query, we need to update it for any basket mutation
+            queryKey: ['/customers', customerId, '/baskets', {customerId}],
+            updater: (oldData) => {
+                // do not update if response basket is not part of existing customer baskets
+                if (!oldData?.baskets?.some((basket) => basket.basketId === basketId)) {
+                    return undefined
+                }
+                const updatedBaskets = oldData.baskets.map((basket) => {
+                    return basket.basketId === basketId ? newBasket : basket
+                })
+                return {
+                    ...oldData,
+                    // TODO: Remove type assertion when RAML specs match
+                    baskets: updatedBaskets as CustomerBasketsResult['baskets']
+                }
+            }
+        }
+        update.push(updateCustomerBaskets)
+    }
+    // TODO: This type assertion is so that we "forget" what type the updater uses.
+    // Is there a way to avoid the assertion?
+    return {update} as CacheUpdate
+}
+
+const removeBasketQuery = (
+    options: BasketOptions,
+    basketId?: string
+): Pick<CacheUpdate, 'remove'> => {
+    if (!basketId) return {}
+    return {
+        remove: [and(matchesApiConfig(options), pathStartsWith(['/baskets', basketId]))]
+    }
+}
+
+const invalidateCustomerBasketsQuery = (
+    customerId: string | null,
+    options: BasketOptions
+): Pick<CacheUpdate, 'invalidate'> => {
+    if (!customerId) return {}
+    return {
+        invalidate: [
+            and(matchesApiConfig(options), pathStartsWith(['/customers', customerId, '/baskets']))
+        ]
+    }
+}
+
+const updateBasketFromRequest = (
+    customerId: string | null,
+    options: BasketOptions,
+    response: Basket
+): CacheUpdate => ({
+    ...updateBasketQuery(customerId, options.parameters?.basketId, response),
+    ...invalidateCustomerBasketsQuery(customerId, options)
+})
+
+const updateBasketFromResponse = (
+    customerId: string | null,
+    options: BasketOptions,
+    response: Basket
+): CacheUpdate => ({
+    ...updateBasketQuery(customerId, response.basketId, response),
+    ...invalidateCustomerBasketsQuery(customerId, options)
+})
+
+export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
+    addCouponToBasket: updateBasketFromRequest,
+    addItemToBasket: updateBasketFromRequest,
+    removeItemFromBasket: updateBasketFromRequest,
+    addPaymentInstrumentToBasket: updateBasketFromRequest,
+    createBasket: updateBasketFromResponse, // Response!
+    deleteBasket: (customerId, options): CacheUpdate => ({
+        ...invalidateCustomerBasketsQuery(customerId, options),
+        ...removeBasketQuery(options)
+    }),
+    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