myOrders fix - return/exchange popup

2024-06-27 18:13:57 +09:00
parent e3825267b5
commit b1c06c17b3
7 changed files with 201 additions and 25 deletions
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
@@ -51,6 +51,7 @@ const KINDS = [
  "descriptionPopup",
  "errorPopup",
  "orderDetailPopup",
+  "returnExchangePopup",
  "orderCancelPopup",
 ];

--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
@@ -578,3 +578,26 @@
    }
  }
 }
+
+.returnExchangePopup {
+  .default-style();
+
+  .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;
+      }
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/utils/Config.js
+++ b/com.twin.app.shoptime/src/utils/Config.js
@@ -72,6 +72,7 @@ export const ACTIVE_POPUP = {
  orderDetailPopup: "orderDetailPopup",
  orderDetailCancel: "orderDetailCancel",
  errorPopup: "errorPopup",
+  returnExchangePopup: "returnExchangePopup",
  unSupportedCountryPopup: "unSupportedCountryPopup",
  changeCountyPopup: "changeCounty",
 };
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
@@ -592,6 +592,34 @@ export default function MyOrders({ title, panelInfo, isOnTop }) {
          </div>
        </TPopUp>
      )}
+
+      {activePopup === Config.ACTIVE_POPUP.returnExchangePopup && (
+        <TPopUp
+          kind="returnExchangePopup"
+          open={popupVisible}
+          onClose={handleClosePopupBtn}
+          hasButton
+          button1Text={$L("OK")}
+          onClick={handleClosePopupBtn}
+        >
+          <div className={css.returnExchangePopup}>
+            <p className={css.textWrap}>
+              <span className={css.textTitle}>
+                {$L("The return/exchange period ended.")}
+              </span>
+              <span className={css.textDesc}>
+                {$L(
+                  "Please contact the respective vendor dirctly at the address below."
+                )}
+              </span>
+              <span className={css.textInfo}>
+                - {$L("Contact Information")}
+                <br />- QVC : 888-345-5788 (Customers Service)
+              </span>
+            </p>
+          </div>
+        </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
@@ -253,3 +253,27 @@
    text-align: center;
  }
 }
+
+.returnExchangePopup {
+  padding: 30px 60px;
+
+  .textWrap {
+    .font(@fontFamily: @baseFont, @fontSize:30px);
+
+    .textTitle {
+      display: block;
+      margin-bottom: 30px;
+      font-weight: bold;
+    }
+
+    .textDesc {
+      display: block;
+      margin-bottom: 30px;
+    }
+
+    .textInfo {
+      display: block;
+      line-height: 1.6;
+    }
+  }
+}
--- 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
@@ -93,6 +93,10 @@ export default function OrderListCardStatus({
    }
  }, [auctProdYn, dispatch, orderProductInfo, showDetailPopup]);

+  const onClickReturnExchange = useCallback(() => {
+    dispatch(setShowPopup(Config.ACTIVE_POPUP.returnExchangePopup));
+  }, [dispatch]);
+
  return (
    <>
      <div className={css.itemListStatusContainer}>
@@ -159,6 +163,7 @@ export default function OrderListCardStatus({
              renderButtonsByStatus(shptmOrdStCd, ordNo, {
                _onClickBuyAgain,
                onClickCancelItem,
+                onClickReturnExchange,
              })
            )}
          </div>
--- 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
@@ -7,36 +7,53 @@ import css from "../components/OrderListCardStatus.module.less";
 export const getStatusMessageAndClass = (shptmOrdStCd, shptmOrdStNm) => {
  switch (shptmOrdStCd) {
    case "ORD00601":
-      return { message: shptmOrdStNm, className: css.orderGreen };
    case "ORD00602":
-      return {
-        message: shptmOrdStNm,
-        className: css.orderGreen,
-      };
    case "ORD00603":
      return { message: shptmOrdStNm, className: css.orderGreen };
+
    case "ORD00604":
      return { message: shptmOrdStNm, className: css.orderBlue };
+
    case "ORD00605":
-      return { message: shptmOrdStNm, className: css.orderRed };
    case "ORD00606":
-      return {
-        message: shptmOrdStNm,
-        className: css.orderRed,
-      };
    case "ORD00607":
+    case "ORD00608":
+    case "ORD00609":
+    case "ORD00610":
      return { message: shptmOrdStNm, className: css.orderRed };
+
+    case "ORD00611":
+    case "ORD00612":
+    case "ORD00613":
+      return { message: shptmOrdStNm, className: css.orderGreen };
+
+    case "ORD00614":
+    case "ORD00615":
+    case "ORD00616":
+      return { message: shptmOrdStNm, className: css.orderRed };
+
+    case "ORD00620":
+      return { message: shptmOrdStNm, className: css.orderGreen };
+
+    case "ORD00630":
+    case "ORD00621":
+    case "ORD00622":
+    case "ORD00623":
+      return { message: shptmOrdStNm, className: css.orderRed };
+
    default:
      return { message: "TODO: 케이스 추가", className: css.orderBlue };
  }
 };

 export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
-  const { _onClickBuyAgain, onClickCancelItem } = onClickHandlers;
+  const { _onClickBuyAgain, onClickCancelItem, onClickReturnExchange } =
+    onClickHandlers;

  switch (shptmOrdStCd) {
    case "ORD00601":
    case "ORD00602":
+    case "ORD00620":
      return (
        <>
          <TButton
@@ -47,15 +64,13 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
          >
            {$L("BUY IT AGAIN")}
          </TButton>
-          {shptmOrdStCd === "ORD00601" || shptmOrdStCd === "ORD00602" ? (
-            <TButton
-              size="small"
-              className={css.actionButton}
-              onClick={onClickCancelItem}
-            >
-              {$L("CANCEL ITEM")}
-            </TButton>
-          ) : null}
+          <TButton
+            size="small"
+            className={css.actionButton}
+            onClick={onClickCancelItem}
+          >
+            {$L("CANCEL ITEM")}
+          </TButton>
        </>
      );
    case "ORD00603":
@@ -70,11 +85,13 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
          >
            {$L("BUY IT AGAIN")}
          </TButton>
-          <TButton size="small" className={css.actionButton}>
-            {$L("RETURN ITEM")}
-          </TButton>
-          <TButton size="small" className={css.actionButton}>
-            {$L("EXCHANGE ITEM")}
+          <TButton
+            size="small"
+            className={css.actionButton}
+            onClick={onClickReturnExchange}
+            withMarquee
+          >
+            {$L("RETURN/EXCHANGE ITEM")}
          </TButton>
          <TButton size="small" className={css.actionButton}>
            {$L("TRACK PACKAGE")}
@@ -96,6 +113,83 @@ export const renderButtonsByStatus = (shptmOrdStCd, ordNo, onClickHandlers) => {
          </TButton>
        </>
      );
+    case "ORD00608":
+    case "ORD00609":
+    case "ORD00610":
+      return (
+        <>
+          <TButton
+            size="small"
+            className={css.actionButton}
+            spotlightId={`button-spotId-${ordNo}`}
+            onClick={_onClickBuyAgain}
+          >
+            {$L("BUY IT AGAIN")}
+          </TButton>
+          <TButton size="small" className={css.actionButton}>
+            {$L("TRACK PACKAGE")}
+          </TButton>
+        </>
+      );
+    case "ORD00611":
+    case "ORD00612":
+      return (
+        <>
+          <TButton
+            size="small"
+            className={css.actionButton}
+            spotlightId={`button-spotId-${ordNo}`}
+            onClick={_onClickBuyAgain}
+          >
+            {$L("BUY IT AGAIN")}
+          </TButton>
+          <TButton size="small" className={css.actionButton}>
+            {$L("TRACK PACKAGE")}
+          </TButton>
+        </>
+      );
+    case "ORD00613":
+      return (
+        <>
+          <TButton
+            size="small"
+            className={css.actionButton}
+            onClick={_onClickBuyAgain}
+            spotlightId={`button-spotId-${ordNo}`}
+          >
+            {$L("BUY IT AGAIN")}
+          </TButton>
+          <TButton
+            size="small"
+            className={css.actionButton}
+            onClick={onClickReturnExchange}
+            withMarquee
+          >
+            {$L("RETURN/EXCHANGE ITEM")}
+          </TButton>
+          <TButton size="small" className={css.actionButton}>
+            {$L("TRACK PACKAGE")}
+          </TButton>
+        </>
+      );
+    case "ORD00614":
+    case "ORD00615":
+    case "ORD00616":
+    case "ORD00630":
+    case "ORD00621":
+    case "ORD00622":
+    case "ORD00623":
+      return (
+        <TButton
+          size="small"
+          className={css.actionButton}
+          onClick={_onClickBuyAgain}
+          spotlightId={`button-spotId-${ordNo}`}
+        >
+          {$L("BUY IT AGAIN")}
+        </TButton>
+      );
+
    default:
      return "TODO: 케이스 추가";
  }