[FeaturedBradnsPanel] issue fix, upcoming

Detail Notes : 1. 임시, loadingPanel 제거 2. upcoming, reminder 동일 시간대 중복 설정 불가 반영 3. live 방송 있는 경우 30초마다 product 갱신 반영
2024-05-10 22:19:21 +09:00
parent 0bface799c
commit 94d4066715
4 changed files with 197 additions and 121 deletions
--- a/com.twin.app.shoptime/src/utils/Config.js
+++ b/com.twin.app.shoptime/src/utils/Config.js
@@ -44,14 +44,17 @@ export const CATEGORY_DATA_MAX_RESULTS_LIMIT = 20;

 // popup
 export const ACTIVE_POPUP = {
-  termsPopup: "termsPopup",
-  exitPopup: "exitPopup",
-  optionPopup: "optionPopup",
+  alarmOffPopup: "alarmOffPopup",
  couponPopup: "couponPopup",
+  exitPopup: "exitPopup",
  favoritePopup: "favoritePopup",
  loginPopup: "loginPopup",
-  alarmOffPopup: "alarmOffPopup",
+  noShowPopup: "noShowPopup",
+  optionPopup: "optionPopup",
  qrPopup: "qrPopup",
+  reminderPopup: "reminderPopup",
+  termsPopup: "termsPopup",
+  timeConflictPopup: "timeConflictPopup",
 };
 export const DEBUG_VIDEO_SUBTITLE_TEST = false;
 export const AUTO_SCROLL_DELAY = 600;
@@ -97,7 +100,11 @@ export const LOG_TP_NO = {

  DETAIL: {},

-  SHOP_BY_MOBILE: {},
+  SHOP_BY_MOBILE: {
+    SHOP_BY_MOBILE: "450",
+    AGREE_AND_SEND: "452",
+    QR_CODE_REDIRECT_AND_CREATE_TRACKING_LOG: "453",
+  },

  TERMS: {
    AGREE: "650",
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
@@ -24,8 +24,12 @@ import {
  getBrandShowroom,
  getBrandTSVInfo,
 } from "../../actions/brandActions";
-import { changeAppStatus, setHidePopup } from "../../actions/commonActions";
 import {
+  // changeAppStatus,
+  setHidePopup,
+} from "../../actions/commonActions";
+import {
+  deleteMyUpcomingAlertShow,
  getMyUpcomingAlertShow,
  setMyUpcomingUseAlert,
 } from "../../actions/myPageActions";
@@ -35,7 +39,7 @@ import TButton, { TYPES } from "../../components/TButton/TButton";
 import TPanel from "../../components/TPanel/TPanel";
 import TPopUp from "../../components/TPopUp/TPopUp";
 import useScrollTo from "../../hooks/useScrollTo";
-import { panel_names } from "../../utils/Config";
+import { ACTIVE_POPUP, panel_names } from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
 import Banner from "./Banner/Banner";
 import FeaturedBestSeller from "./FeaturedBestSeller/FeaturedBestSeller";
@@ -49,6 +53,32 @@ import Series from "./Series/Series";
 import Showroom from "./Showroom/Showroom";
 import TodaysDeals from "./TodaysDeals/TodaysDeals";
 import UpComing from "./UpComing/UpComing";
+import { setMainLiveUpcomingAlarm } from "../../actions/mainActions";
+
+const TEMPLATE_CODE_CONF = {
+  LIVE_CHANNELS: "BRD00101",
+  UP_COMING: "BRD00102",
+  TODAYS_DEALS: "BRD00103",
+  BEST_SELLER: "BRD00104",
+  RECOMMENDED_SHOWS: "BRD00105",
+  FEATURED_CREATORS: "BRD00106",
+  SERIES: "BRD00107",
+  CATEGORY: "BRD00108",
+  SHOWROOM: "BRD00109",
+};
+
+const STRING_CONF = {
+  CANCEL: $L("CANCEL"),
+  OK: $L("OK"),
+  YES: $L("YES"),
+  NO_SHOW_MESSAGE: $L("This show doesn’t exist anymore"),
+  REMINDER_ON_OFF_MESSAGE: $L(
+    "Reminder Notification is turned off. Select Yes to turn on reminders."
+  ),
+  UPCOMING_TIME_CONFLICT_MESSAGE: $L(
+    "A Reminder is already set on the selected schedule. Press OK to overwrite the existing Reminder."
+  ),
+};

 const findItemByValue = (array, value) =>
  array.find((obj) => obj["patnrId"] === value);
@@ -92,24 +122,19 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
  }
 };

-const TEMPLATE_CODE_CONF = {
-  LIVE_CHANNELS: "BRD00101",
-  UP_COMING: "BRD00102",
-  TODAYS_DEALS: "BRD00103",
-  BEST_SELLER: "BRD00104",
-  RECOMMENDED_SHOWS: "BRD00105",
-  FEATURED_CREATORS: "BRD00106",
-  SERIES: "BRD00107",
-  CATEGORY: "BRD00108",
-  SHOWROOM: "BRD00109",
-};
+const getMessageByPopupType = (type) => {
+  switch (type) {
+    case ACTIVE_POPUP.reminderPopup:
+      return STRING_CONF.REMINDER_ON_OFF_MESSAGE;

-const STRING_CONF = {
-  NO: $L("No"),
-  YES: $L("YES"),
-  POPUP_MESSAGE: $L(
-    "Reminder Notification is turned off. Select Yes to turn on reminders."
-  ),
+    case ACTIVE_POPUP.timeConflictPopup:
+      return STRING_CONF.UPCOMING_TIME_CONFLICT_MESSAGE;
+
+    case ACTIVE_POPUP.noShowPopup:
+      return STRING_CONF.NO_SHOW_MESSAGE;
+    default:
+      return;
+  }
 };

 export default function FeaturedBrandsPanel() {
@@ -121,6 +146,7 @@ export default function FeaturedBrandsPanel() {
  const panelInfo = useSelector((state) => state.panels.panels[0].panelInfo);

  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
+  const activePopup = useSelector((state) => state.common.popup.activePopup);

  const brandInfo = useSelector(
    (state) => state.brand.brandInfoData.data.brandInfo
@@ -237,6 +263,7 @@ export default function FeaturedBrandsPanel() {

  const forceUpdateJob = useRef(new Job(() => forceUpdate({}), 300));
  const initialFocusTimeoutJob = useRef(new Job((func) => func(), 600));
+  const alamTimer = useRef(null);

  const isLoading = useMemo(
    () =>
@@ -305,13 +332,13 @@ export default function FeaturedBrandsPanel() {
    isCameThroughDeepLink,
  ]);

-  useEffect(() => {
-    const showLoadingPanel = isLoading
-      ? { show: true, type: "wait" }
-      : { show: false };
+  // useEffect(() => {
+  //   const showLoadingPanel = isLoading
+  //     ? { show: true, type: "wait" }
+  //     : { show: false };

-    dispatch(changeAppStatus({ showLoadingPanel }));
-  }, [dispatch, isLoading]);
+  //   dispatch(changeAppStatus({ showLoadingPanel }));
+  // }, [dispatch, isLoading]);

  useEffect(() => {
    if (!brandInfo) {
@@ -557,6 +584,7 @@ export default function FeaturedBrandsPanel() {
          );
        }

+        clearTimeout(alamTimer.current);
        initialFocusTimeoutJobValue.stop();
      }
    };
@@ -580,9 +608,24 @@ export default function FeaturedBrandsPanel() {
  }, [firstFocusableTargetId, scrollTopBody]);

  const handlePopupClick = useCallback(() => {
-    dispatch(setMyUpcomingUseAlert({ upcomingAlamUseFlag: "Y" }));
+    if (activePopup?.type === ACTIVE_POPUP.reminderPopup) {
+      dispatch(setMyUpcomingUseAlert({ upcomingAlamUseFlag: "Y" }));
+    }
+
+    if (activePopup?.type === ACTIVE_POPUP.timeConflictPopup) {
+      const { upcomingAlarmInfo, deletedAlertShows } = activePopup;
+
+      dispatch(setMainLiveUpcomingAlarm(upcomingAlarmInfo));
+      dispatch(deleteMyUpcomingAlertShow({ showList: deletedAlertShows }));
+
+      alamTimer.current = setTimeout(
+        () => dispatch(getMyUpcomingAlertShow()),
+        200
+      );
+    }
+
    dispatch(setHidePopup());
-  }, [dispatch]);
+  }, [dispatch, activePopup]);

  const handlePopupClose = useCallback(() => {
    dispatch(setHidePopup());
@@ -796,15 +839,21 @@ export default function FeaturedBrandsPanel() {
      </TBody>

      <TPopUp
-        button1Text={STRING_CONF.YES}
-        button2Text={STRING_CONF.NO}
+        button1Text={
+          activePopup?.type !== ACTIVE_POPUP.noShowPopup
+            ? STRING_CONF.YES
+            : STRING_CONF.OK
+        }
+        button2Text={
+          activePopup?.type !== ACTIVE_POPUP.noShowPopup && STRING_CONF.CANCEL
+        }
        hasButton
        hasText
        kind="textPopup"
        onClick={handlePopupClick}
        onClose={handlePopupClose}
        open={popupVisible}
-        text={STRING_CONF.POPUP_MESSAGE}
+        text={getMessageByPopupType(activePopup?.type)}
      />
    </TPanel>
  );
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
@@ -7,8 +7,8 @@ import LiveChannelsErrorContents from "./LiveChannelsErrorContents/LiveChannelsE
 import LiveChannelsHorizontalContents from "./LiveChannelsHorizontalContents/LiveChannelsHorizontalContents";
 import LiveChannelsVerticalContents from "./LiveChannelsVerticalContents/LiveChannelsVerticalContents";
 import NoLiveContents from "./NoLiveContents/NoLiveContents";
-// import { useDispatch } from "react-redux";
-// import { getBrandChanInfo } from "../../../actions/brandActions";
+import { useDispatch } from "react-redux";
+import { getBrandChanInfo } from "../../../actions/brandActions";

 const STRING_CONF = {
  LIVE_CHANNELS: $L("LIVE CHANNELS"),
@@ -21,7 +21,7 @@ export default memo(function LiveChannels({
  selectedPatnrId,
  order,
 }) {
-  // const dispatch = useDispatch();
+  const dispatch = useDispatch();

  const [isVideoErrorOccurred, setIsVideoErrorOccurred] = useState(false);

@@ -31,26 +31,25 @@ export default memo(function LiveChannels({
    setIsVideoErrorOccurred(false);
  }, [selectedPatnrId]);

-  // pyh, don't delete!!
-  // useEffect(() => {
-  //   let interval;
+  useEffect(() => {
+    let interval;

-  //   if (brandChannelCnt === 0 || isVideoErrorOccurred) {
-  //     return clearInterval(interval);
-  //   }
+    if (brandChannelCnt === 0 || isVideoErrorOccurred) {
+      return clearInterval(interval);
+    }

-  //   interval = setInterval(
-  //     () =>
-  //       dispatch(
-  //         getBrandChanInfo({
-  //           patnrId: selectedPatnrId,
-  //         })
-  //       ),
-  //     30000
-  //   );
+    interval = setInterval(
+      () =>
+        dispatch(
+          getBrandChanInfo({
+            patnrId: selectedPatnrId,
+          })
+        ),
+      30000
+    );

-  //   return () => clearInterval(interval);
-  // }, [brandChannelCnt, isVideoErrorOccurred, selectedPatnrId]);
+    return () => clearInterval(interval);
+  }, [brandChannelCnt, dispatch, isVideoErrorOccurred, selectedPatnrId]);

  return (
    <div className={css.container} style={orderStyle}>
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx
@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from "react-redux";

 import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";

-// import { setBrandLiveChannelUpcoming } from "../../../../actions/brandActions";
 import { setShowPopup } from "../../../../actions/commonActions";
 import { setMainLiveUpcomingAlarm } from "../../../../actions/mainActions";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
@@ -13,6 +12,8 @@ import useScrollTopByDistance from "../../../../hooks/useScrollTopByDistance";
 import UpComingCard from "./UpComingCard/UpComingCard";
 import css from "./UpComingList.module.less";
 import { getMyUpcomingAlertShow } from "../../../../actions/myPageActions";
+// import { formatGMTString } from "../../../../utils/helperMethods";
+import { ACTIVE_POPUP } from "../../../../utils/Config";

 export default memo(function UpComingList({
  brandLiveChannelUpcoming,
@@ -34,7 +35,7 @@ export default memo(function UpComingList({

  const { cursorVisible } = useSelector((state) => state.common.appStatus);

-  const alamTimer = useRef();
+  const alamTimer = useRef(null);

  useEffect(() => {
    const gridListId = "upcoming-list-id";
@@ -50,64 +51,92 @@ export default memo(function UpComingList({
    return () => clearTimeout(alamTimer.current);
  }, [scrollLeft, selectedPatnrId]);

+  const handleClick = useCallback(
+    ({ endDt, patnrId, showId, strtDt }) =>
+      () => {
+        const selectedAlertShow = alertShows //
+          .find((show) => show.showId === showId && show.strtDt === strtDt);
+
+        const deletedAlertShow = alertShows //
+          .find((show) => show.showId !== showId && show.strtDt === strtDt);
+
+        const isTimeConflict = alertShows //
+          .some((show) => show.showId !== showId && show.strtDt === strtDt);
+
+        const alamDispFlag = selectedAlertShow?.alamDispFlag;
+        // const isShowStarted = formatGMTString(new Date()) >= strtDt;
+        const isReminderOff = upcomAlamUseFlag === "N";
+        const isReserved = alamDispFlag === "Y";
+
+        const upcomingAlarmInfo = {
+          alamDispFlag: "Y",
+          endDt,
+          patnrId,
+          showId,
+          strtDt,
+        };
+
+        if (isReminderOff) {
+          return dispatch(setShowPopup({ type: ACTIVE_POPUP.reminderPopup }));
+        }
+        //
+        // else if (isShowStarted) {
+        //   return dispatch(setShowPopup({ type: ACTIVE_POPUP.noShowPopup }));
+        // }
+        //
+        else if (isTimeConflict) {
+          return dispatch(
+            setShowPopup({
+              type: ACTIVE_POPUP.timeConflictPopup,
+              upcomingAlarmInfo,
+              deletedAlertShows: [
+                {
+                  patnrId: deletedAlertShow?.patnrId,
+                  showId: deletedAlertShow?.showId,
+                },
+              ],
+            })
+          );
+        }
+        //
+        else {
+          dispatch(
+            setMainLiveUpcomingAlarm({
+              ...upcomingAlarmInfo,
+              alamDispFlag: isReserved ? "N" : "Y",
+            })
+          );
+
+          alamTimer.current = setTimeout(
+            () => dispatch(getMyUpcomingAlertShow()),
+            200
+          );
+        }
+      },
+    [alertShows, dispatch, upcomAlamUseFlag]
+  );
+
+  const handleFocus = useCallback(() => {
+    if (cursorVisible) {
+      return;
+    }
+
+    scrollTopByDistance(
+      `[data-marker="scroll-marker"]`,
+      `[data-title="upcoming"]`,
+      scrollTopBody,
+      36
+    );
+  }, [cursorVisible, scrollTopBody, scrollTopByDistance]);
+
  const renderItem = useCallback(
    ({ index, ...rest }) => {
-      const {
-        // alamDispFlag,
-        endDt,
-        hstNm,
-        patnrId,
-        showId,
-        showNm,
-        strtDt,
-      } = brandLiveChannelUpcoming[index];
+      const { hstNm, showId, showNm, strtDt } = brandLiveChannelUpcoming[index];

-      // const isReserved = alamDispFlag === "Y";
+      const selectedAlertShow = alertShows //
+        .find((show) => show.showId === showId && show.strtDt === strtDt);

-      const item = alertShows.find(
-        (alertShow) =>
-          alertShow.showId === showId && alertShow.strtDt === strtDt
-      );
-
-      const alamDispFlag = item?.alamDispFlag;
-
-      const isReserved = alamDispFlag === "Y";
-
-      const handleClick = () => {
-        if (upcomAlamUseFlag === "N") {
-          return dispatch(setShowPopup());
-        }
-
-        dispatch(
-          setMainLiveUpcomingAlarm({
-            alamDispFlag: isReserved ? "N" : "Y",
-            endDt,
-            patnrId,
-            showId,
-            strtDt,
-          })
-        );
-
-        // dispatch(setBrandLiveChannelUpcoming({ showId, strtDt }));
-
-        alamTimer.current = setTimeout(
-          () => dispatch(getMyUpcomingAlertShow()),
-          100
-        );
-      };
-
-      const handleFocus = () => {
-        if (cursorVisible) {
-          return;
-        }
-
-        scrollTopByDistance(
-          `[data-marker="scroll-marker"]`,
-          `[data-title="upcoming"]`,
-          scrollTopBody,
-          36
-        );
-      };
+      const alamDispFlag = selectedAlertShow?.alamDispFlag;

      return (
        <UpComingCard
@@ -115,21 +144,13 @@ export default memo(function UpComingList({
          hstNm={hstNm}
          showNm={showNm}
          strtDt={strtDt}
-          onClick={handleClick}
+          onClick={handleClick(brandLiveChannelUpcoming[index])}
          onFocus={handleFocus}
          {...rest}
        />
      );
    },
-    [
-      alertShows,
-      brandLiveChannelUpcoming,
-      cursorVisible,
-      dispatch,
-      scrollTopBody,
-      scrollTopByDistance,
-      upcomAlamUseFlag,
-    ]
+    [alertShows, brandLiveChannelUpcoming, handleClick, handleFocus]
  );

  return (