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

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

package/src/types/custom-render.types.ts

@@ -114,6 +114,10 @@ export type MasterpassRestOptionRenderProps = {
   cvc: string;
   error: any;
 
+  /** True while a Masterpass transaction started on this tab has not settled. */
+  isPaymentPending: boolean;
+  dismissPaymentPending: () => void;
+
   accountData: any;
   accountStatus: any;
   modalState: any;

package/src/types/payment.types.ts

@@ -102,6 +102,8 @@ export interface InformationModalData {
   buttonText: string;
 }
 
+export type OTPContext = 'account' | 'payment';
+
 export interface ModalState {
   showLinkModal: boolean;
   showOTPModal: boolean;
@@ -110,6 +112,7 @@ export interface ModalState {
   showRewardModal: boolean;
   informationModalData: InformationModalData | null;
   otpType: OTPType;
+  otpContext: OTPContext;
   verificationData: any | null;
   cardToDelete: any | null;
   removingCardId: string | null;

package/src/utils/card-utils.ts

@@ -9,7 +9,7 @@ export const formatCardNumber = (value: string): string => {
 
   const formatted = cleanValue.replace(/(\d{4})(?=\d)/g, '$1 ');
 
-  return formatted.substring(0, 19);
+  return formatted.substring(0, 23);
 };
 
 export const formatExpiryDate = (value: string): string => {

package/src/utils/payment-pending.test.ts

@@ -0,0 +1,89 @@
+import {
+  setPaymentPending,
+  getPaymentPending,
+  clearPaymentPending
+} from './payment-utils';
+
+const STORAGE_KEY = 'masterpass_rest_payment_pending';
+const TTL_MS = 30 * 60 * 1000;
+
+describe('payment pending record', () => {
+  it('reports nothing pending when no payment has started', () => {
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('remembers the order number the transaction was opened with', () => {
+    setPaymentPending('ORDER-123');
+
+    expect(getPaymentPending()).toEqual({
+      orderNo: 'ORDER-123',
+      startedAt: expect.any(Number)
+    });
+  });
+
+  it('still marks a payment pending when no order number is known', () => {
+    setPaymentPending(null);
+
+    const record = getPaymentPending();
+    expect(record).not.toBeNull();
+    expect(record?.orderNo).toBeNull();
+  });
+
+  it('stops reporting pending once cleared', () => {
+    setPaymentPending('ORDER-123');
+    clearPaymentPending();
+
+    expect(getPaymentPending()).toBeNull();
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBeNull();
+  });
+
+  it('keeps a record that is still inside the ttl', () => {
+    window.sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ orderNo: 'ORDER-123', startedAt: Date.now() - TTL_MS + 60_000 })
+    );
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-123');
+  });
+
+  it('expires and purges a record past the ttl so an abandoned tab recovers', () => {
+    window.sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ orderNo: 'ORDER-123', startedAt: Date.now() - TTL_MS - 1 })
+    );
+
+    expect(getPaymentPending()).toBeNull();
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBeNull();
+  });
+
+  it('treats an unparseable record as not pending', () => {
+    window.sessionStorage.setItem(STORAGE_KEY, 'not-json');
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('treats a record without a timestamp as not pending', () => {
+    window.sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ orderNo: 'ORDER-123' })
+    );
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('degrades quietly when session storage is unavailable', () => {
+    const proto = Object.getPrototypeOf(window.sessionStorage);
+    const boom = () => {
+      throw new Error('storage disabled');
+    };
+    jest.spyOn(proto, 'setItem').mockImplementation(boom);
+    jest.spyOn(proto, 'getItem').mockImplementation(boom);
+    jest.spyOn(proto, 'removeItem').mockImplementation(boom);
+
+    expect(() => setPaymentPending('ORDER-123')).not.toThrow();
+    expect(getPaymentPending()).toBeNull();
+    expect(() => clearPaymentPending()).not.toThrow();
+
+    jest.restoreAllMocks();
+  });
+});

package/src/utils/payment-utils.ts

@@ -15,6 +15,53 @@ export const isTokenExpired = (
   return Date.now() >= tokenData.exp * 1000 - bufferMs;
 };
 
+const PAYMENT_PENDING_KEY = 'masterpass_rest_payment_pending';
+const PAYMENT_PENDING_TTL_MS = 30 * 60 * 1000;
+
+export interface PaymentPendingRecord {
+  orderNo: string | null;
+  startedAt: number;
+}
+
+export const setPaymentPending = (orderNo?: string | null): void => {
+  try {
+    window.sessionStorage.setItem(
+      PAYMENT_PENDING_KEY,
+      JSON.stringify({ orderNo: orderNo || null, startedAt: Date.now() })
+    );
+  } catch (error) {
+    // sessionStorage may be unavailable (private mode, blocked storage)
+  }
+};
+
+export const getPaymentPending = (): PaymentPendingRecord | null => {
+  try {
+    const raw = window.sessionStorage.getItem(PAYMENT_PENDING_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as PaymentPendingRecord;
+    if (
+      !parsed?.startedAt ||
+      Date.now() - parsed.startedAt > PAYMENT_PENDING_TTL_MS
+    ) {
+      window.sessionStorage.removeItem(PAYMENT_PENDING_KEY);
+      return null;
+    }
+
+    return parsed;
+  } catch (error) {
+    return null;
+  }
+};
+
+export const clearPaymentPending = (): void => {
+  try {
+    window.sessionStorage.removeItem(PAYMENT_PENDING_KEY);
+  } catch (error) {
+    // sessionStorage may be unavailable (private mode, blocked storage)
+  }
+};
+
 export const enhance3DSecureUrl = (originalUrl: string): string => {
   try {
     const baseUrl = window.location.origin;

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

@@ -15,6 +15,10 @@ import {
   setLocale,
   setCurrency
 } from '../redux/reducer';
+import {
+  getPaymentPending,
+  clearPaymentPending
+} from '../utils/payment-utils';
 import type { CreditCardFormData } from '../utils/validation-schemas';
 import type {
   MasterpassRestOptionCustomRender,
@@ -223,6 +227,17 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   const [cvc, setCvc] = useState<string>('');
   const [isProcessingPayment, setIsProcessingPayment] = useState(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>(() =>
+    typeof window === 'undefined' ? false : Boolean(getPaymentPending())
+  );
+
+  const dismissPaymentPending = useCallback(() => {
+    clearPaymentPending();
+    setIsPaymentPending(false);
+  }, []);
+
   const [setMasterpassRestBinNumber] = useSetMasterpassRestBinNumberMutation();
 
   const {
@@ -237,6 +252,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     handleInstallmentSelect,
     processPayment,
     processDirectPayment,
+    finalizePaymentAfterVerification,
     openRewardModal,
     closeRewardModal,
     confirmRewards,
@@ -334,15 +350,20 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
 
   useEffect(() => {
     const error = getPosError();
+
     if (error && Object.keys(error).length > 0) {
       dispatch(setError(error));
+
+      // The completion request already ran and failed, so the order number it
+      // was bound to is settled and the flow may restart from scratch.
+      dismissPaymentPending();
     }
 
     return () => {
       resetData();
       dispatch(clearAllErrors());
     };
-  }, [dispatch, resetData]);
+  }, [dispatch, resetData, dismissPaymentPending]);
 
   const getErrorInfo = (error: any) => {
     if (error && typeof error === 'object') {
@@ -427,7 +448,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
       if (result.requiresOTP && result.otpType) {
         updateModalState({
           showOTPModal: true,
-          otpType: result.otpType
+          otpType: result.otpType,
+          otpContext: 'payment'
         });
         return;
       }
@@ -453,12 +475,34 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
 
     const result = await handleOTPSubmit(otp, mergedTexts);
 
+    // A payment-context OTP leaves the Masterpass transaction open; the backend
+    // only learns about it once the completion request is sent.
+    if (result?.success && result?.isPaymentContext) {
+      const finalizeResult = await finalizePaymentAfterVerification(
+        result.verificationData
+      );
+
+      if (!finalizeResult.success) {
+        dispatch(
+          setError(finalizeResult.message || mergedTexts.paymentFailedText)
+        );
+      }
+
+      return finalizeResult;
+    }
+
     return result;
-  }, [handleOTPSubmit, mergedTexts]);
+  }, [
+    handleOTPSubmit,
+    finalizePaymentAfterVerification,
+    dispatch,
+    mergedTexts
+  ]);
 
   const handleCardSelectWithErrorHandling = useCallback(async (card: any) => {
     try {
       dispatch(clearAllErrors());
+      dismissPaymentPending();
       await handleCardSelect(card);
     } catch (error) {
       const errorMessage =
@@ -467,11 +511,12 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
           : mergedTexts.failedToSelectCardText;
       dispatch(setError(errorMessage));
     }
-  }, [dispatch, handleCardSelect, mergedTexts.failedToSelectCardText]);
+  }, [dispatch, dismissPaymentPending, handleCardSelect, mergedTexts.failedToSelectCardText]);
 
   const handleInstallmentSelectWithErrorHandling = useCallback(async (installment: any) => {
     try {
       dispatch(clearAllErrors());
+      dismissPaymentPending();
       await handleInstallmentSelect(installment);
     } catch (error) {
       const errorMessage =
@@ -480,7 +525,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
           : mergedTexts.failedToSelectInstallmentText;
       dispatch(setError(errorMessage));
     }
-  }, [dispatch, handleInstallmentSelect, mergedTexts.failedToSelectInstallmentText]);
+  }, [dispatch, dismissPaymentPending, handleInstallmentSelect, mergedTexts.failedToSelectInstallmentText]);
 
   const handleConfirmRewards = useCallback(
     async (selected: RewardItem[]) => {
@@ -500,6 +545,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   }, [updatePaymentState]);
 
   const handlePaymentMethodChange = useCallback((method: 'stored_card' | 'new_card') => {
+    dismissPaymentPending();
     setPaymentMethod(method);
     updatePaymentState({
       selectedCard: null,
@@ -511,7 +557,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     setCvc('');
     dispatch(setLastCheckedBin(''));
     dispatch(clearNewCardFormData());
-  }, [dispatch, updatePaymentState]);
+  }, [dispatch, dismissPaymentPending, updatePaymentState]);
 
   const customRenderRef = useRef(customRender);
   customRenderRef.current = customRender;
@@ -564,6 +610,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     shouldShowDirectForm,
     cvc,
     error,
+    isPaymentPending,
+    dismissPaymentPending,
 
     accountData,
     accountStatus,
@@ -606,6 +654,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     shouldShowDirectForm,
     cvc,
     error,
+    isPaymentPending,
+    dismissPaymentPending,
     accountData,
     accountStatus,
     modalState,