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

[SHOPTIME-5452] [EVENT] Hot Picks 랜딩 홈배너 진입 / Hot Picks 상품 [Shop by Mobile] / SMS 문구 전송시 오류 알럿 노출

Browse Source
This commit is contained in:
jiwon93.son
2025-10-14 13:36:05 +09:00
parent 49c4c42000
commit 678cbcb4e0
1 changed files with 77 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -4,51 +4,51 @@ import React, {
useMemo, useMemo,
useRef, useRef,
useState, useState,
} from "react"; } from 'react';
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from 'react-redux';
import Spotlight from "@enact/spotlight"; import Spotlight from '@enact/spotlight';
import { setContainerLastFocusedElement } from "@enact/spotlight/src/container"; import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
import { import {
changeAppStatus, changeAppStatus,
changeLocalSettings, changeLocalSettings,
setHidePopup, setHidePopup,
} from "../../actions/commonActions"; } from '../../actions/commonActions';
import { clearCouponInfo } from "../../actions/couponActions"; import { clearCouponInfo } from '../../actions/couponActions';
import { getDeviceAdditionInfo } from "../../actions/deviceActions"; import { getDeviceAdditionInfo } from '../../actions/deviceActions';
import { import {
clearThemeDetail, clearThemeDetail,
getThemeCurationDetailInfo, getThemeCurationDetailInfo,
getThemeHotelDetailInfo, getThemeHotelDetailInfo,
} from "../../actions/homeActions"; } from '../../actions/homeActions';
import { import {
getMainCategoryDetail, getMainCategoryDetail,
getMainYouMayLike, getMainYouMayLike,
} from "../../actions/mainActions"; } from '../../actions/mainActions';
import { popPanel, updatePanel } from "../../actions/panelActions"; import { popPanel, updatePanel } from '../../actions/panelActions';
import { finishVideoPreview } from "../../actions/playActions"; import { finishVideoPreview } from '../../actions/playActions';
import { import {
clearProductDetail, clearProductDetail,
getProductGroup, getProductGroup,
getProductImageLength, getProductImageLength,
getProductOptionId, getProductOptionId,
} from "../../actions/productActions"; } from '../../actions/productActions';
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 THeader from "../../components/THeader/THeader"; import THeader from '../../components/THeader/THeader';
import TPanel from "../../components/TPanel/TPanel"; import TPanel from '../../components/TPanel/TPanel';
import * as Config from "../../utils/Config"; import * as Config from '../../utils/Config';
import { panel_names } from "../../utils/Config"; import { panel_names } from '../../utils/Config';
import { $L, getQRCodeUrl } from "../../utils/helperMethods"; import { $L, getQRCodeUrl } from '../../utils/helperMethods';
import css from "./DetailPanel.module.less"; import css from './DetailPanel.module.less';
import GroupProduct from "./GroupProduct/GroupProduct"; import GroupProduct from './GroupProduct/GroupProduct';
import SingleProduct from "./SingleProduct/SingleProduct"; import SingleProduct from './SingleProduct/SingleProduct';
import ThemeProduct from "./ThemeProduct/ThemeProduct"; import ThemeProduct from './ThemeProduct/ThemeProduct';
import UnableProduct from "./UnableProduct/UnableProduct"; import UnableProduct from './UnableProduct/UnableProduct';
import YouMayLike from "./YouMayLike/YouMayLike"; import YouMayLike from './YouMayLike/YouMayLike';
import { now } from "lodash"; import { now } from 'lodash';
export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -85,7 +85,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
); );
const panels = useSelector((state) => state.panels.panels); const panels = useSelector((state) => state.panels.panels);
const [lgCatCd, setLgCatCd] = useState(""); const [lgCatCd, setLgCatCd] = useState('');
const [isYouMayLikeOpened, setIsYouMayLikeOpened] = useState(false); const [isYouMayLikeOpened, setIsYouMayLikeOpened] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
@@ -93,7 +93,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
useEffect(() => { useEffect(() => {
dispatch(getProductOptionId(undefined)); dispatch(getProductOptionId(undefined));
if (panelInfo?.type === "hotel") { if (panelInfo?.type === 'hotel') {
dispatch( dispatch(
getThemeHotelDetailInfo({ getThemeHotelDetailInfo({
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
@@ -102,7 +102,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
); );
} }
if (panelInfo?.type === "theme") { if (panelInfo?.type === 'theme') {
dispatch( dispatch(
getThemeCurationDetailInfo({ getThemeCurationDetailInfo({
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
@@ -117,7 +117,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
getMainCategoryDetail({ getMainCategoryDetail({
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
prdtId: panelInfo?.prdtId, prdtId: panelInfo?.prdtId,
liveReqFlag: panelInfo?.liveReqFlag ? panelInfo?.liveReqFlag : "N", liveReqFlag: panelInfo?.liveReqFlag ? panelInfo?.liveReqFlag : 'N',
}) })
); );
} }
@@ -147,7 +147,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}, [panelInfo?.curationId, panelInfo?.patnrId, panelInfo?.prdtId, lgCatCd]); }, [panelInfo?.curationId, panelInfo?.patnrId, panelInfo?.prdtId, lgCatCd]);
useEffect(() => { useEffect(() => {
if (productData?.pmtSuptYn === "Y" && productData?.grPrdtProcYn === "Y") { if (productData?.pmtSuptYn === 'Y' && productData?.grPrdtProcYn === 'Y') {
dispatch( dispatch(
getProductGroup({ getProductGroup({
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
@@ -193,14 +193,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
prdtId: productInfo?.prdtId, prdtId: productInfo?.prdtId,
entryMenu: entryMenu, entryMenu: entryMenu,
nowMenu: nowMenu, nowMenu: nowMenu,
liveFlag: "Y", liveFlag: 'Y',
qrType: "billingDetail", qrType: 'billingDetail',
}); });
}, [serverHOST, serverType, deviceInfo, entryMenu, productInfo]); }, [serverHOST, serverType, deviceInfo, entryMenu, productInfo]);
const onSpotlightUpTButton = (e) => { const onSpotlightUpTButton = (e) => {
e.stopPropagation(); e.stopPropagation();
Spotlight.focus("spotlightId_backBtn"); Spotlight.focus('spotlightId_backBtn');
}; };
const onClick = useCallback( const onClick = useCallback(
@@ -229,8 +229,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const handleSMSonClose = useCallback(() => { const handleSMSonClose = useCallback(() => {
dispatch(setHidePopup()); dispatch(setHidePopup());
setTimeout(() => { setTimeout(() => {
Spotlight.focus("spotlightId_backBtn"); Spotlight.focus('spotlightId_backBtn');
Spotlight.focus("shopbymobile_Btn"); Spotlight.focus('shopbymobile_Btn');
}, 0); }, 0);
}, [dispatch]); }, [dispatch]);
@@ -239,7 +239,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const prdtId = const prdtId =
themeProductInfos && themeProductInfos &&
themeProductInfos.length > 0 && themeProductInfos.length > 0 &&
panelInfo?.type === "theme" panelInfo?.type === 'theme'
? themeProductInfos[selectedIndex].prdtId ? themeProductInfos[selectedIndex].prdtId
: panelInfo?.prdtId; : panelInfo?.prdtId;
@@ -266,7 +266,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
date: formattedDate, date: formattedDate,
expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14, expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14,
cntryCd: httpHeader["X-Device-Country"], cntryCd: httpHeader['X-Device-Country'],
}); });
if (recentItems.length >= 51) { if (recentItems.length >= 51) {
@@ -289,19 +289,19 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
setLgCatCd(productData.catCd); setLgCatCd(productData.catCd);
} else if ( } else if (
themeProductInfos && themeProductInfos &&
themeProductInfos[selectedIndex]?.pmtSuptYn === "N" && themeProductInfos[selectedIndex]?.pmtSuptYn === 'N' &&
panelInfo?.curationId panelInfo?.curationId
) { ) {
setLgCatCd(themeProductInfos[selectedIndex]?.catCd); setLgCatCd(themeProductInfos[selectedIndex]?.catCd);
} else { } else {
setLgCatCd(""); setLgCatCd('');
} }
}, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]); }, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]);
const mobileSendPopUpProductImg = useMemo(() => { const mobileSendPopUpProductImg = useMemo(() => {
if (panelInfo?.type === "theme" && themeProductInfos) { if (panelInfo?.type === 'theme' && themeProductInfos) {
return themeProductInfos[selectedIndex]?.imgUrls600[0]; return themeProductInfos[selectedIndex]?.imgUrls600[0];
} else if (panelInfo?.type === "hotel" && hotelInfos) { } else if (panelInfo?.type === 'hotel' && hotelInfos) {
return hotelInfos[selectedIndex]?.hotelImgUrl; return hotelInfos[selectedIndex]?.hotelImgUrl;
} else { } else {
return productData?.imgUrls600[0]; return productData?.imgUrls600[0];
@@ -315,9 +315,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
]); ]);
const mobileSendPopUpSubtitle = useMemo(() => { const mobileSendPopUpSubtitle = useMemo(() => {
if (panelInfo?.type === "theme" && themeProductInfos) { if (panelInfo?.type === 'theme' && themeProductInfos) {
return themeProductInfos[selectedIndex]?.prdtNm; return themeProductInfos[selectedIndex]?.prdtNm;
} else if (panelInfo?.type === "hotel" && hotelInfos) { } else if (panelInfo?.type === 'hotel' && hotelInfos) {
return hotelInfos[selectedIndex]?.hotelNm; return hotelInfos[selectedIndex]?.hotelNm;
} else { } else {
return productData?.prdtNm; return productData?.prdtNm;
@@ -332,27 +332,27 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const isBillingProductVisible = useMemo(() => { const isBillingProductVisible = useMemo(() => {
return ( return (
productData?.pmtSuptYn === "Y" && productData?.pmtSuptYn === 'Y' &&
productData?.grPrdtProcYn === "N" && productData?.grPrdtProcYn === 'N' &&
panelInfo?.prdtId && panelInfo?.prdtId &&
webOSVersion >= "6.0" webOSVersion >= '6.0'
); );
}, [productData, webOSVersion, panelInfo?.prdtId]); }, [productData, webOSVersion, panelInfo?.prdtId]);
const isUnavailableProductVisible = useMemo(() => { const isUnavailableProductVisible = useMemo(() => {
return ( return (
productData?.pmtSuptYn === "N" || productData?.pmtSuptYn === 'N' ||
(productData?.pmtSuptYn === "Y" && (productData?.pmtSuptYn === 'Y' &&
productData?.grPrdtProcYn === "N" && productData?.grPrdtProcYn === 'N' &&
webOSVersion < "6.0" && webOSVersion < '6.0' &&
panelInfo?.prdtId) panelInfo?.prdtId)
); );
}, [productData, webOSVersion, panelInfo?.prdtId]); }, [productData, webOSVersion, panelInfo?.prdtId]);
const isGroupProductVisible = useMemo(() => { const isGroupProductVisible = useMemo(() => {
return ( return (
productData?.pmtSuptYn === "Y" && productData?.pmtSuptYn === 'Y' &&
productData?.grPrdtProcYn === "Y" && productData?.grPrdtProcYn === 'Y' &&
groupInfos && groupInfos &&
groupInfos.length > 0 groupInfos.length > 0
); );
@@ -387,12 +387,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
(hotelInfos && hotelInfos.length > 0)) && (hotelInfos && hotelInfos.length > 0)) &&
selectedIndex !== undefined selectedIndex !== undefined
) { ) {
if (panelInfo?.type === "theme") { if (panelInfo?.type === 'theme') {
const imgUrls600 = themeProductInfos[selectedIndex]?.imgUrls600 || []; const imgUrls600 = themeProductInfos[selectedIndex]?.imgUrls600 || [];
dispatch(getProductImageLength({ imageLength: imgUrls600.length })); dispatch(getProductImageLength({ imageLength: imgUrls600.length }));
return; return;
} }
if (panelInfo?.type === "hotel") { if (panelInfo?.type === 'hotel') {
const imgUrls600 = hotelInfos[selectedIndex]?.imgUrls600 || []; const imgUrls600 = hotelInfos[selectedIndex]?.imgUrls600 || [];
dispatch(getProductImageLength({ imageLength: imgUrls600.length })); dispatch(getProductImageLength({ imageLength: imgUrls600.length }));
} }
@@ -404,7 +404,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
dispatch(clearProductDetail()); dispatch(clearProductDetail());
dispatch(clearThemeDetail()); dispatch(clearThemeDetail());
dispatch(clearCouponInfo()); dispatch(clearCouponInfo());
setContainerLastFocusedElement(null, ["indicator-GridListContainer"]); setContainerLastFocusedElement(null, ['indicator-GridListContainer']);
}; };
}, [dispatch]); }, [dispatch]);
@@ -420,8 +420,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
className={css.header} className={css.header}
title={ title={
(panelInfo?.prdtId && productData?.prdtNm) || (panelInfo?.prdtId && productData?.prdtNm) ||
(panelInfo?.type === "hotel" && hotelData?.hotelInfo.curationNm) || (panelInfo?.type === 'hotel' && hotelData?.hotelInfo.curationNm) ||
(panelInfo?.type === "theme" && themeData?.themeInfo[0]?.curationNm) (panelInfo?.type === 'theme' && themeData?.themeInfo[0]?.curationNm)
} }
onBackButton onBackButton
onClick={onClick(false)} onClick={onClick(false)}
@@ -431,8 +431,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
marqueeDisabled={false} marqueeDisabled={false}
ariaLabel={ ariaLabel={
(panelInfo?.prdtId && productData?.prdtNm) || (panelInfo?.prdtId && productData?.prdtNm) ||
(panelInfo?.type === "hotel" && hotelData?.hotelInfo.curationNm) || (panelInfo?.type === 'hotel' && hotelData?.hotelInfo.curationNm) ||
(panelInfo?.type === "theme" && themeData?.themeInfo[0]?.curationNm) (panelInfo?.type === 'theme' && themeData?.themeInfo[0]?.curationNm)
} }
/> />
<TBody <TBody
@@ -509,9 +509,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
{lgCatCd && youmaylikeData && youmaylikeData.length > 0 && isOnTop && ( {lgCatCd && youmaylikeData && youmaylikeData.length > 0 && isOnTop && (
<YouMayLike <YouMayLike
isUnable={ isUnable={
productData?.pmtSuptYn === "N" || productData?.pmtSuptYn === 'N' ||
panelInfo?.type === "hotel" || panelInfo?.type === 'hotel' ||
panelInfo?.type === "theme" panelInfo?.type === 'theme'
} }
panelInfo={panelInfo} panelInfo={panelInfo}
setSelectedIndex={setSelectedIndex} setSelectedIndex={setSelectedIndex}
@@ -523,29 +523,35 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<MobileSendPopUp <MobileSendPopUp
open={popupVisible} open={popupVisible}
onClose={handleSMSonClose} onClose={handleSMSonClose}
title={$L("Send a purchase link for this item via SMS")} title={$L('Send a purchase link for this item via SMS')}
subTitle={mobileSendPopUpSubtitle} subTitle={mobileSendPopUpSubtitle}
patncNm={productData?.patncNm} patncNm={productData?.patncNm}
productImg={mobileSendPopUpProductImg} productImg={mobileSendPopUpProductImg}
patnrId={panelInfo?.patnrId} patnrId={panelInfo?.patnrId}
prdtId={panelInfo?.prdtId} prdtId={
smsTpCd={panelInfo?.type === "hotel" ? "APP00205" : "APP00201"} panelInfo?.type === 'theme' &&
themeProductInfos &&
themeProductInfos[selectedIndex]
? themeProductInfos[selectedIndex].prdtId
: panelInfo?.prdtId
}
smsTpCd={panelInfo?.type === 'hotel' ? 'APP00205' : 'APP00201'}
curationId={panelInfo?.curationId} curationId={panelInfo?.curationId}
curationNm={panelInfo?.curationNm} curationNm={panelInfo?.curationNm}
hotelId={ hotelId={
panelInfo?.type === "hotel" && hotelInfos[selectedIndex]?.hotelId panelInfo?.type === 'hotel' && hotelInfos[selectedIndex]?.hotelId
} }
hotelNm={ hotelNm={
panelInfo?.type === "hotel" && hotelInfos[selectedIndex]?.hotelNm panelInfo?.type === 'hotel' && hotelInfos[selectedIndex]?.hotelNm
} }
hotelDtlUrl={ hotelDtlUrl={
panelInfo?.type === "hotel" && panelInfo?.type === 'hotel' &&
hotelInfos[selectedIndex]?.hotelDetailInfo?.hotelDtlUrl hotelInfos[selectedIndex]?.hotelDetailInfo?.hotelDtlUrl
} }
productPrice={panelInfo?.type === "hotel" && Price()} productPrice={panelInfo?.type === 'hotel' && Price()}
shopByMobileLogRef={shopByMobileLogRef} shopByMobileLogRef={shopByMobileLogRef}
spotlightId="shopbymobile_Btn" spotlightId="shopbymobile_Btn"
smsText={productInfo?.pmtSuptYn === "Y" ? detailUrl : undefined} smsText={productInfo?.pmtSuptYn === 'Y' ? detailUrl : undefined}
/> />
)} )}
</> </>