[MobileSendPopUp]

- SHOPTIME-2631 fix
- keypadOff 일 경우 Input focusDisabled
- mobileNumber 전부 입력시 agree button focus
- 최근 번호 없을 경우 initial focus keypad-num-1 로 적용

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 (
-            <div
+            <Container
               className={css.container}
               key={"history-phone-number-" + index}
             >
@@ -40,7 +46,7 @@ export default function HistoryPhoneNumber({
                   handleDelete(index);
                 }}
               />
-            </div>
+            </Container>
           );
         })}
     </>

com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx

@@ -1,63 +1,44 @@
-import React, {
+import React, { useCallback, useEffect, useMemo, useState } from "react";
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
 
-import classNames from 'classnames';
+import classNames from "classnames";
 import {
   AsYouTypeFormatter,
   PhoneNumberFormat,
   PhoneNumberUtil,
-} from 'google-libphonenumber';
+} from "google-libphonenumber";
-import {
+import { useDispatch, useSelector } from "react-redux";
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 
-import {
+import { off, on } from "@enact/core/dispatcher";
-  off,
+import { Spotlight } from "@enact/spotlight";
-  on,
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-} from '@enact/core/dispatcher';
+import { Spottable } from "@enact/spotlight/Spottable";
-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 defaultImage from "../../../assets/images/img-thumb-empty-144@3x.png";
-import { types } from '../../actions/actionTypes';
+import { types } from "../../actions/actionTypes";
-import {
+import { clearSMS, sendSms } from "../../actions/appDataActions";
-  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';
+} from "../../actions/eventActions";
-import useLogService from '../../hooks/useLogService';
+import useLogService from "../../hooks/useLogService";
-import {
+import { ACTIVE_POPUP, LOG_TP_NO } from "../../utils/Config";
-  ACTIVE_POPUP,
+import { $L } from "../../utils/helperMethods";
-  LOG_TP_NO,
+import CustomImage from "../CustomImage/CustomImage";
-} from '../../utils/Config';
+import TButton from "../TButton/TButton";
-import { $L } from '../../utils/helperMethods';
+import TPopUp from "../TPopUp/TPopUp";
-import CustomImage from '../CustomImage/CustomImage';
+import HistoryPhoneNumber from "./HistoryPhoneNumber/HistoryPhoneNumber";
-import TButton from '../TButton/TButton';
+import css from "./MobileSendPopUp.module.less";
-import TPopUp from '../TPopUp/TPopUp';
+import SMSNumKeyPad from "./SMSNumKeyPad";
-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");
+    if (keyPadOff) {
-    setTimeout(() => {
+      Spotlight.focus("agreeAndSend");
       setSpotlightDisabled(false);
-    });
+    } else {
-  }, [deviceInfo]);
+      setSpotlightDisabled(true);
+      Spotlight.focus("keypad-number-1");
+    }
+  }, [keyPadOff]);
 
   const retCodeError =
     (smsRetCode !== undefined && smsRetCode !== 0) ||
@@ -543,13 +530,11 @@ export default function MobileSendPopUp({
             </div>
             <div className={css.smsArea}>
               <div className={css.smsContainer}>
-                <Container
+                <Container className={css.smsNumLayer}>
-                  className={css.smsNumLayer}
-                  spotlightDisabled={spotlightDisabled}
-                >
                   <SpottableComponent
                     className={css.inputNum}
                     onClick={handleInputClick}
+                    spotlightDisabled={spotlightDisabled}
                   >
                     {mobileNumber}
                   </SpottableComponent>
@@ -578,7 +563,7 @@ export default function MobileSendPopUp({
                 </span>
               </div>
             </div>
-            <div className={css.btnContainer}>
+            <Container className={css.btnContainer}>
               <TButton
                 onClick={handleAgreeSendClick}
                 spotlightId={"agreeAndSend"}
@@ -586,7 +571,7 @@ export default function MobileSendPopUp({
                 {$L("Agree and Send")}
               </TButton>
               <TButton onClick={onClose}>{$L("Cancel")}</TButton>
-            </div>
+            </Container>
           </TPopUp>
         )}
       {retCodeError && (

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 {
-        .inputNum {
+        position: relative;
-          position: relative;
+        padding: 18px 5px 18px 20px;
-          padding: 18px 5px 18px 20px;
+        width: 437px;
-          width: 437px;
+        .border-solid(@size:1px,#cccccc);
-          .border-solid(@size:1px,#cccccc);
+        height: 68px;
-          height: 68px;
+        cursor: text;
-          cursor: text;
+        font-weight: normal;
-          font-weight: normal;
+        font-size: 28px;
-          font-size: 28px;
 
-          &:focus {
+        &:focus {
-            &::after {
+          &::after {
-              .focused();
+            .focused();
-            }
           }
         }
-        min-width: 437px;
-        max-width: 497px;
-        margin: 0 70px 0 60px;
       }
+      min-width: 437px;
+      max-width: 497px;
+      margin: 0 70px 0 60px;
     }
 
     .instruction {

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 {
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-  SpotlightContainerDecorator,
+import Spottable from "@enact/spotlight/Spottable";
-} 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}
       </SpottableComponent>
@@ -39,25 +38,27 @@ export default function SMSNumKeyPad({ onKeyDown }) {
   );
 
   return (
-    <div className={css.container}>
+    <Container className={css.container}>
-      <Container className={css.btnContainer}>
+      {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))}
-        {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))}
+      <SpottableComponent
-        <SpottableComponent
+        className={classNames(css.btn, css.btnDelete)}
-          className={classNames(css.btn, css.btnDelete)}
+        onClick={_onKeyDown("backspace")}
-          onClick={_onKeyDown("backspace")}
+        aria-label="Delete Key"
-          aria-label="Delete Key"
+      />
-        />
+      <SpottableComponent
-        <SpottableComponent className={css.btn} onClick={_onKeyDown(0)}>
+        className={css.btn}
-          0
+        onClick={_onKeyDown(0)}
-        </SpottableComponent>
+        spotlightId="keypad-number-0"
-        <SpottableComponent
+      >
-          className={classNames(css.btn, css.btnBack)}
+        0
-          onClick={_onKeyDown("clear")}
+      </SpottableComponent>
-          aria-label="Clear Key"
+      <SpottableComponent
-        >
+        className={classNames(css.btn, css.btnBack)}
-          Clear
+        onClick={_onKeyDown("clear")}
-        </SpottableComponent>
+        aria-label="Clear Key"
-      </Container>
+      >
-    </div>
+        Clear
+      </SpottableComponent>
+    </Container>
   );
 }

com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less

@@ -11,30 +11,28 @@
     font-weight: normal;
     font-size: 28px;
   }
-  .btnContainer {
+  width: 441px;
-    width: 441px;
+  .btn {
-    .btn {
+    .flex();
-      .flex();
+    outline: none;
-      outline: none;
+    width: 145px;
-      width: 145px;
+    height: 70px;
-      height: 70px;
+    margin: 0 1px 1px 0;
-      margin: 0 1px 1px 0;
+    background-color: #434040;
-      background-color: #434040;
+    color: #ffffff;
-      color: #ffffff;
+    font-size: 34px;
-      font-size: 34px;
+    letter-spacing: -0.5px;
-      letter-spacing: -0.5px;
+    text-align: center;
-      text-align: center;
+    float: left;
-      float: left;
 
-      &.btnDelete {
+    &.btnDelete {
-        background-image: url("../../../assets//images/deltxt.png");
+      background-image: url("../../../assets//images/deltxt.png");
-        .imgElement(37px,27px,center,center);
+      .imgElement(37px,27px,center,center);
-      }
+    }
 
-      &:focus {
+    &:focus {
-        background-color: @PRIMARY_COLOR_RED;
+      background-color: @PRIMARY_COLOR_RED;
-        color: @COLOR_WHITE;
+      color: @COLOR_WHITE;
-      }
     }
   }
 }