[DetailPanel] MobileSendPopUp 통일

2024-05-31 14:29:05 +09:00
parent c3e3cea2be
commit d4a0210fc6
7 changed files with 44 additions and 61 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";

 import { useDispatch, useSelector } from "react-redux";

 import Spotlight from "@enact/spotlight";

-import { changeLocalSettings } from "../../actions/commonActions";
+import { changeLocalSettings, setHidePopup } from "../../actions/commonActions";
 import { clearCouponInfo } from "../../actions/couponActions";
 import {
  clearThemeDetail,
@@ -19,10 +19,13 @@ import {
  getProductGroup,
  getProductImageLength,
 } 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 } from "../../utils/helperMethods";
 import css from "./DetailPanel.module.less";
 import GroupProduct from "./GroupProduct/GroupProduct";
 import SingleProduct from "./SingleProduct/SingleProduct";
@@ -33,6 +36,7 @@ import YouMayLike from "./YouMayLike/YouMayLike";
 export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
  const [lgCatCd, setLgCatCd] = useState("");
  const [selectedIndex, setSelectedIndex] = useState(0);
+  const logParamsRef = useRef(null);
  const productData = useSelector((state) => state.main.productData);
  const themeData = useSelector((state) => state.home.productData);
  const hotelData = useSelector((state) => state.home.hotelData);
@@ -47,6 +51,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
  );
  const { httpHeader } = useSelector((state) => state.common);
  const groupInfos = useSelector((state) => state.product.groupInfo);
+  const { popupVisible, activePopup } = useSelector(
+    (state) => state.common.popup
+  );
  const dispatch = useDispatch();

  const {
@@ -126,12 +133,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
    dispatch(popPanel(panel_names.DETAIL_PANEL));
  }, [dispatch]);

-  useEffect(() => {
-    return () => {
-      dispatch(clearProductDetail());
-      dispatch(clearThemeDetail());
-      dispatch(clearCouponInfo());
-    };
+  const handleSMSonClose = useCallback(() => {
+    dispatch(setHidePopup());
+    Spotlight.focus("tbody");
  }, [dispatch]);

  const saveToLocalSettings = useCallback(() => {
@@ -210,6 +214,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
    }
  }, [dispatch, themeProductInfos, selectedIndex, hotelInfos]);

+  useEffect(() => {
+    return () => {
+      dispatch(clearProductDetail());
+      dispatch(clearThemeDetail());
+      dispatch(clearCouponInfo());
+    };
+  }, [dispatch]);
+
  return (
    <>
      <TPanel
@@ -242,7 +254,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
                selectedPrdtId={prdtId}
                selectedIndex={selectedIndex}
                setSelectedIndex={setSelectedIndex}
-                // launchedFromPlayer={panelInfo.launchedFromPlayer}
+                logParamsRef={logParamsRef}
                isOnTop={isOnTop}
              />
            )}
@@ -256,7 +268,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
                selectedPrdtId={prdtId}
                selectedIndex={selectedIndex}
                setSelectedIndex={setSelectedIndex}
-                // launchedFromPlayer={panelInfo.launchedFromPlayer}
+                logParamsRef={logParamsRef}
                isOnTop={isOnTop}
              />
            )}
@@ -268,7 +280,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
              selectedPrdtId={prdtId}
              selectedIndex={selectedIndex}
              setSelectedIndex={setSelectedIndex}
-              // launchedFromPlayer={panelInfo.launchedFromPlayer}
              isOnTop={isOnTop}
            />
          )}
@@ -280,6 +291,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
              selectedCurationId={curationId}
              selectedCurationNm={curationNm}
              selectedPatnrId={patnrId}
+              logParamsRef={logParamsRef}
              themeType={type}
              launchedFromPlayer={panelInfo.launchedFromPlayer}
              isOnTop={isOnTop}
@@ -303,6 +315,19 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
          productInfo={productData || themeData}
        />
      )}
+      {activePopup === Config.ACTIVE_POPUP.smsPopup && (
+        <MobileSendPopUp
+          open={popupVisible}
+          onClose={handleSMSonClose}
+          title={$L("Send a Payment link for this item via SMS")}
+          subTitle={productData?.prdtNm}
+          productImg={productData?.imgUrls600[0]}
+          patnrId={patnrId}
+          prdtId={prdtId}
+          smsTpCd={"APP00201"}
+          logParams={logParamsRef.current}
+        />
+      )}
    </>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx
@@ -20,7 +20,7 @@ export default function GroupProduct({
  selectedPrdtId,
  selectedIndex,
  setSelectedIndex,
-  // launchedFromPlayer,
+  logParamsRef,
  panelInfo,
  isOnTop,
 }) {
@@ -49,10 +49,8 @@ export default function GroupProduct({
          productInfo={productData}
          panelInfo={panelInfo}
          thumbnailUrl={productData.imgUrls600[0]}
-          selectedPatnrId={selectedPatnrId}
-          selectedPrdtId={selectedPrdtId}
+          logParamsRef={logParamsRef}
          isFullOption
-          isMobile
        />
      </Container>
      <div>
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx
@@ -19,7 +19,7 @@ export default function SingleProduct({
  selectedPrdtId,
  selectedIndex,
  setSelectedIndex,
-  // launchedFromPlayer,
+  logParamsRef,
  panelInfo,
  isOnTop,
 }) {
@@ -48,10 +48,8 @@ export default function SingleProduct({
          productInfo={productData}
          panelInfo={panelInfo}
          thumbnailUrl={productData.imgUrls600[0]}
-          selectedPatnrId={selectedPatnrId}
-          selectedPrdtId={selectedPrdtId}
          isFullOption
-          isMobile
+          logParamsRef={logParamsRef}
        />
      </Container>
      <div>
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
@@ -6,7 +6,6 @@ import { useDispatch, useSelector } from "react-redux";
 import Spotlight from "@enact/spotlight";

 import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
-import MobileSendPopUp from "../../../components/MobileSend/MobileSendPopUp";
 import TButton from "../../../components/TButton/TButton";
 import TQRCode from "../../../components/TQRCode/TQRCode";
 import useLogService from "../../../hooks/useLogService";
@@ -304,23 +303,6 @@ export default function UnableOption({
          selectedPrdtId={selectedPrdtId}
        />
      </div>
-      {/* MobileSendPopUp */}
-      {activePopup === Config.ACTIVE_POPUP.smsPopup && (
-        <MobileSendPopUp
-          open={popupVisible}
-          onClose={handleSMSonClose}
-          title={$L("Send a Payment link for this item via SMS")}
-          subTitle={productInfo?.prdtNm}
-          productPrice={discountedPrice}
-          productImg={productInfo?.imgUrls[0]}
-          prdtId={selectedPrdtId}
-          patnrId={selectedPatnrId}
-          curationId={selectedCurationId}
-          curationNm={selectedCurationNm}
-          smsTpCd={smsTpCd}
-          logParams={logParamsRef.current}
-        />
-      )}
    </div>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
@@ -21,7 +21,7 @@ export default function UnableProduct({
  selectedPrdtId,
  selectedIndex,
  setSelectedIndex,
-  // launchedFromPlayer,
+  logParamsRef,
  panelInfo,
  isOnTop,
 }) {
@@ -52,6 +52,7 @@ export default function UnableProduct({
        <IndicatorOptions
          productInfo={productData}
          thumbnailUrl={productData.imgUrls600[0]}
+          logParamsRef={logParamsRef}
          isDescription
          isCall
        />
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";

-import Image from "@enact/sandstone/Image";
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
@@ -17,7 +16,6 @@ import usePriceInfo from "../../../../hooks/usePriceInfo";
 import useScrollTo from "../../../../hooks/useScrollTo";
 import { panel_names } from "../../../../utils/Config";
 import { $L, scaleW } from "../../../../utils/helperMethods";
-import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import css from "./Indicator.module.less";

 const Container = SpotlightContainerDecorator(
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx
@@ -9,17 +9,16 @@ import defaultLogoImg from "../../../../../assets/images/ic-tab-partners-default
 import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
 import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
 import CustomImage from "../../../../components/CustomImage/CustomImage";
-import MobileSendPopUp from "../../../../components/MobileSend/MobileSendPopUp";
 import TButtonScroller from "../../../../components/TButtonScroller/TButtonScroller";
 import TButtonTab from "../../../../components/TButtonTab/TButtonTab";
 import TPopUp from "../../../../components/TPopUp/TPopUp";
 import TQRCode from "../../../../components/TQRCode/TQRCode";
+import useLogService from "../../../../hooks/useLogService";
 import * as Config from "../../../../utils/Config";
 import { $L, scaleH, scaleW } from "../../../../utils/helperMethods";
 import ProductTag from "../../components/ProductTag";
 import StarRating from "../../components/StarRating";
 import css from "./IndicatorOptions.module.less";
-import useLogService from "../../../../hooks/useLogService";

 const SpottableComponent = Spottable("div");

@@ -28,11 +27,9 @@ export default function IndicatorOptions({
  address,
  productInfo,
  thumbnailUrl,
-  selectedPatnrId,
-  selectedPrdtId,
+  logParamsRef,
  isDescription,
  isCall,
-  isMobile,
  panelInfo,
 }) {
  const { sendLogShopByMobile } = useLogService();
@@ -45,8 +42,6 @@ export default function IndicatorOptions({

  const dispatch = useDispatch();

-  const logParamsRef = useRef(null);
-
  const handleSMSonClose = useCallback(() => {
    dispatch(setHidePopup());
    Spotlight.focus("tbody");
@@ -231,20 +226,6 @@ export default function IndicatorOptions({
            </div>
          </>
        )}
-        {/* MobileSendPopUp */}
-        {isMobile && activePopup === Config.ACTIVE_POPUP.smsPopup && (
-          <MobileSendPopUp
-            open={popupVisible}
-            onClose={handleSMSonClose}
-            title={$L("Send a Payment link for this item via SMS")}
-            subTitle={productInfo?.prdtNm}
-            productImg={thumbnailUrl}
-            patnrId={selectedPatnrId}
-            prdtId={selectedPrdtId}
-            smsTpCd={"APP00201"}
-            logParams={logParamsRef.current}
-          />
-        )}
      </div>
    </>
  );