riwayat-pembelian\index

import TabScrollable from 'Components/molecules/tab/tab-scrollable';
import HeaderBack from 'Components/organism/header/header-back';
import { useRouter, NextRouter } from 'next/router';
import React, { useState } from 'react';
import { CardTransactionHistory } from 'Components/organism/order/card-transaction-history';
import SearchBar from 'components-update/molecules/search-bar/search-bar';
import ChipGroup from 'Components/organism/chip-group/chip-group';
import Banner from 'Components/organism/banner/banner';
import { transactionComponentHelper, TRANSACTION_STATUS } from 'Helpers/transaction-helper';
import { OrderHandler } from 'handlers/order-handler';
import { orderComponentHelper, ORDER_STATUS } from 'Helpers/order-helper';
import { ShoppingCartHandler } from 'handlers/shopping-cart-handler';
import { ProductHandler } from 'handlers/product-handler';
import { ParsedUrlQuery } from 'querystring';
import Pagination from 'Components/organism/pagination';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { IReducers } from 'Redux/reducers';
import transactionObject from 'Redux/reducers/transaction';
import Head from 'next/head';
import statusObject from 'Redux/reducers/status';
import { ERR_TYPES } from 'Helpers/error-helper';
import shoppingCartObject, { IAddShoppingCartRequestPayload } from 'Redux/reducers/shopping-cart';
import orderObject from 'Redux/reducers/order';
import CheckLogin from 'Components/templates/check-login';
import Dialog from 'Components/organism/dialog';
import navigationObject from 'Redux/reducers/navigation';
import { ROUTER_NAME } from 'Helpers/navigation-helper';
import { IProductDetail } from 'Helpers/product-helper';
import CoachMark from 'Components/templates/coachmark';
import { useLogin, usePersistentLocalStorage } from 'Helpers/hook-helper';
import TransactionTabSkeleton from 'Components/atoms/skeleton/transaction-tab-sekeleton';
import OrderTabSkeleton from 'Components/atoms/skeleton/order-tab-skeleton';
import dynamic from 'next/dynamic';
import NotificationPermission from 'components-update/organism/dialogs/notification-permission';
import { IMAGE_PRODUCT } from 'Metadata/image';
import { REGION_CODE, useLanguage } from 'Helpers/translation-helper';
import paymentObject from 'Redux/reducers/payment';
import DivHtmlContent from 'Components/atoms/div-html-content';
import { CurrencyHandler } from 'handlers/currency-handler';
import { exchangeRateConversionHelper } from 'Helpers/common-helper';
const SurveyEngagement = dynamic(() => import('components-update/organism/engagement/survey-engagement'));

interface IDialogProps {
  message: string | any;
  title: string;
  main_action_label: string;
  cancel_action_label: string;
  main_action_func: () => void;
  cancel_action_func: () => void;
}

interface ISurveyStorageData {
  [key: string]: {
    surveyName: string;
    fillCount: number;
    token: string;
  }
}

const tabIdxToOrderStatus: { [tabIdx: number]: ORDER_STATUS } = {
  1: ORDER_STATUS.WAITING_FOR_SELLER,
  2: ORDER_STATUS.WAITING_FOR_BUYER,
  3: ORDER_STATUS.DONE,
  4: ORDER_STATUS.COMPLAINED,
  5: ORDER_STATUS.REFUNDED,
};
export const orderStatusToTabIdx: { [status: number]: number } = {
  [tabIdxToOrderStatus[1]]: 1,
  [tabIdxToOrderStatus[2]]: 2,
  [tabIdxToOrderStatus[3]]: 3,
  [tabIdxToOrderStatus[4]]: 4,
  [tabIdxToOrderStatus[5]]: 5,
};
const tabIdxToTrxStatus: { [tabIdx: number]: TRANSACTION_STATUS } = {
  0: TRANSACTION_STATUS.PENDING,
  6: TRANSACTION_STATUS.CANCELED,
};
export const trxStatusToTabIdx: { [status: number]: number } = {
  [tabIdxToTrxStatus[0]]: 0,
  [tabIdxToTrxStatus[6]]: 6,
};

const TransactionHistoryContainer = (props: { router: NextRouter }) => {
  const dispatch = useDispatch();
  const router = props.router;
  const urlPage = router.query.page as string | undefined;
  const urlTab = router.query.tab as string | undefined;

  // Hooks
  const transactionsLoading = useSelector(
    (globalState: IReducers) => globalState.statusReducers.loadingState[transactionObject.names.requestTransactions],
  );
  const pendingTransactionsLoading = useSelector(
    (globalState: IReducers) => globalState.statusReducers.loadingState[transactionObject.names.requestTransactionsWithPendingOrder],
  );
  const cacheKey = useSelector((globalState: IReducers) => globalState.transactionReducers.transactionsKey);
  const transactions =
    useSelector((globalState: IReducers) => globalState.transactionReducers.transactions)[cacheKey] || [];
  const transactionsPage =
    useSelector((globalState: IReducers) => globalState.transactionReducers.transactionsPage)[cacheKey] || 1;
  const transactionsAllCount =
    useSelector((globalState: IReducers) => globalState.transactionReducers.transactionsAllCount)[cacheKey] || 0;

  const perPage = 10;
  const maxPage = Math.ceil(transactionsAllCount / perPage);

  const [isFetchStart, setIsFetchStart] = React.useState(false);
  React.useEffect(() => {
    if (urlTab !== undefined && urlTab !== null) {
      const status = tabIdxToTrxStatus[parseInt(urlTab)];
      setIsFetchStart(true);
      if (status != TRANSACTION_STATUS.PENDING) {
        dispatch(
          transactionObject.actions.requestTransactions({
            status: status,
            is_include_payment: 1,
            per_page: 10,
            page: urlPage ? parseInt(urlPage) : undefined,
          }),
        );
      } else {
        dispatch(
          orderObject.actions.requestPendingOrders({
            page: urlPage ? parseInt(urlPage) : undefined,
            loadedTimes: 1,
          }),
        );
      }
    }
  }, [urlTab, urlPage]);

  const region = useSelector((state: IReducers) => state.regionReducers.regionData);
  const isGlobal: boolean = region !== REGION_CODE.INDONESIA;
  const { foreignExchangeRate } = CurrencyHandler.useForeignExchangeRate();
  const transactionList = transactionComponentHelper(transactions, region).map((transaction) => {
    if (transaction.differentiator == 'waitingSend' || transaction.differentiator == 'done') {
      transaction.differentiator = 'verifyingPayment';
    }
    return transaction;
  });

  function handlePagination(param: 'plus' | 'minus' | 'last' | 'first') {
    const goToPage = (page: number) => {
      const query: ParsedUrlQuery = router.query;
      if (page === 1) delete query.page;
      else query.page = page.toString();
      dispatch(
        navigationObject.actions.routeNavigateReplaceTo({
          routeName: ROUTER_NAME.TRANSACTION_ORDER_HISTORY,
          query: query,
        }),
      );
    };
    param == 'plus' && transactionsPage < maxPage && goToPage(transactionsPage + 1);
    param == 'minus' && transactionsPage > 1 && goToPage(transactionsPage - 1);
    param == 'last' && transactionsPage < maxPage && goToPage(maxPage);
    param == 'first' && transactionsPage > 1 && goToPage(1);
  }

  const noBillsTranslation = useLanguage('belum_ada_tagihan_yang_masuk_nih');
  const completeGameNeedsByShoppingInItemkuTranslation = useLanguage('ayoo_lengkapi_kebutuhan_item_game_kamu_dengan_belanja_di_itemku');

  return transactionsLoading || pendingTransactionsLoading || !isFetchStart ? (
    <TransactionTabSkeleton />
  ) : (
    <div className='px-4 pt-4 space-y-4'>
      {transactionList.length === 0 ? (
        <div className='mt-4'>
          <img src={IMAGE_PRODUCT.HISTORY_EMPTY} className='mx-auto' width={200} />
          <h2 className='font-bold text-xl leading-6 text-center mt-3'>{noBillsTranslation}</h2>
          <p className='mt-2 text-lg leading-5 text-center text-zambesi'>
            {completeGameNeedsByShoppingInItemkuTranslation}
          </p>
        </div>
      ) : (
        <>
          {transactionList.map((transac) => {
            const convertedPrice = exchangeRateConversionHelper(foreignExchangeRate, region, transac.products[0].itemPrice);
            const convertedTotalPrice = convertedPrice * transac.products[0].totalItemType;
            return (
              <CardTransactionHistory
                key={transac.id}
                differentiator={transac.differentiator}
                products={transac.products}
                orderDate={transac.orderDate}
                paymentDueDate={transac.paymentDueDate || '-'}
                paymentNumber={transac.paymentNumber || undefined}
                paymentImage={transac.paymentImage || ''}
                paymentName={transac.paymentName || '-'}
                totalPrice={!isGlobal ? transac.totalPrice : convertedTotalPrice}
                onClick={() => {
                  transac.onClick();
                }}
                isCreditCard={!!transac.isCreditCard}
              />
            );
          })}
          {transactionList && transactionList.length ? (
            <div className='w-full bg-transparent py-13'>
              <Pagination currentPage={transactionsPage} handlePage={handlePagination} max={maxPage} />
            </div>
          ) : null}
        </>
      )}
    </div>
  );
};

const OrderHistoryContainer = (props: { router: NextRouter }) => {
  const dispatch = useDispatch();
  const perPage = 10;
  const router = props.router;
  const urlChipIdx = router.query.chip as string | undefined;
  const urlTab = router.query.tab as string | undefined;
  const urlPage = router.query.page as string | undefined;
  const urlQuery = router.query.query as string | undefined;

  const { loadOrders, orders, ordersPage, ordersAllCount, ordersLoading } = OrderHandler.useOrders();
  const { latestBuyAgainProduct } = ProductHandler.useLatestBuyAgainProduct();

  const chipListAll = [useLanguage('semua'), useLanguage('10_menit_kirim'), useLanguage('pengiriman_instan')];
  const chipListWaiting = chipListAll.slice(0, 2);
  const chipParamMap = {
    [chipListAll[0]]: undefined,
    [chipListAll[1]]: 'is_delivery_guarantee',
    [chipListAll[2]]: 'use_auto_delivery',
  };

  // Translation
  const priceChangeInfoTranslation = useLanguage('info_perubahan_harga');
  const [latestBuyAgainProductName, setLatestBuyAgainProductName] = useState('');
  React.useEffect(() => {
    setLatestBuyAgainProductName(latestBuyAgainProduct?.name as string);
  }, [latestBuyAgainProduct]);
  const priceChangeProductTranslation = useLanguage('telah_terjadi_perubahan_harga_pada_produk_{{name}}_tetap_ingin_lanjutkan_pembelian', { name: latestBuyAgainProductName });
  const cancelTranslation = useLanguage('batalkan');
  const continueTranslation = useLanguage('lanjutkan');

  // All Payment Method Media Image
  const paymentMethodMediaImage = useSelector((state: IReducers) => state.persistReducers.paymentMethodMediaImage, shallowEqual);

  React.useEffect(() => {
    if (paymentMethodMediaImage == null) {
      dispatch(paymentObject.actions.reqPaymentMethodMediaImage());
    }
  }, [paymentMethodMediaImage]);

  // Important values
  const chipList = urlTab ? (parseInt(urlTab) === 1 ? chipListWaiting : chipListAll) : [];
  const maxPage = Math.ceil(ordersAllCount / perPage);

  const [searchValue, setSearchValue] = React.useState('');
  const [isFetchStart, setIsFetchStart] = React.useState(false);
  React.useEffect(() => {
    if (urlTab) {
      if (urlQuery) setSearchValue(urlQuery);
      const param: any = {
        statuses:
          tabIdxToOrderStatus[parseInt(urlTab)] === ORDER_STATUS.WAITING_FOR_SELLER
            ? [ORDER_STATUS.WAITING_FOR_SELLER, ORDER_STATUS.WAITING_FOR_CONFIRMATION_DELIVERY_GUARANTEE]
            : [tabIdxToOrderStatus[parseInt(urlTab)]],
        keyword: urlQuery,
        per_page: perPage,
      };
      let guaranteeParamName;
      if (urlChipIdx) guaranteeParamName = chipParamMap[chipList[parseInt(urlChipIdx)]];
      if (guaranteeParamName) {
        param[guaranteeParamName] = 1;
      }
      if (urlPage) param.page = parseInt(urlPage);
      loadOrders(param);
      setIsFetchStart(true);
    }
  }, [urlTab, urlChipIdx, urlPage, urlQuery]);

  // Buy Again Dialog
  const [showDialog, setShowDialog] = React.useState(false);
  const [dialogStatusCode, setDialogStatusCode] = React.useState<string | undefined>(undefined);
  const [dialogProperty, setDialogProperty] = React.useState<IDialogProps>({
    message: '',
    title: '',
    main_action_label: '',
    cancel_action_label: '',
    main_action_func: () => {},
    cancel_action_func: () => setShowDialog(false),
  });
  React.useEffect(() => {
    if (dialogStatusCode === ERR_TYPES.PRICE_ALREADY_CHANGED && latestBuyAgainProduct) {
      setDialogProperty({
        ...dialogProperty,
        title: priceChangeInfoTranslation,
        message: (
          <p>
            {priceChangeProductTranslation}
          </p>
        ),
        cancel_action_label: cancelTranslation,
        main_action_label: continueTranslation,
        main_action_func: () => {
          const addCartParam: IAddShoppingCartRequestPayload = {
            product_id: latestBuyAgainProduct.id,
            price: latestBuyAgainProduct.price,
            quantity: latestBuyAgainProduct.quantity,
            game_id: latestBuyAgainProduct.game_id,
          };
          if (latestBuyAgainProduct.note) addCartParam.note = latestBuyAgainProduct.note;
          if (latestBuyAgainProduct.required_information) { addCartParam.required_information = latestBuyAgainProduct.required_information; }
          dispatch(shoppingCartObject.actions.requestAddToShoppingCart(addCartParam));
          setShowDialog(false);
        },
      });
    }
  }, [cancelTranslation, continueTranslation, dialogProperty, dialogStatusCode, dispatch, latestBuyAgainProduct, priceChangeInfoTranslation, priceChangeProductTranslation]);

  function handleSearchEnter(e: any) {
    const searchQuery: string = e.target.value;
    const routerQuery = router.query;
    if (searchQuery.length === 0) {
      delete routerQuery.query;
    } else {
      routerQuery.query = searchQuery.toLocaleLowerCase();
    }
    dispatch(
      navigationObject.actions.routeNavigateReplaceTo({
        routeName: ROUTER_NAME.TRANSACTION_ORDER_HISTORY,
        query: routerQuery,
      }),
    );
  }

  function handleSearchChange(e: any) {
    setSearchValue(e);
    if (e.length === 0) {
      const routerQuery = router.query;
      delete routerQuery.query;
      dispatch(
        navigationObject.actions.routeNavigateReplaceTo({
          routeName: ROUTER_NAME.TRANSACTION_ORDER_HISTORY,
          query: routerQuery,
        }),
      );
    }
  }

  function handleNavigationChip(e: any) {
    if (urlTab) {
      document.body.scrollIntoView({ behavior: 'smooth' });
      const query: ParsedUrlQuery = {
        tab: router.query.tab,
      };
      const chipIdx = chipList.indexOf(e);
      if (chipIdx !== 0) query.chip = chipIdx.toString();
      else delete query.chip;
      dispatch(
        navigationObject.actions.routeNavigateReplaceTo({
          routeName: ROUTER_NAME.TRANSACTION_ORDER_HISTORY,
          query: query,
        }),
      );
    }
  }

  function handleConfirm(orderId: number) {
    dispatch(
      navigationObject.actions.routeNavigateTo({ routeName: ROUTER_NAME.ORDER_TESTIMONY, params: { id: orderId } }),
    );
  }

  function handleBuyAgainClick(order: any) {
    const callback = (
      isSuccess: boolean,
      data: { statusCode: string; data: IProductDetail; required_information: string; note: string },
    ) => {
      if (!isSuccess) {
        setDialogStatusCode(data.statusCode);
        setShowDialog(true);
      }
    };
    const buyAgainParam: IAddShoppingCartRequestPayload = {
      product_id: order.productId,
      price: order.productPrice,
      game_id: order.gameId,
    };
    if (order.note) buyAgainParam.note = order.note;
    if (order.productRequiredInformation) buyAgainParam.required_information = order.productRequiredInformation;
    dispatch(shoppingCartObject.actions.requestBuyAgain(buyAgainParam, callback));
  }

  function handlePagination(param: 'plus' | 'minus' | 'last' | 'first') {
    if (urlTab) {
      const goToPage = (page: number) => {
        const query: ParsedUrlQuery = router.query;
        if (page === 1) delete query.page;
        else query.page = page.toString();
        dispatch(
          navigationObject.actions.routeNavigateReplaceTo({
            routeName: ROUTER_NAME.TRANSACTION_ORDER_HISTORY,
            query: query,
          }),
        );
      };
      param == 'plus' && ordersPage < maxPage && goToPage(ordersPage + 1);
      param == 'minus' && ordersPage > 1 && goToPage(ordersPage - 1);
      param == 'last' && ordersPage < maxPage && goToPage(maxPage);
      param == 'first' && ordersPage > 1 && goToPage(1);
    }
  }

  const status = urlTab ? tabIdxToOrderStatus[parseInt(urlTab)] : ORDER_STATUS.WAITING_FOR_PAYMENT;
  const region = useSelector((state: IReducers) => state.regionReducers.regionData);
  const isGlobal: boolean = region !== REGION_CODE.INDONESIA;
  const { foreignExchangeRate } = CurrencyHandler.useForeignExchangeRate();
  const orderList = orderComponentHelper(orders, region);

  // Order Info Coachmark //
  let coachmarkOrder: typeof orderList[number] | undefined;
  const [onboardedOrderInfo, setOnboardedOrderInfo] = usePersistentLocalStorage('onboardedOrderInfo', false);
  function onCloseCoachmark() {
    setOnboardedOrderInfo(true);
  }
  if (!onboardedOrderInfo) {
    for (const order of orderList) {
      if (order?.hasOrderInfo && order?.differentiator === 'sended') {
        coachmarkOrder = order;
        break;
      }
    }
  }
  // End Order Info Coachmark //

  const searchProductNameTranslation = useLanguage('cari_nama_produk');
  const orderDoesNotExistTranslation = useLanguage('hm_pesanan_yang_kamu_cari_tidak_ada');
  const noOrderProcessedTranslation = useLanguage('belum_ada_pesanan_yang_diproses');
  const resetOrChangeAnotherKeywordTranslation = useLanguage('coba_reset_atau_ganti_kata_kunci_lain_ya');
  const viewOrderDetailTranslation = useLanguage('lihat_rincian_pesanan_kamu_di_sini');
  const viewVoucherCodeOrAccountDataTranslation = useLanguage('buka_untuk_melihat_kode_voucher_atau_data_akun');
  const coachmarkMainButtonText = useLanguage('mengerti');

  const watingEngagementTexts = [
    <>
      <DivHtmlContent data={useLanguage('produk_top_up_voucher_currency_item_skin_akun_pulsa_dikirim_dalam_12_48_jam_produk_item_gift_butuh_berteman_dalam_game_dikirim_maksimal_10_hari')} draggable={false} />
    </>,
    <>
      <DivHtmlContent data={useLanguage('produk_bertanda_khusus_10_menit_kirim_dikirim_dalam_10_menit_atau_kamu_bisa_langsung_mengajukan_pengembalian_dana')} draggable={false} />
    </>,
  ];
  const sendedEngagementText = (
    <>
      {useLanguage('mulai_24_juni_2021_informasi_produk_dalam_bentuk_data_seperti_voucher_dan_akun_dituliskan_oleh_penjual_di_dalam_rincian_pesanan')}
    </>
  );
  return !isFetchStart || ordersLoading ? (
    <OrderTabSkeleton />
  ) : (
    <div>
      <div className='px-4 pt-4'>
        <SearchBar
          placeholder={searchProductNameTranslation}
          onBlur={handleSearchEnter}
          onEnter={handleSearchEnter}
          value={searchValue}
          onChange={handleSearchChange}
        />
        <ChipGroup
          className='mt-3'
          chips={chipList}
          handleNavigationChip={handleNavigationChip}
          activeChip={urlChipIdx ? chipList[parseInt(urlChipIdx)] : chipList[0]}
        />
        {status === ORDER_STATUS.WAITING_FOR_SELLER ? (
          <div className='mt-3'>
            <Banner
              border
              button={false}
              icon={false}
              message={urlChipIdx ? watingEngagementTexts[parseInt(urlChipIdx)] : watingEngagementTexts[0]}
            />
          </div>
        ) : status === ORDER_STATUS.WAITING_FOR_BUYER ? (
          <div className='mt-3'>
            <Banner border button={false} icon={false} message={sendedEngagementText} />
          </div>
        ) : null}
        {orderList.length == 0 ? (
          <div className='mt-4'>
            <img src={IMAGE_PRODUCT.HISTORY_EMPTY} className='mx-auto' width={250} />
            <h2 className='font-bold text-xl leading-6 text-center mt-3'>
              {searchValue !== '' ? orderDoesNotExistTranslation : noOrderProcessedTranslation}
            </h2>
            {searchValue !== '' ? (
              <p className='text-lg leading-5 text-zambesi text-center'>{resetOrChangeAnotherKeywordTranslation}</p>
            ) : null}
          </div>
        ) : (
          <div className='mt-6 space-y-4'>
            {orderList.map((order, i: number) => {
              const convertedPrice = exchangeRateConversionHelper(foreignExchangeRate, region, order.productPrice);
              const convertedTotalPrice = convertedPrice * order.products[0].totalItemType;
              return (
                <CardTransactionHistory
                  key={i}
                  dot={order.hasOrderInfo}
                  doneClick={() => handleConfirm(order.id)}
                  buyAgainClick={() => handleBuyAgainClick(order)}
                  differentiator={order.differentiator}
                  products={order.products}
                  paymentImage={paymentMethodMediaImage?.[order.paymentName] || ''}
                  paymentName={order.paymentName}
                  orderDate={order.orderDate}
                  totalPrice={!isGlobal ? order.totalPrice : convertedTotalPrice}
                  onClick={() => {
                    dispatch(shoppingCartObject.actions.clearShoppingCartStatus());
                    dispatch(statusObject.actions.errorClear());
                    dispatch(orderObject.actions.clearSelectedOrder());
                    dispatch(
                      navigationObject.actions.routeNavigateTo({
                        routeName: ROUTER_NAME.ORDER_DETAIL,
                        params: { id: order.id },
                      }),
                    );
                  }}
                  isSubscription={order.isFromSubscription}
                />
              );
            })}
          </div>
        )}
      </div>
      {orderList && orderList.length ? (
        <div className='w-full bg-transparent py-13'>
          <Pagination currentPage={ordersPage} handlePage={handlePagination} max={maxPage} />
        </div>
      ) : null}
      <Dialog
        title={dialogProperty.title}
        description={dialogProperty.message}
        isActive={showDialog}
        mainActionTitle={dialogProperty.main_action_label}
        cancelActionTitle={dialogProperty.cancel_action_label}
        cancelAction={dialogProperty.cancel_action_func}
        mainAction={dialogProperty.main_action_func}
        getChildrenActiveState={(e: boolean) => setShowDialog(e)}
      />
      <CoachMark
        differentiator={coachmarkOrder?.differentiator}
        dot={coachmarkOrder?.hasOrderInfo}
        orderDate={coachmarkOrder?.orderDate}
        products={coachmarkOrder?.products}
        totalPrice={coachmarkOrder?.totalPrice}
        title={viewOrderDetailTranslation}
        description={viewVoucherCodeOrAccountDataTranslation}
        isActive={!!coachmarkOrder}
        mainAction={onCloseCoachmark}
        mainActionTitle={coachmarkMainButtonText}
      />
    </div>
  );
};

export const OrderHistory = () => {
  const dispatch = useDispatch();
  const router = useRouter();
  const isLoggedIn = useLogin();
  const { addToShoppingCartSuccess } = ShoppingCartHandler.useAddShoppingCart();
  const { latestBuyAgainProduct } = ProductHandler.useLatestBuyAgainProduct();
  const urlTabIndex = router.query.tab as string | '0';
  const tabParamExist = !!router.asPath.match(new RegExp('[&?]tab=(.*)(&|$)'));

  const tabNames = [
    useLanguage('menunggu_pembayaran'),
    useLanguage('menunggu_dikirim'),
    useLanguage('sudah_terkirim'),
    useLanguage('selesai'),
    useLanguage('pengembalian_dana'),
    useLanguage('dana_dikembalikan'),
    useLanguage('transaksi_dibatalkan'),
  ];

  const [latestBuyAgainProductQuantity, setLatestBuyAgainProductQuantity] = useState<number>();
  const [latestBuyAgainProductName, setLatestBuyAgainProductName] = useState<string>('');
  React.useEffect(() => {
    setLatestBuyAgainProductQuantity(latestBuyAgainProduct?.quantity as number);
    setLatestBuyAgainProductName(latestBuyAgainProduct?.name as string);
  }, [latestBuyAgainProduct]);
  const productWithQuantityAddedToCartTranslation = useLanguage(
    '{{count}}_produk_{{name}}_berhasil_dimasukkan_ke_troli',
    { count: latestBuyAgainProductQuantity as number, name: latestBuyAgainProductName }
  );
  const productAddedToCartTranslation = useLanguage('produk_{{name}}_berhasil_dimasukkan_ke_troli', { name: latestBuyAgainProductName });

  // Reset selectOrder
  React.useEffect(() => {
    dispatch(orderObject.actions.clearSelectedOrder());
    dispatch(orderObject.actions.clearOrderInfos());
  }, []);
  // End Reset selectOrder

  // Intercept browser back button //
  React.useEffect(() => {
    const onBackButtonEvent = () => {
      dispatch(navigationObject.actions.routeInterceptReplaceTo({ routeName: ROUTER_NAME.AKUN }));
    };
    window.addEventListener('popstate', onBackButtonEvent);
    return () => {
      const timeout = setTimeout(() => {
        window.removeEventListener('popstate', onBackButtonEvent);
        clearTimeout(timeout);
      }, 500);
    };
  }, [router]);
  // End intercept browser back button //

  React.useEffect(() => {
    if (!tabParamExist) {
      dispatch(
        navigationObject.actions.routeNavigateReplaceTo({
          routeName: ROUTER_NAME.TRANSACTION_ORDER_HISTORY,
          query: { tab: 0 },
        }),
      );
    }
  }, []);

  React.useEffect(() => {
    if (addToShoppingCartSuccess) {
      dispatch(
        statusObject.actions.errorSetNew({
          errorCode: ERR_TYPES.ORDER_ADD_TO_CART_SUCCESS,
          errorMessage: latestBuyAgainProduct?.quantity ? productWithQuantityAddedToCartTranslation : productAddedToCartTranslation,
        }),
      );
    }
  }, [addToShoppingCartSuccess]);

  function handleNavigationTab(tab: any) {
    document.body.scrollIntoView({ behavior: 'smooth' });
    dispatch(
      navigationObject.actions.routeNavigateReplaceTo(
        { routeName: ROUTER_NAME.TRANSACTION_ORDER_HISTORY, query: { tab: tabNames.indexOf(tab) } },
        undefined,
        { shallow: true },
      ),
    );
  }

  // Tab logic
  const activeTabName = urlTabIndex ? tabNames[parseInt(urlTabIndex)] || '' : '';
  React.useEffect(() => {
    if (tabParamExist) {
      if (urlTabIndex !== undefined) {
        if (document.getElementById('tab')) {
          const element = document.getElementsByClassName('tab');
          if (element && urlTabIndex) {
            element[parseInt(urlTabIndex)]?.scrollIntoView({
              behavior: 'smooth',
              inline: 'start',
            });
          }
        }
      }
    }
  }, [urlTabIndex]);

  // Component selection
  let tabView = null;
  if (activeTabName === tabNames[0] || activeTabName === tabNames[6]) { tabView = <TransactionHistoryContainer router={router} />; } else if (
    activeTabName === tabNames[1] ||
    activeTabName === tabNames[2] ||
    activeTabName === tabNames[3] ||
    activeTabName === tabNames[4] ||
    activeTabName === tabNames[5]
  ) { tabView = <OrderHistoryContainer router={router} />; }

  // BEGIN SELLER ACTIVITY SURVEY ENGAGEMENT
  const surveyName: string = '';
  const surveyUrl: string = '';
  const loginToken = useSelector((state: IReducers) => state.loginReducers.token);
  const loginId = useSelector((state: IReducers) => state.loginReducers.userData.id);
  const defaultSurveyCardStyle = { transition: 'transform 1s', transform: 'translate(0px, 128px)' };

  const [isSurveyEngagementShown, setIsSurveyEngagementShown] = React.useState<boolean>(false);
  const [surveyCardStyle, setSurveyCardStyle] = React.useState(defaultSurveyCardStyle);
  const [surveyActivity, setSurveyActivity] = usePersistentLocalStorage<ISurveyStorageData>('surveyActivity', {});

  React.useEffect(() => {
    if (isLoggedIn && surveyName && activeTabName === tabNames[1]) {
      const userId = loginId ? loginId.toString() : '0';
      let currentSurveyActivity = { ...surveyActivity };

      if (currentSurveyActivity[userId] === undefined || currentSurveyActivity[userId]?.surveyName !== surveyName) {
        currentSurveyActivity[userId] = {
          surveyName: surveyName,
          fillCount: 0,
          token: '',
        };

        setSurveyActivity(currentSurveyActivity);
        setIsSurveyEngagementShown(true);
      } else {
        const surveyFillCount = surveyActivity[userId].fillCount;
        const surveySavedToken = surveyActivity[userId].token;

        if (surveyFillCount < 2 && surveySavedToken !== loginToken) {
          setIsSurveyEngagementShown(true);
        }
      }
    } else {
      setIsSurveyEngagementShown(false);
    }
  }, [activeTabName]);

  React.useEffect(() => {
    let transformVal = '';
    if (activeTabName === tabNames[1]) {
      transformVal = 'translate(0px, -16px)';
    } else {
      transformVal = 'translate(0px, 128px)';
    }

    setTimeout(() => {
      setSurveyCardStyle({ transition: 'transform 1s', transform: transformVal });
    }, 1000);
  }, [isSurveyEngagementShown, activeTabName]);

  const handleAbort = () => {
    const userId = loginId ? loginId.toString() : '0';
    const saveToken = loginToken ? loginToken.toString() : '';

    let surveyActivityStore = { ...surveyActivity };
    surveyActivityStore[userId].token = saveToken;

    setSurveyActivity(surveyActivityStore);
    setIsSurveyEngagementShown(false);
  };

  const handleContinue = () => {
    window.open(surveyUrl, '_blank');

    const userId = loginId ? loginId.toString() : '0';
    const saveToken = loginToken ? loginToken.toString() : '';
    const fillCount = surveyActivity[userId].fillCount + 1;

    let surveyActivityStore = { ...surveyActivity };
    surveyActivityStore[userId].token = saveToken;
    surveyActivityStore[userId].fillCount = fillCount;

    setSurveyActivity(surveyActivityStore);
    setIsSurveyEngagementShown(false);
  };
  // END SELLER ACTIVITY SURVEY ENGAGEMENT

  return (
    <CheckLogin requireLogin={true}>
      <>
        <Head>
          <title>Riwayat Pembelian | itemku</title>
        </Head>
        <NotificationPermission withScroll={false} page={'TH-OH'} />
        <div>
          {/* {addToShoppingCartloading ? <p>Loading Indicator...</p> : null} TODO: Add add to card loading indicator here */}
          <div className='sticky top-0 z-10'>
            <HeaderBack
              title={useLanguage('riwayat_pembelian')}
              shadow={false}
              leftOnClick={() => dispatch(navigationObject.actions.routeNavigateTo({ routeName: ROUTER_NAME.AKUN }))}
            />
            <TabScrollable tabs={tabNames} activeTab={activeTabName} handleNavigationTab={handleNavigationTab} />
          </div>
          <div>{tabView}</div>
        </div>
        {/* Show survey engagement only if active tab is `Menunggu Dikirim`*/}
        <SurveyEngagement
          isShown={isSurveyEngagementShown}
          title={useLanguage('undangan_spesial_untuk_kamu')}
          description={
            <>
              {
                useLanguage('yuk_bantu_pengembangan_itemku_dengan_isi_survey_pengguna')
              }
              <br />
              {
                useLanguage('ada_hadiah_rp_50_000_loh')
              }
            </>
          }
          onAbort={handleAbort}
          onContinue={handleContinue}
          style={surveyCardStyle}
        />
      </>
    </CheckLogin>
  );
};

export default OrderHistory;