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

checkout add conditional state, focus

Browse Source
This commit is contained in:
hyunwoo93.cha
2024-06-19 18:03:24 +09:00
parent 9992885c60
commit f5d6c99d0e
11 changed files with 173 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -75,45 +75,50 @@ export const insertMyInfoCheckoutOrder =
);
};
export const getCheckoutTotalAmt = (params) => (dispatch, getState) => {
const {
mbrNo,
dirPurcSelYn,
bilAddrSno,
dlvrAddrSno,
orderProductCoupontUse,
} = params;
export const getCheckoutTotalAmt =
(params, callback) => (dispatch, getState) => {
const {
mbrNo,
dirPurcSelYn,
bilAddrSno,
dlvrAddrSno,
orderProductCoupontUse,
} = params;
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
dispatch(
changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
);
const onSuccess = (response) => {
console.log("getCheckoutTotalAmt onSuccess: ", response.data);
const onSuccess = (response) => {
console.log("getCheckoutTotalAmt onSuccess: ", response.data);
dispatch({
type: types.GET_CHECKOUT_TOTAL_AMT,
payload: response.data.data,
});
dispatch({
type: types.GET_CHECKOUT_TOTAL_AMT,
payload: response.data.data,
});
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
if (callback) callback(response.data);
};
const onFail = (error) => {
console.error("getCheckoutTotalAmt onFail: ", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
TAxios(
dispatch,
getState,
"post",
URLS.GET_CHECKOUT_TOTAL_AMT,
{},
{ mbrNo, dirPurcSelYn, bilAddrSno, dlvrAddrSno, orderProductCoupontUse },
onSuccess,
onFail
);
};
const onFail = (error) => {
console.error("getCheckoutTotalAmt onFail: ", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
TAxios(
dispatch,
getState,
"post",
URLS.GET_CHECKOUT_TOTAL_AMT,
{},
{ mbrNo, dirPurcSelYn, bilAddrSno, dlvrAddrSno, orderProductCoupontUse },
onSuccess,
onFail
);
};
export const updateSelectedShippingAddr = (dlvrAddrSno) => ({
type: types.UPDATE_SELECTED_SHIPPING_ADDR,
payload: dlvrAddrSno,

4
com.twin.app.shoptime/src/actions/commonActions.js
View File

@@ -23,9 +23,9 @@ export const gnbOpened = (status) => ({
payload: status,
});
export const setShowPopup = (popupType) => ({
export const setShowPopup = (popupType, payload = {}) => ({
type: types.SET_SHOW_POPUP,
payload: { activePopup: popupType },
payload: { activePopup: popupType, ...payload },
});
export const setHidePopup = () => ({

36
com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
View File

@@ -1,28 +1,19 @@
import React, {
useCallback,
useEffect,
useMemo,
} from 'react';
import React, { useCallback, useEffect, useMemo } from "react";
import classNames from 'classnames';
import { useDispatch } from 'react-redux';
import classNames from "classnames";
import { useDispatch } from "react-redux";
import Alert from '@enact/sandstone/Alert';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import Alert from "@enact/sandstone/Alert";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import defaultImageItem
from '../../../assets/images/img-thumb-empty-product@3x.png';
import {
cancelFocusElement,
focusElement,
} from '../../actions/commonActions';
import { SpotlightIds } from '../../utils/SpotlightIds';
import CustomImage from '../CustomImage/CustomImage';
import TButton from '../TButton/TButton';
import css from '../TPopUp/TPopUp.module.less';
import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.png";
import { cancelFocusElement, focusElement } from "../../actions/commonActions";
import { SpotlightIds } from "../../utils/SpotlightIds";
import CustomImage from "../CustomImage/CustomImage";
import TButton from "../TButton/TButton";
import css from "../TPopUp/TPopUp.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element" },
@@ -58,6 +49,7 @@ const KINDS = [
"watchPopup",
"setPinCodePopup",
"descriptionPopup",
"errorPopup",
];
export default function TPopUp({

23
com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
View File

@@ -526,3 +526,26 @@
}
}
}
.errorPopup {
.default-style();
.info {
.text {
padding: 0 60px;
min-height: 180px;
margin: 30px 0;
}
.buttonContainer {
margin: 0 0 30px 0;
display: flex;
justify-content: center;
> div {
min-width: 240px;
height: 78px;
margin: 0 6px;
}
}
}
}

3
com.twin.app.shoptime/src/reducers/commonReducer.js
View File

@@ -84,7 +84,7 @@ export const commonReducer = (state = initialState, action) => {
}
return state;
}
case types.SEND_BROADCAST:{
case types.SEND_BROADCAST: {
return {
...state,
broadcast: action.payload,
@@ -116,6 +116,7 @@ export const commonReducer = (state = initialState, action) => {
popup: {
popupVisible: true,
activePopup: action.payload.activePopup,
text: action.payload.text || "",
},
};
case types.SET_HIDE_POPUP:

1
com.twin.app.shoptime/src/utils/Config.js
View File

@@ -68,6 +68,7 @@ export const ACTIVE_POPUP = {
orderCancelReason: "orderCancelReason",
orderDetailPopup: "orderDetailPopup",
orderDetailCancel: "orderDetailCancel",
errorPopup: "errorPopup",
};
export const DEBUG_VIDEO_SUBTITLE_TEST = false;
export const AUTO_SCROLL_DELAY = 600;

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

@@ -30,6 +30,7 @@ import useLogService from "../../hooks/useLogService";
import useScrollTo from "../../hooks/useScrollTo";
import * as Config from "../../utils/Config";
import { $L, scaleH, scaleW } from "../../utils/helperMethods";
import { SpotlightIds } from "../../utils/SpotlightIds";
import css from "./CheckOutPanel.module.less";
import PinCodeInput from "./components/PinCodeInput";
import FixedSideBar from "./container/FixedSideBar";
@@ -61,6 +62,7 @@ export default function CheckOutPanel() {
const { popupVisible, activePopup } = useSelector(
(state) => state.common.popup
);
const popup = useSelector((state) => state.common.popup);
const { currSign, currSignLoc } = productData?.[0] || {};
const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
@@ -102,6 +104,20 @@ export default function CheckOutPanel() {
dispatch(getShoptimeTerms());
}, [dispatch]);
function totalAmtValidate(response) {
if (response) {
if (response.retCode !== 0) {
if (response.retMsg) {
dispatch(
setShowPopup(Config.ACTIVE_POPUP.errorPopup, {
text: response.retMsg,
})
);
}
}
}
}
useEffect(() => {
if (infoForCheckoutData && productData) {
const orderProductCoupontUse = Object.keys(selectedCoupons).map(
@@ -125,13 +141,16 @@ export default function CheckOutPanel() {
infoForCheckoutData.bilAddrSno
) {
dispatch(
getCheckoutTotalAmt({
mbrNo: userNumber,
dirPurcSelYn: "Y",
bilAddrSno: infoForCheckoutData.bilAddrSno,
dlvrAddrSno: infoForCheckoutData.dlvrAddrSno,
orderProductCoupontUse,
})
getCheckoutTotalAmt(
{
mbrNo: userNumber,
dirPurcSelYn: "Y",
bilAddrSno: infoForCheckoutData.bilAddrSno,
dlvrAddrSno: infoForCheckoutData.dlvrAddrSno,
orderProductCoupontUse,
},
totalAmtValidate
)
);
}
}
@@ -156,18 +175,18 @@ export default function CheckOutPanel() {
}, [dispatch]);
useEffect(() => {
if (!activePopup === Config.ACTIVE_POPUP.qrPopup2) {
spotJob.current.start(() => {
const spotJobValue = spotJob.current;
spotJobValue.start(() => {
if (!activePopup) {
Spotlight.focus("spotlightId_placeOrderBtn");
});
} else {
spotJob.current.start(() => {
Spotlight.focus("checkoutCloseButton");
});
}
} else if (activePopup === Config.ACTIVE_POPUP.errorPopup) {
Spotlight.focus(SpotlightIds.TPOPUP);
}
});
return () => {
spotJob.current.stop();
spotJobValue.stop();
};
}, [activePopup]);
@@ -191,6 +210,11 @@ export default function CheckOutPanel() {
dispatch(setHidePopup());
}, [dispatch]);
const handlePopPanel = useCallback(() => {
dispatch(setHidePopup());
dispatch(popPanel());
}, [dispatch]);
const handleTermsClick = useCallback(
(termsID) => {
if (empTermsData) {
@@ -232,7 +256,7 @@ export default function CheckOutPanel() {
useEffect(() => {
Spotlight.focus();
}, [popupVisible]);
}, [popupVisible, orderSideBarOpen, offerSideBarOpen]);
return (
<>
@@ -310,6 +334,18 @@ export default function CheckOutPanel() {
</TPopUp>
)}
{activePopup === Config.ACTIVE_POPUP.errorPopup && (
<TPopUp
kind="errorPopup"
hasText
open={popupVisible}
text={popup.text ? popup.text : "unknown error"}
hasButton
button1Text={$L("CLOSE")}
onClick={handlePopPanel}
/>
)}
<TFullPopup
open={placeOrderPopup}
className={css.pinCodePopup}

23
com.twin.app.shoptime/src/views/CheckOutPanel/components/OrderItemCard.jsx
View File

@@ -1,10 +1,10 @@
import React, { memo } from 'react';
import React, { memo } from "react";
import Spottable from '@enact/spotlight/Spottable';
import Spottable from "@enact/spotlight/Spottable";
import CustomImage from '../../../components/CustomImage/CustomImage';
import { $L } from '../../../utils/helperMethods';
import css from './OrderItemCard.module.less';
import CustomImage from "../../../components/CustomImage/CustomImage";
import { $L } from "../../../utils/helperMethods";
import css from "./OrderItemCard.module.less";
const OrderItemContainer = Spottable("div");
@@ -20,7 +20,7 @@ export default memo(function OrderItemCard({
prodQty,
price2,
price3,
prodtOpt,
prdtOpt,
patncLogPath,
prdtId,
currSign,
@@ -45,14 +45,21 @@ export default memo(function OrderItemCard({
</div>
<div className={css.rightContents}>
<p className={css.prdtNm}>{prdtNm}</p>
<p className={css.options}>Silver Metal / XL</p>
<p className={css.options}>
{prdtOpt && prdtOpt[0] && prdtOpt[0].optNm
? `${prdtOpt[0].optNm} / `
: " "}
{prdtOpt && prdtOpt[0] && prdtOpt[0].prodOptCval
? prdtOpt[0].prodOptCval
: " "}
</p>
<p className={css.prodQty}>Qty: {prodQty}</p>
<p className={css.priceWrap}>
{auctProdYn === "N" ? (
<>
<span className={css.itemPrice}>
{currSignLoc === "L"
? `${currSign} ${price3}`
? `${currSign} ${price2 || price3}`
: `${price2 || price3} ${currSign}`}
</span>
{`${$L("S&H")}: `}

2
com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
View File

@@ -7,6 +7,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
import Spottable from "@enact/spotlight/Spottable";
import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
import { popPanel } from "../../../actions/panelActions";
import TButton from "../../../components/TButton/TButton";
import TPopUp from "../../../components/TPopUp/TPopUp";
import TQRCode from "../../../components/TQRCode/TQRCode";
@@ -92,6 +93,7 @@ export default function InformationContainer({
const handleCancel = useCallback(() => {
dispatch(setHidePopup());
dispatch(popPanel());
}, [dispatch]);
return (

31
com.twin.app.shoptime/src/views/CheckOutPanel/container/OrderItemsSideBar.jsx
View File

@@ -1,16 +1,15 @@
import React, { useCallback } from 'react';
import React, { useCallback, useEffect } from "react";
import { useSelector } from 'react-redux';
import { useSelector } from "react-redux";
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import TIConButton from '../../../components/TIconButton/TIconButton';
import TVirtualGridList
from '../../../components/TVirtualGridList/TVirtualGridList';
import { $L } from '../../../utils/helperMethods';
import OrderItemCard, { SIZES } from '../components/OrderItemCard';
import css from './OrderItemsSideBar.module.less';
import TIConButton from "../../../components/TIconButton/TIconButton";
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
import { $L } from "../../../utils/helperMethods";
import OrderItemCard, { SIZES } from "../components/OrderItemCard";
import css from "./OrderItemsSideBar.module.less";
const SideBarContainer = SpotlightContainerDecorator("div");
@@ -19,6 +18,10 @@ export default function OrderItemsSideBar({ closeSideBar }) {
(state) => state.checkout?.checkoutData?.productList
);
useEffect(() => {
Spotlight.focus("orderItemSideBar_backButton");
}, []);
const renderItem = useCallback(
({ index, ...rest }) => {
const item = orderItemList[index];
@@ -32,7 +35,7 @@ export default function OrderItemsSideBar({ closeSideBar }) {
prodQty={item.prodQty}
price2={item.price2}
price3={item.price3}
prodOpt={item.prodOpt}
prdtOpt={item.prdtOpt}
patncLogPath={item.patncLogPath}
prdtId={item.prdtId}
currSign={item.currSign}
@@ -50,7 +53,11 @@ export default function OrderItemsSideBar({ closeSideBar }) {
<div className={css.bgLayer} onClick={closeSideBar} />
<SideBarContainer className={css.container}>
<div className={css.titleBox}>
<TIConButton className={css.backButton} onClick={closeSideBar} />
<TIConButton
className={css.backButton}
onClick={closeSideBar}
spotlightId="orderItemSideBar_backButton"
/>
<h2 className={css.title}>{$L("ORDER ITEMS")}</h2>
</div>
<div className={css.orderItemListsWrap}>

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

@@ -147,6 +147,7 @@ export default function SingleOption({
}
}, [selectedOptionInfo, productOptionInfos, selectedBtnOptIdx]);
//첫번째 옵션 선택 함수
const handleOptionClick = useCallback(
(optionValIdx) => {
setSelectedBtnOptIdx(optionValIdx);
@@ -159,6 +160,7 @@ export default function SingleOption({
[productOptionInfos, selectedOptionItemIndex]
);
// 두번째 옵션 선택 함수
const handleOptionItemClick = useCallback(
(index) => {
setSelectedOptionItemIndex(index);
@@ -245,34 +247,6 @@ export default function SingleOption({
}
}, [activePopup, selectedBtnOptIdx, selectedOptionItemIndex]);
// 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) {
@@ -290,6 +264,8 @@ export default function SingleOption({
})
);
}
} else {
console.error("unknown error", response.retCode, response.retMsg);
}
} else {
console.error("network error", response.retCode);