Merge branch 'feature/messenger' into dev

craco.config.js

@@ -5,6 +5,23 @@ module.exports = {
     webpack: {
         configure: (webpackConfig) => ({
             ...webpackConfig,
+            optimization: {
+                ...webpackConfig.optimization,
+                splitChunks: {
+                    cacheGroups: {
+                        vendor: {
+                            name: 'vendors',
+                            test: /[\\/]node_modules[\\/]/,
+                            chunks: 'all',
+                        },
+                        renderer: {
+                            name: 'renderer',
+                            test: /[\\/]node_modules[\\/]@nitrots[\\/]nitro-renderer[\\/]/,
+                            chunks: 'all',
+                        }
+                    }
+                }
+            },
             module: {
                 ...webpackConfig.module,
                 rules: webpackConfig.module.rules.map((rule) => 

src/App.scss

@@ -17,6 +17,21 @@ $grid-active-border-color: $white;
 
 $toolbar-height: 55px;
 
+$achievement-width: 650px;
+$achievement-height: 400px;
+
+$avatar-editor-width: 620px;
+$avatar-editor-height: 374px;
+
+$catalog-width: 620px;
+$catalog-height: 400px;
+
+$inventory-width: 528px;
+$inventory-height: 320px;
+
+$navigator-width: 400px;
+$navigator-height: 420px;
+
 .nitro-app {
     width: 100%;
     height: 100%;

src/App.tsx

@@ -125,7 +125,7 @@ export const App: FC<{}> = props =>
     }
     
     return (
-        <div className="nitro-app">
+        <div className="nitro-app overflow-hidden">
             <div id="nitro-alerts-container" />
             { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) } timeout={ 300 }>

src/api/friends/OpenMessengerChat.ts

@@ -0,0 +1,7 @@
+import { CreateLinkEvent } from '..';
+
+export function OpenMessengerChat(friendId: number = -1): void
+{
+    if(friendId === -1) CreateLinkEvent('friends/messenger/open');
+    else CreateLinkEvent(`friends/messenger/${friendId}`);
+}

src/api/friends/index.ts

@@ -0,0 +1 @@
+export * from './OpenMessengerChat';

src/api/index.ts

@@ -1,4 +1,5 @@
 export * from './core';
+export * from './friends';
 export * from './groups';
 export * from './navigator';
 export * from './nitro';

src/api/nitro/room/DispatchMouseEvent.ts

@@ -47,6 +47,8 @@ export function DispatchMouseEvent(roomId: number, canvasId: number, event: Mous
             break;
         case MouseEventType.MOUSE_UP:
             break;
+        case MouseEventType.RIGHT_CLICK:
+            break;
         default: return;
     }
 

src/api/nitro/room/widgets/events/RoomWidgetUpdateDecorateModeEvent.ts

@@ -0,0 +1,20 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateDecorateModeEvent extends RoomWidgetUpdateEvent
+{
+    public static UPDATE_DECORATE: string = 'RWUDME_UPDATE_DECORATE';
+
+    private _isDecorating: boolean;
+
+    constructor(isDecorating: boolean)
+    {
+        super(RoomWidgetUpdateDecorateModeEvent.UPDATE_DECORATE);
+
+        this._isDecorating = isDecorating;
+    }
+
+    public get isDecorating(): boolean
+    {
+        return this._isDecorating;
+    }
+}

src/api/nitro/room/widgets/events/index.ts

@@ -14,6 +14,7 @@ export * from './RoomWidgetUpdateChatInputContentEvent';
 export * from './RoomWidgetUpdateCreditFurniEvent';
 export * from './RoomWidgetUpdateCustomStackHeightEvent';
 export * from './RoomWidgetUpdateDanceStatusEvent';
+export * from './RoomWidgetUpdateDecorateModeEvent';
 export * from './RoomWidgetUpdateDimmerEvent';
 export * from './RoomWidgetUpdateDimmerStateEvent';
 export * from './RoomWidgetUpdateEvent';

src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts

@@ -1,7 +1,7 @@
 import { IFurnitureData, NitroEvent, ObjectDataFactory, PetFigureData, PetRespectComposer, PetSupplementComposer, PetType, RoomControllerLevel, RoomModerationSettings, RoomObjectCategory, RoomObjectOperationType, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionUserBadgesEvent, RoomTradingLevelEnum, RoomUnitDropHandItemComposer, RoomUnitGiveHandItemComposer, RoomUnitGiveHandItemPetComposer, RoomUserData, RoomWidgetEnum, RoomWidgetEnumItemExtradataParameter, Vector3d } from '@nitrots/nitro-renderer';
 import { GetNitroInstance, GetRoomEngine, GetSessionDataManager, IsOwnerOfFurniture } from '../../../..';
 import { InventoryTradeRequestEvent, WiredSelectObjectEvent } from '../../../../../events';
-import { FriendListSendFriendRequestEvent } from '../../../../../events/friend-list/FriendListSendFriendRequestEvent';
+import { FriendsSendFriendRequestEvent } from '../../../../../events/friends/FriendsSendFriendRequestEvent';
 import { dispatchUiEvent } from '../../../../../hooks/events';
 import { SendMessageHook } from '../../../../../hooks/messages';
 import { PetSupplementEnum } from '../../../../../views/room/widgets/avatar-info/common/PetSupplementEnum';
@@ -76,7 +76,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
             case RoomWidgetRoomObjectMessage.GET_OBJECT_INFO:
                 return this.processObjectInfoMessage((message as RoomWidgetRoomObjectMessage));
             case RoomWidgetUserActionMessage.SEND_FRIEND_REQUEST:
-                dispatchUiEvent(new FriendListSendFriendRequestEvent(userId));
+                dispatchUiEvent(new FriendsSendFriendRequestEvent(userId));
                 break;
             case RoomWidgetUserActionMessage.RESPECT_USER:
                 GetSessionDataManager().giveRespect(userId);

src/assets/styles/bootstrap/_utilities.scss

@@ -42,6 +42,14 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (

src/assets/styles/bootstrap/_variables.scss

@@ -85,6 +85,7 @@ $ghost:         #c8cad0 !default;
 $gray-chateau:  #a3a7b1 !default;
 $gable-green:   #1C323F !default;
 $william:       #3d5f6e !default;
+$bluewood:      #304059 !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;
@@ -385,7 +386,7 @@ $enable-transitions:          true !default;
 $enable-reduced-motion:       true !default;
 $enable-smooth-scroll:        true !default;
 $enable-grid-classes:         true !default;
-$enable-cssgrid:              false !default;
+$enable-cssgrid:              true !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;

src/assets/styles/grid.scss

@@ -1,44 +0,0 @@
-$grid-options: (
-    "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
-);
-
-.grid-items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: flex-start;
-    width: 100%;
-    margin-top: -3px;
-    overflow: hidden;
-
-    @each $option in $grid-options {
-        &.grid-#{$option} {
-            .grid-item {
-                width: calc(1 / #{$option} * 100% - (1 - 1 / #{$option}) * 3px);
-
-                &:nth-child(#{$option}n) {
-                    margin-right: 0;
-                }
-            }
-        }
-    }
-}
-
-.row-grid {
-    margin: 0 !important;
-    
-    .col {
-        padding: 0 !important;
-    }
-}
-
-@each $option in $grid-options {
-    .row-grid {
-        &.row-cols-#{$option} {
-            .col:nth-child(#{$option}n) {
-                padding-left: 10px !important;
-            }
-        }
-    }
-}

src/assets/styles/icons.scss

@@ -693,6 +693,18 @@
         height: 16px;
     }
 
+    &.icon-friendlist-warning {
+        background: url('../images/friendlist/icons/icon_warning.png');
+        width: 23px;
+        height: 21px;
+    }
+
+    &.icon-friendlist-new-message {
+        background: url('../images/friendlist/icons/icon_new_message.png');
+        width: 14px;
+        height: 16px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }

src/assets/styles/index.scss

@@ -7,7 +7,6 @@
 @import '../node_modules/animate.css/animate.min.css';
 @import './scrollbars';
 @import './slider';
-@import './grid';
 @import './icons';
 @import './utils';
 
@@ -15,6 +14,10 @@
     min-height: 28px;
 }
 
+textarea {
+  resize: none;
+}
+
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {

src/assets/styles/scrollbars.scss

@@ -1,22 +1,53 @@
 ::-webkit-scrollbar {
     width: 0.5rem;
-    height: 0.5rem;
+
+    &:horizontal {
+        height: 0.5rem;
+    }
+
+    &:not(:horizontal) {
+        width: 0.5rem;
+    }
 }
 
 ::-webkit-scrollbar-track {
-    background-clip: padding-box;
-    border-right: 0.25rem solid rgba($black, .1);
+
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($black, .1);
+    }
+
+    &:not(:horizontal) {
+        border-right: 0.25rem solid rgba($black, .1);
+    }
 }
 
 ::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    border-right: 0.25rem solid rgba($primary, .4);
 
-    &:hover {
-        border-right: 0.25rem solid rgba($primary, .8);
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-bottom: 0.25rem solid rgba($primary, .8);
+        }
+    
+        &:active {
+            border-bottom: 0.25rem solid $secondary;
+        }
     }
 
-    &:active {
-        border-right: 0.25rem solid $secondary;
+    &:not(:horizontal) {
+        border-right: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-right: 0.25rem solid rgba($primary, .8);
+        }
+
+        &:active {
+            border-right: 0.25rem solid $secondary;
+        }
     }
 }
+
+::-webkit-scrollbar-corner {
+    background: rgba($black, .1);
+}

src/assets/styles/utils.scss

@@ -10,6 +10,14 @@
     transform: scale(1) translateZ(0);
 }
 
+.scale-1-25 {
+    transform: scale(1.25) translateZ(0);
+}
+
+.scale-1-50 {
+    transform: scale(1.50) translateZ(0);
+}
+
 .scale-2 {
     transform: scale(2) translateZ(0);
 }

src/events/friend-list/index.ts

@@ -1,2 +0,0 @@
-export * from './FriendEnteredRoomEvent';
-export * from './FriendListEvent';

src/events/friends/FriendListContentEvent.ts

@@ -1,7 +1,7 @@
 import { MessengerFriend } from '../../views/friends/common/MessengerFriend';
-import { FriendListEvent } from './FriendListEvent';
+import { FriendsEvent } from './FriendsEvent';
 
-export class FriendListContentEvent extends FriendListEvent
+export class FriendListContentEvent extends FriendsEvent
 {
     public static FRIEND_LIST_CONTENT: string = 'FLSFRE_FRIEND_LIST_CONTENT';
 

src/events/friends/FriendsEvent.ts

@@ -1,8 +1,10 @@
 import { NitroEvent } from '@nitrots/nitro-renderer';
 
-export class FriendListEvent extends NitroEvent
+export class FriendsEvent extends NitroEvent
 {
     public static SHOW_FRIEND_LIST: string = 'IE_SHOW_FRIEND_LIST';
     public static TOGGLE_FRIEND_LIST: string = 'IE_TOGGLE_FRIEND_LIST';
+    public static SHOW_FRIEND_MESSENGER: string = 'IE_SHOW_FRIEND_MESSENGER';
+    public static TOGGLE_FRIEND_MESSENGER: string = 'IE_TOGGLE_FRIEND_MESSENGER';
     public static REQUEST_FRIEND_LIST: string = 'FLSFRE_REQUEST_FRIEND_LIST';
 }

src/events/friends/FriendsMessengerIconEvent.ts

@@ -0,0 +1,23 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class FriendsMessengerIconEvent extends NitroEvent
+{
+    public static UPDATE_ICON: string = 'FMIE_UPDATE_ICON';
+    public static HIDE_ICON: number = 0;
+    public static SHOW_ICON: number = 1;
+    public static UNREAD_ICON: number = 2;
+
+    private _iconType: number;
+
+    constructor(type: string, subType: number = FriendsMessengerIconEvent.SHOW_ICON)
+    {
+        super(type);
+
+        this._iconType = subType;
+    }
+
+    public get iconType(): number
+    {
+        return this._iconType;
+    }
+}

src/events/friends/FriendsSendFriendRequestEvent.ts

@@ -1,6 +1,6 @@
-import { FriendListEvent } from './FriendListEvent';
+import { FriendsEvent } from './FriendsEvent';
 
-export class FriendListSendFriendRequestEvent extends FriendListEvent
+export class FriendsSendFriendRequestEvent extends FriendsEvent
 {
     public static SEND_FRIEND_REQUEST: string = 'FLSFRE_SEND_FRIEND_REQUEST';
 
@@ -8,7 +8,7 @@ export class FriendListSendFriendRequestEvent extends FriendListEvent
 
     constructor(userId: number)
     {
-        super(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST);
+        super(FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST);
 
         this._userId = userId;
     }

src/events/friends/index.ts

@@ -0,0 +1,5 @@
+export * from './FriendEnteredRoomEvent';
+export * from './FriendListContentEvent';
+export * from './FriendsEvent';
+export * from './FriendsMessengerIconEvent';
+export * from './FriendsSendFriendRequestEvent';

src/events/index.ts

@@ -1,7 +1,7 @@
 export * from './avatar-editor';
 export * from './camera';
 export * from './catalog';
-export * from './friend-list';
+export * from './friends';
 export * from './inventory';
 export * from './navigator';
 export * from './notification-center';

src/index.scss

@@ -14,4 +14,8 @@ body {
     image-rendering: -moz-crisp-edges;
 }
 
+img {
+    object-fit: none;
+}
+
 @import './App';

src/layout/base/NitroLayoutBase.tsx

@@ -0,0 +1,28 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBaseProps } from './NitroLayoutBase.types';
+
+export const NitroLayoutBase: FC<NitroLayoutBaseProps> = props =>
+{
+    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = '';
+
+        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
+
+        if(position && position.length) newClassName += ` position-${ position }`;
+
+        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, overflow, position, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}

src/layout/base/NitroLayoutBase.types.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutBaseProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>
+{
+    overflow?: NitroLayoutOverflow;
+    position?: NitroLayoutPosition;
+    gap?: NitroLayoutSpacing;
+}

src/layout/base/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutBase';
+export * from './NitroLayoutBase.types';

src/layout/button/NitroLayoutButton.tsx

@@ -0,0 +1,26 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutButtonProps } from './NitroLayoutButton.types';
+
+export const NitroLayoutButton: FC<NitroLayoutButtonProps> = props =>
+{
+    const { className = '', variant = 'primary', size = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'btn';
+
+        if(variant && variant.length) newClassName += ` btn-${ variant }`;
+
+        if(size && size.length) newClassName += ` btn-${ size }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, variant, size ]);
+
+    return (
+        <button type="button" className={ getClassName } { ...rest }>
+            { children }
+        </button>
+    );
+}

src/layout/button/NitroLayoutButton.types.ts

@@ -0,0 +1,8 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { NitroLayoutButtonSize, NitroLayoutVariant } from '../common';
+
+export interface NitroLayoutButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+{
+    variant?: NitroLayoutVariant;
+    size?: NitroLayoutButtonSize;
+}

src/layout/button/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutButton';
+export * from './NitroLayoutButton.types';

src/layout/card/NitroCardView.scss

@@ -3,6 +3,7 @@ $nitro-card-tabs-height: 33px;
 
 .nitro-card {
     pointer-events: all;
+    resize: both;
 
     @import './accordion/NitroCardAccordionView';
     @import './content/NitroCardContentView';
@@ -19,6 +20,10 @@ $nitro-card-tabs-height: 33px;
     height: 100%;
     pointer-events: none;
 
+    .theme-primary {
+        border: $border-width solid $border-color;
+    }
+
     @include media-breakpoint-down(lg) {
         
         .draggable-window {
@@ -31,12 +36,13 @@ $nitro-card-tabs-height: 33px;
         }
     
         .nitro-card {
-            width: 100%;
-            height: 100%;
+            max-width: 75%;
+            max-height: calc(100% - 20px);
+            margin: 10px auto 10px;
     
-            &.rounded {
-                border-radius: 0 !important;
-            }
+            // &.rounded {
+            //     border-radius: 0 !important;
+            // }
         }
     }
 }

src/layout/card/NitroCardView.tsx

@@ -11,7 +11,7 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
         <NitroCardContextProvider value={ { theme, simple } }>
             <div className="nitro-card-responsive">
                 <DraggableWindow { ...rest }>
-                    <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
+                    <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className}` }>
                         { children }
                     </div>
                 </DraggableWindow>

src/layout/card/content/NitroCardContentView.scss

@@ -1,4 +1,5 @@
 .content-area {
+    height: 100%;
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
     overflow: auto;
@@ -9,6 +10,5 @@
         height: 100% !important;
         min-height: auto !important;
         max-height: 100% !important;
-        resize: none !important;
     }
 }

src/layout/card/content/NitroCardContentView.tsx

@@ -8,7 +8,7 @@ export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid bg-light content-area ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );

src/layout/card/grid/NitroCardGridView.scss

@@ -1,71 +1,6 @@
-.nitro-card-grid {
-    width: 100%;
-
-    .row-cols-3 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(3n+3) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-4 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(4n+4) {
-                padding-right: 0;
-            }
-        }
-    }
-    
-    .row-cols-5 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(5n+5) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-6 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(6n+6) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-7 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(7n+7) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-8 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(8n+8) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    @import './item/NitroCardGridItemView.scss';
+.nitro-grid {
+    --nitro-grid-column-min-width: 45px;
+    grid-template-columns: repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr));
 }
+
+@import './item/NitroCardGridItemView.scss';

src/layout/card/grid/NitroCardGridView.tsx

@@ -1,18 +1,31 @@
-import { FC } from 'react';
-import { NitroCardGridContextProvider } from './context/NitroCardGridContext';
-import { NitroCardGridThemes, NitroCardGridViewProps } from './NitroCardGridView.types';
+import { FC, useMemo } from 'react';
+import { NitroCardGridViewProps } from './NitroCardGridView.types';
 
 export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 {
-    const { columns = 5, theme = NitroCardGridThemes.THEME_DEFAULT, className = '', children = null, ...rest } = props;
+    const { columns = 5, gap = 2, className = '', style = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = `grid gap-${ gap } nitro-grid overflow-auto`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, gap ]);
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        //newStyle['--bs-columns'] = columns.toString();
+
+        return newStyle;
+    }, [ style, columns ]);
 
     return (
-        <NitroCardGridContextProvider value={ { theme } }>
-            <div className={ `h-100 overflow-hidden nitro-card-grid ${ theme } ${ className || '' }` } { ...rest }>
-                <div className={ `row row-cols-${ columns } align-content-start g-0 w-100 h-100 overflow-auto` }>
-                    { children }
-                </div>
-            </div>
-        </NitroCardGridContextProvider>
+        <div className={ getClassName } style={ getStyle } { ...rest }>
+            { children }
+        </div>
     );
 }

src/layout/card/grid/NitroCardGridView.types.ts

@@ -3,11 +3,5 @@ import { DetailsHTMLAttributes } from 'react';
 export interface NitroCardGridViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     columns?: number;
-    theme?: string;
-}
-
-export class NitroCardGridThemes
-{
-    public static THEME_DEFAULT: string = 'theme-default';
-    public static THEME_SHADOWED: string = 'theme-shadowed';
+    gap?: number;
 }

src/layout/card/grid/context/NitroCardGridContext.tsx

@@ -1,13 +0,0 @@
-import { createContext, FC, useContext } from 'react';
-import { INitroCardGridContext, NitroCardGridContextProps } from './NitroCardGridContext.types';
-
-const NitroCardGridContext = createContext<INitroCardGridContext>({
-    theme: null
-});
-
-export const NitroCardGridContextProvider: FC<NitroCardGridContextProps> = props =>
-{
-    return <NitroCardGridContext.Provider value={ props.value }>{ props.children }</NitroCardGridContext.Provider>
-}
-
-export const useNitroCardGridContext = () => useContext(NitroCardGridContext);

src/layout/card/grid/context/NitroCardGridContext.types.ts

@@ -1,11 +0,0 @@
-import { ProviderProps } from 'react';
-
-export interface INitroCardGridContext
-{
-    theme: string;
-}
-
-export interface NitroCardGridContextProps extends ProviderProps<INitroCardGridContext>
-{
-
-}

src/layout/card/grid/context/index.ts

@@ -1,2 +0,0 @@
-export * from './NitroCardGridContext';
-export * from './NitroCardGridContext.types';

src/layout/card/grid/index.ts

@@ -1,4 +1,3 @@
-export * from './context';
 export * from './item';
 export * from './NitroCardGridView';
 export * from './NitroCardGridView.types';

src/layout/card/grid/item/NitroCardGridItemView.scss

@@ -1,86 +1,48 @@
-.grid-item-container {
+.grid-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     height: 50px;
     max-height: 50px;
+    width: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: $border-radius;
+    border-color: $grid-border-color !important;
+    background-color: $grid-bg-color;
+    border: nth(map-values($border-widths), 2) solid;
 
-    .grid-item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        background-position: center;
-        background-repeat: no-repeat;
-        overflow: hidden;
+    &.active {
+        border-color: $grid-active-border-color !important;
+        background-color: $grid-active-bg-color !important;
+    }
 
-        &.theme-default {
-            border-radius: $border-radius;
-            border-color: $grid-border-color !important;
-            background-color: $grid-bg-color;
-            border: nth(map-values($border-widths), 2) solid;
-        }
+    &.unseen {
+        background-color: rgba($success, 0.4);
+    }
 
-        &.theme-shadowed {
-            border-radius: $border-radius;
-            background-color: $light;
+    .badge {
+        top: 2px;
+        right: 2px;
+        font-size: 8px;
+    }
 
-            &::after {
-                position: absolute;
-                content: '';
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                border-radius: $border-radius;
-                border-bottom: 2px solid white;
-                border-right: 2px solid white;
-                box-shadow: -2px -2px rgba(0, 0, 0, .4), inset 3px 3px rgba(0, 0, 0, .2);
-            }
+    .avatar-image {
+        background-position-y: 10px;
+    }
 
-            &.active {
-                border: nth(map-values($border-widths), 2) solid;
-                border-color: $oslo-gray !important;
-                background-color: #F5F5F5;
+    .trade-button {
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        font-size: 5px;
+        padding: 3px;
+        min-height: unset;
 
-                &:after {
-                    content: unset;
-                }
-            }
-        }
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color !important;
-        }
-
-        &.unseen {
-            background-color: rgba($success, 0.4);
-        }
-    
-        .badge {
-            top: 2px;
-            right: 2px;
-            font-size: 8px;
-        }
-
-        .avatar-image {
-            background-position: center;
-            background-repeat: no-repeat;
-            background-position-y: 12px !important;
-        }
-
-        .trade-button {
-            position: absolute;
-            bottom: 2px;
-            right: 2px;
-            font-size: 5px;
-            padding: 3px;
-            min-height: unset;
-
-            &.left {
-                right: unset;
-                left: 2px;
-            }
+        &.left {
+            right: unset;
+            left: 2px;
         }
     }
 }

src/layout/card/grid/item/NitroCardGridItemView.tsx

@@ -1,27 +1,50 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
-import { useNitroCardGridContext } from '../context';
-import { NitroCardGridThemes } from '../NitroCardGridView.types';
 import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
 export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, children = null, ...rest } = props;
-    const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext();
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
 
-    const imageUrl = `url(${ itemImage })`;
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid-item gap-1 cursor-pointer overflow-hidden';
+
+        if(itemActive) newClassName += ' active';
+
+        if(itemUniqueNumber === -1) newClassName += ' unique-item sold-out';
+
+        if(itemUniqueNumber > 0) newClassName += ' unique-item';
+
+        if(itemUnseen) newClassName += ' unseen';
+
+        if(itemImage === null) newClassName += ' icon loading-icon';
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, itemActive, itemUniqueNumber, itemUnseen, itemImage ]);
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`;
+
+        if(itemColor) newStyle.backgroundColor = itemColor;
+
+        return newStyle;
+    }, [ style, itemImage, itemColor ]);
 
     return (
-        <div className={ `${ columns === undefined ? 'col' : ('col-' + columns) } pb-1 grid-item-container` }>
-            <div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) } { ...rest }>
-                { (itemCount > 1) &&
-                    <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
-                { itemUnique && 
-                    <div className="position-absolute unique-item-counter">
-                        <LimitedEditionStyledNumberView value={ itemUniqueNumber } />
-                    </div> }
-                { children }
-            </div>
+        <div className={ getClassName } style={ getStyle } { ...rest }>
+            { (itemCount > 1) &&
+                <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
+            { (itemUniqueNumber > 0) && 
+                <div className="position-absolute unique-item-counter">
+                    <LimitedEditionStyledNumberView value={ itemUniqueNumber } />
+                </div> }
+            { children }
         </div>
     );
 }

src/layout/card/grid/item/NitroCardGridItemView.types.ts

@@ -6,8 +6,6 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
     itemColor?: string;
     itemActive?: boolean;
     itemCount?: number;
-    itemUnique?: boolean;
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
-    columns?: number;
 }

src/layout/common/NitroLayoutButtonSize.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutButtonSize = 'sm' | 'lg';

src/layout/common/NitroLayoutColumns.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

src/layout/common/NitroLayoutOverflow.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutOverflow = 'hidden' | 'auto';

src/layout/common/NitroLayoutPosition.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutPosition = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky';

src/layout/common/NitroLayoutSpacing.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutSpacing = 1 | 2 | 3 | 4 | 5;

src/layout/common/NitroLayoutVariant.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutVariant = 'primary' | 'success' | 'danger';

src/layout/common/index.ts

@@ -0,0 +1,6 @@
+export * from './NitroLayoutButtonSize.type';
+export * from './NitroLayoutColumns.type';
+export * from './NitroLayoutOverflow.type';
+export * from './NitroLayoutPosition.type';
+export * from './NitroLayoutSpacing.type';
+export * from './NitroLayoutVariant.type';

src/layout/flex-column/NitroLayoutFlexColumn.tsx

@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlex } from '../flex/NitroLayoutFlex';
+import { NitroLayoutFlexColumnProps } from './NitroLayoutFlexColumn.types';
+
+export const NitroLayoutFlexColumn: FC<NitroLayoutFlexColumnProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'flex-column';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutFlex className={ getClassName } { ...rest } />;
+}

src/layout/flex-column/NitroLayoutFlexColumn.types.ts

@@ -0,0 +1,6 @@
+import { NitroLayoutFlexProps } from '../flex/NitroLayoutFlex.types';
+
+export interface NitroLayoutFlexColumnProps extends NitroLayoutFlexProps
+{
+    
+}

src/layout/flex-column/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutFlexColumn';
+export * from './NitroLayoutFlexColumn.types';

src/layout/flex/NitroLayoutFlex.tsx

@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base/NitroLayoutBase';
+import { NitroLayoutFlexProps } from './NitroLayoutFlex.types';
+
+export const NitroLayoutFlex: FC<NitroLayoutFlexProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'd-flex';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutBase className={ getClassName } { ...rest } />;
+}

src/layout/flex/NitroLayoutFlex.types.ts

@@ -0,0 +1,6 @@
+import { NitroLayoutBaseProps } from '../base/NitroLayoutBase.types';
+
+export interface NitroLayoutFlexProps extends NitroLayoutBaseProps
+{
+    
+}

src/layout/flex/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutFlex';
+export * from './NitroLayoutFlex.types';

src/layout/grid/NitroLayoutGrid.tsx

@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base';
+import { NitroLayoutGridProps } from './NitroLayoutGrid.types';
+
+export const NitroLayoutGrid: FC<NitroLayoutGridProps> = props =>
+{
+    const { className = '', gap = 3, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid h-100';
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutBase className={ getClassName } gap={ gap } { ...rest }  />;
+}

src/layout/grid/NitroLayoutGrid.types.ts

@@ -0,0 +1,6 @@
+import { NitroLayoutBaseProps } from '../base';
+
+export interface NitroLayoutGridProps extends NitroLayoutBaseProps
+{
+    
+}

src/layout/grid/column/NitroLayoutGridColumn.tsx

@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlexColumn } from '../../flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types';
+
+export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
+{
+    const { className = '', size = 12, gap = 3, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = `g-col-${ size }`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, size ]);
+
+    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow="auto" { ...rest } />
+}

src/layout/grid/column/NitroLayoutGridColumn.types.ts

@@ -0,0 +1,8 @@
+import { NitroLayoutColumns, NitroLayoutSpacing } from '../../common';
+import { NitroLayoutFlexColumnProps } from '../../flex-column/NitroLayoutFlexColumn.types';
+
+export interface NitroLayoutGridColumnProps extends NitroLayoutFlexColumnProps
+{
+    size?: NitroLayoutColumns;
+    gap?: NitroLayoutSpacing;
+}

src/layout/grid/column/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutGridColumn';
+export * from './NitroLayoutGridColumn.types';

src/layout/grid/index.ts

@@ -0,0 +1,3 @@
+export * from './column';
+export * from './NitroLayoutGrid';
+export * from './NitroLayoutGrid.types';

src/layout/index.ts

@@ -1,6 +1,12 @@
+export * from './button';
 export * from './card';
+export * from './common';
 export * from './draggable-window';
+export * from './flex';
+export * from './flex-column';
 export * from './gift-card';
+export * from './grid';
+export * from './loading-habbos';
 export * from './loading-spinner';
 export * from './mini-camera';
 export * from './notification-alert';

src/layout/loading-habbos/index.ts

@@ -0,0 +1 @@
+export * from './LoadingHabbosView';

src/views/achievements/AchievementsView.scss

@@ -1,5 +1,6 @@
 .nitro-achievements {
-    width: 650px;
+    width: $achievement-width;
+    height: $achievement-height;
 
     .score {
         border-color: $grid-border-color !important;

src/views/avatar-editor/AvatarEditorView.scss

@@ -1,10 +1,6 @@
 .nitro-avatar-editor {
-    width: 620px;
-
-    .content-area {
-        min-height: 300px;
-        height: 300px;
-    }
+    width: $avatar-editor-width;
+    height: $avatar-editor-height;
 
     .category-item {
         height: 40px;
@@ -82,6 +78,37 @@
 
     .wardrobe-grid {
 
+        .grid-item {
+            height: 140px;
+            max-height: 140px;
+            background-color: $ghost;
+
+            &:after {
+                position: absolute;
+                content: '';
+                top: 75%;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border-radius: 50%;
+                background-color: $gray-chateau;
+                box-shadow: 0 0 8px 2px rgba($white,.6);
+                transform: scale(2);
+            }
+
+            .avatar-image {
+                position: absolute;
+                bottom: 0;
+                background-position-y: -23px !important;
+                z-index: 4;
+            }
+
+            .figure-button-container {
+                background-color: $gray-chateau;
+                z-index: 3;
+            }
+        }
+
         .grid-item-container {
             height: 142px !important;
             max-height: 142px !important;

src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx

@@ -1,6 +1,5 @@
 import { FC, useCallback } from 'react';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
 import { AvatarEditorFigureSetItemView } from '../figure-set-item/AvatarEditorFigureSetItemView';
 import { AvatarEditorFigureSetViewProps } from './AvatarEditorFigureSetView.types';
@@ -23,7 +22,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category, setMaxPaletteCount ]);
 
     return (
-        <NitroCardGridView columns={ 3 } theme={ NitroCardGridThemes.THEME_SHADOWED }>
+        <NitroCardGridView columns={ 3 }>
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 {
                     return <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ selectPart } />;

src/views/avatar-editor/views/model/AvatarEditorModelView.tsx

@@ -71,7 +71,7 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
             <div className="col-5 d-flex flex-column h-100">
                 <AvatarEditorFigureSetView model={ model } category={ activeCategory } setMaxPaletteCount={ setMaxPaletteCount } />
             </div>
-            <div className="col-5 d-flex flex-column h-100">
+            <div className="col-5 d-flex flex-column h-100 gap-2">
                 { (maxPaletteCount >= 1) &&
                     <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(0) } paletteIndex={ 0 } /> }
                 { (maxPaletteCount === 2) &&

src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx

@@ -1,6 +1,5 @@
 import { FC, useCallback } from 'react';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
 import { AvatarEditorPaletteSetItem } from '../palette-set-item/AvatarEditorPaletteSetItem';
 import { AvatarEditorPaletteSetViewProps } from './AvatarEditorPaletteSetView.types';
@@ -19,7 +18,7 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category, paletteSet, paletteIndex ]);
 
     return (
-        <NitroCardGridView columns={ 4 } theme={ NitroCardGridThemes.THEME_SHADOWED } { ...rest }>
+        <NitroCardGridView columns={ 4 } { ...rest }>
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
                 {
                     return <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />;

src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx

@@ -5,7 +5,6 @@ import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types';
@@ -68,7 +67,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     return (
         <div className="row h-100">
             <div className="col-12 d-flex h-100">
-                <NitroCardGridView className="wardrobe-grid" columns={ 5 } theme={ NitroCardGridThemes.THEME_DEFAULT }>
+                <NitroCardGridView className="wardrobe-grid" columns={ 5 }>
                     { figures }
                 </NitroCardGridView>
             </div>

src/views/catalog/CatalogView.scss

@@ -1,11 +1,6 @@
 .nitro-catalog {
-    width: 620px;
-
-    .content-area {
-        min-height: 350px;
-        height: 350px;
-        resize: vertical;
-    }
+    width: $catalog-width;
+    height: $catalog-height;
 
     font[size="16"] {
         font-size: 20px;

src/views/catalog/CatalogView.tsx

@@ -205,7 +205,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                     <NitroCardContentView>
                         <div className="row h-100">
                             { currentNavigationPage && !navigationHidden &&
-                                <div className="col-3 d-flex flex-column h-100">
+                                <div className="col-3 h-100">
                                     <CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
                                 </div> }
                             <div className="col h-100">

src/views/catalog/common/AttemptCatalogPlacement.ts

@@ -0,0 +1,30 @@
+import { CatalogPageMessageOfferData, RoomObjectCategory, RoomObjectPlacementSource } from '@nitrots/nitro-renderer';
+import { GetRoomEngine } from '../../../api';
+import { IsCatalogOfferDraggable } from './IsCatalogOfferDraggable';
+import { ProductTypeEnum } from './ProductTypeEnum';
+
+export const AttemptCatalogPlacement = (offer: CatalogPageMessageOfferData) =>
+{
+    if(!IsCatalogOfferDraggable(offer)) return;
+
+    const product = offer.products[0];
+
+    let category: number = -1;
+
+    switch(product.productType)
+    {
+        case ProductTypeEnum.FLOOR:
+            category = RoomObjectCategory.FLOOR;
+            break;
+        case ProductTypeEnum.WALL:
+            category = RoomObjectCategory.WALL;
+            break;
+    }
+
+    if(category === -1) return;
+
+    if(GetRoomEngine().processRoomObjectPlacement(RoomObjectPlacementSource.CATALOG, -(offer.offerId), category, product.furniClassId, (product.extraParam) ? product.extraParam.toString() : null))
+    {
+        
+    }
+}

src/views/catalog/common/GetProuductIconUrl.ts

@@ -0,0 +1,47 @@
+import { FurnitureType } from '@nitrots/nitro-renderer';
+import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../../api';
+
+export const GetProductIconUrl = (furniClassId: number, productType: string, customParams: string = null) =>
+{
+    switch(productType.toUpperCase())
+    {
+        case FurnitureType.BADGE:
+            return GetSessionDataManager().getBadgeUrl(customParams);
+        case FurnitureType.ROBOT:
+            return undefined;
+        case FurnitureType.FLOOR:
+            return GetRoomEngine().getFurnitureFloorIconUrl(furniClassId);
+        case FurnitureType.WALL: {
+            const furniData = GetSessionDataManager().getWallItemData(furniClassId);
+            
+            let iconName = '';
+
+            if(furniData)
+            {
+                switch(furniData.className)
+                {
+                    case 'floor':
+                        iconName = [ 'th', furniData.className, customParams ].join('_');
+                        break;
+                    case 'wallpaper':
+                        iconName = [ 'th', 'wall', customParams ].join('_');
+                        break;
+                    case 'landscape':
+                        iconName = [ 'th', furniData.className, customParams.replace('.', '_'), '001' ].join('_');
+                        break;
+                }
+
+                if(iconName !== '')
+                {
+                    const assetUrl = GetConfiguration<string>('catalog.asset.url');
+
+                    return `${ assetUrl }/${ iconName }.png`;
+                }
+            }
+
+            return GetRoomEngine().getFurnitureWallIconUrl(furniClassId, customParams);
+        }
+    }
+
+    return null;
+}

src/views/catalog/common/IsCatalogOfferDraggable.ts

@@ -0,0 +1,8 @@
+import { CatalogPageMessageOfferData, RoomControllerLevel } from '@nitrots/nitro-renderer';
+import { GetRoomSession } from '../../../api';
+import { ProductTypeEnum } from './ProductTypeEnum';
+
+export const IsCatalogOfferDraggable = (offer: CatalogPageMessageOfferData) =>
+{
+    return ((GetRoomSession().isRoomOwner || (GetRoomSession().isGuildRoom && (GetRoomSession().controllerLevel >= RoomControllerLevel.GUILD_MEMBER))) && (offer.products.length === 1) && (offer.products[0].productType !== ProductTypeEnum.EFFECT) && (offer.products[0].productType !== ProductTypeEnum.HABBO_CLUB))
+}

src/views/catalog/views/CatalogViews.scss

@@ -1,5 +1,4 @@
 @import './catalog-icon/CatalogIconView';
+@import './gift/CatalogGiftView';
 @import './navigation/CatalogNavigationView';
 @import './page/CatalogPageView';
-@import './search/CatalogSearchView';
-@import './gift/CatalogGiftView';

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

@@ -1,4 +1,5 @@
 .nitro-catalog-gift {
+    width: 325px;
     
     .gift-preview {
         width: 80px;

src/views/catalog/views/navigation/CatalogNavigationView.scss

@@ -1,11 +1,21 @@
-.nitro-catalog-navigation {
-    border-color: $grid-border-color !important;
-    background-color: $grid-bg-color !important;
+.nitro-catalog-navigation-grid {
+    border-radius: 0.25rem;
+    border-color: #B6BEC5 !important;
+    background-color: #CDD3D9;
+    border: 2px solid;
 
-    .navigation-container {
-        overflow-y: auto;
+    .grid-item {
+        font-size: $font-size-sm;
+        height: 23px !important;
+        border-color: unset !important;
+        background-color: #CDD3D9;
+        border: 0 !important;
+        padding: 1px 3px;
+
+        i.fas {
+            color: $black;
+            font-size: 10px;
+            padding: 1px;
+        }
     }
 }
-
-@import './item/CatalogNavigationItemView';
-@import './set/CatalogNavigationSetView';

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

@@ -1,5 +1,6 @@
 import { INodeData } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
+import { NitroCardGridView } from '../../../../layout';
 import { CatalogSearchView } from '../search/CatalogSearchView';
 import { CatalogNavigationViewProps } from './CatalogNavigationView.types';
 import { CatalogNavigationSetView } from './set/CatalogNavigationSetView';
@@ -23,13 +24,15 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
     }, [ page ]);
     
     return (
-        <>
-            <CatalogSearchView />
-            <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
-                <div className="navigation-container h-100">
-                    <CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
+        <div className="row h-100">
+            <div className="d-flex flex-column col gap-2 h-100">
+                <CatalogSearchView />
+                <div className="d-flex flex-column overflow-hidden nitro-catalog-navigation-grid p-1 h-100">
+                    <NitroCardGridView columns={ 1 } gap={ 1 }>
+                        <CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
+                    </NitroCardGridView>
                 </div>
             </div>
-        </>
+        </div>
     );
 }

src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss

@@ -1,18 +0,0 @@
-.catalog-navigation-item-container {
-
-    .catalog-navigation-item {
-        font-size: $font-size-sm;
-        border-radius: $border-radius;
-
-        i.fas {
-            color: $black;
-            font-size: 10px;
-            padding: 1px;
-        }
-
-        &.active {
-            padding: 1px 2px;
-            background-color: $grid-active-bg-color;
-        }
-    }
-}

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

@@ -1,6 +1,7 @@
 import { GetCatalogPageComposer, INodeData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView } from '../../../../../layout';
 import { CatalogMode } from '../../../CatalogView.types';
 import { CatalogIconView } from '../../catalog-icon/CatalogIconView';
 import { ACTIVE_PAGES } from '../CatalogNavigationView';
@@ -70,16 +71,14 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
     }, [ isActive, page ]);
     
     return (
-        <div className="col pb-1 catalog-navigation-item-container">
-            <div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ event => select(page) }>
+        <>
+            <NitroCardGridItemView itemActive={ isActive } onClick={ event => select(page) }>
                 <CatalogIconView icon={ page.icon } />
-                <div className="flex-grow-1 text-black text-truncate px-1">{ page.localization }</div>
+                <div className="flex-grow-1 text-black text-truncate">{ page.localization }</div>
                 { (page.children.length > 0) && <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } /> }
-            </div>
+            </NitroCardGridItemView>
             { isActive && isExpanded && page.children && (page.children.length > 0) &&
-                <div className="d-flex flex-column mt-1">
-                    <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
-                </div> }
-        </div>
+                <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } /> }
+        </>
     );
 }

src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss

@@ -1,14 +0,0 @@
-.catalog-navigation-set-container {
-
-    .catalog-navigation-set-container {
-        padding-left: 5px;
-
-        .catalog-navigation-item-container {
-            padding-right: 0px !important;
-        }
-    }
-
-    > :last-child {
-        padding-bottom: 0px !important;
-    }
-}

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

@@ -26,13 +26,13 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
     }, [ page, isFirstSet, activeChild, pendingTree ]);
     
     return (
-        <div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
+        <>
             { page && (page.children.length > 0) && page.children.map((page, index) =>
                 {
                     if(!page.visible) return null;
                     
                     return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } pendingTree={ pendingTree } setPendingTree={ setPendingTree } setActiveChild={ setActiveChild } />
                 }) }
-        </div>
+        </>
     );
 }

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

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { GetCatalogPageImage, GetCatalogPageText } from '../../common/CatalogUtilities';
+import { CatalogPageDetailsViewProps } from './CatalogPageDetailsView.types';
+
+export const CatalogPageDetailsView: FC<CatalogPageDetailsViewProps> = props =>
+{
+    const { pageParser = null } = props;
+
+    if(!pageParser) return null;
+
+    const imageUrl = GetCatalogPageImage(pageParser, 1);
+
+    return (
+        <div className="d-flex flex-column justify-content-center align-items-center overflow-hidden h-100">
+            { imageUrl && <img className="" alt="" src={ imageUrl } /> }
+            <div className="d-flex flex-column fs-6 text-center text-black lh-sm overflow-auto" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 0) } } />
+        </div>
+    );
+}

src/views/catalog/views/page-details/CatalogPageDetailsView.types.ts

@@ -0,0 +1,6 @@
+import { CatalogPageMessageParser } from '@nitrots/nitro-renderer';
+
+export interface CatalogPageDetailsViewProps
+{
+    pageParser: CatalogPageMessageParser;
+}

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

@@ -1,6 +1,2 @@
 @import './layout/CatalogLayout';
-@import './offer/CatalogPageOfferView';
-@import './offers/CatalogPageOffersView';
-@import './product/CatalogProductView';
 @import './purchase/CatalogPurchaseView';
-@import './search-result/CatalogLayoutSearchResultView';

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

@@ -1,10 +1,3 @@
-@import './badge-display/CatalogLayoutBadgeDisplayView';
-@import './default/CatalogLayoutDefaultView';
 @import './frontpage4/CatalogLayoutFrontpage4View';
-@import './pets/CatalogLayoutPetView';
-@import './pets3/CatalogLayoutPets3View';
-@import './single-bundle/CatalogLayoutSingleBundleView';
-@import './spaces-new/CatalogLayoutSpacesView';
-@import './trophies/CatalogLayoutTrophiesView';
-@import './vip-buy/CatalogLayoutVipBuyView';
 @import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss';
+@import './vip-buy/CatalogLayoutVipBuyView';

src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss

@@ -1,7 +0,0 @@
-.nitro-catalog-layout-badge-display {
-
-    .inventory-badge-grid {
-        height: 200px;
-        max-height: 200px;
-    }
-}

src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx

@@ -1,5 +1,5 @@
 import { StringDataType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../../../api';
 import { InventoryBadgesUpdatedEvent, SetRoomPreviewerStuffDataEvent } from '../../../../../../events';
 import { InventoryBadgesRequestEvent } from '../../../../../../events/inventory/InventoryBadgesRequestEvent';
@@ -7,11 +7,9 @@ import { dispatchUiEvent, useUiEvent } from '../../../../../../hooks';
 import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
 import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
-import { GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutBadgeDisplayViewProps } from './CatalogLayoutBadgeDisplayView.types';
 
 export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProps> = props =>
@@ -32,18 +30,6 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
 
     useUiEvent(InventoryBadgesUpdatedEvent.BADGES_UPDATED, onInventoryBadgesUpdatedEvent);
 
-    const badgeElements = useMemo(() =>
-    {
-        return badges.map(code =>
-            {
-                return (
-                    <NitroCardGridItemView key={ code } itemActive={ (currentBadge === code) } onMouseDown={ event => setCurrentBadge(code) }> 
-                        <BadgeImageView badgeCode={ code } />
-                    </NitroCardGridItemView>
-                );
-            });
-    }, [ badges, currentBadge ]);
-
     useEffect(() =>
     {
         dispatchUiEvent(new InventoryBadgesRequestEvent(InventoryBadgesRequestEvent.REQUEST_BADGES));
@@ -67,22 +53,26 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
     }, [ currentBadge, activeOffer, roomPreviewer ]);
 
     return (
-        <div className="row h-100 nitro-catalog-layout-badge-display">
-            <div className="d-flex flex-column col-7 h-100">
-                <CatalogPageOffersView offers={ pageParser.offers } />
-                <div className="d-flex flex-column mt-2">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 gap-2 h-100">
+                <CatalogPageOffersView className="flex-shrink-0" offers={ pageParser.offers } />
+                <div className="d-flex flex-column overflow-hidden">
                     <div className="text-black fw-bold">{ LocalizeText('catalog_selectbadge') }</div>
-                    <NitroCardGridView className="inventory-badge-grid">
-                        { badgeElements }
+                    <NitroCardGridView>
+                        { badges && (badges.length > 0) && badges.map(code =>
+                            {
+                                return (
+                                    <NitroCardGridItemView key={ code } itemActive={ (currentBadge === code) } onMouseDown={ event => setCurrentBadge(code) }> 
+                                        <BadgeImageView badgeCode={ code } />
+                                    </NitroCardGridItemView>
+                                );
+                            }) }
                     </NitroCardGridView>
                 </div>
             </div>
-            { product &&
-                <div className="position-relative d-flex flex-column col">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ currentBadge } disabled={ !currentBadge } />
-                </div> }
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } extra={ currentBadge } disabled={ !currentBadge } />
+            </div>
         </div>
     );
 }

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

@@ -1,10 +1,7 @@
 import { FC } from 'react';
-import { LimitedEditionCompletePlateView } from '../../../../../shared/limited-edition/complete-plate/LimitedEditionCompletePlateView';
-import { GetCatalogPageImage, GetCatalogPageText, GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutDefaultViewProps } from './CatalogLayoutDefaultView.types';
 
 export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props =>
@@ -17,24 +14,12 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
 
     return (
         <div className="row h-100">
-            <div className="col-7 h-100">
+            <div className="d-flex flex-column col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
             </div>
-            { !product &&
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center overflow-hidden">
-                    <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> }
-            { product &&
-                <div className="position-relative d-flex flex-column col-5">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    { product.uniqueLimitedItem &&
-                        <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } />
-                </div> }
+            <div className="position-relative d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } />
+            </div>
         </div>
     );
 }

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

@@ -1,10 +0,0 @@
-.nitro-catalog-layout-pets {
-
-    .color-button {
-        position: absolute;
-        left: 5px;
-        bottom: 5px;
-    }
-
-    @import './name-approval/CatalogPetNameApprovalView';
-}

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

@@ -2,11 +2,13 @@ import { ColorConverter, GetSellablePetPalettesComposer, SellablePetPaletteData
 import { FC, useEffect, useMemo, useState } from 'react';
 import { GetProductDataForLocalization, LocalizeText } from '../../../../../../api';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../../../../layout';
 import { PetImageView } from '../../../../../shared/pet-image/PetImageView';
-import { GetCatalogPageImage, GetCatalogPageText, GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
+import { GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
 import { CatalogActions } from '../../../../reducers/CatalogReducer';
 import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
+import { CatalogPageDetailsView } from '../../../page-details/CatalogPageDetailsView';
 import { CatalogLayoutPetViewProps } from './CatalogLayoutPetView.types';
 import { CatalogLayoutPetPurchaseView } from './purchase/CatalogLayoutPetPurchaseView';
 
@@ -139,44 +141,40 @@ export const CatalogLayoutPetView: FC<CatalogLayoutPetViewProps> = props =>
     if(!activeOffer) return null;
 
     return (
-        <div className="row h-100 nitro-catalog-layout-pets">
-            <div className="col-7 h-100">
-                <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">
-                                <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + ((selectedColorIndex === index) ? 'active ' : '') } style={ { backgroundColor: ColorConverter.int2rgb(colorSet[0]) } } onClick={ event => setSelectedColorIndex(index) }>
-                                </div>
-                            </div>;
-                        })}
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 h-100">
+                <NitroCardGridView columns={ 5 }>
                     { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
                         {
-                            return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
-                                <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + ((selectedPaletteIndex === index) ? 'active ' : '') } onClick={ event => setSelectedPaletteIndex(index) }>
+                            return (
+                                <NitroCardGridItemView key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
                                     <PetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
-                                </div>
-                            </div>;
-                        }) }
-                </div>
+                                </NitroCardGridItemView>
+                            );
+                        })}
+                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={ index } itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } onClick={ event => setSelectedColorIndex(index) } />
+                            );
+                        })}
+                </NitroCardGridView>
+            </div>
+            <div className="position-relative d-flex flex-column col-5">
+                { (petIndex === -1) &&
+                    <CatalogPageDetailsView pageParser={ pageParser } /> }
+                { (petIndex >= 0) &&
+                    <>
+                        <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 }>
+                            { (petIndex > -1 && petIndex <= 7) &&
+                                <button type="button" className= { 'btn btn-primary btn-sm color-button ' + (colorsShowing ? 'active ' : '') } onClick={ event => setColorsShowing(!colorsShowing) }>
+                                    <i className="fas fa-fill-drip" />
+                                </button> }
+                        </CatalogRoomPreviewerView>
+                        <div className="fs-6 text-black mt-1 overflow-hidden">{ petBreedName }</div>
+                        <CatalogLayoutPetPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ petPurchaseString } />
+                    </> }
             </div>
-            { (petIndex === -1) &&
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
-                    <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> }
-            { (petIndex >= 0) &&
-                <div className="position-relative d-flex flex-column col-5">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 }>
-                        { (petIndex > -1 && petIndex <= 7) &&
-                            <button type="button" className= { 'btn btn-primary btn-sm color-button ' + (colorsShowing ? 'active ' : '') } onClick={ event => setColorsShowing(!colorsShowing) }>
-                                <i className="fas fa-fill-drip" />
-                            </button> }
-                    </CatalogRoomPreviewerView>
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ petBreedName }</div>
-                    <CatalogLayoutPetPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ petPurchaseString } />
-                </div> }
         </div>
     );
 }

src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx

@@ -6,6 +6,7 @@ import { useUiEvent } from '../../../../../../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../../../../../../hooks/messages/message-event';
 import { CurrencyIcon } from '../../../../../../shared/currency-icon/CurrencyIcon';
 import { CatalogPurchaseButtonView } from '../../../purchase/purchase-button/CatalogPurchaseButtonView';
+import { CatalogPurchaseGiftButtonView } from '../../../purchase/purchase-gift-button/CatalogPurchaseGiftButtonView';
 import { CatalogPetNameApprovalView } from '../name-approval/CatalogPetNameApprovalView';
 import { CatalogLayoutPetPurchaseViewProps } from './CatalogLayoutPetPurchaseView.types';
 
@@ -59,6 +60,8 @@ export const CatalogLayoutPetPurchaseView: FC<CatalogLayoutPetPurchaseViewProps>
                 </div>
                 <div className="d-flex flex-column mt-1">
                     <CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ 1 } isPurchaseAllowed={ nameApproved } beforePurchase={ beforePurchase } />
+                    { offer.giftable &&
+                        <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } disabled={ nameApproved } /> }
                 </div>
             </div>
         </>