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

package/CHANGELOG.md

@@ -1,13 +1,8 @@
 # @akinon/pz-masterpass-rest
 
-## 2.0.11-rc.0
+## 2.0.12-beta.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.11
 
 ## 2.0.10
 

package/package.json

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

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

@@ -251,6 +251,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();
@@ -264,13 +268,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, 19);
+  return formatted.substring(0, 23);
 };
 
 export const formatExpiryDate = (value: string): string => {