add onclick handler to widget buttons

public/ui-config.json.example

@@ -20,19 +20,25 @@
         "show.avatar": true,
         "widgets": {
             "slot.1.widget": "promoarticle",
-            "slot.1.conf": "",
+            "slot.1.conf": {},
             "slot.2.widget": "widgetcontainer",
-            "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,texts:2021NitroPromo,btnLink:https://google.com",
+            "slot.2.conf": {
+                "image": "${image.library.url}web_promo_small/spromo_Canal_Bundle.png",
+                "texts": "2021NitroPromo",
+                "btnLink": "https://google.com"
+            },
             "slot.3.widget": "promoarticle",
-            "slot.3.conf": "",
+            "slot.3.conf": {},
             "slot.4.widget": "",
-            "slot.4.conf": "",
+            "slot.4.conf": {},
             "slot.5.widget": "",
-            "slot.5.conf": "",
+            "slot.5.conf": {},
             "slot.6.widget": "achievementcompetition_hall_of_fame",
-            "slot.6.conf": "",
+            "slot.6.conf": {
+                "campaign": "habboFameComp"
+            },
             "slot.7.widget": "",
-            "slot.7.conf": ""
+            "slot.7.conf": {}
         },
         "images": {
             "background": "${asset.url}/images/reception/stretch_blue.png",

src/components/hotel-view/HotelView.tsx

@@ -3,7 +3,7 @@ import { FC, useCallback, useState } from 'react';
 import { GetConfiguration, GetConfigurationManager } from '../../api';
 import { LayoutAvatarImageView } from '../../common';
 import { BatchUpdates, UseMessageEventHook, UseRoomSessionManagerEvent } from '../../hooks';
-import { WidgetSlotView } from './views/widget-slot/WidgetSlotView';
+import { WidgetSlotView } from './views/widgets/WidgetSlotView';
 export const HotelView: FC<{}> = props =>
 {
     const [isVisible, setIsVisible] = useState(true);
@@ -120,7 +120,7 @@ export const HotelView: FC<{}> = props =>
             <div className="left position-absolute" style={(left && left.length) ? { backgroundImage: `url(${left})` } : {}} />
             <div className="right-repeat position-absolute" style={(rightRepeat && rightRepeat.length) ? { backgroundImage: `url(${rightRepeat})` } : {}} />
             <div className="right position-absolute" style={(right && right.length) ? { backgroundImage: `url(${right})` } : {}} />
-            {GetConfiguration("hotelview")["show.avatar"] && (
+            {GetConfiguration('hotelview')['show.avatar'] && (
                 <div className="avatar-image">
                     <LayoutAvatarImageView figure={userFigure} direction={2} />
                 </div>

src/components/hotel-view/views/widget-slot/WidgetSlotView.types.ts

@@ -1,8 +0,0 @@
-import { DetailsHTMLAttributes } from 'react';
-
-export interface WidgetSlotViewProps extends DetailsHTMLAttributes<HTMLDivElement>
-{
-    widgetType: string;
-    widgetSlot: number;
-    widgetConf: string;
-}

src/components/hotel-view/views/widgets/GetWidgetLayout.tsx

@@ -1,10 +1,16 @@
 import { FC } from 'react';
 import { BonusRareWidgetView } from './bonus-rare/BonusRareWidgetView';
-import { GetWidgetLayoutProps } from './GetWidgetLayout.types';
 import { HallOfFameWidgetView } from './hall-of-fame/HallOfFameWidgetView';
 import { PromoArticleWidgetView } from './promo-article/PromoArticleWidgetView';
 import { WidgetContainerView } from './widget-container/WidgetContainerView';
 
+export interface GetWidgetLayoutProps
+{
+  widgetType: string;
+  slot: number;
+  widgetConf: any;
+}
+
 export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
 {
   switch(props.widgetType)

src/components/hotel-view/views/widgets/GetWidgetLayout.types.ts

@@ -1,6 +0,0 @@
-export interface GetWidgetLayoutProps
-{
-  widgetType: string;
-  slot: number;
-  widgetConf: string;
-}

src/components/hotel-view/views/widgets/WidgetSlotView.tsx

@@ -1,6 +1,12 @@
-import { FC } from 'react';
+import { DetailsHTMLAttributes, FC } from 'react';
-import { GetWidgetLayout } from '../widgets/GetWidgetLayout';
+import { GetWidgetLayout } from './GetWidgetLayout';
-import { WidgetSlotViewProps } from './WidgetSlotView.types';
+
+export interface WidgetSlotViewProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    widgetType: string;
+    widgetSlot: number;
+    widgetConf: any;
+}
 
 export const WidgetSlotView: FC<WidgetSlotViewProps> = props =>
 {

src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx

@@ -2,7 +2,9 @@ import { BonusRareInfoMessageEvent, GetBonusRareInfoMessageComposer } from '@nit
 import { FC, useCallback, useEffect, useState } from 'react';
 import { SendMessageComposer } from '../../../../../api';
 import { UseMessageEventHook } from '../../../../../hooks';
-import { BonusRareWidgetViewProps } from './BonusRareWidgetView.types';
+
+export interface BonusRareWidgetViewProps
+{}
 
 export const BonusRareWidgetView: FC<BonusRareWidgetViewProps> = props =>
 {

src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts

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

src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx

@@ -1,7 +1,13 @@
+import { HallOfFameEntryData } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
 import { LayoutAvatarImageView, UserProfileIconView } from '../../../../../common';
-import { HallOfFameItemViewProps } from './HallOfFameItemView.types';
+
+export interface HallOfFameItemViewProps
+{
+    data: HallOfFameEntryData;
+    level: number;
+}
 
 export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
 {

src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts

@@ -1,7 +0,0 @@
-import { HallOfFameEntryData } from '@nitrots/nitro-renderer';
-
-export interface HallOfFameItemViewProps
-{
-    data: HallOfFameEntryData;
-    level: number;
-}

src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx

@@ -7,7 +7,7 @@ import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
 
 export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
 {
-    const { slot = -1, conf = '' } = props;
+    const { slot = -1, conf = null } = props;
     const [ data, setData ] = useState<CommunityGoalHallOfFameData>(null);
 
     const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) =>
@@ -21,7 +21,8 @@ export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
 
     useEffect(() =>
     {
-        SendMessageComposer(new GetCommunityGoalHallOfFameMessageComposer(conf));
+        const campaign: string = conf ? conf['campaign'] : '';  
+        SendMessageComposer(new GetCommunityGoalHallOfFameMessageComposer(campaign));
     }, [ conf ]);
 
     if(!data) return null;

src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx

@@ -1,8 +1,10 @@
 import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { LocalizeText, SendMessageComposer } from '../../../../../api';
+import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../api';
 import { UseMessageEventHook } from '../../../../../hooks';
-import { PromoArticleWidgetViewProps } from './PromoArticleWidgetView.types';
+
+export interface PromoArticleWidgetViewProps
+{}
 
 export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
 {
@@ -46,7 +48,7 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
 					<div className="col-3 d-flex flex-column h-100">
 						<h3 className="my-0">{articles[index].title}</h3>
 						<b>{ articles[index].bodyText }</b>
-						<button className="btn btn-sm mt-auto btn-gainsboro">{ articles[index].buttonText }</button>
+						<button className="btn btn-sm mt-auto btn-gainsboro" onClick={event => NotificationUtilities.openUrl(articles[index].linkContent)}>{ articles[index].buttonText }</button>
 					</div>
           		</div>
        		}

src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts

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

src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx

@@ -1,32 +1,18 @@
-import { FC, useCallback, useMemo } from 'react';
+import { FC, useCallback } from 'react';
-import { GetConfigurationManager, LocalizeText } from '../../../../../api';
+import { GetConfigurationManager, LocalizeText, NotificationUtilities } from '../../../../../api';
-import { WidgetContainerViewProps } from './WidgetContainerView.types';
+
+export interface WidgetContainerViewProps
+{
+    conf: any;
+}
 
 export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
 {
     const { conf = null } = props;
 
-    const config = useMemo(() =>
-    {
-        const config = {};
-
-        if(!conf || !conf.length) return config;
-
-        let options = conf.split(',');
-
-        options.forEach(option =>
-        {
-            let [ key, value ] = option.split(':');
-
-            if(key && value) config[key] = value;
-        });
-
-        return config;
-    }, [ conf ]);
-
     const getOption = useCallback((key: string) =>
     {
-        const option = config[key];
+        const option = conf[key];
 
         if(!option) return null;
 
@@ -37,7 +23,7 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
         }
 
         return option;
-    }, [ config ]);
+    }, [ conf ]);
 
   	return (
         <div className="widgetcontainer widget d-flex flex-row overflow-hidden">
@@ -45,7 +31,7 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
             <div className="d-flex flex-column align-self-center">
                 <h3 className="my-0">{LocalizeText(`landing.view.${getOption('texts')}.header`)}</h3>
                 <i>{ LocalizeText(`landing.view.${getOption('texts')}.body`) }</i>
-                <button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto">{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
+                <button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto" onClick={event => NotificationUtilities.openUrl(getOption('btnLink'))}>{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
             </div>
     	</div>
   	);

src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts

@@ -1,4 +0,0 @@
-export interface WidgetContainerViewProps
-{
-    conf: string;
-}