From 2eb6c416ffb6a974ecb4f8f51045833d48344a8d Mon Sep 17 00:00:00 2001 From: "jiwon93.son" Date: Fri, 14 Jun 2024 15:47:10 +0900 Subject: [PATCH] =?UTF-8?q?[HotPicksPanel]=20-=20handlePopupOpen=20:=20eve?= =?UTF-8?q?ntApi=20=EB=B0=8F=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/actions/eventActions.js | 9 +- .../components/MobileSend/MobileSendPopUp.jsx | 126 ++++++++----- .../src/reducers/eventReducer.js | 11 ++ .../src/views/HotPicksPanel/HotPicksPanel.jsx | 165 +++++++++--------- 4 files changed, 179 insertions(+), 132 deletions(-) diff --git a/com.twin.app.shoptime/src/actions/eventActions.js b/com.twin.app.shoptime/src/actions/eventActions.js index bdfe2176..266089a3 100644 --- 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, +}); diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx index fb819a22..25e2c4a9 100644 --- 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 && ( )} - {smsRetCode !== undefined && smsRetCode !== 0 && ( + {retCodeError && ( )} - {(smsRetCode === 0 || regDeviceInfoRetCode === 0) && ( + {(smsRetCode === 0 || + regDeviceInfoRetCode === 0 || + regDeviceInfoRetCode === 0) && ( )} diff --git a/com.twin.app.shoptime/src/reducers/eventReducer.js b/com.twin.app.shoptime/src/reducers/eventReducer.js index fb3c06ad..2972fadc 100644 --- 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; } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx index 2754d6f6..c36e115b 100644 --- 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] );