W-20975340: Addressing comments

Author: rasbhat

packages/template-retail-react-app/app/hooks/use-current-customer.js

@@ -9,12 +9,16 @@ import {useCustomer, useCustomerId, useCustomerType} from '@salesforce/commerce-
 
 /**
  * A hook that returns the current customer.
- *
+ * @param {Array<string>} [expand] - Optional array of fields to expand in the customer query
  */
-export const useCurrentCustomer = () => {
+export const useCurrentCustomer = (expand = undefined) => {
     const customerId = useCustomerId()
     const {isRegistered, isGuest, customerType} = useCustomerType()
-    const query = useCustomer({parameters: {customerId}}, {enabled: !!customerId && isRegistered})
+    const parameters = {
+        customerId,
+        ...(expand && {expand})
+    }
+    const query = useCustomer({parameters}, {enabled: !!customerId && isRegistered})
     const value = {
         ...query,
         data: {

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx

@@ -20,13 +20,9 @@ import {
     Divider
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm} from 'react-hook-form'
-import {
-    useShopperBasketsMutation,
-    useCustomer,
-    useCustomerId,
-    useCustomerType
-} from '@salesforce/commerce-sdk-react'
+import {useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {useCurrency} from '@salesforce/retail-react-app/app/hooks/use-currency'
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
 import {usePaymentConfiguration} from '@salesforce/commerce-sdk-react'
@@ -64,25 +60,7 @@ const SFPaymentsSheet = forwardRef((props, ref) => {
     const navigate = useNavigation()
 
     const {data: basket} = useCurrentBasket()
-    const customerId = useCustomerId()
-    const {isRegistered} = useCustomerType()
-    const {data: customerData} = useCustomer(
-        {
-            parameters: {
-                customerId,
-                expand: ['paymentmethodreferences']
-            }
-        },
-        {enabled: !!customerId && isRegistered}
-    )
-    // Add customerId and isRegistered to customer data for consistency with useCurrentCustomer
-    const customer = customerData
-        ? {
-              ...customerData,
-              customerId,
-              isRegistered
-          }
-        : null
+    const {data: customer} = useCurrentCustomer(['paymentmethodreferences'])
 
     const isPickupOnly =
         basket?.shipments?.length > 0 &&
@@ -505,20 +483,16 @@ const SFPaymentsSheet = forwardRef((props, ref) => {
     }))
 
     const savedPaymentMethods = useMemo(
-        () =>
-            transformPaymentMethodReferences(
-                customer?.paymentMethodReferences,
-                paymentConfig?.paymentMethodSetAccounts
-            ),
-        [customer?.paymentMethodReferences, paymentConfig?.paymentMethodSetAccounts]
+        () => transformPaymentMethodReferences(customer, paymentConfig),
+        [customer, paymentConfig]
     )
 
     useEffect(() => {
         if (sfp && metadata && containerElementRef.current && paymentConfig) {
             const paymentMethodSetAccounts = (paymentConfig.paymentMethodSetAccounts || []).map(
                 (account) => ({
                     ...account,
-                    gatewayId: account.gatewayId || account.accountId
+                    gatewayId: account.accountId
                 })
             )
 

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.test.js

@@ -1013,6 +1013,7 @@ describe('SFPaymentsSheet', () => {
             const ref = React.createRef()
             setupConfirmPaymentMocks()
 
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
             const useShopperConfigurationModule = require('@salesforce/retail-react-app/app/hooks/use-shopper-configuration')
             const originalMock = useShopperConfigurationModule.useShopperConfiguration
 
@@ -1154,6 +1155,7 @@ describe('SFPaymentsSheet', () => {
             ]
 
             jest.spyOn(
+                // eslint-disable-next-line @typescript-eslint/no-var-requires
                 require('@salesforce/commerce-sdk-react'),
                 'usePaymentConfiguration'
             ).mockReturnValue({

packages/template-retail-react-app/app/utils/sf-payments-utils.js

@@ -276,14 +276,14 @@ export const createPaymentInstrumentBody = ({
 
 /**
  * Transforms payment method references from API format to SF Payments SDK format.
- * @param {Array} paymentMethodReferences - Array of payment method references
- * @param {Array} paymentMethodSetAccounts - Array of payment method set accounts
+ * @param {Object} customer - Customer object with paymentMethodReferences property
+ * @param {Object} paymentConfig - Payment configuration object with paymentMethodSetAccounts property
  * @returns {Array} Transformed payment method references for SF Payments SDK
  */
-export const transformPaymentMethodReferences = (
-    paymentMethodReferences,
-    paymentMethodSetAccounts = []
-) => {
+export const transformPaymentMethodReferences = (customer, paymentConfig) => {
+    const paymentMethodReferences = customer?.paymentMethodReferences
+    const paymentMethodSetAccounts = paymentConfig?.paymentMethodSetAccounts || []
+
     if (!Array.isArray(paymentMethodReferences) || !Array.isArray(paymentMethodSetAccounts)) {
         return []
     }
@@ -316,7 +316,7 @@ export const transformPaymentMethodReferences = (
                 return null
             }
 
-            const gatewayId = matchingAccount.gatewayId || matchingAccount.accountId
+            const gatewayId = matchingAccount.accountId
 
             if (!gatewayId || typeof gatewayId !== 'string') {
                 return null