@akinon/pz-masterpass-rest 1.126.7 → 1.126.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "1.126.7",
+  "version": "1.126.8",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
   "description": "Modern React-based Masterpass REST API integration package for ProjectZero e-commerce platform",
@@ -10,6 +10,9 @@
     "docs",
     "README.md"
   ],
+  "scripts": {
+    "test": "jest"
+  },
   "keywords": [
     "masterpass",
     "payment",

package/src/hooks/use-masterpass-account-otp.test.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+
+import masterpassRestReducer from '../redux/reducer';
+import { getPaymentPending, setPaymentPending } from '../utils/payment-utils';
+
+const handleVerificationMock = jest.fn();
+const accountAccessMock = jest.fn();
+
+jest.mock('../utils/response-handler', () => ({
+  handleVerification: (...args: unknown[]) => handleVerificationMock(...args),
+  handleMasterpassResponse: jest.fn(async (response) => response)
+}));
+
+jest.mock('../services/account', () => ({
+  AccountService: class {
+    accountAccess = accountAccessMock;
+    linkToMerchant = jest.fn();
+    removeCard = jest.fn();
+    addCard = jest.fn();
+  }
+}));
+
+jest.mock('./useMasterpassToken', () => ({
+  useMasterpassToken: () => ({
+    refetch: jest.fn(async () => ({ data: { token: 'fresh-token' } }))
+  })
+}));
+
+// Imported after the mocks so the hook picks them up.
+import { useMasterpassAccount } from './useMasterpassAccount';
+
+const renderAccountHook = (otpContext: 'account' | 'payment') => {
+  const store = configureStore({
+    reducer: { masterpassRest: masterpassRestReducer },
+    middleware: (getDefault) => getDefault({ serializableCheck: false })
+  });
+
+  store.dispatch({
+    type: 'masterpassRest/setMasterpassRestTokenData',
+    payload: {
+      MerchantId: 'merchant-1',
+      AccountKey: 'account-1',
+      UserId: 'user-1'
+    }
+  });
+
+  store.dispatch({
+    type: 'masterpassRest/updateModalState',
+    payload: { otpContext, showOTPModal: true }
+  });
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return { ...renderHook(() => useMasterpassAccount(), { wrapper }), store };
+};
+
+beforeEach(() => {
+  accountAccessMock.mockResolvedValue({
+    statusCode: 200,
+    result: { cards: [] }
+  });
+});
+
+describe('verification during a payment', () => {
+  it('hands the verification result back so the caller can complete the order', async () => {
+    handleVerificationMock.mockResolvedValue({
+      success: true,
+      data: { result: { responseCode: '0000', token: 'verified-token' } }
+    });
+
+    const { result } = renderAccountHook('payment');
+
+    let outcome: any;
+    await act(async () => {
+      outcome = await result.current.handleOTPSubmit('123456');
+    });
+
+    expect(outcome).toEqual({
+      success: true,
+      isPaymentContext: true,
+      verificationData: { result: { responseCode: '0000', token: 'verified-token' } }
+    });
+  });
+
+  it('does not treat a refreshed card list as a completed payment', async () => {
+    handleVerificationMock.mockResolvedValue({
+      success: true,
+      data: { result: { responseCode: '0000', token: 'verified-token' } }
+    });
+
+    const { result } = renderAccountHook('payment');
+    accountAccessMock.mockClear();
+
+    await act(async () => {
+      await result.current.handleOTPSubmit('123456');
+    });
+
+    // Refreshing the account here used to be the only thing that happened, which
+    // left the order uncompleted on the backend.
+    expect(accountAccessMock).not.toHaveBeenCalled();
+  });
+
+  it('keeps the order number pending when verification sends the shopper to 3D', async () => {
+    setPaymentPending('ORDER-1');
+    handleVerificationMock.mockResolvedValue({
+      requires3D: true,
+      redirectUrl: 'https://bank.example/3d'
+    });
+
+    const location = window.location;
+    delete (window as any).location;
+    (window as any).location = { ...location, href: '' };
+
+    const { result } = renderAccountHook('payment');
+
+    await act(async () => {
+      await result.current.handleOTPSubmit('123456');
+    });
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+
+    (window as any).location = location;
+  });
+});
+
+describe('verification during an account operation', () => {
+  it('refreshes the saved cards and reports plain success', async () => {
+    handleVerificationMock.mockResolvedValue({
+      success: true,
+      data: { result: { responseCode: '0000' } }
+    });
+
+    const { result } = renderAccountHook('account');
+    accountAccessMock.mockClear();
+
+    let outcome: any;
+    await act(async () => {
+      outcome = await result.current.handleOTPSubmit('123456');
+    });
+
+    expect(outcome).toEqual({ success: true });
+    expect(accountAccessMock).toHaveBeenCalled();
+  });
+
+  it('leaves the pending record untouched on a 3D redirect', async () => {
+    setPaymentPending('ORDER-1');
+    const before = getPaymentPending()?.startedAt;
+
+    handleVerificationMock.mockResolvedValue({
+      requires3D: true,
+      redirectUrl: 'https://bank.example/3d'
+    });
+
+    const location = window.location;
+    delete (window as any).location;
+    (window as any).location = { ...location, href: '' };
+
+    const { result } = renderAccountHook('account');
+
+    await act(async () => {
+      await result.current.handleOTPSubmit('123456');
+    });
+
+    expect(getPaymentPending()?.startedAt).toBe(before);
+
+    (window as any).location = location;
+  });
+});
+
+describe('the default verification context', () => {
+  it('is the account flow, so an unset context never skips the card refresh', async () => {
+    handleVerificationMock.mockResolvedValue({
+      success: true,
+      data: { result: {} }
+    });
+
+    const store = configureStore({
+      reducer: { masterpassRest: masterpassRestReducer },
+      middleware: (getDefault) => getDefault({ serializableCheck: false })
+    });
+
+    expect(store.getState().masterpassRest.modalState.otpContext).toBe('account');
+  });
+});

package/src/hooks/use-masterpass-payment-pending.test.tsx

@@ -0,0 +1,255 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+
+import masterpassRestReducer from '../redux/reducer';
+import { getPaymentPending, setPaymentPending } from '../utils/payment-utils';
+
+const prepareMock = jest.fn();
+const finalizeMock = jest.fn();
+const binNumberMock = jest.fn();
+const installmentMock = jest.fn();
+const processPaymentMock = jest.fn();
+const directPaymentMock = jest.fn();
+const handleResponseMock = jest.fn();
+
+const asMutation = (fn: jest.Mock) => () =>
+  [(arg: unknown) => ({ unwrap: () => fn(arg) }), { isLoading: false }];
+
+jest.mock('../redux/api', () => ({
+  usePrepareMasterpassOrderMutation: asMutation(prepareMock),
+  useFinalizeMasterpassOrderMutation: asMutation(finalizeMock),
+  useSetMasterpassRestBinNumberMutation: asMutation(binNumberMock),
+  useCheckoutMasterpassInstallmentMutation: asMutation(installmentMock),
+  useQueryMasterpassRewardsMutation: asMutation(jest.fn()),
+  useSelectMasterpassRewardsMutation: asMutation(jest.fn())
+}));
+
+jest.mock('../services/payment', () => ({
+  PaymentService: class {
+    processPayment = processPaymentMock;
+    directPayment = directPaymentMock;
+  }
+}));
+
+jest.mock('../utils/response-handler', () => ({
+  handleMasterpassResponse: (...args: unknown[]) => handleResponseMock(...args)
+}));
+
+jest.mock('./useMasterpassToken', () => ({
+  useMasterpassToken: () => ({
+    refetch: jest.fn(async () => ({ data: { token: 'fresh-token' } }))
+  })
+}));
+
+// Imported after the mocks so the hook picks them up.
+import { useMasterpassPayment } from './useMasterpassPayment';
+
+const PREPARED_ORDER = {
+  pre_order: { total_amount_with_interest: '100.00' },
+  context_list: [{ page_context: { order_no: 'ORDER-1', extras: {} } }]
+};
+
+const SELECTED_CARD = { cardAlias: 'my card', cardBin: '454671' };
+const SELECTED_INSTALLMENT = { pk: 1, installment_count: 1 };
+
+const NEW_CARD_FORM = {
+  cardNumber: '4546 7112 3456 7890',
+  cardholderName: 'Test User',
+  expiryDate: '12/30',
+  cvv: '123'
+};
+
+const renderPaymentHook = ({ withNewCardForm = false } = {}) => {
+  const store = configureStore({
+    reducer: { masterpassRest: masterpassRestReducer },
+    middleware: (getDefault) => getDefault({ serializableCheck: false })
+  });
+
+  store.dispatch({
+    type: 'masterpassRest/updatePaymentState',
+    payload: {
+      selectedCard: SELECTED_CARD,
+      selectedInstallment: SELECTED_INSTALLMENT,
+      cvc: '123',
+      useThreeD: true
+    }
+  });
+
+  if (withNewCardForm) {
+    store.dispatch({
+      type: 'masterpassRest/setNewCardFormData',
+      payload: NEW_CARD_FORM
+    });
+  }
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return { ...renderHook(() => useMasterpassPayment(), { wrapper }), store };
+};
+
+beforeEach(() => {
+  prepareMock.mockResolvedValue(PREPARED_ORDER);
+  finalizeMock.mockResolvedValue({ errors: null });
+  processPaymentMock.mockResolvedValue({ success: true, data: { result: {} } });
+  directPaymentMock.mockResolvedValue({ success: true, data: { result: {} } });
+  handleResponseMock.mockResolvedValue({ success: true });
+});
+
+describe('order number lifecycle during payment', () => {
+  it('marks the order number pending as soon as it is bound to a transaction', async () => {
+    // The SDK call never resolves, so the assertion sees the state the user is
+    // in while the bank page is open.
+    processPaymentMock.mockImplementation(() => new Promise(() => {}));
+
+    const { result } = renderPaymentHook();
+
+    act(() => {
+      void result.current.processPayment();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+  });
+
+  it('releases the order number once the backend has completed the order', async () => {
+    const { result } = renderPaymentHook();
+
+    await act(async () => {
+      await result.current.processPayment();
+    });
+
+    expect(finalizeMock).toHaveBeenCalled();
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('keeps the order number pending while the shopper is redirected to 3D', async () => {
+    handleResponseMock.mockResolvedValue({
+      requires3D: true,
+      redirectUrl: 'https://bank.example/3d'
+    });
+
+    // jsdom refuses real navigation; the assignment itself is not under test.
+    const location = window.location;
+    delete (window as any).location;
+    (window as any).location = { ...location, href: '' };
+
+    const { result } = renderPaymentHook();
+
+    let outcome: any;
+    await act(async () => {
+      outcome = await result.current.processPayment();
+    });
+
+    expect(outcome.requiresRedirect).toBe(true);
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+
+    (window as any).location = location;
+  });
+
+  it('keeps the order number pending while a verification step is open', async () => {
+    handleResponseMock.mockResolvedValue({
+      success: false,
+      requiresOTP: true,
+      otpType: 'OTP'
+    });
+
+    const { result } = renderPaymentHook();
+
+    await act(async () => {
+      await result.current.processPayment();
+    });
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+  });
+
+  it('releases the order number when the payment is rejected outright', async () => {
+    handleResponseMock.mockResolvedValue({
+      success: false,
+      message: 'Insufficient funds'
+    });
+
+    const { result } = renderPaymentHook();
+
+    await act(async () => {
+      await result.current.processPayment();
+    });
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('releases the order number when the flow throws', async () => {
+    prepareMock.mockRejectedValue(new Error('network down'));
+    setPaymentPending('STALE-ORDER');
+
+    const { result } = renderPaymentHook();
+
+    await act(async () => {
+      await result.current.processPayment();
+    });
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('marks the order number pending on the new-card flow too', async () => {
+    directPaymentMock.mockImplementation(() => new Promise(() => {}));
+
+    const { result } = renderPaymentHook({ withNewCardForm: true });
+
+    act(() => {
+      void result.current.processDirectPayment();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+  });
+});
+
+describe('completing a payment after a verification step', () => {
+  it('sends the verification result to the backend and releases the order number', async () => {
+    setPaymentPending('ORDER-1');
+
+    const { result } = renderPaymentHook();
+
+    let outcome: any;
+    await act(async () => {
+      outcome = await result.current.finalizePaymentAfterVerification({
+        result: { responseCode: '0000', token: 'verified-token' }
+      });
+    });
+
+    expect(finalizeMock).toHaveBeenCalledWith({
+      responseCode: '0000',
+      token: 'verified-token',
+      three_d_secure: true,
+      transactionType: 'PURCHASE_3D'
+    });
+    expect(outcome.success).toBe(true);
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('surfaces backend errors instead of reporting success', async () => {
+    finalizeMock.mockResolvedValue({ errors: { non_field_errors: 'ORDER_NO_MISMATCH' } });
+
+    const { result } = renderPaymentHook();
+
+    let outcome: any;
+    await act(async () => {
+      outcome = await result.current.finalizePaymentAfterVerification({
+        result: { responseCode: '0000', token: 'verified-token' }
+      });
+    });
+
+    expect(outcome.success).toBe(false);
+    expect(outcome.message).toEqual({ non_field_errors: 'ORDER_NO_MISMATCH' });
+  });
+});

package/src/hooks/useMasterpassAccount.ts

@@ -19,6 +19,7 @@ import {
   handleMasterpassResponse,
   handleVerification
 } from '../utils/response-handler';
+import { getPaymentPending, setPaymentPending } from '../utils/payment-utils';
 import type {
   AccountAccessSuccessResponse,
   CardModel
@@ -190,6 +191,7 @@ export const useMasterpassAccount = () => {
         dispatch(
           updateModalState({
             otpType: result.otpType,
+            otpContext: 'account',
             verificationData: result.data,
             showLinkModal: false,
             showOTPModal: true
@@ -209,9 +211,22 @@ export const useMasterpassAccount = () => {
   const handleOTPSubmit = useCallback(
     async (otp: string, texts?: any) => {
       const result = await handleVerification(otp, token, tokenData?.MerchantId);
+      const isPaymentContext = modalState.otpContext === 'payment';
 
       if (result.success) {
         dispatch(setShowOTPModal(false));
+
+        // A payment-context OTP still has an open Masterpass transaction. The
+        // caller has to complete it against the backend; refreshing the account
+        // here would leave the order unfinalized.
+        if (isPaymentContext) {
+          return {
+            success: true,
+            isPaymentContext: true,
+            verificationData: result.data
+          };
+        }
+
         await refreshAccountData();
         return { success: true };
       } else if (result.sessionExpired) {
@@ -234,6 +249,13 @@ export const useMasterpassAccount = () => {
         };
       } else if (result.requires3D && result.redirectUrl) {
         dispatch(setShowOTPModal(false));
+
+        // Leaving the tab for the bank restarts the wait, so refresh the record
+        // without losing the order number it was opened with.
+        if (isPaymentContext) {
+          setPaymentPending(getPaymentPending()?.orderNo ?? null);
+        }
+
         window.location.href = result.redirectUrl;
         return {
           success: false,
@@ -261,7 +283,13 @@ export const useMasterpassAccount = () => {
         };
       }
     },
-    [dispatch, refreshAccountData, token, tokenData?.MerchantId]
+    [
+      dispatch,
+      refreshAccountData,
+      token,
+      tokenData?.MerchantId,
+      modalState.otpContext
+    ]
   );
 
   const handleRemoveCard = useCallback(
@@ -372,6 +400,7 @@ export const useMasterpassAccount = () => {
           dispatch(
             updateModalState({
               otpType: result.otpType,
+              otpContext: 'account',
               verificationData: result.data,
               showLinkModal: false,
               showOTPModal: true

package/src/hooks/useMasterpassPayment.ts

@@ -29,7 +29,9 @@ import { decodeMasterpassToken } from '../utils/wait-for-utils-ready';
 import {
   createPaymentRequest,
   createDirectPaymentRequest,
-  getTransactionType
+  getTransactionType,
+  setPaymentPending,
+  clearPaymentPending
 } from '../utils/payment-utils';
 import { handleMasterpassResponse } from '../utils/response-handler';
 import type { Installment, RewardItem } from '../types/payment.types';
@@ -252,13 +254,20 @@ export const useMasterpassPayment = (
 
       dispatch(setOrderData(prepareResult));
 
+      const orderNo = prepareResult.context_list?.[0]?.page_context?.order_no;
+
+      // From here on the order number is bound to a Masterpass transaction.
+      // Regenerating it before that transaction settles makes the backend
+      // reject the completion with ORDER_NO_MISMATCH.
+      setPaymentPending(orderNo);
+
       const paymentService = new PaymentService(activeToken, activeMerchantId);
       const paymentRequest = createPaymentRequest({
         cvc,
         cardAlias: selectedCard.cardAlias,
         accountKey: activeTokenData.AccountKey,
         amount: prepareResult.pre_order?.total_amount_with_interest,
-        orderNo: prepareResult.context_list?.[0]?.page_context?.order_no,
+        orderNo,
         currencyCode: currency,
         installmentCount: selectedInstallment.installment_count,
         authenticationMethod: activeTokenData.AuthenticationMethod,
@@ -288,6 +297,7 @@ export const useMasterpassPayment = (
         }).unwrap();
 
         dispatch(setOrderData(finalizeResult));
+        clearPaymentPending();
 
         if (finalizeResult.errors) {
           return { success: false, message: finalizeResult.errors };
@@ -297,6 +307,10 @@ export const useMasterpassPayment = (
         return { success: true };
       }
 
+      if (!response.requiresOTP) {
+        clearPaymentPending();
+      }
+
       return {
         success: response.success,
         requiresOTP: response.requiresOTP,
@@ -304,6 +318,7 @@ export const useMasterpassPayment = (
         message: response.message
       };
     } catch (error) {
+      clearPaymentPending();
       return {
         success: false,
         message:
@@ -361,6 +376,13 @@ export const useMasterpassPayment = (
 
       dispatch(setOrderData(prepareResult));
 
+      const orderNo = prepareResult.context_list?.[0]?.page_context?.order_no;
+
+      // From here on the order number is bound to a Masterpass transaction.
+      // Regenerating it before that transaction settles makes the backend
+      // reject the completion with ORDER_NO_MISMATCH.
+      setPaymentPending(orderNo);
+
       const paymentService = new PaymentService(activeToken, activeMerchantId);
       const directPaymentRequest = createDirectPaymentRequest({
         cvc: newCardFormData.cvv,
@@ -370,7 +392,7 @@ export const useMasterpassPayment = (
         expiryDate: newCardFormData.expiryDate,
         accountKey: activeTokenData.AccountKey,
         amount: prepareResult.pre_order?.total_amount_with_interest,
-        orderNo: prepareResult.context_list?.[0]?.page_context?.order_no,
+        orderNo,
         currencyCode: currency,
         installmentCount: selectedInstallment.installment_count,
         authenticationMethod: activeTokenData.AuthenticationMethod,
@@ -402,6 +424,7 @@ export const useMasterpassPayment = (
         }).unwrap();
 
         dispatch(setOrderData(finalizeResult));
+        clearPaymentPending();
 
         if (finalizeResult.errors) {
           return { success: false, message: finalizeResult.errors };
@@ -411,6 +434,10 @@ export const useMasterpassPayment = (
         return { success: true };
       }
 
+      if (!response.requiresOTP) {
+        clearPaymentPending();
+      }
+
       return {
         success: response.success,
         requiresOTP: response.requiresOTP,
@@ -418,6 +445,7 @@ export const useMasterpassPayment = (
         message: response.message
       };
     } catch (error) {
+      clearPaymentPending();
       return {
         success: false,
         message:
@@ -439,6 +467,41 @@ export const useMasterpassPayment = (
     dispatch
   ]);
 
+  const finalizePaymentAfterVerification = useCallback(
+    async (verificationResponse: any): Promise<PaymentResult> => {
+      const { useThreeD } = paymentState;
+
+      try {
+        const finalizeResult = await finalizeMasterpassOrder({
+          responseCode: verificationResponse?.result?.responseCode,
+          token: verificationResponse?.result?.token,
+          three_d_secure: useThreeD,
+          transactionType: getTransactionType(useThreeD)
+        }).unwrap();
+
+        dispatch(setOrderData(finalizeResult));
+        clearPaymentPending();
+
+        if (finalizeResult.errors) {
+          return { success: false, message: finalizeResult.errors };
+        }
+
+        dispatch(setOrderCompleted(true));
+        return { success: true };
+      } catch (error) {
+        clearPaymentPending();
+        return {
+          success: false,
+          message:
+            error instanceof Error
+              ? error.message
+              : 'An unexpected error occurred'
+        };
+      }
+    },
+    [paymentState, finalizeMasterpassOrder, dispatch]
+  );
+
   return {
     paymentState,
 
@@ -455,6 +518,7 @@ export const useMasterpassPayment = (
     handleInstallmentSelect,
     processPayment,
     processDirectPayment,
+    finalizePaymentAfterVerification,
     fetchRewardsForCard,
     openRewardModal,
     closeRewardModal,

package/src/redux/reducer.ts

@@ -82,6 +82,7 @@ const initialState: MasterpassRestState = {
     showRewardModal: false,
     informationModalData: null,
     otpType: 'OTP',
+    otpContext: 'account',
     verificationData: null,
     cardToDelete: null,
     removingCardId: null
@@ -270,6 +271,7 @@ const masterpassRestSlice = createSlice({
         showRewardModal: false,
         informationModalData: null,
         otpType: 'OTP',
+        otpContext: 'account',
         verificationData: null,
         cardToDelete: null,
         removingCardId: null