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