[MobileSendPopUp]

- HistoryPhoneNumber 작업
- retCode에 따른 alert 처리
- appDataRecuer : SEND_SMS,CLERA_SMS 추가
- appDataActions: clearSMS 추가
- localSettingsReducer:
initialLocalSettings phoneNumbers 추가

com.twin.app.shoptime/src/actions/actionTypes.js

@@ -36,6 +36,7 @@ export const types = {
   // appData actions
   ADD_MAIN_INDEX: "ADD_MAIN_INDEX",
   SEND_SMS: "SEND_SMS",
+  CLEAR_SMS: "CLEAR_SMS",
 
   // home actions
   GET_HOME_TERMS: "GET_HOME_TERMS",

com.twin.app.shoptime/src/actions/appDataActions.js

@@ -62,3 +62,7 @@ export const sendSms = (params) => (dispatch, getState) => {
     onFail
   );
 };
+
+export const clearSMS = () => ({
+  type: types.CLEAR_SMS,
+});

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

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+
+import { Spottable } from "@enact/spotlight/Spottable";
+
+import TButton from "../../TButton/TButton";
+import css from "./HistoryPhoneNumber.module.less";
+
+const SpottableComponent = Spottable("div");
+
+export default function HistoryPhoneNumber({
+  handleClickSelect,
+  recentSentNumber,
+  handleDelete,
+}) {
+  const handleClickNumber = (number) => {
+    handleClickSelect(number);
+  };
+
+  return (
+    <>
+      {recentSentNumber &&
+        recentSentNumber.length > 0 &&
+        recentSentNumber.map((number, index) => {
+          return (
+            <div
+              className={css.container}
+              key={"history-phone-number-" + index}
+            >
+              <SpottableComponent
+                onClick={() => {
+                  handleClickNumber(number);
+                }}
+                className={css.phoneNumberList}
+              >
+                {number}
+              </SpottableComponent>
+              <TButton
+                className={css.deleteButton}
+                onClick={() => {
+                  handleDelete(index);
+                }}
+              />
+            </div>
+          );
+        })}
+    </>
+  );
+}

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

@@ -0,0 +1,43 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.container {
+  width: 492px;
+  height: 68px;
+  display: flex;
+  align-items: center;
+
+  .phoneNumberList {
+    width: 437px;
+    height: 68px;
+    background-color: #434040;
+    .border-solid(@size:1px,@color:#cccccc);
+    color: @COLOR_WHITE;
+    padding: 18px 5px 18px 20px;
+    position: relative;
+
+    &:focus {
+      &::after {
+        .focused();
+      }
+    }
+    p {
+      color: @COLOR_WHITE;
+    }
+  }
+  .deleteButton {
+    background-image: url("../../../../assets/images/icons/ico-del-keyword.png");
+    min-width: 40px;
+    height: 40px;
+    background-color: transparent;
+    background-position: -4px -4px;
+    transition: none;
+    border-radius: 50%;
+
+    margin-left: 10px;
+
+    &:focus {
+      background-position: -4px -100px;
+    }
+  }
+}

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

@@ -5,9 +5,10 @@ import { PhoneNumberFormat, PhoneNumberUtil } from "google-libphonenumber";
 import { useDispatch, useSelector } from "react-redux";
 
 import { off, on } from "@enact/core/dispatcher";
+import { Spottable } from "@enact/spotlight/Spottable";
 
-import { sendSms } from "../../actions/appDataActions";
+import { clearSMS, sendSms } from "../../actions/appDataActions";
-import { setHidePopup } from "../../actions/commonActions";
+import { changeLocalSettings, setHidePopup } from "../../actions/commonActions";
 import {
   getDeviceAdditionInfo,
   registerDeviceInfo,
@@ -16,6 +17,7 @@ import { setEventIssueReq } from "../../actions/eventActions";
 import { $L } from "../../utils/helperMethods";
 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";
 
@@ -26,6 +28,8 @@ const instruction = $L(`
 By entering my mobile number, I agree to receive messages from LGE with information on how to purchase the product I selected. Message and data rates may apply. </span>
 `);
 
+const SpottableComponent = Spottable("div");
+
 export default function MobileSendPopUp({
   open,
   onClose,
@@ -48,10 +52,14 @@ export default function MobileSendPopUp({
   const deviceInfo = useSelector((state) => state.device.deviceInfo);
   const [mobileNumber, setMobileNumber] = useState("");
   const [recentSentNumber, setRecentSentNumber] = useState([]);
-  const [keyPadOff, setKeyPadOff] = useState(true);
+  const [keyPadOff, setKeyPadOff] = useState(false);
+  const [SMSRetCode, setSMSRetCode] = useState();
   const { httpHeader } = useSelector((state) => state.common);
-  const info = useSelector((state) => state.common.appStatus);
   const sendSmsSuccess = useSelector((state) => state.appData.sendSms);
+  const smsRetCode = useSelector((state) => state.appData.sendSms?.retCode);
+  const { phoneNumberList } = useSelector(
+    (state) => state.localSettings.phoneNumbers
+  );
   const deviceCountryCode = httpHeader["X-Device-Country"];
   const dispatch = useDispatch();
 
@@ -63,6 +71,16 @@ export default function MobileSendPopUp({
     } else return 10;
   };
 
+  const handleClickSelect = (_phoneNumber) => {
+    setKeyPadOff((state) => !state);
+    setMobileNumber(_phoneNumber);
+  };
+
+  const handleInputClick = () => {
+    setKeyPadOff(false);
+    if (recentSentNumber) setMobileNumber(recentSentNumber[0]);
+  };
+
   const getRawPhoneNumber = useCallback(
     (key) => {
       let rawPhoneNumber = `${mobileNumber}${key}`.replace(/\D/g, "");
@@ -135,11 +153,16 @@ export default function MobileSendPopUp({
     dispatch(getDeviceAdditionInfo());
   }, [dispatch]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (sendSmsSuccess?.retCode === 0) {
+    if (phoneNumberList) setRecentSentNumber(phoneNumberList);
-  //     console.log("#### 성공");
+  }, []);
-  //   }
+
-  // }, [sendSmsSuccess]);
+  useEffect(() => {
+    if (recentSentNumber && recentSentNumber.length > 0) {
+      setKeyPadOff(true);
+      setMobileNumber(recentSentNumber[0]);
+    } else setKeyPadOff(false);
+  }, [recentSentNumber]);
 
   const numKeypadClicked = useCallback(
     (key) => {
@@ -154,14 +177,66 @@ export default function MobileSendPopUp({
     [deviceCountryCode, mobileNumber]
   );
 
+  const handleDelete = (selectedIndex) => {
+    if (recentSentNumber) {
+      const updateItems = recentSentNumber.filter(
+        (_, index) => index !== selectedIndex
+      );
+      setRecentSentNumber(updateItems);
+      dispatch(
+        changeLocalSettings({
+          phoneNumbers: {
+            phoneNumberList: updateItems,
+          },
+        })
+      );
+    }
+  };
+
   const handleAgreeSendClick = useCallback(() => {
     if (!mobileNumber) return;
+
     let naturalNumber = mobileNumber.replace(/\D/g, "");
 
-    // TODO(jw) : RUSIA Check
+    if (deviceCountryCode === "KR") {
-    // if (deviceCountryCode === "RU") {
+      naturalNumber = "82" + naturalNumber;
-    //   naturalNumber = "7" + naturalNumber;
+    }
-    // }
+
+    if (recentSentNumber && recentSentNumber.length > 0) {
+      const updatedNumbers = [...recentSentNumber];
+
+      const existingNumberIndex = updatedNumbers.findIndex(
+        (existingNum) => existingNum === mobileNumber
+      );
+      if (existingNumberIndex !== -1) {
+        updatedNumbers.splice(existingNumberIndex, 1);
+      }
+
+      if (updatedNumbers.length >= 5) {
+        updatedNumbers.pop();
+      }
+
+      updatedNumbers.unshift(mobileNumber);
+
+      setRecentSentNumber(updatedNumbers);
+
+      dispatch(
+        changeLocalSettings({
+          phoneNumbers: {
+            phoneNumberList: updatedNumbers,
+          },
+        })
+      );
+    } else {
+      setRecentSentNumber([mobileNumber]);
+      dispatch(
+        changeLocalSettings({
+          phoneNumbers: {
+            phoneNumberList: [mobileNumber],
+          },
+        })
+      );
+    }
 
     if (isCurationEvnt) {
       // EVT00102 CURATION EVENT : 원하는 페이지로 이동(앱 내 모든 페이지) 미완
@@ -205,57 +280,126 @@ export default function MobileSendPopUp({
           mbphNo: naturalNumber,
         })
       );
-      // dispatch(setHidePopup());
     }
-  }, [dispatch, mobileNumber, smsTpCd, evntTpCd]);
+  }, [dispatch, mobileNumber, smsTpCd, evntTpCd, sendSmsSuccess]);
+
+  const _onClose = (e) => {
+    if (e.target) {
+      setSMSRetCode(undefined);
+    }
+    onClose();
+  };
+
+  useEffect(() => {
+    setSMSRetCode(smsRetCode);
+
+    if (smsRetCode === 0) {
+      setTimeout(() => {
+        dispatch(setHidePopup());
+      }, 3000);
+    }
+  }, [smsRetCode]);
+
+  useEffect(() => {
+    // smsRetCode initialize
+    return () => {
+      dispatch(clearSMS());
+    };
+  }, [dispatch]);
 
   return (
-    <TPopUp
+    <>
-      kind={"mobileSendPopup"}
+      {SMSRetCode === undefined && open && (
-      className={css.container}
+        <TPopUp
-      open={open}
+          kind={"mobileSendPopup"}
-      onClose={onClose}
+          className={css.container}
-      hasText
+          open={open}
-    >
+          onClose={onClose}
-      <div className={css.header}>
+          hasText
-        {productImg && (
-          <p className={css.productImg}>
-            <img className={css.img} src={productImg} alt="alt" />
-          </p>
-        )}
-        <div
-          className={classNames(css.textBox, !productImg && css.textBoxOnly)}
         >
-          {title && <div className={css.smsTitle}>{title}</div>}
+          <div className={css.header}>
-          {subTitle && (
+            {productImg && (
+              <p className={css.productImg}>
+                <img className={css.img} src={productImg} alt="alt" />
+              </p>
+            )}
             <div
               className={classNames(
-                css.subTitle,
+                css.textBox,
-                !productImg && css.subTitleOnly
+                !productImg && css.textBoxOnly
               )}
             >
-              {subTitle}
+              {title && <div className={css.smsTitle}>{title}</div>}
+              {subTitle && (
+                <div
+                  className={classNames(
+                    css.subTitle,
+                    !productImg && css.subTitleOnly
+                  )}
+                >
+                  {subTitle}
+                </div>
+              )}
+              {productPrice && <div className={css.price}>{productPrice}</div>}
             </div>
-          )}
-          {productPrice && <div className={css.price}>{productPrice}</div>}
-        </div>
-      </div>
-      <div className={css.smsArea}>
-        <div className={css.smsContainer}>
-          <div className={css.smsNumLayer}>
-            <div className={css.inputNum}>{mobileNumber}</div>
-            <SMSNumKeyPad onKeyDown={numKeypadClicked} />
           </div>
-        </div>
+          <div className={css.smsArea}>
-        <div
+            <div className={css.smsContainer}>
-          className={css.instruction}
+              <div className={css.smsNumLayer}>
-          dangerouslySetInnerHTML={{ __html: instruction }}
+                <SpottableComponent
-        ></div>
+                  className={css.inputNum}
-      </div>
+                  onClick={handleInputClick}
-      <div className={css.btnContainer}>
+                >
-        <TButton onClick={handleAgreeSendClick}>{$L("Agree and Send")}</TButton>
+                  {mobileNumber}
-        <TButton onClick={onClose}>{$L("Cancel")}</TButton>
+                </SpottableComponent>
-      </div>
+                {keyPadOff ? (
-    </TPopUp>
+                  <HistoryPhoneNumber
+                    handleClickSelect={handleClickSelect}
+                    handleDelete={handleDelete}
+                    recentSentNumber={recentSentNumber}
+                  />
+                ) : (
+                  <SMSNumKeyPad onKeyDown={numKeypadClicked} />
+                )}
+              </div>
+            </div>
+            <div
+              className={css.instruction}
+              dangerouslySetInnerHTML={{ __html: instruction }}
+            ></div>
+          </div>
+          <div className={css.btnContainer}>
+            <TButton onClick={handleAgreeSendClick}>
+              {$L("Agree and Send")}
+            </TButton>
+            <TButton onClick={onClose}>{$L("Cancel")}</TButton>
+          </div>
+        </TPopUp>
+      )}
+      {SMSRetCode === 907 ||
+        (SMSRetCode === 900 && (
+          <TPopUp
+            kind="exitPopup"
+            open={true}
+            hasText
+            text={$L(
+              `Only ${getMaxNum(
+                deviceCountryCode
+              )} digits is permitted. Please check again`
+            )}
+            onClick={_onClose}
+            hasButton
+            button1Text={$L("OK")}
+          />
+        ))}
+      {SMSRetCode === 0 && (
+        <TPopUp
+          kind="exitPopup"
+          open={true}
+          hasText
+          text={$L(`Text Send ${mobileNumber}`)}
+        />
+      )}
+    </>
   );
 }

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

@@ -79,6 +79,7 @@
       .flex(@justifyCenter: space-between, @alignCenter: flex-start);
       .smsNumLayer {
         .inputNum {
+          position: relative;
           padding: 18px 5px 18px 20px;
           width: 437px;
           .border-solid(@size:1px,#cccccc);
@@ -86,10 +87,11 @@
           cursor: text;
           font-weight: normal;
           font-size: 28px;
-          &::after {
+
-            content: "";
+          &:focus {
-            width: 2px;
+            &::after {
-            height: 100%;
+              .focused();
+            }
           }
         }
         min-width: 437px;

com.twin.app.shoptime/src/reducers/appDataReducer.js

@@ -2,6 +2,7 @@ import { types } from "../actions/actionTypes";
 
 const initialState = {
   mainIndex: null,
+  sendSms: {},
 };
 
 export const appDataReducer = (state = initialState, action) => {
@@ -10,9 +11,17 @@ export const appDataReducer = (state = initialState, action) => {
       return {
         ...state,
         mainIndex: action.payload,
-        retCode: action.retCode,
       };
-
+    case types.SEND_SMS:
+      return {
+        ...state,
+        sendSms: { retCode: action.retCode },
+      };
+    case types.CLEAR_SMS:
+      return {
+        ...state,
+        sendSms: { retCode: undefined },
+      };
     default:
       return state;
   }

com.twin.app.shoptime/src/reducers/localSettingsReducer.js

@@ -6,6 +6,7 @@ const initialLocalSettings = {
   serverType: Config.DEFAULT_SERVERTYPE,
   ricCodeSetting: Config.DEFAULT_RIC_CODE,
   accessToken: null,
+  phoneNumbers: {},
 };
 
 const updateInitialLocalSettings = () => {