= (props: ICartViewProps) => (\r\n \r\n {props.backToShoppingButton}\r\n {props.title}\r\n {props.promotionOptions && _renderPromotions(props.promotionOptions)}\r\n {props.multiplePickUpEnabled ? (\r\n _renderCartLinesGroup(props, props.resources)\r\n ) : (\r\n \r\n {_renderCartlines(\r\n props.cartlines,\r\n props.resources,\r\n props.storeSelector,\r\n props.backToShoppingButton,\r\n props.waitingComponent,\r\n props.cartLoadingStatus,\r\n props.cartDataResult,\r\n props.telemetryContent,\r\n props.multiplePickUpEnabled,\r\n props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode\r\n )}\r\n \r\n )}\r\n {props.orderSummaryHeading && (\r\n \r\n {props.orderSummaryHeading}\r\n {props.cart?.hasInvoiceLine\r\n ? _renderInvoiceSummarylines(props.invoiceSummaryLineitems, props.OrderSummaryItems, props)\r\n : _renderOrderSummarylines(props.orderSummaryLineitems, props.OrderSummaryItems, props)}\r\n {_renderErrorBlock(props.OrderSummaryErrors)}\r\n {props.checkoutAsSignInUserButton}\r\n {props.checkoutAsGuestButton}\r\n {_renderQutotationButton(guestCheckoutUrl)}\r\n {props.createTemplateFromCartButton}\r\n \r\n )}\r\n {props.storeSelector}\r\n
\r\n);\r\n\r\nconst _renderPromotions = (promotions: ICartLineItemViewProps): JSX.Element | undefined => {\r\n return (\r\n <>\r\n \r\n {promotions.promotionMessage}\r\n {promotions.promotionSeeAllLink}\r\n {promotions.promotionDialog}\r\n \r\n \r\n );\r\n};\r\n\r\nconst _renderCartlines = (\r\n cartLines: ICartlinesViewProps[] | undefined,\r\n resources: IDynCartResources,\r\n storeSelector: React.ReactNode | undefined,\r\n backToShoppingButton: React.ReactNode,\r\n waitingComponent: React.ReactNode,\r\n cartLoadingStatus: string,\r\n cartDataResult: boolean,\r\n telemetryContent?: ITelemetryContent,\r\n mulitplePickUp?: boolean,\r\n emailDeliveryModeCode?: string\r\n): JSX.Element[] | JSX.Element => {\r\n const { emptyCartText } = resources;\r\n\r\n if (cartLoadingStatus) {\r\n return <>{cartLoadingStatus};\r\n }\r\n if (cartLines) {\r\n return cartLines.map((cartLine, index) => {\r\n return (\r\n \r\n
\r\n
\r\n {cartLine.cartline}\r\n {mulitplePickUp\r\n ? null\r\n : _renderBOPISBlock(cartLine, resources, storeSelector, telemetryContent, emailDeliveryModeCode)}\r\n
\r\n
{cartLine.remove}
\r\n
\r\n {mulitplePickUp ? (\r\n
\r\n {_renderGroupBOPISBlock(cartLine, resources, storeSelector, telemetryContent, emailDeliveryModeCode)}\r\n {/* {cartLine.addToOrderTemplate} */}\r\n {cartLine.addToWishlist}\r\n \r\n ) : cartLine.addToOrderTemplate ? (\r\n
\r\n \r\n {/* {cartLine.addToOrderTemplate} */}\r\n {cartLine.addToWishlist}\r\n
\r\n \r\n ) : (\r\n <>{cartLine.addToWishlist}\r\n )}\r\n
\r\n
{emptyCartText}
\r\n {backToShoppingButton}\r\n
\r\n {isBopisSelected ? (\r\n {pickUpAtStoreWithLocationText}\r\n ) : (\r\n {shipToAddressDisplayText}\r\n )}\r\n
\r\n {isBopisSelected && (\r\n \r\n {cartLine.pickUpInStore.orgUnitName}\r\n \r\n
\r\n )}\r\n \r\n {isBopisSelected ? shipInsteadDisplayText : pickItUpDisplayText}\r\n \r\n \r\n );\r\n};\r\n\r\nconst _renderErrorBlock = (errorData: IOrderSummaryErrors | undefined): JSX.Element | null => {\r\n if (!errorData || errorData.errors.length === 0) {\r\n return null;\r\n }\r\n return (\r\n \r\n {errorData.header}\r\n {errorData.errors}\r\n \r\n );\r\n};\r\n\r\nconst _renderOrderSummarylines = (\r\n orderSummaryLines: IDynOrderSummaryLines | undefined,\r\n OrderSummaryItems: INodeProps,\r\n props: ICartViewProps\r\n): JSX.Element | null => {\r\n if (!orderSummaryLines) {\r\n return null;\r\n }\r\n return (\r\n \r\n {props.promoCode}\r\n {orderSummaryLines.netTotal}\r\n {orderSummaryLines.totalDiscounts ? orderSummaryLines.totalDiscounts : null}\r\n {orderSummaryLines.subtotal}\r\n {orderSummaryLines.shipping}\r\n {orderSummaryLines.otherCharge}\r\n {orderSummaryLines.tax}\r\n {orderSummaryLines.orderTotal}\r\n \r\n );\r\n};\r\n\r\nconst _renderInvoiceSummarylines = (\r\n invoiceSummaryLines: IInvoiceSummaryLines | undefined,\r\n OrderSummaryItems: INodeProps,\r\n props: ICartViewProps\r\n): JSX.Element | null => {\r\n if (!invoiceSummaryLines) {\r\n props.context.telemetry.error('InvoiceSummary content is empty, module wont render');\r\n return null;\r\n }\r\n return (\r\n \r\n {invoiceSummaryLines.invoices}\r\n {invoiceSummaryLines.giftCard}\r\n {invoiceSummaryLines.loyalty}\r\n {invoiceSummaryLines.orderTotal}\r\n \r\n );\r\n};\r\n\r\nconst _renderCartLinesGroup = (props: ICartViewProps, resources: IDynCartResources): JSX.Element | undefined => {\r\n if (props.cartLinesGroup && props.cartLinesGroup.length > 0) {\r\n return (\r\n \r\n {props.cartLinesGroup?.map((cartlines, key) => {\r\n return (\r\n
\r\n {_renderCartLinesGroupHeader(\r\n cartlines[0],\r\n props.storeSelector,\r\n resources,\r\n _countItems(cartlines),\r\n props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode\r\n )}\r\n {_renderCartlines(\r\n cartlines,\r\n props.resources,\r\n props.storeSelector,\r\n props.backToShoppingButton,\r\n props.waitingComponent,\r\n props.cartLoadingStatus,\r\n props.cartDataResult,\r\n props.telemetryContent,\r\n props.multiplePickUpEnabled,\r\n props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode\r\n )}\r\n
\r\n );\r\n })}\r\n
\r\n
\r\n
{props.resources.emptyCartText}
\r\n {props.backToShoppingButton}\r\n
\r\n
\r\n
\r\n
{groupTitle}
\r\n {_renderCartLinesGroupTitle(cartLine, resources, count)}\r\n
\r\n {cartLine?.pickUpInStore?.deliveryOption}\r\n {', '}\r\n {cartLine?.pickUpInStore?.orgUnitName}\r\n
\r\n ) : null}\r\n \r\n ({count} {suffix})\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst _renderQutotationButton = (url: string) => {\r\n return (\r\n \r\n \r\n Web quotation\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CartView;\r\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { PriceComponent, RatingComponent } from '@msdyn365-commerce/components';\nimport {\n IComponent,\n IComponentProps,\n ICoreContext,\n IGridSettings,\n IImageData,\n IImageSettings,\n Image,\n IRequestContext\n} from '@msdyn365-commerce/core';\nimport { ProductPrice, ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { format } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\n/**\n * IActiveProductProps interface.\n */\nexport interface IActiveProductProps extends IComponentProps<{ product?: ProductSearchResult }> {\n className?: string;\n imageSettings?: IImageSettings;\n savingsText?: string;\n freePriceText?: string;\n originalPriceText?: string;\n currentPriceText?: string;\n ratingAriaLabel?: string;\n}\n\n/**\n * IActiveProduct interface.\n */\nexport interface IActiveProduct extends IComponent {}\n\n/**\n * RenderDescription function.\n * @param description - Product description string.\n * @returns - Returns JSX.Element | null.\n */\nfunction renderDescription(description?: string): JSX.Element | null {\n return {description}
;\n}\n\n/**\n * GetRatingAriaLabel function.\n * @param rating - Product rating number.\n * @param ratingAriaLabel - Product rating aria label.\n * @returns - Returns string.\n */\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\n const numberTwo: number = 2;\n if (rating && ratingAriaLabel) {\n const roundedRating = rating.toFixed(numberTwo);\n return format(ratingAriaLabel || '', roundedRating, '5');\n }\n return '';\n}\n\n/**\n * RenderRating function.\n * @param context - The core context.\n * @param typeName - The type name of the module.\n * @param ratingId - The rating id.\n * @param avgRating - The average rating.\n * @param totalRatings - The total ratings.\n * @param ariaLabel - The rating aria label.\n * @returns - Returns JSX.Element | null.\n */\nfunction renderRating(\n context: ICoreContext,\n typeName: string,\n ratingId: string,\n avgRating?: number,\n totalRatings?: number,\n ariaLabel?: string\n): JSX.Element | null {\n if (!avgRating) {\n return null;\n }\n\n const numberRatings = totalRatings?.toString() ?? undefined;\n const ratingAriaLabel = getRatingAriaLabel(avgRating, ariaLabel);\n\n return (\n \n );\n}\n\n/**\n * RenderPrice function.\n * @param context - The core context.\n * @param typeName - The type name of the module.\n * @param productId - The product id.\n * @param basePrice - The base price of the product.\n * @param adjustedPrice - The adjusted price of the product.\n * @param savingsText - The savings text of the product.\n * @param freePriceText - The free price text.\n * @param originalPriceText - The original price text.\n * @returns - Returns JSX.Element | null.\n */\nfunction renderPrice(\n context: ICoreContext,\n typeName: string,\n productId: string,\n basePrice?: number,\n adjustedPrice?: number,\n savingsText?: string,\n freePriceText?: string,\n originalPriceText?: string\n): JSX.Element | null {\n const price: ProductPrice = {\n BasePrice: basePrice,\n AdjustedPrice: adjustedPrice,\n CustomerContextualPrice: adjustedPrice\n };\n\n return (\n \n );\n}\n\n/**\n * RenderProductPlacementImage function.\n * @param requestContext - RequestContext.\n * @param imageSettings - The product image settings.\n * @param gridSettings - The viewport gird settings.\n * @param imageUrl - The product image url.\n * @param altText - The product image alt text.\n * @returns - Returns JSX.Element | null.\n */\nfunction renderProductPlacementImage(\n requestContext: IRequestContext,\n imageSettings?: IImageSettings,\n gridSettings?: IGridSettings,\n imageUrl?: string,\n altText?: string\n): JSX.Element | null {\n if (!imageUrl || !gridSettings || !imageSettings) {\n return null;\n }\n const imgData: IImageData = {\n src: imageUrl,\n altText: altText ? altText : ''\n };\n const imageProps = {\n gridSettings,\n imageSettings\n };\n imageProps.imageSettings.cropFocalRegion = true;\n return ;\n}\n\n/**\n * ActiveProduct constant.\n * @param props - The active product props.\n * @param props.data - The product search result data.\n * @param props.context - The core context.\n * @param props.imageSettings - The prodcut image settings.\n * @param props.savingsText - The product savings text.\n * @param props.freePriceText - The free price text.\n * @param props.originalPriceText - The original price text.\n * @param props.ratingAriaLabel - The product rating aria label.\n * @param props.typeName - The type name of the module.\n * @param props.id - The id of the product.\n * @returns - Returns JSX.Element | null.\n */\nexport const ActiveProductComponent: React.FC = ({\n data,\n context,\n imageSettings,\n savingsText,\n freePriceText,\n originalPriceText,\n ratingAriaLabel,\n typeName,\n // eslint-disable-next-line @typescript-eslint/naming-convention -- Do not need naming convention check for library prameters\n id\n}) => {\n const product = data.product;\n if (!product) {\n return null;\n }\n\n return (\n <>\n \n
\n {renderProductPlacementImage(\n context.actionContext.requestContext,\n imageSettings,\n context.request.gridSettings,\n product.PrimaryImageUrl,\n product.Name\n )}\n
\n
\n
{product.Name}
\n {renderPrice(context, typeName, id, product.BasePrice, product.Price, savingsText, freePriceText, originalPriceText)}\n {renderDescription(product.Description)}\n {!context.app.config.hideRating &&\n renderRating(context, typeName, id, product.AverageRating, product.TotalRatings, ratingAriaLabel)}\n \n
\n \n \n \n
\n );\n }\n}\n\nexport default ImageMapper;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as MsDyn365 from '@msdyn365-commerce/core';\nimport { ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, getProductPageUrlSync } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n IModuleProps,\n INodeProps,\n isMobile,\n ITelemetryContent,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport {\n activeImageAdditionalContent,\n ActiveProductComponent,\n IActiveImageAdditionalContentViewProps,\n IArea,\n IAreaMap,\n IImageMapperProps,\n ImageMapper\n} from '../active-image-utilities';\nimport { IActiveImageData } from './active-image.data';\nimport { IActiveImageProps } from './active-image.props.autogenerated';\n\n/**\n * @type AreaEvent for active points\n */\ntype AreaEvent = Event | React.MouseEvent | React.FocusEvent;\n\n/**\n * @interface IActiveImageViewProps\n * @classdesc - The IActiveImageViewProps interface contract.\n */\nexport interface IActiveImageViewProps extends IActiveImageProps<{}>, IImageMapperProps {\n activePointContainer: IModuleProps;\n activePointDetailsContainer: INodeProps;\n imageMapper: React.ReactNode;\n overlay: React.ReactNode;\n productCard: React.ReactNode;\n title?: React.ReactNode;\n text?: React.ReactNode;\n links?: React.ReactNode;\n detailsContainer?: INodeProps;\n detailsContainerCta?: INodeProps;\n additionalContent?: IActiveImageAdditionalContentViewProps;\n productCardleftPosition: number;\n productCardtopPosition: number;\n handleAdditionalText?(event: MsDyn365.ContentEditableEvent): void;\n handleAdditionalParagraph?(event: MsDyn365.ContentEditableEvent): void;\n handleAdditionalLinkText?(event: MsDyn365.ContentEditableEvent): void;\n}\n\n/**\n * @interface IActiveImageLinksData\n * @classdesc - The IActiveImageLinksData interface contract.\n */\nexport interface IActiveImageLinksData {\n linkText?: string;\n linkUrl: MsDyn365.ILinkData;\n ariaLabel?: string;\n willOpenInNewTab?: boolean;\n}\n\n/**\n * @interface IActiveImageState\n * @classdesc - The IActiveImageState interface contract.\n */\ninterface IActiveImageState {\n clientWidth: number;\n area: IArea | null;\n viewport: string;\n overlayClass: string;\n}\n\n/**\n * @enum ActiveImageConstants\n * @description - The active image constants enum.\n */\nexport enum ActiveImageConstants {\n timeoutInterval = 200,\n enterKey = 'Enter',\n escKey = 'Escape'\n}\n\n/**\n *\n * ActiveImage class.\n * @extends {React.PureComponent & IImageMapperProps, IActiveImageState>}\n */\nexport class ActiveImage extends React.PureComponent & IImageMapperProps, IActiveImageState> {\n private readonly _telemetryContent: ITelemetryContent;\n\n private _isDesktopViewPort: boolean;\n\n private readonly _defaultProductCardWidth: number = 315;\n\n private readonly _defaultProdutCardHight: number = 490;\n\n private readonly _activePoints: IArea[] = [];\n\n private readonly _activeImageRefs: React.RefObject;\n\n private readonly _activeImageClass: string;\n\n private readonly _productCardDivRef: React.RefObject;\n\n public constructor(props: IActiveImageProps & IImageMapperProps) {\n super(props);\n this._telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n const viewport = isMobile({ variant: VariantType.Browser, context: this.props.context.request });\n this._activeImageClass = `msc-active-image-${this.getActiveImageId()}`;\n this.state = {\n clientWidth: 0,\n area: null,\n viewport,\n overlayClass: ''\n };\n this._isDesktopViewPort = viewport === 'lg' || viewport === 'xl';\n this._activeImageRefs = React.createRef();\n this._productCardDivRef = React.createRef();\n }\n\n public componentDidMount(): void {\n if (MsDyn365.msdyn365Commerce.isBrowser) {\n window.addEventListener('resize', this.updateClientWidth);\n document.addEventListener('keydown', this.keyDown, false);\n document.addEventListener('mousedown', this._handleOutsideClick);\n }\n setTimeout(() => {\n this.updateClientWidth();\n }, ActiveImageConstants.timeoutInterval);\n\n if (MsDyn365.msdyn365Commerce.isBrowser && this._activeImageRefs.current) {\n const images: HTMLCollectionOf = this._activeImageRefs.current.getElementsByClassName(\n 'msc-thumbnail_image msc-active-image-img'\n );\n if (ArrayExtensions.hasElements(Array.from(images))) {\n images[0].removeAttribute('usemap');\n }\n }\n }\n\n /**\n * AddActivePoints method - To handle add Active Points.\n * @param area - IArea.\n * @param product - ProductSearchResult.\n * @param coords - Coords.\n * @param productUrl - String.\n */\n public addActivePoints = (area: IArea | undefined, product: ProductSearchResult, coords: number[], productUrl: string): void => {\n if (!area) {\n this._activePoints.push({\n areaId: product.RecordId.toString(),\n coords,\n primaryImageUrl: product.PrimaryImageUrl ?? '',\n productUrl,\n productSearchResult: product\n });\n }\n };\n\n /**\n * ComponentWillUnmount method.\n */\n public componentWillUnmount(): void {\n if (MsDyn365.msdyn365Commerce.isBrowser) {\n window.removeEventListener('resize', this.updateClientWidth);\n document.removeEventListener('keydown', (this.keyDown as unknown) as EventListener, false);\n document.removeEventListener('mousedown', this._handleOutsideClick, false);\n }\n }\n\n /**\n * UpdateClientWidth method to update client width in state.\n */\n public updateClientWidth = (): void => {\n const viewport = isMobile({ variant: VariantType.Browser, context: this.props.context.request });\n this.setState({ clientWidth: this.getActiveImageWidth(), viewport });\n this._isDesktopViewPort = viewport === 'lg' || viewport === 'xl';\n };\n\n /**\n * Render method.\n * @returns - Returns JSX.Element | null.\n */\n public render(): JSX.Element | null {\n const viewProps: IActiveImageViewProps = {\n ...(this.props as IImageMapperProps & IActiveImageProps<{}>),\n activePointContainer: {\n moduleProps: this.props,\n className: classnames('msc-active-image', this._activeImageClass, this.props.config.className)\n },\n activePointDetailsContainer: {\n tag: 'div',\n className: classnames('msc-active-image-wrapper', this._activeImageClass, this.props.config.className),\n ref: this._activeImageRefs\n },\n imgWidth: this.props.config.canvasWidth,\n imageMapper: this.renderImageMapper(),\n overlay: this.renderOverlay(),\n productCard: this.renderProductCard(),\n productCardleftPosition: this.getProductCardPositionX(),\n productCardtopPosition: this.getProductCardPositionY(),\n title: this.renderActiveImageDetailsHeading(),\n text: this.renderActiveImageDetailsParagraph(),\n links: this.renderActiveImageDetailsLinks(),\n detailsContainer: { className: 'msc-active-image__details' },\n detailsContainerCta: { className: 'msc-active-image__details__cta' },\n additionalContent: activeImageAdditionalContent({\n requestContext: this.props.context.request,\n additionalContent: this.props.config.additionalContent,\n handleAdditionalTextChange: this.handleAdditionalTextChange,\n handleAdditionalParagraphChange: this.handleAdditionalParagraphChange,\n handleAdditionalLinkTextChange: this.handleAdditionalLinkTextChange\n }),\n handleAdditionalText: this.handleAdditionalTextChange,\n handleAdditionalParagraph: this.handleAdditionalParagraphChange,\n handleAdditionalLinkText: this.handleAdditionalTextChange\n };\n\n return this.props.renderView(viewProps);\n }\n\n /**\n * RenderImageMapper method - To render image mapper.\n * @returns - Returns React.ReactNode | null.\n */\n public renderImageMapper = (): React.ReactNode | null => {\n const { config, context } = this.props;\n const defaultPosition: number = 0;\n const defaultLength: number = 0;\n const productResults = this.props.data.products.result;\n if (config.activePoints && productResults) {\n for (const product of productResults) {\n for (const configProduct of config.activePoints) {\n if (product.ItemId === configProduct.itemId) {\n const productUrl = getProductPageUrlSync(product.Name ?? '', product.RecordId, context.actionContext, undefined);\n const coords = [\n configProduct.xPosition ?? defaultPosition,\n configProduct.yPosition ?? defaultPosition,\n configProduct.radius ?? defaultPosition\n ];\n const area = this._activePoints.find(activePoint => JSON.stringify(activePoint.coords) === JSON.stringify(coords));\n this.addActivePoints(area, product, coords, productUrl);\n }\n }\n }\n }\n const mappedArea: IAreaMap = {\n name: `map-${this._activeImageClass}`,\n areas: this._activePoints.length > defaultLength ? this._activePoints : []\n };\n\n // If image is null, we want to render the placeholder SVG - by passing image data with empty src\n return (\n \n );\n };\n\n /**\n * EnterArea method - To handle mouse enter event.\n * @param area - Active point area.\n * @param index - Active point index.\n * @param event - Active point AreaEvent.\n */\n public enterArea = (area: IArea, index: number, event: AreaEvent): void => {\n this.setState({ area, overlayClass: 'msc-active-image-overlay' });\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(area, index, event);\n }\n if (event.type.toLocaleLowerCase() === 'click' && this._isDesktopViewPort) {\n window.open(area.productUrl, '_self');\n }\n };\n\n /**\n * LeaveArea method - To handle mouse leave event.\n */\n public leaveArea = (): void => {\n if (this._isDesktopViewPort) {\n this.resetState();\n }\n };\n\n /**\n * ResetState method - To reset the state for area and overlayclass.\n */\n public resetState = (): void => {\n this.setState({ area: null, overlayClass: '' });\n };\n\n /**\n * RenderProductComponent method - To render the product card with product information.\n * @returns - Returns React.ReactNode.\n */\n public renderProductComponent = (): React.ReactNode => {\n if (this.state.area?.productSearchResult) {\n const baseImageUrl: string = this.props.context.request.apiSettings.baseImageUrl;\n const imageUrl: string = this.state.area.primaryImageUrl ?? '';\n const primaryImageUrl: string = `${baseImageUrl}${imageUrl}`;\n const product: ProductSearchResult = this.state.area.productSearchResult;\n product.PrimaryImageUrl = primaryImageUrl;\n\n return (\n \n );\n }\n return React.Fragment;\n };\n\n /**\n * RenderProductCard method - To render product cards.\n * @returns - Returns React.ReactNode.\n */\n public renderProductCard = (): React.ReactNode => {\n const { area } = this.state;\n\n return (\n <>\n {area?.center && (\n \n )}\n \n );\n };\n\n /**\n * RenderOverlay method - To render overlay for non desktop viewports.\n * @returns - Returns React.ReactNode.\n */\n public renderOverlay = (): React.ReactNode => {\n return <>{!this._isDesktopViewPort && };\n };\n\n /**\n * GetProductCardPositionX method - Provides product card x position to the left or right of active point based on available space.\n * For xs, sm and md viewports it provides x position for the center alignment.\n * @returns - Returns number.\n */\n public getProductCardPositionX = (): number => {\n const defaultImageSettings = this.getDefaultImageSettings();\n const productImageSettingsWidth = this.props.config.productImageSettings?.viewports\n ? this.props.config.productImageSettings.viewports.lg?.w\n : defaultImageSettings.viewports.lg?.w;\n const defaultPositionX: number = 0;\n const halfDivisor: number = 2;\n const productCardWidth: number = productImageSettingsWidth ? productImageSettingsWidth : this._defaultProductCardWidth;\n const { area, clientWidth, viewport } = this.state;\n const pointPositionX = area?.center?.[0] ?? clientWidth / halfDivisor;\n const leftAllignPosition = pointPositionX - productCardWidth - productCardWidth / halfDivisor;\n const rightAllignPosition = pointPositionX + productCardWidth / halfDivisor;\n let position: number = (clientWidth - productCardWidth) / halfDivisor;\n if (viewport !== 'xs' && viewport !== 'sm' && viewport !== 'md') {\n if (leftAllignPosition < defaultPositionX) {\n position = rightAllignPosition;\n } else {\n position = leftAllignPosition;\n }\n }\n return position;\n };\n\n /**\n * GetProductCardPositionY method - Provides product card y position in center with respect to active point.\n * For xs, sm and md viewports it provides y position for the center alignment.\n * @returns - Returns number.\n */\n public getProductCardPositionY = (): number => {\n const defaultImageSettings = this.getDefaultImageSettings();\n const productImageSettingsHeight = this.props.config.productImageSettings?.viewports\n ? this.props.config.productImageSettings.viewports.lg?.h\n : defaultImageSettings.viewports.lg?.h;\n const halfDivisor: number = 2;\n const { area, viewport } = this.state;\n const produtCardHight: number = productImageSettingsHeight ? productImageSettingsHeight : this._defaultProdutCardHight;\n const pointPositionY = (this.getActiveImageHeight() - produtCardHight) / halfDivisor;\n let position: number = pointPositionY;\n if (viewport !== 'xs' && viewport !== 'sm' && viewport !== 'md') {\n position = (area?.center?.[1] ?? this.getActiveImageHeight() / halfDivisor) - produtCardHight / halfDivisor;\n }\n return position;\n };\n\n /**\n * GetDefaultImageSettings method.\n * @returns MsDyn365.IImageSettings.\n */\n public getDefaultImageSettings = (): MsDyn365.IImageSettings => {\n const defaultImageSettings: MsDyn365.IImageSettings = {\n viewports: {\n xs: { q: 'w=275&h=275&m=6', w: 275, h: 275 },\n lg: { q: 'w=275&h=275&m=6', w: 275, h: 275 },\n xl: { q: 'w=275&h=275&m=6', w: 275, h: 275 }\n },\n lazyload: true\n };\n\n return defaultImageSettings;\n };\n\n /**\n * KeyDown method - To handle keydown event.\n * @param event - KeyboardEvent.\n */\n public keyDown = (event: KeyboardEvent): void => {\n if (event.key === ActiveImageConstants.enterKey) {\n const target: HTMLElement = event.target as HTMLElement;\n if (target.nodeName === 'AREA') {\n const area: HTMLAreaElement = target as HTMLAreaElement;\n if (area.href) {\n window.open(area.href, '_self');\n }\n }\n }\n if (event.key === ActiveImageConstants.escKey) {\n this.resetState();\n }\n };\n\n /**\n * GetActiveImageWidth method - To get active image width.\n * @returns Returns number.\n */\n public getActiveImageWidth = (): number => {\n const defaultWidth: number = 0;\n if (MsDyn365.msdyn365Commerce.isBrowser) {\n const activeImageReferenceValue = this._activeImageRefs;\n if (activeImageReferenceValue.current !== null) {\n return activeImageReferenceValue.current.clientWidth;\n }\n }\n return defaultWidth;\n };\n\n /**\n * GetActiveImageHeight method - To get active image height.\n * @returns Returns number.\n */\n public getActiveImageHeight = (): number => {\n const defaultHeight: number = 0;\n if (MsDyn365.msdyn365Commerce.isBrowser) {\n const activeImageReferenceValue = this._activeImageRefs;\n if (activeImageReferenceValue.current !== null) {\n return activeImageReferenceValue.current.clientHeight;\n }\n }\n return defaultHeight;\n };\n\n /**\n * HandleLinkTextChange method - To handle link text change event.\n * @param linkIndex - The link index.\n * @param event - The dialog that is allowed to remain open.\n */\n public handleLinkTextChange(linkIndex: number, event: MsDyn365.ContentEditableEvent): void {\n if (this.props.config.links && this.props.config.links[Number(linkIndex)]) {\n this.props.config.links[Number(linkIndex)].linkText = event.target.value;\n }\n }\n\n /**\n * HandleTextChange method - To handle text change event.\n * @param event - The dialog that is allowed to remain open.\n */\n public handleTextChange = (event: MsDyn365.ContentEditableEvent): void => {\n this.props.config.heading!.text = event.target.value;\n };\n\n /**\n * HandleParagraphChange method - To handle paragraph change event.\n * @param event - The dialog that is allowed to remain open.\n */\n public handleParagraphChange = (event: MsDyn365.ContentEditableEvent): void => {\n this.props.config.paragraph = event.target.value;\n };\n\n /**\n * HandleAdditionalTextChange method - To handle additional text change event.\n * @param event - The dialog that is allowed to remain open.\n */\n public handleAdditionalTextChange(event: MsDyn365.ContentEditableEvent): void {\n if (this.props.config.additionalContent) {\n this.props.config.additionalContent.heading = event.target.value;\n }\n }\n\n /**\n * HandleAdditionalLinkTextChange method - To handle additional link text change event.\n * @param linkIndex - The link index.\n * @param event - The dialog that is allowed to remain open.\n */\n public handleAdditionalLinkTextChange(linkIndex: number, event: MsDyn365.ContentEditableEvent): void {\n const additionalContent = this.props.config.additionalContent ?? {};\n if (additionalContent.links) {\n additionalContent.links[Number(linkIndex)].linkText = event.target.value;\n }\n }\n\n /**\n * HandleAdditionalParagraphChange method - To handle additional paragraph change event.\n * @param event - The dialog that is allowed to remain open.\n */\n public handleAdditionalParagraphChange(event: MsDyn365.ContentEditableEvent): void {\n if (this.props.config.additionalContent) {\n this.props.config.additionalContent.subtext = event.target.value;\n }\n }\n\n /**\n * RenderActiveImageDetailsLinks method - To render active image details links.\n * @returns - React node.\n */\n public renderActiveImageDetailsLinks = (): React.ReactNode[] | undefined => {\n const { links } = this.props.config;\n const payLoad = getPayloadObject('click', this._telemetryContent, '');\n\n return links?.map((linkData: IActiveImageLinksData, index: number) => {\n payLoad.contentAction.etext = linkData.linkText;\n const attributes = getTelemetryAttributes(this._telemetryContent, payLoad);\n const linkId = index;\n const editableLink: MsDyn365.ILinksData = {\n ariaLabel: linkData.ariaLabel,\n className: 'msc-active-image__details__cta__link',\n linkText: linkData.linkText,\n linkUrl: linkData.linkUrl.destinationUrl,\n openInNewTab: linkData.willOpenInNewTab,\n role: 'button',\n additionalProperties: attributes\n };\n\n return (\n {\n this.handleLinkTextChange(index, event);\n },\n requestContext: this.props.context.request\n }}\n />\n );\n });\n };\n\n /**\n * RenderActiveImageDetailsHeading method - To render active image details heading.\n * @returns - React.ReactNode | undefined.\n */\n public renderActiveImageDetailsHeading = (): React.ReactNode | undefined => {\n const { heading } = this.props.config;\n\n return (\n heading && (\n \n )\n );\n };\n\n /**\n * RenderActiveImageDetailsParagraph method - To render active image details paragraph.\n * @returns - React.ReactNode | undefined.\n */\n public renderActiveImageDetailsParagraph = (): React.ReactNode | undefined => {\n const { paragraph } = this.props.config;\n\n return (\n paragraph && (\n \n )\n );\n };\n\n /**\n * GetActiveImageId - To get active image id from src.\n * @returns - String.\n */\n public getActiveImageId = (): string => {\n const { activeImage } = this.props.config;\n let activeImageId: string = '';\n if (activeImage?.src) {\n const activeImageSource = activeImage.src.split('/');\n const decrementOne: number = 1;\n const activeImageIdPart = activeImageSource[activeImageSource.length - decrementOne].split('?');\n activeImageId = activeImageIdPart[0] ?? '';\n }\n return activeImageId;\n };\n\n /**\n * Handle outside click method - To handle outside click of the active image product.\n * @param event - Mouse event.\n */\n private readonly _handleOutsideClick = (event: MouseEvent) => {\n if (this._productCardDivRef.current?.contains(event.target as Node)) {\n return;\n }\n this.resetState();\n };\n}\nexport default ActiveImage;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IActiveImageAdditionalContentViewProps } from '../active-image-utilities';\nimport { IActiveImageViewProps } from './active-image';\n\n/**\n * Render Additional Content.\n * @param additionalContent - Additional content view props.\n * @returns JSX Element.\n */\nconst renderAdditionalContent = (additionalContent: IActiveImageAdditionalContentViewProps) => {\n return (\n \n {additionalContent.heading}\n \n {additionalContent.text}\n {additionalContent.links}\n \n \n );\n};\n\n/**\n * Render View.\n * @param props - The view props.\n * @returns -The JSX Element.\n */\nexport const activeImageView: React.FC = props => {\n return (\n \n \n {props.imageMapper}\n \n {props.title}\n {props.text}\n {props.additionalContent && renderAdditionalContent(props.additionalContent)}\n \n {props.links}\n \n \n \n \n {props.overlay}\n {props.productCard}\n \n \n );\n};\n\nexport default activeImageView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n CacheType,\n createObservableDataAction,\n IAction,\n IActionContext,\n IActionInput,\n IAny,\n ICommerceApiSettings,\n ICreateActionContext,\n IGeneric\n} from '@msdyn365-commerce/core';\nimport { getCartState } from '@msdyn365-commerce/global-state';\nimport { ProductDeliveryOptions, ProductsDataActions } from '@msdyn365-commerce/retail-proxy';\nimport {\n ArrayExtensions,\n ActiveCartProductsInput,\n QueryResultSettingsProxy,\n buildCacheKey,\n getActiveCartProductsAction\n} from '@msdyn365-commerce-modules/retail-actions';\n\n/**\n * Input class for pickup delivery options for items in cart.\n */\nexport class ProductPickUpOptionsForCartLineItems implements IActionInput {\n public readonly apiSettings: ICommerceApiSettings;\n\n public constructor(apiSettings: ICommerceApiSettings) {\n this.apiSettings = apiSettings;\n }\n\n /**\n * Get Cache Key.\n * @returns - Cache key string.\n */\n public getCacheKey = (): string => buildCacheKey('ActiveCartLineItemsPickUpOptions', this.apiSettings);\n\n /**\n * Get Cachetype Name.\n * @returns - Cache name string.\n */\n public getCacheObjectType = (): string => 'ActiveCartLineItemsPickUpOptions';\n\n /**\n * Get Cachetype.\n * @returns - CacheType enum.\n */\n public dataCacheType = (): CacheType => 'none';\n}\n\n/**\n * CreateInput method for the GetPickUpOptionCartLineItems method.\n * @param inputData - The input data passed to the createInput method.\n * @returns - Input for data action.\n */\nconst createInput = (inputData: ICreateActionContext>) => {\n return new ProductPickUpOptionsForCartLineItems(inputData.requestContext.apiSettings);\n};\n\n/**\n * The action method for the GetPickUpOptionCartLineItems data action.\n * @param input - The action input.\n * @param context - The action context.\n * @returns - Order Template object.\n */\nexport async function getPickUpOptionsForCartLineItems(\n input: ProductPickUpOptionsForCartLineItems,\n context: IActionContext\n): Promise {\n // If no input is provided fail out\n if (!input.apiSettings.channelId) {\n throw new Error('[getPickUpOptionsForCartLineItems]No valid Input was provided, failing');\n }\n const cartState = await getCartState(context);\n const cart = cartState.cart;\n const products = await getActiveCartProductsAction(new ActiveCartProductsInput(), context);\n const filterOption = 4;\n const response: ProductDeliveryOptions[] = [];\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- existing code.\n if (cart === undefined || !ArrayExtensions.hasElements(products)) {\n return Promise.resolve(response);\n }\n\n const pickupoptions = await ProductsDataActions.getDeliveryOptionsAsync(\n {\n callerContext: context,\n queryResultSettings: QueryResultSettingsProxy.getPagingFromInputDataOrDefaultValue(context)\n },\n products.map(product => product.RecordId),\n {},\n filterOption\n );\n\n return pickupoptions;\n}\n\n/**\n * The GetPickupOptionCartLineItems Data Action\n * Returns pickup options.\n */\nexport const getPickUpOptionsForCartLineItemsDataAction = createObservableDataAction({\n id: '@msdyn365-commerce-modules/retail-actions/get-pickup-options-for-cartlines',\n action: getPickUpOptionsForCartLineItems as IAction,\n input: createInput\n});\n\nexport default getPickUpOptionsForCartLineItemsDataAction;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartLine, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport groupBy from 'lodash/groupBy';\n\nimport { assembleCartlines, ICartLineItemsProps, ICartlinesViewProps } from './cart-line-items';\n\nconst _assembleGroupCartlines = (\n cartlines: CartLine[],\n products: SimpleProduct[] | undefined,\n props: ICartLineItemsProps\n): ICartlinesViewProps[][] | null => {\n const reactNodes: ICartlinesViewProps[][] = [];\n if (!products || products.length === 0) {\n props.context.telemetry.error('Products content is empty, module wont render');\n return null;\n }\n\n const getGroupByStorePickup = (items: CartLine[]) => groupBy(items, item => item.FulfillmentStoreId);\n const getGroupByDelivery = (items: CartLine[]) => groupBy(items, item => item.DeliveryMode);\n const groupDelivery = getGroupByDelivery(cartlines);\n const cartLinesGroup: CartLine[] = [];\n\n // 1) Group by store and pick up mode\n Object.entries(groupDelivery).forEach(([deliveryType, groupByDeliveryType]) => {\n // @ts-expect-error\n groupDelivery[deliveryType] = getGroupByStorePickup(groupByDeliveryType);\n cartLinesGroup.push(getGroupByStorePickup(groupByDeliveryType));\n });\n\n // 2) Create cartlines group\n Object.keys(cartLinesGroup).forEach(key => {\n const cartLines = cartLinesGroup[key];\n Object.keys(cartLines).forEach(index => {\n const cartLine = cartLines[index];\n const carLineViewProps = assembleCartlines(cartLine, products, props);\n if (carLineViewProps !== null) {\n reactNodes.push(carLineViewProps);\n }\n });\n });\n\n return reactNodes;\n};\n\nconst _assembleGroupInvoiceCartlines = (\n cartLines: CartLine[],\n products: SimpleProduct[] | undefined,\n props: ICartLineItemsProps\n): ICartlinesViewProps[][] | null => {\n const reactNodes: ICartlinesViewProps[][] = [];\n if (cartLines && cartLines.length > 0) {\n // Create invoice cartLines group\n const carLineViewProps = assembleCartlines(cartLines, products, props);\n if (carLineViewProps !== null) {\n reactNodes.push(carLineViewProps);\n }\n }\n return reactNodes;\n};\n\n/**\n * CartLine Group component.\n * @param props\n */\nexport const CartLineGroupItems = (props: ICartLineItemsProps) => {\n const { products, cartlines, hasInvoiceLine } = props;\n return hasInvoiceLine\n ? _assembleGroupInvoiceCartlines(cartlines, products, props)\n : _assembleGroupCartlines(cartlines, products, props);\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IActionContext } from '@msdyn365-commerce/core';\nimport { CartPromotionLine } from '@msdyn365-commerce/retail-proxy';\nimport { getPromotionOptionsForCartLineItems, PromotionOptionsForCartLineItems } from '@msdyn365-commerce-modules/retail-actions';\n\n/**\n * IPromotionData entity interface.\n */\nexport interface IPromotionData {\n promotionOptions?: CartPromotionLine[];\n}\n\n/**\n * Calls the Retail API and returns a promotion data.\n * @param ctx\n */\nexport async function getPromotionData(ctx: IActionContext): Promise {\n const promotionData: IPromotionData = {};\n\n await getPromotionOptionsForCartLineItems(new PromotionOptionsForCartLineItems(ctx.requestContext.apiSettings), ctx)\n .then(promotionOptions => {\n if (promotionOptions) {\n promotionData.promotionOptions = promotionOptions;\n }\n })\n .catch(error => {\n ctx.telemetry.exception(error);\n return {};\n });\n\n return promotionData;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n IAddToOrderTemplateDialogResources,\n IDuplicateItemsWhenAddingToOrderTemplateDialogResources,\n IItemAddedToOrderTemplateDialogResources,\n ILinesAddedToOrderTemplateDialogResources,\n IOrderTemplateNameDialogResources,\n IWishlistActionSuccessResult,\n PromoCodeComponent,\n SaveCartToOrderTemplateComponent\n} from '@msdyn365-commerce/components';\nimport MsDyn365, { getCatalogId, getUrlSync, IImageSettings, isChannelTypeB2B } from '@msdyn365-commerce/core';\nimport { ICartActionResult, ICartState } from '@msdyn365-commerce/global-state';\nimport { AsyncResult, CartLine, CartLineValidationResultsByLineId, LineValidationResult } from '@msdyn365-commerce/retail-proxy';\nimport { FeatureState, ProductDeliveryOptions, ReleasedProductType } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { cartLineQuantityUpdatedAsync, validateCartAsync } from '@msdyn365-commerce-modules/cart-utilities';\nimport { IInvoiceSummaryLines, InvoiceSummary } from '@msdyn365-commerce-modules/invoice-payment-summary';\nimport { IOrderSummaryLines, OrderSummary } from '@msdyn365-commerce-modules/order-summary-utilities';\nimport {\n ActiveCartProductsInput,\n ArrayExtensions,\n getActiveCartProductsAction,\n ICartLineInventoryValidationResult,\n ObjectExtensions,\n validateCartLinesInventory,\n ProductPickUpOptionsForCartLineItems,\n validateCatalogId\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n Alert,\n Button,\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n INodeProps,\n IPayLoad,\n ITelemetryContent,\n TelemetryConstant,\n Waiting,\n updateMaxQuantityForCartLineItem,\n urlCheck\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { reaction } from 'mobx';\nimport { observer } from 'mobx-react';\nimport React from 'react';\nimport { getPickUpOptionsForCartLineItems } from './actions/get-pickup-options-for-cartlines';\n\nimport { ICartData } from './cart.data';\nimport { ICartProps, ICartResources } from './cart.props.autogenerated';\nimport { CartLineGroupItems } from './components/cart-line-groups';\nimport { CartLineItems, ICartlinesViewProps } from './components/cart-line-items';\nimport { cartPromotions, ICartLineItemViewProps } from './components/cart-line-items-promotion';\nimport { getPromotionData, IPromotionData } from './utils/get-promotion-in-cart';\n\n/**\n * Cart view props interface.\n */\nexport interface ICartViewProps extends ICartProps {\n className: string;\n title?: React.ReactNode;\n CartlinesWrapper: INodeProps;\n cartlines?: ICartlinesViewProps[];\n cartLinesGroup?: ICartlinesViewProps[][];\n cart: ICartState | undefined;\n orderSummaryHeading: React.ReactNode;\n orderSummaryLineitems?: IOrderSummaryLines;\n invoiceSummaryLineitems?: IInvoiceSummaryLines;\n OrderSummaryWrapper: INodeProps;\n OrderSummaryItems: INodeProps;\n OrderSummaryErrors?: IOrderSummaryErrors;\n checkoutAsGuestButton: React.ReactNode;\n checkoutAsSignInUserButton: React.ReactNode;\n storeSelector?: React.ReactNode;\n expressCheckoutButton?: React.ReactNode[];\n ExpressCheckoutSectionWrapper: INodeProps;\n backToShoppingButton: React.ReactNode;\n waitingComponent: React.ReactNode;\n promotionOptions?: ICartLineItemViewProps;\n promoCode: React.ReactNode;\n cartLoadingStatus: string;\n cartDataResult: boolean;\n multiplePickUpEnabled?: boolean;\n createTemplateFromCartButton: React.ReactNode;\n telemetryContent?: ITelemetryContent;\n checkoutBlockedDueToUnavailableFunds?: React.ReactNode;\n removeItemClickHandler(cartlineToRemove: CartLine): void;\n moveToWishlistSuccessHandler(result: IWishlistActionSuccessResult, cartlineId: CartLine): void;\n}\n\n/**\n * Order summary errors interface.\n */\nexport interface IOrderSummaryErrors {\n Wrapper: INodeProps;\n header: React.ReactNode;\n errors: React.ReactNode[];\n}\n\n/**\n * Cart component state interface.\n */\ninterface ICartComponentState {\n showPromotionDialog: boolean;\n cartlinesErrors: CartLineValidationResultsByLineId;\n promotionData: IPromotionData;\n isCartValid: boolean;\n productPickUpOptions?: ProductDeliveryOptions[];\n}\n\n/**\n * Cart component.\n * @extends {React.PureComponent>}\n */\n@observer\nclass Cart extends React.Component> {\n public state: ICartComponentState;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly payLoad: IPayLoad;\n\n private isQuantityLimitsFeatureEnabled: boolean = false;\n\n private _isMounted: boolean = false;\n\n private readonly promotionPopupId: string = 'cart-promotion-popup';\n\n public constructor(props: ICartProps) {\n super(props);\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.payLoad = getPayloadObject('click', this.telemetryContent, '');\n this.promotionLinkClick = this.promotionLinkClick.bind(this);\n this.promotionCloseButtonclick = this.promotionCloseButtonclick.bind(this);\n\n this.state = {\n showPromotionDialog: false,\n promotionData: {},\n isCartValid: true,\n productPickUpOptions: undefined,\n cartlinesErrors: {}\n };\n }\n\n /**\n * Component did mount function.\n */\n public async componentDidMount(): Promise {\n this._isMounted = true;\n const {\n config,\n context: { actionContext }\n } = this.props;\n\n this.isQuantityLimitsFeatureEnabled =\n (await this.getOrderQuantityLimitsFeatureFlag()) || (await this._isChannelLimitsFeatureEnabled());\n if (this.isQuantityLimitsFeatureEnabled) {\n await this.validateCart();\n }\n\n if (config.showAvailablePromotions) {\n if (this._isMounted && this.props.data.cart.result?.cart.CartLines) {\n this.setState({ promotionData: await getPromotionData(actionContext) });\n }\n\n reaction(\n () => this.props.data.cart.result?.cart.CartLines,\n async () => {\n if (this._isMounted) {\n this.setState({ promotionData: await getPromotionData(actionContext) });\n }\n }\n );\n }\n reaction(\n () => this.props.data.cart.result?.cart.CartLines,\n async () => {\n if (this._isMounted) {\n const input = new ProductPickUpOptionsForCartLineItems(actionContext.requestContext.apiSettings);\n this.setState({ productPickUpOptions: await getPickUpOptionsForCartLineItems(input, actionContext) });\n }\n }\n );\n }\n\n /**\n * Component will unmount function.\n */\n public componentWillUnmount(): void {\n this._isMounted = false;\n }\n\n /**\n * Should component update function.\n * @param nextProps - Next props.\n * @param nextState - Next state.\n * @returns True if component should update, false otherwise.\n */\n public shouldComponentUpdate(nextProps: ICartProps, nextState: ICartComponentState): boolean {\n if (this.state === nextState && this.props.data === nextProps.data) {\n return false;\n }\n return true;\n }\n\n /* eslint-disable complexity -- Disabling complexity for render method */\n public render(): JSX.Element | null {\n const {\n data: {\n cart: { result: cart },\n products: { result: products }\n },\n context: {\n request: {\n user: { isAuthenticated, signInUrl }\n }\n },\n resources\n } = this.props;\n\n const guestCheckoutUrl = getUrlSync('checkout', this.props.context.actionContext) || '';\n const backToShoppingUrl = getUrlSync('home', this.props.context.actionContext) || '';\n const checkoutURL = this.getCheckoutURL(isAuthenticated, guestCheckoutUrl, signInUrl || '');\n const isCartEmpty = cart && cart.cart.CartLines && cart.cart.CartLines.length === 0;\n const cartLines = this._getCartLines();\n const emailDeliveryModeCode = this.props.context.request.channel?.EmailDeliveryModeCode;\n const validInventoryAcrossCartLines = validateCartLinesInventory(\n cart?.cart.CartLines ?? [],\n this.props.data.productAvailabilites.result ?? [],\n this.props.context.actionContext,\n products ?? [],\n emailDeliveryModeCode\n );\n\n const hasError =\n !validInventoryAcrossCartLines?.isValid ||\n (!validInventoryAcrossCartLines && !this.state.isCartValid) ||\n (cartLines ? cartLines.some(cartline => cartline.hasError) : false);\n const RetailMultiplePickupFeatureState = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature'\n );\n const multiplePickUpEnabled = RetailMultiplePickupFeatureState?.IsEnabled;\n const channelMultipleCatalogsFeature = 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature';\n const { featureState } = this.props.data;\n const isMultipleCatalogsFeatureEnabled =\n featureState.result?.find((item: FeatureState) => item.Name === channelMultipleCatalogsFeature)?.IsEnabled || false;\n const currentCatalogId = getCatalogId(this.props.context.request);\n validateCatalogId(currentCatalogId);\n const cartLinesGroup = cart?.hasInvoiceLine || multiplePickUpEnabled ? this.getCartLinesGroup() : null;\n this.payLoad.contentAction.etext = TelemetryConstant.Checkout;\n const checkoutBySignInAttributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n this.payLoad.contentAction.etext = TelemetryConstant.GuestCheckout;\n const checkoutByGuestAttributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n this.payLoad.contentAction.etext = TelemetryConstant.BackToShopping;\n const backtoShoppingAttributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n\n // If there's inventory issues across multiple cart lines then update the error and display as part of the order summary\n if (validInventoryAcrossCartLines && !validInventoryAcrossCartLines.isValid) {\n if (multiplePickUpEnabled && cartLinesGroup !== null) {\n for (const cartLineGroup of cartLinesGroup) {\n this._updateCartLineErrorForInvalidInventory(cartLineGroup, validInventoryAcrossCartLines);\n }\n }\n\n this._updateCartLineErrorForInvalidInventory(cartLines, validInventoryAcrossCartLines);\n }\n\n const viewProps = {\n ...this.props,\n className: classnames('ms-cart'),\n title: {resources.cartTitle}
,\n cart: this.props.data.cart.result,\n CartlinesWrapper: { className: 'msc-cartline-wraper' },\n OrderSummaryWrapper: { className: cart?.hasInvoiceLine ? 'msc-invoice-summary-wrapper' : 'msc-order-summary-wrapper' },\n OrderSummaryItems: { className: cart?.hasInvoiceLine ? 'msc-invoice-summary__items' : 'msc-order-summary__items' },\n cartlines: cartLines,\n cartLinesGroup,\n promoCode: this._getPromoCode(),\n promotionOptions: this._getPromotions(),\n context: this.props.context,\n typeName: this.props.typeName,\n telemetry: this.props.telemetry,\n id: this.props.id,\n multiplePickUpEnabled,\n removePromoAriaLabelFormat: resources.removePromoAriaLabelFormat,\n orderSummaryHeading: ArrayExtensions.hasElements(cart?.cart.CartLines) ? (\n cart?.hasInvoiceLine ? (\n {resources.invoiceSummaryTitle}
\n ) : (\n {resources.orderSummaryTitle}
\n )\n ) : null,\n orderSummaryLineitems: this._getOrderSummaryLineItems(),\n invoiceSummaryLineitems: this._getInvoiceSummaryLineItems(),\n checkoutAsSignInUserButton: !isCartEmpty ? (\n \n {resources.checkoutButtonTitle}\n \n ) : null,\n checkoutAsGuestButton:\n !isCartEmpty && !isAuthenticated && this.props.config.showGuestCheckoutButton ? (\n \n {resources.guestCheckoutButtonTitle}\n \n ) : null,\n expressCheckoutButton: !isCartEmpty ? this.props.slots.paymentExpress : null,\n ExpressCheckoutSectionWrapper: { className: 'msc-express-payment-container-in-cart-page' },\n backToShoppingButton: (\n \n {resources.backToShoppingButtonTitle}\n \n ),\n createTemplateFromCartButton:\n this._displayAddCartToTemplate() && products ? (\n \n ) : null,\n checkoutBlockedDueToUnavailableFunds: null,\n storeSelector:\n this.props.slots.storeSelector && this.props.slots.storeSelector.length > 0 ? this.props.slots.storeSelector[0] : null,\n removeItemClickHandler: this.removeItemFromCartHandler,\n moveToWishlistSuccessHandler: this.moveToWishlistSuccessHandler,\n waitingComponent: ,\n cartLoadingStatus: this.props.data.cart.status === 'FAILED' ? this.props.resources.cartLoadingErrorMessage : null,\n cartDataResult: this.props.data.cart.result && this.props.data.cart.result.isEmpty,\n OrderSummaryErrors: this._getOrderSummaryErrors(cartLines),\n telemetryContent: this.telemetryContent\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n /* eslint-enable complexity -- Disabling complexity for render method */\n\n /**\n * Promotion click event handler.\n * @param event - The mouse event.\n */\n private readonly promotionLinkClick = (event: React.MouseEvent) => {\n this.setState({\n showPromotionDialog: !this.state.showPromotionDialog\n });\n };\n\n /**\n * Promotion close button click.\n */\n private readonly promotionCloseButtonclick = () => {\n this._hidePromotionDialog();\n };\n\n /**\n * Hide promotion dialog.\n */\n private _hidePromotionDialog(): void {\n this.setState({\n showPromotionDialog: false\n });\n }\n\n /**\n * Display add to cart template.\n * @returns True if should display, false otherwise.\n */\n private _displayAddCartToTemplate(): boolean {\n const cart = this.props.data.cart?.result;\n if (ObjectExtensions.isNullOrUndefined(cart) || cart.hasInvoiceLine) {\n return false;\n }\n\n if (\n isChannelTypeB2B(this.props.context.actionContext.requestContext) &&\n this.props.data.orderTemplates.result &&\n ArrayExtensions.hasElements(cart.cart?.CartLines) &&\n this.props.data.customerInformation.result\n ) {\n return true;\n }\n\n return false;\n }\n\n /**\n * Get promotions.\n * @returns React node with the promotions.\n */\n private _getPromotions(): React.ReactNode {\n return (\n this.props.config.showAvailablePromotions &&\n cartPromotions({\n id: this.promotionPopupId,\n showPromotionPopup: this.state.showPromotionDialog,\n onSeeAllClick: this.promotionLinkClick,\n onCloseButtonClick: this.promotionCloseButtonclick,\n promotions: this.state.promotionData.promotionOptions,\n resources: {\n promotionStringHeading: this.props.resources.promotionStringHeading,\n promotionLinkText: this.props.resources.promotionLinkText,\n promotionPopupHeading: this.props.resources.promotionPopupHeading,\n promotionCloseButtonAriaLabel: this.props.resources.promotionCloseButtonAriaLabel\n }\n })\n );\n }\n\n /**\n * Add error message in cart line in case the quantity exceeds the current inventory.\n * @param cartLines - The cart lines.\n * @param cartLineInventoryValidationResult - The cart line inventory result.\n */\n private _updateCartLineErrorForInvalidInventory(\n cartLines: ICartlinesViewProps[] | null,\n cartLineInventoryValidationResult: ICartLineInventoryValidationResult\n ) {\n const { resources } = this.props;\n\n if (\n ArrayExtensions.hasElements(cartLines) &&\n !cartLineInventoryValidationResult.isValid &&\n ArrayExtensions.hasElements(cartLineInventoryValidationResult.productIdWithErrors)\n ) {\n for (const productIdWithError of cartLineInventoryValidationResult.productIdWithErrors) {\n const cartLine = cartLines?.find(element => element.data?.cartline.ProductId === productIdWithError);\n if (cartLine) {\n cartLine.error = resources.outOfStockErrorMessage;\n cartLine.hasError = true;\n }\n }\n }\n }\n\n /**\n * Get order summary errors.\n * @param cartLines - The cart lines.\n * @returns Order summary errors.\n */\n private _getOrderSummaryErrors(cartLines: ICartlinesViewProps[] | null): IOrderSummaryErrors | undefined {\n const allErrors =\n (cartLines &&\n cartLines\n .map(cartline => {\n // Check if the product is service or not by product type\n const isServiceItem = cartline.data?.product?.ItemTypeValue === ReleasedProductType.Service;\n\n if (!isServiceItem && cartline.error) {\n const fullError =\n cartline.data && cartline.data.product?.Name\n ? `${cartline.data.product.Name}: ${cartline.error}`\n : cartline.error;\n\n return (\n \n {fullError}\n
\n );\n }\n\n return null;\n })\n .filter((line): line is JSX.Element => !!line)) ||\n [];\n\n return {\n Wrapper: {\n tag: Alert,\n className: 'msc-alert',\n isOpen: allErrors.length > 0,\n color: 'danger',\n assertive: true,\n 'aria-label': this.props.resources.outOfStockErrorMessageHeader\n },\n header: (\n \n \n {this.props.resources.outOfStockErrorMessageHeader}\n
\n ),\n errors: allErrors\n };\n }\n\n /**\n * Gets invoice summary line items.\n * @returns Invoice summary lines.\n */\n private _getInvoiceSummaryLineItems(): IInvoiceSummaryLines | undefined {\n const {\n data: {\n cart: { result: cart }\n },\n telemetry,\n resources\n } = this.props;\n\n return cart?.hasInvoiceLine\n ? InvoiceSummary({\n orderTotalLabel: resources.totalAmountLabel,\n invoiceLabel: resources.invoiceLabel,\n cart: cart.cart,\n context: this.props.context,\n typeName: this.props.typeName,\n telemetry,\n id: this.props.id\n })\n : undefined;\n }\n\n /**\n * Gets order summary line items.\n * @returns Order summary lines.\n */\n private _getOrderSummaryLineItems(): IOrderSummaryLines | undefined {\n const {\n data: {\n cart: { result: cart },\n channelDeliveryOptionConfig\n },\n telemetry,\n resources\n } = this.props;\n\n const channelConfiguration = this.props.context && this.props.context.request && this.props.context.request.channel;\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const featureState = this.props?.data?.featureState;\n const retailMultiplePickUpOptionEnabled = featureState?.result?.find(item => item.Name === multiplePickupStoreSwitchName)\n ?.IsEnabled;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- app configs are of generic type\n const isShowOrHideTaxEnabled = this.props.context.request.app.config?.isEnableShowOrHideSalesTaxECommerceEnabled === true;\n\n return channelConfiguration && ArrayExtensions.hasElements(cart?.cart.CartLines) && !cart?.hasInvoiceLine\n ? OrderSummary({\n cart: cart!.cart,\n subTotalLabel: resources.itemsWithCountLabel,\n shippingLabel: resources.estimatedShippingLabel,\n otherChargeLabel: resources.otherCharges,\n taxLabel: resources.estimatedTaxLabel,\n orderTotalLabel: resources.orderTotal,\n totalDiscountsLabel: resources.totalDiscountsLabel,\n context: this.props.context,\n typeName: this.props.typeName,\n id: this.props.id,\n toBeCalculatedText: resources.yetToBeCalculatedText,\n freeText: resources.priceFree,\n channelConfiguration,\n retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig: channelDeliveryOptionConfig?.result,\n telemetry,\n isTaxIncludedInPrice: cart!.cart.IsTaxIncludedInPrice,\n isShowTaxBreakup: isShowOrHideTaxEnabled\n })\n : undefined;\n }\n\n /**\n * Gets promo code.\n * @returns React node with the promo code.\n */\n private _getPromoCode(): React.ReactNode {\n const {\n data: {\n cart: { result: cart }\n },\n resources\n } = this.props;\n\n return (\n cart && (\n \n )\n );\n }\n\n /**\n * Generate add to order template dialog resources.\n * @param resources - The resources.\n * @returns IAddToOrderTemplateDialogResources.\n */\n private _generateAddToOrderTemplateDialogResources(resources: ICartResources): IAddToOrderTemplateDialogResources {\n return {\n addToOrderTemplateHeader: resources.addToOrderTemplateHeader,\n\n noOrderTemplatesMessage: resources.noOrderTemplatesMessage,\n noOrderTemplatesDescription: resources.noOrderTemplatesDescription,\n\n createAnOrderTemplateButtonText: resources.createAnOrderTemplateButtonText,\n createNewOrderTemplateButtonText: resources.createNewOrderTemplateButtonText,\n cancelOrderTemplateCreationButtonText: resources.cancelOrderTemplateCreationButtonText,\n\n selectTemplatesText: resources.selectTemplatesText,\n addToTemplateButtonText: resources.addToTemplateButtonText,\n lineItemsText: resources.lineItemsText\n };\n }\n\n /**\n * Generate item added to order template dialog resources.\n * @param resources - The resources.\n * @returns IItemAddedToOrderTemplateDialogResources.\n */\n private _generateItemAddedToOrderTemplateDialogResources(resources: ICartResources): IItemAddedToOrderTemplateDialogResources {\n return {\n viewOrderTemplateButtonText: resources.viewOrderTemplateButtonText,\n continueShoppingButtonText: resources.continueShoppingButtonText,\n itemAddedToOrderTemplateHeaderItemOneText: resources.itemAddedToOrderTemplateHeaderItemOneText,\n itemAddedToOrderTemplateHeaderItemFormatText: resources.itemAddedToOrderTemplateHeaderItemFormatText,\n itemAddedToOrderTemplateHeaderMessageText: resources.itemAddedToOrderTemplateHeaderMessageText,\n freePriceText: resources.freePriceText,\n originalPriceText: resources.originalPriceText,\n currentPriceText: resources.currentPriceText\n };\n }\n\n /**\n * Generate lines added to order template dialog resources.\n * @param resources - The resources.\n * @returns ILinesAddedToOrderTemplateDialogResources.\n */\n private _generateLinesAddedToOrderTemplateDialogResources(resources: ICartResources): ILinesAddedToOrderTemplateDialogResources {\n return {\n viewOrderTemplateButtonText: resources.viewOrderTemplateButtonText,\n continueShoppingButtonText: resources.continueShoppingButtonText,\n linesAddedToOrderTemplateHeaderItemsOneText: resources.linesAddedToOrderTemplateHeaderItemsOneText,\n linesAddedToOrderTemplateHeaderItemsFormatText: resources.linesAddedToOrderTemplateHeaderItemsFormatText,\n linesAddedToOrderTemplateHeaderLinesOneText: resources.linesAddedToOrderTemplateHeaderLinesOneText,\n linesAddedToOrderTemplateHeaderLinesFormatText: resources.linesAddedToOrderTemplateHeaderLinesFormatText,\n linesAddedToOrderTemplateHeaderMessageText: resources.linesAddedToOrderTemplateHeaderMessageText,\n linesAddedToOrderTemplateCustomPriceAlertMessageText: resources.linesAddedToOrderTemplateCustomPriceAlertMessageText\n };\n }\n\n /**\n * Generate duplicate items when adding to order template dialog resources.\n * @param resources - The resources.\n * @returns IDuplicateItemsWhenAddingToOrderTemplateDialogResources.\n */\n private _generateDuplicateItemsWhenAddingToOrderTemplateDialogResources(\n resources: ICartResources\n ): IDuplicateItemsWhenAddingToOrderTemplateDialogResources {\n return {\n duplicatedProductsHeader: resources.duplicatedProductsHeader,\n duplicatedProductsDescription: resources.duplicatedProductsDescription,\n updateQuantityButtonText: resources.updateQuantityButtonText,\n cancelDuplicateItemsButtonText: resources.cancelDuplicateItemsButtonText\n };\n }\n\n /**\n * Generate order template name dialog resources.\n * @param resources - The resources.\n * @returns IOrderTemplateNameDialogResources.\n */\n private _generateOrderTemplateNameDialogResources(resources: ICartResources): IOrderTemplateNameDialogResources {\n return {\n orderTemplateHeaderLabel: resources.createOrderTemplateHeader,\n orderTemplateTitleLabel: resources.orderTemplateTitle,\n orderTemplateNameAriaLabel: resources.orderTemplateNameAriaLabel,\n orderTemplateDescription: resources.createOrderTemplateDescription,\n\n defaultOrderTemplateName: resources.defaultOrderTemplateName,\n\n orderTemplateButtonLabel: resources.createOrderTemplateButtonText,\n orderTemplateCancelButtonLabel: resources.cancelNewOrderTemplateCreationButtonText\n };\n }\n\n /**\n * Gets the cart lines view props.\n * @returns ICartlinesViewProps [].\n */\n private _getCartLines(): ICartlinesViewProps[] | null {\n const {\n data: {\n cart: { result: cart },\n wishlists: { result: wishlists },\n orderTemplates: { result: orderTemplates },\n customerInformation: { result: customerInformation }\n },\n context: {\n request: { channel: { PickupDeliveryModeCode } = { PickupDeliveryModeCode: undefined } }\n },\n config,\n telemetry,\n resources,\n modules\n } = this.props;\n\n const imageSettings = this.getImageSettings(config.imageSettings);\n\n const RetailMultiplePickupFeatureState = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature'\n );\n const multiplePickUpEnabled = RetailMultiplePickupFeatureState?.IsEnabled;\n\n const cartlinesErrors: CartLineValidationResultsByLineId = this.state.cartlinesErrors;\n let storeSelectorId: string = '';\n if (modules && Object.keys(modules).length > 0 && modules.storeSelector && modules.storeSelector.length > 0) {\n storeSelectorId = modules.storeSelector[0].id;\n }\n const channelMultipleCatalogsFeature = 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature';\n const isMultipleCatalogsFeatureEnabled =\n this.props.data.featureState.result?.find((item: FeatureState) => item.Name === channelMultipleCatalogsFeature)?.IsEnabled ||\n false;\n return ArrayExtensions.hasElements(cart?.cart.CartLines)\n ? CartLineItems({\n cartlines: cart!.cart.CartLines,\n storeSelectorModuleId: storeSelectorId,\n cartlinesErrors,\n products: this.props.data.products.result,\n productAvailabilites: this.props.data.productAvailabilites.result,\n productDeliveryOptions: this.props.data.deliveryOptions.result,\n catalogs: this.props.data.catalogs?.result,\n imageSettings,\n isStockCheckEnabled: this.props.context.app.config.enableStockCheck || false,\n maxCartlineQuantity: updateMaxQuantityForCartLineItem(this.props.context.app.config.maxQuantityForCartLineItem),\n shouldIgnoreWarehouse: this.props.context.app.config.warehouseAggregation === 'multiple',\n gridSettings: this.props.context.request.gridSettings!,\n context: this.props.context,\n typeName: this.props.typeName,\n id: this.props.id,\n retailMulitplePickupFeatureState: multiplePickUpEnabled,\n resources: {\n sizeString: resources.productDimensionTypeSize,\n colorString: resources.productDimensionTypeColor,\n configString: resources.productDimensionTypeConfiguration,\n styleString: resources.productDimensionTypeStyle,\n amountString: resources.productDimensionTypeAmount,\n quantityDisplayString: resources.quantityDisplayText,\n inputQuantityAriaLabel: resources.inputQuantityAriaLabel,\n decrementButtonAriaLabel: resources.decrementButtonAriaLabel,\n incrementButtonAriaLabel: resources.incrementButtonAriaLabel,\n discountStringText: resources.discountStringText,\n originalPriceText: resources.originalPriceText,\n currentPriceText: resources.currentPriceText,\n shippingChargesText: resources.shippingCharges,\n salesAgreementPricePrompt: resources.salesAgreementPricePrompt,\n priceEditorResources: {\n ...resources\n }\n },\n telemetry,\n addToWishlistButtonText: resources.addToWishlistButtonText,\n removeFromWishlistButtonText: resources.removeFromWishlistButtonText,\n removeButtonText: resources.removeCartButtonText,\n shipItText: resources.shipInsteadDisplayText,\n pickitUpText: resources.pickItUpDisplayText,\n changeStoreText: resources.changeStoreDisplayText,\n storeSelectorStateManager: this.props.data.storeSelectorStateManager.result,\n outOfStockText: resources.outOfStockErrorMessage,\n outOfRangeOneText: resources.errorMessageOutOfRangeOneLeft,\n outOfRangeFormatText: resources.errorMessageOutOfRangeFormat,\n cartState: this.props.data.cart.result,\n orgUnitLocations: this.props.data.orgUnitLocations.result,\n removeItemClickHandler: this.removeItemFromCartHandler,\n moveToWishlistSuccessHandler: this.moveToWishlistSuccessHandler,\n updateCartLinesQuantitySuccessHandler: this.updateCartlineQuantity,\n locationChangedHandler: this.fulfillmentStoreIdUpdated,\n wishlists,\n defaultWishlistName: resources.defaultWishlistName,\n pickupDeliveryModeCode: PickupDeliveryModeCode,\n includeErrors: config.showOutOfStockErrors,\n showShippingChargesForLineItems: config.showShippingChargesForLineItems,\n telemetryContent: this.telemetryContent,\n isQuantityLimitsFeatureEnabled: this.isQuantityLimitsFeatureEnabled,\n\n addToOrderTemplateDialogResources: this._generateAddToOrderTemplateDialogResources(resources),\n createOrderTemplateDialogResources: this._generateOrderTemplateNameDialogResources(resources),\n itemAddedToOrderTemplateDialogResources: this._generateItemAddedToOrderTemplateDialogResources(resources),\n duplicateItemsWhenAddingToOrderTemplateDialogResources: this._generateDuplicateItemsWhenAddingToOrderTemplateDialogResources(\n resources\n ),\n\n addToOrderTemplateButtonText: resources.addToOrderTemplateButtonText,\n addToOrderTemplateButtonTooltip: resources.addToOrderTemplateButtonTooltip,\n addToOrderTemplateMessage: resources.addToOrderTemplateMessage,\n addItemToOrderTemplateError: resources.addItemToOrderTemplateError,\n orderTemplates,\n customerInformation,\n productAvailability: this.props.data.productAvailabilites,\n isMultipleCatalogFeatureEnabledInHq: isMultipleCatalogsFeatureEnabled || false\n })\n : null;\n }\n\n /**\n * Gets the checkout URL.\n * @param isAuthenticated - Is authenticated flag.\n * @param guestCheckoutUrl - Guest checkout URL.\n * @param signInUrl -The sign in URL.\n * @returns The checkout URL.\n */\n private getCheckoutURL(isAuthenticated: boolean, guestCheckoutUrl: string, signInUrl: string): string {\n if (isAuthenticated) {\n return guestCheckoutUrl;\n }\n\n const isAbsoluteUrl = urlCheck(guestCheckoutUrl);\n let returnURL = guestCheckoutUrl;\n if (MsDyn365.isBrowser && !isAbsoluteUrl) {\n returnURL = `${window.location.origin}${guestCheckoutUrl}`;\n }\n\n return `${signInUrl}${!signInUrl.includes('?') ? '?' : '&'}ru=${returnURL}`;\n }\n\n /**\n * Gets the image settings.\n * @param imageSettings - Image settings.\n * @returns IImageSettings.\n */\n private readonly getImageSettings = (imageSettings: IImageSettings | undefined): IImageSettings => {\n return (\n imageSettings || {\n viewports: {\n xs: { q: 'w=80&h=94&m=6', w: 0, h: 0 },\n sm: { q: 'w=148&h=174&m=6', w: 0, h: 0 },\n lg: { q: 'w=148&h=174&m=6', w: 0, h: 0 }\n },\n lazyload: true\n }\n );\n };\n\n /**\n * Remove item from cart handler.\n * @param cartlineToRemove - The cart line to remove.\n */\n private readonly removeItemFromCartHandler = (cartlineToRemove: CartLine) => {\n if (this.props.data.cart.result) {\n const input = {\n cartLineIds: [cartlineToRemove.LineId!.toString()]\n };\n this.props.data.cart.result\n .removeCartLines(input)\n .then(() => {\n this.validateCart().catch(error => {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to validate Cart');\n });\n })\n .catch(error => {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to Remove Cart Line');\n });\n }\n };\n\n /**\n * Move to wish list handler.\n * @param result - The wish list action success result.\n * @param cartline - The cart line.\n */\n private readonly moveToWishlistSuccessHandler = (result: IWishlistActionSuccessResult, cartline?: CartLine) => {\n if (result.status === 'ADDED' && cartline) {\n this.removeItemFromCartHandler(cartline);\n }\n };\n\n /**\n * Updates the cart line quantity.\n * @param cartlineToUpdate - The cart line.\n * @param quantity - The quantity.\n * @param lineIndex - The line index.\n * @returns True if the cart line was updated, false otherwise.\n */\n private readonly updateCartlineQuantity = (cartlineToUpdate: CartLine, quantity: number, lineIndex?: number): boolean => {\n cartLineQuantityUpdatedAsync(\n this.isQuantityLimitsFeatureEnabled,\n this.props.data.cart.result,\n this.props.telemetry,\n this.props.data.products.result,\n cartlineToUpdate,\n quantity\n )\n .then((cartActionResult: ICartActionResult | undefined): boolean => {\n if (cartActionResult?.status === 'SUCCESS') {\n this.validateCart().catch(error => {\n this.props.telemetry.warning((error as Error).message);\n this.props.telemetry.debug('Unable to validate Cart');\n });\n\n return true;\n }\n\n if (!ObjectExtensions.isNullOrUndefined(cartActionResult)) {\n // Show update line error message.\n const lineUpdateFailure: LineValidationResult = {\n LineId: ObjectExtensions.isNullOrUndefined(cartlineToUpdate.LineId) ? '0' : cartlineToUpdate.LineId,\n ValidationFailures: [\n {\n ErrorContext: ArrayExtensions.hasElements(cartActionResult.validationResults)\n ? cartActionResult.validationResults[0].ErrorContext\n : '',\n LocalizedMessage: cartActionResult.errorDetails?.LocalizedMessage\n }\n ]\n };\n\n this.setState({\n cartlinesErrors: { ValidationResultsPairs: [lineUpdateFailure] }\n });\n }\n\n return false;\n })\n .catch(() => {\n return false;\n });\n\n return false;\n };\n\n /**\n * Fulfillment store id is updated.\n */\n private readonly fulfillmentStoreIdUpdated = () => {\n if (this.isQuantityLimitsFeatureEnabled) {\n // Refresh products (in props.data) based on latest cart.\n getActiveCartProductsAction(new ActiveCartProductsInput(), this.props.context.actionContext)\n .then(async () => this.validateCart())\n .catch((error: Error) => {\n this.props.telemetry.warning(error.message);\n this.props.telemetry.debug('Unable to validate Cart');\n });\n }\n };\n\n /**\n * Validates cart.\n * @returns Void promise.\n */\n private async validateCart(): Promise {\n if (!this.isQuantityLimitsFeatureEnabled) {\n this.setState({ isCartValid: true });\n return AsyncResult.resolve();\n }\n\n const {\n data: { cart },\n telemetry,\n context\n } = this.props;\n\n const validationResults: CartLineValidationResultsByLineId | undefined = await validateCartAsync(cart, telemetry, context, true);\n\n if (validationResults) {\n const isValid = !ArrayExtensions.hasElements(validationResults.ValidationResultsPairs);\n this.setState({\n cartlinesErrors: validationResults,\n isCartValid: isValid\n });\n } else {\n this.setState({ isCartValid: true });\n }\n\n return AsyncResult.resolve();\n }\n\n /**\n * Get order quantity limit feature flag.\n * @returns True if flag is enabled, false otherwise.\n */\n private async getOrderQuantityLimitsFeatureFlag(): Promise {\n const defaultOrderQuantityLimitsFeatureConfig = this.props.context?.request?.app?.platform?.enableDefaultOrderQuantityLimits;\n if (defaultOrderQuantityLimitsFeatureConfig === 'none') {\n return false;\n }\n\n try {\n const featureStatuses = await this.props.data.featureState;\n const isQuantityLimitsFeatureEnabledInHq =\n featureStatuses.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailDefaultOrderQuantityLimitsFeature'\n )?.IsEnabled || false;\n if (!isQuantityLimitsFeatureEnabledInHq) {\n return false;\n }\n } catch (error) {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to get feature states');\n return false;\n }\n\n if (defaultOrderQuantityLimitsFeatureConfig === 'all') {\n return true;\n }\n try {\n const customerInfo = await this.props.data.customerInformation;\n return (\n !!customerInfo &&\n ((defaultOrderQuantityLimitsFeatureConfig === 'b2b' && customerInfo.IsB2b) ||\n (defaultOrderQuantityLimitsFeatureConfig === 'b2c' && !customerInfo.IsB2b))\n );\n } catch (error) {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to get customer info');\n return false;\n }\n }\n\n private async _isChannelLimitsFeatureEnabled(): Promise {\n const featureStatuses = await this.props.data.featureState;\n\n const isChannelLimitsFeatureEnabledInHq = featureStatuses?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.EcommerceQuantityLimitConfigurationsFeature'\n )?.IsEnabled;\n\n return isChannelLimitsFeatureEnabledInHq ?? false;\n }\n\n /**\n * Gets the cart lines group.\n * @returns ICartlinesViewProps [][].\n */\n private getCartLinesGroup(): ICartlinesViewProps[][] | null {\n const {\n data: {\n cart: { result: cart },\n wishlists: { result: wishlists },\n orderTemplates: { result: orderTemplates },\n customerInformation: { result: customerInformation }\n },\n context: {\n request: { channel: { PickupDeliveryModeCode } = { PickupDeliveryModeCode: undefined } }\n },\n config,\n telemetry,\n resources,\n modules\n } = this.props;\n\n const imageSettings = this.getImageSettings(config.imageSettings);\n const cartlinesErrors: CartLineValidationResultsByLineId = this.state.cartlinesErrors;\n let storeSelectorId: string = '';\n if (modules && Object.keys(modules).length > 0 && modules.storeSelector && modules.storeSelector.length > 0) {\n storeSelectorId = modules.storeSelector[0].id;\n }\n\n const RetailMultiplePickupFeatureState = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature'\n );\n const multiplePickUpEnabled = RetailMultiplePickupFeatureState?.IsEnabled;\n const { featureState } = this.props.data;\n const channelMultipleCatalogsFeature = 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature';\n const isMultipleCatalogsFeatureEnabled =\n featureState.result?.find((item: FeatureState) => item.Name === channelMultipleCatalogsFeature)?.IsEnabled || false;\n return this.props.data.products &&\n (cart?.hasInvoiceLine || this.props.data.products.result) &&\n cart &&\n cart.cart.CartLines &&\n cart.cart.CartLines.length > 0 &&\n this.props.data.channelDeliveryOptionConfig?.result\n ? CartLineGroupItems({\n cartlines: cart.cart.CartLines,\n storeSelectorModuleId: storeSelectorId,\n cartlinesErrors,\n products: this.props.data.products.result,\n productAvailabilites: this.props.data.productAvailabilites.result,\n productDeliveryOptions: this.props.data.deliveryOptions.result,\n catalogs: this.props.data.catalogs?.result,\n imageSettings,\n isStockCheckEnabled: this.props.context.app.config.enableStockCheck || false,\n hasInvoiceLine: cart?.hasInvoiceLine || false,\n maxCartlineQuantity: updateMaxQuantityForCartLineItem(this.props.context.app.config.maxQuantityForCartLineItem),\n gridSettings: this.props.context.request.gridSettings!,\n context: this.props.context,\n retailMulitplePickupFeatureState: multiplePickUpEnabled,\n typeName: this.props.typeName,\n id: this.props.id,\n resources: {\n sizeString: resources.productDimensionTypeSize,\n colorString: resources.productDimensionTypeColor,\n configString: resources.productDimensionTypeConfiguration,\n styleString: resources.productDimensionTypeStyle,\n amountString: resources.productDimensionTypeAmount,\n quantityDisplayString: resources.quantityDisplayText,\n inputQuantityAriaLabel: resources.inputQuantityAriaLabel,\n decrementButtonAriaLabel: resources.decrementButtonAriaLabel,\n incrementButtonAriaLabel: resources.incrementButtonAriaLabel,\n discountStringText: resources.discountStringText,\n originalPriceText: resources.originalPriceText,\n currentPriceText: resources.currentPriceText,\n shippingChargesText: resources.shippingCharges,\n salesAgreementPricePrompt: resources.salesAgreementPricePrompt,\n priceEditorResources: {\n ...resources\n }\n },\n telemetry,\n addToWishlistButtonText: resources.addToWishlistButtonText,\n removeFromWishlistButtonText: resources.removeFromWishlistButtonText,\n removeButtonText: resources.removeCartButtonText,\n shipItText: resources.shipInsteadDisplayText,\n pickitUpText: resources.pickItUpDisplayText,\n changeStoreText: resources.changeStoreDisplayText,\n storeSelectorStateManager: this.props.data.storeSelectorStateManager.result,\n outOfStockText: resources.outOfStockErrorMessage,\n outOfRangeOneText: resources.errorMessageOutOfRangeOneLeft,\n outOfRangeFormatText: resources.errorMessageOutOfRangeFormat,\n cartState: this.props.data.cart.result,\n orgUnitLocations: this.props.data.orgUnitLocations.result,\n removeItemClickHandler: this.removeItemFromCartHandler,\n moveToWishlistSuccessHandler: this.moveToWishlistSuccessHandler,\n updateCartLinesQuantitySuccessHandler: this.updateCartlineQuantity,\n locationChangedHandler: this.fulfillmentStoreIdUpdated,\n wishlists,\n defaultWishlistName: resources.defaultWishlistName,\n pickupDeliveryModeCode: PickupDeliveryModeCode,\n includeErrors: config.showOutOfStockErrors,\n showShippingChargesForLineItems: config.showShippingChargesForLineItems,\n telemetryContent: this.telemetryContent,\n isQuantityLimitsFeatureEnabled: this.isQuantityLimitsFeatureEnabled,\n\n addToOrderTemplateDialogResources: this._generateAddToOrderTemplateDialogResources(resources),\n createOrderTemplateDialogResources: this._generateOrderTemplateNameDialogResources(resources),\n itemAddedToOrderTemplateDialogResources: this._generateItemAddedToOrderTemplateDialogResources(resources),\n duplicateItemsWhenAddingToOrderTemplateDialogResources: this._generateDuplicateItemsWhenAddingToOrderTemplateDialogResources(\n resources\n ),\n\n addToOrderTemplateButtonText: resources.addToOrderTemplateButtonText,\n addToOrderTemplateButtonTooltip: resources.addToOrderTemplateButtonTooltip,\n addToOrderTemplateMessage: resources.addToOrderTemplateMessage,\n addItemToOrderTemplateError: resources.addItemToOrderTemplateError,\n orderTemplates,\n customerInformation,\n channelDeliveryOptionConfig: this.props.data.channelDeliveryOptionConfig?.result,\n shouldIgnoreWarehouse: this.props.context.app.config.warehouseAggregation === 'multiple',\n productAvailability: this.props.data.productAvailabilites,\n productPickUpOptions: this.state.productPickUpOptions || this.props.data.cartLinesPickUpOptions?.result,\n isMultipleCatalogFeatureEnabledInHq: isMultipleCatalogsFeatureEnabled || false\n })\n : null;\n }\n}\n\nexport default Cart;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport MsDyn365 from '@msdyn365-commerce/core';\nimport { IInvoiceSummaryLines } from '@msdyn365-commerce-modules/invoice-payment-summary';\nimport { IOrderSummaryLines } from '@msdyn365-commerce-modules/order-summary-utilities';\nimport { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { INodeProps, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ICartViewProps, IOrderSummaryErrors } from './cart';\nimport { ICartlinesViewProps } from './components/cart-line-items';\nimport { ICartLineItemViewProps } from './components/cart-line-items-promotion';\n\nconst _renderCartlines = (\n cartLines: ICartlinesViewProps[] | undefined,\n cartEmptyText: string,\n CartlinesWrapper: INodeProps,\n storeSelector: React.ReactNode | undefined,\n backToShoppingButton: React.ReactNode,\n waitingComponent: React.ReactNode,\n cartLoadingStatus: string,\n cartDataResult: boolean\n): JSX.Element[] | JSX.Element => {\n if (cartLoadingStatus) {\n return <>{cartLoadingStatus};\n }\n if (cartLines) {\n return cartLines.map(cartLine => {\n return (\n \n {cartLine.cartline}\n {storeSelector && cartLine.pickUpInStore ? (\n {cartLine.pickUpInStore.defaultComponent}\n ) : null}\n {cartLine.addToOrderTemplate ? (\n \n {cartLine.remove}\n {cartLine.addToWishlist}\n {cartLine.addToOrderTemplate}\n \n ) : (\n <>\n {cartLine.remove}\n {cartLine.addToWishlist}\n \n )}\n
\n );\n });\n }\n return cartDataResult ? (\n \n
{cartEmptyText}
\n {backToShoppingButton}\n
\n {cartLine.pickUpInStore?.deliveryOption}\n {titleSeparate}\n {cartLine.pickUpInStore?.orgUnitName}\n
\n ) : null}\n \n \n );\n};\n\n/**\n * Method will render cartlines groups header title.\n * @param pickUpText -The pickup text for group.\n * @param shippingText -The shipping text for group.\n * @param emailShippingText -The email shipping text for group.\n * @param titleSeparate -The title separator.\n * @param cartLine -The cartline view props.\n * @param emailDeliveryModeCode -The email delivery code from channel.\n * @returns Jsx element.\n */\nconst renderCartLinesGroupHeader = (\n pickUpText: string,\n shippingText: string,\n emailShippingText: string,\n titleSeparate: string,\n cartLine: ICartlinesViewProps,\n emailDeliveryModeCode?: string\n) => {\n const isBopisSelected: boolean | undefined = cartLine.pickUpInStore?.isBopisSelected;\n let groupTitle: string;\n\n groupTitle = isBopisSelected ? pickUpText : shippingText;\n if (!StringExtensions.isNullOrEmpty(emailDeliveryModeCode)) {\n groupTitle = cartLine.data && cartLine.data.cartline.DeliveryMode === emailDeliveryModeCode ? emailShippingText : groupTitle;\n }\n\n return (\n <>\n \n
\n
{groupTitle}
\n {renderCartLinesGroupTitle(cartLine, titleSeparate)}\n
\n {props.cartLinesGroup.map(cartlines => {\n return (\n
\n {renderCartLinesGroupHeader(\n props.resources.pickUpText,\n props.resources.shippingText,\n props.resources.emailshippingText,\n props.resources.titleSeparate,\n cartlines[0],\n props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode\n )}\n {_renderCartlines(\n cartlines,\n props.resources.emptyCartText,\n props.CartlinesWrapper,\n props.storeSelector,\n props.backToShoppingButton,\n props.waitingComponent,\n props.cartLoadingStatus,\n props.cartDataResult\n )}\n
\n );\n })}\n
\n
\n
{props.resources.emptyCartText}
\n {props.backToShoppingButton}\n
\n
\n {props.title}\n {!props.cart?.hasInvoiceLine && props.promotionOptions && _renderPromotions(props.promotionOptions)}\n {props.multiplePickUpEnabled ? (\n renderCartLinesGroup(props)\n ) : (\n \n {_renderCartlines(\n props.cartlines,\n props.resources.emptyCartText,\n props.CartlinesWrapper,\n props.storeSelector,\n props.backToShoppingButton,\n props.waitingComponent,\n props.cartLoadingStatus,\n props.cartDataResult\n )}\n \n )}\n {props.orderSummaryHeading && (\n \n {props.orderSummaryHeading}\n {props.cart?.hasInvoiceLine\n ? _renderInvoiceSummarylines(props.invoiceSummaryLineitems, props.OrderSummaryItems, props)\n : _renderOrderSummarylines(props.orderSummaryLineitems, props.OrderSummaryItems, props)}\n {_renderErrorBlock(props.OrderSummaryErrors)}\n {props.checkoutAsSignInUserButton}\n {props.checkoutAsGuestButton}\n {props.expressCheckoutButton && ArrayExtensions.hasElements(props.expressCheckoutButton) ? (\n {props.expressCheckoutButton}\n ) : null}\n {props.backToShoppingButton}\n {props.createTemplateFromCartButton}\n \n )}\n {props.storeSelector}\n
\n);\n\nexport default CartView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartPromotionLine } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { INodeProps, Modal, ModalBody, ModalFooter, ModalHeader } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nexport interface ICartLineItemPromotion {\n id: string;\n showPromotionPopup: boolean;\n promotions: CartPromotionLine[] | undefined;\n resources: ICartLineItemPromotionResourceString;\n onSeeAllClick(event: React.MouseEvent): void;\n onCloseButtonClick(): void;\n}\n\nexport interface ICartLineItemViewProps {\n promotionMessageWrapper: INodeProps;\n promotionMessage: React.ReactNode;\n promotionSeeAllLink: React.ReactElement;\n promotionDialog: React.ReactNode;\n}\n\nexport interface ICartLineItemPromotionResourceString {\n promotionLinkText: string;\n promotionStringHeading: string;\n promotionPopupHeading: string;\n promotionCloseButtonAriaLabel: string;\n}\n\nexport const cartPromotions = (props: ICartLineItemPromotion): ICartLineItemViewProps | undefined => {\n const {\n id,\n showPromotionPopup,\n promotions,\n resources: { promotionLinkText, promotionPopupHeading },\n onCloseButtonClick,\n onSeeAllClick\n } = props;\n\n if (!ArrayExtensions.hasElements(promotions)) {\n return;\n }\n\n const titleId = `${id}_title`;\n const className = 'msc-cart__promotion';\n return {\n promotionMessageWrapper: {\n className: 'msc-cart__promotion'\n },\n promotionMessage: (\n <>\n \n {props.resources.promotionStringHeading}\n \n ),\n promotionSeeAllLink: (\n \n {` `}\n {promotionLinkText} {` `}\n \n ),\n promotionDialog: (\n \n \n \n {promotionPopupHeading}\n
\n \n \n \n {promotions.map(_promotion => {\n return (\n - \n {_promotion.Promotion?.OfferName} {` `}\n
\n );\n })}\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 {\n AddToOrderTemplateComponent,\n AddToWishlistComponent,\n CartLineItemComponent,\n IAddToOrderTemplateDialogResources,\n ICartlineResourceString,\n IDuplicateItemsWhenAddingToOrderTemplateDialogResources,\n IItemAddedToOrderTemplateDialogResources,\n IOrderTemplateNameDialogResources,\n IWishlistActionSuccessResult\n} from '@msdyn365-commerce/components';\nimport MsDyn365, {\n IAny,\n ICoreContext,\n IGeneric,\n IGridSettings,\n IImageSettings,\n ITelemetry,\n TelemetryEvent,\n isChannelTypeB2B\n} from '@msdyn365-commerce/core';\nimport { ICartState } from '@msdyn365-commerce/global-state';\nimport {\n AsyncResult,\n CartLine,\n CartLineValidationResultsByLineId,\n ChannelDeliveryOptionConfiguration,\n CommerceList,\n Customer,\n OrgUnitLocation,\n ProductDeliveryOptions,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport { ProductCatalog, ProductDimensionType, ReleasedProductType } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { IStoreSelectorStateManager } from '@msdyn365-commerce-modules/bopis-utilities';\nimport {\n ArrayExtensions,\n getInvoiceDetailsPageUrlSync,\n getProductUrlSync,\n IProductInventoryInformation,\n isCartLineItemPickUpType,\n ObjectExtensions,\n OrderTemplate,\n StringExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, getPayloadObject, getTelemetryAttributes, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { getProductByProductId, getProductByProductIdAndWarehouse } from '../../../Common/get-product';\nimport { IPickUpInStoreViewProps, PickUpInStore } from './cart-pick-up-in-store';\n\nexport interface ICartLineItemsProps {\n cartlines: CartLine[];\n cartlinesErrors: CartLineValidationResultsByLineId;\n cartState: ICartState | undefined;\n orgUnitLocations: OrgUnitLocation[] | undefined;\n resources: ICartlineResourceString;\n productAvailabilites: IProductInventoryInformation[] | undefined;\n products: SimpleProduct[] | undefined;\n productDeliveryOptions: ProductDeliveryOptions[] | undefined;\n pickupDeliveryModeCode?: string;\n catalogs?: ProductCatalog[];\n retailMulitplePickupFeatureState?: boolean;\n\n /* GridSettings for the product image in cartline */\n gridSettings: IGridSettings;\n\n /* ImageSettings for the product image in cartline */\n imageSettings: IImageSettings;\n id: string;\n typeName: string;\n context: ICoreContext>;\n telemetry: ITelemetry;\n removeButtonText: string;\n addToWishlistButtonText: string;\n removeFromWishlistButtonText: string;\n shipItText: string;\n pickitUpText: string;\n changeStoreText: string;\n outOfStockText: string;\n outOfRangeOneText: string;\n outOfRangeFormatText: string;\n storeSelectorStateManager: IStoreSelectorStateManager | undefined;\n isStockCheckEnabled: boolean;\n wishlists: CommerceList[] | undefined;\n defaultWishlistName: string;\n maxCartlineQuantity: number;\n includeErrors?: boolean;\n showShippingChargesForLineItems?: boolean;\n telemetryContent?: ITelemetryContent;\n isQuantityLimitsFeatureEnabled: boolean;\n hasInvoiceLine?: boolean;\n storeSelectorModuleId?: string;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n\n addToOrderTemplateDialogResources: IAddToOrderTemplateDialogResources;\n createOrderTemplateDialogResources: IOrderTemplateNameDialogResources;\n itemAddedToOrderTemplateDialogResources: IItemAddedToOrderTemplateDialogResources;\n duplicateItemsWhenAddingToOrderTemplateDialogResources: IDuplicateItemsWhenAddingToOrderTemplateDialogResources;\n\n addToOrderTemplateButtonText: string;\n addToOrderTemplateButtonTooltip: string;\n addToOrderTemplateMessage: string;\n addItemToOrderTemplateError: string;\n orderTemplates: OrderTemplate[] | undefined;\n customerInformation: Customer | undefined;\n shouldIgnoreWarehouse: boolean | undefined;\n productAvailability?: AsyncResult;\n productPickUpOptions?: ProductDeliveryOptions[] | undefined;\n isMultipleCatalogFeatureEnabledInHq: boolean;\n catalogId?: number;\n\n removeItemClickHandler(cartlineToRemove: CartLine): void;\n moveToWishlistSuccessHandler(result: IWishlistActionSuccessResult, cartlineId: CartLine): void;\n updateCartLinesQuantitySuccessHandler(cartline: CartLine, quantity: number, lineIndex?: number): boolean;\n locationChangedHandler(): void;\n}\n\nexport interface ICartlinesViewProps {\n cartline: React.ReactNode;\n pickUpInStore?: IPickUpInStoreViewProps;\n remove: React.ReactNode;\n addToWishlist: React.ReactNode | undefined;\n addToOrderTemplate: React.ReactNode | undefined;\n\n error?: string;\n cartlineId?: string;\n hasError?: boolean;\n data?: {\n product?: SimpleProduct;\n cartline: CartLine;\n };\n}\n\nconst _getCartItemAvailableQuantity = (\n isStockCheckEnabled: boolean,\n productAvailability: IProductInventoryInformation | undefined\n): number => {\n if (\n !isStockCheckEnabled ||\n !productAvailability ||\n !productAvailability.ProductAvailableQuantity ||\n !productAvailability.IsProductAvailable ||\n !productAvailability.ProductAvailableQuantity.AvailableQuantity\n ) {\n return 0;\n }\n\n return productAvailability.ProductAvailableQuantity.AvailableQuantity;\n};\n\nconst _getCartItemMaxQuantity = (\n maxQuantityByConfig: number,\n isStockCheckEnabled: boolean,\n availableQuantityInStock: number,\n isQuantityLimitsFeatureEnabled: boolean,\n maxByQuantityLimitsFeature: number\n) => {\n if (isQuantityLimitsFeatureEnabled) {\n let maxByQuantityLimitsFeatureResult = maxByQuantityLimitsFeature;\n\n // If max by feature in not defined when feature is on then we suggest that there no max by feature\n // and consider available qty if stock check enabled and max from config in site settings.\n if (!maxByQuantityLimitsFeature) {\n maxByQuantityLimitsFeatureResult = maxQuantityByConfig || 10;\n }\n\n return isStockCheckEnabled\n ? maxByQuantityLimitsFeatureResult < availableQuantityInStock\n ? maxByQuantityLimitsFeatureResult\n : availableQuantityInStock\n : maxByQuantityLimitsFeatureResult;\n }\n if (isStockCheckEnabled) {\n return availableQuantityInStock < maxQuantityByConfig ? availableQuantityInStock : maxQuantityByConfig;\n }\n return maxQuantityByConfig;\n};\n\nconst _getErrorMessage = (\n availableQuantityInStock: number,\n currentQuantity: number,\n props: ICartLineItemsProps,\n shouldSkipStockCheck: boolean,\n cartLine: CartLine,\n lineId: string | undefined,\n foundProductAvailability?: IProductInventoryInformation\n): string | undefined => {\n const finalErrorMessages: string[] = [];\n\n const isLoadingDeliveryOptions = props.productAvailability?.status === 'LOADING';\n if (isLoadingDeliveryOptions) {\n return undefined;\n }\n // check availability passed as prop for each cartline\n if (props.productAvailabilites && ArrayExtensions.hasElements(props.productAvailabilites)) {\n if (foundProductAvailability === undefined) {\n finalErrorMessages.push(props.outOfStockText);\n return finalErrorMessages.toString();\n }\n }\n if (props.includeErrors && props.isStockCheckEnabled && !shouldSkipStockCheck) {\n if (availableQuantityInStock <= 0) {\n finalErrorMessages.push(props.outOfStockText);\n } else if (availableQuantityInStock < currentQuantity) {\n if (availableQuantityInStock === 1) {\n finalErrorMessages.push(props.outOfRangeOneText);\n } else {\n finalErrorMessages.push(props.outOfRangeFormatText.replace('{numLeft}', availableQuantityInStock.toString()));\n }\n }\n }\n\n // Server-side validation\n const checkForErrors = props.cartlinesErrors.ValidationResultsPairs;\n const errorsFoundByLineId = checkForErrors?.filter(index => index.LineId === lineId);\n if (errorsFoundByLineId !== undefined) {\n for (const i of errorsFoundByLineId) {\n if (ArrayExtensions.hasElements(i.ValidationFailures)) {\n i.ValidationFailures.forEach(validation => {\n if (validation.ErrorContext !== undefined) {\n finalErrorMessages.push(validation.ErrorContext);\n }\n });\n }\n }\n }\n\n if (ArrayExtensions.hasElements(finalErrorMessages)) {\n return finalErrorMessages.join(' ');\n }\n\n return undefined;\n};\n\n/**\n * On Remove Click functionality.\n * @param removeItemClickHandler -Remove item click function.\n * @param cartline -CartLine.\n * @returns Remove change value.\n */\nconst onRemoveClickFunction = (removeItemClickHandler: (cartlineToRemove: CartLine) => void, cartline: CartLine) => () => {\n removeItemClickHandler(cartline);\n};\n\n// eslint-disable-next-line complexity -- Auto-suppressed.\nconst _assembleNode = (\n cartline: CartLine,\n product: SimpleProduct | undefined,\n props: ICartLineItemsProps,\n index: number,\n foundProductAvailability?: IProductInventoryInformation,\n productPickUpOptions?: ProductDeliveryOptions\n): ICartlinesViewProps => {\n const {\n imageSettings,\n gridSettings,\n id,\n typeName,\n context,\n resources,\n removeButtonText,\n removeItemClickHandler,\n moveToWishlistSuccessHandler,\n addToOrderTemplateButtonText,\n addToOrderTemplateButtonTooltip,\n addToOrderTemplateDialogResources,\n createOrderTemplateDialogResources,\n itemAddedToOrderTemplateDialogResources,\n duplicateItemsWhenAddingToOrderTemplateDialogResources,\n addToWishlistButtonText,\n removeFromWishlistButtonText,\n orderTemplates,\n customerInformation,\n wishlists,\n defaultWishlistName,\n storeSelectorModuleId,\n isMultipleCatalogFeatureEnabledInHq\n } = props;\n\n const isAuthenticated = context.request.user.isAuthenticated;\n const nameOfWishlist = wishlists && wishlists.length > 0 && wishlists[0].Name ? wishlists[0].Name : defaultWishlistName;\n const availableQuantityInStock = _getCartItemAvailableQuantity(props.isStockCheckEnabled, foundProductAvailability);\n\n const maxQuantity =\n product &&\n _getCartItemMaxQuantity(\n props.maxCartlineQuantity,\n props.isStockCheckEnabled,\n availableQuantityInStock,\n props.isQuantityLimitsFeatureEnabled,\n product?.Behavior?.MaximumQuantity || 0\n );\n\n // Skip stock check if the cart line is a service item or an invoice line\n const shouldSkipStockCheck = product?.ItemTypeValue === ReleasedProductType.Service || !!cartline.IsInvoiceLine;\n\n const errorMessage = ObjectExtensions.isNullOrUndefined(maxQuantity)\n ? undefined\n : _getErrorMessage(\n availableQuantityInStock,\n cartline.Quantity!,\n props,\n shouldSkipStockCheck,\n cartline,\n cartline.LineId,\n foundProductAvailability\n );\n\n const onRemoveClickHandler = onRemoveClickFunction(removeItemClickHandler, cartline);\n\n const payload = getPayloadObject(TelemetryEvent.RemoveFromCart, props.telemetryContent!, removeButtonText, '');\n const attributes = getTelemetryAttributes(props.telemetryContent!, payload);\n\n const inventoryLbl = foundProductAvailability?.StockLevelLabel;\n const inventoryCode = foundProductAvailability\n ? `ms-cart-line__inventory-code-${foundProductAvailability.StockLevelCode?.toLowerCase()}`\n : undefined;\n const productDimension = 4;\n const customPriceDimensionType = productDimension as ProductDimensionType.Style;\n const isCustomPriceSelected =\n product?.Dimensions?.find(dimension => dimension.DimensionTypeValue === customPriceDimensionType)?.DimensionValue?.Value ===\n 'Custom';\n\n let productUrl: string | undefined;\n if (product) {\n productUrl = getProductUrlSync(product, props.context.actionContext, undefined);\n\n if (MsDyn365.isBrowser && isChannelTypeB2B(props.context.actionContext.requestContext)) {\n const fullUrl = new URL(productUrl, window.location.href);\n fullUrl.searchParams.set('catalogid', `${cartline.CatalogId ?? 0}`);\n productUrl = fullUrl.href;\n }\n } else {\n productUrl = getInvoiceDetailsPageUrlSync(cartline.Description || '', props.context.actionContext);\n }\n\n return {\n data: {\n product,\n cartline\n },\n cartlineId: cartline.LineId,\n error: errorMessage,\n hasError:\n (!shouldSkipStockCheck && props.isStockCheckEnabled ? cartline.Quantity! > (maxQuantity ?? 0) : false) ||\n (!ObjectExtensions.isNullOrUndefined(errorMessage) && !StringExtensions.isNullOrEmpty(errorMessage)),\n cartline: (\n \n ),\n pickUpInStore: product\n ? PickUpInStore({\n storeSelectorModuleId,\n cartState: props.cartState,\n cartline,\n product,\n shipitText: props.shipItText,\n pickUpInStoreText: props.pickitUpText,\n changeStoreText: props.changeStoreText,\n storeSelectorStateManager: props.storeSelectorStateManager,\n orgUnitLocations: props.orgUnitLocations,\n deliveryOptions: productPickUpOptions,\n pickupDeliveryModeCode:\n cartline.DeliveryMode !== (undefined || '') ? cartline.DeliveryMode : props.pickupDeliveryModeCode,\n retailMulitplePickupFeatureState: props.retailMulitplePickupFeatureState,\n channelDeliveryOptionConfig: props.channelDeliveryOptionConfig,\n locationChangedHandler: props.locationChangedHandler\n })\n : undefined,\n remove: (\n \n ),\n addToWishlist:\n isAuthenticated && product && !isCustomPriceSelected ? (\n \n ) : (\n undefined\n ),\n addToOrderTemplate:\n isAuthenticated && orderTemplates && product ? (\n \n ) : (\n undefined\n )\n };\n};\n\nexport const assembleCartlines = (\n cartlines: CartLine[],\n products: SimpleProduct[] | undefined,\n props: ICartLineItemsProps\n): ICartlinesViewProps[] | null => {\n const reactNodes: ICartlinesViewProps[] = [];\n\n cartlines.map((cartline, index) => {\n let product;\n if (props.isQuantityLimitsFeatureEnabled) {\n // When feature is enabled the same products could have different quantity limits in Behavior so we need\n // to check productId and WarehouseId for identification.\n product = getProductByProductIdAndWarehouse(cartline.ProductId, products, cartline.WarehouseId, props.cartState);\n } else {\n product = getProductByProductId(cartline.ProductId, products);\n }\n let foundProductAvailability;\n\n // check if cartlineitem is pickup item\n const isPickUpItem = isCartLineItemPickUpType(\n cartline,\n props.retailMulitplePickupFeatureState,\n props.channelDeliveryOptionConfig,\n props.pickupDeliveryModeCode\n );\n if (props.productAvailabilites && ArrayExtensions.hasElements(props.productAvailabilites)) {\n foundProductAvailability = props.productAvailabilites.find(productAvailability => {\n if (!props.shouldIgnoreWarehouse && isPickUpItem) {\n // check warehouse only if siteBuilder setting is not \"Based on aggregate for shipping and pickup warehouses\" and cartlineitem is pickupitem\n return (\n productAvailability.ProductAvailableQuantity?.ProductId === cartline.ProductId &&\n productAvailability.InventLocationId?.toUpperCase() === cartline.WarehouseId?.toUpperCase()\n );\n }\n return productAvailability.ProductAvailableQuantity.ProductId === cartline.ProductId;\n });\n }\n\n let productPickUpOptions;\n if (props.productPickUpOptions !== undefined && ArrayExtensions.hasElements(props.productPickUpOptions)) {\n productPickUpOptions = props.productPickUpOptions.find(deliveryOption => {\n return deliveryOption && deliveryOption.ProductId === cartline.ProductId;\n });\n }\n reactNodes.push(_assembleNode(cartline, product, props, index, foundProductAvailability, productPickUpOptions));\n });\n\n return reactNodes;\n};\n\n/**\n * CartLineItems component.\n * @param props\n */\nexport const CartLineItems = (props: ICartLineItemsProps) => {\n const { products, cartlines } = props;\n return assembleCartlines(cartlines, products, props);\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ICartState } from '@msdyn365-commerce/global-state';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n CartLine,\n ChannelDeliveryOptionConfiguration,\n DeliveryOption,\n OrgUnitLocation,\n ProductDeliveryOptions,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport { IStoreSelectorStateManager } from '@msdyn365-commerce-modules/bopis-utilities';\nimport { INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface IPickUpInStoreViewProps {\n callbacks: {\n toggleBopis(isBopisSelected: boolean): void;\n };\n defaultComponent?: React.ReactNode;\n orgUnitName?: string;\n isBopisSelected: boolean;\n ContainerProps: INodeProps;\n deliveryOption?: string;\n}\n\nexport interface IPickUpInStoreProps {\n cartline: CartLine;\n product: SimpleProduct;\n shipitText: string;\n pickUpInStoreText: string;\n changeStoreText: string;\n cartState: ICartState | undefined;\n storeSelectorStateManager: IStoreSelectorStateManager | undefined;\n orgUnitLocations?: OrgUnitLocation[] | undefined;\n deliveryOptions?: ProductDeliveryOptions;\n pickupDeliveryModeCode?: string;\n storeSelectorModuleId?: string;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n retailMulitplePickupFeatureState?: boolean;\n locationChangedHandler(): void;\n}\n\nexport const PickUpInStore = (props: IPickUpInStoreProps): IPickUpInStoreViewProps | undefined => {\n const _onLocationChangedCallback = async (\n orgUnitLocation: OrgUnitLocation,\n cartState: ICartState | undefined,\n cartline: CartLine,\n deliveryMode?: string\n ) => {\n if (!cartState) {\n return Promise.resolve();\n }\n return cartState\n .updateCartLinePickupLocation({ cartLineId: cartline.LineId!, location: orgUnitLocation, deliveryMode })\n .then(result => {\n if (result.status === 'SUCCESS') {\n props.locationChangedHandler();\n }\n })\n .catch(error => {});\n };\n\n const _toggleBOPIS = (isBopisSelected: boolean) => {\n const { storeSelectorStateManager, product, cartline, cartState, storeSelectorModuleId } = props;\n\n if (isBopisSelected) {\n if (!storeSelectorStateManager) {\n return;\n }\n storeSelectorStateManager\n .openDialog({\n id: storeSelectorModuleId,\n product,\n alreadySelectedLocation: {\n OrgUnitNumber: cartline.FulfillmentStoreId\n },\n deliveryOptions: props.deliveryOptions,\n onLocationSelected: async (orgUnitLocation, deliveryMode: string | undefined) => {\n return _onLocationChangedCallback(orgUnitLocation, cartState, cartline, deliveryMode);\n }\n })\n .catch(error => {});\n } else {\n if (!cartState) {\n return;\n }\n cartline.DeliveryMode = '';\n cartline.FulfillmentStoreId = '';\n cartline.ShippingAddress = {};\n cartState\n .clearCartLinePickupLocation({ cartLineId: cartline.LineId! })\n .then(result => {\n if (result.status === 'SUCCESS') {\n props.locationChangedHandler();\n }\n })\n .catch(error => {});\n }\n };\n\n const _getOrgUnitName = (fulfillmentStoreId: string | undefined, orgUnitLocations: OrgUnitLocation[] | undefined) => {\n if (!orgUnitLocations || !fulfillmentStoreId || orgUnitLocations.length === 0) {\n return '';\n }\n\n const foundLocation = orgUnitLocations.find(orgUnitLocation => {\n return orgUnitLocation.OrgUnitNumber === fulfillmentStoreId;\n });\n\n if (foundLocation) {\n return foundLocation.OrgUnitName;\n }\n return fulfillmentStoreId;\n };\n\n const _renderShippingMethod = (\n cartLine: CartLine,\n shipItText: string,\n pickupInStoretext: string,\n changeStoreText: string,\n orgUnitLocations: OrgUnitLocation[] | undefined\n ): JSX.Element => {\n const orgUnitName = _getOrgUnitName(cartLine.FulfillmentStoreId, orgUnitLocations);\n const bopisSelected = !!cartLine.FulfillmentStoreId;\n\n const toggleBOPIS = (isBopisSelected: boolean) => {\n return () => {\n _toggleBOPIS(isBopisSelected);\n };\n };\n\n return (\n <>\n \n \n {cartLine.FulfillmentStoreId ? (\n \n {orgUnitName}\n \n
\n ) : null}\n \n );\n };\n\n const _getDeliveryOption = (pickupStore: IPickUpInStoreProps, deliveryOptions: ProductDeliveryOptions) => {\n const delivery = deliveryOptions?.DeliveryOptions?.find(option => option.Code === pickupStore.pickupDeliveryModeCode);\n return delivery?.Description;\n };\n\n /**\n * Method to check if we have atleast one common delivery code between product and channel.\n * @param productdeliveryOptions - Product DeliveryOption List.\n * @param storePickUpOptionList - Channel DeliveryOption List.\n * @returns Boolean flag.\n */\n const matchDeliveryOptions = (\n productdeliveryOptions: DeliveryOption[] | undefined,\n storePickUpOptionList: string[] | undefined\n ): boolean => {\n const deliveryOption: string[] = [];\n productdeliveryOptions?.map(delivery => {\n const pickup = storePickUpOptionList?.find(deliveryCode => deliveryCode === delivery.Code);\n if (pickup) {\n deliveryOption.push(pickup);\n }\n return deliveryOption;\n });\n\n return ArrayExtensions.hasElements(deliveryOption);\n };\n\n // If no delivery options present on the product, or none of the delivery options\n // match the PickupDeliveryModeCode, that means the item cannot be used for BOPIS\n if (!props.deliveryOptions || !props.deliveryOptions.DeliveryOptions) {\n return undefined;\n }\n\n if (props.retailMulitplePickupFeatureState && props.channelDeliveryOptionConfig) {\n if (!matchDeliveryOptions(props.deliveryOptions.DeliveryOptions, props.channelDeliveryOptionConfig?.PickupDeliveryModeCodes)) {\n return undefined;\n }\n } else if (\n !props.pickupDeliveryModeCode ||\n !props.deliveryOptions.DeliveryOptions.find(option => option.Code === props.pickupDeliveryModeCode)\n ) {\n return undefined;\n }\n\n return {\n callbacks: {\n toggleBopis: _toggleBOPIS\n },\n defaultComponent: _renderShippingMethod(\n props.cartline,\n props.shipitText,\n props.pickUpInStoreText,\n props.changeStoreText,\n props.orgUnitLocations\n ),\n orgUnitName: _getOrgUnitName(props.cartline.FulfillmentStoreId, props.orgUnitLocations),\n isBopisSelected: !!props.cartline.FulfillmentStoreId,\n deliveryOption: _getDeliveryOption(props, props.deliveryOptions),\n ContainerProps: {\n className: 'msc-cart-line__bopis-container'\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 { AddOrderTemplateToCartComponent, ILinesAddedToCartDialogResources } from '@msdyn365-commerce/components';\nimport { getUrlSync, ICoreContext, IImageSettings, Image, ITelemetry } from '@msdyn365-commerce/core';\nimport { ProductList, SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport {\n getFallbackImageUrl,\n getProductUrlSync,\n OrderTemplate,\n OrderTemplateLine,\n StringExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport { Alert, Button, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IOrderTemplateActionMessageState } from '../order-template-list';\n\nexport interface ISingleOrderTemplateProps extends ProductList {\n orderTemplateState: IOrderTemplateActionMessageState;\n name?: string;\n orderTemplate: OrderTemplate;\n context: ICoreContext;\n imageSettings?: IImageSettings;\n enableImageProductLink?: boolean;\n removeFromOrderTemplateListText: string;\n addToBagText: string;\n index: number;\n itemKey: string;\n telemetry: ITelemetry;\n moduleId: string;\n moduleTypeName: string;\n handlers: {\n onRemoveOrderTemplate(id: string): void | undefined;\n onDismiss(): void;\n };\n resources: {\n closeWindowButtonText: string;\n addToCartFailureMessage: string;\n addToCartSuccessMessage: string;\n addToCartProcessMessage: string;\n orderTemplateErrorMessage: string;\n linesAddedToCartDialogResources: ILinesAddedToCartDialogResources;\n };\n telemetryContent?: ITelemetryContent;\n isMultipleCatalogFeatureEnabledInHq?: boolean;\n}\n\nexport interface ISingleOrderTemplateViewProps {\n key: string;\n orderTemplateImage: React.ReactNode;\n addToCartButton?: React.ReactNode;\n removeButton?: React.ReactNode;\n orderTemplateStatusMessage?: React.ReactNode;\n orderTemplateName?: React.ReactNode;\n orderTemplateAriaLabel?: string;\n orderTemplateHeaderDivider?: React.ReactNode;\n}\n\nconst _removeItemFromOrderTemplateList = (props: ISingleOrderTemplateProps): void => {\n const { onRemoveOrderTemplate } = props.handlers;\n const { itemKey } = props;\n\n onRemoveOrderTemplate && itemKey && onRemoveOrderTemplate(itemKey);\n};\n\nconst OrderTemplateActions = {\n removeOrderTemplate: _removeItemFromOrderTemplateList\n};\n\n/**\n * Remove order template action.\n * @param input -Single order template props.\n * @returns Set remove order template.\n */\nconst removeOrderTemplateActionHandler = (input: ISingleOrderTemplateProps) => () => {\n OrderTemplateActions.removeOrderTemplate(input);\n};\n\nexport const OrderTemplateRender = (input: ISingleOrderTemplateProps): ISingleOrderTemplateViewProps | null => {\n const {\n Id,\n orderTemplate,\n removeFromOrderTemplateListText,\n orderTemplateState,\n handlers,\n name,\n imageSettings,\n context,\n telemetryContent,\n enableImageProductLink\n } = input;\n\n if (!Id) {\n return null;\n }\n\n const _getOrderTemplatePageUrl = (): string => {\n const url = getUrlSync('ordertemplate', context.actionContext) ?? '';\n const separator = url.includes('?') ? '&' : '?';\n if (Id) {\n return `${url}${separator}id=${Id}`;\n }\n return '';\n };\n\n const { onDismiss } = handlers;\n\n return {\n key: `${Id}-template`,\n orderTemplateImage: _renderOrderTemplateImages(context, orderTemplate.orderTemplateLines, imageSettings, enableImageProductLink),\n orderTemplateAriaLabel: _renderAriaLabel(input),\n orderTemplateName: (\n \n
\n
\n {orderTemplate.totalLines}\n {` `}\n line items\n
\n
\n
\n
\n {orderTemplateState.userMessage}\n \n
\n {orderTemplateLines?.slice(0, count).map(line => {\n const productUrl = line.fullProduct\n ? _updateProductUrlCatalog(line.fullProduct.ProductDetails, context, line?.productListLine?.CatalogId)\n : '';\n\n return (\n \n );\n })}\n
\n );\n }\n return ;\n};\n\n// This method is used to update the product url with the catalogId\nconst _updateProductUrlCatalog = (productDetails: SimpleProduct, context: ICoreContext, catalogId: number | undefined): string => {\n const productUrl = getProductUrlSync(productDetails, context.actionContext, undefined);\n if (!StringExtensions.isNullOrWhitespace(productUrl) && catalogId !== undefined) {\n const fullUrl = new URL(productUrl, window.location.href);\n fullUrl.searchParams.set('catalogid', `${catalogId ?? 0}`);\n return fullUrl.href;\n }\n return productUrl;\n};\n\nconst _renderAriaLabel = (props: ISingleOrderTemplateProps): string => {\n const { name } = props;\n return `${name}`;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { orderTemplateListStatus } from '../order-template-list';\n\nexport interface IOrderTemplateListStatusMessageProps {\n className?: string;\n errorType: orderTemplateListStatus;\n text?: string;\n}\n\nexport const OrderTemplateListStatusMessage: React.FC = ({ className, errorType, text }) => {\n switch (errorType) {\n case 'EMPTY':\n return {text}
;\n case 'FAILED':\n return {text}
;\n case 'LOADING':\n default:\n return {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 { IOrderTemplateNameDialogResources, OrderTemplateNameDialog } from '@msdyn365-commerce/components';\nimport { IComponentProps } from '@msdyn365-commerce/core';\nimport React, { useState } from 'react';\n\nconst modalCloseButtonReference: React.RefObject = React.createRef();\n\n/**\n * The Create Order Template Button Props.\n */\nexport interface ICreateOrderTemplateButtonProps extends IComponentProps {\n /**\n * The label for create order template.\n */\n createOrderTemplateText: string;\n\n /**\n * The create order template dialog resources.\n */\n createOrderTemplateDialogResources: IOrderTemplateNameDialogResources;\n\n /**\n * The delegate to fire when dialog captured any user entry.\n */\n onOrderTemplateCreated(): Promise;\n}\n\nconst CreateOrderTemplateButton: React.FC = props => {\n const onCancelHandler = React.useCallback(() => {\n return;\n }, []);\n const [isCreateOrderTemplateDialogOpen, setOrderTemplateNameDialogOpen] = useState(false);\n const onCreateButtonClick = React.useCallback(() => {\n setOrderTemplateNameDialogOpen(true);\n }, []);\n\n return (\n <>\n \n {props.createOrderTemplateText}\n \n \n \n );\n};\n\nexport default CreateOrderTemplateButton;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IOrderTemplateNameDialogResources } from '@msdyn365-commerce/components';\nimport { deleteAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductListsDataActions.g';\nimport { OrderTemplate } from '@msdyn365-commerce-modules/retail-actions';\nimport { Alert, Heading, IModuleProps, INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport Spinner from '../order-template/components/add-line/spinner';\nimport {\n ISingleOrderTemplateProps,\n ISingleOrderTemplateViewProps,\n OrderTemplateListStatusMessage,\n OrderTemplateRender\n} from './components';\nimport CreateNewTemplateButtonComponent from './components/create-order-template';\nimport { IOrderTemplateListData } from './order-template-list.data';\nimport { HeadingTag, IOrderTemplateListProps, IOrderTemplateListResources } from './order-template-list.props.autogenerated';\n\nexport interface IOrderTemplateActionMessageState {\n itemKey: string;\n userMessage: string;\n statusCssString: string;\n messageGlyph: string;\n isOpen: boolean;\n headerStatusMessage: string;\n}\n\nexport type orderTemplateListStatus = 'LOADING' | 'SUCCESS' | 'FAILED' | 'EMPTY';\n\nexport interface IOrderTemplateListViewProps extends IOrderTemplateListProps {\n OrderTemplateList: IModuleProps;\n status?: orderTemplateListStatus;\n statusMessage?: React.ReactNode;\n heading?: React.ReactNode;\n OrderTemplates?: INodeProps;\n OrderTemplate?: INodeProps;\n orderTemplates?: ISingleOrderTemplateViewProps[];\n createOrderTemplateButton?: React.ReactNode;\n templateHeaderStatusMessage?: React.ReactNode;\n}\n\n/**\n *\n * OrderTemplateList component.\n * @extends {React.PureComponent, IOrderTemplateListActionMessageState>}\n */\n@observer\nclass OrderTemplateList extends React.Component, IOrderTemplateActionMessageState> {\n constructor(props: IOrderTemplateListProps) {\n super(props);\n this.state = {\n itemKey: '',\n userMessage: '',\n headerStatusMessage: '',\n statusCssString: 'success',\n messageGlyph: 'fas fa-check',\n isOpen: false\n };\n }\n\n public async componentDidMount(): Promise {\n this.setState({});\n }\n\n public shouldComponentUpdate(\n nextProps: IOrderTemplateListProps,\n nextState: IOrderTemplateActionMessageState\n ): boolean {\n if (this.state === nextState && this.props.data === nextProps.data) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | null {\n const { className, heading } = this.props.config;\n const { emptyOrderTemplateText, createNewTemplateButtonText } = this.props.resources;\n const { orderTemplates } = this.props.data;\n const orderTemplatesData = orderTemplates && orderTemplates.result;\n const orderTemplateListHeading = heading?.text ?? this.props.resources.orderTemplateListTitle;\n\n if (orderTemplates.status === 'LOADING') {\n const errorProps: IOrderTemplateListViewProps = {\n ...(this.props as IOrderTemplateListProps),\n OrderTemplateList: {\n moduleProps: this.props,\n className: classnames('ms-order-template', className)\n },\n status: 'LOADING',\n statusMessage: ,\n heading: (\n \n )\n };\n return this.props.renderView(errorProps);\n }\n\n if (orderTemplatesData && orderTemplatesData.length === 0) {\n // When no order templates are found for customer\n const emptyViewProps: IOrderTemplateListViewProps = {\n ...(this.props as IOrderTemplateListProps),\n OrderTemplateList: {\n moduleProps: this.props,\n className: classnames('ms-order-template', className)\n },\n status: 'EMPTY',\n statusMessage: ,\n createOrderTemplateButton: (\n \n ),\n heading: (\n \n )\n };\n\n return this.props.renderView(emptyViewProps);\n }\n\n const viewProps: IOrderTemplateListViewProps = {\n ...(this.props as IOrderTemplateListProps),\n OrderTemplateList: {\n moduleProps: this.props,\n className: classnames('ms-order-template', className)\n },\n status: 'SUCCESS',\n heading: ,\n createOrderTemplateButton: (\n \n ),\n templateHeaderStatusMessage: this.state.isOpen && this.state.headerStatusMessage && (\n \n
\n {this.state.headerStatusMessage}\n \n
{props?.msg}
}\n \n);\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ProductDimensionFull } from '@msdyn365-commerce/commerce-entities';\nimport { getCatalogId, ICoreContext, IImageSettings } from '@msdyn365-commerce/core';\nimport { ProductListLine, ProductSearchCriteria, ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { searchByCriteriaAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductsDataActions.g';\nimport { ProductCatalog, SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport {\n addItemToOrderTemplate,\n AddItemToOrderTemplateInput,\n ArrayExtensions,\n getDimensionsForSelectedVariant,\n GetDimensionsForSelectedVariantInput,\n getSelectedVariant,\n SelectedVariantInput,\n validateCatalogId\n} from '@msdyn365-commerce-modules/retail-actions';\nimport { Modal, ModalBody, ModalHeader, getPayloadObject, ITelemetryContent, onTelemetryClick } from '@msdyn365-commerce-modules/utilities';\nimport { get } from 'lodash';\nimport { computed } from 'mobx';\nimport React from 'react';\n\nimport { IProductConfigurationState, NotFoundComponent, ProductConfiguration, ProductList } from '.';\nimport Spinner from './spinner';\n\nexport interface IAddLineToTemplateProps {\n context: ICoreContext;\n resources: IAddLineToTemplateResources;\n orderTemplateId: string;\n imageSettings?: IImageSettings;\n isMultipleCatalogFeatureEnabledInHq: boolean;\n catalogs?: ProductCatalog[] | undefined;\n telemetryContent?: ITelemetryContent;\n}\n\nexport interface IAddLineToTemplateResources {\n addLineModalLinkText: string;\n searchButtonAriaLabel: string;\n searchInputAriaLabel: string;\n searchModalPlaceholderText: string;\n selectCatalogTitleText: string;\n selectProductButtonText: string;\n addItemToTemplateText: string;\n addLineProductUnitPricePrefix: string;\n backButtonText: string;\n decrementButtonAriaLabel: string;\n incrementButtonAriaLabel: string;\n quantitySelectLabel: string;\n addLineProductUnitOfMeasurePrefix: string;\n notFoundSearchErrorNotice: string;\n notFoundSearchErrorRedediation: string;\n searchErrorMessage: string;\n productDimensionTypeColor: string;\n productDimensionTypeConfiguration: string;\n productDimensionTypeSize: string;\n productDimensionTypeStyle: string;\n searchResultsCountVerbage: string;\n searchResultsCountSubject: string;\n addToTemplateConfirmation: string;\n totalPriceLabel: string;\n progressNotificationText: string;\n addToTemplateDuplicateError: string;\n addToTemplateGenericError: string;\n dimensionMissingError: string;\n backToResultsText?: string;\n}\n\nenum CONTENT {\n Search,\n ProductList,\n ProductConfiguration,\n NotFound,\n Error,\n Loading\n}\n\ninterface IAddLineToTemplateState {\n isOpen: boolean;\n query: string;\n products: ProductSearchResult[];\n productCatalogs: ProductCatalog[] | null;\n content: number;\n selectedProduct: SimpleProduct | null;\n selectedCatalogId: number | undefined;\n selectedProductDimensions?: ProductDimensionFull[];\n selectedQuantity?: number;\n reloadPage?: boolean;\n}\n\n/**\n * Add Lines to order template.\n */\nexport class AddLineToTemplate extends React.Component {\n public state: IAddLineToTemplateState = {\n isOpen: false,\n query: '',\n products: [],\n productCatalogs: [],\n content: CONTENT.Search,\n selectedProduct: null,\n selectedCatalogId: 0\n };\n\n public defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=64&h=64&m=6', w: 0, h: 0 },\n lg: { q: 'w=64&h=64&m=6', w: 0, h: 0 },\n xl: { q: 'w=64&h=64&m=6', w: 0, h: 0 }\n },\n lazyload: true\n };\n\n public searchTextInput: React.RefObject = React.createRef(); // @TODO public/private\n\n private readonly addLineButtonRef: React.RefObject = React.createRef();\n\n constructor(props: IAddLineToTemplateProps) {\n super(props);\n }\n\n public onComponentDidMount(): void {\n this.searchTextInput.current?.focus();\n }\n\n public componentDidMount(): void {\n this._getCatalogs();\n }\n\n public onComponentDidUpdate(): void {\n this.searchTextInput.current?.focus();\n }\n\n @computed get showBackArrow(): boolean {\n return this.state.content === CONTENT.ProductConfiguration;\n }\n\n public shouldComponentUpdate(nextProps: IAddLineToTemplateProps, nextState: IAddLineToTemplateState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element {\n const {\n resources: { addLineModalLinkText, backToResultsText }\n } = this.props;\n\n const modalProps = {\n ...this.props,\n className: 'msc-add-line-to-template',\n toggle: this._toggleModalHandler,\n isOpen: this.state.isOpen,\n ariaLabel: addLineModalLinkText\n };\n\n return (\n <>\n \n \n {this.showBackArrow && (\n \n )}\n {addLineModalLinkText}\n \n {this._renderContent()}\n \n \n \n {addLineModalLinkText}\n \n \n );\n }\n\n private readonly _renderSearchForm = () => {\n const {\n resources: { searchButtonAriaLabel, searchModalPlaceholderText, selectCatalogTitleText }\n } = this.props;\n\n return (\n \n {this.state.productCatalogs && ArrayExtensions.hasElements(this.state.productCatalogs) && (\n <>\n \n \n {this._getCatalogNodes()}\n \n \n )}\n \n \n \n
\n \n );\n };\n\n private readonly _onSearchSubmit = (event: React.FormEvent): void => {\n event.preventDefault();\n\n const query = get(this, 'searchTextInput.current.value', null);\n\n if (!query) {\n return;\n }\n\n this.setState({\n content: CONTENT.Loading\n });\n\n this._getSearchResults(query)\n .then(result => {\n if (result.length === 0) {\n this.setState({\n products: result,\n content: CONTENT.NotFound\n });\n } else {\n this.setState({\n products: result,\n content: CONTENT.ProductList\n });\n }\n })\n .catch(error => {\n this.setState({\n content: CONTENT.Error\n });\n });\n };\n\n private readonly _onQuantityChangeHandler = (event: React.ChangeEvent) => {\n this.setState({\n selectedQuantity: +event.target.value\n });\n };\n\n private readonly _onSelectItem = async (product: ProductSearchResult): Promise => {\n const {\n actionContext,\n request: {\n apiSettings: { channelId }\n }\n } = this.props.context;\n const varianteInput = new SelectedVariantInput(product.RecordId, channelId, [], undefined, this.props.context.request);\n const productVariant = await getSelectedVariant(varianteInput, actionContext);\n\n if (!productVariant) {\n this.props.context.telemetry.error('Error retrieving product variant');\n return Promise.resolve([]);\n }\n\n const dimensions = await this._getProductDimensions(product as SimpleProduct);\n\n this.setState({\n selectedProductDimensions: dimensions,\n content: CONTENT.ProductConfiguration,\n selectedProduct: productVariant\n });\n\n return dimensions;\n };\n\n private readonly _onInputChange = (event: React.ChangeEvent): void => {\n this.setState({\n query: event.target.value\n });\n };\n\n private readonly _onBackButtonClickHandler = (): void => {\n this.setState({\n content: CONTENT.ProductList\n });\n };\n\n private readonly _highlightSearchTerm = (name: string) => {\n const parsedName = name && unescape(name.replace(new RegExp(this.state.query, 'i'), '$&'));\n\n return (\n \n );\n };\n\n private readonly _resultCountText = (): string => {\n return this.props.resources.searchResultsCountVerbage\n .replace('{count}', this.state.products.length.toString())\n .replace('{subject}', `${this.props.resources.searchResultsCountSubject}${this.state.products.length > 1 ? 's' : ''}`);\n };\n\n private _renderContent(): React.ReactNode | null {\n switch (this.state.content) {\n case CONTENT.ProductConfiguration:\n const { selectedProduct, selectedProductDimensions } = this.state;\n const viewProps = {\n ...this.props,\n imageSettings: this.props.imageSettings || this.defaultImageSettings,\n product: selectedProduct!,\n dimensions: selectedProductDimensions!,\n addToTemplateHandler: this._addItemToTemplateHandler,\n onQuantityChangeHandler: this._onQuantityChangeHandler,\n highlightSearchTerm: this._highlightSearchTerm,\n searchForm: this._renderSearchForm()\n };\n\n return ;\n\n case CONTENT.ProductList:\n const productProps = {\n ...this.props,\n imageSettings: this.props.imageSettings || this.defaultImageSettings,\n clickHandler: this._onSelectItem,\n products: this.state.products,\n highlightSearchTerm: this._highlightSearchTerm,\n searchForm: this._renderSearchForm(),\n renderResultCountText: this._resultCountText\n };\n\n return (\n \n \n \n );\n\n case CONTENT.Loading:\n return (\n \n {this._renderSearchForm()}\n \n \n );\n\n case CONTENT.NotFound:\n const { notFoundSearchErrorNotice, notFoundSearchErrorRedediation } = this.props.resources;\n\n return (\n \n {this._resultCountText()}
\n {this._renderSearchForm()}\n \n \n );\n\n case CONTENT.Error:\n return (\n \n {this._renderSearchForm()}\n \n {this.props.resources.searchErrorMessage}\n
\n \n );\n\n default:\n return {this._renderSearchForm()};\n }\n }\n\n private readonly _addItemToTemplateHandler = async (config: IProductConfigurationState): Promise => {\n const {\n orderTemplateId,\n context: { actionContext },\n isMultipleCatalogFeatureEnabledInHq\n } = this.props;\n const catalogId = this.state.selectedCatalogId;\n const input = isMultipleCatalogFeatureEnabledInHq\n ? new AddItemToOrderTemplateInput(\n orderTemplateId,\n config.product.RecordId,\n config.quantity,\n config.product.DefaultUnitOfMeasure || 'ea',\n isMultipleCatalogFeatureEnabledInHq,\n catalogId\n )\n : new AddItemToOrderTemplateInput(\n orderTemplateId,\n config.product.RecordId,\n config.quantity,\n config.product.DefaultUnitOfMeasure || 'ea'\n );\n const result = await addItemToOrderTemplate(input, actionContext);\n this.setState({\n isOpen: false,\n reloadPage: true\n });\n // reload when closing\n window.location.reload();\n return result;\n };\n\n /**\n *\n * Get all active product catalogs.\n */\n private _getCatalogs(): void {\n const { isMultipleCatalogFeatureEnabledInHq, catalogs } = this.props;\n\n // if Channel Multiple Catalogs Feature is enabled then show all catalogs.\n const productCatalogs = isMultipleCatalogFeatureEnabledInHq && catalogs ? catalogs : [];\n\n // get the current catalog id.\n const catalogId = getCatalogId(this.props.context.request);\n validateCatalogId(catalogId);\n // set the current catalog id as a default selected catalog id from the url\n this.setState({\n productCatalogs: productCatalogs,\n selectedCatalogId: catalogId\n });\n }\n\n private _getCatalogNodes(): JSX.Element[] | null {\n const { productCatalogs, selectedCatalogId } = this.state;\n if (productCatalogs && ArrayExtensions.hasElements(productCatalogs)) {\n return productCatalogs.map((productCatalog: ProductCatalog) => {\n // initially select default catalog in dropdown\n const isSelected = productCatalog.RecordId === selectedCatalogId;\n return (\n \n );\n });\n }\n return [];\n }\n\n private readonly _onCatalogSelectionChange = (event: React.ChangeEvent) => {\n this.setState({\n selectedCatalogId: Number.parseInt(event.target.value, 10)\n });\n };\n\n private _getSearchResults(searchText: string): Promise {\n const {\n context: {\n actionContext,\n request: {\n apiSettings: { channelId }\n }\n }\n } = this.props;\n const { selectedCatalogId } = this.state;\n const searchCriteriaInput: ProductSearchCriteria = {};\n\n searchCriteriaInput.Context = {\n ChannelId: channelId,\n CatalogId: selectedCatalogId\n };\n searchCriteriaInput.IncludeAttributes = true;\n searchCriteriaInput.SearchCondition = searchText;\n\n return searchByCriteriaAsync({ callerContext: actionContext }, searchCriteriaInput);\n }\n\n private async _getProductDimensions(product: SimpleProduct): Promise {\n const {\n context: {\n actionContext,\n request: {\n apiSettings: { channelId }\n }\n }\n } = this.props;\n const id = product.MasterProductId ? product.MasterProductId : product.RecordId;\n\n return getDimensionsForSelectedVariant(\n new GetDimensionsForSelectedVariantInput(id, channelId, [], this.props.context.request),\n actionContext\n );\n }\n\n private readonly _toggleModalHandler = () => {\n if (this.state.isOpen) {\n const payLoad = getPayloadObject('click', this.props.telemetryContent!, 'add-item-to-template', '');\n onTelemetryClick(this.props.telemetryContent!, payLoad, 'add-item-to-template');\n this._getCatalogs();\n this.addLineButtonRef.current!.focus();\n }\n\n this.setState({\n isOpen: !this.state.isOpen,\n content: CONTENT.Search\n });\n\n if (this.state.reloadPage) {\n window.location.reload();\n this.setState({\n reloadPage: false\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 { ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\ninterface IDropdownState {\n /**\n * @friendlyName selectedIndex\n * @description Selected index.\n */\n selectedIndex: string;\n}\n\nexport interface IDropdownProps {\n dropdownId: number;\n dropdownName: string;\n dropdownList: IDropdownItemProps[];\n telemetryContent?: ITelemetryContent;\n onChange?(selection: IDropdownOnSelection): void;\n}\n\nexport interface IDropdownItemProps {\n value: string;\n id: number;\n}\n\nexport interface IDropdownOnSelection {\n dropdownId: number;\n selectId: string;\n selectedValue: string;\n}\n\n/**\n *\n * DropDown component.\n * @extends {React.PureComponent}\n */\nexport class Dropdown extends React.PureComponent {\n private readonly selectMenu: React.RefObject = React.createRef();\n\n constructor(props: IDropdownProps, state: IDropdownState) {\n super(props);\n this.state = {\n selectedIndex: ''\n };\n }\n\n public componentDidMount(): void {\n if (this.selectMenu.current) {\n this.selectMenu.current.selectedIndex = 0;\n }\n }\n\n public render(): JSX.Element {\n const { dropdownId, dropdownList, dropdownName } = this.props;\n\n return (\n \n {dropdownList.map(\n (item: IDropdownItemProps) =>\n item && (\n \n {item.value}\n \n )\n )}\n \n );\n }\n\n private readonly _onChanged = (event: React.ChangeEvent): void => {\n this.setState({ selectedIndex: event.target.value });\n\n if (this.props.onChange) {\n this.props.onChange({\n dropdownId: this.props.dropdownId,\n selectId: event.target.value,\n selectedValue: event.target.innerText\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 * as React from 'react';\n\nexport const NotFoundComponent = (props: { error: string; msg: string }) => (\n <>\n \n {props.error}
\n {props.msg}
\n \n);\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { debounce } from 'lodash';\nimport { reaction } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\ninterface IQuantityProps {\n min?: number;\n max: number;\n currentCount?: number;\n disabled?: boolean;\n incrementGlyphClass?: string;\n decrementGlyphClass?: string;\n decrementButtonAriaLabel?: string;\n incrementButtonAriaLabel?: string;\n inputQuantityAriaLabel?: string;\n id?: string;\n onChange?(newValue: number): void;\n}\n\ninterface IQuantityState {\n currentInput: number;\n}\n\n/**\n * Quantity Component - This component is used to add or remove quantity.\n */\n@observer\nexport default class OrderTemplateQuantity extends React.PureComponent {\n public static defaultProps: Partial = {\n min: 1,\n decrementGlyphClass: 'fas fa-minus',\n incrementGlyphClass: 'fas fa-plus'\n };\n\n private readonly inputRef: React.RefObject = React.createRef();\n\n constructor(props: IQuantityProps) {\n super(props);\n this.state = { currentInput: props.currentCount || 1 };\n this._handleChange = this._handleChange.bind(this);\n\n reaction(\n () => this.props.currentCount,\n () => {\n this.setState({ currentInput: this.props.currentCount || 1 });\n }\n );\n }\n\n public render(): JSX.Element {\n const glyphMinusClassName: string = `${this.props.decrementGlyphClass!} quantity__controls-glyph`;\n const glyphPlusClassName: string = `${this.props.incrementGlyphClass!} quantity__controls-glyph`;\n const disabled = this.props.currentCount === this.props.min;\n const incDisabled = this.props.currentCount === this.props.max;\n const currentValue = this.state.currentInput;\n let extraClass = '';\n if (disabled) {\n // The quantity has reached its boundaries (max or min)\n extraClass = 'disabled';\n } else if (this.props.disabled) {\n // This.props.disabled shows if the state is not succeded yet\n extraClass = 'transition';\n }\n const getChangeHandler = (amount: number) => () => {\n this._onIncrementalChange(amount);\n };\n\n return (\n \n \n \n \n \n \n \n \n
\n );\n }\n\n private _onIncrementalChange(amount: number): void {\n const updatedQuantity = this.state.currentInput + amount;\n\n if (updatedQuantity >= 1 && updatedQuantity <= this.props.max) {\n this.props.onChange && this.props.onChange(updatedQuantity);\n }\n }\n\n private _handleChange(e: React.ChangeEvent): void {\n const currentValue = Number.parseInt(e.target.value, 10);\n const minValue = this.props.min === undefined ? 1 : this.props.min;\n const inputElement =\n this.inputRef && this.inputRef.current && this.inputRef.current instanceof HTMLInputElement && this.inputRef.current;\n\n if (currentValue > this.props.max) {\n this.setState({ currentInput: this.props.max });\n } else {\n this.setState({ currentInput: currentValue }, () => {\n debounce(() => {\n if (!isNaN(this.state.currentInput) && !(this.state.currentInput < minValue) && inputElement) {\n inputElement.setAttribute('aria-valuenow', currentValue.toString());\n inputElement.setAttribute('value', currentValue.toString());\n }\n }, 200)();\n });\n }\n }\n\n private readonly _validateMin = (): void => {\n const minValue = this.props.min === undefined ? 1 : this.props.min;\n\n if (isNaN(this.state.currentInput) || this.state.currentInput < minValue) {\n this.props.onChange && this.props.onChange(minValue);\n } else {\n this.props.onChange && this.props.onChange(this.state.currentInput);\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 { ProductDimensionFull } from '@msdyn365-commerce/commerce-entities';\nimport { IImageSettings, Image } from '@msdyn365-commerce/core';\nimport { ProductDimensionValue, ProductListLine } from '@msdyn365-commerce/retail-proxy';\nimport { SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport {\n getDimensionsForSelectedVariant,\n GetDimensionsForSelectedVariantInput,\n getFallbackImageUrl,\n getPriceForSelectedVariant,\n getProductAvailabilitiesForSelectedVariant,\n getSelectedVariant,\n IProductInventoryInformation,\n PriceForSelectedVariantInput,\n ProductAvailabilitiesForSelectedVariantInput,\n SelectedVariantInput\n} from '@msdyn365-commerce-modules/retail-actions';\nimport { Alert, Button, ITelemetryContent, ModalBody, ModalFooter } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport OrderTemplateQuantity from '../common/order-template-quantity';\nimport { Dropdown, IAddLineToTemplateProps, IAddLineToTemplateResources, IDropdownItemProps, IDropdownOnSelection } from '.';\n\nexport interface IProductCnnfigurationProps extends IAddLineToTemplateProps {\n product: SimpleProduct;\n dimensions: ProductDimensionFull[];\n imageSettings: IImageSettings;\n telemetryContent?: ITelemetryContent;\n searchForm: React.ReactNode;\n addToTemplateHandler(params: IProductConfigurationState): Promise;\n highlightSearchTerm(name: string): React.ReactNode;\n}\n\nexport interface IProductConfigurationState {\n quantity: number;\n unitPrice: number;\n totalPrice: number;\n product: SimpleProduct;\n dimensions: ProductDimensionFull[];\n selectedDimensions: {};\n productAvailableQuantity?: IProductInventoryInformation;\n buttonDisabled: boolean;\n showAddConfirmation: boolean;\n errorMessage?: string;\n isBusy: boolean;\n errors: { dimension?: string[]; add?: string };\n}\n\n/**\n * Configure selected product for addition to order template.\n */\nexport class ProductConfiguration extends React.Component {\n private selectedDimensions: {} = {};\n\n constructor(props: IProductCnnfigurationProps) {\n super(props);\n\n this.state = {\n quantity: 1,\n unitPrice: props.product.Price,\n totalPrice: props.product.Price,\n product: props.product,\n dimensions: props.dimensions.sort((a, b) => a.DimensionTypeValue - b.DimensionTypeValue),\n selectedDimensions: {},\n buttonDisabled: false,\n showAddConfirmation: false\n } as IProductConfigurationState;\n }\n\n public shouldComponentUpdate(nextProps: IProductCnnfigurationProps, nextState: IProductConfigurationState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element {\n const {\n context: {\n actionContext: {\n requestContext: { apiSettings }\n },\n request: { gridSettings }\n },\n resources: {\n addItemToTemplateText,\n addLineProductUnitPricePrefix,\n decrementButtonAriaLabel,\n incrementButtonAriaLabel,\n quantitySelectLabel,\n addLineProductUnitOfMeasurePrefix,\n totalPriceLabel\n },\n imageSettings,\n highlightSearchTerm\n } = this.props;\n const { buttonDisabled, product, quantity, unitPrice, totalPrice, showAddConfirmation, errors } = this.state;\n const isMultipleCatalogSelect = this.props.isMultipleCatalogFeatureEnabledInHq ? 'isMultipleCatalogSelect' : '';\n return (\n <>\n \n {this.props.searchForm}\n \n
\n
\n
\n
\n
{product?.ItemId}
\n {highlightSearchTerm(product?.Name ?? '')}\n
\n {addLineProductUnitPricePrefix}\n {` `}\n {this._formatPrice(unitPrice)}\n
\n
\n {addLineProductUnitOfMeasurePrefix}\n {` `}\n {product?.DefaultUnitOfMeasure}\n
\n
\n
\n
{this._getDimensionsNodes()}
\n
\n
\n
{quantitySelectLabel}
\n
\n
\n
\n {totalPriceLabel}\n {` `}\n {this._formatPrice(totalPrice)}\n
\n \n \n {showAddConfirmation && (\n \n \n {this._getConfirmationMessage()}\n \n )}\n {errors?.add && (\n \n \n {errors.add}\n
\n )}\n \n {addItemToTemplateText}\n \n \n \n );\n }\n\n private _getConfirmationMessage(): string {\n const selectedDimensionNames = this.state.dimensions\n .map(dimension => {\n let variant = dimension.DimensionValues?.find(\n value => value.RecordId === this.selectedDimensions[dimension.DimensionTypeValue]\n )?.Value;\n if (dimension.DimensionTypeValue === 3) {\n variant = `size ${variant}`;\n }\n return variant;\n })\n .filter(value => value);\n\n return this.props.resources.addToTemplateConfirmation\n .replace('{count}', this.state.quantity.toString())\n .replace('{productAndDimensions}', `${this.state.product.Name}, ${Object.values(selectedDimensionNames).join(', ')}`);\n }\n\n private _getDimensionsNodes(): React.ReactElement[] {\n const { dimensions } = this.state;\n const { resources } = this.props;\n\n return dimensions?.map((dimension: ProductDimensionFull) => {\n const { DimensionValues, DimensionTypeValue } = dimension;\n const mapDimensions = (value: ProductDimensionValue): IDropdownItemProps => ({\n id: value.RecordId,\n value: value.Value || ''\n });\n const dimensionName = this._getDropdownName(DimensionTypeValue, resources);\n const dropdownList: IDropdownItemProps[] = DimensionValues ? DimensionValues.map(mapDimensions) : [];\n dropdownList.unshift({ id: 0, value: `Choose a ${dimensionName}` });\n\n return (\n \n
{dimensionName}
\n {this.state.errors?.dimension?.includes(DimensionTypeValue.toString()) && (\n
\n \n \n {this._getDimensionsError(dimensionName)}\n
\n \n )}\n
\n
\n {renderResultCountText()}\n
\n {props.searchForm}\n \n {products.map((product: ProductSearchResult, index: number) => {\n const { Price, ItemId, Name, PrimaryImageUrl } = product;\n const price = formatCurrency(Price.toFixed(2), currencyCode);\n const primaryImageSource = generateImageUrl(PrimaryImageUrl ?? '', apiSettings) ?? '';\n const fallBackImg = getFallbackImageUrl(ItemId, apiSettings, props.context.request.app?.config?.OmniChannelMedia) ?? '';\n\n return (\n
\n
\n
\n
\n
{ItemId}
\n {highlightSearchTerm(Name ?? '')}\n
\n
\n
\n
\n );\n })}\n
\n {renderModalPopup}\n
\n {'Options'}\n \n \n \n\n \n {'Delete'}\n \n \n \n
\n {showMobile && (\n
\n \n View\n \n {getActionButton(\n props.isMobile,\n props.removeButtonClassName,\n removeFromOrderTemplateLinesText,\n OrderTemplateLineActions(props).getRemoveItem()\n )}\n {getActionButton(\n props.isMobile,\n props.addButtonClassName,\n addToBagButtonText,\n OrderTemplateLineActions(props).getAddToBag()\n )}\n
\n )}\n
{ItemId}
\n {input.error !== 'NONE' ? (\n {_renderProductError(input)}
\n ) : (\n undefined\n )}\n \n ),\n productUnitOfMeasure: price ? (\n {UnitOfMeasure || price.UnitOfMeasure}
\n ) : (\n undefined\n ),\n productListId: LineId!,\n removeButton:\n !isMultipleCatalogFeatureEnabledInHq &&\n getActionButton(\n input.isMobile,\n removeButtonClassName,\n removeFromOrderTemplateLinesText,\n OrderTemplateLineActions(input).getRemoveItem()\n ),\n productQuantityView: {_generateQuantity(input, LineId!)}
,\n productQuantity: quantity,\n addToBagButton:\n !isMultipleCatalogFeatureEnabledInHq &&\n getActionButton(input.isMobile, addButtonClassName, addToBagButtonText, OrderTemplateLineActions(input).getAddToBag()),\n extraActionsPopup:\n !isMobile && isMultipleCatalogFeatureEnabledInHq ? (\n \n ) : (\n undefined\n ),\n popUp: ,\n disabled: input.shouldDisable\n };\n};\n\nconst ExtraActionsPopup = (props: IPopupProps): JSX.Element | null => {\n const [showActions, setShowActions] = useState(false);\n const toggle = React.useCallback(() => {\n setShowActions(!showActions);\n }, [showActions]);\n\n const className = 'ms-order-template-table-line__extra-actions-cell';\n const actionsContainerClassName = `${className}__actions-container`;\n return (\n \n
\n {showActions && (\n
\n {getDesktopActionButton(\n 'ms-order-template-table-lines__products-add-button',\n 'Add to bag',\n OrderTemplateLineActions(props).getAddToBag()\n )}\n {getDesktopActionButton(\n 'ms-order-template-table-lines__products-remove-button',\n 'Remove item',\n OrderTemplateLineActions(props).getRemoveItem()\n )}\n
\n )}\n
{catalog.Name}
;\n};\n\nconst _renderPrice = (props: IOrderTemplateLineProps): JSX.Element | null => {\n const { price, context, moduleId, moduleTypeName, resources } = props;\n\n if (price) {\n return (\n \n );\n }\n return null;\n};\n\nconst _renderProductDimensions = (props: IOrderTemplateLineProps): (string | undefined)[] => {\n const { orderTemplateLine } = props;\n\n if (!orderTemplateLine.fullProduct || !orderTemplateLine.fullProduct.ProductDetails.Dimensions) {\n return [];\n }\n\n return orderTemplateLine.fullProduct.ProductDetails.Dimensions.map(dimension => {\n if (!dimension.DimensionValue || !dimension.DimensionValue.Value) {\n return undefined;\n }\n\n return dimension.DimensionValue.Value;\n });\n};\n\nconst _renderProductError = (props: IOrderTemplateLineProps) => {\n const { error, resources } = props;\n\n if (!error) {\n return '';\n }\n\n const errorMessages = {\n OOS: resources.outOfStockProductErrorMessage,\n UNASSORTED: resources.unavailableProductErrorMessage,\n NONE: ''\n };\n\n return errorMessages[error];\n};\n\nexport const renderProductInfo = (props: IOrderTemplateLineProps): React.ReactNode | undefined => {\n const { orderTemplateLine, productUrl } = props;\n const name = orderTemplateLine.fullProduct?.ProductDetails.Name;\n\n const dimensions = _renderProductDimensions(props);\n if (!orderTemplateLine.fullProduct) {\n return [];\n }\n\n const productName = productUrl ? (\n \n {name}\n \n ) : (\n {name}
\n );\n\n const dimensionsLine: string = dimensions.join(', ');\n\n return (\n \n
{productName}
\n
{dimensionsLine}
\n
{text}
;\n case 'FAILED':\n return {text}
;\n case 'LOADING':\n default:\n return {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 * as React from 'react';\n\nimport { IOrderTemplateLineViewModel } from '../order-template';\n\nexport interface IOrderTemplateTableHeadingProps {\n selectAllRowsText?: string;\n productNumber: string;\n productName: string;\n productUnitPrice: string;\n productUOM: string;\n productQuantity: string;\n productActions: string;\n lines: IOrderTemplateLineViewModel[];\n isMobile: boolean;\n clickHandler(isChecked: boolean): void;\n productImage?: string;\n isMultipleCatalogFeatureEnabledInHq?: boolean;\n productLineCatalogName?: string;\n}\n\n/**\n * Order Template's table state.\n */\nexport interface IOrderTemplateTableHeadingState {\n isChecked: boolean;\n}\n\nexport interface IOrderTemplateTableShortHeading {\n productNumber: string;\n productActions: string;\n}\n\n/**\n * Order Template's table heading.\n */\nexport class OrderTemplateTableHeading extends React.PureComponent {\n public state: IOrderTemplateTableHeadingState = {\n isChecked: false\n };\n\n private readonly componentClassName: string = 'ms-table';\n\n public static getDerivedStateFromProps(\n props: IOrderTemplateTableHeadingProps,\n state: IOrderTemplateTableHeadingState\n ): IOrderTemplateTableHeadingState {\n const checkedLines = props.lines.filter(line => !line.isChecked).length;\n let nextState = { ...state };\n nextState = { isChecked: checkedLines === 0 };\n return nextState;\n }\n\n public getOnChange = () => (event: React.ChangeEvent) => {\n this.setState(\n {\n isChecked: this.state.isChecked\n },\n () => {\n this.props.clickHandler(!this.state.isChecked);\n }\n );\n };\n\n public render(): JSX.Element {\n return (\n \n \n | \n \n | \n {!this.props.isMobile && this.props.isMultipleCatalogFeatureEnabledInHq ? (\n {this.props.productLineCatalogName} | \n ) : null}\n {!this.props.isMobile ? {this.props.productImage} | : null}\n {this.props.productNumber} | \n {!this.props.isMobile ? {this.props.productName} | : null}\n {!this.props.isMobile ? {this.props.productUnitPrice} | : null}\n {!this.props.isMobile ? {this.props.productUOM} | : null}\n {!this.props.isMobile ? {this.props.productQuantity} | : null}\n {!this.props.isMobile ? {this.props.productActions} | : | }\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 IItemAddedToCartDialogData,\n IItemAddedToCartDialogResources,\n ILinesAddedToCartDialogResources,\n IOrderTemplateNameDialogResources,\n ItemAddedToCartDialog\n} from '@msdyn365-commerce/components';\nimport MsDyn365, { AsyncResult, getCatalogId, getUrlSync, ICoreContext, IRequestContext } from '@msdyn365-commerce/core';\nimport { ICartActionResult } from '@msdyn365-commerce/global-state';\nimport { ProductList, ProductListLine } from '@msdyn365-commerce/retail-proxy';\nimport {\n deleteAsync,\n removeProductListLinesAsync,\n updateProductListLinesAsync\n} from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductListsDataActions.g';\nimport { FeatureState, SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport {\n ArrayExtensions,\n createGetFeatureStateInput,\n getFeatureState,\n getPriceForSelectedVariant,\n getProductUrlSync,\n ObjectExtensions,\n OrderTemplate,\n OrderTemplateLine,\n PriceForSelectedVariantInput,\n StringExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n Alert,\n getTelemetryObject,\n Heading,\n IModuleProps,\n INodeProps,\n ITelemetryContent,\n UncontrolledPagination\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport debounce from 'lodash/debounce';\nimport { action, computed, observable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport {\n IOrderTemplateActionsProps,\n IOrderTemplateActionsViewProps,\n IOrderTemplateLineProps,\n IOrderTemplateLineViewProps,\n IOrderTemplateTableHeadingProps,\n OrderTemplateActionsView,\n OrderTemplateLinesStatusMessage,\n OrderTemplateLineView,\n OrderTemplateMobileLineView,\n OrderTemplateTableHeading\n} from '../..';\nimport { ActiveOrderTemplateLinesInput } from './actions/get-order-template';\nimport { OrderTemplateBulkActions } from './components/bulk-actions';\nimport { IOrderTemplateData } from './order-template.data';\nimport { IOrderTemplateProps, IOrderTemplateResources } from './order-template.props.autogenerated';\nimport Spinner from './components/add-line/spinner';\n\nexport interface IOrderTemplateLineActionMessageState {\n itemKey: string;\n userMessage: string;\n statusCssString: string;\n messageGlyph: string;\n isOpen: boolean;\n isItemAddedToOrderTemplateOpen: boolean;\n isConfirmAddSelectionToBagModalOpen: boolean;\n itemAddedToCartDialogData?: IItemAddedToCartDialogData;\n productSelection: IOrderTemplateLineViewModel[];\n isDetailsDisplayed: boolean;\n detailedProductView?: IOrderTemplateLineViewProps;\n isQuantityDisabledForUpdate?: boolean;\n}\n\nexport type orderTemplateLinesStatus = 'LOADING' | 'SUCCESS' | 'FAILED' | 'EMPTY';\ntype GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IOrderTemplateViewProps extends IOrderTemplateProps {\n OrderTemplateLines: IModuleProps;\n callbacks?: IOrderTemplateLinesCallbacks;\n status?: orderTemplateLinesStatus;\n statusMessage?: React.ReactNode;\n heading?: React.ReactNode;\n OrderTemplateActions?: INodeProps;\n ProductsTable?: INodeProps;\n ProductsTableRow?: INodeProps;\n ProductsTableHeading?: React.ReactNode;\n ProductDetails?: INodeProps;\n orderLines?: IOrderTemplateLineViewProps[];\n productListLines?: ProductListLine[];\n productsStatusMessage?: React.ReactNode;\n orderActions?: IOrderTemplateActionsViewProps | null;\n resources: IOrderTemplateResources;\n pagination?: React.ReactNode;\n itemAddedToCartDialog?: React.ReactNode;\n bulkOrderLineActions?: React.ReactNode;\n isDetailsDisplayed?: boolean;\n detailedProduct?: IOrderTemplateLineProps;\n detailedProductView?: IOrderTemplateLineViewProps;\n productQuantityView?: React.ReactNode;\n addButton?: React.ReactNode;\n isMobile?: boolean;\n toggleDetailsDisplayed?(props: IOrderTemplateLineProps | undefined): void;\n}\n\nexport interface IOrderTemplateLinesCallbacks {\n updateQuantity(itemKey: string, quantity: number): void;\n}\n\nexport interface IOrderTemplateLineViewModel extends OrderTemplateLine {\n isChecked: boolean;\n productQuantityView: React.ReactNode;\n}\n\n/**\n *\n * OrderTemplateLines component.\n * @extends {React.PureComponent, IOrderTemplateLineActionMessageState>}\n */\n@observer\nclass OrderTemplateLines extends React.Component, IOrderTemplateLineActionMessageState> {\n private readonly className: string;\n\n private readonly telemetryContent?: ITelemetryContent;\n\n @observable\n private _viewport: GridSize;\n\n @computed get isMobile(): boolean {\n return this._viewport === 'xs' || this._viewport === 'sm';\n }\n\n constructor(props: IOrderTemplateProps, state: IOrderTemplateLineActionMessageState) {\n super(props);\n this.className = 'ms-order-template';\n this._viewport =\n props.context.request && props.context.request.device && props.context.request.device.Type === 'Mobile' ? 'xs' : 'lg';\n this._updateViewport = this._updateViewport.bind(this);\n\n this.state = {\n itemKey: '',\n userMessage: '',\n statusCssString: 'success',\n messageGlyph: 'fas fa-check',\n isOpen: false,\n isItemAddedToOrderTemplateOpen: false,\n isConfirmAddSelectionToBagModalOpen: false,\n productSelection: [],\n isDetailsDisplayed: false,\n isQuantityDisabledForUpdate: false\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 if (MsDyn365.isBrowser && !this.props.context.request.user.isAuthenticated && !this.props.context.request.params.isEditor) {\n window.location.assign(this.props.context.request.user.signInUrl || '/');\n }\n }\n\n @action\n public async componentDidMount(): Promise {\n this.setState({});\n const orderTemplate = await this.props.data.orderTemplate;\n this.props.config.heading!.text = orderTemplate?.productList.Name || '';\n this.setState({\n productSelection: orderTemplate?.orderTemplateLines as IOrderTemplateLineViewModel[]\n });\n\n if (MsDyn365.isBrowser) {\n window.addEventListener('resize', this._updateViewport);\n this._updateViewport();\n }\n }\n\n public componentWillUnmount(): void {\n if (MsDyn365.isBrowser) {\n window.removeEventListener('resize', this._updateViewport);\n }\n }\n\n public shouldComponentUpdate(\n nextProps: IOrderTemplateProps,\n nextState: IOrderTemplateLineActionMessageState\n ): 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 { heading, className } = this.props.config;\n const { emptyOrderTemplateLinesText, errorGettingOrderTemplateLines } = this.props.resources;\n const { orderTemplate, cart } = this.props.data;\n if (cart.status === 'LOADING' || ObjectExtensions.isNullOrUndefined(orderTemplate) || orderTemplate.status === 'LOADING') {\n const errorProps: IOrderTemplateViewProps = {\n ...(this.props as IOrderTemplateProps),\n OrderTemplateLines: {\n moduleProps: this.props,\n className: classnames(this.className, className)\n },\n status: 'LOADING',\n statusMessage: ,\n heading: heading && ,\n resources: this.props.resources\n };\n return this.props.renderView(errorProps);\n }\n\n if (cart.status === 'FAILED' || orderTemplate.status === 'FAILED') {\n const errorProps: IOrderTemplateViewProps = {\n ...(this.props as IOrderTemplateProps),\n OrderTemplateLines: {\n moduleProps: this.props,\n className: classnames(`${this.className}`, className)\n },\n status: 'FAILED',\n statusMessage: ,\n heading: heading && ,\n resources: this.props.resources\n };\n\n return this.props.renderView(errorProps);\n }\n\n const orderTemplateResult = orderTemplate && orderTemplate.result;\n const orderTemplateLines = orderTemplateResult && orderTemplateResult.orderTemplateLines;\n\n if (!orderTemplateResult || !orderTemplateLines || orderTemplateLines.length === 0) {\n if (orderTemplateResult && !this._isFirstPage() && MsDyn365.isBrowser) {\n window.location.href = this._getOrderTemplatePageUrl();\n return null;\n }\n\n const emptyViewProps: IOrderTemplateViewProps = {\n ...(this.props as IOrderTemplateProps),\n OrderTemplateLines: {\n moduleProps: this.props,\n className: classnames(`${this.className}`, className)\n },\n status: 'EMPTY',\n statusMessage: ,\n heading: heading && ,\n resources: this.props.resources,\n orderActions:\n orderTemplateResult &&\n this._renderOrderTemplateActions(orderTemplateResult, this._isChannelMultipleCatalogsFeatureEnabled()),\n bulkOrderLineActions: orderTemplateResult && this._getOrderTemplateLineActions(orderTemplateResult.productList.Id),\n OrderTemplateActions: {\n className: `${this.className}-action-bar`,\n tag: 'div'\n }\n };\n\n return this.props.renderView(emptyViewProps);\n }\n\n const viewProps: IOrderTemplateViewProps = {\n ...(this.props as IOrderTemplateProps),\n OrderTemplateLines: {\n moduleProps: this.props,\n className: classnames(`${this.className}`, className)\n },\n status: 'SUCCESS',\n productsStatusMessage: this.state.isOpen && (\n \n
\n {this.state.userMessage}\n \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\nexport default OrderTemplateLines;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Button, INodeProps, Modal, ModalBody, ModalFooter, ModalHeader, Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IOrderTemplateLineViewProps } from './components';\nimport { IOrderTemplateViewProps } from './order-template';\n\nconst OrderTemplateLinesView: React.FC = (props: IOrderTemplateViewProps) => {\n const {\n OrderTemplateLines,\n status,\n statusMessage,\n heading,\n ProductsTable,\n ProductsTableHeading,\n orderLines,\n ProductsTableRow,\n productsStatusMessage,\n OrderTemplateActions,\n orderActions,\n pagination,\n itemAddedToCartDialog,\n bulkOrderLineActions,\n isDetailsDisplayed,\n detailedProductView,\n toggleDetailsDisplayed,\n resources: {\n cancelBtnLabel,\n productNumberText,\n productText,\n productUnitPriceText,\n productUOMText,\n productQuantityText,\n productLineCatalogName\n }\n } = props;\n\n const toggleDetails = React.useCallback(() => {\n toggleDetailsDisplayed && toggleDetailsDisplayed(undefined);\n }, [toggleDetailsDisplayed]);\n\n return (\n \n {heading}\n {OrderTemplateActions && (\n \n {orderActions?.addTemplateToBag}\n {orderActions?.renameTemplate}\n {orderActions?.removeTemplate}\n {orderActions?.actionsSplitButton}\n {!isDetailsDisplayed && productsStatusMessage}\n \n )}\n {bulkOrderLineActions}\n {status !== 'SUCCESS' && statusMessage}\n {ProductsTable && orderLines && orderLines.length > 0 && (\n \n \n {ProductsTableHeading}\n \n {orderLines &&\n orderLines.map(product => {\n return _renderItem(product, productQuantityText, ProductsTableRow);\n })}\n \n \n {pagination}\n \n )}\n {itemAddedToCartDialog}\n \n Product Details\n \n \n - {detailedProductView?.productImage}
\n - \n {productText}:\n {detailedProductView?.productInfo}\n
\n - \n {productLineCatalogName}:\n {detailedProductView?.productLineCatalog}\n
\n - \n {productNumberText}:\n {detailedProductView?.productNumber}\n
\n - \n {productUnitPriceText}:\n {` `}\n {detailedProductView?.productPrice}\n
\n - \n {productUOMText}:\n {` `}\n {detailedProductView?.productUnitOfMeasure}\n
\n - \n {productQuantityText}:\n {detailedProductView?.productQuantityView}\n
\n {productsStatusMessage && - {productsStatusMessage}
}\n
\n \n \n \n \n \n \n );\n};\n\nconst _renderItem = (product: IOrderTemplateLineViewProps, quantityLabel: string, ProductsTableRow?: INodeProps): JSX.Element | null => {\n if (!product) {\n return null;\n }\n\n const {\n key,\n selectLine,\n productLineCatalog,\n productImage,\n productPrice,\n productNumber,\n addToBagButton,\n removeButton,\n productInfo,\n productUnitOfMeasure,\n productQuantityView,\n productQuantity,\n popUp,\n isMobile,\n extraActionsPopup,\n isMultipleCatalogFeatureEnabledInHq,\n disabled\n } = product;\n\n const lineVisibility = disabled\n ? {\n pointerEvents: 'none',\n opacity: 0.5\n }\n : {\n pointerEvents: 'auto',\n opacity: 1\n };\n\n const disableElement: React.CSSProperties = lineVisibility as React.CSSProperties;\n\n return (\n \n {selectLine} | \n {!isMobile && isMultipleCatalogFeatureEnabledInHq && {productLineCatalog} | }\n {productImage} | \n {isMobile ? (\n \n {productNumber} \n \n {quantityLabel}:{` `}\n {productQuantity}\n \n | \n ) : (\n {productNumber} | \n )}\n {!isMobile && {productInfo} | }\n {!isMobile && {productPrice} | }\n {!isMobile && {productUnitOfMeasure} | }\n {!isMobile && {productQuantityView} | }\n {isMobile && {popUp} | }\n {!isMobile && !isMultipleCatalogFeatureEnabledInHq && (\n \n {addToBagButton}\n {removeButton}\n | \n )}\n {extraActionsPopup} | \n \n );\n};\n\nexport default OrderTemplateLinesView;\n"],"names":["PickUpInStore","props","_toggleBOPIS","isBopisSelected","storeSelectorStateManager","product","cartline","cartState","storeSelectorModuleId","openDialog","id","alreadySelectedLocation","OrgUnitNumber","FulfillmentStoreId","deliveryOptions","onLocationSelected","async","orgUnitLocation","deliveryMode","updateCartLinePickupLocation","cartLineId","LineId","location","then","result","status","locationChangedHandler","catch","error","Promise","resolve","_onLocationChangedCallback","DeliveryMode","ShippingAddress","clearCartLinePickupLocation","_getOrgUnitName","fulfillmentStoreId","orgUnitLocations","length","foundLocation","find","OrgUnitName","DeliveryOptions","pickupDeliveryModeCode","option","Code","callbacks","toggleBopis","defaultComponent","cartLine","shipItText","pickupInStoretext","changeStoreText","orgUnitName","bopisSelected","toggleBOPIS","React","className","type","name","onChange","value","checked","key","onClick","_renderShippingMethod","shipitText","pickUpInStoreText","deliveryOption","pickupStore","delivery","Description","_getDeliveryOption","ContainerProps","_assembleNode","productSpecificationData","index","foundProductAvailability","foundProductDeliveryOptions","imageSettings","gridSettings","typeName","context","resources","removeButtonText","removeItemClickHandler","moveToWishlistSuccessHandler","addToOrderTemplateButtonText","addToOrderTemplateButtonTooltip","addToOrderTemplateDialogResources","createOrderTemplateDialogResources","itemAddedToOrderTemplateDialogResources","duplicateItemsWhenAddingToOrderTemplateDialogResources","addToWishlistButtonText","removeFromWishlistButtonText","orderTemplates","customerInformation","wishlists","defaultWishlistName","isAuthenticated","request","user","nameOfWishlist","Name","availableQuantityInStock","isStockCheckEnabled","productAvailability","ProductAvailableQuantity","IsProductAvailable","AvailableQuantity","maxQuantity","maxQuantityByConfig","isQuantityLimitsFeatureEnabled","maxByQuantityLimitsFeature","maxByQuantityLimitsFeatureResult","_getCartItemMaxQuantity","maxCartlineQuantity","Behavior","MaximumQuantity","shouldSkipStockCheck","ItemTypeValue","ReleasedProductType","IsInvoiceLine","errorMessage","ObjectExtensions","undefined","currentQuantity","lineId","finalErrorMessages","productAvailabilites","ArrayExtensions","shouldIgnoreWarehouse","ProductId","InventLocationId","WarehouseId","includeErrors","push","outOfStockText","outOfRangeOneText","outOfRangeFormatText","replace","toString","checkForErrors","cartlinesErrors","ValidationResultsPairs","errorsFoundByLineId","filter","i","ValidationFailures","forEach","validation","ErrorContext","join","_getErrorMessage","Quantity","onRemoveClickHandler","onRemoveClickFunction","payload","getPayloadObject","TelemetryEvent","telemetryContent","attributes","getTelemetryAttributes","inventoryLbl","StockLevelLabel","inventoryCode","StockLevelCode","toLowerCase","isCustomPriceSelected","Dimensions","dimension","DimensionTypeValue","DimensionValue","Value","productUrl","getProductUrlSync","actionContext","MsDyn365","fullUrl","URL","window","href","searchParams","set","CatalogId","getInvoiceDetailsPageUrlSync","data","cartlineId","hasError","TebuCartLineItemComponent","isOutOfStock","lineIndex","isQuantityEditable","quantityOnChange","updateCartLinesQuantitySuccessHandler","primaryImageUrl","PrimaryImageUrl","inventoryInformationLabel","inventoryLabelClassName","isCartStateReady","showShippingChargesForLineItems","channelDeliveryOptionConfig","pickUpInStore","pickitUpText","retailMulitplePickupFeatureState","remove","Button","Object","title","addToWishlist","AddToWishlistComponent","showButtonText","showStatusMessage","showRemoveButton","showButtonTooltip","ariaRole","onSuccess","addToOrderTemplate","AddToOrderTemplateComponent","classnames","quantity","shouldShowButtonFailedTooltip","disableButton","app","config","disableTooltip","assembleCartlines","cartlines","productsWithAttributes","reactNodes","products","p","productDetails","map","foundProductDeliveryOption","getProductByProductIdAndWarehouse","getProductByProductId","productDeliveryOptions","simpleProduct","RecordId","CartLineGroupItems","telemetry","getGroupByStorePickup","items","groupBy","item","groupDelivery","cartLinesGroup","entries","deliveryType","groupByDeliveryType","keys","cartLines","carLineViewProps","_assembleGroupCartlines","getPromotionData","ctx","promotionData","getPromotionOptionsForCartLineItems","PromotionOptionsForCartLineItems","requestContext","apiSettings","promotionOptions","exception","Cart","constructor","super","_isMounted","promotionPopupId","_getProductAttribute","actionInput","AttributesForSelectedVariantInput","channelId","getAttributesForSelectedVariant","this","console","log","ProductsWithAttributes","promotionLinkClick","event","setState","showPromotionDialog","state","promotionCloseButtonclick","_hidePromotionDialog","getImageSettings","viewports","xs","q","w","h","sm","lg","lazyload","removeItemFromCartHandler","cartlineToRemove","cart","input","cartLineIds","removeCartLines","validateCart","warning","debug","updateCartlineQuantity","cartlineToUpdate","cartLineQuantityUpdatedAsync","cartActionResult","message","lineUpdateFailure","validationResults","LocalizedMessage","errorDetails","fulfillmentStoreIdUpdated","getActiveCartProductsAction","ActiveCartProductsInput","getTelemetryObject","telemetryPageName","friendlyName","payLoad","bind","isCartValid","getOrderQuantityLimitsFeatureFlag","showAvailablePromotions","CartLines","reaction","componentWillUnmount","shouldComponentUpdate","nextProps","nextState","render","signInUrl","guestCheckoutUrl","getUrlSync","backToShoppingUrl","checkoutURL","getCheckoutURL","isCartEmpty","_getCartLines","emailDeliveryModeCode","channel","EmailDeliveryModeCode","validInventoryAcrossCartLines","validateCartLinesInventory","isValid","some","RetailMultiplePickupFeatureState","featureState","multiplePickUpEnabled","hasInvoiceLine","IsEnabled","getCartLinesGroup","contentAction","etext","TelemetryConstant","checkoutBySignInAttributes","checkoutByGuestAttributes","backtoShoppingAttributes","cartLineGroup","_updateCartLineErrorForInvalidInventory","viewProps","cartTitle","CartlinesWrapper","OrderSummaryWrapper","OrderSummaryItems","promoCode","_getPromoCode","_getPromotions","removePromoAriaLabelFormat","orderSummaryHeading","invoiceSummaryTitle","orderSummaryTitle","orderSummaryLineitems","_getOrderSummaryLineItems","invoiceSummaryLineitems","_getInvoiceSummaryLineItems","checkoutAsSignInUserButton","disabled","checkoutButtonTitle","checkoutAsGuestButton","guestCheckoutButtonTitle","backToShoppingButton","backToShoppingButtonTitle","createTemplateFromCartButton","_displayAddCartToTemplate","SaveCartToOrderTemplateComponent","_generateAddToOrderTemplateDialogResources","_generateOrderTemplateNameDialogResources","linesAddedToOrderTemplateDialogResources","_generateLinesAddedToOrderTemplateDialogResources","createOrderTemplateFromCartButton","createOrderTemplateFromCartButtonTooltip","storeSelector","slots","waitingComponent","Waiting","cartLoadingStatus","cartLoadingErrorMessage","cartDataResult","isEmpty","OrderSummaryErrors","_getOrderSummaryErrors","renderView","RetailB2BEcommerceFeatureState","IsB2b","showPromotionPopup","promotions","promotionLinkText","promotionPopupHeading","onCloseButtonClick","onSeeAllClick","titleId","promotionMessageWrapper","promotionMessage","promotionStringHeading","promotionSeeAllLink","tabIndex","role","promotionDialog","Modal","isOpen","toggle","ModalHeader","ModalBody","_promotion","Promotion","OfferName","ModalFooter","cartPromotions","promotionCloseButtonAriaLabel","cartLineInventoryValidationResult","productIdWithErrors","productIdWithError","element","outOfStockErrorMessage","allErrors","fullError","line","Wrapper","tag","Alert","color","assertive","outOfStockErrorMessageHeader","header","errors","InvoiceSummary","orderTotalLabel","totalAmountLabel","invoiceLabel","channelConfiguration","retailMultiplePickUpOptionEnabled","DynOrderSummary","subTotalLabel","itemsWithCountLabel","shippingLabel","estimatedShippingLabel","otherChargeLabel","otherCharges","taxLabel","estimatedTaxLabel","orderTotal","totalDiscountsLabel","toBeCalculatedText","yetToBeCalculatedText","freeText","priceFree","PromoCodeComponent","promoCodeHeadingText","promoPlaceholderText","promoCodeApplyButtonText","appliedPromoCodeHeadingText","collapseTimeOut","removePromoText","invalidPromoCodeErrorText","failedToAddPromoCodeErrorText","failedToRemovePromoCodeErrorText","duplicatePromoCodeErrorText","duplicatePromotionErrorText","addToOrderTemplateHeader","noOrderTemplatesMessage","noOrderTemplatesDescription","createAnOrderTemplateButtonText","createNewOrderTemplateButtonText","cancelOrderTemplateCreationButtonText","selectTemplatesText","addToTemplateButtonText","lineItemsText","_generateItemAddedToOrderTemplateDialogResources","viewOrderTemplateButtonText","continueShoppingButtonText","itemAddedToOrderTemplateHeaderItemOneText","itemAddedToOrderTemplateHeaderItemFormatText","itemAddedToOrderTemplateHeaderMessageText","freePriceText","originalPriceText","currentPriceText","linesAddedToOrderTemplateHeaderItemsOneText","linesAddedToOrderTemplateHeaderItemsFormatText","linesAddedToOrderTemplateHeaderLinesOneText","linesAddedToOrderTemplateHeaderLinesFormatText","linesAddedToOrderTemplateHeaderMessageText","linesAddedToOrderTemplateCustomPriceAlertMessageText","_generateDuplicateItemsWhenAddingToOrderTemplateDialogResources","duplicatedProductsHeader","duplicatedProductsDescription","updateQuantityButtonText","cancelDuplicateItemsButtonText","orderTemplateHeaderLabel","createOrderTemplateHeader","orderTemplateTitleLabel","orderTemplateTitle","orderTemplateNameAriaLabel","orderTemplateDescription","createOrderTemplateDescription","defaultOrderTemplateName","orderTemplateButtonLabel","createOrderTemplateButtonText","orderTemplateCancelButtonLabel","cancelNewOrderTemplateCreationButtonText","PickupDeliveryModeCode","modules","storeSelectorId","CartLineItems","catalogs","enableStockCheck","maxQuantityForCartLineItem","warehouseAggregation","sizeString","productDimensionTypeSize","colorString","productDimensionTypeColor","configString","productDimensionTypeConfiguration","styleString","productDimensionTypeStyle","amountString","productDimensionTypeAmount","quantityDisplayString","quantityDisplayText","inputQuantityAriaLabel","decrementButtonAriaLabel","incrementButtonAriaLabel","discountStringText","shippingChargesText","shippingCharges","priceEditorResources","removeCartButtonText","shipInsteadDisplayText","pickItUpDisplayText","changeStoreDisplayText","errorMessageOutOfRangeOneLeft","errorMessageOutOfRangeFormat","showOutOfStockErrors","addToOrderTemplateMessage","addItemToOrderTemplateError","isAbsoluteUrl","RegExp","test","returnURL","origin","includes","validateCartAsync","AsyncResult","defaultOrderQuantityLimitsFeatureConfig","platform","enableDefaultOrderQuantityLimits","featureStatuses","customerInfo","observer","_renderPromotions","Node","_renderCartlines","mulitplePickUp","emptyCartText","_renderBOPISBlock","_renderGroupBOPISBlock","onToggleBopisHandler","onChangeStoreHandler","shipToAddressDisplayText","pickUpAtStoreWithLocationText","puckUpinStoreAttribute","_renderErrorBlock","errorData","_renderOrderSummarylines","orderSummaryLines","netTotal","totalDiscounts","subtotal","shipping","otherCharge","tax","_renderInvoiceSummarylines","invoiceSummaryLines","invoices","giftCard","loyalty","_renderCartLinesGroup","_renderCartLinesGroupHeader","_countItems","count","pickUpText","shippingText","emailshippingText","groupTitle","_renderCartLinesGroupTitle","countItem","reduce","itemLabel","itemsLabel","suffix","_renderQutotationButton","url","renderModuleAttributes","renderRating","ratingId","avgRating","totalRatings","ariaLabel","numberRatings","ratingAriaLabel","rating","roundedRating","toFixed","format","getRatingAriaLabel","RatingComponent","ratingCount","readOnly","ActiveProductComponent","savingsText","imageUrl","altText","imgData","src","imageProps","cropFocalRegion","Image","loadFailureBehavior","renderProductPlacementImage","productId","basePrice","adjustedPrice","price","BasePrice","AdjustedPrice","CustomerContextualPrice","PriceComponent","renderPrice","Price","description","hideRating","AverageRating","TotalRatings","assembleNode","additionalContentNode","heading","additionalContentHeading","Msdyn365","text","editProps","onEdit","handleAdditionalTextChange","renderHeading","subtext","additionalContentParagraphText","renderParagraph","links","ctaLink","linkIndex","editableLink","linkText","linkUrl","destinationUrl","openInNewTab","isOpenInNewTab","link","onTextChange","handleAdditionalLinkTextChange","renderLinks","additionalContentContainer","additionalContentItemLinks","activeImageAdditionalContent","additionalContent","CanvasCalculations","CanvasStyles","ImageMapper","_isDesktopViewPort","_context","getActiveImageWidth","activeImageReferenceValue","activeImageRefs","current","clientWidth","getActiveImageHeight","clientHeight","convertHexToRgb","hexColor","exec","rValue","Number","parseInt","gValue","bValue","applyFadingTransition","coords","rgbColor","alpha","halfDivisor","_canvas","getContext","buttonPadding","paddingAdjustment","buttonWidth","measureText","width","fillStyle","document","body","parentElement","getAttribute","fillText","drawButton","buttonTextClor","buttonHeight","buttonPositionX","buttonPositionY","arcsize","beginPath","moveTo","lineTo","arcTo","stroke","closePath","fill","expandAnimation","buttonText","imageMapperResources","animationStartWidth","expandAnimationStartWidth","pointPositionX","pointPositionY","animationEndWidth","expandAnimationEndWidth","radius","expandRadius","rotation","startAngle","endAngle","textFadeInValue","textFadeInStartValue","buttonTextClorInRgb","toLocaleLowerCase","animate","ellipse","requestAnimationFrame","textFadeInterval","collapseAnimation","collapseAnimationStartWidth","collapseAnimationEndWidth","clearMargin","clearHeight","clearWidth","collapseRadius","textFadeOutValue","textFadeOutStartValue","clearRect","drawCircle","viewPort","doubleMultiplier","strokeStyle","arc","Math","PI","scaleCoords","imgWidth","defaultWidth","defaultScale","scale","coord","renderPrefilledAreas","areaMap","areas","area","computeCenter","scaledCoords","handleHoverOn","center","handleHoverOff","canvasPositionX","defaultPositionX","canvasPositionY","defaultPositionY","height","click","preventDefault","hoverOn","onMouseEnter","hoverOff","onMouseLeave","renderAreas","xsRadius","extendedArea","areaKey","altTextWithProductName","productSearchResult","shape","onFocus","onBlur","alt","initCanvas","_backgroundImage","_container","onLoad","defaultHeight","canvasWidth","canvasHeight","style","componentDidMount","componentDidUpdate","shouldRender","imageData","ref","useMap","ActiveImageConstants","ActiveImage","_defaultProductCardWidth","_defaultProdutCardHight","_activePoints","addActivePoints","areaId","updateClientWidth","viewport","isMobile","variant","VariantType","renderImageMapper","productResults","activePoints","configProduct","ItemId","itemId","getProductPageUrlSync","xPosition","yPosition","activePoint","JSON","stringify","mappedArea","_activeImageClass","enterArea","leaveArea","activeImage","_activeImageRefs","altTextForSeeMoreButtonWithProductName","seeMoreButtonText","overlayClass","open","resetState","renderProductComponent","baseImageUrl","productImageSettings","renderProductCard","_productCardDivRef","renderOverlay","getProductCardPositionX","defaultImageSettings","getDefaultImageSettings","productImageSettingsWidth","productCardWidth","leftAllignPosition","position","getProductCardPositionY","productImageSettingsHeight","produtCardHight","xl","keyDown","enterKey","target","nodeName","escKey","handleTextChange","handleParagraphChange","paragraph","renderActiveImageDetailsLinks","_telemetryContent","linkData","linkId","willOpenInNewTab","additionalProperties","handleLinkTextChange","renderActiveImageDetailsHeading","renderActiveImageDetailsParagraph","getActiveImageId","activeImageId","activeImageSource","split","decrementOne","_handleOutsideClick","contains","addEventListener","setTimeout","timeoutInterval","images","getElementsByClassName","Array","from","removeAttribute","removeEventListener","activePointContainer","moduleProps","activePointDetailsContainer","imageMapper","overlay","productCard","productCardleftPosition","productCardtopPosition","detailsContainer","detailsContainerCta","handleAdditionalParagraphChange","handleAdditionalText","handleAdditionalParagraph","handleAdditionalLinkText","activeImageView","Module","top","left","ProductPickUpOptionsForCartLineItems","getCacheKey","buildCacheKey","getCacheObjectType","dataCacheType","getPickUpOptionsForCartLineItems","Error","getCartState","response","ProductsDataActions","callerContext","queryResultSettings","QueryResultSettingsProxy","createObservableDataAction","action","inputData","_assembleGroupInvoiceCartlines","productPickUpOptions","_isChannelLimitsFeatureEnabled","isMultipleCatalogsFeatureEnabled","currentCatalogId","getCatalogId","validateCatalogId","showGuestCheckoutButton","expressCheckoutButton","paymentExpress","ExpressCheckoutSectionWrapper","isMultipleCatalogFeatureEnabledInHq","catalogId","checkoutBlockedDueToUnavailableFunds","isChannelTypeB2B","isShowOrHideTaxEnabled","isEnableShowOrHideSalesTaxECommerceEnabled","OrderSummary","isTaxIncludedInPrice","IsTaxIncludedInPrice","isShowTaxBreakup","updateMaxQuantityForCartLineItem","salesAgreementPricePrompt","urlCheck","isChannelLimitsFeatureEnabledInHq","cartLinesPickUpOptions","cartEmptyText","renderCartLinesGroupHeader","emailShippingText","titleSeparate","StringExtensions","renderCartLinesGroupTitle","renderCartLinesGroup","CartLineItemComponent","priceCurrency","Currency","isPickUpItem","isCartLineItemPickUpType","toUpperCase","productdeliveryOptions","storePickUpOptionList","pickup","deliveryCode","matchDeliveryOptions","PickupDeliveryModeCodes","OrderTemplateActions","onRemoveOrderTemplate","handlers","itemKey","removeOrderTemplateActionHandler","OrderTemplateRender","Id","orderTemplate","removeFromOrderTemplateListText","orderTemplateState","enableImageProductLink","onDismiss","orderTemplateImage","_renderOrderTemplateImages","orderTemplateLines","orderTemplateAriaLabel","_renderAriaLabel","orderTemplateName","separator","_getOrderTemplatePageUrl","totalLines","addToCartButton","AddOrderTemplateToCartComponent","moduleTypeName","addToCartText","addToBagText","dialogStrings","removeButton","orderTemplateStatusMessage","userMessage","statusCssString","onClickHandler","assign","slice","fullProduct","_updateProductUrlCatalog","ProductDetails","productListLine","fallBackSrc","getFallbackImageUrl","OmniChannelMedia","OrderTemplateListStatusMessage","errorType","modalCloseButtonReference","onCancelHandler","isCreateOrderTemplateDialogOpen","setOrderTemplateNameDialogOpen","useState","onCreateButtonClick","createOrderTemplateText","OrderTemplateNameDialog","modalOpen","isUpdateDialog","setModalOpen","onCancel","onOrderTemplateCreated","parentElementRef","OrderTemplateList","_isChannelMultipleCatalogsFeatureEnabled","feature","_onDismiss","_reloadPage","reload","_onRemoveFromOrderTemplateList","productListId","token","productList","deleteAsync","headerStatusMessage","deleteOrderTemplateFailedText","messageGlyph","emptyOrderTemplateText","createNewTemplateButtonText","orderTemplatesData","orderTemplateListHeading","orderTemplateListTitle","errorProps","statusMessage","Spinner","msg","progressNotificationText","Heading","emptyViewProps","createOrderTemplateButton","CreateNewTemplateButtonComponent","templateHeaderStatusMessage","OrderTemplates","OrderTemplate","_renderOrderTemplateList","currentTemplateProps","addToBagButtonText","moduleId","closeWindowButtonText","addToCartFailureMessage","addToCartSuccessMessage","addToCartProcessMessage","orderTemplateErrorMessage","linesAddedToCartDialogResources","viewCartButtonText","orderTemplateCloseButtonText","linesAddedToCartHeaderItemsOneText","linesAddedToCartHeaderLinesOneText","linesAddedToCartHeaderLinesFormatText","linesAddedToCartHeaderMessageText","OrderTemplateListView","_renderOrderTemplate","CONTENT","AddLineToTemplate","query","productCatalogs","content","Search","selectedProduct","selectedCatalogId","searchTextInput","addLineButtonRef","_renderSearchForm","searchButtonAriaLabel","searchModalPlaceholderText","selectCatalogTitleText","autoComplete","onSubmit","_onSearchSubmit","htmlFor","_onCatalogSelectionChange","_getCatalogNodes","autoFocus","placeholder","_onInputChange","maxLength","Loading","_getSearchResults","NotFound","ProductList","_onQuantityChangeHandler","selectedQuantity","_onSelectItem","varianteInput","SelectedVariantInput","productVariant","getSelectedVariant","dimensions","_getProductDimensions","selectedProductDimensions","ProductConfiguration","_onBackButtonClickHandler","_highlightSearchTerm","parsedName","unescape","dangerouslySetInnerHTML","__html","_resultCountText","searchResultsCountVerbage","searchResultsCountSubject","_addItemToTemplateHandler","orderTemplateId","AddItemToOrderTemplateInput","DefaultUnitOfMeasure","addItemToOrderTemplate","reloadPage","_toggleModalHandler","onTelemetryClick","_getCatalogs","focus","onComponentDidMount","onComponentDidUpdate","addLineModalLinkText","backToResultsText","modalProps","showBackArrow","_renderContent","addToTemplateHandler","onQuantityChangeHandler","highlightSearchTerm","searchForm","productProps","clickHandler","renderResultCountText","notFoundSearchErrorNotice","notFoundSearchErrorRedediation","NotFoundComponent","searchErrorMessage","productCatalog","isSelected","selected","searchText","searchCriteriaInput","Context","ChannelId","IncludeAttributes","SearchCondition","searchByCriteriaAsync","MasterProductId","getDimensionsForSelectedVariant","GetDimensionsForSelectedVariantInput","__decorate","computed","Dropdown","selectMenu","_onChanged","selectedIndex","dropdownId","selectId","selectedValue","innerText","dropdownList","dropdownName","OrderTemplateQuantity","inputRef","_validateMin","minValue","min","isNaN","currentInput","currentCount","_handleChange","glyphMinusClassName","decrementGlyphClass","glyphPlusClassName","incrementGlyphClass","incDisabled","max","currentValue","extraClass","getChangeHandler","amount","_onIncrementalChange","pattern","updatedQuantity","e","inputElement","HTMLInputElement","setAttribute","selectedDimensions","_getDimensionsError","dimensionName","dimensionMissingError","_addToTemplateHandler","isBusy","showAddConfirmation","add","missingDimensions","ProductListId","addToTemplateDuplicateError","addToTemplateGenericError","_onQuantityChange","newValue","totalPrice","_updateDimensionValue","productDimensionFull","newValueId","DimensionValues","_onDimensionChanged","remainingDimensionsErrors","selection","buttonDisabled","mappedDimensions","ExtensionProperties","variantProduct","dimensionInput","variantDimensions","availabilityInput","ProductAvailabilitiesForSelectedVariantInput","newAvailableQuantity","getProductAvailabilitiesForSelectedVariant","priceInput","PriceForSelectedVariantInput","productPrice","getPriceForSelectedVariant","productAvailableQuantity","unitPrice","sort","a","b","_getDropdownName","dimensionType","addItemToTemplateText","addLineProductUnitPricePrefix","quantitySelectLabel","addLineProductUnitOfMeasurePrefix","totalPriceLabel","isMultipleCatalogSelect","_formatPrice","_getDimensionsNodes","_getConfirmationMessage","selectedDimensionNames","addToTemplateConfirmation","values","unshift","cultureFormatter","formatCurrency","currencyCode","selectProductButtonText","primaryImageSource","generateImageUrl","fallBackImg","ProductSelectButton","setBusy","getClickHandler","OrderTemplateBulkActions","isAddDisabled","isRemoveDisabled","addHandler","onAddSelectionToBag","removeHandler","onRemoveSelection","selectedLines","searchInputAriaLabel","backButtonText","addSelectedToBagButtonText","removeSelectedToBagButtonText","addLineProps","isMinifiedView","removeOrderActionHandler","_removeOrderTemplate","onRemoveTemplate","_getOrderTemplateAddToCartDialog","addTemplateToBagButtonText","_getOrderTemplateRenameControl","renameOrderTemplateDialogStrings","RenameOrderTemplateComponent","onRenameTemplate","renameOrderTemplateButtonText","renameTemplateButtonText","buttonEventReference","ActionsSplitButton","isStatementRequestAdminDropdownOpen","setIsStatementRequestAdminDropdownOpen","renameOrderTemplateDialogOpen","onToggleDropdown1","popoverReference","renderModalPopup","existingOrderTemplate","requestStatementDropdownString","Random","innerRef","Popover","placement","OrderTemplateLineActions","orderTemplateLine","onAddToBag","onRemoveItem","getAddToBag","getRemoveItem","PopUp","removeFromOrderTemplateLinesText","moreButtonText","viewProductDetailsText","showMobile","setShowMobile","toggleDetailsDisplayed","getActionButton","removeButtonClassName","addButtonClassName","getDesktopActionButton","onSelectLineHandler","isChecked","onSelect","ExtraActionsPopup","showActions","setShowActions","actionsContainerClassName","OrderTemplateMobileLineView","UnitOfMeasure","fallbackImage","productLineCatalog","renderProductCatalog","productImage","_renderProductImage","productInfo","renderProductInfo","_renderPrice","productNumber","productUnitOfMeasure","productQuantityView","_generateQuantity","onChangeHandler","onChangeQuantity","isQuantityDisabledForUpdate","image","isB2b","catalog","_renderProductError","OOS","outOfStockProductErrorMessage","UNASSORTED","unavailableProductErrorMessage","NONE","_renderProductDimensions","productName","dimensionsLine","OrderTemplateLinesStatusMessage","OrderTemplateTableHeading","componentClassName","getOnChange","checkedLines","lines","scope","selectAllRowsText","productLineCatalogName","productUnitPrice","productUOM","productQuantity","productActions","OrderTemplateLines","_onRemoveSelection","removeSelectedFailureMessage","removeSelectedSuccessMessage","productSelection","productListLines","maxWaitTimeInMilliSeconds","removeProductListLinesAsync","substr","indexOf","_onAddSelectionToBag","productLine","ProductTypeValue","_addItemToBag","_getCurrentUrl","reqContext","requestUrl","onCloseHandler","isItemAddedToOrderTemplateOpen","_renderItemAddedToCartDialog","itemAddedToCartDialogData","ItemAddedToCartDialog","_generateItemAddedToCartDialogResources","onClose","_renderPagination","itemsPerPage","skipCount","_getCurrentPageNumber","totalItems","previousText","flipperPrevious","nextText","flipperNext","UncontrolledPagination","paginationAriaLabel","qsp","startingItem","_renderPrev","_renderNext","previousAriaLabel","nextAriaLabel","_toggleDetailsDisplayed","isDetailsDisplayed","detailedProductView","absoluteUrl","_changeQuantity","orderTemplateLinesData","orderLineIndex","findIndex","newProductListLine","prevQuantity","updateProductListLinesAsync","list","newLine","updatedLines","updatedOrderTemplate","ProductListLines","update","ActiveOrderTemplateLinesInput","editOrderTemplateLineQuantityError","maxQuantityLimitText","addedToCartFailureMessage","addProductToCartInput","addProductToCart","priceResult","isMiniCart","addToCartBehavior","substatus","cartLineQuantity","defaultMessage","_removeItemFromOrderTemplateLines","userToken","featureStates","getFeatureState","createGetFeatureStateInput","_renameTemplate","_removeTemplate","newLink","_getViewport","device","Type","innerWidth","md","paginationPreviousText","paginationNextText","_viewport","_updateViewport","isConfirmAddSelectionToBagModalOpen","params","isEditor","emptyOrderTemplateLinesText","errorGettingOrderTemplateLines","orderTemplateResult","_isFirstPage","orderActions","_renderOrderTemplateActions","bulkOrderLineActions","_getOrderTemplateLineActions","productsStatusMessage","ProductsTable","ProductsTableRow","ProductsTableHeading","_renderProductListHeader","orderLines","_renderProductList","updateQuantity","debounce","pagination","itemAddedToCartDialog","updated","onSelectAll","productNumberText","productText","productUnitPriceText","productUOMText","productQuantityText","productActionsText","headers","_generateLinesAddedToCartDialogResources","itemAddedToCartHeaderItemOneText","itemAddedToCartHeaderItemFormatText","itemAddedToCartHeaderMessageText","deleteTemplateButtonText","addTemplateToBag","renameTemplate","removeTemplate","actionsSplitButton","OrderTemplateActionsView","renameOrderTemplateTitleText","cancelBtnLabel","skip","selectOneRowText","addOrderTemplateItemToBagButtonText","removeItemFromOrderTemplateButtonText","deleteButtonText","selectLine","addToBagButton","extraActionsPopup","popUp","shouldDisable","OrderTemplateLineView","ProductPrice","observable","_renderItem","quantityLabel","disableElement","pointerEvents","opacity","toggleDetails","wrapClassName","fade","applicationNode"],"sourceRoot":""}