@learningpool/ui 1.14.0 → 1.15.1

package/components/stream/AppHub/AppHub.js

@@ -27,6 +27,7 @@ import AppHubCustom from './AppHubCustom';
 import { AppHubPanel, AppHubTitle, AppHubHeader, AppHubRow } from './AppHubStyles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Constants } from './constants';
+import { renderBannerAdvertRow } from './AppHubBannerAdvert';
 var AppHub = function (props) {
     var isPageLayout = props.isPageLayout, localization = props.localization, customLinkBgColor = props.customLinkBgColor, data = props.data;
     var messages = __assign(__assign({}, defaultMessages), localization);
@@ -34,6 +35,9 @@ var AppHub = function (props) {
         var _a, _b;
         var type = rowData.type, items = rowData.items, title = rowData.title, addButton = rowData.addButton;
         switch (type) {
+            case Constants.DataRowType.BannerAdvert: {
+                return (renderBannerAdvertRow(rowData, rowIndex));
+            }
             case Constants.DataRowType.Product: {
                 return (_jsxs(AppHubRow, { children: [title && _jsx(AppHubHeader
                         // @ts-ignore

package/components/stream/AppHub/AppHubAdvertStyles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledAdvertPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "outlined" | "elevation" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledAdvertLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const StyledAdvertImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/components/stream/AppHub/AppHubAdvertStyles.js

@@ -0,0 +1,10 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '@mui/material/styles';
+import { Paper } from '@mui/material';
+export var StyledAdvertPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 138px;\n  overflow: hidden;\n  position: relative;\n  box-shadow: 0 0 0 1px #ddd;\n  border-radius: 10px;\n  border: #ddd;\n  transition: all 180ms ease;\n"], ["\n  width: 100%;\n  height: 138px;\n  overflow: hidden;\n  position: relative;\n  box-shadow: 0 0 0 1px #ddd;\n  border-radius: 10px;\n  border: #ddd;\n  transition: all 180ms ease;\n"])));
+export var StyledAdvertLink = styled('a')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: block;\n  width: 100%;\n  height: 100%;\n"])));
+export var StyledAdvertImage = styled('img')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/components/stream/AppHub/AppHubBannerAdvert.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IApplicationHubRowProps } from '../../../types/components/stream/AppHub';
+export declare const renderBannerAdvertRow: (rowData: IApplicationHubRowProps, rowIndex: number) => JSX.Element | null;

package/components/stream/AppHub/AppHubBannerAdvert.js

@@ -0,0 +1,120 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { AppHubRow } from './AppHubStyles';
+import Grid from '@mui/material/Unstable_Grid2';
+import { StyledAdvertPaper, StyledAdvertLink, StyledAdvertImage } from './AppHubAdvertStyles';
+var addUtmParams = function (baseUrl, source, medium, campaign) {
+    try {
+        var url = new URL(baseUrl);
+        url.searchParams.append('utm_source', source);
+        url.searchParams.append('utm_medium', medium);
+        url.searchParams.append('utm_campaign', campaign);
+        return url.toString();
+    }
+    catch (error) {
+        console.error('Invalid Banner Advert URL provided:', error);
+        return baseUrl;
+    }
+};
+var checkImageExists = function (url) {
+    return new Promise(function (resolve) {
+        var img = new window.Image();
+        var timeoutId = setTimeout(function () {
+            resolve(false);
+        }, 5000);
+        img.onload = function () {
+            clearTimeout(timeoutId);
+            resolve(true);
+        };
+        img.onerror = function (error) {
+            clearTimeout(timeoutId);
+            console.error('Banner Image failed to load:', url, error);
+            resolve(false);
+        };
+        img.src = url;
+    });
+};
+export var renderBannerAdvertRow = function (rowData, rowIndex) {
+    var items = rowData.items;
+    var _a = useState([]), validAdverts = _a[0], setValidAdverts = _a[1];
+    useEffect(function () {
+        var validateImages = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var validatedItems;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, Promise.all(items.map(function (item) { return __awaiter(void 0, void 0, void 0, function () {
+                            var isValid;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!item.hubImageUrl) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, checkImageExists(item.hubImageUrl)];
+                                    case 1:
+                                        isValid = _a.sent();
+                                        return [2 /*return*/, isValid ? item : null];
+                                    case 2: return [2 /*return*/, null];
+                                }
+                            });
+                        }); }))];
+                    case 1:
+                        validatedItems = _a.sent();
+                        setValidAdverts(validatedItems.filter(function (item) { return item !== null; }));
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        validateImages();
+    }, [items]);
+    if (validAdverts.length === 0) {
+        console.error('No valid images found for banner adverts');
+        return null; // Don't render the row if no valid images
+    }
+    return (_jsx(AppHubRow, { children: _jsx(Grid, __assign({ container: true, spacing: 2 }, { children: validAdverts.map(function (item, index) { return (_jsx(Grid, __assign({ xs: 12 }, { children: _jsx(StyledAdvertPaper, __assign({ elevation: 0 }, { children: _jsx(StyledAdvertLink, __assign({ href: addUtmParams(item.basePromoUrl, 'stream-home', 'App-Hub-Banner-Advert', item.name), target: "_blank" }, { children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText }) })) })) }), index)); }) })) }, "row_".concat(rowIndex)));
+};

package/components/stream/AppHub/AppHubStyles.js

@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { styled } from '@mui/material/styles';
 import { Paper, Box, Typography } from '../../../index';
 export var AppHubPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1rem;\n  max-width: 1000px;\n"], ["\n  padding: 1rem;\n  max-width: 1000px;\n"])));
-export var AppHubRow = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 5rem 0 0;\n"], ["\n  margin: 5rem 0 0;\n"])));
-export var AppHubTitle = styled(Typography)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 2rem;\n  font-weight: 700;\n  line-height: 1.3;\n  color: ", ";\n  margin-bottom: 2rem;\n"], ["\n  font-size: 2rem;\n  font-weight: 700;\n  line-height: 1.3;\n  color: ", ";\n  margin-bottom: 2rem;\n"])), function (props) { return props.theme.palette.text.primary; });
+export var AppHubRow = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 2rem 0 0;\n"], ["\n  margin: 2rem 0 0;\n"])));
+export var AppHubTitle = styled(Typography)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 2rem;\n  font-weight: 700;\n  line-height: 1.3;\n  color: ", ";\n  margin-bottom: 0.5rem;\n"], ["\n  font-size: 2rem;\n  font-weight: 700;\n  line-height: 1.3;\n  color: ", ";\n  margin-bottom: 0.5rem;\n"])), function (props) { return props.theme.palette.text.primary; });
 export var AppHubHeader = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 500;\n  color: ", ";\n  margin: 0 0 1rem;\n"], ["\n  font-size: 1rem;\n  font-weight: 500;\n  color: ", ";\n  margin: 0 0 1rem;\n"])), function (props) { return props.theme.palette.text.secondary; });
 export var StyledPaper = styled(Paper)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n"])));
 export var StyledBox = styled(Box)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));

package/components/stream/AppHub/constants.d.ts

@@ -3,6 +3,7 @@ export declare const Constants: Readonly<{
     DataRowType: {
         Product: string;
         CustomLink: string;
+        BannerAdvert: string;
     };
     AssetsUrl: "https://uuicdn.learningpool.com/";
     AddButtonOrder: {
@@ -83,3 +84,8 @@ export declare const hubSupportItems: {
     url: string;
     icon: JSX.Element;
 }[];
+export declare const hubBannerAdverts: {
+    name: string;
+    imageUrl: string;
+    url: string;
+}[];

package/components/stream/AppHub/constants.js

@@ -3,7 +3,8 @@ import HomeIcon from '@mui/icons-material/Home';
 export var Constants = Object.freeze({
     DataRowType: {
         Product: 'product',
-        CustomLink: 'custom-link'
+        CustomLink: 'custom-link',
+        BannerAdvert: 'banner-advert'
     },
     AssetsUrl: 'https://uuicdn.learningpool.com/',
     AddButtonOrder: {
@@ -55,3 +56,8 @@ export var hubCustomLinks = [
 export var hubSupportItems = [
     { name: 'Contact us', url: 'https://learningpool.com', icon: _jsx(HomeIcon, {}) }
 ];
+export var hubBannerAdverts = [
+    { name: 'Banner Advert', imageUrl: 'https://uuicdn.learningpool.com/promotionalcampaigns/banner/latest/1000x138.png', url: 'https://learningpool.com' },
+    { name: 'Another Banner Advert no image', imageUrl: '3', url: 'https://learningpool.com' },
+    { name: 'Another Banner Advert', imageUrl: 'https://uuicdn.learningpool.com/promotionalcampaigns/banner/latest/1000x138.png', url: 'https://learningpool.com' }
+];

package/components/stream/AppSwitcher/AppSwitcher.d.ts

@@ -31,10 +31,10 @@ interface IProps {
 declare const AppSwitcher: {
     (props: IProps): ReactElement | null;
     propTypes: {
-        accessToken: PropTypes.Requireable<string>;
+        token: PropTypes.Requireable<string>;
         apiKey: PropTypes.Requireable<string>;
         layout: PropTypes.Requireable<string>;
-        userId: PropTypes.Requireable<number>;
+        userId: PropTypes.Requireable<string>;
         baseUrl: PropTypes.Requireable<string>;
         localization: PropTypes.Requireable<object>;
         currentApplicationId: PropTypes.Requireable<number>;

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -58,7 +58,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import PromotionalCampaignItem from './PromotionalCampaignItem';
 var addUtmParams = function (baseUrl, source, medium, campaign) {
     var url = new URL(baseUrl);
-    url.searchParams.append('utm_source,', source);
+    url.searchParams.append('utm_source', source);
     url.searchParams.append('utm_medium', medium);
     url.searchParams.append('utm_campaign', campaign);
     return url.toString();
@@ -87,15 +87,13 @@ var AppSwitcher = function (props) {
      * @returns {Promise<IApplication[]>} Get a Promotional Campaign to show.
      */
     var getLatestPromotionalCampaign = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var decodedToken, response, data, error_1;
+        var response, data, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!(token && typeof token === 'string' &&
-                        token !== window.localStorage.getItem(Constants.LocalStorageKey.Token))) return [3 /*break*/, 6];
-                    if (!userId) {
-                        decodedToken = jwtDecode(token);
-                        userId = decodedToken[Constants.HomeAttributes.UserId];
+                    // If the access token has changed the endpoint should be called again.
+                    if (!token || typeof token !== 'string') {
+                        return [2 /*return*/, null];
                     }
                     _a.label = 1;
                 case 1:
@@ -109,8 +107,8 @@ var AppSwitcher = function (props) {
                         })];
                 case 2:
                     response = _a.sent();
-                    if (response.status !== 200) {
-                        console.error('Unable to retrieve latest promotional campaign from Stream Home');
+                    if (!response.ok) {
+                        console.error('Unable to retrieve latest promotional campaign from Stream Home, statuscode:', response.status);
                         return [2 /*return*/, null];
                     }
                     return [4 /*yield*/, response.json()
@@ -120,28 +118,23 @@ var AppSwitcher = function (props) {
                     data = _a.sent();
                     // Store the latest access token.
                     window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
-                    if (data && data.length > 0) {
-                        return [2 /*return*/, data.map(function (_a) {
-                                var id = _a.id, name = _a.name, appSwitcherImageUrl = _a.appSwitcherImageUrl, hubImageUrl = _a.hubImageUrl, altText = _a.altText, basePromoUrl = _a.basePromoUrl, isActive = _a.isActive;
-                                return ({
-                                    id: id,
-                                    name: name,
-                                    appSwitcherImageUrl: appSwitcherImageUrl,
-                                    hubImageUrl: hubImageUrl,
-                                    altText: altText,
-                                    basePromoUrl: basePromoUrl,
-                                    isActive: isActive
-                                });
-                            })];
-                    }
-                    return [3 /*break*/, 5];
+                    return [2 /*return*/, (data === null || data === void 0 ? void 0 : data.map(function (_a) {
+                            var id = _a.id, name = _a.name, appSwitcherImageUrl = _a.appSwitcherImageUrl, hubImageUrl = _a.hubImageUrl, altText = _a.altText, basePromoUrl = _a.basePromoUrl, isActive = _a.isActive;
+                            return ({
+                                id: id,
+                                name: name,
+                                appSwitcherImageUrl: appSwitcherImageUrl,
+                                hubImageUrl: hubImageUrl,
+                                altText: altText,
+                                basePromoUrl: basePromoUrl,
+                                isActive: isActive
+                            });
+                        })) || null];
                 case 4:
                     error_1 = _a.sent();
                     console.error('Unable to retrieve latest promotional campaign from Stream Home', error_1);
                     return [2 /*return*/, null];
-                case 5: return [3 /*break*/, 7];
-                case 6: return [2 /*return*/, null];
-                case 7: return [2 /*return*/, null];
+                case 5: return [2 /*return*/];
             }
         });
     }); };
@@ -246,13 +239,12 @@ var AppSwitcher = function (props) {
     }); };
     useEffect(function () {
         var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var applicationInstances, userApplications, promotionalCampaigns, parsedQueryString, match, uniqueApplicationIds, localApplications, localPromotionalCampaignsJson, parsedCampaigns;
+            var applicationInstances, userApplications, parsedQueryString, match, uniqueApplicationIds, localApplications;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         applicationInstances = [];
                         userApplications = [];
-                        promotionalCampaigns = null;
                         if (!token) {
                             parsedQueryString = queryString.parse(window.location.search);
                             if (parsedQueryString.token && typeof parsedQueryString.token === 'string') {
@@ -320,37 +312,68 @@ var AppSwitcher = function (props) {
                         }
                         // Store the user's applications.
                         setApplications(userApplications);
-                        if (!(!props.promotionalCampaigns || props.promotionalCampaigns.length === 0)) return [3 /*break*/, 5];
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        loadData()
+            .catch(console.error);
+    }, [token, userId, props.applications]);
+    useEffect(function () {
+        var loadPromotionalCampaigns = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var promotionalCampaigns_1, localPromotionalCampaignsJson, parsedCampaigns, error_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 5, , 6]);
+                        promotionalCampaigns_1 = null;
+                        if (!(props.promotionalCampaigns && props.promotionalCampaigns.length > 0)) return [3 /*break*/, 1];
+                        promotionalCampaigns_1 = props.promotionalCampaigns;
+                        return [3 /*break*/, 4];
+                    case 1:
+                        if (!(token && typeof token === 'string' &&
+                            token !== window.localStorage.getItem(Constants.LocalStorageKey.Token))) return [3 /*break*/, 3];
                         return [4 /*yield*/, getLatestPromotionalCampaign()];
-                    case 4:
-                        promotionalCampaigns = _a.sent();
-                        return [3 /*break*/, 6];
-                    case 5:
-                        promotionalCampaigns = props.promotionalCampaigns;
-                        _a.label = 6;
-                    case 6:
-                        if (Array.isArray(promotionalCampaigns) && promotionalCampaigns.length) {
-                            // Serialize and cache the promotional campaigns returned.
-                            window.localStorage.setItem(Constants.LocalStorageKey.PromotionalCampaigns, JSON.stringify(promotionalCampaigns));
-                        }
-                        else {
-                            localPromotionalCampaignsJson = window.localStorage.getItem(Constants.LocalStorageKey.PromotionalCampaigns);
-                            if (localPromotionalCampaignsJson) {
+                    case 2:
+                        // Fetch from API if token has changed
+                        promotionalCampaigns_1 = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        localPromotionalCampaignsJson = window.localStorage.getItem(Constants.LocalStorageKey.PromotionalCampaigns);
+                        if (localPromotionalCampaignsJson) {
+                            try {
                                 parsedCampaigns = JSON.parse(localPromotionalCampaignsJson);
-                                // Type assertion to ensure type safety
                                 if (Array.isArray(parsedCampaigns)) {
-                                    promotionalCampaigns = parsedCampaigns;
+                                    promotionalCampaigns_1 = parsedCampaigns;
                                 }
                             }
-                            setPromotionalCampaigns(promotionalCampaigns);
+                            catch (error) {
+                                console.error('Error parsing stored campaigns:', error);
+                            }
                         }
-                        return [2 /*return*/];
+                        _a.label = 4;
+                    case 4:
+                        // Update state and cache if we have campaigns
+                        if (Array.isArray(promotionalCampaigns_1) && promotionalCampaigns_1.length > 0) {
+                            setPromotionalCampaigns(promotionalCampaigns_1);
+                            window.localStorage.setItem(Constants.LocalStorageKey.PromotionalCampaigns, JSON.stringify(promotionalCampaigns_1));
+                        }
+                        else {
+                            setPromotionalCampaigns(null);
+                        }
+                        return [3 /*break*/, 6];
+                    case 5:
+                        error_2 = _a.sent();
+                        console.error('Error loading promotional campaigns:', error_2);
+                        setPromotionalCampaigns(null);
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
                 }
             });
         }); };
-        loadData()
+        loadPromotionalCampaigns()
             .catch(console.error);
-    }, [token, userId, props.applications]);
+    }, [token, props.promotionalCampaigns]);
     useEffect(function () {
         if (isAppSwitcherOpen) {
             document.addEventListener('mousedown', handleAppSwitcherClose);
@@ -374,7 +397,7 @@ var AppSwitcher = function (props) {
             // Close AppSwitcher if Escape key is pressed
             if (event.key === 'Escape') {
                 handleDialogClose();
-                // Doesnt return focus but we need to investigate MUI again
+                // Doesn't return focus but we need to investigate MUI again
                 // so that should handle it
             }
         }
@@ -405,10 +428,10 @@ var AppSwitcher = function (props) {
                 : null] })));
 };
 AppSwitcher.propTypes = {
-    accessToken: PropTypes.string,
+    token: PropTypes.string,
     apiKey: PropTypes.string,
     layout: PropTypes.string,
-    userId: PropTypes.number,
+    userId: PropTypes.string,
     baseUrl: PropTypes.string,
     localization: PropTypes.object,
     currentApplicationId: PropTypes.number,

package/components/stream/AppSwitcher/AppSwitcherStyles.js

@@ -53,7 +53,7 @@ export var StyleHomeButton = styled(Button)(templateObject_17 || (templateObject
 export var PromotionalCampaignImage = styled(CardMedia)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  height: 150px;\n  width: 300px;\n"], ["\n  height: 150px;\n  width: 300px;\n"])));
 export var PromotionalCampaignCard = styled(Card)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background: ", ";\n  "], ["\n  background: ", ";\n  "])), function (props) { return props.theme.palette.primary.main; });
 export var PromotionalCampaignCardStyled = styled(Card)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  width: 100%;\n  height: 162px;\n  margin-bottom: 4px;\n  background: ", ";\n"], ["\n  width: 100%;\n  height: 162px;\n  margin-bottom: 4px;\n  background: ", ";\n"])), function (props) { return props.theme.palette.primary.main; });
-export var PromotionalCampaignCardActionArea = styled(CardActionArea)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 8px;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 8px;\n"])));
+export var PromotionalCampaignCardActionArea = styled(CardActionArea)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n"])));
 export var PromotionalCampaignCardMedia = styled(CardMedia)(function () { return ({
     width: '100%',
     height: '100%',

package/components/stream/AppSwitcher/constants.js

@@ -52,8 +52,8 @@ export var promotionalContent = [
     {
         id: 1,
         name: 'AIC campaign',
-        appSwitcherImageUrl: 'https://i.ibb.co/GJryH41/AIC-advert.jpg',
-        hubImageUrl: '',
+        appSwitcherImageUrl: 'https://uuicdn.learningpool.com/promotionalcampaigns/appswitcheradvert/latest/300x150.png',
+        hubImageUrl: 'https://uuicdn.learningpool.com/promotionalcampaigns/banner/latest/1000x138.png',
         altText: 'AIC',
         basePromoUrl: 'https://aic.lp-home-web-sever.js.com',
         isActive: true

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.14.0",
+  "version": "1.15.1",
   "private": false,
   "main": "index.js",
   "module": "index.js",