@akinon/pz-masterpass-rest 2.0.14 → 2.0.15-rc.0

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,

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 } from './payment.types';
+import { CardType, Installment, RewardItem } from './payment.types';
 
 export type PaymentMethodSelectorProps = {
   cards: any[];
@@ -18,6 +18,14 @@ 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;
 };
 
@@ -58,6 +66,18 @@ 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;
@@ -119,6 +139,14 @@ 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;
 
@@ -130,6 +158,7 @@ export type MasterpassRestOptionRenderProps = {
     LinkModal: React.ComponentType<LinkModalProps>;
     OTPModal: React.ComponentType<OTPModalProps>;
     ConfirmationModal: React.ComponentType<ConfirmationModalProps>;
+    RewardSelectionModal: React.ComponentType<RewardSelectionModalProps>;
   };
 };
 
@@ -141,6 +170,7 @@ 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;
@@ -277,4 +307,20 @@ 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,6 +69,15 @@ 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;
@@ -78,6 +87,9 @@ export interface PaymentState {
   orderCompleted: boolean;
   cvc: string;
   useThreeD: boolean;
+  availableRewards: RewardItem[];
+  selectedRewards: RewardItem[];
+  isLoadingRewards: boolean;
 }
 
 export type InformationModalType = 'warning' | 'error' | 'success' | 'info';
@@ -95,6 +107,7 @@ 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, 23);
+  return formatted.substring(0, 19);
 };
 
 export const formatExpiryDate = (value: string): string => {

package/src/utils/reward-utils.ts

@@ -0,0 +1,41 @@
+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);
+};

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

@@ -29,6 +29,8 @@ 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 {
@@ -38,6 +40,7 @@ interface MasterpassRestOptionProps {
   environment?: MasterpassEnvironment;
   texts?: MasterpassRestOptionTexts;
   customRender?: MasterpassRestOptionCustomRender;
+  enableRewards?: boolean;
 }
 
 const defaultTexts: MasterpassRestOptionTexts = {
@@ -158,7 +161,23 @@ 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'
+  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'
 };
 
 const mergeTexts = (
@@ -177,7 +196,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   sdkUrl,
   environment,
   texts = defaultTexts,
-  customRender
+  customRender,
+  enableRewards = false
 }) => {
   const mergedTexts = React.useMemo(
     () => mergeTexts(texts, defaultTexts),
@@ -201,6 +221,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     'stored_card' | 'new_card'
   >('stored_card');
   const [cvc, setCvc] = useState<string>('');
+  const [isProcessingPayment, setIsProcessingPayment] = useState(false);
 
   const [setMasterpassRestBinNumber] = useSetMasterpassRestBinNumberMutation();
 
@@ -209,12 +230,18 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     isInstallmentLoading,
     isPrepareLoading,
     isFinalizeLoading,
+    isRewardsQueryLoading,
+    isRewardsSelectLoading,
     updatePaymentState,
     handleCardSelect,
     handleInstallmentSelect,
     processPayment,
-    processDirectPayment
-  } = useMasterpassPayment();
+    processDirectPayment,
+    openRewardModal,
+    closeRewardModal,
+    confirmRewards,
+    payableAmount
+  } = useMasterpassPayment({ enableRewards });
 
   const {
     accountData,
@@ -382,6 +409,10 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   }, [dispatch, handleAddCard, mergedTexts.failedToSaveCardText]);
 
   const handleProceedToPayment = useCallback(async () => {
+    if (isProcessingPayment) return;
+
+    setIsProcessingPayment(true);
+
     try {
       dispatch(clearAllErrors());
 
@@ -408,8 +439,10 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
       const errorMessage =
         error instanceof Error ? error.message : mergedTexts.paymentFailedText;
       dispatch(setError(errorMessage));
+    } finally {
+      setIsProcessingPayment(false);
     }
-  }, [dispatch, paymentMethod, processDirectPayment, processPayment, updateModalState, mergedTexts.paymentFailedText]);
+  }, [isProcessingPayment, dispatch, paymentMethod, processDirectPayment, processPayment, updateModalState, mergedTexts.paymentFailedText]);
 
   const handleOTPSubmitWithErrorHandling = useCallback(async (otp: string) => {
     if (!handleOTPSubmit)
@@ -449,6 +482,18 @@ 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 });
@@ -486,7 +531,8 @@ 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
+      ConfirmationModal: wrapRenderFunction(customRenderRef.current?.confirmationModal) || ConfirmationModal,
+      RewardSelectionModal: wrapRenderFunction(customRenderRef.current?.rewardSelectionModal) || RewardSelectionModal
     };
   }, [
     customRender?.paymentMethodSelector,
@@ -495,7 +541,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     customRender?.installmentList,
     customRender?.linkModal,
     customRender?.otpModal,
-    customRender?.confirmationModal
+    customRender?.confirmationModal,
+    customRender?.rewardSelectionModal
   ]);
 
   const hasStoredCards =
@@ -541,6 +588,14 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     isInstallmentLoading,
     isPrepareLoading,
     isFinalizeLoading,
+    isProcessingPayment,
+    isRewardsQueryLoading,
+    isRewardsSelectLoading,
+
+    openRewardModal,
+    closeRewardModal,
+    handleConfirmRewards,
+    payableAmount,
 
     texts: mergedTexts,
 
@@ -573,6 +628,13 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     isInstallmentLoading,
     isPrepareLoading,
     isFinalizeLoading,
+    isProcessingPayment,
+    isRewardsQueryLoading,
+    isRewardsSelectLoading,
+    openRewardModal,
+    closeRewardModal,
+    handleConfirmRewards,
+    payableAmount,
     mergedTexts,
     memoizedComponents
   ]);
@@ -651,6 +713,20 @@ 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
                 })
               ) : (
@@ -662,6 +738,20 @@ 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}
                 />
               )}
@@ -707,7 +797,10 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
                 selectedInstallment: paymentState.selectedInstallment,
                 isLoading: isInstallmentLoading || isPrepareLoading,
                 onProceedToPayment: handleProceedToPayment,
-                paymentLoading: isFinalizeLoading,
+                paymentLoading:
+                  isProcessingPayment ||
+                  isPrepareLoading ||
+                  isFinalizeLoading,
                 texts: mergedTexts
               })
             ) : (
@@ -718,7 +811,11 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
                 selectedInstallment={paymentState.selectedInstallment}
                 isLoading={isInstallmentLoading || isPrepareLoading}
                 onProceedToPayment={handleProceedToPayment}
-                paymentLoading={isFinalizeLoading}
+                paymentLoading={
+                  isProcessingPayment ||
+                  isPrepareLoading ||
+                  isFinalizeLoading
+                }
                 texts={mergedTexts}
               />
             )
@@ -894,6 +991,33 @@ 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>
   );
 };