\n
\n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.primaryImageUrl,\n product.name,\n context\n )}\n
\n
\n
{product.name}
\n {renderPrice(\n context,\n typeName,\n id,\n product.basePrice,\n product.price,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText,\n isPriceMinMaxEnabled,\n priceResources\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.defaultUnitOfMeasure)}\n {renderDescription(product.description)}\n \n
\n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.primaryImageUrl,\n product.name,\n context\n )}\n
\n \n
{product.name}
\n {renderPrice(\n context,\n typeName,\n id,\n product.basePrice,\n product.price,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.defaultUnitOfMeasure)}\n \n \n )}\n {renderProductDimensions(product.attributeValues)}\n {!context.app.config.hideRating &&\n renderRating(context, typeName, id, product.averageRating, product.totalRatings, ratingAriaLabel, ratingCountAriaLabel)}\n {renderProductAvailability(inventoryLabel)}\n {quickViewButton && renderQuickView(quickViewButton, product.recordId)}\n {productComparisonButton && renderProductComparisonButton(productComparisonButton, product, getCatalogId(context.request))}\n \n );\n};\n\nfunction renderLabel(\n name?: string,\n price?: string,\n rating?: number,\n ratingAriaLabelText?: string,\n reviewCount?: number,\n ratingCountAriaLabelText?: string\n): string {\n const reviewCountArialableText = getReviewAriaLabel(reviewCount, ratingCountAriaLabelText ?? '');\n return `${name ?? ''} ${price ?? ''} ${getRatingAriaLabel(rating, ratingAriaLabelText)}${\n reviewCountArialableText ? ` ${reviewCountArialableText}` : ''\n }`;\n}\n\nfunction renderDescription(description?: string): JSX.Element | null {\n return {description}
;\n}\n\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\n if (rating && ratingAriaLabel) {\n const roundedRating = rating.toFixed(2);\n return format(ratingAriaLabel || '', roundedRating, '5');\n }\n return '';\n}\n\nfunction getReviewAriaLabel(reviewCount?: number, ratingCountAriaLabelText?: string): string {\n if (reviewCount && ratingCountAriaLabelText) {\n return format(ratingCountAriaLabelText || '', reviewCount);\n }\n return '';\n}\n\nfunction renderRating(\n coreContext: ICoreContext,\n moduleTypeName: string,\n moduleId: string,\n avgRating?: number,\n totalRatings?: number,\n ariaLabel?: string,\n ratingCountAriaLabel?: string\n): JSX.Element | null {\n if (!avgRating) {\n return null;\n }\n\n const numberRatings = totalRatings?.toString() || undefined;\n const ratingAriaLabelText = getRatingAriaLabel(avgRating, ariaLabel);\n const ratingCountAriaLabelText = getReviewAriaLabel(Number(numberRatings), ratingCountAriaLabel);\n\n return (\n \n );\n}\n\nfunction renderPrice(\n context: ICoreContext,\n typeName: string,\n id: string,\n basePrice?: number,\n adjustedPrice?: number,\n savingsText?: string,\n freePriceText?: string,\n originalPriceText?: string,\n currentPriceText?: string,\n isPriceMinMaxEnabled?: boolean,\n priceResources?: IPriceComponentResources\n): JSX.Element | null {\n const price = {\n BasePrice: basePrice,\n AdjustedPrice: adjustedPrice,\n CustomerContextualPrice: adjustedPrice\n };\n\n return (\n \n );\n}\n\nfunction renderProductPlacementImage(\n imageSettings?: IImageSettings,\n gridSettings?: IGridSettings,\n imageUrl?: string,\n fallbackImageUrl?: string,\n altText?: string,\n context?: ICoreContext>\n): JSX.Element | null {\n if (!imageUrl || !gridSettings || !imageSettings) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment -- Site level config can be of any type.\n const contextConfig = context?.app.config?.placeholderImageName;\n const emptyPlaceHolderImage = contextConfig as string;\n let fallbackImageSource = fallbackImageUrl;\n if (emptyPlaceHolderImage && fallbackImageUrl) {\n fallbackImageSource = `${fallbackImageUrl},${emptyPlaceHolderImage}`;\n }\n const img: IImageData = {\n src: imageUrl,\n altText: altText ? altText : '',\n fallBackSrc: fallbackImageSource\n };\n const imageProps = {\n gridSettings,\n imageSettings\n };\n imageProps.imageSettings.cropFocalRegion = true;\n return (\n \n );\n}\n\nexport const ProductComponentV2: React.FunctionComponent = msdyn365Commerce.createComponentOverride<\n IProductComponentV2\n>('ProductV2', { component: ProductCardV2, ...PriceComponentActions });\n\nexport default ProductComponentV2;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartIconComponent, WishListIconComponent } from '@msdyn365-commerce/components';\nimport * as MsDyn365 from '@msdyn365-commerce/core';\nimport { ICartState } from '@msdyn365-commerce/global-state';\nimport { Customer } from '@msdyn365-commerce/retail-proxy';\nimport { ErrorNotification, NotificationsManager } from '@msdyn365-commerce-modules/notifications-core';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n Button,\n format,\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n IModuleProps,\n INodeProps,\n ITelemetryContent,\n KeyCodes,\n Modal,\n ModalBody,\n ModalHeader,\n onTelemetryClick,\n Popover,\n TelemetryConstant\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { computed, reaction } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { isChannelTypeB2B } from '@msdyn365-commerce/core';\nimport { HeaderPreferredStore, Logo, NavIcon } from './components';\nimport { IHeaderData } from './header.data';\nimport { IHeaderProps, IHeaderResources, IMyAccountLinksData } from './header.props.autogenerated';\n\nexport interface IHeaderState {\n mobileMenuCollapsed: boolean;\n signinPopoverOpen: boolean;\n hasSigninerror?: boolean;\n}\n\nexport interface IHeaderViewProps extends IHeaderProps, IHeaderState {\n logo: React.ReactNode;\n wishListIconDesktop: React.ReactNode;\n wishListIconMobile: React.ReactNode;\n cartIcon: React.ReactNode;\n navIcon: React.ReactNode;\n className: string;\n menuBar: React.ReactNode[];\n search: React.ReactNode[];\n siteOptions: React.ReactNode[];\n HeaderTag: IModuleProps;\n HeaderContainer: INodeProps;\n MobileMenuContainer: INodeProps;\n MobileMenuHeader: React.ReactNode;\n MobileMenuBodyContainer: INodeProps;\n MobileMenuLinksContainer: INodeProps;\n HeaderTopBarContainer: INodeProps;\n Divider: INodeProps;\n\n AccountInfoDropdownParentContainer?: INodeProps;\n AccountInfoDropdownPopoverConentContainer?: INodeProps;\n accountInfoDropdownButton?: React.ReactNode;\n\n signOutLink?: React.ReactNode;\n signInLink?: React.ReactNode;\n switchCustomerLink?: React.ReactNode;\n isOBORequest?: boolean;\n accountLinks?: React.ReactNode[];\n preferredStore?: React.ReactNode;\n currentDistributor?: React.ReactNode;\n}\n\n/**\n *\n * Header component.\n * @extends {React.PureComponent>}\n */\n@observer\nclass Header extends React.PureComponent, IHeaderState> {\n private readonly popOverRef: React.RefObject;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private cart: ICartState | undefined;\n\n private isB2BSite: boolean = false;\n\n /**\n * The signed-in user name displayed in the header bar\n */\n @computed public get displayName(): Readonly {\n return (\n (MsDyn365.isOboRequest(this.props.context.request) ? this.workerName : this.customerName) ||\n this.props.context.request?.user?.name\n );\n }\n\n /**\n * OBO scenario. The name of worker who shops on behalf of customer.\n */\n @computed public get workerName(): Readonly {\n const worker = this.props.data.employee?.result;\n return worker?.Name;\n }\n\n @computed public get customerName(): Readonly {\n const customer = this.props.data.accountInformation?.result;\n if (MsDyn365.isOboRequest(this.props.context.request)) {\n // For OBO scenario, display full customer name because multiple customers may have the same first name.\n return customer ? customer.Name : undefined;\n } else {\n return customer ? customer.FirstName || customer.Name : undefined;\n }\n }\n\n public constructor(props: IHeaderProps) {\n super(props);\n this.popOverRef = React.createRef();\n this._toggleNavbar = this._toggleNavbar.bind(this);\n this._togglePopover = this._togglePopover.bind(this);\n this._keydown = this._keydown.bind(this);\n this.state = {\n mobileMenuCollapsed: true,\n signinPopoverOpen: false,\n hasSigninerror: false\n };\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.isB2BSite = isChannelTypeB2B(this.props.context.request);\n }\n\n public componentDidMount(): void {\n if (MsDyn365.msdyn365Commerce.isBrowser) {\n window.addEventListener('keydown', this._keydown);\n }\n reaction(\n () => {\n this.props.data.cart.result;\n },\n () => {\n this.cart = this.props.data.cart.result;\n }\n );\n\n const {\n context: {\n request: { user }\n },\n resources: {\n signUpCustomerNotFoundTitle,\n signUpMultipleCustomerFoundTitle,\n signInCustomerNotAuthorizedTitle,\n closeNotificationLabel\n }\n } = this.props;\n\n const signinNotificationError = this._getSigninNotification(\n user,\n signUpMultipleCustomerFoundTitle,\n signUpCustomerNotFoundTitle,\n signInCustomerNotAuthorizedTitle\n );\n if (signinNotificationError !== undefined && this.state.hasSigninerror === false) {\n // For signup show simple error notification.\n NotificationsManager.instance().addNotification(new ErrorNotification(signinNotificationError, closeNotificationLabel));\n }\n }\n\n public componentWillUnmount(): void {\n if (MsDyn365.msdyn365Commerce.isBrowser) {\n window.removeEventListener('keydown', this._keydown, false);\n }\n }\n\n public render(): JSX.Element | null {\n const {\n id,\n typeName,\n data: { accountInformation, wishlists },\n context: {\n request: { user }\n },\n context,\n resources: { cartLabel, cartQtyLabel }\n } = this.props;\n const { logoLink, logoImage, shouldShowWishlistCount } = this.props.config;\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access -- app config is generic\n const disableTooltip = this.props.context.app.config.disableTooltip || false;\n const headerToggleClass = this.state.mobileMenuCollapsed ? '' : 'ms-header-open';\n const headerClassName = classnames('ms-header', this.props.config.className, headerToggleClass);\n const navbarKey = 'header-nav-mobile';\n const customer = accountInformation && accountInformation.result;\n const cartIconSlot = this._getSlot('cartIcon');\n const menuBarSlot = this._getSlot('menuBar');\n const searchSlot = this._getSlot('search');\n let wishlistCount = 0;\n const siteOptionsSlot = this._getSlot('siteOptions');\n const preferredStoreSlot = this._getSlot('storeSelector');\n const currentDistributorSlot = this._getSlot('distributorSelector');\n if (wishlists !== undefined) {\n if (\n !wishlists.result ||\n !ArrayExtensions.hasElements(wishlists.result) ||\n !wishlists.result[0].CommerceListLines ||\n !ArrayExtensions.hasElements(wishlists.result[0].CommerceListLines)\n ) {\n wishlistCount = 0;\n } else {\n wishlistCount = wishlists.result[0].CommerceListLines.length;\n }\n }\n const viewProps: IHeaderViewProps = {\n ...(this.props as IHeaderProps),\n ...this.state,\n logo: (\n \n ),\n wishListIconDesktop: (\n \n ),\n wishListIconMobile: (\n \n ),\n cartIcon: ArrayExtensions.hasElements(cartIconSlot) ? (\n cartIconSlot[0]\n ) : (\n \n ),\n navIcon: (\n \n ),\n menuBar: ArrayExtensions.hasElements(menuBarSlot) ? menuBarSlot : [],\n search: ArrayExtensions.hasElements(searchSlot) ? searchSlot : [],\n siteOptions: ArrayExtensions.hasElements(siteOptionsSlot) ? siteOptionsSlot : [],\n className: headerClassName,\n HeaderTag: {\n moduleProps: this.props,\n className: classnames(headerClassName),\n 'aria-label': this.props.resources.headerAriaLabel,\n tag: 'header'\n },\n HeaderContainer: {\n className: classnames('ms-header__container')\n },\n HeaderTopBarContainer: {\n className: classnames('ms-header__topbar')\n },\n Divider: {\n className: classnames('ms-header__divider')\n },\n MobileMenuContainer: {\n tag: Modal,\n id: navbarKey,\n className: 'ms-header__mobile-hamburger',\n isOpen: !this.state.mobileMenuCollapsed,\n wrapClassName: 'ms-header__modal',\n toggle: this._toggleNavbar\n },\n MobileMenuHeader: ,\n MobileMenuBodyContainer: {\n tag: ModalBody,\n className: 'ms-header__mobile-hamburger-menu-body'\n },\n MobileMenuLinksContainer: {\n className: 'ms-header__mobile-hamburger-menu-links'\n },\n AccountInfoDropdownParentContainer: {\n className: 'ms-header__account-info'\n },\n AccountInfoDropdownPopoverConentContainer: this.displayName\n ? {\n tag: Popover,\n id: 'myprofilePopover',\n className: 'ms-header__account-info-content',\n placement: 'bottom',\n isOpen: this.state.signinPopoverOpen,\n target: this.popOverRef,\n toggle: this._togglePopover\n }\n : undefined,\n signInLink: this._getSigninButton(user, this.props.resources),\n signOutLink: this._getSignOutButton(user, this.props.resources),\n isOBORequest: MsDyn365.isOboRequest(this.props.context.request),\n switchCustomerLink: this._getSwitchCustomerButton(user, this.props.resources),\n accountInfoDropdownButton: this._getAccountInfoDropdownButton(user, this.props.resources),\n accountLinks: this._getAccountLinks(customer),\n preferredStore: ArrayExtensions.hasElements(preferredStoreSlot) && ,\n currentDistributor: this.isB2BSite && ArrayExtensions.hasElements(currentDistributorSlot) ? currentDistributorSlot : undefined\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * Handle link text change.\n * @param linkIndex - Link Index.\n * @returns : Void.\n */\n public handleLinkTextChange = (linkIndex: number) => (event: MsDyn365.ContentEditableEvent): void => {\n if (this.props.config.myAccountLinks?.[linkIndex]) {\n this.props.config.myAccountLinks[linkIndex].linkText = event.target.value;\n }\n };\n\n /**\n * Get the slot.\n * @param slotName - Name of the slot.\n * @returns The slot.\n */\n private _getSlot(slotName: string): React.ReactNode[] | null {\n const { slots } = this.props;\n return (slots && slots[slotName] && slots[slotName].length && slots[slotName]) || null;\n }\n\n /**\n * Renders the sign in button.\n * @param user - Request context user.\n * @param resources - Resources.\n * @returns React Node.\n */\n private _getSigninButton(user: MsDyn365.IRequestContextUser | undefined, resources: IHeaderResources): React.ReactNode | undefined {\n const payLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.SignIn);\n const attributes = getTelemetryAttributes(this.telemetryContent, payLoad);\n return (\n !this.displayName && (\n \n \n {resources.signInLinkText}\n \n \n )\n );\n }\n\n /**\n * Renders the sign out button.\n * @param user - Request context user.\n * @param resources - Resources.\n * @returns React Node.\n */\n private _getSignOutButton(user: MsDyn365.IRequestContextUser | undefined, resources: IHeaderResources): React.ReactNode | undefined {\n const payLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.SignOut);\n const attributes = getTelemetryAttributes(this.telemetryContent, payLoad);\n return (\n this.displayName && (\n \n \n {resources.signOutLinkText}\n \n \n )\n );\n }\n\n /**\n * Renders the sign out button.\n * @param user - Request context user.\n * @param resources - Resources.\n * @returns React Node.\n */\n private _getSwitchCustomerButton(\n user: MsDyn365.IRequestContextUser | undefined,\n resources: IHeaderResources\n ): React.ReactNode | undefined {\n const payLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.SwitchCustomer);\n const attributes = getTelemetryAttributes(this.telemetryContent, payLoad);\n const isOBOAccountSelected =\n MsDyn365.isOboRequest(this.props.context.request) && this.props.context.request.cookies.getAccountSelectionCookie();\n return (\n this.displayName &&\n isOBOAccountSelected && (\n this.props.context.request.cookies.removeAccountSelectionCookie()}\n {...attributes}\n >\n \n
{format(resources.shoppingAsText, this.customerName)}
\n
{resources.switchCustomerLinkText}
\n
\n
{this.displayName}
\n {MsDyn365.isOboRequest(this.props.context.request) && this.customerName && (\n
{format(resources.shoppingAsText, this.customerName)}
\n )}\n
\n \n {this._generateDrawerButtonInnerMarkup(collapseProps.isOpen, drawerClass)}\n \n \n
\n );\n }\n\n private _generateDrawerButtonInnerMarkup(isCollapseState: boolean, drawerClass: string): JSX.Element {\n const drawerButtonTextClass = classnames(\n 'drawer__buttontext',\n this.props.toggleButtonClassName ? this.props.toggleButtonClassName : ''\n );\n const headingDrawerClass = `${drawerClass}-heading`;\n const descriptionDrawerClass = `${drawerClass}-description`;\n return (\n <>\n {this.props.moduleHeadingText}
\n {this.props.moduleDescriptionText}\n {this._generateGlyphMarkup('drawer__glyph__end', isCollapseState)}\n \n );\n }\n\n private _generateGlyphMarkup(location: string, isCollapseState: boolean): JSX.Element {\n let glyphClass = isCollapseState ? this._drawerOpenGlyph : this._drawerCloseGlyph;\n glyphClass = `${glyphClass} ${location}`;\n return ;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Alert, Button } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IQuickOrderGridState } from './utilities';\n\n/**\n * Interface quick order grid form props.\n */\nexport interface IQuickOrderGridFormProps {\n isAddtoListDisabled: boolean | undefined;\n productTextInput: React.RefObject;\n quantityTextInput: React.RefObject;\n maxChars: number;\n minQuantity?: number;\n maxQuantity?: number;\n moduleClassName: string;\n ariaLabelQuantity: string;\n ariaLabelProduct: string;\n ariaLabelAddtoCart: string;\n quickOrderGridState: IQuickOrderGridState;\n handleInputChange(query: string): void;\n handleQuantityChange(query: string): void;\n handleAddProductListClick(): Promise;\n}\n\n/**\n * Interface quick order grid form view props.\n */\nexport interface IQuickOrderGridFormViewProps {\n product: React.ReactNode;\n quantity: React.ReactNode;\n addToListBtn: React.ReactNode;\n userMessage?: React.ReactNode;\n}\n\n/**\n * On Input Change functionality.\n * @param handleInputChange -Input change function.\n * @returns Input change value.\n */\nconst onInputChangeFunction = (handleInputChange: (query: string) => void) => (event: React.ChangeEvent) => {\n handleInputChange(event.target.value || '');\n};\n\n/**\n * On Quantity Change functionality.\n * @param handleQuantityChange -Quantity change function.\n * @returns Quantity change value.\n */\nconst onQuantityChangeFunction = (handleQuantityChange: (query: string) => void) => (event: React.ChangeEvent) => {\n handleQuantityChange(event.target.value || '');\n};\n\n/**\n * Quick order grid form component.\n * @param props -Component form props.\n * @returns Quick order gridp view props..\n */\nexport const QuickOrderGridFormComponent = (props: IQuickOrderGridFormProps): IQuickOrderGridFormViewProps => {\n const {\n moduleClassName,\n productTextInput,\n quantityTextInput,\n quickOrderGridState,\n maxChars,\n minQuantity,\n maxQuantity,\n isAddtoListDisabled,\n ariaLabelQuantity,\n ariaLabelProduct,\n ariaLabelAddtoCart,\n handleQuantityChange,\n handleInputChange,\n handleAddProductListClick\n } = props;\n\n const onInputChange = onInputChangeFunction(handleInputChange);\n\n const onQuantityInputChange = onQuantityChangeFunction(handleQuantityChange);\n\n const productNode = (\n \n
\n {ariaLabelProduct}\n
\n \n \n );\n\n const quantityNode = (\n \n
\n {ariaLabelQuantity}\n
\n \n \n );\n\n const addToListNode = (\n \n \n {ariaLabelAddtoCart}\n \n
\n );\n\n const userMessageNode = quickOrderGridState.stateMessage ? (\n \n \n {quickOrderGridState.stateMessage.messageText}\n \n ) : (\n undefined\n );\n\n return {\n product: productNode,\n addToListBtn: addToListNode,\n quantity: quantityNode,\n userMessage: userMessageNode\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { QuickOrderTemplateLine } from '@msdyn365-commerce-modules/retail-actions';\nimport { observable } from 'mobx';\n\n/**\n * Represents a product for quick order grid.\n */\nexport class QuickOrderGridProduct {\n @observable\n public isSelected: boolean;\n\n public readonly productLine: QuickOrderTemplateLine;\n\n public constructor(productLine: QuickOrderTemplateLine) {\n this.productLine = productLine;\n this.isSelected = false;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IComponent, IComponentProps, ICoreContext } from '@msdyn365-commerce/core';\nimport classnames from 'classnames';\nimport React from 'react';\n\n/**\n * Interface for quick order grid table header resources.\n */\nexport interface IQuickOrderGridTableHeaderResources {\n quickOrderGridProductNumberText: string;\n quickOrderGridProductText: string;\n quickOrderGridUnitPriceText: string;\n quickOrderGridUnitOfMeasureText: string;\n quickOrderGridQuantityText: string;\n quickOrderGridActionsText: string;\n}\n\n/**\n * Interface for quick order grid table props.\n */\nexport interface IQuickOrderGridTableHeaderProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n\n isMobile: boolean;\n resources: IQuickOrderGridTableHeaderResources;\n}\n\n/**\n * Interface for quick order grid table header component.\n */\nexport interface IQuickOrderGridTableHeaderComponent extends IComponent {}\n\n/**\n * Get the quick order grid header cells for desktop.\n * @param props -- The quick order grid table header props.\n * @returns The list of cells for quick order grid header component in desktop version.\n */\nconst QuickOrderGridDesktopHeaderCellsComponent: React.FC = (props: IQuickOrderGridTableHeaderProps) => {\n const { resources } = props;\n const columnWithNumberClassName = `${props.className}__row__column-with-number`;\n return (\n <>\n \n \n | \n {resources.quickOrderGridProductNumberText} | \n {resources.quickOrderGridProductText} | \n {resources.quickOrderGridUnitPriceText} | \n {resources.quickOrderGridUnitOfMeasureText} | \n {resources.quickOrderGridQuantityText} | \n {resources.quickOrderGridActionsText} | \n \n );\n};\n\n/**\n * Get the quick order grid header cells for mobile.\n * @param props -- The quick order grid table header props.\n * @returns The quick order grid header component in desktop version.\n */\nconst QuickOrderGridMobileHeaderCellsComponent: React.FC = (props: IQuickOrderGridTableHeaderProps) => {\n const { resources } = props;\n return (\n <>\n | \n {resources.quickOrderGridProductNumberText} | \n | \n \n );\n};\n\n/**\n * Quick order table header component.\n * @param props - Configuration of the component.\n * @returns React node with the header.\n */\nexport const QuickOrderGridTableHeaderComponent: React.FC = (props: IQuickOrderGridTableHeaderProps) => {\n const rowClassName = `${props.className}__row`;\n\n let headerCells: JSX.Element;\n if (props.isMobile) {\n headerCells = ;\n } else {\n headerCells = ;\n }\n\n return (\n \n {headerCells}
\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { PriceComponent } from '@msdyn365-commerce/components';\nimport MsDyn365, { IComponentProps, ICoreContext, IImageSettings, Image } from '@msdyn365-commerce/core';\nimport { ProductListLine, ProductPrice } from '@msdyn365-commerce/retail-proxy';\nimport { getFallbackImageUrl, getProductPageUrlSync, ObjectExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, IncrementalQuantity, isMobile, VariantType } from '@msdyn365-commerce-modules/utilities';\nimport React, { useState } from 'react';\n\nimport { QuickOrderGridProduct } from '../../quick-order-grid-product';\nimport { IQuickOrderGridRowCallbacks } from '../../utilities';\n\n/**\n * Data required to render each quick order grid row.\n */\nexport interface IQuickOrderGridTableRowData {\n product: QuickOrderGridProduct;\n}\n\n/**\n * Resources for quick order grid table rows.\n */\nexport interface IQuickOrderGridTableRowResources {\n quickOrderGridQuantityMobileText: string;\n quickOrderGridProductDimensionsSeparator: string;\n quickOrderGridViewDetailsButtonText: string;\n quickOrderGridViewDetailsButtonAriaLabel: string;\n quickOrderGridRemoveItemButtonAriaLabel: string;\n quickOrderGridInputQuantityAriaLabel: string;\n quickOrderGridDecrementButtonAriaLabel: string;\n quickOrderGridIncrementButtonAriaLabel: string;\n originalPriceText: string;\n currentPriceText: string;\n freePriceText: string;\n}\n\n/**\n * Interface for quick order grid table props.\n */\nexport interface IQuickOrderGridTableRowProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n productListLine: ProductListLine;\n price?: ProductPrice;\n moduleId: string;\n moduleTypeName: string;\n min: number;\n max: number;\n quantity: number;\n imageSettings?: IImageSettings;\n isMobile: boolean;\n resources: IQuickOrderGridTableRowResources;\n index: number;\n callbacks: IQuickOrderGridRowCallbacks;\n}\n\n/**\n * The default image settings for quick order grid table row.\n */\nconst defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=80&h=80&m=6', w: 0, h: 0 },\n lg: { q: 'w=147&h=147&m=6', w: 0, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n};\n\n/**\n * Renders product image for quick order grid row.\n * @param props - Quick order table row props.\n * @returns React element.\n */\nconst QuickOrderGridTableRowProductImageComponent: React.FC = (props: IQuickOrderGridTableRowProps) => {\n const product = props.data.product.productLine.fullProduct?.ProductDetails;\n const fallbackImageUrl = getFallbackImageUrl(\n product?.ItemId,\n props.context.actionContext.requestContext.apiSettings,\n props.context.request.app?.config?.OmniChannelMedia\n );\n\n const containerClassName = `${props.className}__product-image-container`;\n\n return (\n \n \n
\n );\n};\n\nlet setShowPreviousActions: React.Dispatch> | undefined;\n\n/**\n * Renders product price.\n * @param props - Props for price component.\n * @returns React element.\n */\nconst renderProductPrice = (props: IQuickOrderGridTableRowProps): JSX.Element | null => {\n const { context, moduleId, moduleTypeName, resources } = props;\n const price = props.price;\n\n if (price) {\n return (\n \n );\n }\n return null;\n};\n\n/**\n * Renders product price.\n * @param props - Props for price component.\n * @returns React element.\n */\nconst renderUnitOfMeasure = (props: IQuickOrderGridTableRowProps): JSX.Element | null => {\n const price = props.price;\n\n if (price) {\n return (\n \n {StringExtensions.isNullOrEmpty(props.productListLine.UnitOfMeasure) || price.UnitOfMeasure}\n
\n );\n }\n return null;\n};\n\n/**\n * On Change function.\n * @param onChangeQuantity -On change quantity function.\n * @param itemKey -String.\n * @param props -Order template line props.\n * @returns Set change quantity.\n */\nconst onChangeHandler = (\n onChangeQuantity: (\n orderTemplateLineId: string | undefined,\n quantity: number,\n props?: IQuickOrderGridTableRowProps | undefined\n ) => boolean,\n itemKey: string | undefined,\n props: IQuickOrderGridTableRowProps\n) => (newValue: number) => {\n onChangeQuantity(itemKey, newValue, props);\n return true;\n};\n\n/**\n * On Change function.\n * @param onRemoveItem -On change quantity function.\n * @param quickOrderGridProductKey -QuickOrderGridp Product.\n * @param props -Order template line props.\n * @returns Set change quantity.\n */\nconst onRemoveHandler = (\n onRemoveItem: (quickOrderGridProduct: QuickOrderGridProduct, props?: IQuickOrderGridTableRowProps | undefined) => void,\n quickOrderGridProductKey: QuickOrderGridProduct,\n props: IQuickOrderGridTableRowProps\n) => () => {\n onRemoveItem(quickOrderGridProductKey, props);\n};\n\n/**\n * Renders actions popup for the mobile view.\n * @param props - Configuration for popup.\n * @returns A react node with actions..\n */\nconst QuickOrderGridExtraActionsPopupComponent: React.FC = (\n props: IQuickOrderGridTableRowProps\n): JSX.Element | null => {\n const {\n resources: { quickOrderGridViewDetailsButtonAriaLabel, quickOrderGridViewDetailsButtonText }\n } = props;\n const product = props.data.product.productLine.fullProduct?.ProductDetails;\n const [shouldShowActions, setShowActions] = useState(false);\n let productUrl = '';\n if (product === undefined) {\n return null;\n }\n if (!StringExtensions.isNullOrWhitespace(product.Name) && !ObjectExtensions.isNullOrUndefined(product.RecordId)) {\n productUrl = getProductPageUrlSync(product.Name!, product.RecordId, props.context.actionContext);\n }\n\n const onClickViewDetails = React.useCallback(() => {\n if (MsDyn365.isBrowser) {\n window.location.href = productUrl;\n }\n }, [productUrl]);\n\n const toggle = React.useCallback(() => {\n const shouldShowActionsNewValue = !shouldShowActions;\n if (shouldShowActionsNewValue) {\n if (setShowPreviousActions) {\n setShowPreviousActions(false);\n }\n setShowActions(shouldShowActionsNewValue);\n setShowPreviousActions = setShowActions;\n } else {\n setShowPreviousActions = undefined;\n setShowActions(shouldShowActionsNewValue);\n }\n }, [shouldShowActions, setShowActions]);\n\n if (StringExtensions.isNullOrWhitespace(productUrl)) {\n return null;\n }\n\n const className = `${props.className}__extra-actions-cell`;\n const actionsContainerClassName = `${className}__actions-container`;\n\n return (\n \n
\n {shouldShowActions && (\n
\n \n {quickOrderGridViewDetailsButtonText}\n \n \n {props.resources.quickOrderGridRemoveItemButtonAriaLabel}\n \n
\n )}\n
\n \n | \n {product.ItemId} | \n \n \n \n {product.Name}\n \n \n {product.Dimensions?.map(dimension => dimension.DimensionValue?.Value)\n .filter(dimensionValue => !StringExtensions.isNullOrWhitespace(dimensionValue))\n .join(props.resources.quickOrderGridProductDimensionsSeparator)}\n \n | \n {renderProductPrice(props)} | \n {renderUnitOfMeasure(props)} | \n \n \n | \n \n \n | \n \n );\n }\n\n return null;\n};\n\n/**\n * Renders rows for mobile view.\n * @param props - Configuration for the rows.\n * @returns A react node with a list of quick order grid rows for mobile view.\n */\nexport const QuickOrderGridMobileTableRowCellComponent: React.FC = (props: IQuickOrderGridTableRowProps) => {\n const product = props.data.product.productLine.fullProduct?.ProductDetails;\n const productListLine = props.data.product.productLine.productListLine;\n const { min, max, quantity } = props;\n if (product !== undefined) {\n return (\n <>\n \n \n | \n \n \n {product.RecordId}\n \n \n \n \n | \n \n \n | \n \n );\n }\n return null;\n};\n\n/**\n * Quick order table row component.\n * @param props - Configuration of the component.\n * @returns React node for the row.\n */\nexport const QuickOrderGridTableRowComponent: React.FC = (props: IQuickOrderGridTableRowProps) => {\n const rowClassName = `${props.className}__row`;\n const isMobileView = isMobile({ variant: VariantType.Viewport, context: props.context.request }) === 'xs';\n let headerCells: JSX.Element;\n if (isMobileView) {\n headerCells = ;\n } else {\n headerCells = ;\n }\n\n return (\n \n {headerCells}
\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport MsDyn365, { IComponent, IComponentProps, ICoreContext, IImageSettings } from '@msdyn365-commerce/core';\nimport React from 'react';\n\nimport { ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { QuickOrderGridProduct } from '../quick-order-grid-product';\nimport { IQuickOrderGridRowCallbacks } from '../utilities';\nimport {\n IQuickOrderGridTableHeaderResources,\n IQuickOrderGridTableRowResources,\n QuickOrderGridTableHeaderComponent,\n QuickOrderGridTableRowComponent\n} from './components';\n\n/**\n * Quick order table data interface.\n */\ninterface IQuickOrderGridTableData {\n quickOrderGridProducts: QuickOrderGridProduct[];\n isOrderQuantityLimitsFeatureEnabled: boolean;\n}\n\n/**\n * Quick order table resources.\n */\nexport interface IQuickOrderGridTableResources extends IQuickOrderGridTableHeaderResources, IQuickOrderGridTableRowResources {}\n\n/**\n * Quick order table props.\n */\nexport interface IQuickOrderGridTableProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n moduleId: string;\n moduleTypeName: string;\n\n resources: IQuickOrderGridTableResources;\n isMobileView: boolean;\n imageSettings?: IImageSettings;\n callBacks: IQuickOrderGridRowCallbacks;\n}\n\n/**\n * Quick order table component.\n */\nexport interface IQuickOrderGridTableComponent extends IComponent {}\n\n/**\n * The quick order table.\n * @param props -- The quick order table props.\n * @returns The quick order table element.\n */\nexport const QuickOrderGridTableComponent: React.FC = (props: IQuickOrderGridTableProps) => {\n const [isMobile, setIsMobile] = React.useState(props.isMobileView);\n const quickOrderGridProducts = props.data.quickOrderGridProducts;\n const isOrderQuantityLimitsFeatureEnabled = props.data.isOrderQuantityLimitsFeatureEnabled;\n\n /**\n * Update the view port.\n */\n const updateViewport = () => {\n setIsMobile(props.isMobileView);\n };\n\n if (MsDyn365.isBrowser) {\n window.addEventListener('resize', updateViewport);\n }\n\n const headerClassName = `${props.className}__header`;\n const rowClassName = `${props.className}__row`;\n\n return (\n \n \n {quickOrderGridProducts.map((quickOrderProduct, index) => {\n let quantity = quickOrderProduct.productLine.productListLine.Quantity!;\n const product = quickOrderProduct.productLine.fullProduct;\n let min: number = 1;\n let max: number = 10;\n const behavior = product?.ProductDetails?.Behavior;\n if (isOrderQuantityLimitsFeatureEnabled && !ObjectExtensions.isNullOrUndefined(behavior)) {\n if (behavior.MinimumQuantity && behavior.MinimumQuantity > 0) {\n min = behavior.MinimumQuantity;\n }\n if (behavior.MaximumQuantity && behavior.MaximumQuantity > 0) {\n max = behavior.MaximumQuantity;\n }\n quantity = Math.max(quantity, min);\n }\n const price = quickOrderProduct.productLine.fullProduct?.ProductPrice;\n return (\n \n );\n })}\n
\n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n getProductConfigure,\n IProductDimensionCallbacks,\n IProductDimensionConfigureResources,\n IProductDimensionConfigureViewProps\n} from '@msdyn365-commerce/components';\nimport {\n ProductDimension,\n ProductDimensionType,\n ProductDimensionValue,\n ProductListsDataActions,\n ProductListType,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport {\n addItemToProductListAction,\n AddItemToProductListInput,\n ArrayExtensions,\n createProductList,\n CreateProductListInput,\n FinitePromiseQueue,\n FinitePromiseQueueError,\n getDimensionsForSelectedVariant,\n GetDimensionsForSelectedVariantInput,\n getScanResult,\n GetScanResultInput,\n getSelectedVariant,\n IDimensionForSelectedVariant,\n IPromiseQueue,\n ObjectExtensions,\n QuickOrderTemplate,\n QuickOrderTemplateLine,\n SelectedVariantInput,\n StringExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getTelemetryObject,\n Heading,\n IModuleProps,\n INodeProps,\n isMobile,\n ITelemetryContent,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { debounce } from 'lodash';\nimport { computed } from 'mobx';\nimport * as React from 'react';\n\nimport { getCatalogId } from '@msdyn365-commerce/core';\nimport { ActiveProductListInput } from './actions';\nimport {\n EcommerceQuantityLimitConfigurationsFeatureName,\n IQuickOrderGridActionsProps,\n IQuickOrderGridActionsViewProps,\n IQuickOrderGridRowCallbacks,\n IQuickOrderGridState,\n QuickOrderGridActionsView,\n QuickOrderGridDrawer,\n QuickOrderGridFormComponent,\n QuickOrderGridProduct,\n QuickOrderGridTableComponent,\n RetailDefaultOrderQuantityLimitsFeatureName\n} from './components';\nimport { IQuickOrderGridData } from './quick-order-grid.data';\nimport { IQuickOrderGridProps, IQuickOrderGridResources } from './quick-order-grid.props.autogenerated';\n\n/**\n * QuickOrder Grid View props.\n */\nexport interface IQuickOrderGridViewProps extends IQuickOrderGridProps {\n header: JSX.Element;\n actions?: INodeProps;\n isB2bCustomer?: boolean;\n isQuickOrderGridFormExpanded: boolean;\n contentProps: INodeProps;\n drawer: INodeProps;\n loading?: React.ReactNode;\n quickOrderGridForm: INodeProps;\n quickOrderGridFormProductContent: INodeProps;\n quickOrderGridFormMsgContent: INodeProps;\n quickOrderGridProps: IModuleProps;\n form: React.ReactNode;\n configure?: IProductDimensionConfigureViewProps;\n isMobileView: boolean;\n container?: JSX.Element;\n orderActions?: IQuickOrderGridActionsViewProps | null;\n bulkPurchase?: React.ReactNode;\n}\n\n/**\n * QuickOrder Grid View port.\n */\nexport type GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * QuickOrderGrid component.\n * @extends {React.PureComponent>}\n */\nclass QuickOrderGrid extends React.PureComponent, IQuickOrderGridState> {\n private readonly _productTextInput: React.RefObject;\n\n private readonly _quantityInput: React.RefObject;\n\n private readonly _waitTime: number = 500;\n\n private readonly _dimensionUpdateQueueMaxLength: number = 2;\n\n private readonly _errorCssClass: string = 'danger';\n\n private readonly _errorCssGlyphClass: string = 'fas fa-exclamation-triangle';\n\n private readonly _quickOrderGridFormClass: string;\n\n private readonly _quickOrderGridFormProductContent: string;\n\n private readonly _quickOrderGridFormMsgContent: string;\n\n private readonly _telemetryContent: ITelemetryContent;\n\n private readonly _dimensionUpdateQueue: IPromiseQueue = new FinitePromiseQueue(this._dimensionUpdateQueueMaxLength);\n\n private _dimensions: { [id: number]: string } = {};\n\n private _initializedDimensions: Set = new Set();\n\n private readonly _cssClassNameConfigure: string = 'ms-quick-order_grid__content-form-main';\n\n private readonly _className: string = 'ms-quick-order-grid';\n\n // @ts-expect-error: Debouce needs to be used as type.\n private _cancellabelDebounce: debounce;\n\n private _isOrderQuantityLimitsFeatureEnabled: boolean = false;\n\n private _isChannelLimitsFeatureEnabled: boolean = false;\n\n private _applyDefaultOrderSettingsForCartLine: boolean = false;\n\n private readonly _quickOrderGridCallbacks: IProductDimensionCallbacks = {\n initializeDimension: (initializedDimension: string): void => {\n if (initializedDimension) {\n this._initializedDimensions.add(initializedDimension);\n }\n },\n /**\n * Get Dropdown name.\n * @param selectedDimensionId - Dimension type.\n * @param selectedDimensionValueId - Resources.\n * @returns Dropdown name.\n */\n dimensionSelectedAsync: async (selectedDimensionId: number, selectedDimensionValueId: string): Promise => {\n this._dimensions[selectedDimensionId] = selectedDimensionValueId;\n // Only trigger _updateDimensions when all dimensions are initialized\n if (this._initializedDimensions.size === this.state.productDimensions?.length) {\n return this._dimensionUpdateQueue\n .enqueue(async () => {\n return this._updateDimensions();\n })\n .catch((error: string) => {\n // Ignore discarded processes.\n if (error !== FinitePromiseQueueError.ProcessWasDiscardedFromTheQueue) {\n throw new Error(error);\n }\n });\n }\n },\n\n /**\n * Get Dropdown name.\n * @param dimensionType - Dimension type.\n * @param resources - Resources.\n * @returns Dropdown name.\n */\n getDropdownName: (dimensionType: number, resources: IProductDimensionConfigureResources): string => {\n return this._getDropdownName(dimensionType, resources);\n },\n\n /**\n * Method to call on dimension change.\n * @param isUpdatingDimension - Flag to update dimension.\n */\n changeUpdatingDimension: (isUpdatingDimension: boolean): void => {\n this.setState({ isUpdatingDimension });\n }\n };\n\n private readonly _quickOrderGridRowCallbacks: IQuickOrderGridRowCallbacks = {\n /**\n * Method to call remove button.\n * @param line - Grid row product.\n */\n onRemoveItem: (line: QuickOrderGridProduct): void => {\n this._removeItemRowFromTable(line.productLine);\n },\n\n /**\n * Method to call on change quantity button.\n * @param productListLineId - Grid row product list line id.\n * @param quantity - Product quantity.\n * @returns - Falg to get confirmation for action.\n */\n onChangeQuantity: (productListLineId: string | undefined, quantity: number): boolean => {\n return this._changeRowQuantity(productListLineId, quantity);\n }\n };\n\n public constructor(props: IQuickOrderGridProps) {\n super(props);\n this._productTextInput = React.createRef();\n this._quantityInput = React.createRef();\n\n this._telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.state = {\n isQuickOrderGridFormExpanded: false,\n min: 0,\n max: 10,\n quantity: 1,\n productResponse: undefined,\n productDimensions: undefined,\n productDimensionErrorState: {\n configureErrors: {}\n },\n isMobile: this.isMobile,\n products: [],\n isUpdatingDimension: false,\n productListId: ''\n };\n\n this._quickOrderGridFormClass = 'ms-quick-order-grid__content-form';\n this._quickOrderGridFormProductContent = 'ms-quick-order-grid__content-form-main';\n this._quickOrderGridFormMsgContent = 'ms-quick-order-grid__content-form-msg';\n\n this._isOrderQuantityLimitsFeatureEnabled =\n this.props.data.featureState.result?.find(featureState => featureState.Name === RetailDefaultOrderQuantityLimitsFeatureName)\n ?.IsEnabled ?? false;\n\n this._isChannelLimitsFeatureEnabled =\n this.props.data.featureState.result?.find(featureState => featureState.Name === EcommerceQuantityLimitConfigurationsFeatureName)\n ?.IsEnabled ?? false;\n\n const cartConfiguration = this.props.data.cartConfiguration;\n this._applyDefaultOrderSettingsForCartLine = cartConfiguration?.result?.ValidateDefaultOrderSettingsPerLine ?? false;\n }\n\n @computed public get isMobile(): boolean {\n const size = isMobile({ variant: VariantType.Viewport, context: this.props.context.request });\n return size === 'xs';\n }\n\n public render(): JSX.Element | null {\n const { data } = this.props;\n if (!data.customerInformation.result) {\n return null;\n }\n const quickOrderTemplate = data.quickOrderTemplate;\n\n if (quickOrderTemplate?.result !== undefined) {\n this.setState({\n products: quickOrderTemplate.result.quickOrderTemplateLines,\n productListId: quickOrderTemplate.result.productList.Id\n });\n }\n const { className = '', maxQuantity } = this.props.config;\n const customerInfo = this.props.data.customerInformation.result;\n const {\n quickOrderGridModuleHeading,\n quickOrderGridModuleDescription,\n quickOrderGridAddtogrid,\n quickOrderGridProductQuantityInputLabel,\n quickOrderGridProductInputLabel,\n quickOrderGridProductDimensionTypeColor,\n quickOrderGridProductDimensionTypeConfiguration,\n quickOrderGridSelectDimensionFormatString,\n quickOrderGridProductDimensionTypeSize,\n quickOrderGridProductDimensionTypeStyle,\n quickOrderGridProductDimensionTypeAmount,\n quickOrderGridModulePageHeading\n } = this.props.resources;\n\n const productConfigureResources: IProductDimensionConfigureResources = {\n selectDimensionFormatString: quickOrderGridSelectDimensionFormatString,\n productDimensionTypeColor: quickOrderGridProductDimensionTypeColor,\n productDimensionTypeConfiguration: quickOrderGridProductDimensionTypeConfiguration,\n productDimensionTypeSize: quickOrderGridProductDimensionTypeSize,\n productDimensionTypeStyle: quickOrderGridProductDimensionTypeStyle,\n productDimensionTypeAmount: quickOrderGridProductDimensionTypeAmount\n };\n\n const { isQuickOrderGridFormExpanded, productDimensionErrorState, productResponse, productDimensions } = this.state;\n\n const headerClassName = `${this._className}__header`;\n\n const header = (\n \n \n
\n );\n\n const viewProps: IQuickOrderGridViewProps = {\n ...(this.props as IQuickOrderGridProps),\n\n quickOrderGridProps: { className: classnames('ms-quick-order-grid', className), moduleProps: this.props },\n contentProps: { className: 'ms-quick-order-grid__content' },\n isB2bCustomer: customerInfo?.IsB2b,\n header,\n actions: {\n className: `${this._className}-action-bar`,\n tag: 'div'\n },\n drawer: {\n tag: QuickOrderGridDrawer,\n className: `${this._className}__drawer`,\n collapseProps: { isOpen: this.state.isQuickOrderGridFormExpanded },\n moduleHeadingText: quickOrderGridModuleHeading,\n moduleDescriptionText: quickOrderGridModuleDescription,\n requestContext: this.props.context.request,\n telemetryContent: this._telemetryContent\n },\n bulkPurchase: this._renderBulkPurchase(),\n quickOrderGridForm: {\n className: `${this._quickOrderGridFormClass} ${isQuickOrderGridFormExpanded ? 'qo-show' : 'qo-hide'}`\n },\n quickOrderGridFormProductContent: {\n className: this._quickOrderGridFormProductContent\n },\n quickOrderGridFormMsgContent: {\n className: this._quickOrderGridFormMsgContent\n },\n form: QuickOrderGridFormComponent({\n productTextInput: this._productTextInput,\n quantityTextInput: this._quantityInput,\n isAddtoListDisabled: !productResponse,\n ariaLabelAddtoCart: quickOrderGridAddtogrid,\n ariaLabelProduct: quickOrderGridProductInputLabel,\n ariaLabelQuantity: quickOrderGridProductQuantityInputLabel,\n maxChars: 50,\n minQuantity: this.state.min ?? 0,\n maxQuantity: this.state.max ?? maxQuantity,\n moduleClassName: this._className,\n quickOrderGridState: this.state,\n handleInputChange: this._handleInputChange,\n handleQuantityChange: this._handleQuantityChange,\n handleAddProductListClick: this._addItemToProductListLine\n }),\n configure:\n productResponse && productDimensions\n ? getProductConfigure(\n this._cssClassNameConfigure,\n this.props.context,\n this.props.friendlyName,\n this.props.telemetry,\n quickOrderGridSelectDimensionFormatString,\n productConfigureResources,\n this._quickOrderGridCallbacks,\n productResponse,\n productDimensions,\n productDimensionErrorState\n )\n : undefined,\n isQuickOrderGridFormExpanded: this.state.isQuickOrderGridFormExpanded,\n isMobileView: this.state.isMobile,\n container: ArrayExtensions.hasElements(this.state.products) ? this._renderListContainer() : undefined,\n orderActions: this._renderQuickOrderGridActions(quickOrderTemplate?.result)\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n private _renderQuickOrderGridActions(quickOrderTemplate: QuickOrderTemplate | undefined): IQuickOrderGridActionsViewProps | null {\n const { typeName, context, resources } = this.props;\n const {\n quickOrderGridDeleteButtonText,\n quickOrderGridBuySelectedButtonText,\n quickOrderGridBuySelectedButtonAriaLabel,\n quickOrderGridBuySelectedAddingToCartErrorNotificationTitle,\n quickOrderGridBuySelectedAddingToCartErrorNotificationCloseAriaLabel,\n quickOrderGridGoToCartText,\n quickOrderGridDialogCloseText,\n quickOrderGridSingleItemText,\n quickOrderGridMultiLineItemFormatText,\n quickOrderGridMultiLinesFormatText,\n quickOrderGridHeaderMessageText,\n addedQuantityText,\n originalPriceText,\n currentPriceText,\n freePriceText\n } = resources;\n if (ArrayExtensions.hasElements(quickOrderTemplate?.quickOrderTemplateLines)) {\n const quickOrderGridActions: IQuickOrderGridActionsProps = {\n data: { quickOrderTemplate },\n moduleClassName: this._className,\n id: 'quick-order-grid',\n typeName,\n context,\n handlers: {\n removeProductList: this._removeProductList,\n onErrorMessage: (message: string) =>\n this.setState({\n topStateMessage: {\n messageText: message,\n statusCssString: this._errorCssClass,\n messageGlyph: this._errorCssGlyphClass,\n isOpen: true\n }\n })\n },\n quickOrderGridState: this.state,\n resources: {\n quickOrderGridDeleteButtonText,\n quickOrderGridBuySelectedButtonText,\n quickOrderGridBuySelectedButtonAriaLabel,\n quickOrderGridBuySelectedAddingToCartErrorNotificationTitle,\n quickOrderGridBuySelectedAddingToCartErrorNotificationCloseAriaLabel,\n quickOrderGridGoToCartText,\n quickOrderGridDialogCloseText,\n quickOrderGridSingleItemText,\n quickOrderGridMultiLineItemFormatText,\n quickOrderGridMultiLinesFormatText,\n quickOrderGridHeaderMessageText,\n addedQuantityText,\n originalPriceText,\n currentPriceText,\n freePriceText\n }\n };\n\n return QuickOrderGridActionsView(quickOrderGridActions);\n }\n return null;\n }\n\n /**\n * Renders bulk purchase module.\n * @returns Bulk purchase module react node.\n */\n private _renderBulkPurchase(): React.ReactNode {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Temporary switch for the feature which is under development.\n if (!this.props.context.app.config.isBulkPurchaseEnabled) {\n return null;\n }\n\n if (!ArrayExtensions.hasElements(this.props.slots.bulkPurchaseSlots)) {\n return null;\n }\n\n const containerClass = `${this._className}__bulk-purchase`;\n return (\n \n {React.cloneElement(this.props.slots.bulkPurchaseSlots[0] as React.ReactElement, {\n productDimensions: this.state.productDimensions\n })}\n
\n );\n }\n\n /**\n * Render list container.\n * @returns JSX element.\n */\n private _renderListContainer(): JSX.Element {\n const containerClass = `${this._className}__table-content`;\n return {this._renderQuickOrderTable(this._className)}
;\n }\n\n /**\n * Initial the products on quick order.\n * @returns List of quick order products or undefined.\n */\n private _initQuickOrderGridProducts(): QuickOrderGridProduct[] {\n const products: QuickOrderTemplateLine[] = this.state.products;\n\n const quickOrderGridProduct: QuickOrderGridProduct[] = products.map((product: QuickOrderTemplateLine) => {\n return new QuickOrderGridProduct(product);\n });\n\n return ArrayExtensions.validValues(quickOrderGridProduct);\n }\n\n /**\n * Method to call on clear button.\n */\n private readonly _removeProductList = () => {\n const { context, data, telemetry, resources } = this.props;\n const { quickOrderTemplate } = data;\n const userToken = context.request.user.isAuthenticated && context.request.user.token;\n if (userToken && quickOrderTemplate && quickOrderTemplate.result) {\n ProductListsDataActions.deleteAsync({ callerContext: context.actionContext }, quickOrderTemplate.result.productList)\n .then(() => {\n window.location.reload();\n })\n .catch((error: string) => {\n telemetry.warning('[quick-order-grid] Unable to delete product list.');\n telemetry.error(error);\n this._updateStatusState(\n resources.quickOrderGridDeleteProductListFailedText,\n this._errorCssClass,\n this._errorCssGlyphClass,\n true\n );\n });\n } else {\n telemetry.warning('[quick-order-grid] Failed to delete product list. Product List was not found');\n }\n };\n\n /**\n * Initial the products on quick order.\n * @param className - Class name.\n * @returns JSX element.\n */\n private _renderQuickOrderTable(className: string): JSX.Element {\n const tableClassName = `${className}__table-list`;\n\n return (\n \n );\n }\n\n private _updateQuantitiesInState(product: SimpleProduct): void {\n const min: number = this._getMinQuantityForCartLineItem(this._isOrderQuantityLimitsFeatureEnabled, product);\n const max: number = this._getMaxQuantityForCartLineItem(\n this._isChannelLimitsFeatureEnabled || this._isOrderQuantityLimitsFeatureEnabled,\n product\n );\n let quantity: number = this._getQuantity(\n this._isOrderQuantityLimitsFeatureEnabled,\n this._applyDefaultOrderSettingsForCartLine,\n product\n );\n quantity = Math.max(quantity, min);\n\n this.setState({\n min,\n max,\n quantity\n });\n }\n\n private _getMinQuantityForCartLineItem(isOrderQuantityLimitsFeatureEnabled: boolean, product: SimpleProduct): number {\n if (\n isOrderQuantityLimitsFeatureEnabled &&\n this._getIgnoreOrderSettings() &&\n product?.Behavior?.MinimumQuantity &&\n product.Behavior.MinimumQuantity > 0\n ) {\n return product.Behavior.MinimumQuantity;\n }\n\n return 1;\n }\n\n private _getMaxQuantityForCartLineItem(isQuantityLimitsFeatureEnabled: boolean, product: SimpleProduct): number {\n if (\n isQuantityLimitsFeatureEnabled &&\n this._getIgnoreOrderSettings() &&\n product?.Behavior?.MaximumQuantity &&\n product.Behavior.MaximumQuantity > 0\n ) {\n return product.Behavior.MaximumQuantity;\n }\n\n return this.props.context.app.config.maxQuantityForCartLineItem;\n }\n\n /**\n * Retrieves the value of the IgnoreOrderSettings property from the cart configuration.\n * If the property is not present, it defaults to false.\n * @returns {boolean} The value of the IgnoreOrderSettings property.\n */\n private _getIgnoreOrderSettings(): boolean {\n const cartConfiguration = this.props.data.cartConfiguration;\n return !(cartConfiguration?.result?.IgnoreOrderSettings ?? false);\n }\n\n private _getQuantity(\n isOrderQuantityLimitsFeatureEnabled: boolean,\n applyDefaultOrderSettingsForCartLine: boolean,\n product: SimpleProduct\n ): number {\n let defaultQuantity = 1;\n\n if (!isOrderQuantityLimitsFeatureEnabled || !applyDefaultOrderSettingsForCartLine) {\n return defaultQuantity;\n }\n\n if (product?.Behavior?.DefaultQuantity && product.Behavior.DefaultQuantity > 0) {\n defaultQuantity = product.Behavior.DefaultQuantity;\n }\n\n return defaultQuantity;\n }\n\n /**\n * Method to called on product input change.\n * @param query - Product inventory info.\n */\n private readonly _handleInputChange = (query: string): void => {\n const queryMinLength = 4;\n if (!query || query.length > queryMinLength) {\n this.setState({ quantity: 0, productDimensions: [], productResponse: undefined });\n this._updateStatusState('', '', '', false);\n }\n if (this._cancellabelDebounce) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call -- existing code.\n this._cancellabelDebounce.cancel();\n }\n\n const { telemetry, context } = this.props;\n const zeroNumber = 0;\n if (!StringExtensions.isNullOrEmpty(query)) {\n this._cancellabelDebounce = debounce(() => {\n getScanResult(\n new GetScanResultInput(\n context.actionContext.requestContext.apiSettings,\n query,\n context.actionContext.requestContext.apiSettings.channelId\n ),\n this.props.context.actionContext\n )\n .then(results => {\n this.setState({\n productResponse: results?.Product,\n productDimensions: results?.ProductDimensionFull,\n isQuickOrderGridFormExpanded: true\n });\n if (results?.Product) {\n this._updateQuantitiesInState(results.Product);\n }\n })\n .catch((error: Error) => {\n telemetry.exception(error);\n telemetry.debug('Unable to get scan results');\n });\n }, this._waitTime);\n\n setTimeout(() => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- Existing code.\n this._cancellabelDebounce();\n }, zeroNumber);\n this.setState({ isQuickOrderGridFormExpanded: true });\n } else {\n this.setState({ productResponse: undefined, isQuickOrderGridFormExpanded: true });\n }\n };\n\n /**\n * Method to called on quantity change.\n * @param value - Quantity value.\n */\n private readonly _handleQuantityChange = (value: string): void => {\n let currentValue = Number.parseInt(value, 10);\n const inputElement = this._quantityInput.current instanceof HTMLInputElement && this._quantityInput.current;\n const quantityChangeDebounceTimeout = 200;\n let minimumQuantity = 0;\n let needToUpdateUIValue: boolean = false;\n if (this._isOrderQuantityLimitsFeatureEnabled && !ObjectExtensions.isNullOrUndefined(this.state.productResponse?.Behavior)) {\n const behavior = this.state.productResponse!.Behavior;\n minimumQuantity = behavior?.MinimumQuantity ?? 0;\n const newCurrentValue = Math.max(currentValue, minimumQuantity);\n if (newCurrentValue !== currentValue) {\n needToUpdateUIValue = true;\n }\n currentValue = newCurrentValue;\n }\n\n this.setState({ quantity: currentValue }, () => {\n debounce(() => {\n if (needToUpdateUIValue && !Number.isNaN(this.state.quantity) && inputElement) {\n inputElement.setAttribute('aria-valuenow', currentValue.toString());\n inputElement.value = currentValue.toString();\n }\n }, quantityChangeDebounceTimeout)();\n });\n };\n\n /**\n * Method to get dropdwon name.\n * @param dimensionType - Dimension Type.\n * @param resources - String resources.\n * @returns Dropdwon label.\n */\n private readonly _getDropdownName = (dimensionType: number, resources: IProductDimensionConfigureResources): string => {\n const isGiftCard = this.state.productResponse?.IsGiftCard;\n\n switch (dimensionType) {\n case ProductDimensionType.Color: // ProductDimensionType.Color\n return resources.productDimensionTypeColor;\n case ProductDimensionType.Configuration: // ProductDimensionType.Configuration\n return resources.productDimensionTypeConfiguration;\n case ProductDimensionType.Size: // ProductDimensionType.Size\n return resources.productDimensionTypeSize;\n case ProductDimensionType.Style: // ProductDimensionType.Style\n return isGiftCard ? resources.productDimensionTypeAmount : resources.productDimensionTypeStyle;\n default:\n return '';\n }\n };\n\n /**\n * Method to update dimension and product in UI.\n */\n private readonly _updateDimensions = async (): Promise => {\n const {\n context: {\n actionContext,\n request: {\n apiSettings: { channelId }\n }\n }\n } = this.props;\n const { productDimensions, productResponse } = this.state;\n const hasProductDimensions = ArrayExtensions.hasElements(productDimensions);\n if (!productResponse || !hasProductDimensions) {\n return;\n }\n\n const dimensionsToUpdate: { [id: number]: string } = { ...this._dimensions };\n this.setState({ isUpdatingDimension: true });\n\n // Step 1: Update state to indicate which dimensions are selected\n if (this.state.productDimensionErrorState.otherError) {\n // eslint-disable-next-line react/no-access-state-in-setstate -- existing code.\n const clearOtherErrorState = { ...this.state.productDimensionErrorState };\n clearOtherErrorState.otherError = undefined;\n this.setState({ productDimensionErrorState: clearOtherErrorState });\n }\n\n // Step 2: Clear any errors indicating the dimension wasn't selected\n for (const dimensionKey of Object.keys(dimensionsToUpdate)) {\n if (this.state.productDimensionErrorState.configureErrors[dimensionKey]) {\n // eslint-disable-next-line react/no-access-state-in-setstate -- existing code.\n const errorState = { ...this.state.productDimensionErrorState };\n errorState.configureErrors[dimensionKey] = undefined;\n\n this.setState({ productDimensionErrorState: errorState });\n }\n }\n\n // Step 3, Build the actually selected dimensions, prioritizing the information in state\n // over the information in data\n const mappedDimensions = productDimensions\n ?.map(dimension => {\n return {\n DimensionTypeValue: dimension.DimensionTypeValue,\n DimensionValue:\n this._updateDimensionValue(dimension, dimensionsToUpdate[dimension.DimensionTypeValue]) ?? dimension.DimensionValue,\n ExtensionProperties: dimension.ExtensionProperties\n };\n })\n .filter(dimension => {\n return dimension.DimensionValue;\n });\n\n // Step 4. Use these dimensions hydrate the product. Wrap this in a promise\n // so that places like add to cart can await it\n // eslint-disable-next-line no-async-promise-executor -- existing code\n const selectedProduct = new Promise(async resolve => {\n const newProduct = await getSelectedVariant(\n new SelectedVariantInput(\n productResponse.MasterProductId ? productResponse.MasterProductId : productResponse.RecordId,\n channelId,\n mappedDimensions,\n undefined,\n this.props.context.request\n ),\n actionContext\n );\n if (newProduct) {\n await getDimensionsForSelectedVariant(\n new GetDimensionsForSelectedVariantInput(\n newProduct.MasterProductId ? newProduct.MasterProductId : newProduct.RecordId,\n channelId,\n mappedDimensions,\n this.props.context.request\n ),\n actionContext\n );\n }\n\n resolve(newProduct);\n });\n\n const variantProduct = await selectedProduct;\n this.setState({ productResponse: variantProduct !== null ? variantProduct : undefined });\n };\n\n /**\n * Method to get updated dimension value.\n * @param productDimensionFull - Product dimension full.\n * @param newValueId - New Dimension value.\n * @returns Dimension Value.\n */\n private readonly _updateDimensionValue = (\n productDimensionFull: IDimensionForSelectedVariant,\n newValueId: string | undefined\n ): ProductDimensionValue | undefined => {\n if (newValueId && productDimensionFull.DimensionValues) {\n return productDimensionFull.DimensionValues.find(dimension => dimension.RecordId === +newValueId);\n }\n\n return undefined;\n };\n\n /**\n * Method to get dropdwon name.\n * @param dimensionTypeValue - Dimension Type.\n * @param resources - String resources.\n * @param isGiftCard - Flag to check if its a giftcard product.\n * @returns Dropdwon error label.\n */\n private readonly _getDimensionErrorString = (\n dimensionTypeValue: number,\n resources: IQuickOrderGridResources,\n isGiftCard?: boolean\n ): string => {\n const amountErrorMessage = resources.quickOrderGridproductDimensionTypeAmountErrorMessage;\n\n switch (dimensionTypeValue) {\n case ProductDimensionType.Color: // ProductDimensionType.Color\n return resources.quickOrderGridproductDimensionTypeColorErrorMessage;\n case ProductDimensionType.Configuration: // ProductDimensionType.Configuration\n return resources.quickOrderGridproductDimensionTypeConfigurationErrorMessage;\n case ProductDimensionType.Size: // ProductDimensionType.Size\n return resources.quickOrderGridproductDimensionTypeSizeErrorMessage;\n case ProductDimensionType.Style: // ProductDimensionType.Style\n return isGiftCard ? amountErrorMessage : resources.quickOrderGridproductDimensionTypeStyleErrorMessage;\n default:\n return '';\n }\n };\n\n /**\n * Initial the products on quick order.\n * @param productResponse - Simple Product.\n * @param quantity - Product Quantity.\n * @returns Flag to validate productlistline.\n */\n private readonly _validateCart = (productResponse: SimpleProduct, quantity: number): boolean => {\n // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- existing code\n const missingDimensions = productResponse.Dimensions?.filter(\n dimension => !(dimension.DimensionValue && dimension.DimensionValue.Value)\n );\n const minimumQuantity = 0;\n if (ArrayExtensions.hasElements(missingDimensions)) {\n const userMessage = this._getConfigureErrors(missingDimensions, false);\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- existing code\n if (this.state.productDimensionErrorState.configureErrors) {\n // eslint-disable-next-line react/no-access-state-in-setstate -- existing code\n const errorState = { ...this.state.productDimensionErrorState };\n errorState.configureErrors = userMessage;\n\n this.setState({ productDimensionErrorState: errorState });\n return false;\n }\n }\n\n if (quantity <= minimumQuantity) {\n const resources = this.props.resources;\n this._updateStatusState(resources.quickOrderGridWrongQuantityErrorMsg, this._errorCssClass, this._errorCssGlyphClass, true);\n return false;\n }\n return true;\n };\n\n /**\n * Initial the products on quick order.\n * @param result - Simple Product.\n * @param isGiftCard - Product Quantity.\n * @returns Flag to validate cart.\n */\n private _getConfigureErrors(\n result: ProductDimension[] | undefined,\n isGiftCard?: boolean\n ): { [configureId: string]: string | undefined } {\n if (!result) {\n return {};\n }\n const dimensions: { [configureId: string]: string | undefined } = {};\n const resources = this.props.resources;\n for (const dimension of result) {\n dimensions[dimension.DimensionTypeValue] = this._getDimensionErrorString(dimension.DimensionTypeValue, resources, isGiftCard);\n }\n return dimensions;\n }\n\n /**\n * Method to call on quantity change in row.\n * @param itemKey - Product Key.\n * @param quantity - Product quantity.\n * @returns Flag to update status.\n */\n private readonly _changeRowQuantity = (itemKey: string | undefined, quantity: number): boolean => {\n const { context, data, telemetry } = this.props;\n const { quickOrderTemplate } = data;\n if (quickOrderTemplate?.result) {\n const quickOrderTemplateLinesData = quickOrderTemplate.result.quickOrderTemplateLines;\n if (ArrayExtensions.hasElements(quickOrderTemplateLinesData)) {\n const orderLineIndex = quickOrderTemplateLinesData.findIndex(\n (lines: QuickOrderTemplateLine) => lines.productListLine.LineId === itemKey\n );\n const newProductListLine = { ...quickOrderTemplateLinesData[orderLineIndex] };\n if (quickOrderTemplateLinesData[orderLineIndex].productListLine.Quantity === quantity) {\n return true;\n }\n const previousQuantity = newProductListLine.productListLine.Quantity;\n newProductListLine.productListLine.Quantity = quantity;\n const { fullProduct, ...line } = newProductListLine;\n\n ProductListsDataActions.updateProductListLinesAsync(\n { callerContext: context.actionContext },\n quickOrderTemplate.result.productList.Id,\n [line.productListLine]\n )\n .then(list => {\n if (ArrayExtensions.hasElements(list)) {\n const newLine = list.find(lines => lines.LineId === itemKey);\n quickOrderTemplateLinesData[orderLineIndex].productListLine = newLine!;\n const updatedLines = [...quickOrderTemplateLinesData];\n updatedLines[orderLineIndex] = { fullProduct, productListLine: newLine! };\n const updatedProductList = { ...quickOrderTemplate.result, ProductListLines: updatedLines };\n context.actionContext.update(\n new ActiveProductListInput(context.actionContext.requestContext),\n updatedProductList\n );\n return true;\n }\n\n return false;\n })\n .catch((error: Error) => {\n telemetry.warning('[quick-order-grid] Unable to update product quantity.');\n telemetry.error(error.message);\n const userMessage = 'Failed to update quantity value.';\n newProductListLine.productListLine.Quantity = previousQuantity;\n this._updateStatusState(userMessage, this._errorCssClass, this._errorCssGlyphClass, true);\n return false;\n });\n }\n return false;\n }\n\n return false;\n };\n\n /**\n * Method to call on remove item from table.\n * @param line - Order Template Line.\n */\n private readonly _removeItemRowFromTable = (line: QuickOrderTemplateLine): void => {\n const { context, data, telemetry } = this.props;\n const { quickOrderTemplate } = data;\n\n if (quickOrderTemplate?.result) {\n const userToken = context.request.user.isAuthenticated && context.request.user.token;\n if (userToken) {\n ProductListsDataActions.removeProductListLinesAsync(\n { callerContext: context.actionContext },\n line.productListLine.ProductListId!,\n [line.productListLine]\n )\n .then(() => {\n window.location.reload(false);\n })\n .catch((error: Error) => {\n telemetry.warning('[quick-order-grid] Unable remove item from product list grid');\n telemetry.error(error.message);\n });\n } else {\n telemetry.warning('[quick-order-grid] Unable remove items from product list grid user token was not found');\n }\n }\n };\n\n private readonly _isChannelMultipleCatalogsFeatureEnabled = (): boolean => {\n let isMultipleCatalogFeatureEnabledInHq = false;\n if (this.props.data.featureState) {\n isMultipleCatalogFeatureEnabledInHq =\n this.props.data.featureState.result?.find(\n feature => feature.Name === 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature'\n )?.IsEnabled || false;\n }\n return isMultipleCatalogFeatureEnabledInHq;\n };\n\n /**\n * Method to call on add item from form.\n */\n private readonly _addItemToProductListLine = async (): Promise => {\n const {\n context: { actionContext },\n resources,\n telemetry\n } = this.props;\n const {\n quickOrderGridAddedToGridSuccessMessage,\n quickOrderGridAddedToGridFailureMessage,\n quickOrderGridAddedToGridDuplicateError\n } = resources;\n const { productResponse, quantity, productListId } = this.state;\n // get the current catalog id.\n const catalogId = getCatalogId(this.props.context.request);\n\n this._updateStatusState('', '', '', false);\n\n if (productResponse !== undefined && this._validateCart(productResponse, quantity)) {\n if (StringExtensions.isNullOrWhitespace(productListId)) {\n await this._createProductList();\n }\n\n if (StringExtensions.isNullOrWhitespace(this.state.productListId)) {\n this._updateStatusState(quickOrderGridAddedToGridFailureMessage, this._errorCssClass, this._errorCssGlyphClass, true);\n return;\n }\n const input = new AddItemToProductListInput(\n this.state.productListId,\n productResponse.RecordId,\n quantity,\n productResponse.DefaultUnitOfMeasure ?? 'ea',\n this._isChannelMultipleCatalogsFeatureEnabled(),\n catalogId\n );\n\n await addItemToProductListAction(input, actionContext)\n .then(result => {\n if (result.ProductListId) {\n this._updateStatusState(quickOrderGridAddedToGridSuccessMessage, 'success', 'fas fa-check', true);\n window.location.reload();\n this.setState({});\n }\n })\n .catch((error: Error) => {\n telemetry.debug('[quick-order-grid] Error trying to Update Grid Line from the quick order grid');\n if (error.name === 'Microsoft_Dynamics_Commerce_Runtime_DuplicateObject') {\n this._updateStatusState(\n quickOrderGridAddedToGridDuplicateError,\n this._errorCssClass,\n this._errorCssGlyphClass,\n true\n );\n } else {\n this._updateStatusState(\n quickOrderGridAddedToGridFailureMessage,\n this._errorCssClass,\n this._errorCssGlyphClass,\n true\n );\n }\n });\n }\n };\n\n /**\n * Method to create product list.\n * @returns - ProductListId.\n */\n private _createProductList = async (): Promise => {\n const {\n context: { actionContext },\n telemetry,\n resources\n } = this.props;\n const { productListId } = this.state;\n const { quickOrderGridAddedToGridFailureMessage } = resources;\n\n if (StringExtensions.isNullOrWhitespace(productListId)) {\n const input = new CreateProductListInput('', ProductListType.QuickOrder);\n\n await createProductList(input, actionContext)\n .then(result => {\n if (!StringExtensions.isNullOrWhitespace(result.Id)) {\n this.setState({ productListId: result.Id });\n return result.Id;\n }\n return '';\n })\n .catch((error: Error) => {\n telemetry.debug('[quick-order-grid] Error on creating productlist from quick order grid');\n telemetry.error(error.message);\n this._updateStatusState(quickOrderGridAddedToGridFailureMessage, this._errorCssClass, this._errorCssGlyphClass, true);\n return '';\n });\n return '';\n }\n\n return productListId;\n };\n\n /**\n * Method to create product list.\n * @param messageText - Message Text.\n * @param statusCssString - Css class names.\n * @param messageGlyph - Glyph string.\n * @param isOpen - Flag to show.\n */\n private readonly _updateStatusState = (messageText: string, statusCssString: string, messageGlyph: string, isOpen: boolean): void => {\n this.setState({\n // eslint-disable-next-line react/no-unused-state -- Showing user message in Form component.\n stateMessage: {\n messageText,\n statusCssString,\n messageGlyph,\n isOpen\n }\n });\n };\n}\nexport default QuickOrderGrid;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IErrorState } from '@msdyn365-commerce/components';\nimport { SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { IDimensionForSelectedVariant, OrderTemplateLine } from '@msdyn365-commerce-modules/retail-actions';\n\nimport { QuickOrderGridProduct } from './quick-order-grid-product';\n\n/**\n * QuickOrderGrid state message Interface.\n */\nexport interface IQuickOrderGridStateMessage {\n isOpen: boolean;\n messageGlyph: string;\n messageText: string;\n statusCssString: string;\n}\n\n/**\n * QuickOrderGrid state Interface.\n */\nexport interface IQuickOrderGridState {\n isQuickOrderGridFormExpanded: boolean;\n isUpdatingDimension?: boolean;\n productResponse: SimpleProduct | undefined;\n productDimensions: IDimensionForSelectedVariant[] | undefined;\n min: number | undefined;\n max: number | undefined;\n quantity: number;\n stateMessage?: IQuickOrderGridStateMessage;\n topStateMessage?: IQuickOrderGridStateMessage;\n productDimensionErrorState: IErrorState;\n isMobile: boolean;\n products: OrderTemplateLine[];\n productListId: string;\n}\n\n/**\n * QuickOrder Grid Row view.\n */\nexport interface IQuickOrderGridRowViewModel extends OrderTemplateLine {\n isChecked: boolean;\n}\n\n/**\n * Interface for quick order callbacks.\n */\nexport interface IQuickOrderGridRowCallbacks {\n onRemoveItem(line: QuickOrderGridProduct): void;\n onChangeQuantity(orderTemplateLineId: string | undefined, quantity: number): boolean;\n}\n\n/**\n * Interface for quick order grid action view props.\n */\nexport interface IQuickOrderGridActionsViewProps {\n addProductListToBag: React.ReactNode;\n removeProductList?: React.ReactNode;\n userMessage?: React.ReactNode;\n}\n\nexport const RetailDefaultOrderQuantityLimitsFeatureName: string = 'Dynamics.AX.Application.RetailDefaultOrderQuantityLimitsFeature';\n\nexport const EcommerceQuantityLimitConfigurationsFeatureName: string =\n 'Dynamics.AX.Application.EcommerceQuantityLimitConfigurationsFeature';\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ITelemetry } from '@msdyn365-commerce/core';\nimport { AttributeDataType, DisplayTemplate, ProductRefinerValue, RefinerType } from '@msdyn365-commerce/retail-proxy';\n\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { DimensionTypes } from '@msdyn365-commerce-modules/retail-actions';\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\n\n/**\n * Types of product refiner values.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\nexport enum ProductRefinerValueDataTypeValue {\n /**\n * Range slider is used for selections like price.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Range = 1,\n\n /**\n * Range input is a different way to specify ranges and can be expressed with input boxes\n * as well as a set of discrete single-select type values.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n RangeInput = 4,\n\n /**\n * This is a discrete list item, either multi-select or single-select.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n List = 5,\n\n /**\n * Boolean types allows only single-select.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Boolean = 6\n}\n\n/**\n * Types of product refiners.\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\nexport enum ProductRefinerTypeValue {\n /**\n * Refiner values are single-select.\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Single = 0,\n\n /**\n * Refiner values are multi-select.\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Multi = 1\n}\n\n/**\n * ProductRefinerSource enum type.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\nexport enum ProductRefinerSource {\n /**\n * The None member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n None = 0,\n\n /**\n * The Attribute member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Attribute = 1,\n\n /**\n * The Category member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Category = 2,\n\n /**\n * The Price member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Price = 3,\n\n /**\n * The Rating member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Rating = 4\n}\n\nexport interface IRefineItemData {\n sourceValue?: number;\n swatchImageUrl?: string;\n swatchColorHexCode?: string;\n refinerItemId: number;\n dataTypeValue?: number;\n name: string;\n label: string;\n count?: number;\n isChecked: boolean;\n refineItemUrl?: string;\n minValue?: string;\n maxValue?: string;\n dimensionType?: DimensionTypes;\n rowNumber?: number;\n unitText?: string;\n updatedSliderMaxValue?: string;\n updatedSliderMinValue?: string;\n}\n/**\n * Checks if the data type value corresponds to a slider.\n * @param dataTypeValue\n */\nexport function isRangeType(dataTypeValue: number | undefined): boolean {\n return dataTypeValue === AttributeDataType.Currency || dataTypeValue === AttributeDataType.Decimal;\n}\n\n/**\n * Checks if the data type value corresponds to a range type integer.\n * @param dataTypeValue\n */\nexport function isRangeTypeForInteger(dataTypeValue: number | undefined): boolean {\n return (\n dataTypeValue === AttributeDataType.Currency ||\n dataTypeValue === AttributeDataType.Decimal ||\n dataTypeValue === AttributeDataType.Integer\n );\n}\n\n/**\n * Checks if the data type value corresponds to a custom input box Range.\n * @param dataTypeValue\n */\nexport function isCustomRangeTypeIntegerSelected(\n selectedRefinementCriterion: ProductRefinerValue,\n parentProductRefinerHierarchy: IProductRefinerHierarchy\n): boolean {\n return (\n selectedRefinementCriterion?.RowNumber !== undefined &&\n selectedRefinementCriterion?.RowNumber !== null &&\n selectedRefinementCriterion?.DataTypeValue === AttributeDataType.Integer &&\n parentProductRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range\n );\n}\n\n/**\n * Checks if the selectedRefinementCriterion is siingle type with API va;ues or custom type.\n * If custom type then RowNumber is null\n * @param dataTypeValue\n */\nexport function isSingleSelectRangeTypeIntegerSelected(\n selectedRefinementCriterion: ProductRefinerValue,\n productRefinerValue: ProductRefinerValue\n): boolean {\n return (\n productRefinerValue.LeftValueBoundString === selectedRefinementCriterion?.LeftValueBoundString &&\n productRefinerValue.RightValueBoundString === selectedRefinementCriterion?.RightValueBoundString &&\n selectedRefinementCriterion?.RowNumber !== undefined &&\n selectedRefinementCriterion?.RowNumber !== null &&\n selectedRefinementCriterion !== undefined\n );\n}\n\n/**\n * Find the refinement criterion associated with this product refiner value.\n * @param productRefinerValue Product refiner value to match.\n * @param refinementCriteria Selected refinement criteria.\n */\nexport function findMatchingRefinementCriterion(\n productRefinerValue: ProductRefinerValue,\n refinementCriteria: ProductRefinerValue[]\n): ProductRefinerValue | undefined {\n // If the value is a range, then match only on data type value; otherwise match on item string\n return refinementCriteria.find((refinementCriterion: ProductRefinerValue) =>\n isMatchingRefinementCriterion(productRefinerValue, refinementCriterion)\n );\n}\n\n/**\n * Find the refinement criterion associated with this product refiner value.\n * @param productRefinerValue Product refiner value to match.\n * @param refinementCriteria Selected refinement criteria.\n * @param refinementCriterion\n */\nexport function isMatchingRefinementCriterion(\n productRefinerValue: ProductRefinerValue,\n refinementCriterion: ProductRefinerValue,\n parent?: IProductRefinerHierarchy\n): boolean {\n // If the value is a range, then match only on data type value; otherwise match on item string\n // Distinguish by displaytype also\n return (\n refinementCriterion.RefinerRecordId === productRefinerValue.RefinerRecordId &&\n refinementCriterion.RefinerSourceValue === productRefinerValue.RefinerSourceValue &&\n refinementCriterion.DataTypeValue === productRefinerValue.DataTypeValue &&\n ((parent?.DisplayTemplateValue === DisplayTemplate.Range\n ? isRangeType(refinementCriterion.DataTypeValue)\n : isRangeTypeForInteger(refinementCriterion.DataTypeValue)) ||\n refinementCriterion.LeftValueBoundString === productRefinerValue.LeftValueBoundString)\n );\n}\n\nexport function getIntegerRangeName(productRefinerValue: ProductRefinerValue): string {\n let rangeValue = '';\n\n if (productRefinerValue.LeftValueBoundString === '' && productRefinerValue.RightValueBoundString !== '') {\n rangeValue = `< ${productRefinerValue.RightValueBoundLocalizedString || productRefinerValue.RightValueBoundString}`;\n } else if (productRefinerValue.RightValueBoundString === '' && productRefinerValue.LeftValueBoundString !== '') {\n rangeValue = `> ${productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString}`;\n } else if (productRefinerValue.RightValueBoundString !== '' && productRefinerValue.LeftValueBoundString !== '') {\n rangeValue = `${productRefinerValue.LeftValueBoundLocalizedString ||\n productRefinerValue.LeftValueBoundString} - ${productRefinerValue.RightValueBoundString ||\n productRefinerValue.RightValueBoundString}`;\n }\n return rangeValue;\n}\n\n/**\n * Get input without formatting.\n * @param input - Input string.\n * @returns - Returns number.\n */\nexport function getInputWithoutFormatting(input: string): string {\n // First try to cast raw input to a number\n const inputAsNumber = Number(input);\n if (!Number.isNaN(inputAsNumber)) {\n return input;\n }\n\n // Otherwise try a reverse lookup and fall back to the raw input if all else fails\n // const reverseLookupResult = formattedPriceReverseLookup.get(input);\n // return reverseLookupResult || input;\n return input;\n}\n\nexport function getUpdatedRefinementCriteria(\n itemToggleNotification: IRefineItemToggleNotification,\n currentRefinementCriteria: ProductRefinerValue[]\n): ProductRefinerValue[] {\n const updatedRefinementCriteria: ProductRefinerValue[] = [];\n let toggledItemFound = false;\n\n // Keeping only itemToggled value for integer-range type in currentRefinementCriteria\n if (\n itemToggleNotification.parentProductRefinerHierarchy.DataTypeValue === AttributeDataType.Integer &&\n itemToggleNotification.parentProductRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range\n ) {\n currentRefinementCriteria = currentRefinementCriteria.filter(r => {\n return r.RefinerRecordId !== itemToggleNotification.productRefinerValue.RefinerRecordId;\n });\n }\n\n currentRefinementCriteria.forEach((selectedCriterion: ProductRefinerValue) => {\n if (\n isMatchingRefinementCriterion(\n itemToggleNotification.productRefinerValue,\n selectedCriterion,\n itemToggleNotification.parentProductRefinerHierarchy\n )\n ) {\n toggledItemFound = true;\n if (itemToggleNotification.isSelecting) {\n const next = {\n ...selectedCriterion,\n LeftValueBoundString:\n (itemToggleNotification.rangeStart !== undefined && `${itemToggleNotification.rangeStart}`) ||\n selectedCriterion.LeftValueBoundString,\n RightValueBoundString:\n (itemToggleNotification.rangeEnd !== undefined && `${itemToggleNotification.rangeEnd}`) ||\n selectedCriterion.RightValueBoundString\n };\n updatedRefinementCriteria.push(next);\n } // Else the item is being de-selected, so omit it from the refinement criteria\n } else {\n // Keep existing criterion because it is not in the item toggle notification\n updatedRefinementCriteria.push(selectedCriterion);\n }\n });\n\n if (!toggledItemFound) {\n const next = {\n ...itemToggleNotification.productRefinerValue,\n LeftValueBoundString:\n (itemToggleNotification.rangeStart !== undefined && `${itemToggleNotification.rangeStart}`) ||\n itemToggleNotification.productRefinerValue.LeftValueBoundString,\n RightValueBoundString:\n (itemToggleNotification.rangeEnd !== undefined && `${itemToggleNotification.rangeEnd}`) ||\n itemToggleNotification.productRefinerValue.RightValueBoundString\n };\n updatedRefinementCriteria.push(next);\n\n // If single select, then deselect any others in the parent refiner group\n if (\n (itemToggleNotification.productRefinerValue.DataTypeValue === AttributeDataType.Text ||\n itemToggleNotification.productRefinerValue.DataTypeValue === AttributeDataType.TrueFalse) &&\n itemToggleNotification.parentProductRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect\n ) {\n itemToggleNotification.parentProductRefinerHierarchy.Values.forEach((child: ProductRefinerValue) => {\n if (child.RefinerRecordId === next.RefinerRecordId && child.LeftValueBoundString === next.LeftValueBoundString) {\n // Do nothing\n } else {\n const matchingIndex = updatedRefinementCriteria.findIndex((criterion: ProductRefinerValue) =>\n isMatchingRefinementCriterion(child, criterion, itemToggleNotification.parentProductRefinerHierarchy)\n );\n if (matchingIndex > -1) {\n updatedRefinementCriteria.splice(matchingIndex, 1);\n }\n }\n });\n }\n }\n\n return updatedRefinementCriteria;\n}\n\nexport function formatPrice(\n amount: string | undefined,\n currency: string | undefined,\n locale: string | undefined,\n telemetry: ITelemetry\n): string {\n if (!amount || !currency) {\n telemetry.trace(`[refine-menu.utilities.formatPrice] could not format price for ${amount} ${currency}`);\n return amount || '';\n }\n const priceAmount = (amount && Number(amount)) || 0;\n let result: string;\n\n try {\n result = new Intl.NumberFormat(locale, {\n style: 'currency',\n currencyDisplay: 'symbol',\n currency,\n minimumFractionDigits: 0\n }).format(priceAmount);\n } catch (error) {\n result = `${priceAmount} ${currency}`;\n telemetry.warning(`[refine-menu.utilities.formatPrice] Failed to format price for ${result}: ${error}`);\n }\n\n return result;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { AttributeDataType, DisplayTemplate, ProductRefinerValue } from '@msdyn365-commerce/retail-proxy';\nimport { getPayloadObject, getTelemetryAttributes, IPayLoad } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { computed } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { ProductListInventoryFilteringOptions } from '../actions';\nimport { IChoiceSummaryProps } from './choice-summary.props';\nimport { getIntegerRangeName, isMatchingRefinementCriterion, isRangeType } from './utilities';\n\ninterface IRefinerMap {\n key: string;\n value: ProductRefinerValue;\n rangeDisplayType?: number | undefined;\n}\n\n/**\n * ChoiceSummary component.\n */\n@observer\nexport default class ChoiceSummary extends React.PureComponent {\n private readonly closeButtonGlyph: string = 'msi-close-btn';\n\n private readonly payLoad: IPayLoad;\n\n @computed get selectedRefinersMap(): IRefinerMap[] {\n let { selectedChoices } = this.props;\n const { channelInventoryConfigurationId, refinerHierarchy } = this.props;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- app configs are of generic type\n if (this.props.context?.app.config.productListInventoryDisplay === ProductListInventoryFilteringOptions.HideOOS) {\n selectedChoices = selectedChoices.filter(choice => {\n const parent = refinerHierarchy.find(\n (hierarchy: IProductRefinerHierarchy) =>\n !!hierarchy.Values.find((value: ProductRefinerValue) => isMatchingRefinementCriterion(value, choice))\n );\n return parent && parent.RecordId !== channelInventoryConfigurationId;\n });\n }\n return selectedChoices.map((selectedRefiner: ProductRefinerValue, index) => {\n const rangeParentDisplay = refinerHierarchy.filter(p => p.RecordId === selectedRefiner.RefinerRecordId);\n return {\n key: this._getKeyForRefinerValue(selectedRefiner, index.toString()),\n value: selectedRefiner,\n // parameter to store Display Template type\n rangeDisplayType: rangeParentDisplay[0]?.DisplayTemplateValue || undefined\n } as IRefinerMap;\n });\n }\n\n constructor(props: Readonly) {\n super(props);\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, '');\n }\n\n public render(): JSX.Element {\n const { clearAllText, label, classNames, choiceAriaLabel, closeAriaLabel } = this.props;\n const items = this.selectedRefinersMap;\n this.payLoad.contentAction.etext = clearAllText;\n const clearAllAttributes = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\n return (\n \n {items.length > 0 && label &&
{label}}\n
\n {items.map((item: IRefinerMap) => {\n this.payLoad.contentAction.etext = item.key;\n const attribute = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\n // Get range value for Range display and integer type only (not for Integer with TextBox(4) display)\n const rangeInteger =\n item.value.DataTypeValue === AttributeDataType.Integer &&\n item.rangeDisplayType &&\n item.rangeDisplayType === DisplayTemplate.Range &&\n item.value.RefinerRecordId !== 0;\n const newIntRange = rangeInteger\n ? item.key\n : item.value.LeftValueBoundString && item.value.LeftValueBoundLocalizedString === ''\n ? item.value.LeftValueBoundString\n : (item.value.LeftValueBoundLocalizedString || item.value.LeftValueBoundLocalizedString === undefined) &&\n item.value.RefinerRecordId === 0\n ? item.key\n : item.value.LeftValueBoundString;\n return (\n - \n \n {newIntRange}\n \n \n
\n );\n })}\n
\n {items.length > 0 && clearAllText && (\n
\n {clearAllText}\n \n )}\n \n {` `}\n {text}\n {` `}\n
\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ICoreContext, IGridSettings, IImageData, IImageSettings, Image, IRequestContext } from '@msdyn365-commerce/core';\nimport { SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { getFallbackImageUrl, getProductPageUrlSync } from '@msdyn365-commerce-modules/retail-actions';\nimport { getPayloadObject, getTelemetryAttributes, ITelemetryContent, onTelemetryClick } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ISearchResultContainerResources } from '../search-result-container.props.autogenerated';\n\n// Import { IComponent, IComponentProps, ICoreContext, IGridSettings, IImageData, IImageSettings, Image, msdyn365Commerce } from '@msdyn365-commerce/core';\n\ninterface IFeatureSearchResultItem {\n product: SimpleProduct | null;\n context: ICoreContext;\n resources: ISearchResultContainerResources;\n imageSettings?: IImageSettings;\n moduleType: string;\n moduleId: string;\n telemetryContent?: ITelemetryContent;\n recommendation?: string;\n}\n\nexport const FeatureSearchResultItem: React.FC = ({\n product,\n context,\n imageSettings,\n resources,\n telemetryContent,\n recommendation\n}) => {\n if (product === null) {\n return null;\n }\n\n const productName = product.Name;\n const productRecordId = product && product.RecordId ? product.RecordId : 0;\n const productUrl = getProductPageUrlSync(product.Name || '', productRecordId, context && context.actionContext, undefined);\n const fallbackImage = getFallbackImageUrl(\n product.ItemId,\n context.actionContext.requestContext.apiSettings,\n context.request.app?.config?.OmniChannelMedia\n );\n const heading =\n recommendation && recommendation === 'descriptions' ? resources.featureSimilarDescriptionTitle : resources.featureSimilarLooksTitle;\n\n // Construct telemetry attribute to render\n const payLoad = getPayloadObject('click', telemetryContent!, productName!, productRecordId.toString());\n\n const attribute = getTelemetryAttributes(telemetryContent!, payLoad);\n return (\n \n
\n \n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n product.PrimaryImageUrl,\n product.Name,\n fallbackImage,\n context.actionContext.requestContext\n )}\n
\n \n \n
{heading}
\n {renderProductTitle(product?.Name)}\n
{title}
;\n}\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\ninterface ILink {\n className?: string;\n text?: string;\n href?: string;\n ariaLabel?: string;\n}\n\nexport const Link: React.FC = ({ text, className, href, ariaLabel }) => (\n \n {' '}\n {text}{' '}\n \n);\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nexport interface ISearchResultModalViewProps {\n modal: React.ReactElement;\n modalHeader: React.ReactElement;\n modalFooter: React.ReactElement;\n modalBody: React.ReactElement;\n}\n\ninterface IModalToggleProps {\n innerRef: React.RefObject | undefined;\n id: string;\n text: string;\n ariaLabel: string;\n onClick(): void;\n}\n\nexport interface ISearchResultModalResources {\n modalTitle: string;\n modalCloseButtonText: string;\n}\n\nexport interface ISearchResultModalProps {\n resources: ISearchResultModalResources;\n isOpen: boolean;\n returnRef: React.RefObject | undefined;\n onModalToggle(): void;\n}\n\nexport const ModalToggle: React.FC = (props: IModalToggleProps) => {\n const { text, onClick, ariaLabel, innerRef, id } = props;\n return (\n \n );\n};\n\nexport const SearchResultModal = (props: ISearchResultModalProps): ISearchResultModalViewProps => {\n return {\n modal: modalNode(props),\n modalHeader: modalHeaderNode(props),\n modalFooter: modalFooterNode(props),\n modalBody: \n };\n};\n\nconst modalNode = (props: ISearchResultModalProps) => {\n return (\n \n );\n};\n\nconst modalHeaderNode = (props: ISearchResultModalProps) => {\n return {props.resources.modalTitle};\n};\n\nconst modalFooterNode = (props: ISearchResultModalProps) => {\n return (\n \n \n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductsDimensionsAvailabilities } from '@msdyn365-commerce/commerce-entities';\nimport { IPriceComponentResources, ProductComponent } from '@msdyn365-commerce/components';\nimport { ICoreContext, IImageSettings } from '@msdyn365-commerce/core';\nimport { ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ISearchResultContainerResources } from '../search-result-container.props.autogenerated';\n\ninterface IProductSearchResultItems {\n products: ProductSearchResult[];\n context: ICoreContext;\n resources: ISearchResultContainerResources;\n imageSettings?: IImageSettings;\n moduleType: string;\n moduleId: string;\n allowBackNavigation?: boolean;\n telemetryContent: ITelemetryContent;\n quickviewSlot?: {} | null | undefined;\n productComparisonButton?: {} | null | undefined;\n channelInventoryConfigurationId?: number;\n isPriceMinMaxEnabled?: boolean;\n productsDimensionAvailabilities?: IProductsDimensionsAvailabilities[][];\n}\n\n/**\n * Returns the product inventory label.\n * @param channelInventoryConfigurationId - The channel configuration Id.\n * @param product - The product.\n * @returns The inventory label.\n */\nexport function getInventoryLabel(channelInventoryConfigurationId: number | undefined, product: ProductSearchResult): string | undefined {\n if (!channelInventoryConfigurationId || !ArrayExtensions.hasElements(product.AttributeValues)) {\n return undefined;\n }\n const inventoryAttribute = product.AttributeValues.find(attribute => attribute.RecordId === channelInventoryConfigurationId);\n if (inventoryAttribute) {\n return inventoryAttribute.TextValue;\n }\n return undefined;\n}\n\nexport const ProductSearchResultItems: React.FC = ({\n products,\n context,\n imageSettings,\n resources,\n moduleType,\n moduleId,\n allowBackNavigation,\n telemetryContent,\n quickviewSlot,\n productComparisonButton,\n channelInventoryConfigurationId,\n isPriceMinMaxEnabled,\n productsDimensionAvailabilities\n}) => {\n const priceResources: IPriceComponentResources = {\n priceRangeSeparator: resources.priceRangeSeparator\n };\n return (\n \n {products.map((product: ProductSearchResult, index: number) => (\n - \n \n ArrayExtensions.hasElements(dimensionAvailability) &&\n dimensionAvailability[0].masterProductId === product.MasterProductId\n )}\n />\n
\n ))}\n
\n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ISliderLabel, ISliderThumbProps, Slider } from '@msdyn365-commerce-modules/utilities';\nimport debounce from 'lodash/debounce';\nimport { computed } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { IRefineItemProps, IRefineItemState } from './refine-item';\n\ntype InputType = 'Min' | 'Max';\n\nexport type RangeRefineItemType = 'slider' | 'input';\n\n/**\n * Range refine item properties.\n */\nexport interface IRangeRefineItemProps extends IRefineItemProps {\n rangeType: RangeRefineItemType;\n minValueSliderThumbAriaLabel?: string;\n maxValueSliderThumbAriaLabel?: string;\n sliderKey?: string;\n}\n\n/**\n * Range refine item state.\n */\nexport interface IRangeRefineItemState extends IRefineItemState {\n validationErrorMin: string | undefined;\n validationErrorMax: string | undefined;\n selectedMin: string | undefined;\n selectedMax: string | undefined;\n touchedMin: boolean;\n touchedMax: boolean;\n sliderId: string;\n minValue: string | undefined;\n maxValue: string | undefined;\n labels: ISliderLabel[];\n sliderThumbs: ISliderThumbProps[];\n}\n\n/**\n * RangeRefineItem component (controlled by RefineSubmenu).\n */\n@observer\nexport default class RangeRefineItem extends React.Component {\n private readonly _formattedPriceReverseLookup: Map = new Map();\n\n private readonly minInput: React.RefObject;\n\n private readonly maxInput: React.RefObject;\n\n @computed get currencyCode(): string {\n return this.props.productRefinerValue.UnitText || '';\n }\n\n public constructor(props: IRangeRefineItemProps) {\n super(props);\n this._onRangeUpdate = this._onRangeUpdate.bind(this);\n this._onRangeUpdateEnd = this._onRangeUpdateEnd.bind(this);\n this._handleRangeTooltipText = this._handleRangeTooltipText.bind(this);\n this._changeMin = this._changeMin.bind(this);\n this._changeMax = this._changeMax.bind(this);\n this._finishChangeMin = this._finishChangeMin.bind(this);\n this._finishChangeMax = this._finishChangeMax.bind(this);\n\n this.minInput = React.createRef();\n this.maxInput = React.createRef();\n\n const { selectedRefinementCriterion } = this.props;\n const initialMin = selectedRefinementCriterion?.LeftValueBoundString ?? '0';\n const initialMax = selectedRefinementCriterion?.RightValueBoundString;\n const sliderId = `slider_${String(this.props.parentProductRefinerHierarchy.RecordId)}_${String(\n this.props.productRefinerValue.RefinerRecordId\n )}`;\n const minValue = this.props.productRefinerValue.LeftValueBoundString;\n const maxValue = this.props.productRefinerValue.RightValueBoundString;\n const minPrice = this._formatPrice(minValue);\n const maxPrice = this._formatPrice(maxValue);\n const labels: ISliderLabel[] = this.getLabels(sliderId, minPrice, maxPrice);\n const selectedMin =\n this.props.selectedRefinementCriterion?.LeftValueBoundString ?? this.props.productRefinerValue.LeftValueBoundString ?? '0';\n const selectedMax =\n this.props.selectedRefinementCriterion?.RightValueBoundString ??\n this.props.productRefinerValue.RightValueBoundString ??\n maxValue;\n const selectedMinPrice = this._formatPrice(selectedMin);\n const selectedMaxPrice = this._formatPrice(selectedMax);\n const sliderKeyString = this.props.sliderKey ? `_${String(this.props.sliderKey)}` : '';\n const sliderThumbs: ISliderThumbProps[] = this.getSliderThumbs(\n sliderId,\n sliderKeyString,\n selectedMin,\n selectedMinPrice,\n selectedMax,\n selectedMaxPrice,\n maxPrice\n );\n this.state = {\n isChecked: false,\n validationErrorMin: undefined,\n validationErrorMax: undefined,\n selectedMin: initialMin,\n selectedMax: initialMax,\n touchedMin: false,\n touchedMax: false,\n sliderId,\n minValue,\n maxValue,\n labels,\n sliderThumbs\n };\n }\n\n public shouldComponentUpdate(nextProps: IRangeRefineItemProps, nextState: IRangeRefineItemState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public componentDidUpdate(previousProps: IRangeRefineItemProps): void {\n if (previousProps !== this.props) {\n this.updateSliderProps();\n }\n }\n\n public render(): JSX.Element | undefined {\n const { productRefinerValue, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\n\n if (!productRefinerValue || !parentProductRefinerHierarchy) {\n refineItemCommonProps.telemetry.error(\n 'Cannot render refine value range without productRefinerValue and parentProductRefinerHierarchy'\n );\n return undefined;\n }\n\n if (this.props.rangeType === 'input') {\n return this._renderInputFields();\n }\n\n return this._renderSlider();\n }\n\n /**\n * Function to update slider props.\n */\n private updateSliderProps(): void {\n const sliderId = `slider_${String(this.props.parentProductRefinerHierarchy.RecordId)}_${String(\n this.props.productRefinerValue.RefinerRecordId\n )}`;\n const minValue = this.props.productRefinerValue.LeftValueBoundString;\n const maxValue = this.props.productRefinerValue.RightValueBoundString;\n const minPrice = this._formatPrice(minValue);\n const maxPrice = this._formatPrice(maxValue);\n const labels: ISliderLabel[] = this.getLabels(sliderId, minPrice, maxPrice);\n const selectedMin =\n this.props.selectedRefinementCriterion?.LeftValueBoundString ?? this.props.productRefinerValue.LeftValueBoundString ?? '0';\n const selectedMax =\n this.props.selectedRefinementCriterion?.RightValueBoundString ??\n this.props.productRefinerValue.RightValueBoundString ??\n maxValue;\n const selectedMinPrice = this._formatPrice(selectedMin);\n const selectedMaxPrice = this._formatPrice(selectedMax);\n const sliderKeyString = this.props.sliderKey ? `_${String(this.props.sliderKey)}` : '';\n const sliderThumbs: ISliderThumbProps[] = this.getSliderThumbs(\n sliderId,\n sliderKeyString,\n selectedMin,\n selectedMinPrice,\n selectedMax,\n selectedMaxPrice,\n maxPrice\n );\n this.setState({ sliderId, minValue, maxValue, labels, sliderThumbs });\n }\n\n /**\n * Function to create the labels for slider.\n * @param sliderId - Slider element id for the DOM.\n * @param minPrice - Slider min value.\n * @param maxPrice - Slider max value.\n * @returns Array labels.\n */\n private readonly getLabels = (sliderId: string, minPrice: string, maxPrice: string): ISliderLabel[] => {\n return [\n {\n labelId: `${sliderId}_start`,\n labelString: `${minPrice}`,\n labelPositioning: 'start'\n },\n {\n labelId: `${sliderId}_end`,\n labelString: `${maxPrice}`,\n labelPositioning: 'end'\n }\n ];\n };\n\n /**\n * Function to create the slider thumbs for slider.\n * @param sliderId - Slider element id for the DOM.\n * @param sliderKey - Unique key for slider.\n * @param selectedMin - Slider selected min value.\n * @param selectedMinPrice - Slider selected min price.\n * @param selectedMax - Slider selected max value.\n * @param selectedMaxPrice - Slider selected max price..\n * @param maxPrice - Slider max price..\n * @returns Slider Thumb Props.\n */\n private readonly getSliderThumbs = (\n sliderId: string,\n sliderKey: string,\n selectedMin: string,\n selectedMinPrice: string,\n selectedMax: string | undefined,\n selectedMaxPrice: string,\n maxPrice: string\n ): ISliderThumbProps[] => {\n const sliderThumbDefaultValue = 0;\n return [\n {\n id: `${sliderId}${sliderKey}_slider_thumb_start`,\n value: (selectedMin && Number(selectedMin)) || sliderThumbDefaultValue,\n ariaLabel: `${this.props.minValueSliderThumbAriaLabel ?? ''} ${this.currencyCode}`,\n ariaValueText: `${selectedMinPrice}`\n },\n {\n id: `${sliderId}${sliderKey}_slider_thumb_end`,\n value: Number(selectedMax) || Number(maxPrice),\n ariaLabel: `${this.props.maxValueSliderThumbAriaLabel ?? ''} ${this.currencyCode}`,\n ariaValueText: `${selectedMaxPrice}`\n }\n ];\n };\n\n private _renderInputFields(): JSX.Element | undefined {\n const { isDisabled, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\n const { selectedMin, selectedMax, touchedMin, touchedMax, validationErrorMin, validationErrorMax } = this.state;\n\n const rangeAriaLabel = (refineItemCommonProps.rangeNameFormat || '{0}').replace('{0}', parentProductRefinerHierarchy.KeyName || '');\n const formAttrs = {\n 'aria-label': rangeAriaLabel,\n 'aria-disabled': isDisabled\n };\n\n // To enable price formatting of selected fields, this is the approach:\n // initial value: min=0 formatted as price, max=undefined\n // onFocus/onChange: convert to number (unformat) and mark as touched to indicate value is being edited\n // onBlur: validate and format entered value as price\n const minInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-min ${\n validationErrorMin ? 'refine-submenu__input-range--error' : ''\n }`;\n const maxInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-max ${\n validationErrorMax ? 'refine-submenu__input-range--error' : ''\n }`;\n const minLabelClassName = 'ms-refine-submenu__input-range-label refine-submenu__input-range-label-min';\n const maxLabelClassName = 'ms-refine-submenu__input-range-label refine-submenu__input-range-label-max';\n const formattedSelectedMin = this._getFormattedSelectedValue(selectedMin, touchedMin, validationErrorMin);\n const formattedSelectedMax = this._getFormattedSelectedValue(selectedMax, touchedMax, validationErrorMax);\n return (\n \n );\n }\n\n private _renderSlider(): JSX.Element | undefined {\n const { isDisabled, sliderKey } = this.props;\n const ariaAttributes = {\n 'aria-disabled': isDisabled\n };\n\n return (\n \n );\n }\n\n private _changeMin(event: React.FocusEvent): void {\n this._changeValue(event, 'Min');\n }\n\n private _changeMax(event: React.FocusEvent): void {\n this._changeValue(event, 'Max');\n }\n\n private _changeValue(event: React.FocusEvent, inputType: InputType): void {\n const selectedKey = `selected${inputType}`;\n const touchedKey = `touched${inputType}`;\n this.setState({\n [selectedKey]: this._getInputWithoutFormatting(event.currentTarget.value),\n [touchedKey]: true\n });\n }\n\n private _finishChangeMin(event: React.FocusEvent): boolean {\n const selectedMinValue = this._getInputWithoutFormatting(event.currentTarget.value);\n this.setState({\n selectedMin: selectedMinValue,\n minTouched: false\n });\n const minInput = Number(selectedMinValue);\n const {\n onToggle,\n parentProductRefinerHierarchy,\n productRefinerValue,\n refineItemCommonProps,\n selectedRefinementCriterion\n } = this.props;\n const max = (selectedRefinementCriterion && selectedRefinementCriterion.RightValueBoundString) || undefined;\n\n const maxNum = max ? Number(max) : undefined;\n\n if (isNaN(minInput)) {\n this.setState({ validationErrorMin: refineItemCommonProps.validationErrorNaN });\n this._focus('Min');\n return false;\n }\n\n if (this._validateRange(minInput, maxNum)) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true,\n rangeStart: minInput,\n rangeEnd: maxNum\n });\n return true;\n }\n this._focus('Min');\n\n return false;\n }\n\n private _finishChangeMax(event: React.FocusEvent): boolean {\n const selectedMaxValue = this._getInputWithoutFormatting(event.currentTarget.value);\n this.setState({\n selectedMax: selectedMaxValue,\n maxTouched: false\n });\n const maxInput = Number(selectedMaxValue);\n const {\n onToggle,\n parentProductRefinerHierarchy,\n productRefinerValue,\n refineItemCommonProps,\n selectedRefinementCriterion\n } = this.props;\n const min = (selectedRefinementCriterion && selectedRefinementCriterion.LeftValueBoundString) || '0';\n\n const minNum = Number(min);\n\n if (isNaN(maxInput)) {\n this.setState({ validationErrorMax: refineItemCommonProps.validationErrorNaN });\n this._focus('Max');\n return false;\n }\n\n if (this._validateRange(minNum, maxInput)) {\n if (productRefinerValue) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true,\n rangeStart: minNum,\n rangeEnd: maxInput\n });\n } else {\n this._focus('Max');\n }\n return true;\n }\n\n return false;\n }\n\n private _focus(inputType: InputType): void {\n const ref = inputType === 'Max' ? this.maxInput : this.minInput;\n\n setTimeout(() => {\n if (ref && ref.current) {\n ref.current.focus();\n }\n }, 50);\n }\n\n private _getFormattedSelectedValue(\n selected: string | undefined,\n touched: boolean,\n validationError: string | undefined\n ): string | undefined {\n if (touched || validationError || selected === undefined) {\n return selected;\n }\n return this._formatPrice(selected);\n }\n\n private _validateRange(min: number, max: number | undefined): boolean {\n const { refineItemCommonProps } = this.props;\n if (max === undefined) {\n return true;\n }\n\n if (min > max) {\n this.setState({\n validationErrorMin: refineItemCommonProps.validationErrorRange,\n validationErrorMax: refineItemCommonProps.validationErrorRange\n });\n return false;\n }\n\n return true;\n }\n\n private _formatPrice(amount: string | undefined): string {\n if (this.props.productRefinerValue.RefinerRecordId === 0) {\n const result = this.props.context.cultureFormatter.formatCurrency(Number(amount), this.currencyCode);\n return result;\n }\n return amount || '';\n }\n\n private _getInputWithoutFormatting(input: string): string {\n // First try to cast raw input to a number\n const inputAsNum = Number(input);\n if (!isNaN(inputAsNum)) {\n return input;\n }\n\n // Otherwise try a reverse lookup and fall back to the raw input if all else fails\n const reverseLookupResult = this._formattedPriceReverseLookup.get(input);\n return reverseLookupResult || input;\n }\n\n // NOTE: Fix types once Shared Components build pipeline bug fixed\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onRangeUpdate(sliderChangeNotification: any): void {\n // Need to filter out mousemove events as these cause errors after the menu updates and slider re-renders\n if (sliderChangeNotification.eventType !== 'mousemove') {\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue } = this.props;\n if (productRefinerValue && sliderChangeNotification) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true,\n rangeStart: sliderChangeNotification.firstThumbValue,\n rangeEnd: sliderChangeNotification.secondThumbValue\n });\n\n this._focusOnSliderThumb(sliderChangeNotification);\n }\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onRangeUpdateEnd(sliderChangeNotification: any): void {\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue } = this.props;\n if (productRefinerValue && sliderChangeNotification) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true,\n rangeStart: sliderChangeNotification.firstThumbValue,\n rangeEnd: sliderChangeNotification.secondThumbValue\n });\n\n this._focusOnSliderThumb(sliderChangeNotification);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _focusOnSliderThumb(sliderChangeNotification: any): void {\n if (sliderChangeNotification.id) {\n const element = document.getElementById(`${sliderChangeNotification.id}range`);\n if (element) {\n setTimeout(() => {\n element.focus();\n }, 0);\n }\n }\n }\n\n private _handleRangeTooltipText(tooltip: number): string {\n return this._formatPrice(`${tooltip}`);\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { RatingComponent, SwatchComponent } from '@msdyn365-commerce/components';\nimport { IAny, ICoreContext, IGeneric } from '@msdyn365-commerce/core';\nimport {\n AttributeDataType,\n DisplayTemplate,\n ProductRefinerSource,\n ProductRefinerValue,\n RefinerType\n} from '@msdyn365-commerce/retail-proxy';\nimport { checkIfShouldDisplayAsSwatch, DimensionTypes, IDimensionsApp, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { format, getPayloadObject, getTelemetryAttributes, IPayLoad, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { IRefineItemCommonProps } from './refine-item.props.common';\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\nimport { getIntegerRangeName, isSingleSelectRangeTypeIntegerSelected } from './utilities';\n\n/**\n * RefineItem properties.\n */\nexport interface IRefineItemProps {\n parentProductRefinerHierarchy: IProductRefinerHierarchy;\n productRefinerValue: ProductRefinerValue;\n selectedRefinementCriterion: ProductRefinerValue | undefined;\n selectedRefinerValues?: ProductRefinerValue[];\n refineItemCommonProps: IRefineItemCommonProps;\n isDisabled: boolean;\n context: ICoreContext>;\n moduleId: string;\n moduleTypeName: string;\n index?: number;\n productCountAriaLabel?: string;\n singleProductCountAriaLabel?: string;\n refineItemAriaLabel?: string;\n refineItemsAriaLabel?: string;\n isMobileView?: boolean;\n\n /**\n * The telemetry content\n */\n telemetryContent?: ITelemetryContent;\n onToggle(notfication: Readonly): void;\n urlBuilder(refiner: IRefineItemToggleNotification): string;\n}\n\n/**\n * Refine item state.\n */\nexport interface IRefineItemState extends React.ComponentState {\n isChecked: boolean;\n renderingError?: object;\n}\n\n/**\n * Single-select and multi-select refine item component (controlled by RefineSubmenu).\n */\nexport default class RefineItem extends React.Component {\n private readonly anchorType: React.RefObject;\n\n private readonly payLoad: IPayLoad;\n\n public constructor(props: IRefineItemProps) {\n super(props);\n this._onClick = this._onClick.bind(this);\n this.state = {\n isChecked: !!this.props.selectedRefinementCriterion\n };\n this.anchorType = React.createRef();\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, '');\n }\n\n public shouldComponentUpdate(nextProps: IRefineItemProps, nextState: IRefineItemState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | undefined {\n const {\n isDisabled,\n refineItemCommonProps,\n parentProductRefinerHierarchy,\n productRefinerValue,\n selectedRefinementCriterion,\n productCountAriaLabel,\n singleProductCountAriaLabel,\n index,\n children,\n onToggle,\n context,\n telemetryContent,\n refineItemAriaLabel,\n refineItemsAriaLabel,\n ...attrs\n } = this.props;\n if (!productRefinerValue) {\n refineItemCommonProps.telemetry.error('[refine-item] Cannot render refineItem without productRefinerValue');\n return undefined;\n }\n if (!productRefinerValue.LeftValueBoundString) {\n refineItemCommonProps.telemetry.warning(\n `[refine-item] RefineItem without LeftValueBoundString: ${JSON.stringify(productRefinerValue)}`\n );\n }\n const isSingleSelect = parentProductRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect;\n let itemTypeClassName = isSingleSelect ? 'single-select' : 'multi-select';\n itemTypeClassName = `ms-refine-submenu-item ${itemTypeClassName}`;\n const inputType = isSingleSelect ? 'radio' : 'checkbox';\n const isChecked = !!selectedRefinementCriterion;\n itemTypeClassName = isChecked ? `${itemTypeClassName}-checked` : itemTypeClassName;\n if (parentProductRefinerHierarchy.SourceValue === ProductRefinerSource.Rating) {\n return this._renderRating(\n productRefinerValue,\n parentProductRefinerHierarchy,\n isChecked,\n context,\n index,\n telemetryContent,\n productCountAriaLabel,\n singleProductCountAriaLabel\n );\n }\n this.payLoad.contentAction.etext = productRefinerValue.LeftValueBoundLocalizedString ?? productRefinerValue.LeftValueBoundString;\n const attribute = getTelemetryAttributes(telemetryContent!, this.payLoad);\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string.\n const productText = productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString || '';\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string.\n const productCount = productRefinerValue.Count || 0;\n let refineMenuItemAriaLabel;\n if (productCount === 1) {\n refineMenuItemAriaLabel = refineItemAriaLabel\n ? format(refineItemAriaLabel, parentProductRefinerHierarchy.KeyName, productText)\n : '';\n } else {\n refineMenuItemAriaLabel = refineItemsAriaLabel\n ? format(refineItemsAriaLabel, parentProductRefinerHierarchy.KeyName, productText, productCount)\n : '';\n }\n\n const dimensionType = (this.props.parentProductRefinerHierarchy.KeyName?.toLocaleLowerCase() ?? '') as DimensionTypes;\n const shouldDisplayAsSwatch = this._getShouldDisplayAsSwatch(dimensionType);\n\n let className = 'ms-refine-submenu-item';\n if (shouldDisplayAsSwatch) {\n className = classnames(className, `ms-refine-submenu-item__dimension__${dimensionType}`);\n }\n\n // If the swatch has no color or image specified, it should be displayed as text.\n // We don't use swatch logic to display the number of the results found together with the text.\n const hasColor = !StringExtensions.isNullOrWhitespace(productRefinerValue.SwatchColorHexCode);\n const hasImage = !StringExtensions.isNullOrWhitespace(productRefinerValue.SwatchImageUrl);\n const hasContentSwatch = hasColor || hasImage;\n if (\n parentProductRefinerHierarchy.DataTypeValue === AttributeDataType.Integer &&\n parentProductRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range\n ) {\n const rangeValue = getIntegerRangeName(productRefinerValue);\n return (\n \n \n \n {rangeValue}\n {productRefinerValue.Count !== undefined && ` (${productRefinerValue.Count})`}\n \n \n \n );\n } else {\n return (\n \n \n {hasContentSwatch && shouldDisplayAsSwatch && this._renderSwatch(dimensionType)}\n \n {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string. */}\n {productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString}\n {productRefinerValue.Count !== undefined && ` (${productRefinerValue.Count})`}\n \n \n \n );\n }\n }\n\n private _getShouldDisplayAsSwatch(dimensionType: DimensionTypes) {\n const shouldDisplayAsSwatch = checkIfShouldDisplayAsSwatch(dimensionType, this.props.context as ICoreContext);\n return shouldDisplayAsSwatch;\n }\n\n private _renderSwatch(dimensionType: DimensionTypes): JSX.Element | null {\n const productRefinerValue = this.props.productRefinerValue;\n\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string.\n const text = productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString || '';\n const swatchItems = [\n {\n itemId: `${productRefinerValue.RefinerRecordId ?? ''}-${dimensionType}-${text}`,\n value: text,\n dimensionType,\n colorHexCode: productRefinerValue.SwatchColorHexCode,\n imageUrl: productRefinerValue.SwatchImageUrl\n }\n ];\n\n return (\n \n );\n }\n\n private _getRefinerUrl(): string {\n const { urlBuilder, parentProductRefinerHierarchy, productRefinerValue, selectedRefinementCriterion } = this.props;\n\n if (productRefinerValue) {\n return urlBuilder({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: !selectedRefinementCriterion\n });\n }\n\n return '';\n }\n\n private readonly _onClick = (e: React.MouseEvent): void => {\n e.preventDefault();\n\n const { parentProductRefinerHierarchy, productRefinerValue, selectedRefinementCriterion } = this.props;\n if (productRefinerValue) {\n this.props.onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: !selectedRefinementCriterion\n });\n\n setTimeout(() => {\n this.anchorType.current && this.anchorType.current.focus();\n }, 0);\n }\n };\n\n private _renderRating(\n productRefinerValue: ProductRefinerValue,\n parentProductRefinerHierarchy: IProductRefinerHierarchy,\n isChecked: boolean,\n context: ICoreContext,\n index?: number,\n telemetryContent?: ITelemetryContent,\n ratingUserCountAriaLabel?: string,\n ratingSingleUserCountAriaLabel?: string\n ): JSX.Element | undefined {\n if (productRefinerValue.LeftValueBoundString) {\n this.payLoad.contentAction.etext = productRefinerValue.LeftValueBoundLocalizedString;\n const attribute = getTelemetryAttributes(telemetryContent!, this.payLoad);\n const refinerRating = Number.parseInt(productRefinerValue.LeftValueBoundString, 10);\n const ratingRefiner = this.props.selectedRefinerValues?.find(\n value => value.DataTypeValue === productRefinerValue.DataTypeValue\n );\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string.\n const selectedRating = Number.parseInt(ratingRefiner?.LeftValueBoundString || '0', 10);\n const defaultChkProductCount = 1;\n let ratingComponentClass: string = 'ms-rating-component';\n if (refinerRating > selectedRating) {\n ratingComponentClass = `${ratingComponentClass}__up`;\n } else if (refinerRating < selectedRating) {\n ratingComponentClass = `${ratingComponentClass}__down`;\n } else {\n ratingComponentClass = `${ratingComponentClass}__current`;\n }\n const productCountAriaLabelValue =\n productRefinerValue.Count !== undefined && productRefinerValue.Count === defaultChkProductCount\n ? ratingSingleUserCountAriaLabel && format(ratingSingleUserCountAriaLabel, productRefinerValue.Count)\n : ratingUserCountAriaLabel && format(ratingUserCountAriaLabel, productRefinerValue.Count);\n return (\n \n \n \n \n {productRefinerValue.Count !== undefined && `(${productRefinerValue.Count})`}\n \n \n \n );\n }\n return undefined;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { isUndefined } from 'lodash';\nimport { ProductRefinerValue } from '@msdyn365-commerce/retail-proxy';\nimport { Button } from '@msdyn365-commerce-modules/utilities';\nimport { IRefineItemState } from './refine-item';\nimport { isCustomRangeTypeIntegerSelected } from './utilities';\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { IRefineItemCommonProps } from './refine-item.props.common';\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\n\nexport type RangeRefineItemInputType = 'slider' | 'input';\n\n/**\n * Range refine item properties.\n */\nexport interface IRangeRefineItemInputProps {\n parentProductRefinerHierarchy: IProductRefinerHierarchy;\n selectedRefinementCriterion: ProductRefinerValue | undefined;\n refineItemCommonProps: IRefineItemCommonProps;\n isDisabled: boolean;\n rangeType: RangeRefineItemInputType;\n\n /**\n * The telemetry content\n */\n onToggle(notfication: Readonly): void;\n}\n\n/**\n * Range refine item state.\n */\nexport interface IRangeRefineItemInputState extends IRefineItemState {\n validationErrorMin: string | undefined;\n validationErrorMax: string | undefined;\n selectedMin: string | undefined;\n selectedMax: string | undefined;\n invalidData: boolean | undefined;\n}\n\n/**\n * RangeRefineItem component (controlled by RefineSubmenu).\n */\n@observer\nexport default class RangeRefineItemInput extends React.Component {\n private readonly _formattedPriceReverseLookup: Map = new Map();\n\n private readonly minInput: React.RefObject;\n\n private readonly maxInput: React.RefObject;\n\n public constructor(props: IRangeRefineItemInputProps) {\n super(props);\n this._changeMinInputRange = this._changeMinInputRange.bind(this);\n this._changeMaxInputRange = this._changeMaxInputRange.bind(this);\n this._applyCustom = this._applyCustom.bind(this);\n\n this.minInput = React.createRef();\n this.maxInput = React.createRef();\n let initialMin = '';\n let initialMax = '';\n const { selectedRefinementCriterion, parentProductRefinerHierarchy } = this.props;\n if (selectedRefinementCriterion) {\n initialMin = isCustomRangeTypeIntegerSelected(selectedRefinementCriterion, parentProductRefinerHierarchy)\n ? ''\n : selectedRefinementCriterion?.LeftValueBoundString || '';\n initialMax = isCustomRangeTypeIntegerSelected(selectedRefinementCriterion, parentProductRefinerHierarchy)\n ? ''\n : selectedRefinementCriterion?.RightValueBoundString || '';\n }\n\n this.state = {\n validationErrorMin: undefined,\n validationErrorMax: undefined,\n selectedMin: initialMin,\n selectedMax: initialMax,\n invalidData: !(initialMin && initialMax),\n isChecked: false\n };\n }\n\n public shouldComponentUpdate(nextProps: IRangeRefineItemInputProps, nextState: IRangeRefineItemInputState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n nextState.invalidData = !(nextState.selectedMin && nextState.selectedMax);\n return true;\n }\n\n public componentDidUpdate(previousProps: IRangeRefineItemInputProps): void {\n if (previousProps !== this.props) {\n this.updateInputRangerProps();\n }\n }\n\n public render(): JSX.Element | undefined {\n if (this.props.rangeType === 'input') {\n return this._renderInputFields();\n }\n return undefined;\n }\n\n // /**\n // * Function to update slider props.\n // */\n private updateInputRangerProps(): void {\n const selectedMin = !isUndefined(this.props.selectedRefinementCriterion?.RowNumber)\n ? ''\n : this.props.selectedRefinementCriterion?.LeftValueBoundString;\n const selectedMax = !isUndefined(this.props.selectedRefinementCriterion?.RowNumber)\n ? ''\n : this.props.selectedRefinementCriterion?.RightValueBoundString;\n this.setState({ selectedMin, selectedMax });\n }\n\n private _renderInputFields(): JSX.Element | undefined {\n const { isDisabled, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\n const { validationErrorMin, validationErrorMax } = this.state;\n\n const rangeAriaLabel = (refineItemCommonProps.rangeNameFormat || '{0}').replace('{0}', parentProductRefinerHierarchy.KeyName || '');\n const formAttrs = {\n 'aria-label': rangeAriaLabel,\n 'aria-disabled': isDisabled\n };\n\n const minInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-min ${\n validationErrorMin ? 'refine-submenu__input-range--error' : ''\n }`;\n const maxInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-max ${\n validationErrorMax ? 'refine-submenu__input-range--error' : ''\n }`;\n return (\n \n \n \n );\n }\n\n private _applyCustom(event: React.MouseEvent): void {\n const selectedMinValue = this._getInputWithoutFormatting(this.state.selectedMin || '');\n this.setState({\n selectedMin: selectedMinValue,\n minTouched: false\n });\n const minInput = Number(selectedMinValue);\n const { onToggle, parentProductRefinerHierarchy } = this.props;\n const max = this.state.selectedMax;\n\n const maxNum = max ? Number(max) : undefined;\n const productRefinerValue: ProductRefinerValue = {\n RefinerRecordId: parentProductRefinerHierarchy.Values[0].RefinerRecordId,\n LeftValueBoundString: this.state.selectedMin,\n RightValueBoundString: this.state.selectedMax,\n DataTypeValue: parentProductRefinerHierarchy.DataTypeValue,\n RefinerSourceValue: parentProductRefinerHierarchy.Values[0].RefinerSourceValue\n };\n\n if (this._validateRange(minInput, maxNum)) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true\n });\n }\n }\n\n private _changeMinInputRange(event: React.ChangeEvent): void {\n this.setState({\n selectedMin: event.target.value.trim()\n });\n }\n\n private _changeMaxInputRange(event: React.ChangeEvent): void {\n this.setState({\n selectedMax: event.target.value.trim()\n });\n }\n\n private _validateRange(min: number, max: number | undefined): boolean {\n const { refineItemCommonProps } = this.props;\n if (max === undefined) {\n return true;\n }\n\n if (min > max) {\n this.setState({\n validationErrorMin: refineItemCommonProps.validationErrorRange,\n validationErrorMax: refineItemCommonProps.validationErrorRange\n });\n return false;\n }\n\n return true;\n }\n\n private _getInputWithoutFormatting(input: string): string {\n // First try to cast raw input to a number\n const inputAsNum = Number(input);\n if (!isNaN(inputAsNum)) {\n return input;\n }\n\n // Otherwise try a reverse lookup and fall back to the raw input if all else fails\n const reverseLookupResult = this._formattedPriceReverseLookup.get(input);\n return reverseLookupResult || input;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { IAny, ICoreContext, IGeneric } from '@msdyn365-commerce/core';\nimport {\n AttributeDataType,\n DisplayTemplate,\n ProductRefinerSource,\n ProductRefinerValue,\n RefinerType\n} from '@msdyn365-commerce/retail-proxy';\nimport { Button, Collapse, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport RangeRefineItem, { RangeRefineItemType } from './range-refine-item';\nimport RefineItem from './refine-item';\nimport { IRefineItemCommonProps } from './refine-item.props.common';\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\nimport { findMatchingRefinementCriterion, isRangeTypeForInteger } from './utilities';\nimport RangeRefineItemInput from './range-refine-item-input';\n\n/**\n * Properties associated with the RefineSubmenu component.\n */\nexport interface IRefineSubmenuProps {\n tempRangeTypeTODO: RangeRefineItemType;\n minValueSliderThumbAriaLabel?: string;\n maxValueSliderThumbAriaLabel?: string;\n productRefinerHierarchy: IProductRefinerHierarchy;\n selectedRefinerValues: ProductRefinerValue[];\n refineItemCommonProps: IRefineItemCommonProps;\n isDisabled: boolean;\n isExpandedOnInitialLoad: boolean;\n context: ICoreContext>;\n moduleId: string;\n moduleTypeName: string;\n productCountAriaLabel?: string;\n singleProductCountAriaLabel?: string;\n refineItemAriaLabel?: string;\n refineItemsAriaLabel?: string;\n isMobile?: boolean;\n\n /**\n * The telemetry content\n */\n telemetryContent?: ITelemetryContent;\n onUpdateRefiners(notfication: Readonly): void;\n urlBuilder(refiner: IRefineItemToggleNotification): string;\n}\n\n/**\n * Refine submenu state.\n */\nexport interface IRefineSubmenuState extends React.ComponentState {\n expanded: boolean;\n}\n\n/**\n *\n * The RefineSubmenu component renders the submenu category and child items.\n * This computed observes the stateful category hierarchy object.\n * @extends {React.PureComponent}\n */\nclass RefineSubmenu extends React.Component {\n constructor(props: IRefineSubmenuProps) {\n super(props);\n\n this._onToggleItem = this._onToggleItem.bind(this);\n this._onToggleSubmenu = this._onToggleSubmenu.bind(this);\n\n const isExpanded = this.props.isExpandedOnInitialLoad;\n\n this.state = {\n expanded: isExpanded\n };\n }\n\n public shouldComponentUpdate(nextProps: IRefineSubmenuProps, nextState: IRefineSubmenuState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | null {\n const { productRefinerHierarchy, refineItemCommonProps } = this.props;\n\n if (!productRefinerHierarchy) {\n refineItemCommonProps.telemetry.error('Cannot render submenu without refiner hierarchy data');\n }\n\n if (productRefinerHierarchy.SourceValue === ProductRefinerSource.Rating && this.props.context.app.config.hideRating) {\n return null;\n }\n\n const className = classnames(\n 'ms-refine-submenu',\n 'list-group',\n productRefinerHierarchy.KeyName // Deprecated because of the localization issues. Leaving for backward compatibility reasons.\n );\n\n return (\n \n \n {productRefinerHierarchy.KeyName}\n \n \n {this._renderChildItems(productRefinerHierarchy)}\n \n
\n );\n }\n\n private _renderChildItems(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\n if (\n productRefinerHierarchy.DataTypeValue === AttributeDataType.Integer &&\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range\n ) {\n return this._renderSingleMultiSelect(productRefinerHierarchy);\n }\n // Check if is of integer range type\n if (isRangeTypeForInteger(productRefinerHierarchy.DataTypeValue)) {\n return this._renderRange(productRefinerHierarchy);\n }\n return this._renderSingleMultiSelect(productRefinerHierarchy);\n }\n\n private _renderSingleMultiSelect(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\n const {\n isDisabled,\n refineItemCommonProps,\n selectedRefinerValues,\n context,\n productCountAriaLabel,\n singleProductCountAriaLabel,\n refineItemAriaLabel,\n refineItemsAriaLabel,\n isMobile\n } = this.props;\n const isSingleSelect =\n productRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect &&\n productRefinerHierarchy.SourceValue === ProductRefinerSource.Rating;\n const role = isSingleSelect ? { role: 'listbox' } : undefined;\n let selectedRefinementCriterion: ProductRefinerValue | undefined = {};\n const refinerValuesList = productRefinerHierarchy.Values || [];\n const listItems = refinerValuesList.map((child: ProductRefinerValue, index: number) => {\n if (!child) {\n refineItemCommonProps.telemetry.error(\n `[refine-submenu] Could not render refine item for refiner ${productRefinerHierarchy.RecordId} (${productRefinerHierarchy.KeyName})`\n );\n return null;\n }\n\n selectedRefinementCriterion = findMatchingRefinementCriterion(child, selectedRefinerValues);\n return (\n \n refinerValuesList.find(value => value.RefinerRecordId === selectedValue.RefinerRecordId)\n )}\n refineItemCommonProps={refineItemCommonProps}\n onToggle={this._onToggleItem}\n urlBuilder={this.props.urlBuilder}\n isDisabled={isDisabled}\n key={index}\n index={index}\n context={context}\n moduleId={this.props.moduleId}\n moduleTypeName={this.props.moduleTypeName}\n telemetryContent={this.props.telemetryContent}\n productCountAriaLabel={productCountAriaLabel}\n refineItemAriaLabel={refineItemAriaLabel}\n refineItemsAriaLabel={refineItemsAriaLabel}\n singleProductCountAriaLabel={singleProductCountAriaLabel}\n isMobileView={isMobile}\n />\n );\n });\n return (\n \n {listItems}\n {productRefinerHierarchy.DataTypeValue === AttributeDataType.Integer &&\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range && (\n \n )}\n \n );\n }\n\n private _getRangeType(productRefinerHierarchy: IProductRefinerHierarchy): 'input' | 'slider' {\n if (\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range ||\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Slider ||\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.SliderWithBars\n ) {\n return 'slider';\n }\n return 'input';\n }\n\n private _renderRange(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\n const {\n isDisabled,\n refineItemCommonProps,\n selectedRefinerValues,\n context,\n minValueSliderThumbAriaLabel,\n maxValueSliderThumbAriaLabel\n } = this.props;\n const submenuClassNamePrefix = 'ms-refine-submenu__item list-group-item refine-submenu__item';\n const refinerValuesList = productRefinerHierarchy.Values || [];\n const listItems = refinerValuesList.map((child: ProductRefinerValue, index: number) => {\n if (!child) {\n refineItemCommonProps.telemetry.error(\n `Could not render refine item for refiner ${productRefinerHierarchy.RecordId} (${productRefinerHierarchy.KeyName})`\n );\n return null;\n }\n\n const selectedRefinementCriterion = findMatchingRefinementCriterion(child, selectedRefinerValues);\n\n const rangeType = this._getRangeType(productRefinerHierarchy);\n const key = selectedRefinementCriterion\n ? `${selectedRefinementCriterion.LeftValueBoundString}-${selectedRefinementCriterion.RightValueBoundString}`\n : `not-selected-${index}`;\n return (\n \n \n \n );\n });\n return ;\n }\n\n private _onToggleItem(itemToggleNotification: IRefineItemToggleNotification): void {\n this.props.onUpdateRefiners(itemToggleNotification);\n }\n\n private _onToggleSubmenu(): void {\n this.setState(prevState => ({\n expanded: !prevState.expanded\n }));\n }\n}\n\nexport default RefineSubmenu;\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\ninterface ISeparator {\n separator: string;\n}\n\nexport const Separator: React.FC = ({ separator }) => (\n \n {` `}\n {separator}\n {` `}\n \n);\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\ninterface ITitle {\n className: string;\n text: string;\n}\n\nexport const Title: React.FC = ({ text, className }) => (\n \n {` `}\n {text}\n {` `}\n \n);\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n CategoryHierarchy as CategoryHierarchyData,\n IProductRefinerHierarchy,\n IProductsDimensionsAvailabilities\n} from '@msdyn365-commerce/commerce-entities';\nimport MsDyn365, { getCatalogId, ICoreContext } from '@msdyn365-commerce/core';\nimport {\n ChannelInventoryConfiguration,\n format,\n ProductPrice,\n ProductRefinerValue,\n SortColumn,\n StoreOperationsDataActions,\n TextValueTranslation\n} from '@msdyn365-commerce/retail-proxy';\nimport {\n ArrayExtensions,\n DimensionAvailabilitiesForProductSearchResultInput,\n DimensionTypes,\n DimensionSwatchDisplayTypes,\n getDimensionAvailabilitiesForProductSearchResultAction,\n getPriceForProductSearchResult,\n IDimensionsApp,\n PriceForProductSearchResultInput,\n ObjectExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getTelemetryObject,\n ILabeledDropdownOnChangeNotification,\n ILabeledDropdownOption,\n IModuleProps,\n INodeProps,\n isMobile,\n ITelemetryContent,\n LabeledDropdown,\n UncontrolledPagination,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { action, computed, observable, reaction, transaction } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport {\n buildListPageUrl,\n getCollectionProducts,\n getCollectionRefinersAction,\n getCurrentUrl,\n GetFullProductsByCollectionInput,\n IFullProductsSearchResultsWithCount,\n parseQueryParam,\n ProductListInventoryFilteringOptions,\n RefinersByCollectionInput,\n sortOptions\n} from './actions';\nimport { hydrateRefinersFromUrl } from './actions/url-utils';\nimport {\n ErrorMessage,\n FeatureSearchResultItem,\n getUpdatedRefinementCriteria,\n IChoiceSummaryClickNotification,\n IRefineItemCommonProps,\n IRefineItemToggleNotification,\n ISearchResultModalViewProps,\n isMatchingRefinementCriterion,\n Link,\n ModalToggle,\n ProductSearchResultItems,\n SearchResultModal,\n Separator,\n Title\n} from './components';\nimport ChoiceSummary from './components/choice-summary';\nimport RefineSubmenu from './components/refine-submenu';\nimport { ListPageState } from './list-page-state';\nimport { ISearchResultContainerData } from './search-result-container.data';\nimport { expandRefinersCount, ISearchResultContainerProps } from './search-result-container.props.autogenerated';\n\nexport interface ISearchResultContainerViewProps extends ISearchResultContainerProps {\n products?: React.ReactNode;\n className?: string;\n SearchResultContainer: IModuleProps;\n TitleViewProps: ITitleViewProps;\n categoryHierarchy: ICategoryHierarchyViewProps;\n pagination?: React.ReactNode;\n ProductsContainer: INodeProps;\n ProductSectionContainer: INodeProps;\n refineMenu: IRefineMenuViewProps;\n sortByOptions: ISortByViewProps;\n choiceSummary?: React.ReactNode;\n modalToggle: React.ReactNode;\n searchResultModal: ISearchResultModalViewProps;\n isMobile: boolean;\n CategoryNavContainer: INodeProps;\n RefineAndProductSectionContainer: INodeProps;\n errorMessage: React.ReactNode;\n FeatureSearchContainer: INodeProps;\n similarLookProduct?: React.ReactNode;\n productPrices?: ProductPrice[];\n productsDimensionAvailabilities?: IProductsDimensionsAvailabilities[][];\n}\n\nexport interface ITitleViewProps {\n TitleContainer: INodeProps;\n title: ISearchResultTitle;\n}\n\nexport interface IRefineMenuViewProps {\n RefineMenuContainer: INodeProps;\n RefinerSectionContainer: INodeProps;\n refiners?: React.ReactNode[];\n}\n\nexport interface ICategoryHierarchyViewProps {\n categoryHierarchyList?: React.ReactNode[];\n categoryHierarchySeparator?: React.ReactNode;\n CategoryHierarchyContainer: INodeProps;\n}\n\nexport interface ISortByViewProps {\n SortingContainer: INodeProps;\n sortByDropDown?: React.ReactNode;\n}\n\nexport type GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Title component for search result container.\n */\nexport interface ISearchResultTitle {\n titlePrefix?: React.ReactNode;\n titleText?: React.ReactNode;\n titleCount?: React.ReactNode;\n}\n\nexport interface ISearchResultContainerState {\n sortingState: ISortByCollectionState;\n modalIsOpen: boolean;\n refiners: IProductRefinerHierarchy[];\n productsDimensionAvailabilities?: IProductsDimensionsAvailabilities[][];\n channelInventoryConfiguration?: ChannelInventoryConfiguration;\n}\n\ninterface ISortByCollectionState {\n selectedSortByOption: ILabeledDropdownOption;\n pending: boolean;\n}\n\n/**\n *\n * SearchResultContainer component.\n * @extends {React.PureComponent>}\n */\n@observer\nexport default class SearchResultContainer extends React.PureComponent<\n ISearchResultContainerProps,\n ISearchResultContainerState\n> {\n @computed get isMobile(): boolean {\n return this._viewport === 'xs' || this._viewport === 'sm';\n }\n\n private readonly sortByDropdownOptions: ILabeledDropdownOption[] = [\n { key: sortOptions.sortByOptionRelevanceDesc, value: this.props.resources.sortByOptionRelevanceDesc },\n { key: sortOptions.sortByOptionNameAsc, value: this.props.resources.sortByOptionNameAsc },\n { key: sortOptions.sortByOptionNameDesc, value: this.props.resources.sortByOptionNameDesc },\n { key: sortOptions.sortByOptionPriceAsc, value: this.props.resources.sortByOptionPriceAsc },\n { key: sortOptions.sortByOptionPriceDesc, value: this.props.resources.sortByOptionPriceDesc },\n { key: sortOptions.sortByOptionRatingDesc, value: this.props.resources.sortByOptionRatingDesc },\n { key: sortOptions.sortByOptionBestSelling, value: this.props.resources.sortByOptionBestSelling },\n { key: sortOptions.sortByOptionNewScore, value: this.props.resources.sortByOptionNewScore },\n { key: sortOptions.sortByOptionTrendingScore, value: this.props.resources.sortByOptionTrendingScore }\n ];\n\n private readonly _refineItemCommonProps: IRefineItemCommonProps;\n\n private readonly _pageType: string | undefined = this.props.context.request.urlTokens.pageType;\n\n @observable\n private _viewport: GridSize = 'lg';\n\n private readonly _modalToggleRef: React.RefObject;\n\n private readonly _sortAndFilterContainerRef: React.RefObject;\n\n private expandrefinerCount: number | undefined = 0;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly productPrices: ProductPrice[];\n\n private readonly defaultPageNumber = 0;\n\n private readonly catalogId = getCatalogId(this.props.context.request);\n\n private isListPageStateUpdated: boolean = false;\n\n private _isMounted: boolean = false;\n\n public static getFriendlyName(locale: string, nameTranslations?: TextValueTranslation[]): string | undefined {\n let nameTranslation: TextValueTranslation | undefined;\n if (locale && nameTranslations && ArrayExtensions.hasElements(nameTranslations)) {\n nameTranslation = nameTranslations.find(item => item.Language!.toLowerCase() === locale.toLowerCase());\n }\n\n return nameTranslation?.Text;\n }\n\n public constructor(props: ISearchResultContainerProps, state: ISearchResultContainerState) {\n super(props);\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Check required.\n this._viewport = props.context.request?.device?.Type === 'Mobile' ? 'xs' : 'lg';\n this._modalToggleRef = React.createRef();\n this._sortAndFilterContainerRef = React.createRef();\n this._toggleModal = this._toggleModal.bind(this);\n this._updateViewport = this._updateViewport.bind(this);\n this.productPrices = [];\n this.state = {\n sortingState: {\n pending: false,\n selectedSortByOption: this.sortByDropdownOptions[0]\n },\n modalIsOpen: false,\n refiners: [],\n channelInventoryConfiguration: undefined\n };\n const { placeholderTextMax, minLabel, maxLabel, rangeNameFormat } = this.props.resources;\n\n const locale = this.props.context.request.locale;\n const telemetry = this.props.telemetry;\n const validationErrorNaN = this.props.resources.validationErrorNotNumber;\n const validationErrorRange = this.props.resources.validationErrorNotRange;\n this._refineItemCommonProps = {\n telemetry,\n locale,\n placeholderTextMax,\n minLabel,\n maxLabel,\n rangeNameFormat,\n validationErrorNaN,\n validationErrorRange\n };\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this._updateViewport();\n }\n public async componentDidMount(): Promise {\n this._isMounted = true;\n if (MsDyn365.isBrowser && window.addEventListener) {\n window.addEventListener('resize', this._updateViewport);\n this._updateViewport();\n }\n\n const listPageState = await this.props.data.listPageState;\n const products = await this.props.data.products;\n const channelInventoryConfiguration = await StoreOperationsDataActions.getInventoryConfigurationAsync({\n callerContext: this.props.context.actionContext\n });\n if (this._isMounted) {\n this.setState({ channelInventoryConfiguration });\n }\n\n this._updateListPageState(listPageState, products);\n\n // Initialize reaction based on listPageState properties\n reaction(\n () => {\n return [\n listPageState.activeFilters?.length,\n listPageState.currentPageNumber,\n ArrayExtensions.hasElements(listPageState.sortingCritera?.Columns)\n ];\n },\n async () => {\n const newListPageState = await this.props.data.listPageState;\n const input = new GetFullProductsByCollectionInput(\n newListPageState.pageType,\n this.props.context.request.apiSettings,\n {\n Paging: {\n Top: this.props.config.itemsPerPage,\n Skip: Math.max(newListPageState.pageSize * (newListPageState.currentPageNumber ?? 0), 0)\n },\n count: true,\n Sorting: newListPageState.sortingCritera ?? {}\n },\n newListPageState.activeFilters ?? [],\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- RecordId is string. Check required.\n +(this.props.context.request.urlTokens.recordId || 0),\n\n // eslint-disable-next-line max-len -- existing code\n this.props.context.request.query?.q\n ? this.props.context.request.query.q\n : JSON.stringify({\n ProductId: this.props.context.request.query?.productId,\n Recommendation: this.props.context.request.query?.recommendation\n }),\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Required check.\n !!this.props?.config?.includeAttributes,\n this.props.config.updateRefinerPanel,\n this.props.context.request.locale,\n this.catalogId,\n channelInventoryConfiguration\n );\n\n const productResults = await getCollectionProducts(input, this.props.context.actionContext);\n newListPageState.totalProductCount = productResults.count;\n newListPageState.activeProducts = productResults.products;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- check is required.\n if (\n this.props.config.enableAffiliationBasedPricing &&\n this.props.context.actionContext.requestContext?.user?.isAuthenticated\n ) {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises -- Call api to retrieve the availabilities data without blocking the UI.\n this._getActivePrice();\n }\n\n await this._updateVariantAvailability();\n\n if (this.props.config.updateRefinerPanel) {\n const refinerInput = new RefinersByCollectionInput(\n newListPageState.pageType,\n this.props.context.request.apiSettings,\n {\n Paging: {\n Top: this.props.config.itemsPerPage,\n Skip: Math.max(\n newListPageState.pageSize * (newListPageState.currentPageNumber ?? this.defaultPageNumber),\n this.defaultPageNumber\n )\n },\n count: true,\n Sorting: newListPageState.sortingCritera ?? {}\n },\n newListPageState.activeFilters ?? [],\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- RecordId is string. Check required.\n +(this.props.context.request.urlTokens.recordId || 0),\n this.props.context.request.query?.q\n ? this.props.context.request.query.q\n : this.props.context.request.query?.productId,\n false,\n this.props.config.updateRefinerPanel,\n undefined,\n this.catalogId,\n channelInventoryConfiguration\n );\n\n const refiners = await getCollectionRefinersAction(refinerInput, this.props.context.actionContext);\n this.setState({ refiners });\n }\n }\n );\n\n if (\n this.props.config.enableAffiliationBasedPricing &&\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Condition required.\n this.props.context.actionContext.requestContext?.user?.isAuthenticated\n ) {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises -- Call api to retrieve the availabilities data without blocking the UI.\n this._getActivePrice();\n }\n await this._updateVariantAvailability();\n }\n\n public componentWillUnmount(): void {\n this._isMounted = false;\n if (MsDyn365.isBrowser && window.removeEventListener) {\n window.removeEventListener('resize', this._updateViewport);\n }\n }\n\n public render(): JSX.Element {\n const {\n config: { imageSettings, className },\n resources,\n data: { listPageState, products: productCollection, featureProduct }\n } = this.props;\n\n if (!this.isListPageStateUpdated && listPageState.result && productCollection.result) {\n this._updateListPageState(listPageState.result, productCollection.result);\n this.isListPageStateUpdated = true;\n }\n\n const products = (this.props.data.listPageState.result && this.props.data.listPageState.result.activeProducts) || [];\n const searchProduct = listPageState.result?.featureProduct ?? featureProduct.result ?? null;\n let errorText = '';\n if (!ArrayExtensions.hasElements(products)) {\n errorText = this._pageType === 'Category' ? resources.resultCategoryNotFoundText : resources.resultSearchNotFoundText;\n }\n const productsComponent = this._getProducts();\n const featureComponent = (\n \n );\n\n const searchResultContainerViewProps = {\n ...this.props,\n products: productsComponent,\n TitleViewProps: this._getCollectionTitle(),\n categoryHierarchy: !this.props.config.disableHierarchy && this._getCategoryHierarchy(),\n refineMenu: this._getRefineMenu(),\n className: classnames('ms-search-result-container', className),\n SearchResultContainer: {\n moduleProps: this.props,\n className: classnames('ms-search-result-container', className)\n },\n sortByOptions: this.props.data.listPageState.result?.totalProductCount !== 0 ? this._getSortingDropDown() : null,\n pagination: this._getPagination(),\n ProductsContainer: { className: 'ms-search-result-container__Products' },\n ProductSectionContainer: { className: 'ms-search-result-container__product-section' },\n CategoryNavContainer: { className: 'ms-search-result-container__category-nav-section' },\n RefineAndProductSectionContainer: { className: 'ms-search-result-container__refine-product-section' },\n choiceSummary: this._getChoiceSummary(),\n modalToggle:\n this.props.data.listPageState.result?.totalProductCount !== 0 ? (\n \n ) : null,\n searchResultModal: this._getSearchResultModal(),\n isMobile: this.isMobile,\n errorMessage: errorText && ,\n FeatureSearchContainer: { className: 'ms-feature-search-result' },\n similarLookProduct: searchProduct ? featureComponent : null,\n productPrices: this.productPrices,\n productsDimensionAvailabilities: this.state.productsDimensionAvailabilities\n };\n return this.props.renderView(searchResultContainerViewProps) as React.ReactElement;\n }\n\n /**\n * Get products variants dimension availabilities.\n * @returns Void.\n */\n private readonly _updateVariantAvailability = async (): Promise => {\n const context = this.props.context as ICoreContext;\n const dimensionsToDisplayOnProductCard = context.app.config.dimensionsInProductCard;\n const dimensionsToDisplayAsSwatch = context.app.config.dimensionsAsSwatchType;\n if (\n ArrayExtensions.hasElements(dimensionsToDisplayOnProductCard) &&\n !dimensionsToDisplayOnProductCard.includes(DimensionTypes.none) &&\n ArrayExtensions.hasElements(dimensionsToDisplayAsSwatch) &&\n !dimensionsToDisplayAsSwatch.includes(DimensionTypes.none) &&\n this.props.config.includeAttributes\n ) {\n await this._getProductsDimensionsAvailabilities();\n }\n };\n\n /**\n * Update the list page state with initial data.\n * @param listPageState -- List page State.\n * @param products -- Products.\n */\n @action\n private readonly _updateListPageState = (listPageState: ListPageState, products: IFullProductsSearchResultsWithCount): void => {\n let querySorting: SortColumn[] = [];\n const defaultPageNumber: number = 10;\n\n if (this._pageType === 'Category') {\n listPageState.pageType = 'Category';\n } else {\n listPageState.pageType = 'Search';\n }\n\n if (this.props.context.request.query?.sorting) {\n querySorting = JSON.parse(decodeURIComponent(this.props.context.request.query.sorting)) as SortColumn[];\n }\n\n listPageState.currentPageNumber =\n (this.props.context.request.query?.skip &&\n +this.props.context.request.query.skip / (this.props.config.itemsPerPage ?? defaultPageNumber)) ||\n 0;\n listPageState.sortingCritera = { Columns: querySorting };\n listPageState.pageSize = this.props.config.itemsPerPage ?? defaultPageNumber;\n listPageState.activeProducts = products.products;\n listPageState.totalProductCount = products.count;\n listPageState.activeFilters = hydrateRefinersFromUrl(this.props.context.request) || [];\n if (this.props.context.request.query?.productId) {\n const featureProduct = this.props.data.featureProduct.result;\n if (featureProduct) {\n listPageState.featureProduct = featureProduct;\n }\n }\n };\n\n /**\n * Get products dimension availabilities.\n * @returns Void.\n */\n private readonly _getProductsDimensionsAvailabilities = async (): Promise => {\n const productsList = this.props.data.listPageState.result?.activeProducts ?? [];\n\n const productsDimensionAvailabilities = await getDimensionAvailabilitiesForProductSearchResultAction(\n new DimensionAvailabilitiesForProductSearchResultInput(\n productsList,\n this.props.context as ICoreContext,\n DimensionSwatchDisplayTypes.productCard\n ),\n this.props.context.actionContext\n );\n\n if (ArrayExtensions.hasElements(productsDimensionAvailabilities)) {\n this.setState({ productsDimensionAvailabilities });\n }\n };\n\n /**\n * Get the active price for the products.\n */\n private readonly _getActivePrice = async (): Promise => {\n const productsList = this.props.data.listPageState.result?.activeProducts ?? [];\n const products = await getPriceForProductSearchResult(\n new PriceForProductSearchResultInput(productsList),\n this.props.context.actionContext\n );\n\n const listPageState = await this.props.data.listPageState;\n listPageState.activeProducts = products;\n };\n\n private readonly _getSearchResultModal = (): ISearchResultModalViewProps => {\n const { resources } = this.props;\n return SearchResultModal({\n resources: {\n modalCloseButtonText: resources.modalCloseButtonText,\n modalTitle: resources.modalTitle\n },\n isOpen: this.state.modalIsOpen,\n returnRef: this._modalToggleRef,\n onModalToggle: this._toggleModal\n });\n };\n\n private readonly _getCollectionTitle = (): ITitleViewProps => {\n const { data, context, resources } = this.props;\n\n let collectionTitle: string | undefined = '';\n if (context && context.request && context.request.query && context.request.query.q) {\n collectionTitle = `\"${context.request.query.q}\"`;\n } else {\n collectionTitle =\n (data.category.result &&\n SearchResultContainer.getFriendlyName(context.request.locale, data.category.result.NameTranslations)) ||\n (data.category.result && data.category.result.Name) ||\n this.props.context.request.query?.title ||\n '';\n }\n let productCountText = '';\n let productCountNumber: number | undefined;\n if (data.listPageState && data.listPageState.result && data.listPageState.result.totalProductCount !== undefined) {\n productCountNumber = data.listPageState.result.totalProductCount;\n } else if (data.products && data.products.result) {\n productCountNumber = data.products.result.count;\n }\n\n if (productCountNumber && productCountNumber !== 0) {\n productCountText =\n productCountNumber !== 1\n ? format(this.props.resources.numberOfProducts, productCountNumber)\n : this.props.resources.oneProduct;\n } else {\n productCountText = format(this.props.resources.numberOfProducts, 0);\n }\n const pageName = context.request.telemetryPageName ? `result-count-${context.request.telemetryPageName.toLowerCase()}` : '';\n const titlePrefix = ;\n const titleText = collectionTitle && ;\n const titleCount = ;\n\n return {\n TitleContainer: { className: `ms-search-result-container__title ${pageName}` },\n title: {\n titlePrefix,\n titleText,\n titleCount\n }\n };\n };\n\n private readonly _getCategoryHierarchy = (): ICategoryHierarchyViewProps => {\n const { data } = this.props;\n const categoryHierarchy = data.categoryHierarchy.result;\n const categoryLinks =\n categoryHierarchy &&\n categoryHierarchy.map((value: CategoryHierarchyData, index: number) => {\n return (\n \n );\n });\n const categoryLinkSeparator = ;\n\n return {\n CategoryHierarchyContainer: { tag: 'nav', className: 'ms-search-result-container__category-hierarchy' },\n categoryHierarchyList: categoryLinks,\n categoryHierarchySeparator: categoryLinkSeparator\n };\n };\n\n private readonly _getSortingDropDown = (): ISortByViewProps => {\n const { resources } = this.props;\n const activeDropdown = this._getCurrentlySelectedOption() || this.state.sortingState.selectedSortByOption;\n let dropdownOptions = this._getAllSortByOptions();\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- App config settings are of \"any\" value.\n if (this.props.context.app.config.hideRating) {\n dropdownOptions = dropdownOptions.filter(dropdownOption => dropdownOption.key !== sortOptions.sortByOptionRatingDesc);\n }\n\n const dropdown = (\n \n );\n return {\n SortingContainer: { className: 'ms-search-result-container__Sort-by-category' },\n sortByDropDown: dropdown\n };\n };\n\n private readonly _getPagination = (): React.ReactNode => {\n const { config, context, data, resources } = this.props;\n const listPageState = data.listPageState.result;\n const fullUrl = getCurrentUrl(context.request);\n const itemsPerPage = config.itemsPerPage || 10;\n // eslint-disable-next-line max-len -- existing code\n const skipCount = !ObjectExtensions.isNullOrUndefined(listPageState?.currentPageNumber)\n ? listPageState!.currentPageNumber * (this.props.config.itemsPerPage || 10)\n : (this.props.context.request.query && +this.props.context.request.query.skip) || 0;\n const totalItems = listPageState?.totalProductCount || 0;\n const previousText = resources.flipperPrevious;\n const nextText = resources.flipperNext;\n\n if (totalItems <= itemsPerPage) {\n return null;\n }\n return (\n \n );\n };\n\n private readonly _getRefineMenu = (): IRefineMenuViewProps => {\n const { data, context, config } = this.props;\n const tempRangeTypeTODO = context.request.query && context.request.query.inputRange ? 'input' : 'slider';\n const validRefiners =\n this.props.config.updateRefinerPanel && ArrayExtensions.hasElements(this.state.refiners)\n ? this.state.refiners.filter(refiner => {\n return ArrayExtensions.hasElements(refiner.Values) && !this._shouldHideFromRefiners(refiner);\n })\n : data.refiners.result &&\n data.refiners.result.filter(refiner => {\n return ArrayExtensions.hasElements(refiner.Values) && !this._shouldHideFromRefiners(refiner);\n });\n\n const activeRefiners = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\n\n this._getexpandRefinerCount(validRefiners && validRefiners.length, config.expandRefinersCount);\n const expandedRefiners = this.expandrefinerCount;\n const subMenus =\n validRefiners &&\n validRefiners.map((productRefinerHierarchy: IProductRefinerHierarchy, index: number) => {\n return (\n index)}\n tempRangeTypeTODO={tempRangeTypeTODO}\n context={context}\n moduleId={this.props.id}\n moduleTypeName={this.props.typeName}\n telemetryContent={this.telemetryContent}\n productCountAriaLabel={this.props.resources.productCountAriaLabel}\n refineItemAriaLabel={this.props.resources.refineItemAriaLabel}\n refineItemsAriaLabel={this.props.resources.refineItemsAriaLabel}\n singleProductCountAriaLabel={this.props.resources.singleProductCountAriaLabel}\n isMobile={this.isMobile}\n />\n );\n });\n\n return {\n RefineMenuContainer: { className: 'ms-search-result-container__refine-menu' },\n RefinerSectionContainer: { className: 'ms-search-result-container__refiner-section' },\n refiners: subMenus\n };\n };\n\n /**\n * Should hide from refiners.\n * @param refiner - The refiner.\n * @returns ShouldHideFromRefiners.\n */\n private readonly _shouldHideFromRefiners = (refiner: IProductRefinerHierarchy): boolean => {\n const { channelInventoryConfiguration } = this.state;\n const isInventorySortableAttribute =\n (this.props.data.products.result?.inventoryAwareSortableAttributeId !== 0 &&\n refiner.RecordId === this.props.data.products.result?.inventoryAwareSortableAttributeId) ||\n (channelInventoryConfiguration?.ProductAvailabilitySortableAttributeRecordId !== 0 &&\n refiner.RecordId === channelInventoryConfiguration?.ProductAvailabilitySortableAttributeRecordId);\n\n const isInventoryProductAttribute =\n (this.props.data.products.result?.channelInventoryConfigurationId !== 0 &&\n refiner.RecordId === this.props.data.products.result?.channelInventoryConfigurationId) ||\n (channelInventoryConfiguration?.InventoryProductAttributeRecordId !== 0 &&\n refiner.RecordId === channelInventoryConfiguration?.InventoryProductAttributeRecordId);\n\n // Always hide sortable attribute since it's just for sorting products in Azure search, not for customers\n return (\n isInventorySortableAttribute ||\n (this.props.context.app.config.productListInventoryDisplay === ProductListInventoryFilteringOptions.HideOOS &&\n isInventoryProductAttribute)\n );\n };\n\n private readonly _getChoiceSummary = (): React.ReactNode => {\n const { resources, data, telemetry } = this.props;\n const { channelInventoryConfiguration } = this.state;\n const selectedRefiners = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\n const refinerValueName = this.props.data.refiners.result?.find(rating => rating.KeyName === 'Rating');\n return (\n \n );\n };\n\n /**\n * Get Active products.\n * @returns - JSX Elements.\n */\n private readonly _getProducts = (): JSX.Element => {\n const {\n config: { imageSettings, allowBackNavigation: shouldAllowBackNavigation }\n } = this.props;\n const { resources } = this.props;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access -- Reading config value.\n const breadCrumbType: string = this.props.context.app.config.breadcrumbType;\n const shouldAllowBack = shouldAllowBackNavigation && (breadCrumbType === 'back' || breadCrumbType === 'categoryAndBack');\n\n const products = (this.props.data.listPageState.result && this.props.data.listPageState.result.activeProducts) || [];\n const quickviewSlot = this.props.slots?.quickview?.[0];\n const productComparisonButton = ArrayExtensions.hasElements(this.props.slots.productComparisonButton)\n ? this.props.slots.productComparisonButton[0]\n : null;\n\n const isPriceMinMaxFeatureState = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailSearchPriceRangeFeature'\n );\n return (\n \n );\n };\n\n private readonly _updateSortByDropdown = (notification: ILabeledDropdownOnChangeNotification): void => {\n const {\n context: { request: requestContext, actionContext }\n } = this.props;\n\n if (!requestContext || !actionContext || !this.props.data.listPageState.result) {\n // eslint-disable-next-line max-len -- existing code\n const error = `[sort-by-category] cannot sort without context: ${!requestContext ? 'requestContext ' : ''} ${\n !actionContext ? 'actionContext ' : ''\n } could not be found`;\n this.props.telemetry.warning(error);\n return;\n }\n\n window.history.pushState(\n {},\n '',\n buildListPageUrl(\n getCurrentUrl(this.props.context.request),\n undefined,\n [this._getSortColumnFromSelectedOption(notification.selectedOption)],\n undefined\n )\n );\n transaction(() => {\n this.props.data.listPageState.result!.currentPageNumber = 0;\n this.props.data.listPageState.result!.sortingCritera = {\n Columns: [this._getSortColumnFromSelectedOption(notification.selectedOption)]\n };\n });\n };\n\n private readonly _getSortColumnFromSelectedOption = (option: ILabeledDropdownOption): SortColumn => {\n const { data } = this.props;\n\n if (!data.searchConfiguration.result) {\n return {};\n }\n\n const mappedConfiguration = data.searchConfiguration.result.find(searchConfiguration => {\n return searchConfiguration.key === option.key;\n });\n\n if (mappedConfiguration) {\n return mappedConfiguration.sortColumn;\n }\n\n return {};\n };\n\n /**\n * Retrieves current sort criteria.\n * @returns Sort criteria column which is currently active or undefined if it's not specified.\n */\n private readonly _getSortCriteriaColumn = (): SortColumn | undefined => {\n const sortCriteria = this.props.data.listPageState.result?.sortingCritera;\n if (ArrayExtensions.hasElements(sortCriteria?.Columns)) {\n return sortCriteria!.Columns[0];\n }\n\n const queryColumns = parseQueryParam('sorting', this.props.context.request);\n if (ArrayExtensions.hasElements(queryColumns)) {\n return queryColumns[0];\n }\n\n return undefined;\n };\n\n /**\n * Retrieves dropdown options.\n * @returns All dropdown options.\n */\n private readonly _getAllSortByOptions = (): ILabeledDropdownOption[] => {\n const searchConfiguration = this.props.data.searchConfiguration.result;\n\n if (!searchConfiguration) {\n return [];\n }\n\n const mappedSearchConfiguration = this.sortByDropdownOptions.filter(mappedSearchConfig =>\n searchConfiguration.find(item => mappedSearchConfig.key === item.key)\n );\n\n return ArrayExtensions.validValues(mappedSearchConfiguration);\n };\n\n /**\n * Retrieves current selected dropdown option based on the sort criteria.\n * @returns Current dropdown option.\n */\n private readonly _getCurrentlySelectedOption = (): ILabeledDropdownOption | undefined => {\n const activeSortColumn = this._getSortCriteriaColumn();\n\n const searchConfiguration = this.props.data.searchConfiguration.result;\n\n if (!activeSortColumn || !searchConfiguration) {\n return undefined;\n }\n\n const activeMappedConfig = searchConfiguration.find(\n mappedSearchConfig =>\n mappedSearchConfig.sortColumn.ColumnName === activeSortColumn.ColumnName &&\n mappedSearchConfig.sortColumn.IsDescending === activeSortColumn.IsDescending\n );\n if (!activeMappedConfig) {\n return undefined;\n }\n\n return this.sortByDropdownOptions.find(dropdownOption => dropdownOption.key === activeMappedConfig.key);\n };\n\n private readonly _onUpdateRefiners = (itemToggleNotification: IRefineItemToggleNotification): void => {\n const {\n context: { request: requestContext, actionContext }\n } = this.props;\n\n if (!requestContext || !actionContext || !this.props.data.listPageState.result) {\n const error = `Refine menu cannot refine search criteria: \n ${!requestContext ? 'requestContext ' : ''} ${!actionContext ? 'actionContext ' : ''} could not be found`;\n this.props.telemetry.warning(error);\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Server side the list PageState will not be called.\n const updatedRefinementCriteria = getUpdatedRefinementCriteria(\n itemToggleNotification,\n this.props.data.listPageState.result?.activeFilters || []\n );\n\n window.history.pushState({}, '', buildListPageUrl(getCurrentUrl(this.props.context.request), updatedRefinementCriteria));\n transaction(() => {\n this.props.data.listPageState.result!.currentPageNumber = 0;\n this.props.data.listPageState.result!.activeFilters = updatedRefinementCriteria;\n });\n };\n\n private readonly _buildRefinerUrl = (itemToggleNotification: IRefineItemToggleNotification): string => {\n if (this.props.data.listPageState.result) {\n const newRefinementCriteria = getUpdatedRefinementCriteria(\n itemToggleNotification,\n this.props.data.listPageState.result.activeFilters || []\n );\n\n return buildListPageUrl(getCurrentUrl(this.props.context.request), newRefinementCriteria);\n }\n this.props.telemetry.warning('[buildRefinerQueryString]List Page State Not available, unable to build refiner URL');\n return '';\n };\n\n private readonly _onChoiceClicked = (notification: IChoiceSummaryClickNotification): void => {\n const { data, telemetry } = this.props;\n\n if (!data.listPageState.result) {\n telemetry.warning('[choice-summary-by-category._onChoiceClicked]ListPageState unavailable, unable to update refiners.');\n return;\n }\n\n let currentRefinementCriteria = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\n\n if (!notification.clearAll) {\n const selectedChoice = notification.choiceClicked;\n if (!selectedChoice) {\n telemetry.warning('[choice-summary-by-category._onChoiceClicked] Choice could not be determined');\n return;\n }\n currentRefinementCriteria = currentRefinementCriteria.filter(\n (selectedCriterion: ProductRefinerValue) => !isMatchingRefinementCriterion(selectedChoice, selectedCriterion)\n );\n } else {\n currentRefinementCriteria = [];\n\n // Set focus to sort and filter\n const dropdownElementId = this._sortAndFilterContainerRef.current && this._sortAndFilterContainerRef.current.props.dropdownId;\n const dropdownElement = dropdownElementId && document.getElementById(dropdownElementId);\n setTimeout(() => {\n dropdownElement && dropdownElement.focus();\n }, 50);\n }\n\n const fullUrl = getCurrentUrl(this.props.context.request);\n window.history.pushState({}, '', buildListPageUrl(fullUrl, currentRefinementCriteria));\n data.listPageState.result.currentPageNumber = 0;\n data.listPageState.result.activeFilters = currentRefinementCriteria;\n };\n\n private readonly _buildRefinerUrlForChoiceSummary = (selectedRefiner: ProductRefinerValue, isClearAll: boolean): string => {\n const { data, telemetry } = this.props;\n const fullUrl = getCurrentUrl(this.props.context.request);\n\n if (!data.listPageState.result) {\n telemetry.warning('[choice-summary-by-category._buildRefinerUrl]ListPageState unavailable, unable to create refiner URL.');\n return fullUrl.href;\n }\n\n let currentRefinementCriteria = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\n\n if (!isClearAll) {\n if (!selectedRefiner) {\n telemetry.warning('[choice-summary-by-category._buildRefinerUrl] URL for Choice could not be determined');\n return fullUrl.href;\n }\n currentRefinementCriteria = currentRefinementCriteria.filter(\n (selectedCriterion: ProductRefinerValue) => !isMatchingRefinementCriterion(selectedRefiner, selectedCriterion)\n );\n } else {\n currentRefinementCriteria = [];\n }\n\n return buildListPageUrl(fullUrl, currentRefinementCriteria);\n };\n\n private _getViewport(): GridSize {\n if (MsDyn365.isBrowser) {\n return isMobile({ variant: VariantType.Browser, context: this.props.context.request });\n }\n return isMobile({ variant: VariantType.Viewport, context: this.props.context.request });\n }\n\n private _toggleModal(): void {\n this.setState({\n modalIsOpen: !this.state.modalIsOpen\n });\n }\n\n private _updateViewport(): void {\n this._viewport = this._getViewport();\n\n if (this.state.modalIsOpen && !this.isMobile) {\n this._toggleModal();\n }\n }\n\n private readonly _getexpandRefinerCount = (validRefiners?: number, refinerCount?: expandRefinersCount): void => {\n switch (refinerCount) {\n case expandRefinersCount.all:\n this.expandrefinerCount = validRefiners;\n break;\n case expandRefinersCount.one:\n this.expandrefinerCount = 1;\n break;\n case expandRefinersCount.two:\n this.expandrefinerCount = 2;\n break;\n case expandRefinersCount.three:\n this.expandrefinerCount = 3;\n break;\n case expandRefinersCount.four:\n this.expandrefinerCount = 4;\n break;\n default:\n this.expandrefinerCount = 0;\n }\n };\n\n /**\n * Renders a Pagination previous text.\n * @param paginationPreviousText - Pagination previous text from resources.\n * @returns Previous text and flipper icon.\n */\n private readonly _renderPrev = (paginationPreviousText: string) => {\n return (\n \n \n {paginationPreviousText}\n
\n );\n };\n\n /**\n * Renders a Pagination next text.\n * @param paginationNextText - Pagination next text from resources.\n * @returns Next text and flipper icon.\n */\n private readonly _renderNext = (paginationNextText: string) => {\n return (\n \n {paginationNextText}\n \n
\n );\n };\n}\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport { Address, AddressPurpose, CountryRegionInfo, StateProvinceInfo } from '@msdyn365-commerce/retail-proxy';\r\nimport { format as formatNotification, getTelemetryObject, IModuleProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport { action, observable, reaction, set } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\n\r\nimport { AutoSuggest } from '@msdyn365-commerce-modules/address';\r\nimport { IAutoSuggestOptions } from '@msdyn365-commerce-modules/address';\r\nimport { AddressCommon } from '@msdyn365-commerce-modules/address';\r\nimport { AddressFormat } from '@msdyn365-commerce-modules/address';\r\nimport { AddressItemType } from '@msdyn365-commerce-modules/address';\r\nimport { AddressMetaData } from '@msdyn365-commerce-modules/address';\r\nimport { AddressOperation, AddressType, IAddressResource, IAddressResponse } from '@msdyn365-commerce-modules/address';\r\nimport { AddressAddUpdate, IAddressAddUpdateProps } from '@msdyn365-commerce-modules/address';\r\nimport { AddressList, IAddressListProps } from '@msdyn365-commerce-modules/address';\r\nimport { IB2bAccountManagementAddressData } from './b2b-account-management-address.data';\r\nimport { IB2bAccountManagementAddressProps } from './b2b-account-management-address.props.autogenerated';\r\n\r\n/**\r\n * Account management address view state interface.\r\n */\r\nexport interface IAccountManagementAddressViewState {\r\n isShowAddresList: boolean;\r\n isShowAddOrUpdateAddress: boolean;\r\n}\r\n\r\n/**\r\n * Account management address view state interface.\r\n */\r\nexport interface IAccountManagementAddressViewProps\r\n extends React.Component> {\r\n className: string;\r\n currentOperation: AddressOperation;\r\n selectedAddress?: Address;\r\n addUpdateAddress: Address;\r\n countryRegionId: string;\r\n stateProvinceInfo?: StateProvinceInfo[];\r\n customerAddresses: Address[];\r\n validationError: object;\r\n addressActionResponse?: IAddressResponse;\r\n viewState: IAccountManagementAddressViewState;\r\n AccountAddressManagement: IModuleProps;\r\n isUpdating: boolean;\r\n showAddressList: IAddressListProps;\r\n showAddOrUpdateAddress: IAddressAddUpdateProps;\r\n screenReaderNotification: React.ReactNode;\r\n shouldRenderEditAddressButton: boolean;\r\n}\r\n\r\n/**\r\n *\r\n * Address component.\r\n * @extends {React.Component>}\r\n */\r\n@observer\r\nclass AccountManagementAddress extends React.Component> {\r\n @observable private currentOperation: AddressOperation;\r\n\r\n @observable private selectedAddress?: Address;\r\n\r\n @observable private countryRegionId: string = 'USA';\r\n\r\n @observable private stateProvinceInfo?: StateProvinceInfo[];\r\n\r\n @observable private customerAddresses: Address[];\r\n\r\n @observable private addUpdateAddress: Address;\r\n\r\n @observable private validationError: object;\r\n\r\n @observable private addressActionResponse?: IAddressResponse;\r\n\r\n @observable private isUpdating?: boolean;\r\n\r\n @observable private hasError?: boolean;\r\n\r\n @observable private removeAddressData?: Address;\r\n\r\n private readonly addressCommon: AddressCommon;\r\n\r\n private addressFormat: AddressFormat;\r\n\r\n private countryRegions: CountryRegionInfo[] = [];\r\n\r\n private addressPurposes: AddressPurpose[] = [];\r\n\r\n private readonly resources: IAddressResource;\r\n\r\n private readonly defaultAddressType: number = 6; // Default to Home\r\n\r\n private readonly telemetryContent: ITelemetryContent;\r\n\r\n private autoSuggest?: AutoSuggest;\r\n\r\n public constructor(props: IB2bAccountManagementAddressProps) {\r\n super(props);\r\n const { context, data, resources, telemetry } = this.props;\r\n\r\n this.resources = resources;\r\n this.currentOperation = AddressOperation.List;\r\n this.countryRegions = data.countryRegions.result || [];\r\n this.addressPurposes = data.addressPurposes.result || [];\r\n this.customerAddresses = data.address.result || [];\r\n this.addUpdateAddress = {};\r\n this.validationError = {};\r\n this.addressCommon = new AddressCommon(context, resources, telemetry);\r\n this.addressFormat = new AddressFormat(\r\n this.countryRegions,\r\n new AddressMetaData({ ...resources }, this._getAddressFormatExcludeList()),\r\n // Filter out the Invoice address for the add/update form\r\n this.addressPurposes.filter((address: AddressPurpose) => address.AddressType !== 1)\r\n );\r\n this.telemetryContent = getTelemetryObject(\r\n this.props.context.request.telemetryPageName!,\r\n this.props.friendlyName,\r\n this.props.telemetry\r\n );\r\n }\r\n\r\n /**\r\n * On Suggestion Selected Function.\r\n * @param result - Microsoft.Maps.ISuggestionResult.\r\n */\r\n @action\r\n private readonly _onSuggestionSelected = async (result: Microsoft.Maps.ISuggestionResult): Promise => {\r\n this._clearAddressFields();\r\n const address = this.addressFormat.getTranformedAddress(result, this.stateProvinceInfo);\r\n set(this.addUpdateAddress, { Street: '' });\r\n set(this.addUpdateAddress, { ZipCode: address.ZipCode });\r\n set(this.addUpdateAddress, { CountyName: address.CountyName });\r\n set(this.addUpdateAddress, { City: address.City });\r\n set(this.addUpdateAddress, { State: address.State });\r\n set(this.addUpdateAddress, { DistrictName: address.DistrictName });\r\n set(this.addUpdateAddress, { FullAddress: address.FullAddress });\r\n\r\n // Bing autosuggest put the complete address in the Street input box. Updating the street input box to show only street address.\r\n setTimeout(() => {\r\n set(this.addUpdateAddress, { Street: address.Street });\r\n }, 0);\r\n };\r\n\r\n /**\r\n * Clear Address Fields.\r\n */\r\n @action\r\n private readonly _clearAddressFields = (): void => {\r\n const addressFormatItem = this.addressFormat.getAddressFormat(\r\n this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId\r\n );\r\n addressFormatItem.forEach(format => {\r\n if (this.addUpdateAddress[format.name] !== undefined && !this.autoSuggest?.excludedAddressFields.includes(format.name)) {\r\n this.addressFormat[format.name] = '';\r\n }\r\n });\r\n this._clearValidation();\r\n };\r\n\r\n /**\r\n * Clear Validation Function.\r\n */\r\n @action\r\n private readonly _clearValidation = (): void => {\r\n this.validationError = {};\r\n };\r\n\r\n public async componentDidMount(): Promise {\r\n const {\r\n context: {\r\n telemetry,\r\n actionContext: {\r\n requestContext: { channel }\r\n }\r\n },\r\n config: { autoSuggestionEnabled, autoSuggestOptions }\r\n } = this.props;\r\n\r\n // Initializing data props\r\n this._dataInitialize(this.props);\r\n\r\n void this.props.data.countryRegions.then(() => {\r\n this._setDefaultCountryRegionId();\r\n });\r\n\r\n reaction(\r\n () => this.countryRegionId,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.currentOperation,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n if (autoSuggestionEnabled) {\r\n if (channel && !channel.BingMapsApiKey) {\r\n telemetry.error('BingMapsApiKey is missing.');\r\n return;\r\n }\r\n\r\n if (channel && !channel.BingMapsEnabled) {\r\n telemetry.error('Map is disabled from HQ.');\r\n return;\r\n }\r\n\r\n const options: IAutoSuggestOptions = { ...autoSuggestOptions };\r\n this.autoSuggest = new AutoSuggest(\r\n telemetry,\r\n options,\r\n channel?.BingMapsApiKey,\r\n channel?.ChannelCountryRegionISOCode,\r\n channel?.DefaultLanguageId\r\n );\r\n\r\n reaction(\r\n () =>\r\n this.props.data.storeSelectorStateManager.result?.loadMapApi !== undefined &&\r\n (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update),\r\n async () => {\r\n await this.autoSuggest?._loadMapAPI(await this.props.data.storeSelectorStateManager);\r\n }\r\n );\r\n\r\n reaction(\r\n () => {\r\n this.props.data.storeSelectorStateManager.result?.isMapApiLoaded;\r\n },\r\n async () => {\r\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\r\n await this._attachMapAutoSuggest();\r\n }\r\n }\r\n );\r\n }\r\n }\r\n\r\n /**\r\n * Component did mount function.\r\n */\r\n public async componentDidUpdate(): Promise {\r\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\r\n if (this.props.data.storeSelectorStateManager.result?.isMapApiLoaded) {\r\n await this._attachMapAutoSuggest();\r\n }\r\n } else {\r\n this.autoSuggest?.disposeAutoSuggest();\r\n }\r\n }\r\n\r\n /**\r\n * Should component update function.\r\n * @param nextProps - Account management address props.\r\n * @param nextState - Next state.\r\n * @returns - True if component should update, false otherwise.\r\n */\r\n public shouldComponentUpdate(\r\n nextProps: IB2bAccountManagementAddressProps,\r\n nextState: IAccountManagementAddressViewState\r\n ): boolean {\r\n if (this.state === nextState && this.props.data === nextProps.data) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n public render(): JSX.Element {\r\n const { renderView, config } = this.props;\r\n\r\n const viewProps = {\r\n ...this.props,\r\n currentOperation: this.currentOperation,\r\n selectedAddress: this.selectedAddress,\r\n addUpdateAddress: this.addUpdateAddress,\r\n countryRegionId: this.countryRegionId,\r\n stateProvinceInfo: this.stateProvinceInfo,\r\n customerAddresses: this.customerAddresses,\r\n validationError: this.validationError,\r\n addressActionResponse: this.addressActionResponse,\r\n isUpdating: this.isUpdating,\r\n hasError: this.hasError,\r\n className: config.className,\r\n viewState: {\r\n isShowAddresList: this.currentOperation === AddressOperation.List,\r\n isShowAddOrUpdateAddress: this.currentOperation !== AddressOperation.List\r\n },\r\n AccountAddressManagement: {\r\n moduleProps: this.props,\r\n className: classnames('ms-account-management-address', config.className)\r\n },\r\n showAddressList: this._renderListAddress(),\r\n showAddOrUpdateAddress: this._renderAddOrUpdateAddress(),\r\n screenReaderNotification: this.removeAddressData ? this._renderScreenReaderRemoveText(this.removeAddressData) : null,\r\n shouldRenderEditAddressButton: this.props.config.enableEditAddress\r\n };\r\n\r\n return renderView(viewProps) as React.ReactElement;\r\n }\r\n\r\n /**\r\n * Method data initialization.\r\n * @param props -The account management props.\r\n */\r\n private readonly _dataInitialize = (props: IB2bAccountManagementAddressProps): void => {\r\n const { data } = props;\r\n\r\n reaction(\r\n () => data.countryRegions.result,\r\n () => {\r\n this.countryRegions = data.countryRegions.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.addressPurposes.result,\r\n () => {\r\n this.addressPurposes = data.addressPurposes.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.address.result,\r\n () => {\r\n this.customerAddresses = data.address.result ?? [];\r\n }\r\n );\r\n };\r\n\r\n /**\r\n * Render Add Or Update Address Function.\r\n * @returns - AddressAddUpdate.\r\n */\r\n private readonly _renderAddOrUpdateAddress = (): IAddressAddUpdateProps => {\r\n return AddressAddUpdate({\r\n isUpdating: this.isUpdating,\r\n resources: this.resources,\r\n addressType: AddressType.Shipping,\r\n addressFormat: this.addressFormat.getAddressFormat(this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId),\r\n defaultCountryRegionId: this.countryRegionId,\r\n defaultAddressType: this.defaultAddressType,\r\n selectedAddress: this.addUpdateAddress,\r\n validationError: this.validationError,\r\n addressActionResponse: this.addressActionResponse,\r\n dropdownDisplayData: this.addressFormat.getPrefilledAddressDropdownData(\r\n this.resources.addressStateDefaultSelectionText,\r\n this.stateProvinceInfo\r\n ),\r\n telemetryContent: this.telemetryContent,\r\n onInputChange: this._onAddressAddUpdateInputChange,\r\n onDropdownChange: this._onAddressAddUpdateDropdownChange,\r\n onSave: this._onAddressAddUpdateSubmit,\r\n onCancel: this._resetView\r\n });\r\n };\r\n\r\n /**\r\n * Render List Address Function.\r\n * @returns - AddressList.\r\n */\r\n private readonly _renderListAddress = (): IAddressListProps => {\r\n const { config } = this.props;\r\n\r\n /**\r\n * Render Address ttitle.\r\n * @param event - Msdyn365.ContentEditableEvent.\r\n */\r\n const handleLineItemHeadingChange = (event: Msdyn365.ContentEditableEvent) => {\r\n config.heading!.text = event.target.value;\r\n };\r\n const heading = config.heading && {\r\n text: config.heading.text,\r\n headingTag: config.heading.tag\r\n };\r\n\r\n return AddressList({\r\n isUpdating: this.isUpdating,\r\n selectedAddress: this.selectedAddress,\r\n addressFormat: this.addressFormat,\r\n addresses: this.customerAddresses,\r\n addressPurposes: this.addressPurposes,\r\n resources: this.resources,\r\n heading,\r\n primaryAddressSectionHeading: config.primaryAddressSectionHeading,\r\n otherAddressSectionHeading: config.otherAddressSectionHeading,\r\n contextRequest: this.props.context.request,\r\n telemetryContent: this.telemetryContent,\r\n handleLineItemHeadingChange,\r\n onEditAddress: this._goToEditAddress,\r\n onRemoveAddress: this._onRemoveAddress,\r\n onAddAddress: this._goToAddAddress,\r\n onUpdatePrimaryAddress: this._onSubmitUpdatePrimaryAddress\r\n });\r\n };\r\n\r\n /**\r\n * Attach Map Auto Suggest Function.\r\n */\r\n private readonly _attachMapAutoSuggest = async (): Promise => {\r\n const {\r\n data: {\r\n storeSelectorStateManager: { result: storeSelectorStateManager }\r\n }\r\n } = this.props;\r\n\r\n if (storeSelectorStateManager?.isMapApiLoaded) {\r\n this.autoSuggest?.attachAutoSuggest('#shipping_addressstreet', '#shipping_addressstreet_container', this._onSuggestionSelected);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Add Update Function.\r\n * @param name - String.\r\n * @param value - String | Boolean | Number.\r\n */\r\n private readonly onAddressAddUpdate = (name: string, value: string | boolean | number) => {\r\n set(this.addUpdateAddress, { [name]: value });\r\n this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId, name);\r\n };\r\n\r\n /**\r\n * On Address Add Update Input Change.\r\n * @param event - Input Change Event.\r\n */\r\n private readonly _onAddressAddUpdateInputChange = (event: React.ChangeEvent): void => {\r\n if (event.target.type === 'checkbox') {\r\n this.onAddressAddUpdate(event.target.name, event.target.checked);\r\n } else {\r\n const value = (event.target.value || '').replace(new RegExp('[<>]', 'gi'), '');\r\n this.onAddressAddUpdate(event.target.name, value);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Add Update Dropdown Change.\r\n * @param event - Dropdown Change Event.\r\n */\r\n private readonly _onAddressAddUpdateDropdownChange = (event: React.ChangeEvent): void => {\r\n if (event.target.name === AddressItemType[AddressItemType.AddressTypeValue]) {\r\n this.onAddressAddUpdate(event.target.name, +event.target.value);\r\n } else {\r\n this.onAddressAddUpdate(event.target.name, event.target.value);\r\n }\r\n if (event.target.name === AddressItemType[AddressItemType.ThreeLetterISORegionName]) {\r\n this._onCountryChange(event.target.value);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Update Function.\r\n * @param response - Promise.\r\n * @param onSuccess - IAddressResponse.\r\n */\r\n private readonly _onAddressUpdate = (response: Promise, onSuccess: (response: IAddressResponse) => void): void => {\r\n this.isUpdating = true;\r\n response.then(\r\n (result: IAddressResponse) => {\r\n if (result.address) {\r\n this.hasError = false;\r\n onSuccess(result);\r\n } else {\r\n this.hasError = true;\r\n this.addressActionResponse = result;\r\n }\r\n this.isUpdating = false;\r\n },\r\n () => {\r\n this.hasError = true;\r\n this.isUpdating = false;\r\n }\r\n );\r\n };\r\n\r\n /**\r\n * On Address Add Update Submit Function.\r\n */\r\n private readonly _onAddressAddUpdateSubmit = (): void => {\r\n if (!this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId)) {\r\n return;\r\n }\r\n let response: Promise;\r\n if (this.addressCommon.isAuthenticatedFlow()) {\r\n response =\r\n this.currentOperation === AddressOperation.Update\r\n ? this.addressCommon.updateCustomerAddress(this.addUpdateAddress)\r\n : this.addressCommon.addCustomerAddress(this.addUpdateAddress);\r\n } else {\r\n response = Promise.resolve({ address: this.addUpdateAddress });\r\n }\r\n\r\n this._onAddressUpdate(response, this._onAddOrUpdateSuccess);\r\n };\r\n\r\n /**\r\n * On Country Change Function.\r\n * @param countryRegionId - String.\r\n */\r\n private readonly _onCountryChange = (countryRegionId: string) => {\r\n this.countryRegionId = countryRegionId;\r\n const twoLetterISORegionName = this.addressFormat.getTwoLetterISORegionName(countryRegionId);\r\n set(this.addUpdateAddress, { ThreeLetterISORegionName: countryRegionId });\r\n set(this.addUpdateAddress, { TwoLetterISORegionName: twoLetterISORegionName });\r\n this.autoSuggest?.changeAutoSuggestionCountryCode(twoLetterISORegionName);\r\n this._clearAddressFields();\r\n };\r\n\r\n /**\r\n * Get Address Format Exclude List Function.\r\n * @returns - Address Format Exclude List.\r\n */\r\n private readonly _getAddressFormatExcludeList = (): AddressItemType[] => {\r\n const { config } = this.props;\r\n const addressFormatExcludeList: AddressItemType[] = [];\r\n\r\n if (!config.showAddressType) {\r\n addressFormatExcludeList.push(AddressItemType.AddressTypeValue);\r\n }\r\n\r\n addressFormatExcludeList.push(AddressItemType.IsPrimary);\r\n\r\n return addressFormatExcludeList;\r\n };\r\n\r\n /**\r\n * Get State Provinces Function.\r\n */\r\n private readonly _getStateProvinces = (): void => {\r\n if (\r\n !this.countryRegionId ||\r\n !(this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update)\r\n ) {\r\n return;\r\n }\r\n\r\n void this.addressCommon.getStateProvinces(this.countryRegionId).then((result: StateProvinceInfo[]) => {\r\n const stateInfo = result.some(state => state.StateId === this.addUpdateAddress.State);\r\n\r\n // Reset state if selected state not found in the list.\r\n if (!stateInfo) {\r\n set(this.addUpdateAddress, { State: '' });\r\n }\r\n this.stateProvinceInfo = result;\r\n });\r\n };\r\n\r\n private _setDefaultCountryRegionId(): void {\r\n const { request } = this.props.context;\r\n const market = request && request.channel && request.channel.ChannelCountryRegionISOCode;\r\n\r\n this.countryRegionId = this.addressCommon.getDefaultCountryRegionId(this.countryRegionId, this.countryRegions, market);\r\n }\r\n\r\n /**\r\n * Update CurrentOperation Function.\r\n * @param operation - AddressOperation.\r\n */\r\n private readonly _updateCurrentOperation = (operation: AddressOperation) => {\r\n this.currentOperation = operation;\r\n this._clearAddressFields();\r\n };\r\n\r\n /**\r\n * On Submit Update Primary Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _onSubmitUpdatePrimaryAddress = (address: Address): void => {\r\n this.selectedAddress = address;\r\n const response = this.addressCommon.updateCustomerPrimaryAddress(address);\r\n this._onAddressUpdate(response, this._onUpdatePrimaryAddressSuccess);\r\n };\r\n\r\n /**\r\n * Go To Edit Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _goToEditAddress = (address: Address): void => {\r\n this.addUpdateAddress = { ...address };\r\n this.countryRegionId = this.addUpdateAddress.ThreeLetterISORegionName || 'USA';\r\n this._updateCurrentOperation(AddressOperation.Update);\r\n };\r\n\r\n /**\r\n * On Remove Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _onRemoveAddress = (address: Address): void => {\r\n address.Deactivate = true;\r\n this.removeAddressData = address;\r\n const response = this.addressCommon.updateCustomerAddress(address);\r\n this._onAddressUpdate(response, this._onAddOrUpdateSuccess);\r\n };\r\n\r\n /**\r\n * Renders Notification screen reader text for removed address.\r\n * @param address - Address input.\r\n * @returns Notification for removed address.\r\n */\r\n private readonly _renderScreenReaderRemoveText = (address: Address): React.ReactNode => {\r\n const notification = formatNotification(this.resources.removeAddressNotification!, `${address.Name!}`);\r\n return (\r\n \r\n {notification}\r\n
\r\n );\r\n };\r\n\r\n /**\r\n * Go To Add Address Function.\r\n */\r\n private readonly _goToAddAddress = (): void => {\r\n this.addUpdateAddress = {};\r\n this._setDefaultCountryRegionId();\r\n set(this.addUpdateAddress, { ThreeLetterISORegionName: this.countryRegionId });\r\n set(this.addUpdateAddress, { AddressTypeValue: this.defaultAddressType });\r\n this._setDefaultCountryRegionId();\r\n this._updateCurrentOperation(AddressOperation.Add);\r\n };\r\n\r\n /**\r\n * On Add Or Update Success Function.\r\n * @param response - IAddressResponse.\r\n */\r\n private readonly _onAddOrUpdateSuccess = (response: IAddressResponse): void => {\r\n if (response.customerAddresses) {\r\n this.customerAddresses = response.customerAddresses;\r\n }\r\n this._resetView();\r\n };\r\n\r\n /**\r\n * On Update Primary Address Success Function.\r\n * @param response - IAddressResponse.\r\n */\r\n private readonly _onUpdatePrimaryAddressSuccess = (response: IAddressResponse): void => {\r\n if (response.customerAddresses) {\r\n this.customerAddresses = response.customerAddresses;\r\n }\r\n };\r\n\r\n /**\r\n * Reset view function.\r\n */\r\n private readonly _resetView = (): void => {\r\n this.selectedAddress = undefined;\r\n this._updateCurrentOperation(AddressOperation.List);\r\n };\r\n}\r\n\r\nexport default AccountManagementAddress;\r\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\nimport { IGiftCardExtend } from '@msdyn365-commerce/global-state';\r\nimport { Address, AddressPurpose, CountryRegionInfo, StateProvinceInfo } from '@msdyn365-commerce/retail-proxy';\r\nimport { IModuleStateProps, withModuleState } from '@msdyn365-commerce-modules/checkout-utilities';\r\nimport { IModuleProps } from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport { computed, observable, reaction, set } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\n\r\nimport {\r\n AddressBillingHeading,\r\n AddressCommon,\r\n AddressFormat,\r\n AddressItemType,\r\n AddressMetaData,\r\n AddressOperation,\r\n AddressShow,\r\n IAddressAddUpdateProps,\r\n IAddressResponse,\r\n IAddressShowProps\r\n} from '@msdyn365-commerce-modules/address';\r\nimport { IB2bCheckoutBillingAddressData } from './b2b-checkout-billing-address.data';\r\nimport { IB2bCheckoutBillingAddressProps } from './b2b-checkout-billing-address.props.autogenerated';\r\n\r\n/**\r\n * Props interface.\r\n */\r\nexport interface IProps extends IB2bCheckoutBillingAddressProps, IModuleStateProps {}\r\n\r\nexport interface ICheckoutState {\r\n errorMessage: string | undefined;\r\n}\r\n\r\n/**\r\n * Checkout billing address view state interface.\r\n */\r\nexport interface ICheckoutBillingAddressViewState {\r\n isShowAddress: boolean;\r\n isError: boolean;\r\n}\r\n\r\n/**\r\n * Checkout billing address view props interface.\r\n */\r\nexport interface ICheckoutBillingAddressViewProps extends IProps {\r\n className: string;\r\n currentOperation: AddressOperation;\r\n selectedAddress?: Address;\r\n addUpdateAddress: Address;\r\n countryRegionId: string;\r\n stateProvinceInfo?: StateProvinceInfo[];\r\n validationError: object;\r\n addressActionResponse?: IAddressResponse;\r\n viewState: ICheckoutBillingAddressViewState;\r\n CheckoutBillingAddress: IModuleProps;\r\n sameAsShippingCheckbox: React.ReactNode;\r\n heading: React.ReactNode;\r\n showAddress: IAddressShowProps;\r\n showAddOrUpdateAddress: IAddressAddUpdateProps;\r\n error: React.ReactNode;\r\n}\r\n\r\n/**\r\n *\r\n * CheckoutBillingAddress component.\r\n * @extends {React.PureComponent>}\r\n */\r\n// @ts-expect-error\r\n@withModuleState\r\n@observer\r\nclass CheckoutBillingAddress extends React.Component {\r\n @observable private currentOperation: AddressOperation;\r\n\r\n @observable private isBillingAddressSameAsShipping: boolean;\r\n\r\n @observable private selectedAddress?: Address;\r\n\r\n @observable private addUpdateAddress: Address;\r\n\r\n @observable private countryRegionId: string = 'USA';\r\n\r\n @observable private stateProvinceInfo?: StateProvinceInfo[];\r\n\r\n @observable private validationError: object;\r\n\r\n @observable private readonly addressActionResponse?: IAddressResponse;\r\n\r\n private readonly addressCommon: AddressCommon;\r\n\r\n private addressFormat: AddressFormat;\r\n\r\n private countryRegions: CountryRegionInfo[] = [];\r\n\r\n private addressPurposes: AddressPurpose[] = [];\r\n\r\n private addresses: Address[];\r\n\r\n private readonly defaultAddressType: number = 6; // Default to Home\r\n\r\n public constructor(props: IProps) {\r\n super(props);\r\n this.state = { errorMessage: undefined };\r\n const { context, data, resources, telemetry } = this.props;\r\n\r\n this.addUpdateAddress = {};\r\n this.validationError = {};\r\n this.isBillingAddressSameAsShipping = false;\r\n this.currentOperation = AddressOperation.List;\r\n this.addressPurposes = data.addressPurposes.result || [];\r\n this.addresses = data.address.result || [];\r\n this.countryRegions = data.countryRegions.result || [];\r\n this.stateProvinceInfo = data.countryStates.result || [];\r\n this.addressCommon = new AddressCommon(context, resources, telemetry);\r\n this.addressFormat = new AddressFormat(\r\n this.countryRegions,\r\n new AddressMetaData({ ...resources }, this._getAddressFormatExcludeList()),\r\n this.addressPurposes\r\n );\r\n }\r\n\r\n public async componentDidMount(): Promise {\r\n // Initializing data props\r\n\r\n this._dataInitialize(this.props);\r\n\r\n void this.props.data.checkout.then(() => {\r\n this._setDefaultCountryRegionId();\r\n this._initModuleState();\r\n });\r\n\r\n reaction(\r\n () => this.countryRegionId,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.currentOperation,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.props.data.checkout.result && this.props.data.checkout.result.shippingAddress,\r\n shippingAddress => {\r\n if (this.props.moduleState.isUpdating) {\r\n if (shippingAddress && this.isBillingAddressSameAsShipping) {\r\n this._updateCurrentOperation(AddressOperation.Show, shippingAddress);\r\n } else if (shippingAddress && this.isBillingAddressSameAsShipping) {\r\n this._updateCurrentOperation(AddressOperation.Show, shippingAddress);\r\n }\r\n }\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.isBillingAddressRequried,\r\n isBillingAddressRequried => {\r\n if (!isBillingAddressRequried) {\r\n this.props.data.checkout.result?.removeBillingAddress({});\r\n this.props.moduleState.onDisable();\r\n }\r\n }\r\n );\r\n }\r\n\r\n public shouldComponentUpdate(nextProps: IProps, nextState: ICheckoutState): boolean {\r\n if (this.state === nextState && this.props.data === nextProps.data) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n if (!this.isBillingAddressRequried) {\r\n return null;\r\n }\r\n\r\n const { resources } = this.props;\r\n const { renderView, config } = this.props;\r\n\r\n const viewProps = {\r\n ...this.props,\r\n currentOperation: this.currentOperation,\r\n selectedAddress: this.props.moduleState.hasError ? undefined : this.selectedAddress,\r\n addUpdateAddress: this.props.moduleState.hasError ? undefined : this.addUpdateAddress,\r\n countryRegionId: this.countryRegionId,\r\n stateProvinceInfo: this.stateProvinceInfo,\r\n validationError: this.validationError,\r\n addressActionResponse: this.addressActionResponse,\r\n className: config.className,\r\n viewState: {\r\n isShowAddress: this.selectedAddress && this.currentOperation === AddressOperation.Show && !this.props.moduleState.hasError,\r\n isError: this.props.moduleState.hasError\r\n },\r\n CheckoutBillingAddress: {\r\n moduleProps: this.props,\r\n className: classnames('ms-checkout-billing-address', config.className)\r\n },\r\n heading: ,\r\n showAddress: this._renderShowAddress(),\r\n error: this.renderErrorMessage()\r\n };\r\n\r\n return renderView(viewProps) as React.ReactElement;\r\n }\r\n\r\n /**\r\n * Method data initialization.\r\n * @param props -The checkout address properties.\r\n */\r\n private readonly _dataInitialize = (props: IProps): void => {\r\n const { data } = props;\r\n\r\n reaction(\r\n () => data.countryRegions.result,\r\n () => {\r\n this.countryRegions = data.countryRegions.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.addressPurposes.result,\r\n () => {\r\n this.addressPurposes = data.addressPurposes.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.countryStates.result,\r\n () => {\r\n this.stateProvinceInfo = data.countryStates.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.address.result,\r\n () => {\r\n this.addresses = data.address.result ?? [];\r\n }\r\n );\r\n\r\n this._setBillingAddress();\r\n };\r\n\r\n private _renderShowAddress(): IAddressShowProps | null {\r\n if (this.selectedAddress) {\r\n return AddressShow({\r\n address: this.selectedAddress,\r\n addressFormat: this.addressFormat.getAddressFormat(this.selectedAddress.ThreeLetterISORegionName ?? ''),\r\n addressPurposes: this.addressPurposes\r\n });\r\n }\r\n\r\n return null;\r\n }\r\n\r\n /**\r\n * Gets address format for exclude list.\r\n * @returns - Address item type.\r\n */\r\n private readonly _getAddressFormatExcludeList = (): AddressItemType[] => {\r\n const { config } = this.props;\r\n const addressFormatExcludeList: AddressItemType[] = [];\r\n\r\n if (!config.showAddressType) {\r\n addressFormatExcludeList.push(AddressItemType.AddressTypeValue);\r\n }\r\n\r\n addressFormatExcludeList.push(AddressItemType.IsPrimary);\r\n\r\n return addressFormatExcludeList;\r\n };\r\n\r\n /**\r\n * Gets state provinces.\r\n */\r\n private readonly _getStateProvinces = (): void => {\r\n if (\r\n !this.countryRegionId ||\r\n !(this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update)\r\n ) {\r\n return;\r\n }\r\n\r\n void this.addressCommon.getStateProvinces(this.countryRegionId).then((result: StateProvinceInfo[]) => {\r\n const stateInfo = result.some(state => state.StateId === this.addUpdateAddress.State);\r\n\r\n // Reset state if selected state not found in the list.\r\n if (!stateInfo) {\r\n set(this.addUpdateAddress, { State: '' });\r\n }\r\n this.stateProvinceInfo = result;\r\n });\r\n };\r\n\r\n /**\r\n * Initialize module state.\r\n */\r\n private readonly _initModuleState = (): void => {\r\n this.props.moduleState.init({\r\n status: this.isBillingAddressRequried ? 'updating' : 'disabled'\r\n });\r\n\r\n const { billingAddress, isBillingAddressSameAsShippingAddress } = this.props.data.checkout.result ?? {};\r\n\r\n if (this.isBillingAddressRequried) {\r\n if (billingAddress) {\r\n this.isBillingAddressSameAsShipping = isBillingAddressSameAsShippingAddress ?? false;\r\n this._updateCurrentOperation(AddressOperation.Show, billingAddress);\r\n this._updateModuleState();\r\n } else if (this.isCartContainsItemsForShipping) {\r\n this.isBillingAddressSameAsShipping = false;\r\n this._updateCurrentOperation(AddressOperation.Show, undefined);\r\n\r\n const {\r\n resources: { noBillingErrorMessage }\r\n } = this.props;\r\n\r\n this.setError(noBillingErrorMessage, true);\r\n } else {\r\n this.isBillingAddressSameAsShipping = false;\r\n this._updateCurrentOperation(AddressOperation.Add);\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Sets default country region Id.\r\n */\r\n private _setDefaultCountryRegionId(): void {\r\n const { request } = this.props.context;\r\n const market = request.channel?.ChannelCountryRegionISOCode;\r\n\r\n this.countryRegionId = this.addressCommon.getDefaultCountryRegionId(this.countryRegionId, this.countryRegions, market);\r\n }\r\n\r\n @computed private get isCartContainsItemsForShipping(): boolean {\r\n const { request } = this.props.context;\r\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\r\n const { channelDeliveryOptionConfig, featureState } = this.props.data;\r\n const retailMultiplePickUpOptionEnabled = featureState.result?.find(feature => feature.Name === multiplePickupStoreSwitchName)\r\n ?.IsEnabled;\r\n\r\n const pickupDeliveryModeCode = request.channel?.PickupDeliveryModeCode;\r\n const emailDeliveryModeCode = request.channel?.EmailDeliveryModeCode;\r\n\r\n // If hasInvoiceLine is true, there are only invoices no items in cart and return false here\r\n return this.props.data.checkout.result?.checkoutCart.hasInvoiceLine\r\n ? false\r\n : retailMultiplePickUpOptionEnabled\r\n ? ((this.props.data.checkout.result && this.props.data.checkout.result.checkoutCart.cart.CartLines) || []).some(cartLine =>\r\n cartLine.DeliveryMode && cartLine.DeliveryMode !== ''\r\n ? cartLine.DeliveryMode !==\r\n channelDeliveryOptionConfig.result?.PickupDeliveryModeCodes?.find(\r\n deliveryMode => deliveryMode === cartLine.DeliveryMode\r\n ) && cartLine.DeliveryMode !== emailDeliveryModeCode\r\n : cartLine\r\n )\r\n : ((this.props.data.checkout.result && this.props.data.checkout.result.checkoutCart.cart.CartLines) || []).some(cartLine =>\r\n cartLine.DeliveryMode && cartLine.DeliveryMode !== ''\r\n ? cartLine.DeliveryMode !== pickupDeliveryModeCode && cartLine.DeliveryMode !== emailDeliveryModeCode\r\n : cartLine\r\n );\r\n }\r\n\r\n @computed private get getLoyaltyAmount(): number {\r\n const checkoutState = this.props.data.checkout.result;\r\n return checkoutState?.loyaltyAmount ? checkoutState.loyaltyAmount : 0;\r\n }\r\n\r\n @computed private get getGiftCardTotalAmount(): number {\r\n const checkoutState = this.props.data.checkout.result;\r\n if (!checkoutState || !checkoutState.giftCardExtends) {\r\n return 0;\r\n }\r\n return checkoutState.giftCardExtends.reduce((count: number, giftCard: IGiftCardExtend) => {\r\n return count + (giftCard.Balance || 0);\r\n }, 0);\r\n }\r\n\r\n @computed private get getCustomerAccountAmount(): number {\r\n const checkoutState = this.props.data.checkout.result;\r\n const defaultAmount = 0;\r\n\r\n return checkoutState?.customerAccountAmount ?? defaultAmount;\r\n }\r\n\r\n @computed private get shouldPaidByCard(): boolean {\r\n const {\r\n data: { checkout },\r\n config\r\n } = this.props;\r\n if (!checkout.result) {\r\n return false;\r\n }\r\n\r\n const checkoutResult = checkout.result;\r\n const cart = checkoutResult.checkoutCart.cart;\r\n if (!cart || !cart.CartLines || cart.CartLines.length === 0) {\r\n return false;\r\n }\r\n\r\n const { paymentTenderType, tokenizedPaymentCard } = checkoutResult;\r\n const isPaidByOtherPaymentSource = config.paymenTenderType !== paymentTenderType && tokenizedPaymentCard;\r\n\r\n // Use payment card when it is not free or gift card balance + Loyalty amount can not cover the total amount\r\n const amountDue = (cart.TotalAmount || 0) - this.getGiftCardTotalAmount - this.getLoyaltyAmount - this.getCustomerAccountAmount;\r\n\r\n return amountDue > 0 && !isPaidByOtherPaymentSource;\r\n }\r\n\r\n @computed private get isBillingAddressRequried(): boolean {\r\n return this.shouldPaidByCard;\r\n }\r\n\r\n private readonly setError = (errorMessage: string | undefined, hasError: boolean): void => {\r\n this.props.moduleState.setHasError(hasError);\r\n this.setState({ errorMessage });\r\n };\r\n\r\n private renderErrorMessage = (): React.ReactNode => (\r\n \r\n
{this.state.errorMessage}
\r\n
\r\n
\r\n
{title}
\r\n
{itemTitle}
\r\n
\r\n
\r\n {cartLines.map((cartLine: ICheckoutShippingCartLineInfo) => {\r\n const isShowQty = cartLine.quantity > quantity;\r\n let className = `${moduleClassName}__group-images-lines-product`;\r\n const role = 'text';\r\n if (isShowQty) {\r\n className = classnames(className, ' product-image-wide');\r\n }\r\n return (\r\n
\r\n
\r\n {isMobileView\r\n ? isShowQty && (\r\n
\r\n {cartLine.quantity}\r\n \r\n )\r\n : isShowQty && (\r\n
\r\n {cartLine.quantity}\r\n \r\n )}\r\n {!isMobileView && isShowQty && (\r\n
\r\n {format(resources.productQuantityInfo, cartLine.quantity, cartLine.imageProps.altText)}\r\n \r\n )}\r\n