eventPopUpBanner / myInfo

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

@@ -79,6 +79,13 @@ export const PLAN = "PLAN";
 export const ADD_PLAN = "ADD_PLAN";
 export const MORE = "MORE";
 
+export const MYINFO_TABS = {
+  PAYMENT: 0,
+  BILLING_ADDRESS: 1,
+  SHIPPING_ADDRESS: 2,
+  COUPON: 3,
+};
+
 export const LOG_TP_NO = {
   LIVE: {
     HOME: "100",

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

@@ -22,7 +22,12 @@ import MobileSendPopUp from "../../../components/MobileSend/MobileSendPopUp";
 import TPopUp from "../../../components/TPopUp/TPopUp";
 import useLogService from "../../../hooks/useLogService";
 import { launchMembershipApp } from "../../../lunaSend";
-import { ACTIVE_POPUP, LOG_TP_NO, panel_names } from "../../../utils/Config";
+import {
+  ACTIVE_POPUP,
+  LOG_TP_NO,
+  MYINFO_TABS,
+  panel_names,
+} from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "../EventPopUpBanner/EventPopUpBanner.module.less";
 
@@ -266,7 +271,11 @@ export default function EventPopUpBanner() {
           dispatch(
             pushPanel({
               name: panel_names.MY_PAGE_PANEL,
-              panelInfo: { menuNm: "My Info", menuOrd: 3 },
+              panelInfo: {
+                menuNm: "My Info",
+                menuOrd: 3,
+                tabForced: MYINFO_TABS.COUPON,
+              },
             })
           );
           break;

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx

@@ -4,52 +4,42 @@ 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 SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
-import ic_profile from '../../../../../assets/images/icons/ic-profile.svg';
-import myinfo_login
-  from '../../../../../assets/images/img-banner-myinfo-login@3x.png';
-import { getMyInfoBillingSearch } from '../../../../actions/billingActions';
-import { getMyInfoCardSearch } from '../../../../actions/cardActions';
+import ic_profile from "../../../../../assets/images/icons/ic-profile.svg";
+import myinfo_login from "../../../../../assets/images/img-banner-myinfo-login@3x.png";
+import { getMyInfoBillingSearch } from "../../../../actions/billingActions";
+import { getMyInfoCardSearch } from "../../../../actions/cardActions";
 import {
   changeAppStatus,
   launchMembershipApp,
   setHidePopup,
   setShowPopup,
-} from '../../../../actions/commonActions';
-import { getProductCouponInfo } from '../../../../actions/couponActions';
-import { getMyInfoShippingSearch } from '../../../../actions/shippingActions';
-import TBody from '../../../../components/TBody/TBody';
-import TButton, {
-  SIZES,
-  TYPES,
-} from '../../../../components/TButton/TButton';
+} from "../../../../actions/commonActions";
+import { getProductCouponInfo } from "../../../../actions/couponActions";
+import { getMyInfoShippingSearch } from "../../../../actions/shippingActions";
+import TBody from "../../../../components/TBody/TBody";
+import TButton, { SIZES, TYPES } from "../../../../components/TButton/TButton";
 import TButtonTab, {
   LIST_TYPE,
-} from '../../../../components/TButtonTab/TButtonTab';
-import THeader from '../../../../components/THeader/THeader';
-import TPopUp from '../../../../components/TPopUp/TPopUp';
-import TQRCode from '../../../../components/TQRCode/TQRCode';
-import useLogService from '../../../../hooks/useLogService';
-import { getLoginUserData } from '../../../../lunaSend';
-import * as Config from '../../../../utils/Config';
-import { $L } from '../../../../utils/helperMethods';
-import css from '../MyInfo/MyInfo.module.less';
-import BillingAddressTab
-  from './MyInfoTabContents/BillingAddressTab/BillingAddressTab';
-import CouponTab from './MyInfoTabContents/CouponTab/CouponTab';
-import PaymentTab from './MyInfoTabContents/PaymentTab/PaymentTab';
-import ShippingAddressTab
-  from './MyInfoTabContents/ShippingAddressTab/ShippingAddressTab';
+} from "../../../../components/TButtonTab/TButtonTab";
+import THeader from "../../../../components/THeader/THeader";
+import TPopUp from "../../../../components/TPopUp/TPopUp";
+import TQRCode from "../../../../components/TQRCode/TQRCode";
+import useLogService from "../../../../hooks/useLogService";
+import { getLoginUserData } from "../../../../lunaSend";
+import * as Config from "../../../../utils/Config";
+import { $L } from "../../../../utils/helperMethods";
+import css from "../MyInfo/MyInfo.module.less";
+import BillingAddressTab from "./MyInfoTabContents/BillingAddressTab/BillingAddressTab";
+import CouponTab from "./MyInfoTabContents/CouponTab/CouponTab";
+import PaymentTab from "./MyInfoTabContents/PaymentTab/PaymentTab";
+import ShippingAddressTab from "./MyInfoTabContents/ShippingAddressTab/ShippingAddressTab";
 
 const TabContainer = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -74,6 +64,13 @@ const getButtonTabList = () => {
 
 let buttonTabList = null;
 
+const myInfoTabContents = {
+  [Config.MYINFO_TABS.PAYMENT]: PaymentTab,
+  [Config.MYINFO_TABS.BILLING_ADDRESS]: BillingAddressTab,
+  [Config.MYINFO_TABS.SHIPPING_ADDRESS]: ShippingAddressTab,
+  [Config.MYINFO_TABS.COUPON]: CouponTab,
+};
+
 export default function MyInfo({ title, cbScrollTo }) {
   if (!buttonTabList) {
     buttonTabList = getButtonTabList();
@@ -95,16 +92,9 @@ export default function MyInfo({ title, cbScrollTo }) {
   );
   const cardInfo = useSelector((state) => state.card.cardData?.easyPmtSeq);
 
-  const [tab, setTab] = useState(0);
+  const [tab, setTab] = useState(Config.MYINFO_TABS.PAYMENT);
   const [loginSuccess, setLoginSuccess] = useState(false);
 
-  const myInfoTabContents = {
-    0: PaymentTab,
-    1: BillingAddressTab,
-    2: ShippingAddressTab,
-    3: CouponTab,
-  };
-
   const qrCodeUrls = useMemo(
     () => ({
       0: `https://qt3-m.shoptime.lgappstv.com/card_list.jsp?caller=checkout&mode=&selected=${cardInfo}`,
@@ -128,7 +118,12 @@ export default function MyInfo({ title, cbScrollTo }) {
   }, [loginSuccess, sendLogLgAccountLogin, userNumber]);
 
   useEffect(() => {
-    setTab(0);
+    if (panelInfos && panelInfos.panelInfo && panelInfos.panelInfo.tabForced) {
+      setTab(panelInfos.panelInfo.tabForced);
+      Spotlight.focus(
+        `[data-spotlight-id="tab-${panelInfos.panelInfo.tabForced}"]`
+      );
+    }
 
     if (userNumber) {
       dispatch(getMyInfoCardSearch({ mbrNo: userNumber }));
@@ -149,14 +144,23 @@ export default function MyInfo({ title, cbScrollTo }) {
 
   useEffect(() => {
     if (userNumber) {
-      const initFoucsedItem = document.querySelector(
-        '[data-spotlight-id="tab-0"]'
-      );
-      Spotlight.focus(initFoucsedItem);
+      let initFocusedItem;
+      if (
+        panelInfos &&
+        panelInfos.panelInfo &&
+        panelInfos.panelInfo.tabForced
+      ) {
+        initFocusedItem = document.querySelector(
+          `[data-spotlight-id="tab-${panelInfos.panelInfo.tabForced}"]`
+        );
+      } else {
+        initFocusedItem = document.querySelector('[data-spotlight-id="tab-0"]');
+      }
+      Spotlight.focus(initFocusedItem);
     } else {
       Spotlight.focus("mypage-login-button");
     }
-  }, [userNumber]);
+  }, [userNumber, panelInfos]);
 
   const handleLogoutButtonClick = useCallback(() => {
     dispatch(setShowPopup(Config.ACTIVE_POPUP.logoutPopup));