@learningpool/ui 1.15.2 → 1.15.4

package/components/stream/AppHub/AppHubBannerAdvert.js

@@ -9,44 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { useState } from 'react';
 import { AppHubRow } from './AppHubStyles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { StyledAdvertPaper, StyledAdvertLink, StyledAdvertImage } from './AppHubAdvertStyles';
@@ -63,58 +27,14 @@ var addUtmParams = function (baseUrl, source, medium, campaign) {
         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)));
+    var _a = useState(true), hasValidImage = _a[0], setHasValidImage = _a[1];
+    var handleImageError = function () {
+        setHasValidImage(false);
+    };
+    var validItems = items.filter(function (item) { return item.hubImageUrl && item.basePromoUrl; });
+    if (!hasValidImage || validItems.length === 0)
+        return null;
+    return (_jsx(AppHubRow, { children: _jsx(Grid, __assign({ container: true, spacing: 2 }, { children: validItems.map(function (item, index) { return (_jsx(Grid, __assign({ xs: 12 }, { children: _jsx(StyledAdvertPaper, __assign({ elevation: 0 }, { children: _jsx(StyledAdvertLink, __assign({ href: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name), target: "_blank" }, { children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText || 'Banner image advertisement', onError: handleImageError }) })) })) }), index)); }) })) }, "row_".concat(rowIndex)));
 };

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -85,6 +85,12 @@ var AppSwitcher = function (props) {
     var _g = useState(null), activeApplication = _g[0], setActiveApplication = _g[1];
     // Stores any org filter text (on the second tab).
     var _h = useState(''), searchString = _h[0], setSearchString = _h[1];
+    // Holds the number of valid promotional campaigns.
+    var _j = useState((promotionalCampaigns === null || promotionalCampaigns === void 0 ? void 0 : promotionalCampaigns.length) || 0), validCampaignCount = _j[0], setValidCampaignCount = _j[1];
+    // Decrease the valid campaign count if an image fails to load.
+    var handleCampaignImageError = function () {
+        setValidCampaignCount(function (prev) { return Math.max(0, prev - 1); });
+    };
     var messages = __assign(__assign({}, Constants.DefaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var userId = (_a = props.userId) !== null && _a !== void 0 ? _a : '';
@@ -361,6 +367,7 @@ var AppSwitcher = function (props) {
                         // Update state and cache if we have campaigns
                         if (Array.isArray(promotionalCampaigns_1) && promotionalCampaigns_1.length > 0) {
                             setPromotionalCampaigns(promotionalCampaigns_1);
+                            setValidCampaignCount(promotionalCampaigns_1.length);
                             window.localStorage.setItem(Constants.LocalStorageKey.PromotionalCampaigns, JSON.stringify(promotionalCampaigns_1));
                         }
                         else {
@@ -410,13 +417,12 @@ var AppSwitcher = function (props) {
     if (!props.applications && (!token || !apiKey)) {
         return null;
     }
-    var hasPromotionalCampaign = !!promotionalCampaigns;
-    var _j = props.hidePromotionalCampaign, hidePromotionalCampaign = _j === void 0 ? false : _j;
+    var _k = props.hidePromotionalCampaign, hidePromotionalCampaign = _k === void 0 ? false : _k;
     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, 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 &&
+        }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer, hasPromotionalCampaign: validCampaignCount > 0, 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, 'hub', 'app_switcher_advert', campaign.name), onImageError: handleCampaignImageError }, 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) {

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

@@ -3,6 +3,7 @@ interface IPromotionalCampaignItemProps {
     imageUrl: string;
     altText: string;
     linkUrl: string;
+    onImageError?: () => void;
 }
-declare const PromotionalCampaignItem: ({ imageUrl, altText, linkUrl }: IPromotionalCampaignItemProps) => ReactElement;
+declare const PromotionalCampaignItem: ({ imageUrl, altText, linkUrl, onImageError }: IPromotionalCampaignItemProps) => ReactElement | null;
 export default PromotionalCampaignItem;

package/components/stream/AppSwitcher/PromotionalCampaignItem.js

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

package/package.json

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