[MobileSendPopUp]

- SHOPTIME-2631 fix - keypadOff 일 경우 Input focusDisabled - mobileNumber 전부 입력시 agree button focus - 최근 번호 없을 경우 initial focus keypad-num-1 로 적용
2024-07-01 15:43:39 +09:00
parent 9293b8d3da
commit e670f62a69
5 changed files with 109 additions and 121 deletions
--- 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 (
-            <div
+            <Container
              className={css.container}
              key={"history-phone-number-" + index}
            >
@@ -40,7 +46,7 @@ export default function HistoryPhoneNumber({
                  handleDelete(index);
                }}
              />
-            </div>
+            </Container>
          );
        })}
    </>
--- 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(() => {
+    if (keyPadOff) {
      Spotlight.focus("agreeAndSend");
-    setTimeout(() => {
      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({
            </div>
            <div className={css.smsArea}>
              <div className={css.smsContainer}>
-                <Container
-                  className={css.smsNumLayer}
-                  spotlightDisabled={spotlightDisabled}
-                >
+                <Container className={css.smsNumLayer}>
                  <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 && (
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less
@@ -77,7 +77,6 @@
      width: 571px;
      flex: none;
      .flex(@justifyCenter: space-between, @alignCenter: flex-start);
-      .smsNumLayer {
      .inputNum {
        position: relative;
        padding: 18px 5px 18px 20px;
@@ -98,7 +97,6 @@
      max-width: 497px;
      margin: 0 70px 0 60px;
    }
-    }

    .instruction {
      margin-right: 80px;
--- 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}
      </SpottableComponent>
@@ -39,15 +38,18 @@ export default function SMSNumKeyPad({ onKeyDown }) {
  );

  return (
-    <div className={css.container}>
-      <Container className={css.btnContainer}>
+    <Container className={css.container}>
      {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))}
      <SpottableComponent
        className={classNames(css.btn, css.btnDelete)}
        onClick={_onKeyDown("backspace")}
        aria-label="Delete Key"
      />
-        <SpottableComponent className={css.btn} onClick={_onKeyDown(0)}>
+      <SpottableComponent
+        className={css.btn}
+        onClick={_onKeyDown(0)}
+        spotlightId="keypad-number-0"
+      >
        0
      </SpottableComponent>
      <SpottableComponent
@@ -58,6 +60,5 @@ export default function SMSNumKeyPad({ onKeyDown }) {
        Clear
      </SpottableComponent>
    </Container>
-    </div>
  );
 }
--- a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less
+++ b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less
@@ -11,7 +11,6 @@
    font-weight: normal;
    font-size: 28px;
  }
-  .btnContainer {
  width: 441px;
  .btn {
    .flex();
@@ -37,4 +36,3 @@
    }
  }
 }
-}