[MobileSendPopUp] SHOPTIME-2631 : SBM popup open default focus

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

@@ -1,43 +1,63 @@
-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 { 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" },
@@ -87,6 +107,7 @@ export default function MobileSendPopUp({
   const curationCouponSuccess = useSelector(
     (state) => state.event.curationCouponSuccess
   );
+  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
   const deviceCountryCode = httpHeader["X-Device-Country"];
   const dispatch = useDispatch();
 
@@ -354,6 +375,8 @@ export default function MobileSendPopUp({
       }
       onClose();
       dispatch(setShowPopup(ACTIVE_POPUP.smsPopup));
+
+      setTimeout(() => Spotlight.focus("agreeAndSend"));
     },
     [dispatch, smsRetCode]
   );
@@ -381,6 +404,8 @@ export default function MobileSendPopUp({
 
           sendLogShopByMobile(params);
           shopByMobileLogRef.current = null;
+
+          Spotlight.focus();
         }
       }, 3000);
 
@@ -459,9 +484,16 @@ export default function MobileSendPopUp({
     }
   }, [curationCouponSuccess, mobileNumber]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      Spotlight.focus("agreeAndSend");
+    });
+  }, [dispatch]);
+
   const retCodeError =
     (smsRetCode !== undefined && smsRetCode !== 0) ||
     (curationCouponSuccess !== undefined && curationCouponSuccess !== 0);
+
   return (
     <>
       {smsRetCode === undefined &&
@@ -542,7 +574,10 @@ export default function MobileSendPopUp({
               </div>
             </div>
             <div className={css.btnContainer}>
-              <TButton onClick={handleAgreeSendClick}>
+              <TButton
+                onClick={handleAgreeSendClick}
+                spotlightId={"agreeAndSend"}
+              >
                 {$L("Agree and Send")}
               </TButton>
               <TButton onClick={onClose}>{$L("Cancel")}</TButton>
@@ -552,7 +587,7 @@ export default function MobileSendPopUp({
       {retCodeError && (
         <TPopUp
           kind="textPopup"
-          open={true}
+          open={popupVisible}
           hasText
           text={smsTpCd ? getSmsErrorMsg : getEvntErrorMsg}
           onClick={_onClose}
@@ -563,7 +598,12 @@ export default function MobileSendPopUp({
       {(smsRetCode === 0 ||
         regDeviceInfoRetCode === 0 ||
         regDeviceInfoRetCode === 0) && (
-        <TPopUp kind="textPopup" open={true} hasText text={MSG_SUCCESS_SENT} />
+        <TPopUp
+          kind="textPopup"
+          open={popupVisible}
+          hasText
+          text={MSG_SUCCESS_SENT}
+        />
       )}
     </>
   );