@akinon/pz-masterpass-rest 2.0.14-rc.1 → 2.0.14

package/src/components/card-list.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { Input, Icon } from '@akinon/next/components';
 import { detectCardType, getCardIcon, getCvcLength } from '../utils/card-utils';
-import { getCappedRewardTotal } from '../utils/reward-utils';
 import type { CardListProps } from '../types/custom-render.types';
 import MasterpassSecurityInfo from './masterpass-security-info';
 
@@ -14,12 +13,6 @@ const CardList: React.FC<CardListProps> = ({
   cvc = '',
   onCvcChange,
   cvcRequired = false,
-  availableRewards = [],
-  selectedRewards = [],
-  isLoadingRewards = false,
-  onOpenRewardModal,
-  rewardCurrency,
-  rewardPayableAmount,
   texts
 }) => {
   const [localCvc, setLocalCvc] = useState(cvc);
@@ -30,21 +23,9 @@ const CardList: React.FC<CardListProps> = ({
     onCvcChange?.(numericValue);
   };
 
-  const orderedCards = useMemo(() => {
-    if (!selectedCard) return cards;
-    const idx = cards.findIndex(
-      (c) => c.uniqueCardNumber === selectedCard.uniqueCardNumber
-    );
-    if (idx <= 0) return cards;
-    const reordered = [...cards];
-    const [picked] = reordered.splice(idx, 1);
-    reordered.unshift(picked);
-    return reordered;
-  }, [cards, selectedCard]);
-
   return (
     <div className="flex flex-col gap-4">
-      {orderedCards.map((card) => {
+      {cards.map((card) => {
         const isSelected =
           selectedCard?.uniqueCardNumber === card.uniqueCardNumber;
         const expectedCvcLength = getCvcLength(detectCardType(card.cardBin));
@@ -138,57 +119,6 @@ const CardList: React.FC<CardListProps> = ({
               )}
             </div>
 
-            {isSelected &&
-              (isLoadingRewards || availableRewards.length > 0) && (
-                <div
-                  className="border-t border-[#eeeeee] p-4 bg-[#fafafa] flex items-center justify-between gap-3"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <div className="flex items-center gap-2 min-w-0">
-                    <Icon name="gift" size={16} className="text-[#000000]" />
-                    <div className="min-w-0">
-                      <p className="text-sm font-medium text-[#4a4f54] truncate">
-                        {texts.rewardOpenButtonText}
-                      </p>
-                      {selectedRewards.length > 0 ? (
-                        <p className="text-xs text-[#00a63d] truncate">
-                          {(texts.rewardSelectedSummaryText || '').replace(
-                            '{count}',
-                            String(selectedRewards.length)
-                          )}
-                          {' · '}
-                          {getCappedRewardTotal(
-                            selectedRewards,
-                            rewardPayableAmount
-                          ).toFixed(2)}{' '}
-                          {(rewardCurrency || '').toUpperCase()}
-                        </p>
-                      ) : (
-                        <p className="text-xs text-[#9d9d9d] truncate">
-                          {(texts.rewardAvailableSummaryText || '').replace(
-                            '{count}',
-                            String(availableRewards.length)
-                          )}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onOpenRewardModal?.();
-                    }}
-                    disabled={isLoadingRewards}
-                    className="px-3 py-1.5 text-xs border border-[#000000] text-[#000000] hover:bg-[#000000] hover:text-white transition-colors disabled:opacity-50 shrink-0"
-                  >
-                    {selectedRewards.length > 0
-                      ? texts.rewardModalConfirmText
-                      : texts.rewardOpenButtonText}
-                  </button>
-                </div>
-              )}
-
             {isSelected && cvcRequired && (
               <div
                 className="border-t border-[#eeeeee] p-4 bg-[#f7f7f7]"

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

@@ -5,9 +5,7 @@ import {
   useSetMasterpassRestBinNumberMutation,
   useCheckoutMasterpassInstallmentMutation,
   usePrepareMasterpassOrderMutation,
-  useFinalizeMasterpassOrderMutation,
-  useQueryMasterpassRewardsMutation,
-  useSelectMasterpassRewardsMutation
+  useFinalizeMasterpassOrderMutation
 } from '../redux/api';
 import {
   updatePaymentState,
@@ -16,12 +14,7 @@ import {
   setInstallments,
   setCardType,
   setOrderData,
-  setOrderCompleted,
-  setAvailableRewards,
-  setSelectedRewards,
-  setLoadingRewards,
-  setShowRewardModal,
-  clearRewards
+  setOrderCompleted
 } from '../redux/reducer';
 import { useMasterpassToken } from './useMasterpassToken';
 import { PaymentService } from '../services/payment';
@@ -31,9 +24,8 @@ import {
   getTransactionType
 } from '../utils/payment-utils';
 import { handleMasterpassResponse } from '../utils/response-handler';
-import type { Installment, RewardItem } from '../types/payment.types';
+import type { Installment } from '../types/payment.types';
 import type { CardModel } from '../types/account.types';
-import { getCappedRewardAmounts } from '../utils/reward-utils';
 
 export type PaymentResult = {
   success: boolean;
@@ -43,14 +35,7 @@ export type PaymentResult = {
   message?: any;
 };
 
-export interface UseMasterpassPaymentOptions {
-  enableRewards?: boolean;
-}
-
-export const useMasterpassPayment = (
-  options: UseMasterpassPaymentOptions = {}
-) => {
-  const { enableRewards = false } = options;
+export const useMasterpassPayment = () => {
   const dispatch = useDispatch();
   const {
     paymentState,
@@ -61,13 +46,6 @@ export const useMasterpassPayment = (
     tokenData
   } = useAppSelector((state) => state.masterpassRest);
 
-  const payableAmount = useAppSelector(
-    (state) =>
-      state.checkout?.preOrder?.unpaid_amount ??
-      state.checkout?.preOrder?.total_amount_with_interest ??
-      null
-  );
-
   const { refetch: refetchToken } = useMasterpassToken({
     useThreeD: paymentState.useThreeD
   });
@@ -84,12 +62,6 @@ export const useMasterpassPayment = (
   const [finalizeMasterpassOrder, { isLoading: isFinalizeLoading }] =
     useFinalizeMasterpassOrderMutation();
 
-  const [queryMasterpassRewards, { isLoading: isRewardsQueryLoading }] =
-    useQueryMasterpassRewardsMutation();
-
-  const [selectMasterpassRewards, { isLoading: isRewardsSelectLoading }] =
-    useSelectMasterpassRewardsMutation();
-
   const refreshTokenForPayment = useCallback(async () => {
     const result = await refetchToken({ skipReset: true });
     if (result?.data?.token) {
@@ -125,38 +97,12 @@ export const useMasterpassPayment = (
     [checkoutMasterpassInstallment, dispatch]
   );
 
-  const fetchRewardsForCard = useCallback(
-    async (card: CardModel) => {
-      if (!card?.cardAlias) return;
-
-      dispatch(setLoadingRewards(true));
-
-      try {
-        const result = await queryMasterpassRewards({
-          card_alias: card.cardAlias
-        }).unwrap();
-
-        const rewards =
-          result.context_list?.[0]?.page_context?.rewards || [];
-        dispatch(setAvailableRewards(rewards));
-      } catch (error) {
-        dispatch(setAvailableRewards([]));
-      } finally {
-        dispatch(setLoadingRewards(false));
-      }
-    },
-    [queryMasterpassRewards, dispatch]
-  );
-
   const handleCardSelect = useCallback(
     async (card: CardModel) => {
       dispatch(setSelectedCard(card));
       dispatch(setInstallments([]));
       dispatch(setSelectedInstallment(null));
       dispatch(setCardType(null));
-      if (enableRewards) {
-        dispatch(clearRewards());
-      }
 
       try {
         const result = await setMasterpassRestBinNumber({
@@ -173,53 +119,11 @@ export const useMasterpassPayment = (
             await handleInstallmentSelect(pageContext.installments[0]);
           }
         }
-
-        if (enableRewards) {
-          void fetchRewardsForCard(card);
-        }
       } catch (error) {
         // Silently handle errors (e.g., mutation aborted due to rapid selection)
       }
     },
-    [
-      enableRewards,
-      setMasterpassRestBinNumber,
-      handleInstallmentSelect,
-      fetchRewardsForCard,
-      dispatch
-    ]
-  );
-
-  const openRewardModal = useCallback(() => {
-    dispatch(setShowRewardModal(true));
-  }, [dispatch]);
-
-  const closeRewardModal = useCallback(() => {
-    dispatch(setShowRewardModal(false));
-  }, [dispatch]);
-
-  const confirmRewards = useCallback(
-    async (selected: RewardItem[]) => {
-      const capped = getCappedRewardAmounts(selected, payableAmount);
-      const special = capped.special.toFixed(2);
-      const general = capped.general.toFixed(2);
-
-      try {
-        await selectMasterpassRewards({ special, general }).unwrap();
-        dispatch(setSelectedRewards(selected));
-        dispatch(setShowRewardModal(false));
-        return { success: true };
-      } catch (error) {
-        return {
-          success: false,
-          message:
-            error instanceof Error
-              ? error.message
-              : 'Failed to apply rewards'
-        };
-      }
-    },
-    [selectMasterpassRewards, payableAmount, dispatch]
+    [setMasterpassRestBinNumber, handleInstallmentSelect, dispatch]
   );
 
   const processPayment = useCallback(async (): Promise<PaymentResult> => {
@@ -347,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();
@@ -360,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:
@@ -438,18 +346,11 @@ export const useMasterpassPayment = (
     isInstallmentLoading,
     isPrepareLoading,
     isFinalizeLoading,
-    isRewardsQueryLoading,
-    isRewardsSelectLoading,
-    payableAmount,
 
     updatePaymentState: updatePaymentStateAction,
     handleCardSelect,
     handleInstallmentSelect,
     processPayment,
-    processDirectPayment,
-    fetchRewardsForCard,
-    openRewardModal,
-    closeRewardModal,
-    confirmRewards
+    processDirectPayment
   };
 };

package/src/index.ts

@@ -4,7 +4,6 @@ export { default as MasterpassRestOption } from './views/masterpass-rest-option'
 
 export { default as CreditCardForm } from './components/credit-card-form';
 export { default as PaymentMethodSelector } from './components/payment-method-selector';
-export { default as RewardSelectionModal } from './components/reward-selection-modal';
 
 export { default as masterpassRestReducer } from './redux/reducer';
 
@@ -15,7 +14,6 @@ export { useMasterpassScript } from './hooks/useMasterpassScript';
 
 export * from './utils/payment-constants';
 export * from './utils/payment-utils';
-export * from './utils/reward-utils';
 export * from './utils/card-utils';
 export * from './utils/validation-schemas';
 export * from './utils/masterpass-sdk';

package/src/redux/api.ts

@@ -1,7 +1,6 @@
 import { api } from '@akinon/next/data/client/api';
 import { buildClientRequestUrl } from '@akinon/next/utils';
 import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
-import type { RewardItem } from '../types/payment.types';
 
 export interface MasterpassRestTokenRequest {
   three_d?: boolean;
@@ -98,39 +97,6 @@ interface CardType {
   logo: string;
 }
 
-export interface QueryMasterpassRewardsRequest {
-  card_alias: string;
-}
-
-export interface QueryMasterpassRewardsResponse {
-  context_list: Array<{
-    page_context: {
-      rewards: RewardItem[];
-    };
-    page_name: string;
-    page_slug: string;
-  }>;
-  template_name: string;
-  errors: any;
-  pre_order: any;
-}
-
-export interface SelectMasterpassRewardsRequest {
-  special: string;
-  general: string;
-}
-
-export interface SelectMasterpassRewardsResponse {
-  context_list: Array<{
-    page_context: any;
-    page_name: string;
-    page_slug: string;
-  }>;
-  template_name: string;
-  errors: any;
-  pre_order: any;
-}
-
 export interface SetMasterpassRestBinNumberResponse {
   context_list: Array<{
     page_context: {
@@ -236,51 +202,6 @@ export const masterpassRestApi = api.injectEndpoints({
         dispatch(setPaymentStepBusy(false));
       }
     }),
-    queryMasterpassRewards: build.mutation<
-      QueryMasterpassRewardsResponse,
-      QueryMasterpassRewardsRequest
-    >({
-      query: (arg) => ({
-        url: buildClientRequestUrl('/orders/checkout/', {
-          useFormData: true
-        }),
-        method: 'POST',
-        params: {
-          page: 'MasterpassRestRewardListPage'
-        },
-        body: {
-          card_alias: arg.card_alias
-        }
-      }),
-      async onQueryStarted(_, { dispatch, queryFulfilled }) {
-        dispatch(setPaymentStepBusy(true));
-        await queryFulfilled;
-        dispatch(setPaymentStepBusy(false));
-      }
-    }),
-    selectMasterpassRewards: build.mutation<
-      SelectMasterpassRewardsResponse,
-      SelectMasterpassRewardsRequest
-    >({
-      query: (arg) => ({
-        url: buildClientRequestUrl('/orders/checkout/', {
-          useFormData: true
-        }),
-        method: 'POST',
-        params: {
-          page: 'MasterpassRestRewardSelectionPage'
-        },
-        body: {
-          special: arg.special,
-          general: arg.general
-        }
-      }),
-      async onQueryStarted(_, { dispatch, queryFulfilled }) {
-        dispatch(setPaymentStepBusy(true));
-        await queryFulfilled;
-        dispatch(setPaymentStepBusy(false));
-      }
-    }),
     finalizeMasterpassOrder: build.mutation<
       FinalizeMasterpassOrderResponse,
       FinalizeMasterpassOrderRequest
@@ -318,7 +239,5 @@ export const {
   useSetMasterpassRestBinNumberMutation,
   useCheckoutMasterpassInstallmentMutation,
   usePrepareMasterpassOrderMutation,
-  useFinalizeMasterpassOrderMutation,
-  useQueryMasterpassRewardsMutation,
-  useSelectMasterpassRewardsMutation
+  useFinalizeMasterpassOrderMutation
 } = masterpassRestApi;

package/src/redux/reducer.ts

@@ -5,8 +5,7 @@ import {
   ModalState,
   Installment,
   CardType,
-  OrderData,
-  RewardItem
+  OrderData
 } from '../types/payment.types';
 import { CreditCardFormData } from '../utils/validation-schemas';
 
@@ -69,17 +68,13 @@ const initialState: MasterpassRestState = {
     orderData: null,
     orderCompleted: false,
     cvc: '',
-    useThreeD: true,
-    availableRewards: [],
-    selectedRewards: [],
-    isLoadingRewards: false
+    useThreeD: true
   },
   modalState: {
     showLinkModal: false,
     showOTPModal: false,
     show3DSecureModal: false,
     showInformationModal: false,
-    showRewardModal: false,
     informationModalData: null,
     otpType: 'OTP',
     verificationData: null,
@@ -174,24 +169,6 @@ const masterpassRestSlice = createSlice({
     setOrderCompleted: (state, action: PayloadAction<boolean>) => {
       state.paymentState.orderCompleted = action.payload;
     },
-    setAvailableRewards: (state, action: PayloadAction<RewardItem[]>) => {
-      state.paymentState.availableRewards = action.payload;
-    },
-    setSelectedRewards: (state, action: PayloadAction<RewardItem[]>) => {
-      state.paymentState.selectedRewards = action.payload;
-    },
-    setLoadingRewards: (state, action: PayloadAction<boolean>) => {
-      state.paymentState.isLoadingRewards = action.payload;
-    },
-    setShowRewardModal: (state, action: PayloadAction<boolean>) => {
-      state.modalState.showRewardModal = action.payload;
-    },
-    clearRewards: (state) => {
-      state.paymentState.availableRewards = [];
-      state.paymentState.selectedRewards = [];
-      state.paymentState.isLoadingRewards = false;
-      state.modalState.showRewardModal = false;
-    },
     updateModalState: (state, action: PayloadAction<Partial<ModalState>>) => {
       state.modalState = { ...state.modalState, ...action.payload };
     },
@@ -257,17 +234,13 @@ const masterpassRestSlice = createSlice({
         orderData: null,
         orderCompleted: false,
         cvc: '',
-        useThreeD: true,
-        availableRewards: [],
-        selectedRewards: [],
-        isLoadingRewards: false
+        useThreeD: true
       };
       state.modalState = {
         showLinkModal: false,
         showOTPModal: false,
         show3DSecureModal: false,
         showInformationModal: false,
-        showRewardModal: false,
         informationModalData: null,
         otpType: 'OTP',
         verificationData: null,
@@ -303,11 +276,6 @@ export const {
   setOrderData,
   setCvc,
   setOrderCompleted,
-  setAvailableRewards,
-  setSelectedRewards,
-  setLoadingRewards,
-  setShowRewardModal,
-  clearRewards,
   updateModalState,
   setShowLinkModal,
   setShowOTPModal,