From f90969053375895b853c4b31591702140f9a4ac3 Mon Sep 17 00:00:00 2001 From: "younghoon100.park" Date: Fri, 25 Oct 2024 16:53:56 +0900 Subject: [PATCH] =?UTF-8?q?SHOPTIME-1933=20[Shoptime=20=EA=B3=A0=EB=8F=84?= =?UTF-8?q?=ED=99=94]=20TV=20=EC=95=B1=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20(?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=9A=B4=EC=98=81=ED=8C=80)=20/?= =?UTF-8?q?=20[SHOPTIME-3323]=20SBM=20/=20=EB=B9=88=20=EC=A0=84=ED=99=94?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20=ED=9E=88=EC=8A=A4=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EB=B0=9C=EC=83=9D=201.=20MobileSendPopup.jsx=202.=20HistoryPho?= =?UTF-8?q?neNumber.jsx=20-=20=EC=9B=90=EC=9D=B8:=20=EC=9E=AC=ED=98=84=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=95=8C=20=EC=88=98=20=EC=97=86=EC=9D=8C?= =?UTF-8?q?=20-=20=EB=8C=80=EC=B1=85:=20=EB=B0=A9=EC=96=B4=20logic=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20(rendering=20=EC=A1=B0=EA=B1=B4=20?= =?UTF-8?q?=EC=88=98=EC=A0=95,=20=ED=9E=88=EC=8A=A4=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EB=B0=B0=EC=97=B4=20filtering)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HistoryPhoneNumber/HistoryPhoneNumber.jsx | 34 ++++++++----- .../components/MobileSend/MobileSendPopUp.jsx | 50 ++++++++++++------- 2 files changed, 53 insertions(+), 31 deletions(-) diff --git a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx b/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx index 3cd66edb..1332f4e3 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useCallback } from "react"; import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; import { Spottable } from "@enact/spotlight/Spottable"; @@ -15,17 +15,31 @@ const Container = SpotlightContainerDecorator( export default function HistoryPhoneNumber({ handleClickSelect, - recentSentNumber, handleDelete, + recentSentNumber, }) { - const handleClickNumber = (number) => { - handleClickSelect(number); - }; + const handleClickNumber = useCallback( + (number) => () => { + if (handleClickSelect) { + handleClickSelect(number); + } + }, + [handleClickSelect] + ); + + const handleClickDelete = useCallback( + (index) => () => { + if (handleDelete) { + handleDelete(index); + } + }, + [handleDelete] + ); return ( <> {recentSentNumber && - recentSentNumber.length > 0 && + recentSentNumber.filter((number) => number !== "")?.length > 0 && recentSentNumber.map((number, index) => { return ( { - handleClickNumber(number); - }} + onClick={handleClickNumber(number)} className={css.phoneNumberList} > {number} { - handleDelete(index); - }} + onClick={handleClickDelete(index)} /> ); diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx index 3d3000fd..4f637e98 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx @@ -86,11 +86,8 @@ export default function MobileSendPopUp({ shopByMobileLogRef, spotlightId, }) { + const dispatch = useDispatch(); const deviceInfo = useSelector((state) => state.device.deviceInfo); - const [mobileNumber, setMobileNumber] = useState(""); - const [recentSentNumber, setRecentSentNumber] = useState([]); - const [keyPadOff, setKeyPadOff] = useState(false); - const [smsRetCode, setSmsRetCode] = useState(undefined); const { httpHeader } = useSelector((state) => state.common); const regDeviceInfoRetCode = useSelector( (state) => state.device?.regDeviceInfoData?.retCode @@ -106,11 +103,23 @@ export default function MobileSendPopUp({ ); const popupVisible = useSelector((state) => state.common.popup.popupVisible); const nowMenu = useSelector((state) => state.common.menu.nowMenu); - const deviceCountryCode = httpHeader["X-Device-Country"]; - const dispatch = useDispatch(); + + const [inputDisabled, setInputDisabled] = useState(true); + const [mobileNumber, setMobileNumber] = useState(""); + const [recentSentNumber, setRecentSentNumber] = useState([]); + const [keyPadOff, setKeyPadOff] = useState(false); + const [smsRetCode, setSmsRetCode] = useState(undefined); const agreeBtnClickedRef = useRef(false); + const deviceCountryCode = httpHeader["X-Device-Country"]; + + const mobileSendPopUpSpotlightId = useMemo(() => { + return !keyPadOff && recentSentNumber.length <= 0 + ? "keypad-number-1" + : "agreeAndSend"; + }, [keyPadOff, recentSentNumber]); + const getMaxNum = useCallback((_deviceCountryCode) => { if (_deviceCountryCode === "DE" || _deviceCountryCode === "GB") { return 11; @@ -236,16 +245,22 @@ export default function MobileSendPopUp({ } }, [deviceInfo, dispatch]); + useEffect(() => { + const timer = setTimeout(() => + setInputDisabled(mobileSendPopUpSpotlightId === "keypad-number-1") + ); + + return () => clearTimeout(timer); + }, [mobileSendPopUpSpotlightId]); + useEffect(() => { if (!agreeBtnClickedRef.current && recentSentNumber) { if (recentSentNumber.length > 0) { setKeyPadOff(true); setMobileNumber(recentSentNumber[0]); - setTimeout(() => Spotlight.focus("agreeAndSend")); } else { setKeyPadOff(false); setMobileNumber(""); - setTimeout(() => Spotlight.focus("keypad-number-1")); } } }, [recentSentNumber]); @@ -279,9 +294,6 @@ export default function MobileSendPopUp({ }, }) ); - setTimeout(() => { - spotlight.focus("history-container"); - }); } }; @@ -531,6 +543,7 @@ export default function MobileSendPopUp({ open={open} onClose={onClose} hasText + spotlightId={mobileSendPopUpSpotlightId} >
{productImg && ( @@ -570,7 +583,7 @@ export default function MobileSendPopUp({ {deviceCountryCode && deviceCountryCode === "RU" && ( {"+7 "} @@ -578,19 +591,18 @@ export default function MobileSendPopUp({ {mobileNumber} - {keyPadOff ? ( - + + + {keyPadOff && recentSentNumber.length > 0 ? ( - - ) : ( - + ) : ( - - )} + )} +
{deviceCountryCode && (