W-20394105: Save payment method for future use

packages/template-retail-react-app/app/constants.js

@@ -273,3 +273,20 @@ export const USER_NOT_FOUND_ERROR = /user not found/i
  * @deprecated Use `partialHydrationEnabled` in the config file instead
  */
 export const PARTIAL_HYDRATION_ENABLED = false
+
+// Constants for Salesforce Payments
+export const PAYMENT_METHOD_TYPES = {
+    CARD: 'card',
+    PAYPAL: 'paypal',
+    VENMO: 'venmo'
+}
+
+export const PAYMENT_GATEWAYS = {
+    STRIPE: 'stripe',
+    ADYEN: 'adyen'
+}
+
+export const SETUP_FUTURE_USAGE = {
+    ON_SESSION: 'on_session',
+    OFF_SESSION: 'off_session'
+}

packages/template-retail-react-app/app/hooks/use-sf-payments.js

@@ -110,3 +110,14 @@ export const useAutomaticCapture = () => {
     const cardCaptureAutomatic = useShopperConfiguration('cardCaptureAutomatic')
     return cardCaptureAutomatic ?? true
 }
+
+/**
+ * Custom hook to determine if payments should be set up for off-session reuse.
+ * If true, always set up payments for off-session reuse.
+ * If false, only set up payments when user explicitly saves payment method (on-session reuse).
+ * @returns {boolean} True if off-session future usage is enabled, false otherwise (default)
+ */
+export const useFutureUsageOffSession = () => {
+    const futureUsageOffSession = useShopperConfiguration('futureUsageOffSession')
+    return futureUsageOffSession ?? false
+}

packages/template-retail-react-app/app/hooks/use-sf-payments.test.js

@@ -12,6 +12,7 @@ import {
     useSFPayments,
     useSFPaymentsEnabled,
     useAutomaticCapture,
+    useFutureUsageOffSession,
     EXPRESS_BUY_NOW,
     EXPRESS_PAY_NOW,
     STATUS_SUCCESS,
@@ -635,3 +636,45 @@ describe('useAutomaticCapture hook', () => {
         expect(mockUseShopperConfiguration).toHaveBeenCalledWith('cardCaptureAutomatic')
     })
 })
+
+describe('useFutureUsageOffSession hook', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    test('returns true when futureUsageOffSession is true', () => {
+        mockUseShopperConfiguration.mockReturnValue(true)
+
+        const {result} = renderHook(() => useFutureUsageOffSession())
+
+        expect(result.current).toBe(true)
+        expect(mockUseShopperConfiguration).toHaveBeenCalledWith('futureUsageOffSession')
+    })
+
+    test('returns false when futureUsageOffSession is false', () => {
+        mockUseShopperConfiguration.mockReturnValue(false)
+
+        const {result} = renderHook(() => useFutureUsageOffSession())
+
+        expect(result.current).toBe(false)
+        expect(mockUseShopperConfiguration).toHaveBeenCalledWith('futureUsageOffSession')
+    })
+
+    test('returns false (default) when futureUsageOffSession is undefined', () => {
+        mockUseShopperConfiguration.mockReturnValue(undefined)
+
+        const {result} = renderHook(() => useFutureUsageOffSession())
+
+        expect(result.current).toBe(false)
+        expect(mockUseShopperConfiguration).toHaveBeenCalledWith('futureUsageOffSession')
+    })
+
+    test('returns false (default) when futureUsageOffSession is null', () => {
+        mockUseShopperConfiguration.mockReturnValue(null)
+
+        const {result} = renderHook(() => useFutureUsageOffSession())
+
+        expect(result.current).toBe(false)
+        expect(mockUseShopperConfiguration).toHaveBeenCalledWith('futureUsageOffSession')
+    })
+})