@akinon/pz-masterpass-rest 2.0.33-beta.0 → 2.0.33

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/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/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> => {
@@ -346,11 +442,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';

package/src/redux/api.ts

@@ -1,6 +1,7 @@
 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;
@@ -97,6 +98,39 @@ 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: {
@@ -202,6 +236,51 @@ 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
@@ -239,5 +318,7 @@ export const {
   useSetMasterpassRestBinNumberMutation,
   useCheckoutMasterpassInstallmentMutation,
   usePrepareMasterpassOrderMutation,
-  useFinalizeMasterpassOrderMutation
+  useFinalizeMasterpassOrderMutation,
+  useQueryMasterpassRewardsMutation,
+  useSelectMasterpassRewardsMutation
 } = masterpassRestApi;

package/src/redux/reducer.ts

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