Merge branch '@feature/catalog-changes' into '@fix/fixes'

tab icons, navigation indent, catalog headers

See merge request nitro/nitro-react!65

public/ui-config.json.example

@@ -125,6 +125,8 @@
     "catalog.asset.url": "${image.library.url}catalogue",
     "catalog.asset.image.url": "${catalog.asset.url}/%name%.gif",
     "catalog.asset.icon.url": "${catalog.asset.url}/icon_%name%.png",
+    "catalog.tab.icons": false,
+    "catalog.headers": false,
     "chat.input.maxlength": 100,
     "chat.styles.disabled": [],
     "chat.styles": [

src/components/catalog/CatalogView.scss

@@ -2,7 +2,7 @@
     width: $catalog-width;
     height: $catalog-height;
 
-    font[size='16'] {
+    font[size="16"] {
         font-size: 20px;
     }
 
@@ -22,7 +22,7 @@
 
 .nitro-catalog-gift {
     width: 325px;
-    
+
     .gift-preview {
         width: 80px;
         height: 80px;
@@ -37,15 +37,24 @@
 }
 
 .nitro-catalog-navigation-grid-container {
-    border-color: #B6BEC5 !important;
+    border-color: #b6bec5 !important;
-    background-color: #CDD3D9;
+    background-color: #cdd3d9;
     border: 2px solid;
 
+    .nitro-catalog-navigation-section {
+        display: grid;
+
+        .nitro-catalog-navigation-section {
+            padding-left: 5px;
+            border-left: 2px solid #b6bec5;
+        }
+    }
+
     .layout-grid-item {
         font-size: $font-size-sm;
         height: 23px !important;
         border-color: unset !important;
-        background-color: #CDD3D9;
+        background-color: #cdd3d9;
         border: 0 !important;
         padding: 1px 3px;
 
@@ -58,23 +67,21 @@
 }
 
 .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');
+        background-image: url("../../assets/images/catalog/diamond_info_illustration.gif");
-        padding-right:123px;
+        padding-right: 123px;
     }
 
     .info-image {
         width: 123px;
-        height:350px;
+        height: 350px;
-        background-image: url('../../assets/images/catalog/diamond_info_illustration.gif');
+        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;
@@ -82,20 +89,19 @@
         .icon-hc-banner {
             width: 68px;
             height: 40px;
-            background: url('../../assets/images/catalog/hc_big.png') center no-repeat;
+            background: url("../../assets/images/catalog/hc_big.png") center
+                no-repeat;
         }
     }
 }
 
 .nitro-catalog-layout-marketplace-grid {
-
     .layout-grid-item {
         height: 75px !important;
     }
 }
 
 .nitro-catalog-layout-vip-gifts-grid {
-
     .layout-grid-item {
         height: 55px !important;
         max-height: 55px !important;
@@ -108,8 +114,18 @@
 }
 
 .nitro-catalog-layout-bundle-grid {
-
     .layout-grid-item {
         background-color: transparent;
     }
 }
+
+.nitro-catalog-header {
+    width: 290px;
+    height: 60px;
+    align-self: center;
+
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+}

src/components/catalog/CatalogView.tsx

@@ -1,8 +1,9 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
-import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../api';
+import { AddEventLinkTracker, GetConfiguration, LocalizeText, RemoveLinkEventTracker } from '../../api';
-import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { Column, Flex, 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';
@@ -10,7 +11,7 @@ import { MarketplacePostOfferView } from './views/page/layout/marketplace/Market
 
 export const CatalogView: FC<{}> = props =>
 {
-    const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null } = useCatalog();
+    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();
 
     useEffect(() =>
     {
@@ -68,7 +69,7 @@ export const CatalogView: FC<{}> = props =>
     return (
         <>
             { isVisible &&
-                <NitroCardView uniqueKey="catalog" className="nitro-catalog">
+                <NitroCardView uniqueKey="catalog" className="nitro-catalog" style={ { width: GetConfiguration('catalog.headers') ? '710px' : '' } }>
                     <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
                         { rootNode && (rootNode.children.length > 0) && rootNode.children.map(child =>
@@ -81,8 +82,11 @@ export const CatalogView: FC<{}> = props =>
                                     if(searchResult) setSearchResult(null);
 
                                     activateNode(child);
-                                } }>
+                                } } >
-                                    { child.localization }
+                                    <Flex gap={ GetConfiguration('catalog.tab.icons') ? 1 : 0 } alignItems="center">
+                                        { GetConfiguration('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> }
+                                        { child.localization }
+                                    </Flex>
                                 </NitroCardTabsItemView>
                             );
                         }) }

src/components/catalog/views/catalog-header/CatalogHeaderView.tsx

@@ -0,0 +1,33 @@
+import { FC, useEffect, useMemo, useRef } from 'react';
+import { GetConfiguration } from '../../../../api';
+import { Base } from '../../../../common';
+
+export interface CatalogHeaderViewProps
+{
+    image?: string;
+}
+
+export const CatalogHeaderView: FC<CatalogHeaderViewProps> = props =>
+{
+    let { image = null } = props;
+
+    const imageEl = useRef<HTMLImageElement>();
+
+    const fallback = useMemo(()=>
+    {
+        return ((GetConfiguration<string>('catalog.asset.image.url')).replace('%name%', 'catalog_header_roombuilder'));
+    },[])
+
+    useEffect(()=> 
+    {
+        if(image == null && imageEl !== null) imageEl.current.src = fallback;
+    },[ image, imageEl,fallback ])
+
+    return <Base className="nitro-catalog-header">
+        <img ref={ imageEl } src={ image } onError={ ({ currentTarget }) => 
+        {
+            currentTarget.src = fallback;
+        }
+        } />
+    </Base>;
+}

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

@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
 import { ICatalogNode } from '../../../../api';
-import { LayoutGridItem, Text } from '../../../../common';
+import { Base, LayoutGridItem, Text } from '../../../../common';
 import { useCatalog } from '../../../../hooks';
 import { CatalogIconView } from '../catalog-icon/CatalogIconView';
 import { CatalogNavigationSetView } from './CatalogNavigationSetView';
@@ -9,23 +9,24 @@ import { CatalogNavigationSetView } from './CatalogNavigationSetView';
 export interface CatalogNavigationItemViewProps
 {
     node: ICatalogNode;
+    child?: boolean;
 }
 
 export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = props =>
 {
-    const { node = null } = props;
+    const { node = null, child = false } = props;
     const { activateNode = null } = useCatalog();
     
     return (
-        <>
+        <Base className="nitro-catalog-navigation-section">
-            <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
+            <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) } className={ child ? 'inset' : '' }>
                 <CatalogIconView icon={ node.iconId } />
                 <Text grow truncate>{ node.localization }</Text>
                 { node.isBranch &&
                     <FontAwesomeIcon icon={ node.isOpen ? 'caret-up' : 'caret-down' } /> }
             </LayoutGridItem>
             { node.isOpen && node.isBranch &&
-                <CatalogNavigationSetView node={ node } /> }
+                <CatalogNavigationSetView node={ node } child={ true } /> }
-        </>
+        </Base>
     );
 }

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

@@ -5,11 +5,12 @@ import { CatalogNavigationItemView } from './CatalogNavigationItemView';
 export interface CatalogNavigationSetViewProps
 {
     node: ICatalogNode;
+    child?: boolean;
 }
 
 export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props =>
 {
-    const { node = null } = props;
+    const { node = null, child = false } = props;
     
     return (
         <>
@@ -17,7 +18,7 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
             {
                 if(!n.isVisible) return null;
                     
-                return <CatalogNavigationItemView key={ index } node={ n } />
+                return <CatalogNavigationItemView key={ index } node={ n } child={ child } />
             }) }
         </>
     );

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

@@ -1,7 +1,8 @@
 import { FC } from 'react';
-import { ProductTypeEnum } from '../../../../../api';
+import { GetConfiguration, ProductTypeEnum } from '../../../../../api';
 import { Column, Flex, Grid, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
+import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
 import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
 import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView';
@@ -14,20 +15,22 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
 export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
 {
     const { page = null } = props;
-    const { currentOffer = null } = useCatalog();
+    const { currentOffer = null,currentPage } = useCatalog();
 
     return (
-        <Grid>
+        <>
-            <Column size={ 7 } overflow="hidden">
+            <Grid>
-                <CatalogItemGridWidgetView />
+                <Column size={ 7 } overflow="hidden">
-            </Column>
+                    { GetConfiguration('catalog.headers') && <CatalogHeaderView image={ currentPage.localization.getImage(0) }/> }
-            <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+                    <CatalogItemGridWidgetView />
-                { !currentOffer &&
+                </Column>
+                <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+                    { !currentOffer &&
                     <>
                         { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
                         <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
                     </> }
-                { currentOffer &&
+                    { currentOffer &&
                     <>
                         <Flex center overflow="hidden" style={ { height: 140 } }>
                             { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
@@ -49,7 +52,8 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                             <CatalogPurchaseWidgetView />
                         </Column>
                     </> }
-            </Column>
+                </Column>
-        </Grid>
+            </Grid>
+        </>
     );
 }