From 08d5fa869c81c8aee5b79c0992ed734da129f756 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Mon, 15 Apr 2024 20:09:11 +0900 Subject: [PATCH] =?UTF-8?q?DetailPanel=20=EC=BF=A0=ED=8F=B0=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20(=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=20=EB=AF=B8=EC=99=84=EC=84=B1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/actions/couponActions.js | 14 ++- .../src/reducers/couponReducer.js | 2 +- .../src/views/CheckOutPanel/CheckOutPanel.jsx | 6 +- .../src/views/DetailPanel/DetailPanel.jsx | 1 + .../SingleProduct/SingleOption.jsx | 110 +++++++++++++++--- .../SingleProduct/SingleOption.module.less | 6 + .../PlayerOverlayHeader.module.less | 7 +- 7 files changed, 118 insertions(+), 28 deletions(-) diff --git a/com.twin.app.shoptime/src/actions/couponActions.js b/com.twin.app.shoptime/src/actions/couponActions.js index d5a246d3..c7f93213 100644 --- 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 ); diff --git a/com.twin.app.shoptime/src/reducers/couponReducer.js b/com.twin.app.shoptime/src/reducers/couponReducer.js index ddd9ab76..f2b9aeb8 100644 --- 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: {}, diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx index 0e37f1e8..79d70da3 100644 --- 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, }, ], diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index 56dd00ba..e21ce1b7 100644 --- 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(); diff --git a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx index 91c90f84..6db6d66b 100644 --- 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 ( {$L(`${couponAplyStartDate}~${couponAplyEndDate}`)} - {$L("DOWNLOAD")} + 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" + )} + ); }, - [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")} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less index 2c44a18f..6cfa618a 100644 --- 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); + } } } } diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayHeader.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayHeader.module.less index 497eca9c..f9b63a6d 100644 --- 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;