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

com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx

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