@learningpool/ui 1.18.1 → 1.19.1

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -1,156 +1,49 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import jwtDecode from 'jwt-decode';
 import * as queryString from 'query-string';
-import AppSwitcherItem, { LogoVariants } from './AppSwitcherItem';
-import { AppListHeader, AppListItem, AppOrganisationCount, StyledSVG, BackButton, MenuContent, OrganisationLink, OrganisationList, SearchBox, SearchContent, SelectedOrganisation, AppSwitcherPanel, StyleHomeButton } from './AppSwitcherStyles';
+import { AppSwitcherPanel, AppSwitcherHeaderPanel, AppSwitcherHeader, AppSwitcherCloseButton, AppSwitcherFooterPanel, StyledHomeButton, AppSwitcherShadow } from './AppSwitcherStyles';
 import { Constants } from './constants';
 import { defaultAttributes } from '../../../utils/dataAttributes';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import PromotionalCampaignItem from './PromotionalCampaignItem';
 import { EVENT_KEYS } from '../../../utils/constants';
-const addUtmParams = (baseUrl, source, medium, campaign) => {
-    try {
-        const 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;
-    }
-};
+import { HubEventTypeID } from '../../../utils/Enums/HubEventTypes.enum';
+import AppHub from '../AppHub/AppHub';
+import { Box, Typography } from '@mui/material';
+import { DrawerShadow } from '../../navigation/VerticalNavigation/VerticalNavigationStyles';
 const AppSwitcher = (props) => {
-    const { isAppSwitcherOpen, handleToggleAppSwitcher, isDrawerOpen, localization, dataAttributes, apiKey = '', baseUrl } = props;
+    const { isAppSwitcherOpen, handleToggleAppSwitcher, isDrawerOpen, localization, dataAttributes, baseUrl, avatarName, apiKey = '', isStandalone = true } = props;
     let { token } = props;
-    // Holds the applications which are displayed.
-    const [applications, setApplications] = useState([]);
-    // Holds the latest promotional campaign advert.
-    const [promotionalCampaigns, setPromotionalCampaigns] = useState(null);
-    // Controls which tab is active.
-    const [activeTab, setActiveTab] = useState(Constants.Tabs.ListApplications);
-    // Holds the list of filtered organisations (on the second tab).
-    const [filteredOrgs, setFilteredOrgs] = useState([]);
-    // Holds a reference to the active application (on the second tab).
-    const [activeApplication, setActiveApplication] = useState(null);
-    // Stores any org filter text (on the second tab).
-    const [searchString, setSearchString] = useState('');
-    // Holds the number of valid promotional campaigns.
-    const [validCampaignCount, setValidCampaignCount] = useState(promotionalCampaigns?.length || 0);
-    // Decrease the valid campaign count if an image fails to load.
-    const handleCampaignImageError = () => {
-        setValidCampaignCount(prev => Math.max(0, prev - 1));
-    };
+    const [dashboardData, setDashboardData] = useState([]);
+    const [hasPromotionalCampaigns, setHasPromotionalCampaigns] = useState(false);
+    const [userOrg, setUserOrg] = useState('');
+    const userFirstName = avatarName?.split(' ')[0];
     const messages = { ...Constants.DefaultMessages, ...localization };
     const dataIds = { ...defaultAttributes, ...dataAttributes };
     let userId = props.userId ?? '';
-    /**
-     * Queries the Hub/Home API to fetch latest promotional campaign.
-     * @returns {Promise<IApplication[]>} Get a Promotional Campaign to show.
-     */
-    const getLatestPromotionalCampaign = async () => {
-        // If the access token has changed the endpoint should be called again.
-        if (!token || typeof token !== 'string') {
-            return null;
-        }
-        try {
-            const response = await fetch(`${baseUrl ?? Constants.BaseUrl}/promotional-campaigns?onlyLatest=true&isActive=true`, {
-                method: 'get',
-                headers: new Headers({
-                    Authorization: `Bearer ${token}`,
-                    'x-api-key': apiKey
-                })
-            });
-            if (!response.ok) {
-                console.error('Unable to retrieve latest promotional campaign from Hub API, returned statuscode:', response.status);
-                return null;
-            }
-            const responseData = await response.json();
-            const data = responseData.records;
-            // Store the latest access token
-            window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
-            return data?.map(({ id, name, appSwitcherImageUrl, hubImageUrl, altText, basePromoUrl, isActive }) => ({
-                id,
-                name,
-                appSwitcherImageUrl,
-                hubImageUrl,
-                altText,
-                basePromoUrl,
-                isActive
-            })) || null;
-        }
-        catch (error) {
-            console.error('Unable to retrieve and display latest promotional campaign from Hub API', error);
-            return null;
-        }
-    };
     /**
      * Handles closing of the application dialog.
      */
     const handleDialogClose = () => {
         handleToggleAppSwitcher();
-        setTimeout(() => {
-            setSearchString('');
-            setActiveApplication(null);
-            setActiveTab(Constants.Tabs.ListApplications);
-        }, 400);
-    };
-    /**
-     * Updates the search/filter text.
-     * @param event {React.ChangeEvent}
-     */
-    const handleSearchChange = (event) => {
-        setSearchString(event.target.value);
-    };
-    /**
-     * Navigates to the organisation tab for an application with children.
-     * @param event {React.MouseEvent} - Click event.
-     * @param applicationId {number | undefined} - Unique identifier of the application.
-     * @returns {void}
-     */
-    const handleGoToAppClick = (event, applicationId) => {
-        event?.preventDefault();
-        event?.stopPropagation();
-        if (!applicationId) {
-            return;
-        }
-        const selectedApplication = applications.find(a => a.applicationId === applicationId);
-        if (!selectedApplication) {
-            return;
-        }
-        setFilteredOrgs(selectedApplication.children);
-        setActiveApplication(selectedApplication);
-        setActiveTab(Constants.Tabs.ListOrgs);
     };
     /**
-     * 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.
+     * Queries the Steam Home API to fetch dashboard data.
+     * @returns {Promise<IHubDashboard>} A list of data from hub dashboard.
      */
-    const renderApplicationLogo = (internalName, logoVariant) => {
-        if (!internalName) {
-            return _jsx(_Fragment, {});
-        }
-        const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`;
-        return (_jsx("svg", { children: _jsx("image", { xlinkHref: urlToIcon, width: "60", height: "60" }) }));
-    };
-    /**
-     * Queries the Steam Home API to fetch a list of applications.
-     * @returns {Promise<IApplication[]>} A list of applications the user has access to.
-     */
-    const getApplicationsForUser = async () => {
+    const getHubDashboardData = async () => {
         // If the access token has changed the endpoint should be called again.
-        if (token && typeof token === 'string' && token !== window.localStorage.getItem(Constants.LocalStorageKey.Token)) {
+        if (token && typeof token === 'string') {
             if (!userId) {
                 // Extract user identifier from the JWT.
                 const decodedToken = jwtDecode(token);
                 userId = decodedToken[Constants.HomeAttributes.UserId];
             }
-            const response = await fetch(`${baseUrl ?? Constants.BaseUrl}/users/${userId}/application-instances`, {
-                method: 'get',
+            const hubAPIEndpoint = new URL(baseUrl || Constants.BaseUrl);
+            const response = await fetch(`${hubAPIEndpoint.toString()}users/${userId}/dashboard`, {
+                method: 'GET',
                 headers: new Headers({
                     Authorization: `Bearer ${token}`,
                     'x-api-key': apiKey
@@ -158,31 +51,28 @@ const AppSwitcher = (props) => {
             });
             if (response.status !== 200) {
                 console.error('Unable to retrieve user applications from Stream Home');
-                return [];
+                return null;
             }
             const data = await response.json();
             // Store the latest access token.
             window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
-            return data.map((application) => {
-                const { applicationId, applicationName, shortName, internalName, customName, url } = application;
-                return {
-                    applicationId,
-                    applicationName,
-                    shortName,
-                    internalName,
-                    customName,
-                    url: url || ''
-                };
-            });
+            window.localStorage.setItem(Constants.LocalStorageKey.Applications, JSON.stringify(data));
+            return data;
         }
         else {
-            return [];
+            console.warn('Accessing dashboard data from local storage');
+            const localDashboardData = window.localStorage.getItem(Constants.LocalStorageKey.Applications);
+            if (localDashboardData) {
+                return JSON.parse(localDashboardData);
+            }
+            else {
+                console.warn('Token required');
+                return null;
+            }
         }
     };
     useEffect(() => {
         const loadData = async () => {
-            let applicationInstances = [];
-            let userApplications = [];
             if (!token) {
                 const parsedQueryString = queryString.parse(window.location.search);
                 if (parsedQueryString.token && typeof parsedQueryString.token === 'string') {
@@ -194,110 +84,84 @@ const AppSwitcher = (props) => {
                     token = (match && match.length === 2 && match[1]) || '';
                 }
             }
-            if (!props.applications || props.applications.length === 0) {
-                applicationInstances = await getApplicationsForUser();
-            }
-            else {
-                // A hard-coded list of applications has been passed to the component.
-                applicationInstances = props.applications;
+            // Store the latest access token.
+            window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
+            const userDashboard = await getHubDashboardData();
+            if (!userDashboard) {
+                return;
             }
-            if (Array.isArray(applicationInstances) && applicationInstances.length) {
-                // Get a distinct list of applications the user has access to.
-                const uniqueApplicationIds = applicationInstances.map((item) => item.applicationId).filter((value, index, self) => self.indexOf(value) === index);
-                // Iterate over these to build up the userApplications array.
-                uniqueApplicationIds.forEach(applicationId => {
-                    const applications = applicationInstances.filter(instance => instance.applicationId === applicationId);
-                    if (applications.length > 1) {
-                        // This is an application with multiple orgs/tenants the user has access to.
-                        userApplications.push({
-                            applicationId,
-                            applicationName: applications[0].applicationName,
-                            shortName: applications[0].shortName,
-                            customName: applications[0].customName,
-                            internalName: applications[0].internalName,
-                            url: '',
-                            children: applications.map(a => {
-                                return {
-                                    name: a.customName ?? a.applicationName,
-                                    url: a.url
-                                };
-                            })
+            userDashboard.applications.forEach((application) => {
+                if (application.children) {
+                    application.children.forEach(a => {
+                        a.onClick = () => window.open(a.url, '_blank');
+                    });
+                }
+            });
+            const userDashboardData = [{
+                    items: userDashboard.applications.map((app) => {
+                        return Object.assign(app, {
+                            hubReferenceId: app.applicationId,
+                            hubEventTypeId: HubEventTypeID.APP_OPENED
+                        });
+                    }),
+                    type: 'product',
+                    title: messages['your-apps']
+                },
+                {
+                    items: userDashboard.customLinks.map((customLink) => {
+                        return Object.assign(customLink, {
+                            hubReferenceId: customLink.name,
+                            hubEventTypeId: HubEventTypeID.LINK_OPENED
                         });
-                    }
-                    else {
-                        // This is a standalone application.
-                        userApplications.push({
-                            applicationId: applications[0].applicationId,
-                            applicationName: applications[0].applicationName,
-                            shortName: applications[0].shortName,
-                            customName: applications[0].customName,
-                            internalName: applications[0].internalName,
-                            url: applications[0].url
+                    }),
+                    type: 'custom-link',
+                    title: messages['explore-custom-apps'],
+                    allowEditLinks: true
+                },
+                {
+                    items: userDashboard.usefulLinks.map((link) => {
+                        return Object.assign(link, {
+                            hubReferenceId: link.name,
+                            hubEventTypeId: HubEventTypeID.LINK_OPENED
                         });
-                    }
+                    }),
+                    type: 'custom-link',
+                    title: messages['useful-links']
+                },
+                {
+                    items: userDashboard.otherProducts.map((product) => {
+                        return Object.assign(product, {
+                            hubReferenceId: product.applicationId,
+                            hubEventTypeId: HubEventTypeID.OTHER_PRODUCT
+                        });
+                    }),
+                    type: 'product',
+                    title: messages['explore-more'],
+                    allowTitle: true
+                }];
+            if (userDashboard.promotionalCampaigns?.length > 0) {
+                userDashboardData.unshift({
+                    // @ts-ignore
+                    items: userDashboard.promotionalCampaigns,
+                    type: 'banner-advert'
                 });
-                // Serialize and cache the applications returned.
-                window.localStorage.setItem(Constants.LocalStorageKey.Applications, JSON.stringify(userApplications));
-            }
-            else {
-                const localApplications = window.localStorage.getItem(Constants.LocalStorageKey.Applications);
-                if (localApplications) {
-                    // Recreate the application state from local storage.
-                    userApplications = JSON.parse(localApplications);
-                }
-            }
-            // Store the user's applications.
-            setApplications(userApplications);
-        };
-        loadData()
-            .catch(console.error);
-    }, [token, userId, props.applications]);
-    useEffect(() => {
-        const loadPromotionalCampaigns = async () => {
-            try {
-                let promotionalCampaigns = null;
-                // Use props if available
-                if (props.promotionalCampaigns && props.promotionalCampaigns.length > 0) {
-                    promotionalCampaigns = props.promotionalCampaigns;
-                }
-                else if (token && typeof token === 'string' &&
-                    token !== window.localStorage.getItem(Constants.LocalStorageKey.Token)) {
-                    // Fetch from API if token has changed
-                    promotionalCampaigns = await getLatestPromotionalCampaign();
-                }
-                else {
-                    // Check localStorage
-                    const localPromotionalCampaignsJson = window.localStorage.getItem(Constants.LocalStorageKey.PromotionalCampaigns);
-                    if (localPromotionalCampaignsJson) {
-                        try {
-                            const parsedCampaigns = JSON.parse(localPromotionalCampaignsJson);
-                            if (Array.isArray(parsedCampaigns)) {
-                                promotionalCampaigns = parsedCampaigns;
-                            }
-                        }
-                        catch (error) {
-                            console.error('Error parsing stored campaigns:', error);
-                        }
-                    }
-                }
-                // Update state and cache if we have campaigns
-                if (Array.isArray(promotionalCampaigns) && promotionalCampaigns.length > 0) {
-                    setPromotionalCampaigns(promotionalCampaigns);
-                    setValidCampaignCount(promotionalCampaigns.length);
-                    window.localStorage.setItem(Constants.LocalStorageKey.PromotionalCampaigns, JSON.stringify(promotionalCampaigns));
-                }
-                else {
-                    setPromotionalCampaigns(null);
-                }
-            }
-            catch (error) {
-                console.error('Error loading promotional campaigns:', error);
-                setPromotionalCampaigns(null);
             }
+            userDashboard.promotionalCampaigns.map(promotionalCampaign => {
+                return Object.assign(promotionalCampaign, {
+                    hubReferenceId: promotionalCampaign.name,
+                    hubEventTypeId: HubEventTypeID.REQUEST_DEMO
+                });
+            });
+            setHasPromotionalCampaigns(userDashboard.promotionalCampaigns?.length > 0);
+            setDashboardData(userDashboardData);
+            setUserOrg(userDashboard.customerAccountName);
+            window.localStorage.setItem(Constants.LocalStorageKey.HubDashboard, JSON.stringify({
+                hasPromotionalCampaigns: userDashboard.promotionalCampaigns?.length > 0,
+                hubCustomerAccountName: userDashboard.customerAccountName
+            }));
         };
-        loadPromotionalCampaigns()
-            .catch(console.error);
-    }, [token, props.promotionalCampaigns]);
+        loadData().catch(console.error);
+    }, [token, userId]);
     useEffect(() => {
         if (isAppSwitcherOpen) {
             document.addEventListener('mousedown', handleAppSwitcherClose);
@@ -326,26 +190,21 @@ const AppSwitcher = (props) => {
             }
         }
     };
-    if (!props.applications && (!token || !apiKey)) {
+    if ((!token || !apiKey)) {
         return null;
     }
-    const { hidePromotionalCampaign = false } = props;
-    return (_jsxs(AppSwitcherPanel, { 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: validCampaignCount > 0, onMouseDown: (event) => event.stopPropagation(), children: [activeTab === Constants.Tabs.ListApplications
-                ? (_jsxs("div", { children: [!hidePromotionalCampaign && promotionalCampaigns && promotionalCampaigns.length > 0 && (_jsx("div", { className: "promotional-campaigns-container", children: promotionalCampaigns.map((campaign) => (_jsx(PromotionalCampaignItem, { imageUrl: campaign.appSwitcherImageUrl, altText: campaign.altText || messages['app-switcher-alt-text'], linkUrl: addUtmParams(campaign.basePromoUrl, document.title || 'app_switcher', 'app_switcher_advert', campaign.name), onImageError: handleCampaignImageError }, campaign.id))) })), _jsxs(AppListHeader, { "data-id": dataIds.AppSwitcherHeader, children: [messages['your-apps'], !props.hideStreamHomeButton &&
-                                    _jsx(StyleHomeButton, { "aria-label": messages['go-to-hub'], endIcon: _jsx(ChevronRightIcon, {}), onClick: e => window.open(props.StreamHomeUrl ?? Constants.DefaultStreamHomeUrl), children: messages['go-to-hub'] })] }), _jsx(MenuContent, { style: {
-                                display: activeTab === 1 ? 'flex' : 'none'
-                            }, "data-id": dataIds.AppSwitcherList, children: applications.map(({ applicationId, applicationName, shortName, customName, internalName, url, children }) => (_jsxs(AppListItem, { "data-id": dataIds.AppSwitcherItem, children: [url && (_jsx(AppSwitcherItem, { internalName: internalName, shortName: shortName, customName: customName, url: url, handleGoToAppClick: handleGoToAppClick })), !url && (_jsx(AppSwitcherItem, { internalName: internalName, shortName: shortName, customName: customName, handleGoToAppClick: handleGoToAppClick, applicationId: applicationId })), children && (_jsx(AppOrganisationCount, { "data-id": dataIds.AppSwitcherOrgCount, children: children.length }))] }, applicationId))) })] }))
-                : null, activeTab === Constants.Tabs.ListOrgs
-                ? (_jsxs(SearchContent, { style: {
-                        display: activeTab === 2 ? 'flex' : 'none'
-                    }, "data-id": dataIds.AppSwitcherOrgPanel, children: [_jsxs(BackButton, { onClick: () => {
-                                setActiveTab(Constants.Tabs.ListApplications);
-                                setSearchString('');
-                            }, "data-id": dataIds.AppSwitcherOrgBackButton, children: [_jsx(StyledSVG, { className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronLeftIcon", children: _jsx("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }), messages['back-to']] }), _jsxs(SelectedOrganisation, { "data-id": dataIds.AppSwitcherOrgHeader, children: [renderApplicationLogo(activeApplication?.internalName, LogoVariants.Solid), _jsx("span", { children: activeApplication ? activeApplication.applicationName : '' })] }), _jsx(SearchBox, { id: "app-switcher-search-org", type: 'text', value: searchString, onChange: handleSearchChange, placeholder: messages.search, "data-id": dataIds.AppSwitcherOrgSearch }), _jsx(OrganisationList, { "data-id": dataIds.AppSwitcherOrgList, children: filteredOrgs?.filter(o => o.name.toLowerCase().includes(searchString.toLowerCase())).map((org, i) => (_jsxs(OrganisationLink, { href: org.url, target: "_blank", "data-id": dataIds.AppSwitcherOrgItem, children: [org.name, _jsx(StyledSVG, { className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronRightIcon", children: _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })] }, i))) })] }))
-                : null] }));
+    const docTextDirection = window.document?.dir;
+    return (_jsxs(_Fragment, { children: [_jsxs(AppSwitcherPanel, { id: "app-switcher-menu", style: {
+                    display: isAppSwitcherOpen ? 'block' : 'none',
+                    left: isDrawerOpen ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3,
+                    right: (docTextDirection === 'rtl' && isDrawerOpen) ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3
+                }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer, onMouseDown: (event) => event.stopPropagation(), children: [_jsxs(AppSwitcherHeaderPanel, { children: [_jsx(AppSwitcherHeader, { children: messages['your-apps'] }), _jsx(AppSwitcherCloseButton, { onClick: handleDialogClose })] }), dashboardData.length > 0 && _jsx(Box, { sx: { marginBottom: '3rem' }, children: _jsx(AppHub, { data: dashboardData, hasPromotionalCampaigns: hasPromotionalCampaigns, isAppSwitcher: true, userName: userFirstName || avatarName, userOrganization: userOrg, hubApiUrl: baseUrl || Constants.BaseUrl, hubApiKey: apiKey, hubToken: token }) }), dashboardData.length === 0 && _jsx(Typography, { variant: 'h2', component: 'h4', sx: { marginTop: '1rem', justifySelf: 'anchor-center' }, children: messages['data-not-found'] }), _jsx(AppSwitcherFooterPanel, { children: _jsx(StyledHomeButton, { "aria-label": messages['go-to-hub'], endIcon: docTextDirection === 'rtl' ? _jsx(ChevronLeftIcon, { sx: { marginRight: '0.5em' } }) : _jsx(ChevronRightIcon, {}), onClick: e => window.open(props.StreamHomeUrl || Constants.DefaultStreamHomeUrl), children: messages['go-to-hub'] }) })] }), _jsx(AppSwitcherShadow, { style: {
+                    display: isAppSwitcherOpen ? 'block' : 'none',
+                    left: isDrawerOpen ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3
+                } }), isAppSwitcherOpen && !isStandalone &&
+                _jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', sx: {
+                        zIndex: -1
+                    } })] }));
 };
 AppSwitcher.propTypes = {
     token: PropTypes.string,
@@ -353,10 +212,7 @@ AppSwitcher.propTypes = {
     layout: PropTypes.string,
     userId: PropTypes.string,
     baseUrl: PropTypes.string,
-    localization: PropTypes.object,
-    currentApplicationId: PropTypes.number,
-    applications: PropTypes.array,
-    hidePromotionalCampaign: PropTypes.bool
+    localization: PropTypes.object
 };
 AppSwitcher.defaultProps = {
     layout: Constants.Layout.Vertical,