🆙 Added colored background to items in group furni & fix catalog price

src/components/catalog/views/page/common/CatalogGridOfferView.tsx

@@ -1,5 +1,5 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useMemo, useState } from 'react';
+import { CSSProperties, FC, MouseEvent, useMemo, useState } from 'react';
 import { FaHeart } from 'react-icons/fa';
 import { CatalogType, GetConfigurationValue, IPurchasableOffer, Offer, ProductTypeEnum } from '../../../../../api';
 import { LayoutAvatarImageView, LayoutGridItem, LayoutGridItemProps } from '../../../../../common';
@@ -9,11 +9,12 @@ interface CatalogGridOfferViewProps extends LayoutGridItemProps
 {
     offer: IPurchasableOffer;
     selectOffer: (offer: IPurchasableOffer) => void;
+    tintColor?: string;
 }
 
 export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
 {
-    const { offer = null, selectOffer = null, itemActive = false, ...rest } = props;
+    const { offer = null, selectOffer = null, itemActive = false, tintColor = null, ...rest } = props;
     const [ isMouseDown, setMouseDown ] = useState(false);
     const { requestOfferToMover = null } = useCatalogActions();
     const { currentType = CatalogType.NORMAL } = useCatalogUiState();
@@ -113,9 +114,10 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
 
     return (
         <LayoutGridItem
-            className={ `group/tile relative ${ itemActive ? 'is-active' : '' }` }
+            className={ `group/tile relative ${ itemActive ? 'is-active' : '' } ${ tintColor ? 'has-guild-tint' : '' }` }
             gap={ 1 }
             itemActive={ itemActive }
+            style={ tintColor ? ({ '--guild-tint': tintColor } as CSSProperties) : undefined }
             itemCount={ ((offer.pricingModel === Offer.PRICING_MODEL_MULTI) ? product.productCount : 1) }
             itemUniqueNumber={ product.uniqueLimitedItemSeriesSize }
             itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) }

src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx

@@ -112,6 +112,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                         <CatalogSpinnerWidgetView />
                     </div>
                     <div className="nitro-catalog-classic-total-price-slot">
+                        <span className="nitro-catalog-classic-total-price-label">{ LocalizeText('catalog.bundlewidget.price') }</span>
                         <CatalogTotalPriceWidget />
                     </div>
                 </div> }

src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import { StringDataType } from '@nitrots/nitro-renderer';
+import { FC, useMemo } from 'react';
 import { FaExchangeAlt, FaSyncAlt } from 'react-icons/fa';
 import { Column } from '../../../../../common';
-import { useCatalogData, useUserGroups } from '../../../../../hooks';
+import { useCatalogData, useCatalogUiState, useUserGroups } from '../../../../../hooks';
 import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
 import { CatalogGuildBadgeWidgetView } from '../widgets/CatalogGuildBadgeWidgetView';
 import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
@@ -14,9 +15,29 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
 export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = () =>
 {
     const { currentOffer = null, roomPreviewer = null } = useCatalogData();
+    const { purchaseOptions = null } = useCatalogUiState();
     const { data: groups = null } = useUserGroups();
     const hasGroups = !!(groups && groups.length);
 
+    const tintColor = useMemo(() =>
+    {
+        const previewStuffData = purchaseOptions?.previewStuffData ?? null;
+
+        if(!previewStuffData) return null;
+
+        const colorA = (previewStuffData as StringDataType).getValue(3);
+        const colorB = (previewStuffData as StringDataType).getValue(4);
+
+        if(!colorA || !colorA.length) return null;
+
+        if(colorB && colorB.length && (colorB !== colorA))
+        {
+            return `linear-gradient(90deg, #${ colorA } 0 50%, #${ colorB } 50% 100%)`;
+        }
+
+        return `#${ colorA }`;
+    }, [ purchaseOptions ]);
+
     return (
         <>
             <CatalogFirstProductSelectorWidgetView />
@@ -38,7 +59,7 @@ export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = () =>
                         </div>
                     </div> }
                 <div className="grow! min-h-0 overflow-auto">
-                    <CatalogItemGridWidgetView columnCount={ 5 } columnMinWidth={ 36 } />
+                    <CatalogItemGridWidgetView className="nitro-catalog-classic-grid" columnCount={ 6 } columnMinHeight={ 80 } columnMinWidth={ 55 } tintColor={ tintColor } />
                 </div>
                 { !!currentOffer &&
                     <div className="flex shrink-0 flex-col gap-1">

src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx

@@ -33,7 +33,9 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
                                 </div>
                             </Flex>
                             { hasGroups &&
-                                <CatalogPurchaseWidgetView noGiftOption={ true } /> }
+                                <div className="flex justify-center">
+                                    <CatalogPurchaseWidgetView noGiftOption={ true } />
+                                </div> }
                         </div> }
                 </Column>
                 <Column alignItems="center" overflow="hidden" size={ 4 }>

src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx

@@ -7,12 +7,12 @@ import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
 
 interface CatalogItemGridWidgetViewProps extends AutoGridProps
 {
-
+    tintColor?: string;
 }
 
 export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = props =>
 {
-    const { columnCount = 5, children = null, ...rest } = props;
+    const { columnCount = 5, tintColor = null, children = null, ...rest } = props;
     const { currentOffer = null, currentPage = null } = useCatalogData();
     const { selectCatalogOffer = null } = useCatalogActions();
     const catalogAdmin = useCatalogAdmin();
@@ -26,13 +26,6 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
         if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
     }, [ currentPage ]);
 
-    // Drag-and-drop handlers — hooks MUST run unconditionally so the
-    // hook order stays stable when currentPage flips from null to a
-    // real value (the `if(!currentPage) return null` below would
-    // otherwise hide these from the first render and React would flag
-    // "Rendered more hooks than during the previous render"). Bodies
-    // are safe to evaluate pre-load: currentPage? optional chaining
-    // already guards the only access inside handleDrop.
     const handleDragStart = useCallback((index: number) =>
     {
         setDragIndex(index);
@@ -96,6 +89,7 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
                             itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) }
                             offer={ offer }
                             selectOffer={ selectOffer }
+                            tintColor={ tintColor }
                         />
                     </div>
                 );