myOrder popup

2024-07-12 10:37:23 +09:00
parent eca8713e80
commit a24e1de0c6
6 changed files with 186 additions and 19 deletions
--- a/com.twin.app.shoptime/src/actions/orderActions.js
+++ b/com.twin.app.shoptime/src/actions/orderActions.js
@@ -165,7 +165,7 @@ export const getMyinfoOrderDetailSearch =
  };

 export const getMyinfoOrderShippingSearch =
-  (params) => (dispatch, getState) => {
+  (params, callback) => (dispatch, getState) => {
    const { mbrNo, ordNo, patnrId, prdtId, prodSno } = params;

    const onSuccess = (response) => {
@@ -175,6 +175,8 @@ export const getMyinfoOrderShippingSearch =
        type: types.GET_MY_INFO_ORDER_SHIPPING_SEARCH,
        payload: response.data.data,
      });
+
+      if (callback) callback(response.data);
    };

    const onFail = (error) => {
--- a/com.twin.app.shoptime/src/utils/helperMethods.js
+++ b/com.twin.app.shoptime/src/utils/helperMethods.js
@@ -363,3 +363,29 @@ export const getQRCodeUrl = ({
    cardListUrl: `${baseUrl}card_list.jsp?cntryCd=${countryCode}`,
  };
 };
+
+// ex: JANUARY 01, 2024
+export const getFormattingDate = (dateString) => {
+  const date = new Date(dateString.replace(" ", "T"));
+
+  const monthNames = [
+    $L("JANUARY"),
+    $L("FEBRUARY"),
+    $L("MARCH"),
+    $L("APRIL"),
+    $L("MAY"),
+    $L("JUNE"),
+    $L("JULY"),
+    $L("AUGUST"),
+    $L("SEPTEMBER"),
+    $L("OCTOBER"),
+    $L("NOVEMBER"),
+    $L("DECEMBER"),
+  ];
+
+  const month = monthNames[date.getMonth()];
+  const day = date.getDate().toString().padStart(2, "0");
+  const year = date.getFullYear();
+
+  return `${month} ${day}, ${year}`;
+};
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
@@ -57,7 +57,11 @@ import useLogService from "../../../../hooks/useLogService";
 import usePrevious from "../../../../hooks/usePrevious";
 import * as Config from "../../../../utils/Config";
 import { GET_MY_INFO_ORDER_SEARCH_LIMIT } from "../../../../utils/Config";
-import { $L, isElementInContainer } from "../../../../utils/helperMethods";
+import {
+  $L,
+  getFormattingDate,
+  isElementInContainer,
+} from "../../../../utils/helperMethods";
 import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import NoOrderList from "./components/NoOrderList";
 import OrderListCard from "./components/OrderListCard";
@@ -106,6 +110,9 @@ export default function MyOrders({ title, panelInfo, isOnTop }) {
  const cancelReasonInfo = useSelector(
    (state) => state.cancel.cancelReasonInfoData?.cancelCodeInfo
  );
+  const { dlvrHistDetailInfo, dlvrHistInfo } = useSelector(
+    (state) => state.order.orderShippingData
+  );

  const { popupVisible, activePopup, data } = popup || {};

@@ -368,7 +375,6 @@ export default function MyOrders({ title, panelInfo, isOnTop }) {
    (detailCd, detailCdNm) => {
      dispatch(
        setShowSecondaryPopup(Config.ACTIVE_POPUP.cancelConfirmPopup, {
-          secondaryText: "zz",
          secondaryData: {
            mbrNo: userNumber,
            ordNo: popup.data,
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less
@@ -326,3 +326,146 @@
    }
  }
 }
+
+.trackPackagePopupContainer {
+  .font(@fontFamily: @baseFont, @fontSize:24px);
+
+  .header {
+    background-color: @COLOR_SKYBLUE;
+    padding: 40px 60px;
+    color: @COLOR_GRAY07;
+
+    .headerTitle {
+      font-size: 36px;
+      font-weight: bold;
+    }
+  }
+
+  .contentsBody {
+    padding: 30px 60px;
+
+    .tScroller {
+      > div {
+        max-height: 750px !important;
+      }
+
+      .status {
+        padding: 30px;
+        background-color: @COLOR_WHITE;
+        border: 1px solid @COLOR_GRAY02;
+        display: flex;
+        justify-content: space-between;
+
+        .orderStatus {
+          color: @COLOR_GRAY06;
+          font-weight: bold;
+        }
+
+        .arrivingDate {
+          color: @COLOR_GRAY07;
+        }
+      }
+
+      .productWrap {
+        padding: 30px;
+        border: 1px solid @COLOR_GRAY02;
+        border-top: none;
+        position: relative;
+        background-color: @COLOR_WHITE;
+
+        > img {
+          width: 40px;
+          height: 40px;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        .prdtNm {
+          max-width: 650px;
+          margin-left: 50px;
+          color: @COLOR_GRAY06;
+          font-weight: bold;
+          .elip(@clamp: 1);
+        }
+      }
+
+      .addressWrap {
+        background: @BG_COLOR_02;
+        padding: 30px;
+        border: 1px solid @COLOR_GRAY02;
+        border-top: none;
+
+        .addressTitle {
+          color: @COLOR_GRAY06;
+          font-weight: bold;
+        }
+
+        ul {
+          margin: 20px 0 40px;
+
+          li {
+            margin-bottom: 6px;
+            color: @COLOR_GRAY03;
+
+            &:last-of-type {
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+
+      .orderSummaryWrap {
+        border: 1px solid @COLOR_GRAY02;
+        border-top: none;
+
+        .orderSummaryTitle {
+          background-color: @COLOR_WHITE;
+          padding: 30px;
+          color: @COLOR_GRAY06;
+          font-weight: bold;
+        }
+
+        .summaryList {
+          padding: 30px 0;
+
+          .summaryItem {
+            padding: 0 30px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 30px;
+
+            .label {
+              font-weight: bold;
+              color: @COLOR_GRAY06;
+            }
+
+            .value {
+              color: @COLOR_GRAY03;
+            }
+
+            &:last-of-type {
+              margin-bottom: 0;
+            }
+          }
+        }
+
+        .totalPrice {
+          padding: 30px;
+          background-color: @COLOR_NAVY;
+          color: @COLOR_WHITE;
+          display: flex;
+          justify-content: space-between;
+          font-size: 30px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  .buttonWrap {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+  }
+}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.jsx
@@ -26,10 +26,9 @@ export default memo(function OrderListCard({
  cancelItem = false,
  doSendLogOrderBtnClick,
 }) {
-  const dispatch = useDispatch();
-
  const {
    ordNo,
+    mbrNo,
    currSign,
    currSignLoc,
    ordPmtReqAmt,
@@ -82,6 +81,8 @@ export default memo(function OrderListCard({
        onClickBuyAgain={onClickBuyAgain}
        cancelItem={cancelItem}
        doSendLogOrderBtnClick={doSendLogOrderBtnClick}
+        ordNo={ordNo}
+        mbrNo={mbrNo}
      />
    </OrderListCardContainer>
  );
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from "react";

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

 import defaultLogoImg from "../../../../../../assets/images/ic-tab-partners-default@3x.png";
 import defaultImageItem from "../../../../../../assets/images/img-thumb-empty-product@3x.png";
@@ -41,6 +41,8 @@ export default function OrderListCardStatus({
  onClickBuyAgain,
  cancelItem,
  doSendLogOrderBtnClick,
+  ordNo,
+  mbrNo,
 }) {
  const {
    prdtId,
@@ -56,8 +58,6 @@ export default function OrderListCardStatus({
    currSignLoc,
    prdtOptPrc,
    dlvrAmt,
-    ordNo,
-    mbrNo,
    patnrId,
    auctProdYn,
    patncNm,
@@ -161,16 +161,6 @@ export default function OrderListCardStatus({
    }
  }, [dispatch, doSendLogOrderBtnClick]);

-  const onClickTrackPackage = useCallback(() => {
-    dispatch(
-      getMyinfoOrderShippingSearch({ mbrNo, ordNo, patnrId, prdtId, prodSno })
-    );
-
-    if (doSendLogOrderBtnClick) {
-      doSendLogOrderBtnClick(LOG_STRING_CONF.TRACK_PACKAGE);
-    }
-  }, [dispatch, doSendLogOrderBtnClick]);
-
  return (
    <>
      <div className={css.itemListStatusContainer}>
@@ -240,7 +230,6 @@ export default function OrderListCardStatus({
                _onClickBuyAgain,
                onClickCancelItem,
                onClickReturnExchange,
-                onClickTrackPackage,
              })
            )}
          </div>