\r\n
\r\n {loyaltyCardLabel}
\r\n {cardNumber}\r\n {(apple_wallet_check || google_wallet_check) && ()}\r\n {/* @ts-ignore */}\r\n {displayJoinDate && !joinDate?.props.text.endsWith('1900') ? joinDate : null}\r\n\r\n
\r\n {availablePointsLabel}
\r\n {points_numbers[0] != -1.1 ?{points_numbers[0]}
: null}\r\n {pointsExpirationReminder ?{pointsExpirationReminder}
: null}\r\n {viewLoyaltyPageText ?\r\n \r\n {viewLoyaltyPageText}\r\n : null}\r\n\r\n
\r\n {loyaltyTierLabel}
\r\n{tierName}
\r\n {(loyaltyTiersLink && loyaltyTiersLink.linkUrl && loyaltyTiersLink.linkUrl.destinationUrl && loyaltyTiersLink.linkText) ?\r\n \r\n {loyaltyTiersLink.linkText} \r\n : null}\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {loyaltyCardLabel_CL}
{cardNumber}
\r\n
\r\n {loyaltyTierLabel}
{tierName}
\r\n\r\n \r\n \r\n {availablePointsLabel_CL_before} {points_numbers[0] != -1.1 ?
\r\n
\r\n \r\n \r\n {availablePointsLabel_CL_before} {points_numbers[0] != -1.1 ? {points_numbers[0]}
: null} {availablePointsLabel_CL_after}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {accountProfileWrapper && (\r\n \r\n {customerAttributesSection} }\r\n \r\n )}\r\n
\r\n \r\n {customerAttributesWrapper && {customerAttributesSection} }\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {_renderReactFragment(props.search)}\r\n {props.preferredStore}\r\n {/* @ts-ignore */}\r\n {props?.slots?.countrySelector && props?.slots?.countrySelector}\r\n {_renderAccountBlock(props, false)}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {props.navIcon}\r\n {props.logo}\r\n
\r\n {_renderReactFragment(props.menuBar)}
\r\n \r\n {props.wishListIconDesktop}\r\n {props.cartIcon}\r\n {_renderReactFragment(props.siteOptions)}\r\n
\r\n \r\n
\r\n {_renderReactFragment(props.menuBar)}
\r\n {_renderMobileAccountBlock(props, true)}\r\n {/* @ts-ignore */}\r\n {props?.slots?.countrySelector && props?.slots?.countrySelector}\r\n \r\n \r\n {_renderReactFragment(props.search)}\r\n {/* {_renderMobileAccountBlock(props, true)} */}\r\n \r\n \r\n {/* //TODO remove */}\r\n {_renderMobileAccountBlock(props, true)}\r\n {/* {props.wishListIconMobile} */}\r\n \r\n
\r\n {_renderReactFragment(props.menuBar)}
\r\n \r\n {accountLinks ? accountLinks.map((link: React.ReactNode) => link) : false}\r\n {signOutLink}\r\n
\r\n \r\n );\r\n } else if (signInLink) {\r\n return (\r\n \r\n {menuItem.subMenu!.map((menuSubItem: IMenuItemData) => {\r\n return this._renderDrawerLink(menuSubItem);\r\n })}\r\n
\r\n \r\n );\r\n }\r\n\r\n private _renderLinkText(linkText: string | undefined): JSX.Element {\r\n return \r\n {menuItem.subMenu!.map((menuSubItem: IMenuItemData, currentPos: number) => {\r\n if (ArrayExtensions.hasElements(menuSubItem.subMenu)) {\r\n return this._layout2022renderDrawer(\r\n menuSubItem,\r\n bottomAllLink.linkText === \"\" ? menuItem.subMenu?.length : menuItem.subMenu!.length + 1,\r\n currentPos + this._positionInSetOffset\r\n );\r\n }\r\n return this._layout2022renderDrawerLink(\r\n menuSubItem,\r\n bottomAllLink.linkText === \"\" ? menuItem.subMenu?.length : menuItem.subMenu!.length + 1,\r\n currentPos + this._positionInSetOffset\r\n );\r\n })}\r\n {bottomAllLink.linkText === \"\" ? <> :\r\n this._layout2022renderDrawerLink(\r\n bottomAllLink,\r\n menuItem.subMenu!.length + 1,\r\n menuItem.subMenu!.length + this._positionInSetOffset\r\n )\r\n }\r\n
\r\n \r\n );\r\n }\r\n\r\n /**\r\n * Method to render link.\r\n * @param linkText -Text on Menu link.\r\n * @param setSize -Setsize data.\r\n * @param posinset -Current position.\r\n * @returns Jsx element.\r\n */\r\n private _layout2022renderLinkText(\r\n linkText: string | undefined,\r\n setSize: number | undefined,\r\n posinset: number | undefined\r\n ): JSX.Element {\r\n return (\r\n \r\n {linkText}\r\n \r\n );\r\n }\r\n\r\n /**\r\n * Method to render drawer link.\r\n * @param item -Single Menuitem.\r\n * @param setSize -Setsize data.\r\n * @param posinset -Current position.\r\n * @returns Jsx element.\r\n */\r\n private _layout2022renderDrawerLink(item: IMenuItemData, setSize: number | undefined, posinset: number): JSX.Element | null {\r\n if (item && item.linkText && item.linkURL && item.linkURL.length > 0) {\r\n return this._layout2022renderLinkMenuItem(item, undefined, true, false, setSize, posinset);\r\n } else if (item && item.linkText && !item.linkURL) {\r\n return this._layout2022renderSpanMenuItem(item);\r\n }\r\n return null;\r\n }\r\n\r\n /**\r\n * Method to generate menu.\r\n * @returns Jsx element.\r\n */\r\n private _layout2022renderDisplay(): JSX.Element[] {\r\n const { ListItem, menuItemData, isMobileView } = this.props;\r\n const { activeMenu } = this.state;\r\n const menuItemList: JSX.Element[] = [];\r\n\r\n if (isMobileView && activeMenu !== undefined && menuItemData.length > 0) {\r\n let menuItem: IMenuItemData = {};\r\n for (const menuItemDatum of menuItemData) {\r\n if (menuItemDatum && menuItemDatum.id === activeMenu) {\r\n menuItem = menuItemDatum;\r\n this.setState({ parentMenu: undefined });\r\n break;\r\n }\r\n menuItem = this._layout2022getFromSubMenu(menuItemDatum) as IMenuItemData;\r\n if (menuItem && menuItem.id === activeMenu) {\r\n break;\r\n }\r\n }\r\n\r\n menuItem &&\r\n menuItemList.push(\r\n \r\n {categoryImageDisplay &&\r\n ArrayExtensions.hasElements(categoryImages) &&\r\n categoryImages.map(item => (\r\n \r\n {getCategoryImage(this.props, item.src ?? '', item.altText!.toString())}\r\n {promotionalContentDisplay &&\r\n this._layout2022renderPromotionalLink(item.altText, item.additionalProperties?.linkUrl)}\r\n \r\n ))}\r\n
\r\n {bottomLinkAvail ?\r\n (<>\r\n \r\n
\r\n {bottomLink}\r\n
\r\n )\r\n : <> \r\n\r\n }\r\n\r\n \r\n );\r\n }\r\n\r\n /**\r\n * Method to handle dropdwon change.\r\n * @param data -Menuitem data.\r\n * @param parentId -Menu parent.\r\n * @returns Jsx element.\r\n */\r\n private readonly _layout2022handleDropdownToggle = (data: IMenuItemData, parentId?: number) => () => {\r\n if (!this.props.isMobileView) {\r\n this.setState({\r\n activeMenu: this.state.activeMenu && this.state.activeMenu === data.id! ? undefined : data.id!,\r\n parentMenu: parentId\r\n });\r\n if (this.props.showCategoryImage) {\r\n this._layout2022updateCategoryImage(data.imageSource!, data)();\r\n }\r\n } else {\r\n this.setState({\r\n activeMenu: data.id,\r\n parentMenu: parentId\r\n });\r\n }\r\n\r\n this._layout2022resetFocus();\r\n };\r\n\r\n /**\r\n * Method to call when focus lost from menu.\r\n */\r\n private readonly _layout2022resetFocus = () => {\r\n if (this.props.isMobileView) {\r\n setTimeout(() => {\r\n this.menuNode && this.menuNode.current && this.menuNode.current.focus();\r\n }, 0);\r\n }\r\n };\r\n\r\n /**\r\n * Method to handle click outside of menu.\r\n * @param event -HTML event.\r\n */\r\n private readonly _layout2022handleClickOutside = (event: MouseEvent) => {\r\n if (this.menuNode.current && !this.menuNode.current.contains(event.target as Node)) {\r\n this.setState({\r\n activeMenu: undefined,\r\n categoryImage: null\r\n });\r\n }\r\n };\r\n\r\n /**\r\n * Method to handle close submenu event.\r\n */\r\n private _layout2022closeSubmenu(): void {\r\n if (!this.props.isMobileView) {\r\n this.setState({ activeMenu: undefined });\r\n }\r\n }\r\n\r\n /**\r\n * Method to handle escape key event.\r\n * @param event -HTML event.\r\n */\r\n private readonly _layout2022escFunction = (event: React.KeyboardEvent) => {\r\n if (event.keyCode === this.escapeKey) {\r\n if (!this.props.isMobileView) {\r\n const navDrawerList = Array.from(this.menuNode.current!.childNodes);\r\n for (const item of navDrawerList) {\r\n const navDrawerButton = item.firstChild as HTMLButtonElement;\r\n if (navDrawerButton.getAttribute('aria-expanded') === 'true') {\r\n navDrawerButton.focus();\r\n }\r\n }\r\n }\r\n this._layout2022closeSubmenu();\r\n }\r\n };\r\n\r\n /**\r\n * Method to handle escape key event.\r\n * @param drawerState -HTML event.\r\n */\r\n private readonly _layout2022onDrawerChange = (drawerState: IDrawerState) => {\r\n const { drawerKeyValue } = this.state;\r\n const drawerText: string = drawerState.buttonText !== undefined ? drawerState.buttonText : '';\r\n const newPair = { [drawerText]: drawerState.isOpen };\r\n this.setState({ drawerKeyValue: { ...drawerKeyValue, ...newPair } });\r\n };\r\n\r\n /**\r\n * Handle Category image update.\r\n * @param categoryImageSource - Image source.\r\n * @param option - Menu Item data.\r\n * @returns Returns empty.\r\n */\r\n private readonly _layout2022updateCategoryImage = (categoryImageSource: string, option: IMenuItemData) => () => {\r\n const linkText = option.linkText ? option.linkText : '';\r\n const promotionalImage: IImageData[] = [{ src: categoryImageSource, altText: linkText }];\r\n\r\n // Read category and promotional image in one array\r\n if (ArrayExtensions.hasElements(option.promotionalContent)) {\r\n for (const item of option.promotionalContent) {\r\n const imageSource = item.image.src;\r\n promotionalImage.push({\r\n src: imageSource,\r\n altText: item.text,\r\n additionalProperties: { linkUrl: item.linkUrl.destinationUrl }\r\n });\r\n }\r\n }\r\n this.setState({\r\n categoryImage: ArrayExtensions.hasElements(promotionalImage) ? promotionalImage : [{ src: 'empty' }]\r\n });\r\n };\r\n\r\n ////////////////////////////////////////\r\n ////////// CLASS///////////////////////\r\n //////////////////////////////////\r\n}\r\nexport default NavigationMenuView;\r\n","import { IReviewModalViewProps } from '@msdyn365-commerce-modules/ratings-reviews';\r\nimport {\r\n IReportReviewModalViewProps,\r\n IReviewCardViewProps,\r\n IReviewsListState,\r\n IReviewsListViewProps\r\n} from '@msdyn365-commerce-modules/ratings-reviews/src/modules/reviews-list';\r\nimport { IModuleProps, Module, Node } from '@msdyn365-commerce-modules/utilities';\r\n// import { getTelemetryObject } from '@msdyn365-commerce-modules/utilities';\r\n// import { constructViewportInformationForImage } from '@msdyn365-commerce/core-internal';\r\nimport * as React from 'react';\r\n\r\nconst ReviewsListview: React.FC\r\n
\r\n \r\n {reviewCards.length === 0 && state.isFilterApplied && noReviewsWithFilterMessage}\r\n {pageControls}\r\n {createReviewModal(reviewModal, moduleProps)}\r\n {createReportModal(reportReviewModal, state)}\r\n e.stopPropagation()}>\r\n
\r\n \r\n {title}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {userReview && buildReviewCard(userReview)}\r\n {reviewCards.map(review => {\r\n return buildReviewCard(review);\r\n })}\r\n
\r\n {pmCartMessage.message}
\r\n \r\n );\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {/* tslint:disable-next-line:jsx-no-lambda react-this-binding-issue */}\r\n \r\n \r\n );\r\n };\r\n\r\n function mobileTriggerPmCart(): void {\r\n // tslint:disable-next-line:no-shadowed-variable\r\n setOpenPmCart(openPmCart => !openPmCart);\r\n openPmCart === true ? document.body.classList.remove('no-scroll-pick-mix') : document.body.classList.add('no-scroll-pick-mix');\r\n }\r\n return (\r\n \r\n
\r\n );\r\n }\r\n // if (isMobile) {\r\n // return (\r\n // \r\n \r\n {products} \r\n
\r\n \r\n
\r\n \r\n \r\n <>\r\n \r\n
\r\n {props.resources.pickAndMixCartTitle}
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n {totalItems}\r\n
\r\n \r\n {props?.context.cultureFormatter.formatCurrency(totalPrice)}\r\n
\r\n \r\n {Object.keys(pmProducts).map((keyName, i) => {\r\n return (\r\n
\r\n \r\n \r\n removeProductFromPmCart(Number(keyName))}\r\n />\r\n
\r\n )\r\n })}\r\n \r\n
\r\n \r\n
\r\n {/* tslint:disable-next-line:jsx-no-lambda */}\r\n {pmProducts[keyName]?.Item}
\r\n Quantity: {pmProducts[keyName]?.Qty}
\r\n \r\n {props?.context.cultureFormatter.formatCurrency(pmProducts[keyName]?.Price)}\r\n
\r\n \r\n {pmProducts[keyName]?.Id}\r\n {pmProducts[keyName]?.Description}\r\n
\r\n \r\n {modalToggle}\r\n {refinerStatusCount ? (
\r\n {refinerStatusCount}
) : null}\r\n {TitleViewProps.title.titleCount}
\r\n \r\n {refineMenu && renderRefiner(refineMenu)}\r\n
\r\n {sortByOptions && !isRecoSearchPage && renderSort(sortByOptions)}
\r\n {choiceSummary}
\r\n \r\n {renderPrefix ? title.titlePrefix : null}\r\n {titleOvverride ? titleOvverride : title.titleText}\r\n
\r\n{description}
\n);\n\nexport default IAccountAddressTileDescription;\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 { getPayloadObject, getTelemetryAttributes, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ILinksData } from '../account-address-tile.props.autogenerated';\n\nexport interface IAccountAddressTileLinks {\n links: ILinksData[];\n requestContext: Msdyn365.IRequestContext;\n\n /**\n * The telemetry content\n */\n telemetryContent?: ITelemetryContent;\n onTextChange?(index: number): (event: Msdyn365.ContentEditableEvent) => void;\n}\n\nconst AccountAddressTileLinks: React.FC\n {editableLinks && editableLinks.length > 0 ? (\n
\n );\n};\n\nconst _mapEditableLinks = (linkdata: ILinksData[], telemetryContent?: ITelemetryContent): Msdyn365.ILinksData[] | null => {\n if (!linkdata || linkdata.length === 0) {\n return null;\n }\n const editableLinks: Msdyn365.ILinksData[] = [];\n const payLoad = getPayloadObject('click', telemetryContent!, '');\n linkdata.forEach((link, index) => {\n payLoad.contentAction.etext = link.linkText;\n const attributes = getTelemetryAttributes(telemetryContent!, payLoad);\n const editableLink: Msdyn365.ILinksData = {\n ariaLabel: link.ariaLabel,\n className: 'ms-account-address-tile__link',\n linkText: link.linkText,\n linkUrl: link.linkUrl.destinationUrl,\n openInNewTab: link.openInNewTab,\n role: 'link',\n additionalProperties: attributes\n };\n editableLinks.push(editableLink);\n });\n\n return editableLinks;\n};\n\nexport default AccountAddressTileLinks;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\n\nexport interface IAccountInvoiceTileDescription {\n description: string;\n}\n\nexport const AccountInvoiceTileDescription: React.FC{description}
\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 { getPayloadObject, getTelemetryAttributes, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ILinksData } from '../account-invoice-tile.props.autogenerated';\n\nexport interface IAccountInvoiceTileLinks {\n links: ILinksData[];\n requestContext: Msdyn365.IRequestContext;\n\n /**\n * The telemetry content\n */\n telemetryContent?: ITelemetryContent;\n onTextChange?(index: number): (event: Msdyn365.ContentEditableEvent) => void;\n}\n\nconst AccountInvoiceTileLinks: React.FC\n {editableLinks && editableLinks.length > 0 ? (\n
\n );\n};\n\nconst _mapEditableLinks = (linkdata: ILinksData[], telemetryContent?: ITelemetryContent): Msdyn365.ILinksData[] | null => {\n if (!linkdata || linkdata.length === 0) {\n return null;\n }\n const editableLinks: Msdyn365.ILinksData[] = [];\n const payLoad = getPayloadObject('click', telemetryContent!, '');\n linkdata.forEach((link, index) => {\n payLoad.contentAction.etext = link.linkText;\n const attributes = getTelemetryAttributes(telemetryContent!, payLoad);\n const editableLink: Msdyn365.ILinksData = {\n ariaLabel: link.ariaLabel,\n className: 'ms-account-invoice-tile__link',\n linkText: link.linkText,\n linkUrl: link.linkUrl.destinationUrl,\n openInNewTab: link.openInNewTab,\n role: 'link',\n additionalProperties: attributes\n };\n editableLinks.push(editableLink);\n });\n\n return editableLinks;\n};\n\nexport default AccountInvoiceTileLinks;\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 { format, getTelemetryObject, IModuleProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { IAccountInvoiceTileData } from './account-invoice-tile.data';\nimport { IAccountInvoiceTileProps } from './account-invoice-tile.props.autogenerated';\nimport { AccountInvoiceTileDescription } from './components';\nimport LinksComponent from './components/account-invoice-tile-links';\n\nexport interface IAccountInvoiceTileViewProps extends IAccountInvoiceTileProps{this.props.resources.currentCatalogText}
;\n }\n let linkToCatalog = '';\n if (Msdyn365.isBrowser) {\n const catalogUrl = getUrlSync('home', this.props.context.actionContext) ?? '';\n const fullUrl = new URL(catalogUrl, window.location.href);\n fullUrl.searchParams.set('catalogid', `${catalogId}`);\n linkToCatalog = fullUrl.href;\n }\n return (\n \n {catalogs?.map(item => {\n const reactKey = `${JSON.stringify(item)}-${String(isBrowser)}`;\n const image: MediaLocation | undefined = ArrayExtensions.firstOrDefault(item.Images);\n return (\n \n
\n );\n })}\n \n );\n }\n}\n\nexport default CatalogPicker;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Module } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ICatalogPickerViewProps } from './catalog-picker';\n\n/**\n * ICatalogPickerViewProps.\n * @param props - ICatalogPickerViewProps.\n * @returns - Render Catalog Picker.\n */\nexport const CatalogPickerViewFunctionComponent: React.FC{item.Name}
\n\n
\n \n {this._renderCatalogPickerButton(item)}\n
\n \n {props.SitePickerMenuListItemArray?.map((item, index) => {\n return
\n {item}
;\n })}\n \n {props.rating}\n {props.date}\n
\n {props.name}\n {resources.wasReviewHelpfulText}
}\n {props.like}\n {props.dislike}\n {props.edit}\n{renderProductImage(props)}
\n \n
\n {product?.Name}
\n {product?.Name}
\n {product?.ItemId}
\n {resources.selectRatingLabel}
\n {reviewModal.rating}\n