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

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # @akinon/pz-masterpass-rest
 
-## 2.0.56-beta.0
+## 2.0.56
+
+### Patch Changes
+
+- 6a61e19: ZERO-4788:Implement payment context handling and improve OTP flow in Masterpass integration
 
 ## 2.0.55
 

package/jest/__mocks__/akinon-next-components.js

@@ -0,0 +1,26 @@
+const React = require('react');
+
+// Minimal stand-ins: tests assert on this package's behavior, not on how the
+// design system renders.
+const passthrough = (tag) => (props) => {
+  const { children, ...rest } = props || {};
+  return React.createElement(tag, rest, children);
+};
+
+const Modal = ({ open, children }) =>
+  open ? React.createElement('div', { 'data-testid': 'modal' }, children) : null;
+
+module.exports = {
+  Icon: (props) => React.createElement('i', { 'data-icon': props?.name }),
+  Button: passthrough('button'),
+  Input: (props) => {
+    const { error, label, ...rest } = props || {};
+    return React.createElement('input', rest);
+  },
+  LoaderSpinner: () => React.createElement('div', { role: 'status' }),
+  Modal,
+  Price: (props) => React.createElement('span', null, String(props?.value ?? '')),
+  Radio: passthrough('input'),
+  Checkbox: passthrough('input'),
+  Image: (props) => React.createElement('img', { alt: props?.alt, src: props?.src })
+};

package/jest/__mocks__/akinon-next-redux-hooks.js

@@ -0,0 +1,6 @@
+const { useSelector } = require('react-redux');
+
+module.exports = {
+  useAppSelector: useSelector,
+  useAppDispatch: () => require('react-redux').useDispatch()
+};

package/jest/__mocks__/akinon-next-rtk.js

@@ -0,0 +1,4 @@
+module.exports = {
+  api: { injectEndpoints: () => ({ endpoints: {} }) },
+  setPaymentStepBusy: () => ({ type: 'checkout/setPaymentStepBusy' })
+};

package/jest/__mocks__/akinon-next-utils.js

@@ -0,0 +1,4 @@
+module.exports = {
+  getPosError: jest.fn(() => null),
+  buildClientRequestUrl: (url) => url
+};

package/jest/__mocks__/hookform-resolvers.js

@@ -0,0 +1,6 @@
+// Ships ESM-only builds; the form validation path is not what these tests cover.
+module.exports = {
+  yupResolver: () => async () => ({ values: {}, errors: {} }),
+  toNestError: (errors) => errors,
+  validateFieldsNatively: () => {}
+};

package/jest/__mocks__/host-store.js

@@ -0,0 +1,16 @@
+// The package reads the host app's store directly in its service layer. Tests
+// only need the masterpassRest slice the services touch.
+const state = {
+  masterpassRest: {
+    token: 'test-token',
+    tokenData: { MerchantId: 'merchant-1' },
+    modalState: { verificationData: null }
+  }
+};
+
+module.exports = {
+  store: {
+    getState: () => state,
+    dispatch: jest.fn()
+  }
+};

package/jest/file-mock.js

@@ -0,0 +1 @@
+module.exports = { src: '/test-asset.png', height: 1, width: 1 };

package/jest/setup.ts

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom';
+
+// React needs this flag to accept act(...) outside of a render call.
+(global as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+// The SDK is injected by useMasterpassScript at runtime. Tests never exercise
+// the real script, but service constructors call these setters eagerly.
+beforeEach(() => {
+  (window as any).Masterpass = {
+    setToken: jest.fn(),
+    setMerchantId: jest.fn(),
+    paymentService: {
+      payment: jest.fn(),
+      directPayment: jest.fn()
+    },
+    verifyService: {
+      verifyOtp: jest.fn(),
+      resendOtp: jest.fn()
+    }
+  };
+
+  (window as any).Utils = {
+    decodeJwt: jest.fn(() => ({
+      MerchantId: 'merchant-1',
+      AccountKey: 'account-1',
+      AuthenticationMethod: '3DS',
+      Secure3dType: '3D',
+      UserId: 'user-1'
+    }))
+  };
+
+  window.sessionStorage.clear();
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});

package/jest/style-mock.js

@@ -0,0 +1 @@
+module.exports = {};

package/jest.config.js

@@ -0,0 +1,46 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
+  setupFilesAfterEnv: ['<rootDir>/jest/setup.ts'],
+  // The hooks and the option view pull in app-coupled modules (@akinon/next
+  // components, the host app's redux store, image assets). Each is mapped to a
+  // small stub so tests exercise this package's own logic.
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': '<rootDir>/jest/style-mock.js',
+    '\\.(png|jpg|jpeg|gif|svg|webp)$': '<rootDir>/jest/file-mock.js',
+    '^redux/store$': '<rootDir>/jest/__mocks__/host-store.js',
+    '^@hookform/resolvers(/.*)?$': '<rootDir>/jest/__mocks__/hookform-resolvers.js',
+    '^@akinon/next/redux/hooks$':
+      '<rootDir>/jest/__mocks__/akinon-next-redux-hooks.js',
+    '^@akinon/next/components$':
+      '<rootDir>/jest/__mocks__/akinon-next-components.js',
+    '^@akinon/next/utils$': '<rootDir>/jest/__mocks__/akinon-next-utils.js',
+    '^@akinon/next/data/client/(.*)$': '<rootDir>/jest/__mocks__/akinon-next-rtk.js'
+  },
+  transform: {
+    '^.+\\.(ts|tsx)$': [
+      'ts-jest',
+      {
+        // Transpile-only: the package is consumed by brands through SWC and is
+        // never type-checked at build time, so tests assert runtime behavior.
+        diagnostics: false,
+        tsconfig: {
+          isolatedModules: true,
+          jsx: 'react-jsx',
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+          module: 'commonjs',
+          target: 'es2020',
+          lib: ['es2020', 'dom', 'dom.iterable'],
+          moduleResolution: 'node',
+          resolveJsonModule: true,
+          skipLibCheck: true
+        }
+      }
+    ]
+  },
+  transformIgnorePatterns: ['node_modules/(?!(@akinon)/)']
+};

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "2.0.56-beta.0",
+  "version": "2.0.56",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
   "description": "Modern React-based Masterpass REST API integration package for ProjectZero e-commerce platform",
+  "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' });
+  });
+});