Update notifications

src/api/common/ProductImageUtility.ts

@@ -1,6 +1,6 @@
 import { CatalogPageMessageProductData } from '@nitrots/nitro-renderer';
-import { GetRoomEngine } from '../../../api';
+import { GetRoomEngine } from '..';
-import { FurniCategory } from '../../../components/catalog/common/FurniCategory';
+import { FurniCategory } from '../../components/catalog/common/FurniCategory';
 
 export class ProductImageUtility
 {

src/api/common/index.ts

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

src/api/index.ts

@@ -1,7 +1,17 @@
+export * from './common';
 export * from './core';
 export * from './friends';
 export * from './groups';
 export * from './navigator';
 export * from './nitro';
+export * from './nitro/avatar';
+export * from './nitro/camera';
+export * from './nitro/room';
+export * from './nitro/room/widgets';
+export * from './nitro/room/widgets/events';
+export * from './nitro/room/widgets/handlers';
+export * from './nitro/room/widgets/messages';
+export * from './nitro/session';
+export * from './notification';
 export * from './user';
 export * from './utils';

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

@@ -1,9 +1,8 @@
 import { AvatarExpressionEnum, HabboClubLevelEnum, NitroEvent, RoomControllerLevel, RoomRotatingEffect, RoomSessionChatEvent, RoomSettingsComposer, RoomShakingEffect, RoomWidgetEnum, RoomZoomEvent, TextureUtils } from '@nitrots/nitro-renderer';
 import { GetConfiguration, GetNitroInstance, SendMessageComposer } from '../../..';
-import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../..';
+import { GetRoomEngine, GetSessionDataManager, LocalizeText, NotificationUtilities } from '../../../..';
 import { FloorplanEditorEvent } from '../../../../../events/floorplan-editor/FloorplanEditorEvent';
 import { DispatchUiEvent } from '../../../../../hooks';
-import { NotificationUtilities } from '../../../../../views/notification-center/common/NotificationUtilities';
 import { RoomWidgetFloodControlEvent, RoomWidgetUpdateEvent } from '../events';
 import { RoomWidgetChatMessage, RoomWidgetChatSelectAvatarMessage, RoomWidgetChatTypingMessage, RoomWidgetMessage, RoomWidgetRequestWidgetMessage } from '../messages';
 import { RoomWidgetHandler } from './RoomWidgetHandler';

src/api/notification/NotificationUtilities.ts

@@ -1,9 +1,9 @@
 import { HabboWebTools, RoomEnterEffect } from '@nitrots/nitro-renderer';
-import { CreateLinkEvent, GetConfiguration, GetNitroInstance, LocalizeText } from '../../../api';
+import { CreateLinkEvent, GetConfiguration, GetNitroInstance, LocalizeText } from '..';
-import { CatalogPageName } from '../../../components/catalog/common/CatalogPageName';
+import { CatalogPageName } from '../../components/catalog/common/CatalogPageName';
-import { NotificationAlertEvent, NotificationConfirmEvent } from '../../../events';
+import { NotificationAlertEvent, NotificationConfirmEvent } from '../../events';
-import { NotificationBubbleEvent } from '../../../events/notification-center/NotificationBubbleEvent';
+import { NotificationBubbleEvent } from '../../events/notification-center/NotificationBubbleEvent';
-import { DispatchUiEvent } from '../../../hooks';
+import { DispatchUiEvent } from '../../hooks';
 import { NotificationAlertType } from './NotificationAlertType';
 import { NotificationBubbleType } from './NotificationBubbleType';
 
@@ -79,6 +79,8 @@ export class NotificationUtilities
         const linkUrl = this.getNotificationPart(options, type, 'linkUrl', false);
         const image = this.getNotificationImageUrl(options, type);
 
+        console.log(image, LocalizeText(image));
+
         if(options.get('display') === 'BUBBLE')
         {
             this.showSingleBubble(LocalizeText(message), NotificationBubbleType.INFO, LocalizeText(image), linkUrl);

src/api/notification/index.ts

@@ -0,0 +1,7 @@
+export * from './NotificationAlertItem';
+export * from './NotificationAlertType';
+export * from './NotificationBubbleItem';
+export * from './NotificationBubbleType';
+export * from './NotificationConfirmItem';
+export * from './NotificationConfirmType';
+export * from './NotificationUtilities';

src/common/index.scss

@@ -207,7 +207,6 @@
     background-color: rgba($dark,.95);
     box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
     font-size: $font-size-sm;
-    margin-bottom: 5px;
 
     .bubble-image-container {
         min-width: 50px;

src/common/layout/LayoutNotificationAlertView.tsx

@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card';
 
-interface LayoutNotificationAlertViewProps extends NitroCardViewProps
+export interface LayoutNotificationAlertViewProps extends NitroCardViewProps
 {
     title: string;
     close: () => void;
@@ -23,7 +23,7 @@ export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> =
     return (
         <NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }>
             <NitroCardHeaderView headerText={ title } onCloseClick={ close } />
-            <NitroCardContentView justifyContent="between" className="text-black">
+            <NitroCardContentView justifyContent="between" overflow="hidden" className="text-black">
                 { children }
             </NitroCardContentView>
         </NitroCardView>

src/components/camera/views/capture/CameraWidgetCaptureView.tsx

@@ -1,9 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NitroRectangle, TextureUtils } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useRef } from 'react';
-import { GetRoomEngine, GetRoomSession, LocalizeText, PlaySound, SoundNames } from '../../../../api';
+import { GetRoomEngine, GetRoomSession, LocalizeText, NotificationUtilities, PlaySound, SoundNames } from '../../../../api';
 import { Column, DraggableWindow, Flex } from '../../../../common';
-import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
 import { useCameraWidgetContext } from '../../CameraWidgetContext';
 import { CameraPicture } from '../../common/CameraPicture';
 

src/components/catalog/CatalogMessageHandler.tsx

@@ -1,11 +1,9 @@
 import { ApproveNameMessageEvent, CatalogPageMessageEvent, CatalogPagesListEvent, CatalogPublishedMessageEvent, ClubGiftInfoEvent, GiftReceiverNotFoundEvent, GiftWrappingConfigurationEvent, HabboClubOffersMessageEvent, LimitedEditionSoldOutEvent, MarketplaceConfigurationEvent, MarketplaceMakeOfferResult, NodeData, 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 { GetFurnitureData, GetProductDataForLocalization, LocalizeText } from '../../api';
+import { GetFurnitureData, GetProductDataForLocalization, LocalizeText, NotificationAlertType, NotificationUtilities } from '../../api';
 import { CatalogGiftReceiverNotFoundEvent, CatalogNameResultEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogSetExtraPurchaseParameterEvent } from '../../events';
 import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../hooks';
-import { NotificationAlertType } from '../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
 import { useCatalogContext } from './CatalogContext';
 import { CatalogNode } from './common/CatalogNode';
 import { CatalogPetPalette } from './common/CatalogPetPalette';

src/components/catalog/views/page/common/CatalogRedeemVoucherView.tsx

@@ -1,10 +1,9 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RedeemVoucherMessageComposer, VoucherRedeemErrorMessageEvent, VoucherRedeemOkMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../../../../api';
+import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../api';
 import { Button, Flex } from '../../../../../common';
 import { BatchUpdates, UseMessageEventHook } from '../../../../../hooks';
-import { NotificationUtilities } from '../../../../../views/notification-center/common/NotificationUtilities';
 
 export interface CatalogRedeemVoucherViewProps
 {

src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx

@@ -1,10 +1,8 @@
 import { CancelMarketplaceOfferMessageComposer, GetMarketplaceOwnOffersMessageComposer, MarketplaceCancelOfferResultEvent, MarketplaceOwnOffersEvent, RedeemMarketplaceOfferCreditsMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../../../../../api';
+import { LocalizeText, NotificationAlertType, NotificationUtilities, SendMessageComposer } from '../../../../../../api';
 import { Button, Column, Text } from '../../../../../../common';
 import { BatchUpdates, UseMessageEventHook, UseMountEffect } from '../../../../../../hooks';
-import { NotificationAlertType } from '../../../../../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
 import { CatalogLayoutMarketplaceItemView, OWN_OFFER } from './CatalogLayoutMarketplaceItemView';
 import { MarketplaceOfferData } from './common/MarketplaceOfferData';

src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx

@@ -1,10 +1,8 @@
 import { BuyMarketplaceOfferMessageComposer, GetMarketplaceOffersMessageComposer, MarketplaceBuyOfferResultEvent, MarketPlaceOffersEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../../../../../api';
+import { LocalizeText, NotificationAlertType, NotificationUtilities, SendMessageComposer } from '../../../../../../api';
 import { Button, ButtonGroup, Column, Text } from '../../../../../../common';
 import { BatchUpdates, UseMessageEventHook } from '../../../../../../hooks';
-import { NotificationAlertType } from '../../../../../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
 import { GetCurrencyAmount } from '../../../../../purse/common/CurrencyHelper';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
 import { CatalogLayoutMarketplaceItemView, PUBLIC_OFFER } from './CatalogLayoutMarketplaceItemView';

src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx

@@ -1,10 +1,9 @@
 import { ImageResult, MakeOfferMessageComposer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../../../api';
+import { GetRoomEngine, LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../../api';
 import { Base, Button, Column, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
 import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events';
 import { BatchUpdates, UseUiEvent } from '../../../../../../hooks';
-import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
 import { FurnitureItem } from '../../../../../inventory/common/FurnitureItem';
 import { useCatalogContext } from '../../../../CatalogContext';
 

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

@@ -1,8 +1,7 @@
 import { SelectClubGiftComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../../../../../api';
+import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../../api';
 import { AutoGrid, Text } from '../../../../../../common';
-import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
 import { useCatalogContext } from '../../../../CatalogContext';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
 import { VipGiftItem } from './VipGiftItemView';

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

@@ -1,11 +1,7 @@
 import { CatalogPageMessageOfferData } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../../api';
+import { LocalizeText, ProductImageUtility } from '../../../../../../api';
-import { Button } from '../../../../../../common/Button';
+import { Button, LayoutGridItem, LayoutImage, Text } from '../../../../../../common';
-import { LayoutGridItem } from '../../../../../../common/layout/LayoutGridItem';
-import { LayoutImage } from '../../../../../../common/layout/LayoutImage';
-import { Text } from '../../../../../../common/Text';
-import { ProductImageUtility } from '../../../../../../views/notification-center/common/ProductImageUtility';
 
 export interface VipGiftItemViewProps
 {

src/components/groups/views/GroupInformationView.tsx

@@ -1,8 +1,7 @@
 import { GroupInformationParser, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { CreateLinkEvent, GetGroupManager, GetGroupMembers, GetSessionDataManager, LocalizeText, SendMessageComposer, TryJoinGroup, TryVisitRoom } from '../../../api';
+import { CreateLinkEvent, GetGroupManager, GetGroupMembers, GetSessionDataManager, LocalizeText, NotificationUtilities, SendMessageComposer, TryJoinGroup, TryVisitRoom } from '../../../api';
 import { Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../common';
-import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 import { CatalogPageName } from '../../catalog/common/CatalogPageName';
 import { GroupMembershipType } from '../common/GroupMembershipType';
 import { GroupType } from '../common/GroupType';

src/components/groups/views/GroupMembersView.tsx

@@ -1,10 +1,9 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
+import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, NotificationUtilities, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
 import { Base, Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { BatchUpdates, UseMessageEventHook } from '../../../hooks';
-import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 
 export const GroupMembersView: FC<{}> = props =>
 {

src/components/groups/views/GroupRoomInformationView.tsx

@@ -1,10 +1,9 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { DesktopViewEvent, GetGuestRoomResultEvent, GroupInformationComposer, GroupInformationEvent, GroupInformationParser, GroupRemoveMemberComposer, HabboGroupDeactivatedMessageEvent, RoomEntryInfoMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetGroupInformation, GetGroupManager, GetSessionDataManager, LocalizeText, SendMessageComposer, TryJoinGroup } from '../../../api';
+import { GetGroupInformation, GetGroupManager, GetSessionDataManager, LocalizeText, NotificationUtilities, SendMessageComposer, TryJoinGroup } from '../../../api';
 import { Base, Button, Column, Flex, LayoutBadgeImageView, Text } from '../../../common';
 import { UseMessageEventHook } from '../../../hooks';
-import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 import { GroupMembershipType } from '../common/GroupMembershipType';
 import { GroupType } from '../common/GroupType';
 

src/components/groups/views/tabs/GroupTabIdentityView.tsx

@@ -1,9 +1,8 @@
 import { GroupDeleteComposer, GroupSaveInformationComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
-import { CreateLinkEvent, LocalizeText, SendMessageComposer } from '../../../../api';
+import { CreateLinkEvent, LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../api';
 import { Base, Button, Column, Flex, Text } from '../../../../common';
 import { BatchUpdates } from '../../../../hooks';
-import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
 import { IGroupData } from '../../common/IGroupData';
 
 interface GroupTabIdentityViewProps

src/components/help/HelpMessageHandler.tsx

@@ -1,9 +1,7 @@
 import { CallForHelpResultMessageEvent, GetPendingCallsForHelpMessageComposer, IssueCloseNotificationMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../api';
+import { LocalizeText, NotificationAlertType, NotificationUtilities, SendMessageComposer } from '../../api';
 import { UseMessageEventHook } from '../../hooks';
-import { NotificationAlertType } from '../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
 import { CallForHelpResult } from './common/CallForHelpResult';
 import { GetCloseReasonKey } from './common/GetCloseReasonKey';
  

src/components/index.scss

@@ -13,6 +13,7 @@
 @import './loading/LoadingView';
 @import './mod-tools/ModToolsView';
 @import './navigator/NavigatorView';
+@import './notification-center/NotificationCenterView';
 @import './purse/PurseView';
 @import './right-side/RightSideView';
 @import './room/RoomView';

src/components/inventory/InventoryMessageHandler.tsx

@@ -1,11 +1,8 @@
 import { AdvancedMap, BadgePointLimitsEvent, BadgeReceivedEvent, BadgesEvent, BotAddedToInventoryEvent, BotInventoryMessageEvent, BotRemovedFromInventoryEvent, FurnitureListAddOrUpdateEvent, FurnitureListEvent, FurnitureListInvalidateEvent, FurnitureListItemParser, FurnitureListRemovedEvent, FurniturePostItPlacedEvent, PetAddedToInventoryEvent, PetData, PetInventoryEvent, PetRemovedFromInventory, RequestBadgesComposer, TradingAcceptEvent, TradingCloseEvent, TradingCompletedEvent, TradingConfirmationEvent, TradingListItemEvent, TradingNotOpenEvent, TradingOpenEvent, TradingOpenFailedEvent, TradingOtherNotAllowedEvent, TradingYouAreNotAllowedEvent, UnseenItemsEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { GetLocalization, GetRoomSession, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../api';
+import { GetLocalization, GetRoomSession, GetSessionDataManager, LocalizeText, NotificationUtilities, SendMessageComposer } from '../../api';
-import { InventoryBadgesUpdatedEvent } from '../../events';
+import { InventoryBadgesRequestEvent, InventoryBadgesUpdatedEvent } from '../../events';
-import { InventoryBadgesRequestEvent } from '../../events/inventory/InventoryBadgesRequestEvent';
+import { DispatchUiEvent, UseMessageEventHook, UseUiEvent } from '../../hooks';
-import { DispatchUiEvent, UseUiEvent } from '../../hooks';
-import { UseMessageEventHook } from '../../hooks/messages/UseMessageEventHook';
-import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
 import { mergeFurniFragments } from './common/FurnitureUtilities';
 import { mergePetFragments } from './common/PetUtilities';
 import { TradeState } from './common/TradeState';

src/components/inventory/views/badge/InventoryBadgeView.tsx

@@ -77,7 +77,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
                         {
                             if(activeBadges.indexOf(code) >= 0) return null;
 
-                            return <InventoryBadgeItemView key={ code } badgeCode={ code } />
+                            return <InventoryBadgeItemView key={ index } badgeCode={ code } />
                         }) }
                 </AutoGrid>
             </Column>

src/components/inventory/views/trade/InventoryTradeView.tsx

@@ -1,10 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfirmationComposer, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer, TradingUnacceptComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../../../api';
+import { LocalizeText, NotificationAlertType, NotificationUtilities, SendMessageComposer } from '../../../../api';
 import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../common';
-import { NotificationAlertType } from '../../../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
 import { FurniCategory } from '../../common/FurniCategory';
 import { GroupItem } from '../../common/GroupItem';
 import { IFurnitureItem } from '../../common/IFurnitureItem';

src/components/loading/LoadingView.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
+import { NotificationUtilities } from '../../api';
 import { Base, Column } from '../../common';
-import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
 
 interface LoadingViewProps
 {

src/components/mod-tools/ModToolsMessageHandler.tsx

@@ -1,10 +1,8 @@
 import { CfhSanctionMessageEvent, CfhTopicsInitEvent, IssueDeletedMessageEvent, IssueInfoMessageEvent, IssuePickFailedMessageEvent, ModeratorActionResultMessageEvent, ModeratorInitMessageEvent, ModeratorToolPreferencesEvent, RoomEngineEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { PlaySound, SoundNames } from '../../api';
+import { NotificationAlertType, NotificationUtilities, PlaySound, SoundNames } from '../../api';
 import { ModToolsEvent, ModToolsOpenRoomChatlogEvent, ModToolsOpenRoomInfoEvent, ModToolsOpenUserChatlogEvent, ModToolsOpenUserInfoEvent } from '../../events';
 import { UseMessageEventHook, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
-import { NotificationAlertType } from '../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
 import { SetCfhCategories } from './common/GetCFHCategories';
 import { useModToolsContext } from './ModToolsContext';
 import { ModToolsActions } from './reducers/ModToolsReducer';

src/components/mod-tools/views/user/ModToolsUserModActionView.tsx

@@ -1,9 +1,7 @@
 import { CallForHelpTopicData, DefaultSanctionMessageComposer, ModAlertMessageComposer, ModBanMessageComposer, ModKickMessageComposer, ModMessageMessageComposer, ModMuteMessageComposer, ModTradingLockMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo, useState } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../../../api';
+import { LocalizeText, NotificationAlertType, NotificationUtilities, SendMessageComposer } from '../../../../api';
 import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
-import { NotificationAlertType } from '../../../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
 import { useModToolsContext } from '../../ModToolsContext';
 import { ISelectedUser } from '../../utils/ISelectedUser';
 import { ModActionDefinition } from '../../utils/ModActionDefinition';

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsBasicTabView.tsx

@@ -1,9 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomDeleteComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../../../../api';
+import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../api';
 import { Base, Flex, Text } from '../../../../../common';
-import { NotificationUtilities } from '../../../../../views/notification-center/common/NotificationUtilities';
 import { GetMaxVisitorsList } from '../../../common/RoomSettingsUtils';
 import { useNavigatorContext } from '../../../NavigatorContext';
 import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';

src/components/notification-center/NotificationCenterMessageHandler.tsx

@@ -1,13 +1,9 @@
 import { AchievementNotificationMessageEvent, ActivityPointNotificationMessageEvent, ClubGiftNotificationEvent, ClubGiftSelectedEvent, HabboBroadcastMessageEvent, HotelClosedAndOpensEvent, HotelClosesAndWillOpenAtEvent, HotelWillCloseInMinutesEvent, InfoFeedEnableMessageEvent, MaintenanceStatusMessageEvent, ModeratorCautionEvent, ModeratorMessageEvent, MOTDNotificationEvent, NotificationDialogMessageEvent, PetLevelNotificationEvent, PetReceivedMessageEvent, RespectReceivedEvent, RoomEnterEvent, UserBannedMessageEvent, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { GetConfiguration, GetRoomEngine, GetSessionDataManager, LocalizeBadgeName, LocalizeText } from '../../api';
+import { GetConfiguration, GetRoomEngine, GetSessionDataManager, LocalizeBadgeName, LocalizeText, NotificationBubbleType, NotificationUtilities, ProductImageUtility } from '../../api';
 import { UseMessageEventHook } from '../../hooks';
-import { NotificationBubbleType } from './common/NotificationBubbleType';
-import { NotificationUtilities } from './common/NotificationUtilities';
-import { ProductImageUtility } from './common/ProductImageUtility';
-import { INotificationCenterMessageHandlerProps } from './NotificationCenterMessageHandler.types';
 
-export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHandlerProps> = props =>
+export const NotificationCenterMessageHandler: FC<{}> = props =>
 {
     const onRespectReceivedEvent = useCallback((event: RespectReceivedEvent) =>
     {
@@ -71,16 +67,9 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
 
         if(parser.amountChanged <= 0) return;
 
-        let imageUrl: string = null;
+        const imageUrl = GetConfiguration<string>('currency.asset.icon.url', '').replace('%type%', parser.type.toString());
 
-        switch(parser.type)
+        NotificationUtilities.showSingleBubble(LocalizeText(`notifications.text.activitypoints.${ parser.type }`, [ 'AMOUNT' ], [ parser.amountChanged.toString() ]), NotificationBubbleType.INFO, imageUrl);
-        {
-            case 5:
-                imageUrl = GetConfiguration<string>('currency.asset.icon.url', '').replace('%type%', parser.type.toString());
-                break;
-        }
-
-        NotificationUtilities.showSingleBubble(LocalizeText('notifications.text.loyalty.received', [ 'AMOUNT' ], [ parser.amountChanged.toString() ]), NotificationBubbleType.INFO, imageUrl);
     }, []);
 
     UseMessageEventHook(ActivityPointNotificationMessageEvent, onActivityPointNotificationMessageEvent);
@@ -199,6 +188,8 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
     {
         const parser = event.getParser();
 
+        console.log(parser);
+
         NotificationUtilities.showNotification(parser.type, parser.parameters);
     }, []);
 

src/components/notification-center/NotificationCenterView.tsx

@@ -1,18 +1,14 @@
 import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
-import { NotificationAlertEvent, NotificationConfirmEvent } from '../../events';
+import { NotificationAlertItem, NotificationBubbleItem, NotificationBubbleType, NotificationConfirmItem } from '../../api';
-import { NotificationBubbleEvent } from '../../events/notification-center/NotificationBubbleEvent';
+import { Column } from '../../common';
+import { NotificationAlertEvent, NotificationBubbleEvent, NotificationConfirmEvent } from '../../events';
 import { UseUiEvent } from '../../hooks';
-import { NotificationAlertItem } from './common/NotificationAlertItem';
-import { NotificationBubbleItem } from './common/NotificationBubbleItem';
-import { NotificationBubbleType } from './common/NotificationBubbleType';
-import { NotificationConfirmItem } from './common/NotificationConfirmItem';
 import { NotificationCenterMessageHandler } from './NotificationCenterMessageHandler';
-import { NotificationCenterViewProps } from './NotificationCenterView.types';
 import { GetAlertLayout } from './views/alert-layouts/GetAlertLayout';
 import { GetBubbleLayout } from './views/bubble-layouts/GetBubbleLayout';
 import { GetConfirmLayout } from './views/confirm-layouts/GetConfirmLayout';
 
-export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
+export const NotificationCenterView: FC<{}> = props =>
 {
     const [ alerts, setAlerts ] = useState<NotificationAlertItem[]>([]);
     const [ bubbleAlerts, setBubbleAlerts ] = useState<NotificationBubbleItem[]>([]);
@@ -142,9 +138,9 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
     return (
         <>
             <NotificationCenterMessageHandler />
-            <div className="nitro-notification-center">
+            <Column gap={ 1 }>
                 { getBubbleAlerts }
-            </div>
+            </Column>
             { getConfirms }
             { getAlerts }
         </>

src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx

@@ -1,5 +1,4 @@
-import { NotificationAlertItem } from '../../common/NotificationAlertItem';
+import { NotificationAlertItem, NotificationAlertType } from '../../../../api';
-import { NotificationAlertType } from '../../common/NotificationAlertType';
 import { NotificationDefaultAlertView } from './NotificationDefaultAlertView';
 import { NotificationEventAlertView } from './NotificationEventAlertView';
 

src/components/notification-center/views/alert-layouts/NotificationAlertLayoutView.types.ts

@@ -1,4 +1,4 @@
-import { NotificationAlertItem } from '../../common/NotificationAlertItem';
+import { NotificationAlertItem } from '../../../../api';
 
 export interface NotificationAlertLayoutViewProps
 {

src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx

@@ -1,7 +1,6 @@
 import { DetailsHTMLAttributes, FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, NotificationUtilities } from '../../../../api';
-import { LayoutNotificationAlertView } from '../../../../common';
+import { Base, Button, Column, LayoutNotificationAlertView } from '../../../../common';
-import { NotificationUtilities } from '../../common/NotificationUtilities';
 import { NotificationAlertLayoutViewProps } from './NotificationAlertLayoutView.types';
 
 interface NotificationDefaultAlertViewProps extends NotificationAlertLayoutViewProps, DetailsHTMLAttributes<HTMLDivElement>
@@ -26,15 +25,13 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
                 {
                     const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
 
-                    return (
+                    return <Base grow fullHeight overflow="auto" key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
-                        <div key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />
-                    );
                 }) }
-            <div className="d-flex justify-content-center align-items-center mt-1">
+            <Column alignItems="center" center gap={ 1 }>
-                <button type="button" className="btn btn-primary" onClick={ close }>{ LocalizeText('generic.close') }</button>
+                <Button onClick={ close }>{ LocalizeText('generic.close') }</Button>
-            </div>
                 { item.clickUrl && item.clickUrl.length &&
-                <button type="button" className="btn btn-link" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</button> }
+                    <Button variant="link" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
+            </Column>
         </LayoutNotificationAlertView>
     );
 }

src/components/notification-center/views/alert-layouts/NotificationEventAlertView.tsx

@@ -1,7 +1,6 @@
 import { DetailsHTMLAttributes, FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, NotificationUtilities } from '../../../../api';
 import { LayoutNotificationAlertView } from '../../../../common';
-import { NotificationUtilities } from '../../common/NotificationUtilities';
 import { NotificationAlertLayoutViewProps } from './NotificationAlertLayoutView.types';
 
 interface NotificationEventAlertViewProps extends NotificationAlertLayoutViewProps, DetailsHTMLAttributes<HTMLDivElement>

src/components/notification-center/views/bubble-layouts/GetBubbleLayout.tsx

@@ -1,5 +1,4 @@
-import { NotificationBubbleItem } from '../../common/NotificationBubbleItem';
+import { NotificationBubbleItem, NotificationBubbleType } from '../../../../api';
-import { NotificationBubbleType } from '../../common/NotificationBubbleType';
 import { NotificationClubGiftBubbleView } from './NotificationClubGiftBubbleView';
 import { NotificationDefaultBubbleView } from './NotificationDefaultBubbleView';
 

src/components/notification-center/views/bubble-layouts/NotificationBubbleLayoutView.types.ts

@@ -1,4 +1,4 @@
-import { NotificationBubbleItem } from '../../common/NotificationBubbleItem';
+import { NotificationBubbleItem } from '../../../../api';
 
 export interface NotificationBubbleLayoutViewProps
 {

src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, NotificationUtilities } from '../../../../api';
 import { LayoutCurrencyIcon, LayoutNotificationBubbleView } from '../../../../common';
-import { NotificationUtilities } from '../../common/NotificationUtilities';
 import { NotificationBubbleLayoutViewProps } from './NotificationBubbleLayoutView.types';
 
 export const NotificationClubGiftBubbleView: FC<NotificationBubbleLayoutViewProps> = props =>

src/components/notification-center/views/bubble-layouts/NotificationDefaultBubbleView.tsx

@@ -1,5 +1,5 @@
 import { DetailsHTMLAttributes, FC } from 'react';
-import { LayoutNotificationBubbleView } from '../../../../common';
+import { Flex, LayoutNotificationBubbleView, Text } from '../../../../common';
 import { NotificationBubbleLayoutViewProps } from './NotificationBubbleLayoutView.types';
 
 interface NotificationDefaultBubbleViewProps extends NotificationBubbleLayoutViewProps, DetailsHTMLAttributes<HTMLDivElement>
@@ -12,9 +12,12 @@ export const NotificationDefaultBubbleView: FC<NotificationDefaultBubbleViewProp
     const { item = null, close = null, ...rest } = props;
 
     return (
-        <LayoutNotificationBubbleView className="d-flex" close={ close } { ...rest }>
+        <LayoutNotificationBubbleView close={ close } gap={ 2 } alignItems="center" { ...rest }>
-            { (item.iconUrl && item.iconUrl.length) && <img className="bubble-image no-select" src={ item.iconUrl } alt="" /> }
+            <Flex center className="bubble-image-container">
-            <span>{ item.message }</span>
+                { (item.iconUrl && item.iconUrl.length) &&
+                    <img className="no-select" src={ item.iconUrl } alt="" /> }
+            </Flex>
+            <Text wrap variant="white">{ item.message }</Text>
         </LayoutNotificationBubbleView>
     );
 }

src/components/notification-center/views/confirm-layouts/GetConfirmLayout.tsx

@@ -1,4 +1,4 @@
-import { NotificationConfirmItem } from '../../common/NotificationConfirmItem';
+import { NotificationConfirmItem } from '../../../../api';
 import { NotificationDefaultConfirmView } from './NotificationDefaultConfirmView';
 
 export const GetConfirmLayout = (item: NotificationConfirmItem, close: () => void) =>

src/components/notification-center/views/confirm-layouts/NotificationConfirmLayoutView.types.ts

@@ -1,4 +1,4 @@
-import { NotificationConfirmItem } from '../../common/NotificationConfirmItem';
+import { NotificationConfirmItem } from '../../../../api';
 
 export interface NotificationConfirmLayoutViewProps
 {

src/components/right-side/RightSideView.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Column } from '../../common';
-import { NotificationCenterView } from '../../views/notification-center/NotificationCenterView';
 import { GroupRoomInformationView } from '../groups/views/GroupRoomInformationView';
+import { NotificationCenterView } from '../notification-center/NotificationCenterView';
 import { PurseView } from '../purse/PurseView';
 
 export const RightSideView: FC<{}> = props =>

src/components/room/widgets/RoomWidgetsView.tsx

@@ -1,10 +1,8 @@
 import { RoomEngineEvent, RoomEngineObjectEvent, RoomEngineRoomAdEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomObjectVariable, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPetStatusUpdateEvent, RoomSessionPollEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, RoomSessionWordQuizEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { CanManipulateFurniture, GetRoomEngine, GetSessionDataManager, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetUpdateRoomEngineEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../api';
+import { CanManipulateFurniture, GetRoomEngine, GetSessionDataManager, IsFurnitureSelectionDisabled, LocalizeText, NotificationAlertType, NotificationUtilities, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetUpdateRoomEngineEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../api';
 import { FriendRequestEvent } from '../../../events';
 import { UseRoomEngineEvent, UseRoomSessionManagerEvent, UseUiEvent } from '../../../hooks';
-import { NotificationAlertType } from '../../../views/notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 import { useRoomContext } from '../RoomContext';
 import { AvatarInfoWidgetView } from './avatar-info/AvatarInfoWidgetView';
 import { ChatInputView } from './chat-input/ChatInputView';

src/views/Styles.scss

@@ -1,5 +1,4 @@
 @import "./shared/Shared";
 @import "./hotel-view/HotelView";
-@import "./notification-center/NotificationCenterView";
 @import "./nitropedia/NitropediaView";
 @import "./hc-center/HcCenterView.scss";

src/views/hc-center/HcCenterView.tsx

@@ -2,7 +2,7 @@ import { BadgesEvent, ClubGiftInfoEvent, FigureUpdateEvent, FriendlyTime, GetClu
 import { FC, useCallback, useEffect, useState } from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
-import { LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { Base, Button, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { HcCenterEvent } from '../../events';
 import { UseMessageEventHook, UseUiEvent } from '../../hooks';
 import { BadgeResolver } from './util/BadgeResolver';
@@ -20,9 +20,123 @@ export const HcCenterView: FC<{}> = props =>
     const [ minsTillExpire, setMinsTillExpire ] = useState(0);
     const [ clubStatus, setClubStatus ] = useState(ClubStatus.NONE);
     const [ unclaimedGifts, setUnclaimedGifts ] = useState(0);
-
     const [ badgeCode, setBadgeCode ] = useState(BadgeResolver.default_badge);
 
+    const getClubText = () =>
+    {
+        const totalDays = ((clubPeriods * 31) + clubDays);
+        const minutesUntilExpiration = minsTillExpire;
+
+        if(clubStatus !== ClubStatus.ACTIVE)
+        {
+            return LocalizeText('purse.clubdays.zero.amount.text');
+        }
+        
+        if((minutesUntilExpiration > -1) && (minutesUntilExpiration < (60 * 24)))
+        {
+            return FriendlyTime.shortFormat(minutesUntilExpiration * 60);
+        }
+        
+        return FriendlyTime.shortFormat(totalDays * 86400);
+    }
+
+    const getInfoText = () =>
+    {
+        switch(clubStatus)
+        {
+            case ClubStatus.ACTIVE:
+                return LocalizeText(`hccenter.status.${ clubStatus }.info`, [ 'timeleft', 'joindate', 'streakduration' ], [ getClubText(), kickbackData.firstSubscriptionDate, FriendlyTime.shortFormat(kickbackData.currentHcStreak * 86400) ]);
+            case ClubStatus.EXPIRED:
+                return LocalizeText(`hccenter.status.${ clubStatus }.info`, [ 'joindate' ], [ kickbackData.firstSubscriptionDate ]);
+            default:
+                return LocalizeText(`hccenter.status.${ clubStatus }.info`);
+        }
+    }
+
+    const getHcPaydayTime = () =>
+    {
+        if(kickbackData.timeUntilPayday < 60) return LocalizeText('hccenter.special.time.soon');
+        return FriendlyTime.shortFormat(kickbackData.timeUntilPayday * 60);
+    }
+
+    const getHcPaydayAmount = () =>
+    {
+        return LocalizeText('hccenter.special.sum', [ 'credits' ], [ (kickbackData.creditRewardForStreakBonus + kickbackData.creditRewardForMonthlySpent).toString() ]);
+    }
+
+    const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        setUserFigure(parser.userInfo.figure);
+    }, []);
+
+    UseMessageEventHook(UserInfoEvent, onUserInfoEvent);
+
+    const onUserFigureEvent = useCallback((event: FigureUpdateEvent) =>
+    {
+        const parser = event.getParser();
+
+        setUserFigure(parser.figure);
+    }, []);
+
+    UseMessageEventHook(FigureUpdateEvent, onUserFigureEvent);
+
+    const onHcCenterEvent = useCallback((event: HcCenterEvent) =>
+    {
+        switch(event.type)
+        {
+            case HcCenterEvent.TOGGLE_HC_CENTER:
+                setIsVisible(!isVisible);
+                break;
+        }
+    }, [isVisible]);
+
+    UseUiEvent(HcCenterEvent.TOGGLE_HC_CENTER, onHcCenterEvent);
+
+    const onClubGiftInfoEvent = useCallback((event: ClubGiftInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        setUnclaimedGifts(parser.giftsAvailable);
+    }, []);
+
+    UseMessageEventHook(ClubGiftInfoEvent, onClubGiftInfoEvent);
+
+    const onScrSendKickbackInfo = useCallback((event: ScrSendKickbackInfoMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        setKickbackData(parser.data);
+    }, []);
+
+    UseMessageEventHook(ScrSendKickbackInfoMessageEvent, onScrSendKickbackInfo);
+
+    const onBadges = useCallback((event: BadgesEvent) =>
+    {
+        const parser = event.getParser();
+
+        setBadgeCode(BadgeResolver.getClubBadge(parser.getAllBadgeCodes()));
+    }, []);
+
+    UseMessageEventHook(BadgesEvent, onBadges);
+
+    const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
+    {
+        const parser = event.getParser();
+
+        const productName = parser.productName;
+
+        if((productName !== 'club_habbo') && (productName !== 'habbo_club')) return;
+
+        setClubDays(Math.max(0, parser.daysToPeriodEnd));
+        setPastClubPeriods(Math.max(0, parser.periodsSubscribedAhead));
+        setPastClubDays(Math.max(0, parser.pastClubDays));
+        setMinsTillExpire(Math.max(0, parser.minutesUntilExpiration));
+    }, []);
+
+    UseMessageEventHook(UserSubscriptionEvent, onUserSubscriptionEvent);
+
     const linkReceived = useCallback((url: string) =>
     {
         const parts = url.split('/');
@@ -57,57 +171,22 @@ export const HcCenterView: FC<{}> = props =>
         return () => RemoveLinkEventTracker(linkTracker);
     }, [ linkReceived]);
 
-    const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
+    useEffect(() =>
     {
-        const parser = event.getParser();
+        if(clubDays > 0)
-        setUserFigure(parser.userInfo.figure);
+        {
-    }, []);
+            setClubStatus(ClubStatus.ACTIVE);
 
-    const onUserFigureEvent = useCallback((event: FigureUpdateEvent) =>
+            return;
-    {
-        const parser = event.getParser();
-        setUserFigure(parser.figure);
-    }, []);
-
-    UseMessageEventHook(UserInfoEvent, onUserInfoEvent);
-    UseMessageEventHook(FigureUpdateEvent, onUserFigureEvent);
-
-    const onHcCenterEvent = useCallback((event: HcCenterEvent) =>
-    {
-        switch(event.type)
-        {
-            case HcCenterEvent.TOGGLE_HC_CENTER:
-                setIsVisible(!isVisible);
-                break;
         }
-    }, [isVisible]);
 
-    UseUiEvent(HcCenterEvent.TOGGLE_HC_CENTER, onHcCenterEvent);
+        if(pastClubDays > 0)
-
-    const onClubGiftInfoEvent = useCallback((event: ClubGiftInfoEvent) =>
         {
-        const parser = event.getParser();
+            setClubStatus(ClubStatus.EXPIRED);
 
-        setUnclaimedGifts(parser.giftsAvailable);
+            return;
-    }, []);
+        }
-
+    }, [ clubDays, pastClubDays ]);
-    const onScrSendKickbackInfo = useCallback((event: ScrSendKickbackInfoMessageEvent) =>
-    {
-        const parser = event.getParser();
-
-        setKickbackData(parser.data)
-    }, []);
-
-    const onBadges = useCallback((event: BadgesEvent) =>
-    {
-        const parser = event.getParser();
-
-        setBadgeCode(BadgeResolver.getClubBadge(parser.getAllBadgeCodes()));
-    }, [])
-
-    UseMessageEventHook(ClubGiftInfoEvent, onClubGiftInfoEvent);
-    UseMessageEventHook(ScrSendKickbackInfoMessageEvent, onScrSendKickbackInfo);
-    UseMessageEventHook(BadgesEvent, onBadges);
 
     useEffect(() =>
     {
@@ -116,74 +195,6 @@ export const HcCenterView: FC<{}> = props =>
         SendMessageComposer(new RequestBadgesComposer());
     }, []);
 
-    const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
-    {
-        const parser = event.getParser();
-
-        const productName = parser.productName;
-
-        if((productName !== 'club_habbo') && (productName !== 'habbo_club')) return;
-
-        setClubDays(Math.max(0, parser.daysToPeriodEnd));
-        setPastClubPeriods(Math.max(0, parser.periodsSubscribedAhead));
-        setPastClubDays(Math.max(0, parser.pastClubDays));
-        setMinsTillExpire(Math.max(0, parser.minutesUntilExpiration));
-    }, []);
-
-    useEffect(() =>
-    {
-        if(clubDays > 0) return setClubStatus(ClubStatus.ACTIVE)
-        if(pastClubDays > 0) return setClubStatus(ClubStatus.EXPIRED);
-
-    }, [clubDays, pastClubDays]);
-
-    UseMessageEventHook(UserSubscriptionEvent, onUserSubscriptionEvent);
-
-    const getClubText = useCallback(() =>
-    {
-        const totalDays = ((clubPeriods * 31) + clubDays);
-        const minutesUntilExpiration = minsTillExpire;
-
-        if(clubStatus !== ClubStatus.ACTIVE)
-        {
-            return LocalizeText('purse.clubdays.zero.amount.text');
-        }
-        else if((minutesUntilExpiration > -1) && (minutesUntilExpiration < (60 * 24)))
-        {
-            return FriendlyTime.shortFormat(minutesUntilExpiration * 60);
-        }
-        else
-        {
-            return FriendlyTime.shortFormat(totalDays * 86400);
-        }
-    }, [clubStatus, clubDays, clubPeriods, minsTillExpire]);
-
-    const getInfoText = useCallback(() =>
-    {
-        switch(clubStatus)
-        {
-            case ClubStatus.ACTIVE:
-                return LocalizeText('hccenter.status.' + clubStatus + '.info',
-                    ['timeleft', 'joindate', 'streakduration'],
-                    [getClubText(), kickbackData.firstSubscriptionDate, FriendlyTime.shortFormat(kickbackData.currentHcStreak * 86400)]);
-            case ClubStatus.EXPIRED:
-                return LocalizeText('hccenter.status.' + clubStatus + '.info', ['joindate'], [kickbackData.firstSubscriptionDate])
-            default:
-                return LocalizeText('hccenter.status.' + clubStatus + '.info');
-        }
-    }, [clubStatus, kickbackData, getClubText]);
-
-    const getHcPaydayTime = useCallback(() =>
-    {
-        if(kickbackData.timeUntilPayday < 60) return LocalizeText('hccenter.special.time.soon');
-        return FriendlyTime.shortFormat(kickbackData.timeUntilPayday * 60);
-    }, [kickbackData]);
-
-    const getHcPaydayAmount = useCallback(() =>
-    {
-        return LocalizeText('hccenter.special.sum', ['credits'], [(kickbackData.creditRewardForStreakBonus + kickbackData.creditRewardForMonthlySpent).toString()])
-    }, [kickbackData])
-
     if(!isVisible) return null;
 
     const popover = (
@@ -206,30 +217,34 @@ export const HcCenterView: FC<{}> = props =>
     return (
         <NitroCardView theme="primary-slim" className="nitro-hc-center">
             <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } onCloseClick={ () => setIsVisible(false) } />
-            <div className="bg-muted p-2 position-relative">
+            <Flex position="relative" className="bg-muted p-2">
-                <div className="hc-logo mb-2" />
+                <Column gap={ 1 }>
-                <button className="btn btn-success" onClick={ () => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.buy']) } }>
+                    <div className="hc-logo" />
-                    {LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.extend' : 'hccenter.btn.buy')}
+                    <Flex>
-                </button>
+                        <Button variant="success" onClick={ event => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.buy']) } }>
-                <div className="position-absolute end-0 p-4 top-0 habbo-avatar">
+                            { LocalizeText((clubStatus === ClubStatus.ACTIVE) ? 'hccenter.btn.extend' : 'hccenter.btn.buy') }
+                        </Button>
+                    </Flex>
+                </Column>
+                <Base position="absolute" className="end-0 p-4 top-0 habbo-avatar">
                     <LayoutAvatarImageView figure={ userFigure } direction={ 4 } scale={ 2 } />
-                </div>
+                </Base>
-            </div>
+            </Flex>
             <NitroCardContentView>
-                <div className="d-flex flex-row mb-1">
+                <Flex gap={ 2 }>
                     <LayoutBadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
-                    <div className="w-100 text-black streak-info">
+                    <Column size={ 5 } className="streak-info" gap={ 0 }>
-                        <h6 className="mb-0">{LocalizeText('hccenter.status.' + clubStatus)}</h6>
+                        <Text>{ LocalizeText('hccenter.status.' + clubStatus) }</Text>
-                        <div dangerouslySetInnerHTML={{ __html: getInfoText() }} />
+                        <Text dangerouslySetInnerHTML={{ __html: getInfoText() }} />
-                    </div>
+                    </Column>
-                </div>
+                </Flex>
                 { GetConfiguration('hc.center')['payday.info'] &&
-                    <div className="d-flex flex-row align-items-center mb-n2">
+                    <Flex alignItems="center">
-                        <div className="rounded-start bg-primary p-2 payday-special mb-1 d-flex flex-column">
+                        <Column className="rounded-start bg-primary p-2 payday-special mb-1">
                             <h4 className="mb-1">{LocalizeText('hccenter.special.title')}</h4>
                             <div>{LocalizeText('hccenter.special.info')}</div>
                             <div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{LocalizeText('hccenter.special.infolink')}</div>
-                        </div>
+                        </Column>
                         <div className="payday flex-shrink-0 p-2">
                             <h5 className="mb-2 ms-2">{LocalizeText('hccenter.special.time.title')}</h5>
                             <div className="d-flex flex-row mb-2">
@@ -250,7 +265,7 @@ export const HcCenterView: FC<{}> = props =>
                                 </div>
                             }
                         </div>
-                    </div>
+                    </Flex>
                 }
                 {GetConfiguration('hc.center')['gift.info'] &&
                     <div className="rounded bg-success p-2 d-flex flex-row mb-0">

src/views/nitropedia/NitropediaView.tsx

@@ -1,8 +1,7 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { AddEventLinkTracker, GetConfiguration, RemoveLinkEventTracker } from '../../api';
+import { AddEventLinkTracker, GetConfiguration, NotificationUtilities, RemoveLinkEventTracker } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
-import { NotificationUtilities } from '../notification-center/common/NotificationUtilities';
 
 const newLineRegex = /\n\r|\n|\r/mg;
 export const NitropediaView: FC<{}> = props =>
@@ -39,7 +38,9 @@ export const NitropediaView: FC<{}> = props =>
         if(event.target instanceof HTMLAnchorElement)
         {
             event.preventDefault();
+            
             const link = event.target.href;
+
             NotificationUtilities.openUrl(link);
         }
         

src/views/notification-center/NotificationCenterMessageHandler.types.ts

@@ -1,2 +0,0 @@
-export interface INotificationCenterMessageHandlerProps
-{}

src/views/notification-center/NotificationCenterView.types.ts

@@ -1,10 +0,0 @@
-export interface NotificationCenterViewProps
-{
-    
-}
-
-export class NotificationViewProps
-{
-    inTray?: boolean = false;
-    onButtonClick: (action: string) => void;
-}