feat: catalog style toggle (classic/new) with admin mode & favorites

src/components/catalog/CatalogView.tsx

@@ -1,111 +1,13 @@
-import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
-import { FC, useEffect } from 'react';
-import { GetConfigurationValue, LocalizeText } from '../../api';
-import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
-import { useCatalog } from '../../hooks';
-import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
-import { CatalogGiftView } from './views/gift/CatalogGiftView';
-import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
-import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
-import { MarketplacePostOfferView } from './views/page/layout/marketplace/MarketplacePostOfferView';
+import { FC } from 'react';
+import { GetConfigurationValue } from '../../api';
+import { CatalogClassicView } from './CatalogClassicView';
+import { CatalogModernView } from './CatalogModernView';
 
-export const CatalogView: FC<{}> = props =>
+export const CatalogView: FC<{}> = () =>
 {
-    const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null, getNodeById } = useCatalog();
+    const style = GetConfigurationValue<string>('catalog.style', 'classic');
 
-    useEffect(() =>
-    {
-        const linkTracker: ILinkEventTracker = {
-            linkReceived: (url: string) =>
-            {
-                const parts = url.split('/');
+    if(style === 'new') return <CatalogModernView />;
 
-                if(parts.length < 2) return;
-
-                switch(parts[1])
-                {
-                    case 'show':
-                        setIsVisible(true);
-                        return;
-                    case 'hide':
-                        setIsVisible(false);
-                        return;
-                    case 'toggle':
-                        setIsVisible(prevValue => !prevValue);
-                        return;
-                    case 'open':
-                        if(parts.length > 2)
-                        {
-                            if(parts.length === 4)
-                            {
-                                switch(parts[2])
-                                {
-                                    case 'offerId':
-                                        openPageByOfferId(parseInt(parts[3]));
-                                        return;
-                                }
-                            }
-                            else
-                            {
-                                openPageByName(parts[2]);
-                            }
-                        }
-                        else
-                        {
-                            setIsVisible(true);
-                        }
-
-                        return;
-                }
-            },
-            eventUrlPrefix: 'catalog/'
-        };
-
-        AddLinkEventTracker(linkTracker);
-
-        return () => RemoveLinkEventTracker(linkTracker);
-    }, [ setIsVisible, openPageByOfferId, openPageByName ]);
-
-    return (
-        <>
-            { isVisible &&
-                <NitroCardView className="w-[630px] h-[400px]" style={ GetConfigurationValue('catalog.headers') ? { width: 710 } : {} } uniqueKey="catalog">
-                    <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
-                    <NitroCardTabsView>
-                        { rootNode && (rootNode.children.length > 0) && rootNode.children.map((child, index) =>
-                        {
-                            if(!child.isVisible) return null;
-
-                            return (
-                                <NitroCardTabsItemView key={ `${ child.pageId }-${ child.pageName }-${ index }` } isActive={ child.isActive } onClick={ event =>
-                                {
-                                    if(searchResult) setSearchResult(null);
-
-                                    activateNode(child);
-                                } } >
-                                    <div className={ `flex items-center gap-${ GetConfigurationValue('catalog.tab.icons') ? 1 : 0 }` }>
-                                        { GetConfigurationValue('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> }
-                                        { child.localization }
-                                    </div>
-                                </NitroCardTabsItemView>
-                            );
-                        }) }
-                    </NitroCardTabsView>
-                    <NitroCardContentView>
-                        <Grid>
-                            { !navigationHidden &&
-                                <Column overflow="hidden" size={ 3 }>
-                                    { activeNodes && (activeNodes.length > 0) &&
-                                        <CatalogNavigationView node={ activeNodes[0] } /> }
-                                </Column> }
-                            <Column overflow="hidden" size={ !navigationHidden ? 9 : 12 }>
-                                { GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
-                            </Column>
-                        </Grid>
-                    </NitroCardContentView>
-                </NitroCardView> }
-            <CatalogGiftView />
-            <MarketplacePostOfferView />
-        </>
-    );
+    return <CatalogClassicView />;
 };