🆙 Update catalogue Forum view

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

@@ -1,7 +1,8 @@
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import { SanitizeHtml } from '../../../../../api';
-import { Column, Grid, Text } from '../../../../../common';
-import { useCatalogData, useCatalogUiState, useUserGroups } from '../../../../../hooks';
+import { Column, Flex, Grid } from '../../../../../common';
+import { LayoutImage } from '../../../../../common/layout/LayoutImage';
+import { useCatalogData, useUserGroups } from '../../../../../hooks';
 import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
 import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
@@ -11,32 +12,31 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
 export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
 {
     const { page = null } = props;
-    const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
     const { currentOffer = null } = useCatalogData();
-    const { setCurrentOffer = null } = useCatalogUiState();
     const { data: groups = null } = useUserGroups();
 
+    const teaserImage = page.localization.getImage(1);
+    const hasGroups = !!(groups && groups.length);
+
     return (
         <>
             <CatalogFirstProductSelectorWidgetView />
-            <Grid>
-                <Column className="bg-muted rounded p-2 text-black" overflow="hidden" size={ 7 }>
-                    <div className="overflow-auto" dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(1)) } } />
-                </Column>
-                <Column gap={ 1 } overflow="hidden" size={ 5 }>
+            <Grid overflow="hidden">
+                <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 &&
-                        <>
-                            <Column grow gap={ 1 }>
-                                <Text truncate>{ currentOffer.localizationName }</Text>
-                                <div className="grow!">
-                                    <CatalogGuildSelectorWidgetView />
-                                </div>
-                                <div className="flex justify-end">
-                                    <CatalogTotalPriceWidget alignItems="end" />
-                                </div>
-                                <CatalogPurchaseWidgetView noGiftOption={ true } />
-                            </Column>
-                        </> }
+                        <Flex alignItems="center" className="shrink-0" gap={ 2 }>
+                            <CatalogTotalPriceWidget />
+                            <div className="grow!">
+                                <CatalogGuildSelectorWidgetView />
+                            </div>
+                            { hasGroups &&
+                                <CatalogPurchaseWidgetView noGiftOption={ true } /> }
+                        </Flex> }
+                </Column>
+                <Column alignItems="center" overflow="hidden" size={ 4 }>
+                    { !!teaserImage &&
+                        <LayoutImage className="max-w-full" imageUrl={ teaserImage } /> }
                 </Column>
             </Grid>
         </>

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

@@ -1,4 +1,4 @@
-import { StringDataType } from '@nitrots/nitro-renderer';
+import { CreateLinkEvent, StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
 import { Button, Flex } from '../../../../../common';
@@ -45,11 +45,13 @@ export const CatalogGuildSelectorWidgetView: FC<{}> = props =>
     if(!groups || !groups.length)
     {
         return (
-            <div className="bg-muted rounded p-1 text-black text-center">
+            <div className="bg-[#5da0aa] rounded-lg p-2 text-black text-center">
                 { LocalizeText('catalog.guild_selector.members_only') }
-                <Button fullWidth classNames={ [ 'mt-1', 'nitro-catalog-swf-button', 'nitro-catalog-swf-buy-button', 'whitespace-normal!', 'text-[10px]!', 'leading-tight!', 'py-1!' ] }>
-                    { LocalizeText('catalog.guild_selector.find_groups') }
-                </Button>
+                <div className="mt-1">
+                    <Button classNames={ [ 'nitro-catalog-guild-join-btn' ] } onClick={ () => CreateLinkEvent('navigator/search/hotel_view/group:') }>
+                        { LocalizeText('catalog.guild_selector.find_groups') }
+                    </Button>
+                </div>
             </div>
         );
     }

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

@@ -1,9 +1,9 @@
 import { CreateLinkEvent, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { BuilderFurniPlaceableStatus, CatalogPurchaseState, CatalogType, DispatchUiEvent, GetClubMemberLevel, LocalizeText, NotificationBubbleType, Offer, ProductTypeEnum, SendMessageComposer } from '../../../../../api';
+import { BuilderFurniPlaceableStatus, CatalogPurchaseState, CatalogType, DispatchUiEvent, GetClubMemberLevel, LocalStorageKeys, LocalizeText, NotificationBubbleType, Offer, ProductTypeEnum, SendMessageComposer } from '../../../../../api';
 import { Button, LayoutLoadingSpinnerView, Text } from '../../../../../common';
 import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogPurchasedEvent } from '../../../../../events';
-import { useCatalogActions, useCatalogData, useCatalogSkipPurchaseConfirmation, useCatalogUiState, useNotification, usePurse, useUiEvent } from '../../../../../hooks';
+import { useCatalogActions, useCatalogData, useCatalogUiState, useLocalStorage, useNotification, usePurse, useUiEvent } from '../../../../../hooks';
 
 interface CatalogPurchaseWidgetViewProps
 {
@@ -17,8 +17,9 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
 {
     const { noGiftOption = false, purchaseCallback = null } = props;
     const [ builderPlaceableRefreshTick, setBuilderPlaceableRefreshTick ] = useState(0);
+    const [ purchaseWillBeGift, setPurchaseWillBeGift ] = useState(false);
     const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE);
-    const [ catalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation();
+    const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useLocalStorage(LocalStorageKeys.CATALOG_SKIP_PURCHASE_CONFIRMATION, false);
     const { currentOffer = null, currentPage = null } = useCatalogData();
     const { currentType = CatalogType.NORMAL, purchaseOptions = null, setPurchaseOptions = null, setCatalogPlaceMultipleObjects = null } = useCatalogUiState();
     const { requestOfferToMover = null, getBuilderFurniPlaceableStatus = null, getNodesByOfferId = null } = useCatalogActions();
@@ -241,7 +242,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
                 return <Button classNames={ swfButtonClassNames } variant="danger">{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</Button>;
             case CatalogPurchaseState.NONE:
             default:
-                return <Button classNames={ [ ...swfButtonClassNames, 'nitro-catalog-swf-buy-button' ] } variant="success" disabled={ (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) } onClick={ event => catalogSkipPurchaseConfirmation ? purchase() : setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>;
+                return <Button classNames={ [ ...swfButtonClassNames, 'nitro-catalog-swf-buy-button' ] } variant="success" disabled={ (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>;
         }
     };
 

src/css/catalog/CatalogClassicView.css

@@ -639,6 +639,50 @@
     overflow: hidden;
 }
 
+.nitro-catalog-classic-window .nitro-catalog-forum-text {
+    scrollbar-width: none !important;
+    font-size: 12px;
+    line-height: 15px;
+}
+
+.nitro-catalog-classic-window .nitro-catalog-forum-text::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+    display: none !important;
+}
+
+.nitro-catalog-classic-window .nitro-catalog-forum-text p,
+.nitro-catalog-classic-window .nitro-catalog-forum-text div {
+    margin: 0 0 8px;
+}
+
+.nitro-catalog-classic-window .nitro-catalog-forum-text > :last-child {
+    margin-bottom: 0;
+}
+
+.nitro-catalog-classic-window .nitro-catalog-guild-join-btn {
+    min-height: 20px !important;
+    width: auto !important;
+    padding: 1px 10px !important;
+    border: 1px solid #1c1c1c !important;
+    border-radius: 5px !important;
+    background: linear-gradient(180deg, #ffffff 0%, #eaeaea 55%, #d8d8d8 100%) !important;
+    box-shadow: inset 0 1px 0 #ffffff !important;
+    color: #000 !important;
+    font-size: 11px !important;
+    font-weight: 400 !important;
+    text-shadow: none !important;
+}
+
+.nitro-catalog-classic-window .nitro-catalog-guild-join-btn:hover {
+    background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 55%, #e2e2e2 100%) !important;
+}
+
+.nitro-catalog-classic-window .nitro-catalog-guild-join-btn:active {
+    background: linear-gradient(180deg, #d8d8d8 0%, #eaeaea 100%) !important;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
+}
+
 .nitro-catalog-classic-default-layout {
     position: relative;
     display: block !important;