shoptime/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx

import React, { useCallback, useEffect, useRef, useState } from "react";

import { useDispatch, useSelector } from "react-redux";

import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";

import {
  getCheckoutTotalAmtDummy,
  getMyInfoCheckoutInfo,
  resetCheckoutData,
} from "../../actions/checkoutActions";
import {
  changeAppStatus,
  setHidePopup,
  setShowPopup,
} from "../../actions/commonActions";
import { getShoptimeTerms } from "../../actions/empActions";
import { popPanel } from "../../actions/panelActions";
import TBody from "../../components/TBody/TBody";
import TButtonScroller from "../../components/TButtonScroller/TButtonScroller";
import TButtonTab from "../../components/TButtonTab/TButtonTab";
import TFullPopup from "../../components/TFullPopup/TFullPopup";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import TPopUp from "../../components/TPopUp/TPopUp";
import useScrollTo from "../../hooks/useScrollTo";
import * as Config from "../../utils/Config";
import { $L, scaleH, scaleW } from "../../utils/helperMethods";
import css from "./CheckOutPanel.module.less";
import PinCodeInput from "./components/PinCodeInput";
import FixedSideBar from "./container/FixedSideBar";
import InformationContainer from "./container/InformationContainer";
import OrderItemsSideBar from "./container/OrderItemsSideBar";
import SummaryContainer from "./container/SummaryCotainer";

export default function CheckOutPanel() {
  const dispatch = useDispatch();
  const panels = useSelector((state) => state.panels.panels);
  const { userNumber } = useSelector(
    (state) => state.common.appStatus.loginUserData
  );
  const checkoutPanelInfo = panels.find(
    (panel) => panel.name === "checkoutpanel"
  )?.panelInfo;
  const productData = useSelector(
    (state) => state.checkout?.checkoutData.productList
  );
  const infoForCheckoutData = useSelector(
    (state) => state.checkout?.infoForCheckoutData
  );
  const selectedCoupons = useSelector(
    (state) => state.checkout.selectedCoupons
  );
  const empTermsData = useSelector((state) => state.emp.empTermsData.terms);
  const { popupVisible, activePopup } = useSelector(
    (state) => state.common.popup
  );

  const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
  const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
  const [placeOrderPopup, setPlaceOrderPopup] = useState(false);
  const [loading, setLoading] = useState(true);
  const [currentTerms, setCurrentTerms] = useState(null);
  const [tabList, setTabList] = useState([]);
  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
  const [resetScroll, setResetScroll] = useState(false);

  const isMounted = useRef(true);

  const { getScrollTo: getScrollToBody, scrollTop: scrollTopBody } =
    useScrollTo();

  const spotJob = useRef(new Job((func) => func(), 0));

  useEffect(() => {
    isMounted.current = true;

    dispatch(
      changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
    );

    if (!loading) {
      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
    }

    return () => {
      isMounted.current = false;
    };
  }, [loading, dispatch]);

  useEffect(() => {
    dispatch(getShoptimeTerms());

    dispatch(
      getMyInfoCheckoutInfo({
        mbrNo: userNumber,
        dirPurcSelYn: "Y",
        cartList: [
          {
            patnrId: checkoutPanelInfo.cartList.patnrId,
            prdtId: checkoutPanelInfo.cartList.prdtId,
            prodOptCdCval: checkoutPanelInfo.cartList.prodOptCdCval,
            prodQty: checkoutPanelInfo.cartList.prodQty,
          },
        ],
      })
    );
  }, [dispatch, userNumber, checkoutPanelInfo]);

  useEffect(() => {
    if (infoForCheckoutData && productData) {
      setLoading(false);

      const orderProductCoupontUse = Object.keys(selectedCoupons).map(
        (productId) => {
          const {
            cpnAplyMaxDcAmt,
            cpnAplyMinProdAmt,
            cpnAplyMinPurcAmt,
            cpnCdCval,
            cpnCdSeq,
            cpnDctrt,
            cpnSno,
            dcAmt,
            mbrNo,
            prdtId,
            shptmCpnTpCd,
            shptmCpnTrgtCd,
            shptmDcTpCd,
          } = selectedCoupons[productId];

          return {
            cpnAplyMaxDcAmt,
            cpnAplyMinProdAmt,
            cpnAplyMinPurcAmt,
            cpnCdCval,
            cpnCdSeq,
            cpnDctrt,
            cpnSno,
            dcAmt,
            mbrNo,
            prdtId,
            shptmCpnTpCd,
            shptmCpnTrgtCd,
            shptmDcTpCd,
          };
        }
      );

      dispatch(
        getCheckoutTotalAmtDummy({
          mbrNo: userNumber,
          dirPurcSelYn: "Y",
          bilAddrSno: infoForCheckoutData?.bilAddrSno,
          dlvrAddrSno: infoForCheckoutData?.dlvrAddrSno,
          orderProductCoupontUse,
        })
      );
    }
  }, [dispatch, infoForCheckoutData, productData, userNumber, selectedCoupons]);

  useEffect(() => {
    const newTabList = [];

    if (empTermsData) {
      empTermsData.forEach((term) => {
        newTabList.push(term.termsTypeName);
      });

      setTabList(newTabList);
    }
  }, [empTermsData]);

  useEffect(() => {
    return () => {
      dispatch(resetCheckoutData());
    };
  }, [dispatch]);

  useEffect(() => {
    spotJob.current.start(() => {
      Spotlight.focus("spotlightId_placeOrderBtn");
    });
    return () => {
      spotJob.current.stop();
    };
  }, []);

  const onBackClick = useCallback(() => {
    dispatch(popPanel());
  }, [dispatch]);

  const toggleOrderSideBar = useCallback(() => {
    setOrderSideBarOpen((prev) => !prev);
  }, []);

  const toggleOfferSideBar = useCallback(() => {
    setOfferSideBarOpen((prev) => !prev);
  }, []);

  const onClosePopup = useCallback(() => {
    setPlaceOrderPopup(false);
  }, []);

  const onCloseTermsPopup = useCallback(() => {
    dispatch(setHidePopup());
  }, [dispatch]);

  const handleTermsClick = useCallback(
    (termsID) => {
      if (empTermsData) {
        const selectedTerms = empTermsData.find(
          (term) => term.termsID === termsID
        );

        setCurrentTerms(selectedTerms);
        dispatch(setShowPopup(Config.ACTIVE_POPUP.termsPopup));

        const selectedIndex = empTermsData.findIndex(
          (term) => term.termsID === termsID
        );

        setSelectedTabIndex(selectedIndex);
        setResetScroll(true);
      }
    },
    [empTermsData, dispatch]
  );

  const handleTabClick = useCallback(({ index }) => {
    setSelectedTabIndex(index);
    setResetScroll(true);
  }, []);

  useEffect(() => {
    if (empTermsData && empTermsData[selectedTabIndex]) {
      setCurrentTerms(empTermsData[selectedTabIndex]);
      setResetScroll(true);
    }
  }, [selectedTabIndex, empTermsData]);

  useEffect(() => {
    if (resetScroll) {
      setResetScroll(false);
    }
  }, [resetScroll]);

  useEffect(() => {
    Spotlight.focus();
  }, [popupVisible]);

  return (
    <>
      <TPanel
        isTabActivated={false}
        spotlightDisabled={orderSideBarOpen || offerSideBarOpen}
      >
        <TBody className={css.tbody} cbScrollTo={getScrollToBody}>
          <THeader
            className={css.theader}
            title="CHECKOUT"
            onBackButton
            onClick={onBackClick}
          />
          <div className={css.Wrap}>
            <SummaryContainer
              setPlaceOrderPopup={setPlaceOrderPopup}
              empTermsData={empTermsData}
              handleTermsClick={handleTermsClick}
            />
            <InformationContainer
              toggleOrderSideBar={toggleOrderSideBar}
              toggleOfferSideBar={toggleOfferSideBar}
              scrollTopBody={scrollTopBody}
            />
          </div>
        </TBody>
      </TPanel>

      {orderSideBarOpen && (
        <OrderItemsSideBar closeSideBar={toggleOrderSideBar} />
      )}
      {offerSideBarOpen && <FixedSideBar closeSideBar={toggleOfferSideBar} />}

      {activePopup === Config.ACTIVE_POPUP.termsPopup && (
        <TPopUp
          kind="introTermsPopup"
          open={popupVisible}
          onClose={onCloseTermsPopup}
          hasButton
          button1Text={$L("OK")}
        >
          {currentTerms && (
            <div className={css.termsConts}>
              <TButtonTab
                className={css.tab}
                selectedIndex={selectedTabIndex}
                onItemClick={handleTabClick}
                contents={tabList}
                role="button"
              />
              <TButtonScroller
                boxHeight={scaleH(300)}
                width={scaleW(980)}
                className={css.termsDescription}
                resetScrollPosition={resetScroll}
                forcedFocus={false}
              >
                <div
                  className={css.termsDesc}
                  dangerouslySetInnerHTML={{
                    __html: currentTerms && currentTerms.termContent,
                  }}
                ></div>
              </TButtonScroller>
            </div>
          )}
        </TPopUp>
      )}

      <TFullPopup
        open={placeOrderPopup}
        className={css.pinCodePopup}
        onClose={onClosePopup}
        noAnimation={true}
      >
        <PinCodeInput setPlaceOrderPopup={setPlaceOrderPopup} />
      </TFullPopup>
    </>
  );
}