[HotPicksPanel]

- handlePopupOpen : eventApi 및 로직 변경
2024-06-14 15:47:10 +09:00
parent 4f666f286d
commit 2eb6c416ff
4 changed files with 179 additions and 132 deletions
--- a/com.twin.app.shoptime/src/actions/eventActions.js
+++ b/com.twin.app.shoptime/src/actions/eventActions.js
@@ -32,13 +32,14 @@ export const getWelcomeEventInfo = () => (dispatch, getState) => {

 // 이벤트(쿠폰) 지급 요청 (IF-LGSP-071)
 export const setEventIssueReq = (params) => (dispatch, getState) => {
-  const { evntTpCd, evntId, mbphNo } = params;
+  const { evntTpCd, evntId, mbphNo, cntryCd } = params;
  const onSuccess = (response) => {
    console.log("setEventIssueReq onSuccess ", response.data);

    dispatch({
      type: types.SET_EVENT_ISSUE_REQ,
      payload: response.data.data,
+      retCode: response.data.retCode,
    });
  };

@@ -52,7 +53,7 @@ export const setEventIssueReq = (params) => (dispatch, getState) => {
    "post",
    URLS.SET_EVENT_ISSUE_REQ,
    {},
-    { evntTpCd, evntId, mbphNo },
+    { evntTpCd, evntId, mbphNo, cntryCd },
    onSuccess,
    onFail
  );
@@ -126,3 +127,7 @@ export const skipClickInfo = (status) => ({
 export const clearEventInfo = () => ({
  type: types.CLEAR_EVENT_INFO,
 });
+
+export const clearCurationCoupon = () => ({
+  type: types.CLEAR_CURATION_COUPON,
+});
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
@@ -1,58 +1,43 @@
-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 { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import { Spottable } from "@enact/spotlight/Spottable";

-import defaultImage from '../../../assets/images/img-thumb-empty-144@3x.png';
-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';
-import { setEventIssueReq } from '../../actions/eventActions';
-import useLogService from '../../hooks/useLogService';
+} from "../../actions/deviceActions";
 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';
+  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";

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
@@ -75,6 +60,7 @@ export default function MobileSendPopUp({
  patnrId,
  evntId,
  evntTpCd,
+  isCurationEvnt,
  hotelId,
  hotelNm,
  hotelDtlUrl,
@@ -97,6 +83,9 @@ export default function MobileSendPopUp({
  const { phoneNumberList } = useSelector(
    (state) => state.localSettings.phoneNumbers
  );
+  const curationCouponSuccess = useSelector(
+    (state) => state.event.curationCouponSuccess
+  );
  const deviceCountryCode = httpHeader["X-Device-Country"];
  const dispatch = useDispatch();

@@ -302,6 +291,17 @@ export default function MobileSendPopUp({
      );
    }

+    if (isCurationEvnt) {
+      dispatch(
+        setEventIssueReq({
+          evntTpCd,
+          evntId,
+          mbphNo: naturalNumber,
+          cntryCd: deviceCountryCode,
+        })
+      );
+      return;
+    }
    if (deviceInfo && smsTpCd) {
      let params = {
        dvcIndex: deviceInfo.dvcIndex,
@@ -335,12 +335,20 @@ export default function MobileSendPopUp({
        })
      );
    }
-  }, [dispatch, mobileNumber, smsTpCd, evntTpCd, deviceInfo]);
+  }, [
+    dispatch,
+    mobileNumber,
+    smsTpCd,
+    evntTpCd,
+    deviceInfo,
+    deviceCountryCode,
+  ]);

  const _onClose = useCallback(
    (e) => {
      if (e.target) {
        dispatch(clearSMS());
+        dispatch(clearCurationCoupon());
        setSmsRetCode(undefined);
      }
      onClose();
@@ -354,7 +362,11 @@ export default function MobileSendPopUp({

    let timer;

-    if (smsRetCodeResData === 0 || regDeviceInfoRetCode === 0) {
+    if (
+      smsRetCodeResData === 0 ||
+      regDeviceInfoRetCode === 0 ||
+      curationCouponSuccess === 0
+    ) {
      timer = setTimeout(() => {
        dispatch(setHidePopup());

@@ -378,13 +390,15 @@ export default function MobileSendPopUp({
    shopByMobileLogRef,
    smsRetCodeResData,
    regDeviceInfoRetCode,
+    curationCouponSuccess,
  ]);

  useEffect(() => {
-    // smsRetCode initialize
+    // retCode initialize
    return () => {
      dispatch(clearSMS());
      dispatch(clearRegisterDeviceInfo());
+      dispatch(clearCurationCoupon());
      dispatch(setHidePopup());
    };
  }, [dispatch]);
@@ -433,11 +447,29 @@ export default function MobileSendPopUp({
    }
  }, [smsRetCode]);

+  const getEvntErrorMsg = useMemo(() => {
+    if (curationCouponSuccess === 600) {
+      return $L("This device had received first time coupon.");
+    } else if (curationCouponSuccess === 601) {
+      return $L("There is no coupon.");
+    } else {
+      return $L("Failed to sent text to {mobileNumber}").replace(
+        "{mobileNumber}",
+        mobileNumber
+      );
+    }
+  }, [curationCouponSuccess, mobileNumber]);
+
+  const retCodeError =
+    (smsRetCode !== undefined && smsRetCode !== 0) ||
+    (curationCouponSuccess !== undefined && curationCouponSuccess !== 0);
+
  return (
    <>
      {smsRetCode === undefined &&
        open &&
-        regDeviceInfoRetCode === undefined && (
+        regDeviceInfoRetCode === undefined &&
+        curationCouponSuccess === undefined && (
          <TPopUp
            kind={"mobileSendPopup"}
            className={css.container}
@@ -519,18 +551,20 @@ export default function MobileSendPopUp({
            </div>
          </TPopUp>
        )}
-      {smsRetCode !== undefined && smsRetCode !== 0 && (
+      {retCodeError && (
        <TPopUp
          kind="textPopup"
          open={true}
          hasText
-          text={getSmsErrorMsg}
+          text={smsTpCd ? getSmsErrorMsg : getEvntErrorMsg}
          onClick={_onClose}
          hasButton
          button1Text={$L("OK")}
        />
      )}
-      {(smsRetCode === 0 || regDeviceInfoRetCode === 0) && (
+      {(smsRetCode === 0 ||
+        regDeviceInfoRetCode === 0 ||
+        regDeviceInfoRetCode === 0) && (
        <TPopUp kind="textPopup" open={true} hasText text={MSG_SUCCESS_SENT} />
      )}
    </>
--- a/com.twin.app.shoptime/src/reducers/eventReducer.js
+++ b/com.twin.app.shoptime/src/reducers/eventReducer.js
@@ -3,6 +3,7 @@ import { types } from "../actions/actionTypes";
 const initialState = {
  eventData: {},
  eventClickSuccess: null,
+  curationCouponSuccess: undefined,
 };

 export const eventReducer = (state = initialState, action) => {
@@ -18,12 +19,22 @@ export const eventReducer = (state = initialState, action) => {
        ...state,
        eventClickSuccess: action.retCode,
      };
+    case types.SET_EVENT_ISSUE_REQ:
+      return {
+        ...state,
+        curationCouponSuccess: action.retCode,
+      };
    case types.CLEAR_EVENT_INFO:
      return {
        ...state,
        eventData: {},
        retCode: null,
      };
+    case types.CLEAR_CURATION_COUPON:
+      return {
+        ...state,
+        curationCouponSuccess: undefined,
+      };
    default:
      return state;
  }
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
@@ -4,64 +4,58 @@ import React, {
  useMemo,
  useRef,
  useState,
-} from 'react';
+} from "react";

-import classNames from 'classnames';
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";

-import { Job } from '@enact/core/util';
-import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import { Job } from "@enact/core/util";
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";

-import { clearSMS } from '../../actions/appDataActions';
+import { clearSMS } from "../../actions/appDataActions";
 import {
  alertToast,
  setHidePopup,
  setShowPopup,
-} from '../../actions/commonActions';
+} from "../../actions/commonActions";
 import {
  clearGetProductCouponDownload,
  getProductCouponDownload,
-} from '../../actions/couponActions';
-import { getThemeCurationInfo } from '../../actions/homeActions';
+} from "../../actions/couponActions";
+import { setEventIssueReq } from "../../actions/eventActions";
+import { getThemeCurationInfo } from "../../actions/homeActions";
 import {
  popPanel,
  pushPanel,
  resetPanels,
  updatePanel,
-} from '../../actions/panelActions';
+} from "../../actions/panelActions";
 import {
  finishVideoPreview,
  startVideoPlayer,
-} from '../../actions/playActions';
-import MobileSendPopUp from '../../components/MobileSend/MobileSendPopUp';
-import TBody from '../../components/TBody/TBody';
-import TPanel from '../../components/TPanel/TPanel';
-import useLogService from '../../hooks/useLogService';
-import usePrevious from '../../hooks/usePrevious';
-import useScrollTo from '../../hooks/useScrollTo';
-import { launchMembershipApp } from '../../lunaSend';
-import * as Config from '../../utils/Config';
-import {
-  LOG_TP_NO,
-  panel_names,
-} from '../../utils/Config';
-import { $L } from '../../utils/helperMethods';
-import css from './HotPicks.module.less';
-import TCFI from './Type/TCFI/TCFI';
-import TCFI_2 from './Type/TCFI_2/TCFI_2';
-import TCFI_3 from './Type/TCFI_3/TCFI_3';
-import TCFI_4 from './Type/TCFI_4/TCFI_4';
-import TCFV from './Type/TCFV/TCFV';
-import TCFV_2 from './Type/TCFV_2/TCFV_2';
-import TCFV_3 from './Type/TCFV_3/TCFV_3';
-import TCFV_4 from './Type/TCFV_4/TCFV_4';
-import TCHH from './Type/TCHH/TCHH';
+} from "../../actions/playActions";
+import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
+import TBody from "../../components/TBody/TBody";
+import TPanel from "../../components/TPanel/TPanel";
+import useLogService from "../../hooks/useLogService";
+import usePrevious from "../../hooks/usePrevious";
+import useScrollTo from "../../hooks/useScrollTo";
+import { launchMembershipApp } from "../../lunaSend";
+import * as Config from "../../utils/Config";
+import { LOG_TP_NO, panel_names } from "../../utils/Config";
+import { $L } from "../../utils/helperMethods";
+import css from "./HotPicks.module.less";
+import TCFI from "./Type/TCFI/TCFI";
+import TCFI_2 from "./Type/TCFI_2/TCFI_2";
+import TCFI_3 from "./Type/TCFI_3/TCFI_3";
+import TCFI_4 from "./Type/TCFI_4/TCFI_4";
+import TCFV from "./Type/TCFV/TCFV";
+import TCFV_2 from "./Type/TCFV_2/TCFV_2";
+import TCFV_3 from "./Type/TCFV_3/TCFV_3";
+import TCFV_4 from "./Type/TCFV_4/TCFV_4";
+import TCHH from "./Type/TCHH/TCHH";

 const SpottableComponent = Spottable("button");

@@ -116,10 +110,10 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
  const [popCurationId, setPopCurationId] = useState(null);
  const [popEvntId, setPopEvntId] = useState(null);
  const [popEventInfo, setPopEventInfo] = useState(null);
-  const [isCurationEvnt, setIsCurationEvnt] = useState(null);
+  const [isCurationEvnt, setIsCurationEvnt] = useState(false);
  const [components, setComponents] = useState([]);
  const [osVersion, setOsVersion] = useState(false);
-  const [smsTpCode, setSmsTpCode] = useState("APP00204");
+  const [smsTpCode, setSmsTpCode] = useState(null);

  const expsOrdRef = useRef(null);
  const shopByMobileLogRef = useRef(null);
@@ -371,8 +365,12 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {

  const handlePopupOpen = useCallback(
    (patnrId, curationId, evntId, evntTpCd, eventInfoV2) => {
+      if (eventInfoV2 && eventInfoV2.evntTpCd === "EVT00102") {
+        setIsCurationEvnt(true);
+      }
      if (
-        evntTpCd === "EVT00107" &&
+        eventInfoV2 &&
+        eventInfoV2.evntTpCd === "EVT00107" &&
        webOSVersion &&
        Number(webOSVersion) >= 6
      ) {
@@ -386,48 +384,47 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
            })
          );
        }
-      } else {
-        if (eventInfoV2) {
-          setSmsTpCode("APP00212");
-        } else {
-          setSmsTpCode("APP00204");
-        }
-        setPopPatnrId(patnrId);
-        setPopCurationId(curationId);
-        setPopEvntId(evntId);
-        setIsCurationEvnt(evntTpCd);
-        setPopEventInfo(eventInfoV2);
-        dispatch(setShowPopup(Config.ACTIVE_POPUP.hotPicksSmsPopup));
-
-        const params = {
-          befPrice: "",
-          curationId: themeCurationInfoData[currentPage].curationId,
-          curationNm: themeCurationInfoData[currentPage].curationNm,
-          evntId: evntId ?? "",
-          evntNm: evntTpCd ?? "",
-          lastPrice: "",
-          lgCatCd: themeCurationInfoData[currentPage].lgCatCd ?? "",
-          lgCatNm: "",
-          liveFlag: "N",
-          logTpNo: Config.LOG_TP_NO.SHOP_BY_MOBILE.SHOP_BY_MOBILE,
-          mbphNoFlag: "N",
-          patncNm: themeCurationInfoData[currentPage].patncNm,
-          patnrId: themeCurationInfoData[currentPage].patnrId,
-          prdtId: "",
-          prdtNm: "",
-          revwGrd: "",
-          rewdAplyFlag: "N",
-          shopByMobileFlag: "Y",
-          shopTpNm: "themesms",
-          showId: themeCurationInfoData[currentPage].showId ?? "",
-          showNm: themeCurationInfoData[currentPage].showNm ?? "",
-          trmsAgrFlag: "N",
-          tsvFlag: themeCurationInfoData[currentPage].todaySpclFlag || "N",
-        };
-
-        sendLogShopByMobile(params);
-        shopByMobileLogRef.current = params;
      }
+      if (eventInfoV2 && eventInfoV2.evntTpCd === "EVT00104") {
+        setSmsTpCode("APP00211");
+      }
+      if (!eventInfoV2) {
+        setSmsTpCode("APP00204");
+      }
+      setPopPatnrId(patnrId);
+      setPopCurationId(curationId);
+      setPopEvntId(evntId);
+      setPopEventInfo(eventInfoV2);
+      dispatch(setShowPopup(Config.ACTIVE_POPUP.hotPicksSmsPopup));
+
+      const params = {
+        befPrice: "",
+        curationId: themeCurationInfoData[currentPage].curationId,
+        curationNm: themeCurationInfoData[currentPage].curationNm,
+        evntId: evntId ?? "",
+        evntNm: evntTpCd ?? "",
+        lastPrice: "",
+        lgCatCd: themeCurationInfoData[currentPage].lgCatCd ?? "",
+        lgCatNm: "",
+        liveFlag: "N",
+        logTpNo: Config.LOG_TP_NO.SHOP_BY_MOBILE.SHOP_BY_MOBILE,
+        mbphNoFlag: "N",
+        patncNm: themeCurationInfoData[currentPage].patncNm,
+        patnrId: themeCurationInfoData[currentPage].patnrId,
+        prdtId: "",
+        prdtNm: "",
+        revwGrd: "",
+        rewdAplyFlag: "N",
+        shopByMobileFlag: "Y",
+        shopTpNm: "themesms",
+        showId: themeCurationInfoData[currentPage].showId ?? "",
+        showNm: themeCurationInfoData[currentPage].showNm ?? "",
+        trmsAgrFlag: "N",
+        tsvFlag: themeCurationInfoData[currentPage].todaySpclFlag || "N",
+      };
+
+      sendLogShopByMobile(params);
+      shopByMobileLogRef.current = params;
    },
    [currentPage, themeCurationInfoData]
  );