@learningpool/ui 1.18.0 → 1.19.0

package/lang/en-us.d.ts

@@ -14,6 +14,7 @@ export const defaultMessages: {
     'stream-hub-welcome': string;
     'banner-image-alt-text': string;
     'manage-links': string;
+    'data-not-found': string;
     'site-navigation': string;
     'open-navigation': string;
     'close-navigation': string;

package/lang/en-us.js

@@ -1,7 +1,7 @@
 export const defaultMessages = {
     // App Switcher
     'app-switcher': 'App Switcher',
-    'your-apps': 'Your Apps',
+    'your-apps': 'Your Learning Pool Applications',
     'custom-apps': 'Explore Custom Apps',
     'add-item': 'Add item',
     'lp-apps': 'Explore Learning Pool Apps',
@@ -15,6 +15,7 @@ export const defaultMessages = {
     'stream-hub-welcome': 'Welcome to Stream Home',
     'banner-image-alt-text': 'Banner Image advert',
     'manage-links': 'Manage Links',
+    'data-not-found': 'Data Not Found',
     // Navigation
     'site-navigation': 'Site navigation',
     'open-navigation': 'Open navigation',

package/package.json

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

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { IApplication, IPromotionalCampaign } from '../stream/AppSwitcher';
 import { IAvatarMenuItemProps } from './VerticalNavigationAvatar';
 export interface IVerticalNavigationItemProps {
     label: string;
@@ -26,12 +25,10 @@ export interface IVerticalNavigationProps {
     items?: IVerticalNavigationItemProps[];
     secondaryItems?: IVerticalNavigationItemProps[];
     hasStreamHome?: boolean;
-    hideStreamHomeButton?: boolean;
     StreamHomeUrl?: string;
     streamHomeAccessToken?: string;
     streamHomeBaseUrl?: string;
     streamHomeApiKey?: string;
-    streamHomeApplications?: IApplication[];
     avatarName?: string;
     isDrawerOpen?: boolean;
     isPersistent?: boolean;
@@ -40,8 +37,6 @@ export interface IVerticalNavigationProps {
     localization?: any;
     dataAttributes?: any;
     showSupportLinks?: boolean;
-    hidePromotionalCampaign?: boolean;
-    promotionalCampaigns?: IPromotionalCampaign[];
     hasAvatar?: boolean;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;

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

@@ -7,6 +7,7 @@ export interface IApplicationHubProps {
     userOrganization?: string;
     hasPromotionalCampaigns?: boolean;
     isAppSwitcher: boolean;
+    hubApiUrl: string;
     hubApiKey: string;
     hubToken: string;
 }
@@ -15,8 +16,15 @@ export interface IApplicationHubRowProps {
     title: string;
     type?: any;
     allowEditLinks?: boolean;
+    allowTitle?: boolean;
     customName?: string;
     welcomeMessage?: string;
     userName?: string;
     userOrganization?: string;
+    hubTrackingProps: {
+        hubApiUrl: string;
+        apiKey: string;
+        token: string;
+        isAppSwitcher: boolean;
+    };
 }

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

@@ -1,14 +1,19 @@
-export interface IApplication {
-    applicationId: number;
+interface IChildApplication {
     applicationName: string;
-    shortName: string;
-    internalName: string;
-    customName?: string;
+    name: string;
     url: string;
-    children?: object[];
+    onClick?: (event: Event) => void;
 }
-export interface IPromotionalCampaign {
-    id: number;
+interface ICustomLinks {
+    id: string;
+    imageUrl: any;
+    name: string;
+    sortOrder: number;
+    type: string;
+    url: string;
+}
+interface IPromotionalCampaigns {
+    id: string;
     name: string;
     appSwitcherImageUrl: string;
     hubImageUrl: string;
@@ -16,3 +21,48 @@ export interface IPromotionalCampaign {
     basePromoUrl: string;
     isActive: boolean;
 }
+export interface IApplication {
+    applicationId: number;
+    applicationName: string;
+    url: string;
+    shortName?: string;
+    internalName?: string;
+    customName?: string;
+    children?: IChildApplication[];
+    subtitle?: string;
+}
+export interface IHubDashboard {
+    customerAccountName: string;
+    applications: IApplication[];
+    customLinks: ICustomLinks[];
+    otherProducts: IApplication[];
+    usefulLinks: ICustomLinks[];
+    promotionalCampaigns: IPromotionalCampaigns[];
+    userDetails?: {
+        customerAccountId?: string;
+        userId?: string;
+    };
+}
+export interface IDashboardData {
+    items: object[];
+    type: string;
+    title?: string;
+    allowEditLinks?: boolean;
+}
+export interface IAppSwitcherProps {
+    userId?: string;
+    layout?: string;
+    token?: string;
+    apiKey?: string;
+    baseUrl?: string;
+    localization?: any;
+    isAppSwitcherOpen?: boolean;
+    isStandalone?: boolean;
+    handleToggleAppSwitcher?: any;
+    isDrawerOpen?: boolean;
+    dataAttributes?: any;
+    StreamHomeUrl?: string;
+    hideStreamHomeButton?: boolean;
+    avatarName?: string;
+}
+export {};

package/utils/helpers.d.ts

@@ -35,6 +35,7 @@ export declare const useFadeIn: (delayOrder: number, reverse?: boolean) => Objec
  */
 export declare const useFadeAndMoveIn: (delayOrder: number, reverse?: boolean) => Object;
 interface IHubTrackingProps {
+    hubApiUrl: string;
     apiKey: string;
     token: string;
     isAppSwitcher: boolean;
@@ -49,5 +50,5 @@ interface IHubTrackingProps {
  * @param {String} param.referenceId - Clicked Id of the object.
  * @param {String} param.url - Url of the object on click.
  */
-export declare const handleHubTracking: ({ apiKey, token, isAppSwitcher, eventTypeId, referenceId, url }: IHubTrackingProps) => Promise<void>;
+export declare const handleHubTracking: ({ hubApiUrl, apiKey, token, isAppSwitcher, eventTypeId, referenceId, url }: IHubTrackingProps) => Promise<void>;
 export {};

package/utils/helpers.js

@@ -115,15 +115,21 @@ export const useFadeAndMoveIn = (delayOrder, reverse = false) => {
  * @param {String} param.referenceId - Clicked Id of the object.
  * @param {String} param.url - Url of the object on click.
  */
-export const handleHubTracking = async ({ apiKey, token, isAppSwitcher, eventTypeId, referenceId, url }) => {
-    const { host, hostname } = window.location;
+export const handleHubTracking = async ({ hubApiUrl, apiKey, token, isAppSwitcher, eventTypeId, referenceId, url }) => {
+    const { hostname } = window.location;
     if (hostname === 'localhost') {
-        console.log('Send tracking to Hub', { isAppSwitcher, eventTypeId, referenceId, url });
+        console.log('Send tracking to Hub', { isHub: !isAppSwitcher, eventTypeId, referenceId, url });
+        return;
+    }
+    else if (['home.learningpool.com', 'home-staging.learningpool.com'].includes(hostname)) {
+        // Not send tracking to hub
+        return;
     }
     if (!eventTypeId || !referenceId) {
         return;
     }
-    fetch(`https://api.${host}/interaction`, {
+    const hubAPI = new URL(hubApiUrl);
+    fetch(`${hubAPI.toString()}interaction`, {
         method: 'POST',
         headers: new Headers({
             Authorization: `Bearer ${token}`,
@@ -133,7 +139,7 @@ export const handleHubTracking = async ({ apiKey, token, isAppSwitcher, eventTyp
             referenceId,
             eventTypeId,
             url,
-            isHub: isAppSwitcher
+            isHub: !isAppSwitcher
         })
     });
 };

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

@@ -1,17 +0,0 @@
-import { ReactElement } from 'react';
-export declare const LogoVariants: {
-    Default: string;
-    Solid: string;
-    Outlined: string;
-    White: string;
-};
-interface IAppSwitcherItemProps {
-    internalName: string;
-    shortName: string;
-    customName?: string;
-    handleGoToAppClick: Function;
-    applicationId?: number;
-    url?: string;
-}
-declare const AppSwitcherItem: (props: IAppSwitcherItemProps) => ReactElement;
-export default AppSwitcherItem;

package/components/stream/AppSwitcher/AppSwitcherItem.js

@@ -1,40 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Constants } from './constants';
-import { AppLink, AppName, StyledLogoSVG } from './AppSwitcherStyles';
-// Bug in the naming of the icons on the CDN
-export const LogoVariants = {
-    Default: 'icon',
-    Solid: 'icon-solid',
-    Outlined: 'icon-outlined',
-    White: 'icon-white'
-};
-/**
- * Renders an application logo.
- * @param internalName {string | null | undefined } - Internal name of the application.
- * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
- */
-const renderApplicationLogo = (internalName, logoVariant) => {
-    if (!internalName) {
-        return _jsx(_Fragment, {});
-    }
-    const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`;
-    return (_jsx(StyledLogoSVG, { children: _jsx("image", { xlinkHref: urlToIcon, width: "60", height: "60" }) }));
-};
-const AppSwitcherItem = (props) => {
-    const { applicationId, internalName, shortName, customName, url, handleGoToAppClick } = props;
-    const solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
-    return (_jsxs(AppLink, { href: url ?? '#', target: "_blank", onClick: event => applicationId ? handleGoToAppClick(event, applicationId) : null, children: [applicationId && (
-            // Create a stack effect to indicate multiple
-            _jsxs(_Fragment, { children: [_jsx("span", { style: {
-                            position: 'absolute',
-                            top: '4px',
-                            transform: 'scale(0.8)',
-                            zIndex: 0
-                        }, children: solidLogo }), _jsx("span", { style: {
-                            position: 'absolute',
-                            top: '10px',
-                            transform: 'scale(0.9)',
-                            zIndex: 0
-                        }, children: solidLogo })] })), solidLogo, _jsx(AppName, { children: customName ?? shortName })] }));
-};
-export default AppSwitcherItem;

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

@@ -1,16 +0,0 @@
-export declare const AppSwitcherPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const MenuContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SearchContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AppListHeader: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const AppListItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AppLink: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const BackButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const SearchBox: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const AppName: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const AppOrganisationCount: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const SelectedOrganisation: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;
-export declare const StyledLogoSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;
-export declare const OrganisationList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OrganisationLink: import("styled-components").StyledComponent<"a", any, {}, never>;

package/components/stream/AppSwitcher/AppSwitcherStylesStandalone.js

@@ -1,256 +0,0 @@
-import styled from 'styled-components';
-export const AppSwitcherPanel = styled.div `
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px;
-  box-sizing: border-box;
-  height: 450px;
-  padding: 1rem 1.5rem;
-  position: absolute;
-  width: 360px;
-`;
-export const List = styled.ul `
-`;
-export const MenuContent = styled.div `
-  align-items: flex-start;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-top: 1rem;
-`;
-export const SearchContent = styled.div `
-  align-items: flex-start;
-  box-sizing: border-box;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: 1rem 1rem 2rem;
-`;
-export const AppListHeader = styled.p `
-  align-items: center;
-  color: #757575;
-  display: flex;
-  font-weight: normal;
-  justify-content: flex-start;
-  padding: 0.5rem 1.25rem 0;
-  text-transform: uppercase;
-
-  & svg {
-    height: 24px;
-    margin-right: 0.5rem;
-    width: 24px;
-  }
-`;
-export const AppListItem = styled.div `
-  align-items: center;
-  align-self: stretch;
-  box-sizing: border-box;
-  flex-direction: column;
-  flex: 0 0 ${100 / 3}%;
-  overflow: visible;
-  padding: 0.25rem;
-  position: relative;
-
-  &:hover {
-    background-color: transparent;
-  }
-`;
-export const AppLink = styled.a `
-  align-items: center;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  font-size: 0.85rem;
-  justify-content: center;
-  overflow: hidden;
-  padding: 1rem 0 0.5rem;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition: all 200ms ease;
-  width: 100%;
-
-  & .MuiTouchRipple-rippleVisible {
-    color: #004071;
-    opacity: 0.25;
-  }
-
-  &:hover,
-  &:focus {
-    background-color: #ecf4fb;
-    text-decoration: none;
-  }
-
-  &:active {
-    background-color: #f1f1f1;
-  }
-
-  & svg {
-    height: 60px;
-    width: 60px;
-  }
-
-  &:hover + span,
-  &:focus + span {
-    opacity: 1;
-  }
-`;
-export const BackButton = styled.button `
-  align-items: center;
-  background: transparent;
-  border: 0;
-  color: #aaa;
-  cursor: pointer;
-  display: flex;
-  padding: 0.25rem 0;
-  text-align: left;
-  width: 100%;
-
-  &:focus,
-  &:hover {
-    background-color: #eee;
-  }
-`;
-export const SearchBox = styled.input `
-  background: #f4f4f4;
-  border: thin solid #888;
-  box-sizing: border-box;
-  color: #777;
-  padding: 0.5rem;
-  width: 100%;
-
-  &:hover .MuiOutlinedInput-notchedOutline {
-    border-color: #888;
-  }
-
-  & .MuiOutlinedInput-root {
-    border-radius: 0;
-    color: #777;
-    padding: 0;
-  }
-
-  & .MuiOutlinedInput-input {
-    padding: 0.5rem;
-  }
-
-  & ::placeholder {
-    opacity: 0.75;
-  }
-`;
-export const AppName = styled.p `
-  color: #00497D;
-  font-weight: normal;
-  margin: 0.5rem 0 0;
-  white-space: nowrap;
-`;
-export const AppOrganisationCount = styled.span `
-  background: #00497D;
-  border-color: #616161;
-  border-radius: 4px;
-  border: none;
-  color: white;
-  font-size: 1rem;
-  font-weight: bold;
-  height: 50px;
-  left: 50%;
-  line-height: 50px;
-  margin-top: 0;
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 43%;
-  transform: translate(-50%, -50%);
-  width: 50px;
-  z-index: 1;
-`;
-export const SelectedOrganisation = styled.div `
-  align-items: center;
-  color: #757575;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  padding: 1.5rem 0;
-  text-transform: uppercase;
-  width: 100%;
-
-  & svg,
-  & svg image {
-    height: 24px;
-    width: 24px;
-  }
-
-  & h6 {
-    font-size: 1.2rem;
-    font-weight: 600;
-    margin: 0 0 0 1rem;
-  }
-`;
-export const StyledSVG = styled.svg `
-  box-sizing: content-box;
-  display: inline-block;
-  fill: currentcolor;
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  height: 1em;
-  margin: 4px;
-  padding: 0;
-  user-select: none;
-  width: 1em;
-`;
-export const StyledLogoSVG = styled.svg `
-  background-color: #E6EAF0;
-  border: thin solid #E6EAF0;
-  position: relative;
-  z-index: 1;
-`;
-export const OrganisationList = styled.div `
-  height: 300px;
-  overflow: auto;
-  padding-top: 0.5rem;
-  width: 100%;
-`;
-export const OrganisationLink = styled.a `
-  align-items: center;
-  border-radius: 4px;
-  box-shadow: none;
-  color: #777;
-  display: flex;
-  font-size: 1rem;
-  justify-content: space-between;
-  margin: 0 0.125rem;
-  padding: 0.5rem;
-  text-decoration: none;
-  transition: all 200ms ease;
-
-  & .MuiTouchRipple-rippleVisible {
-    color: #004071;
-    opacity: 0.25;
-  }
-
-  &:focus,
-  &:hover {
-    background-color: #f5f5f5;
-
-    & svg {
-      visibility: visible;
-    }
-  }
-
-  &:active {
-    background-color: #f1f1f1;
-  }
-
-  & .MuiLink-root {
-    align-items: center;
-    color: #777;
-    display: flex;
-    justify-content: space-between;
-    text-decoration: none;
-    width: 100%;
-  }
-
-  & svg {
-    visibility: hidden;
-  }
-`;

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

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

package/components/stream/AppSwitcher/PromotionalCampaignItem.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { CardMedia } from '@mui/material';
-import { useState } from 'react';
-import { PromotionalCampaignCardStyled, PromotionalCampaignCardActionArea } from './AppSwitcherStyles';
-const PromotionalCampaignItem = ({ imageUrl, altText, linkUrl, onImageError }) => {
-    const [imageLoaded, setImageLoaded] = useState(true);
-    const handleImageError = () => {
-        setImageLoaded(false);
-        if (onImageError) {
-            onImageError();
-        }
-    };
-    if (!imageLoaded)
-        return null;
-    return (_jsx(PromotionalCampaignCardStyled, { children: _jsx(PromotionalCampaignCardActionArea, { onClick: () => window.open(linkUrl, '_blank'), children: _jsx(CardMedia, { 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',
-                        objectPosition: 'center',
-                        position: 'absolute',
-                        top: 0,
-                        left: 0
-                    } }) }) }) }));
-};
-export default PromotionalCampaignItem;