optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[HotPicksPanel]

Browse Source 
- handlePopupOpen : eventApi 및 로직 변경
This commit is contained in:
jiwon93.son
2024-06-14 15:47:10 +09:00
parent 4f666f286d
commit 2eb6c416ff
4 changed files with 179 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
com.twin.app.shoptime/src/actions/eventActions.js
View File

@@ -32,13 +32,14 @@ export const getWelcomeEventInfo = () => (dispatch, getState) => {
// 이벤트(쿠폰) 지급 요청 (IF-LGSP-071) // 이벤트(쿠폰) 지급 요청 (IF-LGSP-071)
export const setEventIssueReq = (params) => (dispatch, getState) => { export const setEventIssueReq = (params) => (dispatch, getState) => {
const { evntTpCd, evntId, mbphNo } = params; const { evntTpCd, evntId, mbphNo, cntryCd } = params;
const onSuccess = (response) => { const onSuccess = (response) => {
console.log("setEventIssueReq onSuccess ", response.data); console.log("setEventIssueReq onSuccess ", response.data);
dispatch({ dispatch({
type: types.SET_EVENT_ISSUE_REQ, type: types.SET_EVENT_ISSUE_REQ,
payload: response.data.data, payload: response.data.data,
retCode: response.data.retCode,
}); });
}; };
@@ -52,7 +53,7 @@ export const setEventIssueReq = (params) => (dispatch, getState) => {
"post", "post",
URLS.SET_EVENT_ISSUE_REQ, URLS.SET_EVENT_ISSUE_REQ,
{}, {},
{ evntTpCd, evntId, mbphNo }, { evntTpCd, evntId, mbphNo, cntryCd },
onSuccess, onSuccess,
onFail onFail
); );
@@ -126,3 +127,7 @@ export const skipClickInfo = (status) => ({
export const clearEventInfo = () => ({ export const clearEventInfo = () => ({
type: types.CLEAR_EVENT_INFO, type: types.CLEAR_EVENT_INFO,
}); });
export const clearCurationCoupon = () => ({
type: types.CLEAR_CURATION_COUPON,
});

126
com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
View File

@@ -1,58 +1,43 @@
import React, { import React, { useCallback, useEffect, useMemo, useState } from "react";
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import classNames from 'classnames'; import classNames from "classnames";
import { import {
AsYouTypeFormatter, AsYouTypeFormatter,
PhoneNumberFormat, PhoneNumberFormat,
PhoneNumberUtil, PhoneNumberUtil,
} from 'google-libphonenumber'; } from "google-libphonenumber";
import { import { useDispatch, useSelector } from "react-redux";
useDispatch,
useSelector,
} from 'react-redux';
import { import { off, on } from "@enact/core/dispatcher";
off, import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
on, import { Spottable } from "@enact/spotlight/Spottable";
} 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 defaultImage from "../../../assets/images/img-thumb-empty-144@3x.png";
import { import { types } from "../../actions/actionTypes";
clearSMS, import { clearSMS, sendSms } from "../../actions/appDataActions";
sendSms,
} from '../../actions/appDataActions';
import { import {
changeLocalSettings, changeLocalSettings,
setHidePopup, setHidePopup,
setShowPopup, setShowPopup,
} from '../../actions/commonActions'; } from "../../actions/commonActions";
import { import {
clearRegisterDeviceInfo, clearRegisterDeviceInfo,
getDeviceAdditionInfo, getDeviceAdditionInfo,
registerDeviceInfo, registerDeviceInfo,
} from '../../actions/deviceActions'; } from "../../actions/deviceActions";
import { setEventIssueReq } from '../../actions/eventActions';
import useLogService from '../../hooks/useLogService';
import { import {
ACTIVE_POPUP, clearCurationCoupon,
LOG_TP_NO, setEventIssueReq,
} from '../../utils/Config'; } from "../../actions/eventActions";
import { $L } from '../../utils/helperMethods'; import useLogService from "../../hooks/useLogService";
import CustomImage from '../CustomImage/CustomImage'; import { ACTIVE_POPUP, LOG_TP_NO } from "../../utils/Config";
import TButton from '../TButton/TButton'; import { $L } from "../../utils/helperMethods";
import TPopUp from '../TPopUp/TPopUp'; import CustomImage from "../CustomImage/CustomImage";
import HistoryPhoneNumber from './HistoryPhoneNumber/HistoryPhoneNumber'; import TButton from "../TButton/TButton";
import css from './MobileSendPopUp.module.less'; import TPopUp from "../TPopUp/TPopUp";
import SMSNumKeyPad from './SMSNumKeyPad'; import HistoryPhoneNumber from "./HistoryPhoneNumber/HistoryPhoneNumber";
import css from "./MobileSendPopUp.module.less";
import SMSNumKeyPad from "./SMSNumKeyPad";
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" }, { enterTo: "last-focused" },
@@ -75,6 +60,7 @@ export default function MobileSendPopUp({
patnrId, patnrId,
evntId, evntId,
evntTpCd, evntTpCd,
isCurationEvnt,
hotelId, hotelId,
hotelNm, hotelNm,
hotelDtlUrl, hotelDtlUrl,
@@ -97,6 +83,9 @@ export default function MobileSendPopUp({
const { phoneNumberList } = useSelector( const { phoneNumberList } = useSelector(
(state) => state.localSettings.phoneNumbers (state) => state.localSettings.phoneNumbers
); );
const curationCouponSuccess = useSelector(
(state) => state.event.curationCouponSuccess
);
const deviceCountryCode = httpHeader["X-Device-Country"]; const deviceCountryCode = httpHeader["X-Device-Country"];
const dispatch = useDispatch(); 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) { if (deviceInfo && smsTpCd) {
let params = { let params = {
dvcIndex: deviceInfo.dvcIndex, 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( const _onClose = useCallback(
(e) => { (e) => {
if (e.target) { if (e.target) {
dispatch(clearSMS()); dispatch(clearSMS());
dispatch(clearCurationCoupon());
setSmsRetCode(undefined); setSmsRetCode(undefined);
} }
onClose(); onClose();
@@ -354,7 +362,11 @@ export default function MobileSendPopUp({
let timer; let timer;
if (smsRetCodeResData === 0 || regDeviceInfoRetCode === 0) { if (
smsRetCodeResData === 0 ||
regDeviceInfoRetCode === 0 ||
curationCouponSuccess === 0
) {
timer = setTimeout(() => { timer = setTimeout(() => {
dispatch(setHidePopup()); dispatch(setHidePopup());
@@ -378,13 +390,15 @@ export default function MobileSendPopUp({
shopByMobileLogRef, shopByMobileLogRef,
smsRetCodeResData, smsRetCodeResData,
regDeviceInfoRetCode, regDeviceInfoRetCode,
curationCouponSuccess,
]); ]);
useEffect(() => { useEffect(() => {
// smsRetCode initialize // retCode initialize
return () => { return () => {
dispatch(clearSMS()); dispatch(clearSMS());
dispatch(clearRegisterDeviceInfo()); dispatch(clearRegisterDeviceInfo());
dispatch(clearCurationCoupon());
dispatch(setHidePopup()); dispatch(setHidePopup());
}; };
}, [dispatch]); }, [dispatch]);
@@ -433,11 +447,29 @@ export default function MobileSendPopUp({
} }
}, [smsRetCode]); }, [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 ( return (
<> <>
{smsRetCode === undefined && {smsRetCode === undefined &&
open && open &&
regDeviceInfoRetCode === undefined && ( regDeviceInfoRetCode === undefined &&
curationCouponSuccess === undefined && (
<TPopUp <TPopUp
kind={"mobileSendPopup"} kind={"mobileSendPopup"}
className={css.container} className={css.container}
@@ -519,18 +551,20 @@ export default function MobileSendPopUp({
</div> </div>
</TPopUp> </TPopUp>
)} )}
{smsRetCode !== undefined && smsRetCode !== 0 && ( {retCodeError && (
<TPopUp <TPopUp
kind="textPopup" kind="textPopup"
open={true} open={true}
hasText hasText
text={getSmsErrorMsg} text={smsTpCd ? getSmsErrorMsg : getEvntErrorMsg}
onClick={_onClose} onClick={_onClose}
hasButton hasButton
button1Text={$L("OK")} button1Text={$L("OK")}
/> />
)} )}
{(smsRetCode === 0 || regDeviceInfoRetCode === 0) && ( {(smsRetCode === 0 ||
regDeviceInfoRetCode === 0 ||
regDeviceInfoRetCode === 0) && (
<TPopUp kind="textPopup" open={true} hasText text={MSG_SUCCESS_SENT} /> <TPopUp kind="textPopup" open={true} hasText text={MSG_SUCCESS_SENT} />
)} )}
</> </>

11
com.twin.app.shoptime/src/reducers/eventReducer.js
View File

@@ -3,6 +3,7 @@ import { types } from "../actions/actionTypes";
const initialState = { const initialState = {
eventData: {}, eventData: {},
eventClickSuccess: null, eventClickSuccess: null,
curationCouponSuccess: undefined,
}; };
export const eventReducer = (state = initialState, action) => { export const eventReducer = (state = initialState, action) => {
@@ -18,12 +19,22 @@ export const eventReducer = (state = initialState, action) => {
...state, ...state,
eventClickSuccess: action.retCode, eventClickSuccess: action.retCode,
}; };
case types.SET_EVENT_ISSUE_REQ:
return {
...state,
curationCouponSuccess: action.retCode,
};
case types.CLEAR_EVENT_INFO: case types.CLEAR_EVENT_INFO:
return { return {
...state, ...state,
eventData: {}, eventData: {},
retCode: null, retCode: null,
}; };
case types.CLEAR_CURATION_COUPON:
return {
...state,
curationCouponSuccess: undefined,
};
default: default:
return state; return state;
} }

165
com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
View File

@@ -4,64 +4,58 @@ import React, {
useMemo, useMemo,
useRef, useRef,
useState, useState,
} from 'react'; } from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { import { useDispatch, useSelector } from "react-redux";
useDispatch,
useSelector,
} from 'react-redux';
import { Job } from '@enact/core/util'; import { Job } from "@enact/core/util";
import Spotlight from '@enact/spotlight'; import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from "@enact/spotlight/Spottable";
import Spottable from '@enact/spotlight/Spottable';
import { clearSMS } from '../../actions/appDataActions'; import { clearSMS } from "../../actions/appDataActions";
import { import {
alertToast, alertToast,
setHidePopup, setHidePopup,
setShowPopup, setShowPopup,
} from '../../actions/commonActions'; } from "../../actions/commonActions";
import { import {
clearGetProductCouponDownload, clearGetProductCouponDownload,
getProductCouponDownload, getProductCouponDownload,
} from '../../actions/couponActions'; } from "../../actions/couponActions";
import { getThemeCurationInfo } from '../../actions/homeActions'; import { setEventIssueReq } from "../../actions/eventActions";
import { getThemeCurationInfo } from "../../actions/homeActions";
import { import {
popPanel, popPanel,
pushPanel, pushPanel,
resetPanels, resetPanels,
updatePanel, updatePanel,
} from '../../actions/panelActions'; } from "../../actions/panelActions";
import { import {
finishVideoPreview, finishVideoPreview,
startVideoPlayer, startVideoPlayer,
} from '../../actions/playActions'; } from "../../actions/playActions";
import MobileSendPopUp from '../../components/MobileSend/MobileSendPopUp'; import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
import TBody from '../../components/TBody/TBody'; import TBody from "../../components/TBody/TBody";
import TPanel from '../../components/TPanel/TPanel'; import TPanel from "../../components/TPanel/TPanel";
import useLogService from '../../hooks/useLogService'; import useLogService from "../../hooks/useLogService";
import usePrevious from '../../hooks/usePrevious'; import usePrevious from "../../hooks/usePrevious";
import useScrollTo from '../../hooks/useScrollTo'; import useScrollTo from "../../hooks/useScrollTo";
import { launchMembershipApp } from '../../lunaSend'; import { launchMembershipApp } from "../../lunaSend";
import * as Config from '../../utils/Config'; import * as Config from "../../utils/Config";
import { import { LOG_TP_NO, panel_names } from "../../utils/Config";
LOG_TP_NO, import { $L } from "../../utils/helperMethods";
panel_names, import css from "./HotPicks.module.less";
} from '../../utils/Config'; import TCFI from "./Type/TCFI/TCFI";
import { $L } from '../../utils/helperMethods'; import TCFI_2 from "./Type/TCFI_2/TCFI_2";
import css from './HotPicks.module.less'; import TCFI_3 from "./Type/TCFI_3/TCFI_3";
import TCFI from './Type/TCFI/TCFI'; import TCFI_4 from "./Type/TCFI_4/TCFI_4";
import TCFI_2 from './Type/TCFI_2/TCFI_2'; import TCFV from "./Type/TCFV/TCFV";
import TCFI_3 from './Type/TCFI_3/TCFI_3'; import TCFV_2 from "./Type/TCFV_2/TCFV_2";
import TCFI_4 from './Type/TCFI_4/TCFI_4'; import TCFV_3 from "./Type/TCFV_3/TCFV_3";
import TCFV from './Type/TCFV/TCFV'; import TCFV_4 from "./Type/TCFV_4/TCFV_4";
import TCFV_2 from './Type/TCFV_2/TCFV_2'; import TCHH from "./Type/TCHH/TCHH";
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"); const SpottableComponent = Spottable("button");
@@ -116,10 +110,10 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
const [popCurationId, setPopCurationId] = useState(null); const [popCurationId, setPopCurationId] = useState(null);
const [popEvntId, setPopEvntId] = useState(null); const [popEvntId, setPopEvntId] = useState(null);
const [popEventInfo, setPopEventInfo] = useState(null); const [popEventInfo, setPopEventInfo] = useState(null);
const [isCurationEvnt, setIsCurationEvnt] = useState(null); const [isCurationEvnt, setIsCurationEvnt] = useState(false);
const [components, setComponents] = useState([]); const [components, setComponents] = useState([]);
const [osVersion, setOsVersion] = useState(false); const [osVersion, setOsVersion] = useState(false);
const [smsTpCode, setSmsTpCode] = useState("APP00204"); const [smsTpCode, setSmsTpCode] = useState(null);
const expsOrdRef = useRef(null); const expsOrdRef = useRef(null);
const shopByMobileLogRef = useRef(null); const shopByMobileLogRef = useRef(null);
@@ -371,8 +365,12 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
const handlePopupOpen = useCallback( const handlePopupOpen = useCallback(
(patnrId, curationId, evntId, evntTpCd, eventInfoV2) => { (patnrId, curationId, evntId, evntTpCd, eventInfoV2) => {
if (eventInfoV2 && eventInfoV2.evntTpCd === "EVT00102") {
setIsCurationEvnt(true);
}
if ( if (
evntTpCd === "EVT00107" && eventInfoV2 &&
eventInfoV2.evntTpCd === "EVT00107" &&
webOSVersion && webOSVersion &&
Number(webOSVersion) >= 6 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] [currentPage, themeCurationInfoData]
); );