@codecademy/brand 4.0.0-alpha.fb4adf2b4d.0 → 4.0.0

package/dist/GlobalHeader/GlobalHeaderVariants.js

@@ -0,0 +1,351 @@
+import { addPayment, bootcampCta, bootcampsHub, businessSolutions, catalogDropdown, coaching, communityDropdown, enterpriseLogo, freeProfile, loading, login, logo, myHome, myPercipioHome, pricingDropdown, proProfile, requestTeamsDemo, resourcesDropdown, signUp, signUpTextButton, simpleResourcesDropdown, tryProForFree, unpausePro, upgradePlan, upgradeToPro } from './GlobalHeaderItems';
+const isBusinessPage = () => {
+  if (typeof window === 'undefined') return false;
+  return window.location.pathname === '/business' || window.location.pathname === '/business/pricing';
+};
+const transformSimpleResourcesDropdownlabels = resourcesLabel => ({
+  ...simpleResourcesDropdown,
+  text: resourcesLabel?.title || simpleResourcesDropdown.text,
+  popover: simpleResourcesDropdown.popover.map(item => ({
+    ...item,
+    text: resourcesLabel?.[item.id] || item.text
+  }))
+});
+const anonHeaderItems = ({
+  renderLogin,
+  renderSignUp,
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  const specialLogo = {
+    ...logo,
+    checkMini: true
+  };
+  const leftItems = [specialLogo, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), bootcampsHub, ...(!user?.hasCoachingSubscription ? [coaching] : []), businessSolutions];
+  const rightItems = [];
+  if (isBusinessPage()) {
+    if (renderSignUp) {
+      rightItems.push(signUpTextButton);
+    }
+    if (renderLogin) {
+      rightItems.push(requestTeamsDemo);
+    }
+  } else {
+    if (renderLogin) {
+      rightItems.push(login);
+    }
+    if (renderSignUp) {
+      rightItems.push(signUp);
+    }
+  }
+  return {
+    left: leftItems,
+    right: rightItems
+  };
+};
+const anonMobileHeaderItems = ({
+  renderLogin,
+  renderSignUp,
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  const specialLogo = {
+    ...logo,
+    checkMini: true
+  };
+  const leftItems = [specialLogo];
+  const rightItems = [];
+  if (isBusinessPage()) {
+    if (renderSignUp) {
+      rightItems.push(signUpTextButton);
+    }
+    if (renderLogin) {
+      rightItems.push(requestTeamsDemo);
+    }
+  } else {
+    if (renderLogin) {
+      rightItems.push(login);
+    }
+    if (renderSignUp) {
+      rightItems.push(signUp);
+    }
+  }
+  const mainMenuItems = [catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), bootcampsHub, ...(!user?.hasCoachingSubscription ? [coaching] : []), businessSolutions];
+  return {
+    left: leftItems,
+    right: rightItems,
+    mainMenu: mainMenuItems
+  };
+};
+export const anonDefaultHeaderItems = ({
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  return anonHeaderItems({
+    renderLogin: true,
+    renderSignUp: true,
+    hidePricing,
+    user,
+    isInRevampedBlpExperimentVariant
+  });
+};
+export const anonDefaultMobileHeaderItems = ({
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  return anonMobileHeaderItems({
+    renderLogin: true,
+    renderSignUp: true,
+    hidePricing,
+    user,
+    isInRevampedBlpExperimentVariant
+  });
+};
+export const anonLandingHeaderItems = ({
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  return anonHeaderItems({
+    renderLogin: true,
+    renderSignUp: false,
+    hidePricing,
+    user,
+    isInRevampedBlpExperimentVariant
+  });
+};
+export const anonLandingMobileHeaderItems = ({
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  return anonMobileHeaderItems({
+    renderLogin: true,
+    renderSignUp: false,
+    hidePricing,
+    user,
+    isInRevampedBlpExperimentVariant
+  });
+};
+export const anonLoginHeaderItems = ({
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  return anonHeaderItems({
+    renderLogin: false,
+    renderSignUp: true,
+    hidePricing,
+    user,
+    isInRevampedBlpExperimentVariant
+  });
+};
+export const anonLoginMobileHeaderItems = ({
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  return anonMobileHeaderItems({
+    renderLogin: false,
+    renderSignUp: true,
+    hidePricing,
+    user,
+    isInRevampedBlpExperimentVariant
+  });
+};
+export const anonSignupHeaderItems = ({
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  return anonHeaderItems({
+    renderLogin: true,
+    renderSignUp: false,
+    hidePricing,
+    user,
+    isInRevampedBlpExperimentVariant
+  });
+};
+export const anonSignupMobileHeaderItems = ({
+  hidePricing,
+  user,
+  isInRevampedBlpExperimentVariant
+}) => {
+  return anonMobileHeaderItems({
+    renderLogin: true,
+    renderSignUp: false,
+    hidePricing,
+    user,
+    isInRevampedBlpExperimentVariant
+  });
+};
+export const freeHeaderItems = ({
+  user,
+  hidePricing,
+  isInRevampedBlpExperimentVariant
+}) => {
+  const specialLogo = {
+    ...logo,
+    checkMini: true
+  };
+  const leftItems = [specialLogo, myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), bootcampsHub, ...(!user?.hasCoachingSubscription ? [coaching] : []), businessSolutions];
+  const upgradeButton = upgradeToPro(user.proCheckoutUrl);
+  const rightItems = [];
+  rightItems.push(freeProfile(user));
+  rightItems.push(user.showProUpgrade ? upgradeButton : tryProForFree(user.proCheckoutUrl));
+  return {
+    left: leftItems,
+    right: rightItems
+  };
+};
+export const freeMobileHeaderItems = ({
+  user,
+  hidePricing,
+  isInRevampedBlpExperimentVariant
+}) => {
+  const specialLogo = {
+    ...logo,
+    checkMini: true
+  };
+  const leftItems = [specialLogo];
+  const rightItems = [];
+  const upgradeButton = upgradeToPro(user.proCheckoutUrl);
+  const mainMenuItems = [myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), bootcampsHub, ...(!user?.hasCoachingSubscription ? [coaching] : []), businessSolutions, freeProfile(user), user.showProUpgrade ? upgradeButton : tryProForFree(user.proCheckoutUrl)];
+  return {
+    left: leftItems,
+    right: rightItems,
+    mainMenu: mainMenuItems
+  };
+};
+export const enterpriseHeaderItems = ({
+  user,
+  props
+}) => {
+  const {
+    hideHeaderLinksInChromeless,
+    hideHeaderResourcesDropdown,
+    localizedLabels
+  } = props;
+  const leftItems = hideHeaderLinksInChromeless ? [enterpriseLogo(user, true)] : [enterpriseLogo(user, true), myPercipioHome(user, localizedLabels?.enterpriseFormattedHomeLabel)];
+  if (!hideHeaderResourcesDropdown) leftItems.push(transformSimpleResourcesDropdownlabels(localizedLabels?.resourcesDropdown));
+  return {
+    left: leftItems,
+    right: []
+  };
+};
+export const proHeaderItems = ({
+  user
+}) => {
+  const leftItems = [logo, myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(user.isPlusUser ? [upgradePlan] : []), bootcampsHub, ...(!user?.hasCoachingSubscription ? [coaching] : []), businessSolutions];
+  const rightItems = [];
+  rightItems.push(proProfile(user));
+  if (user.isPaused) {
+    rightItems.push(unpausePro);
+  }
+  return {
+    left: leftItems,
+    right: rightItems
+  };
+};
+export const teamsHeaderItems = ({
+  user
+}) => {
+  const leftItems = [logo, myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(!user?.hasCoachingSubscription ? [coaching] : []), bootcampsHub];
+  const rightItems = [];
+  if (user.isAccountManager && user.inBusinessTrial && !user.hasBusinessSubscription) {
+    rightItems.push(addPayment);
+  }
+  rightItems.push(proProfile(user));
+  return {
+    left: leftItems,
+    right: rightItems
+  };
+};
+export const enterpriseMobileHeaderItems = ({
+  user,
+  props
+}) => {
+  const {
+    hideHeaderLinksInChromeless,
+    hideHeaderResourcesDropdown,
+    localizedLabels
+  } = props;
+  const leftItems = [enterpriseLogo(user, true)];
+  const rightItems = [];
+  const mainMenuItems = hideHeaderLinksInChromeless ? [] : [myPercipioHome(user, localizedLabels?.enterpriseFormattedHomeLabel)];
+  if (!hideHeaderResourcesDropdown) mainMenuItems.push(transformSimpleResourcesDropdownlabels(localizedLabels?.resourcesDropdown));
+  return {
+    left: leftItems,
+    right: rightItems,
+    mainMenu: mainMenuItems
+  };
+};
+export const proMobileHeaderItems = ({
+  user
+}) => {
+  const leftItems = [logo];
+  const rightItems = [];
+  const mainMenuItems = [myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(user.isPlusUser ? [upgradePlan] : []), bootcampsHub, ...(!user?.hasCoachingSubscription ? [coaching] : []), businessSolutions, proProfile(user)];
+  if (user.isPaused) {
+    mainMenuItems.push(unpausePro);
+  }
+  return {
+    left: leftItems,
+    right: rightItems,
+    mainMenu: mainMenuItems
+  };
+};
+export const teamsMobileHeaderItems = ({
+  user
+}) => {
+  const leftItems = [logo];
+  const rightItems = [];
+  const mainMenuItems = [myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(!user?.hasCoachingSubscription ? [coaching] : []), bootcampsHub, proProfile(user)];
+  if (user.isAccountManager && user.inBusinessTrial && !user.hasBusinessSubscription) {
+    mainMenuItems.push(addPayment);
+  }
+  return {
+    left: leftItems,
+    right: rightItems,
+    mainMenu: mainMenuItems
+  };
+};
+export const loadingHeaderItems = {
+  left: [loading],
+  right: []
+};
+export const loadingMobileHeaderItems = {
+  left: [loading],
+  right: [],
+  mainMenu: []
+};
+export const simpleHeaderItems = {
+  left: [logo],
+  right: []
+};
+export const simpleMobileHeaderItems = {
+  left: [logo],
+  right: [],
+  mainMenu: []
+};
+export const simpleBootcampHeaderItems = ({
+  bootcampSlug
+}) => {
+  return {
+    left: [logo],
+    right: [bootcampCta(bootcampSlug)]
+  };
+};
+export const simpleBootcampMobileHeaderItems = ({
+  bootcampSlug
+}) => {
+  return {
+    left: [logo],
+    right: [bootcampCta(bootcampSlug)],
+    mainMenu: []
+  };
+};

package/dist/GlobalHeader/context.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { AppHeaderItem } from '../AppHeader/shared';
+import { GlobalHeaderDynamicData } from './types';
+export interface GlobalHeaderItemClickContextType {
+    globalHeaderItemClick: (event: React.MouseEvent, item: AppHeaderItem) => void;
+}
+declare const GlobalHeaderItemClickContext: React.Context<GlobalHeaderItemClickContextType>;
+export declare const useGlobalHeaderItemClick: () => GlobalHeaderItemClickContextType;
+export interface GlobalHeaderDynamicDataContextType {
+    globalHeaderDynamicData: GlobalHeaderDynamicData | null;
+}
+declare const GlobalHeaderDynamicDataContext: React.Context<GlobalHeaderDynamicDataContextType>;
+export declare const useGlobalHeaderDynamicDataContext: () => GlobalHeaderDynamicDataContextType;
+export declare const DropdownPositions: Record<'free' | 'anon' | 'pro' | 'teams' | 'default', {
+    catalogDropdown: {
+        narrow: string;
+        wide: string;
+    };
+    resourceDropdown: {
+        narrow: string;
+        wide: string;
+    };
+}>;
+declare const HeaderDisplayContext: React.Context<{
+    showOnboardingQuiz?: boolean;
+    showSortingQuiz?: boolean;
+    headerType: keyof typeof DropdownPositions;
+}>;
+export declare const useHeaderDisplayContext: () => {
+    showOnboardingQuiz?: boolean;
+    showSortingQuiz?: boolean;
+    headerType: keyof typeof DropdownPositions;
+};
+export { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext, };

package/dist/GlobalHeader/context.js

@@ -0,0 +1,77 @@
+import React, { createContext, useContext } from 'react';
+const GlobalHeaderItemClickContext = /*#__PURE__*/createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  globalHeaderItemClick: () => {}
+});
+export const useGlobalHeaderItemClick = () => {
+  return useContext(GlobalHeaderItemClickContext);
+};
+const GlobalHeaderDynamicDataContext = /*#__PURE__*/createContext({
+  globalHeaderDynamicData: null
+});
+export const useGlobalHeaderDynamicDataContext = () => {
+  return useContext(GlobalHeaderDynamicDataContext);
+};
+export const DropdownPositions = {
+  free: {
+    catalogDropdown: {
+      narrow: '-9rem',
+      wide: '-14.5rem'
+    },
+    resourceDropdown: {
+      narrow: '-14.5rem',
+      wide: '-20rem'
+    }
+  },
+  anon: {
+    catalogDropdown: {
+      narrow: '-4rem',
+      wide: '-9.5rem'
+    },
+    resourceDropdown: {
+      narrow: '-9.5rem',
+      wide: '-15rem'
+    }
+  },
+  pro: {
+    catalogDropdown: {
+      narrow: '-14.5rem',
+      wide: '-14.5rem'
+    },
+    resourceDropdown: {
+      narrow: '-20rem',
+      wide: '-20rem'
+    }
+  },
+  teams: {
+    catalogDropdown: {
+      narrow: '-14.5rem',
+      wide: '-14.5rem'
+    },
+    resourceDropdown: {
+      narrow: '-20rem',
+      wide: '-20rem'
+    }
+  },
+  // won't be used, but is here to handle the case where the header type is not one of the above
+  // other header types are not part of the experiment
+  default: {
+    catalogDropdown: {
+      narrow: '-14.5rem',
+      wide: '-14.5rem'
+    },
+    resourceDropdown: {
+      narrow: '-20rem',
+      wide: '-20rem'
+    }
+  }
+};
+const HeaderDisplayContext = /*#__PURE__*/React.createContext({
+  showOnboardingQuiz: false,
+  showSortingQuiz: false,
+  headerType: 'default'
+});
+export const useHeaderDisplayContext = () => {
+  return useContext(HeaderDisplayContext);
+};
+export { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext };

package/dist/GlobalHeader/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AnonHeader, EnterpriseHeader, FreeHeader, LoadingHeader, ProHeader, SimpleBootcampHeader, SimpleHeader, TeamsHeader } from './types';
+export * from './types';
+export declare const LiveLearningHubContext: React.Context<boolean>;
+export declare const RevampedBlpExperimentContext: React.Context<boolean>;
+export type GlobalHeaderProps = AnonHeader | FreeHeader | ProHeader | EnterpriseHeader | TeamsHeader | LoadingHeader | SimpleHeader | SimpleBootcampHeader;
+export declare const GlobalHeader: React.FC<GlobalHeaderProps>;

package/dist/GlobalHeader/index.js

@@ -0,0 +1,183 @@
+import { Box } from '@codecademy/gamut';
+import { useTheme } from '@emotion/react';
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+import { AppHeader, AppHeaderMobile, isAppHeaderItemWithHref } from '..';
+import { DropdownPositions, GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext } from './context';
+import { anonDefaultHeaderItems, anonDefaultMobileHeaderItems, anonLandingHeaderItems, anonLandingMobileHeaderItems, anonLoginHeaderItems, anonLoginMobileHeaderItems, anonSignupHeaderItems, anonSignupMobileHeaderItems, enterpriseHeaderItems, enterpriseMobileHeaderItems, freeHeaderItems, freeMobileHeaderItems, loadingHeaderItems, loadingMobileHeaderItems, proHeaderItems, proMobileHeaderItems, simpleBootcampHeaderItems, simpleBootcampMobileHeaderItems, simpleHeaderItems, simpleMobileHeaderItems, teamsHeaderItems, teamsMobileHeaderItems } from './GlobalHeaderVariants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export * from './types';
+export const LiveLearningHubContext = /*#__PURE__*/React.createContext(false);
+export const RevampedBlpExperimentContext = /*#__PURE__*/React.createContext(false);
+
+// Overloading getAppHeaderItems function to return different types based on mobile parameter
+
+function getAppHeaderItems(props, mobile, dynamicDataLoading) {
+  const {
+    hidePricing
+  } = props;
+  if (dynamicDataLoading) {
+    return mobile ? loadingMobileHeaderItems : loadingHeaderItems;
+  }
+  switch (props.type) {
+    case 'anon':
+      switch (props.variant) {
+        case 'landing':
+          return mobile ? anonLandingMobileHeaderItems({
+            hidePricing,
+            user: props.user,
+            isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+          }) : anonLandingHeaderItems({
+            hidePricing,
+            user: props.user,
+            isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+          });
+        case 'login':
+          return mobile ? anonLoginMobileHeaderItems({
+            hidePricing,
+            user: props.user,
+            isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+          }) : anonLoginHeaderItems({
+            hidePricing,
+            user: props.user,
+            isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+          });
+        case 'signup':
+          return mobile ? anonSignupMobileHeaderItems({
+            hidePricing,
+            user: props.user,
+            isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+          }) : anonSignupHeaderItems({
+            hidePricing,
+            user: props.user,
+            isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+          });
+        default:
+          return mobile ? anonDefaultMobileHeaderItems({
+            hidePricing,
+            user: props.user,
+            isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+          }) : anonDefaultHeaderItems({
+            hidePricing,
+            user: props.user,
+            isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+          });
+      }
+    case 'enterprise':
+      return mobile ? enterpriseMobileHeaderItems({
+        user: props.user,
+        props
+      }) : enterpriseHeaderItems({
+        user: props.user,
+        props
+      });
+    case 'free':
+      return mobile ? freeMobileHeaderItems({
+        user: props.user,
+        hidePricing,
+        isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+      }) : freeHeaderItems({
+        user: props.user,
+        hidePricing,
+        isInRevampedBlpExperimentVariant: props.isInRevampedBlpExperimentVariant
+      });
+    case 'pro':
+      return mobile ? proMobileHeaderItems({
+        user: props.user
+      }) : proHeaderItems({
+        user: props.user
+      });
+    case 'teams':
+      return mobile ? teamsMobileHeaderItems({
+        user: props.user
+      }) : teamsHeaderItems({
+        user: props.user
+      });
+    case 'simple':
+      return mobile ? simpleMobileHeaderItems : simpleHeaderItems;
+    case 'bootcamp':
+      return mobile ? simpleBootcampMobileHeaderItems({
+        bootcampSlug: props.bootcampSlug
+      }) : simpleBootcampHeaderItems({
+        bootcampSlug: props.bootcampSlug
+      });
+    case 'loading':
+      return mobile ? loadingMobileHeaderItems : loadingHeaderItems;
+  }
+}
+export const GlobalHeader = props => {
+  const {
+    action,
+    onLinkAction,
+    dynamicData,
+    dynamicDataLoading
+  } = props;
+  const theme = useTheme();
+  const combinedAction = useCallback((event, item) => {
+    action(event, item);
+    if (isAppHeaderItemWithHref(item)) onLinkAction?.(event, item);
+  }, [action, onLinkAction]);
+  const hideNotification = props.type === 'loading' || props.type === 'enterprise' || props.type === 'simple' || props.type === 'bootcamp';
+  const showOnboardingQuiz = props.type === 'anon' || (props.type === 'free' || props.type === 'pro') && !props.user.enrolledInTwoOrMoreContainers;
+  const showSortingQuiz = (props.type === 'free' || props.type === 'pro') && props.user.enrolledInTwoOrMoreContainers;
+  return /*#__PURE__*/_jsx(HeaderDisplayContext.Provider, {
+    value: {
+      showOnboardingQuiz,
+      showSortingQuiz,
+      headerType: useMemo(() => {
+        if (props.type in DropdownPositions) return props.type;
+        return 'default';
+      }, [props.type])
+    },
+    children: /*#__PURE__*/_jsx(RevampedBlpExperimentContext.Provider, {
+      value: !!props.isInRevampedBlpExperimentVariant,
+      children: /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
+        value: {
+          globalHeaderItemClick: combinedAction
+        },
+        children: /*#__PURE__*/_jsx(GlobalHeaderDynamicDataContext.Provider, {
+          value: useMemo(() => ({
+            globalHeaderDynamicData: dynamicData ?? null
+          }), [dynamicData]),
+          children: /*#__PURE__*/_jsxs(Box, {
+            as: "header",
+            position: "sticky",
+            top: 0,
+            zIndex: theme.elements.headerZ,
+            overflow: {
+              _: 'hidden',
+              sm: 'visible'
+            } // Prevent tooltip overflow on mobile
+            ,
+            children: [/*#__PURE__*/_jsx(AppHeader, {
+              action: combinedAction,
+              items: getAppHeaderItems(props, false, dynamicDataLoading ?? false),
+              search: props.search,
+              ...(props.type === 'anon' ? {
+                redirectParam: props.redirectParam
+              } : hideNotification ? {} : {
+                notifications: props.notifications
+              }),
+              hideRightButtonDefaults: hideNotification,
+              isTeams: props.type === 'teams',
+              type: hideNotification ? 'enterprise' : 'standard'
+            }), /*#__PURE__*/_jsx(AppHeaderMobile, {
+              action: combinedAction,
+              items: getAppHeaderItems(props, true, dynamicDataLoading ?? false),
+              ...(props.type === 'anon' || hideNotification ? {} : {
+                notifications: props.notifications
+              }),
+              search: props.search,
+              redirectParam: props.type === 'anon' ? props.redirectParam : undefined,
+              isEnterprise: props.type === 'enterprise',
+              isAnon: props.type === 'anon',
+              isSimple: props.type === 'simple',
+              hideRightMenuButton: props.type === 'simple' || props.type === 'loading',
+              navigationMenuFormattedLabel: props?.localizedLabels?.navigationMenuFormattedLabel
+            }), props.children]
+          })
+        })
+      })
+    })
+  });
+};