@akinon/pz-masterpass-rest 2.0.17 → 2.0.18-rc.0

package/src/components/card-list.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useMemo, 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';
 
@@ -13,6 +14,12 @@ const CardList: React.FC<CardListProps> = ({
   cvc = '',
   onCvcChange,
   cvcRequired = false,
+  availableRewards = [],
+  selectedRewards = [],
+  isLoadingRewards = false,
+  onOpenRewardModal,
+  rewardCurrency,
+  rewardPayableAmount,
   texts
 }) => {
   const [localCvc, setLocalCvc] = useState(cvc);
@@ -23,9 +30,21 @@ 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">
-      {cards.map((card) => {
+      {orderedCards.map((card) => {
         const isSelected =
           selectedCard?.uniqueCardNumber === card.uniqueCardNumber;
         const expectedCvcLength = getCvcLength(detectCardType(card.cardBin));
@@ -119,6 +138,57 @@ 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={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/components/reward-selection-modal.tsx

@@ -0,0 +1,194 @@
+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/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

@@ -5,7 +5,9 @@ import {
   useSetMasterpassRestBinNumberMutation,
   useCheckoutMasterpassInstallmentMutation,
   usePrepareMasterpassOrderMutation,
-  useFinalizeMasterpassOrderMutation
+  useFinalizeMasterpassOrderMutation,
+  useQueryMasterpassRewardsMutation,
+  useSelectMasterpassRewardsMutation
 } from '../redux/api';
 import {
   updatePaymentState,
@@ -14,7 +16,12 @@ import {
   setInstallments,
   setCardType,
   setOrderData,
-  setOrderCompleted
+  setOrderCompleted,
+  setAvailableRewards,
+  setSelectedRewards,
+  setLoadingRewards,
+  setShowRewardModal,
+  clearRewards
 } from '../redux/reducer';
 import { useMasterpassToken } from './useMasterpassToken';
 import { PaymentService } from '../services/payment';
@@ -24,8 +31,9 @@ import {
   getTransactionType
 } from '../utils/payment-utils';
 import { handleMasterpassResponse } from '../utils/response-handler';
-import type { Installment } from '../types/payment.types';
+import type { Installment, RewardItem } from '../types/payment.types';
 import type { CardModel } from '../types/account.types';
+import { getCappedRewardAmounts } from '../utils/reward-utils';
 
 export type PaymentResult = {
   success: boolean;
@@ -35,7 +43,14 @@ export type PaymentResult = {
   message?: any;
 };
 
-export const useMasterpassPayment = () => {
+export interface UseMasterpassPaymentOptions {
+  enableRewards?: boolean;
+}
+
+export const useMasterpassPayment = (
+  options: UseMasterpassPaymentOptions = {}
+) => {
+  const { enableRewards = false } = options;
   const dispatch = useDispatch();
   const {
     paymentState,
@@ -46,6 +61,13 @@ 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
   });
@@ -62,6 +84,12 @@ 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) {
@@ -97,12 +125,38 @@ 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({
@@ -119,11 +173,53 @@ 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)
       }
     },
-    [setMasterpassRestBinNumber, handleInstallmentSelect, dispatch]
+    [
+      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]
   );
 
   const processPayment = useCallback(async (): Promise<PaymentResult> => {
@@ -251,10 +347,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 +360,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:
@@ -346,11 +438,18 @@ export const useMasterpassPayment = () => {
     isInstallmentLoading,
     isPrepareLoading,
     isFinalizeLoading,
+    isRewardsQueryLoading,
+    isRewardsSelectLoading,
+    payableAmount,
 
     updatePaymentState: updatePaymentStateAction,
     handleCardSelect,
     handleInstallmentSelect,
     processPayment,
-    processDirectPayment
+    processDirectPayment,
+    fetchRewardsForCard,
+    openRewardModal,
+    closeRewardModal,
+    confirmRewards
   };
 };

package/src/index.ts

@@ -4,6 +4,7 @@ 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';
 
@@ -14,6 +15,7 @@ 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';