Merge pull request #225 from duckietm/Dev

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

src/css/catalog/CatalogClassicView.css

@@ -1354,6 +1354,16 @@
     line-height: 17px !important;
 }
 
+.nitro-catalog-classic-window .nitro-catalog-preview-price .nitro-catalog-swf-price-text {
+    color: #ffffff !important;
+    text-shadow:
+        0 0 2px #000,
+        1px 1px 1px #000,
+        -1px 1px 1px #000,
+        1px -1px 1px #000,
+        -1px -1px 1px #000 !important;
+}
+
 .nitro-catalog-swf-price-plus {
     width: 7px;
     height: 7px;

src/hooks/groups/useUserGroups.ts

@@ -1,32 +1,31 @@
 import { CatalogGroupsComposer, GuildMembershipsMessageEvent, HabboGroupEntryData } from '@nitrots/nitro-renderer';
-import { UseQueryResult } from '@tanstack/react-query';
-import { useNitroQuery } from '../../api/nitro-query';
+import { useCallback, useEffect, useState } from 'react';
+import { useBetween } from 'use-between';
+import { SendMessageComposer } from '../../api';
+import { useMessageEvent } from '../events';
 
-/**
- * The list of guilds the current Habbo belongs to, as returned by
- * the `CatalogGroupsComposer` → `GuildMembershipsMessageEvent`
- * request/response pair.
- *
- * Cached at session level: the membership list is stable for the
- * session unless the user joins/leaves a guild (in which case the
- * relevant flow should invalidate the `['nitro', 'user', 'groups']`
- * query key, which today nobody does — re-mounting the consumer
- * refetches via React Query's default behavior).
- *
- * Replaces three duplicate request+listener pairs that previously
- * each issued their own CatalogGroupsComposer:
- *   - useCatalog (catalogOptions.groups)
- *   - WiredSelectorUsersGroupView
- *   - WiredConditionActorIsGroupMemberView
- */
-export const useUserGroups = (
-    options: { enabled?: boolean } = {}
-): UseQueryResult<HabboGroupEntryData[]> =>
-    useNitroQuery<GuildMembershipsMessageEvent, HabboGroupEntryData[]>({
-        key: [ 'nitro', 'user', 'groups' ],
-        request: () => new CatalogGroupsComposer(),
-        parser: GuildMembershipsMessageEvent,
-        select: event => (event.getParser().groups || []),
-        enabled: options.enabled,
-        staleTime: Infinity
-    });
+const useUserGroupsStore = () =>
+{
+    const [ groups, setGroups ] = useState<HabboGroupEntryData[]>([]);
+
+    const onGuildMemberships = useCallback((event: GuildMembershipsMessageEvent) =>
+    {
+        setGroups(event.getParser()?.groups || []);
+    }, []);
+
+    useMessageEvent<GuildMembershipsMessageEvent>(GuildMembershipsMessageEvent, onGuildMemberships);
+
+    useEffect(() =>
+    {
+        SendMessageComposer(new CatalogGroupsComposer());
+    }, []);
+
+    return { groups };
+};
+
+export const useUserGroups = (): { data: HabboGroupEntryData[] } =>
+{
+    const { groups } = useBetween(useUserGroupsStore);
+
+    return { data: groups };
+};