@akinon/pz-masterpass-rest 2.0.0-beta.12 → 2.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
   "description": "Modern React-based Masterpass REST API integration package for ProjectZero e-commerce platform",
@@ -23,8 +23,8 @@
     "yup": "0.32.11"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
     "react-redux": "^8.1.3",
     "@reduxjs/toolkit": "^1.9.7"
   },

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

@@ -50,7 +50,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
     setValue,
     formState: { errors, isValid }
   } = useForm<CreditCardFormData>({
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(validationSchema) as any,
     defaultValues: {
       cardNumber: '',
       expiryDate: '',

package/src/components/information-modal.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Modal, Button } from '@akinon/next/components';
+import mpBlackLogo from '../assets/img/masterpass-black-logo.png';
+import type { InformationModalType, InformationModalData } from '../types/payment.types';
+
+export interface InformationModalProps {
+  open: boolean;
+  onClose: () => void;
+  data: InformationModalData | null;
+  onButtonClick?: () => void;
+}
+
+const iconMap: Record<InformationModalType, React.ReactNode> = {
+  warning: (
+    <svg
+      className="w-8 h-8 text-amber-600"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  ),
+  error: (
+    <svg
+      className="w-8 h-8 text-red-600"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  ),
+  success: (
+    <svg
+      className="w-8 h-8 text-green-600"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  ),
+  info: (
+    <svg
+      className="w-8 h-8 text-blue-600"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  )
+};
+
+const bgColorMap: Record<InformationModalType, string> = {
+  warning: 'bg-amber-100',
+  error: 'bg-red-100',
+  success: 'bg-green-100',
+  info: 'bg-blue-100'
+};
+
+const InformationModal: React.FC<InformationModalProps> = ({
+  open,
+  onClose,
+  data,
+  onButtonClick
+}) => {
+  const handleButtonClick = () => {
+    if (onButtonClick) {
+      onButtonClick();
+    } else {
+      onClose();
+    }
+  };
+
+  if (!data) return null;
+
+  const { type, title, message, secondaryMessage, buttonText } = data;
+
+  return (
+    <Modal
+      portalId="masterpass-information-modal"
+      open={open}
+      setOpen={onClose}
+      title={
+        <img src={mpBlackLogo.src} alt="Masterpass" className="w-36 h-auto" />
+      }
+      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
+    >
+      <div className="px-6 py-4">
+        <div className="flex flex-col items-center text-center">
+          <div className={`w-16 h-16 rounded-full ${bgColorMap[type]} flex items-center justify-center mb-4`}>
+            {iconMap[type]}
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            {title}
+          </h3>
+          <p className="text-sm text-gray-600 mb-3">
+            {message}
+          </p>
+          {secondaryMessage && (
+            <p className="text-xs text-gray-500 mb-6">
+              {secondaryMessage}
+            </p>
+          )}
+          <Button
+            className="w-full py-3 h-auto"
+            onClick={handleButtonClick}
+          >
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default InformationModal;

package/src/components/otp-modal.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, Button, Input } from '@akinon/next/components';
 import { LoaderSpinner } from '@akinon/next/components';
+import { useAppSelector } from '@akinon/next/redux/hooks';
 import type { OTPModalProps } from '../types/custom-render.types';
 import mpBlackLogo from '../assets/img/masterpass-black-logo.png';
 import { handleResendOtp } from '../utils/response-handler';
@@ -11,9 +12,11 @@ const OTPModal: React.FC<OTPModalProps> = ({
   onClose,
   onSubmit,
   type,
+  responseCode,
   description,
   texts
 }) => {
+  const { token, tokenData } = useAppSelector((state) => state.masterpassRest);
   const [otp, setOtp] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -21,6 +24,13 @@ const OTPModal: React.FC<OTPModalProps> = ({
   const [canResend, setCanResend] = useState(false);
   const [remainingTime, setRemainingTime] = useState(90);
 
+  useEffect(() => {
+    if (!open) {
+      setError(null);
+      setOtp('');
+    }
+  }, [open]);
+
   useEffect(() => {
     if (open && type === 'OTP') {
       setRemainingTime(90);
@@ -38,14 +48,16 @@ const OTPModal: React.FC<OTPModalProps> = ({
 
       return () => clearInterval(timer);
     }
-  }, [open, type]);
+  }, [open, type, responseCode]);
 
   const handleSubmit = async () => {
     setError(null);
     setIsLoading(true);
     try {
       const result = await onSubmit(otp);
-      if (result?.message) {
+      if (result?.requiresOTP) {
+        setOtp('');
+      } else if (result?.message) {
         setError(result.message);
       }
     } catch (error) {
@@ -59,7 +71,7 @@ const OTPModal: React.FC<OTPModalProps> = ({
     setError(null);
     setIsResending(true);
     try {
-      const result = await handleResendOtp();
+      const result = await handleResendOtp(token, tokenData?.MerchantId);
       if (result.success) {
         setRemainingTime(90);
         setCanResend(false);
@@ -90,7 +102,47 @@ const OTPModal: React.FC<OTPModalProps> = ({
     return `${minutes}:${secs.toString().padStart(2, '0')}`;
   };
 
+  const getContentByResponseCode = () => {
+    switch (responseCode) {
+      case '5000':
+        return {
+          title: texts.rtaVerificationTitle,
+          description: texts.rtaVerificationDescription,
+          placeholder: texts.rtaVerificationPlaceholder,
+          helperText: null
+        };
+      case '5001':
+        return {
+          title: texts.bankOtpVerificationTitle,
+          description: texts.bankOtpVerificationDescription,
+          placeholder: texts.bankOtpVerificationPlaceholder,
+          helperText: null
+        };
+      case '5008':
+        return {
+          title: texts.phoneVerificationTitle,
+          description: texts.phoneVerificationDescription,
+          placeholder: texts.phoneVerificationPlaceholder,
+          helperText: null
+        };
+      case '5013':
+        return {
+          title: texts.cvvVerificationTitle,
+          description: texts.cvvVerificationDescription,
+          placeholder: texts.cvvVerificationPlaceholder,
+          helperText: texts.cvvVerificationHelperText
+        };
+      default:
+        return null;
+    }
+  };
+
   const getDescription = () => {
+    const responseCodeContent = getContentByResponseCode();
+    if (responseCodeContent) {
+      return responseCodeContent.description;
+    }
+
     if (description) {
       return description;
     }
@@ -104,15 +156,40 @@ const OTPModal: React.FC<OTPModalProps> = ({
     }
   };
 
-  const getMaxLength = () => {
+  const getTitle = () => {
+    const responseCodeContent = getContentByResponseCode();
+    if (responseCodeContent) {
+      return responseCodeContent.title;
+    }
+
     switch (type) {
       case 'RTA':
-        return 3;
+        return texts.rtaVerificationTitle;
       case 'CVV':
-        return 3;
+        return texts.cvvVerificationTitle;
       default:
-        return 6;
+        return null;
+    }
+  };
+
+  const getPlaceholder = () => {
+    const responseCodeContent = getContentByResponseCode();
+    if (responseCodeContent) {
+      return responseCodeContent.placeholder;
     }
+    return '';
+  };
+
+  const getHelperText = () => {
+    const responseCodeContent = getContentByResponseCode();
+    return responseCodeContent?.helperText || null;
+  };
+
+  const getMaxLength = () => {
+    if (responseCode === '5013' || type === 'CVV') {
+      return 4;
+    }
+    return 6;
   };
 
   return (
@@ -126,27 +203,32 @@ const OTPModal: React.FC<OTPModalProps> = ({
       className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
     >
       <div className="px-6">
-        <p className="text-center mt-4 text-lg">{getDescription()}</p>
+        {getTitle() && (
+          <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>
         <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()}
             pattern="[0-9]*"
             inputMode="numeric"
             className="text-center"
+            placeholder={getPlaceholder()}
           />
+          {getHelperText() && (
+            <p className="text-xs text-gray-500 text-center">{getHelperText()}</p>
+          )}
           {error && <p className="text-error text-xs text-center">{error}</p>}
           <Button
             className="py-3 h-auto"
             onClick={handleSubmit}
-            disabled={isLoading || otp.length !== getMaxLength()}
+            disabled={isLoading || otp.length === 0}
           >
             {isLoading ? (
               <LoaderSpinner className="w-4 h-4" />

package/src/hooks/useMasterpassAccount.ts

@@ -39,16 +39,16 @@ export const useMasterpassAccount = () => {
   } = useAppSelector((state) => state.masterpassRest);
 
   const initializeAccount = useCallback(
-    async (tokenData: any) => {
-      if (!tokenData?.AccountKey) return;
+    async (newTokenData: any, rawToken?: string) => {
+      if (!newTokenData?.AccountKey) return;
 
-      const accountService = new AccountService();
+      const accountService = new AccountService(rawToken || token, newTokenData?.MerchantId);
 
       try {
         const response = await accountService.accountAccess({
-          accountKey: tokenData.AccountKey,
+          accountKey: newTokenData.AccountKey,
           accountKeyType: 'Msisdn',
-          userId: tokenData.UserId
+          userId: newTokenData.UserId
         });
 
         if (response.statusCode !== 200 && response.exception) {
@@ -99,12 +99,12 @@ export const useMasterpassAccount = () => {
         );
       }
     },
-    [dispatch]
+    [dispatch, token]
   );
 
   const onTokenReady = useCallback(
-    (newTokenData: any) => {
-      initializeAccount(newTokenData);
+    (newTokenData: any, rawToken?: string) => {
+      initializeAccount(newTokenData, rawToken);
     },
     [initializeAccount]
   );
@@ -126,15 +126,26 @@ export const useMasterpassAccount = () => {
     dispatch(resetState());
   }, [dispatch]);
 
-  const refreshToken = async () => {
-    resetData();
-    await refetch();
+  const refreshToken = async (options?: { three_d?: boolean; skipReset?: boolean }) => {
+    if (options?.three_d !== false && !options?.skipReset) {
+      resetData();
+    }
+    const result = await refetch(options);
+    if (result?.data?.token) {
+      const decodedToken = window.Utils.decodeJwt(result.data.token);
+      return {
+        tokenData: decodedToken,
+        token: result.data.token,
+        merchantId: decodedToken?.MerchantId
+      };
+    }
+    return null;
   };
 
   const refreshAccountData = useCallback(async () => {
     if (!tokenData?.AccountKey) return;
 
-    const accountService = new AccountService();
+    const accountService = new AccountService(token, tokenData?.MerchantId);
     const response = await accountService.accountAccess({
       accountKey: tokenData.AccountKey,
       accountKeyType: 'Msisdn',
@@ -153,15 +164,20 @@ export const useMasterpassAccount = () => {
         })
       );
     }
-  }, [tokenData?.AccountKey, tokenData?.UserId, dispatch]);
+  }, [tokenData?.AccountKey, tokenData?.UserId, tokenData?.MerchantId, token, dispatch]);
 
   const handleLinkConfirm = useCallback(async () => {
-    if (!tokenData?.AccountKey) return;
-
     try {
-      const accountService = new AccountService();
+      const freshResult = await refreshToken({ three_d: false });
+      const activeTokenData = freshResult?.tokenData || tokenData;
+      const activeToken = freshResult?.token || token;
+      const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
+
+      if (!activeTokenData?.AccountKey) return;
+
+      const accountService = new AccountService(activeToken, activeMerchantId);
       const response = await accountService.linkToMerchant({
-        accountKey: tokenData.AccountKey
+        accountKey: activeTokenData.AccountKey
       });
 
       const result = await handleMasterpassResponse(response);
@@ -177,7 +193,6 @@ export const useMasterpassAccount = () => {
         );
       } else if (result.success) {
         dispatch(setShowLinkModal(false));
-        await refreshToken();
         await refreshAccountData();
       } else {
         dispatch(setShowLinkModal(false));
@@ -185,17 +200,34 @@ export const useMasterpassAccount = () => {
     } catch (error) {
       dispatch(setShowLinkModal(false));
     }
-  }, [tokenData?.AccountKey, dispatch, refreshToken, refreshAccountData]);
+  }, [tokenData, token, dispatch, refreshToken, refreshAccountData]);
 
   const handleOTPSubmit = useCallback(
-    async (otp: string) => {
-      const result = await handleVerification(otp);
+    async (otp: string, texts?: any) => {
+      const result = await handleVerification(otp, token, tokenData?.MerchantId);
 
       if (result.success) {
         dispatch(setShowOTPModal(false));
-        await refreshToken();
         await refreshAccountData();
         return { success: true };
+      } else if (result.sessionExpired) {
+        dispatch(setShowOTPModal(false));
+        dispatch(
+          updateModalState({
+            showInformationModal: true,
+            informationModalData: {
+              type: 'warning',
+              title: texts?.sessionExpiredTitle || 'Session Expired',
+              message: texts?.sessionExpiredMessage || 'Your session has expired due to inactivity. Please restart the process to continue.',
+              secondaryMessage: texts?.sessionExpiredSecondaryMessage || 'For security reasons, verification codes are only valid for a limited time.',
+              buttonText: texts?.sessionExpiredButton || 'Start Again'
+            }
+          })
+        );
+        return {
+          success: false,
+          sessionExpired: true
+        };
       } else if (result.requires3D && result.redirectUrl) {
         dispatch(setShowOTPModal(false));
         window.location.href = result.redirectUrl;
@@ -216,10 +248,7 @@ export const useMasterpassAccount = () => {
         return {
           success: false,
           requiresOTP: true,
-          otpType: result.otpType,
-          message:
-            result.message ||
-            'Additional verification required. Please enter the new OTP code.'
+          otpType: result.otpType
         };
       } else {
         return {
@@ -228,7 +257,7 @@ export const useMasterpassAccount = () => {
         };
       }
     },
-    [dispatch, refreshAccountData, refreshToken]
+    [dispatch, refreshAccountData, token, tokenData?.MerchantId]
   );
 
   const handleRemoveCard = useCallback(
@@ -245,7 +274,7 @@ export const useMasterpassAccount = () => {
     dispatch(setRemovingCardId(cardToDelete.uniqueCardNumber));
 
     try {
-      const accountService = new AccountService();
+      const accountService = new AccountService(token, tokenData?.MerchantId);
       const response = await accountService.removeCard({
         accountKey: tokenData.AccountKey,
         cardAlias: cardToDelete.cardAlias
@@ -276,6 +305,8 @@ export const useMasterpassAccount = () => {
   }, [
     modalState.cardToDelete,
     tokenData?.AccountKey,
+    tokenData?.MerchantId,
+    token,
     dispatch,
     refreshAccountData
   ]);
@@ -288,10 +319,6 @@ export const useMasterpassAccount = () => {
       cvv: string;
       cardAlias: string;
     }) => {
-      if (!tokenData?.AccountKey) {
-        throw new Error('Account key not available');
-      }
-
       const finalCardData = cardData || {
         cardNumber: newCardFormData.cardNumber || '',
         cardholderName: newCardFormData.cardholderName || '',
@@ -301,7 +328,17 @@ export const useMasterpassAccount = () => {
       };
 
       try {
-        const accountService = new AccountService();
+        const freshResult = await refreshToken({ three_d: false });
+
+        const activeTokenData = freshResult?.tokenData || tokenData;
+        const activeToken = freshResult?.token || token;
+        const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
+
+        if (!activeTokenData?.AccountKey) {
+          throw new Error('Token data not available');
+        }
+
+        const accountService = new AccountService(activeToken, activeMerchantId);
 
         const timestamp = Date.now().toString().slice(-10);
         const random = Math.floor(Math.random() * 1000)
@@ -314,16 +351,16 @@ export const useMasterpassAccount = () => {
 
         const response = await accountService.addCard({
           requestReferenceNumber,
-          accountKey: tokenData.AccountKey,
+          accountKey: activeTokenData.AccountKey,
           accountKeyType: 'Msisdn',
           cardNumber: finalCardData.cardNumber.replace(/\D/g, ''),
           cardHolderName: finalCardData.cardholderName,
           expiryDate: formattedExpiryDate,
           cvv: finalCardData.cvv,
           accountAliasName: finalCardData.cardAlias,
-          userId: tokenData.UserId,
-          isMsisdnValidatedByMerchant: tokenData.IsMsisdnValidated === 'True',
-          authenticationMethod: tokenData.AuthenticationMethod
+          userId: activeTokenData.UserId,
+          isMsisdnValidatedByMerchant: activeTokenData.IsMsisdnValidated === 'True',
+          authenticationMethod: activeTokenData.AuthenticationMethod
         });
 
         const result = await handleMasterpassResponse(response);
@@ -344,6 +381,7 @@ export const useMasterpassAccount = () => {
 
           return result;
         } else if (result.success) {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
           await refreshAccountData();
           return { success: true, data: result.data };
         }
@@ -372,6 +410,7 @@ export const useMasterpassAccount = () => {
       tokenData?.AuthenticationMethod,
       newCardFormData,
       refreshAccountData,
+      refreshToken,
       dispatch
     ]
   );
@@ -388,6 +427,7 @@ export const useMasterpassAccount = () => {
     updateModalState: updateModalStateAction,
     initializeAccount,
     refreshAccountData,
+    refreshToken,
     handleLinkConfirm,
     handleOTPSubmit,
     handleRemoveCard,