@akinon/pz-masterpass-rest 2.0.53-rc.0 → 2.0.54-beta.0

package/CHANGELOG.md

@@ -1,14 +1,8 @@
 # @akinon/pz-masterpass-rest
 
-## 2.0.53-rc.0
+## 2.0.54-beta.0
 
-### 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
+## 2.0.53
 
 ## 2.0.52
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "2.0.53-rc.0",
+  "version": "2.0.54-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",
@@ -31,6 +31,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/useMasterpassAccount.ts

@@ -24,7 +24,6 @@ import type {
   CardModel
 } from '../types/account.types';
 import { useMasterpassToken } from './useMasterpassToken';
-import { decodeMasterpassToken } from '../utils/wait-for-utils-ready';
 
 export const useMasterpassAccount = () => {
   const dispatch = useDispatch();
@@ -41,16 +40,7 @@ export const useMasterpassAccount = () => {
 
   const initializeAccount = useCallback(
     async (newTokenData: any, rawToken?: string) => {
-      if (!newTokenData?.AccountKey) {
-        dispatch(
-          setAccountStatus({
-            isAccountNotFound: false,
-            isAccountNotLinked: true,
-            shouldShowDirectForm: true
-          })
-        );
-        return;
-      }
+      if (!newTokenData?.AccountKey) return;
 
       const accountService = new AccountService(rawToken || token, newTokenData?.MerchantId);
 
@@ -136,19 +126,13 @@ export const useMasterpassAccount = () => {
     dispatch(resetState());
   }, [dispatch]);
 
-  const refreshToken = async (options?: {
-    three_d?: boolean;
-    skipReset?: boolean;
-  }) => {
+  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 = decodeMasterpassToken(result.data.token);
-      if (!decodedToken) {
-        return null;
-      }
+      const decodedToken = window.Utils.decodeJwt(result.data.token);
       return {
         tokenData: decodedToken,
         token: result.data.token,
@@ -234,12 +218,8 @@ export const useMasterpassAccount = () => {
             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.',
+              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'
             }
           })
@@ -355,7 +335,7 @@ export const useMasterpassAccount = () => {
         const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
 
         if (!activeTokenData?.AccountKey) {
-          return { success: false, message: '' };
+          throw new Error('Token data not available');
         }
 
         const accountService = new AccountService(activeToken, activeMerchantId);

package/src/hooks/useMasterpassPayment.ts

@@ -25,7 +25,6 @@ import {
 } from '../redux/reducer';
 import { useMasterpassToken } from './useMasterpassToken';
 import { PaymentService } from '../services/payment';
-import { decodeMasterpassToken } from '../utils/wait-for-utils-ready';
 import {
   createPaymentRequest,
   createDirectPaymentRequest,
@@ -94,10 +93,7 @@ export const useMasterpassPayment = (
   const refreshTokenForPayment = useCallback(async () => {
     const result = await refetchToken({ skipReset: true });
     if (result?.data?.token) {
-      const decodedToken = decodeMasterpassToken(result.data.token);
-      if (!decodedToken) {
-        return null;
-      }
+      const decodedToken = window.Utils.decodeJwt(result.data.token);
       return {
         tokenData: decodedToken,
         token: result.data.token,
@@ -351,6 +347,10 @@ export const useMasterpassPayment = (
       const activeToken = freshResult?.token;
       const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
 
+      if (!activeTokenData?.AccountKey) {
+        return { success: false, message: 'Token data not available' };
+      }
+
       const prepareResult = await prepareMasterpassOrder({
         use_three_d: paymentState.useThreeD
       }).unwrap();
@@ -364,13 +364,13 @@ export const useMasterpassPayment = (
         cardHolderName: newCardFormData.cardholderName || '',
         cardAlias: newCardFormData.cardAlias || '',
         expiryDate: newCardFormData.expiryDate,
-        accountKey: activeTokenData?.AccountKey || '',
+        accountKey: activeTokenData.AccountKey,
         amount: prepareResult.pre_order?.total_amount_with_interest,
         orderNo: prepareResult.context_list?.[0]?.page_context?.order_no,
         currencyCode: currency,
         installmentCount: selectedInstallment.installment_count,
-        authenticationMethod: activeTokenData?.AuthenticationMethod,
-        secure3DModel: activeTokenData?.Secure3dType,
+        authenticationMethod: activeTokenData.AuthenticationMethod,
+        secure3DModel: activeTokenData.Secure3dType,
         terminalGroupId,
         acquirerIcaNumber: bankIca,
         additionalFields:

package/src/hooks/useMasterpassToken.ts

@@ -14,10 +14,6 @@ import {
   updatePaymentState
 } from '../redux/reducer';
 import { isTokenExpired } from '../utils/payment-utils';
-import {
-  waitForUtilsReady,
-  decodeMasterpassToken
-} from '../utils/wait-for-utils-ready';
 
 interface UseMasterpassTokenProps {
   useThreeD: boolean;
@@ -69,37 +65,12 @@ export const useMasterpassToken = ({
       return;
     }
 
-    if (!(data?.token && data.token !== reduxToken)) {
-      return;
-    }
-
-    const token = data.token;
-    const extras = data.extras;
-    let cancelled = false;
-
-    // The token request can resolve before the Masterpass SDK script has
-    // loaded (common on slow/3G networks). Wait for `window.Utils.decodeJwt`
-    // to exist before decoding, otherwise the checkout crashes with
-    // `Cannot read properties of undefined (reading 'decodeJwt')`.
-    //
-    // Redux writes are deferred until after the wait resolves: dispatching
-    // `setMasterpassRestToken` synchronously would change the `reduxToken`
-    // dependency, re-run this effect and cancel the in-flight decode.
-    (async () => {
-      const ready = await waitForUtilsReady();
-      if (cancelled) {
-        return;
-      }
-
-      dispatch(setMasterpassRestToken(token));
-      dispatch(setMasterpassTerminalGroupId(extras.terminal_group_id));
-      dispatch(setMasterpassBankIca(extras.bank_ica));
-
-      const decodedToken = ready ? decodeMasterpassToken(token) : undefined;
-      if (!decodedToken) {
-        return;
-      }
+    if (data?.token && data.token !== reduxToken) {
+      dispatch(setMasterpassRestToken(data.token));
+      dispatch(setMasterpassTerminalGroupId(data.extras.terminal_group_id));
+      dispatch(setMasterpassBankIca(data.extras.bank_ica));
 
+      const decodedToken = window.Utils.decodeJwt(data.token);
       dispatch(setMasterpassRestTokenData(decodedToken));
 
       if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
@@ -107,11 +78,7 @@ export const useMasterpassToken = ({
       }
 
       stableOnTokenReady(decodedToken);
-    })();
-
-    return () => {
-      cancelled = true;
-    };
+    }
   }, [data?.token, reduxToken, dispatch, stableOnTokenReady]);
 
   const refetchToken = useCallback(
@@ -127,19 +94,15 @@ export const useMasterpassToken = ({
         );
         dispatch(setMasterpassBankIca(result.data.extras.bank_ica));
 
-        await waitForUtilsReady();
-        const decodedToken = decodeMasterpassToken(result.data.token);
-
-        if (decodedToken) {
-          dispatch(setMasterpassRestTokenData(decodedToken));
+        const decodedToken = window.Utils.decodeJwt(result.data.token);
+        dispatch(setMasterpassRestTokenData(decodedToken));
 
-          if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
-            dispatch(updatePaymentState({ useThreeD: false }));
-          }
+        if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
+          dispatch(updatePaymentState({ useThreeD: false }));
+        }
 
-          if (options?.three_d !== false && !options?.skipReset) {
-            stableOnTokenReady(decodedToken);
-          }
+        if (options?.three_d !== false && !options?.skipReset) {
+          stableOnTokenReady(decodedToken);
         }
       }
 

package/src/index.ts

@@ -19,7 +19,6 @@ export * from './utils/reward-utils';
 export * from './utils/card-utils';
 export * from './utils/validation-schemas';
 export * from './utils/masterpass-sdk';
-export * from './utils/wait-for-utils-ready';
 export type { MasterpassEnvironment } from './utils/constants';
 
 export * from './types/payment.types';

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/wait-for-utils-ready.ts

@@ -1,64 +0,0 @@
-const DEFAULT_TIMEOUT_MS = 10000;
-const POLL_INTERVAL_MS = 100;
-
-interface MasterpassUtils {
-  decodeJwt: (token: string) => any;
-  [key: string]: any;
-}
-
-// `window.Utils` is attached by the Masterpass REST SDK and is undefined until
-// that script finishes loading, so it is resolved through this guarded getter
-// rather than accessed directly.
-const getMasterpassUtils = (): MasterpassUtils | undefined =>
-  (window as unknown as { Utils?: MasterpassUtils }).Utils;
-
-// The Masterpass REST SDK (`/masterpass-javascript-sdk-web.min.js`) attaches
-// both `window.Masterpass` and `window.Utils` when it finishes loading. That
-// script is loaded asynchronously (see `useMasterpassScript`), so on slow
-// networks the `/orders/masterpass-token` response can arrive before the SDK
-// is ready. Calling `window.Utils.decodeJwt(...)` at that point crashes the
-// checkout with `TypeError: Cannot read properties of undefined (reading
-// 'decodeJwt')` (ZERO-4362 — same class of bug already fixed in the non-rest
-// `@akinon/pz-masterpass` package).
-//
-// This helper polls until the SDK has exposed `window.Utils.decodeJwt`, so
-// callers can await readiness before decoding instead of crashing.
-export const waitForUtilsReady = (
-  timeoutMs: number = DEFAULT_TIMEOUT_MS
-): Promise<boolean> =>
-  new Promise((resolve) => {
-    const start = Date.now();
-
-    const check = () => {
-      if (typeof getMasterpassUtils()?.decodeJwt === 'function') {
-        resolve(true);
-        return;
-      }
-
-      if (Date.now() - start >= timeoutMs) {
-        resolve(false);
-        return;
-      }
-
-      setTimeout(check, POLL_INTERVAL_MS);
-    };
-
-    check();
-  });
-
-// Guarded `decodeJwt` wrapper. Returns `undefined` (instead of throwing) when
-// the SDK is not yet available, so every callsite degrades gracefully.
-export const decodeMasterpassToken = <T = any>(
-  token: string
-): T | undefined => {
-  const utils = getMasterpassUtils();
-
-  if (typeof utils?.decodeJwt !== 'function') {
-    console.error(
-      '[pz-masterpass-rest] window.Utils.decodeJwt is not available'
-    );
-    return undefined;
-  }
-
-  return utils.decodeJwt(token);
-};