diff --git a/com.twin.app.shoptime/src/actions/checkoutActions.js b/com.twin.app.shoptime/src/actions/checkoutActions.js index 9d4ce5af..c38f30de 100644 --- a/com.twin.app.shoptime/src/actions/checkoutActions.js +++ b/com.twin.app.shoptime/src/actions/checkoutActions.js @@ -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, diff --git a/com.twin.app.shoptime/src/actions/commonActions.js b/com.twin.app.shoptime/src/actions/commonActions.js index 3ef45bb3..d3820a12 100644 --- a/com.twin.app.shoptime/src/actions/commonActions.js +++ b/com.twin.app.shoptime/src/actions/commonActions.js @@ -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 = () => ({ diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx index c356f89b..8836e343 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx +++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx @@ -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({ diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less index 2d885100..87da9ce5 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less +++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less @@ -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; + } + } + } +} diff --git a/com.twin.app.shoptime/src/reducers/commonReducer.js b/com.twin.app.shoptime/src/reducers/commonReducer.js index d6edbddb..ff58b036 100644 --- a/com.twin.app.shoptime/src/reducers/commonReducer.js +++ b/com.twin.app.shoptime/src/reducers/commonReducer.js @@ -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: diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index 0eaeae7f..29ba9629 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/com.twin.app.shoptime/src/utils/Config.js @@ -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; diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx index 615da6d1..e014b302 100644 --- a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx +++ b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx @@ -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() { )} + {activePopup === Config.ACTIVE_POPUP.errorPopup && ( + + )} +

{prdtNm}

-

Silver Metal / XL

+

+ {prdtOpt && prdtOpt[0] && prdtOpt[0].optNm + ? `${prdtOpt[0].optNm} / ` + : " "} + {prdtOpt && prdtOpt[0] && prdtOpt[0].prodOptCval + ? prdtOpt[0].prodOptCval + : " "} +

Qty: {prodQty}

{auctProdYn === "N" ? ( <> {currSignLoc === "L" - ? `${currSign} ${price3}` + ? `${currSign} ${price2 || price3}` : `${price2 || price3} ${currSign}`} {`${$L("S&H")}: `} 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 18068a32..cf96e261 100644 --- a/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx +++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx @@ -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 ( diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/container/OrderItemsSideBar.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/container/OrderItemsSideBar.jsx index b98fce87..44f7e1e3 100644 --- a/com.twin.app.shoptime/src/views/CheckOutPanel/container/OrderItemsSideBar.jsx +++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/OrderItemsSideBar.jsx @@ -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 }) {

- +

{$L("ORDER ITEMS")}

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx index 989074d3..43e3379f 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx @@ -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);