API tools faq
paste
Advertisement
ronaldkwandy

payment-confirmation-template.tsx

ronaldkwandy
Jul 14th, 2022
1,172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
TypeScript 23.84 KB | None | 0 0
raw download clone embed print report
  1. import React from 'react';
  2. // import ContentGeneralLoading from 'Components/molecules/content/content-general-loading';
  3. import HeaderBack, { IHeaderProps } from 'Components/organism/header/header-back';
  4. import {
  5.   ContentPaymentConfirmation,
  6.   IProps as IPaymentConfirmation,
  7. } from 'Components/molecules/content/content-payment-confirmation';
  8. import { useRouter } from 'next/router';
  9. import { customDateConstructor, exchangeRateConversionHelper, stringToArrayNumber, timezoneFormatDayDateTime } from 'Helpers/common-helper';
  10. import { TransactionHandler } from 'handlers/transaction-handler';
  11. import { WalletHandler } from 'handlers/wallet-handler';
  12. import { parseTransactionStatus, TRANSACTION_STATUS } from 'Helpers/transaction-helper';
  13. import { DEFAULT_PAYMENT, PAYMENT_SOURCE, openSandbox } from 'Helpers/payment-helper';
  14. import { shallowEqual, useDispatch, useSelector } from 'react-redux';
  15. import paymentObject from 'Redux/reducers/payment';
  16. import coinObject from 'Redux/reducers/coin';
  17. import { IReducers } from 'Redux/reducers';
  18. import navigationObject from 'Redux/reducers/navigation';
  19. import { routeBuilder, ROUTER_NAME } from 'Helpers/navigation-helper';
  20. import Head from 'next/head';
  21. import FinishOrderSkeleton from 'Components/atoms/skeleton/finish-order-skeleton';
  22. import transactionObject from 'Redux/reducers/transaction';
  23. import loadingComponentObject from 'Redux/reducers/loading-component';
  24. import { getErrorMessage, ERR_TYPES } from 'Helpers/error-helper';
  25. import statusObject from 'Redux/reducers/status';
  26. import rpgObject from 'Redux/reducers/rpg';
  27. import persistObject from 'Redux/reducers/persist-state';
  28. import { SUBSCRIPTION_TRANSACTION_SOURCE } from 'Helpers/subscription-helper';
  29. import { REGION_CODE, useLanguage } from 'Helpers/translation-helper';
  30. import { CurrencyHandler } from 'handlers/currency-handler';
  31.  
  32. const ConfirmationElement = (props: IHeaderProps & IPaymentConfirmation & { isLoading: boolean }) => {
  33.   const waitingPaymentText = useLanguage('menunggu_pembayaran');
  34.   const paymentStatusText = useLanguage('status_pembayaran');
  35.  
  36.   return (
  37.     <div className='w-full min-h-screen bg-white max-w-600px pb-10'>
  38.       <Head>
  39.         <title>{props.differentiator === 'wait' ? waitingPaymentText : paymentStatusText} | itemku</title>
  40.       </Head>
  41.       <div className='w-full sticky top-0 z-10'>
  42.         <HeaderBack
  43.           title={props.differentiator === 'wait' ? waitingPaymentText : paymentStatusText}
  44.           leftOnClick={props.leftOnClick}
  45.         />
  46.       </div>
  47.       {props.isLoading ? (
  48.         <FinishOrderSkeleton />
  49.       ) : (
  50.         <ContentPaymentConfirmation
  51.           differentiator={props.differentiator}
  52.           paymentMethod={props.paymentMethod}
  53.           paymentMethodImageURL={props.paymentMethodImageURL}
  54.           timeDesc={props.timeDesc}
  55.           paymentNumber={props.paymentNumber}
  56.           timeStart={props.timeStart}
  57.           payments={props.payments}
  58.           extraCharge={props.extraCharge}
  59.           totalPayment={props.totalPayment}
  60.           discount={props.discount}
  61.           discountPrice={props.discountPrice}
  62.           discountPriceCoupon={props.discountPriceCoupon}
  63.           usedDompetkuBalance={props.usedDompetkuBalance}
  64.           grandTotal={props.grandTotal}
  65.           paymentGuideContents={props.paymentGuideContents}
  66.           primaryButtonClick={props.primaryButtonClick}
  67.           secondaryButtonClick={props.secondaryButtonClick}
  68.           withCopyButton={props.withCopyButton}
  69.           isOfficialStoreVoucher={props.isOfficialStoreVoucher}
  70.           userEmail={props.userEmail}
  71.           userPhoneNUmber={props.userPhoneNUmber}
  72.           getTransaction={props.getTransaction}
  73.           noteDirectPaymentOvo={props.noteDirectPaymentOvo}
  74.           usedItemkuWorldCoin={props.usedItemkuWorldCoin}
  75.           itemkuWorldCoinMaxDisc={props.itemkuWorldCoinMaxDisc}
  76.           isConnected={props.isConnected}
  77.           updateTheTimeRemains={props.updateTheTimeRemains}
  78.           isShowDiamondBanner={props.isShowDiamondBanner}
  79.           pinDompetkuClick={props.pinDompetkuClick}
  80.           isSubscription={props.isSubscription}
  81.           isCreditCard={props.isCreditCard}
  82.           dompetkuCashback={props.dompetkuCashback}
  83.         />
  84.       )}
  85.     </div>
  86.   );
  87. };
  88.  
  89. interface IProps {
  90.   paymentSource: PAYMENT_SOURCE;
  91. }
  92.  
  93. export const PaymentConfirmationTemplate = ({ paymentSource }: IProps) => {
  94.   const router = useRouter();
  95.   const dispatch = useDispatch();
  96.   const [paymentDetail, setPaymentDetail] = React.useState<IPaymentConfirmation>();
  97.   const [cancelPayment, setCancelPayment] = React.useState(false);
  98.   const paymentMethodWithoutPaymentCode = useSelector(
  99.     (state: any) => state.configReducers.configList.PAYMENT_METHOD_WITHOUT_PAYMENT_CODE,
  100.     shallowEqual,
  101.   );
  102.   const ovoPaymentSync = useSelector((state: IReducers) => state.paymentReducers.isReqSyncPaymentOvo, shallowEqual);
  103.   const [noteForDirectPaymentOvo, setNoteForDirectPaymentOvo] = React.useState<string>('');
  104.  
  105.   const [connectStatus, setConnectStatus] = React.useState<boolean>(true);
  106.   const [timeRemaining, setTimeRemaining] = React.useState<number>(9999999999);
  107.   const [isReloadable, setIsReloadable] = React.useState<boolean>(false);
  108.  
  109.   // Route Intercept //
  110.   const isRedirectIntercepted = useSelector(
  111.     (state: IReducers) => state.navigationReducers.isRedirectIntercepted,
  112.     shallowEqual,
  113.   );
  114.  
  115.   // Payment Data //
  116.   const paymentDetailDataFromPaymentService = useSelector(
  117.     (state: IReducers) => state.paymentReducers.paymentDetailData, shallowEqual
  118.   );
  119.   const userId = useSelector((state: IReducers) => state.loginReducers.userData.id, shallowEqual);
  120.  
  121.   const setPaymentDetailData = (transactionId: number, transactionNumbers?: string) => {
  122.     const params = {
  123.       transaction_id: transactionId,
  124.       buyer_id: Number(userId),
  125.       transaction_type: transactionNumbers?.slice(0, 2),
  126.     };
  127.     dispatch(paymentObject.actions.reqPaymentDetailData(params));
  128.   };
  129.  
  130.   React.useEffect(() => {
  131.     if (paymentDetailDataFromPaymentService) {
  132.       if (
  133.         paymentDetailDataFromPaymentService.payment_method_id === 47 &&
  134.         paymentDetailDataFromPaymentService.note != null
  135.       ) {
  136.         setNoteForDirectPaymentOvo(paymentDetailDataFromPaymentService.note);
  137.       }
  138.     }
  139.   }, [paymentDetailDataFromPaymentService]);
  140.  
  141.   React.useEffect(() => {
  142.     if (noteForDirectPaymentOvo === 'ITEMKU_WAITING') {
  143.       setConnectStatus(false);
  144.     } else {
  145.       setConnectStatus(true);
  146.     }
  147.   }, [noteForDirectPaymentOvo, paymentDetailDataFromPaymentService?.note]);
  148.   // Payment Data End
  149.  
  150.   // Discount Games From Coin
  151.   const discountGamesData = useSelector((state: IReducers) => state.coinReducers.discountGames);
  152.   const [maxCoinDiscount, setMaxCoinDiscount] = React.useState<number>(0);
  153.  
  154.   React.useEffect(() => {
  155.     dispatch(coinObject.actions.requestDiscountGames());
  156.   }, []);
  157.   // Discount Games From Coin End
  158.  
  159.   // Transaction Data //
  160.   const {
  161.     transactionDetail,
  162.     transactionDetailLoading,
  163.     getTransactionDetail,
  164.     getTransactionDetailOSTopup,
  165.     getTransactionDetailOSVoucher,
  166.   } = TransactionHandler.useTransactionDetail();
  167.  
  168.   React.useEffect(() => {
  169.     if (router.query.TR_id) {
  170.       getTransaction();
  171.     }
  172.   }, [router]);
  173.  
  174.   React.useEffect(() => {
  175.     if (transactionDetail) {
  176.       if (discountGamesData) {
  177.         if (transactionDetail.orders?.length > 0 && discountGamesData.length > 0) {
  178.           const gameIds: number[] = transactionDetail.orders.map((item: any) => item.game_id);
  179.           for (const item of discountGamesData) {
  180.             if (gameIds.includes(item.game_id)) return setMaxCoinDiscount(item.max_percent_discount);
  181.           }
  182.         }
  183.       }
  184.     }
  185.   }, [discountGamesData, transactionDetail]);
  186.  
  187.   React.useEffect(() => {
  188.     if (router.query.TR_id && transactionDetail?.transaction_number) {
  189.       setPaymentDetailData(Number(router.query.TR_id), transactionDetail.transaction_number);
  190.     }
  191.   }, [router, transactionDetail]);
  192.  
  193.   const getTransaction = () => {
  194.     const trxid = parseInt(router.query.TR_id as string);
  195.     if (trxid && !isNaN(trxid)) {
  196.       switch (paymentSource) {
  197.         case PAYMENT_SOURCE.OFFICIAL_STORE_TOPUP:
  198.           getTransactionDetailOSTopup(trxid);
  199.           break;
  200.         case PAYMENT_SOURCE.OFFICIAL_STORE_VOUCHER:
  201.           getTransactionDetailOSVoucher(trxid);
  202.           break;
  203.         default:
  204.           getTransactionDetail(trxid);
  205.           break;
  206.       }
  207.     }
  208.   };
  209.   // End Transaction Data //
  210.  
  211.   // Diamonds Calculation //
  212.   const checkGamesBonus = useSelector((state: IReducers) => state.rpgReducers.gameHasBonus);
  213.   const isShowDiamondBanner = (listGame: any[]) => {
  214.     if (listGame.length === 0) return false;
  215.     for (let i of listGame) {
  216.       if (i.has_diamond_rewards) return true;
  217.     }
  218.  
  219.     return false;
  220.   };
  221.  
  222.   React.useEffect(() => {
  223.     if (
  224.       transactionDetail &&
  225.       paymentSource !== PAYMENT_SOURCE.OFFICIAL_STORE_TOPUP &&
  226.       paymentSource !== PAYMENT_SOURCE.OFFICIAL_STORE_VOUCHER
  227.     ) {
  228.       const gameIds: number[] = transactionDetail.orders.map((item: any) => item.game_id);
  229.       if (gameIds) dispatch(rpgObject.actions.requestCheckGamesBonus({ game_ids: gameIds }));
  230.     }
  231.   }, [transactionDetail]);
  232.  
  233.   // Diamonds Calculation End //
  234.  
  235.   // Payment FAQ //
  236.   const paymentMethodFaq = useSelector((state: IReducers) => state.paymentReducers.paymentMethodFaq, shallowEqual);
  237.   React.useEffect(() => {
  238.     if (transactionDetail) {
  239.       if (transactionDetail.payment_method_name) { dispatch(paymentObject.actions.requestPaymentMethodFaq(transactionDetail.payment_instruction_text)); }
  240.     }
  241.   }, [transactionDetail]);
  242.   // End Payment FAQ //
  243.  
  244.   // Redirect to detail page based on trx condition //
  245.   const redirectLoading = useSelector(
  246.     (state: IReducers) =>
  247.       state.statusReducers.loadingState[transactionObject.names.redirectToOrderFromPaymentConfirmation],
  248.     shallowEqual,
  249.   );
  250.  
  251.   const updateTheTimeRemains = (remainingMs: number) => {
  252.     setTimeRemaining(remainingMs);
  253.   };
  254.  
  255.   React.useEffect(() => {
  256.     if (timeRemaining < 1000) setIsReloadable(true);
  257.     else setIsReloadable(false);
  258.   }, [timeRemaining]);
  259.  
  260.   const goToDetailPage = () => {
  261.     if (!connectStatus && !isReloadable) {
  262.       dispatch(
  263.         statusObject.actions.errorSetNew({
  264.           errorCode: ERR_TYPES.CONNECTION_LOSS_REFRESH_FAIL,
  265.           errorMessage: getErrorMessage(ERR_TYPES.CONNECTION_LOSS_REFRESH_FAIL),
  266.         }),
  267.       );
  268.     } else if (!connectStatus && isReloadable) {
  269.       if (paymentDetailDataFromPaymentService) {
  270.         if (paymentDetailDataFromPaymentService.transaction_type) {
  271.           dispatch(
  272.             paymentObject.actions.reqSyncPaymentOvo({
  273.               transaction_id: Number(router.query.TR_id),
  274.               transaction_type: paymentDetailDataFromPaymentService.transaction_type,
  275.             }),
  276.           );
  277.         }
  278.       }
  279.     } else if (paymentSource === PAYMENT_SOURCE.OFFICIAL_STORE_VOUCHER) {
  280.       dispatch(
  281.         navigationObject.actions.routeNavigateTo({
  282.           routeName: ROUTER_NAME.OFFICIAL_STORE_VOUCHER_ORDER_DETAIL,
  283.           params: { id: transactionDetail.id },
  284.         }),
  285.       );
  286.     } else if (paymentSource === PAYMENT_SOURCE.OFFICIAL_STORE_TOPUP) {
  287.       dispatch(
  288.         navigationObject.actions.routeNavigateTo({
  289.           routeName: ROUTER_NAME.OFFICIAL_STORE_TOPUP_ORDER_DETAIL,
  290.           params: { id: transactionDetail.id },
  291.         }),
  292.       );
  293.     } else {
  294.       dispatch(
  295.         transactionObject.actions.redirectToOrderFromPaymentConfirmation({ transaction_id: transactionDetail.id }),
  296.       );
  297.     }
  298.   };
  299.  
  300.   const goToDirectPayment = () => {
  301.     openSandbox(
  302.       transactionDetail.payment_method_name,
  303.       transactionDetail.direct_payment?.gateway,
  304.       transactionDetail.direct_payment?.payload,
  305.     );
  306.   };
  307.  
  308.   React.useEffect(() => {
  309.     if (isReloadable && ovoPaymentSync) router.reload();
  310.   }, [isReloadable, ovoPaymentSync]);
  311.  
  312.   const gotoHome = () => {
  313.     dispatch(navigationObject.actions.routeNavigateTo({ routeName: ROUTER_NAME.HOME }));
  314.   };
  315.   // End redirect to detail page based on trx condition //
  316.  
  317.   const region = useSelector((state: IReducers) => state.regionReducers.regionData);
  318.   const isGlobal: boolean = region.country_code !== REGION_CODE.INDONESIA;
  319.   const { foreignExchangeRate } = CurrencyHandler.useForeignExchangeRate();
  320.   const adminFeeText = useLanguage('biaya_admin');
  321.  
  322.   const displayTransactionData = () => {
  323.     if (transactionDetail) {
  324.       const extraCharge = transactionDetail.transaction_fees.map((item: any) => ({
  325.         name: item.info === 'PREMIUM_BUYER' ? 'Biaya Layanan Premium' : '',
  326.         nominal: item.amount,
  327.       }));
  328.  
  329.       if (transactionDetail.payment_method_name && transactionDetail.payment_method_name !== DEFAULT_PAYMENT.name) {
  330.         extraCharge.push({
  331.           name: adminFeeText,
  332.           nominal: transactionDetail.total_payment_fee,
  333.         });
  334.       }
  335.  
  336.       const paymentStatus = parseTransactionStatus(transactionDetail.status);
  337.       let paymentDueDate = customDateConstructor(transactionDetail.created_at);
  338.       switch (transactionDetail.status) {
  339.         case TRANSACTION_STATUS.PENDING:
  340.           paymentDueDate = customDateConstructor(transactionDetail.payment_due_date);
  341.           break;
  342.         case TRANSACTION_STATUS.CONFIRMED:
  343.         case TRANSACTION_STATUS.PAID:
  344.           paymentDueDate = customDateConstructor(transactionDetail.confirmed_at);
  345.           break;
  346.         default:
  347.           paymentDueDate = customDateConstructor(transactionDetail.created_at);
  348.           break;
  349.       }
  350.  
  351.       let timerCountDown;
  352.  
  353.       if (transactionDetail.payment_method_id === 47 || transactionDetail.payment_method_name === 'OVO') {
  354.         const createAt = customDateConstructor(transactionDetail.created_at);
  355.         timerCountDown = createAt.getTime() + 60000 - Date.now(); // one minute
  356.         const dueDateOvo = createAt.getTime() + 60000;
  357.         paymentDueDate = new Date(dueDateOvo);
  358.       } else {
  359.         timerCountDown = paymentDueDate.getTime() - Date.now();
  360.       }
  361.       const paymentNumber = !stringToArrayNumber(paymentMethodWithoutPaymentCode).includes(transactionDetail.payment_method_id) ?
  362.         ((transactionDetail.payment_account || transactionDetail.payment_code) || 'needLoadCode') : null;
  363.  
  364.       let discountPriceCoupon = null;
  365.  
  366.       if (transactionDetail.coupon_code != null) {
  367.         if (paymentSource === PAYMENT_SOURCE.OFFICIAL_STORE_VOUCHER) {
  368.           discountPriceCoupon = transactionDetail.orders.reduce(
  369.             (acc: any, val: any) => acc.discount_code_amount + val.discount_code_amount,
  370.           )?.discount_code_amount;
  371.         } else if (paymentSource === PAYMENT_SOURCE.OFFICIAL_STORE_TOPUP) {
  372.           discountPriceCoupon = transactionDetail.orders.reduce(
  373.             (acc: any, val: any) => acc.discount_amount + val.discount_amount,
  374.           )?.discount_amount;
  375.         } else if ((paymentSource === PAYMENT_SOURCE.CART) || (paymentSource === PAYMENT_SOURCE.QUICK_BUY)) {
  376.           discountPriceCoupon = transactionDetail.orders.reduce(
  377.             (acc: any, val: any) => acc.discount_amount + val.discount_amount,
  378.           )?.discount_amount;
  379.         }
  380.       }
  381.  
  382.       let totalPayment = 0;
  383.  
  384.       if (paymentSource === PAYMENT_SOURCE.OFFICIAL_STORE_VOUCHER) {
  385.         totalPayment = transactionDetail.total_order_value + (discountPriceCoupon ? discountPriceCoupon : 0);
  386.       } else {
  387.         // total payment exclude discount from using coin or coupon
  388.         totalPayment =
  389.           transactionDetail.total_order_value +
  390.           (transactionDetail.total_discount_amount ? transactionDetail.total_discount_amount : 0);
  391.       }
  392.       let convertedTotalPayment = 0;
  393.       transactionDetail.orders.forEach((order: any) => {
  394.         let convertedPrice = exchangeRateConversionHelper(foreignExchangeRate, region, order.price);
  395.         convertedTotalPayment += convertedPrice * order.quantity;
  396.       });
  397.       let convertedExtraCharge = 0;
  398.       extraCharge.forEach((item: any) => {
  399.         const convertedAmount = exchangeRateConversionHelper(foreignExchangeRate, region, item.nominal);
  400.         convertedExtraCharge += convertedAmount;
  401.       });
  402.       let convertedGrandTotal = convertedTotalPayment + convertedExtraCharge;
  403.  
  404.       const isCreditCard = Boolean(transactionDetail.is_credit_card);
  405.       setPaymentDetail({
  406.         differentiator: paymentStatus,
  407.         timeStart: timerCountDown,
  408.         paymentMethod: transactionDetail.payment_method_name || DEFAULT_PAYMENT.name,
  409.         paymentMethodImageURL: transactionDetail.payment_method_media_url || DEFAULT_PAYMENT.media_url,
  410.         timeDesc: timezoneFormatDayDateTime(paymentDueDate, region), // TODO
  411.         paymentNumber: paymentNumber,
  412.         withCopyButton: Boolean(transactionDetail.payment_code), // TODO
  413.         payments: transactionDetail.orders.map((order: any) => ({
  414.           name: order.product_name,
  415.           nominal: (!isGlobal ? order.price : exchangeRateConversionHelper(foreignExchangeRate, region, order.price)), // entar cek make sure lebih dari satu
  416.           qty: order.quantity,
  417.         })),
  418.         extraCharge: extraCharge, // cek lagi make sure pake premium
  419.         totalPayment: (!isGlobal ? totalPayment : convertedTotalPayment),
  420.         discount: transactionDetail.discount_percentage ? transactionDetail.discount_percentage : 0,
  421.         discountPrice: transactionDetail.discount_amounts ? transactionDetail.discount_amounts : 0,
  422.         discountPriceCoupon: discountPriceCoupon,
  423.         usedDompetkuBalance: transactionDetail.used,
  424.         grandTotal: (!isGlobal ? transactionDetail.invoice_amount : convertedGrandTotal),
  425.         paymentGuideContents: [{ title: paymentMethodFaq?.title || '', content: paymentMethodFaq?.body }],
  426.         primaryButtonClick: (isCreditCard && paymentStatus === 'wait') ? goToDirectPayment : goToDetailPage,
  427.         secondaryButtonClick: gotoHome,
  428.         userEmail: paymentSource === PAYMENT_SOURCE.OFFICIAL_STORE_VOUCHER ? transactionDetail.buyer_email : '',
  429.         userPhoneNUmber: paymentSource === PAYMENT_SOURCE.OFFICIAL_STORE_VOUCHER ? transactionDetail.buyer_phone : '',
  430.         getTransaction: getTransaction,
  431.         isCreditCard: isCreditCard,
  432.       });
  433.     }
  434.   };
  435.  
  436.   // Display Transaction Data //
  437.   React.useEffect(() => {
  438.     displayTransactionData();
  439.   }, [transactionDetail, paymentMethodFaq, isReloadable, paymentMethodWithoutPaymentCode, paymentSource, adminFeeText]);
  440.   // End Display Transaction Data //
  441.  
  442.   // Handle Back //
  443.   const paymentEntryUrl = useSelector((state: IReducers) => state.paymentReducers.paymentEntryUrl, shallowEqual);
  444.   const defaultRedirectUrl = React.useRef(routeBuilder(ROUTER_NAME.HOME, {}, region.country_code));
  445.   const backUrl: string = paymentDetail?.differentiator === 'failed' ? paymentEntryUrl : defaultRedirectUrl.current;
  446.   React.useEffect(() => {
  447.     if (cancelPayment) {
  448.       const timer = setTimeout(() => {
  449.         router.replace(backUrl || defaultRedirectUrl.current);
  450.         document.body.scrollIntoView();
  451.       }, 1000);
  452.       return () => clearTimeout(timer);
  453.     }
  454.   }, [cancelPayment]);
  455.  
  456.   React.useEffect(() => {
  457.     // Handleback browser
  458.     const handler = () => router.replace(backUrl || defaultRedirectUrl.current);
  459.     window.addEventListener('popstate', handler);
  460.     return () => {
  461.       const timeout = setTimeout(() => {
  462.         window.removeEventListener('popstate', handler);
  463.         clearTimeout(timeout);
  464.       }, 500);
  465.     };
  466.   }, []);
  467.   // End Handle Back //
  468.  
  469.   // BEGIN ITEMKU WORLD COIN
  470.   const [usedItemkuWorldCoin, setUsedItemkuWorldCoin] = React.useState<number>(0);
  471.   const [grandTotal, setGrandTotal] = React.useState<number>(0);
  472.   React.useEffect(() => {
  473.     if (transactionDetail) {
  474.       setUsedItemkuWorldCoin(transactionDetail.coupon_code != null ? 0 : transactionDetail.total_discount_amount);
  475.     }
  476.   }, [transactionDetail]);
  477.   React.useEffect(() => {
  478.     if (paymentDetail?.grandTotal) {
  479.       const grandTotalSum: number = paymentDetail?.grandTotal;
  480.       setGrandTotal(grandTotalSum);
  481.     }
  482.   }, [paymentDetail]);
  483.   // END ITEMKU WORLD COIN
  484.  
  485.   // Wallet Flow Data //
  486.   const {
  487.     walletFlows,
  488.     loadWalletFlows,
  489.   } = WalletHandler.useWalletFlow();
  490.  
  491.   const [cashback, setCashback] = React.useState<number>(0);
  492.  
  493.   React.useEffect(() => {
  494.     if (transactionDetail && transactionDetail.is_credit_card) {
  495.       loadWalletFlows({
  496.         page: 1,
  497.         per_page: 10,
  498.         transaction_groups: ['cashback_kartu_kredit'],
  499.         reference_id: transactionDetail.payment_id,
  500.       });
  501.     }
  502.   }, [transactionDetail]);
  503.  
  504.   React.useEffect(() => {
  505.     if (walletFlows && walletFlows.length > 0) {
  506.       setCashback(walletFlows[0].balance);
  507.     }
  508.   }, [walletFlows]);
  509.  
  510.   // begin loading
  511.   React.useEffect(() => {
  512.     if (redirectLoading || isRedirectIntercepted || cancelPayment) {
  513.       dispatch(
  514.         loadingComponentObject.actions.triggerLoading({
  515.           type: 'spinner-overlay',
  516.         }),
  517.       );
  518.     }
  519.   }, [isRedirectIntercepted, cancelPayment, redirectLoading]);
  520.   // end loading
  521.  
  522.   // Subscription
  523.   const subscriptionStatus = useSelector((state: IReducers) => state.persistReducers.subscriptionStatus);
  524.  
  525.   const handlePinDompetku = () => {
  526.     dispatch(navigationObject.actions.routeNavigateTo({ routeName: ROUTER_NAME.AUTODEBIT_ACTIVATION,
  527.       query: { is_premium: router.query.is_premium || 0, page_source: SUBSCRIPTION_TRANSACTION_SOURCE.UPDATE_FROM_PD_QB } }));
  528.   };
  529.  
  530.   React.useEffect(() => {
  531.     if (router.query.TR_id && subscriptionStatus) {
  532.       const trxId = parseInt(router.query.TR_id as string);
  533.       dispatch(persistObject.actions.setSubscriptionStatusSuccess({
  534.         ...subscriptionStatus,
  535.         transaction_id: trxId,
  536.         payment_source: paymentSource,
  537.       }));
  538.     }
  539.   }, [router, subscriptionStatus]);
  540.  
  541.   // Subscription End
  542.  
  543.   return (
  544.     <ConfirmationElement
  545.       differentiator={paymentDetail?.differentiator}
  546.       leftOnClick={() => setCancelPayment(true)}
  547.       paymentMethod={paymentDetail?.paymentMethod}
  548.       paymentMethodImageURL={paymentDetail?.paymentMethodImageURL}
  549.       timeDesc={paymentDetail?.timeDesc}
  550.       paymentNumber={paymentDetail?.paymentNumber}
  551.       timeStart={paymentDetail?.timeStart}
  552.       payments={paymentDetail?.payments}
  553.       extraCharge={paymentDetail?.extraCharge}
  554.       totalPayment={paymentDetail?.totalPayment ? paymentDetail.totalPayment : 0}
  555.       discount={paymentDetail?.discount}
  556.       discountPrice={paymentDetail?.discountPrice}
  557.       usedDompetkuBalance={paymentDetail?.usedDompetkuBalance}
  558.       paymentGuideContents={paymentDetail?.paymentGuideContents}
  559.       primaryButtonClick={paymentDetail?.primaryButtonClick}
  560.       secondaryButtonClick={paymentDetail?.secondaryButtonClick}
  561.       withCopyButton={paymentDetail?.withCopyButton}
  562.       isOfficialStoreVoucher={paymentSource === PAYMENT_SOURCE.OFFICIAL_STORE_VOUCHER}
  563.       userEmail={paymentDetail?.userEmail}
  564.       userPhoneNUmber={paymentDetail?.userPhoneNUmber}
  565.       discountPriceCoupon={paymentDetail?.discountPriceCoupon}
  566.       isLoading={transactionDetailLoading || (!transactionDetailLoading && !transactionDetail)}
  567.       getTransaction={paymentDetail?.getTransaction}
  568.       noteDirectPaymentOvo={noteForDirectPaymentOvo}
  569.       grandTotal={grandTotal}
  570.       usedItemkuWorldCoin={usedItemkuWorldCoin}
  571.       itemkuWorldCoinMaxDisc={maxCoinDiscount}
  572.       isConnected={connectStatus}
  573.       updateTheTimeRemains={updateTheTimeRemains}
  574.       isShowDiamondBanner={checkGamesBonus ? isShowDiamondBanner(checkGamesBonus) : false}
  575.       pinDompetkuClick={handlePinDompetku}
  576.       isSubscription={paymentSource !== PAYMENT_SOURCE.SUBSCRIPTION_BUY_NOW && subscriptionStatus != null}
  577.       isCreditCard={!!paymentDetail?.isCreditCard}
  578.       dompetkuCashback={cashback}
  579.     />
  580.   );
  581. };
  582.  
  583. export default PaymentConfirmationTemplate;
  584.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!