= (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 \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 {changeStoreDisplayText}\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 {changeStoreDisplayText}\r\n \r\n ) : null}\r\n \r\n {isBopisSelected ? shipInsteadDisplayText : pickItUpDisplayText}\r\n \r\n \r\n );\r\n};\r\n\r\nconst _countItems = (cartLine: ICartlinesViewProps[]): number => {\r\n let countItem = 0;\r\n countItem = cartLine.reduce((count, item) => {\r\n return count + (item.data?.cartline.Quantity || 0);\r\n }, 0);\r\n return countItem;\r\n};\r\n\r\nconst _renderCartLinesGroupTitle = (cartLine: ICartlinesViewProps, resources: IDynCartResources, count: number) => {\r\n const isBopisSelected = cartLine?.pickUpInStore?.isBopisSelected;\r\n const { itemLabel, itemsLabel } = resources;\r\n const suffix = count > 1 ? itemsLabel : itemLabel;\r\n return (\r\n <>\r\n \r\n {isBopisSelected ? (\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","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\nimport { PriceComponent } from '@msdyn365-commerce/components';\r\nimport { ICoreContext, ITelemetry } from '@msdyn365-commerce/core';\r\nimport { ICheckoutState, IGiftCardExtend } from '@msdyn365-commerce/global-state';\r\nimport { Cart, ChannelConfiguration, ChannelDeliveryOptionConfiguration } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\n\r\nexport interface IOrderSummaryProps {\r\n subTotalLabel: string;\r\n shippingLabel: string;\r\n taxLabel: string;\r\n orderTotalLabel: string;\r\n loyaltyLabel?: string;\r\n giftcardLabel?: string;\r\n totalDiscountsLabel: string;\r\n context: ICoreContext;\r\n telemetry: ITelemetry;\r\n cart: Cart;\r\n channelConfiguration: ChannelConfiguration;\r\n id: string;\r\n typeName: string;\r\n otherChargeLabel?: string;\r\n freeText?: string;\r\n toBeCalculatedText?: string;\r\n checkoutState?: ICheckoutState;\r\n retailMultiplePickUpOptionEnabled?: boolean;\r\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\r\n isTaxIncludedInPrice?: boolean;\r\n isShowTaxBreakup?: boolean;\r\n}\r\n\r\nexport interface IDynOrderSummaryLines {\r\n netTotal: React.ReactNode;\r\n subtotal: React.ReactNode;\r\n shipping?: React.ReactNode;\r\n otherCharge?: React.ReactNode;\r\n tax: React.ReactNode;\r\n orderTotal: React.ReactNode;\r\n totalDiscounts?: React.ReactNode;\r\n giftCard?: React.ReactNode;\r\n loyalty?: React.ReactNode;\r\n}\r\n\r\ninterface IOrderSummaryLineProps {\r\n label: string;\r\n context: ICoreContext;\r\n telemetry: ITelemetry;\r\n price?: number;\r\n freeText?: string;\r\n toBeCalculatedText?: string;\r\n id: string;\r\n typeName: string;\r\n cssLabel: string;\r\n}\r\n\r\ninterface IShippingOrderLine {\r\n cart: Cart;\r\n channelConfiguration: ChannelConfiguration;\r\n canShip?: boolean;\r\n hasDeliveryMethod?: boolean;\r\n hasShippingMethod?: boolean;\r\n freightFee?: number;\r\n}\r\n\r\nconst OrderSummaryLine: React.FC = ({\r\n price,\r\n label,\r\n context,\r\n id,\r\n typeName,\r\n toBeCalculatedText,\r\n freeText,\r\n cssLabel\r\n}) => {\r\n return (\r\n \r\n {label} \r\n {price || price === 0 ? (\r\n {toBeCalculatedText} \r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst _buildOrderSummarySection = (\r\n props: IOrderSummaryProps,\r\n price: number | undefined,\r\n cssLabel: string,\r\n label: string = ''\r\n): React.ReactNode => {\r\n return (\r\n {\r\n /** The flag to change the quantity component from interactible to static */\r\n disableQuantityInteractivity?: boolean;\r\n\r\n /** The primary image url */\r\n primaryImageUrl?: string;\r\n\r\n /** The product url */\r\n productUrl?: string;\r\n\r\n /** GridSettings for the product image in cartLine */\r\n gridSettings: IGridSettings;\r\n\r\n /** ImageSettings for the product image in cartLine */\r\n imageSettings: IImageSettings;\r\n\r\n /** Boolean flag to indicate if the item is out of stock */\r\n isOutOfStock?: boolean;\r\n\r\n /** Flag to make quantity section editable */\r\n isQuantityEditable?: boolean;\r\n\r\n /** Max quantity for line item */\r\n maxQuantity?: number;\r\n\r\n /** Current quantity for line item */\r\n currentQuantity?: number;\r\n\r\n /** Resource string for the component */\r\n resources: ICartlineResourceString;\r\n\r\n /** SalesLine flag */\r\n isSalesLine?: boolean;\r\n\r\n /** Error message to show in place of quantity */\r\n errorMessage?: string;\r\n\r\n /** Inventory information label */\r\n inventoryInformationLabel?: string;\r\n\r\n /** Inventory information class name */\r\n inventoryLabelClassName?: string;\r\n\r\n /** Flag to show/hide shipping charges for line items */\r\n showShippingChargesForLineItems?: boolean;\r\n\r\n /** Boolean flag to indicate if cart state status is ready */\r\n isCartStateReady?: boolean;\r\n\r\n /** Chanel Delivery Option configuration is from api. */\r\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\r\n\r\n /** The telemetry content */\r\n telemetryContent?: ITelemetryContent;\r\n\r\n /**\r\n * The cart line index.\r\n */\r\n lineIndex?: number;\r\n\r\n /** Quantity onChange callback */\r\n quantityOnChange?(cartLine: CartLine, newQuantity: number): boolean;\r\n}\r\n\r\ninterface IDimensionStrings {\r\n /** String for size key */\r\n sizeString: string;\r\n\r\n /** String for color key */\r\n colorString: string;\r\n\r\n /** String associated with the configuration product dimension */\r\n configString: string;\r\n\r\n /** String for style key */\r\n styleString: string;\r\n\r\n /** String for amount key */\r\n amountString?: string;\r\n}\r\n\r\nconst CartLineItemFunctions = {\r\n renderProductDimensions: (Product: SimpleProduct, DimensionStrings: IDimensionStrings) => {\r\n if (!Product || !Product.Dimensions) {\r\n return [];\r\n }\r\n\r\n return Product.Dimensions.map(productDimension => {\r\n if (productDimension.DimensionTypeValue === 1) {\r\n return (\r\n \r\n \r\n {DimensionStrings.colorString}:\r\n {productDimension.DimensionValue && productDimension.DimensionValue.Value} \r\n \r\n
\r\n );\r\n }\r\n\r\n if (productDimension.DimensionTypeValue === 2) {\r\n return (\r\n \r\n \r\n {DimensionStrings.configString}:\r\n {productDimension.DimensionValue && productDimension.DimensionValue.Value} \r\n \r\n
\r\n );\r\n }\r\n\r\n if (productDimension.DimensionTypeValue === 3) {\r\n return (\r\n \r\n \r\n {DimensionStrings.sizeString}:\r\n {productDimension.DimensionValue && productDimension.DimensionValue.Value} \r\n \r\n
\r\n );\r\n }\r\n\r\n if (productDimension.DimensionTypeValue === 4) {\r\n return (\r\n \r\n \r\n {Product.IsGiftCard ? DimensionStrings.amountString : DimensionStrings.styleString}:\r\n {productDimension.DimensionValue && productDimension.DimensionValue.Value} \r\n \r\n
\r\n );\r\n }\r\n return null;\r\n });\r\n },\r\n\r\n renderDiscountLines: (props: ICartLineProps) => {\r\n if (!props.data.cartLine.DiscountLines || props.data.cartLine.DiscountLines.length === 0) {\r\n return null;\r\n }\r\n\r\n /**\r\n * Get the updated discount percentage.\r\n * @param discountLine - The discount line.\r\n * @param cartLine - The cart line.\r\n * @returns The updated discount percentage.\r\n */\r\n const discountPercent = (discountLine: DiscountLine, cartLine: CartLine): number => {\r\n const numberZero = 0;\r\n const decimalPrecision = 2;\r\n const fullPercentage = 100;\r\n let updatedPercent: number = discountLine.Percentage ?? numberZero;\r\n\r\n if (\r\n (discountLine.Percentage === numberZero ||\r\n (discountLine.DiscountLineTypeValue && discountLine.DiscountLineTypeValue === DiscountLineType.TenderTypeDiscount)) &&\r\n cartLine.Price &&\r\n cartLine.Price > numberZero &&\r\n cartLine.Quantity &&\r\n cartLine.Quantity !== numberZero\r\n ) {\r\n const effectiveAmount = discountLine.EffectiveAmount ?? numberZero;\r\n updatedPercent = Number(\r\n ((effectiveAmount / (cartLine.Price * cartLine.Quantity)) * fullPercentage).toFixed(decimalPrecision)\r\n );\r\n }\r\n\r\n return updatedPercent;\r\n };\r\n\r\n return props.data.cartLine.DiscountLines.map((discountLine, index) => {\r\n return (\r\n \r\n
\r\n {` ${\r\n discountLine.Percentage !== undefined ? discountPercent(discountLine, props.data.cartLine) : ''\r\n }% discount : savings `}\r\n \r\n {/*
\r\n { {discountLine.OfferName ? discountLine.OfferName : ''} }\r\n :\r\n { {` ${props.resources.discountStringText || 'Discount'} `} }\r\n */}\r\n
\r\n \r\n
{props.inventoryInformationLabel} ;\r\n },\r\n\r\n /**\r\n * Gets the react node for product unit of measure display.\r\n * @param props - Icartline props.\r\n * @returns The node representing markup for unit of measure component.\r\n */\r\n renderUnitOfMeasure: (props: ICartLineProps) => {\r\n if (props.data.cartLine.IsInvoiceLine) {\r\n return null;\r\n }\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Do not need type check for appsettings\r\n if (!props.context.app.config.unitOfMeasureDisplayType || props.context.app.config.unitOfMeasureDisplayType === 'none') {\r\n return undefined;\r\n }\r\n\r\n const product = props.data.product;\r\n if (!product || !product.DefaultUnitOfMeasure) {\r\n return undefined;\r\n }\r\n\r\n return (\r\n \r\n {product.DefaultUnitOfMeasure} \r\n
\r\n );\r\n },\r\n renderShippingLabel: (props: ICartLineProps) => {\r\n const pickupDeliveryModeCode = props.context.request.channel?.PickupDeliveryModeCode;\r\n const channelDeliveryOptionConfig = props.channelDeliveryOptionConfig;\r\n const cartline = props.data.cartLine;\r\n let hasShippingMethod = false;\r\n if (channelDeliveryOptionConfig !== undefined) {\r\n hasShippingMethod = !!(\r\n cartline.DeliveryMode &&\r\n channelDeliveryOptionConfig?.PickupDeliveryModeCodes?.some(deliveryMode => deliveryMode !== cartline.DeliveryMode)\r\n );\r\n } else {\r\n hasShippingMethod = !!(cartline.DeliveryMode && cartline.DeliveryMode !== pickupDeliveryModeCode);\r\n }\r\n if (!hasShippingMethod) {\r\n return undefined;\r\n }\r\n\r\n const shippingChargeLines = (cartline.ChargeLines || []).filter(chargeLine => chargeLine.IsShipping);\r\n\r\n if (shippingChargeLines.length === 0) {\r\n return undefined;\r\n }\r\n\r\n const freightFee = shippingChargeLines.reduce((chargeTotal, chargeLine) => {\r\n return chargeTotal + (chargeLine.CalculatedAmount || 0);\r\n }, 0);\r\n\r\n const priceComponent = (\r\n {`${props.resources.shippingChargesText}:`} \r\n {priceComponent} \r\n \r\n );\r\n },\r\n renderOtherCharges: (props: ICartLineProps) => {\r\n const cartline = props.data.cartLine;\r\n const otherCharges = cartline.ChargeLines?.filter(chargeline => !chargeline.IsShipping);\r\n\r\n return (\r\n (otherCharges &&\r\n otherCharges.map((otherCharge, key) => {\r\n return otherCharge && otherCharge.CalculatedAmount ? (\r\n \r\n
{`${otherCharge.Description}:`} \r\n
\r\n \r\n
= (props: ICartLineProps) => {\r\n const { isSalesLine, productUrl, resources } = props;\r\n const { product, productSpecificationData, cartLine } = props.data;\r\n\r\n const destructDimensionStrings = {\r\n sizeString: resources.sizeString,\r\n colorString: resources.colorString,\r\n styleString: resources.styleString,\r\n configString: resources.configString,\r\n amountString: resources.amountString\r\n };\r\n\r\n //const fallbackImageUrl = product && getFallbackImageUrl(product.ItemId, props.context.actionContext.requestContext.apiSettings);\r\n //const productDimensions = product && CartLineItemFunctions.renderProductDimensions(product, destructDimensionStrings);\r\n const imageSettings = props.imageSettings;\r\n if (imageSettings) {\r\n imageSettings.cropFocalRegion = true;\r\n }\r\n const renderDisountLines = CartLineItemFunctions.renderDiscountLines(props);\r\n const renderInventoryLabel = CartLineItemFunctions.renderInventoryLabel(props);\r\n const renderUnitOfMeasure = CartLineItemFunctions.renderUnitOfMeasure(props);\r\n const renderShippingLabel = CartLineItemFunctions.renderShippingLabel(props);\r\n const renderOtherCharges = CartLineItemFunctions.renderOtherCharges(props);\r\n const payLoad = getPayloadObject('click', props.telemetryContent!, '', product?.RecordId.toString());\r\n const prodAttribute = getTelemetryAttributes(props.telemetryContent!, payLoad);\r\n const productName = product?.Name || cartLine.Description;\r\n const imgeClassName = props.data.cartLine.IsInvoiceLine ? 'msc-cart-line__invoice-image' : 'msc-cart-line__product-image';\r\n\r\n let externalItemID = '';\r\n if (productSpecificationData) {\r\n externalItemID =\r\n productSpecificationData\r\n .find(attribute => attribute.Name === 'External Item Id' || attribute.Name === 'ERP_ExternalItemID')\r\n ?.TextValue?.toString() ??\r\n productSpecificationData.find(attribute => attribute.Name === 'Catalog Number')?.TextValue?.toString() ??\r\n '';\r\n }\r\n\r\n // let sizeDescription = '';\r\n // if (productSpecificationData) {\r\n // sizeDescription = productSpecificationData.find(attribute => attribute.Name === 'Description')?.TextValue?.toString() ?? '';\r\n // }\r\n const sizeDescription = product?.Description;\r\n\r\n const onChange = (newValue: number): boolean => {\r\n if (props.quantityOnChange) {\r\n return props.quantityOnChange(props.data.cartLine, newValue);\r\n }\r\n return true;\r\n };\r\n\r\n const _generateErrorMessage = (): JSX.Element | null => {\r\n if (props.errorMessage) {\r\n return (\r\n \r\n {props.errorMessage} \r\n
\r\n );\r\n }\r\n\r\n return null;\r\n };\r\n\r\n const _generateQuantityandPrice = (): JSX.Element[] | null => {\r\n const nodes = [];\r\n if (props.isOutOfStock) {\r\n const errorMessage = _generateErrorMessage();\r\n\r\n if (errorMessage) {\r\n return [errorMessage];\r\n }\r\n\r\n return null;\r\n }\r\n\r\n nodes.push(\r\n \r\n
\r\n {(props.data.cartLine.DiscountAmount && props.data.cartLine.DiscountAmount > 0 && (\r\n <>\r\n
\r\n {` ${props.resources.discountStringText || 'Discount'} `}\r\n \r\n
\r\n \r\n )) ||\r\n null}\r\n
\r\n
{resources.quantityDisplayString}
\r\n\r\n {_generateErrorMessage()}\r\n\r\n
\r\n
\r\n {resources.quantityDisplayString}: \r\n\r\n {_generateErrorMessage()}\r\n\r\n {props.data.cartLine.Quantity} \r\n
\r\n );\r\n }\r\n }\r\n\r\n return nodes;\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {productName}\r\n \r\n
\r\n {externalItemID ? Ref : : ''}\r\n {externalItemID}\r\n
\r\n {/* {ArrayExtensions.hasElements(productDimensions) ? (\r\n
{productDimensions}
\r\n ) : (\r\n ''\r\n )} */}\r\n
\r\n \r\n {sizeDescription ? (\r\n <>\r\n {destructDimensionStrings.sizeString}:{sizeDescription} \r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n
\r\n {renderUnitOfMeasure}\r\n
\r\n {renderDisountLines}\r\n {renderInventoryLabel}\r\n {props.showShippingChargesForLineItems &&
{renderShippingLabel}
}\r\n {renderOtherCharges}\r\n
\r\n
{_generateQuantityandPrice()}
\r\n
\r\n
= msdyn365Commerce.createComponentOverride(\r\n 'CartLineItem',\r\n { component: CartLine, ...CartLineItemFunctions }\r\n);\r\n\r\nexport default CartLine;\r\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 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 {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 if (!this.isQuantityLimitsFeatureEnabled) {\n this.setState({ cartlinesErrors: {}, 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({ cartlinesErrors: {}, 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 featureStatuses = await this.props.data.featureState;\n\n try {\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 const useSiteBuilderSettings = featureStatuses?.find(\n featureState => featureState.Name === 'RevertToSiteBuilderOrderQuantityLimitsSettings'\n )?.IsEnabled;\n\n if (useSiteBuilderSettings) {\n const defaultOrderQuantityLimitsFeatureConfig = this.props.context?.request?.app?.platform?.enableDefaultOrderQuantityLimits;\n if (defaultOrderQuantityLimitsFeatureConfig === 'none') {\n return false;\n }\n\n if (defaultOrderQuantityLimitsFeatureConfig === 'all') {\n return true;\n }\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 } else {\n const cartConfiguration = await this.props.data.cartConfiguration;\n return !(cartConfiguration?.IgnoreOrderSettings ?? 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 {errorData.header}\n {errorData.errors}\n \n );\n};\n\n/**\n * Method will render invoice summary lines.\n * @param invoiceSummaryLines -The invoicesummary lines interface.\n * @param OrderSummaryItems -The order summary items props.\n * @param props -The cartview props.\n * @returns Jsx element.\n */\nconst _renderInvoiceSummarylines = (\n invoiceSummaryLines: IInvoiceSummaryLines | undefined,\n OrderSummaryItems: INodeProps,\n props: ICartViewProps\n): JSX.Element | null => {\n if (!invoiceSummaryLines) {\n props.context.telemetry.error('InvoiceSummary content is empty, module wont render');\n return null;\n }\n return (\n \n {invoiceSummaryLines.invoices}\n {invoiceSummaryLines.giftCard}\n {invoiceSummaryLines.loyalty}\n {invoiceSummaryLines.orderTotal}\n \n );\n};\n\n/**\n * Method will render order summary lines.\n * @param orderSummaryLines -The ordersummary lines interface.\n * @param OrderSummaryItems -The order summary items props.\n * @param props -The cartview props.\n * @returns Jsx element.\n */\nconst _renderOrderSummarylines = (\n orderSummaryLines: IOrderSummaryLines | undefined,\n OrderSummaryItems: INodeProps,\n props: ICartViewProps\n): JSX.Element | null => {\n if (!orderSummaryLines) {\n props.context.telemetry.error('OrderSummary content is empty, module wont render');\n return null;\n }\n return (\n \n {props.promoCode}\n {orderSummaryLines.subtotal}\n {orderSummaryLines.shipping}\n {orderSummaryLines.otherCharge}\n {orderSummaryLines.tax}\n {orderSummaryLines.totalDiscounts ? orderSummaryLines.totalDiscounts : null}\n {orderSummaryLines.orderTotal}\n \n );\n};\n\n/**\n * Method will render cart promotions.\n * @param promotions -The cartline item view props.\n * @returns Jsx element.\n */\nconst _renderPromotions = (promotions: ICartLineItemViewProps): JSX.Element | undefined => {\n return (\n <>\n \n {promotions.promotionMessage}\n {promotions.promotionSeeAllLink}\n {promotions.promotionDialog}\n \n \n );\n};\n\n/**\n * Method will render cartlines group title.\n * @param cartLine -The cartline view props.\n * @param titleSeparate -The title separate.\n * @returns Jsx element.\n */\nconst renderCartLinesGroupTitle = (cartLine: ICartlinesViewProps, titleSeparate: string) => {\n const isBopisSelected: boolean | undefined = cartLine.pickUpInStore?.isBopisSelected;\n return (\n <>\n \n {isBopisSelected ? (\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
= (props: ICartViewProps) => (\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 {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 * 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 {removeButtonText}\n \n ),\n addToWishlist:\n isAuthenticated && product && !isCustomPriceSelected ? (\n \n \n \n \n {cartLine.FulfillmentStoreId ? (\n \n {orgUnitName} \n \n {changeStoreText}\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 { PriceComponent } from '@msdyn365-commerce/components';\nimport { ICoreContext, ITelemetry } from '@msdyn365-commerce/core';\nimport { ICheckoutState, IGiftCardExtend } from '@msdyn365-commerce/global-state';\nimport { Cart, CartLine } from '@msdyn365-commerce/retail-proxy';\nimport { format } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface IInvoiceSummaryProps {\n orderTotalLabel: string;\n invoiceLabel: string;\n loyaltyLabel?: string;\n giftcardLabel?: string;\n context: ICoreContext;\n telemetry: ITelemetry;\n cart: Cart;\n id: string;\n typeName: string;\n freeText?: string;\n toBeCalculatedText?: string;\n checkoutState?: ICheckoutState;\n}\n\nexport interface IInvoiceSummaryLines {\n orderTotal: React.ReactNode;\n invoices: React.ReactNode;\n giftCard?: React.ReactNode;\n loyalty?: React.ReactNode;\n}\n\ninterface IInvoiceSummaryLineProps {\n label: string;\n context: ICoreContext;\n telemetry: ITelemetry;\n price?: number;\n freeText?: string;\n toBeCalculatedText?: string;\n id: string;\n typeName: string;\n cssLabel: string;\n}\n\nconst InvoiceSummaryLine: React.FC = ({\n price,\n label,\n context,\n id,\n typeName,\n toBeCalculatedText,\n freeText,\n cssLabel\n}) => {\n return (\n \n {label} \n {price || price === 0 ? (\n {toBeCalculatedText} \n )}\n
\n );\n};\n\nconst _buildPaymentSummarySection = (\n props: IInvoiceSummaryProps,\n price: number | undefined,\n label: string,\n cssLabel: string\n): React.ReactNode => {\n return (\n {\n const catalogId = getCatalogId(actionContext.requestContext);\n const actionInput = new MediaLocationsForSelectedVariantInput(productId, channelId, selectedProduct, catalogId);\n\n return getMediaLocationsForSelectedVariant(actionInput, actionContext)\n .then(mediaLocations => {\n if (mediaLocations) {\n return Promise.all(mediaLocations.map(mediaLocation => validateMediaLocationAsync(mediaLocation))).then(pairs => {\n return pairs.filter(pair => pair[1]).map(pair => pair[0]);\n });\n }\n\n return [];\n })\n .catch(error => {\n actionContext.telemetry.exception(error);\n actionContext.telemetry.debug('Unable to get Media Locations for Selected Variant');\n return [];\n });\n}\n\n/**\n * Gets product variant images on dimension change of buy-box module for Omni scenario.\n * @param productId Product record id.\n * @param shouldUseCmsAltText Alt-text source to use.\n * @param channelId Current channel id.\n * @param actionContext Current action context.\n * @param productName Product name.\n * @param selectedProduct Currently selected variant product.\n * @returns List of images.\n */\n\nexport async function getProductImages(\n productId: number,\n shouldUseCmsAltText: boolean,\n channelId: number,\n actionContext: IActionContext,\n productName?: string,\n selectedProduct?: SimpleProduct\n): Promise {\n const catalogId = getCatalogId(actionContext.requestContext);\n if (actionContext.requestContext?.params?.isPreview) {\n const response = await commerceApiRequest(actionContext.requestContext, 'msdyn365-ochannel-product-info', 'post', {\n productId: productId,\n channelId: channelId,\n catalogId: catalogId\n });\n if (response.status !== 200) {\n actionContext.telemetry.debug('Unable to get Media Locations for Selected Variant for preview scenario');\n return [];\n }\n const previewImageData = response?.data as MediaLocation[];\n if (previewImageData) {\n return previewImageData.map(mediaLocation => {\n return {\n src: mediaLocation.Uri ?? '',\n altText: getAltText(actionContext.requestContext, shouldUseCmsAltText, productName, mediaLocation.AltText),\n displayOrder: mediaLocation.DisplayOrder,\n mediaTypeValue: mediaLocation.MediaTypeValue,\n additionalProperties: mediaLocation.IsApplicableForChildEntities\n ? {\n isApplicableForChildEntities: 'true'\n }\n : undefined\n };\n });\n }\n return [];\n }\n const actionInput = new MediaLocationsForSelectedVariantInput(productId, channelId, selectedProduct, catalogId);\n return getMediaLocationsForSelectedVariant(actionInput, actionContext)\n .then(mediaLocations => {\n if (mediaLocations) {\n return mediaLocations.map(mediaLocation => {\n return {\n src: mediaLocation.Uri ?? '',\n altText: getAltText(actionContext.requestContext, shouldUseCmsAltText, productName, mediaLocation.AltText),\n displayOrder: mediaLocation.DisplayOrder,\n mediaTypeValue: mediaLocation.MediaTypeValue,\n additionalProperties: mediaLocation.IsApplicableForChildEntities\n ? {\n isApplicableForChildEntities: 'true'\n }\n : undefined\n };\n });\n }\n return [];\n })\n .catch(error => {\n actionContext.telemetry.exception(error);\n actionContext.telemetry.debug('Unable to get Media Locations for Selected Variant');\n return [];\n });\n}\n\nexport async function validateProductImages(\n mediaLocations: MediaLocation[],\n actionContext: IActionContext,\n imageSettings: IImageSettings\n): Promise {\n return Promise.all(mediaLocations.map(mediaLocation => validateMediaLocationAsync(mediaLocation)))\n .then(pairs => {\n return pairs.filter(pair => pair[1]).map(pair => pair[0]);\n })\n .catch(error => {\n actionContext.telemetry.exception(error);\n actionContext.telemetry.debug('Unable to validate product images');\n return [];\n });\n}\n\n/**\n * GetVideoMetadataFromAPI - Makes API call to get video metadata.\n * @param videoId: Video Id\n * @param actionContext: Action context\n * @returns: Returns the meta data of the video.\n */\nexport async function getVideoMetadataFromApi(videoId: string, actionContext: IActionContext): Promise {\n let videoPlayerData: IVideoData | undefined;\n if (videoId) {\n const response = await commerceVideoMetadataRequest(actionContext.requestContext, [videoId]);\n\n if (response.status !== 200) {\n actionContext.telemetry.debug(`Unable to get video metadata for videoId: ${videoId}`);\n return;\n }\n\n const videoData = response.data as [];\n if (videoData && ArrayExtensions.hasElements(videoData)) {\n videoPlayerData = videoData[0];\n }\n }\n return videoPlayerData;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Carousel, ICarouselProps, Player, IPlayerData, IPlayerOptions, IVideoMetadata } from '@msdyn365-commerce/components';\nimport { IImageData, IImageSettings, Image, Video } from '@msdyn365-commerce/core';\nimport { MediaLocation, MediaType, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, getFallbackImageUrl, ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n defaultDataScale,\n IComponentNodeProps,\n ImagefullView,\n IModalViewProps,\n IModuleProps,\n inlineZoomImageOnHover,\n inlineZoomImageOnMouseMove,\n inlineZoomImageOnMouseOut,\n inlineZoomInitClick,\n INodeProps,\n ISingleSlideCarouselProps,\n isMobile,\n KeyCodes,\n NodeTag,\n onContainerZoomInit,\n onMouseMoveLensContainer,\n onMouseOutLensContainer,\n onMouseOverImageContainer,\n removeContainerZoomStyle,\n removeInlineZoomStyle,\n SingleSlideCarousel,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { reaction } from 'mobx';\nimport * as React from 'react';\n\nimport { IMediaGalleryData } from './media-gallery.data';\nimport { imageSource, imageZoom, IMediaGalleryProps, thumbnailsOrientation } from './media-gallery.props.autogenerated';\nimport { getProductImages, getValidProductImages, getVideoMetadataFromApi, validateProductImages } from './utils';\nimport { getAltText, IMediaData } from './utils/helper';\n\n/**\n * IMediaGalleryState Interface.\n */\nexport interface IMediaGalleryState {\n animating: boolean;\n activeIndex: number;\n isImageZoomed: boolean;\n modalIsOpen: boolean;\n lastUpdate?: number;\n isMobileImageZoomed?: boolean;\n mediaGalleryItems?: IMediaData[];\n isInitialLoad?: boolean;\n shouldUseOptimizedImage?: boolean;\n}\n\n/**\n * IMediaGalleryThumbnailsViewProps Interface.\n */\nexport interface IMediaGalleryThumbnailsViewProps {\n ThumbnailsContainerProps: INodeProps;\n SingleSlideCarouselComponentProps: INodeProps;\n items?: IMediaGalleryThumbnailItemViewProps[];\n}\n\n/**\n * IMediaGalleryThumbnailItemViewProps Interface.\n */\nexport interface IMediaGalleryThumbnailItemViewProps {\n ThumbnailItemContainerProps: INodeProps;\n Picture: React.ReactElement;\n}\n\n/**\n * IMediaGalleryViewProps Interface.\n */\nexport interface IMediaGalleryViewProps extends IMediaGalleryProps {\n state: IMediaGalleryState;\n MediaGallery: IModuleProps;\n CarouselProps: INodeProps;\n Thumbnails: IMediaGalleryThumbnailsViewProps;\n Modal?: React.ReactElement | null;\n callbackToggle?(): void;\n callbackThumbnailClick?(index: number): void;\n callbackThumbnailKeyDown?(index: number): void;\n}\n\n/**\n * Props for carousel.\n */\ninterface IMediaGalleryCarouselItems {\n items: ItemType[];\n keys: (string | undefined)[];\n}\n\n/**\n * Media gallery component.\n */\nclass MediaGallery extends React.Component, IMediaGalleryState> {\n private readonly _inlineZoomDivRef: Map = new Map();\n\n private readonly fullScreenOverlayButtonRef: React.RefObject = React.createRef();\n private readonly player: React.RefObject = React.createRef();\n private fallbackImage?: string;\n\n private readonly defaultGalleryImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=767&h=767&m=8', w: 0, h: 0 },\n sm: { q: 'w=600&h=600&m=8', w: 0, h: 0 },\n md: { q: 'w=600&h=772&m=8', w: 0, h: 0 },\n lg: { q: 'h=772&m=8', w: 0, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n };\n\n private readonly defaultThumbnailImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=100&m=8', w: 100, h: 0 },\n lg: { q: 'w=100&m=8', w: 100, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n };\n\n private readonly _zoomedImageSettings: IImageSettings;\n\n public constructor(props: IMediaGalleryProps) {\n super(props);\n this._toggleModal = this._toggleModal.bind(this);\n const mediaGalleryImages = this.getImagesData();\n this.state = {\n activeIndex: 0,\n animating: false,\n isImageZoomed: false,\n modalIsOpen: false,\n isInitialLoad: true,\n shouldUseOptimizedImage: !!this.props.config.skipImageValidation,\n mediaGalleryItems: mediaGalleryImages\n };\n\n this._zoomedImageSettings =\n props.config.zoomedImageSettings ?? props.config.galleryImageSettings ?? this.defaultGalleryImageSettings;\n\n this._onImageMouseOut = this._onImageMouseOut.bind(this);\n this._inlineZoomImageOnHover = this._inlineZoomImageOnHover.bind(this);\n this._onInlineImageClick = this._onInlineImageClick.bind(this);\n this._onContainerZoomImageClick = this._onContainerZoomImageClick.bind(this);\n this._onMouseOutLensContainer = this._onMouseOutLensContainer.bind(this);\n }\n\n public isMobile(): boolean {\n const size = isMobile({ variant: VariantType.Viewport, context: this.props.context.request });\n return size === 'xs';\n }\n\n public async componentDidMount(): Promise {\n const source = this.props.config.imageSource ?? imageSource.pageContext;\n const shouldUpdateOnPartialDimensionSelection = this.props.config.shouldUpdateOnPartialDimensionSelection;\n this._setRenderType();\n if (!this.props.context.request.app?.config?.OmniChannelMedia) {\n if (source === imageSource.pageContext) {\n if (this.state.mediaGalleryItems === undefined && this.props.data.mediaLocationsForSelectedVariant.result) {\n const images = await validateProductImages(\n this.props.data.mediaLocationsForSelectedVariant.result,\n this.props.context.actionContext,\n this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings\n );\n await this._setImages(images);\n } else if (this.state.mediaGalleryItems === undefined && this.props.data.product.result) {\n const product = this.props.data.product.result;\n const images = await getValidProductImages(\n product.RecordId,\n +this.props.context.request.apiSettings.channelId,\n this.props.context.actionContext,\n this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n product.productVariant\n );\n\n await this._setImages(images);\n } else {\n await this._setImages([]);\n }\n }\n }\n\n reaction(\n () => {\n const product = this.props.data.product.result;\n if (!product) {\n return null;\n }\n\n if (!shouldUpdateOnPartialDimensionSelection || !product.productVariant?.RecordId) {\n return `${product.RecordId}`;\n }\n\n return `${product.RecordId}-${product.productVariant.RecordId}`;\n },\n async () => {\n const product = this.props.data.product.result;\n let images: IImageData[] = [];\n if (product) {\n if (this.props.context.app?.config?.OmniChannelMedia) {\n images = await getProductImages(\n product.RecordId,\n this.shouldUseCmsAltText(),\n +this.props.context.request.apiSettings.channelId,\n this.props.context.actionContext,\n product.Name,\n shouldUpdateOnPartialDimensionSelection ? product.productVariant : undefined\n );\n } else {\n images = await getValidProductImages(\n product.RecordId,\n +this.props.context.request.apiSettings.channelId,\n this.props.context.actionContext,\n this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n shouldUpdateOnPartialDimensionSelection ? product.productVariant : undefined\n );\n }\n await this._setImages(images);\n } else {\n await this._setImages([]);\n }\n },\n { fireImmediately: true }\n );\n\n if (source === imageSource.productId && this.props.data.mediaLocations.result) {\n const images = await validateProductImages(\n this.props.data.mediaLocations.result,\n this.props.context.actionContext,\n this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings\n );\n await this._setImages(images);\n }\n }\n\n public shouldComponentUpdate(nextProps: IMediaGalleryProps, nextState: IMediaGalleryState): 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 {\n const { id, config, resources } = this.props;\n\n const { className, showPaginationTooltip } = config;\n\n const isVertical: boolean = config.thumbnailsOrientation === thumbnailsOrientation.vertical;\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- || is required.\n const isFullscreenAllowed: boolean = this.isMobile() || config.allowFullScreen || false;\n const zoomViewMode: string =\n config.imageZoom === imageZoom.inline ? imageZoom.inline : config.imageZoom === imageZoom.container ? imageZoom.container : '';\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Site level config can be of any type.\n const emptyPlaceHolderImage = this.props.context.app.config?.placeholderImageName as string;\n if (this.props.data.product.result) {\n this.fallbackImage = getFallbackImageUrl(\n this.props.data.product.result.ItemId,\n this.props.context.request.apiSettings,\n this.props.context.request.app?.config?.OmniChannelMedia\n );\n }\n if (emptyPlaceHolderImage && this.fallbackImage) {\n this.fallbackImage = `${this.fallbackImage}&fallback=${emptyPlaceHolderImage}`;\n }\n\n const mediaGalleryCarouselItems = this._getMediaGalleryItems(isFullscreenAllowed, zoomViewMode);\n const mediaGalleryThumbnailCarouselItems = this._getMediaGalleryThumbnailItems();\n const viewProps: IMediaGalleryViewProps = {\n ...(this.props as IMediaGalleryProps),\n state: this.state,\n MediaGallery: {\n moduleProps: this.props,\n className: classnames(`ms-media-gallery ${isVertical ? 'vertical' : ''}`, className)\n },\n Modal: isFullscreenAllowed ? this.imageModalSlider(zoomViewMode) : null,\n callbackToggle: this.openModalDialog,\n callbackThumbnailClick: this._generateOnThumbnailClick,\n callbackThumbnailKeyDown: this._generateOnThumbnailKeyDown,\n CarouselProps: {\n tag: Carousel,\n className: 'ms-media-gallery__carousel',\n items: mediaGalleryCarouselItems.items,\n activeIndex: this.state.activeIndex,\n next: this.next,\n previous: this.previous,\n interval: false,\n directionTextPrev: resources.previousScreenshotFlipperText,\n directionTextNext: resources.nextScreenshotFlipperText,\n onIndicatorsClickHandler: this.goToIndex,\n showPaginationTooltip: showPaginationTooltip === true,\n indicatorAriaText: resources.ariaLabelForSlide,\n handleOnExited: this.onExited,\n handleOnExiting: this.onExiting,\n key: mediaGalleryCarouselItems.keys\n } as IComponentNodeProps,\n Thumbnails: {\n ThumbnailsContainerProps: { className: 'ms-media-gallery__thumbnails-container' },\n SingleSlideCarouselComponentProps: {\n tag: SingleSlideCarousel,\n className: 'ms-media-gallery__thumbnails',\n vertical: isVertical,\n flipperPrevLabel: resources.previousScreenshotFlipperText,\n flipperNextLabel: resources.nextScreenshotFlipperText,\n parentId: id,\n useTabList: true,\n key: JSON.stringify(mediaGalleryThumbnailCarouselItems.keys)\n } as IComponentNodeProps,\n items: mediaGalleryThumbnailCarouselItems.items\n }\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * Zoomed out image on previous/next click.\n */\n public updateZoomedInImage(): void {\n this.setState({ isImageZoomed: false });\n }\n\n private readonly onExiting = () => {\n this.setState({ animating: true });\n };\n\n private readonly onExited = () => {\n this.setState({ animating: false });\n };\n\n /**\n * On click next in carousel.\n */\n private readonly next = (): void => {\n removeInlineZoomStyle();\n if (this.isLastItem() === undefined) {\n return;\n }\n\n const nextIndex = this.isLastItem() ? 0 : this.state.activeIndex + 1;\n this.goToIndex(nextIndex);\n\n this.updateZoomedInImage();\n };\n\n /**\n * On click previous in carousel.\n */\n private readonly previous = (): void => {\n removeInlineZoomStyle();\n const images = this.state.mediaGalleryItems;\n const nextIndex = this.isFirstItem() ? (images ? images.length - 1 : 0) : this.state.activeIndex - 1;\n this.goToIndex(nextIndex);\n this.updateZoomedInImage();\n };\n\n private readonly goToIndex = (index: number): void => {\n const { autoplay } = this.props.config;\n const currentIndex = this.state.activeIndex;\n const mediaItems = this.state.mediaGalleryItems;\n if (autoplay && mediaItems) {\n if (mediaItems[`${index}`]?.mediaTypeValue === MediaType.Video) {\n this.player.current?.play();\n } else if (mediaItems[`${currentIndex}`].mediaTypeValue === MediaType.Video) {\n this.player.current?.pause();\n }\n }\n this.setState({ activeIndex: index });\n };\n\n private _getMediaGalleryThumbnailItems(): IMediaGalleryCarouselItems {\n const mediaGalleryItems = this.state.mediaGalleryItems;\n const thumbnailImageSettings = this.props.config.thumbnailImageSettings;\n if (thumbnailImageSettings) {\n thumbnailImageSettings.cropFocalRegion = true;\n }\n\n const hasMediaGalleryItems = ArrayExtensions.hasElements(mediaGalleryItems);\n\n if (!hasMediaGalleryItems) {\n if (this.state.lastUpdate) {\n const defaultKey = 0;\n return {\n items: [this._getEmptyThumbnailItem(thumbnailImageSettings, defaultKey, this.state.activeIndex)],\n keys: ['empty']\n };\n }\n return { items: [], keys: [] };\n }\n\n return {\n items: [\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n ...mediaGalleryItems!.map((item: IMediaData, index: number) => {\n if (item.mediaTypeValue === MediaType.Video) {\n return this.getVideoThumbNailItem(\n item,\n thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n index,\n this.state.activeIndex\n );\n } else {\n return this._getThumbnailItem(\n item,\n thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n index,\n this.state.activeIndex\n );\n }\n })\n ],\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n keys: [...mediaGalleryItems!.map(item => item.src)]\n };\n }\n\n private getImagesData = (): IImageData[] => {\n if (this.props.config.skipImageValidation || this.props.context.request.app?.config?.OmniChannelMedia) {\n const source = this.props.config.imageSource ?? imageSource.pageContext;\n let images: IImageData[] = [];\n let mediaLocations: MediaLocation[] = [];\n if (source === imageSource.pageContext && this.props.data.mediaLocationsForSelectedVariant.result) {\n mediaLocations = this.props.data.mediaLocationsForSelectedVariant.result;\n } else if (source === imageSource.productId && this.props.data.mediaLocations.result) {\n mediaLocations = this.props.data.mediaLocations.result;\n }\n images = mediaLocations.map(mediaLocation => {\n return {\n src: mediaLocation.Uri ?? '',\n altText: getAltText(\n this.props.context.actionContext.requestContext,\n this.shouldUseCmsAltText(),\n this.props.data.product.result?.Name,\n mediaLocation.AltText\n ),\n additionalProperties: mediaLocation.IsApplicableForChildEntities\n ? {\n isApplicableForChildEntities: 'true'\n }\n : undefined\n };\n });\n const curatedImages = this.props.config.images ?? [];\n\n return [...this._filterMasterImageFromVariant(images), ...curatedImages];\n }\n return [];\n };\n\n private _getMediaGalleryItems(isFullscreenAllowed: boolean, zoomViewMode: string): IMediaGalleryCarouselItems {\n const mediaGalleryItems = this.state.mediaGalleryItems;\n const galleryImageSettings = this.props.config.galleryImageSettings;\n if (galleryImageSettings) {\n galleryImageSettings.cropFocalRegion = true;\n }\n\n const zoomView = isFullscreenAllowed ? 'fullscreen' : zoomViewMode;\n\n const hasMediaGalleryItems = ArrayExtensions.hasElements(mediaGalleryItems);\n\n if (!hasMediaGalleryItems) {\n if (this.state.lastUpdate) {\n return { items: [this._renderEmptyImage(galleryImageSettings)], keys: ['empty'] };\n }\n return { items: [], keys: [] };\n }\n\n return {\n items: [\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n ...mediaGalleryItems!.map((item: IMediaData, index: number) => {\n return this._renderCarouselItemImageView(\n zoomView,\n item,\n galleryImageSettings ?? this.defaultGalleryImageSettings,\n index\n );\n })\n ],\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n keys: [...mediaGalleryItems!.map(item => item.src)]\n };\n }\n\n private async _setImages(images?: IMediaData[]): Promise {\n const curatedImage = this.props.config.images || [];\n const mediaToSet: IMediaData[] = this._filterMasterImageFromVariant(images);\n\n void Promise.all(\n mediaToSet.map(async mediaData => {\n if (mediaData.mediaTypeValue === MediaType.Video && mediaData.src) {\n try {\n const url = new URL(mediaData.src);\n const videoId = url.searchParams.get('CVID');\n if (videoId) {\n mediaData.videoData = await getVideoMetadataFromApi(videoId, this.props.context.actionContext);\n }\n } catch (error) {\n if (this.props.telemetry) {\n this.props.telemetry.debug('Error while fetching videoId');\n }\n }\n }\n return mediaData;\n })\n ).then(mediaData => {\n const mediaItems = mediaData.filter(element => {\n return (\n element.mediaTypeValue !== MediaType.Video ||\n (element.mediaTypeValue === MediaType.Video && element.videoData !== undefined)\n );\n });\n\n this.setState({\n mediaGalleryItems: [...mediaItems, ...curatedImage],\n activeIndex: 0,\n lastUpdate: Date.now(),\n shouldUseOptimizedImage: false\n });\n });\n\n this.setState({\n mediaGalleryItems: [...mediaToSet, ...curatedImage],\n activeIndex: 0,\n lastUpdate: Date.now(),\n shouldUseOptimizedImage: false\n });\n }\n\n private _setRenderType(): void {\n this.setState({\n isInitialLoad: false\n });\n }\n\n private _renderCarouselItemImageView(\n zoomView: string,\n media: IMediaData,\n imageSettings: IImageSettings,\n index: number,\n isInPopup: boolean = false\n ): React.ReactNode {\n if (media.mediaTypeValue === MediaType.Video) {\n if (isInPopup || zoomView !== 'fullscreen') {\n return <>{this._renderCarouselItemVideo(media, index, imageSettings)};\n }\n return <>{this._renderVideoThumbnail(media, index, imageSettings)};\n } else {\n if (this.isMobile()) {\n if (isInPopup) {\n return this._renderImageInContainerOnZoom(media, this._zoomedImageSettings, index);\n }\n return this._renderImageFullScreenOnZoom(media, imageSettings, index);\n }\n\n switch (zoomView) {\n case 'container': {\n return this._renderImageInContainerOnZoom(media, this._zoomedImageSettings, index);\n }\n case 'inline': {\n return this._renderImageInlineOnZoom(media, this._zoomedImageSettings, index);\n }\n case 'fullscreen': {\n return this._renderImageFullScreenOnZoom(media, imageSettings, index);\n }\n\n // No default\n }\n return <>{this._getCarouselItem(media, imageSettings, index, isInPopup)};\n }\n }\n\n private _filterMasterImageFromVariant(images?: IImageData[]): IImageData[] {\n const shouldHidePrimaryImages = this.props.config.shouldHideMasterProductImagesForVariant ?? true;\n let variantImages = images ?? [];\n const isVariantProduct =\n !ObjectExtensions.isNullOrUndefined(this.props.data.product.result?.MasterProductId) ||\n !ObjectExtensions.isNullOrUndefined(this.props.data.product.result?.productVariant);\n const itemId = this.props.data.product.result?.ItemId;\n if (shouldHidePrimaryImages && isVariantProduct && itemId) {\n variantImages = variantImages.filter(item => {\n const isApplicableForChildEntities = item.additionalProperties?.isApplicableForChildEntities;\n return !isApplicableForChildEntities;\n });\n if (!ArrayExtensions.hasElements(variantImages)) {\n variantImages = images ?? [];\n }\n }\n return variantImages;\n }\n\n private readonly _renderCarouselItemVideo = (mediaData: IMediaData, index: number, imageSettings: IImageSettings): React.ReactNode => {\n const videoData = mediaData.videoData;\n if (videoData) {\n const options: IPlayerOptions = this.props.config as IPlayerOptions;\n const playerResources = this.props.resources;\n const videoMetaData: IVideoMetadata = {};\n videoMetaData.videoId = videoData.id;\n videoMetaData.title = videoData.title;\n videoMetaData.duration = videoData.playTime;\n if (videoData.thumbnail) {\n videoMetaData.posterframeUrl = videoData.thumbnail.src;\n }\n if (videoData._links?.binaryReferences) {\n videoMetaData.videoBinaryReferences = videoData._links.binaryReferences;\n }\n const videoPlayerData: IPlayerData = { options, metaData: videoMetaData };\n const attributes = {\n id: `${this.props.id}__carousel-item__${index}`\n };\n return (\n \n \n );\n }\n return this._renderEmptyImage(imageSettings);\n };\n\n private readonly _getCarouselItem = (\n image: IImageData,\n imageSettings: IImageSettings,\n index: number,\n isInPopup: boolean = false\n ): React.ReactNode => (\n ) => {\n event.preventDefault();\n\n this.goToIndex(index);\n };\n };\n\n private _renderImageInlineOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n return (\n \n ): void {\n inlineZoomImageOnHover(event, this.props.config.dataScale ?? String(defaultDataScale));\n }\n\n private _handleMobileViewZoomedImageClick(event: React.MouseEvent) {\n const target = this.state.shouldUseOptimizedImage ? (event.target as HTMLImageElement) : event.currentTarget;\n const mobileZoomedInImageClassName = 'msc-mobile-zoomed-in';\n if (!this.state.isMobileImageZoomed) {\n const bounds = target.getBoundingClientRect();\n const dataScale = Number(this.props.config.dataScale ?? defaultDataScale);\n\n const positionX = event.clientX - bounds.left;\n const positionY = event.clientY - bounds.top;\n const scaledPositionX = positionX * dataScale;\n const scaledPositionY = positionY * dataScale;\n\n target.style.transform = `scale(${dataScale})`;\n target.classList.add(mobileZoomedInImageClassName);\n target.parentElement!.style.overflow = 'auto';\n target.parentElement!.scrollTo(scaledPositionX - positionX, scaledPositionY - positionY);\n this.setState({\n isMobileImageZoomed: true\n });\n } else {\n target.style.transform = '';\n target.classList.remove(mobileZoomedInImageClassName);\n target.parentElement!.style.overflow = '';\n this.setState({\n isMobileImageZoomed: false\n });\n }\n }\n\n private _onInlineImageClick(event: React.MouseEvent): void {\n if (window.innerWidth <= 768) {\n // $msv-breakpoint-m\n this._handleMobileViewZoomedImageClick(event);\n return;\n }\n inlineZoomInitClick(event, this.props.config.dataScale ?? String(defaultDataScale));\n this.setState({\n isImageZoomed: true\n });\n }\n\n private _onImageMouseOut(event: React.MouseEvent): void {\n inlineZoomImageOnMouseOut(event);\n this.setState({\n isImageZoomed: false\n });\n }\n\n private _onContainerZoomImageClick(event: React.MouseEvent): void {\n if (window.innerWidth <= 768) {\n // $msv-breakpoint-m\n this._handleMobileViewZoomedImageClick(event);\n return;\n }\n\n onContainerZoomInit(event);\n\n this.setState({\n isImageZoomed: true\n });\n }\n\n private _onMouseOutLensContainer(event: React.MouseEvent): void {\n onMouseOutLensContainer(event);\n\n this.setState({\n isImageZoomed: false\n });\n }\n\n private _renderImageInContainerOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n return (\n \n );\n }\n\n private _renderImageFullScreenOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n return (\n \n );\n }\n\n /**\n * Render the video thumbnail in full screen.\n * @param mediaData - Media Data.\n * @param index - Index\n * @param imageSettings - Image settings.\n * @returns - JSX.Element\n */\n private readonly _renderVideoThumbnail = (mediaData: IMediaData, index: number, imageSettings: IImageSettings): React.ReactNode => {\n const videoData = mediaData.videoData;\n let image: IImageData;\n if (videoData?.thumbnail) {\n image = videoData.thumbnail;\n } else {\n image = {\n src: 'empty'\n };\n }\n\n return (\n \n );\n };\n\n private _mapProductToImageData(product: SimpleProduct): IImageData {\n return {\n src: product.PrimaryImageUrl ?? ''\n };\n }\n\n private _renderEmptyImage(imageSettings: IImageSettings | undefined): React.ReactNode {\n return (\n \n
\n );\n }\n\n private _getEmptyThumbnailItem(\n imageSettings: IImageSettings | undefined,\n index: number,\n modifiedActiveIndex: number\n ): IMediaGalleryThumbnailItemViewProps {\n const classes = classnames(\n 'ms-media-gallery__thumbnail-item',\n modifiedActiveIndex === index ? 'ms-media-gallery__thumbnail-item-active' : ''\n );\n return {\n ThumbnailItemContainerProps: {\n tag: 'li' as NodeTag,\n className: classes,\n role: 'tab',\n tabIndex: 0,\n key: 'empty',\n 'aria-label': '',\n 'aria-selected': modifiedActiveIndex === index,\n onClick: this._generateOnThumbnailClick(index),\n onKeyDown: this._generateOnThumbnailKeyDown(index)\n },\n Picture: (\n ;\n const carousel = = props => {\n const { CarouselProps, Thumbnails, MediaGallery, Modal } = props;\n\n return (\n \n \n );\n};\n\nconst _renderThumbnails = (thumbnails: IMediaGalleryThumbnailsViewProps): JSX.Element => {\n const { ThumbnailsContainerProps, SingleSlideCarouselComponentProps, items } = thumbnails;\n\n return (\n \n {items && items.map(_renderThumbnailItem)} \n \n );\n};\n\nconst _renderThumbnailItem = (thumbnail: IMediaGalleryThumbnailItemViewProps): JSX.Element => {\n const { ThumbnailItemContainerProps, Picture } = thumbnail;\n\n return {Picture} ;\n};\n\nexport default MediaGalleryView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { PriceComponent } from '@msdyn365-commerce/components';\nimport { ICoreContext, ITelemetry } from '@msdyn365-commerce/core';\nimport { ICheckoutState, IGiftCardExtend } from '@msdyn365-commerce/global-state';\nimport { Cart, ChannelConfiguration, ChannelDeliveryOptionConfiguration } from '@msdyn365-commerce/retail-proxy';\nimport * as React from 'react';\n\nexport interface IOrderSummaryProps {\n subTotalLabel: string;\n shippingLabel: string;\n taxLabel: string;\n orderTotalLabel: string;\n loyaltyLabel?: string;\n giftcardLabel?: string;\n totalDiscountsLabel: string;\n context: ICoreContext;\n telemetry: ITelemetry;\n cart: Cart;\n channelConfiguration: ChannelConfiguration;\n id: string;\n typeName: string;\n otherChargeLabel?: string;\n freeText?: string;\n toBeCalculatedText?: string;\n checkoutState?: ICheckoutState;\n retailMultiplePickUpOptionEnabled?: boolean;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n isTaxIncludedInPrice?: boolean;\n isShowTaxBreakup?: boolean;\n customerAccountLabel?: string;\n}\n\nexport interface IOrderSummaryLines {\n subtotal: React.ReactNode;\n shipping?: React.ReactNode;\n otherCharge?: React.ReactNode;\n tax: React.ReactNode;\n orderTotal: React.ReactNode;\n totalDiscounts?: React.ReactNode;\n giftCard?: React.ReactNode;\n loyalty?: React.ReactNode;\n customerAccount?: React.ReactNode;\n}\n\ninterface IOrderSummaryLineProps {\n label: string;\n context: ICoreContext;\n telemetry: ITelemetry;\n price?: number;\n freeText?: string;\n toBeCalculatedText?: string;\n id: string;\n typeName: string;\n cssLabel: string;\n priceCurrency?: string;\n}\n\ninterface IShippingOrderLine {\n cart: Cart;\n channelConfiguration: ChannelConfiguration;\n canShip?: boolean;\n hasDeliveryMethod?: boolean;\n hasShippingMethod?: boolean;\n freightFee?: number;\n}\n\nconst OrderSummaryLine: React.FC = ({\n price,\n label,\n context,\n id,\n typeName,\n toBeCalculatedText,\n freeText,\n cssLabel,\n priceCurrency\n}) => {\n return (\n \n {label} \n {price || price === 0 ? (\n {toBeCalculatedText} \n )}\n
\n );\n};\n\nconst _buildOrderSummarySection = (\n props: IOrderSummaryProps,\n price: number | undefined,\n cssLabel: string,\n label: string = ''\n): React.ReactNode => {\n return (\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 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 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 OrderTemplateList: {\n moduleProps: this.props,\n className: classnames('ms-order-template', className)\n },\n status: 'EMPTY',\n statusMessage: ),\n OrderTemplateList: {\n moduleProps: this.props,\n className: classnames('ms-order-template', className)\n },\n status: 'SUCCESS',\n heading: \n
\n {this.state.headerStatusMessage} \n \n
= props => {\n const {\n OrderTemplateList,\n status,\n statusMessage,\n heading,\n OrderTemplates,\n orderTemplates,\n OrderTemplate,\n createOrderTemplateButton,\n templateHeaderStatusMessage\n } = props;\n\n return (\n \n {heading}\n {status !== 'SUCCESS' && statusMessage}\n \n {createOrderTemplateButton}\n {templateHeaderStatusMessage}\n \n {OrderTemplates && orderTemplates && orderTemplates.length > 0 && (\n \n {orderTemplates &&\n orderTemplates.map(orderTemplate => {\n return _renderOrderTemplate(orderTemplate, OrderTemplate);\n })}\n \n )}\n \n );\n};\n\nconst _renderOrderTemplate = (orderTemplate: ISingleOrderTemplateViewProps, OrderTemplate?: INodeProps): JSX.Element | null => {\n const { key, addToCartButton, orderTemplateImage, orderTemplateStatusMessage, removeButton, orderTemplateName } = orderTemplate;\n return (\n \n {orderTemplateName}\n {orderTemplateImage}\n {addToCartButton}\n {removeButton}\n {orderTemplateStatusMessage}\n \n );\n};\n\nexport default OrderTemplateListView;\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 default (props: { className: string; msg?: string }) => (\n <>\n
\n {props?.msg && {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 {this._renderContent()}\n \n \n \n {this.state.productCatalogs && ArrayExtensions.hasElements(this.state.productCatalogs) && (\n <>\n \n {selectCatalogTitleText}\n \n \n {this._getCatalogNodes()}\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 case CONTENT.Loading:\n return (\n \n {this._renderSearchForm()}\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 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 {productCatalog.Name}\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\n if (process.env.NODE_ENV === 'development' && process.env.ENABLE_CLOUD_SEARCH?.toLowerCase() !== 'true') {\n searchCriteriaInput.IncludeAttributes = false;\n } else {\n searchCriteriaInput.IncludeAttributes = true;\n }\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 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
\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 {this._getDimensionsError(dimensionName)} \n
\n \n )}\n
\n
) => {\n // Hide confirmation of previous addition when adding multiple items\n this.setState({\n isBusy: true,\n showAddConfirmation: false,\n errors: { ...this.state.errors, add: undefined }\n });\n\n const missingDimensions = this.state.dimensions\n .map(dimension => dimension.DimensionTypeValue.toString())\n .filter(type => !this.selectedDimensions[type]);\n\n this.setState({\n errors: { dimension: missingDimensions }\n });\n if (missingDimensions.length > 0) {\n this.setState({\n isBusy: false\n });\n return;\n }\n\n this.props\n .addToTemplateHandler({ ...this.state })\n .then(status => {\n // Validate against the existance of a ProductListId\n if (status.ProductListId) {\n this.setState({\n isBusy: false,\n showAddConfirmation: true\n });\n }\n })\n .catch(error => {\n const { addToTemplateDuplicateError, addToTemplateGenericError } = this.props.resources;\n let errorMessage;\n\n if (error.error.name === 'Microsoft_Dynamics_Commerce_Runtime_DuplicateObject') {\n errorMessage = addToTemplateDuplicateError;\n } else {\n errorMessage = addToTemplateGenericError;\n }\n\n this.setState({\n isBusy: false,\n errors: { ...this.state.errors, add: errorMessage }\n });\n this.props.context.telemetry.error('Error adding item to order template');\n });\n };\n\n private readonly _onQuantityChange = (newValue: number) => {\n this.setState({\n quantity: newValue,\n totalPrice: newValue * this.props.product.Price\n });\n };\n\n private readonly _updateDimensionValue = (\n productDimensionFull: ProductDimensionFull,\n newValueId: string | undefined\n ): ProductDimensionValue | undefined => {\n if (newValueId && productDimensionFull.DimensionValues) {\n return productDimensionFull.DimensionValues.find(dimension => dimension.RecordId === +newValueId);\n }\n\n return undefined;\n };\n\n // Rehydrate the selected variants price, available dimensions & sizes\n private readonly _onDimensionChanged = async (selection: IDropdownOnSelection): Promise => {\n const { product, dimensions, context } = this.props;\n const {\n actionContext,\n request: {\n apiSettings: { channelId }\n }\n } = context;\n\n // Remaining error notifications for missing dimensions\n const remainingDimensionsErrors = this.state.errors?.dimension?.filter(id => id !== selection.dropdownId.toString());\n\n this.setState({\n isBusy: false,\n showAddConfirmation: false,\n buttonDisabled: true,\n errors: { add: undefined, dimension: remainingDimensionsErrors }\n });\n\n // Update currently selected dimensions\n this.selectedDimensions[selection.dropdownId] = +selection.selectId;\n\n const mappedDimensions = dimensions\n ?.map(dimension => {\n return {\n DimensionTypeValue: dimension.DimensionTypeValue,\n DimensionValue:\n this._updateDimensionValue(dimension, this.selectedDimensions[dimension.DimensionTypeValue]) ||\n dimension.DimensionValue,\n ExtensionProperties: dimension.ExtensionProperties\n };\n })\n .filter(dimension => {\n return dimension && dimension.DimensionValue;\n });\n\n const variantProduct = await getSelectedVariant(\n new SelectedVariantInput(\n product.MasterProductId ? product.MasterProductId : product.RecordId,\n channelId,\n mappedDimensions,\n undefined,\n this.props.context.request\n ),\n actionContext\n );\n\n if (!variantProduct) {\n this.props.context.telemetry.error(\n `Error retrieving variant product for product ${product.MasterProductId ? product.MasterProductId : product.RecordId}`\n );\n return;\n }\n\n const dimensionInput = new GetDimensionsForSelectedVariantInput(\n variantProduct.RecordId,\n channelId,\n mappedDimensions,\n this.props.context.request\n );\n const variantDimensions = await getDimensionsForSelectedVariant(dimensionInput, actionContext);\n\n if (!variantDimensions) {\n this.props.context.telemetry.error('Error retrieving dimensions for reconfigured product variant');\n this.setState({\n buttonDisabled: false\n });\n return;\n }\n\n const availabilityInput = new ProductAvailabilitiesForSelectedVariantInput(\n product.MasterProductId ? product.MasterProductId : product.RecordId,\n channelId\n );\n\n // @TODO sync UX quantity w/ actual availability\n const newAvailableQuantity = await getProductAvailabilitiesForSelectedVariant(availabilityInput, actionContext);\n const priceInput = new PriceForSelectedVariantInput(product.RecordId, channelId);\n const productPrice = await getPriceForSelectedVariant(priceInput, actionContext);\n\n if (!productPrice) {\n this.props.context.telemetry.error('Error retrieving price for reconfigured product variant');\n this.setState({\n buttonDisabled: false\n });\n return;\n }\n\n this.setState({\n buttonDisabled: false,\n productAvailableQuantity: (newAvailableQuantity && newAvailableQuantity[0]) || undefined,\n unitPrice: +(productPrice.BasePrice || product.Price),\n dimensions: variantDimensions.sort((a, b) => a.DimensionTypeValue - b.DimensionTypeValue),\n product: variantProduct\n });\n };\n\n private readonly _getDropdownName = (dimensionType: number, resources: IAddLineToTemplateResources): string => {\n switch (dimensionType) {\n case 1: // Color\n return resources.productDimensionTypeColor;\n case 2: // Configuration\n return resources.productDimensionTypeConfiguration;\n case 3: // Size\n return resources.productDimensionTypeSize;\n case 4: // Style\n return resources.productDimensionTypeStyle;\n default:\n return '';\n }\n };\n\n private _formatPrice(price: number): string {\n const {\n context: {\n cultureFormatter: {\n formatCurrency,\n\n // @ts-expect-error\n currencyCode\n }\n }\n } = this.props;\n\n return formatCurrency(price.toFixed(2), currencyCode);\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 { ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { getFallbackImageUrl, generateImageUrl } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport React, { useState } from 'react';\n\nimport { IAddLineToTemplateProps } from '.';\n\nexport interface IProductListProps extends IAddLineToTemplateProps {\n products: ProductSearchResult[];\n imageSettings: IImageSettings;\n searchForm: React.ReactNode;\n clickHandler(product: ProductSearchResult): Promise;\n highlightSearchTerm(name: string): React.ReactNode;\n renderResultCountText(): string;\n}\n\nexport const ProductList = (props: IProductListProps) => {\n const {\n products,\n context: {\n actionContext: {\n requestContext: { apiSettings }\n },\n request: { gridSettings },\n cultureFormatter: {\n formatCurrency,\n\n // @ts-expect-error\n currencyCode\n }\n },\n clickHandler,\n highlightSearchTerm,\n renderResultCountText,\n resources: { selectProductButtonText },\n imageSettings\n } = props;\n\n return (\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}\n\nconst ProductSelectButton = (props: IProductSelectButton) => {\n const [isBusy, setBusy] = useState(false);\n const { product, buttonText, clickHandler } = props;\n const getClickHandler = React.useCallback(async () => {\n setBusy(!isBusy);\n await clickHandler(product);\n setBusy(!isBusy);\n }, [clickHandler, isBusy, product]);\n\n return (\n \n {buttonText}\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 { Button, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IOrderTemplateLineViewModel } from '../order-template';\nimport { IOrderTemplateData } from '../order-template.data';\nimport { IOrderTemplateProps } from '../order-template.props.autogenerated';\nimport { AddLineToTemplate } from '.';\n\ninterface IOrderTemplateBulkActionsProps extends IOrderTemplateProps {\n orderTemplateId: string;\n selectedLines: IOrderTemplateLineViewModel[];\n isMinifiedView: boolean;\n isMultipleCatalogFeatureEnabledInHq: boolean;\n telemetryContent?: ITelemetryContent;\n onAddSelectionToBag(): void;\n onRemoveSelection(): void;\n}\n\ninterface IOrderTemplateBulkActionsState {\n isAddDisabled: boolean;\n isRemoveDisabled: boolean;\n}\n\n/**\n * Bulk Order Template line actions.\n */\nexport class OrderTemplateBulkActions extends React.PureComponent {\n public state: IOrderTemplateBulkActionsState = {\n isAddDisabled: true,\n isRemoveDisabled: true\n };\n\n public static getDerivedStateFromProps(\n props: IOrderTemplateBulkActionsProps,\n state: IOrderTemplateBulkActionsState\n ): IOrderTemplateBulkActionsState {\n const selectedLines = props.selectedLines.length;\n let nextState = { ...state };\n nextState = {\n isAddDisabled: selectedLines === 0,\n isRemoveDisabled: selectedLines === 0\n };\n return nextState;\n }\n\n public render(): JSX.Element {\n const {\n addLineModalLinkText,\n searchButtonAriaLabel,\n searchInputAriaLabel,\n searchModalPlaceholderText,\n selectCatalogTitleText,\n selectProductButtonText,\n addItemToTemplateText,\n addLineProductUnitPricePrefix,\n backButtonText,\n decrementButtonAriaLabel,\n incrementButtonAriaLabel,\n quantitySelectLabel,\n addLineProductUnitOfMeasurePrefix,\n notFoundSearchErrorNotice,\n notFoundSearchErrorRedediation,\n searchErrorMessage,\n productDimensionTypeColor,\n productDimensionTypeConfiguration,\n productDimensionTypeSize,\n productDimensionTypeStyle,\n addSelectedToBagButtonText,\n removeSelectedToBagButtonText,\n searchResultsCountVerbage,\n searchResultsCountSubject,\n addToTemplateConfirmation,\n totalPriceLabel,\n progressNotificationText,\n addToTemplateDuplicateError,\n addToTemplateGenericError,\n dimensionMissingError\n } = this.props.resources;\n\n const addLineProps = {\n context: this.props.context,\n telemetryContent: this.props.telemetryContent,\n resources: {\n addLineModalLinkText,\n searchButtonAriaLabel,\n searchInputAriaLabel,\n searchModalPlaceholderText,\n selectCatalogTitleText,\n selectProductButtonText,\n addItemToTemplateText,\n addLineProductUnitPricePrefix,\n backButtonText,\n decrementButtonAriaLabel,\n incrementButtonAriaLabel,\n quantitySelectLabel,\n addLineProductUnitOfMeasurePrefix,\n notFoundSearchErrorNotice,\n notFoundSearchErrorRedediation,\n searchErrorMessage,\n productDimensionTypeColor,\n productDimensionTypeConfiguration,\n productDimensionTypeSize,\n productDimensionTypeStyle,\n searchResultsCountVerbage,\n searchResultsCountSubject,\n addToTemplateConfirmation,\n totalPriceLabel,\n progressNotificationText,\n addToTemplateDuplicateError,\n addToTemplateGenericError,\n dimensionMissingError\n },\n imageSettings: this.props.config.imageSettings,\n orderTemplateId: this.props.orderTemplateId,\n isMultipleCatalogFeatureEnabledInHq: this.props.isMultipleCatalogFeatureEnabledInHq,\n catalogs: this.props.data.catalogs?.result\n };\n\n return (\n <>\n \n \n ) => {\n this.setState({\n isAddDisabled: true\n });\n\n this.props.onAddSelectionToBag();\n\n this.setState({\n isAddDisabled: false\n });\n };\n\n private readonly removeHandler = (event: React.MouseEvent) => {\n this.setState({\n isRemoveDisabled: true\n });\n\n this.props.onRemoveSelection();\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 AddOrderTemplateToCartComponent,\n ILinesAddedToCartDialogResources,\n IOrderTemplateNameDialogResources,\n RenameOrderTemplateComponent,\n OrderTemplateNameDialog\n} from '@msdyn365-commerce/components';\nimport { IComponentProps, ICoreContext } from '@msdyn365-commerce/core';\nimport { ProductList } from '@msdyn365-commerce/retail-proxy';\nimport { OrderTemplate, Random } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, ITelemetryContent, Popover } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\nimport { useState } from 'react';\n\nexport interface IOrderTemplateActionsData {\n orderTemplate: OrderTemplate;\n}\n\nexport interface IOrderTemplateActionsProps extends IComponentProps {\n context: ICoreContext;\n telemetryContent?: ITelemetryContent;\n handlers: {\n onRemoveTemplate(orderTemplateId: string): void;\n onRenameTemplate(orderTemplate: ProductList): Promise;\n };\n renameOrderTemplateDialogStrings: IOrderTemplateNameDialogResources;\n isMultipleCatalogFeatureEnabledInHq?: boolean;\n resources: {\n addTemplateToBagButtonText: string;\n renameTemplateButtonText: string;\n deleteTemplateButtonText: string;\n closeWindowButtonText: string;\n addToCartFailureMessage: string;\n addToCartSuccessMessage: string;\n addToCartProcessMessage: string;\n orderTemplateErrorMessage: string;\n linesAddedToCartDialogResources: ILinesAddedToCartDialogResources;\n };\n}\n\nexport interface IOrderTemplateActionsViewProps {\n addTemplateToBag: React.ReactNode;\n renameTemplate?: React.ReactNode;\n removeTemplate?: React.ReactNode;\n isMultipleCatalogsFeatureEnabled?: boolean;\n actionsSplitButton?: React.ReactNode;\n}\n\n/**\n * Remove Order Action.\n * @param props -Order template action props.\n * @returns Remove order template.\n */\nconst removeOrderActionHandler = (props: IOrderTemplateActionsProps) => () => {\n _removeOrderTemplate(props);\n};\n\nexport const OrderTemplateActionsView = (props: IOrderTemplateActionsProps): IOrderTemplateActionsViewProps => {\n const { resources, isMultipleCatalogFeatureEnabledInHq } = props;\n const { deleteTemplateButtonText } = resources;\n\n return {\n addTemplateToBag: _getOrderTemplateAddToCartDialog(props),\n renameTemplate: !isMultipleCatalogFeatureEnabledInHq && _getOrderTemplateRenameControl(props),\n removeTemplate: !isMultipleCatalogFeatureEnabledInHq && (\n \n {deleteTemplateButtonText}\n \n ),\n actionsSplitButton: isMultipleCatalogFeatureEnabledInHq && = (props: IOrderTemplateActionsProps) => {\n const [isStatementRequestAdminDropdownOpen, setIsStatementRequestAdminDropdownOpen] = useState(false);\n const [renameOrderTemplateDialogOpen, setOrderTemplateNameDialogOpen] = React.useState(false);\n\n const onOrderTemplateNameCancel = () => {\n context.telemetry.debug('Rename of template was canceled.');\n buttonEventReference?.focus();\n };\n\n const onRenameButtonClick = (event: React.MouseEvent) => {\n buttonEventReference = event.target as HTMLButtonElement;\n setOrderTemplateNameDialogOpen(true);\n event.preventDefault();\n };\n const onToggleDropdown1 = () => {\n setIsStatementRequestAdminDropdownOpen(!isStatementRequestAdminDropdownOpen);\n };\n const {\n data: { orderTemplate },\n resources,\n renameOrderTemplateDialogStrings,\n context\n } = props;\n\n const className = 'ms-order-template-action-bar';\n\n const popoverReference = React.createRef();\n const renderModalPopup = (\n \n {renderModalPopup}\n
\n {'Options'} \n \n \n \n {resources.renameTemplateButtonText}\n \n\n \n {'Delete'}\n \n \n ) => void;\n getRemoveItem(): (event: React.MouseEvent) => void;\n}\n\nconst OrderTemplateLineActions = (props: IOrderTemplateLineProps): IEventHandlerFactory => {\n const { orderTemplateLine, productListLine, quantity, handlers } = props;\n const { LineId, CatalogId } = productListLine;\n const { onAddToBag, onRemoveItem } = handlers;\n\n return {\n getAddToBag: () => (event: React.MouseEvent) => {\n LineId &&\n orderTemplateLine.fullProduct &&\n onAddToBag(orderTemplateLine.fullProduct.ProductDetails, quantity, LineId, CatalogId);\n },\n getRemoveItem: () => (event: React.MouseEvent) => LineId && onRemoveItem(props.orderTemplateLine)\n };\n};\n\ninterface IPopupProps extends IOrderTemplateLineProps {\n addButtonClassName: string;\n removeButtonClassName: string;\n}\n\nconst PopUp = (props: IPopupProps): JSX.Element | null => {\n const { addToBagButtonText, removeFromOrderTemplateLinesText, moreButtonText, viewProductDetailsText } = props.resources;\n const [showMobile, setShowMobile] = useState(false);\n const componentClassName = 'ms-table';\n\n const getViewHandler = () => (event: React.MouseEvent) => {\n props.toggleDetailsDisplayed(props);\n };\n\n const toggle = React.useCallback(() => {\n setShowMobile(!showMobile);\n }, [showMobile]);\n\n return (\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
) => void\n): React.ReactNode => (\n \n {isMobile ? buttonText : ''}\n \n);\n\nconst getDesktopActionButton = (\n className: string,\n buttonText: string,\n clickHandler: (event: React.MouseEvent) => void\n): React.ReactNode => (\n \n {buttonText}\n \n);\n/**\n * On Select line function.\n * @param orderTemplateLine -Order template line.\n * @param input -Order template line props.\n * @returns Set on select order template.\n */\nconst onSelectLineHandler = (orderTemplateLine: IOrderTemplateLineViewModel, input: IOrderTemplateLineProps) => (\n event: React.ChangeEvent\n) => {\n orderTemplateLine.isChecked = !orderTemplateLine.isChecked;\n\n input.handlers.onSelect(orderTemplateLine, event.target.checked);\n};\n\nexport const OrderTemplateLineView = (input: IOrderTemplateLineProps): IOrderTemplateLineViewProps | null => {\n const {\n orderTemplateLine,\n productListLine,\n price,\n context,\n imageSettings,\n quantity,\n resources,\n isMobile,\n isMultipleCatalogFeatureEnabledInHq\n } = input;\n const product = orderTemplateLine.fullProduct;\n const { LineId, UnitOfMeasure } = productListLine;\n const { removeFromOrderTemplateLinesText, addToBagButtonText, selectOneRowText } = resources;\n if (!product) {\n return null;\n }\n\n const { ItemId, PrimaryImageUrl } = product.ProductDetails;\n const fallbackImage = getFallbackImageUrl(\n ItemId,\n context.actionContext.requestContext.apiSettings,\n context.request.app?.config?.OmniChannelMedia\n );\n const addButtonClassName = input.isMobile ? 'ms-table__row-links-add' : 'ms-order-template-table-line__product-add-button';\n const removeButtonClassName = input.isMobile ? 'ms-table__row-links-delete' : 'ms-order-template-table-line__product-remove-button';\n\n return {\n isMobile,\n isMultipleCatalogFeatureEnabledInHq: isMultipleCatalogFeatureEnabledInHq,\n selectLine: (\n \n \n ),\n key: LineId!,\n productLineCatalog: isMultipleCatalogFeatureEnabledInHq && renderProductCatalog(input),\n productImage: _renderProductImage(\n 'ms-order-template-table-line__product-image',\n context,\n product.ProductDetails.Name!,\n PrimaryImageUrl,\n fallbackImage,\n imageSettings\n ),\n productInfo: renderProductInfo(input),\n productPrice: price && _renderPrice(input),\n productNumber: product && (\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 {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 {name}\n \n ) : (\n {name}
\n );\n\n const dimensionsLine: string = dimensions.join(', ');\n\n return (\n \n
{productName}
\n
{dimensionsLine}
\n
= ({ 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 * 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 \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 * 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\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 OrderTemplateLines: {\n moduleProps: this.props,\n className: classnames(`${this.className}`, className)\n },\n status: 'FAILED',\n statusMessage: ),\n OrderTemplateLines: {\n moduleProps: this.props,\n className: classnames(`${this.className}`, className)\n },\n status: 'EMPTY',\n statusMessage: ),\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
line.isChecked)}\n onAddSelectionToBag={this._onAddSelectionToBag}\n onRemoveSelection={this._onRemoveSelection}\n isMinifiedView={this.isMobile}\n isMultipleCatalogFeatureEnabledInHq={this._isChannelMultipleCatalogsFeatureEnabled()}\n telemetryContent={this.telemetryContent}\n />\n );\n }\n\n private _generateLinesAddedToCartDialogResources(): ILinesAddedToCartDialogResources {\n return {\n viewCartButtonText: this.props.resources.viewCartButtonText,\n orderTemplateCloseButtonText: this.props.resources.orderTemplateCloseButtonText,\n linesAddedToCartHeaderItemsOneText: this.props.resources.linesAddedToCartHeaderItemsOneText,\n linesAddedToCartHeaderLinesOneText: this.props.resources.linesAddedToCartHeaderLinesOneText,\n linesAddedToCartHeaderLinesFormatText: this.props.resources.linesAddedToCartHeaderLinesFormatText,\n linesAddedToCartHeaderMessageText: this.props.resources.linesAddedToCartHeaderMessageText\n };\n }\n\n private _generateItemAddedToCartDialogResources(): IItemAddedToCartDialogResources {\n return {\n viewCartButtonText: this.props.resources.viewCartButtonText,\n orderTemplateCloseButtonText: this.props.resources.orderTemplateCloseButtonText,\n itemAddedToCartHeaderItemOneText: this.props.resources.itemAddedToCartHeaderItemOneText,\n itemAddedToCartHeaderItemFormatText: this.props.resources.itemAddedToCartHeaderItemFormatText,\n itemAddedToCartHeaderMessageText: this.props.resources.itemAddedToCartHeaderMessageText,\n freePriceText: this.props.resources.freePriceText,\n originalPriceText: this.props.resources.originalPriceText,\n currentPriceText: this.props.resources.currentPriceText\n };\n }\n\n private readonly _isChannelMultipleCatalogsFeatureEnabled = (): boolean => {\n let isMultipleCatalogFeatureEnabledInHq = false;\n if (this.props.data.featureState) {\n isMultipleCatalogFeatureEnabledInHq =\n this.props.data.featureState.result?.find(\n feature => feature.Name === 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature'\n )?.IsEnabled || false;\n }\n return isMultipleCatalogFeatureEnabledInHq;\n };\n\n private readonly _onRemoveSelection = (): void => {\n const { context, resources } = this.props;\n const { telemetry } = context;\n const { removeSelectedFailureMessage, removeSelectedSuccessMessage } = resources;\n const lines = this.state.productSelection;\n const productListLines = lines && lines.length && lines.filter(line => line.isChecked).map(line => line.productListLine);\n\n if (productListLines && productListLines.length > 0) {\n const productListId = productListLines[0].ProductListId;\n\n const maxWaitTimeInMilliSeconds: number = 1000;\n removeProductListLinesAsync({ callerContext: context.actionContext }, productListId!, productListLines)\n .then(async () => {\n this.setState({\n userMessage: removeSelectedSuccessMessage,\n statusCssString: 'success',\n messageGlyph: 'fas fa-check',\n isOpen: true\n });\n // eslint-disable-next-line no-promise-executor-return -- fix\n await new Promise(resolve => setTimeout(resolve, maxWaitTimeInMilliSeconds));\n window.location.reload();\n })\n .catch(error => {\n telemetry.warning('[order-template-lines] Unable remove items from the order template lines');\n telemetry.error(error);\n this.setState({\n userMessage: removeSelectedFailureMessage,\n statusCssString: 'success',\n messageGlyph: 'fas fa-check',\n isOpen: true\n });\n });\n }\n };\n\n private readonly _getOrderTemplatePageUrl = (): string => {\n let url = getUrlSync('ordertemplate', this.props.context.actionContext) || '';\n url = url.includes('?') ? url.substr(0, url.indexOf('?')) : url;\n if (this.props.data.orderTemplate?.result?.productList.Id) {\n return `${url}?id=${this.props.data.orderTemplate.result.productList.Id}`;\n }\n return '';\n };\n\n private readonly _onAddSelectionToBag = async (): Promise => {\n const lines = this.state.productSelection;\n const selectedLines = lines.filter(line => line.isChecked);\n if (selectedLines.length > 0) {\n for (const productLine of selectedLines) {\n const itemKey = productLine.fullProduct?.ProductDetails.ItemId ?? '';\n const product = productLine.fullProduct?.ProductDetails ?? {\n RecordId: 0,\n ProductTypeValue: 0,\n BasePrice: 0,\n Price: 0,\n AdjustedPrice: 0\n };\n const quantity = productLine.productListLine.Quantity ?? 0;\n if (this._isChannelMultipleCatalogsFeatureEnabled()) {\n const catalogId = productLine.productListLine.CatalogId;\n await this._addItemToBag(product, quantity, itemKey, catalogId);\n } else {\n await this._addItemToBag(product, quantity, itemKey);\n }\n }\n }\n return Promise.resolve(void 0);\n };\n\n private _renderOrderTemplateActions(\n orderTemplate: OrderTemplate,\n isMultipleCatalogFeatureEnabledInHq: boolean\n ): IOrderTemplateActionsViewProps {\n const { id, typeName, context, resources } = this.props;\n const {\n addTemplateToBagButtonText,\n renameTemplateButtonText,\n deleteTemplateButtonText,\n closeWindowButtonText,\n addToCartFailureMessage,\n addToCartSuccessMessage,\n addToCartProcessMessage,\n orderTemplateErrorMessage\n } = resources;\n\n const orderTemplateActions: IOrderTemplateActionsProps = {\n data: { orderTemplate },\n id,\n typeName,\n context,\n telemetryContent: this.telemetryContent,\n handlers: {\n onRenameTemplate: this._renameTemplate,\n onRemoveTemplate: this._removeTemplate\n },\n isMultipleCatalogFeatureEnabledInHq,\n renameOrderTemplateDialogStrings: this._generateOrderTemplateNameDialogResources(resources),\n resources: {\n addTemplateToBagButtonText,\n renameTemplateButtonText,\n deleteTemplateButtonText,\n addToCartFailureMessage,\n addToCartSuccessMessage,\n addToCartProcessMessage,\n closeWindowButtonText,\n orderTemplateErrorMessage,\n linesAddedToCartDialogResources: this._generateLinesAddedToCartDialogResources()\n }\n };\n\n return OrderTemplateActionsView(orderTemplateActions);\n }\n\n private _generateOrderTemplateNameDialogResources(resources: IOrderTemplateResources): IOrderTemplateNameDialogResources {\n return {\n orderTemplateHeaderLabel: resources.renameOrderTemplateTitleText,\n orderTemplateTitleLabel: resources.orderTemplateTitle,\n orderTemplateNameAriaLabel: resources.orderTemplateTitle,\n orderTemplateDescription: '',\n defaultOrderTemplateName: resources.defaultOrderTemplateName,\n orderTemplateButtonLabel: resources.renameOrderTemplateButtonText,\n orderTemplateCancelButtonLabel: resources.cancelBtnLabel\n };\n }\n\n private readonly _getCurrentUrl = (reqContext: IRequestContext): URL => {\n if (MsDyn365.isBrowser) {\n return new URL(window.location.href);\n }\n return new URL(reqContext.url.requestUrl.href);\n };\n\n /**\n * On close handler.\n */\n private readonly onCloseHandler = () => {\n this.setState({\n itemKey: this.state.itemKey,\n userMessage: this.state.userMessage,\n statusCssString: this.state.statusCssString,\n messageGlyph: this.state.messageGlyph,\n isOpen: this.state.isOpen,\n isItemAddedToOrderTemplateOpen: false\n });\n };\n\n private readonly _renderItemAddedToCartDialog = (): React.ReactNode | null => {\n if (!this.state.itemAddedToCartDialogData) {\n return null;\n }\n const isMultipleCatalogFeatureEnabledInHq =\n this.props.data.featureState?.result?.find(feature => feature.Name === 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature')\n ?.IsEnabled || false;\n\n return (\n => {\n const { context, data, resources, telemetry } = this.props;\n const { cart } = data;\n const { maxQuantityLimitText, addedToCartFailureMessage } = resources;\n\n if (context) {\n if (cart.result) {\n const addProductToCartInput = {\n product,\n count: quantity,\n catalogId\n };\n\n await cart.result\n .addProductToCart(addProductToCartInput)\n .then((result: ICartActionResult) => {\n if (result.status === 'SUCCESS') {\n return getPriceForSelectedVariant(\n new PriceForSelectedVariantInput(\n product.RecordId,\n this.props.context.actionContext.requestContext.apiSettings.channelId,\n product\n ),\n this.props.context.actionContext\n ).then(priceResult => {\n if (!priceResult) {\n return AsyncResult.reject('Failed to retrieve product price');\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- read config file.\n const isMiniCart = context.app.config.addToCartBehavior === 'showMiniCart';\n this.setState({\n itemKey,\n userMessage: '',\n statusCssString: 'success',\n messageGlyph: 'fas fa-check',\n isOpen: false,\n isItemAddedToOrderTemplateOpen: !isMiniCart,\n itemAddedToCartDialogData: {\n product,\n productPrice: priceResult,\n quantity\n },\n isDetailsDisplayed: false\n });\n return AsyncResult.resolve();\n });\n } else {\n switch (result.substatus) {\n case 'MAXQUANTITY':\n if (context.app.config.maxQuantityForCartLineItem) {\n const cartLineQuantity: number | undefined =\n cart.result?.cart.CartLines &&\n cart.result?.cart.CartLines.find(result => result.ProductId === product.RecordId)?.Quantity;\n const defaultMessage = `You can only add ${context.app.config.maxQuantityForCartLineItem} of this item to your shopping bag`;\n this.setState({\n itemKey,\n userMessage:\n cartLineQuantity !== undefined\n ? maxQuantityLimitText\n .replace('{curQuantity}', cartLineQuantity.toString())\n .replace(\n '{maxQuantity}',\n context.app.config.maxQuantityForCartLineItem.toString()\n ) || defaultMessage\n : defaultMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n });\n return AsyncResult.resolve();\n } else {\n const defaultMessage = `Max quantity for cart line item is undefined. Please define in configuration settings.`;\n this.setState({\n itemKey,\n userMessage: defaultMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n });\n return AsyncResult.resolve();\n }\n case 'INVOICEINCART': {\n this.setState({\n itemKey,\n userMessage: result.errorDetails?.LocalizedMessage || addedToCartFailureMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n });\n return AsyncResult.resolve();\n }\n default:\n telemetry.debug('[order-template-lines] Unable to Update Cart Line from the order template lines');\n this.setState({\n itemKey,\n userMessage: addedToCartFailureMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n });\n return AsyncResult.resolve();\n }\n }\n })\n .catch((error: Error) => {\n telemetry.warning(error.message);\n telemetry.debug('[order-template-lines] Error trying to Update Cart Line from the order template lines');\n if (StringExtensions.isNullOrWhitespace(error.message)) {\n this.setState({\n itemKey,\n userMessage: error.message,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n });\n } else {\n this.setState({\n itemKey,\n userMessage: addedToCartFailureMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n });\n }\n });\n }\n }\n };\n\n private readonly _removeItemFromOrderTemplateLines = async (line: IOrderTemplateLineViewModel) => {\n const { context, data, telemetry } = this.props;\n const { orderTemplate } = data;\n\n if (context && context.actionContext) {\n const maxWaitTimeInMilliSeconds: number = 1000;\n const userToken = context.request.user.isAuthenticated && context.request.user.token;\n if (userToken && orderTemplate?.result && line) {\n const featureStates = await getFeatureState(createGetFeatureStateInput(context.actionContext), context.actionContext);\n let isMultipleCatalogFeatureEnabledInHq = false;\n if (ArrayExtensions.hasElements(featureStates)) {\n isMultipleCatalogFeatureEnabledInHq =\n featureStates.find(\n (featureState: FeatureState) => featureState.Name === 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature'\n )?.IsEnabled || false;\n }\n const catalogId = getCatalogId(context.actionContext.requestContext);\n if (isMultipleCatalogFeatureEnabledInHq) {\n line.productListLine.CatalogId = catalogId;\n }\n removeProductListLinesAsync({ callerContext: context.actionContext }, line.productListLine.ProductListId!, [\n line.productListLine\n ])\n .then(async () => {\n // eslint-disable-next-line no-promise-executor-return -- fix\n await new Promise(resolve => setTimeout(resolve, maxWaitTimeInMilliSeconds));\n window.location.reload();\n })\n .catch(error => {\n telemetry.warning('[order-template-lines] Unable remove items from the order template lines');\n telemetry.error(error);\n });\n } else {\n telemetry.warning(\n '[order-template-lines] Unable remove items from the order template lines user token or lineItemID was not found'\n );\n }\n }\n };\n\n private readonly _renameTemplate = async (_template: ProductList): Promise => {\n window.location.reload();\n return Promise.resolve();\n };\n\n private readonly _removeTemplate = () => {\n const { context, data, telemetry, resources } = this.props;\n const { orderTemplate } = data;\n\n if (context && context.actionContext) {\n const userToken = context.request.user.isAuthenticated && context.request.user.token;\n if (userToken && orderTemplate && orderTemplate.result) {\n deleteAsync({ callerContext: context.actionContext }, orderTemplate.result.productList)\n .then()\n .catch((error: string) => {\n telemetry.warning('[order-template] Unable to delete order template.');\n telemetry.error(error);\n this.setState({\n itemKey: orderTemplate.result?.productList.Id || '',\n userMessage: resources.deleteOrderTemplateFailedText,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n });\n });\n const newLink = getUrlSync('ordertemplatelist', this.props.context.actionContext);\n if (newLink) {\n window.location.assign(newLink);\n }\n } else {\n telemetry.warning('[order-template] Failed to delete order template. Order template was not found');\n }\n } else {\n telemetry.warning('[order-template] Failed to delete order template.');\n }\n };\n\n private _updateViewport(): void {\n this._viewport = this._getViewport();\n }\n\n private readonly _getViewport = (): GridSize => {\n const { context } = this.props;\n\n // Always render in mobile viewport on a mobile device\n if (context.request && context.request.device && context.request.device.Type === 'Mobile') {\n return 'xs';\n }\n\n if (MsDyn365.isBrowser && window.innerWidth) {\n const gridSettings = context.request.gridSettings;\n if (gridSettings) {\n if (gridSettings.xs && window.innerWidth <= gridSettings.xs.w) {\n return 'xs';\n } else if (gridSettings.sm && window.innerWidth <= gridSettings.sm.w) {\n return 'sm';\n } else if (gridSettings.md && window.innerWidth <= gridSettings.md.w) {\n return 'md';\n } else if (gridSettings.lg && window.innerWidth <= gridSettings.lg.w) {\n return 'lg';\n }\n return 'xl';\n }\n }\n\n return 'xs';\n };\n\n /**\n * Renders a Pagination previous text.\n * @param paginationPreviousText - Pagination previous text from resources.\n * @returns Previous text and flipper icon.\n */\n private readonly _renderPrev = (paginationPreviousText: string) => {\n return (\n \n {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\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 {cancelBtnLabel} \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","_renderShippingMethod","cartLine","shipItText","pickupInStoretext","changeStoreText","orgUnitName","bopisSelected","toggleBOPIS","React","className","type","name","onChange","value","checked","key","onClick","shipitText","pickUpInStoreText","deliveryOption","_getDeliveryOption","pickupStore","_deliveryOptions$Deli","delivery","Description","ContainerProps","_assembleNode","productSpecificationData","index","foundProductAvailability","foundProductDeliveryOptions","_product$Behavior","_foundProductAvailabi","_product$Dimensions","_props$cartState","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","_getCartItemAvailableQuantity","maxQuantity","_getCartItemMaxQuantity","maxQuantityByConfig","isQuantityLimitsFeatureEnabled","maxByQuantityLimitsFeature","maxByQuantityLimitsFeatureResult","maxCartlineQuantity","Behavior","MaximumQuantity","shouldSkipStockCheck","ItemTypeValue","ReleasedProductType","Service","IsInvoiceLine","errorMessage","ObjectExtensions","isNullOrUndefined","undefined","_getErrorMessage","currentQuantity","lineId","_props$productAvailab","finalErrorMessages","productAvailabilites","ArrayExtensions","hasElements","shouldIgnoreWarehouse","ProductId","InventLocationId","WarehouseId","includeErrors","push","outOfStockText","outOfRangeOneText","outOfRangeFormatText","replace","toString","checkForErrors","cartlinesErrors","ValidationResultsPairs","errorsFoundByLineId","filter","i","ValidationFailures","forEach","validation","ErrorContext","join","Quantity","onRemoveClickHandler","onRemoveClickFunction","payload","getPayloadObject","TelemetryEvent","RemoveFromCart","telemetryContent","attributes","getTelemetryAttributes","inventoryLbl","StockLevelLabel","inventoryCode","StockLevelCode","toLowerCase","isCustomPriceSelected","Dimensions","dimension","DimensionTypeValue","DimensionValue","Value","productUrl","getProductUrlSync","actionContext","MsDyn365","isBrowser","_cartline$CatalogId","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","assign","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","_productsWithAttribut","_productsWithAttribut2","foundProductDeliveryOption","getProductByProductIdAndWarehouse","getProductByProductId","_productAvailability$2","_productAvailability$","productDeliveryOptions","simpleProduct","_p$productDetails","RecordId","CartLineGroupItems","_assembleGroupCartlines","telemetry","getGroupByStorePickup","items","groupBy","item","groupDelivery","cartLinesGroup","entries","_ref","deliveryType","groupByDeliveryType","keys","cartLines","carLineViewProps","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","_cartActionResult$err","lineUpdateFailure","validationResults","LocalizedMessage","errorDetails","fulfillmentStoreIdUpdated","getActiveCartProductsAction","ActiveCartProductsInput","getTelemetryObject","telemetryPageName","friendlyName","payLoad","bind","isCartValid","getOrderQuantityLimitsFeatureFlag","_this$props$data$cart","showAvailablePromotions","CartLines","reaction","_this$props$data$cart2","componentWillUnmount","shouldComponentUpdate","nextProps","nextState","render","_this$props$context$r","_cart$cart$CartLines","_this$props$data$prod","_this$props$data$feat","signInUrl","guestCheckoutUrl","getUrlSync","backToShoppingUrl","checkoutURL","getCheckoutURL","isCartEmpty","_getCartLines","emailDeliveryModeCode","channel","EmailDeliveryModeCode","validInventoryAcrossCartLines","validateCartLinesInventory","isValid","some","RetailMultiplePickupFeatureState","featureState","multiplePickUpEnabled","hasInvoiceLine","IsEnabled","getCartLinesGroup","contentAction","etext","TelemetryConstant","Checkout","checkoutBySignInAttributes","GuestCheckout","checkoutByGuestAttributes","BackToShopping","backtoShoppingAttributes","cartLineGroup","_updateCartLineErrorForInvalidInventory","viewProps","_objectSpread","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","_this$props$data$cart3","_this$props$data$feat2","_this$props$data$cust","_cart$cart","RetailB2BEcommerceFeatureState","IsB2b","showPromotionPopup","promotions","promotionLinkText","promotionPopupHeading","onCloseButtonClick","onSeeAllClick","titleId","promotionMessageWrapper","promotionMessage","promotionStringHeading","promotionSeeAllLink","tabIndex","role","promotionDialog","Modal","isOpen","toggle","ModalHeader","ModalBody","_promotion","_promotion$Promotion","Promotion","OfferName","ModalFooter","cartPromotions","promotionCloseButtonAriaLabel","cartLineInventoryValidationResult","productIdWithErrors","productIdWithError","element","_element$data","outOfStockErrorMessage","allErrors","_cartline$data","_cartline$data$produc","fullError","line","Wrapper","tag","Alert","color","assertive","outOfStockErrorMessageHeader","header","errors","InvoiceSummary","orderTotalLabel","totalAmountLabel","invoiceLabel","_this$props","_featureState$result","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","_this$props$data$cata","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","_this$props$context","defaultOrderQuantityLimitsFeatureConfig","platform","enableDefaultOrderQuantityLimits","_featureStatuses$find","featureStatuses","customerInfo","_this$props$data$chan","_this$props$data$cata2","_this$props$data$chan2","__decorate","observer","_renderPromotions","Node","_renderCartlines","mulitplePickUp","emptyCartText","_renderBOPISBlock","_renderGroupBOPISBlock","onToggleBopisHandler","onChangeStoreHandler","_cartLine$data","shipToAddressDisplayText","pickUpAtStoreWithLocationText","PickupInStore","puckUpinStoreAttribute","_renderErrorBlock","errorData","_renderOrderSummarylines","orderSummaryLines","netTotal","totalDiscounts","subtotal","shipping","otherCharge","tax","_renderInvoiceSummarylines","invoiceSummaryLines","invoices","giftCard","loyalty","_renderCartLinesGroup","_props$cartLinesGroup","_props$context$action2","_props$context$action3","_renderCartLinesGroupHeader","_countItems","count","_cartLine$pickUpInSto","pickUpText","shippingText","emailshippingText","groupTitle","_renderCartLinesGroupTitle","_cartLine$data2","countItem","reduce","_item$data","_cartLine$pickUpInSto2","_cartLine$pickUpInSto3","_cartLine$pickUpInSto4","itemLabel","itemsLabel","suffix","_renderQutotationButton","url","_props$context$action","_props$cart","renderModuleAttributes","OrderSummaryLine","price","label","cssLabel","PriceComponent","CustomerContextualPrice","_buildOrderSummarySection","arguments","_computedLoyaltyAmount","checkoutState","loyaltyAmount","getDeliveryMode","_channelDeliveryOptio","featureSate","pickupDeliveryMode","PickupDeliveryModeCodes","dM","NetPrice","SubtotalAmount","SubtotalAmountWithoutTax","TaxAmount","TaxOnNonShippingCharges","DiscountAmountWithoutTax","TotalAmount","OtherChargeAmount","canShip","hasDeliveryMethod","hasShippingMethod","freightFee","getDeliveryConfiguration","isTaxIncludedInPrice","isShowTaxBreakup","deliveryModes","ShippingChargeAmount","otherChargeAmount","otherShippingChargeAmount","isTaxGreaterThanZero","otherChargeAmountTotal","subtotalAmountActual","giftCardAmount","_computeGiftCardAmount","giftCardTotalValue","giftCardExtends","giftCardCounter","Balance","amount","Math","min","totalAmountAfterGiftCard","loyaltyLabel","giftcardLabel","CartLineItemFunctions","renderProductDimensions","Product","DimensionStrings","productDimension","IsGiftCard","renderDiscountLines","DiscountLines","discountLine","OfferId","Percentage","discountPercent","_discountLine$Percent","updatedPercent","DiscountLineTypeValue","DiscountLineType","TenderTypeDiscount","Price","_discountLine$Effecti","effectiveAmount","EffectiveAmount","Number","toFixed","isSalesLine","PeriodicDiscount","BasePrice","renderInventoryLabel","inventoryCssName","renderUnitOfMeasure","unitOfMeasureDisplayType","DefaultUnitOfMeasure","renderShippingLabel","_props$context$reques","shippingChargeLines","ChargeLines","chargeLine","IsShipping","chargeTotal","CalculatedAmount","priceComponent","renderOtherCharges","_cartline$ChargeLines","chargeline","CartLine","destructDimensionStrings","cropFocalRegion","renderDisountLines","prodAttribute","productName","imgeClassName","externalItemID","_productSpecification","_productSpecification2","_productSpecification3","attribute","TextValue","sizeDescription","newValue","_generateErrorMessage","NetAmount","NetAmountWithoutTax","_generateQuantityandPrice","nodes","_props$data$cartLine","_props$data$cartLine2","DiscountAmount","IncrementalQuantity","max","currentCount","isGiftCard","classNames","msdyn365Commerce","createComponentOverride","component","ProductPickUpOptionsForCartLineItems","getCacheKey","buildCacheKey","getCacheObjectType","dataCacheType","getPickUpOptionsForCartLineItems","Error","getCartState","response","ProductsDataActions","callerContext","queryResultSettings","QueryResultSettingsProxy","getPagingFromInputDataOrDefaultValue","createObservableDataAction","action","inputData","_assembleGroupInvoiceCartlines","productPickUpOptions","_isChannelLimitsFeatureEnabled","isMultipleCatalogsFeatureEnabled","currentCatalogId","getCatalogId","validateCatalogId","showGuestCheckoutButton","expressCheckoutButton","paymentExpress","ExpressCheckoutSectionWrapper","isMultipleCatalogFeatureEnabledInHq","catalogId","checkoutBlockedDueToUnavailableFunds","_this$props$data$cart4","isChannelTypeB2B","_featureState$result2","_this$props$context$r2","isShowOrHideTaxEnabled","isEnableShowOrHideSalesTaxECommerceEnabled","OrderSummary","IsTaxIncludedInPrice","_this$props$data$feat3","updateMaxQuantityForCartLineItem","salesAgreementPricePrompt","urlCheck","_featureStatuses$find2","_cartConfiguration$Ig","cartConfiguration","IgnoreOrderSettings","_featureStatuses$find3","isChannelLimitsFeatureEnabledInHq","_this$props$data$feat4","_featureState$result3","_this$props$data$cart5","cartLinesPickUpOptions","cartEmptyText","_cartLine$cartlineId","renderCartLinesGroupHeader","emailShippingText","titleSeparate","StringExtensions","isNullOrEmpty","renderCartLinesGroupTitle","_props$cart2","renderCartLinesGroup","_context$request$chan","CartLineItemComponent","priceCurrency","Currency","isPickUpItem","isCartLineItemPickUpType","_cartline$WarehouseId","toUpperCase","_props$channelDeliver","matchDeliveryOptions","productdeliveryOptions","storePickUpOptionList","pickup","deliveryCode","InvoiceSummaryLine","_buildPaymentSummarySection","invoiceLines","invoiceLine","InvoiceAmount","format","InvoiceId","MediaType","getAltText","shouldUseCmsAltText","imageAltText","_context$app","OmniChannelMedia","validateMediaLocationAsync","mediaLocation","imageData","src","Uri","altText","AltText","IsApplicableForChildEntities","additionalProperties","isApplicableForChildEntities","http","XMLHttpRequest","open","addEventListener","send","_unused","getValidProductImages","productId","selectedProduct","MediaLocationsForSelectedVariantInput","getMediaLocationsForSelectedVariant","mediaLocations","all","pairs","pair","validateProductImages","MediaGallery","_this","_props$config$zoomedI","_inlineZoomDivRef","Map","fullScreenOverlayButtonRef","player","defaultGalleryImageSettings","md","defaultThumbnailImageSettings","onExiting","animating","onExited","next","removeInlineZoomStyle","isLastItem","nextIndex","activeIndex","goToIndex","updateZoomedInImage","previous","images","mediaGalleryItems","isFirstItem","autoplay","currentIndex","mediaItems","_mediaItems","_this$player$current","mediaTypeValue","Video","current","play","_this$player$current2","pause","getImagesData","skipImageValidation","_this$props$config$im","_this$props$config$im2","source","imageSource","mediaLocationsForSelectedVariant","_mediaLocation$Uri","curatedImages","_filterMasterImageFromVariant","_renderCarouselItemVideo","mediaData","videoData","_videoData$_links","options","playerResources","videoMetaData","videoId","duration","playTime","thumbnail","posterframeUrl","_links","binaryReferences","videoBinaryReferences","videoPlayerData","metaData","editProps","Player","ref","playerData","isEditor","params","_renderEmptyImage","_getCarouselItem","image","isInPopup","Image","fallBackSrc","fallbackImage","loadFailureBehavior","shouldSkipToMainImage","bypassHideOnFailure","_getThumbnailItem","modifiedActiveIndex","ThumbnailItemContainerProps","_generateOnThumbnailClick","onKeyDown","_generateOnThumbnailKeyDown","Picture","imageFallbackOptimize","shouldUseOptimizedImage","getVideoThumbNailItem","classes","_refHandler","divRef","which","KeyCodes","Enter","Space","preventDefault","_renderVideoThumbnail","fullScreenTitleText","openModalDialog","_toggleModal","imageModalSlider","ZoomView","_mapProductToImageData","carouselprops","Carousel","_renderCarouselItemImageView","_zoomedImageSettings","interval","directionTextPrev","previousScreenshotFlipperText","directionTextNext","nextScreenshotFlipperText","onIndicatorsClickHandler","showPaginationTooltip","hideIndicator","keyboard","handleOnExited","handleOnExiting","isDisabledFunctionality","isMobileImageZoomed","carousel","imageModalSliderProps","modalIsOpen","ontoggle","galleryCarousel","ImagefullView","altTextSource","mediaGalleryImages","isImageZoomed","isInitialLoad","zoomedImageSettings","galleryImageSettings","_onImageMouseOut","_inlineZoomImageOnHover","_onInlineImageClick","_onContainerZoomImageClick","_onMouseOutLensContainer","isMobile","variant","VariantType","Viewport","_this$props$config$im3","_this$props$context$r3","shouldUpdateOnPartialDimensionSelection","_setRenderType","_this$props$config$th","thumbnailImageSettings","_setImages","_this$props$config$th2","productVariant","_product$productVaria","_this$props$context$a","_this$props$config$th3","_actionContext$reques","isPreview","commerceApiRequest","previewImageData","displayOrder","DisplayOrder","MediaTypeValue","_mediaLocation$Uri2","getProductImages","fireImmediately","_this$props$config$th4","_this$props$context$a2","isVertical","thumbnailsOrientation","isFullscreenAllowed","allowFullScreen","zoomViewMode","imageZoom","emptyPlaceHolderImage","placeholderImageName","_this$props$context$r4","getFallbackImageUrl","ItemId","mediaGalleryCarouselItems","_getMediaGalleryItems","mediaGalleryThumbnailCarouselItems","_getMediaGalleryThumbnailItems","moduleProps","callbackToggle","callbackThumbnailClick","callbackThumbnailKeyDown","CarouselProps","indicatorAriaText","ariaLabelForSlide","Thumbnails","ThumbnailsContainerProps","SingleSlideCarouselComponentProps","SingleSlideCarousel","vertical","flipperPrevLabel","flipperNextLabel","parentId","useTabList","JSON","stringify","lastUpdate","defaultKey","_getEmptyThumbnailItem","zoomView","curatedImage","mediaToSet","get","commerceVideoMetadataRequest","getVideoMetadataFromApi","Date","now","media","_renderImageInContainerOnZoom","_renderImageFullScreenOnZoom","_renderImageInlineOnZoom","_this$props$config$sh","_this$props$data$prod2","_this$props$data$prod3","_this$props$data$prod4","shouldHidePrimaryImages","shouldHideMasterProductImagesForVariant","variantImages","isVariantProduct","MasterProductId","itemId","_item$additionalPrope","_this$props$config$da","dataScale","defaultDataScale","onMouseOver","onMouseMove","inlineZoomImageOnMouseMove","_this$props$config$da2","inlineZoomImageOnHover","String","_handleMobileViewZoomedImageClick","target","currentTarget","mobileZoomedInImageClassName","style","transform","classList","parentElement","overflow","_this$props$config$da3","bounds","getBoundingClientRect","positionX","clientX","left","positionY","clientY","top","scaledPositionX","scaledPositionY","add","scrollTo","_this$props$config$da4","innerWidth","inlineZoomInitClick","inlineZoomImageOnMouseOut","onContainerZoomInit","onMouseOutLensContainer","_this$props$config$da5","onMouseOut","onMouseMoveLensContainer","onMouseOverImageContainer","_product$PrimaryImage","_this$fullScreenOverl","focus","parentDiv","children","querySelector","removeAttribute","removeContainerZoomStyle","_renderThumbnails","thumbnails","_renderThumbnailItem","Module","currencyCode","taxOnShippingCharge","TaxOnShippingCharge","shippingChargeAmount","taxOnNonShippingCharges","customerAccountAmount","customerAccount","customerAccountLabel","OrderTemplateActions","onRemoveOrderTemplate","handlers","itemKey","removeOrderTemplateActionHandler","OrderTemplateRender","Id","orderTemplate","removeFromOrderTemplateListText","orderTemplateState","enableImageProductLink","onDismiss","orderTemplateImage","_renderOrderTemplateImages","orderTemplateLines","orderTemplateAriaLabel","_renderAriaLabel","orderTemplateName","_getOrderTemplatePageUrl","_getUrlSync","separator","totalLines","addToCartButton","AddOrderTemplateToCartComponent","moduleTypeName","addToCartText","addToBagText","dialogStrings","removeButton","orderTemplateStatusMessage","userMessage","statusCssString","onClickHandler","defaultImageSettings","xl","slice","_line$productListLine","_line$fullProduct$Pro","_line$fullProduct","_line$fullProduct2","_line$fullProduct$Pro2","_line$fullProduct3","_getFallbackImageUrl","_line$fullProduct4","_context$request$app","fullProduct","_updateProductUrlCatalog","ProductDetails","productListLine","isNullOrWhitespace","OrderTemplateListStatusMessage","errorType","text","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","_heading$text","_heading$tag3","heading","emptyOrderTemplateText","createNewTemplateButtonText","orderTemplatesData","orderTemplateListHeading","orderTemplateListTitle","_heading$tag","errorProps","statusMessage","Spinner","msg","progressNotificationText","Heading","_heading$tag2","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","selectedCatalogId","searchTextInput","addLineButtonRef","_renderSearchForm","searchButtonAriaLabel","searchModalPlaceholderText","selectCatalogTitleText","autoComplete","onSubmit","_onSearchSubmit","htmlFor","_onCatalogSelectionChange","_getCatalogNodes","autoFocus","placeholder","_onInputChange","maxLength","_get","Loading","_getSearchResults","NotFound","ProductList","_onQuantityChangeHandler","selectedQuantity","_onSelectItem","varianteInput","SelectedVariantInput","getSelectedVariant","dimensions","_getProductDimensions","selectedProductDimensions","ProductConfiguration","_onBackButtonClickHandler","_highlightSearchTerm","parsedName","unescape","dangerouslySetInnerHTML","__html","_resultCountText","searchResultsCountVerbage","searchResultsCountSubject","_addItemToTemplateHandler","orderTemplateId","AddItemToOrderTemplateInput","addItemToOrderTemplate","reloadPage","parseInt","_toggleModalHandler","onTelemetryClick","_getCatalogs","onComponentDidMount","_this$searchTextInput","componentDidMount","onComponentDidUpdate","_this$searchTextInput2","addLineModalLinkText","backToResultsText","modalProps","ariaLabel","showBackArrow","_renderContent","addToTemplateHandler","onQuantityChangeHandler","highlightSearchTerm","searchForm","productProps","clickHandler","renderResultCountText","notFoundSearchErrorNotice","notFoundSearchErrorRedediation","NotFoundComponent","searchErrorMessage","productCatalog","isSelected","selected","searchText","searchCriteriaInput","Context","ChannelId","IncludeAttributes","SearchCondition","searchByCriteriaAsync","getDimensionsForSelectedVariant","GetDimensionsForSelectedVariantInput","computed","Dropdown","selectMenu","_onChanged","selectedIndex","dropdownId","selectId","selectedValue","innerText","dropdownList","dropdownName","OrderTemplateQuantity","inputRef","_validateMin","minValue","isNaN","currentInput","_handleChange","glyphMinusClassName","decrementGlyphClass","glyphPlusClassName","incrementGlyphClass","incDisabled","currentValue","extraClass","getChangeHandler","_onIncrementalChange","pattern","onBlur","updatedQuantity","e","inputElement","HTMLInputElement","_debounce","setAttribute","defaultProps","selectedDimensions","_getDimensionsError","dimensionName","dimensionMissingError","_addToTemplateHandler","isBusy","showAddConfirmation","missingDimensions","ProductListId","addToTemplateDuplicateError","addToTemplateGenericError","_onQuantityChange","totalPrice","_updateDimensionValue","productDimensionFull","newValueId","DimensionValues","_onDimensionChanged","_this$state$errors","remainingDimensionsErrors","selection","buttonDisabled","mappedDimensions","ExtensionProperties","variantProduct","dimensionInput","variantDimensions","availabilityInput","ProductAvailabilitiesForSelectedVariantInput","newAvailableQuantity","getProductAvailabilitiesForSelectedVariant","priceInput","PriceForSelectedVariantInput","productPrice","getPriceForSelectedVariant","productAvailableQuantity","unitPrice","sort","a","b","_getDropdownName","dimensionType","_product$Name","_product$Name2","addItemToTemplateText","addLineProductUnitPricePrefix","quantitySelectLabel","addLineProductUnitOfMeasurePrefix","totalPriceLabel","isMultipleCatalogSelect","_formatPrice","_getDimensionsNodes","_getConfirmationMessage","selectedDimensionNames","_dimension$DimensionV","addToTemplateConfirmation","values","_this$state$errors2","unshift","cultureFormatter","formatCurrency","selectProductButtonText","_generateImageUrl","primaryImageSource","generateImageUrl","fallBackImg","ProductSelectButton","buttonText","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","onOrderTemplateNameCancel","_buttonEventReference","requestStatementDropdownString","Random","Guid","generateGuid","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","_context$request$app2","UnitOfMeasure","productLineCatalog","renderProductCatalog","productImage","_renderProductImage","productInfo","renderProductInfo","_renderPrice","productNumber","productUnitOfMeasure","productQuantityView","_generateQuantity","onChangeHandler","onChangeQuantity","isQuantityDisabledForUpdate","_context$actionContex","_context$request","isB2b","catalog","_renderProductError","OOS","outOfStockProductErrorMessage","UNASSORTED","unavailableProductErrorMessage","NONE","_orderTemplateLine$fu","_renderProductDimensions","dimensionsLine","OrderTemplateLinesStatusMessage","OrderTemplateTableHeading","componentClassName","getOnChange","checkedLines","lines","scope","selectAllRowsText","productLineCatalogName","productUnitPrice","productUOM","productQuantity","productActions","OrderTemplateLines","_onRemoveSelection","removeSelectedFailureMessage","removeSelectedSuccessMessage","productSelection","productListLines","maxWaitTimeInMilliSeconds","removeProductListLinesAsync","setTimeout","_this$props$data$orde","substr","indexOf","_onAddSelectionToBag","productLine","_productLine$fullProd","_productLine$fullProd2","_productLine$fullProd3","_productLine$fullProd4","_productLine$productL","ProductTypeValue","AdjustedPrice","_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","_objectWithoutProperties","_excluded","updateProductListLinesAsync","list","newLine","updatedLines","updatedOrderTemplate","ProductListLines","update","ActiveOrderTemplateLinesInput","editOrderTemplateLineQuantityError","maxQuantityLimitText","addedToCartFailureMessage","addProductToCartInput","addProductToCart","priceResult","reject","isMiniCart","addToCartBehavior","substatus","_cart$result","_cart$result2","cartLineQuantity","defaultMessage","_result$errorDetails","_removeItemFromOrderTemplateLines","userToken","featureStates","getFeatureState","createGetFeatureStateInput","_featureStates$find","_renameTemplate","_removeTemplate","_orderTemplate$result","newLink","_getViewport","device","Type","paginationPreviousText","paginationNextText","_viewport","_updateViewport","isConfirmAddSelectionToBagModalOpen","removeEventListener","emptyOrderTemplateLinesText","errorGettingOrderTemplateLines","orderTemplateResult","_isFirstPage","orderActions","_renderOrderTemplateActions","bulkOrderLineActions","_getOrderTemplateLineActions","productsStatusMessage","ProductsTable","ProductsTableRow","ProductsTableHeading","_renderProductListHeader","orderLines","_renderProductList","updateQuantity","debounce","pagination","itemAddedToCartDialog","updated","_product$fullProduct","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":""}