[checkoutpanel] 배송지, 청구지 주소 변경 시 실시간 세금 계산, loadingpanel 추가

2024-05-21 10:05:59 +09:00
parent d433017273
commit 126ab252cd
9 changed files with 112 additions and 118 deletions
--- a/com.twin.app.shoptime/src/actions/checkoutActions.js
+++ b/com.twin.app.shoptime/src/actions/checkoutActions.js
@@ -1,6 +1,7 @@
 import { URLS } from '../api/apiConfig';
 import { TAxios } from '../api/TAxios';
 import { types } from './actionTypes';
+import { changeAppStatus } from './commonActions';

 // 회원 체크아웃 정보 조회 IF-LGSP-345
 export const getMyInfoCheckoutInfo = (props) => (dispatch, getState) => {
@@ -85,12 +86,16 @@ export const getTaxInfos = (props) => (dispatch, getState) => {
      type: types.GET_TAX_INFOS,
      payload: response.data.data,
    });
+
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };

  const onFail = (error) => {
    console.error("getTaxInfos onFail: ", error);
  };

+  dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
+
  TAxios(
    dispatch,
    getState,
--- a/com.twin.app.shoptime/src/lunaSend/account.js
+++ b/com.twin.app.shoptime/src/lunaSend/account.js
@@ -1,6 +1,6 @@
-import appinfo from "../../webos-meta/appinfo.json";
-import * as Config from "../utils/Config";
-import LS2Request from "./LS2Request";
+import appinfo from '../../webos-meta/appinfo.json';
+import * as Config from '../utils/Config';
+import LS2Request from './LS2Request';

 export const getSystemInfo = (
  parameters,
@@ -125,7 +125,10 @@ export const launchMembershipAppNew = (
        subscribe: false,
        parameters: {
          category: "MembershipApp",
-          params: { query: "", appReturn: { appId: window.PalmSystem.identifier ?? appinfo.id } },
+          params: {
+            query: "",
+            appReturn: { appId: window.PalmSystem.identifier ?? appinfo.id },
+          },
        },
        onSuccess,
        onFailure,
@@ -150,7 +153,10 @@ export const launchMembershipApp = (
        subscribe: false,
        parameters: {
          id: "com.webos.app.membership",
-          params: { query: "", appReturn: { appId: window.PalmSystem.identifier ?? appinfo.id } },
+          params: {
+            query: "",
+            appReturn: { appId: window.PalmSystem.identifier ?? appinfo.id },
+          },
        },
        onSuccess,
        onFailure,
--- a/com.twin.app.shoptime/src/lunaSend/common.js
+++ b/com.twin.app.shoptime/src/lunaSend/common.js
@@ -1,4 +1,4 @@
-import LS2Request from "./LS2Request";
+import LS2Request from './LS2Request';

 export const getConnectionStatus = ({ onSuccess, onFailure, onComplete }) => {
  if (process.env.REACT_APP_MODE === "DEBUG") {
--- a/com.twin.app.shoptime/src/reducers/checkoutReducer.js
+++ b/com.twin.app.shoptime/src/reducers/checkoutReducer.js
@@ -4,6 +4,7 @@ const initialState = {
  checkoutData: {},
  taxInfosData: {},
  infoForCheckoutData: {},
+  taxAndSHData: {},
 };

 export const checkoutReducer = (state = initialState, action) => {
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
@@ -13,6 +13,7 @@ import {
  getMyInfoCheckoutInfo,
  getTaxInfos,
 } from '../../actions/checkoutActions';
+import { changeAppStatus } from '../../actions/commonActions';
 import { popPanel } from '../../actions/panelActions';
 import TBody from '../../components/TBody/TBody';
 import THeader from '../../components/THeader/THeader';
@@ -42,7 +43,6 @@ export default function CheckOutPanel() {
  const infoForCheckoutData = useSelector(
    (state) => state.checkout?.infoForCheckoutData
  );
-
  const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
  const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);

@@ -70,23 +70,23 @@ export default function CheckOutPanel() {
    dispatch(
      getTaxInfos({
        mbrNo: userInfo,
-        bilAddrSno: infoForCheckoutData?.bilAddrSno || 206,
-        dlvrAddrSno: infoForCheckoutData?.dlvrAddrSno || 3003,
+        bilAddrSno: infoForCheckoutData?.bilAddrSno,
+        dlvrAddrSno: infoForCheckoutData?.dlvrAddrSno,
        reqCheckoutTaxInfoItemList: [
          {
            cpnSno: null,
            dcAmt: null,
-            frgtTaxCd: productData?.[0].frgtTaxCd || "FR020900",
-            patnrId: productData?.[0].patnrId || "11",
-            prdtId: productData?.[0].prdtId || "7127927",
-            prodPrc: productData?.[0].price3 || 9.99,
-            prodQty: productData?.[0].prodQty || 1,
-            taxCd: productData?.[0].taxCd || "P0000000",
+            frgtTaxCd: productData?.[0].frgtTaxCd,
+            patnrId: productData?.[0].patnrId,
+            prdtId: productData?.[0].prdtId,
+            prodPrc: productData?.[0].price3,
+            prodQty: productData?.[0].prodQty,
+            taxCd: productData?.[0].taxCd,
          },
        ],
      })
    );
-  }, [dispatch]);
+  }, [dispatch, infoForCheckoutData, productData]);

  const onBackClick = useCallback(() => {
    dispatch(popPanel());
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/components/CheckOutTerms.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/components/CheckOutTerms.jsx
@@ -36,9 +36,9 @@ export default function CheckOutTerms() {
    Spotlight.focus("tab-0");
  }, [introTermsData, dispatch]);

-  const description = $L(
-    "Check out more LIVE SHOWS and enjoy Shopping via your TV at Shop Time’s special prices by agreeing to the LG TV Shopping Terms and Conditions"
-  );
+  const description =
+    $L(`Check out more LIVE SHOWS and enjoy Shopping via your TV \n at Shop Time’s special prices by agreeing to the LG TV
+  Shopping Terms and Conditions`);

  const checkOut = [$L("Terms of Purchase"), $L("Privacy Policy")];
  return (
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/components/ShippingAddressCard.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/components/ShippingAddressCard.jsx
@@ -11,6 +11,7 @@ import SpotlightContainerDecorator
  from '@enact/spotlight/SpotlightContainerDecorator';

 import { updateSelectedShippingAddr } from '../../../actions/checkoutActions';
+import { changeAppStatus } from '../../../actions/commonActions';
 import TCheckBox from '../../../components/TCheckBox/TCheckBox';
 import TScroller from '../../../components/TScroller/TScroller';
 import CheckOutContainer from './CheckOutContainer';
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
@@ -1,7 +1,4 @@
-import React, {
-  useCallback,
-  useState,
-} from 'react';
+import React, { useCallback } from 'react';

 import {
  useDispatch,
@@ -12,16 +9,13 @@ import SpotlightContainerDecorator
  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';

-import { updateSelectedShippingAddr } from '../../../actions/checkoutActions';
 import TButton from '../../../components/TButton/TButton';
 import { $L } from '../../../utils/helperMethods';
 import BillingAddressCard from '../components/BillingAddressCard';
 import PaymentCard from '../components/PaymentCard';
 import ShippingAddressCard from '../components/ShippingAddressCard';
 import Subject from '../components/Subject';
-import FixedSideBar from './FixedSideBar.jsx';
 import css from './InformationContainer.module.less';
-import OrderItemsSideBar from './OrderItemsSideBar';

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
@@ -38,6 +32,8 @@ export default function InformationContainer({

  const checkoutData = useSelector((state) => state.checkout?.checkoutData);

+  const handleButtonClick = useCallback(() => {}, []);
+
  return (
    <>
      <Container className={css.container}>
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx
@@ -1,16 +1,25 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';

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

-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';

-import { registerDevice } from "../../../actions/deviceActions";
-import { getHomeTerms } from "../../../actions/homeActions";
-import { setPurchaseTermsAgree } from "../../../actions/orderActions";
-import TButton from "../../../components/TButton/TButton";
-import TCheckBox from "../../../components/TCheckBox/TCheckBox";
-import { $L } from "../../../utils/helperMethods";
-import css from "./SummaryContainer.module.less";
+import { registerDevice } from '../../../actions/deviceActions';
+import { getHomeTerms } from '../../../actions/homeActions';
+import { setPurchaseTermsAgree } from '../../../actions/orderActions';
+import TButton from '../../../components/TButton/TButton';
+import TCheckBox from '../../../components/TCheckBox/TCheckBox';
+import { $L } from '../../../utils/helperMethods';
+import css from './SummaryContainer.module.less';

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
@@ -22,7 +31,9 @@ export default function SummaryContainer({ userInfo }) {

  const { productList } = useSelector((state) => state.checkout.checkoutData);
  const termsData = useSelector((state) => state.home.termsData);
-  const { checkoutTermsAgree } = useSelector((state) => state.common);
+  const taxInfosData = useSelector((state) => state.checkout?.taxInfosData);
+
+  console.log("chw", taxInfosData);

  const checkoutTermsData = useMemo(
    () =>
@@ -50,58 +61,68 @@ export default function SummaryContainer({ userInfo }) {
    currSign: "",
    currSignLoc: "",
  });
-  const [agreements, setAgreements] = useState(() => {
-    const initialAgreements = {};

-    checkoutTermsData.forEach(({ id }) => {
-      initialAgreements[id] = checkoutTermsAgree;
-    });
+  const itemSetting = useCallback(
+    (productList) => {
+      if (!productList || productList.length === 0) return;

-    return initialAgreements;
-  });
+      let itemCnt = 0; // 상품 함계
+      let shCnt = 0; // 배송비 합계
+      let couponCnt = 0; // 쿠폰 할인 합계
+      let itemsTotal = 0; // 상품 + 배송비
+      let taxCnt = 0; // 세금 합계
+      let itemsTaxTotal = 0; // itemsTotal + tax
+      let estimatedTotal = 0; // itemsTotal + tax - couponCnt

-  const itemSetting = useCallback((productList) => {
-    if (!productList || productList.length === 0) return;
+      productList.forEach((info) => {
+        const itemPrice = info.price3 || info.price2;
+        itemCnt += itemPrice * parseInt(info.prodQty, 10);

-    let itemCnt = 0; // 상품 함계
-    let shCnt = 0; // 배송비 합계
-    let couponCnt = 0; // 쿠폰 할인 합계
-    let itemsTotal = 0; // 상품 + 배송비
-    let taxCnt = 0; // 세금 합계
-    let itemsTaxTotal = 0; // itemsTotal + tax
-    let estimatedTotal = 0; // itemsTotal + tax - couponCnt
+        shCnt += parseFloat(info.shippingCharge || 0);

-    productList.forEach((info) => {
-      const itemPrice = info.price3 || info.price2;
-      itemCnt += itemPrice * parseInt(info.prodQty, 10);
+        if (info.prdtCoupon && info.prdtCoupon.length > 0) {
+          couponCnt += info.prdtCoupon.reduce(
+            (acc, coupon) => acc + parseFloat(coupon.discountAmount || 0),
+            0
+          );
+        }
+      });

-      shCnt += parseFloat(info.shippingCharge || 0);
-
-      if (info.prdtCoupon && info.prdtCoupon.length > 0) {
-        couponCnt += info.prdtCoupon.reduce(
-          (acc, coupon) => acc + parseFloat(coupon.discountAmount || 0),
-          0
-        );
+      if (
+        taxInfosData.totDlvrAmt !== null &&
+        taxInfosData.totDlvrAmt !== undefined
+      ) {
+        shCnt = taxInfosData.totDlvrAmt;
      }
-    });

-    itemsTotal = itemCnt + shCnt;
-    itemsTaxTotal = itemsTotal + taxCnt;
-    estimatedTotal = itemsTaxTotal - couponCnt;
+      if (
+        taxInfosData.billing?.taxTotAmt !== null &&
+        taxInfosData.billing?.taxTotAmt !== undefined
+      ) {
+        taxCnt = taxInfosData.billing.taxTotAmt;
+      }

-    setSummary((prevSummary) => ({
-      ...prevSummary,
-      itemPrice: itemCnt.toFixed(2),
-      shPrice: shCnt.toFixed(2),
-      couponPrice: couponCnt.toFixed(2),
-      itemsTotal: itemsTotal.toFixed(2),
-      taxTotal: taxCnt.toFixed(2),
-      itemsTaxTotal: itemsTaxTotal.toFixed(2),
-      estimatedTotal: estimatedTotal.toFixed(2),
-      currSign: productList[0]?.currSign || "",
-      currSignLoc: productList[0]?.currSignLoc || "",
-    }));
-  }, []);
+      itemsTotal = itemCnt + shCnt;
+      itemsTaxTotal = itemsTotal + taxCnt;
+      estimatedTotal = itemsTaxTotal - couponCnt;
+
+      setSummary((prevSummary) => ({
+        ...prevSummary,
+        itemPrice: itemCnt.toFixed(2),
+        shPrice: shCnt.toFixed(2),
+        couponPrice: couponCnt.toFixed(2),
+        itemsTotal: itemsTotal.toFixed(2),
+        taxTotal: taxCnt.toFixed(2),
+        itemsTaxTotal: itemsTaxTotal.toFixed(2),
+        estimatedTotal: estimatedTotal.toFixed(2),
+        currSign: productList[0]?.currSign || "",
+        currSignLoc: productList[0]?.currSignLoc || "",
+      }));
+
+      console.log("chw", summary);
+    },
+    [taxInfosData]
+  );

  useEffect(() => {
    if (productList && productList.length > 0) {
@@ -118,40 +139,9 @@ export default function SummaryContainer({ userInfo }) {
    { name: "Your Coupon Savings", value: summary.couponPrice },
  ];

-  useEffect(() => {
-    const initialAgreements = Object.fromEntries(
-      checkoutTermsData.map(({ id }) => [id, checkoutTermsAgree])
-    );
-    setAgreements(initialAgreements);
-  }, [checkoutTermsData, checkoutTermsAgree]);
-
-  const handleAgreeCheck = useCallback((trmsId) => {
-    setAgreements((prev) => ({ ...prev, [trmsId]: !prev[trmsId] }));
-  }, []);
-
  const handleClickOrder = useCallback(() => {
-    const allAgreed = Object.values(agreements).every((agreed) => agreed);
-
-    if (checkoutTermsAgree) {
-      if (allAgreed) {
-        console.log("success");
-      } else {
-        console.error("failed (please check checkbox)");
-      }
-    } else {
-      if (allAgreed) {
-        const agreeTerms = Object.keys(agreements).filter(
-          (trmsId) => agreements[trmsId]
-        );
-        dispatch(
-          setPurchaseTermsAgree({ mbrNo: userInfo, termsList: agreeTerms })
-        );
-        console.log("success");
-      } else {
-        console.error("failed (not agree terms)");
-      }
-    }
-  }, [dispatch, agreements, userInfo, checkoutTermsAgree]);
+    console.log("success");
+  }, []);

  return (
    <Container className={css.container}>
@@ -186,11 +176,6 @@ export default function SummaryContainer({ userInfo }) {
      <div className={css.bottom}>
        {checkoutTermsData.map((term, index) => (
          <div className={css.checkboxWrap} key={index}>
-            <TCheckBox
-              className={css.checkbox}
-              selected={agreements[term.id]}
-              onToggle={() => handleAgreeCheck(term.id)}
-            />
            <div className={css.contents}>{term.content}</div>
          </div>
        ))}