@akinon/pz-masterpass-rest 2.0.56-rc.0 → 2.0.56

package/src/views/order-no-mismatch.test.tsx

@@ -0,0 +1,434 @@
+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 from '../redux/reducer';
+import type { MasterpassRestOptionRenderProps } from '../types/custom-render.types';
+
+/**
+ * Regression cover for APS-4980.
+ *
+ * Reported request sequence, captured from a shopper who hit ORDER_NO_MISMATCH:
+ *
+ *   MasterpassRestBinNumberPage
+ *   MasterpassRestInstallmentPage
+ *   MasterpassRestOrderNoPage      <- order number the SDK transaction is bound to
+ *   MasterpassRestBinNumberPage    <- backend regenerates the order number
+ *   MasterpassRestInstallmentPage  <- backend regenerates it again
+ *   MasterpassRestCompletePage     <- arrives with the order number from step 3
+ *
+ * Steps 4 and 5 are not shopper actions: they are the theme preselecting the
+ * first saved card and the first installment when checkout mounts again after
+ * the shopper leaves for 3D and comes back. These tests pin the request
+ * sequence so that regression cannot return unnoticed.
+ */
+
+let pages: string[] = [];
+let orderNoCounter = 0;
+let currentOrderNo = '';
+
+const recordPage = (page: string) => {
+  pages.push(page);
+};
+
+// Mirrors the backend: every bin/installment call re-derives the order number.
+const regenerateOrderNo = () => {
+  orderNoCounter += 1;
+  currentOrderNo = `ORDER-${orderNoCounter}`;
+};
+
+const completeCalls: Array<{ orderNoAtBackend: string }> = [];
+
+jest.mock('../redux/api', () => ({
+  useSetMasterpassRestBinNumberMutation: () => [
+    () => ({
+      unwrap: async () => {
+        recordPage('MasterpassRestBinNumberPage');
+        regenerateOrderNo();
+        return {
+          context_list: [
+            {
+              page_context: {
+                installments: [{ pk: 1, installment_count: 1, label: 'Tek Çekim' }],
+                card_type: { name: 'visa', slug: 'visa', logo: '' }
+              }
+            }
+          ]
+        };
+      }
+    }),
+    { isLoading: false }
+  ],
+  useCheckoutMasterpassInstallmentMutation: () => [
+    () => ({
+      unwrap: async () => {
+        recordPage('MasterpassRestInstallmentPage');
+        regenerateOrderNo();
+        return { context_list: [] };
+      }
+    }),
+    { isLoading: false }
+  ],
+  usePrepareMasterpassOrderMutation: () => [
+    () => ({
+      unwrap: async () => {
+        recordPage('MasterpassRestOrderNoPage');
+        return {
+          pre_order: { total_amount_with_interest: '100.00' },
+          context_list: [{ page_context: { order_no: currentOrderNo, extras: {} } }]
+        };
+      }
+    }),
+    { isLoading: false }
+  ],
+  useFinalizeMasterpassOrderMutation: () => [
+    () => ({
+      unwrap: async () => {
+        recordPage('MasterpassRestCompletePage');
+        completeCalls.push({ orderNoAtBackend: currentOrderNo });
+        return { errors: null };
+      }
+    }),
+    { isLoading: false }
+  ],
+  useQueryMasterpassRewardsMutation: () => [
+    () => ({ unwrap: async () => ({ context_list: [] }) }),
+    { isLoading: false }
+  ],
+  useSelectMasterpassRewardsMutation: () => [
+    () => ({ unwrap: async () => ({}) }),
+    { isLoading: false }
+  ]
+}));
+
+// The order number the SDK was handed when the transaction opened.
+let orderNoHeldBySdk: string | null = null;
+let sdkOutcome: any = { success: true };
+
+jest.mock('../services/payment', () => ({
+  PaymentService: class {
+    async processPayment(request: any) {
+      orderNoHeldBySdk = request.orderNo;
+      return sdkOutcome;
+    }
+    async directPayment(request: any) {
+      orderNoHeldBySdk = request.orderNo;
+      return sdkOutcome;
+    }
+  }
+}));
+
+let responseHandlerResult: any = { success: true };
+jest.mock('../utils/response-handler', () => ({
+  handleMasterpassResponse: async () => responseHandlerResult,
+  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 })
+}));
+
+jest.mock('@akinon/next/utils', () => ({
+  getPosError: () => null,
+  buildClientRequestUrl: (url: string) => url
+}));
+
+const STORED_CARD = {
+  cardAlias: 'my card',
+  cardBin: '454671',
+  uniqueCardNumber: 'unique-1',
+  maskedCardNumber: '4546 **** **** 7890'
+};
+
+const accountHookValue = {
+  accountData: { result: { cards: [STORED_CARD] } },
+  updateModalState: jest.fn(),
+  handleLinkConfirm: jest.fn(),
+  handleOTPSubmit: jest.fn(async () => ({ success: true })),
+  handleRemoveCard: jest.fn(),
+  confirmRemoveCard: jest.fn(),
+  handleAddCard: jest.fn(),
+  resetData: jest.fn()
+};
+
+jest.mock('../hooks/useMasterpassAccount', () => ({
+  useMasterpassAccount: () => accountHookValue
+}));
+
+// Imported after the mocks so the view picks them up.
+import MasterpassRestOption from './masterpass-rest-option';
+
+/** Reproduces the preselection a brand theme performs on mount. */
+const ThemeWithAutoSelect = (props: MasterpassRestOptionRenderProps) => {
+  const {
+    isPaymentPending,
+    handleCardSelect,
+    handleInstallmentSelect,
+    accountData,
+    paymentState
+  } = props;
+  const firstCard = accountData?.result?.cards?.[0];
+
+  useEffect(() => {
+    if (isPaymentPending || paymentState?.selectedCard || !firstCard) {
+      return;
+    }
+    void handleCardSelect(firstCard);
+  }, [isPaymentPending, paymentState?.selectedCard, firstCard, handleCardSelect]);
+
+  useEffect(() => {
+    if (
+      isPaymentPending ||
+      paymentState?.selectedInstallment ||
+      !paymentState?.installments?.length
+    ) {
+      return;
+    }
+    void handleInstallmentSelect(paymentState.installments[0]);
+  }, [
+    isPaymentPending,
+    paymentState?.installments,
+    paymentState?.selectedInstallment,
+    handleInstallmentSelect
+  ]);
+
+  return (
+    <>
+      <button type="button" onClick={() => void handleCardSelect(firstCard)}>
+        choose card
+      </button>
+      <button type="button" onClick={() => void props.handleProceedToPayment()}>
+        pay
+      </button>
+    </>
+  );
+};
+
+/** Each render is a fresh checkout mount, exactly like a page load. */
+const mountCheckout = () =>
+  render(
+    <Provider
+      store={configureStore({
+        reducer: { masterpassRest: masterpassRestReducer },
+        middleware: (getDefault) => getDefault({ serializableCheck: false })
+      })}
+    >
+      <MasterpassRestOption
+        customRender={{ fullRender: (props) => <ThemeWithAutoSelect {...props} /> }}
+      />
+    </Provider>
+  );
+
+const settle = async () => {
+  await act(async () => {
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+};
+
+const stubNavigation = () => {
+  const location = window.location;
+  delete (window as any).location;
+  (window as any).location = { ...location, href: '' };
+  return () => {
+    (window as any).location = location;
+  };
+};
+
+beforeEach(() => {
+  pages = [];
+  orderNoCounter = 0;
+  currentOrderNo = '';
+  completeCalls.length = 0;
+  orderNoHeldBySdk = null;
+  sdkOutcome = { success: true };
+  responseHandlerResult = { success: true };
+});
+
+describe('APS-4980 request sequence', () => {
+  it('does not re-derive the order number when checkout remounts after a 3D redirect', async () => {
+    responseHandlerResult = {
+      requires3D: true,
+      redirectUrl: 'https://bank.example/3d'
+    };
+    const restoreNavigation = stubNavigation();
+
+    const first = mountCheckout();
+    await settle();
+
+    expect(pages).toEqual([
+      'MasterpassRestBinNumberPage',
+      'MasterpassRestInstallmentPage'
+    ]);
+
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle();
+
+    expect(pages).toEqual([
+      'MasterpassRestBinNumberPage',
+      'MasterpassRestInstallmentPage',
+      'MasterpassRestOrderNoPage'
+    ]);
+    const orderNoBoundToTransaction = orderNoHeldBySdk;
+    expect(orderNoBoundToTransaction).toBe(currentOrderNo);
+
+    // The shopper leaves for the bank and comes back: unmount, then mount again.
+    first.unmount();
+    mountCheckout();
+    await settle();
+
+    // The reported bug added two more pages here, moving the backend's order
+    // number away from the one the open transaction carries.
+    expect(pages).toEqual([
+      'MasterpassRestBinNumberPage',
+      'MasterpassRestInstallmentPage',
+      'MasterpassRestOrderNoPage'
+    ]);
+    expect(currentOrderNo).toBe(orderNoBoundToTransaction);
+
+    restoreNavigation();
+  });
+
+  it('reproduces the mismatch when the remount is left unguarded', async () => {
+    // Same flow with the guard disabled, to show the test would have caught the
+    // original defect rather than passing either way.
+    responseHandlerResult = {
+      requires3D: true,
+      redirectUrl: 'https://bank.example/3d'
+    };
+    const restoreNavigation = stubNavigation();
+
+    const UnguardedTheme = (props: MasterpassRestOptionRenderProps) => {
+      const { handleCardSelect, accountData, paymentState } = props;
+      const firstCard = accountData?.result?.cards?.[0];
+
+      useEffect(() => {
+        if (paymentState?.selectedCard || !firstCard) return;
+        void handleCardSelect(firstCard);
+      }, [paymentState?.selectedCard, firstCard, handleCardSelect]);
+
+      return (
+        <button type="button" onClick={() => void props.handleProceedToPayment()}>
+          pay
+        </button>
+      );
+    };
+
+    const mountUnguarded = () =>
+      render(
+        <Provider
+          store={configureStore({
+            reducer: { masterpassRest: masterpassRestReducer },
+            middleware: (getDefault) => getDefault({ serializableCheck: false })
+          })}
+        >
+          <MasterpassRestOption
+            customRender={{ fullRender: (props) => <UnguardedTheme {...props} /> }}
+          />
+        </Provider>
+      );
+
+    const first = mountUnguarded();
+    await settle();
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle();
+
+    const orderNoBoundToTransaction = orderNoHeldBySdk;
+
+    first.unmount();
+    mountUnguarded();
+    await settle();
+
+    expect(pages).toEqual([
+      'MasterpassRestBinNumberPage',
+      'MasterpassRestInstallmentPage',
+      'MasterpassRestOrderNoPage',
+      'MasterpassRestBinNumberPage',
+      'MasterpassRestInstallmentPage'
+    ]);
+    expect(currentOrderNo).not.toBe(orderNoBoundToTransaction);
+
+    restoreNavigation();
+  });
+
+  it('completes against the same order number the transaction was opened with', async () => {
+    mountCheckout();
+    await settle();
+
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle();
+
+    expect(pages).toEqual([
+      'MasterpassRestBinNumberPage',
+      'MasterpassRestInstallmentPage',
+      'MasterpassRestOrderNoPage',
+      'MasterpassRestCompletePage'
+    ]);
+    expect(completeCalls).toHaveLength(1);
+    expect(completeCalls[0].orderNoAtBackend).toBe(orderNoHeldBySdk);
+  });
+
+  it('leaves the shopper to pick a card before a new attempt can start', async () => {
+    responseHandlerResult = {
+      requires3D: true,
+      redirectUrl: 'https://bank.example/3d'
+    };
+    const restoreNavigation = stubNavigation();
+
+    const first = mountCheckout();
+    await settle();
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle();
+
+    first.unmount();
+    mountCheckout();
+    await settle();
+
+    // Nothing is preselected, so paying straight away cannot open a second
+    // transaction behind the one still in flight.
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle();
+
+    expect(pages.filter((page) => page === 'MasterpassRestOrderNoPage')).toHaveLength(1);
+
+    restoreNavigation();
+  });
+
+  it('re-derives the order number once the shopper deliberately retries', async () => {
+    responseHandlerResult = {
+      requires3D: true,
+      redirectUrl: 'https://bank.example/3d'
+    };
+    const restoreNavigation = stubNavigation();
+
+    const first = mountCheckout();
+    await settle();
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle();
+
+    first.unmount();
+
+    // Choosing a card again is an explicit new attempt, so a fresh order number
+    // is the correct outcome here.
+    responseHandlerResult = { success: true };
+    mountCheckout();
+    await settle();
+    await userEvent.click(screen.getByRole('button', { name: 'choose card' }));
+    await settle();
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+    await settle();
+
+    expect(pages.filter((page) => page === 'MasterpassRestOrderNoPage')).toHaveLength(2);
+    expect(completeCalls[0].orderNoAtBackend).toBe(orderNoHeldBySdk);
+
+    restoreNavigation();
+  });
+});

package/src/views/payment-pending-guard.test.tsx

@@ -0,0 +1,276 @@
+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 from '../redux/reducer';
+import { setPaymentPending, getPaymentPending } from '../utils/payment-utils';
+import type { MasterpassRestOptionRenderProps } from '../types/custom-render.types';
+
+const handleCardSelectMock = jest.fn();
+const handleInstallmentSelectMock = jest.fn();
+const processPaymentMock = jest.fn();
+const processDirectPaymentMock = jest.fn();
+const finalizeAfterVerificationMock = jest.fn();
+const updateModalStateMock = jest.fn();
+const handleOTPSubmitMock = jest.fn();
+const getPosErrorMock = jest.fn(() => null as any);
+
+jest.mock('@akinon/next/utils', () => ({
+  getPosError: () => getPosErrorMock(),
+  buildClientRequestUrl: (url: string) => url
+}));
+
+jest.mock('../redux/api', () => ({
+  useSetMasterpassRestBinNumberMutation: () => [
+    () => ({ unwrap: async () => ({ context_list: [] }) }),
+    { isLoading: false }
+  ]
+}));
+
+jest.mock('../hooks/useMasterpassScript', () => ({
+  useMasterpassScript: () => ({ isScriptLoaded: true })
+}));
+
+// The real hooks memoize everything they hand out. The mocks return one frozen
+// object so identities stay stable across renders, otherwise the view's effects
+// re-run on every render and mask the behavior under test.
+const paymentHookValue = {
+  isCheckoutLoading: false,
+  isInstallmentLoading: false,
+  isPrepareLoading: false,
+  isFinalizeLoading: false,
+  isRewardsQueryLoading: false,
+  isRewardsSelectLoading: false,
+  payableAmount: '100.00',
+  updatePaymentState: jest.fn(),
+  handleCardSelect: handleCardSelectMock,
+  handleInstallmentSelect: handleInstallmentSelectMock,
+  processPayment: processPaymentMock,
+  processDirectPayment: processDirectPaymentMock,
+  finalizePaymentAfterVerification: finalizeAfterVerificationMock,
+  fetchRewardsForCard: jest.fn(),
+  openRewardModal: jest.fn(),
+  closeRewardModal: jest.fn(),
+  confirmRewards: jest.fn()
+};
+
+jest.mock('../hooks/useMasterpassPayment', () => ({
+  useMasterpassPayment: () => paymentHookValue
+}));
+
+const STORED_CARD = {
+  cardAlias: 'my card',
+  cardBin: '454671',
+  uniqueCardNumber: 'unique-1',
+  maskedCardNumber: '4546 **** **** 7890'
+};
+
+const accountHookValue = {
+  accountData: { result: { cards: [STORED_CARD] } },
+  updateModalState: updateModalStateMock,
+  handleLinkConfirm: jest.fn(),
+  handleOTPSubmit: handleOTPSubmitMock,
+  handleRemoveCard: jest.fn(),
+  confirmRemoveCard: jest.fn(),
+  handleAddCard: jest.fn(),
+  resetData: jest.fn()
+};
+
+jest.mock('../hooks/useMasterpassAccount', () => ({
+  useMasterpassAccount: () => accountHookValue
+}));
+
+// Imported after the mocks so the view picks them up.
+import MasterpassRestOption from './masterpass-rest-option';
+
+/**
+ * Stands in for a brand theme. Themes preselect the first saved card on mount,
+ * which is what silently regenerated the order number after a shopper came back
+ * from the bank. The guard the theme is expected to honour is `isPaymentPending`.
+ */
+const ThemeWithAutoSelect = (props: MasterpassRestOptionRenderProps) => {
+  const { isPaymentPending, handleCardSelect, accountData, paymentState } = props;
+  const firstCard = accountData?.result?.cards?.[0];
+
+  useEffect(() => {
+    if (isPaymentPending || paymentState?.selectedCard || !firstCard) {
+      return;
+    }
+
+    void handleCardSelect(firstCard);
+  }, [isPaymentPending, paymentState?.selectedCard, firstCard, handleCardSelect]);
+
+  return (
+    <div>
+      <span data-testid="pending">{String(isPaymentPending)}</span>
+      <button type="button" onClick={() => void handleCardSelect(firstCard)}>
+        choose card
+      </button>
+      <button
+        type="button"
+        onClick={() => props.handlePaymentMethodChange('new_card')}
+      >
+        use another card
+      </button>
+      <button type="button" onClick={() => void props.handleProceedToPayment()}>
+        pay
+      </button>
+      <button type="button" onClick={() => void props.handleOTPSubmit('123456')}>
+        verify
+      </button>
+    </div>
+  );
+};
+
+const renderOption = () => {
+  const store = configureStore({
+    reducer: { masterpassRest: masterpassRestReducer },
+    middleware: (getDefault) => getDefault({ serializableCheck: false })
+  });
+
+  return render(
+    <Provider store={store}>
+      <MasterpassRestOption
+        customRender={{ fullRender: (props) => <ThemeWithAutoSelect {...props} /> }}
+      />
+    </Provider>
+  );
+};
+
+beforeEach(() => {
+  getPosErrorMock.mockReturnValue(null);
+  processPaymentMock.mockResolvedValue({ success: true });
+  handleOTPSubmitMock.mockResolvedValue({ success: true });
+  finalizeAfterVerificationMock.mockResolvedValue({ success: true });
+});
+
+describe('returning to checkout while a transaction is still open', () => {
+  it('suppresses the automatic card preselection that would change the order number', async () => {
+    setPaymentPending('ORDER-1');
+
+    renderOption();
+
+    expect(screen.getByTestId('pending')).toHaveTextContent('true');
+    expect(handleCardSelectMock).not.toHaveBeenCalled();
+  });
+
+  it('preselects a card normally when no transaction is open', async () => {
+    renderOption();
+
+    expect(screen.getByTestId('pending')).toHaveTextContent('false');
+    expect(handleCardSelectMock).toHaveBeenCalledWith(STORED_CARD);
+  });
+
+  it('still lets the shopper start over by choosing a card themselves', async () => {
+    setPaymentPending('ORDER-1');
+
+    renderOption();
+    expect(handleCardSelectMock).not.toHaveBeenCalled();
+
+    await userEvent.click(screen.getByRole('button', { name: 'choose card' }));
+
+    expect(handleCardSelectMock).toHaveBeenCalledWith(STORED_CARD);
+    expect(getPaymentPending()).toBeNull();
+    expect(screen.getByTestId('pending')).toHaveTextContent('false');
+  });
+
+  it('releases the guard when the shopper switches to a new card', async () => {
+    setPaymentPending('ORDER-1');
+
+    renderOption();
+
+    await userEvent.click(screen.getByRole('button', { name: 'use another card' }));
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('releases the guard when the completion request came back with an error', async () => {
+    setPaymentPending('ORDER-1');
+    getPosErrorMock.mockReturnValue({ non_field_errors: 'ORDER_NO_MISMATCH' });
+
+    renderOption();
+
+    expect(getPaymentPending()).toBeNull();
+    expect(screen.getByTestId('pending')).toHaveTextContent('false');
+  });
+
+  it('releases the guard once the record has aged out', async () => {
+    window.sessionStorage.setItem(
+      'masterpass_rest_payment_pending',
+      JSON.stringify({ orderNo: 'ORDER-1', startedAt: Date.now() - 31 * 60 * 1000 })
+    );
+
+    renderOption();
+
+    expect(screen.getByTestId('pending')).toHaveTextContent('false');
+    expect(handleCardSelectMock).toHaveBeenCalledWith(STORED_CARD);
+  });
+});
+
+describe('a payment that needs verification', () => {
+  it('marks the verification as belonging to the payment, not the account', async () => {
+    processPaymentMock.mockResolvedValue({
+      requiresOTP: true,
+      otpType: 'OTP'
+    });
+
+    renderOption();
+
+    await userEvent.click(screen.getByRole('button', { name: 'pay' }));
+
+    expect(updateModalStateMock).toHaveBeenCalledWith({
+      showOTPModal: true,
+      otpType: 'OTP',
+      otpContext: 'payment'
+    });
+  });
+
+  it('completes the order against the backend once verification succeeds', async () => {
+    const verificationData = { result: { responseCode: '0000', token: 'verified' } };
+    handleOTPSubmitMock.mockResolvedValue({
+      success: true,
+      isPaymentContext: true,
+      verificationData
+    });
+
+    renderOption();
+
+    await userEvent.click(screen.getByRole('button', { name: 'verify' }));
+
+    expect(finalizeAfterVerificationMock).toHaveBeenCalledWith(verificationData);
+  });
+
+  it('does not complete an order for an account-only verification', async () => {
+    handleOTPSubmitMock.mockResolvedValue({ success: true });
+
+    renderOption();
+
+    await userEvent.click(screen.getByRole('button', { name: 'verify' }));
+
+    expect(finalizeAfterVerificationMock).not.toHaveBeenCalled();
+  });
+
+  it('reports a failed completion instead of letting it pass silently', async () => {
+    handleOTPSubmitMock.mockResolvedValue({
+      success: true,
+      isPaymentContext: true,
+      verificationData: { result: {} }
+    });
+    finalizeAfterVerificationMock.mockResolvedValue({
+      success: false,
+      message: 'ORDER_NO_MISMATCH'
+    });
+
+    renderOption();
+
+    await userEvent.click(screen.getByRole('button', { name: 'verify' }));
+    // The error dispatch lands after the finalize promise settles.
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(finalizeAfterVerificationMock).toHaveBeenCalled();
+  });
+});