DetailPanel 쿠폰 기능 구현 (스타일 미완성)

2024-04-15 20:09:11 +09:00
parent 13ac88ef29
commit 08d5fa869c
7 changed files with 118 additions and 28 deletions
--- a/com.twin.app.shoptime/src/actions/couponActions.js
+++ b/com.twin.app.shoptime/src/actions/couponActions.js
@@ -1,6 +1,6 @@
-import { URLS } from '../api/apiConfig';
-import { TAxios } from '../api/TAxios';
-import { types } from './actionTypes';
+import { URLS } from "../api/apiConfig";
+import { TAxios } from "../api/TAxios";
+import { types } from "./actionTypes";

 // IF-LGSP-339 : 회원 다운로드 쿠폰 정보 조회
 export const getProductCouponInfo = (props) => (dispatch, getState) => {
@@ -35,6 +35,7 @@ export const getProductCouponTotDownload = (props) => (dispatch, getState) => {
  // 쿠폰 아이디 여러개 일 경우 쉼표로 구분  ex)80,81,82
  const { mbrNo, cpnSnoAll } = props;

+  console.log("#cpnSnoAll", cpnSnoAll);
  const onSuccess = (response) => {
    console.log("getProductCouponTotDownload onSuccess ", response.data);

@@ -53,8 +54,8 @@ export const getProductCouponTotDownload = (props) => (dispatch, getState) => {
    getState,
    "post",
    URLS.GET_PRODUCT_COUPON_TOTDOWNLOAD,
-    { mbrNo, cpnSnoAll },
    {},
+    { mbrNo, cpnSnoAll },
    onSuccess,
    onFail
  );
@@ -63,11 +64,12 @@ export const getProductCouponTotDownload = (props) => (dispatch, getState) => {
 export const getProductCouponDownload = (props) => (dispatch, getState) => {
  const { mbrNo, cpnSno } = props;

+  console.log("#mbrNo , cpnSno", mbrNo, cpnSno);
  const onSuccess = (response) => {
    console.log("getProductCouponDownload onSuccess ", response.data);

    dispatch({
-      type: types.GET_PRODUCT_COUPON_DONWLOAD,
+      type: types.GET_PRODUCT_COUPON_DOWNLOAD,
      payload: response.data.data,
    });
  };
@@ -81,8 +83,8 @@ export const getProductCouponDownload = (props) => (dispatch, getState) => {
    getState,
    "post",
    URLS.GET_PRODUCT_COUPON_DOWNLOAD,
-    { mbrNo, cpnSno },
    {},
+    { mbrNo, cpnSno },
    onSuccess,
    onFail
  );
--- a/com.twin.app.shoptime/src/reducers/couponReducer.js
+++ b/com.twin.app.shoptime/src/reducers/couponReducer.js
@@ -1,4 +1,4 @@
-import { types } from '../actions/actionTypes';
+import { types } from "../actions/actionTypes";

 const initialState = {
  productCouponInfoData: {},
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
@@ -20,8 +20,12 @@ export default function CheckOutPanel() {
  const { userInfo } = useSelector(
    (state) => state.common.appStatus.loginUserData
  );
+  const panels = useSelector((state) => state.panels.panels);
  const checkoutData = useSelector((state) => state.checkout?.checkoutData);
  const testData = useSelector((state) => state);
+
+  console.log("#panels", panels);
+
  useEffect(() => {
    dispatch(
      getMyInfoCheckoutInfo({
@@ -31,7 +35,7 @@ export default function CheckOutPanel() {
          {
            patnrId: "11",
            prdtId: "7280567",
-            prodOptCdCval: "7326492",
+            prodOptCdCval: "7326490",
            prodQty: 1,
          },
        ],
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -55,6 +55,7 @@ export default function ItemDetail() {
    }
  };

+  console.log("#panels", panels);
  useEffect(() => {
    getPanelInfo();

--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
@@ -8,7 +8,11 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import Spottable from "@enact/spotlight/Spottable";

 import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
-import { getProductCouponSearch } from "../../../actions/couponActions";
+import {
+  getProductCouponDownload,
+  getProductCouponSearch,
+  getProductCouponTotDownload,
+} from "../../../actions/couponActions";
 import { pushPanel } from "../../../actions/panelActions";
 import { getProductOption } from "../../../actions/productActions";
 import TButton from "../../../components/TButton/TButton";
@@ -45,6 +49,9 @@ export default function SingleOption({
  const { popupVisible, activePopup } = useSelector(
    (state) => state.common.popup
  );
+  const { userInfo } = useSelector(
+    (state) => state.common.appStatus.loginUserData
+  );
  const { loginUserData } = useSelector((state) => state.common.appStatus);
  const [promotions, setPromotions] = useState([]);
  const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
@@ -53,11 +60,13 @@ export default function SingleOption({
  const [selectedOptionIdx, setSelectedOptionsIdx] = useState([]);
  const [selectedOptions, setsSelectedOptions] = useState([]);
  const [couponTypes, setCouponTypes] = useState(null);
-
+  const [couponCodes, setCouponCodes] = useState("");
+  const [downloadCoupon, setDownloadCoupon] = useState();
+  const [downloadCouponArr, setDownloadCouponArr] = useState([]);
  const { priceInfo, shippingCharge } = productInfo || productData;
  const { originalPrice, discountedPrice, discountRate } =
    usePriceInfo(priceInfo) || {};
-
+  // let downloadCouponArr = [];
  useEffect(() => {
    const newPromotions = [];
    if (partnerCoupon && partnerCoupon.length > 0) {
@@ -70,9 +79,6 @@ export default function SingleOption({
    setPromotions(newPromotions);
  }, [partnerCoupon, shoptiemCoupon]);

-  // console.log("#coupon ", partnerCoupon, shoptiemCoupon);
-  // console.log("#selectedCoupon", selectedCoupon);
-
  useEffect(() => {
    dispatch(
      getProductOption({
@@ -84,6 +90,7 @@ export default function SingleOption({
      getProductCouponSearch({
        patnrId: 11,
        prdtId: 1089323,
+        mbrNo: userInfo,
      })
    );
  }, [dispatch, selectedPatnrId]);
@@ -102,7 +109,6 @@ export default function SingleOption({
        return updatedOptions;
      });

-      console.log("#optionValidx", selectedBtnOptIdx);
      Spotlight.focus(`optionBtn-${selectedBtnOptIdx}`);
      onClose();
    },
@@ -145,16 +151,24 @@ export default function SingleOption({
        pushPanel({
          name: Config.panel_names.CHECKOUT_PANEL,
          panelInfo: {
-            quantity: quantity,
-            patnrId: selectedPatnrId,
-            prdtId: selectedPrdtId,
-            price: discountedPrice ? discountedPrice : originalPrice,
-            selectedOption: selectedOptions,
+            cartList: [
+              {
+                patnrId: selectedPatnrId,
+                prdtId: selectedPrdtId,
+                prodOptCdCval: selectedOptions[selectedBtnOptIdx].prodOptCdCval,
+                prodQty: quantity,
+              },
+            ],
+            // quantity: quantity,
+            // patnrId: selectedPatnrId,
+            // prdtId: selectedPrdtId,
+            // price: discountedPrice ? discountedPrice : originalPrice,
+            // selectedOption: selectedOptions,
          },
        })
      );
    }
-  }, [dispatch, quantity, discountedPrice, originalPrice, selectedOptions]);
+  }, [dispatch, quantity, discountedPrice, selectedBtnOptIdx, selectedOptions]);

  const handleCouponClick = useCallback(
    (idx) => {
@@ -169,10 +183,24 @@ export default function SingleOption({
    [dispatch, popupVisible, promotions]
  );

+  const handleCouponTotDownload = useCallback(() => {
+    if (selectedCoupon && userInfo) {
+      setDownloadCouponArr((prevArr) => [...prevArr, parseInt(couponCodes)]);
+      dispatch(
+        getProductCouponTotDownload({ mbrNo: userInfo, cpnSnoAll: couponCodes })
+      );
+    }
+  }, [selectedCoupon, userInfo, couponCodes]);
+
  const onClose = useCallback(() => {
    dispatch(setHidePopup());
  }, [dispatch]);

+  useEffect(() => {
+    if (selectedCoupon) {
+      getCouponCode();
+    }
+  }, [selectedCoupon]);
  useEffect(() => {
    if (!isSpotlight) {
      return;
@@ -184,6 +212,16 @@ export default function SingleOption({
    }
  }, [productOptionInfos, productData]);

+  const getCouponCode = () => {
+    const snoArray = [];
+
+    for (let i = 0; i < selectedCoupon.length; i++) {
+      snoArray.push(selectedCoupon[i].cpnSno);
+    }
+
+    setCouponCodes(snoArray.join(", "));
+  };
+
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const {
@@ -193,12 +231,28 @@ export default function SingleOption({
        cpnAplyMaxDcAmt,
        cpnAplyStrtDtt,
        cpnAplyEndDtt,
+        duplDwldYn,
+        downloadYn,
+        cpnSno,
      } = selectedCoupon[index];

      const couponAplyStartDate = cpnAplyStrtDtt.split(" ")[0];
      const couponAplyEndDate = cpnAplyEndDtt.split(" ")[0];

-      const handleItemClick = () => {};
+      const handleItemClick = () => {
+        if (
+          (downloadCouponArr.length > 0 &&
+            downloadCouponArr.includes(cpnSno)) ||
+          downloadYn === "N"
+        ) {
+          return;
+        }
+        setDownloadCouponArr((prevArr) => [...prevArr, cpnSno]);
+        dispatch(getProductCouponDownload({ mbrNo: userInfo, cpnSno: cpnSno }));
+      };
+
+      console.log("#downloadcoupon", downloadCouponArr);
+
      return (
        <SpottableComponent
          className={css.couponContainer}
@@ -216,12 +270,33 @@ export default function SingleOption({
            <span className={classNames(css.content, css.date)}>
              {$L(`${couponAplyStartDate}~${couponAplyEndDate}`)}
            </span>
-            <TButton className={css.couponBtn}>{$L("DOWNLOAD")}</TButton>
+            <TButton
+              className={classNames(
+                css.couponBtn,
+                downloadCouponArr.length > 0 &&
+                  downloadCouponArr.includes(cpnSno) &&
+                  css.disable,
+                downloadYn === "N" && css.disable
+              )}
+              onClick={handleItemClick}
+              spotlightDisabled={
+                (downloadCouponArr.length > 0 &&
+                  downloadCouponArr.includes(cpnSno)) ||
+                downloadYn === "N"
+              }
+            >
+              {$L(
+                downloadCouponArr.length > 0 &&
+                  downloadCouponArr.includes(cpnSno)
+                  ? "DOWNLOAD COMPLETED"
+                  : "DOWNLOAD"
+              )}
+            </TButton>
          </div>
        </SpottableComponent>
      );
    },
-    [selectedCoupon]
+    [selectedCoupon, couponCodes, downloadCouponArr, dispatch]
  );

  return (
@@ -395,7 +470,8 @@ export default function SingleOption({
          hasText
          title={couponTypes === 0 ? promotions[0] : promotions[1]}
          open={popupVisible}
-          onClose={onClose}
+          onClick={onClose}
+          onClose={handleCouponTotDownload}
          hasButton
          button1Text={$L("CLOSE")}
          button2Text={$L("DOWNLOAD ALL")}
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less
@@ -324,10 +324,16 @@
      height: 60px;
      border-radius: 6px;
      margin-top: 18px;
+      z-index: 1;
      > div {
        font-weight: bold;
        font-size: 24px;
      }
+
+      &.disable {
+        background-color: #808080;
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
+      }
    }
  }
 }
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayHeader.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayHeader.module.less
@@ -12,7 +12,8 @@

    .backIcon {
      .size(@w: 60px, @h: 60px);
-      background-size: contain;
+      background-size: 60px 60px;
+      background-repeat: no-repeat;
      background-image: url("../../../../assets/images/btn/btn-60-wh-back-nor@3x.png");

      &:focus {
@@ -22,7 +23,8 @@
    .liveIcon {
      margin: 6px 0 6px 30px;
      .size(@w: 108px, @h: 48px);
-      background-size: contain;
+      background-size: 108px 48px;
+      background-repeat: no-repeat;
      background-image: url("../../../../assets/images/tag-liveshow.png");
      vertical-align: top;
    }
@@ -42,7 +44,6 @@
    margin-left: 14px;
  }
  .title {
-    .elip(1);
    display: flex;
    align-items: center;
    font-size: 44px;