More catalog changes

src/components/catalog/CatalogContext.tsx

@@ -1,12 +1,12 @@
 import { FrontPageItem, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react';
-import { ICatalogNode } from '../common/ICatalogNode';
+import { ICatalogNode } from './common/ICatalogNode';
-import { ICatalogOptions } from '../common/ICatalogOptions';
+import { ICatalogOptions } from './common/ICatalogOptions';
-import { ICatalogPage } from '../common/ICatalogPage';
+import { ICatalogPage } from './common/ICatalogPage';
-import { IPageLocalization } from '../common/IPageLocalization';
+import { IPageLocalization } from './common/IPageLocalization';
-import { IPurchasableOffer } from '../common/IPurchasableOffer';
+import { IPurchasableOffer } from './common/IPurchasableOffer';
-import { IPurchaseOptions } from '../common/IPurchaseOptions';
+import { IPurchaseOptions } from './common/IPurchaseOptions';
-import { SearchResult } from '../common/SearchResult';
+import { SearchResult } from './common/SearchResult';
 
 interface ICatalogContext
 {

src/components/catalog/CatalogMessageHandler.tsx

@@ -11,6 +11,7 @@ import { dispatchUiEvent } from '../../hooks/events/ui/ui-event';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { NotificationAlertType } from '../../views/notification-center/common/NotificationAlertType';
 import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
+import { useCatalogContext } from './CatalogContext';
 import { CatalogNode } from './common/CatalogNode';
 import { CatalogPetPalette } from './common/CatalogPetPalette';
 import { CatalogType } from './common/CatalogType';
@@ -23,7 +24,6 @@ import { PageLocalization } from './common/PageLocalization';
 import { Product } from './common/Product';
 import { ProductTypeEnum } from './common/ProductTypeEnum';
 import { SubscriptionInfo } from './common/SubscriptionInfo';
-import { useCatalogContext } from './context/CatalogContext';
 
 export const CatalogMessageHandler: FC<{}> = props =>
 {

src/components/catalog/CatalogView.scss

@@ -12,6 +12,29 @@
     }
 }
 
+.catalog-icon-image {
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+}
+
+.nitro-catalog-gift {
+    width: 325px;
+    
+    .gift-preview {
+        width: 80px;
+        height: 80px;
+        overflow: hidden;
+    }
+
+    .gift-color {
+        width: 15px;
+        height: 15px;
+        border-radius: $border-radius;
+    }
+}
+
 .nitro-catalog-navigation-grid-container {
     border-radius: 0.25rem;
     border-color: #B6BEC5 !important;
@@ -34,4 +57,60 @@
     }
 }
 
-@import './views/CatalogViews';
+.nitro-catalog-layout-info-loyalty {
+
+    .info-loyalty-content {
+        background-repeat: no-repeat;
+        background-position: top right;
+        background-image: url('../../../../../assets/images/catalog/diamond_info_illustration.gif');
+        padding-right:123px;
+    }
+
+    .info-image {
+        width: 123px;
+        height:350px;
+        background-image: url('../../../../../assets/images/catalog/diamond_info_illustration.gif');
+    }
+}
+
+.nitro-catalog-layout-vip-buy-grid {
+
+    .layout-grid-item {
+        height: 50px !important;
+        max-height: 50px !important;
+
+        .icon-hc-banner {
+            width: 68px;
+            height: 40px;
+            background: url("../../../../../assets/images/catalog/hc_big.png") center no-repeat;
+        }
+    }
+}
+
+.nitro-catalog-layout-marketplace-grid {
+
+    .layout-grid-item {
+        height: 75px !important;
+        max-height: 75px !important;
+    }
+}
+
+.nitro-catalog-layout-vip-gifts-grid {
+
+    .layout-grid-item {
+        height: 55px !important;
+        max-height: 55px !important;
+    }
+}
+
+.nitro-catalog-layout-marketplace-post-offer {
+    width: $marketplace-post-offer-width;
+    height: $marketplace-post-offer-height;
+}
+
+.nitro-catalog-layout-bundle-grid {
+
+    .layout-grid-item {
+        background-color: transparent;
+    }
+}

src/components/catalog/CatalogView.tsx

@@ -9,6 +9,7 @@ import { BatchUpdates } from '../../hooks';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
+import { CatalogContextProvider } from './CatalogContext';
 import { CatalogMessageHandler } from './CatalogMessageHandler';
 import { CatalogPage } from './common/CatalogPage';
 import { CatalogType } from './common/CatalogType';
@@ -20,7 +21,6 @@ import { IPurchasableOffer } from './common/IPurchasableOffer';
 import { IPurchaseOptions } from './common/IPurchaseOptions';
 import { RequestedPage } from './common/RequestedPage';
 import { SearchResult } from './common/SearchResult';
-import { CatalogContextProvider } from './context/CatalogContext';
 import { CatalogGiftView } from './views/gift/CatalogGiftView';
 import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
 import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
@@ -43,6 +43,7 @@ export const CatalogView: FC<{}> = props =>
     const [ searchResult, setSearchResult ] = useState<SearchResult>(null);
     const [ frontPageItems, setFrontPageItems ] = useState<FrontPageItem[]>([]);
     const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
+    const [ navigationHidden, setNavigationHidden ] = useState(false);
     const [ purchaseOptions, setPurchaseOptions ] = useState<IPurchaseOptions>({});
     const [ catalogOptions, setCatalogOptions ] = useState<ICatalogOptions>({});
 
@@ -129,6 +130,7 @@ export const CatalogView: FC<{}> = props =>
         {
             setCurrentPage(catalogPage);
             setPreviousPageId(prevValue => ((pageId !== -1) ? pageId : prevValue));
+            setNavigationHidden(false);
 
             if((offerId > -1) && catalogPage.offers.length)
             {
@@ -428,12 +430,13 @@ export const CatalogView: FC<{}> = props =>
                     </NitroCardTabsView>
                     <NitroCardContentView>
                         <Grid>
-                            <Column size={ 3 } overflow="hidden">
+                            { !navigationHidden &&
-                                { activeNodes && (activeNodes.length > 0) &&
+                                <Column size={ 3 } overflow="hidden">
-                                    <CatalogNavigationView node={ activeNodes[0] } /> }
+                                    { activeNodes && (activeNodes.length > 0) &&
-                            </Column>
+                                        <CatalogNavigationView node={ activeNodes[0] } /> }
-                            <Column size={ 9 } overflow="hidden">
+                                </Column> }
-                                { GetCatalogLayout(currentPage) }
+                            <Column size={ !navigationHidden ? 9 : 12 } overflow="hidden">
+                                { GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
                             </Column>
                         </Grid>
                     </NitroCardContentView>

src/components/catalog/views/CatalogViews.scss

@@ -1,9 +0,0 @@
-.catalog-icon-image {
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    min-height: 20px;
-}
-
-@import './gift/CatalogGiftView';
-@import './page/CatalogPageView';

src/components/catalog/views/gift/CatalogGiftView.scss

@@ -1,15 +0,0 @@
-.nitro-catalog-gift {
-    width: 325px;
-    
-    .gift-preview {
-        width: 80px;
-        height: 80px;
-        overflow: hidden;
-    }
-
-    .gift-color {
-        width: 15px;
-        height: 15px;
-        border-radius: $border-radius;
-    }
-}

src/components/catalog/views/gift/CatalogGiftView.tsx

@@ -15,7 +15,7 @@ import { BatchUpdates, SendMessageHook, useUiEvent } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../layout';
 import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
 import { FurniImageView } from '../../../../views/shared/furni-image/FurniImageView';
-import { useCatalogContext } from '../../context/CatalogContext';
+import { useCatalogContext } from '../../CatalogContext';
 
 export const CatalogGiftView: FC<{}> = props =>
 {

src/components/catalog/views/navigation/CatalogNavigationItemView.tsx

@@ -2,8 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
 import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
 import { Text } from '../../../../common/Text';
+import { useCatalogContext } from '../../CatalogContext';
 import { ICatalogNode } from '../../common/ICatalogNode';
-import { useCatalogContext } from '../../context/CatalogContext';
 import { CatalogIconView } from '../catalog-icon/CatalogIconView';
 import { CatalogNavigationSetView } from './CatalogNavigationSetView';
 

src/components/catalog/views/navigation/CatalogNavigationView.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react';
 import { Column } from '../../../../common/Column';
 import { Grid } from '../../../../common/Grid';
+import { useCatalogContext } from '../../CatalogContext';
 import { ICatalogNode } from '../../common/ICatalogNode';
-import { useCatalogContext } from '../../context/CatalogContext';
+import { CatalogSearchView } from '../page/common/CatalogSearchView';
-import { CatalogSearchView } from '../search/CatalogSearchView';
 import { CatalogNavigationItemView } from './CatalogNavigationItemView';
 import { CatalogNavigationSetView } from './CatalogNavigationSetView';
 

src/components/catalog/views/page-details/CatalogPageDetailsView.tsx

@@ -1,24 +0,0 @@
-import { FC } from 'react';
-import { NitroLayoutFlexColumn } from '../../../../layout';
-import { ICatalogPage } from '../../common/ICatalogPage';
-
-export interface CatalogPageDetailsViewProps
-{
-    page: ICatalogPage;
-}
-
-export const CatalogPageDetailsView: FC<CatalogPageDetailsViewProps> = props =>
-{
-    const { page = null } = props;
-
-    if(!page) return null;
-    
-    const imageUrl = page.localization.getImage(1);
-
-    return (
-        <NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }>
-            { imageUrl && <img className="" alt="" src={ imageUrl } /> }
-            <div className="d-flex flex-column fs-6 text-center text-black lh-sm overflow-auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
-        </NitroLayoutFlexColumn>
-    );
-}

src/components/catalog/views/page/CatalogPageView.scss

@@ -1,2 +0,0 @@
-@import './layout/CatalogLayout';
-@import './purchase/CatalogPurchaseView';

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

@@ -1,20 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IFurnitureData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { GetSessionDataManager, LocalizeText } from '../../../../api';
+import { GetSessionDataManager, LocalizeText } from '../../../../../api';
-import { Button } from '../../../../common/Button';
+import { Button } from '../../../../../common/Button';
-import { Flex } from '../../../../common/Flex';
+import { Flex } from '../../../../../common/Flex';
-import { BatchUpdates } from '../../../../hooks';
+import { BatchUpdates } from '../../../../../hooks';
-import { CatalogPage } from '../../common/CatalogPage';
+import { useCatalogContext } from '../../../CatalogContext';
-import { CatalogType } from '../../common/CatalogType';
+import { CatalogPage } from '../../../common/CatalogPage';
-import { FilterCatalogNode, GetOfferNodes } from '../../common/CatalogUtilities';
+import { CatalogType } from '../../../common/CatalogType';
-import { FurnitureOffer } from '../../common/FurnitureOffer';
+import { FilterCatalogNode, GetOfferNodes } from '../../../common/CatalogUtilities';
-import { ICatalogNode } from '../../common/ICatalogNode';
+import { FurnitureOffer } from '../../../common/FurnitureOffer';
-import { ICatalogPage } from '../../common/ICatalogPage';
+import { ICatalogNode } from '../../../common/ICatalogNode';
-import { IPurchasableOffer } from '../../common/IPurchasableOffer';
+import { ICatalogPage } from '../../../common/ICatalogPage';
-import { PageLocalization } from '../../common/PageLocalization';
+import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
-import { SearchResult } from '../../common/SearchResult';
+import { PageLocalization } from '../../../common/PageLocalization';
-import { useCatalogContext } from '../../context/CatalogContext';
+import { SearchResult } from '../../../common/SearchResult';
 
 export const CatalogSearchView: FC<{}> = props =>
 {

src/components/catalog/views/page/layout/CatalogLayout.scss

@@ -1,57 +0,0 @@
-.nitro-catalog-layout-info-loyalty {
-
-    .info-loyalty-content {
-        background-repeat: no-repeat;
-        background-position: top right;
-        background-image: url('../../../../../assets/images/catalog/diamond_info_illustration.gif');
-        padding-right:123px;
-    }
-
-    .info-image {
-        width: 123px;
-        height:350px;
-        background-image: url('../../../../../assets/images/catalog/diamond_info_illustration.gif');
-    }
-}
-
-.nitro-catalog-layout-vip-buy-grid {
-
-    .layout-grid-item {
-        height: 50px !important;
-        max-height: 50px !important;
-
-        .icon-hc-banner {
-            width: 68px;
-            height: 40px;
-            background: url("../../../../../assets/images/catalog/hc_big.png") center no-repeat;
-        }
-    }
-}
-
-.nitro-catalog-layout-marketplace-grid {
-
-    .layout-grid-item {
-        height: 75px !important;
-        max-height: 75px !important;
-    }
-}
-
-.nitro-catalog-layout-vip-gifts-grid {
-
-    .layout-grid-item {
-        height: 55px !important;
-        max-height: 55px !important;
-    }
-}
-
-.nitro-catalog-layout-marketplace-post-offer {
-    width: $marketplace-post-offer-width;
-    height: $marketplace-post-offer-height;
-}
-
-.nitro-catalog-layout-bundle-grid {
-
-    .layout-grid-item {
-        background-color: transparent;
-    }
-}

src/components/catalog/views/page/layout/CatalogLayout.types.ts

@@ -3,4 +3,5 @@ import { ICatalogPage } from '../../../common/ICatalogPage';
 export interface CatalogLayoutProps
 {
     page: ICatalogPage;
+    hideNavigation: () => void;
 }

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

@@ -5,7 +5,7 @@ import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
 import { Text } from '../../../../../common/Text';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogBadgeSelectorWidgetView } from '../widgets/CatalogBadgeSelectorWidgetView';
 import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';

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

@@ -4,7 +4,7 @@ import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
 import { Text } from '../../../../../common/Text';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
 import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView';

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

@@ -4,7 +4,7 @@ import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
 import { Text } from '../../../../../common/Text';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogGuildBadgeWidgetView } from '../widgets/CatalogGuildBadgeWidgetView';
 import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';

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

@@ -2,10 +2,15 @@ import { CatalogGroupsComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { Base } from '../../../../../common/Base';
 import { Column } from '../../../../../common/Column';
+import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
+import { Text } from '../../../../../common/Text';
 import { SendMessageHook } from '../../../../../hooks/messages';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
-import { CatalogProductPreviewView } from '../offers/CatalogPageOfferPreviewView';
+import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
+import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
+import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
+import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
@@ -18,21 +23,31 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
     useEffect(() =>
     {
         SendMessageHook(new CatalogGroupsComposer());
-
+    }, [ page ]);
-        if(page.offers.length) setCurrentOffer(page.offers[0]);
-    }, [ page, setCurrentOffer ]);
     
     return (
-        <Grid>
+        <>
-            <Column className="bg-muted rounded p-2 text-black" size={ 7 } overflow="hidden">
+            <CatalogFirstProductSelectorWidgetView />
-                <Base className="overflow-auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
+            <Grid>
-            </Column>
+                <Column className="bg-muted rounded p-2 text-black" size={ 7 } overflow="hidden">
-            <Column size={ 5 } overflow="hidden">
+                    <Base className="overflow-auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
-                { !!currentOffer &&
+                </Column>
-                    <CatalogProductPreviewView offer={ currentOffer } roomPreviewer={ null } extra={ groups[selectedGroupIndex] ? groups[selectedGroupIndex].groupId.toString() : '' } disabled={ !(!!groups[selectedGroupIndex]) }>
+                <Column size={ 5 } overflow="hidden" gap={ 1 }>
-                        {/* <CatalogSelectGroupView selectedGroupIndex={ selectedGroupIndex } setSelectedGroupIndex={ setSelectedGroupIndex } /> */}
+                    { !!currentOffer &&
-                    </CatalogProductPreviewView> }
+                        <>
-            </Column>
+                            <Column grow gap={ 1 }>
-        </Grid>
+                                <Text truncate>{ currentOffer.localizationName }</Text>
+                                <Base grow>
+                                    <CatalogGuildSelectorWidgetView />
+                                </Base>
+                                <Flex justifyContent="end">
+                                    <CatalogTotalPriceWidget alignItems="end" />
+                                </Flex>
+                                <CatalogPurchaseWidgetView noGiftOption={ true } />
+                            </Column>
+                        </> }
+                </Column>
+            </Grid>
+        </>
     );
 }

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

@@ -5,7 +5,7 @@ import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
 import { Text } from '../../../../../common/Text';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
 import { CatalogSpacesWidgetView } from '../widgets/CatalogSpacesWidgetView';
 import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';

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

@@ -3,7 +3,7 @@ import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
 import { Text } from '../../../../../common/Text';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
 import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';

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

@@ -15,8 +15,8 @@ import { LoadingSpinnerView } from '../../../../../layout/loading-spinner/Loadin
 import { GetCurrencyAmount } from '../../../../../views/purse/common/CurrencyHelper';
 import { GLOBAL_PURSE } from '../../../../../views/purse/PurseView';
 import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogPurchaseState } from '../../../common/CatalogPurchaseState';
-import { useCatalogContext } from '../../../context/CatalogContext';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>

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

@@ -19,11 +19,11 @@ import { CatalogLayoutMarketplacePublicItemsView } from './marketplace/CatalogLa
 import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView';
 import { CatalogLayoutVipGiftsView } from './vip-gifts/CatalogLayoutVipGiftsView';
 
-export const GetCatalogLayout = (page: ICatalogPage) =>
+export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void) =>
 {
     if(!page) return null;
     
-    const layoutProps: CatalogLayoutProps = { page };
+    const layoutProps: CatalogLayoutProps = { page, hideNavigation };
 
     switch(page.layoutCode)
     {
@@ -58,11 +58,11 @@ export const GetCatalogLayout = (page: ICatalogPage) =>
         case 'spaces_new':
             return <CatalogLayoutSpacesView { ...layoutProps } />;
         case 'trophies':
-            return <CatalogLayoutTrophiesView page={ page } />;
+            return <CatalogLayoutTrophiesView { ...layoutProps } />;
         case 'info_loyalty':
             return <CatalogLayoutInfoLoyaltyView { ...layoutProps } />;
         case 'badge_display':
-            return <CatalogLayoutBadgeDisplayView page={ page } />;
+            return <CatalogLayoutBadgeDisplayView { ...layoutProps } />;
         //case 'default_3x3_color_grouping':
             //return <CatalogLayoutColorGroupingView { ...layoutProps } />;
         case 'bots':

src/components/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.tsx

@@ -1,16 +1,16 @@
 import { FrontPageItem } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useEffect } from 'react';
 import { CreateLinkEvent } from '../../../../../../api';
 import { Column } from '../../../../../../common/Column';
 import { Grid } from '../../../../../../common/Grid';
-import { useCatalogContext } from '../../../../context/CatalogContext';
+import { useCatalogContext } from '../../../../CatalogContext';
-import { CatalogRedeemVoucherView } from '../../redeem-voucher/CatalogRedeemVoucherView';
+import { CatalogRedeemVoucherView } from '../../common/CatalogRedeemVoucherView';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
 import { CatalogLayoutFrontPageItemView } from './CatalogLayoutFrontPageItemView';
 
 export const CatalogLayoutFrontpage4View: FC<CatalogLayoutProps> = props =>
 {
-    const { page = null } = props;
+    const { page = null, hideNavigation = null } = props;
     const { frontPageItems = [] } = useCatalogContext();
 
     const selectItem = useCallback((item: FrontPageItem) =>
@@ -26,6 +26,11 @@ export const CatalogLayoutFrontpage4View: FC<CatalogLayoutProps> = props =>
         }
     }, []);
 
+    useEffect(() =>
+    {
+        hideNavigation();
+    }, [ page, hideNavigation ]);
+
     return (
         <Grid>
             <Column size={ 4 }>

src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx

@@ -12,7 +12,7 @@ import { BatchUpdates, SendMessageHook, useUiEvent } from '../../../../../../hoo
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
 import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
 import { FurnitureItem } from '../../../../../inventory/common/FurnitureItem';
-import { useCatalogContext } from '../../../../context/CatalogContext';
+import { useCatalogContext } from '../../../../CatalogContext';
 
 export const MarketplacePostOfferView : FC<{}> = props =>
 {

src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx

@@ -14,8 +14,8 @@ import { CatalogWidgetEvent } from '../../../../../../events/catalog/CatalogWidg
 import { BatchUpdates, useUiEvent } from '../../../../../../hooks';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
 import { PetImageView } from '../../../../../../views/shared/pet-image/PetImageView';
+import { useCatalogContext } from '../../../../CatalogContext';
 import { GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
-import { useCatalogContext } from '../../../../context/CatalogContext';
 import { CatalogAddOnBadgeWidgetView } from '../../widgets/CatalogAddOnBadgeWidgetView';
 import { CatalogPurchaseWidgetView } from '../../widgets/CatalogPurchaseWidgetView';
 import { CatalogTotalPriceWidget } from '../../widgets/CatalogTotalPriceWidget';

src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx

@@ -5,7 +5,7 @@ import { Grid } from '../../../../../../common/Grid';
 import { Text } from '../../../../../../common/Text';
 import { SendMessageHook } from '../../../../../../hooks';
 import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
-import { useCatalogContext } from '../../../../context/CatalogContext';
+import { useCatalogContext } from '../../../../CatalogContext';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
 import { VipGiftItem } from './VipGiftItemView';
 

src/components/catalog/views/page/offers/CatalogPageOfferPreviewView.tsx

@@ -1,49 +0,0 @@
-import { RoomPreviewer } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
-import { Base } from '../../../../../common/Base';
-import { Column } from '../../../../../common/Column';
-import { Text } from '../../../../../common/Text';
-import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
-import { LimitedEditionCompletePlateView } from '../../../../../views/shared/limited-edition/LimitedEditionCompletePlateView';
-import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
-import { CatalogPurchaseView } from '../purchase/CatalogPurchaseView';
-
-export interface CatalogProductPreviewViewProps
-{
-    offer: IPurchasableOffer;
-    roomPreviewer: RoomPreviewer;
-    badgeCode?: string;
-    extra?: string;
-    disabled?: boolean;
-}
-
-export const CatalogProductPreviewView: FC<CatalogProductPreviewViewProps> = props =>
-{
-    const { offer = null, roomPreviewer = null, badgeCode = null, extra = null, disabled = false, children = null } = props;
-
-    const product = ((offer && offer.product) || null);
-
-    return (
-        <>
-            <Column overflow="hidden" position="relative" gap={ 0 }>
-                { product.isUniqueLimitedItem &&
-                    <Base fullWidth position="absolute" className="top-1">
-                        <LimitedEditionCompletePlateView className="mx-auto" uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedItemSeriesSize } />
-                    </Base> }
-                { badgeCode && (badgeCode.length > 0) &&
-                    <Base position="absolute" className="top-1 end-1">
-                        <BadgeImageView badgeCode={ badgeCode } isGroup={ true } />
-                    </Base> }
-                { offer.badgeCode && (offer.badgeCode.length > 0) &&
-                    <Base position="absolute" className="top-1 end-1">
-                        <BadgeImageView badgeCode={ offer.badgeCode } />
-                    </Base> }
-            </Column>
-            <Column grow>
-                <Text grow truncate>{ offer.localizationName }</Text>
-                { children }
-                <CatalogPurchaseView offer={ offer } pageId={ ((offer.page && offer.page.pageId) || -1) } extra={ extra } disabled={ disabled } />
-            </Column>
-        </>
-    );
-}

src/components/catalog/views/page/product/CatalogProductView.tsx

@@ -1,27 +0,0 @@
-import { FC } from 'react';
-import { LayoutGridItem, LayoutGridItemProps } from '../../../../../common/layout/LayoutGridItem';
-import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
-import { IProduct } from '../../../common/IProduct';
-import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
-
-export interface CatalogProductViewProps extends LayoutGridItemProps
-{
-    product: IProduct;
-}
-
-export const CatalogProductView: FC<CatalogProductViewProps> = props =>
-{
-    const { product = null, children = null, ...rest } = props;
-
-    if(!product) return null;
-
-    const iconUrl = product.getIconUrl(null);
-
-    return (
-        <LayoutGridItem itemImage={ iconUrl } itemCount={ product.productCount } itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) } itemUniqueNumber={ product.uniqueLimitedItemSeriesSize } { ...rest }>
-            { (product.productType === ProductTypeEnum.ROBOT) &&
-                <AvatarImageView figure={ product.extraParam } direction={ 3 } headOnly={ true } /> }
-            { children }
-        </LayoutGridItem>
-    );
-}

src/components/catalog/views/page/purchase/CatalogPurchaseView.scss

@@ -1,6 +0,0 @@
-.quantity-input {
-    min-height: 20px;
-    max-height: 20px;
-    width: 29px;
-    padding: 3px 5px;
-}

src/components/catalog/views/page/purchase/CatalogPurchaseView.tsx

@@ -1,85 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC, useEffect, useState } from 'react';
-import { LocalizeText } from '../../../../../api';
-import { Column } from '../../../../../common/Column';
-import { Flex } from '../../../../../common/Flex';
-import { Text } from '../../../../../common/Text';
-import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
-import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
-import { Offer } from '../../../common/Offer';
-
-export interface CatalogPurchaseViewProps
-{
-    offer: IPurchasableOffer;
-    pageId: number;
-    extra?: string;
-    disabled?: boolean;
-}
-
-export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
-{
-    const { offer = null, pageId = -1, extra = '', disabled = false } = props;
-    const [ quantity, setQuantity ] = useState(1);
-
-    const increaseQuantity = () =>
-    {
-        let newQuantity = quantity + 1;
-
-        if(newQuantity > 99) newQuantity = 99
-
-        setQuantity(newQuantity);
-    }
-
-    const decreaseQuantity = () =>
-    {
-        let newQuantity = quantity - 1;
-
-        if(newQuantity <= 0) newQuantity = 1;
-
-        setQuantity(newQuantity);
-    }
-
-    const updateQuantity = (amount: number) =>
-    {
-        if(isNaN(amount) || (amount <= 0)) amount = 1;
-
-        if(amount > 99) amount = 99;
-
-        setQuantity(amount);
-    }
-
-    useEffect(() =>
-    {
-        setQuantity(1);
-    }, [ offer ]);
-
-    const extraData = ((extra && extra.length) ? extra : (offer.product.extraParam || null));
-    
-    return (
-        <Column fullWidth grow justifyContent="end">
-            <Flex alignItems="end">
-                <div className="flex-grow-1 align-items-end">
-                    <Text>{ LocalizeText('catalog.bundlewidget.price') }</Text>
-                    { offer.bundlePurchaseAllowed &&
-                        <Flex alignItems="center" gap={ 1 }>
-                            <FontAwesomeIcon icon="caret-left" className="text-black cursor-pointer" onClick={ decreaseQuantity } />
-                            <input type="number" className="form-control form-control-sm quantity-input" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber)} />
-                            <FontAwesomeIcon icon="caret-right" className="text-black cursor-pointer" onClick={ increaseQuantity } />
-                        </Flex> }
-                </div>
-                <Column gap={ 1 }>
-                    { ((offer.priceType === Offer.PRICE_TYPE_CREDITS_ACTIVITYPOINTS) || (offer.priceType === Offer.PRICE_TYPE_CREDITS)) &&
-                        <Flex alignItems="center" justifyContent="end" gap={ 1 }>
-                            <Text>{ offer.priceInCredits * quantity }</Text>
-                            <CurrencyIcon type={ -1 } />
-                        </Flex> }
-                    { ((offer.priceType === Offer.PRICE_TYPE_CREDITS_ACTIVITYPOINTS) || (offer.priceType === Offer.PRICE_TYPE_ACTIVITYPOINTS)) &&
-                        <Flex alignItems="center" justifyContent="end" gap={ 1 }>
-                            <Text>{ offer.priceInActivityPoints * quantity }</Text>
-                            <CurrencyIcon type={ offer.activityPointType } />
-                        </Flex> }
-                </Column>
-            </Flex>
-        </Column>
-    );
-}

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

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { BaseProps } from '../../../../../common/Base';
 import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 
 interface CatalogAddOnBadgeWidgetViewProps extends BaseProps<HTMLDivElement>
 {

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

@@ -6,7 +6,7 @@ import { InventoryBadgesUpdatedEvent } from '../../../../../events';
 import { InventoryBadgesRequestEvent } from '../../../../../events/inventory/InventoryBadgesRequestEvent';
 import { dispatchUiEvent, useUiEvent } from '../../../../../hooks';
 import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 
 const EXCLUDED_BADGE_CODES: string[] = [];
 

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

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Grid, GridProps } from '../../../../../common/Grid';
 import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 
 interface CatalogBundleGridWidgetViewProps extends GridProps
 {

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

@@ -1,5 +1,5 @@
 import { FC, useEffect } from 'react';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 
 export const CatalogFirstProductSelectorWidgetView: FC<{}> = props =>
 {

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

@@ -2,7 +2,7 @@ import { StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
 import { BaseProps } from '../../../../../common/Base';
 import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 
 interface CatalogGuildBadgeWidgetViewProps extends BaseProps<HTMLDivElement>
 {

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

@@ -5,7 +5,7 @@ import { Base } from '../../../../../common/Base';
 import { Button } from '../../../../../common/Button';
 import { Flex } from '../../../../../common/Flex';
 import { SendMessageHook } from '../../../../../hooks';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 
 export const CatalogGuildSelectorWidgetView: FC<{}> = props =>
 {

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

@@ -2,10 +2,10 @@ import { FC } from 'react';
 import { Grid, GridProps } from '../../../../../common/Grid';
 import { CatalogSetExtraPurchaseParameterEvent } from '../../../../../events';
 import { dispatchUiEvent } from '../../../../../hooks';
+import { useCatalogContext } from '../../../CatalogContext';
 import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
 import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
-import { CatalogGridOfferView } from '../offers/CatalogGridOfferView';
 
 interface CatalogItemGridWidgetViewProps extends GridProps
 {

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

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { Base, BaseProps } from '../../../../../common/Base';
 import { LimitedEditionCompletePlateView } from '../../../../../views/shared/limited-edition/LimitedEditionCompletePlateView';
+import { useCatalogContext } from '../../../CatalogContext';
 import { Offer } from '../../../common/Offer';
-import { useCatalogContext } from '../../../context/CatalogContext';
 
 export const CatalogLimitedItemWidgetView: FC<BaseProps<HTMLDivElement>> = props =>
 {

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

@@ -3,8 +3,8 @@ import { FC } from 'react';
 import { Flex } from '../../../../../common/Flex';
 import { Text } from '../../../../../common/Text';
 import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
+import { useCatalogContext } from '../../../CatalogContext';
 import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
-import { useCatalogContext } from '../../../context/CatalogContext';
 
 interface CatalogPriceDisplayWidgetViewProps
 {

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

@@ -8,9 +8,9 @@ import { CatalogWidgetEvent } from '../../../../../events/catalog/CatalogWidgetE
 import { SendMessageHook, useUiEvent } from '../../../../../hooks';
 import { LoadingSpinnerView } from '../../../../../layout';
 import { GetCurrencyAmount } from '../../../../../views/purse/common/CurrencyHelper';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogPurchaseState } from '../../../common/CatalogPurchaseState';
 import { Offer } from '../../../common/Offer';
-import { useCatalogContext } from '../../../context/CatalogContext';
 
 interface CatalogPurchaseWidgetViewProps
 {

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Flex, FlexProps } from '../../../../../common/Flex';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogPriceDisplayWidgetView } from './CatalogPriceDisplayWidgetView';
 
 interface CatalogSimplePriceWidgetViewProps extends FlexProps

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

@@ -4,11 +4,11 @@ import { Button } from '../../../../../common/Button';
 import { ButtonGroup } from '../../../../../common/ButtonGroup';
 import { Grid, GridProps } from '../../../../../common/Grid';
 import { BatchUpdates } from '../../../../../hooks';
+import { useCatalogContext } from '../../../CatalogContext';
 import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
 import { Offer } from '../../../common/Offer';
 import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
-import { CatalogGridOfferView } from '../offers/CatalogGridOfferView';
 
 interface CatalogSpacesWidgetViewProps extends GridProps
 {

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

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { LocalizeText } from '../../../../../api';
 import { Flex } from '../../../../../common/Flex';
 import { Text } from '../../../../../common/Text';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 
 const MIN_VALUE: number = 1;
 const MAX_VALUE: number = 100;

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Column, ColumnProps } from '../../../../../common/Column';
-import { useCatalogContext } from '../../../context/CatalogContext';
+import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogPriceDisplayWidgetView } from './CatalogPriceDisplayWidgetView';
 
 interface CatalogSimplePriceWidgetViewProps extends ColumnProps

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

@@ -5,10 +5,10 @@ import { Column } from '../../../../../common/Column';
 import { Grid } from '../../../../../common/Grid';
 import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
 import { RoomPreviewerView } from '../../../../../views/shared/room-previewer/RoomPreviewerView';
+import { useCatalogContext } from '../../../CatalogContext';
 import { FurniCategory } from '../../../common/FurniCategory';
 import { Offer } from '../../../common/Offer';
 import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
-import { useCatalogContext } from '../../../context/CatalogContext';
 
 export const CatalogViewProductWidgetView: FC<{}> = props =>
 {