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

package/src/hooks/useMasterpassPayment.ts

@@ -16,6 +16,7 @@ import {
   setOrderData,
   setOrderCompleted
 } from '../redux/reducer';
+import { useMasterpassToken } from './useMasterpassToken';
 import { PaymentService } from '../services/payment';
 import {
   createPaymentRequest,
@@ -26,10 +27,28 @@ import { handleMasterpassResponse } from '../utils/response-handler';
 import type { Installment } from '../types/payment.types';
 import type { CardModel } from '../types/account.types';
 
+export type PaymentResult = {
+  success: boolean;
+  requiresRedirect?: boolean;
+  requiresOTP?: boolean;
+  otpType?: 'OTP' | 'RTA' | 'CVV';
+  message?: any;
+};
+
 export const useMasterpassPayment = () => {
   const dispatch = useDispatch();
-  const { paymentState, newCardFormData, currency, terminalGroupId } =
-    useAppSelector((state) => state.masterpassRest);
+  const {
+    paymentState,
+    newCardFormData,
+    currency,
+    terminalGroupId,
+    bankIca,
+    tokenData
+  } = useAppSelector((state) => state.masterpassRest);
+
+  const { refetch: refetchToken } = useMasterpassToken({
+    useThreeD: paymentState.useThreeD
+  });
 
   const [setMasterpassRestBinNumber, { isLoading: isCheckoutLoading }] =
     useSetMasterpassRestBinNumberMutation();
@@ -43,6 +62,19 @@ export const useMasterpassPayment = () => {
   const [finalizeMasterpassOrder, { isLoading: isFinalizeLoading }] =
     useFinalizeMasterpassOrderMutation();
 
+  const refreshTokenForPayment = useCallback(async () => {
+    const result = await refetchToken({ skipReset: true });
+    if (result?.data?.token) {
+      const decodedToken = window.Utils.decodeJwt(result.data.token);
+      return {
+        tokenData: decodedToken,
+        token: result.data.token,
+        merchantId: decodedToken?.MerchantId
+      };
+    }
+    return null;
+  }, [refetchToken]);
+
   const updatePaymentStateAction = useCallback(
     (updates: Partial<typeof paymentState>) => {
       dispatch(updatePaymentState(updates));
@@ -50,6 +82,21 @@ export const useMasterpassPayment = () => {
     [dispatch]
   );
 
+  const handleInstallmentSelect = useCallback(
+    async (installment: Installment) => {
+      dispatch(setSelectedInstallment(installment));
+
+      try {
+        await checkoutMasterpassInstallment({
+          installment: installment.pk
+        }).unwrap();
+      } catch (error) {
+        // Silently handle errors (e.g., mutation aborted due to rapid selection)
+      }
+    },
+    [checkoutMasterpassInstallment, dispatch]
+  );
+
   const handleCardSelect = useCallback(
     async (card: CardModel) => {
       dispatch(setSelectedCard(card));
@@ -67,152 +114,230 @@ export const useMasterpassPayment = () => {
           const pageContext = result.context_list[0].page_context;
           dispatch(setInstallments(pageContext.installments));
           dispatch(setCardType(pageContext.card_type));
+
+          if (pageContext.installments?.length > 0) {
+            await handleInstallmentSelect(pageContext.installments[0]);
+          }
         }
       } catch (error) {
-        throw new Error('Failed to load installment options');
+        // Silently handle errors (e.g., mutation aborted due to rapid selection)
       }
     },
-    [setMasterpassRestBinNumber, dispatch]
+    [setMasterpassRestBinNumber, handleInstallmentSelect, dispatch]
   );
 
-  const handleInstallmentSelect = useCallback(
-    async (installment: Installment) => {
-      dispatch(setSelectedInstallment(installment));
+  const processPayment = useCallback(async (): Promise<PaymentResult> => {
+    const { selectedCard, selectedInstallment, cvc, useThreeD } = paymentState;
 
-      try {
-        await checkoutMasterpassInstallment({
-          installment: installment.pk
-        }).unwrap();
+    if (!selectedCard || !selectedInstallment) {
+      return {
+        success: false,
+        message: 'Please complete all required steps before payment'
+      };
+    }
 
-        const prepareResult = await prepareMasterpassOrder({
-          use_three_d: paymentState.useThreeD
-        }).unwrap();
+    try {
+      const freshResult = await refreshTokenForPayment();
+      const activeTokenData = freshResult?.tokenData || tokenData;
+      const activeToken = freshResult?.token;
+      const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
 
-        dispatch(setOrderData(prepareResult));
-      } catch (error) {
-        throw new Error('Failed to prepare order');
+      if (!activeTokenData?.AccountKey) {
+        return { success: false, message: 'Token data not available' };
       }
-    },
-    [
-      checkoutMasterpassInstallment,
-      prepareMasterpassOrder,
-      paymentState.useThreeD,
-      dispatch
-    ]
-  );
 
-  const processPayment = useCallback(
-    async (tokenData: any) => {
-      const { selectedCard, selectedInstallment, orderData, cvc, useThreeD } =
-        paymentState;
-
-      if (
-        !selectedCard ||
-        !tokenData?.AccountKey ||
-        !selectedInstallment ||
-        !orderData
-      ) {
-        throw new Error('Please complete all required steps before payment');
-      }
+      const prepareResult = await prepareMasterpassOrder({
+        use_three_d: useThreeD
+      }).unwrap();
 
-      try {
-        const paymentService = new PaymentService();
-        const paymentRequest = createPaymentRequest({
-          cvc,
-          cardAlias: selectedCard.cardAlias,
-          accountKey: tokenData.AccountKey,
-          amount: orderData.pre_order?.total_amount_with_interest,
-          orderNo: orderData.context_list?.[0]?.page_context?.order_no,
-          currencyCode: currency,
-          installmentCount: selectedInstallment.installment_count,
-          authenticationMethod: tokenData.AuthenticationMethod,
-          secure3DModel: tokenData.Secure3dType,
-          terminalGroupId
-        });
-
-        const paymentResult = await paymentService.processPayment(
-          paymentRequest
-        );
-        const response = await handleMasterpassResponse(paymentResult);
-
-        if (response.requires3D && response.redirectUrl) {
-          window.location.href = response.redirectUrl;
-          return { requiresRedirect: true };
-        }
+      dispatch(setOrderData(prepareResult));
+
+      const paymentService = new PaymentService(activeToken, activeMerchantId);
+      const paymentRequest = createPaymentRequest({
+        cvc,
+        cardAlias: selectedCard.cardAlias,
+        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,
+        terminalGroupId,
+        acquirerIcaNumber: bankIca,
+        additionalFields:
+          prepareResult.context_list?.[0]?.page_context?.extras
+            ?.additional_fields || {}
+      });
+
+      const paymentResult = await paymentService.processPayment(paymentRequest);
+      const response = await handleMasterpassResponse(paymentResult);
 
-        if (response.success) {
-          const transactionType = getTransactionType(useThreeD);
-          const finalizeResult = await finalizeMasterpassOrder({
-            responseCode: paymentResult.data?.result?.responseCode,
-            token: paymentResult.data?.result?.token,
-            three_d_secure: useThreeD,
-            transactionType
-          }).unwrap();
+      if (response.requires3D && response.redirectUrl) {
+        window.location.href = response.redirectUrl;
+        return { success: false, requiresRedirect: true };
+      }
+
+      if (response.success) {
+        const transactionType = getTransactionType(useThreeD);
+        const finalizeResult = await finalizeMasterpassOrder({
+          responseCode: paymentResult.data?.result?.responseCode,
+          token: paymentResult.data?.result?.token,
+          three_d_secure: useThreeD,
+          transactionType
+        }).unwrap();
 
-          dispatch(setOrderCompleted(true));
-          dispatch(setOrderData(finalizeResult));
+        dispatch(setOrderData(finalizeResult));
 
-          return { success: true };
+        if (finalizeResult.errors) {
+          return { success: false, message: finalizeResult.errors };
         }
 
-        return response;
-      } catch (error) {
-        throw error;
+        dispatch(setOrderCompleted(true));
+        return { success: true };
       }
-    },
-    [paymentState, currency, finalizeMasterpassOrder, dispatch]
-  );
 
-  const processDirectPayment = useCallback(
-    async (tokenData: any) => {
-      const { selectedInstallment, orderData } = paymentState;
+      return {
+        success: response.success,
+        requiresOTP: response.requiresOTP,
+        otpType: response.otpType,
+        message: response.message
+      };
+    } catch (error) {
+      return {
+        success: false,
+        message:
+          error instanceof Error
+            ? error.message
+            : 'An unexpected error occurred'
+      };
+    }
+  }, [
+    paymentState,
+    tokenData,
+    currency,
+    bankIca,
+    terminalGroupId,
+    prepareMasterpassOrder,
+    finalizeMasterpassOrder,
+    refreshTokenForPayment,
+    dispatch
+  ]);
+
+  const processDirectPayment = useCallback(async (): Promise<PaymentResult> => {
+    const { selectedInstallment } = paymentState;
+
+    if (!selectedInstallment) {
+      return {
+        success: false,
+        message: 'Please complete all required steps before payment'
+      };
+    }
+
+    if (
+      !newCardFormData.cardNumber ||
+      !newCardFormData.expiryDate ||
+      !newCardFormData.cvv
+    ) {
+      return {
+        success: false,
+        message: 'Please complete all card details before payment'
+      };
+    }
+
+    try {
+      const freshResult = await refreshTokenForPayment();
+      const activeTokenData = freshResult?.tokenData || tokenData;
+      const activeToken = freshResult?.token;
+      const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
 
-      if (!selectedInstallment || !tokenData?.AccountKey) {
-        throw new Error('Please complete all required steps before payment');
+      if (!activeTokenData?.AccountKey) {
+        return { success: false, message: 'Token data not available' };
       }
 
-      if (
-        !newCardFormData.cardNumber ||
-        !newCardFormData.expiryDate ||
-        !newCardFormData.cvv
-      ) {
-        throw new Error('Please complete all card details before payment');
+      const prepareResult = await prepareMasterpassOrder({
+        use_three_d: paymentState.useThreeD
+      }).unwrap();
+
+      dispatch(setOrderData(prepareResult));
+
+      const paymentService = new PaymentService(activeToken, activeMerchantId);
+      const directPaymentRequest = createDirectPaymentRequest({
+        cvc: newCardFormData.cvv,
+        cardNumber: newCardFormData.cardNumber.replace(/\D/g, ''),
+        cardHolderName: newCardFormData.cardholderName || '',
+        cardAlias: newCardFormData.cardAlias || '',
+        expiryDate: newCardFormData.expiryDate,
+        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,
+        terminalGroupId,
+        acquirerIcaNumber: bankIca,
+        additionalFields:
+          prepareResult.context_list?.[0]?.page_context?.extras
+            ?.additional_fields || {}
+      });
+
+      const paymentResult = await paymentService.directPayment(
+        directPaymentRequest
+      );
+      const response = await handleMasterpassResponse(paymentResult);
+
+      if (response.requires3D && response.redirectUrl) {
+        window.location.href = response.redirectUrl;
+        return { success: false, requiresRedirect: true };
       }
 
-      try {
-        const paymentService = new PaymentService();
-        const directPaymentRequest = createDirectPaymentRequest({
-          cvc: newCardFormData.cvv,
-          cardNumber: newCardFormData.cardNumber.replace(/\D/g, ''),
-          cardHolderName: newCardFormData.cardholderName || '',
-          cardAlias: newCardFormData.cardAlias || '',
-          expiryDate: newCardFormData.expiryDate,
-          accountKey: tokenData.AccountKey,
-          amount: orderData.pre_order?.total_amount_with_interest,
-          orderNo: orderData.context_list?.[0]?.page_context?.order_no,
-          currencyCode: currency,
-          installmentCount: selectedInstallment.installment_count,
-          authenticationMethod: tokenData.AuthenticationMethod,
-          secure3DModel: tokenData.Secure3dType,
-          terminalGroupId
-        });
-
-        const paymentResult = await paymentService.directPayment(
-          directPaymentRequest
-        );
-        return handleMasterpassResponse(paymentResult);
-      } catch (error) {
-        return {
-          success: false,
-          message:
-            error instanceof Error
-              ? error.message
-              : 'An unexpected error occurred'
-        };
+      if (response.success) {
+        const transactionType = getTransactionType(paymentState.useThreeD);
+        const finalizeResult = await finalizeMasterpassOrder({
+          responseCode: paymentResult.data?.result?.responseCode,
+          token: paymentResult.data?.result?.token,
+          three_d_secure: paymentState.useThreeD,
+          transactionType
+        }).unwrap();
+
+        dispatch(setOrderData(finalizeResult));
+
+        if (finalizeResult.errors) {
+          return { success: false, message: finalizeResult.errors };
+        }
+
+        dispatch(setOrderCompleted(true));
+        return { success: true };
       }
-    },
-    [paymentState, newCardFormData, currency]
-  );
+
+      return {
+        success: response.success,
+        requiresOTP: response.requiresOTP,
+        otpType: response.otpType,
+        message: response.message
+      };
+    } catch (error) {
+      return {
+        success: false,
+        message:
+          error instanceof Error
+            ? error.message
+            : 'An unexpected error occurred'
+      };
+    }
+  }, [
+    paymentState,
+    tokenData,
+    newCardFormData,
+    currency,
+    bankIca,
+    terminalGroupId,
+    prepareMasterpassOrder,
+    finalizeMasterpassOrder,
+    refreshTokenForPayment,
+    dispatch
+  ]);
 
   return {
     paymentState,

package/src/hooks/useMasterpassToken.ts

@@ -1,13 +1,19 @@
-import { useEffect, useCallback, useMemo } from 'react';
+import { useEffect, useCallback, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { useAppSelector } from '@akinon/next/redux/hooks';
-import { useGetMasterpassRestTokenQuery } from '../redux/api';
+import {
+  useGetMasterpassRestTokenQuery,
+  useLazyGetMasterpassRestTokenQuery
+} from '../redux/api';
 import {
   setMasterpassRestToken,
   setMasterpassRestTokenData,
   setMasterpassTerminalGroupId,
-  setTokenLoading
+  setMasterpassBankIca,
+  setTokenLoading,
+  updatePaymentState
 } from '../redux/reducer';
+import { isTokenExpired } from '../utils/payment-utils';
 
 interface UseMasterpassTokenProps {
   useThreeD: boolean;
@@ -21,23 +27,25 @@ export const useMasterpassToken = ({
   onTokenReady
 }: UseMasterpassTokenProps) => {
   const dispatch = useDispatch();
+  const skipTokenSyncRef = useRef(false);
+  const onTokenReadyRef = useRef(onTokenReady);
+  onTokenReadyRef.current = onTokenReady;
+
   const {
     token: reduxToken,
     tokenData,
     isTokenLoading
   } = useAppSelector((state) => state.masterpassRest);
 
-  const memoizedOnTokenReady = useCallback(
-    (tokenData: any) => {
-      onTokenReady?.(tokenData);
-    },
-    [onTokenReady]
-  );
+  const stableOnTokenReady = useCallback((tokenData: any) => {
+    onTokenReadyRef.current?.(tokenData);
+  }, []);
 
   const shouldSkip = useMemo(() => {
     const hasToken = !!(token || reduxToken);
-    return hasToken;
-  }, [token, reduxToken]);
+    const isExpired = isTokenExpired(tokenData);
+    return hasToken && !isExpired;
+  }, [token, reduxToken, tokenData]);
 
   const { data, refetch, isLoading, error } = useGetMasterpassRestTokenQuery(
     {},
@@ -46,25 +54,62 @@ export const useMasterpassToken = ({
     }
   );
 
+  const [fetchToken] = useLazyGetMasterpassRestTokenQuery();
+
   useEffect(() => {
     dispatch(setTokenLoading(isLoading));
   }, [isLoading, dispatch]);
 
   useEffect(() => {
+    if (skipTokenSyncRef.current) {
+      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));
 
-      memoizedOnTokenReady(decodedToken);
+      if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
+        dispatch(updatePaymentState({ useThreeD: false }));
+      }
+
+      stableOnTokenReady(decodedToken);
     }
-  }, [data?.token, reduxToken, dispatch, memoizedOnTokenReady]);
+  }, [data?.token, reduxToken, dispatch, stableOnTokenReady]);
 
-  const refetchToken = useCallback(() => {
-    return refetch();
-  }, [refetch]);
+  const refetchToken = useCallback(
+    async (options?: { three_d?: boolean; skipReset?: boolean }) => {
+      skipTokenSyncRef.current = true;
+
+      const result = await fetchToken(options?.three_d === false ? { three_d: false } : {});
+
+      if (result.data?.token) {
+        dispatch(setMasterpassRestToken(result.data.token));
+        dispatch(
+          setMasterpassTerminalGroupId(result.data.extras.terminal_group_id)
+        );
+        dispatch(setMasterpassBankIca(result.data.extras.bank_ica));
+
+        const decodedToken = window.Utils.decodeJwt(result.data.token);
+        dispatch(setMasterpassRestTokenData(decodedToken));
+
+        if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
+          dispatch(updatePaymentState({ useThreeD: false }));
+        }
+
+        if (options?.three_d !== false && !options?.skipReset) {
+          stableOnTokenReady(decodedToken);
+        }
+      }
+
+      return result;
+    },
+    [fetchToken, dispatch, stableOnTokenReady]
+  );
 
   return {
     token: reduxToken || token,

package/src/redux/api.ts

@@ -2,7 +2,9 @@ import { api } from '@akinon/next/data/client/api';
 import { buildClientRequestUrl } from '@akinon/next/utils';
 import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
 
-export interface MasterpassRestTokenRequest {}
+export interface MasterpassRestTokenRequest {
+  three_d?: boolean;
+}
 
 export interface MasterpassRestTokenResponse {
   msisdn: string;
@@ -59,6 +61,7 @@ export interface PrepareMasterpassOrderResponse {
       extras: {
         user_id: string;
         bank_ica: string | null;
+        additional_fields?: any;
       };
     };
     page_name: string;
@@ -115,11 +118,16 @@ export const masterpassRestApi = api.injectEndpoints({
       MasterpassRestTokenResponse,
       MasterpassRestTokenRequest
     >({
-      query: () => ({
-        url: buildClientRequestUrl('/orders/masterpass-rest-token/', {
-          useFormData: true
-        })
-      }),
+      query: (arg) => {
+        const baseUrl = '/orders/masterpass-rest-token/';
+        const url =
+          arg?.three_d === false ? `${baseUrl}?three_d=false` : baseUrl;
+        return {
+          url: buildClientRequestUrl(url, {
+            useFormData: true
+          })
+        };
+      },
       keepUnusedDataFor: 60,
       async onQueryStarted(_, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
@@ -137,7 +145,7 @@ export const masterpassRestApi = api.injectEndpoints({
         }),
         method: 'POST',
         params: {
-          page: 'MasterpassRestBinNumber'
+          page: 'MasterpassRestBinNumberPage'
         },
         body: {
           is_masterpass_stored_card: arg.is_masterpass_stored_card,
@@ -227,6 +235,7 @@ export const masterpassRestApi = api.injectEndpoints({
 
 export const {
   useGetMasterpassRestTokenQuery,
+  useLazyGetMasterpassRestTokenQuery,
   useSetMasterpassRestBinNumberMutation,
   useCheckoutMasterpassInstallmentMutation,
   usePrepareMasterpassOrderMutation,

package/src/redux/reducer.ts

@@ -34,6 +34,7 @@ export interface AccountStatus {
 export interface MasterpassRestState {
   token: string | null;
   terminalGroupId: string | null;
+  bankIca: string | null;
   tokenData: MasterpassRestTokenData | null;
   accountData: AccountAccessSuccessResponse | null;
   accountStatus: AccountStatus;
@@ -51,6 +52,7 @@ export interface MasterpassRestState {
 const initialState: MasterpassRestState = {
   token: null,
   terminalGroupId: null,
+  bankIca: null,
   tokenData: null,
   accountData: null,
   accountStatus: {
@@ -72,6 +74,8 @@ const initialState: MasterpassRestState = {
     showLinkModal: false,
     showOTPModal: false,
     show3DSecureModal: false,
+    showInformationModal: false,
+    informationModalData: null,
     otpType: 'OTP',
     verificationData: null,
     cardToDelete: null,
@@ -96,6 +100,12 @@ const masterpassRestSlice = createSlice({
     setMasterpassTerminalGroupId: (state, action: PayloadAction<string>) => {
       state.terminalGroupId = action.payload;
     },
+    setMasterpassBankIca: (
+      state,
+      action: PayloadAction<string | null>
+    ) => {
+      state.bankIca = action.payload;
+    },
     setMasterpassRestTokenData: (
       state,
       action: PayloadAction<MasterpassRestTokenData>
@@ -208,6 +218,7 @@ const masterpassRestSlice = createSlice({
 
       state.token = null;
       state.terminalGroupId = null;
+      state.bankIca = null;
       state.tokenData = null;
       state.accountData = null;
       state.accountStatus = {
@@ -229,6 +240,8 @@ const masterpassRestSlice = createSlice({
         showLinkModal: false,
         showOTPModal: false,
         show3DSecureModal: false,
+        showInformationModal: false,
+        informationModalData: null,
         otpType: 'OTP',
         verificationData: null,
         cardToDelete: null,
@@ -246,6 +259,7 @@ const masterpassRestSlice = createSlice({
 export const {
   setMasterpassRestToken,
   setMasterpassTerminalGroupId,
+  setMasterpassBankIca,
   setMasterpassRestTokenData,
   setTokenLoading,
   setScriptLoaded,