optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checkout, detailPanel singleOption change logic

Browse Source
This commit is contained in:
hyunwoo93.cha
2024-06-18 10:16:27 +09:00
parent 42f5cf0d08
commit 9cd4c3063c
6 changed files with 148 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
com.twin.app.shoptime/src/actions/checkoutActions.js
View File

@@ -4,9 +4,14 @@ import { types } from "./actionTypes";
import { changeAppStatus } from "./commonActions";
// 회원 체크아웃 정보 조회 IF-LGSP-345
export const getMyInfoCheckoutInfo = (props) => (dispatch, getState) => {
export const getMyInfoCheckoutInfo =
(props, callback) => (dispatch, getState) => {
const { mbrNo, dirPurcSelYn, cartList } = props;
dispatch(
changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
);
const onSuccess = (response) => {
console.log("getMyInfoCheckoutInfo onSuccess: ", response.data);
@@ -14,10 +19,15 @@ export const getMyInfoCheckoutInfo = (props) => (dispatch, getState) => {
type: types.GET_CHECKOUT_INFO,
payload: response.data.data,
});
if (callback) callback(response.data);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
const onFail = (error) => {
console.error("getMyInfoCheckoutInfo OnFail: ", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
TAxios(
@@ -30,7 +40,7 @@ export const getMyInfoCheckoutInfo = (props) => (dispatch, getState) => {
onSuccess,
onFail
);
};
};
// 회원 CheckOut 상품 주문 IF-LGSP-346
export const insertMyInfoCheckoutOrder =
@@ -65,61 +75,6 @@ export const insertMyInfoCheckoutOrder =
);
};
// 파트너사 배송비 및 LBP 관련 세금 정보 IF-LGSP-362
export const getTaxInfos = (props) => (dispatch, getState) => {
const {
mbrNo,
bilAddrSno,
dlvrAddrSno,
reqCheckoutTaxInfoItemList,
patnrId,
prdtId,
prodQty,
prodPrc,
taxCd,
frgTaxCd,
dcAmt,
cpnSno,
} = props;
const onSuccess = (response) => {
console.log("getTaxInfos onSuccess: ", response.data);
dispatch({
type: types.GET_TAX_INFOS,
payload: response.data.data,
});
};
const onFail = (error) => {
console.error("getTaxInfos onFail: ", error);
};
TAxios(
dispatch,
getState,
"post",
URLS.GET_TAX_INFOS,
{},
{
mbrNo,
bilAddrSno,
dlvrAddrSno,
reqCheckoutTaxInfoItemList,
patnrId,
prdtId,
prodQty,
prodPrc,
taxCd,
frgTaxCd,
dcAmt,
cpnSno,
},
onSuccess,
onFail
);
};
export const getCheckoutTotalAmt = (params) => (dispatch, getState) => {
const {
mbrNo,

83
com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
View File

@@ -45,7 +45,6 @@ export default function CheckOutPanel() {
const checkoutPanelInfo = panels.find(
(panel) => panel.name === "checkoutpanel"
)?.panelInfo;
const checkoutData = useSelector((state) => state.checkout?.checkoutData);
const productData = useSelector(
(state) => state.checkout?.checkoutData.productList
@@ -60,13 +59,11 @@ export default function CheckOutPanel() {
const { popupVisible, activePopup } = useSelector(
(state) => state.common.popup
);
const { billingAddressList, shippingAddressList, cardInfo } =
checkoutData || {};
const { currSign, currSignLoc } = productData?.[0] || {};
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);
@@ -82,42 +79,17 @@ export default function CheckOutPanel() {
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]);
}, [dispatch]);
useEffect(() => {
if (infoForCheckoutData && productData) {
setLoading(false);
const orderProductCoupontUse = Object.keys(selectedCoupons).map(
(productId) => {
const { cpnCdSeq, cpnSno, prdtId } = selectedCoupons[productId];
@@ -148,21 +120,8 @@ export default function CheckOutPanel() {
})
);
}
if (!billingAddressList || !shippingAddressList || !cardInfo) {
dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup2));
}
}
}, [
dispatch,
infoForCheckoutData,
productData,
userNumber,
selectedCoupons,
billingAddressList,
shippingAddressList,
cardInfo,
]);
}, [dispatch, infoForCheckoutData, productData, userNumber, selectedCoupons]);
useEffect(() => {
const newTabList = [];
@@ -218,11 +177,6 @@ export default function CheckOutPanel() {
dispatch(setHidePopup());
}, [dispatch]);
const onCloseQRPopup = useCallback(() => {
dispatch(setHidePopup());
dispatch(popPanel());
}, []);
const handleTermsClick = useCallback(
(termsID) => {
if (empTermsData) {
@@ -284,6 +238,8 @@ export default function CheckOutPanel() {
setPlaceOrderPopup={setPlaceOrderPopup}
empTermsData={empTermsData}
handleTermsClick={handleTermsClick}
currSign={currSign}
currSignLoc={currSignLoc}
/>
<InformationContainer
toggleOrderSideBar={toggleOrderSideBar}
@@ -340,33 +296,6 @@ export default function CheckOutPanel() {
</TPopUp>
)}
{activePopup === Config.ACTIVE_POPUP.qrPopup2 && (
<TPopUp kind="qrPopup" open={popupVisible} onClose={onCloseQRPopup}>
<div className={css.popupContainer}>
<div className={css.header}>
<h3>{$L("QR CODE")}</h3>
</div>
<div className={css.qrcodeContainer}>
<div className={css.qrcode}>
<TQRCode text="http://google.com" width="360" height="360" />
</div>
<h3>
{$L(
"If you want to add or edit your address and payment information, please scan the QR CODE."
)}
</h3>
<TButton
className={css.popupBtn}
onClick={onCloseQRPopup}
spotlightId="checkoutCloseButton"
>
{$L("CLOSE")}
</TButton>
</div>
</div>
</TPopUp>
)}
<TFullPopup
open={placeOrderPopup}
className={css.pinCodePopup}

80
com.twin.app.shoptime/src/views/CheckOutPanel/components/PinCode.jsx
View File

@@ -1,80 +0,0 @@
import React, { useState } from 'react';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import TButton from '../../../components/TButton/TButton';
import { $L } from '../../../utils/helperMethods';
import css from './PinCode.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const ContainerCode = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const ContainerNum = SpotlightContainerDecorator(
{ enterTo: "default-element" },
"div"
);
const SpottableDiv = Spottable("div");
const SpottableBtn = Spottable("button");
export default function PinCode() {
const [numOne, setNumOne] = useState(null);
const [numTwo, setNumTwo] = useState(null);
const [numThree, setNumThree] = useState(null);
const [numFour, setNumFour] = useState(null);
const _onClick = () => {};
const _onClose = () => {};
return (
<Container className={css.container}>
<div className={css.title}>Enter PIN CODE</div>
<ContainerCode className={css.pinCodeBox}>
<SpottableDiv className={css.pinCode} spotlightId={"code_One"}>
{numOne}
</SpottableDiv>
<SpottableDiv className={css.pinCode} spotlightId={"code_Two"}>
{numTwo}
</SpottableDiv>
<SpottableDiv className={css.pinCode} spotlightId={"code_Three"}>
{numThree}
</SpottableDiv>
<SpottableDiv className={css.pinCode} spotlightId={"code_Four"}>
{numFour}
</SpottableDiv>
<input type="hidden" name={"pinCode"} value />
</ContainerCode>
<div className={css.errorText}>
{/* The purchase cannot be processed with the registered payment
information. Please check your payment information again. */}
</div>
<ContainerNum className={css.pinCodeSelector}>
<SpottableBtn spotlightId={"PinCode_1"}>1</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_2"}>2</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_3"}>3</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_4"}>4</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_5"}>5</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_6"}>6</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_7"}>7</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_8"}>8</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_9"}>9</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_0"}>0</SpottableBtn>
<SpottableBtn spotlightId={"PinCode_DelBtn"}></SpottableBtn>
</ContainerNum>
<div className={css.buttonContainer}>
<TButton spotlightId="tPopupBtn1" onClick={_onClick}>
{$L("Cancel")}
</TButton>
<TButton spotlightId="tPopupBtn2" onClick={_onClose}>
{$L("OK")}
</TButton>
</div>
</Container>
);
}

106
com.twin.app.shoptime/src/views/CheckOutPanel/components/PinCode.module.less
View File

@@ -1,106 +0,0 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.container {
width: 1920px;
height: 1080px;
background-color: #000;
.title {
margin: 120px auto 0;
text-align: center;
font-size: 72px;
font-weight: 200;
color: #e6e6e6;
width: 1320px;
height: 84px;
line-height: 84px;
}
.pinCodeBox {
margin: 162px auto 0;
width: 534px;
height: 144px;
display: flex;
.pinCode {
width: 120px;
height: 144px;
border-radius: 6px;
background-color: #e6e6e6;
margin-right: 18px;
opacity: 0.15;
&:focus {
background-color: #fff;
opacity: 1;
}
&:last-child {
margin-right: 0;
}
}
}
.errorText {
margin: 24px auto 60px;
height: 66px;
width: 1070px;
text-align: center;
display: flex;
font-size: 30px;
color: #fb5656;
align-items: center;
}
.pinCodeSelector {
width: 924px;
height: 84px;
margin: 0 auto;
display: flex;
> button {
width: 84px;
height: 84px;
line-height: 84px;
text-align: center;
color: #e6e6e6;
font-size: 42px;
font-weight: bold;
&:focus {
background: #fff;
color: #4c5059;
border-radius: 6px;
font-weight: bold;
}
&:last-child {
background: url("../../../../assets/images/icons/ic-delete-nor@3x.png");
background-size: contain;
&:focus {
background: url("../../../../assets/images/icons/ic-delete-foc@3x.png");
background-size: contain;
}
}
}
}
.buttonContainer {
display: flex;
justify-content: center;
margin-top: 168px;
> div {
width: 270px;
height: 72px;
line-height: 72px;
font-weight: 200;
margin: 0 10px;
background: @COLOR_GRAY09;
&:focus {
box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
background-color: @PRIMARY_COLOR_RED;
color: @COLOR_WHITE;
transform: translateY(3%) translateX(-3%) scale(1.1);
}
&:last-child {
&:focus {
box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
background-color: @PRIMARY_COLOR_RED;
color: @COLOR_WHITE;
transform: translateY(3%) translateX(3%) scale(1.1);
}
}
}
}
}

34
com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
@@ -19,23 +19,25 @@ export default function SummaryContainer({
setPlaceOrderPopup,
empTermsData,
handleTermsClick,
currSign,
currSignLoc,
}) {
const dispatch = useDispatch();
const priceTotalData = useSelector(
(state) => state.checkout?.checkoutTotalData?.orderTotalAmtInfo
(state) => state.checkout?.checkoutTotalData
);
const productList = useSelector((state) => state.checkout?.checkoutData);
const items = [
{ name: "Items", value: priceTotalData?.totProdPrc || "-" },
{ name: "Options Total", value: priceTotalData?.totOptPrc || "-" },
{ name: "Shipping & Handling", value: priceTotalData?.totDlvrAmt || "-" },
{ name: "TOTAL (before Tax)", value: priceTotalData?.totProdPrc || "-" },
{ name: "Estimated Sales Tax", value: priceTotalData?.ordTotTaxAmt || "-" },
{ name: "Items", value: priceTotalData.totProdPrc || "-" },
{
name: "Your Coupon Savings",
value: priceTotalData?.cpnAplyMaxDcAmt || "-",
value: priceTotalData.totDcAmt || "-",
},
{ name: "Shipping & Handling", value: priceTotalData.totDlvrAmt || "-" },
{ name: "TOTAL (before Tax)", value: priceTotalData.totProdPrc || "-" },
{ name: "Estimated Sales Tax", value: priceTotalData.ordTotTaxAmt || "-" },
];
const handleClickOrder = useCallback(() => {
@@ -51,14 +53,26 @@ export default function SummaryContainer({
{items.map((item, index) => (
<div key={index} className={css.item}>
<span className={css.summaryDesc}>{item.name}</span>
<span className={css.summaryCnt}>{item.value}</span>
<span className={css.summaryCnt}>
{currSign && currSignLoc
? currSignLoc === "L"
? `${currSign} ${item.value}`
: `${item.value} ${currSign}`
: " - "}
</span>
</div>
))}
</div>
</div>
<div className={css.total}>
<div>Estimated Total</div>
<div className={css.price}>{priceTotalData?.ordPmtReqAmt || "-"}</div>
<div className={css.price}>
{currSign && currSignLoc
? currSignLoc === "L"
? `${currSign} ${priceTotalData?.ordPmtReqAmt || "-"}`
: `${priceTotalData?.ordPmtReqAmt || "-"} ${currSign}`
: " - "}
</div>
</div>
<div className={css.bottom}>
<ul className={css.termsWrap}>

100
com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
View File

@@ -13,6 +13,7 @@ import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { getMyInfoCheckoutInfo } from "../../../actions/checkoutActions";
import {
launchMembershipApp,
setHidePopup,
@@ -244,32 +245,95 @@ export default function SingleOption({
}
}, [activePopup, selectedBtnOptIdx, selectedOptionItemIndex]);
const handleLoginPopup = useCallback(() => {
if (hasOnClose || !loginUserData.userNumber) {
return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
}
// const handleLoginPopup = useCallback(() => {
// if (hasOnClose || !loginUserData.userNumber) {
// return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
// }
// dispatch(
// pushPanel({
// name: Config.panel_names.CHECKOUT_PANEL,
// panelInfo: {
// cartList: {
// patnrId: selectedPatnrId,
// prdtId: selectedPrdtId,
// prodOptCdCval: selectedOptions?.prodOptCdCval,
// prodQty: quantity,
// },
// },
// })
// );
// }, [
// dispatch,
// hasOnClose,
// loginUserData.userNumber,
// quantity,
// selectedPatnrId,
// selectedPrdtId,
// selectedOptions,
// ]);
function checkOutValidate(response) {
if (response) {
if (response.retCode === 0) {
if (
response.data.cardInfo === null ||
response.data.billingAddressList === null ||
response.data.shippingAddressList === null
) {
dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup));
} else {
dispatch(
pushPanel({
name: Config.panel_names.CHECKOUT_PANEL,
panelInfo: {
cartList: {
patnrId: selectedPatnrId,
prdtId: selectedPrdtId,
prodOptCdCval: selectedOptions?.prodOptCdCval,
prodQty: quantity,
},
},
panelInfo: {},
})
);
}, [
dispatch,
hasOnClose,
loginUserData.userNumber,
quantity,
}
}
} else {
console.error("network error", response.retCode);
}
}
const handleClickBuyNow = useCallback(() => {
console.log(
"chw",
userNumber,
selectedPatnrId,
selectedPrdtId,
selectedOptions,
quantity
);
if (userNumber && selectedPatnrId && selectedPrdtId && quantity) {
dispatch(
getMyInfoCheckoutInfo(
{
mbrNo: userNumber,
dirPurcSelYn: "Y",
cartList: [
{
patnrId: selectedPatnrId,
prdtId: selectedPrdtId,
prodOptCdCval: selectedOptions?.prodOptCdCval
? selectedOptions.prodOptCdCval
: null,
prodQty: quantity,
},
],
},
checkOutValidate
)
);
}
}, [
dispatch,
userNumber,
selectedPatnrId,
selectedPrdtId,
selectedOptions,
quantity,
checkOutValidate,
]);
const handleCouponClick = useCallback(
@@ -605,7 +669,7 @@ export default function SingleOption({
<Container className={css.bottomBtnLayer}>
<TButton
className={css.buyNowBtn}
onClick={handleLoginPopup}
onClick={handleClickBuyNow}
spotlightId={"spotlightId_buynowBtn"}
>
{$L("BUY NOW")}