From 126ab252cd1e36b7989d4b1d67a1f66de83035a5 Mon Sep 17 00:00:00 2001 From: "hyunwoo93.cha" Date: Tue, 21 May 2024 10:05:59 +0900 Subject: [PATCH] =?UTF-8?q?[checkoutpanel]=20=EB=B0=B0=EC=86=A1=EC=A7=80,?= =?UTF-8?q?=20=EC=B2=AD=EA=B5=AC=EC=A7=80=20=EC=A3=BC=EC=86=8C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=8B=9C=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20=EC=84=B8?= =?UTF-8?q?=EA=B8=88=20=EA=B3=84=EC=82=B0,=20loadingpanel=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/actions/checkoutActions.js | 5 + com.twin.app.shoptime/src/lunaSend/account.js | 16 +- com.twin.app.shoptime/src/lunaSend/common.js | 2 +- .../src/reducers/checkoutReducer.js | 1 + .../src/views/CheckOutPanel/CheckOutPanel.jsx | 20 +-- .../components/CheckOutTerms.jsx | 6 +- .../components/ShippingAddressCard.jsx | 1 + .../container/InformationContainer.jsx | 10 +- .../container/SummaryCotainer.jsx | 169 ++++++++---------- 9 files changed, 112 insertions(+), 118 deletions(-) diff --git a/com.twin.app.shoptime/src/actions/checkoutActions.js b/com.twin.app.shoptime/src/actions/checkoutActions.js index a3a9183d..ec9babcc 100644 --- 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, diff --git a/com.twin.app.shoptime/src/lunaSend/account.js b/com.twin.app.shoptime/src/lunaSend/account.js index e8a9039f..642bd362 100644 --- 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, diff --git a/com.twin.app.shoptime/src/lunaSend/common.js b/com.twin.app.shoptime/src/lunaSend/common.js index f1093947..13b8b38f 100644 --- 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") { diff --git a/com.twin.app.shoptime/src/reducers/checkoutReducer.js b/com.twin.app.shoptime/src/reducers/checkoutReducer.js index 2dea2334..425d2cb9 100644 --- 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) => { diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx index b268d210..628cc621 100644 --- 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()); diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/components/CheckOutTerms.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/components/CheckOutTerms.jsx index deb9e346..3e236b1e 100644 --- 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 ( diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/components/ShippingAddressCard.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/components/ShippingAddressCard.jsx index 17518724..82721ddd 100644 --- 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'; diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx index 77245186..688bbf62 100644 --- 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 ( <> diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx index f958fa61..2606ac8a 100644 --- 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 ( @@ -186,11 +176,6 @@ export default function SummaryContainer({ userInfo }) {
{checkoutTermsData.map((term, index) => (
- handleAgreeCheck(term.id)} - />
{term.content}
))}