@akinon/pz-masterpass-rest 2.0.12 → 2.0.13-rc.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @akinon/pz-masterpass-rest
 
+## 2.0.13-rc.0
+
+### Patch Changes
+
+- 823a4449: 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
+- 63a72000: ZERO-3895: enhance payment processing with additional fields support
+
 ## 2.0.12
 
 ## 2.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "2.0.12",
+  "version": "2.0.13-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

@@ -40,7 +40,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,7 +135,10 @@ 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();
     }
@@ -218,8 +230,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 +351,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

@@ -251,10 +251,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();
@@ -268,13 +264,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/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 => {