From e670f62a6949dce4c8e3265395d5efa791a416f4 Mon Sep 17 00:00:00 2001 From: "jiwon93.son" Date: Mon, 1 Jul 2024 15:43:39 +0900 Subject: [PATCH] =?UTF-8?q?[MobileSendPopUp]=20-=20SHOPTIME-2631=20fix=20-?= =?UTF-8?q?=20keypadOff=20=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20Input=20focusDi?= =?UTF-8?q?sabled=20-=20mobileNumber=20=EC=A0=84=EB=B6=80=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=8B=9C=20agree=20button=20focus=20-=20=EC=B5=9C?= =?UTF-8?q?=EA=B7=BC=20=EB=B2=88=ED=98=B8=20=EC=97=86=EC=9D=84=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20initial=20focus=20keypad-num-1=20=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HistoryPhoneNumber/HistoryPhoneNumber.jsx | 10 ++- .../components/MobileSend/MobileSendPopUp.jsx | 89 ++++++++----------- .../MobileSend/MobileSendPopUp.module.less | 32 ++++--- .../components/MobileSend/SMSNumKeyPad.jsx | 57 ++++++------ .../MobileSend/SMSNumKeyPad.module.less | 42 +++++---- 5 files changed, 109 insertions(+), 121 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 3e9fe36c..3cd66edb 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; import { Spottable } from "@enact/spotlight/Spottable"; import TButton from "../../TButton/TButton"; @@ -7,6 +8,11 @@ import css from "./HistoryPhoneNumber.module.less"; const SpottableComponent = Spottable("div"); +const Container = SpotlightContainerDecorator( + { enterTo: "default-element" }, + "div" +); + export default function HistoryPhoneNumber({ handleClickSelect, recentSentNumber, @@ -22,7 +28,7 @@ export default function HistoryPhoneNumber({ recentSentNumber.length > 0 && recentSentNumber.map((number, index) => { return ( -
@@ -40,7 +46,7 @@ export default function HistoryPhoneNumber({ handleDelete(index); }} /> -
+ ); })} diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx index 53a88a4d..bf32123b 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx @@ -1,63 +1,44 @@ -import React, { - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from "react"; -import classNames from 'classnames'; +import classNames from "classnames"; import { AsYouTypeFormatter, PhoneNumberFormat, PhoneNumberUtil, -} from 'google-libphonenumber'; -import { - useDispatch, - useSelector, -} from 'react-redux'; +} from "google-libphonenumber"; +import { useDispatch, useSelector } from "react-redux"; -import { - off, - on, -} from '@enact/core/dispatcher'; -import { Spotlight } from '@enact/spotlight'; -import { - SpotlightContainerDecorator, -} from '@enact/spotlight/SpotlightContainerDecorator'; -import { Spottable } from '@enact/spotlight/Spottable'; +import { off, on } from "@enact/core/dispatcher"; +import { Spotlight } from "@enact/spotlight"; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; +import { Spottable } from "@enact/spotlight/Spottable"; -import defaultImage from '../../../assets/images/img-thumb-empty-144@3x.png'; -import { types } from '../../actions/actionTypes'; -import { - clearSMS, - sendSms, -} from '../../actions/appDataActions'; +import defaultImage from "../../../assets/images/img-thumb-empty-144@3x.png"; +import { types } from "../../actions/actionTypes"; +import { clearSMS, sendSms } from "../../actions/appDataActions"; import { changeLocalSettings, setHidePopup, setShowPopup, -} from '../../actions/commonActions'; +} from "../../actions/commonActions"; import { clearRegisterDeviceInfo, getDeviceAdditionInfo, registerDeviceInfo, -} from '../../actions/deviceActions'; +} from "../../actions/deviceActions"; import { clearCurationCoupon, setEventIssueReq, -} from '../../actions/eventActions'; -import useLogService from '../../hooks/useLogService'; -import { - ACTIVE_POPUP, - LOG_TP_NO, -} from '../../utils/Config'; -import { $L } from '../../utils/helperMethods'; -import CustomImage from '../CustomImage/CustomImage'; -import TButton from '../TButton/TButton'; -import TPopUp from '../TPopUp/TPopUp'; -import HistoryPhoneNumber from './HistoryPhoneNumber/HistoryPhoneNumber'; -import css from './MobileSendPopUp.module.less'; -import SMSNumKeyPad from './SMSNumKeyPad'; +} from "../../actions/eventActions"; +import useLogService from "../../hooks/useLogService"; +import { ACTIVE_POPUP, LOG_TP_NO } from "../../utils/Config"; +import { $L } from "../../utils/helperMethods"; +import CustomImage from "../CustomImage/CustomImage"; +import TButton from "../TButton/TButton"; +import TPopUp from "../TPopUp/TPopUp"; +import HistoryPhoneNumber from "./HistoryPhoneNumber/HistoryPhoneNumber"; +import css from "./MobileSendPopUp.module.less"; +import SMSNumKeyPad from "./SMSNumKeyPad"; const Container = SpotlightContainerDecorator( { enterTo: "last-focused" }, @@ -136,6 +117,9 @@ export default function MobileSendPopUp({ const getRawPhoneNumber = useCallback( (key) => { let rawPhoneNumber = `${mobileNumber}${key}`.replace(/\D/g, ""); + if (rawPhoneNumber.length === getMaxNum(deviceCountryCode)) { + Spotlight.focus("agreeAndSend"); + } if (rawPhoneNumber.length > getMaxNum(deviceCountryCode)) { return; } @@ -486,11 +470,14 @@ export default function MobileSendPopUp({ }, [curationCouponSuccess, mobileNumber]); useEffect(() => { - Spotlight.focus("agreeAndSend"); - setTimeout(() => { + if (keyPadOff) { + Spotlight.focus("agreeAndSend"); setSpotlightDisabled(false); - }); - }, [deviceInfo]); + } else { + setSpotlightDisabled(true); + Spotlight.focus("keypad-number-1"); + } + }, [keyPadOff]); const retCodeError = (smsRetCode !== undefined && smsRetCode !== 0) || @@ -543,13 +530,11 @@ export default function MobileSendPopUp({
- + {mobileNumber} @@ -578,7 +563,7 @@ export default function MobileSendPopUp({
-
+ {$L("Cancel")} -
+ )} {retCodeError && ( diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less index 7c78bdb8..7f38dffa 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less +++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less @@ -77,27 +77,25 @@ width: 571px; flex: none; .flex(@justifyCenter: space-between, @alignCenter: flex-start); - .smsNumLayer { - .inputNum { - position: relative; - padding: 18px 5px 18px 20px; - width: 437px; - .border-solid(@size:1px,#cccccc); - height: 68px; - cursor: text; - font-weight: normal; - font-size: 28px; + .inputNum { + position: relative; + padding: 18px 5px 18px 20px; + width: 437px; + .border-solid(@size:1px,#cccccc); + height: 68px; + cursor: text; + font-weight: normal; + font-size: 28px; - &:focus { - &::after { - .focused(); - } + &:focus { + &::after { + .focused(); } } - min-width: 437px; - max-width: 497px; - margin: 0 70px 0 60px; } + min-width: 437px; + max-width: 497px; + margin: 0 70px 0 60px; } .instruction { diff --git a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx index 8b9ecee2..278f15ec 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx @@ -1,16 +1,14 @@ -import React, { useCallback } from 'react'; +import React, { useCallback } from "react"; -import classNames from 'classnames'; +import classNames from "classnames"; -import { - SpotlightContainerDecorator, -} from '@enact/spotlight/SpotlightContainerDecorator'; -import Spottable from '@enact/spotlight/Spottable'; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; -import css from './SMSNumKeyPad.module.less'; +import css from "./SMSNumKeyPad.module.less"; const Container = SpotlightContainerDecorator( - { enterTo: "last-focused" }, + { defaultElement: `[data-spotlight-id="keypad-number-1"]` }, "div" ); @@ -23,6 +21,7 @@ export default function SMSNumKeyPad({ onKeyDown }) { className={css.btn} onClick={_onKeyDown(value)} key={`button : ${idx}`} + spotlightId={"keypad-number-" + value} > {value} @@ -39,25 +38,27 @@ export default function SMSNumKeyPad({ onKeyDown }) { ); return ( -
- - {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))} - - - 0 - - - Clear - - -
+ + {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))} + + + 0 + + + Clear + + ); } diff --git a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less index b90d8fda..f7cc8783 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less +++ b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less @@ -11,30 +11,28 @@ font-weight: normal; font-size: 28px; } - .btnContainer { - width: 441px; - .btn { - .flex(); - outline: none; - width: 145px; - height: 70px; - margin: 0 1px 1px 0; - background-color: #434040; - color: #ffffff; - font-size: 34px; - letter-spacing: -0.5px; - text-align: center; - float: left; + width: 441px; + .btn { + .flex(); + outline: none; + width: 145px; + height: 70px; + margin: 0 1px 1px 0; + background-color: #434040; + color: #ffffff; + font-size: 34px; + letter-spacing: -0.5px; + text-align: center; + float: left; - &.btnDelete { - background-image: url("../../../assets//images/deltxt.png"); - .imgElement(37px,27px,center,center); - } + &.btnDelete { + background-image: url("../../../assets//images/deltxt.png"); + .imgElement(37px,27px,center,center); + } - &:focus { - background-color: @PRIMARY_COLOR_RED; - color: @COLOR_WHITE; - } + &:focus { + background-color: @PRIMARY_COLOR_RED; + color: @COLOR_WHITE; } } }