[OptioCommon,Config] loginPopup/favoritePopup/optionPopup 추가

2024-02-28 18:20:37 +09:00
parent 577378551f
commit 424c9cea39
3 changed files with 159 additions and 64 deletions
--- a/com.twin.app.shoptime/src/utils/Config.js
+++ b/com.twin.app.shoptime/src/utils/Config.js
@@ -41,6 +41,10 @@ export const CATEGORY_DATA_MAX_RESULTS_LIMIT = 20;
 export const ACTIVE_POPUP = {
  termsPopup: "termsPopup",
  exitPopup: "exitPopup",
+  optionPopup: "optionPopup",
+  couponPopup: "couponPopup",
+  favoritePopup: "favoritePopup",
+  loginPopup: "loginPopup",
 };

 export const AUTO_SCROLL_DELAY = 600;
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx
@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";

+import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";

 import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
 import {
@@ -16,6 +16,7 @@ import TButton from "../../../../components/TButton/TButton";
 import TPopUp from "../../../../components/TPopUp/TPopUp";
 import TScroller from "../../../../components/TScroller/TScroller";
 import usePriceInfo from "../../../../hooks/usePriceInfo";
+import * as Config from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
 import css from "./OptionCommon.module.less";

@@ -24,24 +25,44 @@ const Container = SpotlightContainerDecorator(
  "div"
 );

-const ACTIVE_POPUP = {
-  options: "options",
-  favorite: "favorite",
-  coupon: "coupon",
-};
-
 export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
  const dispatch = useDispatch();
  const productOptionInfos = useSelector((state) => state.product.prdtOptInfo);
  const productInfos = useSelector((state) => state.main.productData);
-  const popupVisible = useSelector((state) => state.common.popupVisible);
+
  const couponInfos = useSelector(
    (state) => state.coupon.productCouponSearchData
  );

+  const { popupVisible, activePopup } = useSelector(
+    (state) => state.common.popup
+  );
+
+  const dummy = [
+    {
+      cpnTpNm: "Partner",
+      cpnAplyStrtDtt: "2023-07-01 00:00:00",
+      cpnTtl: "[Partner]ShopLC-Product",
+      shptmDcTpCd: "CPN00402",
+      cpnDctrt: 23,
+      dcAmt: 0,
+      cpnAplyEndDtt: "2023-12-31 23:00:00",
+      cpnUseDt: "",
+      cpnAplyMinPurcAmt: 33,
+      patnrId: 11,
+      cpnAplyMaxDcAmt: 57,
+      shptmCpnTpCd: "CPN00102",
+      cpnAplyMinProdAmt: 16,
+      cpnUseYn: "N",
+      cpnSno: 49,
+      cpnCdCval: "blqm9955",
+    },
+  ];
+
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [quantity, setQuantity] = useState(1);
-  const [activePopup, setActivePopup] = useState(null);
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
+
  const [couponTypes, setCouponTypes] = useState(null);

  const { priceInfo, shippingCharge, favorYn } = productInfos;
@@ -61,10 +82,8 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
      );
      dispatch(
        getProductCouponSearch({
-          // patnrId: selectedPatnrId,
-          // prdtId: selectedPardtId,
-          patnrId: 11,
-          prdtId: 7280567,
+          patnrId: selectedPatnrId,
+          prdtId: selectedPardtId,
        })
      );
      dispatch(
@@ -74,9 +93,7 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
        })
      );
    }
-  }, [dispatch, selectedPardtId, selectedPatnrId]);
-
-  const handleOptionClick = useCallback(() => {}, []);
+  }, [dispatch, selectedPardtId, selectedPatnrId, selectedIndex]);

  const handleIncrement = useCallback(() => {
    setQuantity(quantity + 1);
@@ -87,74 +104,67 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
    else setQuantity(quantity - 1);
  }, [quantity]);

+  const optionClick = useCallback(
+    (e, idx) => {
+      setSelectedOptionIndex(idx);
+      Spotlight.focus("optionButton");
+      onClose();
+    },
+    [selectedOptionIndex]
+  );
+
+  const handleOptionClick = useCallback(
+    (idx) => {
+      dispatch(setShowPopup(Config.ACTIVE_POPUP.optionPopup));
+      setSelectedIndex(idx);
+    },
+    [dispatch]
+  );
+
+  const handleLoginPopup = useCallback(() => {
+    dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
+  }, [dispatch]);
+
  const handleFavoriteClick = useCallback(() => {
    // TODO : 찜 로직
-    setActivePopup(ACTIVE_POPUP.favorite);
-    dispatch(setShowPopup());
+
+    dispatch(setShowPopup(Config.ACTIVE_POPUP.favoritePopup));
  }, [dispatch]);

  const handleCouponClick = useCallback(
    (idx) => {
-      setActivePopup(ACTIVE_POPUP.coupon);
      setCouponTypes(idx);
-      dispatch(setShowPopup());
+      dispatch(setShowPopup(Config.ACTIVE_POPUP.couponPopup));
    },
    [dispatch]
  );

  const onClose = useCallback(() => {
    dispatch(setHidePopup());
-    setActivePopup(null);
  }, [dispatch]);

-  // console.log("#couponInfos", couponInfos);
  return (
    <div className={css.detailContainer}>
      <Container>
        <TScroller verticalScrollbar="auto" className={css.detailScroll}>
          {productOptionInfos &&
            productOptionInfos.length > 0 &&
-            productOptionInfos.map((option, idx) => {
-              const {
-                cntryCd,
-                concProdOptSno,
-                optNm,
-                patnrId,
-                prdtId,
-                prodOptSno,
-                prodOptTpCdCval,
-                prdtOptDtl,
-              } = option;
+            productOptionInfos.map(({ optNm, prdtOptDtl }, idx) => {
              return (
                <div key={`option: ${idx}`} className={css.optionLayer}>
+                  {/* OPTION */}
                  <span>{$L(optNm.toUpperCase())}</span>
                  <TButton
                    className={css.optionBtn}
                    onClick={() => {
                      handleOptionClick(idx);
                    }}
+                    spotlightId={"optionButton"}
                  >
                    <span className={css.optionValue}>
-                      {prdtOptDtl[0].prodOptCval}
+                      {prdtOptDtl[selectedOptionIndex].prodOptCval}
                    </span>
                  </TButton>
-                  {/* <TPopUp
-                  kind={"optionPopup"}
-                  options={
-                    productOptionInfos && productOptionInfos[idx].prdtOptDtl
-                  }
-                  onClose={() => {
-                    setOptionPopupOpen(false);
-                    setSecondOptionOpen(false);
-                  }}
-                  open={idx === 0 ? optionPopupOpen : secondOptionOpen}
-                  hasButton
-                  hasText
-                  title={$L(optNm.toUpperCase())}
-                  button1Text={$L("CLOSE")}
-                  selectedOptionIdx={selectedIndex}
-                  setSelectedOptionIdx={setSelectedIndex}
-                /> */}
                </div>
              );
            })}
@@ -169,6 +179,7 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
                  quantity === 1 && css.decreaseDimBtn
                )}
                onClick={handlDecrement}
+                spotlightDisabled={quantity === 1}
              />
              <span>{quantity}</span>
              <TButton
@@ -228,37 +239,92 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
      )}
      {/* BYU NOW & FAVORITE */}
      <Container className={css.bottomBtnLayer}>
-        <TButton className={css.buyNowBtn}>{$L("BUY NOW")}</TButton>
+        <TButton className={css.buyNowBtn} onClick={handleLoginPopup}>
+          {$L("BUY NOW")}
+        </TButton>
        <TButton className={css.favoriteBtn} onClick={handleFavoriteClick} />
      </Container>
+      {/* LOGIN POPUP */}
+      {activePopup === Config.ACTIVE_POPUP.loginPopup && (
+        <TPopUp
+          kind="textPopup"
+          hasText
+          open={popupVisible}
+          text={$L("Would you like to go to the login screen?")}
+          hasButton
+          button1Text={$L("OK")}
+          button2Text={$L("CANCLE")}
+          onClick={() => {
+            console.log("#onClick");
+          }}
+          onClose={onClose}
+        ></TPopUp>
+      )}
+
+      {/* OPTION POPUP */}
+      {activePopup === Config.ACTIVE_POPUP.optionPopup && (
+        <TPopUp
+          kind="optionPopup"
+          options={
+            productOptionInfos && productOptionInfos[selectedIndex].prdtOptDtl
+          }
+          onClose={onClose}
+          open={popupVisible}
+          optionClick={optionClick}
+          hasButton
+          hasText
+          title={$L(productOptionInfos[selectedIndex].optNm.toUpperCase())}
+          button1Text={$L("CLOSE")}
+          selectedOptionIdx={selectedOptionIndex}
+          className={css.productOptionPopup}
+          setSelectedOptionIdx={setSelectedOptionIndex}
+        />
+      )}
      {/* COUPON POPUP */}
-      {activePopup && activePopup === "coupon" && (
+      {activePopup === Config.ACTIVE_POPUP.couponPopup && (
        <TPopUp
          kind="couponPopup"
          className={css.couponContainer}
          hasText
-          title={
-            couponTypes === 0
-              ? $L("SHOPTIME PROMOTION")
-              : $L("SPECIAL PROMOTION")
-          }
-          text={couponTypes === 0 ? promotions[0] : promotions[1]}
-          open={ACTIVE_POPUP.coupon && popupVisible}
+          title={couponTypes === 0 ? promotions[0] : promotions[1]}
+          open={popupVisible}
          onClose={onClose}
          hasButton
          button1Text={$L("CLOSE")}
          button2Text={$L("DOWNLOAD ALL")}
        >
          <div className={css.itemContainer}>
-            <div className={css.couponItem}></div>
+            {dummy.map((coupon) => {
+              const {
+                cpnDctrt,
+                cpnTtl,
+                cpnAplyMinPurcAmt,
+                cpnAplyMaxDcAmt,
+                cpnUseDt,
+              } = coupon;
+              return (
+                <div className={css.couponItem}>
+                  <span>{cpnDctrt}</span>
+                  <span>{cpnTtl}</span>
+                  <span>
+                    {$L(
+                      `Puschase over #${cpnAplyMinPurcAmt} (up to $${cpnAplyMaxDcAmt} off)`
+                    )}
+                  </span>
+                  <span>{cpnUseDt}</span>
+                  <TButton>{$L("DOWNLOAD")}</TButton>
+                </div>
+              );
+            })}
+            <div>{`1/${dummy.length}`}</div>
          </div>
        </TPopUp>
      )}
      {/* FAVORITE POPUP */}
-      {activePopup && activePopup === "favorite" && (
+      {activePopup === Config.ACTIVE_POPUP.favoritePopup && (
        <TPopUp
          kind="textPopup"
-          open={ACTIVE_POPUP.favorite && popupVisible}
+          open={popupVisible}
          onClose={onClose}
          hasButton
          button1Text={$L("OK")}
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.module.less
@@ -100,7 +100,6 @@
        &.decreaseDimBtn {
          background-image: url(../../../../../assets/images/btn/btn-quantity-decrease-dim@3x.png);
          .imgElement(90px, 90px, center, center);
-          opacity: 0.3;
        }
      }
    }
@@ -226,4 +225,30 @@
      background: yellow;
    }
  }
+
+  .loginPopup {
+    .btnContainer {
+      margin: 0 0 30px 0;
+      display: flex;
+      justify-content: center;
+      .btn {
+        min-width: 300px;
+        height: 20px;
+        margin: 0 6px;
+      }
+    }
+  }
+
+  .couponContainer {
+    .couponItem {
+      width: 440px;
+      height: 320px;
+      &:focus {
+        color: @PRIMARY_COLOR_RED;
+        &::after {
+          .focused(@boxShadow: 22px, @borderRadius: 12px);
+        }
+      }
+    }
+  }
 }