catalogue layout changes

src/assets/styles/scrollbars.scss

@@ -7,12 +7,13 @@
     border-radius: $border-radius;
     background: rgba($primary,.4);
     box-shadow:inset 1px 0 rgba($black,.2);
+    padding-top:3px;
 }
 
 ::-webkit-scrollbar-thumb {
     border-radius: $border-radius;
     background: #DCDCDC;
-    box-shadow:inset 1px 4px $white, inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
+    box-shadow:inset 0px 4px $white, inset 0px -4px rgba($black,.2), 0 1px rgba($black,.2);
     width: 4px;
 }
 

src/views/catalog/CatalogMessageHandler.tsx

@@ -31,6 +31,8 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
     {
         const parser = event.getParser();
 
+        console.log(parser)
+
         dispatchCatalogState({
             type: CatalogActions.SET_CATALOG_PAGE_PARSER,
             payload: {

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

@@ -6,3 +6,4 @@
 @import './spaces-new/CatalogLayoutSpacesView';
 @import './trophies/CatalogLayoutTrophiesView';
 @import './vip-buy/CatalogLayoutVipBuyView';
+@import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss';

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

@@ -1,7 +1,9 @@
 import { ICatalogPageParser, RoomPreviewer } from 'nitro-renderer';
 import { CatalogLayoutDefaultView } from './default/CatalogLayoutDefaultView';
 import { CatalogLayoutFrontpage4View } from './frontpage4/CatalogLayoutFrontpage4View';
+import { CatalogLayoutInfoLoyaltyView } from './info-loyalty/CatalogLayoutInfoLoyaltyView';
 import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView';
+import { CatalogLayoutPets2View } from './pets2/CatalogLayoutPets2View';
 import { CatalogLayoutPets3View } from './pets3/CatalogLayoutPets3View';
 import { CatalogLayoutSingleBundleView } from './single-bundle/CatalogLayoutSingleBundleView';
 import { CatalogLayoutSpacesView } from './spaces-new/CatalogLayoutSpacesView';
@@ -10,16 +12,17 @@ import { CatalogLayoutVipBuyView } from './vip-buy/CatalogLayoutVipBuyView';
 
 export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer: RoomPreviewer): JSX.Element
 {
+
     switch(pageParser.layoutCode)
     {
         case 'frontpage_featured':
-            return null;
+            return null
         case 'frontpage4':
             return <CatalogLayoutFrontpage4View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'pets':
             return <CatalogLayoutPetView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'pets2':
-            return null;
+            return <CatalogLayoutPets2View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'pets3':
             return <CatalogLayoutPets3View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'vip_buy':
@@ -41,7 +44,9 @@ export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer:
         case 'spaces_new':
             return <CatalogLayoutSpacesView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'trophies':
-            return <CatalogLayoutTrophiesView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
+            return <CatalogLayoutTrophiesView roomPreviewer={roomPreviewer} pageParser={pageParser} />;
+        case 'info_loyalty':
+            return <CatalogLayoutInfoLoyaltyView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'bots':
         case 'default_3x3':
         default:

src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss

@@ -0,0 +1,15 @@
+.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');
+    }
+}

src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { GetCatalogPageText } from '../../../../utils/CatalogUtilities';
+import { CatalogLayoutInfoLoyaltyViewProps } from './CatalogLayoutInfoLoyaltyView.types';
+
+export const CatalogLayoutInfoLoyaltyView: FC<CatalogLayoutInfoLoyaltyViewProps> = props =>
+{
+    const { pageParser = null } = props;
+    
+    return (
+        <div className="h-100 nitro-catalog-layout-info-loyalty text-black d-flex flex-row">
+            <div className="overflow-auto h-100 d-flex flex-column info-loyalty-content">
+                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 0) } } />
+            </div>
+        </div>
+    );
+}

src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts

@@ -0,0 +1,6 @@
+import { CatalogLayoutProps } from '../CatalogLayout.types';
+
+export interface CatalogLayoutInfoLoyaltyViewProps extends CatalogLayoutProps
+{
+    
+}

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

@@ -141,8 +141,8 @@ export const CatalogLayoutPetView: FC<CatalogLayoutPetViewProps> = props =>
 
     return (
         <div className="row h-100 nitro-catalog-layout-pets">
-            <div className="col-7">
+            <div className="col-7 h-100">
-                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container">
+                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 h-100 overflow-auto catalog-offers-container single-bundle-items-container">
                     { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) =>
                         {
                             return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">

src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss

@@ -0,0 +1,2 @@
+.nitro-catalog-layout-pets2 {
+}

src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { GetCatalogPageImage, GetCatalogPageText } from '../../../../utils/CatalogUtilities';
+import { CatalogLayoutPets2ViewProps } from './CatalogLayoutPets2View.types';
+
+export const CatalogLayoutPets2View: FC<CatalogLayoutPets2ViewProps> = props =>
+{
+    const { pageParser = null } = props;
+    
+    return (
+        <div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
+            <div className="overflow-auto h-100 d-flex flex-column">
+                <div className="d-flex flex-row">
+                    <div className="d-block mb-1 me-1">
+                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
+                    </div>
+                    <h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
+                </div>
+                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
+                {GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
+            </div>
+        </div>
+    );
+}

src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts

@@ -0,0 +1,6 @@
+import { CatalogLayoutProps } from '../CatalogLayout.types';
+
+export interface CatalogLayoutPets2ViewProps extends CatalogLayoutProps
+{
+    
+}

src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx

@@ -7,17 +7,16 @@ export const CatalogLayoutPets3View: FC<CatalogLayoutPets3ViewProps> = props =>
     const { pageParser = null } = props;
     
     return (
-        <div className="row h-100 nitro-catalog-layout-pets3">
+        <div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
-            <div className="col-7 text-black">
+            <div className="overflow-auto h-100 d-flex flex-column">
-                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 1) } } />
+                <div className="d-flex flex-row">
-                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
+                    <div className="d-block mb-1 me-1">
-                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 3) } } />
+                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-            </div>
+                    </div>
-            <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
+                    <h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
-                <div className="d-block mb-2">
-                    <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
                 </div>
-                <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
+                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
+                {GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
             </div>
         </div>
     );

src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx

@@ -13,8 +13,8 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
 
     return (
         <div className="row h-100 nitro-catalog-layout-single-bundle">
-            <div className="col-7">
+            <div className="col-7 h-100">
-                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container">
+                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container h-100 overflow-auto">
                     { activeOffer && activeOffer.products && (activeOffer.products.length > 0) && activeOffer.products.map((product, index) =>
                         {
                             return <CatalogProductView key={ index } isActive={ false } product={ product } />

src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss

@@ -1,7 +1,3 @@
 .nitro-catalog-layout-spaces {
 
-    .catalog-offers-container {
-        height: 284px;
-        max-height: 284px;
-    }
 }

src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx

@@ -70,7 +70,7 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =
 
     return (
         <div className="row h-100 nitro-catalog-layout-spaces">
-            <div className="col-7">
+            <div className="col-7 h-100 d-flex flex-column">
                 <div className="d-flex">
                     <div className="btn-group mx-auto mb-1 w-100">
                         { groupNames.map((name, index) =>

src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss

@@ -5,8 +5,4 @@
         resize: none;
     }
 
-    .catalog-offers-container {
-        height: 192px;
-        max-height: 192px;
-    }
 }

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

@@ -17,7 +17,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutTrophiesViewProps> = pro
 
     return (
         <div className="row h-100 nitro-catalog-layout-trophies">
-            <div className="d-flex flex-column col-7">
+            <div className="d-flex flex-column col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
                 <div className="d-flex mt-2">
                     <textarea className="form-control w-100" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) }></textarea>

src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx

@@ -54,8 +54,8 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
 
     return (
         <div className="row h-100 nitro-catalog-layout-vip-buy">
-            <div className="col-7">
+            <div className="col-7 h-100">
-                <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container">
+                <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
                     { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
                         {
                             return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">

src/views/catalog/views/page/offers/CatalogPageOffersView.tsx

@@ -22,10 +22,22 @@ export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
     }, [ offers, dispatchCatalogState ]);
 
     return (
-        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100">
+        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
+            })}
+                        { offers && (offers.length > 0) && offers.map((offer, index) =>
+                {
+                    return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
+                        })}
+                        { offers && (offers.length > 0) && offers.map((offer, index) =>
+                {
+                    return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
+                        })}
+                        { offers && (offers.length > 0) && offers.map((offer, index) =>
+                {
+                    return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
                 }) }
         </div>
     );