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

com.twin.app.shoptime/src/actions/couponActions.js

@@ -1,6 +1,6 @@
-import { URLS } from '../api/apiConfig';
+import { URLS } from "../api/apiConfig";
-import { TAxios } from '../api/TAxios';
+import { TAxios } from "../api/TAxios";
-import { types } from './actionTypes';
+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
   );

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: {},

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,
           },
         ],

com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx

@@ -55,6 +55,7 @@ export default function ItemDetail() {
     }
   };
 
+  console.log("#panels", panels);
   useEffect(() => {
     getPanelInfo();
 

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,
+            cartList: [
-            patnrId: selectedPatnrId,
+              {
-            prdtId: selectedPrdtId,
+                patnrId: selectedPatnrId,
-            price: discountedPrice ? discountedPrice : originalPrice,
+                prdtId: selectedPrdtId,
-            selectedOption: selectedOptions,
+                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")}

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);
+      }
     }
   }
 }

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;