@learningpool/ui 1.15.0 → 1.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/components/stream/AppHub/AppHubBannerAdvert.js +32 -25
  2. package/components/stream/AppSwitcher/AppSwitcher.d.ts +2 -2
  3. package/components/stream/AppSwitcher/AppSwitcher.js +76 -53
  4. package/components/stream/AppSwitcher/AppSwitcherStyles.js +1 -1
  5. package/package.json +1 -1
package/components/stream/AppHub/AppHubBannerAdvert.js CHANGED
@@ -51,30 +51,36 @@ import { AppHubRow } from './AppHubStyles';
51
51
  import Grid from '@mui/material/Unstable_Grid2';
52
52
  import { StyledAdvertPaper, StyledAdvertLink, StyledAdvertImage } from './AppHubAdvertStyles';
53
53
  var addUtmParams = function (baseUrl, source, medium, campaign) {
54
- var url = new URL(baseUrl);
55
- url.searchParams.append('utm_source,', source);
56
- url.searchParams.append('utm_medium', medium);
57
- url.searchParams.append('utm_campaign', campaign);
58
- return url.toString();
54
+ try {
55
+ var url = new URL(baseUrl);
56
+ url.searchParams.append('utm_source', source);
57
+ url.searchParams.append('utm_medium', medium);
58
+ url.searchParams.append('utm_campaign', campaign);
59
+ return url.toString();
60
+ }
61
+ catch (error) {
62
+ console.error('Invalid Banner Advert URL provided:', error);
63
+ return baseUrl;
64
+ }
59
65
  };
60
- var checkImageExists = function (url) { return __awaiter(void 0, void 0, void 0, function () {
61
- var response, error_1;
62
- return __generator(this, function (_a) {
63
- switch (_a.label) {
64
- case 0:
65
- _a.trys.push([0, 2, , 3]);
66
- return [4 /*yield*/, fetch(url, { method: 'HEAD' })];
67
- case 1:
68
- response = _a.sent();
69
- return [2 /*return*/, response.ok];
70
- case 2:
71
- error_1 = _a.sent();
72
- console.error('Error checking image:', error_1);
73
- return [2 /*return*/, false];
74
- case 3: return [2 /*return*/];
75
- }
66
+ var checkImageExists = function (url) {
67
+ return new Promise(function (resolve) {
68
+ var img = new window.Image();
69
+ var timeoutId = setTimeout(function () {
70
+ resolve(false);
71
+ }, 5000);
72
+ img.onload = function () {
73
+ clearTimeout(timeoutId);
74
+ resolve(true);
75
+ };
76
+ img.onerror = function (error) {
77
+ clearTimeout(timeoutId);
78
+ console.error('Banner Image failed to load:', url, error);
79
+ resolve(false);
80
+ };
81
+ img.src = url;
76
82
  });
77
- }); };
83
+ };
78
84
  export var renderBannerAdvertRow = function (rowData, rowIndex) {
79
85
  var items = rowData.items;
80
86
  var _a = useState([]), validAdverts = _a[0], setValidAdverts = _a[1];
@@ -88,8 +94,8 @@ export var renderBannerAdvertRow = function (rowData, rowIndex) {
88
94
  return __generator(this, function (_a) {
89
95
  switch (_a.label) {
90
96
  case 0:
91
- if (!item.imageUrl) return [3 /*break*/, 2];
92
- return [4 /*yield*/, checkImageExists(item.imageUrl)];
97
+ if (!item.hubImageUrl) return [3 /*break*/, 2];
98
+ return [4 /*yield*/, checkImageExists(item.hubImageUrl)];
93
99
  case 1:
94
100
  isValid = _a.sent();
95
101
  return [2 /*return*/, isValid ? item : null];
@@ -107,7 +113,8 @@ export var renderBannerAdvertRow = function (rowData, rowIndex) {
107
113
  validateImages();
108
114
  }, [items]);
109
115
  if (validAdverts.length === 0) {
116
+ console.error('No valid images found for banner adverts');
110
117
  return null; // Don't render the row if no valid images
111
118
  }
112
- 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)));
119
+ 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)));
113
120
  };
package/components/stream/AppSwitcher/AppSwitcher.d.ts CHANGED
@@ -31,10 +31,10 @@ interface IProps {
31
31
  declare const AppSwitcher: {
32
32
  (props: IProps): ReactElement | null;
33
33
  propTypes: {
34
- accessToken: PropTypes.Requireable<string>;
34
+ token: PropTypes.Requireable<string>;
35
35
  apiKey: PropTypes.Requireable<string>;
36
36
  layout: PropTypes.Requireable<string>;
37
- userId: PropTypes.Requireable<number>;
37
+ userId: PropTypes.Requireable<string>;
38
38
  baseUrl: PropTypes.Requireable<string>;
39
39
  localization: PropTypes.Requireable<object>;
40
40
  currentApplicationId: PropTypes.Requireable<number>;
package/components/stream/AppSwitcher/AppSwitcher.js CHANGED
@@ -58,7 +58,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
58
58
  import PromotionalCampaignItem from './PromotionalCampaignItem';
59
59
  var addUtmParams = function (baseUrl, source, medium, campaign) {
60
60
  var url = new URL(baseUrl);
61
- url.searchParams.append('utm_source,', source);
61
+ url.searchParams.append('utm_source', source);
62
62
  url.searchParams.append('utm_medium', medium);
63
63
  url.searchParams.append('utm_campaign', campaign);
64
64
  return url.toString();
@@ -87,15 +87,13 @@ var AppSwitcher = function (props) {
87
87
  * @returns {Promise<IApplication[]>} Get a Promotional Campaign to show.
88
88
  */
89
89
  var getLatestPromotionalCampaign = function () { return __awaiter(void 0, void 0, void 0, function () {
90
- var decodedToken, response, data, error_1;
90
+ var response, data, error_1;
91
91
  return __generator(this, function (_a) {
92
92
  switch (_a.label) {
93
93
  case 0:
94
- if (!(token && typeof token === 'string' &&
95
- token !== window.localStorage.getItem(Constants.LocalStorageKey.Token))) return [3 /*break*/, 6];
96
- if (!userId) {
97
- decodedToken = jwtDecode(token);
98
- userId = decodedToken[Constants.HomeAttributes.UserId];
94
+ // If the access token has changed the endpoint should be called again.
95
+ if (!token || typeof token !== 'string') {
96
+ return [2 /*return*/, null];
99
97
  }
100
98
  _a.label = 1;
101
99
  case 1:
@@ -109,8 +107,8 @@ var AppSwitcher = function (props) {
109
107
  })];
110
108
  case 2:
111
109
  response = _a.sent();
112
- if (response.status !== 200) {
113
- console.error('Unable to retrieve latest promotional campaign from Stream Home');
110
+ if (!response.ok) {
111
+ console.error('Unable to retrieve latest promotional campaign from Stream Home, statuscode:', response.status);
114
112
  return [2 /*return*/, null];
115
113
  }
116
114
  return [4 /*yield*/, response.json()
@@ -120,28 +118,23 @@ var AppSwitcher = function (props) {
120
118
  data = _a.sent();
121
119
  // Store the latest access token.
122
120
  window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
123
- if (data && data.length > 0) {
124
- return [2 /*return*/, data.map(function (_a) {
125
- var id = _a.id, name = _a.name, appSwitcherImageUrl = _a.appSwitcherImageUrl, hubImageUrl = _a.hubImageUrl, altText = _a.altText, basePromoUrl = _a.basePromoUrl, isActive = _a.isActive;
126
- return ({
127
- id: id,
128
- name: name,
129
- appSwitcherImageUrl: appSwitcherImageUrl,
130
- hubImageUrl: hubImageUrl,
131
- altText: altText,
132
- basePromoUrl: basePromoUrl,
133
- isActive: isActive
134
- });
135
- })];
136
- }
137
- return [3 /*break*/, 5];
121
+ return [2 /*return*/, (data === null || data === void 0 ? void 0 : data.map(function (_a) {
122
+ var id = _a.id, name = _a.name, appSwitcherImageUrl = _a.appSwitcherImageUrl, hubImageUrl = _a.hubImageUrl, altText = _a.altText, basePromoUrl = _a.basePromoUrl, isActive = _a.isActive;
123
+ return ({
124
+ id: id,
125
+ name: name,
126
+ appSwitcherImageUrl: appSwitcherImageUrl,
127
+ hubImageUrl: hubImageUrl,
128
+ altText: altText,
129
+ basePromoUrl: basePromoUrl,
130
+ isActive: isActive
131
+ });
132
+ })) || null];
138
133
  case 4:
139
134
  error_1 = _a.sent();
140
135
  console.error('Unable to retrieve latest promotional campaign from Stream Home', error_1);
141
136
  return [2 /*return*/, null];
142
- case 5: return [3 /*break*/, 7];
143
- case 6: return [2 /*return*/, null];
144
- case 7: return [2 /*return*/, null];
137
+ case 5: return [2 /*return*/];
145
138
  }
146
139
  });
147
140
  }); };
@@ -246,13 +239,12 @@ var AppSwitcher = function (props) {
246
239
  }); };
247
240
  useEffect(function () {
248
241
  var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
249
- var applicationInstances, userApplications, promotionalCampaigns, parsedQueryString, match, uniqueApplicationIds, localApplications, localPromotionalCampaignsJson, parsedCampaigns;
242
+ var applicationInstances, userApplications, parsedQueryString, match, uniqueApplicationIds, localApplications;
250
243
  return __generator(this, function (_a) {
251
244
  switch (_a.label) {
252
245
  case 0:
253
246
  applicationInstances = [];
254
247
  userApplications = [];
255
- promotionalCampaigns = null;
256
248
  if (!token) {
257
249
  parsedQueryString = queryString.parse(window.location.search);
258
250
  if (parsedQueryString.token && typeof parsedQueryString.token === 'string') {
@@ -320,37 +312,68 @@ var AppSwitcher = function (props) {
320
312
  }
321
313
  // Store the user's applications.
322
314
  setApplications(userApplications);
323
- if (!(!props.promotionalCampaigns || props.promotionalCampaigns.length === 0)) return [3 /*break*/, 5];
315
+ return [2 /*return*/];
316
+ }
317
+ });
318
+ }); };
319
+ loadData()
320
+ .catch(console.error);
321
+ }, [token, userId, props.applications]);
322
+ useEffect(function () {
323
+ var loadPromotionalCampaigns = function () { return __awaiter(void 0, void 0, void 0, function () {
324
+ var promotionalCampaigns_1, localPromotionalCampaignsJson, parsedCampaigns, error_2;
325
+ return __generator(this, function (_a) {
326
+ switch (_a.label) {
327
+ case 0:
328
+ _a.trys.push([0, 5, , 6]);
329
+ promotionalCampaigns_1 = null;
330
+ if (!(props.promotionalCampaigns && props.promotionalCampaigns.length > 0)) return [3 /*break*/, 1];
331
+ promotionalCampaigns_1 = props.promotionalCampaigns;
332
+ return [3 /*break*/, 4];
333
+ case 1:
334
+ if (!(token && typeof token === 'string' &&
335
+ token !== window.localStorage.getItem(Constants.LocalStorageKey.Token))) return [3 /*break*/, 3];
324
336
  return [4 /*yield*/, getLatestPromotionalCampaign()];
325
- case 4:
326
- promotionalCampaigns = _a.sent();
327
- return [3 /*break*/, 6];
328
- case 5:
329
- promotionalCampaigns = props.promotionalCampaigns;
330
- _a.label = 6;
331
- case 6:
332
- if (Array.isArray(promotionalCampaigns) && promotionalCampaigns.length) {
333
- // Serialize and cache the promotional campaigns returned.
334
- window.localStorage.setItem(Constants.LocalStorageKey.PromotionalCampaigns, JSON.stringify(promotionalCampaigns));
335
- }
336
- else {
337
- localPromotionalCampaignsJson = window.localStorage.getItem(Constants.LocalStorageKey.PromotionalCampaigns);
338
- if (localPromotionalCampaignsJson) {
337
+ case 2:
338
+ // Fetch from API if token has changed
339
+ promotionalCampaigns_1 = _a.sent();
340
+ return [3 /*break*/, 4];
341
+ case 3:
342
+ localPromotionalCampaignsJson = window.localStorage.getItem(Constants.LocalStorageKey.PromotionalCampaigns);
343
+ if (localPromotionalCampaignsJson) {
344
+ try {
339
345
  parsedCampaigns = JSON.parse(localPromotionalCampaignsJson);
340
- // Type assertion to ensure type safety
341
346
  if (Array.isArray(parsedCampaigns)) {
342
- promotionalCampaigns = parsedCampaigns;
347
+ promotionalCampaigns_1 = parsedCampaigns;
343
348
  }
344
349
  }
345
- setPromotionalCampaigns(promotionalCampaigns);
350
+ catch (error) {
351
+ console.error('Error parsing stored campaigns:', error);
352
+ }
346
353
  }
347
- return [2 /*return*/];
354
+ _a.label = 4;
355
+ case 4:
356
+ // Update state and cache if we have campaigns
357
+ if (Array.isArray(promotionalCampaigns_1) && promotionalCampaigns_1.length > 0) {
358
+ setPromotionalCampaigns(promotionalCampaigns_1);
359
+ window.localStorage.setItem(Constants.LocalStorageKey.PromotionalCampaigns, JSON.stringify(promotionalCampaigns_1));
360
+ }
361
+ else {
362
+ setPromotionalCampaigns(null);
363
+ }
364
+ return [3 /*break*/, 6];
365
+ case 5:
366
+ error_2 = _a.sent();
367
+ console.error('Error loading promotional campaigns:', error_2);
368
+ setPromotionalCampaigns(null);
369
+ return [3 /*break*/, 6];
370
+ case 6: return [2 /*return*/];
348
371
  }
349
372
  });
350
373
  }); };
351
- loadData()
374
+ loadPromotionalCampaigns()
352
375
  .catch(console.error);
353
- }, [token, userId, props.applications]);
376
+ }, [token, props.promotionalCampaigns]);
354
377
  useEffect(function () {
355
378
  if (isAppSwitcherOpen) {
356
379
  document.addEventListener('mousedown', handleAppSwitcherClose);
@@ -374,7 +397,7 @@ var AppSwitcher = function (props) {
374
397
  // Close AppSwitcher if Escape key is pressed
375
398
  if (event.key === 'Escape') {
376
399
  handleDialogClose();
377
- // Doesnt return focus but we need to investigate MUI again
400
+ // Doesn't return focus but we need to investigate MUI again
378
401
  // so that should handle it
379
402
  }
380
403
  }
@@ -405,10 +428,10 @@ var AppSwitcher = function (props) {
405
428
  : null] })));
406
429
  };
407
430
  AppSwitcher.propTypes = {
408
- accessToken: PropTypes.string,
431
+ token: PropTypes.string,
409
432
  apiKey: PropTypes.string,
410
433
  layout: PropTypes.string,
411
- userId: PropTypes.number,
434
+ userId: PropTypes.string,
412
435
  baseUrl: PropTypes.string,
413
436
  localization: PropTypes.object,
414
437
  currentApplicationId: PropTypes.number,
package/components/stream/AppSwitcher/AppSwitcherStyles.js CHANGED
@@ -53,7 +53,7 @@ export var StyleHomeButton = styled(Button)(templateObject_17 || (templateObject
53
53
  export var PromotionalCampaignImage = styled(CardMedia)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n height: 150px;\n width: 300px;\n"], ["\n height: 150px;\n width: 300px;\n"])));
54
54
  export var PromotionalCampaignCard = styled(Card)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), function (props) { return props.theme.palette.primary.main; });
55
55
  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; });
56
- 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"])));
56
+ 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"])));
57
57
  export var PromotionalCampaignCardMedia = styled(CardMedia)(function () { return ({
58
58
  width: '100%',
59
59
  height: '100%',
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.15.0",
12
+ "version": "1.15.1",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",