[SHOPTIME-3813] [SHOPTIME-3841] [My Orders] Tracking Package 버튼 선택 시 시나리오 & Return/Exchange 팝업 문구 변경

Tracking Package 선택 시 QR 팝업 추가
2025-01-13 10:56:07 +09:00
parent 6c813b70e4
commit 782af488ce
7 changed files with 112 additions and 133 deletions
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
@@ -54,6 +54,7 @@ const KINDS = [
  "returnExchangePopup",
  "orderCancelPopup",
  "cancelConfirmPopup",
+  "trackPackagePopup",
 ];

 export default function TPopUp({
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
@@ -30,9 +30,9 @@
  box-shadow: 0 20px 70px rgba(2, 3, 3, 0.7) !important;
 }

-.default-style() {
+.default-style(@width: 780px) {
  .info {
-    width: 780px;
+    width: @width;
    background-color: @BG_COLOR_01;
    color: @COLOR_GRAY03;
    display: flex;
@@ -606,6 +606,29 @@
  }
 }

+.trackPackagePopup {
+  .default-style(@width: 850px);
+
+  .info {
+    .text {
+      padding: 0 60px;
+      min-height: 180px;
+      margin: 30px 0;
+    }
+
+    .buttonContainer {
+      margin: 0 0 30px 0;
+      display: flex;
+      justify-content: center;
+      > div {
+        min-width: 240px;
+        height: 78px;
+        margin: 0 6px;
+      }
+    }
+  }
+}
+
 .cancelConfirmPopup {
  .default-style();
  position: absolute;
--- a/com.twin.app.shoptime/src/utils/Config.js
+++ b/com.twin.app.shoptime/src/utils/Config.js
@@ -77,6 +77,7 @@ export const ACTIVE_POPUP = {
  orderDetailCancel: "orderDetailCancel",
  errorPopup: "errorPopup",
  returnExchangePopup: "returnExchangePopup",
+  trackPackagePopup: "trackPackagePopup",
  unSupportedCountryPopup: "unSupportedCountryPopup",
  changeCountyPopup: "changeCounty",
  networkErrorPopup: "networkErrorPopup",
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
@@ -55,6 +55,7 @@ import TButtonTab, {
 import TDropDown from "../../../../components/TDropDown/TDropDown";
 import THeader from "../../../../components/THeader/THeader";
 import TPopUp from "../../../../components/TPopUp/TPopUp";
+import TQRCode from "../../../../components/TQRCode/TQRCode";
 import TScroller from "../../../../components/TScroller/TScroller";
 import TVerticalPagenator from "../../../../components/TVerticalPagenator/TVerticalPagenator";
 import usePrevious from "../../../../hooks/usePrevious";
@@ -804,7 +805,7 @@ export default function MyOrders({ title, panelInfo, isOnTop }) {
          button1Text={$L("OK")}
          onClick={handleClosePopupBtn}
        >
-          <div className={css.returnExchangePopup}>
+          <div className={css.trackPackagePopupContainer}>
            <p className={css.textWrap}>
              <span className={css.textDesc}>
                {$L(
@@ -821,6 +822,44 @@ export default function MyOrders({ title, panelInfo, isOnTop }) {
        </TPopUp>
      )}

+      {activePopup === Config.ACTIVE_POPUP.trackPackagePopup && (
+        <TPopUp
+          kind="trackPackagePopup"
+          open={popupVisible}
+          onClose={handleClosePopupBtn}
+          hasButton
+          button1Text={$L("OK")}
+          onClick={handleClosePopupBtn}
+        >
+          <div className={css.trackPackagePopupContainer}>
+            <p className={css.textWrap}>
+              <span className={css.textDesc}>
+                {$L(
+                  "You can check the delevery status on ShopLC website using the tracking number below."
+                )}
+                <span className={css.invTrceId}>
+                  {$L("Tracking Number")}: {data.invTrceId}
+                </span>
+                <span className={css.dlvrMeth}>
+                  {$L("Shipping Company")}: {data.dlvrMeth}
+                </span>
+              </span>
+            </p>
+            <div className={css.trackPackageQRCode}>
+              <div className={css.qrcode}>
+                <TQRCode
+                  text={
+                    "https://www.shoplc.com/order-status?utm_source=SFMC&utm_medium=email&utm_campaign=AMS_Order_Received_Staging_with_OrderEmailContent&utm_content=menu"
+                  }
+                  width="360"
+                  height="360"
+                />
+              </div>
+            </div>
+          </div>
+        </TPopUp>
+      )}
+
      {popup.secondaryPopup === Config.ACTIVE_POPUP.cancelConfirmPopup &&
        popup.secondaryPopupVisible && (
          <TPopUp
--- 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
@@ -328,144 +328,39 @@
 }

 .trackPackagePopupContainer {
-  .font(@fontFamily: @baseFont, @fontSize:24px);
+  padding: 30px 60px;

-  .header {
-    background-color: @COLOR_SKYBLUE;
-    padding: 40px 60px;
-    color: @COLOR_GRAY07;
+  .textWrap {
+    .font(@fontFamily: @baseFont, @fontSize:30px);

-    .headerTitle {
-      font-size: 36px;
-      font-weight: bold;
-    }
-  }
+    .textDesc {
+      display: block;
+      margin-bottom: 50px;

-  .contentsBody {
-    padding: 30px 60px;
-
-    .tScroller {
-      > div {
-        max-height: 750px !important;
+      .invTrceId {
+        display: block;
+        margin-top: 30px;
      }

-      .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;
-        }
+      .dlvrMeth {
+        display: block;
+        margin-top: 5px;
      }
    }
  }

-  .buttonWrap {
+  .trackPackageQRCode {
    display: flex;
+    flex-direction: column;
+    align-items: center;
    justify-content: center;
-    margin-bottom: 30px;
+
+    .qrcode {
+      .size(@w: 360px , @h: 360px);
+      background-color: #ffffff;
+      border-radius: 12px;
+      box-shadow: 0 0 0 1px #dadada inset;
+      margin-bottom: 41px;
+    }
  }
 }
--- 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
@@ -64,6 +64,9 @@ export default function OrderListCardStatus({
    prodSno,
    patncPhnNo,
    stkCd,
+    invTrceId,
+    dlvrMeth,
+    deliveryUrl,
  } = orderProductInfo || {};

  const {
@@ -186,8 +189,13 @@ export default function OrderListCardStatus({
  }, [dispatch, doSendLogOrderBtnClick]);

  const onClickTrackPackage = useCallback(() => {
-    console.log("chw");
-  }, []);
+    console.log("chw", orderProductInfo);
+    dispatch(
+      setShowPopup(Config.ACTIVE_POPUP.trackPackagePopup, {
+        data: { invTrceId, dlvrMeth, deliveryUrl },
+      })
+    );
+  }, [dispatch]);

  return (
    <>
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/utils/orderStatus.js
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/utils/orderStatus.js
@@ -72,6 +72,18 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
        </>
      );
    case "ORD00602":
+      return (
+        <>
+          <TButton
+            size="small"
+            className={css.actionButton}
+            onClick={onClickReturnExchange}
+            withMarquee
+          >
+            {$L("RETURN/EXCHANGE")}
+          </TButton>
+        </>
+      );
    case "ORD00603":
    case "ORD00604":
      return (