@akinon/pz-masterpass-rest 2.0.46 → 2.0.47-rc.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @akinon/pz-masterpass-rest
 
+## 2.0.47-rc.0
+
+### Patch Changes
+
+- 119f0c1: 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
+- 5da13fffc: ZERO-4358: fix masterpass-rest guest checkout flow
+- fb4aa9b47: 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.46
 
 ## 2.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "2.0.46",
+  "version": "2.0.47-rc.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={23}
+                maxLength={19}
                 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 disabled:opacity-50 disabled:cursor-not-allowed"
+              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"
             >
               {paymentLoading ? (
                 <div className="flex items-center justify-center">

package/src/components/otp-modal.tsx

@@ -204,15 +204,21 @@ 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()}
@@ -222,7 +228,9 @@ 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,6 +24,7 @@ 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();
@@ -40,7 +41,16 @@ export const useMasterpassAccount = () => {
 
   const initializeAccount = useCallback(
     async (newTokenData: any, rawToken?: string) => {
-      if (!newTokenData?.AccountKey) return;
+      if (!newTokenData?.AccountKey) {
+        dispatch(
+          setAccountStatus({
+            isAccountNotFound: false,
+            isAccountNotLinked: true,
+            shouldShowDirectForm: true
+          })
+        );
+        return;
+      }
 
       const accountService = new AccountService(rawToken || token, newTokenData?.MerchantId);
 
@@ -126,13 +136,19 @@ 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 = window.Utils.decodeJwt(result.data.token);
+      const decodedToken = decodeMasterpassToken(result.data.token);
+      if (!decodedToken) {
+        return null;
+      }
       return {
         tokenData: decodedToken,
         token: result.data.token,
@@ -218,8 +234,12 @@ 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'
             }
           })
@@ -335,7 +355,7 @@ export const useMasterpassAccount = () => {
         const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
 
         if (!activeTokenData?.AccountKey) {
-          throw new Error('Token data not available');
+          return { success: false, message: '' };
         }
 
         const accountService = new AccountService(activeToken, activeMerchantId);

package/src/hooks/useMasterpassPayment.ts

@@ -25,6 +25,7 @@ import {
 } from '../redux/reducer';
 import { useMasterpassToken } from './useMasterpassToken';
 import { PaymentService } from '../services/payment';
+import { decodeMasterpassToken } from '../utils/wait-for-utils-ready';
 import {
   createPaymentRequest,
   createDirectPaymentRequest,
@@ -93,7 +94,10 @@ export const useMasterpassPayment = (
   const refreshTokenForPayment = useCallback(async () => {
     const result = await refetchToken({ skipReset: true });
     if (result?.data?.token) {
-      const decodedToken = window.Utils.decodeJwt(result.data.token);
+      const decodedToken = decodeMasterpassToken(result.data.token);
+      if (!decodedToken) {
+        return null;
+      }
       return {
         tokenData: decodedToken,
         token: result.data.token,
@@ -347,10 +351,6 @@ 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,6 +14,10 @@ import {
   updatePaymentState
 } from '../redux/reducer';
 import { isTokenExpired } from '../utils/payment-utils';
+import {
+  waitForUtilsReady,
+  decodeMasterpassToken
+} from '../utils/wait-for-utils-ready';
 
 interface UseMasterpassTokenProps {
   useThreeD: boolean;
@@ -65,12 +69,37 @@ export const useMasterpassToken = ({
       return;
     }
 
-    if (data?.token && data.token !== reduxToken) {
-      dispatch(setMasterpassRestToken(data.token));
-      dispatch(setMasterpassTerminalGroupId(data.extras.terminal_group_id));
-      dispatch(setMasterpassBankIca(data.extras.bank_ica));
+    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;
+      }
 
-      const decodedToken = window.Utils.decodeJwt(data.token);
       dispatch(setMasterpassRestTokenData(decodedToken));
 
       if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
@@ -78,7 +107,11 @@ export const useMasterpassToken = ({
       }
 
       stableOnTokenReady(decodedToken);
-    }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
   }, [data?.token, reduxToken, dispatch, stableOnTokenReady]);
 
   const refetchToken = useCallback(
@@ -94,15 +127,19 @@ export const useMasterpassToken = ({
         );
         dispatch(setMasterpassBankIca(result.data.extras.bank_ica));
 
-        const decodedToken = window.Utils.decodeJwt(result.data.token);
-        dispatch(setMasterpassRestTokenData(decodedToken));
+        await waitForUtilsReady();
+        const decodedToken = decodeMasterpassToken(result.data.token);
 
-        if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
-          dispatch(updatePaymentState({ useThreeD: false }));
-        }
+        if (decodedToken) {
+          dispatch(setMasterpassRestTokenData(decodedToken));
+
+          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,6 +19,7 @@ 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, 23);
+  return formatted.substring(0, 19);
 };
 
 export const formatExpiryDate = (value: string): string => {

package/src/utils/wait-for-utils-ready.ts

@@ -0,0 +1,64 @@
+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);
+};