diff --git a/com.twin.app.shoptime/shopByShow.response.json b/com.twin.app.shoptime/shopByShow.response.json new file mode 100644 index 00000000..097cfdc9 --- /dev/null +++ b/com.twin.app.shoptime/shopByShow.response.json @@ -0,0 +1,150 @@ +{ + "retCode": 0, + "retMsg": "Success", + "data": { + "brandShopByShowContsList": [ + { + "patncNm": "Peacock | Shop The Moment", + "patnrId": 21, + "contsNm": "Below Deck Med", + "contsId": "SHBD12345", + "contsExpsOrd": 1 + }, + { + "patncNm": "Peacock | Shop The Moment", + "patnrId": 21, + "contsNm": "Top Chef", + "contsId": "SHTC12345", + "contsExpsOrd": 2 + } + ], + "brandShopByShowContsInfo": { + "contsId": "SHBD12345", + "contsNm": "Below Deck Med", + "patnrId": "21", + "patncNm": "Peacock | Shop The Moment", + "brandShopByShowClctInfos": [ + { + "clctId": "mercury-below_deck_merch", + "clctNm": "Below Deck Merch", + "clctImgUrl": "https://nonprod-commerce.nbcuni.com/uat/content-manager-assets/nbcu-comcast/GdLF-BeUT1-Below Deck CollectionAsset 1.png", + "clctExpsOrd": "1", + "brandProductInfos": [ + { + "prdtId": "8ad864e8-dc12-4f01-9f68-717ad115fd06", + "prdtNm": "Alarm clock", + "revwGrd": null, + "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/d2e3f3703a9c4e94b653-dcEJtWjC.jpeg", + "priceInfo": "$ 70.00|$ 70.00|N||||", + "freeShippingFlag": "N", + "soldoutFlag": "Y", + "offerInfo": null, + "lgCatCd": null, + "lgCatNm": null, + "brndNm": "Cup-a-Bug" + }, + { + "prdtId": "02b81061-e59c-47fd-b3ff-e3c743d17148", + "prdtNm": "Single Delay", + "revwGrd": null, + "prdtImgUrl": "https://8bf2164a2f18e0674bc4-c19fb008b43eea897ccae6fb0e59b195.ssl.cf1.rackcdn.com/022511005a3946a2b8e1-MKskNz4E.jpeg", + "priceInfo": "$ 123.00|$ 123.00|N||||", + "freeShippingFlag": "N", + "soldoutFlag": "N", + "offerInfo": null, + "lgCatCd": null, + "lgCatNm": null, + "brndNm": "Required for sponsored collection" + }, + { + "prdtId": "3058cdf6-e1b7-4bc9-912f-1ef29e70b7c6", + "prdtNm": "Women’s Casual Long Sleeve Half Zip Pullover", + "revwGrd": null, + "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/2800f90b251540baa940-Az4jltNx.jpeg", + "priceInfo": "$ 58.00|$ 58.00|N||||", + "freeShippingFlag": "N", + "soldoutFlag": "N", + "offerInfo": null, + "lgCatCd": null, + "lgCatNm": null, + "brndNm": null + }, + { + "prdtId": "7716e71a-4d22-415e-943a-89739ac9b685", + "prdtNm": "IIII", + "revwGrd": null, + "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/d9b7e7e8aa9b4051a2ce-Fm2Tq6SG.jpeg", + "priceInfo": "$ 2.00|$ 2.00|N||||", + "freeShippingFlag": "N", + "soldoutFlag": "N", + "offerInfo": null, + "lgCatCd": null, + "lgCatNm": null, + "brndNm": "chair" + } + ] + }, + { + "clctId": "mercury-below_deck_garden", + "clctNm": "Below Deck Garden", + "clctImgUrl": "https://nonprod-commerce.nbcuni.com/uat/content-manager-assets/nbcu-comcast/-eTpg2tMOT-Below Deck CollectionAsset 3.png", + "clctExpsOrd": "2", + "brandProductInfos": [ + { + "prdtId": "399d8a6c-773f-49df-93e8-44697a4248ef", + "prdtNm": "AiryWeight Eucalyptus Sheet Set v2", + "revwGrd": null, + "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/d80b6a8edc03406badff-5kaDvtaq.jpeg", + "priceInfo": "$ 185.00|$ 185.00|N||||", + "freeShippingFlag": "N", + "soldoutFlag": "Y", + "offerInfo": null, + "lgCatCd": null, + "lgCatNm": null, + "brndNm": "BB SUP 9.23 - SK" + }, + { + "prdtId": "4e495aa2-2b10-4120-86bd-bcc9f3843d32", + "prdtNm": "Cooling Towel", + "revwGrd": null, + "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/aec0a6c4770b437ba20a-nOXvmxoD.jpeg", + "priceInfo": "$ 20.00|$ 20.00|N||||", + "freeShippingFlag": "N", + "soldoutFlag": "Y", + "offerInfo": null, + "lgCatCd": null, + "lgCatNm": null, + "brndNm": "Posh Pickler" + }, + { + "prdtId": "07c2ca90-c730-4bed-8f5d-25a815c2de11", + "prdtNm": "Towel", + "revwGrd": null, + "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/3cf8c0b692724bea96ec-3jTpXCmc.jpeg", + "priceInfo": "$ 50.00|$ 50.00|N||||", + "freeShippingFlag": "N", + "soldoutFlag": "N", + "offerInfo": null, + "lgCatCd": null, + "lgCatNm": null, + "brndNm": "BB SUP 9.23 - SK" + }, + { + "prdtId": "cc85a17a-e6b5-4d0e-ad3b-67194d5aeafb", + "prdtNm": "STAINLESS STEEL MEASURING CUPS", + "revwGrd": null, + "prdtImgUrl": "https://8bf2164a2f18e0674bc4-c19fb008b43eea897ccae6fb0e59b195.ssl.cf1.rackcdn.com/9dc9460fd125488582e4-5GTzqS_6.jpeg", + "priceInfo": "$ 8.00|$ 8.00|N||||", + "freeShippingFlag": "N", + "soldoutFlag": "N", + "offerInfo": null, + "lgCatCd": null, + "lgCatNm": null, + "brndNm": "TARGET" + } + ] + } + ] + } + } +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx index 4de18f32..ea9c8ce8 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx @@ -2,78 +2,35 @@ import React, { memo, useCallback } from "react"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import TItemCardNew, { removeDotAndColon } from "../../../../../components/TItemCard/TItemCard.new"; -import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList"; -import { - LOG_CONTEXT_NAME, - LOG_MESSAGE_ID, - panel_names, -} from "../../../../../utils/Config"; -import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods"; -import Spotlight from "@enact/spotlight"; -import { pushPanel, updatePanel } from "../../../../../actions/panelActions"; -import { useDispatch } from "react-redux"; import css from "./ShopByShowContents.module.less"; +import ShopByShowImageCard from "./ShopByShowImageCard/ShopByShowImageCard"; +import ShopByShowProductList from "./ShopByShowProductList/ShopByShowProductList"; const Container = SpotlightContainerDecorator( { leaveFor: { right: "" }, enterTo: null }, "div" ); -const ShopByShowContents = memo(({ - clctId, - clctNm, +export default memo(function ShopByShowContents({ brandProductInfos, contentsIndex, handleItemFocus, + clctNm, + clctImgUrl, + patnrId, selectedPatnrId, - spotlightId, shelfOrder, shelfTitle, - getScrollTo, -}) => { - const dispatch = useDispatch(); - - const handleClick = useCallback( - (patnrId, prdtId) => (e) => { - const tItemCard = e.currentTarget; - const lastFocusedTarget = Spotlight.getCurrent(); - const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id"); - const xContainer = tItemCard?.parentNode?.parentNode; - - if (lastFocusedTargetId && xContainer) { - const section = "shop-by-show"; - const x = getTranslate3dValueByDirection(xContainer); - - dispatch( - updatePanel({ - name: panel_names.FEATURED_BRANDS_PANEL, - panelInfo: { - lastFocusedTargetId, - patnrId, - section, - x, - }, - }) - ); - } - - dispatch( - pushPanel({ - name: panel_names.DETAIL_PANEL, - panelInfo: { patnrId, prdtId }, - }) - ); - }, - [dispatch] - ); - + spotlightId, +}) { const handleFocus = useCallback(() => { - if (handleItemFocus) { - handleItemFocus(); - } + if (handleItemFocus) handleItemFocus(); }, [handleItemFocus]); + if (!brandProductInfos || brandProductInfos.length === 0) { + return null; + } + return (

{clctNm}

- {brandProductInfos && brandProductInfos.length > 0 && ( - { - if (!brandProductInfos || !brandProductInfos[index]) { - return null; - } - - const product = brandProductInfos[index]; - const { - prdtImgUrl, - prdtOfferId, - patnrId = "21", - prdtNm, - prdtId, - prdtPrice, - patncNm, - brndNm, - lgCatNm, - euEnrgLblInfos, - } = product; - - return ( - - ); - }} +
+ - )} + +
); }); - -export default ShopByShowContents; diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.module.less index 11ef6a5c..6c3c47ce 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.module.less @@ -8,20 +8,25 @@ position: relative; .font(@fontFamily: @arialFontBold, @fontSize: 36px); color: @COLOR_GRAY08; - margin-bottom: 22px; } > div:nth-child(2) { .flex(@justifyCenter: flex-start); .size(@w: 100%, @h: auto); } -} -.tVirtualGridList { - padding-right: 18px; - .size(@h: 438px); + &.listContainer { + margin-bottom: 12px; + } - > div:nth-child(3) { - right: -18px; + &.gridContainer { + > h3 { + position: relative; + margin-bottom: 22px; + } } } + +.container:last-child { + margin-bottom: 0; +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.jsx similarity index 85% rename from com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.jsx rename to com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.jsx index 91957e61..749b57a7 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.jsx @@ -2,7 +2,7 @@ import React, { memo } from "react"; import Spottable from "@enact/spotlight/Spottable"; -import CustomImage from "../../../../../../../components/CustomImage/CustomImage"; +import CustomImage from "../../../../../../components/CustomImage/CustomImage"; import css from "./ShopByShowImageCard.module.less"; const SpottableComponent = Spottable("figure"); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.module.less similarity index 60% rename from com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.module.less rename to com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.module.less index 5ea26357..d15841d1 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.module.less @@ -1,16 +1,16 @@ -@import "../../../../../../../style/CommonStyle.module.less"; -@import "../../../../../../../style/utils.module.less"; +@import "../../../../../../style/CommonStyle.module.less"; +@import "../../../../../../style/utils.module.less"; .card { position: relative; - .size(@w: 665px, @h:438px); + .size(@w: 663px, @h:438px); padding: 18px; background-color: @COLOR_WHITE; border: solid 1px @COLOR_GRAY02; border-radius: 12px; img { - .size(@w: 629px, @h:402px); + .size(@w: 627px, @h:402px); object-fit: cover; } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx similarity index 78% rename from com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.jsx rename to com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx index 962eea4a..d7d978e6 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx @@ -1,31 +1,34 @@ -import React, { useCallback, useRef, useEffect } from "react"; +import React, { useCallback, useEffect, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Job } from "@enact/core/util"; import Spotlight from "@enact/spotlight"; -import { pushPanel, updatePanel } from "../../../../../../../actions/panelActions"; -import TItemCardNew, { removeDotAndColon } from "../../../../../../../components/TItemCard/TItemCard.new"; -import TVirtualGridList from "../../../../../../../components/TVirtualGridList/TVirtualGridList"; -import useScrollTo from "../../../../../../../hooks/useScrollTo"; +import { pushPanel, updatePanel } from "../../../../../../actions/panelActions"; +import TItemCardNew, { + removeDotAndColon, +} from "../../../../../../components/TItemCard/TItemCard.new"; +import TVirtualGridList from "../../../../../../components/TVirtualGridList/TVirtualGridList"; +import useScrollTo from "../../../../../../hooks/useScrollTo"; import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, panel_names, -} from "../../../../../../../utils/Config"; -import { getTranslate3dValueByDirection } from "../../../../../../../utils/helperMethods"; +} from "../../../../../../utils/Config"; +import { getTranslate3dValueByDirection } from "../../../../../../utils/helperMethods"; import css from "./ShopByShowProductList.module.less"; export default function ShopByShowProductList({ brandProductInfos, contentsIndex, handleFocus, + patnrId, selectedPatnrId, - spotlightId, + clctNm, shelfOrder, shelfTitle, - clctNm, + spotlightId, }) { const { getScrollTo, scrollLeft } = useScrollTo(); @@ -57,11 +60,12 @@ export default function ShopByShowProductList({ }, [scrollLeft, selectedPatnrId]); const handleClick = useCallback( - (patnrId, prdtId) => (e) => { + (prdtId) => (e) => { const tItemCard = e.currentTarget; const lastFocusedTarget = Spotlight.getCurrent(); - const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id"); + const lastFocusedTargetId = + lastFocusedTarget?.getAttribute("data-spotlight-id"); const exprOrd = parseInt( lastFocusedTarget?.getAttribute("data-exposure-order") ); @@ -93,20 +97,16 @@ export default function ShopByShowProductList({ }) ); }, - [dispatch] + [dispatch, patnrId] ); const renderItem = useCallback( ({ index, ...rest }) => { - if (!brandProductInfos || !brandProductInfos[index]) { - return null; - } - const product = brandProductInfos[index]; const { prdtImgUrl, prdtOfferId, - patnrId = "21", + patnrId: productPartnerId = "21", prdtNm, prdtId, prdtPrice, @@ -128,13 +128,13 @@ export default function ShopByShowProductList({ shelfTitle={shelfTitle} imageAlt={prdtNm} imageSource={prdtImgUrl} - onClick={handleClick(patnrId, prdtId)} + onClick={handleClick(prdtId)} onFocus={handleFocus} offerInfo={prdtOfferId} priceInfo={prdtPrice} productId={prdtId} productName={prdtNm} - spotlightId={"shop-by-show-product-list-" + removeDotAndColon(prdtId)} + spotlightId={"shop-by-show-list-spotlightId-" + removeDotAndColon(prdtId)} data-exposure-order={contentsIndex + 1} label={index + 1 + " of " + brandProductInfos.length} lastLabel=" go to detail, button" @@ -143,7 +143,12 @@ export default function ShopByShowProductList({ /> ); }, - [brandProductInfos, contentsIndex, handleClick, handleFocus] + [ + brandProductInfos, + contentsIndex, + handleClick, + handleFocus, + ] ); return ( @@ -155,8 +160,8 @@ export default function ShopByShowProductList({ dataSize={brandProductInfos.length} direction="horizontal" itemHeight={438} - itemWidth={323} - spacing={19} + itemWidth={324} + spacing={18} renderItem={renderItem} /> )} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.module.less similarity index 55% rename from com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.module.less rename to com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.module.less index 04ca71ca..5b443f18 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.module.less @@ -1,9 +1,9 @@ -@import "../../../../../../../style/utils.module.less"; +@import "../../../../../../style/utils.module.less"; .container { .flex(); overflow: hidden; - .size(@w: calc(100% - 665px), @h: 482px); + .size(@w: calc(100% - 663px), @h: 482px); padding: 0 18px; // tVirtualGridListContainer @@ -19,12 +19,3 @@ } } } - -.tVirtualGridList { - padding-right: 18px; - .size(@h: 438px); - - > div:nth-child(3) { - right: -18px; - } -} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowList.jsx index f1cc3bfa..b32183df 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowList.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowList.jsx @@ -22,7 +22,7 @@ import { getBrandShopByShow } from '../../../../actions/brandActions'; import useScrollTo from '../../../../hooks/useScrollTo'; import css from './ShopByShowList.module.less'; import ShopByShowNav from './ShopByShowNav/ShopByShowNav'; -import ShopByShowSection from './ShopByShowSection/ShopByShowSection'; +import ShopByShowContents from './ShopByShowContents/ShopByShowContents'; const Container = SpotlightContainerDecorator( { leaveFor: { right: "" }, enterTo: "last-focused" }, @@ -97,16 +97,18 @@ export default function ShopByShowList({ /> {brandShopByShowClctInfos.map((collection, collIdx) => ( - ))} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.jsx deleted file mode 100644 index 713abdf4..00000000 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.jsx +++ /dev/null @@ -1,152 +0,0 @@ -import React, { memo, useCallback } from "react"; - -import Spotlight from "@enact/spotlight"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; - -import TItemCardNew, { removeDotAndColon } from "../../../../../components/TItemCard/TItemCard.new"; -import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList"; -import useScrollTo from "../../../../../hooks/useScrollTo"; -import { - LOG_CONTEXT_NAME, - LOG_MESSAGE_ID, - panel_names, -} from "../../../../../utils/Config"; -import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods"; -import { pushPanel, updatePanel } from "../../../../../actions/panelActions"; -import { useDispatch } from "react-redux"; -import css from "./ShopByShowSection.module.less"; - -const Container = SpotlightContainerDecorator( - { leaveFor: { right: "" }, enterTo: null }, - "div" -); - -const ShopByShowSection = memo(({ - clctNm, - brandProductInfos, - contentsIndex, - handleItemFocus, - selectedPatnrId, - spotlightId, - shelfOrder, - shelfTitle, -}) => { - const { getScrollTo } = useScrollTo(); - const dispatch = useDispatch(); - - const handleClick = useCallback( - (patnrId, prdtId) => (e) => { - const tItemCard = e.currentTarget; - const lastFocusedTarget = Spotlight.getCurrent(); - const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id"); - const xContainer = tItemCard?.parentNode?.parentNode; - - if (lastFocusedTargetId && xContainer) { - const section = "shop-by-show"; - const x = getTranslate3dValueByDirection(xContainer); - - dispatch( - updatePanel({ - name: panel_names.FEATURED_BRANDS_PANEL, - panelInfo: { - lastFocusedTargetId, - patnrId, - section, - x, - }, - }) - ); - } - - dispatch( - pushPanel({ - name: panel_names.DETAIL_PANEL, - panelInfo: { patnrId, prdtId }, - }) - ); - }, - [dispatch] - ); - - const handleFocus = useCallback(() => { - if (handleItemFocus) { - handleItemFocus(); - } - }, [handleItemFocus]); - - const renderItem = useCallback( - ({ index, ...rest }) => { - if (!brandProductInfos || !brandProductInfos[index]) { - return null; - } - - const product = brandProductInfos[index]; - const { - prdtImgUrl, - prdtOfferId, - patnrId = "21", - prdtNm, - prdtId, - prdtPrice, - patncNm, - brndNm, - lgCatNm, - euEnrgLblInfos, - } = product; - - return ( - - ); - }, - [brandProductInfos, handleClick, handleFocus] - ); - - if (!brandProductInfos || brandProductInfos.length === 0) { - return null; - } - - return ( - -

{clctNm}

- - -
- ); -}); - -export default ShopByShowSection; diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.module.less deleted file mode 100644 index 7a86b2b0..00000000 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.module.less +++ /dev/null @@ -1,38 +0,0 @@ -@import "../../../../../style/CommonStyle.module.less"; -@import "../../../../../style/utils.module.less"; - -.container { - padding-left: 60px; - margin-bottom: 40px; - - &:last-child { - margin-bottom: 0; - } -} - -.sectionTitle { - position: relative; - .font(@fontFamily: @arialFontBold, @fontSize: 42px); - color: @COLOR_GRAY08; - margin-bottom: 20px; - display: flex; - align-items: center; - gap: 12px; - - &::before { - content: ""; - width: 6px; - height: 36px; - background-color: #C70850; - flex-shrink: 0; - } -} - -.tVirtualGridList { - padding-right: 18px; - .size(@h: 438px); - - > div:nth-child(3) { - right: -18px; - } -}