@learningpool/ui 1.13.1 → 1.15.0

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -57,7 +57,7 @@ import { Constants } from '../../stream/AppSwitcher/constants';
 var VerticalNavigation = function (props) {
     var _a;
     var theme = useTheme();
-    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, hideStreamHomeButton = props.hideStreamHomeButton, StreamHomeUrl = props.StreamHomeUrl, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, dataAttributes = props.dataAttributes, showSupportLinks = props.showSupportLinks, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "hideStreamHomeButton", "StreamHomeUrl", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName", "dataAttributes", "showSupportLinks", "avatarPanelShowHelpLinks"]);
+    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, hideStreamHomeButton = props.hideStreamHomeButton, StreamHomeUrl = props.StreamHomeUrl, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, dataAttributes = props.dataAttributes, showSupportLinks = props.showSupportLinks, hidePromotionalCampaign = props.hidePromotionalCampaign, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks, promotionalCampaigns = props.promotionalCampaigns, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "hideStreamHomeButton", "StreamHomeUrl", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName", "dataAttributes", "showSupportLinks", "hidePromotionalCampaign", "avatarPanelShowHelpLinks", "promotionalCampaigns"]);
     var messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
@@ -97,7 +97,7 @@ var VerticalNavigation = function (props) {
     }, [avatarName, hasAvatar]);
     // This fixes an issue with how MUI handles the modal and aria-hidden.
     // When open, the Modal adds aria-hidden="true" to a top-level element,
-    // which causes some screen readers to annouce the elements as "blank".
+    // which causes some screen readers to announce the elements as "blank".
     // This fix just overrides the default aria-hidden attribute.
     //
     // https://github.com/mui/material-ui/issues/19450
@@ -240,7 +240,7 @@ var VerticalNavigation = function (props) {
                                         var _a;
                                         return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + index + 1] })));
                                     }), hasStreamHome
-                                        ? (_jsx(VerticalNavigationItem, { id: dataIds.VerticalNavigationAppSwitcherToggle, "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(AppsIcon, {}), onClick: handleToggleAppSwitcher, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, handleToggleAppSwitcher: handleToggleAppSwitcher, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen, hideStreamHomeButton: hideStreamHomeButton || false, StreamHomeUrl: StreamHomeUrl !== null && StreamHomeUrl !== void 0 ? StreamHomeUrl : Constants.DefaultStreamHomeUrl })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + 1], isContentOpen: isAppSwitcherOpen }))
+                                        ? (_jsx(VerticalNavigationItem, { id: dataIds.VerticalNavigationAppSwitcherToggle, "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(AppsIcon, {}), onClick: handleToggleAppSwitcher, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, handleToggleAppSwitcher: handleToggleAppSwitcher, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen, hideStreamHomeButton: hideStreamHomeButton || false, StreamHomeUrl: StreamHomeUrl !== null && StreamHomeUrl !== void 0 ? StreamHomeUrl : Constants.DefaultStreamHomeUrl, hidePromotionalCampaign: hidePromotionalCampaign !== null && hidePromotionalCampaign !== void 0 ? hidePromotionalCampaign : false, promotionalCampaigns: promotionalCampaigns })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + 1], isContentOpen: isAppSwitcherOpen }))
                                         : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
                                         var _a, _b;
                                         return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + index + 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,113 @@
+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) {
+    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();
+};
+var checkImageExists = function (url) { return __awaiter(void 0, void 0, void 0, function () {
+    var response, error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 2, , 3]);
+                return [4 /*yield*/, fetch(url, { method: 'HEAD' })];
+            case 1:
+                response = _a.sent();
+                return [2 /*return*/, response.ok];
+            case 2:
+                error_1 = _a.sent();
+                console.error('Error checking image:', error_1);
+                return [2 /*return*/, false];
+            case 3: return [2 /*return*/];
+        }
+    });
+}); };
+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.imageUrl) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, checkImageExists(item.imageUrl)];
+                                    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) {
+        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.url, 'stream-home', 'App-Hub-Banner-Advert', item.name), target: "_blank" }, { children: _jsx(StyledAdvertImage, { src: item.imageUrl, 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

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
+import { IPromotionalCampaign } from '../../../types/components/stream/AppSwitcher';
 interface IApplication {
     applicationId: number;
     applicationName: string;
@@ -24,6 +25,8 @@ interface IProps {
     dataAttributes?: any;
     StreamHomeUrl?: string;
     hideStreamHomeButton?: boolean;
+    hidePromotionalCampaign?: boolean;
+    promotionalCampaigns?: IPromotionalCampaign[] | null;
 }
 declare const AppSwitcher: {
     (props: IProps): ReactElement | null;
@@ -36,6 +39,7 @@ declare const AppSwitcher: {
         localization: PropTypes.Requireable<object>;
         currentApplicationId: PropTypes.Requireable<number>;
         applications: PropTypes.Requireable<any[]>;
+        hidePromotionalCampaign: PropTypes.Requireable<boolean>;
     };
     defaultProps: {
         layout: string;

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -55,23 +55,96 @@ import { AppListHeader, AppListItem, AppOrganisationCount, StyledSVG, BackButton
 import { Constants } from './constants';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 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_medium', medium);
+    url.searchParams.append('utm_campaign', campaign);
+    return url.toString();
+};
 var AppSwitcher = function (props) {
     var _a;
     var isAppSwitcherOpen = props.isAppSwitcherOpen, handleToggleAppSwitcher = props.handleToggleAppSwitcher, isDrawerOpen = props.isDrawerOpen, localization = props.localization, dataAttributes = props.dataAttributes, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
     var token = props.token;
     // Holds the applications which are displayed.
     var _c = useState([]), applications = _c[0], setApplications = _c[1];
+    // Holds the latest promotional campaign advert.
+    var _d = useState(null), promotionalCampaigns = _d[0], setPromotionalCampaigns = _d[1];
     // Controls which tab is active.
-    var _d = useState(Constants.Tabs.ListApplications), activeTab = _d[0], setActiveTab = _d[1];
+    var _e = useState(Constants.Tabs.ListApplications), activeTab = _e[0], setActiveTab = _e[1];
     // Holds the list of filtered organisations (on the second tab).
-    var _e = useState([]), filteredOrgs = _e[0], setFilteredOrgs = _e[1];
+    var _f = useState([]), filteredOrgs = _f[0], setFilteredOrgs = _f[1];
     // Holds a reference to the active application (on the second tab).
-    var _f = useState(null), activeApplication = _f[0], setActiveApplication = _f[1];
+    var _g = useState(null), activeApplication = _g[0], setActiveApplication = _g[1];
     // Stores any org filter text (on the second tab).
-    var _g = useState(''), searchString = _g[0], setSearchString = _g[1];
+    var _h = useState(''), searchString = _h[0], setSearchString = _h[1];
     var messages = __assign(__assign({}, Constants.DefaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var userId = (_a = props.userId) !== null && _a !== void 0 ? _a : '';
+    /**
+     * Queries the Hub/Home API to fetch latest promotional campaign.
+     * @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;
+        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];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    return [4 /*yield*/, fetch("".concat(baseUrl !== null && baseUrl !== void 0 ? baseUrl : Constants.BaseUrl, "/promotional-campaigns?onlyLatest=true"), {
+                            method: 'get',
+                            headers: new Headers({
+                                Authorization: "Bearer ".concat(token),
+                                'x-api-key': apiKey
+                            })
+                        })];
+                case 2:
+                    response = _a.sent();
+                    if (response.status !== 200) {
+                        console.error('Unable to retrieve latest promotional campaign from Stream Home');
+                        return [2 /*return*/, null];
+                    }
+                    return [4 /*yield*/, response.json()
+                        // Store the latest access token.
+                    ];
+                case 3:
+                    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];
+                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];
+            }
+        });
+    }); };
     /**
      * Handles closing of the application dialog.
      */
@@ -173,12 +246,13 @@ var AppSwitcher = function (props) {
     }); };
     useEffect(function () {
         var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var applicationInstances, userApplications, parsedQueryString, match, uniqueApplicationIds, localApplications;
+            var applicationInstances, userApplications, promotionalCampaigns, parsedQueryString, match, uniqueApplicationIds, localApplications, localPromotionalCampaignsJson, parsedCampaigns;
             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') {
@@ -246,6 +320,30 @@ var AppSwitcher = function (props) {
                         }
                         // Store the user's applications.
                         setApplications(userApplications);
+                        if (!(!props.promotionalCampaigns || props.promotionalCampaigns.length === 0)) return [3 /*break*/, 5];
+                        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) {
+                                parsedCampaigns = JSON.parse(localPromotionalCampaignsJson);
+                                // Type assertion to ensure type safety
+                                if (Array.isArray(parsedCampaigns)) {
+                                    promotionalCampaigns = parsedCampaigns;
+                                }
+                            }
+                            setPromotionalCampaigns(promotionalCampaigns);
+                        }
                         return [2 /*return*/];
                 }
             });
@@ -284,11 +382,13 @@ var AppSwitcher = function (props) {
     if (!props.applications && (!token || !apiKey)) {
         return null;
     }
+    var hasPromotionalCampaign = !!promotionalCampaigns;
+    var _j = props.hidePromotionalCampaign, hidePromotionalCampaign = _j === void 0 ? false : _j;
     return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
             display: isAppSwitcherOpen ? 'block' : 'none',
             left: isDrawerOpen ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3
-        }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer, onMouseDown: function (event) { return event.stopPropagation(); } }, { children: [activeTab === Constants.Tabs.ListApplications
-                ? (_jsxs("div", { children: [_jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [messages['your-apps'], !props.hideStreamHomeButton &&
+        }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer, hasPromotionalCampaign: hasPromotionalCampaign, onMouseDown: function (event) { return event.stopPropagation(); } }, { children: [activeTab === Constants.Tabs.ListApplications
+                ? (_jsxs("div", { children: [!hidePromotionalCampaign && promotionalCampaigns && promotionalCampaigns.length > 0 && (_jsx("div", __assign({ className: "promotional-campaigns-container" }, { children: promotionalCampaigns.map(function (campaign) { return (_jsx(PromotionalCampaignItem, { imageUrl: campaign.appSwitcherImageUrl, altText: campaign.altText, linkUrl: addUtmParams(campaign.basePromoUrl, 'stream-home', 'app_switcher', campaign.name) }, campaign.id)); }) }))), _jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [messages['your-apps'], !props.hideStreamHomeButton &&
                                     _jsx(StyleHomeButton, __assign({ "aria-label": messages['go-to-hub'], endIcon: _jsx(ChevronRightIcon, {}), onClick: function (e) { var _a; return window.open((_a = props.StreamHomeUrl) !== null && _a !== void 0 ? _a : Constants.DefaultStreamHomeUrl); } }, { children: messages['go-to-hub'] }))] })), _jsx(MenuContent, __assign({ style: {
                                 display: activeTab === 1 ? 'flex' : 'none'
                             }, "data-id": dataIds.AppSwitcherList }, { children: applications.map(function (_a) {
@@ -312,7 +412,8 @@ AppSwitcher.propTypes = {
     baseUrl: PropTypes.string,
     localization: PropTypes.object,
     currentApplicationId: PropTypes.number,
-    applications: PropTypes.array
+    applications: PropTypes.array,
+    hidePromotionalCampaign: PropTypes.bool
 };
 AppSwitcher.defaultProps = {
     layout: Constants.Layout.Vertical,

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

@@ -1,23 +1,25 @@
 /// <reference types="react" />
-export declare const AppSwitcherPanel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const List: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const MenuContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SearchContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AppListHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AppListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AppLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
-export declare const AppName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BackButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const SearchBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const AppOrganisationCount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const SelectedOrganisation: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;
-export declare const OrganisationList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const OrganisationLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
-export declare const StyledLogoSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const AppSwitcherPanel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    hasPromotionalCampaign: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const List: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const MenuContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AppListHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AppListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AppLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const AppName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BackButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const SearchBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const AppOrganisationCount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const SelectedOrganisation: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const OrganisationList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OrganisationLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const StyledLogoSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;
 export declare const StyleHomeButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material/Button").ButtonClasses> | undefined;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
     color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
@@ -27,7 +29,7 @@ export declare const StyleHomeButton: import("@emotion/styled").StyledComponent<
     href?: string | undefined;
     size?: "small" | "large" | "medium" | undefined;
     startIcon?: import("react").ReactNode;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "text" | "outlined" | "contained" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -41,10 +43,65 @@ export declare const StyleHomeButton: import("@emotion/styled").StyledComponent<
     focusVisibleClassName?: string | undefined;
     LinkComponent?: import("react").ElementType<any> | undefined;
     onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PromotionalCampaignImage: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").CardMediaClasses> | undefined;
+    image?: string | undefined;
+    src?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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 | "image" | "children" | "src" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PromotionalCampaignCard: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes"> & {
+    classes?: Partial<import("@mui/material").CardClasses> | undefined;
+    raised?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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 | "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "square" | "elevation" | "raised"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PromotionalCampaignCardStyled: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes"> & {
+    classes?: Partial<import("@mui/material").CardClasses> | undefined;
+    raised?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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 | "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "square" | "elevation" | "raised"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PromotionalCampaignCardActionArea: import("@emotion/styled").StyledComponent<{
+    classes?: Partial<import("@mui/material").CardActionAreaClasses> | undefined;
+    focusVisibleClassName?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PromotionalCampaignCardMedia: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").CardMediaClasses> | undefined;
+    image?: string | undefined;
+    src?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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 | "image" | "children" | "src" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/stream/AppSwitcher/AppSwitcherStyles.js

@@ -2,13 +2,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { Card, CardActionArea, CardMedia } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: ", ";\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: ", ";\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
     : '#E6EAF0'; }, function (props) { return props.theme.direction === 'ltr'
     ? '5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%)'
-    : '-5px 7px 8px -10px rgb(0 0 0 / 20%), -5px 12px 17px -10px rgb(0 0 0 / 14%), -5px 5px 22px -10px rgb(0 0 0 / 12%)'; }, function (props) { return props.theme.direction === 'ltr' ? '57px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '57px' : 'auto'; });
+    : '-5px 7px 8px -10px rgb(0 0 0 / 20%), -5px 12px 17px -10px rgb(0 0 0 / 14%), -5px 5px 22px -10px rgb(0 0 0 / 12%)'; }, function (props) { return props.hasPromotionalCampaign ? 'calc(450px + 100px)' : '450px'; }, function (props) { return props.theme.direction === 'ltr' ? '57px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '57px' : 'auto'; });
 export var List = styled('ul')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n"], ["\n"])));
 export var MenuContent = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"], ["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"])));
 export var SearchContent = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"], ["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"])));
@@ -49,4 +50,16 @@ export var StyledLogoSVG = styled('svg')(templateObject_16 || (templateObject_16
     ? props.theme.palette.primary.dark
     : '#E6EAF0'; });
 export var StyleHomeButton = styled(Button)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  color: #00538e;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  text-transform: none;\n\n  &:hover {\n    background-color: transparent;\n  }\n"], ["\n  align-items: center;\n  color: #00538e;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  text-transform: none;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+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 PromotionalCampaignCardMedia = styled(CardMedia)(function () { return ({
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    '&.MuiCardMedia-img': {
+        objectPosition: 'center'
+    }
+}); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;

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

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+interface IPromotionalCampaignItemProps {
+    imageUrl: string;
+    altText: string;
+    linkUrl: string;
+}
+declare const PromotionalCampaignItem: ({ imageUrl, altText, linkUrl }: IPromotionalCampaignItemProps) => ReactElement;
+export default PromotionalCampaignItem;

package/components/stream/AppSwitcher/PromotionalCampaignItem.js

@@ -0,0 +1,31 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardMedia } from '@mui/material';
+import React, { useState } from 'react';
+import { PromotionalCampaignCardStyled, PromotionalCampaignCardActionArea } from './AppSwitcherStyles';
+var PromotionalCampaignItem = function (_a) {
+    var imageUrl = _a.imageUrl, altText = _a.altText, linkUrl = _a.linkUrl;
+    var _b = useState(true), imageLoaded = _b[0], setImageLoaded = _b[1];
+    var handleImageError = function () {
+        setImageLoaded(false);
+    };
+    return (_jsx(React.Fragment, { children: imageLoaded && (_jsx(PromotionalCampaignCardStyled, { children: _jsx(PromotionalCampaignCardActionArea, __assign({ onClick: function () { return window.open(linkUrl, '_blank'); } }, { children: _jsx(CardMedia, { component: "img", image: imageUrl, alt: altText, onError: handleImageError, sx: {
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        '&.MuiCardMedia-img': {
+                            objectPosition: 'center'
+                        }
+                    } }) })) })) }));
+};
+export default PromotionalCampaignItem;

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

@@ -2,6 +2,7 @@ export declare const Constants: Readonly<{
     LocalStorageKey: {
         Token: string;
         Applications: string;
+        PromotionalCampaigns: string;
     };
     HomeAttributes: {
         UserId: string;
@@ -53,3 +54,12 @@ export declare const applications: ({
     customName: string;
     url: string;
 })[];
+export declare const promotionalContent: {
+    id: number;
+    name: string;
+    appSwitcherImageUrl: string;
+    hubImageUrl: string;
+    altText: string;
+    basePromoUrl: string;
+    isActive: boolean;
+}[];

package/components/stream/AppSwitcher/constants.js

@@ -1,7 +1,8 @@
 export var Constants = Object.freeze({
     LocalStorageKey: {
         Token: 'lp-home-access-token',
-        Applications: 'lp-home-applications'
+        Applications: 'lp-home-applications',
+        PromotionalCampaigns: 'lp-home-promotionalCampaigns'
     },
     HomeAttributes: {
         UserId: 'lp-home-user-id'
@@ -40,9 +41,21 @@ export var Constants = Object.freeze({
 });
 export var applications = [
     { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },
-    { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', url: 'https://learningpool.com' },
-    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Event Management', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
-    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 2', url: 'https://learningpool.com' },
-    { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: '', url: 'https://learningpool.com' },
-    { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', customName: '', url: 'https://learningpool.com' }
+    { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', url: 'https://learningpool.com?Analytics' },
+    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Event Management', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com?AutomationEventManagement' },
+    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 2', url: 'https://learningpool.com?Automation' },
+    { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', url: 'https://learningpool.com?LMS' },
+    { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', url: 'https://learningpool.com?Authoring' },
+    { applicationId: 8, applicationName: 'IQ', shortName: 'IQ', internalName: 'iq', url: 'https://data.applications.com?IQ' }
+];
+export var promotionalContent = [
+    {
+        id: 1,
+        name: 'AIC campaign',
+        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.13.1",
+  "version": "1.15.0",
   "private": false,
   "main": "index.js",
   "module": "index.js",

package/types/components/navigation/VerticalNavigation.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IApplication } from '../stream/AppSwitcher';
+import { IApplication, IPromotionalCampaign } from '../stream/AppSwitcher';
 import { IAvatarMenuItemProps } from './VerticalNavigationAvatar';
 export interface IVerticalNavigationItemProps {
     label: string;
@@ -40,6 +40,8 @@ export interface IVerticalNavigationProps {
     localization?: any;
     dataAttributes?: any;
     showSupportLinks?: boolean;
+    hidePromotionalCampaign?: boolean;
+    promotionalCampaigns?: IPromotionalCampaign[];
     hasAvatar?: boolean;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;

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

@@ -7,3 +7,12 @@ export interface IApplication {
     url: string;
     children?: object[];
 }
+export interface IPromotionalCampaign {
+    id: number;
+    name: string;
+    appSwitcherImageUrl: string;
+    hubImageUrl: string;
+    altText: string;
+    basePromoUrl: string;
+    isActive: boolean;
+}