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 && (