[EndOfServicePopup] 신규 생성

com.twin.app.shoptime/resources/en/strings.json

@@ -228,5 +228,6 @@
   "If you do not wish to agree to these terms, please proceed to the following link.": "If you do not wish to agree to these terms, please proceed to the following link.",
   "Click the screen to see more products!": "Click the screen to see more products!",
   "By clicking Agree and Send button, I agree that LGE may collect and store my cell phone number to send text messages as I requested, for data analysis and for feature-enhancement purposes. By entering my cell phone number, I agree to receive messages from LGE with information on how to purchase the product I selected. Message and data rates may apply.": "By clicking \"Agree and Send\" button, I agree that LGE may collect and store my cell phone number to send text messages as I requested, for data analysis and for feature-enhancement purposes. <br/> By entering my cell phone number, I agree to receive messages from LGE with information on how to purchase the product I selected. Message and data rates may apply.",
-  "No shows or items recently viewed.": "No shows or items recently viewed."
+  "No shows or items recently viewed.": "No shows or items recently viewed.",
+  "The ShopTime service will be discontinued on your current device version starting September 1st. To continue using the service, please access ShopTime on devices with webOS 4.0 os higher.": "The ShopTime service will be discontinued on your current device version starting September 1st. <br/> To continue using the service, please access ShopTime on devices with webOS 4.0 os higher."
 }

com.twin.app.shoptime/src/reducers/localSettingsReducer.js

@@ -13,27 +13,33 @@ const initialLocalSettings = {
   recentItems: [],
   languageSetting: "system", //US, GB, DE, RU
   watchRecord: {},
-  oldDb8Deleted: false
+  oldDb8Deleted: false,
+  skipEndOfServicePopup: false,
 };
 
 const updateAWithBKeys = (A, B) => {
   for (const key in B) {
     if (Object.prototype.hasOwnProperty.call(B, key)) {
       // B에만 존재하는 키를 A에 업데이트
-      if (!Object.prototype.hasOwnProperty.call(A, key) || A[key] === undefined) {
+      if (
+        !Object.prototype.hasOwnProperty.call(A, key) ||
+        A[key] === undefined
+      ) {
         A[key] = B[key];
       }
     }
   }
   return A;
-}
+};
 const updateInitialLocalSettings = () => {
   let data = readLocalStorage("localSettings", initialLocalSettings);
-  if(data.version !== initialLocalSettings.version){
+  if (data.version !== initialLocalSettings.version) {
-    console.log('localSettingsReducer version updated. All datas are initialized.');
+    console.log(
+      "localSettingsReducer version updated. All datas are initialized."
+    );
     data = initialLocalSettings;
     writeLocalStorage("localSettings", initialLocalSettings);
-  }else{
+  } else {
     updateAWithBKeys(data, initialLocalSettings);
   }
   return data;

com.twin.app.shoptime/src/utils/Config.js

@@ -78,6 +78,7 @@ export const ACTIVE_POPUP = {
   unSupportedCountryPopup: "unSupportedCountryPopup",
   changeCountyPopup: "changeCounty",
   networkErrorPopup: "networkErrorPopup",
+  endOfServicePopup: "endOfServicePopup",
 };
 export const DEBUG_VIDEO_SUBTITLE_TEST = false;
 export const AUTO_SCROLL_DELAY = 600;

com.twin.app.shoptime/src/views/HomePanel/EndOfServicePopUp/EndOfServicePopUp.jsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+  changeLocalSettings,
+  setHidePopup,
+} from "../../../actions/commonActions";
+import TPopUp from "../../../components/TPopUp/TPopUp";
+import { $L } from "../../../utils/helperMethods";
+import css from "./EndOfServicePopUp.module.less";
+
+export default function EndOfServicePopUp() {
+  const dispatch = useDispatch();
+
+  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
+  const skipEndOfServicePopup = useSelector(
+    (state) => state.localSettings.skipEndOfServicePopup
+  );
+
+  const expirationDate = new Date("2024-09-01");
+
+  useEffect(() => {
+    const now = new Date();
+    if (now.getTime() > expirationDate.getTime()) {
+      dispatch(setHidePopup());
+      dispatch(
+        changeLocalSettings({
+          skipEndOfServicePopup: true,
+        })
+      );
+    } else return;
+  }, []);
+
+  const onClose = useCallback(() => {
+    dispatch(setHidePopup());
+  }, [dispatch]);
+
+  const handleSkip = useCallback(() => {
+    dispatch(
+      changeLocalSettings({
+        skipEndOfServicePopup: true,
+      })
+    );
+    dispatch(setHidePopup());
+  }, [dispatch]);
+
+  return (
+    <TPopUp
+      hasButton
+      button2Text={$L("OK")}
+      button1Text={$L("SKIP")}
+      hasText
+      text={
+        <div
+          dangerouslySetInnerHTML={{
+            __html: `${$L(
+              "The ShopTime service will be discontinued on your current device version starting September 1st. To continue using the service, please access ShopTime on devices with webOS 4.0 os higher."
+            )}`,
+          }}
+        ></div>
+      }
+      open={popupVisible && !skipEndOfServicePopup}
+      kind="textPopup"
+      className={css.endOfServicePopup}
+      onClose={onClose}
+      onClick={handleSkip}
+    />
+  );
+}

com.twin.app.shoptime/src/views/HomePanel/EndOfServicePopUp/EndOfServicePopUp.module.less

@@ -0,0 +1,2 @@
+.endOfServicePopup {
+}

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

@@ -49,6 +49,7 @@ import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
 import css from "../HomePanel/HomePanel.module.less";
 import PopularShow from "../HomePanel/PopularShow/PopularShow";
 import SubCategory from "../HomePanel/SubCategory/SubCategory";
+import EndOfServicePopUp from "./EndOfServicePopUp/EndOfServicePopUp";
 import EventPopUpBanner from "./EventPopUpBanner/EventPopUpBanner";
 
 const TEMPLATE_CODE_CONF = {
@@ -105,6 +106,9 @@ export default function HomePanel({ isOnTop }) {
   const isDeepLink = useSelector(
     (state) => state.common.deepLinkInfo.isDeepLink
   );
+  const skipEndOfServicePopup = useSelector(
+    (state) => state.localSettings.skipEndOfServicePopup
+  );
 
   const [btnDisabled, setBtnDisabled] = useState(true);
   const [arrowBottom, setArrowBottom] = useState(true);
@@ -443,15 +447,23 @@ export default function HomePanel({ isOnTop }) {
 
   const checkBillngEvent = useCallback(
     (eventTpCd) => {
-      if (eventTpCd === "EVT00108" || eventTpCd === "EVT00107") {
+      if (webOSVersion && Number(webOSVersion) >= 4) {
-        if (webOSVersion && Number(webOSVersion) >= 6) {
+        if (eventTpCd === "EVT00108" || eventTpCd === "EVT00107") {
-          setEventPopOpen(true);
+          if (webOSVersion && Number(webOSVersion) >= 6) {
-        } else setEventPopOpen(false);
+            setEventPopOpen(true);
-      } else setEventPopOpen(true);
+          } else setEventPopOpen(false);
+        } else setEventPopOpen(true);
+      } else setEventPopOpen(false);
     },
     [webOSVersion]
   );
 
+  useEffect(() => {
+    if (webOSVersion && Number(webOSVersion) < 4 && !skipEndOfServicePopup) {
+      dispatch(setShowPopup(ACTIVE_POPUP.endOfServicePopup));
+    }
+  }, [dispatch, skipEndOfServicePopup, webOSVersion]);
+
   useEffect(() => {
     if (Object.keys(eventData).length >= 1) {
       if (eventPopInfosData && eventClickSuccess === null) {
@@ -560,6 +572,8 @@ export default function HomePanel({ isOnTop }) {
         )}
         {(activePopup === ACTIVE_POPUP.eventPopup ||
           activePopup === ACTIVE_POPUP.smsPopup) && <EventPopUpBanner />}
+        {activePopup === ACTIVE_POPUP.endOfServicePopup &&
+          !skipEndOfServicePopup && <EndOfServicePopUp />}
       </TPanel>
     </>
   );