feat(catalog): catalogo modern Hippiehotel in albero separato (catalog-modern)

2026-06-20 23:46:19 +00:00 · 2026-06-07 23:00:06 +02:00
parent 3cd6c5a518
commit 21d3a62b7a
73 changed files with 6931 additions and 4 deletions
@@ -0,0 +1,116 @@
+import { FC, useEffect, useRef, useState } from 'react';
+import { IPurchasableOffer, LocalizeText, Offer, ProductTypeEnum } from '../../../../../api';
+import { AutoGrid, AutoGridProps, Button } from '../../../../../common';
+import { useCatalogData, useCatalogUiState } from '../../../../../hooks';
+import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
+
+interface CatalogSpacesWidgetViewProps extends AutoGridProps
+{
+
+}
+
+const SPACES_GROUP_NAMES = [ 'floors', 'walls', 'views' ];
+
+export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =>
+{
+    const { columnCount = 5, children = null, ...rest } = props;
+    const [ groupedOffers, setGroupedOffers ] = useState<IPurchasableOffer[][]>(null);
+    const [ selectedGroupIndex, setSelectedGroupIndex ] = useState(-1);
+    const [ selectedOfferForGroup, setSelectedOfferForGroup ] = useState<IPurchasableOffer[]>(null);
+    const { currentPage = null, currentOffer = null } = useCatalogData();
+    const { setCurrentOffer = null, setPurchaseOptions = null } = useCatalogUiState();
+    const elementRef = useRef<HTMLDivElement>(null);
+
+    const setSelectedOffer = (offer: IPurchasableOffer) =>
+    {
+        if(!offer) return;
+
+        setSelectedOfferForGroup(prevValue =>
+        {
+            const newValue = [ ...prevValue ];
+
+            newValue[selectedGroupIndex] = offer;
+
+            return newValue;
+        });
+    };
+
+    useEffect(() =>
+    {
+        if(!currentPage) return;
+
+        const groupedOffers: IPurchasableOffer[][] = [ [], [], [] ];
+
+        for(const offer of currentPage.offers)
+        {
+            if((offer.pricingModel !== Offer.PRICING_MODEL_SINGLE) && (offer.pricingModel !== Offer.PRICING_MODEL_MULTI)) continue;
+
+            const product = offer.product;
+
+            if(!product || ((product.productType !== ProductTypeEnum.WALL) && (product.productType !== ProductTypeEnum.FLOOR)) || !product.furnitureData) continue;
+
+            const className = product.furnitureData.className;
+
+            switch(className)
+            {
+                case 'floor':
+                    groupedOffers[0].push(offer);
+                    break;
+                case 'wallpaper':
+                    groupedOffers[1].push(offer);
+                    break;
+                case 'landscape':
+                    groupedOffers[2].push(offer);
+                    break;
+            }
+        }
+
+        setGroupedOffers(groupedOffers);
+        setSelectedGroupIndex(0);
+        setSelectedOfferForGroup([ groupedOffers[0][0], groupedOffers[1][0], groupedOffers[2][0] ]);
+    }, [ currentPage ]);
+
+    useEffect(() =>
+    {
+        if((selectedGroupIndex === -1) || !selectedOfferForGroup) return;
+
+        setCurrentOffer(selectedOfferForGroup[selectedGroupIndex]);
+
+    }, [ selectedGroupIndex, selectedOfferForGroup, setCurrentOffer ]);
+
+    useEffect(() =>
+    {
+        if((selectedGroupIndex === -1) || !selectedOfferForGroup || !currentOffer) return;
+
+        setPurchaseOptions(prevValue =>
+        {
+            const newValue = { ...prevValue };
+
+            newValue.extraData = selectedOfferForGroup[selectedGroupIndex].product.extraParam;
+            newValue.extraParamRequired = true;
+
+            return newValue;
+        });
+    }, [ currentOffer, selectedGroupIndex, selectedOfferForGroup, setPurchaseOptions ]);
+
+    useEffect(() =>
+    {
+        if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
+    }, [ selectedGroupIndex ]);
+
+    if(!groupedOffers || (selectedGroupIndex === -1)) return null;
+
+    const offers = groupedOffers[selectedGroupIndex];
+
+    return (
+        <>
+            <div className="relative inline-flex align-middle">
+                { SPACES_GROUP_NAMES.map((name, index) => <Button key={ index } active={ (selectedGroupIndex === index) } onClick={ event => setSelectedGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</Button>) }
+            </div>
+            <AutoGrid columnCount={ columnCount } innerRef={ elementRef } { ...rest }>
+                { offers && (offers.length > 0) && offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer === offer)) } offer={ offer } selectOffer={ offer => setSelectedOffer(offer) } />) }
+                { children }
+            </AutoGrid>
+        </>
+    );
+};