add my sanction status view

src/views/help/HelpView.scss

@@ -8,3 +8,7 @@
         height: 105px;
     }
 }
+
+.nitro-cfh-sanction-status {
+    width: 400px;
+}

src/views/help/HelpView.tsx

@@ -9,6 +9,7 @@ import { IHelpReportState, initialReportState } from './context/HelpContext.type
 import { HelpMessageHandler } from './HelpMessageHandler';
 import { DescribeReportView } from './views/DescribeReportView';
 import { HelpIndexView } from './views/HelpIndexView';
+import { SanctionSatusView } from './views/SanctionStatusView';
 import { SelectReportedChatsView } from './views/SelectReportedChatsView';
 import { SelectReportedUserView } from './views/SelectReportedUserView';
 import { SelectTopicView } from './views/SelectTopicView';
@@ -74,6 +75,7 @@ export const HelpView: FC<{}> = props =>
                     </NitroCardContentView>
                 </NitroCardView>
             }
+            <SanctionSatusView />
         </HelpContextProvider>
     );
 }

src/views/help/views/HelpIndexView.tsx

@@ -1,5 +1,7 @@
+import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../../api';
+import { SendMessageHook } from '../../../hooks';
 import { useHelpContext } from '../context/HelpContext';
 
 export const HelpIndexView: FC<{}> = props =>
@@ -13,6 +15,11 @@ export const HelpIndexView: FC<{}> = props =>
         setHelpReportState(reportState);
     },[helpReportState, setHelpReportState]);
 
+    const onRequestMySanctionStatusClick = useCallback(() =>
+    {
+        SendMessageHook(new GetCfhStatusMessageComposer(false));
+    }, []);
+
     return (
         <>
             <div className="d-grid col-12 mx-auto justify-content-center">
@@ -23,12 +30,12 @@ export const HelpIndexView: FC<{}> = props =>
 
             <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" disabled={true}>{LocalizeText('help.main.help.title')}</button>
-                <button className="btn btn-primary" type="button">{LocalizeText('help.main.self.tips.title')}</button>
+                <button className="btn btn-primary" type="button" disabled={true}>{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>
+                <button className="btn btn-link" type="button" onClick={onRequestMySanctionStatusClick}>{LocalizeText('help.main.my.sanction.status')}</button>
             </div>
 
         </>

src/views/help/views/SanctionStatusView.tsx

@@ -0,0 +1,85 @@
+import { SanctionStatusEvent, SanctionStatusMessageParser } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { CreateMessageHook } from '../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
+
+export const SanctionSatusView:FC<{}> = props =>
+{
+    const [ sanctionInfo, setSanctionInfo ] = useState<SanctionStatusMessageParser>(null);
+    
+    const onSanctionStatusEvent = useCallback((event: SanctionStatusEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        setSanctionInfo(parser);
+    }, []);
+    
+    CreateMessageHook(SanctionStatusEvent, onSanctionStatusEvent);
+
+    const sanctionLocalization = useCallback((param: string, sanctionName: string, length?: number) =>
+    {
+        let localizationName = `help.sanction.${param}`;
+
+        switch(sanctionName)
+        {
+            case 'ALERT':
+                localizationName = (localizationName + '.alert');
+                break;
+            case 'MUTE':
+                localizationName = (localizationName + '.mute');
+                break;
+            case 'BAN_PERMANENT':
+                localizationName = (localizationName + '.permban');
+                break;
+            default:
+                localizationName = (localizationName + '.ban');
+                if(length > 24)
+                {
+                    localizationName = (localizationName + '.days');
+                    return LocalizeText(localizationName, ['days'], [(length / 24).toString()]);
+                }
+        }
+
+        return LocalizeText(localizationName, ['hours'], [length.toString()]);
+    }, []);
+    
+    if(!sanctionInfo) return null;
+    
+    return (
+        <NitroCardView className="nitro-cfh-sanction-status">
+            <NitroCardHeaderView headerText={LocalizeText('help.sanction.info.title')} onCloseClick={() => setSanctionInfo(null)} />
+            <NitroCardContentView className="text-black">
+                <div className="d-grid gap-2 col-12 mx-auto justify-content-start">
+                    {(sanctionInfo.sanctionReason === 'cfh.reason.EMPTY') 
+                        ? <div className="col-12 fw-bold">{LocalizeText('help.sanction.current.none')}</div>
+                        : <>
+                            {((sanctionInfo.probationHoursLeft > 0) || (sanctionInfo.isSanctionActive)) &&
+                                <div className="col-12 fw-bold">{LocalizeText('help.sanction.probation.reminder')}</div>
+                            }
+                            <div className={`col-12 fw-bold ${sanctionInfo.isSanctionNew ? 'text-danger' : ''}`}>
+                                {LocalizeText('help.sanction.last.sanction')} {sanctionLocalization('current', sanctionInfo.sanctionName, sanctionInfo.sanctionLengthHours)}
+                            </div>
+                            <div className="col-12">{LocalizeText('generic.start.time')} {sanctionInfo.sanctionCreationTime}</div>
+                            <div className="col-12">{LocalizeText('generic.reason')} {sanctionInfo.sanctionReason}</div>
+                            <div className="col-12">{LocalizeText('help.sanction.probation.days.left')} {Math.trunc((sanctionInfo.probationHoursLeft / 24)) + 1}</div>
+                        </>
+                    }
+                    { ((sanctionInfo.hasCustomMute) && (!(sanctionInfo.isSanctionActive))) &&
+                        <div className="col-12 fw-bold">{LocalizeText('help.sanction.custom.mute')}</div>
+                    }
+                    { (sanctionInfo.tradeLockExpiryTime && sanctionInfo.tradeLockExpiryTime.length > 0) &&
+                        <div className="col-12 fw-bold">{LocalizeText('trade.locked.until')} {sanctionInfo.tradeLockExpiryTime}</div>
+                    }
+
+                    <div className="col-12">{sanctionLocalization('next', sanctionInfo.nextSanctionName, sanctionInfo.nextSanctionLengthHours)}</div>
+                </div>
+                <div className="d-grid gap-2 col-8 mx-auto mt-2">
+                    <button className="btn btn-success" type="button" onClick={() => setSanctionInfo(null)}>{LocalizeText('habbo.way.ok.button')}</button>
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+    )
+}