changes

public/configuration.json

@@ -91,8 +91,8 @@
         "widgets": {
             "slot.1.widget": "promoarticle",
             "slot.1.conf": "",
-            "slot.2.widget": "",
-            "slot.2.conf": "",
+            "slot.2.widget": "widgetcontainer",
+            "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,btn:HelloHELLO,btnLink:https://google.com/",
             "slot.3.widget": "",
             "slot.3.conf": "",
             "slot.4.widget": "",

src/assets/styles/bootstrap/_variables.scss

@@ -80,6 +80,7 @@ $cello-light:   #21516e !default;
 $cello-dark:    #1e465e !default;
 $pale-sky:      #677181 !default;
 $oslo-gray:     #8F9297 !default;
+$gainsboro:     #d9d9d9 !default;
 
 $success:       $green !default;
 $info:          $cyan !default;
@@ -122,7 +123,8 @@ $theme-colors: (
   "white":      $white,
   "black":      $black,
   "muted":      $muted,
-  "purple":     $purple
+  "purple":     $purple,
+  "gainsboro":  $gainsboro
 ) !default;
 // scss-docs-end theme-colors-map
 

src/views/hotel-view/HotelView.scss

@@ -95,3 +95,4 @@
 
 @import './views/widgets/promo-article/PromoArticleWidgetView.scss';
 @import './views/widgets/bonus-rare/BonusRareWidgetView.scss';
+@import './views/widgets/widgetcontainer/WidgetContainerView.scss'

src/views/hotel-view/HotelView.tsx

@@ -44,9 +44,10 @@ export const HotelView: FC<HotelViewProps> = props =>
                         <WidgetSlotView
                             widgetSlot={ 1 }
                             widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 1 + '.widget']}
-                            widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 1 +'.conf']}
+                            widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 1 + '.conf']}
+                            className="col-6"
                         />
-                        <div className="row mx-0">
+                        <div className="col-12 row mx-0">
                             <WidgetSlotView
                                 widgetSlot={ 2 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.widget']}

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

@@ -3,6 +3,7 @@ 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 './widgetcontainer/WIdgetContainerView';
 
 export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
 {
@@ -14,6 +15,8 @@ export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
       return <HallOfFameWidgetView slot={props.slot} conf={props.widgetConf} />;
     case "bonusrare":
       return <BonusRareWidgetView />;
+    case "widgetcontainer":
+      return <WidgetContainerView conf={props.widgetConf} />
     default:
       return null;
   }

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

@@ -37,15 +37,16 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
 			</div>
 		  	<div className="d-flex flex-row mb-1">
 				{articles && (articles.length > 0) && articles.map((article, ind) =>
-					<div className={`promo-articles-bullet ` + (article === articles[index] ? 'promo-articles-bullet-active' : '')} key={article.id} onClick={event => handleSelect(ind)} />
+					<div className={`promo-articles-bullet cursor-pointer ` + (article === articles[index] ? 'promo-articles-bullet-active' : '')} key={article.id} onClick={event => handleSelect(ind)} />
 				)}
 			</div>
     		{articles && articles[index] &&
 				<div className="promo-article d-flex flex-row row mx-0">
 			  		<div className="promo-article-image" style={ {backgroundImage: `url(${articles[index].imageUrl})`} }/>
-					<div className="col-3">
+					<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>
 					</div>
           		</div>
        		}

src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx

@@ -0,0 +1,47 @@
+import { FC, useCallback, useMemo } from 'react';
+import { GetConfigurationManager } from '../../../../../api/core/';
+import { WidgetContainerViewProps } from './WidgetContainerView.types';
+
+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];
+
+        if(!option) return null;
+
+        switch(key)
+        {
+            case 'image':
+                return GetConfigurationManager().interpolate(option);
+        }
+
+        return option;
+    }, [ config ]);
+
+  	return (
+        <div className="widgetcontainer widget">
+            { getOption('image') }
+    	</div>
+  	);
+}

src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.types.ts

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