From 02661ed00049d88632de786368ad0507cf5ae924 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Mon, 1 Apr 2024 11:07:54 +0900 Subject: [PATCH] =?UTF-8?q?checkout=20data=20=EB=B3=B4=EB=82=B4=EA=B8=B0?= =?UTF-8?q?=20&&=20=EC=A3=BC=EC=84=9D=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SingleProduct/SingleOption.jsx | 104 +++++++++++++----- .../SingleProduct/SingleProduct.jsx | 14 +-- .../PlayerItemCard/PlayerItemCard.jsx | 19 ++-- .../src/views/PlayerPanel/PlayerPanel.jsx | 63 ++++++----- .../views/PlayerPanel/PlayerPanel.module.less | 2 + 5 files changed, 131 insertions(+), 71 deletions(-) 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 fae433a9..2c0ab18e 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx @@ -1,26 +1,38 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { + useCallback, + useEffect, + useState, +} from 'react'; -import classNames from "classnames"; -import { useDispatch, useSelector } from "react-redux"; +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 Spotlight from '@enact/spotlight'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; -import { setHidePopup, setShowPopup } from "../../../actions/commonActions"; -import { getProductCouponSearch } from "../../../actions/couponActions"; -import { pushPanel } from "../../../actions/panelActions"; -import { getProductOption } from "../../../actions/productActions"; -import TButton from "../../../components/TButton/TButton"; -import TPopUp from "../../../components/TPopUp/TPopUp"; -import TScroller from "../../../components/TScroller/TScroller"; -import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList"; -import usePriceInfo from "../../../hooks/usePriceInfo"; -import * as Config from "../../../utils/Config"; -import { $L } from "../../../utils/helperMethods"; -import { SpotlightIds } from "../../../utils/SpotlightIds"; -import FavoriteBtn from "../components/common/FavoriteBtn"; -import css from "./SingleOption.module.less"; +import { + setHidePopup, + setShowPopup, +} from '../../../actions/commonActions'; +import { getProductCouponSearch } from '../../../actions/couponActions'; +import { pushPanel } from '../../../actions/panelActions'; +import { getProductOption } from '../../../actions/productActions'; +import TButton from '../../../components/TButton/TButton'; +import TPopUp from '../../../components/TPopUp/TPopUp'; +import TScroller from '../../../components/TScroller/TScroller'; +import TVirtualGridList + from '../../../components/TVirtualGridList/TVirtualGridList'; +import usePriceInfo from '../../../hooks/usePriceInfo'; +import * as Config from '../../../utils/Config'; +import { $L } from '../../../utils/helperMethods'; +import { SpotlightIds } from '../../../utils/SpotlightIds'; +import FavoriteBtn from '../components/common/FavoriteBtn'; +import css from './SingleOption.module.less'; const Container = SpotlightContainerDecorator( { enterTo: "default-element", preserveId: true }, @@ -48,7 +60,8 @@ export default function SingleOption({ const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0); const [quantity, setQuantity] = useState(1); - const [selectedOptions, setSelectedOptions] = useState([]); + const [selectedOptionIdx, setSelectedOptionsIdx] = useState([]); + const [selectedOptions, setsSelectedOptions] = useState([]); const [couponTypes, setCouponTypes] = useState(null); const { priceInfo, shippingCharge } = productInfo || productData; @@ -83,21 +96,41 @@ export default function SingleOption({ const handleOptionsClick = useCallback( (e, optionValIdx) => { - console.log( - "#productOptionInfos", - productOptionInfos[selectedBtnOptIdx].prdtOptDtl[optionValIdx] - ); - setSelectedOptions((prevOptions) => { + console.log("#productOptionInfos", productOptionInfos); + + setsSelectedOptions((prevOptions) => { + const updatedOptions = [...prevOptions]; + updatedOptions[selectedBtnOptIdx] = + productOptionInfos[selectedBtnOptIdx].prdtOptDtl[optionValIdx]; + return updatedOptions; + }); + setSelectedOptionsIdx((prevOptions) => { const updatedOptions = [...prevOptions]; updatedOptions[selectedBtnOptIdx] = optionValIdx; return updatedOptions; }); + Spotlight.focus("optionButton"); onClose(); }, [selectedBtnOptIdx, productOptionInfos] ); + useEffect(() => { + if (!selectedOptionIdx || selectedOptionIdx.length < 0) { + setsSelectedOptions((prevOptions) => { + const updatedOptions = [...prevOptions]; + updatedOptions[selectedBtnOptIdx] = + productOptionInfos[selectedBtnOptIdx].prdtOptDtl[0]; + return updatedOptions; + }); + } + + console.log("#selectedoptions", selectedOptions); + console.log("#selectedoptionIdx", selectedOptionIdx); + console.log("#discountedPrice", discountedPrice); + }, [selectedOptions]); + const handleIncrement = useCallback(() => { setQuantity(quantity + 1); }, [quantity]); @@ -119,7 +152,18 @@ export default function SingleOption({ if (!loginUserData.userInfo) { dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); } else { - dispatch(pushPanel({ name: Config.panel_names.CHECKOUT_PANEL })); + dispatch( + pushPanel({ + name: Config.panel_names.CHECKOUT_PANEL, + panelInfo: { + quantity: quantity, + patnrId: selectedPatnrId, + prdtId: selectedPrdtId, + proice: discountedPrice ? discountedPrice : originalPrice, + selectedOption: selectedOptions, + }, + }) + ); } }, [dispatch]); @@ -199,10 +243,10 @@ export default function SingleOption({ { prdtOptDtl[ - selectedOptions[idx] === null || - selectedOptions[idx] === undefined + selectedOptionIdx[idx] === null || + selectedOptionIdx[idx] === undefined ? 0 - : selectedOptions[idx] + : selectedOptionIdx[idx] ].prodOptCval } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx index 87900476..62d7c549 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx @@ -1,15 +1,15 @@ -import React from "react"; +import React from 'react'; -import { useSelector } from "react-redux"; +import { useSelector } from 'react-redux'; -import ProductOption from "../components/ProductOption"; -import ThemeIndicator from "../ThemeProduct/indicator/ThemeIndicator"; -import SingleOption from "./SingleOption"; -import css from "./SingleProduct.module.less"; +import ProductOption from '../components/ProductOption'; +import ThemeIndicator from '../ThemeProduct/indicator/ThemeIndicator'; +import SingleOption from './SingleOption'; +import css from './SingleProduct.module.less'; export default function SingleProduct({ selectedPatnrId, selectedPrdtId }) { const productData = useSelector((state) => state.main.productData); - console.log("#productData", productData); + return (
0) { setGaugeWidth(progressPercentage); } else { diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 16dade62..62df1a71 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -4,37 +4,42 @@ import React, { useMemo, useRef, useState, -} from "react"; +} from 'react'; -import classNames from "classnames"; -import ReactPlayer from "react-player"; -import { useDispatch, useSelector } from "react-redux"; +import classNames from 'classnames'; +import ReactPlayer from 'react-player'; +import { + useDispatch, + useSelector, +} from 'react-redux'; -import { Job } from "@enact/core/util"; -import Spotlight from "@enact/spotlight"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; +import { Job } from '@enact/core/util'; +import Spotlight from '@enact/spotlight'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; -import * as CommonActions from "../../actions/commonActions"; +import * as CommonActions from '../../actions/commonActions'; import { getHomeFullVideoInfo, getMainLiveShowNowProduct, -} from "../../actions/mainActions"; -import * as PanelActions from "../../actions/panelActions"; -import { MediaControls } from "../../components/MediaPlayer"; -import TButton from "../../components/TButton/TButton"; -import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab"; -import TItemCard, { TYPES } from "../../components/TItemCard/TItemCard"; -import TPanel from "../../components/TPanel/TPanel"; -import TVirtualGridList from "../../components/TVirtualGridList/TVirtualGridList"; -import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer"; -import { panel_names } from "../../utils/Config"; -import { $L } from "../../utils/helperMethods"; -import css from "./PlayerPanel.module.less"; -import FeaturedShowContents from "./PlayerTabContents/FeaturedShowContents"; -import LiveChannelContents from "./PlayerTabContents/LiveChannelContents"; -import ShopNowContents from "./PlayerTabContents/ShopNowContents"; -import YouMayLikeContents from "./PlayerTabContents/YouMayLikeContents"; +} from '../../actions/mainActions'; +import * as PanelActions from '../../actions/panelActions'; +import { MediaControls } from '../../components/MediaPlayer'; +import TButton from '../../components/TButton/TButton'; +import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab'; +import TItemCard, { TYPES } from '../../components/TItemCard/TItemCard'; +import TPanel from '../../components/TPanel/TPanel'; +import TVirtualGridList + from '../../components/TVirtualGridList/TVirtualGridList'; +import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer'; +import { panel_names } from '../../utils/Config'; +import { $L } from '../../utils/helperMethods'; +import css from './PlayerPanel.module.less'; +import FeaturedShowContents from './PlayerTabContents/FeaturedShowContents'; +import LiveChannelContents from './PlayerTabContents/LiveChannelContents'; +import ShopNowContents from './PlayerTabContents/ShopNowContents'; +import YouMayLikeContents from './PlayerTabContents/YouMayLikeContents'; const SpottableBtn = Spottable("button"); const SpottableComponent = Spottable("div"); @@ -217,8 +222,12 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
{"123"}
-
-
+
+ +
+
+ +
button { .size(@w: 48px, @h: 48px); background-size: contain; @@ -109,6 +110,7 @@ &.downIcon { bottom: 12px; left: 936px; + > button { .size(@w: 48px, @h: 48px); background-size: contain;