\n \n {menuItem.subMenu!.map((menuSubItem: IMenuItemData, currentPos: number) => {\n if (ArrayExtensions.hasElements(menuSubItem.subMenu)) {\n return this._renderDrawer(menuSubItem, menuItem.subMenu?.length, currentPos + this._positionInSetOffset);\n }\n return this._renderDrawerLink(menuSubItem, menuItem.subMenu?.length, currentPos + this._positionInSetOffset);\n })}\n
\n \n );\n }\n\n /**\n * Method to render link.\n * @param linkText -Text on Menu link.\n * @param setSize -Setsize data.\n * @param posinset -Current position.\n * @returns Jsx element.\n */\n private _renderLinkText(linkText: string | undefined, setSize: number | undefined, posinset: number | undefined): JSX.Element {\n return (\n \n {linkText}\n \n );\n }\n\n /**\n * Method to render drawer link.\n * @param item -Single Menuitem.\n * @param setSize -Setsize data.\n * @param posinset -Current position.\n * @returns Jsx element.\n */\n private _renderDrawerLink(item: IMenuItemData, setSize: number | undefined, posinset: number): JSX.Element | null {\n if (item && item.linkText && item.linkURL && item.linkURL.length > 0) {\n return this._renderLinkMenuItem(item, undefined, true, false, setSize, posinset);\n } else if (item && item.linkText && !item.linkURL) {\n return this._renderSpanMenuItem(item);\n }\n return null;\n }\n\n /**\n * Method to generate menu.\n * @returns Jsx element.\n */\n private _renderDisplay(): JSX.Element[] {\n const { ListItem, menuItemData, isMobileView } = this.props;\n const { activeMenu } = this.state;\n const menuItemList: JSX.Element[] = [];\n\n if (isMobileView && activeMenu !== undefined && menuItemData.length > 0) {\n let menuItem: IMenuItemData = {};\n for (const menuItemDatum of menuItemData) {\n if (menuItemDatum && menuItemDatum.id === activeMenu) {\n menuItem = menuItemDatum;\n this.setState({ parentMenu: undefined });\n break;\n }\n menuItem = this._getFromSubMenu(menuItemDatum) as IMenuItemData;\n if (menuItem && menuItem.id === activeMenu) {\n break;\n }\n }\n\n menuItem &&\n menuItemList.push(\n \n {` `}\n {this._createMenuItemList(menuItem)}\n {` `}\n \n );\n } else {\n menuItemData.forEach((item: IMenuItemData, index: number) => {\n menuItemList.push(\n \n {this._createMenuItemList(item)}\n \n );\n });\n }\n\n return menuItemList;\n }\n\n /**\n * Method to get data for submenu.\n * @param item -Single Menuitem.\n * @returns IMenuItemData.\n */\n private _getFromSubMenu(item?: IMenuItemData): IMenuItemData | null {\n const subMenus = item && item.subMenu;\n if (subMenus && subMenus.length > 0) {\n for (let i = 0; i <= subMenus.length - 1; i++) {\n if (subMenus[i].id === this.state.activeMenu) {\n this.setState({ parentMenu: item?.id });\n return subMenus[i];\n }\n const found = this._getFromSubMenu(subMenus[i]);\n if (found) {\n return found;\n }\n }\n }\n return null;\n }\n\n /**\n * Method to create item list.\n * @param menuItemData -Single Menuitem.\n * @returns Jsx element.\n */\n private _createMenuItemList(menuItemData: IMenuItemData): JSX.Element | null {\n if (menuItemData && menuItemData.subMenu && menuItemData.subMenu.length > 0) {\n if (this.props.isMobileView && this.state.activeMenu !== undefined) {\n return this._renderSubMenu(menuItemData.subMenu, menuItemData.id);\n }\n return (\n <>\n {this._renderButtonMenuItem(menuItemData)}\n {this._renderSubMenu(menuItemData.subMenu, menuItemData.id)}\n \n );\n } else if (menuItemData && menuItemData.linkText && menuItemData.linkURL && menuItemData.linkURL.length > 0) {\n return this._renderLinkMenuItem(menuItemData, menuItemData.id, false, true);\n } else if (menuItemData && menuItemData.linkText && !menuItemData.linkURL) {\n return this._renderSpanMenuItem(menuItemData, menuItemData.id, true);\n }\n\n return null;\n }\n\n private _renderSubMenu(subMenus?: IMenuItemData[], activeMenu?: number, IsSubMenu?: boolean): JSX.Element | null {\n const { isMobileView, ListItem } = this.props;\n const enableMultiSupportMenu = this.props.config.enableMultilevelMenu || false;\n const subMenuLevel = 3;\n const multiLevelSupportedMenu = this.props.config.menuLevelSupport || subMenuLevel;\n\n // Const isParentMenu:boolean= false;\n if (activeMenu && this.state.activeMenu !== activeMenu) {\n this.props.context.telemetry.error('Navigation Active menu content is empty, module wont render.');\n return null;\n }\n\n if (!subMenus || subMenus.length === 0) {\n this.props.context.telemetry.error('Navigation Submenu content is empty, module wont render.');\n return null;\n }\n\n let levelClassName: string = '';\n const menuOptions =\n subMenus &&\n subMenus.map((option: IMenuItemData, idx: number) => {\n const hasOptions = option.subMenu && option.subMenu.length > 0;\n let menuItem: JSX.Element | null;\n if (hasOptions && isMobileView) {\n menuItem = this._renderButtonMenuItem(option, activeMenu, idx);\n } else {\n menuItem = option.linkURL ? this._renderLinkMenuItem(option, idx) : this._renderSpanMenuItem(option);\n }\n let subMenu;\n const haveSubmenu = hasOptions && enableMultiSupportMenu && this.currentLevel <= Math.round(multiLevelSupportedMenu) - 1;\n if (haveSubmenu) {\n this.currentLevel++;\n levelClassName = enableMultiSupportMenu ? `level-${this.currentLevel.toString()}` : '';\n subMenu = this._renderSubMenu(option.subMenu, isMobileView ? option.id : undefined, true);\n }\n return (\n \n {menuItem}\n {subMenu}\n \n );\n });\n return this._renderMenu(levelClassName, menuOptions, activeMenu, IsSubMenu);\n }\n\n /**\n * Method to render button menu item.\n * @param option -Single Menuitem.\n * @param activeMenu -Active menu number.\n * @param index -Active menu index.\n * @returns Jsx element.\n */\n private _renderButtonMenuItem(option: IMenuItemData, activeMenu?: number, index?: number): JSX.Element | null {\n const { Button } = this.props;\n return (\n \n {option.linkText}\n \n );\n }\n\n /**\n * Method to render link menu item.\n * @param option -Single Menuitem.\n * @param index -Active menu index.\n * @param hoverEffect -Active menu effect.\n * @param isParent -Is parent menu.\n * @param setSize -Setsize data.\n * @param posinset -Current position.\n * @returns Jsx element.\n */\n private _renderLinkMenuItem(\n option: IMenuItemData,\n index?: number,\n hoverEffect: boolean = true,\n isParent: boolean = false,\n setSize?: number,\n posinset?: number\n ): JSX.Element | null {\n const { Link, isMobileView } = this.props;\n const linkText = option.linkText ? option.linkText : '';\n const imagesource = option.imageSource ? option.imageSource : '';\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n return (\n \n {option.linkText}\n \n );\n }\n\n /**\n * Method to render promotional link.\n * @param linkText -Link text.\n * @param linkUrl -Link url.\n * @returns Jsx element.\n */\n private _renderPromotionalLink(linkText?: string, linkUrl?: string): JSX.Element | null {\n const { Link } = this.props;\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n if (linkText && linkUrl) {\n return (\n \n {linkText}\n \n );\n }\n return null;\n }\n\n /**\n * Method to render span menu item.\n * @param option -Single Menu Item.\n * @param index -Index.\n * @param isParent -Is parent menu.\n * @returns Jsx element.\n */\n private _renderSpanMenuItem(option: IMenuItemData, index?: number, isParent: boolean = false): JSX.Element | null {\n const { Span } = this.props;\n return (\n \n {option.linkText}\n \n );\n }\n\n /**\n * Method to render menu.\n * @param level -Menu level.\n * @param menuOptions -Menu lists.\n * @param currentItem -Menu current.\n * @param submenu -Mneu has submenu or not.\n * @returns Jsx element.\n */\n private _renderMenu(level: string, menuOptions: JSX.Element[], currentItem?: number, submenu?: boolean): JSX.Element | null {\n const { DivContainer, MenuList, ImageDivContainer, showCategoryImage, isMobileView, showPromotionalContent } = this.props;\n const categoryImageDisplay =\n !isMobileView && showCategoryImage && this.state.categoryImage !== null && this.state.categoryImage !== undefined && !submenu;\n const promotionalContentDisplay =\n !isMobileView && showPromotionalContent && ArrayExtensions.hasElements(this.state.categoryImage) && !submenu;\n const DivContainerClass = this.currentLevel > 2 || categoryImageDisplay ? DivContainer!.className : 'ms-nav__deafult';\n this.currentLevel = 1;\n return (\n \n 2 &&\n 'navmenu-multi-level'\n )}\n >\n {menuOptions}\n \n \n {categoryImageDisplay &&\n this.state.categoryImage &&\n this.state.categoryImage.map(item => (\n \n {this.state.categoryImage && this._getCategoryImage(item)}\n {promotionalContentDisplay && this._renderPromotionalLink(item.altText, item.additionalProperties?.linkUrl)}\n \n ))}\n
\n \n );\n }\n\n private readonly _updateCategoryImage = (categoryImageSrc: string, option: IMenuItemData) => () => {\n const linkText = option && option.linkText ? option.linkText : '';\n const promotionalImage: IImageData[] = [{ src: categoryImageSrc, altText: linkText }];\n\n // Read category and promotional image in one array\n if (ArrayExtensions.hasElements(option.promotionalContent)) {\n option.promotionalContent.map(item => {\n if (item && item.image) {\n const imageSrc = item.image.src;\n const promotionalItemImageSettings = item.image.imageSettings;\n promotionalImage.push({\n src: imageSrc,\n altText: item.text,\n imageSettings: promotionalItemImageSettings,\n additionalProperties: { linkUrl: item.linkUrl.destinationUrl }\n });\n }\n });\n }\n this.setState({\n categoryImage: promotionalImage.length > 0 ? promotionalImage : [{ src: 'empty' }],\n categoryImageAltText: linkText\n });\n };\n\n /**\n * Method to handle dropdwon change.\n * @param data -Menuitem data.\n * @param parentId -Menu parent.\n * @returns Jsx element.\n */\n private readonly _handleDropdownToggle = (data: IMenuItemData, parentId?: number) => () => {\n if (!this.props.isMobileView) {\n this.setState({\n activeMenu: this.state.activeMenu && this.state.activeMenu === data.id! ? undefined : data.id!,\n parentMenu: parentId\n });\n if (this.props.showCategoryImage) {\n this._updateCategoryImage(data.imageSource!, data)();\n }\n } else {\n this.setState({\n activeMenu: data.id,\n parentMenu: parentId\n });\n }\n\n this._resetFocus();\n };\n\n /**\n * Method to call when focus lost from menu.\n */\n private readonly _resetFocus = () => {\n if (this.props.isMobileView) {\n setTimeout(() => {\n this.menuNode && this.menuNode.current && this.menuNode.current.focus();\n }, 0);\n }\n };\n\n /**\n * Method to handle click outside of menu.\n * @param event -HTML event.\n */\n private readonly _handleClickOutside = (event: MouseEvent) => {\n if (this.menuNode.current && !this.menuNode.current.contains(event.target as Node)) {\n this.setState({\n activeMenu: undefined,\n categoryImage: null\n });\n }\n };\n\n /**\n * Method to handle click outside of menu.\n * @param event -HTML event.\n */\n private readonly _handleFocusOutside = (event: FocusEvent) => {\n if (this.menuNode.current && !this.menuNode.current.contains(event.relatedTarget as Node)) {\n this._closeSubmenu();\n }\n };\n\n /**\n * Method to handle close submenu event.\n */\n private _closeSubmenu(): void {\n if (!this.props.isMobileView) {\n this.setState({ activeMenu: undefined });\n }\n }\n\n /**\n * Method to handle escape key event.\n * @param event -HTML event.\n */\n private readonly _escFunction = (event: React.KeyboardEvent) => {\n if (event.keyCode === this.escapeKey) {\n if (!this.props.isMobileView) {\n const navDrawerList = Array.from(this.menuNode.current!.childNodes);\n for (const item of navDrawerList) {\n const navDrawerButton = item.firstChild as HTMLButtonElement;\n if (navDrawerButton.getAttribute('aria-expanded') === 'true') {\n navDrawerButton.focus();\n }\n }\n }\n this._closeSubmenu();\n }\n };\n\n private readonly _getCategoryImage = (categoryImage?: IImageData): React.ReactNode | null => {\n if (!categoryImage || !categoryImage.src) {\n return null;\n }\n\n const categoryImageUrl = generateImageUrl(categoryImage.src, this.props.context.actionContext.requestContext.apiSettings);\n const defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=300&h=250&m=8', w: 0, h: 0 },\n sm: { q: 'w=300&h=250&m=8', w: 0, h: 0 },\n md: { q: 'w=300&h=250&m=8', w: 0, h: 0 },\n lg: { q: 'w=300&h=250&m=8', w: 0, h: 0 }\n },\n lazyload: true\n };\n if (categoryImageUrl !== undefined) {\n const ImageData: IImageData = { src: categoryImageUrl };\n return (\n \n );\n }\n return null;\n };\n\n /**\n * Method to handle escape key event.\n * @param drawerState -HTML event.\n */\n private readonly _onDrawerChange = (drawerState: IDrawerState) => {\n const { drawerKeyValue } = this.state;\n const drawerText: string = drawerState.buttonText !== undefined ? drawerState.buttonText : '';\n const newPair = { [drawerText]: drawerState.isOpen };\n this.setState({ drawerKeyValue: { ...drawerKeyValue, ...newPair } });\n };\n}\n\nexport default NavigationMenuView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { CategoryHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { AsyncResult } from '@msdyn365-commerce/retail-proxy';\n\nimport { ICategoryPromotionalContentData } from './navigation-menu.props.autogenerated';\n\nexport interface INavigationMenuData {\n categories: AsyncResult;\n}\n\nexport interface IMenuItemData {\n id?: number;\n linkText?: string;\n linkURL?: string;\n imageSource?: string;\n imageDestinationURL?: string;\n subMenu?: IMenuItemData[];\n promotionalContent?: ICategoryPromotionalContentData[];\n menuSource?: string;\n shouldOpenNewTab?: boolean;\n ariaLabel?: string;\n}\n\n/**\n *\n * Menu type index id.\n */\nexport enum MenuTypeIndexId {\n Cms = 1000,\n Retail = 5000\n}\n\n/**\n *\n * Menu type source.\n */\nexport enum MenuSource {\n Cms = 'Cms',\n Retail = 'Retail'\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CategoryHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport MsDyn365, { IActionContext, IGridSettings, IImageSettings, isEmptyOrNullObject } from '@msdyn365-commerce/core';\nimport { TextValueTranslation } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, getCategoryUrl } from '@msdyn365-commerce-modules/retail-actions';\nimport { addThrottledEvent, IModuleProps, INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { computed, observable } from 'mobx';\nimport * as React from 'react';\n\nimport { IMenuItemData, INavigationMenuData, MenuSource, MenuTypeIndexId } from './navigation-menu.data';\nimport { ICmsNavItemsData, INavigationMenuProps, ISubMenusData, navigationMenuSource } from './navigation-menu.props.autogenerated';\n\nexport interface INavigationMenuViewProps extends INavigationMenuProps {\n className: string;\n menuItemData: IMenuItemData[];\n Navigation: IModuleProps;\n MenuList: INodeProps;\n ListItem: INodeProps;\n Link: INodeProps;\n Button: INodeProps;\n Span: INodeProps;\n ImageContainer: INodeProps;\n MobileDescriptionContainer: INodeProps;\n MobileBackButton: INodeProps;\n MobileDescriptionLabel: INodeProps;\n imageSettings: IImageSettings;\n gridSettings: IGridSettings;\n isMobileView: boolean;\n DivContainer?: INodeProps;\n ImageDivContainer?: INodeProps;\n showCategoryImage?: boolean;\n showPromotionalContent?: boolean;\n}\n\nexport type GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface INavigationMenuState {\n isMobile: boolean;\n}\n\n/**\n *\n * NavigationMenu component.\n * @extends {React.PureComponent>}\n */\nclass NavigationMenu extends React.PureComponent, INavigationMenuState> {\n private static CMSItemIdInit: number = MenuTypeIndexId.Cms;\n\n private static RSItemIdInit: number = MenuTypeIndexId.Retail;\n\n private resizeThrottledEventHandler?: (event: Event) => void;\n\n private menuItemList: IMenuItemData[];\n\n private isRetail: boolean = true;\n\n private isCMS: boolean = true;\n\n @observable\n private viewport: GridSize;\n\n public static getFriendlyName(locale: string, nameTranslations?: TextValueTranslation[]): string | undefined {\n let nameTranslation: TextValueTranslation | undefined;\n if (locale && nameTranslations && nameTranslations.length > 0) {\n nameTranslation = nameTranslations.find(item => item.Language!.toLowerCase() === locale.toLowerCase());\n }\n\n return nameTranslation && nameTranslation.Text;\n }\n\n constructor(props: INavigationMenuProps) {\n super(props);\n this._updateViewport = this._updateViewport.bind(this);\n this.viewport =\n props.context.request && props.context.request.device && props.context.request.device.Type === 'Mobile' ? 'xs' : 'lg';\n this._setNavigationSource(this.props.config && this.props.config.navigationMenuSource);\n this.state = { isMobile: this.isMobile };\n this.menuItemList = [];\n }\n\n @computed get isMobile(): boolean {\n return this.viewport === 'xs' || this.viewport === 'sm';\n }\n\n public componentDidMount(): void {\n if (MsDyn365.isBrowser) {\n this.resizeThrottledEventHandler = addThrottledEvent(window, 'resize', this._updateViewport as EventListener);\n }\n this._updateViewport();\n }\n\n public componentWillUnmount(): void {\n if (MsDyn365.isBrowser) {\n window.removeEventListener('resize', this.resizeThrottledEventHandler!, false);\n }\n }\n\n public render(): JSX.Element | null {\n this.menuItemList = this._mapData();\n if (isEmptyOrNullObject(this.props.data)) {\n this.props.telemetry.error('Navigatiomenu returned null');\n return null;\n }\n\n const defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=224&h=300&m=6', w: 0, h: 0 },\n xl: { q: 'w=224&h=300&m=6', w: 0, h: 0 }\n },\n lazyload: true\n };\n\n const viewProps = {\n ...this.props,\n ...this.state,\n imageSettings: defaultImageSettings,\n gridSettings: this.props.context.request.gridSettings,\n Navigation: {\n moduleProps: this.props,\n className: classnames('ms-nav', this.props.config.className, this.state.isMobile ? 'mobile-vp' : 'desktop-vp'),\n tag: 'nav',\n role: this.isMobile ? 'listbox' : 'navigation'\n },\n MenuList: {\n className: 'ms-nav__list',\n tag: 'ul',\n role: this.isMobile ? 'listbox' : 'menu'\n },\n ListItem: {\n className: 'ms-nav__list__item',\n role: 'presentation',\n tag: 'li'\n },\n showCategoryImage: this.props.config.displayCategoryImage ?? false,\n showPromotionalContent: this.props.config.displayPromotionalImage ?? false,\n Link: {\n tag: 'a',\n className: 'ms-nav__list__item__link',\n role: this.isMobile ? 'option' : 'menuitem'\n },\n DivContainer: {\n tag: 'div',\n className: 'ms-nav__feature'\n },\n ImageDivContainer: {\n tag: 'div',\n className: 'category-image',\n role: 'tabpanel'\n },\n Button: {\n className: 'ms-nav__list__item__button',\n tag: 'button',\n role: this.isMobile ? 'option' : 'menuitem',\n onClick: this.props\n },\n ImageContainer: {\n className: 'ms-nav__list__item__image'\n },\n Span: {\n className: 'ms-nav__list__item__span',\n tag: 'span'\n },\n MobileDescriptionContainer: {\n className: 'ms-nav__list__mobile__container'\n },\n MobileBackButton: {\n className: 'ms-nav__list__mobile__container__button',\n tag: 'button',\n 'aria-label': this.props.resources.backButtonAriaLabel,\n onClick: this.props\n },\n MobileDescriptionLabel: {\n className: 'ms-nav__list__mobile__container__span',\n tag: 'span'\n },\n isMobileView: this.state.isMobile,\n menuItemData: this.menuItemList,\n className: classnames('ms-nav', this.props.config.className)\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n private _mapData(): IMenuItemData[] {\n const { data, config } = this.props;\n const mergedData: IMenuItemData[] = [];\n if (this.isRetail && data && data.categories && data.categories.result && data.categories.result.length > 0) {\n data.categories.result.map((item: CategoryHierarchy, index) =>\n mergedData.push(this._constructMenuItemData(item, undefined, true, index, true))\n );\n }\n\n if (this.isCMS && config.cmsNavItems && config.cmsNavItems.length > 0) {\n config.cmsNavItems.map((item: ICmsNavItemsData, idx: number) =>\n mergedData.push(this._constructMenuItemData(undefined, item, false, idx + 1))\n );\n }\n return this._constructTopMenuItemData(mergedData);\n }\n\n private _constructTopMenuItemData(mergedData: IMenuItemData[]): IMenuItemData[] {\n const enableTopLevelMenu = this.props.config.enabletopMenu ?? false;\n if (!enableTopLevelMenu) {\n return mergedData;\n }\n const mergedRootMenuData: IMenuItemData[] = [];\n const topMenu = {\n id: 1,\n linkText: this.props.config.rootMenuNavigation ?? '...',\n linkURL: '#',\n imageSource: undefined,\n subMenu: mergedData\n } as IMenuItemData;\n mergedRootMenuData.push(topMenu);\n\n return mergedRootMenuData;\n }\n\n private _constructMenuItemData(\n retailItem?: CategoryHierarchy,\n cmsItem?: ICmsNavItemsData,\n isRetail?: boolean,\n idx?: number,\n addedAllMenu?: boolean\n ): IMenuItemData {\n const locale =\n this.props.context && this.props.context.request && this.props.context.request.locale\n ? this.props.context.request.locale\n : 'en-us';\n const { categoryPromotionalContent } = this.props.config;\n const cmsItemText = (cmsItem && cmsItem.linkText) || '';\n const { menuAriaLabel } = this.props.resources;\n\n // Filter category promotional data based on category name\n const promotionalData =\n retailItem &&\n categoryPromotionalContent?.filter(promoItem => promoItem.categoryName?.toLowerCase() === retailItem?.Name?.toLowerCase());\n\n // First check if image is available from promotional data else read from retail server\n let imageSource: string = 'empty';\n if (ArrayExtensions.hasElements(retailItem?.Images) && retailItem!.Images[0].Uri) {\n imageSource = retailItem!.Images[0].Uri;\n }\n if (isRetail) {\n return {\n id: NavigationMenu.RSItemIdInit++,\n linkText: NavigationMenu.getFriendlyName(locale, retailItem?.NameTranslations) ?? '',\n linkURL: retailItem?.Url,\n imageSource,\n subMenu: this._getNestedChildren(retailItem, imageSource, addedAllMenu),\n promotionalContent: this.props.config.displayPromotionalImage && promotionalData,\n menuSource: MenuSource.Retail,\n ariaLabel: `${NavigationMenu.getFriendlyName(locale, retailItem?.NameTranslations) ?? ''} ${menuAriaLabel}`\n } as IMenuItemData;\n }\n return {\n id: NavigationMenu.CMSItemIdInit++,\n linkText: cmsItemText,\n linkURL: (cmsItem && cmsItem.linkUrl && cmsItem.linkUrl.destinationUrl) || '',\n imageDestinationURL: (cmsItem && cmsItem.imageLink && cmsItem.imageLink.destinationUrl) || '',\n imageSource: (cmsItem && cmsItem.image && cmsItem.image.src) || '',\n subMenu: this._getCMSNestedChildren(cmsItem),\n menuSource: MenuSource.Cms,\n shouldOpenNewTab: cmsItem?.openInNewTab,\n ariaLabel: `${cmsItemText} ${menuAriaLabel}`\n } as IMenuItemData;\n }\n\n private _getNestedChildren(category?: CategoryHierarchy, imageSourceUrl?: string, addedAllMenu: boolean = false): IMenuItemData[] {\n const nestedChildren: IMenuItemData[] = [];\n if (!category || !category.Children || category.Children.length === 0) {\n return [];\n }\n if (!this.props.config.enabletopMenu && addedAllMenu) {\n nestedChildren.push({\n linkText: this.props.resources.allCategoryMenuText,\n imageSource: imageSourceUrl,\n linkURL: getCategoryUrl(category, (this.props.context as unknown) as IActionContext, {})\n });\n }\n category.Children.map((item: CategoryHierarchy, index) => {\n nestedChildren.push(this._constructMenuItemData(item, undefined, true, index, false));\n });\n return nestedChildren;\n }\n\n private _getCMSNestedChildren(category?: ICmsNavItemsData): IMenuItemData[] {\n const nestedChildren: IMenuItemData[] = [];\n\n if (!category || !category.subMenus || category.subMenus.length === 0) {\n return [];\n }\n\n category.subMenus.map((item: ISubMenusData, idx: number) => {\n nestedChildren.push(this._constructMenuItemData(undefined, item, false, idx));\n });\n return nestedChildren;\n }\n\n private readonly _setNavigationSource = (sourceType?: navigationMenuSource): void => {\n switch (sourceType) {\n case navigationMenuSource.retailServerOnly:\n this.isRetail = true;\n this.isCMS = false;\n break;\n case navigationMenuSource.cmsOnly:\n this.isRetail = false;\n this.isCMS = true;\n break;\n case navigationMenuSource.all:\n this.isRetail = true;\n this.isCMS = true;\n break;\n default:\n }\n };\n\n private _updateViewport(): void {\n this.viewport = this._getViewport();\n this.setState({ isMobile: this.isMobile });\n }\n\n private _getViewport(): GridSize {\n const { context } = this.props;\n\n // Always render in mobile viewport on a mobile device\n if (context.request && context.request.device && context.request.device.Type === 'Mobile') {\n return 'xs';\n }\n\n if (MsDyn365.isBrowser && window.innerWidth) {\n const gridSettings = context.request.gridSettings;\n if (gridSettings) {\n if (gridSettings.xs && window.innerWidth <= gridSettings.xs.w) {\n return 'xs';\n } else if (gridSettings.sm && window.innerWidth <= gridSettings.sm.w) {\n return 'sm';\n } else if (gridSettings.md && window.innerWidth <= gridSettings.md.w) {\n return 'md';\n } else if (gridSettings.lg && window.innerWidth <= gridSettings.lg.w) {\n return 'lg';\n }\n return 'xl';\n }\n }\n\n return 'xs';\n }\n}\n\nexport default NavigationMenu;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport MsDyn365, { IImageData, IImageSettings, Image } from '@msdyn365-commerce/core';\nimport { ArrayExtensions, generateImageUrl } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n IPayLoad,\n ITelemetryContent,\n Module,\n Node,\n onTelemetryClick\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { INavigationMenuViewProps } from './navigation-menu';\nimport { IMenuItemData } from './navigation-menu.data';\n\ninterface INavigationState {\n parentMenu?: number;\n activeMenu?: number;\n categoryImage?: IImageData[] | null;\n mobileViewLabelText?: string;\n categoryImageAltText: string;\n}\n\n/**\n *\n * NavigationMenuView component.\n * @extends {React.PureComponent}\n */\nexport class NavigationMenuView extends React.PureComponent {\n private static isBackTrack: boolean = false;\n\n private currentLevel: number = 0;\n\n private readonly menuNode: React.RefObject;\n\n private readonly menuItemRef: React.RefObject;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly payLoad: IPayLoad;\n\n constructor(props: INavigationMenuViewProps) {\n super(props);\n this.menuNode = React.createRef();\n this.menuItemRef = React.createRef();\n this.state = { activeMenu: undefined, mobileViewLabelText: '', parentMenu: undefined, categoryImageAltText: '' };\n this._closeSubmenu = this._closeSubmenu.bind(this);\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.payLoad = getPayloadObject('click', this.telemetryContent, '', '');\n }\n\n public componentDidMount(): void {\n if (MsDyn365.isBrowser) {\n document.body.addEventListener('mousedown', this._handleClickOutside);\n document.body.addEventListener('focusout', this._handleFocusOutside);\n }\n }\n\n public componentDidUpdate(): void {\n if (this.menuItemRef.current?.children[0] && this.props.isMobileView) {\n (this.menuItemRef.current.children[0] as HTMLElement).focus();\n }\n }\n\n public componentWillUnmount(): void {\n if (MsDyn365.isBrowser) {\n document.body.removeEventListener('mousedown', this._handleClickOutside, false);\n document.body.removeEventListener('focusout', this._handleFocusOutside, false);\n }\n }\n\n public render(): JSX.Element | null {\n const { isMobileView, MenuList, MobileBackButton, MobileDescriptionContainer, MobileDescriptionLabel, Navigation } = this.props;\n\n this.currentLevel = 1;\n return (\n \n \n {isMobileView && this.state.activeMenu !== undefined && (\n \n \n {this.state.mobileViewLabelText}\n \n )}\n {this._renderDisplay()}\n \n \n );\n }\n\n private _renderDisplay(): JSX.Element[] {\n const { ListItem, menuItemData, isMobileView } = this.props;\n const { activeMenu } = this.state;\n const menuItemList: JSX.Element[] = [];\n\n if (isMobileView && activeMenu !== undefined && menuItemData.length > 0) {\n let menuItem: IMenuItemData = {};\n for (const menuItemDatum of menuItemData) {\n if (menuItemDatum && menuItemDatum.id === activeMenu) {\n menuItem = menuItemDatum;\n !NavigationMenuView.isBackTrack\n ? this.setState({ parentMenu: undefined })\n : this.setState({ parentMenu: undefined, mobileViewLabelText: menuItemDatum.linkText });\n break;\n }\n menuItem = this._getFromSubMenu(menuItemDatum) as IMenuItemData;\n if (menuItem && menuItem.id === activeMenu) {\n break;\n }\n }\n\n menuItem &&\n menuItemList.push(\n \n {' '}\n {this._createMenuItemList(menuItem)}{' '}\n \n );\n } else {\n menuItemData.forEach((item: IMenuItemData, index: number) => {\n menuItemList.push(\n \n {this._createMenuItemList(item)}\n \n );\n });\n }\n\n return menuItemList;\n }\n\n private _getFromSubMenu(item?: IMenuItemData): IMenuItemData | null {\n const subMenus = item && item.subMenu;\n if (subMenus && subMenus.length > 0) {\n for (let i = 0; i <= subMenus.length - 1; i++) {\n if (subMenus[i].id === this.state.activeMenu) {\n !NavigationMenuView.isBackTrack\n ? this.setState({ parentMenu: item?.id })\n : this.setState({ parentMenu: item && item.id, mobileViewLabelText: subMenus[i].linkText });\n return subMenus[i];\n }\n const found = this._getFromSubMenu(subMenus[i]);\n if (found) {\n return found;\n }\n }\n }\n this.props.context.telemetry.error('Submenu content is empty, module wont render.');\n return null;\n }\n\n private _createMenuItemList(menuItemData: IMenuItemData): JSX.Element | null {\n if (menuItemData && menuItemData.subMenu && menuItemData.subMenu.length > 0) {\n if (this.props.isMobileView && this.state.activeMenu !== undefined) {\n return this._renderSubMenu(menuItemData.subMenu, menuItemData.id, false);\n }\n return (\n <>\n {this._renderButtonMenuItem(menuItemData)}\n {this._renderSubMenu(menuItemData.subMenu, menuItemData.id, false)}\n \n );\n } else if (menuItemData && menuItemData.linkText && menuItemData.linkURL && menuItemData.linkURL.length > 0) {\n return this._renderLinkMenuItem(menuItemData, menuItemData.id, false, true);\n } else if (menuItemData && menuItemData.linkText && !menuItemData.linkURL) {\n return this._renderSpanMenuItem(menuItemData, menuItemData.id, true);\n }\n this.props.context.telemetry.error('Navigation menu content is empty, module wont render.');\n return null;\n }\n\n private _renderSubMenu(subMenus?: IMenuItemData[], activeMenu?: number, IsSubMenu?: boolean): JSX.Element | null {\n const { isMobileView, ListItem } = this.props;\n const enableMultiSupportMenu = this.props.config.enableMultilevelMenu || false;\n const multiLevelSupportedMenu = this.props.config.menuLevelSupport || 3;\n\n // Const isParentMenu:boolean= false;\n if (activeMenu && this.state.activeMenu !== activeMenu) {\n this.props.context.telemetry.error('Navigation Active menu content is empty, module wont render.');\n return null;\n }\n\n if (!subMenus || subMenus.length === 0) {\n this.props.context.telemetry.error('Navigation Submenu content is empty, module wont render.');\n return null;\n }\n\n let levelClassName: string = '';\n const menuOptions =\n subMenus &&\n subMenus.map((option: IMenuItemData, idx: number) => {\n const hasOptions = option.subMenu && option.subMenu.length > 0;\n let menuItem: JSX.Element | null;\n if (hasOptions && isMobileView) {\n menuItem = this._renderButtonMenuItem(option, activeMenu, idx);\n } else {\n menuItem = option.linkURL ? this._renderLinkMenuItem(option, idx) : this._renderSpanMenuItem(option);\n }\n\n let subMenu;\n const haveSubmenu = hasOptions && enableMultiSupportMenu && this.currentLevel <= Math.round(multiLevelSupportedMenu) - 1;\n if (haveSubmenu) {\n this.currentLevel++;\n levelClassName = enableMultiSupportMenu ? `level-${this.currentLevel.toString()}` : '';\n subMenu = this._renderSubMenu(option.subMenu, isMobileView ? option.id : undefined, true);\n }\n return (\n \n {menuItem}\n {subMenu}\n \n );\n });\n return this._renderMenu(levelClassName, menuOptions, activeMenu, IsSubMenu);\n }\n\n private _renderButtonMenuItem(option: IMenuItemData, activeMenu?: number, index?: number): JSX.Element | null {\n const { Button } = this.props;\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderLinkMenuItem(\n option: IMenuItemData,\n index?: number,\n hoverEffect: boolean = true,\n isParent: boolean = false\n ): JSX.Element | null {\n const { Link } = this.props;\n const linkText = option.linkText ? option.linkText : '';\n const imagesource = option.imageSource ? option.imageSource : '';\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderPromotionalLink(linkText?: string, linkUrl?: string): JSX.Element | null {\n const { Link } = this.props;\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n if (linkText && linkUrl) {\n return (\n \n {linkText}\n \n );\n }\n return null;\n }\n\n private _renderSpanMenuItem(option: IMenuItemData, index?: number, isParent: boolean = false): JSX.Element | null {\n const { Span } = this.props;\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderMenu(level: string, menuOptions: JSX.Element[], currentItem?: number, submenu?: boolean): JSX.Element | null {\n const { DivContainer, MenuList, ImageDivContainer, showCategoryImage, showPromotionalContent, isMobileView } = this.props;\n const categoryImageDisplay =\n !isMobileView &&\n (showCategoryImage || showPromotionalContent) &&\n !ArrayExtensions.hasElements(this.state.categoryImage) &&\n !submenu;\n const promotionalContentDisplay =\n !isMobileView && showPromotionalContent && ArrayExtensions.hasElements(this.state.categoryImage) && !submenu;\n const DivContainerClass = this.currentLevel > 2 || categoryImageDisplay ? DivContainer!.className : 'ms-nav__deafult';\n this.currentLevel = 1;\n return (\n \n 2 &&\n 'navmenu-multi-level'\n )}\n >\n {menuOptions}\n \n {categoryImageDisplay &&\n this.state.categoryImage &&\n this.state.categoryImage.map(item => (\n \n {this.state.categoryImage && this._getCategoryImage(item)}\n {promotionalContentDisplay && this._renderPromotionalLink(item.altText, item.additionalProperties?.linkUrl)}\n \n ))}\n \n );\n }\n\n private readonly _updateCategoryImage = (categoryImageSrc: string, option: IMenuItemData) => () => {\n const linkText = option && option.linkText ? option.linkText : '';\n const promotionalImage: IImageData[] = [{ src: categoryImageSrc, altText: linkText }];\n\n // Read category and promotional image in one array\n if (ArrayExtensions.hasElements(option.promotionalContent)) {\n option.promotionalContent.map(item => {\n if (item && item.image) {\n const imageSrc = item.image.src;\n const promotionalItemImageSettings = item.image.imageSettings;\n promotionalImage.push({\n src: imageSrc,\n altText: item.text,\n imageSettings: promotionalItemImageSettings,\n additionalProperties: { linkUrl: item.linkUrl.destinationUrl }\n });\n }\n });\n }\n this.setState({\n categoryImage: promotionalImage.length > 0 ? promotionalImage : [{ src: 'empty' }],\n categoryImageAltText: linkText\n });\n };\n\n private readonly _handleDropdownToggle = (data: IMenuItemData, parentId?: number) => () => {\n if (!this.props.isMobileView) {\n this.setState({\n activeMenu: this.state.activeMenu && this.state.activeMenu === data.id! ? undefined : data.id!,\n parentMenu: parentId\n });\n if (this.props.showCategoryImage) {\n this._updateCategoryImage(data.imageSource!, data)();\n }\n } else {\n NavigationMenuView.isBackTrack = false;\n this.setState({\n activeMenu: data.id,\n mobileViewLabelText: data.linkText!,\n parentMenu: parentId\n });\n }\n };\n\n private readonly _handleGoBack = () => () => {\n NavigationMenuView.isBackTrack = true;\n this.setState({ activeMenu: this.state.parentMenu });\n };\n\n /**\n * Method to handle click outside of menu.\n * @param event -HTML event.\n */\n private readonly _handleClickOutside = (event: MouseEvent) => {\n if (this.menuNode.current && !this.menuNode.current.contains(event.target as Node)) {\n this.setState({\n activeMenu: undefined,\n mobileViewLabelText: '',\n categoryImage: null\n });\n }\n };\n\n /**\n * Method to handle click outside of menu.\n * @param event -HTML event.\n */\n private readonly _handleFocusOutside = (event: FocusEvent) => {\n if (this.menuNode.current && !this.menuNode.current.contains(event.relatedTarget as Node)) {\n this._closeSubmenu();\n }\n };\n\n /**\n * Checks to assign a ref for focus.\n * @param index -Sub menu list index.\n * @param mobileViewLabelText -Parent user clicked Sub menu list.\n * @param optionLinkText -Sub menu list.\n * @returns Ref.\n */\n private readonly _shouldAddFocusMenuRef = (index: number, mobileViewLabelText?: string, optionLinkText?: string) => {\n if (!NavigationMenuView.isBackTrack && index === 0) {\n return true;\n }\n if (!optionLinkText || !mobileViewLabelText) {\n return false;\n }\n return mobileViewLabelText === optionLinkText;\n };\n\n private _closeSubmenu(): void {\n if (!this.props.isMobileView) {\n this.setState({ activeMenu: undefined, categoryImage: null, mobileViewLabelText: '' });\n }\n }\n\n private readonly _getCategoryImage = (categoryImage?: IImageData): React.ReactNode | null => {\n if (!categoryImage || !categoryImage.src) {\n return null;\n }\n\n const categoryImageUrl = generateImageUrl(`${categoryImage.src}`, this.props.context.actionContext.requestContext.apiSettings);\n const defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=300&h=250&m=8', w: 0, h: 0 },\n sm: { q: 'w=300&h=250&m=8', w: 0, h: 0 },\n md: { q: 'w=300&h=250&m=8', w: 0, h: 0 },\n lg: { q: 'w=300&h=250&m=8', w: 0, h: 0 }\n },\n lazyload: true\n };\n if (categoryImageUrl !== undefined) {\n return (\n \n );\n }\n return null;\n };\n}\n\nexport default NavigationMenuView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { INavigationMenuViewProps } from '@msdyn365-commerce-modules/navigation-menu';\nimport { generateImageUrl } from '@msdyn365-commerce-modules/retail-actions';\nimport * as React from 'react';\n\nimport { INavigationMenuProps } from '../../definition-extensions/navigation-menu.ext.props.autogenerated';\n\n/**\n * INavigationMenuViewRootProps.\n */\nexport interface INavigationMenuViewRootProps {\n navProps: INavigationMenuViewProps & INavigationMenuProps<{}>;\n}\n\n/**\n * Represent navigation menu state interface.\n */\nexport interface INavigationState {\n parentMenu?: number;\n activeMenu?: number;\n categoryImage?: Msdyn365.IImageData[] | null;\n mobileViewLabelText?: string;\n drawerKeyValue: Msdyn365.IDictionary;\n isOnlyMobile: boolean;\n isNavOpen: boolean;\n}\n\n/**\n * NavMenuConstants enum.\n */\nexport enum NavMenuConstants {\n zero = 0,\n one = 1,\n two = 2,\n three = 3,\n four = 4,\n escapeKey = 27,\n rootMenu = 1\n}\n\n/**\n * GridSizes.\n */\nexport type GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Get category image.\n * @param props - Navigation menu props.\n * @param categoryImage - Category Image.\n * @param alttext - AltText String.\n * @returns Returns Node.\n */\nexport const getCategoryImage = (props: INavigationMenuViewRootProps, categoryImage: string, alttext: string): React.ReactNode | null => {\n const categoryImageUrl = generateImageUrl(`${categoryImage}`, props.navProps.context.actionContext.requestContext.apiSettings);\n const defaultImageSettings: Msdyn365.IImageSettings = {\n viewports: {\n xs: { q: 'w=162&h=162&m=8', w: 0, h: 0 },\n sm: { q: 'w=162&h=162&m=8', w: 0, h: 0 },\n md: { q: 'w=203&h=203&m=8', w: 0, h: 0 },\n lg: { q: 'w=203&h=203&m=8', w: 0, h: 0 }\n },\n lazyload: true\n };\n if (categoryImageUrl !== undefined) {\n const imageData: Msdyn365.IImageData = { src: categoryImageUrl };\n return (\n \n );\n }\n return null;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { IMenuItemData, MenuTypeIndexId } from '@msdyn365-commerce-modules/navigation-menu';\nimport { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n addThrottledEvent,\n Button,\n Collapse,\n Drawer,\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n ICollapseProps,\n IPayLoad,\n isMobile,\n ITelemetryContent,\n Module,\n Node,\n onTelemetryClick,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { computed } from 'mobx';\nimport * as React from 'react';\n\nimport { getCategoryImage, INavigationMenuViewRootProps, INavigationState, NavMenuConstants } from './navigation-menu-utilities';\n\n/**\n *\n * NavigationMenuRootDisabled component.\n * @extends {React.PureComponent}\n */\nexport class NavigationMenuRootDisabled extends React.PureComponent {\n private static isBackTrack: boolean = false;\n\n private readonly supportedLevel: number = NavMenuConstants.four;\n\n private currentLevel: number = NavMenuConstants.zero;\n\n private readonly menuNode: React.RefObject;\n\n private readonly menuItemRef: React.RefObject;\n\n private readonly escapeKey: number = NavMenuConstants.escapeKey;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly promotionalImage: Msdyn365.IImageData[] = [];\n\n private readonly payLoad: IPayLoad;\n\n private readonly attributes?: Msdyn365.IDictionary;\n\n private customResizeThrottledEventHandler?: (event: Event) => void;\n\n public constructor(props: INavigationMenuViewRootProps) {\n super(props);\n this.menuNode = React.createRef();\n this.menuItemRef = React.createRef();\n const { menuItemData } = this.props.navProps;\n if (ArrayExtensions.hasElements(menuItemData) && ArrayExtensions.hasElements(menuItemData[0].subMenu)) {\n const imagesource = menuItemData[0].subMenu[0].imageSource ? menuItemData[0].subMenu[0].imageSource : '';\n const linkText = menuItemData[0].subMenu[0].linkText ? menuItemData[0].subMenu[0].linkText : '';\n this.promotionalImage = [{ src: imagesource, altText: linkText }];\n\n // Read category and promotional image in one array\n if (ArrayExtensions.hasElements(menuItemData[0].subMenu[0].promotionalContent)) {\n menuItemData[0].subMenu[0].promotionalContent.map(item => {\n const imageSource = item.image.src;\n this.promotionalImage.push({\n src: imageSource,\n altText: item.text,\n additionalProperties: { linkUrl: item.linkUrl.destinationUrl }\n });\n return null;\n });\n }\n }\n\n this.state = {\n activeMenu: 1,\n mobileViewLabelText: '',\n parentMenu: undefined,\n drawerKeyValue: {},\n isOnlyMobile: this.isOnlyMobile,\n categoryImage: this.promotionalImage,\n isNavOpen: false\n };\n this.telemetryContent = getTelemetryObject(\n this.props.navProps.context.request.telemetryPageName!,\n this.props.navProps.friendlyName,\n this.props.navProps.telemetry\n );\n this.payLoad = getPayloadObject('click', this.telemetryContent, '', '');\n this.attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n }\n\n @computed public get isOnlyMobile(): boolean {\n return isMobile({ variant: VariantType.Browser, context: this.props.navProps.context.request }) === 'xs';\n }\n\n public componentDidMount(): void {\n this.customResizeThrottledEventHandler = addThrottledEvent(window, 'resize', this._customUpdateViewport as EventListener);\n document.addEventListener('keydown', (this._escFunction as unknown) as EventListener, false);\n this._customUpdateViewport();\n document.body.addEventListener('mousedown', this._handleClickOutside);\n }\n\n public componentDidUpdate(): void {\n if (this.menuItemRef.current?.children[0] && this.props.navProps.isMobileView) {\n (this.menuItemRef.current.children[0] as HTMLElement).focus();\n }\n }\n\n public componentWillUnmount(): void {\n window.removeEventListener('resize', this.customResizeThrottledEventHandler!, false);\n document.body.removeEventListener('mousedown', this._handleClickOutside, false);\n }\n\n public render(): JSX.Element | null {\n this.currentLevel = 1;\n const navbarKey = 'header-nav-mobile';\n return (\n \n {this.state.isOnlyMobile ? (\n this._renderMobileMenu()\n ) : (\n <>\n \n {this._renderCollapseMenu()}\n \n )}\n \n );\n }\n\n /**\n * Function to handle nav bar toggle.\n */\n private readonly _toggleNavBar = (): void => {\n this.setState(previousState => ({\n activeMenu: 1,\n isNavOpen: !previousState.isNavOpen\n }));\n };\n\n private _renderCollapseMenu(): JSX.Element | null {\n return (\n \n {this.state.isOnlyMobile ? this._renderMobileMenu() : this._renderDesktopMenu()}\n \n );\n }\n\n private _renderMobileMenu(): JSX.Element {\n const { MenuList, MobileBackButton, MobileDescriptionContainer, MobileDescriptionLabel, Navigation } = this.props.navProps;\n\n this.currentLevel = 1;\n return (\n \n \n {this.state.isOnlyMobile && this.state.activeMenu !== undefined && (\n \n \n {this.state.mobileViewLabelText}\n \n )}\n {this._renderDisplay()}\n \n \n );\n }\n\n private _renderDesktopMenu(): JSX.Element {\n const { MenuList, Navigation } = this.props.navProps;\n\n return (\n \n \n {this._renderDisplay()}\n \n \n
\n \n \n );\n }\n\n private _renderDrawerLink(item: IMenuItemData): JSX.Element | null {\n if (item.linkURL && !StringExtensions.isNullOrWhitespace(item.linkURL)) {\n return this._renderLinkMenuItem(item);\n } else if (!item.linkURL) {\n return this._renderSpanMenuItem(item);\n }\n return null;\n }\n\n private _renderDisplay(): JSX.Element[] {\n const { ListItem } = this.props.navProps;\n const menuItemData: IMenuItemData[] = this.props.navProps.menuItemData;\n const { activeMenu } = this.state;\n const menuItemList: JSX.Element[] = [];\n\n if (ArrayExtensions.hasElements(menuItemData)) {\n menuItemData[0].id = 1;\n }\n\n if (this.state.isOnlyMobile && activeMenu !== undefined && ArrayExtensions.hasElements(menuItemData)) {\n const menuItem = this._getFromSubMenu(undefined, menuItemData);\n\n if (menuItem) {\n menuItemList.push(\n \n {` `}\n {this._createMenuItemList(menuItem)} {` `}\n \n );\n }\n } else {\n for (const [index, item] of menuItemData.entries()) {\n menuItemList.push(\n \n {this._createMenuItemList(item)}\n \n );\n }\n }\n\n return menuItemList;\n }\n\n private _getFromSubMenu(parentMenuId?: number, menu?: IMenuItemData[]): IMenuItemData | null {\n if (!menu) {\n return null;\n }\n\n for (let index = 0; index <= menu.length - NavMenuConstants.one; index++) {\n const item: IMenuItemData = menu[Number(index)];\n\n if (item.id === this.state.activeMenu) {\n if (!NavigationMenuRootDisabled.isBackTrack) {\n this.setState({ parentMenu: parentMenuId });\n } else {\n this.setState({ parentMenu: parentMenuId, mobileViewLabelText: item.linkText });\n }\n return item;\n }\n const found = this._getFromSubMenu(item.id, item.subMenu);\n if (found) {\n return found;\n }\n }\n return null;\n }\n\n private _createMenuItemList(menuItemData: IMenuItemData): JSX.Element | null {\n if (ArrayExtensions.hasElements(menuItemData.subMenu)) {\n if (this.state.isOnlyMobile && this.state.activeMenu !== undefined) {\n return this._renderSubMenu(menuItemData.subMenu, menuItemData.id, false);\n }\n\n return (\n <>\n {this._renderButtonMenuItem(menuItemData)}\n {this._renderSubMenu(menuItemData.subMenu, menuItemData.id)}\n \n );\n } else if (menuItemData.linkURL && !StringExtensions.isNullOrWhitespace(menuItemData.linkURL)) {\n return this._renderLinkMenuItem(menuItemData, menuItemData.id);\n } else if (!menuItemData.linkURL && !(this.state.isOnlyMobile && this.state.activeMenu !== undefined)) {\n return this._renderSpanMenuItem(menuItemData);\n }\n\n return null;\n }\n\n private _renderSubMenu(subMenuArray?: IMenuItemData[], activeMenu?: number, isSubMenu?: boolean): JSX.Element | null {\n let subMenus: IMenuItemData[] | undefined = subMenuArray;\n if (activeMenu === NavMenuConstants.rootMenu) {\n subMenus = subMenuArray!.filter(subMenuItem => subMenuItem.id && subMenuItem.id >= MenuTypeIndexId.Retail);\n }\n\n const { ListItem } = this.props.navProps;\n const isEnableMultiSupportMenu = this.props.navProps.config.enableMultilevelMenu ?? false;\n const multiLevelSupportedMenu = this.props.navProps.config.menuLevelSupport ?? NavMenuConstants.three;\n\n if (activeMenu && this.state.activeMenu !== activeMenu) {\n this.props.navProps.context.telemetry.error('Navigation Active menu content is empty, module wont render.');\n return null;\n }\n\n if (!subMenus || !ArrayExtensions.hasElements(subMenus)) {\n this.props.navProps.context.telemetry.error('Navigation Submenu content is empty, module wont render.');\n return null;\n }\n\n let levelClassName: string = '';\n const menuOptions = subMenus.map((option: IMenuItemData, index: number) => {\n const hasOptions = option.subMenu && ArrayExtensions.hasElements(option.subMenu);\n let menuItem: JSX.Element | null;\n if (hasOptions && this.state.isOnlyMobile) {\n menuItem = this._renderButtonMenuItem(option, activeMenu, index);\n } else if (this.currentLevel === NavMenuConstants.one || !hasOptions) {\n menuItem = this.getMenuItem(option, index);\n } else {\n menuItem = null;\n }\n let subMenu;\n const isHavingSubmenu =\n hasOptions && isEnableMultiSupportMenu && this.currentLevel <= Math.round(multiLevelSupportedMenu) - NavMenuConstants.one;\n\n if (hasOptions && !this.state.isOnlyMobile) {\n if (this.currentLevel >= NavMenuConstants.two) {\n subMenu = this._renderSubMenuDrawer(option);\n } else if (this.currentLevel <= this.supportedLevel) {\n this.currentLevel++;\n levelClassName = `level-${this.currentLevel.toString()}`;\n subMenu = this._renderSubMenu(option.subMenu, undefined, true);\n }\n }\n\n if (isHavingSubmenu && this.state.isOnlyMobile) {\n this.currentLevel++;\n levelClassName = isEnableMultiSupportMenu ? `level-${this.currentLevel.toString()}` : '';\n subMenu = this._renderSubMenu(option.subMenu, option.id, true);\n }\n const imagesource = option.imageSource ? option.imageSource : '';\n return (\n \n {menuItem}\n {subMenu}\n \n );\n });\n return this._renderMenu(levelClassName, menuOptions, isSubMenu);\n }\n\n private getMenuItem(option: IMenuItemData, index: number): JSX.Element | null {\n let menuItem: JSX.Element | null;\n if (this.currentLevel === NavMenuConstants.one) {\n menuItem = option.linkURL ? this._renderLinkMenuItemLevelOne(option, index) : this._renderSpanMenuItem(option);\n } else {\n menuItem = option.linkURL ? this._renderLinkMenuItem(option, index) : this._renderSpanMenuItem(option);\n }\n return menuItem;\n }\n\n private _renderSubMenuDrawer(menuItem: IMenuItemData): JSX.Element | null {\n const levelClassName = `level-${this.currentLevel.toString()}`;\n const toggleButtonText = menuItem.linkText;\n const keyValue = this.state.drawerKeyValue;\n const buttonText = toggleButtonText !== undefined ? toggleButtonText : '';\n const keys = keyValue;\n const multiLevelSupportedMenu = this.props.navProps.config.menuLevelSupport ?? NavMenuConstants.three;\n\n let isDrawerOpen = false;\n if (keys[menuItem.id!]) {\n isDrawerOpen = true;\n }\n const colProps: ICollapseProps = { timeout: 0, isOpen: isDrawerOpen };\n\n return (\n \n \n {menuItem.subMenu!.map((menuSubItem: IMenuItemData) => {\n if (ArrayExtensions.hasElements(menuSubItem.subMenu)) {\n this.currentLevel++;\n if (this.currentLevel < multiLevelSupportedMenu) {\n return this._renderSubMenuDrawer(menuSubItem);\n }\n }\n return this._renderDrawerLink(menuSubItem);\n })}\n
\n \n );\n }\n\n /**\n * Method to handle escape key event.\n * @param menuId -Number.\n * @param isDrawerOpen -Boolean.\n * @returns Void.\n */\n private readonly _bindDesktopCategoryClick = (menuId: number | undefined, isDrawerOpen: boolean) => (): void => {\n const { drawerKeyValue } = this.state;\n const newPair = { [menuId!]: !isDrawerOpen };\n this.setState({ drawerKeyValue: { ...drawerKeyValue, ...newPair } });\n };\n\n private _renderButtonMenuItem(option: IMenuItemData, activeMenu?: number, index?: number): JSX.Element | null {\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderLinkMenuItem(option: IMenuItemData, index?: number): JSX.Element | null {\n const { Link } = this.props.navProps;\n const linkText = option.linkText ? option.linkText : '';\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderLinkMenuItemLevelOne(option: IMenuItemData, index?: number, isHoverEffect: boolean = true): JSX.Element | null {\n const { Link } = this.props.navProps;\n const linkText = option.linkText ? option.linkText : '';\n const imagesource = option.imageSource ? option.imageSource : '';\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderPromotionalLink(linkText?: string, linkUrl?: string): JSX.Element | null {\n const { Link } = this.props.navProps;\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n if (linkText && linkUrl) {\n return (\n \n {linkText}\n \n );\n }\n return null;\n }\n\n private _renderSpanMenuItem(option: IMenuItemData, index?: number): JSX.Element | null {\n const { Span } = this.props.navProps;\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderMenu(level: string, menuOptions: JSX.Element[], isSubmenu?: boolean): JSX.Element | null {\n const { DivContainer, MenuList, ImageDivContainer, showCategoryImage, showPromotionalContent } = this.props.navProps;\n const isCategoryImageDisplay =\n !this.state.isOnlyMobile &&\n showCategoryImage &&\n this.state.categoryImage !== null &&\n this.state.categoryImage !== undefined &&\n !isSubmenu;\n const isPromotionalContentDisplay =\n !this.state.isOnlyMobile && showPromotionalContent && ArrayExtensions.hasElements(this.state.categoryImage) && !isSubmenu;\n const divContainerClass =\n this.currentLevel > NavMenuConstants.two || isCategoryImageDisplay ? DivContainer!.className : 'ms-nav__deafult';\n this.currentLevel = NavMenuConstants.one;\n const menuLevelSupportClassName =\n isCategoryImageDisplay &&\n this.props.navProps.config.menuLevelSupport &&\n this.props.navProps.config.menuLevelSupport > NavMenuConstants.two &&\n 'navmenu-multi-level';\n\n const categoryImages = this.state.categoryImage?.filter(image => !StringExtensions.isNullOrWhitespace(image.src));\n const imagesContainerKey = categoryImages?.map(item => item.src).join('-');\n return (\n \n \n {menuOptions}\n \n \n {isCategoryImageDisplay &&\n ArrayExtensions.hasElements(categoryImages) &&\n categoryImages.map(item => (\n \n {getCategoryImage(this.props, item.src ?? '', item.altText!.toString())}\n {isPromotionalContentDisplay &&\n this._renderPromotionalLink(item.altText, item.additionalProperties?.linkUrl)}\n \n ))}\n
\n \n );\n }\n\n /**\n * Handle Category image update.\n * @param categoryImageSource - Image source.\n * @param option - Menu Item data.\n * @returns Returns empty.\n */\n private readonly _updateCategoryImage = (categoryImageSource: string, option: IMenuItemData) => () => {\n const linkText = option.linkText ? option.linkText : '';\n const promotionalImage: Msdyn365.IImageData[] = [{ src: categoryImageSource, altText: linkText }];\n\n // Read category and promotional image in one array\n if (ArrayExtensions.hasElements(option.promotionalContent)) {\n for (const item of option.promotionalContent) {\n const imageSource = item.image.src;\n promotionalImage.push({\n src: imageSource,\n altText: item.text,\n additionalProperties: { linkUrl: item.linkUrl.destinationUrl }\n });\n }\n }\n this.setState({\n categoryImage: ArrayExtensions.hasElements(promotionalImage) ? promotionalImage : [{ src: 'empty' }]\n });\n };\n\n /**\n * Handle dropdown toggle.\n * @param data - Menu Item data.\n * @param parentId - Number.\n * @returns Returns empty.\n */\n private readonly _handleDropdownToggle = (data: IMenuItemData, parentId?: number) => () => {\n if (!this.state.isOnlyMobile) {\n this.setState({\n activeMenu: data.id,\n parentMenu: parentId\n });\n if (this.props.navProps.showCategoryImage) {\n this._updateCategoryImage(data.imageSource!, data)();\n }\n } else {\n NavigationMenuRootDisabled.isBackTrack = false;\n this.setState({\n activeMenu: data.id,\n mobileViewLabelText: data.linkText!,\n parentMenu: parentId\n });\n }\n };\n\n /**\n * Handle back navigation for menu items for mobile view.\n * @returns Returns empty.\n */\n private readonly _handleGoBack = () => () => {\n NavigationMenuRootDisabled.isBackTrack = true;\n this.setState(previousState => ({ activeMenu: previousState.parentMenu }));\n };\n\n /**\n * Function to close the nav menu on click on body.\n * @param event - MouseEvent.\n */\n private readonly _handleClickOutside = (event: MouseEvent) => {\n if (this.menuNode.current && !this.menuNode.current.contains(event.target as Node)) {\n if (!this.state.isOnlyMobile) {\n this.setState({ activeMenu: 1, mobileViewLabelText: '', isNavOpen: false });\n } else {\n this.setState({ activeMenu: undefined, mobileViewLabelText: '', isNavOpen: false });\n }\n }\n };\n\n /**\n * Checks to assign a ref for focus.\n * @param index -Sub menu list index.\n * @param mobileViewLabelText -Mobile view label text.\n * @param optionLinkText -Sub menu item link text.\n * @returns Boolean.\n */\n private readonly _shouldAddFocusMenuRef = (index: number, mobileViewLabelText?: string, optionLinkText?: string) => {\n const firstIndex: number = 0;\n if (!NavigationMenuRootDisabled.isBackTrack && index === firstIndex) {\n return true;\n }\n if (!optionLinkText || !mobileViewLabelText) {\n return false;\n }\n return mobileViewLabelText === optionLinkText;\n };\n\n /**\n * Function to handle nav menu close.\n */\n private readonly _closeNavMenu = (): void => {\n if (!this.state.isOnlyMobile) {\n this.setState({ activeMenu: 1, mobileViewLabelText: '', isNavOpen: false });\n } else {\n this.setState({ activeMenu: undefined, mobileViewLabelText: '', isNavOpen: false });\n }\n (this.menuNode.current?.children[0] as HTMLElement).focus();\n };\n\n /**\n * Function to close the nav menu on esc key.\n * @param event - Event.\n */\n private readonly _escFunction = (event: React.KeyboardEvent) => {\n if (event.keyCode === this.escapeKey && !this.state.isOnlyMobile && this.state.isNavOpen) {\n this.setState({ activeMenu: 1, mobileViewLabelText: '', isNavOpen: false });\n (this.menuNode.current?.children[0] as HTMLElement).focus();\n }\n };\n\n /**\n * Custom update viewport.\n */\n private readonly _customUpdateViewport = (): void => {\n this.setState({ isOnlyMobile: this.isOnlyMobile });\n };\n}\n\nexport default NavigationMenuRootDisabled;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { IMenuItemData, MenuSource, MenuTypeIndexId } from '@msdyn365-commerce-modules/navigation-menu';\nimport { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n addThrottledEvent,\n Button,\n Collapse,\n Drawer,\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n ICollapseProps,\n IPayLoad,\n isMobile,\n ITelemetryContent,\n Module,\n Node,\n onTelemetryClick,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { computed } from 'mobx';\nimport * as React from 'react';\n\nimport { getCategoryImage, INavigationMenuViewRootProps, INavigationState, NavMenuConstants } from './navigation-menu-utilities';\n\n/**\n *\n * NavigationMenuRootEnabled component.\n * @extends {React.PureComponent}\n */\nexport class NavigationMenuRootEnabled extends React.PureComponent {\n private static isBackTrack: boolean = false;\n\n private readonly supportedLevel: number = NavMenuConstants.four;\n\n private currentLevel: number = NavMenuConstants.zero;\n\n private readonly menuNode: React.RefObject;\n\n private readonly menuItemRef: React.RefObject;\n\n private readonly escapeKey: number = NavMenuConstants.escapeKey;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly promotionalImage: Msdyn365.IImageData[] = [];\n\n private menuItemData: IMenuItemData[] = [];\n\n private readonly payLoad: IPayLoad;\n\n private readonly attributes?: Msdyn365.IDictionary;\n\n private customResizeThrottledEventHandler?: (event: Event) => void;\n\n public constructor(props: INavigationMenuViewRootProps) {\n super(props);\n this.menuNode = React.createRef();\n this.menuItemRef = React.createRef();\n const { menuItemData } = this.props.navProps;\n if (ArrayExtensions.hasElements(menuItemData) && ArrayExtensions.hasElements(menuItemData[0].subMenu)) {\n const imagesource = menuItemData[0].subMenu[0].imageSource ? menuItemData[0].subMenu[0].imageSource : '';\n const linkText = menuItemData[0].subMenu[0].linkText ? menuItemData[0].subMenu[0].linkText : '';\n this.promotionalImage = [{ src: imagesource, altText: linkText }];\n\n // Read category and promotional image in one array\n if (ArrayExtensions.hasElements(menuItemData[0].subMenu[0].promotionalContent)) {\n menuItemData[0].subMenu[0].promotionalContent.map(item => {\n const imageSource = item.image.src;\n this.promotionalImage.push({\n src: imageSource,\n altText: item.text,\n additionalProperties: { linkUrl: item.linkUrl.destinationUrl }\n });\n return null;\n });\n }\n }\n this.state = {\n activeMenu: NavMenuConstants.rootMenu,\n mobileViewLabelText: '',\n parentMenu: undefined,\n drawerKeyValue: {},\n isOnlyMobile: this.isOnlyMobile,\n categoryImage: this.promotionalImage,\n isNavOpen: false\n };\n\n this.telemetryContent = getTelemetryObject(\n this.props.navProps.context.request.telemetryPageName!,\n this.props.navProps.friendlyName,\n this.props.navProps.telemetry\n );\n this.payLoad = getPayloadObject('click', this.telemetryContent, '', '');\n this.attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n }\n\n @computed public get isOnlyMobile(): boolean {\n return isMobile({ variant: VariantType.Browser, context: this.props.navProps.context.request }) === 'xs';\n }\n\n public componentDidMount(): void {\n this.customResizeThrottledEventHandler = addThrottledEvent(window, 'resize', this._customUpdateViewport as EventListener);\n document.addEventListener('keydown', (this._escFunction as unknown) as EventListener, false);\n this._customUpdateViewport();\n document.body.addEventListener('mousedown', this._handleClickOutside);\n this._addShopAllLink();\n }\n\n public componentDidUpdate(): void {\n if (this.menuItemRef.current?.children[0] && this.props.navProps.isMobileView) {\n (this.menuItemRef.current.children[0] as HTMLElement).focus();\n }\n }\n\n public componentWillUnmount(): void {\n window.removeEventListener('resize', this.customResizeThrottledEventHandler!, false);\n document.body.removeEventListener('mousedown', this._handleClickOutside, false);\n }\n\n public render(): JSX.Element | null {\n this.currentLevel = NavMenuConstants.one;\n const navbarKey = 'header-nav-mobile';\n return (\n \n {this.state.isOnlyMobile ? (\n this._renderMobileMenu()\n ) : (\n <>\n \n {this._renderCollapseMenu()}\n \n )}\n \n );\n }\n\n /**\n * Function to handle nav bar toggle.\n */\n private readonly _toggleNavBar = (): void => {\n this.setState(previousState => ({\n activeMenu: NavMenuConstants.rootMenu,\n isNavOpen: !previousState.isNavOpen\n }));\n };\n\n private _renderCollapseMenu(): JSX.Element | null {\n return (\n \n {this.state.isOnlyMobile ? this._renderMobileMenu() : this._renderDesktopMenu()}\n \n );\n }\n\n private _renderMobileMenu(): JSX.Element {\n const { MobileBackButton, MobileDescriptionContainer, MobileDescriptionLabel, Navigation } = this.props.navProps;\n\n this.currentLevel = NavMenuConstants.one;\n return (\n \n \n {this.state.isOnlyMobile && this.state.activeMenu !== undefined && (\n \n \n {this.state.mobileViewLabelText}\n \n )}\n {this._renderDisplay()}\n \n \n );\n }\n\n private _renderDesktopMenu(): JSX.Element {\n const { Navigation } = this.props.navProps;\n return (\n \n \n {this._renderDisplay()}\n \n \n
\n \n \n );\n }\n\n private _renderDrawerLink(item: IMenuItemData): JSX.Element | null {\n if (item.linkURL && !StringExtensions.isNullOrWhitespace(item.linkURL)) {\n return this._renderLinkMenuItem(item);\n } else if (!item.linkURL) {\n return this._renderSpanMenuItem(item);\n }\n return null;\n }\n\n private _renderDisplay(): JSX.Element[] {\n const { ListItem } = this.props.navProps;\n let menuItemData: IMenuItemData[] = [];\n if (this.state.isOnlyMobile) {\n menuItemData = this.menuItemData;\n } else {\n menuItemData = this.props.navProps.menuItemData;\n }\n const { activeMenu } = this.state;\n const menuItemList: JSX.Element[] = [];\n let cmsMenuData: IMenuItemData[] | undefined = [];\n let retailMenuItemData: IMenuItemData[] | undefined = [];\n const retailMenuData = JSON.parse(JSON.stringify(menuItemData)) as IMenuItemData[];\n\n for (const item of retailMenuData) {\n retailMenuItemData = item.subMenu!.filter(subMenuItem => subMenuItem.id && subMenuItem.id >= MenuTypeIndexId.Retail);\n item.subMenu = retailMenuItemData;\n }\n\n for (const item of menuItemData) {\n cmsMenuData = item.subMenu!.filter(subMenuItem => subMenuItem.id && subMenuItem.id < MenuTypeIndexId.Retail);\n }\n\n if (this.state.isOnlyMobile && activeMenu !== undefined && ArrayExtensions.hasElements(menuItemData)) {\n let menuItem: IMenuItemData | null = {};\n for (const menuItemDatum of menuItemData) {\n if (menuItemDatum.id === activeMenu) {\n menuItem = menuItemDatum;\n if (!NavigationMenuRootEnabled.isBackTrack) {\n this.setState({\n parentMenu: undefined\n });\n } else {\n this.setState({\n parentMenu: undefined,\n mobileViewLabelText: menuItemDatum.linkText\n });\n }\n break;\n }\n menuItem = this._getFromSubMenu(menuItemDatum);\n if (menuItem && menuItem.id === activeMenu) {\n break;\n }\n }\n\n if (menuItem) {\n menuItemList.push(\n \n {` `}\n {this._createMenuItemList(menuItem)} {` `}\n \n );\n }\n } else {\n for (const [index, item] of retailMenuData.entries()) {\n menuItemList.push(\n \n {this._createMenuItemList(item)}\n \n );\n }\n\n for (const [index, item] of cmsMenuData.entries()) {\n menuItemList.push(\n \n {this._createMenuItemList(item)}\n \n );\n }\n }\n\n return menuItemList;\n }\n\n private _getFromSubMenu(item?: IMenuItemData): IMenuItemData | null {\n const subMenus = item?.subMenu;\n if (subMenus && ArrayExtensions.hasElements(subMenus)) {\n for (let index = 0; index <= subMenus.length - NavMenuConstants.one; index++) {\n const subMenu: IMenuItemData = subMenus[Number(index)];\n let parentMenuId = item?.id;\n\n if (subMenu.id === this.state.activeMenu) {\n if (parentMenuId === NavMenuConstants.rootMenu && subMenu.id! < MenuTypeIndexId.Retail) {\n parentMenuId = undefined;\n }\n\n if (!NavigationMenuRootEnabled.isBackTrack) {\n this.setState({ parentMenu: parentMenuId });\n } else {\n this.setState({ parentMenu: parentMenuId, mobileViewLabelText: subMenu.linkText });\n }\n return subMenu;\n }\n const found = this._getFromSubMenu(subMenu);\n if (found) {\n return found;\n }\n }\n }\n return null;\n }\n\n private _createMenuItemList(menuItemData: IMenuItemData): JSX.Element | null {\n if (ArrayExtensions.hasElements(menuItemData.subMenu)) {\n if (this.state.isOnlyMobile && this.state.activeMenu !== undefined) {\n return this._renderSubMenu(menuItemData.subMenu, menuItemData.id, false);\n }\n return (\n <>\n {this._renderButtonMenuItem(menuItemData)}\n {this._renderSubMenu(menuItemData.subMenu, menuItemData.id)}\n \n );\n } else if (menuItemData.linkURL && !StringExtensions.isNullOrWhitespace(menuItemData.linkURL)) {\n return this._renderLinkMenuItem(menuItemData, menuItemData.id);\n } else if (!menuItemData.linkURL) {\n return this._renderSpanMenuItem(menuItemData);\n }\n\n return null;\n }\n\n private _renderSubMenu(subMenuArray?: IMenuItemData[], activeMenu?: number, isSubMenu?: boolean): JSX.Element | null {\n let subMenus: IMenuItemData[] | undefined = subMenuArray;\n if (activeMenu === NavMenuConstants.rootMenu) {\n subMenus = subMenuArray!.filter(subMenuItem => subMenuItem.id && subMenuItem.id >= MenuTypeIndexId.Retail);\n }\n\n const { ListItem } = this.props.navProps;\n const isEnableMultiSupportMenu = this.props.navProps.config.enableMultilevelMenu ?? false;\n const multiLevelSupportedMenu = this.props.navProps.config.menuLevelSupport ?? NavMenuConstants.three;\n\n if (activeMenu && this.state.activeMenu !== activeMenu) {\n this.props.navProps.context.telemetry.error('Navigation Active menu content is empty, module wont render.');\n return null;\n }\n\n if (!subMenus || !ArrayExtensions.hasElements(subMenus)) {\n this.props.navProps.context.telemetry.error('Navigation Submenu content is empty, module wont render.');\n return null;\n }\n\n let levelClassName: string = '';\n const menuOptions = subMenus.map((option: IMenuItemData, index: number) => {\n const hasOptions = option.subMenu && ArrayExtensions.hasElements(option.subMenu);\n let menuItem: JSX.Element | null;\n if (hasOptions && this.state.isOnlyMobile) {\n menuItem = this._renderButtonMenuItem(option, activeMenu, index);\n } else if (this.currentLevel === NavMenuConstants.one || !hasOptions) {\n menuItem = this.getMenuItem(option, index);\n } else {\n menuItem = null;\n }\n let subMenu;\n const isHavingSubmenu =\n hasOptions && isEnableMultiSupportMenu && this.currentLevel <= Math.round(multiLevelSupportedMenu) - NavMenuConstants.one;\n\n if (hasOptions && !this.state.isOnlyMobile) {\n if (this.currentLevel >= NavMenuConstants.two) {\n subMenu = this._renderSubMenuDrawer(option);\n } else if (this.currentLevel <= this.supportedLevel - NavMenuConstants.one) {\n this.currentLevel++;\n levelClassName = `level-${this.currentLevel.toString()}`;\n subMenu = this._renderSubMenu(option.subMenu, undefined, true);\n }\n }\n if (isHavingSubmenu && this.state.isOnlyMobile) {\n this.currentLevel++;\n levelClassName = isEnableMultiSupportMenu ? `level-${this.currentLevel.toString()}` : '';\n subMenu = this._renderSubMenu(option.subMenu, option.id, true);\n }\n const imagesource = option.imageSource ? option.imageSource : '';\n return (\n \n {menuItem}\n {subMenu}\n \n );\n });\n return this._renderMenu(levelClassName, menuOptions, isSubMenu);\n }\n\n private getMenuItem(option: IMenuItemData, index: number): JSX.Element | null {\n let menuItem: JSX.Element | null;\n if (this.currentLevel === NavMenuConstants.one) {\n menuItem = option.linkURL ? this._renderLinkMenuItemLevelOne(option, index) : this._renderSpanMenuItem(option);\n } else {\n menuItem = option.linkURL ? this._renderLinkMenuItem(option, index) : this._renderSpanMenuItem(option);\n }\n return menuItem;\n }\n\n private _renderSubMenuDrawer(menuItem: IMenuItemData): JSX.Element | null {\n const levelClassName = `level-${this.currentLevel.toString()}`;\n const toggleButtonText = menuItem.linkText;\n const keyValue = this.state.drawerKeyValue;\n const buttonText = toggleButtonText !== undefined ? toggleButtonText : '';\n const keys = keyValue;\n const multiLevelSupportedMenu = this.props.navProps.config.menuLevelSupport ?? NavMenuConstants.three;\n\n let isDrawerOpen = false;\n if (keys[menuItem.id!]) {\n isDrawerOpen = true;\n }\n const colProps: ICollapseProps = { timeout: 0, isOpen: isDrawerOpen };\n return (\n \n \n {menuItem.subMenu!.map((menuSubItem: IMenuItemData) => {\n if (ArrayExtensions.hasElements(menuSubItem.subMenu)) {\n this.currentLevel++;\n if (this.currentLevel < multiLevelSupportedMenu) {\n return this._renderSubMenuDrawer(menuSubItem);\n }\n }\n return this._renderDrawerLink(menuSubItem);\n })}\n
\n \n );\n }\n\n /**\n * Method to handle escape key event.\n * @param menuId -Number.\n * @param isDrawerOpen -Boolean.\n * @returns Void.\n */\n private readonly _bindDesktopCategoryClick = (menuId: number | undefined, isDrawerOpen: boolean) => (): void => {\n const { drawerKeyValue } = this.state;\n const newPair = { [menuId!]: !isDrawerOpen };\n this.setState({ drawerKeyValue: { ...drawerKeyValue, ...newPair } });\n };\n\n private _renderButtonMenuItem(option: IMenuItemData, activeMenu?: number, index?: number): JSX.Element | null {\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderLinkMenuItem(option: IMenuItemData, index?: number): JSX.Element | null {\n const { Link } = this.props.navProps;\n const linkText = option.linkText ? option.linkText : '';\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderLinkMenuItemLevelOne(option: IMenuItemData, index?: number, isHoverEffect: boolean = true): JSX.Element | null {\n const { Link } = this.props.navProps;\n const linkText = option.linkText ? option.linkText : '';\n const imagesource = option.imageSource ? option.imageSource : '';\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderPromotionalLink(linkText?: string, linkUrl?: string): JSX.Element | null {\n const { Link } = this.props.navProps;\n this.payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n if (linkText && linkUrl) {\n return (\n \n {linkText}\n \n );\n }\n return null;\n }\n\n private _renderSpanMenuItem(option: IMenuItemData, index?: number): JSX.Element | null {\n const { Span } = this.props.navProps;\n return (\n \n {option.linkText}\n \n );\n }\n\n private _renderMenu(level: string, menuOptions: JSX.Element[], isSubmenu?: boolean): JSX.Element | null {\n const { DivContainer, ImageDivContainer, showCategoryImage, showPromotionalContent } = this.props.navProps;\n const isCategoryImageDisplay =\n !this.state.isOnlyMobile &&\n showCategoryImage &&\n this.state.categoryImage !== null &&\n this.state.categoryImage !== undefined &&\n !isSubmenu;\n const isPromotionalContentDisplay =\n !this.state.isOnlyMobile && showPromotionalContent && ArrayExtensions.hasElements(this.state.categoryImage) && !isSubmenu;\n const divContainerClass =\n this.currentLevel > NavMenuConstants.two || isCategoryImageDisplay ? DivContainer!.className : 'ms-nav__deafult';\n this.currentLevel = NavMenuConstants.one;\n const menuLevelSupportClassName =\n isCategoryImageDisplay &&\n this.props.navProps.config.menuLevelSupport &&\n this.props.navProps.config.menuLevelSupport > NavMenuConstants.two &&\n 'navmenu-multi-level';\n\n const categoryImages = this.state.categoryImage?.filter(image => !StringExtensions.isNullOrWhitespace(image.src));\n const imagesContainerKey = categoryImages?.map(item => item.src).join('-');\n return (\n \n \n {menuOptions}\n \n \n {isCategoryImageDisplay &&\n ArrayExtensions.hasElements(categoryImages) &&\n categoryImages.map(item => (\n \n {getCategoryImage(this.props, item.src ?? '', item.altText!.toString())}\n {isPromotionalContentDisplay &&\n this._renderPromotionalLink(item.altText, item.additionalProperties?.linkUrl)}\n \n ))}\n
\n \n );\n }\n\n /**\n * Handle Category image update.\n * @param categoryImageSource - Image source.\n * @param option - Menu Item data.\n * @returns Returns empty.\n */\n private readonly _updateCategoryImage = (categoryImageSource: string, option: IMenuItemData) => () => {\n const linkText = option.linkText ? option.linkText : '';\n const promotionalImage: Msdyn365.IImageData[] = [{ src: categoryImageSource, altText: linkText }];\n\n // Read category and promotional image in one array\n if (ArrayExtensions.hasElements(option.promotionalContent)) {\n for (const item of option.promotionalContent) {\n const imageSource = item.image.src;\n promotionalImage.push({\n src: imageSource,\n altText: item.text,\n additionalProperties: { linkUrl: item.linkUrl.destinationUrl }\n });\n }\n }\n this.setState({\n categoryImage: ArrayExtensions.hasElements(promotionalImage) ? promotionalImage : [{ src: 'empty' }]\n });\n };\n\n /**\n * Handle dropdown toggle.\n * @param data - Menu Item data.\n * @param parentId - Number.\n * @returns Returns empty.\n */\n private readonly _handleDropdownToggle = (data: IMenuItemData, parentId?: number) => () => {\n if (!this.state.isOnlyMobile) {\n this.setState({\n activeMenu: data.id,\n parentMenu: parentId\n });\n if (this.props.navProps.showCategoryImage) {\n this._updateCategoryImage(data.imageSource!, data)();\n }\n } else {\n NavigationMenuRootEnabled.isBackTrack = false;\n this.setState({\n activeMenu: data.id,\n mobileViewLabelText: data.linkText!,\n parentMenu: parentId\n });\n }\n };\n\n /**\n * Handle back navigation for menu items for mobile view.\n * @returns Returns empty.\n */\n private readonly _handleGoBack = () => () => {\n NavigationMenuRootEnabled.isBackTrack = true;\n this.setState(previousState => ({ activeMenu: previousState.parentMenu }));\n };\n\n /**\n * Function to close the nav menu on click on body.\n * @param event - MouseEvent.\n */\n private readonly _handleClickOutside = (event: MouseEvent) => {\n if (this.menuNode.current && !this.menuNode.current.contains(event.target as Node)) {\n if (!this.state.isOnlyMobile) {\n this.setState({ activeMenu: NavMenuConstants.rootMenu, mobileViewLabelText: '', isNavOpen: false });\n } else {\n this.setState({ activeMenu: undefined, mobileViewLabelText: '', isNavOpen: false });\n }\n }\n };\n\n /**\n * Add shop all link for Mobile submenu.\n */\n private readonly _addShopAllLink = (): void => {\n const { menuItemData } = this.props.navProps;\n this.menuItemData = menuItemData;\n if (ArrayExtensions.hasElements(menuItemData) && ArrayExtensions.hasElements(menuItemData[0].subMenu)) {\n this.menuItemData[0].subMenu?.map(item => {\n const shopAllObject = {};\n Object.assign(shopAllObject, { imageSource: item.imageSource });\n Object.assign(shopAllObject, { linkText: this.props.navProps.resources.allCategoryMenuText });\n Object.assign(shopAllObject, { linkURL: item.linkURL });\n if (ArrayExtensions.hasElements(item.subMenu) && item.menuSource === MenuSource.Retail) {\n item.subMenu.unshift(shopAllObject);\n }\n return item;\n });\n }\n };\n\n /**\n * Checks to assign a ref for focus.\n * @param index -Sub menu list index.\n * @param mobileViewLabelText -Mobile view label text.\n * @param optionLinkText -Sub menu item link text.\n * @returns Boolean.\n */\n private readonly _shouldAddFocusMenuRef = (index: number, mobileViewLabelText?: string, optionLinkText?: string) => {\n const firstIndex: number = 0;\n if (!NavigationMenuRootEnabled.isBackTrack && index === firstIndex) {\n return true;\n }\n if (!optionLinkText || !mobileViewLabelText) {\n return false;\n }\n return mobileViewLabelText === optionLinkText;\n };\n\n /**\n * Function to handle nav menu close.\n */\n private readonly _closeNavMenu = (): void => {\n if (!this.state.isOnlyMobile) {\n this.setState({ activeMenu: NavMenuConstants.rootMenu, mobileViewLabelText: '', isNavOpen: false });\n } else {\n this.setState({ activeMenu: undefined, mobileViewLabelText: '', isNavOpen: false });\n }\n };\n\n /**\n * Function to close the nav menu on esc key.\n * @param event - Event.\n */\n private readonly _escFunction = (event: React.KeyboardEvent) => {\n if (event.keyCode === this.escapeKey && !this.state.isOnlyMobile && this.state.isNavOpen) {\n this.setState({ activeMenu: NavMenuConstants.rootMenu, mobileViewLabelText: '', isNavOpen: false });\n }\n };\n\n /**\n * Custom update viewport.\n */\n private readonly _customUpdateViewport = (): void => {\n this.setState({ isOnlyMobile: this.isOnlyMobile });\n };\n}\n\nexport default NavigationMenuRootEnabled;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { INavigationMenuViewProps } from '@msdyn365-commerce-modules/navigation-menu';\nimport * as React from 'react';\n\nimport { INavigationMenuProps } from '../definition-extensions/navigation-menu.ext.props.autogenerated';\nimport NavigationMenuRootDisabled from './components/navigation-menu-root-disabled';\nimport NavigationMenuRootEnabled from './components/navigation-menu-root-enabled';\n\n/**\n * Render the Navigation menu.\n * @param props - The navigation menu view props.\n * @returns Return HTML having INavigationMenuViewProps props with navigation menu.\n */\nconst navigationMenuView = (props: INavigationMenuViewProps & INavigationMenuProps<{}>): JSX.Element => {\n if (props.config.enabletopMenu) {\n return ;\n }\n\n return ;\n};\n\nexport default navigationMenuView;\n","module.exports = React;","module.exports = ReactDOM;"],"names":["NavMenuConstants","getCategoryImage","props","categoryImage","alttext","categoryImageUrl","generateImageUrl","navProps","context","actionContext","requestContext","apiSettings","defaultImageSettings","viewports","xs","q","w","h","sm","md","lg","lazyload","disableLazyLoad","undefined","_props$navProps$confi","imageData","src","React","Msdyn365","Object","assign","className","gridSettings","request","imageSettings","config","categoryImageSettings","loadFailureBehavior","role","altText","NavigationMenuRootDisabled","constructor","super","supportedLevel","four","currentLevel","zero","escapeKey","promotionalImage","_toggleNavBar","this","setState","previousState","activeMenu","isNavOpen","_bindDesktopCategoryClick","desktopCategoryId","state","isDrawerOpen","_updateCategoryImage","categoryImageSource","option","linkText","ArrayExtensions","promotionalContent","item","imageSource","image","push","text","additionalProperties","linkUrl","destinationUrl","_handleDropdownToggle","data","parentId","isOnlyMobile","isBackTrack","id","mobileViewLabelText","parentMenu","showCategoryImage","_resetFocus","setTimeout","_this$menuNode$curren","menuNode","current","focus","_handleGoBack","_handleClickOutside","event","contains","target","_closeNavMenu","_escFunction","keyCode","_customUpdateViewport","menuItemData","subMenu","imagesource","map","telemetryContent","getTelemetryObject","telemetryPageName","friendlyName","telemetry","payLoad","getPayloadObject","attributes","getTelemetryAttributes","isMobile","variant","VariantType","componentDidMount","customResizeThrottledEventHandler","addThrottledEvent","window","document","addEventListener","body","componentWillUnmount","removeEventListener","render","Node","ref","_renderMobileMenu","Button","onClick","title","resources","hamburgerAriaLabel","_renderCollapseMenu","Collapse","isOpen","_renderDesktopMenu","MenuList","MobileBackButton","MobileDescriptionContainer","MobileDescriptionLabel","Navigation","Module","classnames","tabIndex","_renderDisplay","_renderDrawerLink","linkURL","StringExtensions","_renderLinkMenuItem","_renderSpanMenuItem","ListItem","menuItemList","menuItem","_getFromSubMenu","key","_createMenuItemList","parentMenuId","menu","index","length","one","Number","found","_renderSubMenu","_renderButtonMenuItem","subMenuArray","isSubMenu","_this$props$navProps$","_this$props$navProps$2","subMenus","rootMenu","filter","subMenuItem","MenuTypeIndexId","isEnableMultiSupportMenu","enableMultilevelMenu","multiLevelSupportedMenu","menuLevelSupport","three","error","levelClassName","menuOptions","hasOptions","getMenuItem","isHavingSubmenu","Math","round","two","_renderSubMenuDrawer","toString","onMouseOver","_renderMenu","_renderLinkMenuItemLevelOne","_menuItem$linkText","Drawer","collapseProps","timeout","openGlyph","closeGlyph","glyphPlacement","toggleButtonText","onToggle","menuSubItem","Link","contentAction","etext","href","onTelemetryClick","isHoverEffect","arguments","_renderPromotionalLink","Span","level","isSubmenu","_this$state$categoryI","DivContainer","ImageDivContainer","showPromotionalContent","isCategoryImageDisplay","isPromotionalContentDisplay","divContainerClass","menuLevelSupportClassName","categoryImages","imagesContainerKey","join","_item$src","_item$additionalPrope","__decorate","computed","NavigationMenuRootEnabled","_addShopAllLink","_this$menuItemData$0$","shopAllObject","allCategoryMenuText","menuSource","MenuSource","unshift","cmsMenuData","retailMenuItemData","retailMenuData","JSON","parse","stringify","menuItemDatum","extraClassName","enabletopMenu","NavigationMenuView","categoryImageSrc","imageSrc","promotionalItemImageSettings","categoryImageAltText","isMobileView","_closeSubmenu","_getCategoryImage","_categoryImage$imageS","_this$props$config$ca","ImageData","Image","_onDrawerChange","drawerState","drawerKeyValue","newPair","buttonText","_objectSpread","bind","_renderDrawerMenu","_renderDrawer","keyValue","colProps","_renderLinkText","forEach","i","IsSubMenu","enableMultiSupportMenu","idx","haveSubmenu","onFocus","hoverEffect","currentItem","submenu","categoryImageDisplay","promotionalContentDisplay","DivContainerClass","binding","modules","dataActions","c","require","$type","da","name","path","runOn","iNM","ns","n","p","pdp","registerSanitizedActionPath","sanitizedActionPath","dataAction","default","Error","prototype","RegistrationId","__bindings__","viewDictionary","cn","_positionInSetOffset","_handleFocusOutside","relatedTarget","navDrawerList","Array","from","childNodes","navDrawerButton","firstChild","getAttribute","_ref","MsDyn365","posinset","setSize","keys","toggleButtonProps","ariaLabel","currentPos","_menuItem$subMenu2","_menuItem$subMenu","isParent","shouldOpenNewTab","NavigationMenu","isRetail","isCMS","_setNavigationSource","sourceType","_updateViewport","viewport","device","Type","navigationMenuSource","locale","nameTranslations","nameTranslation","find","Language","toLowerCase","Text","resizeThrottledEventHandler","_this$props$config$di","_this$props$config$di2","_mapData","isEmptyOrNullObject","viewProps","xl","moduleProps","tag","displayCategoryImage","displayPromotionalImage","ImageContainer","backButtonAriaLabel","renderView","mergedData","categories","result","_constructMenuItemData","cmsNavItems","_constructTopMenuItemData","_this$props$config$en","_this$props$config$ro","mergedRootMenuData","topMenu","rootMenuNavigation","retailItem","cmsItem","addedAllMenu","categoryPromotionalContent","cmsItemText","menuAriaLabel","promotionalData","promoItem","_promoItem$categoryNa","_retailItem$Name","categoryName","Name","_NavigationMenu$getFr","_NavigationMenu$getFr2","Images","Uri","RSItemIdInit","getFriendlyName","NameTranslations","Url","_getNestedChildren","CMSItemIdInit","imageDestinationURL","imageLink","_getCMSNestedChildren","openInNewTab","category","imageSourceUrl","nestedChildren","Children","getCategoryUrl","_getViewport","innerWidth","observable","_shouldAddFocusMenuRef","optionLinkText","menuItemRef","componentDidUpdate","_this$menuItemRef$cur","children","menuId","_this$menuNode$curren2","entries","_this$props$navProps$3","module","exports","ReactDOM"],"sourceRoot":""}