@learningpool/ui 1.15.0 → 1.15.2

package/components/stream/AppHub/AppHubBannerAdvert.js

@@ -51,30 +51,36 @@ 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();
+    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 __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*/];
-        }
+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];
@@ -88,8 +94,8 @@ export var renderBannerAdvertRow = function (rowData, rowIndex) {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0:
-                                        if (!item.imageUrl) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, checkImageExists(item.imageUrl)];
+                                        if (!item.hubImageUrl) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, checkImageExists(item.hubImageUrl)];
                                     case 1:
                                         isValid = _a.sent();
                                         return [2 /*return*/, isValid ? item : null];
@@ -107,7 +113,8 @@ export var renderBannerAdvertRow = function (rowData, rowIndex) {
         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.url, 'stream-home', 'App-Hub-Banner-Advert', item.name), target: "_blank" }, { children: _jsx(StyledAdvertImage, { src: item.imageUrl, alt: item.altText }) })) })) }), index)); }) })) }, "row_".concat(rowIndex)));
+    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/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

@@ -57,11 +57,17 @@ 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();
+    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('Error adding UTM params to advert redirect - invalid URL:', baseUrl, error);
+        return baseUrl;
+    }
 };
 var AppSwitcher = function (props) {
     var _a;
@@ -87,15 +93,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, responseData, 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,39 +113,33 @@ 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 Hub API, returned statuscode:', response.status);
                         return [2 /*return*/, null];
                     }
-                    return [4 /*yield*/, response.json()
-                        // Store the latest access token.
-                    ];
+                    return [4 /*yield*/, response.json()];
                 case 3:
-                    data = _a.sent();
-                    // Store the latest access token.
+                    responseData = _a.sent();
+                    data = responseData.records;
+                    // 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);
+                    console.error('Unable to retrieve and display latest promotional campaign from Hub API', 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 +244,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 +317,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 +402,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 +433,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/package.json

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