Merge branch 'dev' into more-layout-changes

.env

@@ -1,7 +0,0 @@
-BROWSER=none
-GENERATE_SOURCEMAP=false
-REACT_APP_CONFIG_URLS=/renderer-config.json,/ui-config.json
-REACT_APP_SOCKET_URL=wss://ws.nitrots.co:2096
-REACT_APP_ASSET_URL=https://assets.nitrodev.co
-REACT_APP_IMAGE_LIBRARY_URL=https://swf.nitrots.co/c_images/
-REACT_APP_HOF_FURNI_URL=https://swf.nitrots.co/dcr/hof_furni

.gitignore

@@ -26,5 +26,6 @@ Thumbs.db
 # Nitro
 /build
 *.zip
-/public/renderer-config.json
-/public/ui-config.json
+.env
+public/renderer-config.json
+public/ui-config.json

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "craco start",
     "build": "craco --max_old_space_size=8048 build",
-    "build:prod": "npx browserslist@latest --update-db && yarn remove @nitrots/nitro-renderer && yarn add git+https://git@git.krews.org/nitro/nitro-renderer#dev && yarn install && yarn build",
+    "build:prod": "npx browserslist@latest --update-db && yarn install && yarn build",
     "test": "craco test",
     "eject": "react-scripts eject"
   },

public/ui-config.json.example

@@ -1,11 +1,11 @@
 {
     "image.library.notifications.url": "${image.library.url}notifications/%image%.png",
     "achievements.images.url": "${image.library.url}Quests/%image%.png",
-    "camera.url": "CAMERA_PHOTOS_URL",
-    "thumbnails.url": "CAMERA_ROOM_THUMBNAILS/%thumbnail%.png",
-    "url.prefix": "URL",
+    "camera.url": "https://camera.com",
+    "thumbnails.url": "https://camera.com/thumbnail/%thumbnail%.png",
+    "url.prefix": "https://website.com",
     "floorplan.tile.url": "${asset.url}/floorplan-editor/tiles.json",
-    "habbopages.url": "URL/",
+    "habbopages.url": "https://website.com/habbopages/",
     "chat.viewer.height.percentage": 0.40,
     "widget.dimmer.colorwheel": false,
     "hotelview": {
@@ -44,8 +44,7 @@
     "system.currency.types": [
         -1,
         0,
-        5,
-        101
+        5
     ],
     "hc.center": {
         "benefits.info": true,

src/App.tsx

@@ -126,12 +126,11 @@ export const App: FC<{}> = props =>
     
     return (
         <div className="nitro-app overflow-hidden">
-            <div id="nitro-alerts-container" />
-            <div id="nitro-confirms-container" />
             { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) }>
                 <MainView />
             </TransitionAnimation>
+            <div id="draggable-windows-container" />
         </div>
     );
 }

src/assets/styles/bootstrap/forms/_form-check.scss

@@ -17,7 +17,7 @@
 .form-check-input {
   width: $form-check-input-width;
   height: $form-check-input-width;
-  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+  //margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
   vertical-align: top;
   background-color: $form-check-input-bg;
   background-repeat: no-repeat;

src/components/catalog/CatalogMessageHandler.tsx

@@ -1,4 +1,4 @@
-import { ApproveNameMessageEvent, CatalogPageMessageEvent, CatalogPagesListEvent, CatalogPublishedMessageEvent, GiftReceiverNotFoundEvent, GiftWrappingConfigurationEvent, HabboClubOffersMessageEvent, LimitedEditionSoldOutEvent, MarketplaceConfigurationEvent, MarketplaceMakeOfferResult, ProductOfferEvent, PurchaseErrorMessageEvent, PurchaseNotAllowedMessageEvent, PurchaseOKMessageEvent, SellablePetPalettesMessageEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
+import { ApproveNameMessageEvent, CatalogPageMessageEvent, CatalogPagesListEvent, CatalogPublishedMessageEvent, ClubGiftInfoEvent, GiftReceiverNotFoundEvent, GiftWrappingConfigurationEvent, HabboClubOffersMessageEvent, LimitedEditionSoldOutEvent, MarketplaceConfigurationEvent, MarketplaceMakeOfferResult, ProductOfferEvent, PurchaseErrorMessageEvent, PurchaseNotAllowedMessageEvent, PurchaseOKMessageEvent, SellablePetPalettesMessageEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
 import { GuildMembershipsMessageEvent } from '@nitrots/nitro-renderer/src/nitro/communication/messages/incoming/user/GuildMembershipsMessageEvent';
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../api';
@@ -203,6 +203,20 @@ export const CatalogMessageHandler: FC<{}> = props =>
         });
     }, [dispatchCatalogState]);
 
+    const onClubGiftInfoEvent = useCallback((event: ClubGiftInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        dispatchCatalogState({
+            type: CatalogActions.SET_CLUB_GIFTS,
+            payload: {
+                clubGifts: parser
+            }
+        });
+    }, [dispatchCatalogState]);
+
     CreateMessageHook(CatalogPagesListEvent, onCatalogPagesListEvent);
     CreateMessageHook(CatalogPageMessageEvent, onCatalogPageMessageEvent);
     CreateMessageHook(PurchaseOKMessageEvent, onPurchaseOKMessageEvent);
@@ -218,6 +232,7 @@ export const CatalogMessageHandler: FC<{}> = props =>
     CreateMessageHook(UserSubscriptionEvent, onUserSubscriptionEvent);
     CreateMessageHook(CatalogPublishedMessageEvent, onCatalogPublishedMessageEvent);
     CreateMessageHook(GiftWrappingConfigurationEvent, onGiftWrappingConfigurationEvent);
+    CreateMessageHook(ClubGiftInfoEvent, onClubGiftInfoEvent);
     CreateMessageHook(MarketplaceMakeOfferResult, onMarketplaceMakeOfferResult);
     CreateMessageHook(MarketplaceConfigurationEvent, onMarketplaceConfigurationEvent);
 

src/components/catalog/CatalogView.tsx

@@ -1,4 +1,4 @@
-import { GetCatalogIndexComposer, GetCatalogPageComposer, GetGiftWrappingConfigurationComposer, GetMarketplaceConfigurationMessageComposer, ILinkEventTracker, INodeData, RoomPreviewer } from '@nitrots/nitro-renderer';
+import { GetCatalogIndexComposer, GetCatalogPageComposer, GetClubGiftInfo, GetGiftWrappingConfigurationComposer, GetMarketplaceConfigurationMessageComposer, ILinkEventTracker, INodeData, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { AddEventLinkTracker, GetRoomEngine, LocalizeText, RemoveLinkEventTracker } from '../../api';
 import { CREDITS, PlaySound } from '../../api/utils/PlaySound';
@@ -195,6 +195,7 @@ export const CatalogView: FC<{}> = props =>
     {
         SendMessageHook(new GetMarketplaceConfigurationMessageComposer());
         SendMessageHook(new GetGiftWrappingConfigurationComposer());
+        SendMessageHook(new GetClubGiftInfo());
     });
 
     const currentNavigationPage = ((searchResult && searchResult.page) || currentTab);

src/components/catalog/common/views/page/layout/color-grouping/CatalogLayoutColorGroupingView.tsx

@@ -0,0 +1,91 @@
+import { CatalogPageMessageOfferData, IFurnitureData } from '@nitrots/nitro-renderer';
+import { FC, useMemo, useState } from 'react';
+import { GetSessionDataManager } from '../../../../../../api';
+import { NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../../layout';
+import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
+import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
+import { CatalogLayoutProps } from '../CatalogLayout.types';
+
+export interface CatalogLayoutColorGroupViewProps extends CatalogLayoutProps
+{
+
+}
+
+export const CatalogLayoutColorGroupingView : FC<CatalogLayoutColorGroupViewProps> = props =>
+{
+    const { roomPreviewer = null, pageParser = null } = props;
+    const [ colorableItems, setColorableItems ] = useState<Map<string, number[]>>(new Map<string, number[]>());
+
+    const offers = useMemo(() =>
+    {
+        const offers: CatalogPageMessageOfferData[] = [];
+        const addedColorableItems = new Map<string, boolean>();
+
+        pageParser.offers.forEach(offer =>
+        {
+            const product = offer.products[0];
+            if(!product) return;
+            
+            let furniData: IFurnitureData = null;
+
+            if(product.productType === ProductTypeEnum.FLOOR)
+            {
+                furniData = GetSessionDataManager().getFloorItemData(product.furniClassId);
+            }
+            else if(product.productType === ProductTypeEnum.WALL)
+            {
+                furniData = GetSessionDataManager().getWallItemData(product.furniClassId);
+            }
+
+            if(((!(furniData)) || ((furniData.fullName.indexOf('*') === -1))))
+            {
+                offers.push(offer);
+            }
+            else
+            {
+                const name = furniData.fullName.split('*')[0];
+                const colorIndex = parseInt(furniData.fullName.split('*')[1]);
+
+                if(!colorableItems[name])
+                {
+                    colorableItems[name] = [];
+                }
+
+                let selectedColor = 0;
+                if(furniData.colors)
+                {
+                    for(let color of furniData.colors)
+                    {
+                        if(color !== 0xFFFFFF)
+                        {
+                            selectedColor = color;
+                        }
+                    }
+                    if(colorableItems[name].indexOf(selectedColor) === -1)
+                    {
+                        colorableItems[name][colorIndex] = selectedColor;
+                    }
+                }
+
+                if(!addedColorableItems.has(name))
+                {
+                    offers.push(offer);
+                    addedColorableItems.set(name, true);
+                }
+            }
+        });
+        console.log(colorableItems);
+        return offers;
+    }, [colorableItems, pageParser.offers]);
+
+    return (
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 }>
+                <CatalogPageOffersView offers={ offers } />
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 }>
+                
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
+    );
+}

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

@@ -0,0 +1,73 @@
+import { SelectClubGiftComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../../api';
+import { SendMessageHook } from '../../../../../../hooks';
+import { NitroCardGridView } from '../../../../../../layout';
+import { NitroLayoutBase } from '../../../../../../layout/base';
+import { NotificationUtilities } from '../../../../../notification-center/common/NotificationUtilities';
+import { useCatalogContext } from '../../../../context/CatalogContext';
+import { CatalogActions } from '../../../../reducers/CatalogReducer';
+import { CatalogLayoutProps } from '../CatalogLayout.types';
+import { VipGiftItem } from './gift-item/VipGiftItemView';
+
+export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps
+{
+
+}
+
+export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = props =>
+{
+    const { catalogState, dispatchCatalogState } = useCatalogContext();
+    
+    const giftsAvailable = useCallback(() =>
+    {
+        const clubGifts = catalogState.clubGifts;
+
+        if(!clubGifts) return '';
+
+        if(clubGifts.giftsAvailable > 0)
+        {
+            return LocalizeText('catalog.club_gift.available', ['amount'], [clubGifts.giftsAvailable.toString()]);
+        }
+
+        if(clubGifts.daysUntilNextGift > 0)
+        {
+            return LocalizeText('catalog.club_gift.days_until_next', ['days'], [clubGifts.daysUntilNextGift.toString()]);
+        }
+
+        if(catalogState.subscriptionInfo.isVip)
+        {
+            return LocalizeText('catalog.club_gift.not_available');
+        }
+
+        return LocalizeText('catalog.club_gift.no_club');
+
+    }, [catalogState.clubGifts, catalogState.subscriptionInfo.isVip]);
+
+    const selectGift = useCallback((localizationId: string) =>
+    {
+        NotificationUtilities.confirm(LocalizeText('catalog.club_gift.confirm'), () =>
+            {
+                SendMessageHook(new SelectClubGiftComposer(localizationId));
+                const prev = catalogState.clubGifts;
+
+                prev.giftsAvailable--;
+
+                dispatchCatalogState({
+                    type: CatalogActions.SET_CLUB_GIFTS,
+                    payload: {
+                        clubGifts: prev
+                    }
+                });
+            }, null);
+    }, [catalogState.clubGifts, dispatchCatalogState]);
+    
+    return (
+        <>
+        <NitroLayoutBase className='text-black'>{giftsAvailable()}</NitroLayoutBase>
+        <NitroCardGridView columns={1} className='text-black'>
+            { catalogState.clubGifts && catalogState.clubGifts.offers.map( (offer, index) => <VipGiftItem key={index} offer={offer} isAvailable={ catalogState.clubGifts.getOfferExtraData(offer.offerId).isSelectable && catalogState.clubGifts.giftsAvailable > 0} onSelect={selectGift}/>)}
+        </NitroCardGridView>
+        </>
+    )
+}

src/components/catalog/common/views/page/layout/vip-gifts/gift-item/VipGiftItemView.tsx

@@ -0,0 +1,61 @@
+import { CatalogPageMessageOfferData } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../../../api';
+import { NitroCardGridItemView } from '../../../../../../../layout';
+import { ProductImageUtility } from '../../../../../../notification-center/common/ProductImageUtility';
+
+export interface VipGiftItemViewProps
+{
+    offer: CatalogPageMessageOfferData;
+    isAvailable: boolean;
+    onSelect(localizationId: string): void;
+}
+
+export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
+{
+    const { offer = null, isAvailable = false, onSelect = null } = props;
+    
+    const getImageUrlForOffer = useCallback( () =>
+    {
+        if(!offer || !offer.products.length) return '';
+
+        const productData = offer.products[0];
+
+        return ProductImageUtility.getProductImageUrl(productData.productType, productData.furniClassId, productData.extraParam);
+    }, [offer]);
+    
+    const getItemTitle = useCallback(() =>
+    {
+        if(!offer || !offer.products.length) return '';
+
+        const productData = offer.products[0];
+
+        const localizationKey = ProductImageUtility.getProductCategory(productData.productType, productData.furniClassId) === 2  ? 'wallItem.name.' + productData.furniClassId : 'roomItem.name.' + productData.furniClassId;
+
+        return LocalizeText(localizationKey);
+    }, [offer]);
+
+    const getItemDesc = useCallback( () =>
+    {
+        if(!offer || !offer.products.length) return '';
+
+        const productData = offer.products[0];
+
+        const localizationKey = ProductImageUtility.getProductCategory(productData.productType, productData.furniClassId) === 2 ? 'wallItem.desc.' + productData.furniClassId : 'roomItem.desc.' + productData.furniClassId ;
+
+        return LocalizeText(localizationKey);
+    }, [offer]);
+
+    return (
+        <NitroCardGridItemView className='w-100 vip-gift-item align-items-center'>
+            <img src={ getImageUrlForOffer() } className='mx-3' alt='' />
+            <div className='h-100 flex-grow-1 justify-content-center '>
+                <div className='fw-bold'>{getItemTitle()}</div>
+                <div className='fst-italic fs-6'>{getItemDesc()}</div>
+            </div>
+            <div className='btn-group-vertical mx-1 gap-2'>
+                <button className='btn btn-secondary btn-sm' disabled={!isAvailable} onClick={() => onSelect(offer.localizationId)}>{ LocalizeText('catalog.club_gift.select') }</button>
+            </div>
+        </NitroCardGridItemView>
+    )
+}

src/components/catalog/reducers/CatalogReducer.tsx

@@ -1,4 +1,4 @@
-import { CatalogPageMessageOfferData, CatalogPageMessageParser, ClubOfferData, GiftWrappingConfigurationParser, INodeData, MarketplaceConfigurationMessageParser } from '@nitrots/nitro-renderer';
+import { CatalogPageMessageOfferData, CatalogPageMessageParser, ClubGiftInfoParser, ClubOfferData, GiftWrappingConfigurationParser, INodeData, MarketplaceConfigurationMessageParser } from '@nitrots/nitro-renderer';
 import { HabboGroupEntryData } from '@nitrots/nitro-renderer/src/nitro/communication/messages/parser/user/HabboGroupEntryData';
 import { Reducer } from 'react';
 import { CatalogPetPalette } from '../common/CatalogPetPalette';
@@ -17,6 +17,7 @@ export interface ICatalogState
     groups: HabboGroupEntryData[];
     petPalettes: CatalogPetPalette[];
     clubOffers: ClubOfferData[];
+    clubGifts: ClubGiftInfoParser;
     subscriptionInfo: SubscriptionInfo;
     giftConfiguration: GiftWrappingConfiguration;
     marketplaceConfiguration: MarketplaceConfigurationMessageParser;
@@ -35,6 +36,7 @@ export interface ICatalogAction
         groups?: HabboGroupEntryData[];
         petPalette?: CatalogPetPalette;
         clubOffers?: ClubOfferData[];
+        clubGifts?: ClubGiftInfoParser;
         subscriptionInfo?: SubscriptionInfo;
         giftConfiguration?: GiftWrappingConfigurationParser;
         marketplaceConfiguration?: MarketplaceConfigurationMessageParser;
@@ -54,6 +56,7 @@ export class CatalogActions
     public static SET_SEARCH_RESULT: string = 'CA_SET_SEARCH_RESULT';
     public static SET_SUBSCRIPTION_INFO: string = 'CA_SET_SUBSCRIPTION_INFO';
     public static SET_GIFT_CONFIGURATION: string = 'CA_SET_GIFT_CONFIGURATION';
+    public static SET_CLUB_GIFTS: string = 'CA_SET_CLUB_GIFTS';
     public static SET_MARKETPLACE_CONFIGURATION: string = 'CA_SET_MARKETPLACE_CONFIGURATION';
 }
 
@@ -67,6 +70,7 @@ export const initialCatalog: ICatalogState = {
     groups: [],
     petPalettes: [],
     clubOffers: null,
+    clubGifts: null,
     subscriptionInfo: new SubscriptionInfo(),
     giftConfiguration: null,
     marketplaceConfiguration: null
@@ -164,8 +168,13 @@ export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, ac
 
             return { ...state, giftConfiguration };
         }
+        case CatalogActions.SET_CLUB_GIFTS: {
+            const clubGifts = (action.payload.clubGifts || state.clubGifts || null);
+
+            return { ...state, clubGifts };
+        }
         case CatalogActions.SET_MARKETPLACE_CONFIGURATION: {
-            let marketplaceConfiguration = (action.payload.marketplaceConfiguration || state.marketplaceConfiguration || null);
+            const marketplaceConfiguration = (action.payload.marketplaceConfiguration || state.marketplaceConfiguration || null);
 
             return { ...state, marketplaceConfiguration }
         }

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

@@ -15,6 +15,7 @@ import { CatalogLayoutSingleBundleView } from './single-bundle/CatalogLayoutSing
 import { CatalogLayoutSpacesView } from './spaces-new/CatalogLayoutSpacesView';
 import { CatalogLayoutTrophiesView } from './trophies/CatalogLayoutTrophiesView';
 import { CatalogLayoutVipBuyView } from './vip-buy/CatalogLayoutVipBuyView';
+import { CatalogLayoutVipGiftsView } from './vip-gifts/CatalogLayoutVipGiftsView';
 
 export const GetCatalogLayout = (pageParser: CatalogPageMessageParser, roomPreviewer: RoomPreviewer) =>
 {
@@ -41,7 +42,7 @@ export const GetCatalogLayout = (pageParser: CatalogPageMessageParser, roomPrevi
         case 'search_results':
             return null;
         case 'club_gifts':
-            return null;
+            return <CatalogLayoutVipGiftsView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'marketplace_own_items':
             return <CatalogLayoutMarketplaceOwnItemsView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'marketplace':
@@ -56,6 +57,8 @@ export const GetCatalogLayout = (pageParser: CatalogPageMessageParser, roomPrevi
             return <CatalogLayoutInfoLoyaltyView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'badge_display':
             return <CatalogLayoutBadgeDisplayView roomPreviewer={roomPreviewer} pageParser={ pageParser } />;
+        //case 'default_3x3_color_grouping':
+            //return <CatalogLayoutColorGroupingView roomPreviewer={roomPreviewer} pageParser={ pageParser } />;
         case 'bots':
         case 'default_3x3':
         default:

src/layout/card/NitroCardView.scss

@@ -5,6 +5,10 @@ $nitro-card-tabs-height: 33px;
     pointer-events: all;
     resize: both;
 
+    @include media-breakpoint-down(sm) {
+        max-width: 100vw !important;
+    }
+
     &.theme-primary {
         border: $border-width solid $border-color;
 
@@ -28,56 +32,6 @@ $nitro-card-tabs-height: 33px;
     }
 }
 
-.nitro-card-responsive {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    overflow: hidden;
-
-    @include media-breakpoint-down(lg) {
-        .draggable-window {
-            top: 0 !important;
-            left: 0 !important;
-            width: 100%;
-            height: 100%;
-            //transform: none !important;
-            overflow: hidden;
-        }
-
-        .nitro-card {
-            max-width: 75%;
-            max-height: calc(100% - 20px);
-            margin: 10px auto 10px;
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        .draggable-window {
-            top: 0 !important;
-            left: 0 !important;
-            width: 100%;
-            height: 100%;
-            //transform: none !important;
-            overflow: hidden;
-        }
-
-        .nitro-card {
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
-            max-height: calc(100% - #{$toolbar-height});
-            margin: 0;
-
-            &.rounded {
-                border-radius: 0 !important;
-            }
-        }
-    }
-}
-
 @import "./accordion/NitroCardAccordionView";
 @import "./content/NitroCardContentView";
 @import "./grid/NitroCardGridView";

src/layout/card/NitroCardView.tsx

@@ -9,13 +9,11 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
 
     return (
         <NitroCardContextProvider value={ { theme, simple } }>
-            <div className="nitro-card-responsive">
-                <DraggableWindow { ...rest }>
-                    <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className}` }>
-                        { children }
-                    </div>
-                </DraggableWindow>
-            </div>
+            <DraggableWindow { ...rest }>
+                <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className} position-relative` }>
+                    { children }
+                </div>
+            </DraggableWindow>
         </NitroCardContextProvider>
     );
 }

src/layout/draggable-window/DraggableWindow.scss

@@ -1,7 +1,25 @@
-.draggable-window {
-    visibility: hidden;
+#draggable-windows-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
 
-    .drag-handler {
-        cursor: move;
+    @include media-breakpoint-down(lg) {
+        display: flex;
+        justify-content: center;
+        transform: none !important;
+
+        .draggable-window {
+            top: 10px !important;
+            left: 0 !important;
+        }
+    }
+
+    .draggable-window {
+        display: inline-block;
+        visibility: hidden;
     }
 }

src/layout/draggable-window/DraggableWindow.tsx

@@ -1,15 +1,25 @@
 import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
-import { FC, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { DraggableWindowPosition, DraggableWindowProps } from './DraggableWindow.types';
+import { DetailedHTMLProps, FC, HTMLAttributes, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { BatchUpdates } from '../../hooks';
+import { DraggableWindowPosition } from './DraggableWindow.types';
 
 const CURRENT_WINDOWS: HTMLElement[] = [];
 const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
 const BOUNDS_THRESHOLD_TOP: number = 0;
 const BOUNDS_THRESHOLD_LEFT: number = 0;
 
+export interface DraggableWindowProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+{
+    uniqueKey?: Key;
+    handleSelector?: string;
+    position?: string;
+    disableDrag?: boolean;
+}
+
 export const DraggableWindow: FC<DraggableWindowProps> = props =>
 {
-    const { uniqueKey = null, handleSelector = '.drag-handler', position = DraggableWindowPosition.CENTER, disableDrag = false, children = null } = props;
+    const { uniqueKey = null, handleSelector = '.drag-handler', position = DraggableWindowPosition.CENTER, disableDrag = false, children = null, ...rest } = props;
     const [ delta, setDelta ] = useState<{ x: number, y: number }>(null);
     const [ offset, setOffset ] = useState<{ x: number, y: number }>(null);
     const [ start, setStart ] = useState<{ x: number, y: number }>({ x: 0, y: 0 });
@@ -120,9 +130,12 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
             offsetX = (document.body.offsetWidth - elementRef.current.offsetWidth) - elementRef.current.offsetLeft;
         }
 
-        setDelta({ x: 0, y: 0 });
-        setOffset({ x: offsetX, y: offsetY });
-        setIsDragging(false);
+        BatchUpdates(() =>
+        {
+            setDelta({ x: 0, y: 0 });
+            setOffset({ x: offsetX, y: offsetY });
+            setIsDragging(false);
+        });
 
         if(uniqueKey !== null) POS_MEMORY.set(uniqueKey, { x: offsetX, y: offsetY });
     }, [ dragHandler, delta, offset, uniqueKey ]);
@@ -180,8 +193,11 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
             }
         }
 
-        setDelta({ x: 0, y: 0 });
-        setOffset({ x: offsetX, y: offsetY });
+        BatchUpdates(() =>
+        {
+            setDelta({ x: 0, y: 0 });
+            setOffset({ x: offsetX, y: offsetY });
+        });
 
         return () =>
         {
@@ -236,8 +252,9 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
     }, [ isDragging, onDragMouseUp, onDragMouseMove, onDragTouchUp, onDragTouchMove ]);
 
     return (
-        <div ref={ elementRef } className="position-absolute draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart }>
+        createPortal(
+        <div ref={ elementRef } className="position-absolute draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } { ...rest }>
             { children }
-        </div>
+        </div>, document.getElementById('draggable-windows-container'))
     );
 }

src/layout/draggable-window/DraggableWindow.types.tsx

@@ -1,13 +1,3 @@
-import { Key } from 'react';
-
-export interface DraggableWindowProps
-{
-    uniqueKey?: Key;
-    handleSelector?: string;
-    position?: string;
-    disableDrag?: boolean;
-}
-
 export class DraggableWindowPosition
 {
     public static CENTER: string = 'DWP_CENTER';

src/views/help/HelpMessageHandler.tsx

@@ -39,7 +39,7 @@ export const HelpMessageHandler: FC<{}> = props =>
     {
         const parser = event.getParser();
 
-        const message = LocalizeText('help.cfh.closed.' + GetCloseReasonKey(parser.closeReason))
+        const message = parser.messageText.length === 0 ? LocalizeText('help.cfh.closed.' + GetCloseReasonKey(parser.closeReason)) : parser.messageText;
 
         NotificationUtilities.simpleAlert(message, NotificationAlertType.MODERATION, null, null, LocalizeText('mod.alert.title'));
     }, []);

src/views/help/views/HelpIndexView.tsx

@@ -35,7 +35,7 @@ export const HelpIndexView: FC<{}> = props =>
             </div>
 
             <div className="d-grid gap-2 col-8 mx-auto">
-                <button className="btn btn-link" type="button" onClick={onRequestMySanctionStatusClick}>{LocalizeText('help.main.my.sanction.status')}</button>
+                <button className="btn btn-link text-primary fw-bold" type="button" onClick={onRequestMySanctionStatusClick}>{LocalizeText('help.main.my.sanction.status')}</button>
             </div>
 
         </>

src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx

@@ -88,7 +88,6 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
                     <div>
                         <b>Owner in room:</b> { ownerInRoom ? 'Yes' : 'No' }
                     </div>
-                    <button className="btn btn-sm btn-primary">Edit in HK</button>
                 </div>
                 <div className="bg-muted rounded py-1 px-2 mb-2">
                     <div className="form-check">

src/views/mod-tools/views/tickets/issue-info/IssueInfoView.tsx

@@ -49,8 +49,8 @@ export const IssueInfoView: FC<IssueInfoViewProps> = props =>
                         <div><span className="fw-bold">Source: </span>{getSourceName(ticket.categoryId)}</div>
                         <div><span className="fw-bold">Category: </span>{LocalizeText('help.cfh.topic.' + ticket.reportedCategoryId)}</div>
                         <div><span className="fw-bold">Description: </span>{ticket.message}</div>
-                        <div><span className="fw-bold">Caller: </span><button className="btn btn-link fw-bold" onClick={() => openUserInfo(ticket.reporterUserId)}>{ticket.reporterUserName}</button></div>
-                        <div><span className="fw-bold">Reported User: </span><button className="btn btn-link fw-bold" onClick={() => openUserInfo(ticket.reportedUserId)}>{ticket.reportedUserName}</button></div>
+                        <div><span className="fw-bold">Caller: </span><button className="btn btn-link fw-bold text-primary" onClick={() => openUserInfo(ticket.reporterUserId)}>{ticket.reporterUserName}</button></div>
+                        <div><span className="fw-bold">Reported User: </span><button className="btn btn-link fw-bold text-danger" onClick={() => openUserInfo(ticket.reportedUserId)}>{ticket.reportedUserName}</button></div>
                     </div>
                     <div className="col-4">
                         <div className="d-grid gap-2 mb-4">

src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx

@@ -33,10 +33,10 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
         const item = roomVisitData.rooms[props.index];
 
         return (
-            <div style={props.style} key={props.key} className="row room-visit">
+            <div style={props.style} key={props.key} className="row room-visit align-items-center">
                 <div className="col-auto text-center">{item.enterHour.toString().padStart(2, '0')}:{item.enterMinute.toString().padStart(2, '0')}</div>
                 <div className="col-7"><span className="fw-bold">Room: </span>{item.roomName}</div>
-                <button className="btn btn-sm btn-link col-auto fw-bold" onClick={() => TryVisitRoom(item.roomId)}>Visit Room</button>
+                <button className="btn btn-sm btn-link col-auto fw-bold text-primary" onClick={() => TryVisitRoom(item.roomId)}>Visit Room</button>
             </div>);
     }
 

src/views/notification-center/NotificationCenterMessageHandler.tsx

@@ -80,7 +80,7 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
                 break;
         }
 
-        NotificationUtilities.showSingleBubble(LocalizeText('notifications.text.loyalty.received', [ 'amount' ], [ parser.amountChanged.toString() ]), NotificationBubbleType.INFO, imageUrl);
+        NotificationUtilities.showSingleBubble(LocalizeText('notifications.text.loyalty.received', [ 'AMOUNT' ], [ parser.amountChanged.toString() ]), NotificationBubbleType.INFO, imageUrl);
     }, []);
 
     CreateMessageHook(ActivityPointNotificationMessageEvent, onActivityPointNotificationMessageEvent);

src/views/notification-center/NotificationCenterView.tsx

@@ -1,5 +1,4 @@
 import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { NotificationAlertEvent, NotificationConfirmEvent } from '../../events';
 import { NotificationBubbleEvent } from '../../events/notification-center/NotificationBubbleEvent';
 import { useUiEvent } from '../../hooks/events';
@@ -148,8 +147,8 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
             <div className="nitro-notification-center">
                 { getBubbleAlerts }
             </div>
-            { createPortal(getAlerts, document.getElementById('nitro-alerts-container')) }
-            { createPortal(getConfirms, document.getElementById('nitro-confirms-container')) }
+            { getConfirms }
+            { getAlerts }
         </>
     );
 }

src/views/notification-center/common/ProductImageUtility.ts

@@ -41,7 +41,7 @@ export class ProductImageUtility
         return imageUrl;
     }
 
-    private static getProductCategory(productType: string, furniClassId: number): number
+    public static getProductCategory(productType: string, furniClassId: number): number
     {
         if(productType === CatalogPageMessageProductData.S) return 1;
 

src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx

@@ -1,19 +1,22 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
+import { GetRoomObjectBounds, GetRoomSession } from '../../../../../../api';
 import { DraggableWindow, DraggableWindowPosition } from '../../../../../../layout';
-import { ObjectLocationView } from '../../../object-location/ObjectLocationView';
 import { AvatarInfoRentableBotChatViewProps } from './AvatarInfoRentableBotChatView.types';
 
 export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProps> = props =>
 {
     const { chatEvent = null } = props;
 
+    const getObjectLocation = useMemo(() =>
+    {
+        return GetRoomObjectBounds(GetRoomSession().roomId, chatEvent.objectId, chatEvent.category, 1);
+    }, [ chatEvent ]);
+
     return (
-        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler">
-            <ObjectLocationView objectId={ chatEvent.objectId } category={ chatEvent.category } noFollow={ true }>
-                <div className="nitro-context-menu">
-                    <div className="drag-handler">test!!!!!</div>
-                </div>
-                </ObjectLocationView>
+        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler" style={ { top: getObjectLocation.y, left: getObjectLocation.x } }>
+            <div className="nitro-context-menu">
+                <div className="drag-handler">test!!!!!</div>
+            </div>
         </DraggableWindow>
     );
 }