@akinon/pz-masterpass-rest 1.126.10 → 1.126.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "1.126.10",
+  "version": "1.126.11",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
   "description": "Modern React-based Masterpass REST API integration package for ProjectZero e-commerce platform",

package/src/hooks/use-masterpass-token-sync.test.tsx

@@ -0,0 +1,106 @@
+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';
+
+/**
+ * ENT-114: MasterpassRestOption mounts two token hooks (payment and account)
+ * on the same query. Refreshing the token for a payment used to make the
+ * account hook push its older query result back into the store and run its
+ * onTokenReady again, which reloads the Masterpass account while the payment
+ * is being opened.
+ */
+
+const FIRST = { token: 'token-1', extras: { terminal_group_id: 'group', bank_ica: null } };
+const REFRESHED = { token: 'token-2', extras: { terminal_group_id: 'group', bank_ica: null } };
+
+// Both hook instances read the same (initial) query result, as the shared
+// RTK Query subscription does.
+let queryData: typeof FIRST | undefined = FIRST;
+const fetchTokenMock = jest.fn(async () => ({ data: REFRESHED }));
+
+jest.mock('../redux/api', () => ({
+  useGetMasterpassRestTokenQuery: () => ({
+    data: queryData,
+    refetch: jest.fn(),
+    isLoading: false,
+    error: undefined
+  }),
+  useLazyGetMasterpassRestTokenQuery: () => [fetchTokenMock]
+}));
+
+// Imported after the mocks so the hook picks them up.
+import { useMasterpassToken } from './useMasterpassToken';
+
+const settle = async () => {
+  for (let i = 0; i < 5; i += 1) {
+    await act(async () => {
+      await Promise.resolve();
+    });
+  }
+};
+
+const renderTwoInstances = () => {
+  const store = configureStore({
+    reducer: { masterpassRest: masterpassRestReducer },
+    middleware: (getDefault) => getDefault({ serializableCheck: false })
+  });
+  const accountReady = jest.fn();
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  const hook = renderHook(
+    () => ({
+      payment: useMasterpassToken({ useThreeD: true }),
+      account: useMasterpassToken({ useThreeD: true, onTokenReady: accountReady })
+    }),
+    { wrapper }
+  );
+
+  return { ...hook, store, accountReady };
+};
+
+beforeEach(() => {
+  queryData = FIRST;
+});
+
+describe('token shared by several hook instances', () => {
+  it('syncs the first query result into the store once', async () => {
+    const { store, accountReady } = renderTwoInstances();
+    await settle();
+
+    expect(store.getState().masterpassRest.token).toBe('token-1');
+    expect(accountReady).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the refreshed token after a payment refresh', async () => {
+    const { result, store, accountReady } = renderTwoInstances();
+    await settle();
+
+    await act(async () => {
+      await result.current.payment.refetch({ skipReset: true });
+    });
+    await settle();
+
+    expect(fetchTokenMock).toHaveBeenCalledTimes(1);
+    expect(store.getState().masterpassRest.token).toBe('token-2');
+    // No second account initialization while the payment is being opened.
+    expect(accountReady).toHaveBeenCalledTimes(1);
+  });
+
+  it('still syncs a new query result', async () => {
+    const { rerender, store, accountReady } = renderTwoInstances();
+    await settle();
+
+    queryData = { token: 'token-3', extras: { terminal_group_id: 'group', bank_ica: null } };
+    rerender();
+    await settle();
+
+    expect(store.getState().masterpassRest.token).toBe('token-3');
+    expect(accountReady).toHaveBeenCalledTimes(2);
+  });
+});

package/src/hooks/useMasterpassToken.ts

@@ -32,6 +32,10 @@ export const useMasterpassToken = ({
 }: UseMasterpassTokenProps) => {
   const dispatch = useDispatch();
   const skipTokenSyncRef = useRef(false);
+  // Several instances share the token query. When one of them refreshes the
+  // token, the others still hold the previous query result; they must not push
+  // it back into the store or re-run their onTokenReady (ENT-114).
+  const lastQueryTokenRef = useRef<string | null>(null);
   const onTokenReadyRef = useRef(onTokenReady);
   onTokenReadyRef.current = onTokenReady;
 
@@ -69,7 +73,12 @@ export const useMasterpassToken = ({
       return;
     }
 
-    if (!(data?.token && data.token !== reduxToken)) {
+    if (!data?.token || data.token === lastQueryTokenRef.current) {
+      return;
+    }
+
+    if (data.token === reduxToken) {
+      lastQueryTokenRef.current = data.token;
       return;
     }
 
@@ -91,6 +100,7 @@ export const useMasterpassToken = ({
         return;
       }
 
+      lastQueryTokenRef.current = token;
       dispatch(setMasterpassRestToken(token));
       dispatch(setMasterpassTerminalGroupId(extras.terminal_group_id));
       dispatch(setMasterpassBankIca(extras.bank_ica));

package/src/views/masterpass-rest-option.tsx

@@ -227,6 +227,11 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   const [cvc, setCvc] = useState<string>('');
   const [isProcessingPayment, setIsProcessingPayment] = useState(false);
 
+  // Set while a payment request is on its way. Card, installment and bin pages
+  // sent next to MasterpassRestOrderNoPage race with it on the backend and the
+  // completion then carries a different order number (ENT-114).
+  const paymentInFlightRef = useRef(false);
+
   // Initialized during render (not in an effect) so consumers see the real
   // value before their own mount effects run.
   const [isPaymentPending, setIsPaymentPending] = useState<boolean>(() =>
@@ -297,21 +302,24 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     }
   }, [locale, currency, stateLocale, stateCurrency, dispatch]);
 
-  useEffect(() => {
-    const hasCards = accountData?.result?.cards && accountData.result.cards.length > 0;
+  const accountCardCount = accountData?.result?.cards?.length ?? 0;
 
+  // Keyed on the card count, not the list: reloading the same account hands
+  // out a new list, which would switch a shopper paying with a new card back to
+  // the saved cards in the middle of the payment.
+  useEffect(() => {
     if (accountStatus?.isAccountNotLinked || accountStatus?.shouldShowDirectForm) {
       setPaymentMethod('new_card');
-    } else if (hasCards) {
+    } else if (accountCardCount > 0) {
       setPaymentMethod('stored_card');
     } else {
       setPaymentMethod('new_card');
     }
-  }, [accountStatus?.isAccountNotLinked, accountStatus?.shouldShowDirectForm, accountData?.result?.cards]);
+  }, [accountStatus?.isAccountNotLinked, accountStatus?.shouldShowDirectForm, accountCardCount]);
 
   const handleBinChange = useCallback(
     async (bin: string) => {
-      if (bin === lastCheckedBin) {
+      if (paymentInFlightRef.current || bin === lastCheckedBin) {
         return;
       }
 
@@ -433,6 +441,10 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     if (isProcessingPayment) return;
 
     setIsProcessingPayment(true);
+    paymentInFlightRef.current = true;
+    // Raised before the order number is requested, so theme effects that
+    // preselect a card or installment stay idle while the transaction opens.
+    setIsPaymentPending(true);
 
     try {
       dispatch(clearAllErrors());
@@ -462,7 +474,10 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
         error instanceof Error ? error.message : mergedTexts.paymentFailedText;
       dispatch(setError(errorMessage));
     } finally {
+      paymentInFlightRef.current = false;
       setIsProcessingPayment(false);
+      // Only a transaction that is still open (3D redirect, OTP) keeps it up.
+      setIsPaymentPending(Boolean(getPaymentPending()));
     }
   }, [isProcessingPayment, dispatch, paymentMethod, processDirectPayment, processPayment, updateModalState, mergedTexts.paymentFailedText]);
 
@@ -481,6 +496,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
       const finalizeResult = await finalizePaymentAfterVerification(
         result.verificationData
       );
+      setIsPaymentPending(Boolean(getPaymentPending()));
 
       if (!finalizeResult.success) {
         dispatch(
@@ -500,6 +516,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   ]);
 
   const handleCardSelectWithErrorHandling = useCallback(async (card: any) => {
+    if (paymentInFlightRef.current) return;
+
     try {
       dispatch(clearAllErrors());
       dismissPaymentPending();
@@ -514,6 +532,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   }, [dispatch, dismissPaymentPending, handleCardSelect, mergedTexts.failedToSelectCardText]);
 
   const handleInstallmentSelectWithErrorHandling = useCallback(async (installment: any) => {
+    if (paymentInFlightRef.current) return;
+
     try {
       dispatch(clearAllErrors());
       dismissPaymentPending();

package/src/views/payment-in-flight.test.tsx

@@ -0,0 +1,341 @@
+import React, { useEffect } from 'react';
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+
+import masterpassRestReducer, {
+  setMasterpassRestAccountData
+} from '../redux/reducer';
+import type { MasterpassRestOptionRenderProps } from '../types/custom-render.types';
+
+/**
+ * ENT-114 sequence, captured on Sportive with a shopper who has saved cards and
+ * pays with a new card:
+ *
+ *   MasterpassRestOrderNoPage    <- order number the SDK transaction is bound to
+ *   MasterpassRestBinNumberPage  <- sent 61 ms later, before the one above returns
+ *   MasterpassRestInstallmentPage
+ *
+ * The payment token refresh reloaded the Masterpass account, the reloaded card
+ * list switched the view back to the saved cards, and the theme preselected the
+ * first one. The two checkout writes race on the backend and the completion
+ * carries a different order number.
+ */
+
+let pages: string[] = [];
+let store: ReturnType<typeof makeStore>;
+let sdkOrderNo: string | null = null;
+let pageCallsWhileOrderNoPending: string[] = [];
+let orderNoPending = false;
+
+const SAVED_CARDS = [
+  {
+    cardAlias: 'saved card',
+    cardBin: '404308',
+    uniqueCardNumber: 'unique-1',
+    maskedCardNumber: '404308******18'
+  }
+];
+
+const accountResponse = () => ({
+  statusCode: 200,
+  result: { cards: SAVED_CARDS.map((card) => ({ ...card })) }
+});
+
+const recordPage = (page: string) => {
+  pages.push(page);
+  if (orderNoPending) {
+    pageCallsWhileOrderNoPending.push(page);
+  }
+};
+
+const INSTALLMENTS = [{ pk: 1, installment_count: 1, label: 'Tek Çekim' }];
+
+jest.mock('../redux/api', () => ({
+  useSetMasterpassRestBinNumberMutation: () => [
+    () => ({
+      unwrap: async () => {
+        recordPage('MasterpassRestBinNumberPage');
+        return {
+          context_list: [
+            {
+              page_context: {
+                installments: INSTALLMENTS,
+                card_type: { name: 'visa', slug: 'visa', logo: '' }
+              }
+            }
+          ]
+        };
+      }
+    }),
+    { isLoading: false }
+  ],
+  useCheckoutMasterpassInstallmentMutation: () => [
+    () => ({
+      unwrap: async () => {
+        recordPage('MasterpassRestInstallmentPage');
+        return { context_list: [] };
+      }
+    }),
+    { isLoading: false }
+  ],
+  usePrepareMasterpassOrderMutation: () => [
+    () => ({
+      unwrap: async () => {
+        recordPage('MasterpassRestOrderNoPage');
+        orderNoPending = true;
+        // What the account hook did on the storefront while this request was
+        // open: reload the same account, which hands out a new card list.
+        store.dispatch(setMasterpassRestAccountData(accountResponse() as any));
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        orderNoPending = false;
+        return {
+          pre_order: { total_amount_with_interest: '100.00' },
+          context_list: [{ page_context: { order_no: 'ORDER-1', extras: {} } }]
+        };
+      }
+    }),
+    { isLoading: false }
+  ],
+  useFinalizeMasterpassOrderMutation: () => [
+    () => ({
+      unwrap: async () => {
+        recordPage('MasterpassRestCompletePage');
+        return { errors: null };
+      }
+    }),
+    { isLoading: false }
+  ],
+  useQueryMasterpassRewardsMutation: () => [
+    () => ({ unwrap: async () => ({ context_list: [] }) }),
+    { isLoading: false }
+  ],
+  useSelectMasterpassRewardsMutation: () => [
+    () => ({ unwrap: async () => ({}) }),
+    { isLoading: false }
+  ]
+}));
+
+jest.mock('../services/payment', () => ({
+  PaymentService: class {
+    async processPayment(request: any) {
+      sdkOrderNo = request.orderNo;
+      return { success: true, data: { result: {} } };
+    }
+    async directPayment(request: any) {
+      sdkOrderNo = request.orderNo;
+      return { success: true, data: { result: {} } };
+    }
+  }
+}));
+
+jest.mock('../utils/response-handler', () => ({
+  handleMasterpassResponse: async () => ({ success: true }),
+  handleVerification: async () => ({ success: true, data: { result: {} } })
+}));
+
+jest.mock('../hooks/useMasterpassToken', () => ({
+  useMasterpassToken: () => ({
+    refetch: jest.fn(async () => ({ data: { token: 'fresh-token' } }))
+  })
+}));
+
+jest.mock('../hooks/useMasterpassScript', () => ({
+  useMasterpassScript: () => ({ isScriptLoaded: true })
+}));
+
+// Reads the account from the store like the real hook, so a reload re-renders.
+jest.mock('../hooks/useMasterpassAccount', () => {
+  const { useSelector } = require('react-redux');
+  const stable = {
+    updateModalState: jest.fn(),
+    handleLinkConfirm: jest.fn(),
+    handleOTPSubmit: jest.fn(async () => ({ success: true })),
+    handleRemoveCard: jest.fn(),
+    confirmRemoveCard: jest.fn(),
+    handleAddCard: jest.fn(),
+    resetData: jest.fn()
+  };
+  return {
+    useMasterpassAccount: () => ({
+      ...stable,
+      accountData: useSelector((state: any) => state.masterpassRest.accountData)
+    })
+  };
+});
+
+// Imported after the mocks so the view picks them up.
+import MasterpassRestOption from './masterpass-rest-option';
+
+const makeStore = () =>
+  configureStore({
+    reducer: { masterpassRest: masterpassRestReducer },
+    middleware: (getDefault) => getDefault({ serializableCheck: false })
+  });
+
+/** Mirrors the Sportive theme: preselects a saved card and a new-card installment. */
+const SportiveLikeTheme = (props: MasterpassRestOptionRenderProps) => {
+  const {
+    isPaymentPending,
+    paymentMethod,
+    hasStoredCards,
+    shouldShowDirectForm,
+    accountData,
+    paymentState,
+    handleCardSelect,
+    handleInstallmentSelect,
+    handleBinChange,
+    handlePaymentMethodChange,
+    handleProceedToPayment
+  } = props;
+  const showStoredCards =
+    paymentMethod === 'stored_card' && hasStoredCards && !shouldShowDirectForm;
+  const firstCard = accountData?.result?.cards?.[0];
+
+  useEffect(() => {
+    if (isPaymentPending || !showStoredCards || paymentState?.selectedCard || !firstCard) {
+      return;
+    }
+    void handleCardSelect(firstCard);
+  }, [isPaymentPending, showStoredCards, paymentState?.selectedCard, firstCard, handleCardSelect]);
+
+  useEffect(() => {
+    if (
+      isPaymentPending ||
+      paymentMethod !== 'new_card' ||
+      paymentState?.selectedInstallment ||
+      !paymentState?.installments?.length
+    ) {
+      return;
+    }
+    void handleInstallmentSelect(paymentState.installments[0]);
+  }, [
+    isPaymentPending,
+    paymentMethod,
+    paymentState?.installments,
+    paymentState?.selectedInstallment,
+    handleInstallmentSelect
+  ]);
+
+  return (
+    <>
+      <span data-testid="method">{paymentMethod}</span>
+      <button type="button" onClick={() => handlePaymentMethodChange('new_card')}>
+        new card
+      </button>
+      <button type="button" onClick={() => void handleBinChange('454671')}>
+        type card
+      </button>
+      <button type="button" onClick={() => void handleProceedToPayment()}>
+        pay
+      </button>
+    </>
+  );
+};
+
+/** A theme that preselects without looking at isPaymentPending. */
+const UnguardedTheme = (props: MasterpassRestOptionRenderProps) => {
+  const { accountData, handleCardSelect, handleInstallmentSelect, paymentState } = props;
+  const firstCard = accountData?.result?.cards?.[0];
+
+  useEffect(() => {
+    if (!firstCard) return;
+    void handleCardSelect(firstCard);
+    if (paymentState?.installments?.length) {
+      void handleInstallmentSelect(paymentState.installments[0]);
+    }
+    // Re-runs on every account reload, like an effect keyed on the list.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [firstCard]);
+
+  return (
+    <button type="button" onClick={() => void props.handleProceedToPayment()}>
+      pay
+    </button>
+  );
+};
+
+const mount = (Theme: React.ComponentType<MasterpassRestOptionRenderProps>) => {
+  store = makeStore();
+  store.dispatch(setMasterpassRestAccountData(accountResponse() as any));
+  return render(
+    <Provider store={store}>
+      <MasterpassRestOption customRender={{ fullRender: (props) => <Theme {...props} /> }} />
+    </Provider>
+  );
+};
+
+const settle = async (ms = 0) => {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  });
+};
+
+beforeEach(() => {
+  pages = [];
+  pageCallsWhileOrderNoPending = [];
+  orderNoPending = false;
+  sdkOrderNo = null;
+});
+
+describe('ENT-114 checkout writes during a payment', () => {
+  it('keeps the new-card choice when the same account is reloaded', async () => {
+    mount(SportiveLikeTheme);
+    await settle();
+
+    await userEvent.click(screen.getByRole('button', { name: 'new card' }));
+    expect(screen.getByTestId('method')).toHaveTextContent('new_card');
+
+    await act(async () => {
+      store.dispatch(setMasterpassRestAccountData(accountResponse() as any));
+    });
+    await settle();
+
+    expect(screen.getByTestId('method')).toHaveTextContent('new_card');
+  });
+
+  it('sends no card or installment page after the order number on the new-card flow', async () => {
+    mount(SportiveLikeTheme);
+    await settle();
+
+    // Mount preselects the saved card, as on the storefront.
+    expect(pages).toEqual(['MasterpassRestBinNumberPage', 'MasterpassRestInstallmentPage']);
+
+    await userEvent.click(screen.getByRole('button', { name: 'new card' }));
+    await act(async () => {
+      store.dispatch({
+        type: 'masterpassRest/setNewCardFormData',
+        payload: {
+          cardNumber: '4546 7112 3456 7890',
+          cardholderName: 'Test User',
+          expiryDate: '12/30',
+          cvv: '123'
+        }
+      });
+    });
+    await userEvent.click(screen.getByRole('button', { name: 'type card' }));
+    await settle();
+
+    pages = [];
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle(60);
+
+    expect(pages).toEqual(['MasterpassRestOrderNoPage', 'MasterpassRestCompletePage']);
+    expect(pageCallsWhileOrderNoPending).toEqual([]);
+    expect(sdkOrderNo).toBe('ORDER-1');
+    expect(screen.getByTestId('method')).toHaveTextContent('new_card');
+  });
+
+  it('ignores card and installment selection while the order number is being prepared', async () => {
+    mount(UnguardedTheme);
+    await settle();
+
+    pages = [];
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle(60);
+
+    expect(pageCallsWhileOrderNoPending).toEqual([]);
+    expect(pages).toEqual(['MasterpassRestOrderNoPage', 'MasterpassRestCompletePage']);
+  });
+});