diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index 0190090c..d0bd1475 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -221,6 +221,7 @@ export default function FeaturedBrandsPanel({ (state) => state.brand.brandShowroomData.data.brandShowroomInfo ); + const [displayTopButton, setDisplayTopButton] = useState(false); const [firstFocusableTargetId, setFirstFocusableTargetId] = useState(null); const [isInitialFocusOccurred, setIsInitialFocusOccurred] = useState(false); const [isInitialRendered, setIsInitialRendered] = useState(true); @@ -242,6 +243,7 @@ export default function FeaturedBrandsPanel({ const initialFocusTimeoutJob = useRef(new Job((func) => func(), 100)); const alamTimer = useRef(null); const cbChangePageRef = useRef(null); + const orderableFlexContainerRef = useRef(null); const previousPanelIsDetail = Object.keys(panelInfo).length >= 6; const previousActionOccurredInGNB = @@ -433,6 +435,27 @@ export default function FeaturedBrandsPanel({ previousPanelIsDetail, ]); + useEffect(() => { + let timer; + + if (brandLayoutInfo) { + setDisplayTopButton(false); + + timer = setTimeout(() => { + const orderableFlexContainer = orderableFlexContainerRef.current; + + if ( + orderableFlexContainer && + orderableFlexContainer?.children.length > 1 + ) { + setDisplayTopButton(true); + } + }, 100); + } + + return () => clearTimeout(timer); + }, [brandLayoutInfo]); + useEffect(() => { if (isInitialFocusOccurred && selectedPatnrId && selectedPatncNm) { sendLogPartners({ @@ -594,7 +617,7 @@ export default function FeaturedBrandsPanel({ { +
{hasTemplateCodeWithValue( brandLayoutInfo, TEMPLATE_CODE_CONF.LIVE_CHANNELS @@ -799,7 +825,7 @@ export default function FeaturedBrandsPanel({
)} - {isInitialFocusOccurred && ( + {displayTopButton && (