{\n public render(): JSX.Element {\n const editableLinks = this._mapEditableLinks(this.props.links);\n return (\n \n {editableLinks && ArrayExtensions.hasElements(editableLinks) ? (\n \n ) : null}\n
\n );\n }\n\n /**\n * IInteractiveFeatureLinks component.\n * @param linkdata - Link data.\n * @returns Editable links.\n */\n private readonly _mapEditableLinks = (linkdata?: ILinksData[]): Msdyn365.ILinksData[] | null => {\n if (!linkdata || !ArrayExtensions.hasElements(linkdata)) {\n return null;\n }\n const editableLinks: Msdyn365.ILinksData[] = [];\n for (const link of linkdata) {\n // Construct telemetry attribute to render\n const payLoad = getPayloadObject('click', this.props.telemetryContent, '', '');\n const linkText = link.linkText ? link.linkText : '';\n payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.props.telemetryContent, payLoad);\n const editableLink: Msdyn365.ILinksData = {\n ariaLabel: link.ariaLabel,\n className: 'ms-interactive-feature-collection__link',\n linkText: link.linkText,\n linkUrl: link.linkUrl.destinationUrl,\n openInNewTab: link.openInNewTab,\n role: 'button',\n additionalProperties: attributes,\n onClick: onTelemetryClick(this.props.telemetryContent, payLoad, linkText)\n };\n editableLinks.push(editableLink);\n }\n\n return editableLinks;\n };\n}\nexport default InteractiveFeatureCollectionLinks;\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 { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { getTelemetryObject, IModuleProps, INodeProps, ITelemetryContent, NodeTag } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { InteractiveFeatureCollectionLinks } from './components';\nimport { IHeadingData, IInteractiveFeatureItemProps } from './interactive-feature-item.props.autogenerated';\n\n/**\n * Interactive Feature Item view props.\n */\nexport interface IInteractiveFeatureItemViewProps extends IInteractiveFeatureItemProps<{}> {\n title: React.ReactNode;\n paragraph: React.ReactNode;\n image: React.ReactNode;\n links: React.ReactNode;\n featureItem: IModuleProps;\n isMosaic: boolean;\n indexItem?: number;\n itemCounter?: number;\n\n interactiveFeatureCollectionCarouselContainer: INodeProps;\n interactiveFeatureCollectionCarouselImage: INodeProps;\n interactiveFeatureCollectionCarouselContent: INodeProps;\n\n interactiveFeatureCollectionMosaicContainer: INodeProps;\n interactiveFeatureCollectionMosaicImage: INodeProps;\n interactiveFeatureCollectionMosaicDetails: INodeProps;\n}\n\n/**\n * Interactive Feature Item Extented props.\n */\nexport interface IInteractiveFeatureItemExtentedProps extends IInteractiveFeatureItemProps<{}> {\n isMosaic?: boolean;\n indexItem?: number;\n itemCounter?: number;\n}\n\n/**\n *\n * InteractiveFeatureItem component.\n * @extends {React.PureComponent}\n */\nexport class InteractiveFeatureItem extends React.PureComponent {\n private readonly _telemetryContent: ITelemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n\n public constructor(props: IInteractiveFeatureItemProps<{}>) {\n super(props);\n }\n\n public render(): JSX.Element | null {\n const { indexItem, itemCounter, isMosaic } = this.props;\n const { heading, paragraph, image, links } = this.props.config;\n const featureItemLinks = links && ArrayExtensions.hasElements(links) && (\n \n );\n\n const viewProps = {\n ...this.props,\n indexItem,\n itemCounter,\n isMosaic: isMosaic ? isMosaic : false,\n title: this._createHeading(heading),\n paragraph: this._createParagraph(paragraph),\n image: this._renderImage(image),\n links: featureItemLinks,\n featureItem: {\n moduleProps: this.props,\n className: ''\n },\n interactiveFeatureCollectionCarouselContainer: {\n tag: 'div' as NodeTag,\n className: 'ms-interactive-feature-collection-carousel__container'\n },\n interactiveFeatureCollectionCarouselImage: {\n tag: 'div' as NodeTag,\n className: 'ms-interactive-feature-collection-carousel__image'\n },\n interactiveFeatureCollectionCarouselContent: {\n tag: 'div' as NodeTag,\n className: 'ms-interactive-feature-collection-carousel__heading'\n },\n interactiveFeatureCollectionMosaicContainer: {\n tag: 'div' as NodeTag,\n className: 'ms-interactive-feature-collection-mosaic',\n 'aria-label': heading?.text,\n tabindex: '0',\n role: 'group'\n },\n interactiveFeatureCollectionMosaicImage: {\n className: 'ms-interactive-feature-collection-mosaic__image'\n },\n interactiveFeatureCollectionMosaicDetails: {\n className: 'ms-interactive-feature-collection-mosaic__details'\n }\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * Handles heading content change event.\n * @param event - Content editable event.\n */\n public handleHeadingChange = (event: Msdyn365.ContentEditableEvent): void => {\n this.props.config.heading!.text = event.target.value;\n };\n\n /**\n * Handles paragraph content change event.\n * @param event - Content editable event.\n */\n public handleParagraphChange = (event: Msdyn365.ContentEditableEvent): void => {\n this.props.config.paragraph = event.target.value;\n };\n\n /**\n * Handles paragraph content change event.\n * @param linkIndex - Index of link in linkarray.\n * @returns Void.\n */\n public handleLinkTextChange = (linkIndex: number) => (event: Msdyn365.ContentEditableEvent): void => {\n if (this.props.config.links?.[Number(linkIndex)]) {\n this.props.config.links[Number(linkIndex)].linkText = event.target.value;\n }\n };\n\n private _createParagraph(text?: Msdyn365.RichText): React.ReactNode | null {\n if (!text) {\n return null;\n }\n return (\n \n );\n }\n\n private _createHeading(heading?: IHeadingData): React.ReactNode | null {\n if (!heading) {\n return null;\n }\n if (StringExtensions.isNullOrWhitespace(heading.text)) {\n return null;\n }\n\n return (\n \n );\n }\n\n private _renderImage(item?: Msdyn365.IImageData, isAriaHiddenAttribute?: boolean): React.ReactNode | null {\n // Even if image.src is null, we render the Image component to render the fallback SVG\n const defaultImageSettings: Msdyn365.IImageSettings = {\n viewports: {\n xs: { q: 'w=328&h=459&m=6', w: 328, h: 459 },\n sm: { q: 'w=348&h=487&m=6', w: 348, h: 487 },\n md: { q: 'w=650&h=366&m=6', w: 650, h: 366 },\n lg: { q: 'w=650&h=366&m=6', w: 650, h: 366 },\n xl: { q: 'w=650&h=366&m=6', w: 650, h: 366 }\n },\n lazyload: true\n };\n const verifiedImageSettings = item?.imageSettings?.viewports ? item.imageSettings : defaultImageSettings;\n return (\n \n );\n }\n}\n\nexport default InteractiveFeatureItem;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\n/// \n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { OrgUnitLocation } from '@msdyn365-commerce/retail-proxy';\nimport { IModuleProps, INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport classname from 'classnames';\nimport { observable, reaction, when } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { IMapData } from './map.data';\nimport { IMapProps, IPushpinOptionsData } from './map.props.autogenerated';\n\n/**\n * Header Interface.\n */\nexport interface IHeader {\n headerProps: INodeProps;\n heading: React.ReactNode;\n}\n\n/**\n * MapViewProps Interface.\n */\nexport interface IMapViewProps extends IMapProps {\n ModuleProps: IModuleProps;\n Header: IHeader;\n MapProps: INodeProps;\n Map: Microsoft.Maps.Map | undefined;\n}\n\n/**\n *\n * Map component.\n * @extends {React.Component>}\n */\n@observer\nclass Map extends React.Component> {\n @observable public map: Microsoft.Maps.Map | undefined;\n private timeout: number = 500;\n\n private readonly mapRef: React.RefObject = React.createRef();\n\n public constructor(props: IMapProps) {\n super(props);\n }\n\n public componentDidMount(): void {\n const {\n context: {\n telemetry,\n actionContext: {\n requestContext: { channel }\n }\n }\n } = this.props;\n\n if (channel && !channel.BingMapsApiKey) {\n telemetry.error('BingMapsApiKey is missing.');\n return;\n }\n\n if (channel && !channel.BingMapsEnabled) {\n telemetry.error('Map is disabled from HQ.');\n return;\n }\n\n const loadMapAPIInput = {\n key: channel?.BingMapsApiKey,\n lang: this.props.context.actionContext.requestContext.locale,\n market: this.props.context?.actionContext?.requestContext?.channel?.ChannelCountryRegionISOCode\n };\n\n if (\n this.props.data.storeSelectorStateManager?.result?.isMapApiLoaded ||\n this.props.data.distributorSelectorStateManager?.result?.isMapApiLoaded\n ) {\n this._initMap();\n if (this.props.data.distributorSelectorStateManager?.result?.isDistributorSelectorDialogOpen) {\n this._updateMapsForDistributor();\n } else {\n this._updateMap();\n }\n }\n\n when(\n () => !!this.props.data.storeSelectorStateManager?.result?.setMapModuleLoaded,\n () => {\n this.props.data.storeSelectorStateManager?.result?.setMapModuleLoaded(true);\n }\n );\n\n when(\n () => !!this.props.data.distributorSelectorStateManager?.result?.setMapModuleLoaded,\n () => {\n this.props.data.distributorSelectorStateManager?.result?.setMapModuleLoaded(true);\n }\n );\n\n reaction(\n () =>\n this.props.data.storeSelectorStateManager?.result?.loadMapApi ||\n this.props.data.distributorSelectorStateManager?.result?.loadMapApi,\n () => {\n if (this.props.data.distributorSelectorStateManager?.result?.loadMapApi) {\n this.props.data.distributorSelectorStateManager?.result?.loadMapApi(loadMapAPIInput);\n } else {\n this.props.data.storeSelectorStateManager?.result?.loadMapApi(loadMapAPIInput);\n }\n }\n );\n\n reaction(\n () =>\n this.props.data.storeSelectorStateManager?.result?.isMapApiLoaded ||\n this.props.data.distributorSelectorStateManager?.result?.isMapApiLoaded,\n () => {\n this._initMap();\n }\n );\n\n reaction(\n () => {\n return [\n this.props.data.storeSelectorStateManager.result?.context?.orgUnitStoreInformation,\n this.props.data.storeSelectorStateManager.result?.selectedStoreLocationId,\n this.map\n ];\n },\n () => {\n this._updateMap();\n }\n );\n\n reaction(\n () => {\n return [\n this.props.data.distributorSelectorStateManager?.result?.distributorList,\n this.props.data.distributorSelectorStateManager?.result?.selectedDistributorId,\n this.map\n ];\n },\n () => {\n this._updateMapsForDistributor();\n }\n );\n }\n\n public render(): JSX.Element | null {\n const {\n config: { heading, className },\n data\n } = this.props;\n\n const shouldDisplayMap = data.storeSelectorStateManager?.result?.isDialogOpen\n ? data.storeSelectorStateManager?.result?.listMapViewState.displayMap\n : data.distributorSelectorStateManager?.result?.isDistributorSelectorDialogOpen\n ? data.distributorSelectorStateManager?.result?.listMapViewState.displayMap\n : false;\n\n const viewProps: IMapViewProps = {\n ...this.props,\n ModuleProps: {\n tag: 'div',\n moduleProps: this.props,\n className: classname('ms-map', { show: shouldDisplayMap }, className)\n },\n Header: {\n headerProps: { className: 'ms-map__header' },\n heading: heading?.text && (\n \n )\n },\n MapProps: {\n tag: 'div',\n className: 'ms-map__body',\n ref: this.mapRef\n },\n Map: this.map\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * Method to be called on heading change.\n * @param event -Content Edit Event.\n */\n public handleHeadingChange = (event: Msdyn365.ContentEditableEvent): void => {\n this.props.config.heading!.text = event.target.value;\n };\n\n /**\n * Initialize the map.\n */\n private readonly _initMap = () => {\n const {\n context: {\n actionContext: {\n requestContext: { channel }\n }\n },\n data\n } = this.props;\n\n if (data.storeSelectorStateManager?.result?.isMapApiLoaded || data.distributorSelectorStateManager?.result?.isMapApiLoaded) {\n this.map = new Microsoft.Maps.Map(this.mapRef.current as HTMLElement, {\n credentials: channel?.BingMapsApiKey,\n pushpinAccessible: true\n });\n Microsoft.Maps.Events.addHandler(this.map, 'click', async () => {\n if (data.distributorSelectorStateManager?.result?.isDistributorSelectorDialogOpen) {\n // Hide the distributor details that appear below the screen size of 768px.\n data.distributorSelectorStateManager?.result?.updateDistributorMapVisibility(false);\n await data.distributorSelectorStateManager?.result?.setSelectedDistributorId(undefined);\n } else {\n await data.storeSelectorStateManager?.result?.setSelectedStoreLocationId(undefined);\n }\n });\n }\n };\n\n private readonly _updateMapsForDistributor = () => {\n const pushpinOptions = this.props.config.pushpinOptions;\n const distributorSelectorStateManager = this.props.data.distributorSelectorStateManager?.result;\n const distributorInfoList = distributorSelectorStateManager?.distributorList;\n const selectedDistributorId = distributorSelectorStateManager?.selectedDistributorId;\n\n if (this.map && ArrayExtensions.hasElements(distributorInfoList)) {\n let mapLocation: OrgUnitLocation | undefined;\n this.map.entities.clear();\n const pushpins: Microsoft.Maps.IPrimitive[] = [];\n\n const distributorList = distributorInfoList.filter(distributor => distributor.OrgUnit !== undefined);\n\n for (const [index, distributorInfo] of distributorList.entries()) {\n const orgUnit = distributorInfo.OrgUnit;\n\n if (orgUnit?.Latitude && orgUnit.Longitude) {\n const isLocationSelected = selectedDistributorId === orgUnit?.RecordId;\n const options = this._getPushpinOptions(isLocationSelected, index, pushpinOptions);\n const pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(orgUnit?.Latitude, orgUnit.Longitude), options);\n\n Microsoft.Maps.Events.addHandler(pushpin, 'click', () => {\n this.handleDistributorPushpinClick(orgUnit.RecordId);\n });\n isLocationSelected ? pushpins.unshift(pushpin) : pushpins.push(pushpin);\n\n if (isLocationSelected) {\n mapLocation = orgUnit;\n }\n }\n }\n if (mapLocation) {\n const currentLocation = new Microsoft.Maps.Location(mapLocation.Latitude, mapLocation.Longitude);\n this.map.setView({ center: currentLocation });\n } else {\n this.map.setView({\n bounds: Microsoft.Maps.LocationRect?.fromShapes(pushpins)\n });\n }\n\n this.map.setOptions({ pushpinAccessible: true });\n this.map.entities.push(pushpins);\n }\n };\n\n /**\n * Update the map.\n */\n private readonly _updateMap = () => {\n const pushpinOptions = this.props.config.pushpinOptions;\n const storeSelectorStateManager = this.props.data.storeSelectorStateManager?.result;\n const orgUnitStoreInformation = storeSelectorStateManager?.context?.orgUnitStoreInformation;\n const selectedStoreLocationId = storeSelectorStateManager?.selectedStoreLocationId;\n\n if (this.map && orgUnitStoreInformation) {\n let mapLocation: OrgUnitLocation | undefined;\n this.map.entities.clear();\n const pushpins: Microsoft.Maps.IPrimitive[] = [];\n\n const storeLocationList = orgUnitStoreInformation.filter(store => store.OrgUnitAvailability !== undefined);\n\n for (const [index, unitStoreInfo] of storeLocationList.entries()) {\n const storeLocation = unitStoreInfo.OrgUnitAvailability?.OrgUnitLocation;\n\n if (storeLocation?.Latitude && storeLocation.Longitude) {\n const isSelectedLocation = selectedStoreLocationId === storeLocation.OrgUnitNumber;\n const options = this._getPushpinOptions(isSelectedLocation, index, pushpinOptions);\n const pushpin = new Microsoft.Maps.Pushpin(\n new Microsoft.Maps.Location(storeLocation.Latitude, storeLocation.Longitude),\n options\n );\n\n Microsoft.Maps.Events.addHandler(pushpin, 'click', () => {\n this.handleClickEvent(storeLocation.OrgUnitNumber);\n });\n isSelectedLocation ? pushpins.unshift(pushpin) : pushpins.push(pushpin);\n\n if (isSelectedLocation) {\n mapLocation = storeLocation;\n }\n }\n }\n\n if (mapLocation) {\n const currentLocation = new Microsoft.Maps.Location(mapLocation.Latitude, mapLocation.Longitude);\n this.map.setView({ center: currentLocation });\n } else {\n // Create a LocationRect from array of pushpins and set the map view.\n this.map.setView({\n bounds: Microsoft.Maps.LocationRect?.fromShapes(pushpins)\n });\n }\n\n this.map.setOptions({ pushpinAccessible: true });\n this.map.entities.push(pushpins);\n }\n };\n\n /**\n * Handle click event.\n * @param orgUnitNumber - Organization unit number.\n */\n private readonly handleClickEvent = (orgUnitNumber: string | undefined): void => {\n const storeSelectorStateManager = this.props.data.storeSelectorStateManager.result;\n storeSelectorStateManager?.setSelectedStoreLocationId(undefined);\n if (orgUnitNumber) {\n setTimeout(() => {\n storeSelectorStateManager?.setSelectedStoreLocationId(orgUnitNumber);\n }, this.timeout);\n }\n };\n\n /**\n * Handle the click event of the pushpin for distributors on the maps.\n * @param recordId - RecordId.\n */\n private readonly handleDistributorPushpinClick = (recordId: number | undefined): void => {\n const distributorSelectorStateManager = this.props.data.distributorSelectorStateManager?.result;\n // Show the distributor details that appear below the screen size of 768px.\n distributorSelectorStateManager?.updateDistributorMapVisibility(true);\n distributorSelectorStateManager?.setSelectedDistributorId(undefined);\n if (recordId) {\n setTimeout(() => {\n distributorSelectorStateManager?.setSelectedDistributorId(recordId);\n }, this.timeout);\n }\n };\n\n /**\n * Get the pushpin option.\n * @param isSelectedLocation - Is selected location.\n * @param index - Index.\n * @param pushpinOptions - PushpinOptions.\n * @returns - The pushpin options.\n */\n private readonly _getPushpinOptions = (isSelectedLocation: boolean, index: number, pushpinOptions?: IPushpinOptionsData) => {\n const text = pushpinOptions?.showIndex ? (index + 1).toString() : undefined;\n\n const size = pushpinOptions?.size || 1;\n const color = isSelectedLocation ? pushpinOptions?.selectionColor || pushpinOptions?.color : pushpinOptions?.color;\n const icon = this._getSvgIcon(size, color, text);\n\n return {\n // Fallback if icon doesn't render properly\n color: isSelectedLocation ? pushpinOptions?.selectionColor : pushpinOptions?.color,\n icon\n };\n };\n\n private readonly _getSvgIcon = (size: number, color?: string, text?: string) => {\n const baseValue: number = 32;\n return ``;\n };\n}\n\nexport default Map;\n","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\nimport { Button, getPayloadObject, getTelemetryAttributes, ITelemetryContent, TelemetryConstant } from '@msdyn365-commerce-modules/utilities';\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\n\r\nexport interface INavIconProps {\r\n mobileHamburgerAriaLabel: string;\r\n isExpanded: boolean;\r\n targetId: string;\r\n telemetryContent?: ITelemetryContent;\r\n toggleNavBar(): void;\r\n}\r\n\r\n/**\r\n *\r\n * NavIcon component\r\n * @extends {React.PureComponent}\r\n */\r\n\r\n@observer\r\nexport class NavIcon extends React.Component {\r\n\r\n private attributes?: Msdyn365.IDictionary;\r\n\r\n constructor(props: INavIconProps) {\r\n super(props);\r\n const payLoad = getPayloadObject('click', props.telemetryContent!, TelemetryConstant.NavIcon);\r\n this.attributes = getTelemetryAttributes(props.telemetryContent!, payLoad);\r\n }\r\n\r\n public render():JSX.Element {\r\n return (\r\n \r\n );\r\n }\r\n}","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\n// import { getPayloadObject, getTelemetryAttributes, ITelemetryContent, TelemetryConstant } from '@msdyn365-commerce-modules/utilities';\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport * as React from 'react';\r\n\r\nexport interface ILogoProps {\r\n image: Msdyn365.IImageData;\r\n gridSettings?: Msdyn365.IGridSettings;\r\n link?: any;\r\n className?: string;\r\n requestContext: Msdyn365.IRequestContext;\r\n}\r\n\r\n\r\n/**\r\n *\r\n * Logo component\r\n * @extends {React.PureComponent}\r\n */\r\nexport class Logo extends React.PureComponent {\r\n\r\n // private attributes?: Msdyn365.IDictionary;\r\n\r\n constructor(props: ILogoProps) {\r\n super(props);\r\n // const payLoad = getPayloadObject('click', props.telemetryContent!, TelemetryConstant.Logo);\r\n // this.attributes = getTelemetryAttributes(props.telemetryContent!, payLoad);\r\n }\r\n public render():JSX.Element {\r\n return(\r\n \r\n {this._renderLogo(this.props)}\r\n
\r\n );\r\n }\r\n\r\n private _renderLogo(config: ILogoProps):JSX.Element {\r\n if(config.link && config.link.linkUrl) {\r\n return(\r\n \r\n {this._renderImage(config)}\r\n \r\n );\r\n }\r\n return(\r\n this._renderImage(config)\r\n );\r\n }\r\n\r\n private _renderImage(config: ILogoProps): JSX.Element {\r\n const defaultImageSettings: Msdyn365.IImageSettings = {\r\n viewports: {\r\n xs: { q: `w=132&h=28&m=6`, w: 0, h: 0 },\r\n lg: { q: `w=160&h=48&m=6`, w: 0, h: 0 }\r\n },\r\n lazyload: true\r\n };\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Logo;","/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport {\r\n IModuleProps, \r\n INodeProps,\r\n Modal,\r\n ModalBody, \r\n ModalHeader\r\n} from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\n\r\nimport { ICittaCommercialHeaderData } from './citta-commercial-header.data';\r\nimport { ICittaCommercialHeaderProps } from './citta-commercial-header.props.autogenerated';\r\n\r\nimport { NavIcon, Logo } from './components';\r\n\r\nexport interface IHeaderState {\r\n mobileMenuCollapsed: boolean;\r\n signinPopoverOpen: boolean;\r\n}\r\n\r\nexport interface IHeaderViewProps extends ICittaCommercialHeaderProps {\r\n HeaderTag: IModuleProps;\r\n loginLink?: React.ReactNode;\r\n menuBar?: React.ReactNode[];\r\n navIcon: React.ReactNode;\r\n MobileMenuContainer: INodeProps;\r\n MobileMenuHeader: React.ReactNode;\r\n MobileMenuBodyContainer: INodeProps;\r\n logo: React.ReactNode;\r\n}\r\n\r\n/**\r\n *\r\n * Header component.\r\n * @extends {React.PureComponent>}\r\n */\r\n@observer\r\nclass CommercialHeader extends React.PureComponent, IHeaderState> {\r\n constructor(props: ICittaCommercialHeaderProps) {\r\n super(props);\r\n this.state = {\r\n mobileMenuCollapsed: true,\r\n signinPopoverOpen: false\r\n };\r\n\r\n this._toggleNavbar = this._toggleNavbar.bind(this);\r\n }\r\n \r\n public componentDidMount(): void {\r\n this._stickyHeaderSetup();\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access -- app config is generic\r\n const menuBarSlot = this._getSlot('menuBar');\r\n const navbarKey = 'header-nav-mobile';\r\n const headerClassName = classnames('commercial-header', this.props.config.className);\r\n \r\n const {logoLink, logoImage } = this.props.config;\r\n\r\n const viewProps: IHeaderViewProps = {\r\n ...(this.props as ICittaCommercialHeaderProps),\r\n ...(this.state),\r\n logo: ,\r\n\r\n HeaderTag: {\r\n moduleProps: this.props,\r\n className: classnames(headerClassName),\r\n tag: 'header'\r\n },\r\n menuBar: menuBarSlot && menuBarSlot.length && menuBarSlot || [],\r\n navIcon: ,\r\n // loginLink: this._getLoginLink(loginLink, loginLinkText),\r\n MobileMenuContainer: {\r\n tag: Modal,\r\n id: navbarKey,\r\n className: 'ms-header__mobile-hamburger',\r\n isOpen: !this.state.mobileMenuCollapsed,\r\n wrapClassName: `ms-header__citta-modal citta-header-mobile ${!this.state.mobileMenuCollapsed ? 'modal-open' : ''}`,\r\n toggle: this._toggleNavbar\r\n },\r\n MobileMenuHeader: (\r\n \r\n ),\r\n MobileMenuBodyContainer: {\r\n tag: ModalBody,\r\n className: 'ms-header__mobile-hamburger-menu-body',\r\n }\r\n };\r\n\r\n return this.props.renderView(viewProps) as React.ReactElement;\r\n }\r\n\r\n private _toggleNavbar(): void {\r\n console.log('set state', !this.state.mobileMenuCollapsed)\r\n this.setState({\r\n mobileMenuCollapsed: !this.state.mobileMenuCollapsed\r\n });\r\n this.state.mobileMenuCollapsed && this._setHeader(this.state.mobileMenuCollapsed);\r\n }\r\n\r\n private _getSlot(slotName: string): React.ReactNode[] | null {\r\n const { slots } = this.props;\r\n return (slots && slots[slotName] && slots[slotName].length && slots[slotName]) || null;\r\n }\r\n\r\n private _setHeader(lockHeader?: boolean): void {\r\n const headerElem = document.querySelector('.commercial-header');\r\n if (headerElem) {\r\n if (lockHeader || document.documentElement.scrollTop > 0) {\r\n headerElem.classList.add('lock-opaque');\r\n } else if (!window.document.body.classList.contains('search-open')) { \r\n headerElem.classList.remove('lock-opaque');\r\n }\r\n }\r\n }\r\n\r\n private _updateHeader(isInMobileMenu?: boolean): void {\r\n this._setHeader();\r\n }\r\n \r\n private _stickyHeaderSetup(): void {\r\n window.onscroll = () => {\r\n this._updateHeader();\r\n };\r\n this._updateHeader();\r\n }\r\n}\r\n\r\nexport default CommercialHeader;\r\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IHeader, IMapViewProps } from './map';\n\n/**\n * Render the heading.\n * @param param0 -- Heading props.\n * @param param0.headerProps -- Heading Props.\n * @param param0.heading -- Heading Node.\n * @returns -- Returns the node.\n */\nconst MapHeader: React.FC = ({ headerProps, heading }) => {heading};\n\n/**\n * Renders the map view props.\n * @param param0 -- Map view props.\n * @param param0.ModuleProps -- Module props.\n * @param param0.Header -- Header props.\n * @param param0.MapProps -- Map props.\n * @returns -- Returns the map module.\n */\nconst MapView: React.FC = ({ ModuleProps, Header, MapProps }) => (\n \n {Header && }\n \n \n);\n\nexport default MapView;\n"],"sourceRoot":""}