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