🆙 Fix Group Forum buy

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

@@ -1,7 +1,8 @@
 import { FC } from 'react';
-import { SanitizeHtml } from '../../../../../api';
-import { Column, Grid, Text } from '../../../../../common';
-import { useCatalogData } from '../../../../../hooks';
+import { FaExchangeAlt, FaSyncAlt } from 'react-icons/fa';
+import { Column } from '../../../../../common';
+import { useCatalogData, useUserGroups } from '../../../../../hooks';
+import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
 import { CatalogGuildBadgeWidgetView } from '../widgets/CatalogGuildBadgeWidgetView';
 import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
@@ -10,40 +11,43 @@ import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
 import { CatalogViewProductWidgetView } from '../widgets/CatalogViewProductWidgetView';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
-export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = props =>
+export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = () =>
 {
-    const { page = null } = props;
-    const { currentOffer = null } = useCatalogData();
+    const { currentOffer = null, roomPreviewer = null } = useCatalogData();
+    const { data: groups = null } = useUserGroups();
+    const hasGroups = !!(groups && groups.length);
 
     return (
-        <Grid>
-            <Column overflow="hidden" size={ 8 }>
-                <CatalogItemGridWidgetView columnMinWidth={ 36 } />
-            </Column>
-            <Column center={ !currentOffer } overflow="hidden" size={ 4 }>
-                { !currentOffer &&
-                    <>
-                        { !!page.localization.getImage(1) && <img alt="" className="max-w-full object-contain" src={ page.localization.getImage(1) } /> }
-                        <Text center bold dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(0)) } } />
-                    </> }
-                { currentOffer &&
-                    <>
-                        <div className="relative overflow-hidden">
-                            <CatalogViewProductWidgetView />
-                            <CatalogGuildBadgeWidgetView className="bottom-1 inset-e-1" position="absolute" />
+        <>
+            <CatalogFirstProductSelectorWidgetView />
+            <Column fullHeight gap={ 1 } overflow="hidden">
+                { !!currentOffer &&
+                    <div className="relative shrink-0 overflow-hidden">
+                        <button className="nitro-catalog-classic-preview-btn nitro-catalog-classic-preview-rotate" onClick={ () => roomPreviewer?.changeRoomObjectDirection() }>
+                            <FaSyncAlt />
+                        </button>
+                        <button className="nitro-catalog-classic-preview-btn nitro-catalog-classic-preview-state" onClick={ () => roomPreviewer?.changeRoomObjectState() }>
+                            <FaExchangeAlt />
+                        </button>
+                        <CatalogViewProductWidgetView height={ 210 } />
+                        <div className="absolute bottom-1 left-1 z-10">
+                            <CatalogGuildBadgeWidgetView />
                         </div>
-                        <Column grow gap={ 1 }>
-                            <Text bold className="leading-tight">{ currentOffer.localizationName }</Text>
-                            <div className="grow!">
-                                <CatalogGuildSelectorWidgetView />
-                            </div>
-                            <div className="flex justify-end">
-                                <CatalogTotalPriceWidget alignItems="end" />
-                            </div>
-                            <CatalogPurchaseWidgetView />
-                        </Column>
-                    </> }
+                        <div className="nitro-catalog-preview-price absolute bottom-1 right-1">
+                            <CatalogTotalPriceWidget alignItems="end" />
+                        </div>
+                    </div> }
+                <div className="grow! min-h-0 overflow-auto">
+                    <CatalogItemGridWidgetView columnCount={ 5 } columnMinWidth={ 36 } />
+                </div>
+                { !!currentOffer &&
+                    <div className="flex shrink-0 flex-col gap-1">
+                        <CatalogGuildSelectorWidgetView />
+                        { hasGroups &&
+                            <CatalogPurchaseWidgetView noGiftOption={ true } /> }
+                    </div> }
             </Column>
-        </Grid>
+        </>
     );
 };
+

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

@@ -25,14 +25,16 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
                 <Column overflow="hidden" size={ 8 }>
                     <div className="nitro-catalog-forum-text grow! min-h-0 overflow-auto text-black" dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(1)) } } />
                     { !!currentOffer &&
-                        <Flex alignItems="center" className="shrink-0" gap={ 2 }>
-                            <CatalogTotalPriceWidget />
-                            <div className="grow!">
-                                <CatalogGuildSelectorWidgetView />
-                            </div>
+                        <div className="flex shrink-0 flex-col gap-1">
+                            <Flex alignItems="center" gap={ 2 }>
+                                <CatalogTotalPriceWidget />
+                                <div className="grow! min-w-0">
+                                    <CatalogGuildSelectorWidgetView ownerOnly />
+                                </div>
+                            </Flex>
                             { hasGroups &&
                                 <CatalogPurchaseWidgetView noGiftOption={ true } /> }
-                        </Flex> }
+                        </div> }
                 </Column>
                 <Column alignItems="center" overflow="hidden" size={ 4 }>
                     { !!teaserImage &&

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

@@ -1,15 +1,38 @@
-import { CreateLinkEvent, StringDataType } from '@nitrots/nitro-renderer';
+import { CreateLinkEvent, GetSessionDataManager, StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
 import { Button, Flex } from '../../../../../common';
 import { useCatalogData, useCatalogUiState, useUserGroups } from '../../../../../hooks';
 
-export const CatalogGuildSelectorWidgetView: FC<{}> = props =>
+interface CatalogGuildSelectorWidgetViewProps
 {
+    ownerOnly?: boolean;
+}
+
+export const CatalogGuildSelectorWidgetView: FC<CatalogGuildSelectorWidgetViewProps> = props =>
+{
+    const { ownerOnly = false } = props;
     const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
     const { currentOffer = null } = useCatalogData();
     const { setPurchaseOptions = null } = useCatalogUiState();
-    const { data: groups = null } = useUserGroups();
+    const { data: allGroups = null } = useUserGroups();
+
+    const groups = useMemo(() =>
+    {
+        if(!allGroups || !ownerOnly) return allGroups;
+
+        const ownerId = GetSessionDataManager().userId;
+        const hasOwnerData = allGroups.some(group => typeof (group as { ownerId?: number }).ownerId === 'number');
+
+        if(!hasOwnerData) return allGroups;
+
+        return allGroups.filter(group => (group as { ownerId?: number }).ownerId === ownerId);
+    }, [ allGroups, ownerOnly ]);
+
+    useEffect(() =>
+    {
+        if(groups && (selectedGroupIndex >= groups.length)) setSelectedGroupIndex(0);
+    }, [ groups, selectedGroupIndex ]);
 
     const previewStuffData = useMemo(() =>
     {

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

@@ -4,8 +4,9 @@ import { BuildPurchasableClothingFigure, FurniCategory, Offer, ProductTypeEnum }
 import { AutoGrid, Column, LayoutGridItem, LayoutRoomPreviewerView } from '../../../../../common';
 import { useCatalogData, useCatalogUiState } from '../../../../../hooks';
 
-export const CatalogViewProductWidgetView: FC<{}> = props =>
+export const CatalogViewProductWidgetView: FC<{ height?: number }> = props =>
 {
+    const { height = 240 } = props;
     const { currentOffer = null, roomPreviewer = null } = useCatalogData();
     const { purchaseOptions = null } = useCatalogUiState();
     const { previewStuffData = null } = purchaseOptions;
@@ -125,5 +126,5 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
         );
     }
 
-    return <LayoutRoomPreviewerView key={ currentOffer?.offerId } height={ 240 } roomPreviewer={ roomPreviewer } />;
+    return <LayoutRoomPreviewerView key={ currentOffer?.offerId } height={ height } roomPreviewer={ roomPreviewer } />;
 };