[MobileSendPopUp]

- HistoryPhoneNumber 작업 - retCode에 따른 alert 처리 - appDataRecuer : SEND_SMS,CLERA_SMS 추가 - appDataActions: clearSMS 추가 - localSettingsReducer: initialLocalSettings phoneNumbers 추가
2024-05-09 17:56:19 +09:00
parent 6c4fd158b6
commit 0011f8a725
9 changed files with 313 additions and 61 deletions
--- a/com.twin.app.shoptime/assets/images/icons/ico-del-keyword.png
+++ b/com.twin.app.shoptime/assets/images/icons/ico-del-keyword.png
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/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",
--- a/com.twin.app.shoptime/src/actions/appDataActions.js
+++ b/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,
+});
--- a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx
+++ b/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>
+          );
+        })}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.module.less
+++ b/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;
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
+++ b/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 { setHidePopup } from "../../actions/commonActions";
+import { clearSMS, sendSms } from "../../actions/appDataActions";
+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(() => {
-  //   if (sendSmsSuccess?.retCode === 0) {
-  //     console.log("#### 성공");
-  //   }
-  // }, [sendSmsSuccess]);
+  useEffect(() => {
+    if (phoneNumberList) setRecentSentNumber(phoneNumberList);
+  }, []);
+
+  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 === "RU") {
-    //   naturalNumber = "7" + naturalNumber;
-    // }
+    if (deviceCountryCode === "KR") {
+      naturalNumber = "82" + 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"}
-      className={css.container}
-      open={open}
-      onClose={onClose}
-      hasText
-    >
-      <div className={css.header}>
-        {productImg && (
-          <p className={css.productImg}>
-            <img className={css.img} src={productImg} alt="alt" />
-          </p>
-        )}
-        <div
-          className={classNames(css.textBox, !productImg && css.textBoxOnly)}
+    <>
+      {SMSRetCode === undefined && open && (
+        <TPopUp
+          kind={"mobileSendPopup"}
+          className={css.container}
+          open={open}
+          onClose={onClose}
+          hasText
        >
-          {title && <div className={css.smsTitle}>{title}</div>}
-          {subTitle && (
+          <div className={css.header}>
+            {productImg && (
+              <p className={css.productImg}>
+                <img className={css.img} src={productImg} alt="alt" />
+              </p>
+            )}
            <div
              className={classNames(
-                css.subTitle,
-                !productImg && css.subTitleOnly
+                css.textBox,
+                !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.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>
+          <div className={css.smsArea}>
+            <div className={css.smsContainer}>
+              <div className={css.smsNumLayer}>
+                <SpottableComponent
+                  className={css.inputNum}
+                  onClick={handleInputClick}
+                >
+                  {mobileNumber}
+                </SpottableComponent>
+                {keyPadOff ? (
+                  <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}`)}
+        />
+      )}
+    </>
  );
 }
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less
+++ b/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: "";
-            width: 2px;
-            height: 100%;
+
+          &:focus {
+            &::after {
+              .focused();
+            }
          }
        }
        min-width: 437px;
--- a/com.twin.app.shoptime/src/reducers/appDataReducer.js
+++ b/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;
  }
--- a/com.twin.app.shoptime/src/reducers/localSettingsReducer.js
+++ b/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 = () => {