added help center

src/events/help/HelpEvent.ts

@@ -0,0 +1,8 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class HelpEvent extends NitroEvent
+{
+    public static SHOW_HELP_CENTER: string = 'HCE_SHOW_HELP_CENTER';
+    public static HIDE_HELP_CENTER: string = 'HCE_HIDE_HELP_CENTER';
+    public static TOGGLE_HELP_CENTER: string = 'HCE_TOGGLE_HELP_CENTER';
+}

src/events/help/HelpReportUserEvent.ts

@@ -0,0 +1,27 @@
+import { HelpEvent } from './HelpEvent';
+
+export class HelpReportUserEvent extends HelpEvent
+{
+    public static REPORT_USER: string = 'HCE_HELP_CENTER_REPORT_USER';
+    
+    private _reportedUserId: number;
+    private _reportedUsername: string;
+
+    constructor(userId: number, username: string)
+    {
+        super(HelpReportUserEvent.REPORT_USER);
+
+        this._reportedUserId = userId;
+        this._reportedUsername = username;
+    }
+
+    public get reportedUserId(): number
+    {
+        return this._reportedUserId;
+    }
+
+    public get reportedUsername(): string
+    {
+        return this._reportedUsername;
+    }
+}

src/views/Styles.scss

@@ -21,3 +21,4 @@
 @import './user-settings/UserSettingsView';
 @import './user-profile/UserProfileVew';
 @import './chat-history/ChatHistoryView';
+@import './help/HelpView';

src/views/chat-history/ChatHistoryMessageHandler.tsx

@@ -54,7 +54,7 @@ export const ChatHistoryMessageHandler: FC<{}> = props =>
          
         const timeString = currentDate();
 
-        const entry: IChatEntry = { id: -1, entityId: userData.webID, name: userData.name, look: userData.figure, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT };
+        const entry: IChatEntry = { id: -1, entityId: userData.webID, name: userData.name, look: userData.figure, entityType: userData.type, message: event.message, timestamp: timeString, type: ChatEntryType.TYPE_CHAT, roomId: roomSession.roomId };
 
         addChatEntry(entry);
     }, [addChatEntry]);
@@ -89,7 +89,7 @@ export const ChatHistoryMessageHandler: FC<{}> = props =>
 
         if(needsRoomInsert)
         {
-            const chatEntry: IChatEntry = { id: -1, entityId: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO };
+            const chatEntry: IChatEntry = { id: -1, entityId: parser.data.roomId, name: parser.data.roomName, timestamp: currentDate(), type: ChatEntryType.TYPE_ROOM_INFO, roomId: parser.data.roomId };
 
             addChatEntry(chatEntry);
 

src/views/chat-history/ChatHistoryView.tsx

@@ -5,10 +5,13 @@ import { ChatHistoryEvent } from '../../events/chat-history/ChatHistoryEvent';
 import { useUiEvent } from '../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ChatHistoryMessageHandler } from './ChatHistoryMessageHandler';
+import { ChatHistoryState } from './common/ChatHistoryState';
+import { SetChatHistory } from './common/GetChatHistory';
+import { RoomHistoryState } from './common/RoomHistoryState';
 import { ChatHistoryContextProvider } from './context/ChatHistoryContext';
 import { ChatEntryType } from './context/ChatHistoryContext.types';
-import { ChatHistoryState } from './utils/ChatHistoryState';
-import { RoomHistoryState } from './utils/RoomHistoryState';
+
+
 
 export const ChatHistoryView: FC<{}> = props =>
 {
@@ -25,6 +28,8 @@ export const ChatHistoryView: FC<{}> = props =>
         const chatState = new ChatHistoryState();
         const roomState = new RoomHistoryState();
 
+        SetChatHistory(chatState);
+
         chatState.notifier = () => setChatHistoryUpdateId(prevValue => (prevValue + 1));
         roomState.notifier = () => setRoomHistoryUpdateId(prevValue => (prevValue + 1));
 

src/views/chat-history/common/GetChatHistory.ts

@@ -0,0 +1,7 @@
+import { IChatHistoryState } from '../context/ChatHistoryContext.types';
+
+let GLOBAL_CHATS: IChatHistoryState = null;
+
+export const SetChatHistory = (chatHistory: IChatHistoryState) => (GLOBAL_CHATS = chatHistory);
+
+export const GetChatHistory = () => GLOBAL_CHATS; 

src/views/chat-history/context/ChatHistoryContext.types.ts

@@ -24,6 +24,8 @@ export interface IChatEntry {
     name: string;
     look?: string;
     message?: string;
+    entityType?: number;
+    roomId: number;
     timestamp: string;
     type: number;
 }

src/views/help/HelpMessageHandler.tsx

@@ -1,12 +1,10 @@
-import { CallForHelpResultMessageEvent, FurnitureListItemParser, PetData } from '@nitrots/nitro-renderer';
+import { CallForHelpResultMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../api';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { NotificationAlertType } from '../notification-center/common/NotificationAlertType';
 import { NotificationUtilities } from '../notification-center/common/NotificationUtilities';
 import { GetCloseReasonKey } from './common/GetCloseReasonKey';
-let furniMsgFragments: Map<number, FurnitureListItemParser>[] = null;
-let petMsgFragments: Map<number, PetData>[] = null;
  
 export const HelpMessageHandler: FC<{}> = props =>
 {

src/views/help/HelpView.scss

@@ -0,0 +1,10 @@
+.nitro-help {
+    height: 400px;
+    width: 300px;
+
+    .index-image {
+        background: url('../../assets/images/help/help_index.png');
+        width: 126px;
+        height: 105px;
+    }
+}

src/views/help/HelpView.tsx

@@ -1,11 +1,79 @@
-import { FC } from 'react';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../api';
+import { HelpEvent } from '../../events/help/HelpEvent';
+import { HelpReportUserEvent } from '../../events/help/HelpReportUserEvent';
+import { useUiEvent } from '../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { HelpContextProvider } from './context/HelpContext';
+import { IHelpReportState, initialReportState } from './context/HelpContext.types';
 import { HelpMessageHandler } from './HelpMessageHandler';
+import { DescribeReportView } from './views/DescribeReportView';
+import { HelpIndexView } from './views/HelpIndexView';
+import { SelectReportedChatsView } from './views/SelectReportedChatsView';
+import { SelectReportedUserView } from './views/SelectReportedUserView';
+import { SelectTopicView } from './views/SelectTopicView';
 
 export const HelpView: FC<{}> = props =>
 {
+    const [isVisible, setIsVisible] = useState(false);
+    const [ helpReportState, setHelpReportState ] = useState<IHelpReportState>(initialReportState);
+
+    const onHelpEvent = useCallback((event: HelpEvent) =>
+    {
+        setHelpReportState(initialReportState);
+
+        switch(event.type)
+        {
+            case HelpEvent.SHOW_HELP_CENTER:
+                setIsVisible(true);
+                break;
+            case HelpEvent.HIDE_HELP_CENTER:
+                setIsVisible(false);
+                break;
+            case HelpEvent.TOGGLE_HELP_CENTER:
+                setIsVisible(!isVisible);
+                break;
+            case HelpReportUserEvent.REPORT_USER:
+                const reportEvent = event as HelpReportUserEvent;
+                const reportState = Object.assign({}, helpReportState );
+                reportState.reportedUserId = reportEvent.reportedUserId;
+                reportState.currentStep = 2;
+                setHelpReportState(reportState);
+                setIsVisible(true);
+                break;
+        }
+    }, [helpReportState, isVisible]);
+
+    useUiEvent(HelpEvent.TOGGLE_HELP_CENTER, onHelpEvent);
+    useUiEvent(HelpEvent.SHOW_HELP_CENTER, onHelpEvent);
+    useUiEvent(HelpEvent.HIDE_HELP_CENTER, onHelpEvent);
+    useUiEvent(HelpReportUserEvent.REPORT_USER, onHelpEvent);
+
+    const CurrentStepView = useCallback(() =>
+    {
+        switch(helpReportState.currentStep)
+        {
+            case 0: return <HelpIndexView />
+            case 1: return <SelectReportedUserView />
+            case 2: return <SelectReportedChatsView />
+            case 3: return <SelectTopicView />
+            case 4: return <DescribeReportView />
+        }
+
+        return null;
+    }, [helpReportState.currentStep]);
+
     return (
-        <>
+        <HelpContextProvider value={ { helpReportState, setHelpReportState } }>
             <HelpMessageHandler />
-        </>
+            {isVisible &&
+                <NitroCardView className="nitro-help">
+                    <NitroCardHeaderView headerText={LocalizeText('help.button.cfh')} onCloseClick={() => setIsVisible(false)} />
+                    <NitroCardContentView className="text-black">
+                        <CurrentStepView />
+                    </NitroCardContentView>
+                </NitroCardView>
+            }
+        </HelpContextProvider>
     );
 }

src/views/help/common/IUser.ts

@@ -0,0 +1,5 @@
+export interface IUser
+{
+    id: number;
+    username: string;
+}

src/views/help/context/HelpContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, FC, useContext } from 'react';
+import { HelpContextProps, IHelpContext } from './HelpContext.types';
+
+const HelpContext = createContext<IHelpContext>({
+    helpReportState: null,
+    setHelpReportState: null
+});
+
+export const HelpContextProvider: FC<HelpContextProps> = props =>
+{
+    return <HelpContext.Provider value={ props.value }>{ props.children }</HelpContext.Provider>
+}
+
+export const useHelpContext = () => useContext(HelpContext);

src/views/help/context/HelpContext.types.ts

@@ -0,0 +1,33 @@
+import { ProviderProps } from 'react';
+import { IChatEntry } from '../../chat-history/context/ChatHistoryContext.types';
+
+export interface IHelpContext
+{
+    helpReportState: IHelpReportState;
+    setHelpReportState: React.Dispatch<React.SetStateAction<IHelpReportState>>;
+}
+
+export interface IHelpReportState {
+    reportedUserId: number;
+    reportedChats: IChatEntry[];
+    cfhCategory: number;
+    cfhTopic: number;
+    roomId: number;
+    message: string;
+    currentStep: number;
+}
+
+export const initialReportState: IHelpReportState =  {
+    reportedUserId: -1,
+    reportedChats: [],
+    cfhCategory: -1,
+    cfhTopic: -1,
+    roomId: -1,
+    message: '',
+    currentStep: 0
+}
+
+export interface HelpContextProps extends ProviderProps<IHelpContext>
+{
+
+}

src/views/help/views/DescribeReportView.tsx

@@ -0,0 +1,50 @@
+import { CallForHelpMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { HelpEvent } from '../../../events/help/HelpEvent';
+import { dispatchUiEvent, SendMessageHook } from '../../../hooks';
+import { useHelpContext } from '../context/HelpContext';
+
+export const DescribeReportView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const [message, setMessage] = useState('');
+
+    const submitReport = useCallback(() =>
+    {
+        if(message.length < 15) return;
+        
+        const reportState = Object.assign({}, helpReportState);
+
+        reportState.message = message;
+
+        setHelpReportState(reportState);
+
+        const roomId = reportState.reportedChats[0].roomId;
+        const chats: (string | number )[] = []; 
+        reportState.reportedChats.forEach(entry =>
+        {
+            chats.push(entry.entityId);
+            chats.push(entry.message);
+        });
+
+        SendMessageHook(new CallForHelpMessageComposer(message, reportState.cfhTopic, reportState.reportedUserId, roomId, chats));
+
+        dispatchUiEvent(new HelpEvent(HelpEvent.HIDE_HELP_CENTER));
+    }, [helpReportState, message, setHelpReportState]);
+
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <div className="text-wrap">{LocalizeText('help.cfh.input.text')}</div>
+            </div>
+
+            <div className="form-group mb-2">
+                <textarea className="form-control" value={message} onChange={event => setMessage(event.target.value)} />
+            </div>
+
+            <button className="btn btn-danger mt-2" type="button" disabled={message.length < 15} onClick={submitReport}>{LocalizeText('help.bully.submit')}</button>
+        </>
+    );
+}

src/views/help/views/HelpIndexView.tsx

@@ -0,0 +1,36 @@
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../api';
+import { useHelpContext } from '../context/HelpContext';
+
+export const HelpIndexView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    
+    const onReportClick = useCallback(() =>
+    {
+        const reportState = Object.assign({}, helpReportState );
+        reportState.currentStep = 1;
+        setHelpReportState(reportState);
+    },[helpReportState, setHelpReportState]);
+
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <div className="col-12"><h3>{LocalizeText('help.main.frame.title')}</h3></div>
+                <div className="index-image align-self-center"></div>
+                <p className="text-center">{LocalizeText('help.main.self.description')}</p>
+            </div>
+
+            <div className="d-grid gap-2 col-8 mx-auto">
+                <button className="btn btn-primary" type="button" onClick={onReportClick}>{LocalizeText('help.main.bully.subtitle')}</button>
+                <button className="btn btn-primary" type="button">{LocalizeText('help.main.help.title')}</button>
+                <button className="btn btn-primary" type="button">{LocalizeText('help.main.self.tips.title')}</button>
+            </div>
+
+            <div className="d-grid gap-2 col-8 mx-auto">
+                <button className="btn btn-link" type="button">{LocalizeText('help.main.my.sanction.status')}</button>
+            </div>
+
+        </>
+    )
+}

src/views/help/views/SelectReportedChatsView.tsx

@@ -0,0 +1,73 @@
+import { RoomObjectType } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { GetChatHistory } from '../../chat-history/common/GetChatHistory';
+import { ChatEntryType, IChatEntry } from '../../chat-history/context/ChatHistoryContext.types';
+import { useHelpContext } from '../context/HelpContext';
+
+export const SelectReportedChatsView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const [ selectedChats, setSelectedChats ] = useState<Map<number, IChatEntry>>(new Map());
+
+    const userChats = useMemo(() =>
+    {
+        return GetChatHistory().chats.filter(chat => (chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityId === helpReportState.reportedUserId) && (chat.entityType === RoomObjectType.USER))
+    }, [helpReportState.reportedUserId]);
+
+    const selectChat = useCallback((chatEntry: IChatEntry) =>
+    {
+        const chats = new Map(selectedChats);
+
+        if(chats.has(chatEntry.id))
+        {
+            chats.delete(chatEntry.id);
+        }
+
+        else
+        {
+            chats.set(chatEntry.id, chatEntry);
+        }
+
+        setSelectedChats(chats);
+
+    }, [selectedChats]);
+
+    const submitChats = useCallback(() =>
+    {
+        if(!selectedChats || selectedChats.size <= 0) return;
+
+        const reportState = Object.assign({}, helpReportState);
+
+        reportState.reportedChats = Array.from(selectedChats.values());
+        reportState.currentStep = 3;
+        setHelpReportState(reportState);
+
+    }, [helpReportState, selectedChats, setHelpReportState]);
+    
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <div className="text-wrap">{LocalizeText('help.emergency.chat_report.description')}</div>
+            </div>
+            
+            { userChats.length > 0 &&
+                <>
+                    <NitroCardGridView columns={1}>
+                        {userChats.map((chat, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={chat.id} onClick={() => selectChat(chat)} itemActive={selectedChats.has(chat.id)}>
+                                    <span>{chat.message}</span>
+                                </NitroCardGridItemView>
+                            )
+                        })}
+                    </NitroCardGridView>
+                    <button className="btn btn-secondary mt-2" type="button" disabled={selectedChats.size <= 0} onClick={submitChats}>{LocalizeText('help.emergency.main.submit.button')}</button>
+                </>
+            }
+        </>
+    );
+}

src/views/help/views/SelectReportedUserView.tsx

@@ -0,0 +1,78 @@
+import { RoomObjectType } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { GetChatHistory } from '../../chat-history/common/GetChatHistory';
+import { ChatEntryType } from '../../chat-history/context/ChatHistoryContext.types';
+import { IUser } from '../common/IUser';
+import { useHelpContext } from '../context/HelpContext';
+
+export const SelectReportedUserView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const [selectedUserId, setSelectedUserId] = useState(-1);
+
+    const availableUsers = useMemo(() =>
+    {
+        const users: Map<number, IUser> = new Map();
+
+        GetChatHistory().chats
+            .forEach(chat =>
+            {
+                if((chat.type === ChatEntryType.TYPE_CHAT) && (chat.entityType === RoomObjectType.USER))//todo: remove own chats
+                {
+                    if(!users.has(chat.entityId))
+                    {
+                        users.set(chat.entityId, { id: chat.entityId, username: chat.name })
+                    }
+                }
+            });
+
+        return Array.from(users.values());
+    }, []);
+
+    const submitUser = useCallback(() =>
+    {
+        if(selectedUserId <= 0) return;
+
+        const reportState = Object.assign({}, helpReportState);
+        reportState.reportedUserId = selectedUserId;
+        reportState.currentStep = 2;
+        setHelpReportState(reportState);
+    }, [helpReportState, selectedUserId, setHelpReportState]);
+
+    const selectUser = useCallback((userId: number) =>
+    {
+        if(selectedUserId === userId) setSelectedUserId(-1);
+        else setSelectedUserId(userId);
+    }, [selectedUserId]);
+
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <h3 className="fw-bold">{LocalizeText('help.emergency.main.step.two.title')}</h3>
+                <p>{(availableUsers.length > 0) ? LocalizeText('report.user.pick.user') : ''}</p>
+            </div>
+            {
+                (availableUsers.length <= 0) && <div>{LocalizeText('report.user.error.nolist')}</div>
+            }
+            {
+                (availableUsers.length > 0) &&
+                <>
+                    <NitroCardGridView columns={1}>
+                        {availableUsers.map((user, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={user.id} onClick={() => selectUser(user.id)} itemActive={( selectedUserId === user.id)}>
+                                    <span dangerouslySetInnerHTML={{ __html: (user.username) }} />
+                                </NitroCardGridItemView>
+                            )
+                        })}
+                    </NitroCardGridView>
+
+                    <button className="btn btn-secondary mt-2" type="button" disabled={selectedUserId <= 0} onClick={submitUser}>{LocalizeText('help.emergency.main.submit.button')}</button>
+                </>
+            }
+        </>
+    )
+}

src/views/help/views/SelectTopicView.tsx

@@ -0,0 +1,53 @@
+import { FC, useCallback, useMemo, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { GetCfhCategories } from '../../mod-tools/common/GetCFHCategories';
+import { useHelpContext } from '../context/HelpContext';
+
+export const SelectTopicView: FC<{}> = props =>
+{
+    const { helpReportState = null, setHelpReportState = null } = useHelpContext();
+    const [ selectedCategory, setSelectedCategory ] = useState(-1);
+    const [ selectedTopic, setSelectedTopic ] = useState(-1);
+
+    const cfhCategories = useMemo(() =>
+    {
+        return GetCfhCategories();
+    }, []);
+
+    const submitTopic = useCallback(() =>
+    {
+        if(selectedCategory < 0) return;
+        if(selectedTopic < 0 ) return;
+
+        const reportState = Object.assign({}, helpReportState);
+        reportState.cfhCategory = selectedCategory;
+        reportState.cfhTopic = cfhCategories[selectedCategory].topics[selectedTopic].id;
+        reportState.currentStep = 4;
+        setHelpReportState(reportState);
+    }, [cfhCategories, helpReportState, selectedCategory, selectedTopic, setHelpReportState]);
+    
+    return (
+        <>
+            <div className="d-grid col-12 mx-auto justify-content-center">
+                <div className="col-12"><h3 className="fw-bold">{LocalizeText('help.emergency.chat_report.subtitle')}</h3></div>
+                <div className="text-wrap">{LocalizeText('help.cfh.pick.topic')}</div>
+            </div>
+            <div className="d-grid gap-2 col-8 mx-auto overflow-auto">
+            {   (selectedCategory < 0) &&
+                cfhCategories.map((category, index) => 
+                    {
+                        return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedCategory(index)}>{LocalizeText(`help.cfh.reason.${category.name}`)}</button>
+                    })
+            }
+            { (selectedCategory >= 0 ) &&
+                cfhCategories[selectedCategory].topics.map((topic, index) =>
+                {
+                    return <button key={index} className="btn btn-danger" type="button" onClick={() => setSelectedTopic(index)}>{LocalizeText('help.cfh.topic.' + topic.id)}</button>
+                })
+            }
+            </div>
+            
+            <button className="btn btn-secondary mt-2" type="button" disabled={selectedTopic < 0} onClick={submitTopic}>{LocalizeText('help.emergency.main.submit.button')}</button>
+        </>
+    );
+}

src/views/mod-tools/ModToolsMessageHandler.tsx

@@ -7,6 +7,7 @@ import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRo
 import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
 import { CreateMessageHook, dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
+import { SetCfhCategories } from './common/GetCFHCategories';
 import { useModToolsContext } from './context/ModToolsContext';
 import { ModToolsActions } from './reducers/ModToolsReducer';
 
@@ -67,6 +68,7 @@ export const ModToolsMessageHandler: FC<{}> = props =>
 
         //todo: play ticket sound
         //GetNitroInstance().events.dispatchEvent(new NitroSoundEvent(NitroSoundEvent.PLAY_SOUND, sound)
+        console.log(parser);
     }, [dispatchModToolsState, tickets]);
 
     const onModeratorToolPreferencesEvent = useCallback((event: ModeratorToolPreferencesEvent) =>
@@ -140,6 +142,8 @@ export const ModToolsMessageHandler: FC<{}> = props =>
             }
         });
 
+        SetCfhCategories(categories);
+        
         console.log(parser);
     }, [dispatchModToolsState]);
 

src/views/mod-tools/ModToolsView.scss

@@ -1,5 +1,17 @@
 .nitro-mod-tools {
     width: 200px;
+
+    
+}
+
+.nitro-mod-tools-tickets
+{
+    width: 400px;
+    
+    .issues
+    {
+        height: 200px;
+    }
 }
 
 @import './views/room/room-tools/ModToolsRoomView';

src/views/mod-tools/common/GetCFHCategories.ts

@@ -0,0 +1,7 @@
+import { CallForHelpCategoryData } from '@nitrots/nitro-renderer';
+
+let cfhCategories: CallForHelpCategoryData[] = [];
+
+export const SetCfhCategories = (categories: CallForHelpCategoryData[]) => (cfhCategories = categories);
+
+export const GetCfhCategories = () => cfhCategories;

src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx

@@ -24,6 +24,7 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
     const openIssues = useMemo(() =>
     {
         if(!tickets) return [];
+        console.log(tickets);
         
         return tickets.filter(issue => issue.state === IssueMessageData.STATE_OPEN);
     }, [tickets]);

src/views/mod-tools/views/tickets/my-issues/ModToolsMyIssuesTabView.tsx

@@ -30,7 +30,7 @@ export const ModToolsMyIssuesTabView: FC<ModToolsMyIssuesTabViewProps> = props =
             <div className="col-sm-2 fw-bold">Opened</div>
             <div className="col-sm-2"></div>
         </div>
-        <div className="row w-100 h-100 issues">
+        <div className="row w-100 issues">
             <AutoSizer defaultWidth={400} defaultHeight={200}>
                 {({ height, width }) => 
                 {

src/views/mod-tools/views/tickets/open-issues/ModToolsOpenIssuesTabView.tsx

@@ -30,7 +30,7 @@ export const ModToolsOpenIssuesTabView: FC<ModToolsOpenIssuesTabViewProps> = pro
             <div className="col-sm-2 fw-bold">Opened</div>
             <div className="col-sm-2"></div>
         </div>
-        <div className="row w-100 h-100 issues">
+        <div className="row w-100 issues">
             <AutoSizer defaultWidth={400} defaultHeight={200}>
                 {({ height, width }) => 
                 {

src/views/mod-tools/views/tickets/picked-issues/ModToolsPickedIssuesTabView.tsx

@@ -30,7 +30,7 @@ export const ModToolsPickedIssuesTabView: FC<ModToolsPickedIssuesTabViewProps> =
             <div className="col-sm-2 fw-bold">Opened</div>
             <div className="col-sm-2 fw-bold">Picker</div>
         </div>
-        <div className="row w-100 h-100 issues">
+        <div className="row w-100 issues">
             <AutoSizer defaultWidth={400} defaultHeight={200}>
                 {({ height, width }) => 
                 {

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

@@ -40,7 +40,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
 
         for(let category of cfhCategories)
         {
-            for(let topic of category._Str_14841)
+            for(let topic of category.topics)
             {
                 values.push(topic)
             }

src/views/purse/PurseView.tsx

@@ -1,6 +1,7 @@
 import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetConfiguration, LocalizeText } from '../../api';
+import { HelpEvent } from '../../events/help/HelpEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { dispatchUiEvent } from '../../hooks';
 import { SendMessageHook } from '../../hooks/messages/message-event';
@@ -24,6 +25,11 @@ export const PurseView: FC<{}> = props =>
         dispatchUiEvent(new UserSettingsUIEvent(UserSettingsUIEvent.TOGGLE_USER_SETTINGS));
     }, []);
 
+    const handleHelpCenterClick = useCallback(() =>
+    {
+        dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
+    }, []);
+
     const displayedCurrencies = useMemo(() =>
     {
         return GetConfiguration<number[]>('system.currency.types', []);
@@ -140,7 +146,7 @@ export const PurseView: FC<{}> = props =>
                     </div>
                     <div className="col-2 px-0">
                         <div className="d-flex flex-column nitro-purse-buttons h-100 justify-content-center">
-                            <div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center cursor-pointer"><i className="icon icon-help"/></div>
+                            <div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center cursor-pointer" onClick={ handleHelpCenterClick }><i className="icon icon-help"/></div>
                             <div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center cursor-pointer" onClick={ handleUserSettingsClick } ><i className="fas fa-cogs"/></div>
                         </div>
                     </div>