From b333168c7cfa849d2561561f81ffd86b1fdb8a98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Fri, 7 Jun 2024 16:39:59 +0900 Subject: [PATCH] =?UTF-8?q?[DetailPanel]=20=EA=B2=B0=EC=A0=9C=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=EC=83=81=ED=92=88=20=EC=98=B5=EC=85=98=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=20=EC=8B=9C=EB=82=98=EB=A6=AC=EC=98=A4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/en/GB/strings.json | 4 +- .../src/components/TButton/TButton.jsx | 2 + .../src/components/TPopUp/TPopUp.jsx | 3 +- .../SingleProduct/SingleOption.jsx | 128 ++++++++++++------ .../SingleProduct/SingleProduct.jsx | 7 +- .../ShowOptions/ShowSingleOption.jsx | 1 + 6 files changed, 101 insertions(+), 44 deletions(-) diff --git a/com.twin.app.shoptime/resources/en/GB/strings.json b/com.twin.app.shoptime/resources/en/GB/strings.json index d2f939af..db7be5dc 100644 --- a/com.twin.app.shoptime/resources/en/GB/strings.json +++ b/com.twin.app.shoptime/resources/en/GB/strings.json @@ -204,5 +204,7 @@ "Excellent": "Excellent", "TSV": "TSV", "Free S&H": "Free S&H", - "Big Sale": "Big Sale" + "Big Sale": "Big Sale", + "SELECT": "SELECT", + "Please select Option": "Please select Option" } diff --git a/com.twin.app.shoptime/src/components/TButton/TButton.jsx b/com.twin.app.shoptime/src/components/TButton/TButton.jsx index cd142a1c..73bd0567 100644 --- a/com.twin.app.shoptime/src/components/TButton/TButton.jsx +++ b/com.twin.app.shoptime/src/components/TButton/TButton.jsx @@ -44,6 +44,7 @@ function TButtonBase({ ariaLabel, children, spotlightId, + spotlightDisabled = false, className, onClick, onBlur, @@ -112,6 +113,7 @@ function TButtonBase({ onClick={_onClick} role="button" aria-label={ariaLabel} + spotlightDisabled={spotlightDisabled} > {withMarquee ? ( diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx index 3ea68dd4..8c386f21 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx +++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx @@ -56,6 +56,7 @@ export default function TPopUp({ onClose, hasButton, hasText, + hasOnClose = false, hasIndicator, hasLogo, hasThumbnail, @@ -279,7 +280,7 @@ export default function TPopUp({ {button1Text} )} - {button2Text && ( + {button2Text && !hasOnClose && ( {button2Text} 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 9f6d0e60..2be1a981 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx @@ -1,4 +1,10 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import classNames from "classnames"; import { useDispatch, useSelector } from "react-redux"; @@ -24,7 +30,6 @@ import TPopUp from "../../../components/TPopUp/TPopUp"; import TQRCode from "../../../components/TQRCode/TQRCode"; import TScroller from "../../../components/TScroller/TScroller"; import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList"; - import usePriceInfo from "../../../hooks/usePriceInfo"; import * as Config from "../../../utils/Config"; import { $L } from "../../../utils/helperMethods"; @@ -44,6 +49,8 @@ export default function SingleOption({ isSpotlight, selectedPatnrId, selectedPrdtId, + selectedIndex, + type, }) { const dispatch = useDispatch(); const productOptionInfos = useSelector((state) => state.product.prdtOptInfo); @@ -64,8 +71,10 @@ export default function SingleOption({ const [quantity, setQuantity] = useState(1); const [selectedCouponIndex, setSelectedCouponIndex] = useState(0); const [selectedCoupon, setSelectedCoupon] = useState(); + const [isOptionValue, setIsOptionValue] = useState(false); + const [isOptionSelect, setIsOptionSelect] = useState(false); const [selectedOptionItemIndex, setSelectedOptionItemIndex] = useState(0); - const [selectedOptions, setSelectedOptions] = useState([]); + const [selectedOptions, setSelectedOptions] = useState(); const [couponTypes, setCouponTypes] = useState(null); const [couponCodes, setCouponCodes] = useState(""); const [selectedOptionInfo, setSelectedOptionInfo] = useState(); @@ -109,33 +118,49 @@ export default function SingleOption({ ); }, [dispatch, selectedPatnrId, selectedPrdtId, productData]); + useEffect(() => { + if (type !== "theme") { + return; + } + if (selectedOptions) { + setSelectedBtnOptIdx(0); + } + setSelectedOptions(); + setIsOptionValue(false); + setSelectedOptionItemIndex(0); + setIsOptionSelect(false); + }, [selectedIndex, type]); + const handleOptionClick = useCallback( (optionValIdx) => { setSelectedBtnOptIdx(optionValIdx); setSelectedOptionItemIndex(0); + setSelectedOptions(productOptionInfos[optionValIdx].prdtOptDtl[0]); + setIsOptionValue(false); + setIsOptionSelect(true); onClose(); }, - [selectedBtnOptIdx] + [productOptionInfos, selectedOptionItemIndex] ); const handleOptionItemClick = useCallback( (index) => { setSelectedOptionItemIndex(index); + setSelectedOptions( + productOptionInfos[selectedBtnOptIdx].prdtOptDtl[index] + ); + setIsOptionValue(true); onClose(); }, - [selectedOptionItemIndex] + [productOptionInfos, selectedBtnOptIdx] ); - useEffect(() => { - if (productOptionInfos && productOptionInfos.length > 0) { - setSelectedOptions( - productOptionInfos[selectedBtnOptIdx].prdtOptDtl[ - selectedOptionItemIndex - ] - ); + const loginPopupText = useMemo(() => { + if (!selectedOptions || (!isOptionValue && isOptionSelect)) { + return $L("Please select Option"); } - }, [selectedBtnOptIdx, selectedOptionItemIndex, productOptionInfos]); - + return $L("Would you like to sign in?"); + }, [selectedOptions]); const handleIncrement = useCallback(() => { setQuantity(quantity + 1); }, [quantity]); @@ -146,12 +171,26 @@ export default function SingleOption({ }, [quantity]); const handleOptionPopUpOpen = useCallback( - (OptionInfo, isProductOptionInfoArray) => { - setSelectedOptionInfo(OptionInfo); + (optionInfo, isProductOptionInfoArray) => { + if ( + productOptionInfos.length !== 1 && + !isOptionSelect && + !isProductOptionInfoArray + ) { + return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); + } + + setSelectedOptionInfo(optionInfo); setHasProductOptionArray(isProductOptionInfoArray); dispatch(setShowPopup(Config.ACTIVE_POPUP.optionPopup)); }, - [dispatch, activePopup, selectedOptionItemIndex] + [ + dispatch, + isOptionSelect, + activePopup, + productOptionInfos, + selectedOptionItemIndex, + ] ); const handleQRCodePopUpOpen = useCallback(() => { @@ -180,6 +219,14 @@ export default function SingleOption({ }, [activePopup, selectedBtnOptIdx, selectedOptionItemIndex]); const handleLoginPopup = useCallback(() => { + console.log("#selectedOptions", productOptionInfos); + if (productOptionInfos && !isOptionValue && isOptionSelect) { + return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); + } + if (productOptionInfos && !selectedOptions) { + dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); + return; + } if (!loginUserData.userNumber) { dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); } else { @@ -190,14 +237,22 @@ export default function SingleOption({ cartList: { patnrId: selectedPatnrId, prdtId: selectedPrdtId, - prodOptCdCval: selectedOptions.prodOptCdCval, + prodOptCdCval: selectedOptions?.prodOptCdCval, prodQty: quantity, }, }, }) ); } - }, [dispatch, quantity, discountedPrice, selectedBtnOptIdx, selectedOptions]); + }, [ + dispatch, + isOptionValue, + isOptionSelect, + quantity, + discountedPrice, + selectedBtnOptIdx, + selectedOptions, + ]); const handleCouponClick = useCallback( (idx, promotion) => { @@ -260,17 +315,6 @@ export default function SingleOption({ } }, [productOptionInfos, productData]); - //옵션이 있을 경우 selectedOption에 첫번째 옵션을 강제로 담음 ( 들어오자마자 BUYNOW 클릭시 체크아웃으로 상품 넘어감 ) - useEffect(() => { - if (productOptionInfos && productOptionInfos.length > 0) { - setSelectedOptions( - productOptionInfos[selectedBtnOptIdx].prdtOptDtl[ - selectedOptionItemIndex - ] - ); - } - }, [productOptionInfos]); - const getCouponCode = () => { const snoArray = []; @@ -281,24 +325,29 @@ export default function SingleOption({ setCouponCodes(snoArray.join(", ")); }; - const renderOptionName = (optionInfo) => { - return optionInfo?.optNm || null; - }; + const renderOptionName = useCallback(() => { + if (selectedOptions) { + return productOptionInfos[selectedBtnOptIdx]?.optNm || null; + } + + return $L("SELECT"); + }, [productOptionInfos, selectedOptions, selectedBtnOptIdx]); const renderOptionValue = useCallback( (optionInfo) => { if ( optionInfo && optionInfo.prdtOptDtl && - optionInfo.prdtOptDtl.length > 0 + optionInfo.prdtOptDtl.length > 0 && + isOptionValue ) { return ( optionInfo.prdtOptDtl[selectedOptionItemIndex]?.prodOptCval || null ); } - return null; + return $L("SELECT"); }, - [selectedOptionItemIndex] + [selectedOptions, isOptionValue, selectedOptionItemIndex] ); const renderItem = useCallback( @@ -406,7 +455,7 @@ export default function SingleOption({ spotlightId={"selectedOptionBox-0"} > - {renderOptionName(productOptionInfos[selectedBtnOptIdx])} + {renderOptionName()} @@ -424,6 +473,7 @@ export default function SingleOption({ ) } spotlightId={"selectedOptionBox-1"} + spotlightDisabled={productOptionInfos.length === 1} > {renderOptionValue(productOptionInfos[selectedBtnOptIdx])} @@ -532,15 +582,15 @@ export default function SingleOption({ kind="textPopup" hasText open={popupVisible} - text={$L("Would you like to sign in?")} + text={loginPopupText} hasButton + hasOnClose={!selectedOptions || (!isOptionValue && isOptionSelect)} button1Text={$L("OK")} button2Text={$L("CANCEL")} onClick={handleQRCodePopUpOpen} onClose={onClose} > )} - {/* SHOPTIME OPTION POPUP */} {activePopup === Config.ACTIVE_POPUP.optionPopup && ( diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowOptions/ShowSingleOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowOptions/ShowSingleOption.jsx index 2b264616..9c89f4b6 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowOptions/ShowSingleOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowOptions/ShowSingleOption.jsx @@ -16,6 +16,7 @@ export default function ThemeSingleOption({ thumbnailUrls={productInfo?.thumbnailUrl} >