@akinon/pz-masterpass-rest 2.0.16-rc.0 → 2.0.16

package/src/types/custom-render.types.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import type { CreditCardFormData } from '../utils/validation-schemas';
-import { CardType, Installment, RewardItem } from './payment.types';
+import { CardType, Installment } from './payment.types';
 
 export type PaymentMethodSelectorProps = {
   cards: any[];
@@ -18,14 +18,6 @@ export type CardListProps = {
   cvc?: string;
   onCvcChange?: (cvc: string) => void;
   cvcRequired?: boolean;
-  availableRewards?: RewardItem[];
-  selectedRewards?: RewardItem[];
-  isLoadingRewards?: boolean;
-  isConfirmingRewards?: boolean;
-  onOpenRewardModal?: () => void;
-  onConfirmRewards?: (selected: RewardItem[]) => Promise<void> | void;
-  rewardCurrency?: string;
-  rewardPayableAmount?: string | number | null;
   texts: MasterpassRestOptionTexts;
 };
 
@@ -66,18 +58,6 @@ export type OTPModalProps = {
   texts: MasterpassRestOptionTexts;
 };
 
-export type RewardSelectionModalProps = {
-  open: boolean;
-  onClose: () => void;
-  onConfirm: (selected: RewardItem[]) => Promise<void> | void;
-  rewards: RewardItem[];
-  selectedRewards: RewardItem[];
-  isLoading?: boolean;
-  currency?: string;
-  payableAmount?: string | number | null;
-  texts: MasterpassRestOptionTexts;
-};
-
 export type ConfirmationModalProps = {
   open: boolean;
   onClose: () => void;
@@ -139,14 +119,6 @@ export type MasterpassRestOptionRenderProps = {
   isInstallmentLoading: boolean;
   isPrepareLoading: boolean;
   isFinalizeLoading: boolean;
-  isProcessingPayment: boolean;
-  isRewardsQueryLoading: boolean;
-  isRewardsSelectLoading: boolean;
-
-  openRewardModal: () => void;
-  closeRewardModal: () => void;
-  handleConfirmRewards: (selected: RewardItem[]) => Promise<void>;
-  payableAmount: string | null;
 
   texts: MasterpassRestOptionTexts;
 
@@ -158,7 +130,6 @@ export type MasterpassRestOptionRenderProps = {
     LinkModal: React.ComponentType<LinkModalProps>;
     OTPModal: React.ComponentType<OTPModalProps>;
     ConfirmationModal: React.ComponentType<ConfirmationModalProps>;
-    RewardSelectionModal: React.ComponentType<RewardSelectionModalProps>;
   };
 };
 
@@ -170,7 +141,6 @@ export type MasterpassRestOptionCustomRender = {
   linkModal?: (props: LinkModalProps) => ReactElement;
   otpModal?: (props: OTPModalProps) => ReactElement;
   confirmationModal?: (props: ConfirmationModalProps) => ReactElement;
-  rewardSelectionModal?: (props: RewardSelectionModalProps) => ReactElement;
   errorDisplay?: (props: ErrorDisplayProps) => ReactElement;
   loadingState?: (props: LoadingStateProps) => ReactElement;
   emptyState?: (props: EmptyStateProps) => ReactElement;
@@ -307,20 +277,4 @@ export type MasterpassRestOptionTexts = {
   sessionExpiredMessage?: string;
   sessionExpiredSecondaryMessage?: string;
   sessionExpiredButton?: string;
-
-  rewardModalTitle?: string;
-  rewardModalDescription?: string;
-  rewardModalEmptyMessage?: string;
-  rewardModalConfirmText?: string;
-  rewardModalCancelText?: string;
-  rewardModalLoadingText?: string;
-  rewardOpenButtonText?: string;
-  rewardSelectedSummaryText?: string;
-  rewardAvailableSummaryText?: string;
-  rewardClearText?: string;
-  rewardCategorySpecialText?: string;
-  rewardCategoryGeneralText?: string;
-  rewardFailedToLoadText?: string;
-  rewardFailedToSelectText?: string;
-  rewardCappedNoticeText?: string;
 };

package/src/types/payment.types.ts

@@ -69,15 +69,6 @@ export type TransactionType =
   | 'DIRECT_PURCHASE'
   | 'DIRECT_PURCHASE_3D';
 
-export type RewardName = 'FBB' | 'BNS';
-export type RewardCategory = 'special' | 'general';
-
-export interface RewardItem {
-  type: RewardCategory;
-  amount: number | string;
-  name?: RewardName;
-}
-
 export interface PaymentState {
   selectedCard: any | null;
   selectedInstallment: Installment | null;
@@ -87,9 +78,6 @@ export interface PaymentState {
   orderCompleted: boolean;
   cvc: string;
   useThreeD: boolean;
-  availableRewards: RewardItem[];
-  selectedRewards: RewardItem[];
-  isLoadingRewards: boolean;
 }
 
 export type InformationModalType = 'warning' | 'error' | 'success' | 'info';
@@ -107,7 +95,6 @@ export interface ModalState {
   showOTPModal: boolean;
   show3DSecureModal: boolean;
   showInformationModal: boolean;
-  showRewardModal: boolean;
   informationModalData: InformationModalData | null;
   otpType: OTPType;
   verificationData: any | null;

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 => {

package/src/views/masterpass-rest-option.tsx

@@ -29,8 +29,6 @@ import InstallmentList from '../components/installment-list';
 import CreditCardForm from '../components/credit-card-form';
 import PaymentMethodSelector from '../components/payment-method-selector';
 import InformationModal from '../components/information-modal';
-import RewardSelectionModal from '../components/reward-selection-modal';
-import type { RewardItem } from '../types/payment.types';
 import mpBlackLogo from '../assets/img/masterpass-black-logo.png';
 
 interface MasterpassRestOptionProps {
@@ -40,7 +38,6 @@ interface MasterpassRestOptionProps {
   environment?: MasterpassEnvironment;
   texts?: MasterpassRestOptionTexts;
   customRender?: MasterpassRestOptionCustomRender;
-  enableRewards?: boolean;
 }
 
 const defaultTexts: MasterpassRestOptionTexts = {
@@ -161,23 +158,7 @@ const defaultTexts: MasterpassRestOptionTexts = {
   sessionExpiredTitle: 'Session Expired',
   sessionExpiredMessage: 'Your session has expired due to inactivity. Please restart the process to continue.',
   sessionExpiredSecondaryMessage: 'For security reasons, sessions are only valid for a limited time.',
-  sessionExpiredButton: 'Start Again',
-
-  rewardModalTitle: 'Use Card Rewards',
-  rewardModalDescription: 'Select the rewards you want to apply to this order.',
-  rewardModalEmptyMessage: 'No rewards available for this card.',
-  rewardModalConfirmText: 'Apply',
-  rewardModalCancelText: 'Cancel',
-  rewardModalLoadingText: 'Applying...',
-  rewardOpenButtonText: 'Use Rewards',
-  rewardSelectedSummaryText: '{count} reward(s) applied',
-  rewardAvailableSummaryText: '{count} reward(s) available',
-  rewardClearText: 'Clear',
-  rewardCategorySpecialText: 'Special Rewards',
-  rewardCategoryGeneralText: 'General Rewards',
-  rewardFailedToLoadText: 'Failed to load rewards',
-  rewardFailedToSelectText: 'Failed to apply rewards',
-  rewardCappedNoticeText: '{amount} will be applied'
+  sessionExpiredButton: 'Start Again'
 };
 
 const mergeTexts = (
@@ -196,8 +177,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   sdkUrl,
   environment,
   texts = defaultTexts,
-  customRender,
-  enableRewards = false
+  customRender
 }) => {
   const mergedTexts = React.useMemo(
     () => mergeTexts(texts, defaultTexts),
@@ -221,7 +201,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     'stored_card' | 'new_card'
   >('stored_card');
   const [cvc, setCvc] = useState<string>('');
-  const [isProcessingPayment, setIsProcessingPayment] = useState(false);
 
   const [setMasterpassRestBinNumber] = useSetMasterpassRestBinNumberMutation();
 
@@ -230,18 +209,12 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     isInstallmentLoading,
     isPrepareLoading,
     isFinalizeLoading,
-    isRewardsQueryLoading,
-    isRewardsSelectLoading,
     updatePaymentState,
     handleCardSelect,
     handleInstallmentSelect,
     processPayment,
-    processDirectPayment,
-    openRewardModal,
-    closeRewardModal,
-    confirmRewards,
-    payableAmount
-  } = useMasterpassPayment({ enableRewards });
+    processDirectPayment
+  } = useMasterpassPayment();
 
   const {
     accountData,
@@ -409,10 +382,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   }, [dispatch, handleAddCard, mergedTexts.failedToSaveCardText]);
 
   const handleProceedToPayment = useCallback(async () => {
-    if (isProcessingPayment) return;
-
-    setIsProcessingPayment(true);
-
     try {
       dispatch(clearAllErrors());
 
@@ -439,10 +408,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
       const errorMessage =
         error instanceof Error ? error.message : mergedTexts.paymentFailedText;
       dispatch(setError(errorMessage));
-    } finally {
-      setIsProcessingPayment(false);
     }
-  }, [isProcessingPayment, dispatch, paymentMethod, processDirectPayment, processPayment, updateModalState, mergedTexts.paymentFailedText]);
+  }, [dispatch, paymentMethod, processDirectPayment, processPayment, updateModalState, mergedTexts.paymentFailedText]);
 
   const handleOTPSubmitWithErrorHandling = useCallback(async (otp: string) => {
     if (!handleOTPSubmit)
@@ -482,18 +449,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     }
   }, [dispatch, handleInstallmentSelect, mergedTexts.failedToSelectInstallmentText]);
 
-  const handleConfirmRewards = useCallback(
-    async (selected: RewardItem[]) => {
-      const result = await confirmRewards(selected);
-      if (!result.success) {
-        dispatch(
-          setError(result.message || mergedTexts.rewardFailedToSelectText)
-        );
-      }
-    },
-    [confirmRewards, dispatch, mergedTexts.rewardFailedToSelectText]
-  );
-
   const handleCvcChange = useCallback((newCvc: string) => {
     setCvc(newCvc);
     updatePaymentState({ cvc: newCvc });
@@ -531,8 +486,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
       InstallmentList: wrapRenderFunction(customRenderRef.current?.installmentList) || InstallmentList,
       LinkModal: wrapRenderFunction(customRenderRef.current?.linkModal) || LinkModal,
       OTPModal: wrapRenderFunction(customRenderRef.current?.otpModal) || OTPModal,
-      ConfirmationModal: wrapRenderFunction(customRenderRef.current?.confirmationModal) || ConfirmationModal,
-      RewardSelectionModal: wrapRenderFunction(customRenderRef.current?.rewardSelectionModal) || RewardSelectionModal
+      ConfirmationModal: wrapRenderFunction(customRenderRef.current?.confirmationModal) || ConfirmationModal
     };
   }, [
     customRender?.paymentMethodSelector,
@@ -541,8 +495,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     customRender?.installmentList,
     customRender?.linkModal,
     customRender?.otpModal,
-    customRender?.confirmationModal,
-    customRender?.rewardSelectionModal
+    customRender?.confirmationModal
   ]);
 
   const hasStoredCards =
@@ -588,14 +541,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     isInstallmentLoading,
     isPrepareLoading,
     isFinalizeLoading,
-    isProcessingPayment,
-    isRewardsQueryLoading,
-    isRewardsSelectLoading,
-
-    openRewardModal,
-    closeRewardModal,
-    handleConfirmRewards,
-    payableAmount,
 
     texts: mergedTexts,
 
@@ -628,13 +573,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     isInstallmentLoading,
     isPrepareLoading,
     isFinalizeLoading,
-    isProcessingPayment,
-    isRewardsQueryLoading,
-    isRewardsSelectLoading,
-    openRewardModal,
-    closeRewardModal,
-    handleConfirmRewards,
-    payableAmount,
     mergedTexts,
     memoizedComponents
   ]);
@@ -713,20 +651,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
                   removingCardId: modalState?.removingCardId,
                   cvc: cvc,
                   onCvcChange: handleCvcChange,
-                  ...(enableRewards
-                    ? {
-                        availableRewards: paymentState.availableRewards,
-                        selectedRewards: paymentState.selectedRewards,
-                        isLoadingRewards:
-                          paymentState.isLoadingRewards ||
-                          isRewardsQueryLoading,
-                        isConfirmingRewards: isRewardsSelectLoading,
-                        onOpenRewardModal: openRewardModal,
-                        onConfirmRewards: handleConfirmRewards,
-                        rewardCurrency: stateCurrency || currency,
-                        rewardPayableAmount: payableAmount
-                      }
-                    : {}),
                   texts: mergedTexts
                 })
               ) : (
@@ -738,20 +662,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
                   removingCardId={modalState?.removingCardId}
                   cvc={cvc}
                   onCvcChange={handleCvcChange}
-                  {...(enableRewards
-                    ? {
-                        availableRewards: paymentState.availableRewards,
-                        selectedRewards: paymentState.selectedRewards,
-                        isLoadingRewards:
-                          paymentState.isLoadingRewards ||
-                          isRewardsQueryLoading,
-                        isConfirmingRewards: isRewardsSelectLoading,
-                        onOpenRewardModal: openRewardModal,
-                        onConfirmRewards: handleConfirmRewards,
-                        rewardCurrency: stateCurrency || currency,
-                        rewardPayableAmount: payableAmount
-                      }
-                    : {})}
                   texts={mergedTexts}
                 />
               )}
@@ -797,10 +707,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
                 selectedInstallment: paymentState.selectedInstallment,
                 isLoading: isInstallmentLoading || isPrepareLoading,
                 onProceedToPayment: handleProceedToPayment,
-                paymentLoading:
-                  isProcessingPayment ||
-                  isPrepareLoading ||
-                  isFinalizeLoading,
+                paymentLoading: isFinalizeLoading,
                 texts: mergedTexts
               })
             ) : (
@@ -811,11 +718,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
                 selectedInstallment={paymentState.selectedInstallment}
                 isLoading={isInstallmentLoading || isPrepareLoading}
                 onProceedToPayment={handleProceedToPayment}
-                paymentLoading={
-                  isProcessingPayment ||
-                  isPrepareLoading ||
-                  isFinalizeLoading
-                }
+                paymentLoading={isFinalizeLoading}
                 texts={mergedTexts}
               />
             )
@@ -991,33 +894,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
         onClose={() => updateModalState({ showInformationModal: false, informationModalData: null })}
         data={modalState?.informationModalData}
       />
-
-      {enableRewards &&
-        (customRender?.rewardSelectionModal ? (
-          customRender.rewardSelectionModal({
-            open: modalState?.showRewardModal ?? false,
-            onClose: closeRewardModal,
-            onConfirm: handleConfirmRewards,
-            rewards: paymentState.availableRewards,
-            selectedRewards: paymentState.selectedRewards,
-            isLoading: isRewardsSelectLoading,
-            currency: stateCurrency || currency,
-            payableAmount,
-            texts: mergedTexts
-          })
-        ) : (
-          <RewardSelectionModal
-            open={modalState?.showRewardModal ?? false}
-            onClose={closeRewardModal}
-            onConfirm={handleConfirmRewards}
-            rewards={paymentState.availableRewards}
-            selectedRewards={paymentState.selectedRewards}
-            isLoading={isRewardsSelectLoading}
-            currency={stateCurrency || currency}
-            payableAmount={payableAmount}
-            texts={mergedTexts}
-          />
-        ))}
     </div>
   );
 };

package/src/components/reward-selection-modal.tsx

@@ -1,194 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Modal, Button } from '@akinon/next/components';
-import { RewardSelectionModalProps } from '../types/custom-render.types';
-import type { RewardItem, RewardCategory } from '../types/payment.types';
-import { parseRewardAmount, getCappedRewardAmounts } from '../utils/reward-utils';
-
-const formatAmount = (amount: number | string, currency?: string) => {
-  const formatted = parseRewardAmount(amount).toFixed(2);
-  return currency ? `${formatted} ${currency.toUpperCase()}` : formatted;
-};
-
-const isSameReward = (a: RewardItem, b: RewardItem) => a.type === b.type;
-
-const RewardSelectionModal: React.FC<RewardSelectionModalProps> = ({
-  open,
-  onClose,
-  onConfirm,
-  rewards,
-  selectedRewards,
-  isLoading = false,
-  currency,
-  payableAmount,
-  texts
-}) => {
-  const [draft, setDraft] = useState<RewardItem[]>(selectedRewards);
-
-  useEffect(() => {
-    if (open) {
-      setDraft(selectedRewards);
-    }
-  }, [open, selectedRewards]);
-
-  const cappedAmounts = useMemo(
-    () => getCappedRewardAmounts(draft, payableAmount),
-    [draft, payableAmount]
-  );
-
-  const grouped = useMemo(() => {
-    const map: Record<RewardCategory, RewardItem[]> = {
-      special: [],
-      general: []
-    };
-    rewards.forEach((reward) => {
-      if (map[reward.type]) {
-        map[reward.type].push(reward);
-      }
-    });
-    return map;
-  }, [rewards]);
-
-  const toggleReward = (reward: RewardItem) => {
-    setDraft((current) => {
-      const exists = current.some((item) => isSameReward(item, reward));
-      if (exists) {
-        return current.filter((item) => !isSameReward(item, reward));
-      }
-      const withoutSameType = current.filter(
-        (item) => item.type !== reward.type
-      );
-      return [...withoutSameType, reward];
-    });
-  };
-
-  const isSelected = (reward: RewardItem) =>
-    draft.some((item) => isSameReward(item, reward));
-
-  const categoryLabel = (category: RewardCategory) =>
-    category === 'special'
-      ? texts.rewardCategorySpecialText
-      : texts.rewardCategoryGeneralText;
-
-  const handleConfirm = async () => {
-    await onConfirm(draft);
-  };
-
-  const hasRewards = rewards.length > 0;
-
-  return (
-    <Modal
-      portalId="masterpass-reward-modal"
-      open={open}
-      setOpen={onClose}
-      title={texts.rewardModalTitle}
-      className="w-full sm:w-[32rem] max-h-[90vh] overflow-y-auto"
-    >
-      <div className="px-6 pt-4 pb-6">
-        {texts.rewardModalDescription && (
-          <p className="text-sm text-gray-600 mb-4">
-            {texts.rewardModalDescription}
-          </p>
-        )}
-
-        {!hasRewards ? (
-          <p className="text-center text-gray-500 py-8">
-            {texts.rewardModalEmptyMessage}
-          </p>
-        ) : (
-          <div className="space-y-5">
-            {(Object.keys(grouped) as RewardCategory[])
-              .filter((category) => grouped[category].length > 0)
-              .map((category) => (
-                <div key={category}>
-                  <h3 className="text-sm font-semibold text-gray-700 mb-2">
-                    {categoryLabel(category)}
-                  </h3>
-                  <ul className="space-y-2">
-                    {grouped[category].map((reward) => {
-                      const selected = isSelected(reward);
-                      const fullValue = parseRewardAmount(reward.amount);
-                      const capped = cappedAmounts[reward.type];
-                      const isCapped = selected && capped < fullValue;
-                      return (
-                        <li key={`${reward.type}-${reward.name ?? ''}`}>
-                          <label
-                            className={`flex items-center justify-between gap-3 px-3 py-3 border cursor-pointer transition-colors ${
-                              selected
-                                ? 'border-primary bg-primary/5'
-                                : 'border-gray-200 hover:bg-gray-50'
-                            }`}
-                          >
-                            <div className="flex items-center gap-3">
-                              <input
-                                type="checkbox"
-                                className="h-4 w-4"
-                                checked={selected}
-                                onChange={() => toggleReward(reward)}
-                                disabled={isLoading}
-                              />
-                              <div>
-                                <p className="font-medium">
-                                  {reward.name || categoryLabel(reward.type)}
-                                </p>
-                                {reward.name && (
-                                  <p className="text-xs text-gray-500">
-                                    {categoryLabel(reward.type)}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-                            <div className="text-right">
-                              <span
-                                className={`font-semibold ${
-                                  isCapped
-                                    ? 'text-gray-400 line-through text-sm'
-                                    : ''
-                                }`}
-                              >
-                                {formatAmount(reward.amount, currency)}
-                              </span>
-                              {isCapped && (
-                                <p className="text-xs text-[#00a63d] font-medium mt-0.5">
-                                  {(texts.rewardCappedNoticeText || '').replace(
-                                    '{amount}',
-                                    formatAmount(capped, currency)
-                                  )}
-                                </p>
-                              )}
-                            </div>
-                          </label>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              ))}
-          </div>
-        )}
-
-        <div className="flex gap-3 justify-end mt-6">
-          <Button
-            appearance="outlined"
-            className="px-5 py-3 h-auto"
-            onClick={onClose}
-            disabled={isLoading}
-          >
-            {texts.rewardModalCancelText}
-          </Button>
-          <Button
-            appearance="filled"
-            className="px-5 py-3 h-auto"
-            onClick={handleConfirm}
-            disabled={isLoading || !hasRewards}
-          >
-            {isLoading
-              ? texts.rewardModalLoadingText
-              : texts.rewardModalConfirmText}
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-export default RewardSelectionModal;

package/src/utils/reward-utils.ts

@@ -1,41 +0,0 @@
-import type { RewardItem, RewardCategory } from '../types/payment.types';
-
-export const REWARD_PRIORITY: RewardCategory[] = ['special', 'general'];
-
-export const parseRewardAmount = (amount: number | string): number => {
-  const value = typeof amount === 'string' ? parseFloat(amount) : amount;
-  return Number.isFinite(value) ? value : 0;
-};
-
-export const getCappedRewardAmounts = (
-  selected: RewardItem[],
-  payableAmount?: string | number | null
-): Record<RewardCategory, number> => {
-  const parsedPayable =
-    payableAmount != null ? parseRewardAmount(payableAmount) : NaN;
-  let remaining = Number.isFinite(parsedPayable) ? parsedPayable : Infinity;
-
-  const result: Record<RewardCategory, number> = { special: 0, general: 0 };
-
-  REWARD_PRIORITY.forEach((type) => {
-    const picked = selected.find((item) => item.type === type);
-    if (!picked) return;
-
-    const value = parseRewardAmount(picked.amount);
-    if (value <= 0) return;
-
-    const used = Math.min(value, remaining);
-    remaining = Math.max(remaining - used, 0);
-    result[type] = used;
-  });
-
-  return result;
-};
-
-export const getCappedRewardTotal = (
-  selected: RewardItem[],
-  payableAmount?: string | number | null
-): number => {
-  const amounts = getCappedRewardAmounts(selected, payableAmount);
-  return REWARD_PRIORITY.reduce((sum, type) => sum + amounts[type], 0);
-};