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

package/CHANGELOG.md

@@ -1,14 +1,12 @@
 # @akinon/pz-masterpass-rest
 
-## 2.0.56-rc.0
+## 2.0.57-beta.0
+
+## 2.0.56
 
 ### Patch Changes
 
-- 119f0c11: ZERO-4629: Refactor token decoding to use decodeMasterpassToken utility and add wait-for-utils-ready functionality
-- 823a4449a: ZERO-4193: Upgrade TypeScript to version 5.2.2 across multiple packages
-- 5da13fff: ZERO-4358: fix masterpass-rest guest checkout flow
-- fb4aa9b4: ZERO-4333: update maxLength for cardNumber input and enhance button styling in installment list
-- 63a720003: ZERO-3895: enhance payment processing with additional fields support
+- 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-rc.0",
+  "version": "2.0.57-beta.0",
   "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",
@@ -31,6 +34,6 @@
   "devDependencies": {
     "@types/react": "18.2.27",
     "@types/react-dom": "18.2.12",
-    "typescript": "^5.2.2"
+    "typescript": "5.2.2"
   }
 }

package/src/components/credit-card-form.tsx

@@ -184,7 +184,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
                   setValue('cardNumber', formatted, { shouldValidate: true });
                 }}
                 error={errors.cardNumber}
-                maxLength={19}
+                maxLength={23}
                 className="pr-20"
               />
               {cardType !== 'unknown' && (

package/src/components/installment-list.tsx

@@ -118,7 +118,7 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
             <Button
               onClick={onProceedToPayment}
               disabled={isLoading || paymentLoading}
-              className="w-full cursor-pointer bg-[#000000] text-[#ffffff] hover:bg-[#ffffff] hover:text-[#000000] border border-solid border-[#000000] disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {paymentLoading ? (
                 <div className="flex items-center justify-center">

package/src/components/otp-modal.tsx

@@ -204,21 +204,15 @@ const OTPModal: React.FC<OTPModalProps> = ({
     >
       <div className="px-6">
         {getTitle() && (
-          <h3 className="text-center mt-4 text-lg font-semibold">
-            {getTitle()}
-          </h3>
+          <h3 className="text-center mt-4 text-lg font-semibold">{getTitle()}</h3>
         )}
-        <p className="text-center mt-2 text-sm text-gray-600">
-          {getDescription()}
-        </p>
+        <p className="text-center mt-2 text-sm text-gray-600">{getDescription()}</p>
         <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
           <Input
             type="text"
             value={otp}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setOtp(
-                e.target.value.replace(/\D/g, '').slice(0, getMaxLength())
-              );
+              setOtp(e.target.value.replace(/\D/g, '').slice(0, getMaxLength()));
               setError(null);
             }}
             maxLength={getMaxLength()}
@@ -228,9 +222,7 @@ const OTPModal: React.FC<OTPModalProps> = ({
             placeholder={getPlaceholder()}
           />
           {getHelperText() && (
-            <p className="text-xs text-gray-500 text-center">
-              {getHelperText()}
-            </p>
+            <p className="text-xs text-gray-500 text-center">{getHelperText()}</p>
           )}
           {error && (
             <p className="text-[#d72b01] text-xs text-center">{error}</p>

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');
+  });
+});