@learningpool/ui 1.14.0 → 1.15.0

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/constants.js

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

package/package.json

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