checkout loading status fix / add my page tabs global variable

com.twin.app.shoptime/src/actions/checkoutActions.js

@@ -56,11 +56,14 @@ export const insertMyInfoCheckoutOrder =
         payload: response.data.data,
       });
 
+      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+
       if (callback) callback(response);
     };
 
     const onFail = (error) => {
       console.error("insertMyInfoCheckoutOrder onFail: ", error);
+      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
     };
 
     TAxios(

com.twin.app.shoptime/src/actions/pinCodeActions.js

@@ -20,11 +20,13 @@ export const getMyInfoCardPincodeCheck =
         payload: response.data,
       });
 
+      if (response.data.retCode !== 0) {
+        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+      }
+
       if (callback) {
         callback(response.data);
       }
-
-      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
     };
 
     const onFail = (error) => {

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

@@ -90,6 +90,16 @@ export const PLAN = "PLAN";
 export const ADD_PLAN = "ADD_PLAN";
 export const MORE = "MORE";
 
+export const MYPAGE_TABS = {
+  MY_INFO: 30800,
+  MY_ORDERS: 30900,
+  RECENTLY_VIEWED: 30300,
+  FAVORITES: 30200,
+  REMINDERS: 30400,
+  SUPPORT: 30500,
+  TERMS_OF_SERVICE: 30600,
+};
+
 export const MYINFO_TABS = {
   PAYMENT: 0,
   BILLING_ADDRESS: 1,

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

@@ -2,12 +2,15 @@ import React, { useCallback, useEffect } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
+import confirmCardImage from "../../../assets/images/img-checkout-complete.png";
 import { popPanel, pushPanel, resetPanels } from "../../actions/panelActions";
+import CustomImage from "../../components/CustomImage/CustomImage";
 import TButton from "../../components/TButton/TButton";
 import TPanel from "../../components/TPanel/TPanel";
 import useLogService from "../../hooks/useLogService";
 import * as Config from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
+import { myPageComponents } from "../MyPagePanel/MyPagePanel";
 import css from "./ConfirmPanel.module.less";
 
 export default function ConfirmPanel({ spotlightId }) {
@@ -15,6 +18,11 @@ export default function ConfirmPanel({ spotlightId }) {
   const dispatch = useDispatch();
 
   const panels = useSelector((state) => state.panels.panels);
+  const myPageTabs = useSelector((state) => state.home.menuData.data.mypage);
+  const myOrder =
+    myPageTabs.find((item) => item.menuId === Config.MYPAGE_TABS.MY_ORDERS) ||
+    {};
+
   const panelInfo = panels.find(
     (panel) => panel.name === "confirmpanel"
   )?.panelInfo;
@@ -61,12 +69,13 @@ export default function ConfirmPanel({ spotlightId }) {
       pushPanel({
         name: Config.panel_names.MY_PAGE_PANEL,
         panelInfo: {
-          menuNm: "My Orders",
+          menuId: myOrder.menuId,
-          menuOrd: 4,
+          menuNm: myOrder.menuNm,
+          menuOrd: myOrder.menuOrd,
         },
       })
     );
-  }, [dispatch]);
+  }, [dispatch, myOrder]);
 
   const handleContinueClick = useCallback(() => {
     dispatch(resetPanels());
@@ -134,10 +143,17 @@ export default function ConfirmPanel({ spotlightId }) {
               </span>
             )}
           </div>
+          <CustomImage
+            src={confirmCardImage}
+            alt="confirmCardImage"
+            className={css.img}
+          />
         </div>
       )}
       <div className={css.buttonWrap}>
-        <TButton onClick={handleReviewClick}>{$L("REVIEW ORDER")}</TButton>
+        <TButton onClick={handleReviewClick} className={css.firstButton}>
+          {$L("REVIEW ORDER")}
+        </TButton>
         <TButton onClick={handleContinueClick}>
           {$L("CONTINUE SHOPPING")}
         </TButton>

com.twin.app.shoptime/src/views/ConfirmPanel/ConfirmPanel.module.less

@@ -3,7 +3,7 @@
 
 .confirmPanel {
   background-color: @BG_COLOR_01;
-  padding-top: 100px;
+  padding-top: 100px !important;
 
   .title {
     .font(@fontSize: 48px, @fontFamily: @baseFont);
@@ -20,6 +20,13 @@
     padding: 40px 0 90px 60px;
     border: 1px solid #dadada;
     border-radius: 12px;
+    position: relative;
+
+    .img {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
 
     .topContents {
       margin-bottom: 27px;
@@ -92,5 +99,9 @@
     width: 100%;
     text-align: center;
     margin: 0 auto;
+
+    .firstButton {
+      margin-right: 12px;
+    }
   }
 }