\r\n
\r\n {renderProductPlacementImage(\r\n imageSettings,\r\n context.request.gridSettings,\r\n productImageUrl,\r\n product.primaryImageUrl,\r\n product.name,\r\n context\r\n )}\r\n
\r\n
\r\n
{product.name} \r\n {renderPrice(\r\n context,\r\n typeName,\r\n id,\r\n product.basePrice,\r\n product.price,\r\n savingsText,\r\n freePriceText,\r\n originalPriceText,\r\n currentPriceText,\r\n isPriceMinMaxEnabled,\r\n priceResources\r\n )}\r\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(context, product.defaultUnitOfMeasure)}\r\n {renderDescription(product.description)}\r\n \r\n
\r\n \r\n {renderProductPlacementImage(\r\n imageSettings,\r\n context.request.gridSettings,\r\n productImageUrl,\r\n product.primaryImageUrl,\r\n product.name,\r\n context\r\n )}\r\n
\r\n \r\n
{product.name} \r\n {renderPrice(\r\n context,\r\n typeName,\r\n id,\r\n product.basePrice,\r\n product.price,\r\n savingsText,\r\n freePriceText,\r\n originalPriceText,\r\n currentPriceText\r\n )}\r\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(context, product.defaultUnitOfMeasure)}\r\n \r\n \r\n )}\r\n {renderProductDimensions(product.attributeValues)}\r\n {!context.app.config.hideRating &&\r\n renderRating(context, typeName, id, product.averageRating, product.totalRatings, ratingAriaLabel, ratingCountAriaLabel)}\r\n {renderProductAvailability(inventoryLabel)}\r\n {quickViewButton && renderQuickView(quickViewButton, product.recordId)}\r\n {productComparisonButton && renderProductComparisonButton(productComparisonButton, product, getCatalogId(context.request))}\r\n \r\n );\r\n};\r\n\r\nfunction renderLabel(\r\n name?: string,\r\n price?: string,\r\n rating?: number,\r\n ratingAriaLabelText?: string,\r\n reviewCount?: number,\r\n ratingCountAriaLabelText?: string\r\n): string {\r\n const reviewCountArialableText = getReviewAriaLabel(reviewCount, ratingCountAriaLabelText ?? '');\r\n return `${name ?? ''} ${price ?? ''} ${getRatingAriaLabel(rating, ratingAriaLabelText)}${\r\n reviewCountArialableText ? ` ${reviewCountArialableText}` : ''\r\n }`;\r\n}\r\n\r\nfunction renderDescription(description?: string): JSX.Element | null {\r\n return {description}
;\r\n}\r\n\r\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\r\n if (rating && ratingAriaLabel) {\r\n const roundedRating = rating.toFixed(2);\r\n return format(ratingAriaLabel || '', roundedRating, '5');\r\n }\r\n return '';\r\n}\r\n\r\nfunction getReviewAriaLabel(reviewCount?: number, ratingCountAriaLabelText?: string): string {\r\n if (reviewCount && ratingCountAriaLabelText) {\r\n return format(ratingCountAriaLabelText || '', reviewCount);\r\n }\r\n return '';\r\n}\r\n\r\nfunction renderRating(\r\n coreContext: ICoreContext,\r\n moduleTypeName: string,\r\n moduleId: string,\r\n avgRating?: number,\r\n totalRatings?: number,\r\n ariaLabel?: string,\r\n ratingCountAriaLabel?: string\r\n): JSX.Element | null {\r\n if (!avgRating) {\r\n return null;\r\n }\r\n\r\n const numberRatings = totalRatings?.toString() || undefined;\r\n const ratingAriaLabelText = getRatingAriaLabel(avgRating, ariaLabel);\r\n const ratingCountAriaLabelText = getReviewAriaLabel(Number(numberRatings), ratingCountAriaLabel);\r\n\r\n return (\r\n >\r\n): JSX.Element | null {\r\n if (!imageUrl || !gridSettings || !imageSettings) {\r\n return null;\r\n }\r\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment -- Site level config can be of any type.\r\n const contextConfig = context?.app.config?.placeholderImageName;\r\n const emptyPlaceHolderImage = contextConfig as string;\r\n let fallbackImageSource = fallbackImageUrl;\r\n if (emptyPlaceHolderImage && fallbackImageUrl) {\r\n fallbackImageSource = `${fallbackImageUrl},${emptyPlaceHolderImage}`;\r\n }\r\n const img: IImageData = {\r\n src: imageUrl,\r\n altText: altText ? altText : '',\r\n fallBackSrc: fallbackImageSource\r\n };\r\n const imageProps = {\r\n gridSettings,\r\n imageSettings\r\n };\r\n imageProps.imageSettings.cropFocalRegion = true;\r\n return (\r\n = msdyn365Commerce.createComponentOverride<\r\n IProductComponentV2\r\n>('ProductV2', { component: ProductCardV2, ...PriceComponentActions });\r\n\r\nexport default ProductComponentV2;\r\n","/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\nimport { IComponent, IComponentProps } from '@msdyn365-commerce/core';\r\nimport { ICartState } from '@msdyn365-commerce/global-state';\r\nimport { Coupon } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\r\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\r\nimport {\r\n Button,\r\n format,\r\n getPayloadObject,\r\n getTelemetryAttributes,\r\n IPayLoad,\r\n ITelemetryContent,\r\n TelemetryConstant\r\n} from '@msdyn365-commerce-modules/utilities';\r\nimport * as React from 'react';\r\n\r\n/**\r\n * IPromoCodeProps: Interface for promo code component.\r\n */\r\nexport interface IPromoCodeProps extends IComponentProps<{}> {\r\n cart: ICartState | undefined;\r\n promoCodeHeadingText: string;\r\n appliedPromoCodeHeadingText: string;\r\n removePromoAriaLabelFormat: string;\r\n promoPlaceholderText: string;\r\n promoCodeApplyButtonText: string;\r\n collapseTimeOut: number;\r\n removePromoText: string;\r\n invalidPromoCodeErrorText: string;\r\n failedToAddPromoCodeErrorText: string;\r\n duplicatePromoCodeErrorText: string;\r\n failedToRemovePromoCodeErrorText: string;\r\n\r\n /**\r\n * The telemetry content.\r\n */\r\n telemetryContent?: ITelemetryContent;\r\n promoCodeApplyCallback?(): void;\r\n}\r\n\r\n/**\r\n * IPromoCodeProps: Interface for promo code component.\r\n */\r\nexport interface IPromoCodeComponent extends IComponent {}\r\n\r\n/**\r\n * IPromoCodeProps: Interface for promo code state.\r\n */\r\ninterface IPromoCodeState {\r\n promoCodeInputValue: string;\r\n error: string;\r\n canApply: boolean;\r\n}\r\n\r\n/**\r\n *\r\n * The PromoCode component renders the promocode section.\r\n * @extends {React.PureComponent}\r\n */\r\nclass PromoCode extends React.PureComponent {\r\n private readonly payLoad: IPayLoad;\r\n\r\n public constructor(props: IPromoCodeProps) {\r\n super(props);\r\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, TelemetryConstant.ApplyPromoCode);\r\n this.state = {\r\n promoCodeInputValue: '',\r\n error: '',\r\n canApply: false\r\n };\r\n }\r\n\r\n public render(): JSX.Element {\r\n return (\r\n \r\n
{this.props.promoCodeHeadingText}
\r\n {this._renderForm(this.props.promoPlaceholderText, this.props.promoCodeApplyButtonText, this.props.cart)}\r\n
\r\n {this.state.error}\r\n
\r\n {this._renderAppliedPromoCode(this.props)}\r\n
) => {\r\n const error = event.target.value === '' ? '' : this.state.error;\r\n this.setState({\r\n promoCodeInputValue: event.target.value.trim(),\r\n error,\r\n canApply: !!event.target.value\r\n });\r\n };\r\n\r\n /**\r\n * Apply promo code method.\r\n * @param cartState - Cart state interface.\r\n */\r\n private readonly _applyPromotion = (cartState: ICartState | undefined) => {\r\n if (!cartState) {\r\n return;\r\n }\r\n const appliedPromo = this.state.promoCodeInputValue;\r\n\r\n cartState\r\n .addPromoCode({ promoCode: appliedPromo })\r\n .then(result => {\r\n if (result.status === 'SUCCESS') {\r\n // Show success text\r\n this.setState({ promoCodeInputValue: '', error: '', canApply: false });\r\n } else if (result.substatus === 'ALREADYADDED') {\r\n this.setState({ error: this.props.duplicatePromoCodeErrorText });\r\n } else {\r\n this.setState({ error: this.props.invalidPromoCodeErrorText });\r\n }\r\n })\r\n .catch(() => {\r\n this.setState({ error: this.props.failedToAddPromoCodeErrorText });\r\n });\r\n };\r\n\r\n /**\r\n * On submit action.\r\n * @param cartState - Cart state.\r\n * @returns Apply promotion.\r\n */\r\n private readonly _onSubmitHandler = (cartState: ICartState | undefined) => (event: React.FormEvent) => {\r\n event.preventDefault();\r\n this._applyPromotion(cartState);\r\n };\r\n\r\n /**\r\n * On apply promotion.\r\n * @param cartState - Cart state.\r\n * @returns Apply promotion.\r\n */\r\n private readonly applyPromotionHandler = (cartState: ICartState | undefined) => () => {\r\n this._applyPromotion(cartState);\r\n };\r\n\r\n /**\r\n * Renders promo code form.\r\n * @param promoPlaceholderText - Promo code input box placeholder string.\r\n * @param promoCodeApplyButtonText - Promo code button text string.\r\n * @param cartState - Cart state interface.\r\n * @returns Promo code form.\r\n */\r\n private readonly _renderForm = (promoPlaceholderText: string, promoCodeApplyButtonText: string, cartState: ICartState | undefined) => {\r\n const attributes = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\r\n\r\n return (\r\n \r\n );\r\n };\r\n\r\n /**\r\n * Remove promo code method.\r\n * @param cartState - Cart state interface.\r\n * @param event - Mouse event.\r\n */\r\n private readonly _removePromotion = (cartState: ICartState | undefined, event: React.MouseEvent) => {\r\n if (!cartState) {\r\n return;\r\n }\r\n const code = event.currentTarget.getAttribute('data-value') ?? '';\r\n cartState\r\n .removePromoCodes({\r\n promoCodes: [code]\r\n })\r\n .then(result => {\r\n if (result.status === 'SUCCESS') {\r\n this.setState({ error: '' });\r\n }\r\n })\r\n .catch(() => {\r\n this.setState({ error: this.props.failedToRemovePromoCodeErrorText });\r\n });\r\n };\r\n\r\n /**\r\n * Renders applied promo code form.\r\n * @param props - Promo code component props.\r\n * @returns Applied promo code.\r\n */\r\n private readonly _renderAppliedPromoCode = (props: IPromoCodeProps) => {\r\n if (!props.cart || !props.cart.cart.Coupons || !ArrayExtensions.hasElements(props.cart.cart.Coupons)) {\r\n return;\r\n }\r\n\r\n /**\r\n * On remove promotion action.\r\n * @param event - Mouse event.\r\n */\r\n const removePromotionHandler = (event: React.MouseEvent) => {\r\n this._removePromotion(props.cart, event);\r\n };\r\n\r\n return (\r\n <>\r\n {props.cart.cart.Coupons.map((coupon: Coupon) => {\r\n const ariaLabel = props.removePromoAriaLabelFormat\r\n ? format(props.removePromoAriaLabelFormat, props.removePromoText, coupon.Code)\r\n : '';\r\n\r\n return (\r\n \r\n
\r\n {'Code '}\r\n {coupon.Code} \r\n {'Applied '}\r\n
\r\n
\r\n
{\n /**\n * The flag to change the quantity component from intractable to static.\n */\n disableQuantityInteractivity?: boolean;\n\n /**\n * The primary image url.\n */\n primaryImageUrl?: string;\n\n /**\n * The product url.\n */\n productUrl?: string;\n\n /**\n * GridSettings for the product image in cartLine.\n */\n gridSettings: IGridSettings;\n\n /**\n * ImageSettings for the product image in cartLine.\n */\n imageSettings: IImageSettings;\n\n /**\n * Boolean flag to indicate if the item is out of stock.\n */\n isOutOfStock?: boolean;\n\n /**\n * Flag to make quantity section editable.\n */\n isQuantityEditable?: boolean;\n\n /**\n * Max quantity for line item.\n */\n maxQuantity?: number;\n\n /**\n * Current quantity for line item.\n */\n currentQuantity?: number;\n\n /**\n * Resource string for the component.\n */\n resources: ICartlineResourceString;\n\n /**\n * SalesLine flag.\n */\n isSalesLine?: boolean;\n\n /**\n * Error message to show in place of quantity.\n */\n errorMessage?: string;\n\n /**\n * Inventory information label.\n */\n inventoryInformationLabel?: string;\n\n /**\n * Inventory information class name.\n */\n inventoryLabelClassName?: string;\n\n /**\n * Flag to show/hide shipping charges for line items.\n */\n showShippingChargesForLineItems?: boolean;\n\n /**\n * Boolean flag to indicate if cart state status is ready.\n */\n isCartStateReady?: boolean;\n\n /**\n * Chanel Delivery Option configuration is from api.\n */\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n\n /**\n * The telemetry content.\n */\n telemetryContent?: ITelemetryContent;\n\n /**\n * The cart line index.\n */\n lineIndex?: number;\n\n /**\n * Quantity onChange callback.\n */\n quantityOnChange?(cartLine: CartLine, newQuantity: number, lineIndex?: number): boolean;\n priceCurrency?: string;\n}\n\ninterface IDimensionStrings {\n /**\n * String for size key.\n */\n sizeString: string;\n\n /**\n * String for color key.\n */\n colorString: string;\n\n /**\n * String associated with the configuration product dimension.\n */\n configString: string;\n\n /**\n * String for style key.\n */\n styleString: string;\n\n /**\n * String for amount key.\n */\n amountString?: string;\n}\n\n/**\n * Renders catalog label for the cart line.\n * @param props - Cart line props.\n * @returns Catalog label.\n */\nconst CatalogLabelComponent: React.FC = (props: ICartLineProps) => {\n const catalogId = props.data.cartLine.CatalogId;\n validateCatalogId(catalogId);\n\n if (!props.context.request.user.isB2b || !catalogId || !ArrayExtensions.hasElements(props.data.catalogs)) {\n return null;\n }\n\n const catalog = props.data.catalogs.find(item => item.RecordId === catalogId);\n\n if (!catalog || !catalog.Name) {\n return null;\n }\n\n return {catalog.Name}
;\n};\n\nconst CartLineItemFunctions = {\n renderProductDimensions: (Product: SimpleProduct, DimensionStrings: IDimensionStrings) => {\n if (!Product || !Product.Dimensions) {\n return [];\n }\n\n return Product.Dimensions.map(productDimension => {\n if (productDimension.DimensionTypeValue === 1) {\n return (\n \n \n {DimensionStrings.colorString}:\n {productDimension.DimensionValue && productDimension.DimensionValue.Value} \n \n
\n );\n }\n\n if (productDimension.DimensionTypeValue === 2) {\n return (\n \n \n {DimensionStrings.configString}:\n {productDimension.DimensionValue && productDimension.DimensionValue.Value} \n \n
\n );\n }\n\n if (productDimension.DimensionTypeValue === 3) {\n return (\n \n \n {DimensionStrings.sizeString}:\n {productDimension.DimensionValue && productDimension.DimensionValue.Value} \n \n
\n );\n }\n\n if (productDimension.DimensionTypeValue === 4) {\n return (\n \n \n {Product.IsGiftCard ? DimensionStrings.amountString : DimensionStrings.styleString}:\n {productDimension.DimensionValue && productDimension.DimensionValue.Value} \n \n
\n );\n }\n return null;\n });\n },\n\n renderDiscountLines: (props: ICartLineProps) => {\n if (!props.data.cartLine.DiscountLines || props.data.cartLine.DiscountLines.length === 0) {\n return null;\n }\n\n return props.data.cartLine.DiscountLines.map((discountLine, index) => {\n return (\n \n
\n {discountLine.OfferName ? discountLine.OfferName : ''}:{` ${props.resources.discountStringText || 'Discount'} `}\n \n
\n \n
{` (${discountLine.EffectivePercentage !== undefined ? discountLine.EffectivePercentage : ''}%)`} \n
{props.inventoryInformationLabel} ;\n },\n\n /**\n * Gets the react node for product unit of measure display.\n * @param props - Icartline props.\n * @returns The node representing markup for unit of measure component.\n */\n renderUnitOfMeasure: (props: ICartLineProps) => {\n if (props.data.cartLine.IsInvoiceLine) {\n return null;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Do not need type check for appsettings\n if (!props.context.app.config.unitOfMeasureDisplayType || props.context.app.config.unitOfMeasureDisplayType === 'none') {\n return undefined;\n }\n\n const product = props.data.product;\n if (!product || !product.DefaultUnitOfMeasure) {\n return undefined;\n }\n\n return (\n \n {product.DefaultUnitOfMeasure} \n
\n );\n },\n renderShippingLabel: (props: ICartLineProps) => {\n const pickupDeliveryModeCode = props.context.request.channel?.PickupDeliveryModeCode;\n const channelDeliveryOptionConfig = props.channelDeliveryOptionConfig;\n const cartline = props.data.cartLine;\n let hasShippingMethod = false;\n if (channelDeliveryOptionConfig !== undefined) {\n hasShippingMethod = !!(\n cartline.DeliveryMode &&\n channelDeliveryOptionConfig.PickupDeliveryModeCodes?.some(deliveryMode => deliveryMode !== cartline.DeliveryMode)\n );\n } else {\n hasShippingMethod = !!(cartline.DeliveryMode && cartline.DeliveryMode !== pickupDeliveryModeCode);\n }\n if (!hasShippingMethod) {\n return undefined;\n }\n\n const shippingChargeLines = (cartline.ChargeLines || []).filter(chargeLine => chargeLine.IsShipping);\n\n if (shippingChargeLines.length === 0) {\n return undefined;\n }\n\n const freightFee = shippingChargeLines.reduce((chargeTotal, chargeLine) => {\n return chargeTotal + (chargeLine.CalculatedAmount || 0);\n }, 0);\n\n const priceComponent = (\n {`${props.resources.shippingChargesText}:`} \n {priceComponent} \n \n );\n },\n renderOtherCharges: (props: ICartLineProps) => {\n const cartline = props.data.cartLine;\n const otherCharges = cartline.ChargeLines?.filter(chargeline => !chargeline.IsShipping);\n\n return (\n (otherCharges &&\n otherCharges.map((otherCharge, key) => {\n return otherCharge && otherCharge.CalculatedAmount ? (\n \n
{`${otherCharge.Description}:`} \n
\n \n
{props.resources.salesAgreementPricePrompt}
;\n }\n};\n\n// eslint-disable-next-line no-redeclare\nconst CartLine: React.FC = (props: ICartLineProps) => {\n const { isSalesLine, productUrl, resources } = props;\n const { product, cartLine } = props.data;\n\n const destructDimensionStrings = {\n sizeString: resources.sizeString,\n colorString: resources.colorString,\n styleString: resources.styleString,\n configString: resources.configString,\n amountString: resources.amountString\n };\n\n const fallbackImageUrl =\n product &&\n getFallbackImageUrl(\n product.ItemId,\n props.context.actionContext.requestContext.apiSettings,\n props.context.request.app?.config?.OmniChannelMedia\n );\n const productDimensions = product && CartLineItemFunctions.renderProductDimensions(product, destructDimensionStrings);\n const imageSettings = props.imageSettings;\n if (imageSettings) {\n imageSettings.cropFocalRegion = true;\n }\n const renderDisountLines = CartLineItemFunctions.renderDiscountLines(props);\n const renderInventoryLabel = CartLineItemFunctions.renderInventoryLabel(props);\n const renderUnitOfMeasure = CartLineItemFunctions.renderUnitOfMeasure(props);\n const renderShippingLabel = CartLineItemFunctions.renderShippingLabel(props);\n const renderOtherCharges = CartLineItemFunctions.renderOtherCharges(props);\n const renderSalesAgreementPrompt = CartLineItemFunctions.renderSalesAgreementPrompt(props);\n const payLoad = getPayloadObject('click', props.telemetryContent!, '', product?.RecordId.toString());\n const productAttribute = getTelemetryAttributes(props.telemetryContent!, payLoad);\n const productName = product?.Name || cartLine.Description;\n const imgeClassName = props.data.cartLine.IsInvoiceLine ? 'msc-cart-line__invoice-image' : 'msc-cart-line__product-image';\n\n const onChange = (newValue: number): boolean => {\n if (props.quantityOnChange) {\n return props.quantityOnChange(props.data.cartLine, newValue, props.lineIndex);\n }\n return true;\n };\n\n const _generateErrorMessage = (): JSX.Element | null => {\n if (props.errorMessage) {\n return (\n \n {props.errorMessage} \n
\n );\n }\n\n return null;\n };\n\n const _generateQuantityandPrice = (): JSX.Element[] | null => {\n const nodes = [];\n if (props.isOutOfStock) {\n return null;\n }\n\n // No quantity selector for invoice line\n if (!props.data.cartLine.IsInvoiceLine) {\n if (props.data.product && props.isQuantityEditable) {\n nodes.push(\n \n
{resources.quantityDisplayString}
\n
\n
\n {resources.quantityDisplayString}: \n {props.data.cartLine.Quantity} \n
\n );\n }\n }\n\n nodes.push(\n \n
\n {(props.data.cartLine.DiscountAmount && props.data.cartLine.DiscountAmount > 0 && (\n <>\n
\n {` ${props.resources.discountStringText || 'Discount'} `}\n \n
\n \n )) ||\n null}\n
\n
\n
\n
\n
\n
\n {MsDyn365.isBrowser ? (\n
\n {productName}\n \n ) : null}\n {ArrayExtensions.hasElements(productDimensions) ? (\n
{productDimensions}
\n ) : (\n ''\n )}\n {renderUnitOfMeasure}\n
\n {renderDisountLines}\n {renderInventoryLabel}\n {props.showShippingChargesForLineItems &&
{renderShippingLabel}
}\n {renderOtherCharges}\n {renderSalesAgreementPrompt}\n
\n {_generateQuantityandPrice()}\n {props.data.cartLine.IsInvoiceLine && props.data.cartState && props.resources.priceEditorResources && (\n
\n )}\n
\n
}\n */\nclass PromoCode extends React.Component {\n private readonly payLoad: IPayLoad;\n\n constructor(props: IPromoCodeProps, state: IPromoCodeState) {\n super(props);\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, TelemetryConstant.ApplyPromoCode);\n this.state = {\n isCollapseOpen: false,\n promoCodeInputValue: '',\n error: '',\n canApply: false\n };\n }\n\n public shouldComponentUpdate(nextProps: IPromoCodeProps, nextState: IPromoCodeState): 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 return (\n \n
{this.props.promoCodeHeadingText}
\n {this._renderForm(this.props.promoPlaceholderText, this.props.promoCodeApplyButtonText, this.props.cart)}\n
\n {this.state.error}\n
\n {this._renderAppliedPromoCode(this.props)}\n
) => {\n const error = e.target.value === '' ? '' : this.state.error;\n this.setState({\n promoCodeInputValue: e.target.value.trim(),\n error,\n canApply: !!e.target.value\n });\n };\n\n private readonly _applyPromotion = (cartState: ICartState | undefined) => {\n if (!cartState || !cartState.cart) {\n return;\n }\n const appliedPromo = this.state.promoCodeInputValue;\n\n cartState\n .addPromoCode({ promoCode: appliedPromo })\n .then(result => {\n if (result.status === 'SUCCESS') {\n // Show success text\n this.setState({ promoCodeInputValue: '', error: '', canApply: false });\n } else if (result.substatus === 'ALREADYADDED') {\n this.setState({ error: this.props.duplicatePromoCodeErrorText });\n } else {\n this.setState({ error: this.props.invalidPromoCodeErrorText });\n }\n })\n .catch(error => {\n this.setState({ error: this.props.failedToAddPromoCodeErrorText });\n });\n };\n\n /**\n * On Submit function.\n * @param cartState -Cartstate.\n * @returns Apply promotion.\n */\n private readonly _onSubmitHandler = (cartState: ICartState | undefined) => (event: React.FormEvent) => {\n event.preventDefault();\n this._applyPromotionHandler(cartState);\n };\n\n /**\n * On apply promotion function.\n * @param cartState -Cartstate.\n * @returns Apply promotion.\n */\n private readonly _applyPromotionHandler = (cartState: ICartState | undefined) => () => {\n this._applyPromotion(cartState);\n };\n\n private readonly _renderForm = (promoPlaceholderText: string, promoCodeApplyButtonText: string, cartState: ICartState | undefined) => {\n const attributes = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\n\n return (\n \n );\n };\n\n private readonly _removePromotion = (cartState: ICartState | undefined, event: React.MouseEvent) => {\n if (!cartState) {\n return;\n }\n const code = event.currentTarget.getAttribute('data-value') || '';\n cartState\n .removePromoCodes({\n promoCodes: [code]\n })\n .then(result => {\n if (result.status === 'SUCCESS') {\n this.setState({ error: '' });\n }\n })\n .catch(() => {\n this.setState({ error: this.props.failedToRemovePromoCodeErrorText });\n });\n };\n\n private readonly _calculateDiscount = (code: string, cartState: ICartState | undefined) => {\n if (!cartState || !cartState.cart || !cartState.cart.CartLines || cartState.cart.CartLines.length === 0 || !code) {\n return;\n }\n let discountAmount = 0;\n for (const line of cartState.cart.CartLines) {\n if (line.DiscountLines) {\n for (const discountLine of line.DiscountLines) {\n if (discountLine.DiscountCode === code) {\n discountAmount += discountLine.DiscountCost!;\n }\n }\n }\n }\n return discountAmount * -1;\n };\n\n private readonly _renderAppliedPromoCode = (props: IPromoCodeProps) => {\n if (!props.cart || !props.cart.cart || !props.cart.cart.Coupons || props.cart.cart.Coupons.length === 0) {\n return;\n }\n\n const removePromotionHandler = (event: React.MouseEvent) => {\n this._removePromotion(props.cart, event);\n };\n\n const promoCodTotalDiscount = props.cart.cart.Coupons.reduce((count: number, coupon: Coupon) => {\n return count + (this._calculateDiscount(coupon.Code || '', props.cart) || 0);\n }, 0);\n\n return (\n <>\n \n
{this.props.appliedPromoCodeHeadingText}
\n
\n
\n
\n {coupon.Code}{' '}\n
\n
\n
\n {props.removePromoText}\n \n {\n return Promise.resolve({});\n }\n public initializeClientSide(config: any): boolean {\n console.log(`Initialize client side called on MsDyn365ExpTestConnector with config ${config}`);\n return true;\n }\n\n public getExperiments(): Promise {\n return Promise.resolve({\n name: 'msdyn365-exp-test-2',\n experiments: [\n {\n id: 'expid1',\n friendlyName: 'experiment-1',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n link: 'www.msdyn365-exp-test-connector/expid1',\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var3',\n friendlyName: 'variant-3',\n status: State.Draft,\n weight: '0.2'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid2',\n friendlyName: 'experiment-2',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Paused,\n link: 'www.msdyn365-exp-test-connector/expid2',\n variations: [\n {\n id: 'var3',\n friendlyName: 'variant-3',\n status: State.Paused,\n weight: '1.0'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid3',\n friendlyName: 'experiment-3',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Archived,\n variations: [\n {\n id: 'var4',\n friendlyName: 'variant-4',\n status: State.Archived,\n weight: '1.0'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid4',\n friendlyName: 'experiment-4',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid5',\n friendlyName: 'experiment-5',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid6',\n friendlyName: 'experiment-6',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid7',\n friendlyName: 'experiment-7',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid8',\n friendlyName: 'experiment-8',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid9',\n friendlyName: 'experiment-9',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid10',\n friendlyName: 'experiment-10',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid11',\n friendlyName: 'experiment-11',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid12',\n friendlyName: 'experiment-12',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid13',\n friendlyName: 'experiment-13',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid14',\n friendlyName: 'experiment-14',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid15',\n friendlyName: 'experiment-15',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid16',\n friendlyName: 'experiment-16',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid17',\n friendlyName: 'experiment-17',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid18',\n friendlyName: 'experiment-18',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid19',\n friendlyName: 'experiment-19',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid20',\n friendlyName: 'experiment-20',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid21',\n friendlyName: 'experiment-21',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid22',\n friendlyName: 'experiment-22',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid23',\n friendlyName: 'experiment-23',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid24',\n friendlyName: 'experiment-24',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n },\n {\n id: 'expid25',\n friendlyName: 'experiment-25',\n description: 'This is a msdyn365-exp test experiment',\n type: 'A/B Test',\n status: State.Running,\n variations: [\n {\n id: 'var1',\n friendlyName: 'variant-1',\n status: State.Active,\n weight: '0.4'\n },\n {\n id: 'var2',\n friendlyName: 'variant-2',\n status: State.Active,\n weight: '0.6'\n }\n ],\n createdDate: '05/01/2020',\n lastModifiedDate: '05/01/2020',\n lastModifiedBy: 'User 1'\n }\n ]\n });\n }\n public getVariantsForUser(userId: string, attributes?: { [index: string]: string } | undefined): IVariants[] {\n if (userId.match(/^[0-3].*$/)) {\n return this.variantSet1;\n } else if (userId.match(/^[4-7].*$/)) {\n return this.variantSet2;\n } else if (userId.match(/^[8-9|a-b].*$/)) {\n return this.variantSet3;\n } else {\n return this.variantSet4;\n }\n }\n public activateExperiment(userId: string, experiments: IVariants[], attributes?: { [index: string]: string } | undefined): boolean {\n console.log(\n `Active experiment called on MsDyn365ExpTestConnector with userId: ${userId}, experiments: ${JSON.stringify(\n experiments\n )}, attributes: ${JSON.stringify(attributes)}`\n );\n return true;\n }\n public initialize(config: any, secretManager?: ISecretManager): Promise {\n console.log(`MsDyn365 Exp Test Connector called with config: ${JSON.stringify(config)}`);\n return Promise.resolve(true);\n }\n}\n\nconst connector = new MsDyn365ExpTestConnector();\nexport default connector;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IComponent, IComponentProps, msdyn365Commerce } from '@msdyn365-commerce/core';\nimport { ICartState } from '@msdyn365-commerce/global-state';\nimport { format, getPayloadObject, getTelemetryAttributes, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\n/**\n * ICartIconData: Interface for Cart Icon Data.\n */\nexport interface ICartIconData {\n cart?: ICartState;\n}\n\n/**\n * ICartIconComponentProps: Interface for Cart Icon component props.\n */\nexport interface ICartIconComponentProps extends IComponentProps {\n className?: string;\n cartLabel: string;\n cartQtyLabel: string;\n telemetryContent?: ITelemetryContent;\n salesAgreementPricePrompt?: string;\n}\n\n/**\n * ICartIconComponent: Interface for Cart Icon component.\n */\nexport interface ICartIconComponent extends IComponent {}\n\nconst CartIconComponentActions = {};\n\n/**\n *\n * CartIcon component.\n * @extends {React.FC}\n */\nconst CartIcon: React.FC = observer((props: ICartIconComponentProps) => {\n const {\n cartLabel,\n cartQtyLabel,\n data: { cart }\n } = props;\n const defaultCartItemCount: number = 0;\n\n const cartItem = cart ? cart.totalItemsInCart : defaultCartItemCount;\n let qtyLabel: string = '';\n const cartMaxQuantity: number = 99;\n const maxQuantityLabel: string = '99+';\n if (cartItem > cartMaxQuantity) {\n qtyLabel = maxQuantityLabel;\n } else {\n qtyLabel = format(cartQtyLabel, cartItem);\n }\n const label = format(cartLabel, cartItem);\n\n // Construct telemetry attribute to render\n const payLoad = getPayloadObject('click', props.telemetryContent!, 'cart-icon', '');\n const attributes = getTelemetryAttributes(props.telemetryContent!, payLoad);\n const style: React.CSSProperties = {\n visibility: cart ? 'visible' : 'hidden'\n };\n return (\n \n );\n});\n\nexport const CartIconComponent: React.FunctionComponent = msdyn365Commerce.createComponentOverride<\n // @ts-expect-error -- Compatible issue with the component override.\n ICartIconComponent\n>('CartIcon', { component: CartIcon, ...CartIconComponentActions });\n\nexport default CartIconComponent;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartLinePriceEditor, ICartLinePriceEditorResources, PriceComponent } from '@msdyn365-commerce/components';\nimport MsDyn365, {\n IComponentProps,\n IGridSettings,\n IImageSettings,\n Image,\n isChannelTypeB2B,\n msdyn365Commerce\n} from '@msdyn365-commerce/core';\nimport { ICartState } from '@msdyn365-commerce/global-state';\nimport {\n CartLine,\n ChannelDeliveryOptionConfiguration,\n DiscountLine,\n DiscountLineType,\n ProductCatalog,\n ProductDimensionType,\n SalesLine,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, StringExtensions, getFallbackImageUrl, validateCatalogId } from '@msdyn365-commerce-modules/retail-actions';\nimport { getPayloadObject, getTelemetryAttributes, IncrementalQuantity, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classNames from 'classnames';\nimport * as React from 'react';\n\n/**\n * ICartlineResourceString: Interface for specifying the\n * resource strings that the component needs.\n */\nexport interface ICartlineResourceString {\n /**\n * Display string for discount label.\n */\n discountStringText: string;\n\n /**\n * String for size key.\n */\n sizeString: string;\n\n /**\n * String for color key.\n */\n colorString: string;\n\n /**\n * String associated with the configuration product dimension.\n */\n configString: string;\n\n /**\n * String for style key.\n */\n styleString: string;\n\n /**\n * String for amount key.\n */\n amountString?: string;\n\n /**\n * Display string for quantity label.\n */\n quantityDisplayString: string;\n\n /**\n * Display string for quantity label.\n */\n inputQuantityAriaLabel: string;\n\n /**\n * Aria label for the decrement button in quantity component.\n */\n decrementButtonAriaLabel: string;\n\n /**\n * Aria label for the increment button in quantity component.\n */\n incrementButtonAriaLabel: string;\n\n /**\n * Original text screenreader.\n */\n originalPriceText: string;\n\n /**\n * Current text screenreader.\n */\n currentPriceText: string;\n\n /**\n * Shipping Charges Text.\n */\n shippingChargesText: string;\n\n /**\n * Price Editor Charges Text.\n */\n priceEditorResources?: ICartLinePriceEditorResources;\n\n /**\n * Sales agreement price prompt text.\n */\n salesAgreementPricePrompt?: string;\n\n /**\n * Shipping text.\n */\n shippingText?: string;\n\n /**\n * Confirmed Ship Date Label.\n */\n confirmedShipDateLabel?: string;\n\n /**\n * Request Delivery Date Label.\n */\n requestDeliveryDateLabel?: string;\n}\n\n/**\n * Represents cart line data interface.\n */\ninterface ICartLineData {\n cartLine: CartLine | SalesLine;\n cartState?: ICartState;\n product?: SimpleProduct;\n catalogs?: ProductCatalog[];\n}\n\n/**\n * ICartLineProps: The props required to render cartLineitem.\n */\nexport interface ICartLineProps extends IComponentProps {\n /**\n * The flag to change the quantity component from interactible to static.\n */\n disableQuantityInteractivity?: boolean;\n\n /**\n * The primary image url.\n */\n primaryImageUrl?: string;\n\n /**\n * The product url.\n */\n productUrl?: string;\n\n /**\n * GridSettings for the product image in cartLine.\n */\n gridSettings: IGridSettings;\n\n /**\n * ImageSettings for the product image in cartLine.\n */\n imageSettings: IImageSettings;\n\n /**\n * Boolean flag to indicate if the item is out of stock.\n */\n isOutOfStock?: boolean;\n\n /**\n * Flag to make quantity section editable.\n */\n isQuantityEditable?: boolean;\n\n /**\n * Max quantity for line item.\n */\n maxQuantity?: number;\n\n /**\n * Current quantity for line item.\n */\n currentQuantity?: number;\n\n /**\n * Resource string for the component.\n */\n resources: ICartlineResourceString;\n\n /**\n * SalesLine flag.\n */\n isSalesLine?: boolean;\n\n /**\n * Error message to show in place of quantity.\n */\n errorMessage?: string;\n\n /**\n * Inventory information label.\n */\n inventoryInformationLabel?: string;\n\n /**\n * Inventory information class name.\n */\n inventoryLabelClassName?: string;\n\n /**\n * Flag to show/hide shipping charges for line items.\n */\n showShippingChargesForLineItems?: boolean;\n\n /**\n * Boolean flag to indicate if cart state status is ready.\n */\n isCartStateReady?: boolean;\n\n /**\n * Chanel Delivery Option configuration is from api.\n */\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n\n /**\n * The telemetry content.\n */\n telemetryContent?: ITelemetryContent;\n\n /**\n * The cart line delivery location.\n */\n deliveryLocation?: string;\n\n /**\n * Quantity onChange callback.\n */\n quantityOnChange?(cartLine: CartLine, newQuantity: number): boolean;\n priceCurrency?: string;\n\n /**\n * Sales line confirmed ship date.\n */\n confirmedShipDate?: string;\n\n /**\n * Sales line request delivery date.\n */\n requestDeliveryDate?: string;\n}\n\n/**\n * Represents dimensions strings.\n */\ninterface IDimensionStrings {\n /**\n * String for size key.\n */\n sizeString: string;\n\n /**\n * String for color key.\n */\n colorString: string;\n\n /**\n * String associated with the configuration product dimension.\n */\n configString: string;\n\n /**\n * String for style key.\n */\n styleString: string;\n\n /**\n * String for amount key.\n */\n amountString?: string;\n}\n\n/**\n * Renders catalog label for the cart line.\n * @param props - Cart line props.\n * @returns Catalog label.\n */\nconst CatalogLabelComponent: React.FC = (props: ICartLineProps) => {\n const catalogId = props.data.cartLine.CatalogId;\n validateCatalogId(catalogId);\n\n if (!isChannelTypeB2B(props.context.actionContext.requestContext) || !catalogId || !ArrayExtensions.hasElements(props.data.catalogs)) {\n return null;\n }\n\n const catalog = props.data.catalogs.find(item => item.RecordId === catalogId);\n\n if (!catalog || !catalog.Name) {\n return null;\n }\n\n return {catalog.Name}
;\n};\n\nconst cartLineItemFunctions = {\n /**\n * Render product dimensions.\n * @param product - Product data.\n * @param dimensionStrings - Dimension strings interface.\n * @returns JSX Element.\n */\n renderProductDimensions: (product: SimpleProduct, dimensionStrings: IDimensionStrings) => {\n if (!product.Dimensions) {\n return [];\n }\n\n return product.Dimensions.map(productDimension => {\n if (productDimension.DimensionTypeValue === ProductDimensionType.Color) {\n return (\n \n \n {dimensionStrings.colorString}\n {': '}\n {productDimension.DimensionValue?.Value} \n \n
\n );\n }\n\n if (productDimension.DimensionTypeValue === ProductDimensionType.Configuration) {\n return (\n \n \n {dimensionStrings.configString}\n {': '}\n {productDimension.DimensionValue?.Value} \n \n
\n );\n }\n\n if (productDimension.DimensionTypeValue === ProductDimensionType.Size) {\n return (\n \n \n {dimensionStrings.sizeString}\n {': '}\n {productDimension.DimensionValue?.Value} \n \n
\n );\n }\n\n if (productDimension.DimensionTypeValue === ProductDimensionType.Style) {\n return (\n \n \n {product.IsGiftCard ? dimensionStrings.amountString : dimensionStrings.styleString}\n {': '}\n {productDimension.DimensionValue?.Value} \n \n
\n );\n }\n return null;\n });\n },\n\n /**\n * Gets the react node for product unit of price display.\n * @param props - The cart line props.\n * @returns The node representing markup for unit of measure component.\n */\n renderProductUnitPrice: (props: ICartLineProps) => {\n if (!props.data.cartLine.Price) {\n return null;\n }\n const zeroQuantity: number = 0;\n return (\n \n
\n zeroQuantity\n ? {\n price: {\n CustomerContextualPrice: props.data.cartLine.Price\n }\n }\n : {\n price: {\n CustomerContextualPrice: props.data.cartLine.Price\n }\n }\n }\n context={props.context}\n id={props.id}\n typeName={props.typeName}\n currencyCode={props.priceCurrency}\n />\n \n
\n
{discountLine.OfferName ? discountLine.OfferName : ''} \n
\n \n
\n {` (${discountLine.Percentage !== undefined ? discountPercent(discountLine, props.data.cartLine) : ''}%)`}\n \n
{props.inventoryInformationLabel}
;\n },\n\n /**\n * Render shipping label.\n * @param props - The cart line props.\n * @returns JSX element.\n */\n renderShippingLabel: (props: ICartLineProps) => {\n const pickupDeliveryModeCode = props.context.request.channel?.PickupDeliveryModeCode;\n const channelDeliveryOptionConfig = props.channelDeliveryOptionConfig;\n const cartline = props.data.cartLine;\n let hasShippingMethod = false;\n if (channelDeliveryOptionConfig !== undefined) {\n hasShippingMethod = !!(\n cartline.DeliveryMode &&\n channelDeliveryOptionConfig.PickupDeliveryModeCodes?.some(deliveryMode => deliveryMode !== cartline.DeliveryMode)\n );\n } else {\n hasShippingMethod = !!(cartline.DeliveryMode && cartline.DeliveryMode !== pickupDeliveryModeCode);\n }\n if (!hasShippingMethod) {\n return undefined;\n }\n\n const shippingChargeLines = (cartline.ChargeLines ?? []).filter(chargeLine => chargeLine.IsShipping);\n\n if (!ArrayExtensions.hasElements(shippingChargeLines)) {\n return undefined;\n }\n\n const defaultCharge: number = 0;\n const freightFee = shippingChargeLines.reduce((chargeTotal, chargeLine) => {\n return chargeTotal + (chargeLine.CalculatedAmount ?? defaultCharge);\n }, defaultCharge);\n\n const priceComponent = (\n {`${props.resources.shippingChargesText}:`} \n {priceComponent} \n \n );\n },\n\n /**\n * Render other charges.\n * @param props - The cart line props.\n * @returns JSX element.\n */\n renderOtherCharges: (props: ICartLineProps) => {\n const cartline = props.data.cartLine;\n const otherCharges = cartline.ChargeLines?.filter(chargeline => !chargeline.IsShipping);\n\n return (\n otherCharges?.map((otherCharge, index) => {\n const itemIndex = index;\n return otherCharge.CalculatedAmount ? (\n \n
{`${String(otherCharge.Description)}:`} \n
\n \n
{props.resources.salesAgreementPricePrompt}
;\n },\n\n renderConfirmedShipDate: (props: ICartLineProps) => {\n if (!props.isSalesLine || props.confirmedShipDate === undefined || StringExtensions.isNullOrEmpty(props.confirmedShipDate)) {\n return null;\n }\n return (\n \n {props.resources.confirmedShipDateLabel} \n {props.confirmedShipDate} \n
\n );\n },\n\n renderRequestDeliveryDate: (props: ICartLineProps) => {\n if (!props.isSalesLine || props.requestDeliveryDate === undefined || StringExtensions.isNullOrEmpty(props.requestDeliveryDate)) {\n return null;\n }\n return (\n \n {props.resources.requestDeliveryDateLabel} \n {props.requestDeliveryDate} \n
\n );\n }\n};\n\n/**\n * Render cartline component.\n * @param props - The cart line props.\n * @returns JSX element.\n */\n// eslint-disable-next-line no-redeclare\nconst CartLine: React.FC = (props: ICartLineProps) => {\n const { isSalesLine, productUrl, resources } = props;\n const { product, cartLine } = props.data;\n\n const destructDimensionStrings = {\n sizeString: resources.sizeString,\n colorString: resources.colorString,\n styleString: resources.styleString,\n configString: resources.configString,\n amountString: resources.amountString\n };\n\n const fallbackImageUrl =\n product &&\n getFallbackImageUrl(\n product.ItemId,\n props.context.actionContext.requestContext.apiSettings,\n props.context.request.app?.config?.OmniChannelMedia\n );\n const productDimensions = product && cartLineItemFunctions.renderProductDimensions(product, destructDimensionStrings);\n const renderProductUnitPrice = cartLineItemFunctions.renderProductUnitPrice(props);\n const imageSettings = props.imageSettings;\n if (imageSettings) {\n imageSettings.cropFocalRegion = true;\n }\n const renderDiscountLines = cartLineItemFunctions.renderDiscountLines(props);\n const renderInventoryLabel = cartLineItemFunctions.renderInventoryLabel(props);\n const renderShippingLabel = cartLineItemFunctions.renderShippingLabel(props);\n const renderOtherCharges = cartLineItemFunctions.renderOtherCharges(props);\n const renderConfirmedShipDate = cartLineItemFunctions.renderConfirmedShipDate(props);\n const renderRequestDeliveryDate = cartLineItemFunctions.renderRequestDeliveryDate(props);\n const renderSalesAgreementPrompt = cartLineItemFunctions.renderSalesAgreementPrompt(props);\n const payLoad = getPayloadObject('click', props.telemetryContent!, '', product?.RecordId.toString());\n const productAttribute = getTelemetryAttributes(props.telemetryContent!, payLoad);\n const productName = product?.Name ?? cartLine.Description;\n const imgeClassName = props.data.cartLine.IsInvoiceLine ? 'msc-cart-line__invoice-image' : 'msc-cart-line__product-image';\n const cartLineContentClassName = props.data.cartLine.IsInvoiceLine ? 'msc-cart-line__invoice-content' : 'msc-cart-line__content';\n\n /**\n * Render other charges.\n * @param newValue - The cart line props.\n * @returns Boolean.\n */\n const onChange = (newValue: number): boolean => {\n if (props.quantityOnChange) {\n return props.quantityOnChange(props.data.cartLine, newValue);\n }\n return true;\n };\n\n /**\n * Generate error message.\n * @returns JSX element.\n */\n const generateErrorMessage = (): JSX.Element | null => {\n if (props.errorMessage) {\n return (\n \n {props.errorMessage} \n
\n );\n }\n\n return null;\n };\n\n /**\n * Render Saving component.\n * @returns JSX element.\n */\n const renderSaving = (): JSX.Element | null => {\n if (!props.data.cartLine.DiscountAmount) {\n return null;\n }\n const discountAmountZero: number = 0;\n\n if (props.data.cartLine.DiscountAmount > discountAmountZero) {\n return (\n <>\n {`${props.resources.discountStringText || 'Discount'}`} \n \n {product.DefaultUnitOfMeasure} \n
\n );\n };\n\n /**\n * Generate quantity and price component.\n * @returns JSX element.\n */\n const generateQuantityAndPrice = (): JSX.Element[] | null => {\n const nodes = [];\n const defaultMaxQuantity: number = 10;\n const singleQuantity: number = 1;\n const unitOfMeasure = renderUnitOfMeasure();\n\n // No quantity selector for invoice line\n if (!props.data.cartLine.IsInvoiceLine) {\n if (props.data.product && props.isQuantityEditable) {\n nodes.push(\n \n
{resources.quantityDisplayString}
\n\n {generateErrorMessage()}\n\n
\n {unitOfMeasure}\n
\n {unitOfMeasure}\n \n {resources.quantityDisplayString}\n {': '}\n \n\n {generateErrorMessage()}\n\n {props.data.cartLine.Quantity} \n \n );\n }\n }\n\n nodes.push(\n \n
\n {renderSaving()}\n {props.isOutOfStock ? renderInventoryLabel : null}\n
\n {props.deliveryLocation} \n
\n );\n } else {\n return (\n \n {props.deliveryLocation} \n
\n );\n }\n };\n\n return (\n \n {MsDyn365.isBrowser ? (\n
\n \n ) : null}\n
\n
\n
\n {MsDyn365.isBrowser ? (\n
\n {productName}\n \n ) : null}\n {ArrayExtensions.hasElements(productDimensions) ? (\n
{productDimensions}
\n ) : (\n ''\n )}\n
\n
\n {renderConfirmedShipDate}\n {renderRequestDeliveryDate}\n {renderUnitOfMeasure()}\n
\n {renderProductUnitPrice}\n {renderInventoryLabel}\n {renderDiscountLines}\n {props.showShippingChargesForLineItems &&
{renderShippingLabel}
}\n {renderOtherCharges}\n {renderSalesAgreementPrompt}\n
\n {generateQuantityAndPrice()}\n {renderSalesAgreementPrompt}\n {props.data.cartLine.IsInvoiceLine && props.data.cartState && props.resources.priceEditorResources && (\n
\n )}\n {_renderStoreLocation()}\n
\n
= msdyn365Commerce.createComponentOverride(\n 'CartLineItem',\n {\n component: CartLine,\n ...cartLineItemFunctions\n }\n);\n\nexport default CartLineItemComponent;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductsDimensionsAvailabilities } from '@msdyn365-commerce/commerce-entities';\nimport {\n IPriceComponentResources,\n ISwatchItem,\n PriceComponent,\n ProductComponentV2SwatchComponent,\n RatingComponent\n} from '@msdyn365-commerce/components';\nimport {\n getCatalogId,\n IAny,\n IComponent,\n IComponentProps,\n ICoreContext,\n IGeneric,\n IGridSettings,\n IImageData,\n IImageSettings,\n Image,\n msdyn365Commerce\n} from '@msdyn365-commerce/core';\n\nimport {\n ArrayExtensions,\n convertDimensionTypeToProductDimensionType,\n Dictionary,\n DimensionTypes,\n generateImageUrl,\n getProductPageUrlSync,\n IDimensionsApp,\n StringExtensions,\n validateCatalogId\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n format,\n getPayloadObject,\n getTelemetryAttributes,\n ITelemetryContent,\n onTelemetryClick\n} from '@msdyn365-commerce-modules/utilities';\nimport React, { useState } from 'react';\n\n/**\n * AttributeSwatch entity interface.\n */\ninterface IAttributeSwatch {\n swatchValue?: string;\n swatchImageUrl?: string;\n swatchColorHexCode?: string;\n isDefault?: boolean;\n productImageUrls?: string[];\n extensionProperties?: ICommerceProperty[];\n}\n\n/**\n * CommerceProperty entity interface.\n */\ninterface ICommerceProperty {\n propertyKey?: string;\n value?: IExtensionPropertyValue;\n}\n\n/**\n * Extension property value entity interface.\n */\ninterface IExtensionPropertyValue {\n isBooleanValue?: boolean;\n byteValue?: number;\n dateTimeOffsetValue?: Date;\n decimalValue?: number;\n integerValue?: number;\n longValue?: number;\n stringValue?: string;\n}\n\n/**\n * ProductDimension entity interface.\n */\ninterface IProductDimension {\n dimensionTypeValue: number;\n dimensionValue?: IProductDimensionValue;\n extensionProperties?: ICommerceProperty[];\n}\n\n/**\n * ProductDimensionValue entity interface.\n */\ninterface IProductDimensionValue {\n recordId: number;\n value?: string;\n dimensionId?: string;\n colorHexCode?: string;\n imageUrl?: string;\n refinerGroup?: string;\n extensionProperties?: ICommerceProperty[];\n}\n\n/**\n * ProductSearchResult entity interface.\n */\nexport interface IProductSearchResult {\n itemId?: string;\n name?: string;\n price: number;\n primaryImageUrl?: string;\n recordId: number;\n trackingId?: string;\n averageRating?: number;\n totalRatings?: number;\n description?: string;\n basePrice?: number;\n minVariantPrice?: number;\n maxVariantPrice?: number;\n displayOrder?: number;\n attributeValues?: IAttributeValue[];\n defaultUnitOfMeasure?: string;\n masterProductId?: number;\n extensionProperties?: ICommerceProperty[];\n}\n\n/**\n * AttributeValue entity interface.\n */\ninterface IAttributeValue {\n name?: string;\n keyName?: string;\n unitOfMeasureSymbol?: string;\n dataTypeValue?: number;\n isBooleanValue?: boolean;\n dateTimeOffsetValue?: Date;\n floatValue?: number;\n integerValue?: number;\n textValue?: string;\n currencyValue?: number;\n currencyCode?: string;\n attributeValueId?: number;\n recordId?: number;\n swatches?: IAttributeSwatch[];\n extensionProperties?: ICommerceProperty[];\n}\n\nexport interface IProductComponentV2Props extends IComponentProps<{ product?: IProductSearchResult }> {\n className?: string;\n imageSettings?: IImageSettings;\n savingsText?: string;\n freePriceText?: string;\n originalPriceText?: string;\n currentPriceText?: string;\n ratingAriaLabel?: string;\n ratingCountAriaLabel?: string;\n allowBack?: boolean;\n telemetryContent?: ITelemetryContent;\n quickViewButton?: React.ReactNode;\n productComparisonButton?: React.ReactNode;\n isEnabledProductDescription?: boolean;\n isPriceMinMaxEnabled?: boolean;\n priceResources?: IPriceComponentResources;\n inventoryLabel?: string;\n dimensionAvailabilities?: IProductsDimensionsAvailabilities[];\n swatchItemAriaLabel?: string;\n}\n\nexport interface IProductComponentV2 extends IComponent {}\n\nconst PriceComponentActions = {};\n\n/**\n * Gets the product page url from the default swatch selected.\n * @param productData - Product card to be rendered.\n * @returns The default color swatch selected if any.\n */\nfunction getDefaultColorSwatchSelected(productData?: IProductSearchResult): IAttributeSwatch | null {\n if (!productData || !productData.attributeValues) {\n return null;\n }\n\n const colorAttribute = productData.attributeValues.find(\n attributeValue => attributeValue.keyName?.toLocaleLowerCase() === DimensionTypes.color\n );\n if (!colorAttribute) {\n return null;\n }\n\n const defaultSwatch = colorAttribute.swatches?.find(item => item.isDefault === true) ?? colorAttribute.swatches?.[0];\n return defaultSwatch ?? null;\n}\n\n/**\n * Gets the product image from the default swatch selected.\n * @param coreContext - Context of the module using the component.\n * @param productData - Product card to be rendered.\n * @returns The product card image url.\n */\nfunction getProductImageUrlFromDefaultColorSwatch(coreContext: ICoreContext, productData?: IProductSearchResult): string | undefined {\n const siteContext = coreContext as ICoreContext;\n const dimensionToPreSelectInProductCard = siteContext.app.config.dimensionToPreSelectInProductCard;\n if (dimensionToPreSelectInProductCard === DimensionTypes.none) {\n return productData?.primaryImageUrl;\n }\n const defaultSwatch = getDefaultColorSwatchSelected(productData);\n return defaultSwatch && ArrayExtensions.hasElements(defaultSwatch.productImageUrls)\n ? generateImageUrl(defaultSwatch.productImageUrls[0], coreContext.request.apiSettings)\n : productData?.primaryImageUrl;\n}\n\n/**\n * Updates the product url link to product details page.\n * @param productDetailsPageUrl - Product page url.\n * @param coreContext - Context of the module using the component.\n * @param queryString - Querystring to be added to the URL.\n * @returns The update product page url.\n */\nfunction updateProductUrl(productDetailsPageUrl: string, coreContext: ICoreContext, queryString: string): string {\n const sourceUrl = new URL(productDetailsPageUrl, coreContext.request.apiSettings.baseUrl);\n if (sourceUrl.search) {\n sourceUrl.search += `&${queryString}`;\n } else {\n sourceUrl.search += queryString;\n }\n\n const updatedUrl = new URL(sourceUrl.href);\n return updatedUrl.pathname + sourceUrl.search;\n}\n\n/**\n * Gets the react node for product unit of measure display.\n * @param unitOfMeasure - DefaultUnitOfMeasure property from product.\n * @returns The node representing markup for unit of measure component.\n */\nfunction renderProductUnitOfMeasure(unitOfMeasure?: string): JSX.Element | null {\n if (!unitOfMeasure) {\n return null;\n }\n return (\n \n {unitOfMeasure} \n
\n );\n}\n\n/**\n * Gets the react node for product availability.\n * @param inventoryAvailabilityLabel - The product information.\n * @returns The node representing markup for product availability.\n */\nfunction renderProductAvailability(inventoryAvailabilityLabel: string | undefined): JSX.Element | null {\n if (!inventoryAvailabilityLabel || inventoryAvailabilityLabel === '') {\n return null;\n }\n\n return (\n \n {inventoryAvailabilityLabel} \n
\n );\n}\n\n/**\n * Renders product comparison button similar to the quick view button.\n * @param productComparisonButton - React element of the button.\n * @param product - Current product info.\n * @param catalogId - Current catalog.\n * @returns React element for the specific product.\n */\nfunction renderProductComparisonButton(\n productComparisonButton: React.ReactNode,\n product: IProductSearchResult,\n catalogId: number\n): JSX.Element | undefined {\n validateCatalogId(catalogId);\n return React.cloneElement(productComparisonButton as React.ReactElement, { product, catalogId });\n}\n\n/**\n * Gets the product page url from the default swatch selected.\n * @param coreContext - Context of the module using the component.\n * @param productUrl - Product page url for the product card.\n * @param productData - Product card to be rendered.\n * @returns The product card image url.\n */\nfunction getProductPageUrlFromDefaultSwatch(\n coreContext: ICoreContext,\n productUrl: string,\n productData?: IProductSearchResult\n): string | undefined {\n const siteContext = coreContext as ICoreContext;\n const dimensionToPreSelectInProductCard = siteContext.app.config.dimensionToPreSelectInProductCard;\n if (dimensionToPreSelectInProductCard === DimensionTypes.none) {\n return productUrl;\n }\n\n const defaultSwatch = getDefaultColorSwatchSelected(productData);\n if (!defaultSwatch || !defaultSwatch.swatchValue) {\n return productUrl;\n }\n\n const queryString = `color=${defaultSwatch.swatchValue}`;\n return updateProductUrl(productUrl, coreContext, queryString);\n}\n\nconst ProductCardV2: React.FC = ({\n data,\n context,\n imageSettings,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText,\n ratingAriaLabel,\n ratingCountAriaLabel,\n allowBack,\n typeName,\n id,\n telemetryContent,\n quickViewButton,\n productComparisonButton,\n isEnabledProductDescription,\n isPriceMinMaxEnabled,\n priceResources,\n inventoryLabel,\n dimensionAvailabilities,\n swatchItemAriaLabel\n}) => {\n const product = data.product;\n\n let productUrl = getProductPageUrlSync(product?.name ?? '', product?.recordId ?? Number.MIN_VALUE, context.actionContext, undefined);\n if (allowBack) {\n productUrl = updateProductUrl(productUrl, context, 'back=true');\n }\n const productImageUrlFromSwatch = getProductImageUrlFromDefaultColorSwatch(context, product) ?? product?.primaryImageUrl;\n const productPageUrlFromSwatch = getProductPageUrlFromDefaultSwatch(context, productUrl, product) ?? productUrl;\n const [productPageUrl, setProductPageUrl] = useState(productPageUrlFromSwatch);\n const [productImageUrl, setProductImageUrl] = useState(productImageUrlFromSwatch);\n React.useEffect(() => {\n setProductPageUrl(productPageUrlFromSwatch);\n setProductImageUrl(productImageUrlFromSwatch);\n }, [productUrl, productPageUrlFromSwatch, productImageUrlFromSwatch]);\n const [selectedSwatchItems] = useState(new Dictionary());\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access -- app context is generic\n const enableStockCheck = context.app.config.enableStockCheck;\n\n /**\n * Updates the product page and Image url based on swatch selected.\n * @param coreContext - Context of the caller.\n * @param swatchItem - Dimension swatch selected.\n */\n const updatePageAndImageUrl = React.useCallback(\n (coreContext: ICoreContext, swatchItem: ISwatchItem) => {\n const dimensionType = swatchItem.dimensionType;\n selectedSwatchItems.setValue(dimensionType, swatchItem);\n if (StringExtensions.isNullOrWhitespace(swatchItem.value)) {\n return;\n }\n const queryString = `${dimensionType}=${swatchItem.value}`;\n let productPageUrlWithSwatch = '';\n if (productPageUrl.includes(dimensionType)) {\n const newUrl = new URL(productPageUrl, coreContext.request.apiSettings.baseUrl);\n newUrl.searchParams.delete(dimensionType);\n productPageUrlWithSwatch = updateProductUrl(newUrl.toString(), context, queryString);\n } else {\n productPageUrlWithSwatch = updateProductUrl(productPageUrl, context, queryString);\n }\n setProductPageUrl(productPageUrlWithSwatch);\n if (dimensionType === DimensionTypes.color) {\n const swatchProductImageUrl = ArrayExtensions.hasElements(swatchItem.productImageUrls)\n ? swatchItem.productImageUrls[0]\n : undefined;\n const newImageUrl = generateImageUrl(swatchProductImageUrl, coreContext.request.apiSettings);\n setProductImageUrl(newImageUrl);\n }\n },\n [selectedSwatchItems, context, productPageUrl]\n );\n\n if (!product) {\n return null;\n }\n\n /**\n * Checks if rendering the particular dimensions is allowed for product card.\n * @param dimensionType - Dimension to be displayed.\n * @returns Updates the state with new product page url.\n */\n function shouldDisplayDimension(dimensionType: string): boolean {\n const dimensionsContext = context as ICoreContext;\n const dimensionsToDisplayOnProductCard = dimensionsContext.app.config.dimensionsInProductCard;\n return (\n ArrayExtensions.hasElements(dimensionsToDisplayOnProductCard) &&\n !dimensionsToDisplayOnProductCard.includes(DimensionTypes.none) &&\n dimensionsToDisplayOnProductCard.includes(dimensionType.toLocaleLowerCase() as DimensionTypes)\n );\n }\n\n /**\n * Gets the react node for product dimension as swatch.\n * @param attributeValues - Attribute value property from product.\n * @returns The node representing markup for unit of measure component.\n */\n function renderProductDimensions(attributeValues?: IAttributeValue[]): JSX.Element | null {\n if (!attributeValues) {\n return null;\n }\n\n return (\n \n {attributeValues.map((item: IAttributeValue) => {\n const dimensionTypeValue = item.keyName?.toLocaleLowerCase() ?? '';\n if (!shouldDisplayDimension(dimensionTypeValue)) {\n return null;\n }\n\n const siteContext = context as ICoreContext
;\n const dimensionToPreSelectInProductCard = siteContext.app.config.dimensionToPreSelectInProductCard;\n const dimensionType = dimensionTypeValue as DimensionTypes;\n const swatches =\n item.swatches?.map(swatchItem => {\n return {\n itemId: `${item.recordId ?? ''}-${dimensionTypeValue}-${swatchItem.swatchValue ?? ''}`,\n value: swatchItem.swatchValue ?? '',\n dimensionType,\n colorHexCode: swatchItem.swatchColorHexCode,\n imageUrl: swatchItem.swatchImageUrl,\n productImageUrls: swatchItem.productImageUrls,\n isDefault: swatchItem.isDefault,\n swatchItemAriaLabel: swatchItemAriaLabel ? format(swatchItemAriaLabel, dimensionType) : '',\n isDisabled:\n enableStockCheck &&\n dimensionAvailabilities?.find(\n dimensionAvailability => dimensionAvailability.value === (swatchItem.swatchValue ?? '')\n )?.isDisabled\n };\n }) ?? [];\n if (\n dimensionToPreSelectInProductCard !== DimensionTypes.none &&\n ArrayExtensions.hasElements(swatches) &&\n !swatches.some(swatch => swatch.isDefault) &&\n dimensionType === DimensionTypes.color\n ) {\n swatches[0].isDefault = true;\n }\n return (\n (swatches => {\n return {\n dimensionTypeValue: convertDimensionTypeToProductDimensionType(swatches.dimensionType),\n dimensionValue: {\n recordId: 0,\n Value: swatches.value\n }\n };\n });\n return React.cloneElement(quickview as React.ReactElement, { selectedProductId: item, selectedDimensions });\n }\n\n // Construct telemetry attribute to render\n const payLoad = getPayloadObject('click', telemetryContent!, '', product.recordId.toString());\n\n const attribute = getTelemetryAttributes(telemetryContent!, payLoad);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- -- Do not need type check for appsettings\n const isUnitOfMeasureEnabled = context.app.config && context.app.config.unitOfMeasureDisplayType === 'buyboxAndBrowse';\n\n return (\n <>\n {isEnabledProductDescription ? (\n \n \n
\n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.primaryImageUrl,\n product.name,\n context\n )}\n
\n
\n
{product.name} \n {renderPrice(\n context,\n typeName,\n id,\n product.basePrice,\n product.price,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText,\n isPriceMinMaxEnabled,\n priceResources\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.defaultUnitOfMeasure)}\n {renderDescription(product.description)}\n \n
\n \n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.primaryImageUrl,\n product.name,\n context\n )}\n
\n \n
{product.name} \n {renderPrice(\n context,\n typeName,\n id,\n product.basePrice,\n product.price,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.defaultUnitOfMeasure)}\n \n \n )}\n {renderProductDimensions(product.attributeValues)}\n {!context.app.config.hideRating &&\n renderRating(context, typeName, id, product.averageRating, product.totalRatings, ratingAriaLabel, ratingCountAriaLabel)}\n {renderProductAvailability(inventoryLabel)}\n {quickViewButton && renderQuickView(quickViewButton, product.recordId)}\n {productComparisonButton && renderProductComparisonButton(productComparisonButton, product, getCatalogId(context.request))}\n \n );\n};\n\nfunction renderLabel(\n name?: string,\n price?: string,\n rating?: number,\n ratingAriaLabelText?: string,\n reviewCount?: number,\n ratingCountAriaLabelText?: string\n): string {\n const reviewCountArialableText = getReviewAriaLabel(reviewCount, ratingCountAriaLabelText ?? '');\n return `${name ?? ''} ${price ?? ''} ${getRatingAriaLabel(rating, ratingAriaLabelText)}${\n reviewCountArialableText ? ` ${reviewCountArialableText}` : ''\n }`;\n}\n\nfunction renderDescription(description?: string): JSX.Element | null {\n return {description}
;\n}\n\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\n if (rating && ratingAriaLabel) {\n const roundedRating = rating.toFixed(2);\n return format(ratingAriaLabel || '', roundedRating, '5');\n }\n return '';\n}\n\nfunction getReviewAriaLabel(reviewCount?: number, ratingCountAriaLabelText?: string): string {\n if (reviewCount && ratingCountAriaLabelText) {\n return format(ratingCountAriaLabelText || '', reviewCount);\n }\n return '';\n}\n\nfunction renderRating(\n coreContext: ICoreContext,\n moduleTypeName: string,\n moduleId: string,\n avgRating?: number,\n totalRatings?: number,\n ariaLabel?: string,\n ratingCountAriaLabel?: string\n): JSX.Element | null {\n if (!avgRating) {\n return null;\n }\n\n const numberRatings = totalRatings?.toString() || undefined;\n const ratingAriaLabelText = getRatingAriaLabel(avgRating, ariaLabel);\n const ratingCountAriaLabelText = getReviewAriaLabel(Number(numberRatings), ratingCountAriaLabel);\n\n return (\n >\n): JSX.Element | null {\n if (!imageUrl || !gridSettings || !imageSettings) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment -- Site level config can be of any type.\n const contextConfig = context?.app.config?.placeholderImageName;\n const emptyPlaceHolderImage = contextConfig as string;\n let fallbackImageSource = fallbackImageUrl;\n if (emptyPlaceHolderImage && fallbackImageUrl) {\n fallbackImageSource = `${fallbackImageUrl},${emptyPlaceHolderImage}`;\n }\n const img: IImageData = {\n src: imageUrl,\n altText: altText ? altText : '',\n fallBackSrc: fallbackImageSource\n };\n const imageProps = {\n gridSettings,\n imageSettings\n };\n imageProps.imageSettings.cropFocalRegion = true;\n return (\n = msdyn365Commerce.createComponentOverride<\n IProductComponentV2\n>('ProductV2', { component: ProductCardV2, ...PriceComponentActions });\n\nexport default ProductComponentV2;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductsDimensionsAvailabilities } from '@msdyn365-commerce/commerce-entities';\nimport {\n IPriceComponentResources,\n ISwatchItem,\n PriceComponent,\n ProductComponentSwatchComponent,\n RatingComponent\n} from '@msdyn365-commerce/components';\nimport {\n getCatalogId,\n IAny,\n IComponent,\n IComponentProps,\n ICoreContext,\n IGeneric,\n IGridSettings,\n IImageData,\n IImageSettings,\n Image,\n msdyn365Commerce\n} from '@msdyn365-commerce/core';\nimport {\n AttributeSwatch,\n AttributeValue,\n ProductDimension,\n ProductPrice,\n ProductSearchResult,\n ProductType,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport {\n ArrayExtensions,\n convertDimensionTypeToProductDimensionType,\n Dictionary,\n DimensionTypes,\n generateImageUrl,\n getProductPageUrlSync,\n IDimensionsApp,\n StringExtensions,\n validateCatalogId\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n format,\n getPayloadObject,\n getTelemetryAttributes,\n ITelemetryContent,\n onTelemetryClick\n} from '@msdyn365-commerce-modules/utilities';\nimport React, { useState } from 'react';\n\nexport interface IProductComponentProps extends IComponentProps<{ product?: ProductSearchResult; productPrice?: ProductPrice }> {\n className?: string;\n imageSettings?: IImageSettings;\n savingsText?: string;\n freePriceText?: string;\n originalPriceText?: string;\n currentPriceText?: string;\n ratingAriaLabel?: string;\n ratingCountAriaLabel?: string;\n allowBack?: boolean;\n telemetryContent?: ITelemetryContent;\n quickViewButton?: React.ReactNode;\n productComparisonButton?: React.ReactNode;\n isEnabledProductDescription?: boolean;\n isPriceMinMaxEnabled?: boolean;\n priceResources?: IPriceComponentResources;\n inventoryLabel?: string;\n dimensionAvailabilities?: IProductsDimensionsAvailabilities[];\n swatchItemAriaLabel?: string;\n}\n\nexport interface IProductComponent extends IComponent {}\n\nconst PriceComponentActions = {};\n\n/**\n * Gets the product page url from the default swatch selected.\n * @param productData - Product card to be rendered.\n * @returns The default color swatch selected if any.\n */\nfunction getDefaultSwatchSelected(coreContext: ICoreContext, productData?: ProductSearchResult): AttributeSwatch | null {\n if (!productData || !productData.AttributeValues) {\n return null;\n }\n\n const siteContext = coreContext as ICoreContext;\n const dimensionToPreSelectInProductCard = siteContext.app.config.dimensionToPreSelectInProductCard;\n\n const attributeSwatches = productData.AttributeValues.find(\n attributeValue => attributeValue.KeyName?.toLocaleLowerCase() === dimensionToPreSelectInProductCard\n )?.Swatches;\n\n if (!ArrayExtensions.hasElements(attributeSwatches)) {\n return null;\n }\n\n const defaultSwatch = attributeSwatches.find(item => item.IsDefault === true) ?? attributeSwatches[0];\n return defaultSwatch;\n}\n\n/**\n * Gets the product image from the default swatch selected.\n * @param coreContext - Context of the module using the component.\n * @param productData - Product card to be rendered.\n * @returns The product card image url.\n */\nfunction getProductImageUrlFromDefaultSwatch(coreContext: ICoreContext, productData?: ProductSearchResult): string | undefined {\n const defaultSwatch = getDefaultSwatchSelected(coreContext, productData);\n const swatchProductImageUrls = defaultSwatch?.ProductImageUrls;\n if (!ArrayExtensions.hasElements(swatchProductImageUrls)) {\n return productData?.PrimaryImageUrl;\n }\n\n return generateImageUrl(swatchProductImageUrls[0], coreContext.request.apiSettings);\n}\n\n/**\n * Updates the product url link to product details page.\n * @param productDetailsPageUrl - Product page url.\n * @param coreContext - Context of the module using the component.\n * @param queryString - Querystring to be added to the URL.\n * @returns The update product page url.\n */\nfunction updateProductUrl(productDetailsPageUrl: string, coreContext: ICoreContext, queryString: string): string {\n const sourceUrl = new URL(productDetailsPageUrl, coreContext.request.apiSettings.baseUrl);\n if (sourceUrl.search) {\n sourceUrl.search += `&${queryString}`;\n } else {\n sourceUrl.search += queryString;\n }\n\n const updatedUrl = new URL(sourceUrl.href);\n return updatedUrl.pathname + sourceUrl.search;\n}\n\n/**\n * Gets the react node for product unit of measure display.\n * @param unitOfMeasure - DefaultUnitOfMeasure property from product.\n * @returns The node representing markup for unit of measure component.\n */\nfunction renderProductUnitOfMeasure(unitOfMeasure?: string): JSX.Element | null {\n if (!unitOfMeasure) {\n return null;\n }\n return (\n \n {unitOfMeasure} \n
\n );\n}\n\n/**\n * Gets the react node for product availability.\n * @param inventoryAvailabilityLabel - The product information.\n * @returns The node representing markup for product availability.\n */\nfunction renderProductAvailability(inventoryAvailabilityLabel: string | undefined): JSX.Element | null {\n if (!inventoryAvailabilityLabel || inventoryAvailabilityLabel === '') {\n return null;\n }\n\n return (\n \n {inventoryAvailabilityLabel} \n
\n );\n}\n\n/**\n * Renders product comparison button similar to the quick view button.\n * @param productComparisonButton - React element of the button.\n * @param product - Current product info.\n * @param catalogId - Current catalog.\n * @returns React element for the specific product.\n */\nfunction renderProductComparisonButton(\n productComparisonButton: React.ReactNode,\n product: ProductSearchResult,\n catalogId: number\n): JSX.Element | undefined {\n validateCatalogId(catalogId);\n return React.cloneElement(productComparisonButton as React.ReactElement, { product, catalogId });\n}\n\n/**\n * Gets the product page url from the default swatch selected.\n * @param coreContext - Context of the module using the component.\n * @param productUrl - Product page url for the product card.\n * @param productData - Product card to be rendered.\n * @returns The product card image url.\n */\nfunction getProductPageUrlFromDefaultSwatch(\n coreContext: ICoreContext,\n productUrl: string,\n productData?: ProductSearchResult\n): string | undefined {\n const defaultSwatch = getDefaultSwatchSelected(coreContext, productData);\n if (!defaultSwatch?.SwatchValue) {\n return productUrl;\n }\n\n const siteContext = coreContext as ICoreContext;\n const dimensionToPreSelectInProductCard = siteContext.app.config.dimensionToPreSelectInProductCard;\n\n const queryStringEncoded = encodeURIComponent(defaultSwatch.SwatchValue);\n const queryString = `${dimensionToPreSelectInProductCard}=${queryStringEncoded}`;\n return updateProductUrl(productUrl, coreContext, queryString);\n}\n\nconst ProductCard: React.FC = ({\n data,\n context,\n imageSettings,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText,\n ratingAriaLabel,\n ratingCountAriaLabel,\n allowBack,\n typeName,\n id,\n telemetryContent,\n quickViewButton,\n productComparisonButton,\n isEnabledProductDescription,\n isPriceMinMaxEnabled,\n priceResources,\n inventoryLabel,\n dimensionAvailabilities,\n swatchItemAriaLabel\n}) => {\n const product = data.product;\n const productPrice = data.productPrice;\n\n let productUrl = getProductPageUrlSync(product?.Name ?? '', product?.RecordId ?? Number.MIN_VALUE, context.actionContext, undefined);\n if (allowBack) {\n productUrl = updateProductUrl(productUrl, context, 'back=true');\n }\n const productImageUrlFromSwatch = getProductImageUrlFromDefaultSwatch(context, product) ?? product?.PrimaryImageUrl;\n const productPageUrlFromSwatch = getProductPageUrlFromDefaultSwatch(context, productUrl, product) ?? productUrl;\n const [productPageUrl, setProductPageUrl] = useState(productPageUrlFromSwatch);\n const [productImageUrl, setProductImageUrl] = useState(productImageUrlFromSwatch);\n React.useEffect(() => {\n setProductPageUrl(productPageUrlFromSwatch);\n setProductImageUrl(productImageUrlFromSwatch);\n }, [productUrl, productPageUrlFromSwatch, productImageUrlFromSwatch]);\n const [selectedSwatchItems] = useState(new Dictionary());\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access -- app context is generic\n const enableStockCheck = context.app.config.enableStockCheck;\n\n const siteContext = context as ICoreContext;\n const dimensionToPreSelectInProductCard = siteContext.app.config.dimensionToPreSelectInProductCard;\n\n /**\n * Updates the product page and Image url based on swatch selected.\n * @param coreContext - Context of the caller.\n * @param swatchItem - Dimension swatch selected.\n */\n const updatePageAndImageUrl = React.useCallback(\n (coreContext: ICoreContext, swatchItem: ISwatchItem) => {\n const dimensionType = swatchItem.dimensionType;\n selectedSwatchItems.setValue(dimensionType, swatchItem);\n if (StringExtensions.isNullOrWhitespace(swatchItem.value)) {\n return;\n }\n const queryString = `${dimensionType}=${swatchItem.value}`;\n let productPageUrlWithSwatch = '';\n if (productPageUrl.includes(dimensionType)) {\n const newUrl = new URL(productPageUrl, coreContext.request.apiSettings.baseUrl);\n newUrl.searchParams.delete(dimensionType);\n productPageUrlWithSwatch = updateProductUrl(newUrl.toString(), context, queryString);\n } else {\n productPageUrlWithSwatch = updateProductUrl(productPageUrl, context, queryString);\n }\n setProductPageUrl(productPageUrlWithSwatch);\n if (dimensionType === dimensionToPreSelectInProductCard) {\n const swatchProductImageUrl = ArrayExtensions.hasElements(swatchItem.productImageUrls)\n ? swatchItem.productImageUrls[0]\n : undefined;\n const newImageUrl = generateImageUrl(swatchProductImageUrl, coreContext.request.apiSettings);\n setProductImageUrl(newImageUrl);\n }\n },\n [selectedSwatchItems, context, productPageUrl]\n );\n\n if (!product) {\n return null;\n }\n\n /**\n * Checks if rendering the particular dimensions is allowed for product card.\n * @param dimensionType - Dimension to be displayed.\n * @returns Updates the state with new product page url.\n */\n function shouldDisplayDimension(dimensionType: string): boolean {\n const dimensionsContext = context as ICoreContext;\n const dimensionsToDisplayOnProductCard = dimensionsContext.app.config.dimensionsInProductCard;\n return (\n ArrayExtensions.hasElements(dimensionsToDisplayOnProductCard) &&\n !dimensionsToDisplayOnProductCard.includes(DimensionTypes.none) &&\n dimensionsToDisplayOnProductCard.includes(dimensionType.toLocaleLowerCase() as DimensionTypes)\n );\n }\n\n /**\n * Gets the react node for product dimension as swatch.\n * @param attributeValues - Attribute value property from product.\n * @returns The node representing markup for unit of measure component.\n */\n function renderProductDimensions(attributeValues?: AttributeValue[]): JSX.Element | null {\n if (!attributeValues) {\n return null;\n }\n\n return (\n \n {attributeValues.map((item: AttributeValue) => {\n const dimensionTypeValue = item.KeyName?.toLocaleLowerCase() ?? '';\n if (!shouldDisplayDimension(dimensionTypeValue)) {\n return null;\n }\n\n const siteContext = context as ICoreContext
;\n const dimensionToPreSelectInProductCard = siteContext.app.config.dimensionToPreSelectInProductCard;\n const dimensionType = dimensionTypeValue as DimensionTypes;\n const swatches =\n item.Swatches?.map(swatchItem => {\n return {\n itemId: `${item.RecordId ?? ''}-${dimensionTypeValue}-${swatchItem.SwatchValue ?? ''}`,\n value: swatchItem.SwatchValue ?? '',\n dimensionType,\n colorHexCode: swatchItem.SwatchColorHexCode,\n imageUrl: swatchItem.SwatchImageUrl,\n productImageUrls: swatchItem.ProductImageUrls,\n isDefault: swatchItem.IsDefault,\n swatchItemAriaLabel: swatchItemAriaLabel ? format(swatchItemAriaLabel, dimensionType) : '',\n isDisabled:\n enableStockCheck &&\n dimensionAvailabilities?.find(\n dimensionAvailability => dimensionAvailability.value === (swatchItem.SwatchValue ?? '')\n )?.isDisabled\n };\n }) ?? [];\n if (\n dimensionType === dimensionToPreSelectInProductCard &&\n ArrayExtensions.hasElements(swatches) &&\n !swatches.some(swatch => swatch.isDefault)\n ) {\n swatches[0].isDefault = true;\n }\n return (\n (swatches => {\n return {\n DimensionTypeValue: convertDimensionTypeToProductDimensionType(swatches.dimensionType),\n DimensionValue: {\n RecordId: 0,\n Value: swatches.value\n }\n };\n });\n return React.cloneElement(quickview as React.ReactElement, { selectedProductId: item, selectedDimensions });\n }\n\n // Construct telemetry attribute to render\n const payLoad = getPayloadObject('click', telemetryContent!, '', product.RecordId.toString());\n\n const attribute = getTelemetryAttributes(telemetryContent!, payLoad);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- -- Do not need type check for appsettings\n const isUnitOfMeasureEnabled = context.app.config && context.app.config.unitOfMeasureDisplayType === 'buyboxAndBrowse';\n\n return (\n <>\n {isEnabledProductDescription ? (\n \n \n
\n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.PrimaryImageUrl,\n product.Name,\n context\n )}\n
\n
\n
{product.Name} \n {renderPrice(\n context,\n typeName,\n id,\n product,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText,\n isPriceMinMaxEnabled,\n priceResources,\n productPrice\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.DefaultUnitOfMeasure)}\n {renderDescription(product.Description)}\n \n
\n \n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.PrimaryImageUrl,\n product.Name,\n context\n )}\n
\n \n
{product.Name} \n {renderPrice(\n context,\n typeName,\n id,\n product,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText,\n isPriceMinMaxEnabled,\n priceResources,\n productPrice\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.DefaultUnitOfMeasure)}\n \n \n )}\n {renderProductDimensions(product.AttributeValues)}\n {!context.app.config.hideRating &&\n renderRating(context, typeName, id, product.AverageRating, product.TotalRatings, ratingAriaLabel, ratingCountAriaLabel)}\n {renderProductAvailability(inventoryLabel)}\n {quickViewButton && renderQuickView(quickViewButton, product.RecordId)}\n {productComparisonButton && renderProductComparisonButton(productComparisonButton, product, getCatalogId(context.request))}\n \n );\n};\n\nfunction renderLabel(\n name?: string,\n price?: string,\n rating?: number,\n ratingAriaLabelText?: string,\n reviewCount?: number,\n ratingCountAriaLabelText?: string\n): string {\n const reviewCountArialableText = getReviewAriaLabel(reviewCount, ratingCountAriaLabelText ?? '');\n return `${name ?? ''} ${price ?? ''} ${getRatingAriaLabel(rating, ratingAriaLabelText)}${\n reviewCountArialableText ? ` ${reviewCountArialableText}` : ''\n }`;\n}\n\nfunction renderDescription(description?: string): JSX.Element | null {\n return {description}
;\n}\n\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\n if (rating && ratingAriaLabel) {\n const roundedRating = rating.toFixed(2);\n return format(ratingAriaLabel || '', roundedRating, '5');\n }\n return '';\n}\n\nfunction getReviewAriaLabel(reviewCount?: number, ratingCountAriaLabelText?: string): string {\n if (reviewCount && ratingCountAriaLabelText) {\n return format(ratingCountAriaLabelText || '', reviewCount);\n }\n return '';\n}\n\nfunction renderRating(\n coreContext: ICoreContext,\n moduleTypeName: string,\n moduleId: string,\n avgRating?: number,\n totalRatings?: number,\n ariaLabel?: string,\n ratingCountAriaLabel?: string\n): JSX.Element | null {\n if (!avgRating) {\n return null;\n }\n\n const numberRatings = totalRatings?.toString() || undefined;\n const ratingAriaLabelText = getRatingAriaLabel(avgRating, ariaLabel);\n const ratingCountAriaLabelText = getReviewAriaLabel(Number(numberRatings), ratingCountAriaLabel);\n\n return (\n >\n): JSX.Element | null {\n if (!imageUrl || !gridSettings || !imageSettings) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment -- Site level config can be of any type.\n const contextConfig = context?.app.config?.placeholderImageName;\n const emptyPlaceHolderImage = contextConfig as string;\n let fallbackImageSource = fallbackImageUrl;\n if (emptyPlaceHolderImage && fallbackImageUrl) {\n fallbackImageSource = `${fallbackImageUrl},${emptyPlaceHolderImage}`;\n }\n const img: IImageData = {\n src: imageUrl,\n altText: altText ? altText : '',\n fallBackSrc: fallbackImageSource\n };\n const imageProps = {\n gridSettings,\n imageSettings\n };\n imageProps.imageSettings.cropFocalRegion = true;\n return (\n = msdyn365Commerce.createComponentOverride<\n IProductComponent\n>('Product', { component: ProductCard, ...PriceComponentActions });\n\nexport default ProductComponent;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IComponent, IComponentProps } from '@msdyn365-commerce/core';\nimport { ICartState } from '@msdyn365-commerce/global-state';\nimport { Coupon } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n Button,\n format,\n getPayloadObject,\n getTelemetryAttributes,\n IPayLoad,\n ITelemetryContent,\n TelemetryConstant\n} from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\n/**\n * IPromoCodeProps: Interface for promo code component.\n */\nexport interface IPromoCodeProps extends IComponentProps<{}> {\n cart: ICartState | undefined;\n promoCodeHeadingText: string;\n appliedPromoCodeHeadingText: string;\n removePromoAriaLabelFormat: string;\n promoPlaceholderText: string;\n promoCodeApplyButtonText: string;\n collapseTimeOut: number;\n removePromoText: string;\n invalidPromoCodeErrorText: string;\n failedToAddPromoCodeErrorText: string;\n duplicatePromoCodeErrorText: string;\n failedToRemovePromoCodeErrorText: string;\n\n /**\n * The telemetry content.\n */\n telemetryContent?: ITelemetryContent;\n promoCodeApplyCallback?(): void;\n}\n\n/**\n * IPromoCodeProps: Interface for promo code component.\n */\nexport interface IPromoCodeComponent extends IComponent {}\n\n/**\n * IPromoCodeProps: Interface for promo code state.\n */\ninterface IPromoCodeState {\n promoCodeInputValue: string;\n error: string;\n canApply: boolean;\n}\n\n/**\n *\n * The PromoCode component renders the promocode section.\n * @extends {React.PureComponent}\n */\nclass PromoCode extends React.PureComponent {\n private readonly payLoad: IPayLoad;\n\n public constructor(props: IPromoCodeProps) {\n super(props);\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, TelemetryConstant.ApplyPromoCode);\n this.state = {\n promoCodeInputValue: '',\n error: '',\n canApply: false\n };\n }\n\n public render(): JSX.Element {\n return (\n \n
{this.props.promoCodeHeadingText}
\n {this._renderForm(this.props.promoPlaceholderText, this.props.promoCodeApplyButtonText, this.props.cart)}\n
\n {this.state.error}\n
\n {this._renderAppliedPromoCode(this.props)}\n
) => {\n const error = event.target.value === '' ? '' : this.state.error;\n this.setState({\n promoCodeInputValue: event.target.value.trim(),\n error,\n canApply: !!event.target.value\n });\n };\n\n /**\n * Apply promo code method.\n * @param cartState - Cart state interface.\n */\n private readonly _applyPromotion = (cartState: ICartState | undefined) => {\n if (!cartState) {\n return;\n }\n const appliedPromo = this.state.promoCodeInputValue;\n\n cartState\n .addPromoCode({ promoCode: appliedPromo })\n .then(result => {\n if (result.status === 'SUCCESS') {\n // Show success text\n this.setState({ promoCodeInputValue: '', error: '', canApply: false });\n } else if (result.substatus === 'ALREADYADDED') {\n this.setState({ error: this.props.duplicatePromoCodeErrorText });\n } else {\n this.setState({ error: this.props.invalidPromoCodeErrorText });\n }\n })\n .catch(() => {\n this.setState({ error: this.props.failedToAddPromoCodeErrorText });\n });\n };\n\n /**\n * On submit action.\n * @param cartState - Cart state.\n * @returns Apply promotion.\n */\n private readonly _onSubmitHandler = (cartState: ICartState | undefined) => (event: React.FormEvent) => {\n event.preventDefault();\n this._applyPromotion(cartState);\n };\n\n /**\n * On apply promotion.\n * @param cartState - Cart state.\n * @returns Apply promotion.\n */\n private readonly applyPromotionHandler = (cartState: ICartState | undefined) => () => {\n this._applyPromotion(cartState);\n };\n\n /**\n * Renders promo code form.\n * @param promoPlaceholderText - Promo code input box placeholder string.\n * @param promoCodeApplyButtonText - Promo code button text string.\n * @param cartState - Cart state interface.\n * @returns Promo code form.\n */\n private readonly _renderForm = (promoPlaceholderText: string, promoCodeApplyButtonText: string, cartState: ICartState | undefined) => {\n const attributes = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\n\n return (\n \n );\n };\n\n /**\n * Remove promo code method.\n * @param cartState - Cart state interface.\n * @param event - Mouse event.\n */\n private readonly _removePromotion = (cartState: ICartState | undefined, event: React.MouseEvent) => {\n if (!cartState) {\n return;\n }\n const code = event.currentTarget.getAttribute('data-value') ?? '';\n cartState\n .removePromoCodes({\n promoCodes: [code]\n })\n .then(result => {\n if (result.status === 'SUCCESS') {\n this.setState({ error: '' });\n }\n })\n .catch(() => {\n this.setState({ error: this.props.failedToRemovePromoCodeErrorText });\n });\n };\n\n /**\n * Renders applied promo code form.\n * @param props - Promo code component props.\n * @returns Applied promo code.\n */\n private readonly _renderAppliedPromoCode = (props: IPromoCodeProps) => {\n if (!props.cart || !props.cart.cart.Coupons || !ArrayExtensions.hasElements(props.cart.cart.Coupons)) {\n return;\n }\n\n /**\n * On remove promotion action.\n * @param event - Mouse event.\n */\n const removePromotionHandler = (event: React.MouseEvent) => {\n this._removePromotion(props.cart, event);\n };\n\n return (\n <>\n {props.cart.cart.Coupons.map((coupon: Coupon) => {\n const ariaLabel = props.removePromoAriaLabelFormat\n ? format(props.removePromoAriaLabelFormat, props.removePromoText, coupon.Code)\n : '';\n\n return (\n \n
\n {'Code '}\n {coupon.Code} \n {'Applied '}\n
\n
\n
i.value&&(i.value=r,i.entries=a,t())},u=s(\"layout-shift\",c);u&&(t=d(e,i,b,n.reportAllChanges),p((function(){c(u.takeRecords()),t(!0)})),o((function(){r=0,i=f(\"CLS\",0),t=d(e,i,b,n.reportAllChanges),l((function(){return t()}))})),setTimeout(t,0))})))},A={passive:!0,capture:!0},I=new Date,P=function(i,r){e||(e=r,n=i,t=new Date,k(removeEventListener),F())},F=function(){if(n>=0&&n1e12?new Date:performance.now())-e.timeStamp;\"pointerdown\"==e.type?function(e,n){var t=function(){P(e,n),r()},i=function(){r()},r=function(){removeEventListener(\"pointerup\",t,A),removeEventListener(\"pointercancel\",i,A)};addEventListener(\"pointerup\",t,A),addEventListener(\"pointercancel\",i,A)}(n,e):P(n,e)}},k=function(e){[\"mousedown\",\"keydown\",\"touchstart\",\"pointerdown\"].forEach((function(n){return e(n,M,A)}))},D=[100,300],x=function(t,r){r=r||{},C((function(){var a,c=E(),u=f(\"FID\"),l=function(e){e.startTimen.latency){if(t)t.entries.push(e),t.latency=Math.max(t.latency,e.duration);else{var i={id:e.interactionId,latency:e.duration,entries:[e]};J[i.id]=i,G.push(i)}G.sort((function(e,n){return n.latency-e.latency})),G.splice(10).forEach((function(e){delete J[e.id]}))}},Q=function(e,n){n=n||{},C((function(){var t;q();var i,r=f(\"INP\"),a=function(e){e.forEach((function(e){(e.interactionId&&K(e),\"first-input\"===e.entryType)&&(!G.some((function(n){return n.entries.some((function(n){return e.duration===n.duration&&e.startTime===n.startTime}))}))&&K(e))}));var n,t=(n=Math.min(G.length-1,Math.floor(z()/50)),G[n]);t&&t.latency!==r.value&&(r.value=t.latency,r.entries=t.entries,i())},c=s(\"event\",a,{durationThreshold:null!==(t=n.durationThreshold)&&void 0!==t?t:40});i=d(e,r,j,n.reportAllChanges),c&&(\"PerformanceEventTiming\"in window&&\"interactionId\"in PerformanceEventTiming.prototype&&c.observe({type:\"first-input\",buffered:!0}),p((function(){a(c.takeRecords()),r.value<0&&z()>0&&(r.value=0,r.entries=[]),i(!0)})),o((function(){G=[],_=O(),r=f(\"INP\"),i=d(e,r,j,n.reportAllChanges)})))}))},U=[2500,4e3],V={},W=function(e,n){n=n||{},C((function(){var t,i=E(),r=f(\"LCP\"),a=function(e){var n=e[e.length-1];n&&n.startTimeperformance.now())return;t.value=Math.max(a-u(),0),t.entries=[r],i(!0),o((function(){t=f(\"TTFB\",0),(i=d(e,t,X,n.reportAllChanges))(!0)}))}}))};export{b as CLSThresholds,L as FCPThresholds,D as FIDThresholds,j as INPThresholds,U as LCPThresholds,X as TTFBThresholds,S as getCLS,w as getFCP,x as getFID,Q as getINP,W as getLCP,Z as getTTFB,S as onCLS,w as onFCP,x as onFID,Q as onINP,W as onLCP,Z as onTTFB};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nexport interface ITTLCacheOptions {\n removalThresholdInMs?: number;\n intervalForRemovalInMs?: number;\n}\n\nexport type TOnRemoveCallback = (removedKey: string) => void;\n/**\n * Cache with TTL and polling to remove items from it, default implementaiton is to only poll on server\n */\nexport class TTLCache {\n // threshold for removal, 5mins\n public readonly removalThresholdInMs: number;\n\n // frequency of cleaning, 2mins -- this is the period it'll look for keys older than removalThresholdInMs\n public readonly intervalForRemovalInMs: number;\n\n // internal cache\n private _cache: Map;\n\n constructor(options?: ITTLCacheOptions) {\n this.removalThresholdInMs = (options && options.removalThresholdInMs) || 300000;\n this.intervalForRemovalInMs = (options && options.intervalForRemovalInMs) || 120000;\n this._cache = new Map();\n\n if (process.env.CURRENT_ENVIRONMENT === 'node') {\n // interval trigger to clear the map -- only on server\n setInterval(() => this._cleanCache(), this.intervalForRemovalInMs);\n }\n }\n\n /**\n * Gets a value from cache\n *\n * @param {string} key the key\n * @returns {(TValue | undefined)} the value, if it exists\n */\n public get(key: string): TValue | undefined {\n const value = this._cache.get(key);\n if (value) {\n return value[0];\n }\n }\n\n /**\n * Set a value\n *\n * @param {string} key the key\n * @param {TValue} value the value\n */\n public set(key: string, value: TValue, onRemoveCallback?: TOnRemoveCallback): void {\n const now = Date.now();\n this._cache.set(key, [value, now, onRemoveCallback]);\n }\n\n public clear(): void {\n this._cache.clear();\n }\n\n // cleans up the map implementation\n private _cleanCache(): void {\n const now = Date.now();\n const keys = this._cache.keys();\n for (const key of keys) {\n const value = this._cache.get(key);\n if (value && value.length > 1 && now - value[1] > this.removalThresholdInMs) {\n this._cache.delete(key);\n if (typeof value[2] === 'function') {\n value[2](key);\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 { TTLCache } from './ttl-cache';\n\nexport interface IRequestVectorizerOptions {\n removalThresholdInMs?: number;\n intervalForRemovalInMs?: number;\n}\n\n/**\n * Class which handles vectorizing requests\n */\nclass RequestVectorizer {\n // differentiate vectors generated client/server side\n public static SEP: string = process.env.CURRENT_ENVIRONMENT === 'node' ? '.' : '/';\n private _cache: TTLCache;\n\n constructor(options?: IRequestVectorizerOptions) {\n this._cache = new TTLCache(options);\n // binds\n this.next = this.next.bind(this);\n }\n\n /**\n * The next request in the sequence\n *\n * @param {string} requestId\n * @returns {string} the next vectorized request\n */\n public next(requestId: string): string {\n const value = this._cache.get(requestId);\n const nextValue = value === undefined ? 0 : value + 1;\n this._cache.set(requestId, nextValue);\n return `${requestId}${RequestVectorizer.SEP}${nextValue}`;\n }\n}\nconst RequestVectorizerInstance = new RequestVectorizer();\nexport { RequestVectorizerInstance, RequestVectorizer };\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IEventRetailServerRequestProperties, StaticTelemetry } from '@msdyn365-commerce/telemetry-internal';\nimport { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';\nimport { isEmpty as _isEmpty } from 'lodash';\nimport url from 'url';\nimport { TelemetryClient } from 'applicationinsights';\nimport { RequestVectorizerInstance } from './request-vectorizer';\nimport { TTLCache } from './ttl-cache';\n\n/**\n * Regular expression to match content inside round braces\n */\nconst regexGetRoundBraces = /\\(.+?\\)/gm;\n\n/**\n * Default client error\n */\nconst DEFAULT_ERROR_STATUS_CODE = 418;\n\n/**\n * Formats commerce URL parts used in retail server calls with odata formatting\n *\n * @param inputString The input string to replace\n * @param replaceString The replacement value, default of `(~)`.\n */\nexport const replaceIdentifiers = (inputString: string | undefined, replaceString?: string) => {\n return (inputString || '').replace(regexGetRoundBraces, replaceString || `(~)`);\n};\n\n/**\n * Helper mapping lowercase keys to real keys in an object. Note this returns the keys only, mapping\n * lower case key to the actual cased key name in the dictionary\n *\n * e.g.\n *\n * HelloWorld will be returned as 'helloworld' allowing you to look up 'helloworld' to get HelloWorld to index into the real dictionary\n * @param objectDictionary the object dictionary\n */\nexport const toLowerCaseDict = (objectDictionary): { [lowerCaseKeyName: string]: string } => {\n return Object.keys(objectDictionary || {}).reduce(\n (prevValue, current) => ({ ...prevValue, [current.toLocaleLowerCase()]: current }),\n {}\n );\n};\n\nconst ttlRequestCache = new TTLCache();\n\n/**\n * Error retail se interceptor for axios\n *\n * @param config The request cofiguration\n * @param status The response status code\n * @param requestCache The optional request cache to use (mostly for testing)\n */\n\nexport const RSErrorResponseHandler = (\n config: AxiosRequestConfig,\n status: number,\n requestCache?: TTLCache\n) => {\n if (!requestCache) {\n requestCache = ttlRequestCache;\n }\n const headers = config && config.headers;\n let requestId;\n let activityId;\n if (headers) {\n const lowercaseHeaders = toLowerCaseDict(headers);\n requestId = lowercaseHeaders.requestid && headers[lowercaseHeaders.requestid];\n activityId = lowercaseHeaders.activityid && headers[lowercaseHeaders.activityid];\n }\n const statusCode = status ? status : DEFAULT_ERROR_STATUS_CODE;\n const properties = requestCache.get(requestId);\n if (properties) {\n const elapsedTime = StaticTelemetry.stopTimer(requestId);\n const parsedUrl = url.parse((config && (config.url || config.baseURL)) || '');\n StaticTelemetry.trackDependency({\n duration: elapsedTime,\n method: (properties.m || 'unknown').toUpperCase(),\n name: properties.e,\n resultCode: statusCode,\n success: status < 400,\n url: parsedUrl,\n target: parsedUrl.hostname,\n properties: {\n requestId,\n activityId,\n empty: false\n },\n dependencyName: 'RetailServer'\n });\n }\n};\n\n/**\n * Response interceptor for axios\n *\n * @param response The resposne\n * @param requestCache The optional request cache to use (mostly for testing)\n */\nexport const RSResponseInterceptor = (response: AxiosResponse, requestCache?: TTLCache) => {\n if (!requestCache) {\n requestCache = ttlRequestCache;\n }\n // try get properties from request based on requestid header\n let requestId;\n let activityId;\n if (process.env.CURRENT_ENVIRONMENT !== 'node') {\n // on web we need to check config\n const headers = response && response.config && response.config.headers;\n if (headers) {\n const lowercaseHeaders = toLowerCaseDict(headers);\n requestId = lowercaseHeaders.requestid && headers[lowercaseHeaders.requestid];\n activityId = lowercaseHeaders.activityid && headers[lowercaseHeaders.activityid];\n }\n } else {\n requestId = response && response.headers && response.headers.requestid;\n activityId = response && response.headers && response.headers.activityid;\n }\n const properties = requestCache.get(requestId);\n if (properties) {\n const elapsedTime = StaticTelemetry.stopTimer(requestId);\n const { config, status, request } = response;\n const parsedUrl = url.parse((config && (config.url || config.baseURL)) || '');\n StaticTelemetry.trackDependency({\n duration: elapsedTime,\n method: (properties.m || (request && request.method) || 'unknown').toUpperCase(),\n name: properties.e,\n resultCode: status,\n success: status < 400,\n url: parsedUrl,\n target: parsedUrl.hostname,\n properties: {\n requestId,\n activityId,\n empty: _isEmpty(response.data),\n ...(properties.ahs && { authTokenSize: properties.ahs })\n },\n dependencyName: 'RetailServer'\n });\n }\n\n return response;\n};\n\n/**\n * Captures outgoing calls to retail server\n */\nexport const RSRequestInterceptor = (request: AxiosRequestConfig) => {\n if (!request || !request.headers) {\n return request;\n }\n const requestHeaders = request.headers;\n const caseInsensitiveHeaderMap = toLowerCaseDict(requestHeaders);\n\n // check if it's an outgoing request to retail server\n\n if (caseInsensitiveHeaderMap.oun && request.url) {\n // get the API endpoint\n const parsedUrl = url.parse(request.url, false);\n const apiEndPoint = replaceIdentifiers(parsedUrl.pathname);\n\n // associate with the request-id vector\n const requestIdVector = requestHeaders[caseInsensitiveHeaderMap['request-id']] || '';\n\n const authorizationHeader: string = (requestHeaders[caseInsensitiveHeaderMap['authorization']] || '').toString();\n let authorizationHeaderLength = 0;\n\n if (authorizationHeader && authorizationHeader.toLowerCase().indexOf('bearer') > -1) {\n const authArray = authorizationHeader.split(' ');\n if (authArray.length > 1) {\n authorizationHeaderLength = authArray[1].length;\n }\n }\n\n // associate with the requestid (non-vectored)\n const caseInsensitiveRequestIdHeaderName = caseInsensitiveHeaderMap.requestid || 'requestid';\n const currentRequestId = requestHeaders[caseInsensitiveRequestIdHeaderName] || 'undefined';\n const requestId = RequestVectorizerInstance.next(currentRequestId.toString());\n\n StaticTelemetry.startTimer(requestId);\n\n const properties: IEventRetailServerRequestProperties = {\n // method\n m: request.method!,\n // endpoint\n e: apiEndPoint,\n // request vector\n rv: requestIdVector.toString(),\n // request id\n r: requestId\n };\n\n if (authorizationHeader) {\n // Authorization header size\n properties.ahs = authorizationHeaderLength.toString();\n }\n\n // add to cache\n ttlRequestCache.set(requestId, properties, () => {\n StaticTelemetry.stopTimer(requestId);\n });\n\n request.headers[caseInsensitiveRequestIdHeaderName] = requestId;\n }\n\n return request;\n};\n\nexport const RSRequestInterceptorErrorHandler = (error: AxiosError) => {\n if (error.request) {\n RSRequestInterceptor(error.request);\n }\n\n throw error;\n};\n\nexport const RSResponseInterceptorErrorHandler = (error: AxiosError) => {\n if (error.response) {\n RSResponseInterceptor(error.response);\n } else if (error.config) {\n RSErrorResponseHandler(error.config, DEFAULT_ERROR_STATUS_CODE);\n }\n\n throw error;\n};\nexport const DataBaseType = {\n RequestData: 'RequestData',\n RemoteDependencyData: 'RemoteDependencyData',\n ExceptionData: 'ExceptionData'\n};\n\nexport const copyEventsToSecondaryInstance = (secondaryTelemetryInstance: TelemetryClient) => (envelope, context) => {\n const { data } = envelope;\n if (data.baseType === DataBaseType.RequestData) {\n secondaryTelemetryInstance.trackRequest({\n name: data.baseData.name,\n url: data.baseData.url,\n source: data.baseData.source,\n duration: data.baseData.duration,\n resultCode: data.baseData.duration,\n success: data.baseData.success\n });\n }\n if (data.baseType === DataBaseType.RemoteDependencyData) {\n secondaryTelemetryInstance.trackDependency({\n dependencyTypeName: data.baseData.dependencyTypeName,\n target: data.baseData.target,\n name: data.baseData.name,\n data: data.baseData.data,\n duration: data.baseData.duration,\n resultCode: data.baseData.resultCode,\n success: data.baseData.success\n });\n }\n if (data.baseType === DataBaseType.ExceptionData) {\n secondaryTelemetryInstance.trackException({\n exception: JSON.parse(JSON.stringify(data.baseData)).exceptions[0]\n });\n }\n return true;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { createObservableDataAction } from '@msdyn365-commerce/action-internal';\nimport msdyn365Commerce, {\n getFriendlyName,\n getParameterizeFeatureFlagsWithRequestContext,\n IAction,\n IActionContext,\n IParameterizeFeatureFlags,\n parameterize,\n checkVersionForFeature,\n getCatalogIdForSdk\n} from '@msdyn365-commerce/core-internal';\nimport { getCategoriesAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/CategoriesDataActions.g';\nimport { getByIdAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductsDataActions.g';\nimport { Category, SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { CategoryLinkInput, IPageTypeContext, ProductLinkInput } from '../hydrator-action-inputs';\n\ntype CategoryWithNeutralizedName = Category & { NeutralizedName?: string };\n/**\n * Computes a root category's SLUG\n *\n * @param rootCategory The category for which you want to determine the slug\n * @param ctx Action context\n */\nexport const getCategorySlug = (\n rootCategory: CategoryWithNeutralizedName,\n categories: CategoryWithNeutralizedName[],\n parameterizeFeatureFlags?: IParameterizeFeatureFlags,\n context?: IActionContext\n): string => {\n let slug: string = parameterize(rootCategory.Name, undefined, parameterizeFeatureFlags, rootCategory.NeutralizedName);\n let currentCategory: Category = rootCategory;\n while (currentCategory.ParentCategory) {\n const parentId = currentCategory.ParentCategory;\n const parentCategory: CategoryWithNeutralizedName | undefined = categories.find((category: Category) => {\n if (category.RecordId) {\n return category.RecordId === parentId;\n }\n return false;\n });\n if (!parentCategory) {\n break;\n }\n\n let parentCategoryWithLocalizedName = parentCategory;\n if (context && isUrlLocalizationEnabled(parameterizeFeatureFlags)) {\n const localName = getFriendlyName(context.requestContext.locale, parentCategory.NameTranslations);\n parentCategoryWithLocalizedName = { ...parentCategory };\n parentCategoryWithLocalizedName.NeutralizedName = parentCategory.Name;\n parentCategoryWithLocalizedName.Name = localName || parentCategoryWithLocalizedName.NeutralizedName;\n }\n\n slug = `${parameterize(\n parentCategoryWithLocalizedName.Name,\n undefined,\n parameterizeFeatureFlags,\n parentCategoryWithLocalizedName.NeutralizedName\n )}/${slug}`;\n currentCategory = parentCategoryWithLocalizedName;\n }\n return slug.length > 0 ? `/${slug}` : '';\n};\n\nconst isUrlLocalizationEnabled = (parameterizeFeatureFlags?: IParameterizeFeatureFlags) => {\n return (\n (msdyn365Commerce.platformSettings && msdyn365Commerce.platformSettings.enableUrlLocalization) ||\n (parameterizeFeatureFlags && parameterizeFeatureFlags.enableUrlLocalization)\n );\n};\n\n/**\n * Returns an object containing information used to by the URL builder to build\n * the formatted product or category URL\n * =\n * @param input Action input\n * @param context Action context\n */\nconst getPageTypeContextById = async (input: ProductLinkInput | CategoryLinkInput, context: IActionContext): Promise => {\n // If product ID exits get the product details for that product\n const pageTypeContext: IPageTypeContext = {};\n if (input instanceof ProductLinkInput && input.productId) {\n try {\n const product: SimpleProduct = await getByIdAsync({ callerContext: context }, input.productId, input.channelId);\n if (!(product && product.Name)) {\n throw new Error(`Unable to retrieve product details for product id: ${input.productId}`);\n }\n pageTypeContext.product = { Name: product.Name || '', RecordId: product.RecordId };\n } catch (err) {\n context.telemetry.error(err);\n throw new Error(`Unable run getById action. Error: ${err}`);\n }\n }\n const catalogFeature = checkVersionForFeature('catalogFeature');\n const catalogid = (catalogFeature && getCatalogIdForSdk(context.requestContext, 0)) || undefined;\n\n // Get the category details for the passed category id\n // @ts-ignore old retail proxy contract does not have catalogid.\n return getCategoriesAsync({ callerContext: context }, input.channelId, catalogid)\n .then((categories: Category[]) => {\n // Find the category by id from the list of returned categories\n const rootCategory: Category | undefined = categories.find((category: Category) => {\n if (category.RecordId) {\n return category.RecordId === input.categoryId;\n }\n return false;\n });\n if (!rootCategory) {\n throw new Error(`Unable to retrieve category details for category id: ${input.categoryId}`);\n }\n const localName = getFriendlyName(context.requestContext.locale, rootCategory.NameTranslations);\n const rootCategoryWithNeutralizedName = { ...rootCategory };\n rootCategoryWithNeutralizedName.NeutralizedName = rootCategory.Name;\n rootCategoryWithNeutralizedName.Name = localName || rootCategoryWithNeutralizedName.NeutralizedName;\n // Compute the found category's slug\n const parameterizeFeatureFlags: IParameterizeFeatureFlags = getParameterizeFeatureFlagsWithRequestContext(\n context.requestContext\n );\n const slug = getCategorySlug(rootCategoryWithNeutralizedName, categories, parameterizeFeatureFlags, context);\n pageTypeContext.category = { Slug: slug, RecordId: rootCategoryWithNeutralizedName.RecordId };\n return Promise.resolve(pageTypeContext);\n })\n .catch(err => {\n // In the event of an error return just the category id\n context.telemetry.error(err);\n throw new Error(`Unable to run getCategories action. Error: ${err}`);\n });\n};\n\nexport const getPageTypeContextByIdAction = createObservableDataAction({\n action: >getPageTypeContextById\n});\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IActionContext, IModuleContract } from '@msdyn365-commerce/core-internal';\nimport { PROCESS_TYPE } from '../consts';\nimport { IProductListMetaData, IServerLink } from './hydrator-action-inputs';\nimport { hydrateLink } from './link-hydrator';\nimport { hydrateProductList } from './product-list-hydrator';\n\nconst TYPE_KEY = 'type';\nconst LIST_TYPE_KEY = 'listType';\n\n/**\n * Recusrively traverses a module's config properties to find link/list types to transform\n *\n * @param obj The current object\n * @param context The current action context\n */\nconst searchForComplexType = (\n obj: unknown,\n context: IActionContext,\n moduleId?: string,\n propertyToMapInConfig?: string\n): Promise[] => {\n const promisesArray: Promise[] = [];\n if (!obj) {\n return promisesArray;\n }\n if (Array.isArray(obj)) {\n for (let i = 0; i < obj.length; i++) {\n promisesArray.push(...searchForComplexType(obj[i], context, moduleId, propertyToMapInConfig));\n }\n } else if (typeof obj === 'object' && obj) {\n const children = Object.keys(obj);\n\n // Link scenario ('type' is defined)\n if (obj[TYPE_KEY]) {\n promisesArray.push(hydrateLink(obj, context));\n // ProductList scenario ('list_type') is defined\n } else if (obj[LIST_TYPE_KEY]) {\n promisesArray.push(hydrateProductList(obj, context, moduleId, propertyToMapInConfig));\n } else if (children.length > 0) {\n for (let i = 0; i < children.length; i++) {\n promisesArray.push(...searchForComplexType(obj[children[i]], context, moduleId, children[i]));\n }\n }\n }\n\n return promisesArray;\n};\n\n/**\n * Entry point, processes a page response and looks for link and list types\n * to transform\n *\n * @param pageResponse The inital page response\n * @param context The current action context\n */\nexport const processComplexDataTypes = async (\n lazyloadAllDataActions: boolean,\n processType: string,\n pageSlots: IModuleContract[],\n context: IActionContext\n) => {\n const promisesArray = processComplexDataTypesAsync(lazyloadAllDataActions, processType, pageSlots, context);\n if (promisesArray) {\n await Promise.all(promisesArray);\n }\n};\n\nexport const processComplexDataTypesAsync = (\n lazyLoadAllDataActions: boolean,\n processType: string,\n pageSlots: IModuleContract[],\n context: IActionContext\n) => {\n if (pageSlots && pageSlots.length) {\n const promisesArray: Promise[] = [];\n let lazyLoadAllModuleQueryString; // Query string switch to lazyLoad all modules\n const requestContext = context.requestContext;\n const requestContextFeatures = requestContext.features;\n const clientRenderModules = 'clientRender_modules';\n const clientRenderAllModuleQueryString = 'client_render_all_modules';\n\n // Feature switch for lazyLoading render and data action currently for product collection module\n let lazyLoadModuleFeature = requestContextFeatures[clientRenderModules];\n\n // Query param to lazyLoad all modules\n if (requestContext.query && requestContext.query.clientRenderAllModuleQueryString) {\n lazyLoadAllModuleQueryString = requestContext.query[clientRenderAllModuleQueryString];\n }\n\n // If request is coming from the editor then, turn off all lazyloading feature\n if (requestContext.params && requestContext.params.isEditor && requestContext.params.isEditor === true) {\n lazyLoadModuleFeature = false;\n lazyLoadAllModuleQueryString = 'false';\n lazyLoadAllDataActions = false;\n }\n\n for (let i = 0; i < pageSlots.length; i++) {\n const currModule = pageSlots[i];\n const currModuleConfig = currModule.config;\n let clientRenderConfigSwitch; // Module config switch for lazyLoading render and data action for product collection module\n\n if (typeof currModuleConfig === 'object' && currModuleConfig) {\n lazyLoadAllModuleQueryString === 'true' ? (currModuleConfig[`clientRender`] = true) : clientRenderConfigSwitch;\n if (currModuleConfig.hasOwnProperty('clientRender')) {\n // When the lazyLoading feature switch is false, turn the lazyloading config switch to false\n if (lazyLoadModuleFeature === false) {\n currModuleConfig[`clientRender`] = false;\n }\n clientRenderConfigSwitch = currModuleConfig[`clientRender`];\n }\n }\n\n if ((lazyLoadAllDataActions || clientRenderConfigSwitch) && processType === PROCESS_TYPE.client) {\n // When lazyLoad_all feature switch is true or lazyload Module config switch is true and processComplexDataType call is from client, do hydration\n promisesArray.push(...searchForComplexType(currModuleConfig, context, currModule.id));\n } else if (!lazyLoadAllDataActions && !clientRenderConfigSwitch && processType === PROCESS_TYPE.server) {\n // When lazyLoad_all feature switch is OFF, lazyload Module config switch is OFF and processComplexDataType call is from server, do hydration\n promisesArray.push(...searchForComplexType(currModuleConfig, context, currModule.id));\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n context.runAllActionsInQueue();\n return promisesArray;\n }\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { appendQueryParams, getCatalogIdForSdk, getUrlSync, IActionContext } from '@msdyn365-commerce/core-internal';\nimport { EXCEPTION_LINK_ACTION } from '@msdyn365-commerce/telemetry-internal';\nimport { CategoryLinkInput, IPageTypeContext, IServerLink, ProductLinkInput } from './hydrator-action-inputs';\nimport { getPageTypeContextByIdAction } from './link-actions/page-type-context-by-id';\n\n/**\n * Takes a Link object from the Page Response and uses URL Builder to construct a destination url and transform the\n * existing link structure to expose two porperties type and destinationUrl\n *\n * @param linkObject The current link object being modified\n * @param context The current action context\n */\nexport const hydrateLink = async (linkObject: IServerLink, context: IActionContext) => {\n let destinationUrl: string | undefined;\n let hostname: string | undefined = context?.requestContext?.url?.requestUrl?.hostname;\n const locale = !context.requestContext.features.disable_hydrator_link_locale ? context.requestContext.locale : '';\n // In each switch case if the required information is not present to construct the URL\n // The object will be return unmodified\n switch (linkObject.type) {\n // In the case of internal and external links, no transform is needed\n // If destination url is present set the destination url and break\n case 'internalLink':\n case 'externalLink':\n if (linkObject.destinationUrl) {\n // Append the pass through query parameters\n const queryParams = (context.requestContext && context.requestContext.query) || {};\n const featureContext = context?.requestContext?.features;\n // If add_external_link_domain switch is set to true, we pass hostname as empty string which will add domain qsp to all external and internal link\n hostname = featureContext?.add_external_link_domain ? '' : hostname;\n if (featureContext?.skip_external_link_catalogid) {\n destinationUrl = appendQueryParams(linkObject.destinationUrl, queryParams, hostname, true);\n } else {\n destinationUrl = appendQueryParams(linkObject.destinationUrl, queryParams, hostname);\n }\n\n break;\n }\n return;\n case 'productLink':\n // To build the url for a productLink we need the product and category ids\n if (linkObject.productId && linkObject.categoryId) {\n // Grab the route context using the action\n let routeContext: IPageTypeContext;\n try {\n const catalogId = getCatalogIdForSdk(context.requestContext, 0);\n routeContext = await getPageTypeContextByIdAction(\n new ProductLinkInput(\n context.requestContext.apiSettings,\n linkObject.categoryId,\n linkObject.productId,\n catalogId,\n locale\n ),\n context\n );\n // Create the URL and break\n destinationUrl = getUrlSync('product', context, routeContext);\n } catch (err) {\n context.telemetry.error(EXCEPTION_LINK_ACTION);\n context.telemetry.exception(err);\n linkObject.destinationUrl = '';\n linkObject.error = EXCEPTION_LINK_ACTION;\n return;\n }\n break;\n }\n return;\n case 'categoryLink':\n // To build the url for the categoryLink we need the category id\n if (linkObject.categoryId) {\n // Grab the route context using the action\n let routeContext: IPageTypeContext;\n try {\n routeContext = await getPageTypeContextByIdAction(\n new CategoryLinkInput(context.requestContext.apiSettings, linkObject.categoryId, null, locale),\n context\n );\n // Create the URL and break\n destinationUrl = getUrlSync('category', context, routeContext);\n } catch (err) {\n context.telemetry.error(EXCEPTION_LINK_ACTION);\n context.telemetry.exception(err);\n linkObject.destinationUrl = '';\n linkObject.error = EXCEPTION_LINK_ACTION;\n return;\n }\n break;\n }\n return;\n default:\n // If it is not one of these types or does not contain the information required for the link\n // building do not modify the data\n return;\n }\n\n // Set the computed destinationUrl and delete the other properties\n linkObject.destinationUrl = destinationUrl;\n delete linkObject.categoryId;\n delete linkObject.productId;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ICache } from '@msdyn365-commerce/cache-internal';\nimport msdyn365Commerce, {\n IDictionary,\n IFeatureVersions,\n IModule,\n IModuleContract,\n IPageResponse,\n IPlatformSettings,\n IRequestContext,\n IResourceManager,\n isAuthoringEditEnabled,\n isEmptyOrNullObject\n} from '@msdyn365-commerce/core-internal';\nimport { AsyncResult, isAsyncResult } from '@msdyn365-commerce/retail-proxy';\nimport { EXCEPTION_BADPAGECONTEXT, EXCEPTION_INITIALDATAFAIL, ITelemetry } from '@msdyn365-commerce/telemetry-internal';\nimport { isObservableArray, toJS, transaction } from 'mobx';\nimport { IModuleBinder } from '../app-initialization/models';\nimport {\n CACHE_SETTING,\n MODULE_ACTION_KEY,\n MODULE_CACHE_KEY,\n MODULE_CONFIG_ERRORS_KEY,\n MODULE_CONFIG_KEY,\n MODULE_DATA_KEY,\n MODULE_DEFERRED_KEY,\n MODULE_RESOURCES_KEY,\n MSDYN365_WYSIWYG_CANADDMODULE,\n MSDYN365_WYSIWYG_DISABLED_PROPS\n} from '../consts';\nimport { getParentModuleName, isModuleEntryPointsEnabled } from '../utils/helpers';\nimport { getWrappedProxyObject } from './authoring-edit-helper';\n\n/**\n * Interface containing module metadata that pageContext holds\n *\n * Any change to this interface should result an accompanying change to the moduleList\n * Fast JSON stringify constructor in base-page-utils.ts\n */\ninterface IModuleMetaData {\n id: string;\n typeName: string;\n dataActions: unknown;\n}\n\ninterface IActionMetaData {\n name: string;\n entity: string;\n inputs: string[];\n}\n\n/**\n * Class to hold the page view model, areas and regions\n */\nexport class PageContext {\n public requestContext: IRequestContext;\n public pageRoot: IModuleContract & { theme: string };\n public requestCache: ICache;\n private _moduleList: IModuleMetaData[] = [];\n private _themeModulesList: string[] = [];\n private _clientPlatformSetting: IPlatformSettings = {};\n private _environmentVariable: IDictionary = {};\n private _versionDependentFeatureInfo: IFeatureVersions = {};\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n constructor(pageData: IPageResponse | any, requestContext: IRequestContext, requestCache: ICache, resourceManager?: IResourceManager) {\n if (isEmptyOrNullObject(pageData)) {\n throw new Error(EXCEPTION_BADPAGECONTEXT);\n }\n this.requestContext = requestContext;\n // set c1AccessToken to null so that its not sent down to client\n this.requestContext.user.c1AccessToken = undefined;\n this.requestCache = requestCache;\n this.pageRoot = pageData.pageRoot;\n this._versionDependentFeatureInfo = msdyn365Commerce.getVersionDependentFeatureInfo;\n\n if (typeof window === 'undefined') {\n this._putRequestedModulesInCacheOnServer(pageData, resourceManager);\n }\n\n this._initThemeModulesList();\n this.setEnvironmentVariableForCLient();\n }\n\n public moduleList(): IModule[][] {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const result = this._moduleList.reduce((resultArray: any[], item, index) => {\n const chunkIndex = Math.floor(index / Number(5));\n if (!resultArray[chunkIndex]) {\n resultArray[chunkIndex] = []; // start a new chunk\n }\n resultArray[chunkIndex].push(item);\n\n return resultArray;\n }, []);\n return result;\n }\n\n /**\n * Returns callback function that returns module rendering metadata for a given module asynchronously\n */\n get modules(): (name: string) => IModule {\n return (name: string) => {\n return this._constructModuleMetaData(name);\n };\n }\n\n /**\n * Get all the modules listed in the PageContext from the cache\n */\n\n public async allModules(requestContext: IRequestContext, moduleList: IModule[]): Promise {\n if (requestContext?.features?.loadData_optimization) {\n return moduleList.map(moduleMetaData => {\n return this.modules(moduleMetaData.id);\n });\n } else {\n return this._moduleList.map(moduleMetaData => {\n return this.modules(moduleMetaData.id);\n });\n }\n }\n\n public setAppCacheEntries(appCacheEntries: string[]): void {\n this.requestCache.put({ typeName: CACHE_SETTING, key: 'APP_CACHE_ENTRIES' }, { item: appCacheEntries });\n }\n\n public setPlatformSettingsForClient(platformSettings: IPlatformSettings): void {\n this._clientPlatformSetting.clientSideDataActionTimeoutInMs = platformSettings?.clientSideDataActionTimeoutInMs || undefined;\n this._clientPlatformSetting.shouldUseInstanceCache = !!platformSettings?.clientSideDataActionTimeoutInMs;\n this._clientPlatformSetting.disableActionRegOptimization = true;\n this._clientPlatformSetting.imageFallbackOptimize = platformSettings?.imageFallbackOptimize || false;\n this._clientPlatformSetting.enableModuleEntryPoints = isModuleEntryPointsEnabled(platformSettings);\n this._clientPlatformSetting.enableImageOptimizeEvents = !!platformSettings?.enableImageOptimizeEvents;\n this._clientPlatformSetting.enableModuleCssOptimization = platformSettings?.enableModuleCssOptimization || false;\n this._clientPlatformSetting.clientTimeoutMapInMs = platformSettings?.clientTimeoutMapInMs || {};\n this._clientPlatformSetting.secondaryInstrumentationKey = platformSettings?.secondaryInstrumentationKey;\n /* if (platformSettings?.disableActionRegOptimization === true) {\n this._clientPlatformSetting.disableActionRegOptimization = true;\n }*/\n }\n\n public setEnvironmentVariableForCLient = () => {\n const environment = msdyn365Commerce.getAllEnvironmentVariable();\n this._environmentVariable = environment;\n };\n\n public getPlatformSettingsForClient(): IPlatformSettings {\n return this._clientPlatformSetting;\n }\n\n public getVersionDependentFeatureInfo(): IFeatureVersions {\n return this._versionDependentFeatureInfo;\n }\n\n /**\n * Checkis if the given module is deferred module\n * @param name name of the module\n */\n public deferred(name: string): Boolean {\n return !!this.requestCache.getValue({ typeName: MODULE_DEFERRED_KEY, key: name });\n }\n\n public getResourceTextForPlaceholderPreview(): string {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const resourceItem = this.requestCache.get({ typeName: MODULE_RESOURCES_KEY, key: 'PLACE-HOLDER-FOR-CONTAINER-PREVIEW' });\n if (resourceItem && resourceItem.item && resourceItem.item.clickToConfigure) {\n return resourceItem.item.clickToConfigure;\n } else {\n return 'Click here to configure';\n }\n }\n\n /**\n * Marks module as deferred\n * @param name name of the module\n */\n public markModuleAsDeferred(name: string): void {\n this.requestCache.put(\n { typeName: MODULE_DEFERRED_KEY, key: name },\n {\n item: true\n }\n );\n }\n\n /**\n * Inserts requested modules into cache on client side\n * @param pageData page data object\n * @param telemetry telemetry object\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public async putRequestedModulesInCacheOnClient(pageData: any, telemetry: ITelemetry): Promise {\n if (isEmptyOrNullObject(pageData.requestCache) || isEmptyOrNullObject(pageData.requestCache.internalCache)) {\n throw new Error(EXCEPTION_INITIALDATAFAIL);\n }\n\n for (const cacheType of Object.keys(pageData.requestCache.internalCache)) {\n const cacheBasedOnType = pageData.requestCache.internalCache[cacheType];\n if (!isEmptyOrNullObject(cacheBasedOnType)) {\n for (const cachekey of Object.keys(cacheBasedOnType)) {\n const cacheItem = cacheBasedOnType[cachekey];\n\n if (pageData?.requestContext?.features?.loadData_optimization) {\n setTimeout(() => {\n this._rehydrateAsyncResults(cacheItem, cacheType, cachekey);\n }, 0);\n } else {\n this._rehydrateAsyncResults(cacheItem, cacheType, cachekey);\n }\n\n // Awaiting a rejected promise will throw, so we need to catch those errors.\n try {\n await cacheItem.item;\n } catch (e) {\n telemetry.debug(`Error while hyrdating cache item, Type: ${cacheBasedOnType}, Key: ${cachekey}`);\n }\n\n if (cacheType === MODULE_CACHE_KEY) {\n const moduleItem = cacheItem.item;\n this._moduleList.push({\n id: moduleItem.id,\n typeName: moduleItem.typeName,\n dataActions: moduleItem.dataActions || []\n });\n }\n }\n }\n }\n }\n\n /**\n * Populates data actions results from cache\n * @param cacheObjectType entity type\n * @param cacheKey cache key\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _populateDataActionResultFromCache(cacheObjectType: string, cacheKey: string): any {\n const cachedValueBasedOnInput = this.requestCache.getValue({ typeName: cacheObjectType, key: cacheKey });\n if (!cachedValueBasedOnInput) {\n return;\n }\n\n // Ref resolution for promises needs to be delayed until the value is available\n if (isAsyncResult(cachedValueBasedOnInput)) {\n return transaction(() => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n cachedValueBasedOnInput.then(promiseResult => {\n // Directly set the result because we want a synchronous change\n cachedValueBasedOnInput.result = this._resolveCacheRef(cacheObjectType, promiseResult);\n });\n return cachedValueBasedOnInput;\n });\n }\n\n return this._resolveCacheRef(cacheObjectType, cachedValueBasedOnInput);\n }\n\n /**\n * Resolves cache reference for the given entity type\n * @param cacheObjectType entity type that is cached\n * @param cacheRefInfo cache ref key\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _resolveCacheRef(cacheObjectType: string, cacheRefInfo: object): any {\n if (typeof cacheRefInfo !== 'object' || cacheRefInfo['$ref'] !== true) {\n return cacheRefInfo;\n }\n const result = cacheRefInfo['key']\n .map(key => {\n const value = this.requestCache.getValue({ typeName: cacheObjectType, key });\n if (value) {\n return value;\n }\n })\n .filter(Boolean);\n return result && result.length > 0 ? (cacheRefInfo['isCollection'] ? result : result[0]) : null;\n }\n\n /**\n * Inserts requested modules in cache to prepare the initialData that will be sent to client\n * @param pageData pageData object with list of modules\n * @param resourceManager resourceManager that contains the localized strings\n */\n private _putRequestedModulesInCacheOnServer(pageData: IPageResponse, resourceManager?: IResourceManager): void {\n const isEditor = (this.requestContext.params && this.requestContext.params.isEditor) || false;\n const themeName = this.requestContext.params?.theme;\n for (let i = 0; i < pageData.slots.length; ++i) {\n const moduleInstance = pageData.slots[i];\n const moduleId = moduleInstance.id;\n this._moduleList.push({\n id: moduleInstance.id,\n typeName: moduleInstance.typeName,\n dataActions: moduleInstance.dataActions\n });\n\n this.requestCache.put(\n { typeName: MODULE_CACHE_KEY, key: moduleId },\n {\n item: { id: moduleInstance.id, typeName: moduleInstance.typeName }\n }\n );\n this.requestCache.put({ typeName: MODULE_CONFIG_KEY, key: moduleId }, { item: moduleInstance.config });\n this.requestCache.put({ typeName: MODULE_CONFIG_ERRORS_KEY, key: moduleId }, { item: moduleInstance.configErrors });\n this.requestCache.put({ typeName: MODULE_DATA_KEY, key: moduleId }, { item: moduleInstance.data });\n this.requestCache.put({ typeName: MODULE_ACTION_KEY, key: moduleId }, { item: moduleInstance.dataActions });\n this.requestCache.put({ typeName: MSDYN365_WYSIWYG_DISABLED_PROPS, key: moduleId }, { item: [] });\n this.requestCache.put({ typeName: MSDYN365_WYSIWYG_CANADDMODULE, key: moduleId }, { item: [] });\n\n if (resourceManager && !isEditor) {\n this.requestCache.put(\n { typeName: MODULE_RESOURCES_KEY, key: moduleInstance.typeName },\n { item: resourceManager.getModuleResources(moduleInstance.typeName, themeName, this.requestContext.locale) }\n );\n }\n }\n // In editor mode, put the resources for all modules for the current locale into the cache\n if (isEditor && resourceManager && this.requestContext.features.enableAuthoringRemoveAndAddModule) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const bindings = (msdyn365Commerce).getAllModuleBinder();\n bindings.forEach((moduleBinder: IModuleBinder) => {\n this.requestCache.put(\n { typeName: MODULE_RESOURCES_KEY, key: moduleBinder.name },\n { item: resourceManager.getModuleResources(moduleBinder.name, themeName, this.requestContext.locale) }\n );\n });\n }\n }\n\n /**\n * Initializes theme modules list that need to be loaded on the client\n */\n private _initThemeModulesList(): void {\n this._themeModulesList = [];\n\n if (this.requestContext.params.theme) {\n this._themeModulesList.push(this.requestContext.params.theme);\n this._themeModulesList.push(getParentModuleName(this.requestContext.params.theme));\n }\n }\n\n /**\n * Function which rehydrate Async Results.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _rehydrateAsyncResults(cacheItem: any, cacheType: string, cachekey: string): void {\n // AsyncResults sent from server to client get serialized into basic JS objects,\n // They need to be \"rehydrated\" into actual AsyncResults to enable full functionality\n if (cacheItem.item && cacheItem.item._type && cacheItem.item._type === 'AsyncResult') {\n const metadata = cacheItem.item.metadata || {};\n if (cacheItem.item.status && cacheItem.item.status === 'SUCCESS') {\n cacheItem.item = AsyncResult.resolve(cacheItem.item.result);\n } else {\n cacheItem.item = AsyncResult.reject(cacheItem.item.error || 'Unable to parse data action');\n }\n cacheItem.item.metadata = metadata;\n }\n\n this.requestCache.put({ typeName: cacheType, key: cachekey }, { item: cacheItem.item });\n }\n\n /**\n * Construct module MetaData\n * @param name moduleName\n * @returns\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _constructModuleMetaData(name: string): any {\n const cacheItem = this.requestCache.getValue({ typeName: MODULE_CACHE_KEY, key: name });\n if (!cacheItem) {\n throw new Error(`requested module id [${name}] is not found in module dictionary of pageconfig`);\n }\n\n const data = { ...(this.requestCache.getValue({ typeName: MODULE_DATA_KEY, key: name }) || {}) };\n const actions = this.requestCache.getValue({ typeName: MODULE_ACTION_KEY, key: name });\n const resources = this.requestCache.getValue>({ typeName: MODULE_RESOURCES_KEY, key: cacheItem.typeName });\n\n // toJS method\n if (actions) {\n // ToJS converts observable object to JS object.\n const actionMetaDataList = toJS(actions);\n if (actionMetaDataList) {\n for (const action of actionMetaDataList) {\n if (action.entity && action.inputs) {\n data[action.name] =\n Array.isArray(action.inputs) || isObservableArray(action.inputs)\n ? action.inputs.map((cacheKey: string) => this._populateDataActionResultFromCache(action.entity, cacheKey))\n : this._populateDataActionResultFromCache(action.entity, action.inputs);\n } else {\n data[action.name] = AsyncResult.reject('Action Input Creation Failure');\n }\n }\n }\n }\n\n const config = this.requestCache.getValue>({ typeName: MODULE_CONFIG_KEY, key: name }) || {};\n return {\n ...cacheItem,\n data: data,\n config:\n !(typeof window === 'undefined') && isAuthoringEditEnabled(this.requestContext)\n ? getWrappedProxyObject(config, name, cacheItem.typeName)\n : config,\n configErrors: this.requestCache.getValue({ typeName: MODULE_CONFIG_ERRORS_KEY, key: name }),\n resources: resources || {},\n disabledProperties: this.requestCache.getValue({ typeName: MSDYN365_WYSIWYG_DISABLED_PROPS, key: name }) || [],\n slotsForAddModule: this.requestCache.getValue({ typeName: MSDYN365_WYSIWYG_CANADDMODULE, key: name }) || []\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 msdyn365Commerce, { ISessionStorageContext, ISessionStorageValue } from '@msdyn365-commerce/core-internal';\nimport { CookieContext } from './cookie-utils';\n\n/**\n * Context for session storage handling\n *\n * @export\n * @class CookieContext\n */\nexport class SessionStorageContext implements ISessionStorageContext {\n private _cookieContext: CookieContext;\n\n constructor(_cookieContext: CookieContext) {\n this._cookieContext = _cookieContext;\n }\n\n /**\n * Gets the value stored in the session storage.\n * Returns an empty object if no such value exists.\n *\n * @param {string} key - The key string.\n */\n public getDataFromStorage = (key: string): object => {\n if (key) {\n return this.get(key).value || {};\n }\n return {};\n };\n\n /**\n * Sets a new key pair value in the session storage.\n *\n * @param {string} key - The key string.\n * @param {object} value - The data object.\n */\n public setDataInStorage = (key: string, value: object): void => {\n if (key && value) {\n this.set(key, value);\n }\n };\n\n /**\n * Gets the checkout cart stored in the session storage.\n * Returns an empty object if no such value exists.\n *\n * @param {string} key - The key string.\n */\n public getCheckoutCartData = (key: string): object => {\n if (key) {\n return key ? this.getDataFromStorage(this.getCheckoutCartKey(key)) : {};\n }\n return {};\n };\n\n /**\n * Sets checkout cart value in the session storage.\n *\n * @param {string} key - The key string.\n * @param {object} value - The cart data object.\n */\n public setCheckoutCartData = (key: string, value: object): void => {\n if (key && value) {\n this.setDataInStorage(this.getCheckoutCartKey(key), value);\n }\n };\n\n /**\n * Remove session storage by giving key\n *\n * @param {string} key - The key string.\n */\n public removeDataFromStorage = (key: string): void => {\n if (key) {\n this.remove(key);\n }\n };\n\n /**\n * Remove checkout cart data from the session storage by giving key\n *\n * @param {string} key - The key string. If key is not provided clear all data from session storage that contais the checkout cart key prefix.\n */\n public removeCheckoutCartData = (key?: string): void => {\n if (key) {\n this.removeDataFromStorage(this.getCheckoutCartKey(key));\n } else {\n const keyList = Object.keys(sessionStorage);\n keyList.map(k => {\n if (k.startsWith(`${msdyn365Commerce.checkoutCartKeyPrefix}-`)) {\n this.removeDataFromStorage(k);\n }\n });\n }\n };\n\n /**\n * Get session storage value.\n * If server side, no-op.\n *\n * @param {string} key - The key string\n * @return {ISessionStorageValue} value with status\n */\n private get = (key: string): ISessionStorageValue => {\n if (key && msdyn365Commerce.isBrowser) {\n const objString = sessionStorage.getItem(key);\n if (objString) {\n const obj = JSON.parse(objString);\n return { name: key, value: obj, status: obj ? 'FOUND' : 'NOT_FOUND' };\n }\n }\n return { name: key, value: undefined, status: 'NOT_FOUND' };\n };\n\n /**\n * Set session storage data.\n * If server side, no-op.\n *\n * @param {string} key - The key string\n * @param {T} value - The session storage value\n */\n private set = (key: string, value: T): void => {\n if (key && msdyn365Commerce.isBrowser) {\n sessionStorage.setItem(key, JSON.stringify(value));\n }\n };\n\n /**\n * Remove session storage data by giving key\n * If server side, no-op.\n *\n * @param {string} key - The key string\n */\n private remove = (key: string): void => {\n if (key && msdyn365Commerce.isBrowser) {\n sessionStorage.removeItem(key);\n }\n };\n\n /**\n * Build the checkout cart key for the session storage\n */\n private getCheckoutCartKey = (key: string): string => {\n const checkoutCartCookie = this._cookieContext.getCheckoutCartCookie();\n if (checkoutCartCookie) {\n return `${msdyn365Commerce.checkoutCartKeyPrefix}-${checkoutCartCookie}-${key}`;\n }\n return '';\n };\n}\n","import * as cookie from 'cookie';\r\nexport function hasDocumentCookie() {\r\n // Can we get/set cookies on document.cookie?\r\n return typeof document === 'object' && typeof document.cookie === 'string';\r\n}\r\nexport function cleanCookies() {\r\n document.cookie.split(';').forEach(function (c) {\r\n document.cookie = c\r\n .replace(/^ +/, '')\r\n .replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/');\r\n });\r\n}\r\nexport function parseCookies(cookies, options) {\r\n if (typeof cookies === 'string') {\r\n return cookie.parse(cookies, options);\r\n }\r\n else if (typeof cookies === 'object' && cookies !== null) {\r\n return cookies;\r\n }\r\n else {\r\n return {};\r\n }\r\n}\r\nexport function isParsingCookie(value, doNotParse) {\r\n if (typeof doNotParse === 'undefined') {\r\n // We guess if the cookie start with { or [, it has been serialized\r\n doNotParse =\r\n !value || (value[0] !== '{' && value[0] !== '[' && value[0] !== '\"');\r\n }\r\n return !doNotParse;\r\n}\r\nexport function readCookie(value, options) {\r\n if (options === void 0) { options = {}; }\r\n var cleanValue = cleanupCookieValue(value);\r\n if (isParsingCookie(cleanValue, options.doNotParse)) {\r\n try {\r\n return JSON.parse(cleanValue);\r\n }\r\n catch (e) {\r\n // At least we tried\r\n }\r\n }\r\n // Ignore clean value if we failed the deserialization\r\n // It is not relevant anymore to trim those values\r\n return value;\r\n}\r\nfunction cleanupCookieValue(value) {\r\n // express prepend j: before serializing a cookie\r\n if (value && value[0] === 'j' && value[1] === ':') {\r\n return value.substr(2);\r\n }\r\n return value;\r\n}\r\n","var __assign = (this && this.__assign) || function () {\r\n __assign = Object.assign || function(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\r\n t[p] = s[p];\r\n }\r\n return t;\r\n };\r\n return __assign.apply(this, arguments);\r\n};\r\nimport * as cookie from 'cookie';\r\nimport { hasDocumentCookie, parseCookies, readCookie } from './utils';\r\nvar Cookies = /** @class */ (function () {\r\n function Cookies(cookies, options) {\r\n var _this = this;\r\n this.changeListeners = [];\r\n this.HAS_DOCUMENT_COOKIE = false;\r\n this.cookies = parseCookies(cookies, options);\r\n new Promise(function () {\r\n _this.HAS_DOCUMENT_COOKIE = hasDocumentCookie();\r\n }).catch(function () { });\r\n }\r\n Cookies.prototype._updateBrowserValues = function (parseOptions) {\r\n if (!this.HAS_DOCUMENT_COOKIE) {\r\n return;\r\n }\r\n this.cookies = cookie.parse(document.cookie, parseOptions);\r\n };\r\n Cookies.prototype._emitChange = function (params) {\r\n for (var i = 0; i < this.changeListeners.length; ++i) {\r\n this.changeListeners[i](params);\r\n }\r\n };\r\n Cookies.prototype.get = function (name, options, parseOptions) {\r\n if (options === void 0) { options = {}; }\r\n this._updateBrowserValues(parseOptions);\r\n return readCookie(this.cookies[name], options);\r\n };\r\n Cookies.prototype.getAll = function (options, parseOptions) {\r\n if (options === void 0) { options = {}; }\r\n this._updateBrowserValues(parseOptions);\r\n var result = {};\r\n for (var name_1 in this.cookies) {\r\n result[name_1] = readCookie(this.cookies[name_1], options);\r\n }\r\n return result;\r\n };\r\n Cookies.prototype.set = function (name, value, options) {\r\n var _a;\r\n if (typeof value === 'object') {\r\n value = JSON.stringify(value);\r\n }\r\n this.cookies = __assign(__assign({}, this.cookies), (_a = {}, _a[name] = value, _a));\r\n if (this.HAS_DOCUMENT_COOKIE) {\r\n document.cookie = cookie.serialize(name, value, options);\r\n }\r\n this._emitChange({ name: name, value: value, options: options });\r\n };\r\n Cookies.prototype.remove = function (name, options) {\r\n var finalOptions = (options = __assign(__assign({}, options), { expires: new Date(1970, 1, 1, 0, 0, 1), maxAge: 0 }));\r\n this.cookies = __assign({}, this.cookies);\r\n delete this.cookies[name];\r\n if (this.HAS_DOCUMENT_COOKIE) {\r\n document.cookie = cookie.serialize(name, '', finalOptions);\r\n }\r\n this._emitChange({ name: name, value: undefined, options: options });\r\n };\r\n Cookies.prototype.addChangeListener = function (callback) {\r\n this.changeListeners.push(callback);\r\n };\r\n Cookies.prototype.removeChangeListener = function (callback) {\r\n var idx = this.changeListeners.indexOf(callback);\r\n if (idx >= 0) {\r\n this.changeListeners.splice(idx, 1);\r\n }\r\n };\r\n return Cookies;\r\n}());\r\nexport default Cookies;\r\n","import Cookies from './Cookies';\r\nexport default Cookies;\r\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport msdyn365Commerce, { ICookieContext, ICookieContextOptions, ICookieValue } from '@msdyn365-commerce/core-internal';\nimport { Cart } from '@msdyn365-commerce/retail-proxy';\nimport Cookies, { CookieSetOptions } from 'universal-cookie';\nimport { USER_CONSENT_GIVEN_EVENT } from '../consts';\n\nexport interface ICookieSetOptions extends CookieSetOptions {\n isEssential?: boolean;\n}\n\nexport const enum CartTokenPrefix {\n Auth = 't',\n Anon = 'p'\n}\n\nexport const enum AccountSelectionTokenPrefix {\n Auth = 't',\n Anon = 'p'\n}\n\nconst UserConsentCookieName: string = '_msdyn365___ucc_';\n\n/**\n * Context for cookie handling\n *\n * @export\n * @class CookieContext\n */\nexport class CookieContext implements ICookieContext {\n private _cookies: Cookies;\n private _setCookieList: (() => void)[] = [];\n private _serverCookieList: string[] = [];\n private _clientCookieList: string[] = [];\n private _options: ICookieContextOptions;\n\n /**\n * Returns a cookies class from the selected cookie store. If the express server\n * is passed the cookie header will be used otherwise the global cookie store will be used.\n * @param options Optional ICookieContextOptions.\n */\n constructor(options?: ICookieContextOptions, cookieString?: string) {\n this._options = { isConsentRequired: true, ...options };\n if (cookieString) {\n this._cookies = new Cookies(cookieString);\n } else if (msdyn365Commerce.isBrowser) {\n this._cookies = new Cookies(document && document.cookie);\n } else {\n this._cookies = new Cookies(\n this._options.req &&\n this._options.req.headers &&\n (this._options.req.headers['x-msdyn365-cookie'] || this._options.req.headers.cookie)\n );\n }\n }\n\n /**\n * Get Cookie Value\n *\n * @param {string} cookieName - A string cookie name\n * @return {ICookieValue} cookie value with status\n */\n public get = (cookieName: string, isEssential?: boolean): ICookieValue => {\n if (isEssential || this.isConsentGiven()) {\n const cookieValue = this._cookies.get(cookieName);\n return { name: cookieName, value: cookieValue, status: cookieValue ? 'FOUND' : 'NOT_FOUND' };\n }\n\n return { name: cookieName, value: undefined, status: 'NO_CONSENT' };\n };\n\n /**\n * Set Cookie\n *\n * @param {string} cookieName - A string cookie name\n * @param {T} cookieValue - A cookie value\n * @param {ICookieSetOptions} options cookie options same as document.cookie\n */\n public set = (cookieName: string, cookieValue: T, options?: ICookieSetOptions): void => {\n const sameSiteRequiredFlag = this._options.sameSiteRequired;\n let cookieOptionsWithDefaults: ICookieSetOptions;\n\n cookieOptionsWithDefaults = { path: '/', secure: true, isEssential: false };\n\n if (sameSiteRequiredFlag === true) {\n cookieOptionsWithDefaults = { path: '/', secure: true, isEssential: false, sameSite: 'none', ...options };\n } else {\n if (options) {\n const filteredOptions: ICookieSetOptions = {};\n for (const [key, value] of Object.entries(options)) {\n if (key.toLowerCase() !== 'samesite') {\n filteredOptions[key] = value;\n }\n }\n cookieOptionsWithDefaults = { path: '/', secure: true, isEssential: false, ...filteredOptions };\n }\n }\n\n if (cookieOptionsWithDefaults.isEssential || this.isConsentGiven()) {\n // Set the cookie if client side\n if (msdyn365Commerce.isBrowser) {\n this._cookies.set(cookieName, cookieValue, cookieOptionsWithDefaults);\n const clientCookieString = this.createCookieString(cookieName, cookieValue, cookieOptionsWithDefaults);\n this._clientCookieList.push(clientCookieString);\n return;\n }\n // If server side, convert the cookie into a header string and push it onto an array\n const serverCookieString = this.createCookieString(cookieName, cookieValue, cookieOptionsWithDefaults);\n this._serverCookieList.push(serverCookieString);\n } else {\n this._setCookieList.push(() => {\n this._cookies.set(cookieName, cookieValue, cookieOptionsWithDefaults);\n });\n }\n };\n\n /**\n * Gets the value stored in the cart cookie that contains the\n * cart context and information. Returns an empty string if no such value exists.\n *\n */\n public getCartCookie = (): string => {\n return this.get(msdyn365Commerce.CartCookie, true).value || '';\n };\n\n public getTargetIdCookie = (): string => {\n return this.get('_msdyn365___tuid_', true).value || '';\n };\n\n /**\n * Sets the cart cookie with a new expiry time time of one year\n * from the current date\n *\n * @param cart The object containing the current cart information\n * @param isAuthenticated Boolean representing whether current user is authenticated or not\n * @param setAlways Boolean representing if the cookie should be set regardless of whether the cookie exists or not\n */\n public setCartCookie = (cart: Cart, isAuthenticated: boolean, setAlways: boolean = false): void => {\n const prefix = isAuthenticated ? CartTokenPrefix.Auth : CartTokenPrefix.Anon;\n const cartCookieOptions: ICookieSetOptions = { isEssential: true, secure: true, sameSite: 'none' };\n const cookieValue = `${prefix}:${cart.Id}`;\n const existingCart = this.getCartCookie();\n\n // Unless explicity overridden using setAlways flag, do not set the cookie if the cookie value is the same as existing cookie value\n if (!setAlways && existingCart === cookieValue) {\n return;\n }\n\n if (this._options.cartExpirationInDays) {\n // 86400000 is 1 day in ms\n cartCookieOptions.expires = new Date(Date.now() + this._options.cartExpirationInDays * 86400000);\n }\n this.set(msdyn365Commerce.CartCookie, cookieValue, cartCookieOptions);\n };\n\n /**\n * Gets the value stored in the checkout cart cookie that contains the\n * checkout cart context and information. Returns an empty string if no such value exists.\n */\n public getCheckoutCartCookie = (): string => {\n return this.get(msdyn365Commerce.checkoutCartCookie, true).value || '';\n };\n\n /**\n * Sets the checkout cart cookie with a new expiry time time of one year\n * from the current date\n *\n * @param cart The object containing the current checkout cart information\n * @param isAuthenticated Boolean representing whether current user is authenticated or not\n * @param setAlways Boolean representing if the cookie should be set regardless of whether the cookie exists or not\n */\n public setCheckoutCartCookie = (cart: Cart, isAuthenticated: boolean, setAlways: boolean = false): void => {\n const prefix = isAuthenticated ? CartTokenPrefix.Auth : CartTokenPrefix.Anon;\n const checkoutCartCookieOptions: ICookieSetOptions = { isEssential: true, secure: true, sameSite: 'none' };\n const cookieValue = `${prefix}:${cart.Id}`;\n const existingCookie = this.getCheckoutCartCookie();\n\n // Unless explicity overridden using setAlways flag, do not set the cookie if the cookie value is the same as existing cookie value\n if (!setAlways && existingCookie === cookieValue) {\n return;\n }\n\n if (this._options.cartExpirationInDays) {\n // 86400000 is 1 day in ms\n checkoutCartCookieOptions.expires = new Date(Date.now() + this._options.cartExpirationInDays * 86400000);\n }\n this.set(msdyn365Commerce.checkoutCartCookie, cookieValue, checkoutCartCookieOptions);\n };\n\n /**\n * Remove checkout cart cookie.\n */\n public removeCheckoutCartCookie = (): void => {\n this.remove(msdyn365Commerce.checkoutCartCookie);\n };\n\n /**\n * Gets the value stored in the account selection cookie that contains the\n * account selection context and information. Returns an empty string if no such value exists.\n */\n public getAccountSelectionCookie = (): string => {\n return this.get(msdyn365Commerce.accountSelectionCookie, true).value || '';\n };\n\n /**\n *\n * @param isOBORequest Boolean representing whether if current user is on behalf of or not.\n * @param customerAccountNumber customer account number.\n * @param setAlways Boolean representing if the cookie should be set regardless of whether the cookie exists or not\n */\n public setAccountSelectionCookie = (isOBORequest: boolean, customerAccountNumber: string, setAlways: boolean = false): void => {\n const prefix = isOBORequest ? AccountSelectionTokenPrefix.Auth : AccountSelectionTokenPrefix.Anon;\n const accountSelectionCookieOptions: ICookieSetOptions = { isEssential: false, secure: true, sameSite: 'none' };\n const cookieValue = `${prefix}:${customerAccountNumber}`;\n const existingCookie = this.getAccountSelectionCookie();\n\n // Unless explicity overridden using setAlways flag, do not set the cookie if the cookie value is the same as existing cookie value\n if (!setAlways && existingCookie === cookieValue) {\n return;\n }\n this.set(msdyn365Commerce.accountSelectionCookie, cookieValue, accountSelectionCookieOptions);\n };\n\n /**\n * Remove account selection cookie.\n */\n public removeAccountSelectionCookie = (): void => {\n this.remove(msdyn365Commerce.accountSelectionCookie);\n };\n\n /**\n * Remove cookie\n *\n */\n public remove = (cookieName: string): void => {\n return this._cookies.remove(cookieName, { path: '/' });\n };\n\n /**\n * Get whether consent is given or not\n *\n */\n public isConsentGiven = (): boolean => {\n return this._options.isConsentRequired ? !!this._cookies.get(UserConsentCookieName) : true;\n };\n\n /**\n * Set consent cookie\n *\n */\n public setConsentCookie = (): void => {\n const sameSiteRequiredFlag = this._options.sameSiteRequired;\n const cookieOptionsWithDefaults: ICookieSetOptions = { path: '/', maxAge: 31536000, secure: true };\n\n if (sameSiteRequiredFlag) {\n cookieOptionsWithDefaults.sameSite = 'none';\n }\n\n this._cookies.set(UserConsentCookieName, Date.now(), cookieOptionsWithDefaults);\n const clientCookieString = this.createCookieString(UserConsentCookieName, 'now', cookieOptionsWithDefaults);\n this._clientCookieList.push(clientCookieString);\n\n this._setCookieList.forEach(setCookieFunction => setCookieFunction());\n if (process.env.CURRENT_ENVIRONMENT === 'web') {\n document.dispatchEvent(new Event(USER_CONSENT_GIVEN_EVENT));\n }\n };\n\n /**\n * Remove consent cookie\n *\n */\n public deleteConsentCookie = (): void => {\n return this._cookies.remove(UserConsentCookieName);\n };\n\n /**\n * Returns the list of server side cookies to set\n * only if currently executing server side\n */\n get serverCookies(): string[] {\n return msdyn365Commerce.isBrowser ? [] : Object.assign([], this._serverCookieList);\n }\n\n /**\n * Returns the list of client side cookies to set\n */\n get clientCookie(): string[] {\n return msdyn365Commerce.isBrowser ? Object.assign([], this._clientCookieList) : [];\n }\n\n private createCookieString = (cookieName: string, cookieValue: T, cookieOptionsWithDefaults: ICookieSetOptions): string => {\n let cookieString = `${cookieName}=${cookieValue}`;\n if (cookieOptionsWithDefaults) {\n const optionsString = this._appendCookieOptions(cookieOptionsWithDefaults);\n if (optionsString) {\n cookieString = `${cookieString}; ${optionsString}`;\n }\n }\n return cookieString;\n };\n\n private _appendCookieOptions = (options: ICookieSetOptions): string => {\n const cookieOptions: string[] = [];\n if (options.path) {\n cookieOptions.push(`Path=${options.path}`);\n }\n if (options.expires) {\n cookieOptions.push(`Expires=${options.expires}`);\n }\n if (options.maxAge) {\n cookieOptions.push(`Max-Age=${options.maxAge}`);\n }\n if (options.domain) {\n cookieOptions.push(`Domain=${options.domain}`);\n }\n if (options.secure) {\n cookieOptions.push(`Secure`);\n }\n if (options.httpOnly) {\n cookieOptions.push(`HttpOnly`);\n }\n if (options.sameSite) {\n cookieOptions.push(`SameSite=${options.sameSite}`);\n }\n return cookieOptions.length !== 0 ? cookieOptions.join('; ') : '';\n };\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport axios from 'axios';\nimport { IRequestContext, msdyn365Commerce, IRequestContextForSegment } from '@msdyn365-commerce/core-internal';\nimport { IInternalTelemetry, LogLevel } from '@msdyn365-commerce/telemetry-internal';\n\ninterface ISegmentProvider {\n providerId: string;\n segmentIds: string[];\n}\n\nconst REQUEST_CONTEXT_PROPERTIES_FOR_SEG = ['clientIPAddress', 'cookieString', 'cookie', 'query', 'params', 'apiSettings', 'features'];\n\nexport const resolveMissingSegmentsOnClient = (requestContext: IRequestContext, userId: string, telemetry: IInternalTelemetry) => {\n if (!requestContext || !requestContext.missingSegments || requestContext.missingSegments.length) {\n return;\n }\n let domain = requestContext.canonicalDomain || '';\n if (msdyn365Commerce.isBrowser) {\n domain = window.location.hostname;\n }\n const missingSegments: ISegmentProvider[] = [];\n const neededMissingSegments = requestContext.missingSegments;\n Object.keys(neededMissingSegments).forEach((providerId: string) => {\n const segmentProvider: ISegmentProvider = {\n providerId: providerId,\n segmentIds: neededMissingSegments[providerId]\n };\n missingSegments.push(segmentProvider);\n });\n // if there is no misisng segments. return.\n if (missingSegments.length === 0) {\n return;\n }\n // add cookie string. So we are able to re-construct cookie obj when oneRf call Node to resolve segments.\n requestContext.cookieString = (document && document.cookie) || '';\n const segmentRequestId = requestContext.segmentRequestId;\n const missingSegmentResolvingUrl = `https://${domain}/_msdyn365/getsegment`;\n\n // only maintain selected properties of requestContext.\n const segRequestContext: IRequestContextForSegment = {};\n REQUEST_CONTEXT_PROPERTIES_FOR_SEG.forEach((property: string) => {\n if (property in requestContext && !!requestContext[property]) {\n segRequestContext[property] = requestContext[property];\n }\n });\n\n const requestContextObject = requestContext?.features?.disable_segment_requestContext ? requestContext : segRequestContext;\n\n axios({\n method: 'post',\n url: missingSegmentResolvingUrl,\n data: {\n segmentProviderList: missingSegments,\n userId: userId,\n requestContext: requestContextObject,\n ...(segmentRequestId && { segmentRequestId: segmentRequestId })\n }\n })\n // after post request, oneRf will process the request. Node will not receive any response.\n .then()\n .catch(err => telemetry.log(LogLevel.Error, `Error in resolving segments from AJAX call for ${domain}`, { exception: err }));\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ActionContext, CLIENT_HYDRATE_KEY, CLIENT_HYDRATE_TYPE } from '@msdyn365-commerce/action-internal';\nimport { RequestCache, ICacheKey, ICache } from '@msdyn365-commerce/cache-internal';\nimport {\n CoreContext,\n CultureInfoFormatter,\n IActionContext,\n IAny,\n ICoreContext,\n IDictionary,\n IGeneric,\n IModule,\n IModuleContract,\n IMSDyn365Window,\n IPartnerThemeSettings,\n IRequestContext,\n IRequestContextUrl,\n IVariants,\n msdyn365Commerce\n} from '@msdyn365-commerce/core-internal';\nimport {\n ClientAppInsightsJSLogger,\n LoggerType,\n EVENT_CLIENT_RENDER_START,\n EVENT_CLIENT_RENDER_STOP,\n CONTENT_SECURITY_POLICY_ERROR,\n EVENT_WEB_VITALS_CLS,\n EVENT_WEB_VITALS_FCP,\n EVENT_WEB_VITALS_FID,\n EVENT_WEB_VITALS_INP,\n EVENT_WEB_VITALS_LCP,\n EVENT_WEB_VITALS_TTFB,\n EXCEPTION_CLIENT_CACHE_HYDRATE,\n EXCEPTION_LOAD_DATA_EXCEPTION,\n EXCEPTION_PRODUCT_LIST_CLIENTSIDE_HYDRATION,\n expAttributeRenderer,\n GenericConsoleLogger,\n IEventClientRenderMetrics,\n IEventClientRenderProperties,\n IEventClientWebVitalsCLSMetrics,\n IEventId,\n IEventTime,\n ITelemetry,\n LogLevel,\n MESSAGE_CLIENT_RENDER_ERROR,\n StaticTelemetry,\n Telemetry,\n TelemetryEvent,\n InternalTelemetry,\n TSuccessNumber\n} from '@msdyn365-commerce/telemetry-internal';\nimport axios from 'axios';\nimport 'lazysizes';\nimport 'lazysizes/plugins/attrchange/ls.attrchange';\n// eslint-disable-next-line import/no-unassigned-import\nimport 'lazysizes/plugins/bgset/ls.bgset';\nimport { partition as _partition } from 'lodash';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { onCLS, onFCP, onFID, onLCP, onINP, onTTFB } from 'web-vitals';\nimport {\n RSRequestInterceptor,\n RSRequestInterceptorErrorHandler,\n RSResponseInterceptor,\n RSResponseInterceptorErrorHandler\n} from '../_server/inteceptors/rs-logging-interceptor';\nimport SafeRenderModule from '../components/safe-render-module';\nimport {\n CLIENT_RENDER_COMPLETE_EVENT,\n CLIENT_RENDER_START_EVENT,\n DEPRECATED_CLIENT_RENDER_COMPLETE_EVENT,\n LAYOUT_MOUNT_POINT,\n PROCESS_TYPE,\n MODULE_CONFIG_KEY,\n CLIENT_ENTRY_POINTS_TYPE\n} from '../consts';\nimport { loadData } from '../data/load-data';\nimport { processComplexDataTypes } from '../hydrators/process-page-response';\nimport { IDisabledProperties } from '../store/authoring-edit-helper';\nimport { PageContext } from '../store/page-context';\nimport {\n getCurrencyCodeFromContext,\n isLazyRenderModuleEnabled,\n optimizedGetAllModules,\n shouldOptimizeHydrate,\n timeSliceLongJSTask\n} from '../utils/helpers';\nimport { SessionStorageContext } from '../utils/session-storage-utils';\nimport { CookieContext } from './../utils/cookie-utils';\nimport { resolveMissingSegmentsOnClient } from './../utils/resolve-segments-utils';\n\ntype windowinitialData = IGeneric;\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n interface ClientWindow extends IMSDyn365Window {\n ___initialData___: windowinitialData;\n cache: RequestCache;\n }\n}\n\ndeclare let window: ClientWindow;\n\naxios.interceptors.request.use(RSRequestInterceptor, RSRequestInterceptorErrorHandler);\naxios.interceptors.response.use(RSResponseInterceptor, RSResponseInterceptorErrorHandler);\n\nconst CLIENT_HYDRATE_CACHE_KEY: ICacheKey = {\n key: CLIENT_HYDRATE_KEY,\n typeName: CLIENT_HYDRATE_TYPE\n};\n\nexport const getRequestContext = (storeData: windowinitialData): IRequestContext => {\n const requestContext: IRequestContext = storeData.requestContext;\n\n // See if cookie compliance is disabled at the site level\n const disableCookieCompliance =\n (requestContext.app && requestContext.app.platform && requestContext.app.platform.disableCookieCompliance) || false;\n const cartSessionExpiration =\n (requestContext.app && requestContext.app.platform && requestContext.app.platform.cartSessionExpiration) || 0;\n const cookies = new CookieContext({\n isConsentRequired: !disableCookieCompliance,\n cartExpirationInDays: cartSessionExpiration,\n sameSiteRequired: requestContext.sameSiteRequired\n });\n\n try {\n // merge the query params from url back to request context in case if the page response is cached\n const urlSearchParams = new URLSearchParams(window.location.search);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const entries = Object.fromEntries((urlSearchParams as any).entries());\n Object.keys(entries || {}).map(param => {\n if (requestContext.query && !requestContext.query[param]) {\n requestContext.query[param] = entries[param] || '';\n }\n });\n } catch (e) {\n console.error('merging query parameters from url failed');\n }\n\n if (requestContext.telemetrySettings && storeData['_clientPlatformSetting']) {\n requestContext.telemetrySettings.operationalInsightsInstrumentationKey =\n storeData['_clientPlatformSetting'].secondaryInstrumentationKey;\n }\n requestContext.cookies = cookies;\n requestContext.sessionStorage = new SessionStorageContext(cookies);\n requestContext.headers = Object.freeze({});\n requestContext.url.requestUrl =\n typeof requestContext.url.requestUrl === 'string' ? new URL(requestContext.url.requestUrl) : requestContext.url.requestUrl;\n return requestContext;\n};\n\nconst setClientHydrateContext = (requestCache: ICache) => {\n requestCache.put(CLIENT_HYDRATE_CACHE_KEY, { item: true });\n};\n\nconst resetClientHydrateContext = (requestCache: ICache) => {\n requestCache.del(CLIENT_HYDRATE_CACHE_KEY);\n};\n\nconst getPathName = (requestContextUrl: IRequestContextUrl): string => {\n if (requestContextUrl && requestContextUrl.requestUrl && requestContextUrl.requestUrl.pathname) {\n return requestContextUrl.requestUrl.pathname;\n }\n return '';\n};\n\nconst isPaymentVerification = (requestContext: IRequestContext): boolean => {\n return requestContext.query?.pv === '1';\n};\n\nconst isCheckoutRoute = (requestContext: IRequestContext): boolean => {\n return (\n requestContext.app &&\n requestContext.app.routes &&\n requestContext.app.routes.checkout &&\n requestContext.app.routes.checkout.destinationUrl &&\n getPathName(requestContext.url) === requestContext.app.routes.checkout.destinationUrl\n );\n};\n\nconst activateExperiments = (requestContext: IRequestContext): void => {\n // Activate experiment if an experimentation connector has been registered and active experiments are provided\n // In a preview scenario, OneRF will not send a user ID and which we will not active the experiment\n if (\n msdyn365Commerce.experimentationConnector &&\n requestContext.features.experimentation &&\n requestContext.experiments &&\n requestContext.experiments.userId &&\n requestContext.experiments.activeExperiments &&\n requestContext.experiments.activeExperiments.length > 0\n ) {\n const experimentInfo = requestContext.experiments;\n // Split the experiment list into two lists, one whose experiments are coupled with a module and one whose experiments are not\n const [experimentsWithoutModuleId, experimentsWithModuleId] = _partition(experimentInfo.activeExperiments, (value: IVariants) => {\n return !value.moduleId;\n });\n // Activate experiments not tied to a module id\n msdyn365Commerce.experimentationConnector.provider.activateExperiment(experimentInfo.userId, experimentsWithoutModuleId, {\n Type: requestContext.device.Type\n });\n\n // Activate experiments once 30% of the module is visible\n const options: IntersectionObserverInit = {\n threshold: 0.3\n };\n const experimentMap: IDictionary = {};\n const experimentObserver = new IntersectionObserver((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {\n entries.forEach((entry: IntersectionObserverEntry) => {\n if (entry.isIntersecting && entry.intersectionRatio >= 0.3) {\n const activatedExpId = entry.target.getAttribute(`data-exp`);\n if (activatedExpId) {\n // Find the experiment/variant combo associated with the experiment to activate\n msdyn365Commerce.experimentationConnector?.provider.activateExperiment(\n experimentInfo.userId,\n [experimentMap[activatedExpId]],\n {\n Type: requestContext.device.Type\n }\n );\n }\n // Once we the element has come into the view for the first time, we can stop observing it\n observer.unobserve(entry.target);\n }\n });\n }, options);\n for (let i = 0; i < experimentsWithModuleId.length; i++) {\n const currentExperiment = experimentsWithModuleId[i];\n const target = document.querySelector(`[data-exp=\"id:${currentExperiment.experimentId}\"]`);\n if (target) {\n experimentMap[`id:${currentExperiment.experimentId}`] = currentExperiment;\n experimentObserver.observe(target);\n }\n }\n }\n};\n\n/**\n * Method to hydrate the markup returned by server on the client.\n * @param requestContext request context object\n * @param pageContext page context object\n * @param coreContext core context object\n */\nconst hydrateClient = (requestContext: IRequestContext, pageContext: PageContext, coreContext: ICoreContext) => {\n const pageRoot = pageContext.pageRoot;\n const body = pageRoot.modules && pageRoot.modules.body;\n const props = body && body.length > 0 ? body[0] : pageRoot;\n const defaultPageConfig =\n (!!!requestContext?.features?.disable_moduleConfig_optimize &&\n pageContext.requestCache.getValue({ typeName: MODULE_CONFIG_KEY, key: props.id })) ||\n props.config;\n try {\n ReactDOM.hydrate(\n \n ,\n document.getElementById(LAYOUT_MOUNT_POINT)\n );\n } catch (err) {\n // If in dev mode or debug mode, throw the error so it's visible on the page.\n if ((process.env.NODE_ENV === 'development' || requestContext.params.isDebug) && !requestContext.params.isEditor) {\n throw err;\n // In editor mode, catch the error but don't throw so that the page doesn't freeze up\n } else if (requestContext.params.isEditor) {\n console.log(`Error running editor (client) render: ${err}`);\n }\n }\n};\n\n/**\n * Method to initialize authoring helper and register event to receive list of disabled properties when rendered in the context of site builder\n * @param requestContext request context object\n * @param pageContext page context object\n * @param coreContext core context object\n * @param actionContext action context object\n * @param moduleTelemetry module telemetry object\n */\nconst initAuthoringHelper = (\n requestContext: IRequestContext,\n pageContext: PageContext,\n coreContext: ICoreContext,\n actionContext: IActionContext,\n moduleTelemetry\n) => {\n const themeSettings: IPartnerThemeSettings = window.___initialData___.themeSettings ? window.___initialData___.themeSettings : {};\n\n return import('../utils/authoring-tools-helper').then(m => {\n const AuthoringToolsHelper = m.AuthoringToolsHelper;\n const authoringHelper = new AuthoringToolsHelper(actionContext, themeSettings, coreContext, pageContext, moduleTelemetry);\n window._msdyn365.authoringHelper = authoringHelper;\n\n const _msdyn365Data = window._msdyn365;\n _msdyn365Data.authoringHelper = authoringHelper;\n\n if (requestContext.params.isEditor) {\n // @ts-ignore\n document.addEventListener('_msdyn365_client_disabled_properties', (dpEvent: { detail: IDisabledProperties }) => {\n if (dpEvent && dpEvent.detail && dpEvent.detail) {\n Object.keys(dpEvent.detail.modules).map(key => {\n authoringHelper.updateDisabledProperties(key, dpEvent.detail.modules[key]);\n });\n }\n });\n }\n });\n};\n\nexport function clientRender(): void {\n const storeData = window.___initialData___;\n if (!storeData || typeof storeData !== 'object') {\n console.error(MESSAGE_CLIENT_RENDER_ERROR);\n return;\n }\n const removePlaceholderModules = (modulesDictionary: { [slot: string]: IModuleContract[] }) => {\n Object.keys(modulesDictionary || {}).forEach(slot => {\n modulesDictionary[slot] = modulesDictionary[slot].filter(a => a.typeName !== 'place-holder-for-container-preview');\n modulesDictionary[slot].forEach(module => module.modules && removePlaceholderModules(module.modules));\n });\n };\n const requestContext = getRequestContext(storeData);\n if (requestContext.params.isEditor) {\n removePlaceholderModules(storeData.pageRoot.modules);\n }\n\n // if request is not POST or is not a checkout route or is not a payment verification, clear all checkout session storage data.\n // TODO: Explore a way to move this logic to SSK\n if (!requestContext.requestFormData || !isCheckoutRoute(requestContext) || !isPaymentVerification(requestContext)) {\n requestContext.sessionStorage.removeCheckoutCartData();\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const appCache = (msdyn365Commerce as any).getAppCache(requestContext);\n const pageContext = new PageContext(storeData, requestContext, appCache);\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).__msdyn365__ = {};\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).__msdyn365__.pageContext = pageContext;\n\n // Get the 1DS instance from the browser client. Initialized as part of base-page\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const oneDSWeb: any = window['oneDSWeb'];\n\n // Get the registered experiment listener\n const expListener = msdyn365Commerce.experimentationConnector?.listener;\n\n // Get application insights instrumentation key\n const appInsightsInstrumentationKey = requestContext.telemetrySettings.instrumentationKey || '';\n let msftClientAppInsightsJSLogger;\n if (appInsightsInstrumentationKey !== '') {\n msftClientAppInsightsJSLogger = new ClientAppInsightsJSLogger(\n LoggerType.MSFTApplicationInsightsLogger,\n appInsightsInstrumentationKey\n );\n }\n\n // Get operational insights instrumentation key\n const operationalInsightsInstrumentationKey = requestContext.telemetrySettings.operationalInsightsInstrumentationKey || '';\n let operationalClientAppInsightsJSLogger;\n if (operationalInsightsInstrumentationKey !== '') {\n operationalClientAppInsightsJSLogger = new ClientAppInsightsJSLogger(\n LoggerType.OperationalApplicationInsightsLogger,\n operationalInsightsInstrumentationKey\n );\n }\n\n // Set up internal SDK telemetry\n const internalTelemetry = StaticTelemetry;\n internalTelemetry.enableDataAnalytics(requestContext.features.enableDataAnalytics);\n internalTelemetry.registerWebAnalyticsPlugin(oneDSWeb);\n internalTelemetry.registerAttributeRenderer(expAttributeRenderer);\n if (appInsightsInstrumentationKey !== '') {\n internalTelemetry.registerTraceLogger({\n traceLogger: msftClientAppInsightsJSLogger\n });\n }\n\n internalTelemetry.setTelemetryRequestContext({\n siteId: '[[Placeholder]]',\n channelId: requestContext.channel?.RecordId ? requestContext.channel.RecordId.toString() : 'Unavailable',\n pageType: requestContext.urlTokens.pageType,\n pageId: pageContext.pageRoot.id\n });\n\n const correlationId = Telemetry.generateGuid();\n logWebVitals(internalTelemetry, correlationId);\n\n const targetId = requestContext?.tuid;\n if (targetId) {\n resolveMissingSegmentsOnClient(requestContext, targetId, internalTelemetry);\n }\n\n // Set up external module telemetry\n const moduleTelemetry = new Telemetry();\n moduleTelemetry.enableDataAnalytics(requestContext.features.enableDataAnalytics);\n moduleTelemetry.registerWebAnalyticsPlugin(oneDSWeb);\n moduleTelemetry.registerAttributeRenderer(expAttributeRenderer);\n if (operationalInsightsInstrumentationKey) {\n moduleTelemetry.registerTraceLogger({\n traceLogger: operationalClientAppInsightsJSLogger\n });\n }\n\n // If experimentaiton listener set up, add to event logging framework\n if (expListener && requestContext.features.experimentation) {\n internalTelemetry.registerExpLogger(expListener);\n\n moduleTelemetry.registerExpLogger(expListener);\n }\n\n // If in debug mode, add console loggers\n if (requestContext.params.isDebug) {\n internalTelemetry.registerTraceLogger({ traceLogger: GenericConsoleLogger, options: { isDebug: requestContext.params.isDebug } });\n moduleTelemetry.registerTraceLogger({ traceLogger: GenericConsoleLogger, options: { isDebug: requestContext.params.isDebug } });\n }\n\n const contentSecurityPolicy = requestContext.app && requestContext.app?.contentSecurityPolicy;\n\n // Logging CSP error only when CSP is enabled and enableReportOnlyMode is false\n if (contentSecurityPolicy && !contentSecurityPolicy?.disableContentSecurityPolicy && !contentSecurityPolicy?.enableReportOnlyMode) {\n const randomNumberGenerator = Math.floor(Math.random() * 100);\n\n document.addEventListener('securitypolicyviolation', e => {\n const cspReport = JSON.stringify({\n 'blocked-uri': e.blockedURI,\n 'document-uri': e.documentURI,\n 'original-policy': e.originalPolicy,\n 'violated-directive': e.violatedDirective\n });\n\n // Only logging all CSP errors for 25% of page request\n if (randomNumberGenerator < 25) {\n internalTelemetry.log(LogLevel.Error, CONTENT_SECURITY_POLICY_ERROR, { customTags: [cspReport] });\n }\n });\n }\n\n pageContext\n .putRequestedModulesInCacheOnClient(storeData, moduleTelemetry)\n .catch(error => {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_CLIENT_CACHE_HYDRATE, { exception: error });\n })\n .finally(async () => {\n await timeSliceLongJSTask(requestContext);\n\n window._msdyn365 = {\n requestContext: requestContext,\n telemetry: internalTelemetry\n };\n\n const actionContext = new ActionContext({\n id: 'Client Action Context',\n requestContext: requestContext,\n requestCache: pageContext.requestCache,\n telemetry: moduleTelemetry,\n appCache: null,\n spawnChildOnExecute: true\n });\n\n if (requestContext.params.isDebug) {\n window._msdyn365.cache = pageContext.requestCache;\n }\n const coreContext: ICoreContext = {\n actionContext: actionContext,\n app: requestContext.app,\n // @ts-ignore -- we don't actually have this prop defined on the interface\n internalTelemetry: internalTelemetry,\n telemetry: moduleTelemetry,\n request: requestContext,\n cultureFormatter: new CultureInfoFormatter(\n requestContext.locale,\n getCurrencyCodeFromContext(requestContext),\n requestContext.query\n )\n };\n let allModules: IModule[] = [];\n await timeSliceLongJSTask(requestContext);\n if (requestContext?.features?.loadData_optimization) {\n allModules = await optimizedGetAllModules(pageContext, requestContext);\n } else {\n allModules = await pageContext.allModules(requestContext, []);\n }\n\n const allowDispatchEvent = requestContext?.params?.isEditor || requestContext?.features?.enable_verbose_logs ? true : false;\n if (shouldOptimizeHydrate(requestContext)) {\n await optimizeClientHydrate(\n requestContext,\n pageContext,\n coreContext,\n actionContext,\n allModules,\n moduleTelemetry,\n internalTelemetry,\n correlationId\n );\n } else {\n if (requestContext.params.isEditor) {\n await initAuthoringHelper(requestContext, pageContext, coreContext, actionContext, moduleTelemetry);\n }\n\n // Fire event to let tooling know render starts. Tools on receiving this event, calls\n // initialziation and passes the rendering helper class instance that can be used by SDK to\n // get any information/context w.r.t tools\n if (allowDispatchEvent) {\n const event = new Event(CLIENT_RENDER_START_EVENT);\n document.dispatchEvent(event);\n }\n\n if (allowDispatchEvent) {\n internalTelemetry.trackEvent(EVENT_CLIENT_RENDER_START, {\n id: correlationId\n });\n internalTelemetry.startTimer(correlationId);\n }\n\n let initialPromise: Promise = Promise.resolve();\n const LAZYLOAD_ALL_SWITCH: boolean = requestContext.features.lazyload_all;\n\n initialPromise = initialPromise.then(async () => {\n try {\n return processComplexDataTypes(LAZYLOAD_ALL_SWITCH, PROCESS_TYPE.client, allModules, actionContext);\n } catch (error) {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_PRODUCT_LIST_CLIENTSIDE_HYDRATION, { exception: error });\n }\n });\n\n initialPromise.finally(() => {\n // put client hydrate flag into request cache.\n setupClientHydrateFlag(pageContext.requestCache);\n loadData(allModules, requestContext, internalTelemetry, moduleTelemetry, pageContext.requestCache, null)\n .then(() => {\n if (allowDispatchEvent) {\n internalTelemetry.trackEvent(\n EVENT_CLIENT_RENDER_STOP,\n {\n id: correlationId\n },\n {\n success: 1,\n time: internalTelemetry.stopTimer(correlationId)\n }\n );\n }\n })\n .catch(error => {\n if (allowDispatchEvent) {\n internalTelemetry.trackEvent(\n EVENT_CLIENT_RENDER_STOP,\n {\n id: correlationId\n },\n {\n success: 0,\n time: internalTelemetry.stopTimer(correlationId)\n }\n );\n }\n internalTelemetry.log(LogLevel.Error, EXCEPTION_LOAD_DATA_EXCEPTION, { exception: error });\n })\n .finally(() => {\n // remove client hydrate flag from request cache.\n resetClientHydrateContext(pageContext.requestCache);\n // Gets a reference to the same Telemetry, so that we can route existing log calls to new back-end without changing front-end API\n\n if (!shouldOptimizeHydrate(requestContext)) {\n hydrateClient(requestContext, pageContext, coreContext);\n }\n msdyn365Commerce.setClientHydrate(false);\n // Add the page view exp event id to the page level div\n const pageName = requestContext.telemetryPageName || requestContext.url.requestUrl.pathname;\n document.getElementById(LAYOUT_MOUNT_POINT)?.setAttribute('data-exp-event-id', `${pageName}.PageView`);\n // Activate any active experiments on the page\n activateExperiments(requestContext);\n\n // TODO (matt, 6/15/20): Manually firing page view event, undo once 1DS forwarding to framework implemented\n internalTelemetry.logEvent(TelemetryEvent.PageView, {\n title: requestContext.telemetryPageName || requestContext.url.requestUrl.pathname\n });\n\n if (allowDispatchEvent) {\n // Fire event to let tooling know render is complete\n const deprecatedEvent = new Event(DEPRECATED_CLIENT_RENDER_COMPLETE_EVENT);\n document.dispatchEvent(deprecatedEvent);\n\n document.dispatchEvent(new Event(CLIENT_RENDER_COMPLETE_EVENT));\n }\n });\n });\n }\n });\n\n // TODO (matt, 6/15/20): Manually firing page view event, undo once 1DS forwarding to framework implemented\n internalTelemetry.logEvent(TelemetryEvent.PageView, {\n title: requestContext.telemetryPageName || requestContext.url.requestUrl.pathname\n });\n}\n\nconst setupClientHydrateFlag = (requestCache: ICache) => {\n setClientHydrateContext(requestCache);\n msdyn365Commerce.setClientHydrate(true);\n};\n\nconst optimizeClientHydrate = async (\n requestContext: IRequestContext,\n pageContext: PageContext,\n coreContext: ICoreContext,\n actionContext: ActionContext,\n allModules: IModule[],\n moduleTelemetry: ITelemetry,\n internalTelemetry: InternalTelemetry,\n correlationId: string\n) => {\n try {\n // Await on instance data actions, other data actions are run asynchronously\n setupClientHydrateFlag(pageContext.requestCache);\n\n let modulesRenderedOnServer = allModules;\n if (isLazyRenderModuleEnabled(requestContext)) {\n modulesRenderedOnServer = allModules.filter(m => {\n const cacheItem = pageContext.requestCache.get({ typeName: CLIENT_ENTRY_POINTS_TYPE, key: m.typeName })?.item;\n return !cacheItem;\n });\n }\n await timeSliceLongJSTask(requestContext);\n\n await loadData(modulesRenderedOnServer, requestContext, internalTelemetry, moduleTelemetry, pageContext.requestCache, null);\n resetClientHydrateContext(pageContext.requestCache);\n const allowDispatchEvent = requestContext?.params?.isEditor || requestContext?.features?.enable_verbose_logs ? true : false;\n\n // Fire event to let tooling know render starts. Tools on receiving this event, calls\n // initialziation and passes the rendering helper class instance that can be used by SDK to\n // get any information/context w.r.t tools\n if (allowDispatchEvent) {\n const event = new Event(CLIENT_RENDER_START_EVENT);\n document.dispatchEvent(event);\n }\n\n if (requestContext?.features?.enable_verbose_logs) {\n internalTelemetry.trackEvent(EVENT_CLIENT_RENDER_START, {\n id: correlationId\n });\n internalTelemetry.startTimer(correlationId);\n }\n\n // hydrate client without waiting on all the data actions to complete\n hydrateClient(requestContext, pageContext, coreContext);\n msdyn365Commerce.setClientHydrate(false);\n\n if (allowDispatchEvent) {\n trackEvent(internalTelemetry, correlationId, EVENT_CLIENT_RENDER_STOP, 1);\n }\n\n if (requestContext.params.isEditor) {\n await initAuthoringHelper(requestContext, pageContext, coreContext, actionContext, moduleTelemetry);\n }\n\n const LAZYLOAD_ALL_SWITCH: boolean = requestContext.features.lazyload_all;\n\n try {\n await processComplexDataTypes(LAZYLOAD_ALL_SWITCH, PROCESS_TYPE.client, allModules, actionContext);\n } catch (error) {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_PRODUCT_LIST_CLIENTSIDE_HYDRATION, { exception: error });\n }\n\n // Add the page view exp event id to the page level div\n const pageName = requestContext.telemetryPageName || requestContext.url.requestUrl.pathname;\n document.getElementById(LAYOUT_MOUNT_POINT)?.setAttribute('data-exp-event-id', `${pageName}.PageView`);\n // Activate any active experiments on the page\n activateExperiments(requestContext);\n\n if (allowDispatchEvent) {\n // Fire event to let tooling know render is complete\n const deprecatedEvent = new Event(DEPRECATED_CLIENT_RENDER_COMPLETE_EVENT);\n document.dispatchEvent(deprecatedEvent);\n document.dispatchEvent(new Event(CLIENT_RENDER_COMPLETE_EVENT));\n }\n } catch (error) {\n if (requestContext.features.enable_verbose_logs) {\n trackEvent(internalTelemetry, correlationId, EVENT_CLIENT_RENDER_STOP, 0);\n }\n internalTelemetry.log(LogLevel.Error, EXCEPTION_LOAD_DATA_EXCEPTION, { exception: error });\n }\n};\n\nconst trackEvent = (internalTelemetry: InternalTelemetry, correlationId: string, eventName: string, success: TSuccessNumber) => {\n internalTelemetry.trackEvent(\n eventName,\n {\n id: correlationId\n },\n {\n success,\n time: internalTelemetry.stopTimer(correlationId)\n }\n );\n};\n\nconst logWebVitals = (internalTelemetry: InternalTelemetry, correlationId: string) => {\n onCLS(metric => {\n internalTelemetry.trackEvent(\n EVENT_WEB_VITALS_CLS,\n { id: correlationId },\n { value: metric.value }\n );\n });\n onFCP(metric => {\n internalTelemetry.trackEvent(EVENT_WEB_VITALS_FCP, { id: correlationId }, { time: metric.value });\n });\n onFID(metric => {\n internalTelemetry.trackEvent(EVENT_WEB_VITALS_FID, { id: correlationId }, { time: metric.value });\n });\n onLCP(metric => {\n internalTelemetry.trackEvent(EVENT_WEB_VITALS_LCP, { id: correlationId }, { time: metric.value });\n });\n onTTFB(metric => {\n internalTelemetry.trackEvent(EVENT_WEB_VITALS_TTFB, { id: correlationId }, { time: metric.value });\n });\n onINP(metric => {\n internalTelemetry.trackEvent(EVENT_WEB_VITALS_INP, { id: correlationId }, { time: metric.value });\n });\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IAny, IGeneric, MSDyn365Commerce, msdyn365Commerce } from '@msdyn365-commerce/core-internal';\nimport * as React from 'react';\nimport { IBinding, IModuleBinder, IMSDyn365CommerceWithPrototype } from './models';\n\nexport const initializeApp = (bindings: IBinding) => {\n /**\n * Why we are using 'Prototype'. MSDyn365Commerce is defined in core packages and used in modules and C1 development.\n * whereas all registration, build information, commerce details etc available in runtime-internal package.\n * prototype help us declaring properties in core package and implementation in runtime-internal package.\n *\n * Following properties are not accessible by module or c1 developer.\n */\n (MSDyn365Commerce).prototype.bindings = bindings;\n\n (MSDyn365Commerce).prototype.moduleBinder = function(name: string): IModuleBinder {\n return this.bindings && this.bindings.modules && this.bindings.modules[name && name.toLowerCase()];\n };\n\n (MSDyn365Commerce).prototype.viewBinder = function(name: string): React.FC {\n return this.bindings && this.bindings.views && this.bindings.views[name];\n };\n\n (MSDyn365Commerce).prototype.componentBinder = function(name: string): React.FC {\n return this.bindings && this.bindings.components && this.bindings.components[name];\n };\n\n (MSDyn365Commerce).prototype.getPartnerOverrideAction = function(id: string): Function {\n return this.bindings && this.bindings.partnerDataActions && this.bindings.partnerDataActions[id];\n };\n\n (MSDyn365Commerce).prototype.dataAction = function(name: string): Function {\n return (\n (this.bindings && this.bindings.partnerDataActions && this.bindings.partnerDataActions[name]) ||\n (this.bindings && this.bindings.dataActions && this.bindings.dataActions[name])\n );\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (MSDyn365Commerce).prototype.getConnector = function(name: string): any {\n return this.bindings && this.bindings.connectors && this.bindings.connectors[name];\n };\n\n (MSDyn365Commerce).prototype.getAllModuleBinder = function(): IModuleBinder[] {\n return this.bindings && this.bindings.modules && Object.values(this.bindings.modules);\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Returns an npm package source.\n (MSDyn365Commerce).prototype.perfAnalysisBinder = function(): any {\n return this.bindings?.perfAnalysisLibBinding;\n };\n\n (MSDyn365Commerce).prototype.updatePrivateVariable = function(): void {\n // @ts-ignore -- accessing a private class variable which is a valid JS\n this._env = process.env.NODE_ENV;\n };\n\n (>msdyn365Commerce).updatePrivateVariable();\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { ICache, ICacheKey } from '@msdyn365-commerce/cache-internal';\nimport { IComponent, IComponentProps, ICoreContext, IModule, msdyn365Commerce } from '@msdyn365-commerce/core-internal';\nimport { asSystemMetadata, EXCEPTION_NOMODULEBINDER, LogLevel } from '@msdyn365-commerce/telemetry-internal';\nimport React from 'react';\nimport * as path from 'path';\nimport { IMSDyn365CommerceExtension } from '../app-initialization/models';\nimport { getModuleName, getPageInsightsCacheKey, isPageInsightsEnabled } from '../utils/helpers';\nimport { PAGE_INSIGHTS_COMPONENTS_KEY } from '../consts';\n\nexport interface IModuleWithView extends IModule {\n View: React.FunctionComponent;\n}\n\nconst getModuleBinder = (typeName: string) => ((msdyn365Commerce as unknown) as IMSDyn365CommerceExtension).moduleBinder(typeName);\n\nconst getBinder = (lookupKey: string, moduleName: string, requestCache: ICache, pageInsightsEnabled: boolean) => {\n const view = ((msdyn365Commerce as unknown) as IMSDyn365CommerceExtension).componentBinder(lookupKey);\n if (view) {\n if (pageInsightsEnabled) {\n const componentInsightsKey = getPageInsightsCacheKey(PAGE_INSIGHTS_COMPONENTS_KEY);\n const componentInsights = requestCache.get<{}>(componentInsightsKey)?.item || {};\n componentInsights[`${moduleName}`] = `${lookupKey.replace(/\\|/g, '/')}.component.tsx`;\n requestCache.put(componentInsightsKey, { item: componentInsights });\n }\n\n return { key: lookupKey, view };\n }\n return undefined;\n};\n\n/* component will be read in following hierarchy\n 1) __local__/__local__|views/theme1/BuyBox/Components/PriceComponent\n 2) __local__/__local__|views/theme1/Components/PriceComponent\n 3) @msdyn-365-commerce-modules/theme1/views/BuyBox/Components/PriceComponent\n 4) @msdyn-365-commerce-modules/theme1/views/Components/PriceComponent\n */\nconst lookupFunc = (moduleBinder, themeBinder, name, requestCache: ICache, pageInsightsEnabled: boolean) => {\n name = name.toLowerCase();\n return (\n (themeBinder &&\n (getBinder(\n `__local__|__local__|themes|${themeBinder.name}|views|${moduleBinder.name}|components|${name}`,\n moduleBinder.name,\n requestCache,\n pageInsightsEnabled\n ) ||\n getBinder(\n `__local__|__local__|themes|${themeBinder.name}|views|components|${name}`,\n moduleBinder.name,\n requestCache,\n pageInsightsEnabled\n ) ||\n getBinder(\n `__local__|__local__|themes|${themeBinder.name}|views|components|${moduleBinder.name}|${name}`,\n moduleBinder.name,\n requestCache,\n pageInsightsEnabled\n ) ||\n getBinder(\n `${themeBinder.moduleNamespace}|${themeBinder.packageName}|modules|${themeBinder.name}|views|components|${moduleBinder.name}|${name}`,\n moduleBinder.name,\n requestCache,\n pageInsightsEnabled\n ) ||\n getBinder(\n `${themeBinder.moduleNamespace}|${themeBinder.packageName}|modules|${themeBinder.name}|views|components|${name}`,\n moduleBinder.name,\n requestCache,\n pageInsightsEnabled\n ))) ||\n getBinder(\n `${moduleBinder.moduleNamespace}|${moduleBinder.packageName}|views|${moduleBinder.name}|components|${name}`,\n moduleBinder.name,\n requestCache,\n pageInsightsEnabled\n )\n );\n};\n\n/**\n * Component will be read from the module\n * @msdyn-365-commerce-modules/BuyBox/views/BuyBox/Components/PriceComponent\n */\nconst defaultComponentLookupFunc = (moduleBinder, name: string, requestCache: ICache, pageInsightsEnabled: boolean) => {\n const parentModuleBinder = getModuleBinder(getModuleName(moduleBinder.parentDefinitionPath));\n\n return (\n getBinder(\n `${moduleBinder.moduleNamespace}|${moduleBinder.packageName}|views|${moduleBinder.name}|components|${name}`,\n moduleBinder.name,\n requestCache,\n pageInsightsEnabled\n ) ||\n (parentModuleBinder &&\n getBinder(\n `${parentModuleBinder.moduleNamespace}|${parentModuleBinder.packageName}|views|${parentModuleBinder.name}|components|${name}`,\n moduleBinder.name,\n requestCache,\n pageInsightsEnabled\n ))\n );\n};\n\nconst getComponent = (name, moduleBinder, themeBinder, context: ICoreContext) => {\n if (!moduleBinder) {\n return { view: null };\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const cache: ICache = (msdyn365Commerce as any).getAppCache(context.actionContext.requestContext);\n const pageInsightsEnabled = isPageInsightsEnabled(context.request.params);\n const cacheKey: ICacheKey = {\n key: `${name}|${moduleBinder.name}|${themeBinder ? themeBinder.name : 'no-theme'}`,\n typeName: '__ComponentCacheKey__'\n };\n const lookupKey = cache.getValue(cacheKey);\n const actionContextData: any = context.actionContext;\n const requestCache: ICache = actionContextData.requestCache;\n\n if (lookupKey) {\n context.telemetry.log(LogLevel.Debug, `lookup key for component [${cacheKey.key}] found at - [${lookupKey}]`);\n !msdyn365Commerce.isBrowser && actionContextData.requestCache.put(cacheKey, { item: lookupKey });\n return getBinder(lookupKey, moduleBinder.name, requestCache, pageInsightsEnabled) || { view: null };\n }\n\n let component = lookupFunc(moduleBinder, themeBinder, name, requestCache, pageInsightsEnabled);\n\n // If no component found in the theme, search in parent theme (in case of inherited theme)\n if (!component && themeBinder) {\n const parentThemeName = getModuleName(themeBinder.parentDefinitionPath);\n const parentThemeBinder = getModuleBinder(parentThemeName);\n component = lookupFunc(moduleBinder, parentThemeBinder, name, requestCache, pageInsightsEnabled);\n }\n\n // If no component file found, fall back to module's default component\n if (!component) {\n component = defaultComponentLookupFunc(moduleBinder, name, requestCache, pageInsightsEnabled);\n }\n\n if (component) {\n context.telemetry.log(LogLevel.Debug, `lookup key for component [${cacheKey.key}] found at - [${component.key}]`);\n cache.put(cacheKey, { item: component.key });\n actionContextData.requestCache.put(cacheKey, { item: component.key });\n return component;\n }\n\n return { view: null };\n};\n\nexport const createComponent = >(name: string, componentObj: T) => (props: IComponentProps) => {\n props.context.telemetry.log(LogLevel.Debug, `rendering component-'${name}' within module-'${props.id}-${props.typeName}'`);\n const moduleBinder = getModuleBinder(props.typeName);\n if (!moduleBinder) {\n props.context.telemetry.log(LogLevel.Error, EXCEPTION_NOMODULEBINDER, { values: [asSystemMetadata(props.typeName)] });\n return null;\n }\n let componentName = path.basename(__filename);\n if (componentName) {\n componentName = componentName.replace('.component.tsx', '');\n componentName = componentName.replace('.component.js', '');\n }\n\n const themeBinder = getModuleBinder(props.context.actionContext.requestContext.params.theme);\n let componentView = getComponent(componentName, moduleBinder, themeBinder, props.context);\n if (!componentView.view) {\n componentView = getComponent(name, moduleBinder, themeBinder, props.context);\n }\n const { view } = componentView;\n const mergedComponent = view ? { ...((componentObj as unknown) as object), ...view } : componentObj;\n const Component = mergedComponent.component;\n const propsDictionary = props as any;\n if (propsDictionary.addChunk && view) {\n propsDictionary.addChunk(view.cn);\n }\n\n return MSDyn365Commerce).prototype.updatePrivateVariable = function(): void {\n // @ts-ignore -- accessing a private class variable which is a valid JS\n this.createComponent = createComponent;\n };\n (>msdyn365Commerce).updatePrivateVariable();\n};\n\nexport const initializeClientApp = async (bindings: IBinding, connectors: IConnectors) => {\n skipConsoleWarn();\n addCreateComponentHook();\n initializeApp(bindings);\n const clientPlatformSettings = (window).___initialData___ && (window).___initialData___._clientPlatformSetting;\n await initBindings(bindings, clientPlatformSettings && clientPlatformSettings.enableModuleEntryPoints);\n\n (MSDyn365Commerce).prototype.updatePrivateVariable = function(): void {\n const appDatabv = (window).___appData___ && (window).___appData___.bv;\n\n // @ts-ignore -- accessing a private class variable which is a valid JS\n this._buildVersion = appDatabv;\n\n // @ts-ignore -- accessing a private class variable which is a valid JS\n this._experimentationConnector = connectors?.experimentation;\n\n // @ts-ignore -- accessing a private class variable which is a valid JS\n this._platformSettings = clientPlatformSettings;\n\n // @ts-ignore -- accessing a private class variable which is a valid JS\n this._versionDependentFeatureInfo = (window).___initialData___ && (window).___initialData___._versionDependentFeatureInfo;\n\n // @ts-ignore -- accessing a private class variable which is a valid JS\n this._environmentVariable = (window).___initialData___ && (window).___initialData___._environmentVariable;\n };\n (>msdyn365Commerce).updatePrivateVariable();\n\n (MSDyn365Commerce).prototype.getAppCache = (requestContext: IRequestContext) => requestCache;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport path from 'path';\nimport { IBinding, IModuleBinder, IModuleBinderPartial } from './models';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const initBindings = async (bindings: IBinding, isModuleEntryPointsEnabled: boolean) => {\n await Promise.all(\n Object.keys(bindings.modules).map(async moduleKey => {\n const originalBinder: IModuleBinderPartial = (bindings.modules[moduleKey]);\n try {\n const binder: IModuleBinder = {};\n let fetchComponent;\n if (!isModuleEntryPointsEnabled) {\n fetchComponent = await originalBinder.c();\n }\n binder.component = isModuleEntryPointsEnabled\n ? function load() {\n return originalBinder.c();\n }\n : fetchComponent.default;\n binder.moduleDirectory = originalBinder.md;\n binder.dataActions = originalBinder.da;\n binder.packageName = originalBinder.p;\n binder.name = originalBinder.n;\n binder.definitionPath = path.join(originalBinder.md, `${originalBinder.n}.definition.json`);\n binder.parentDefinitionPath = originalBinder.pdp;\n binder.isNodeModule = originalBinder.iNM;\n binder.moduleNamespace = originalBinder.ns;\n binder.chunkName = `${originalBinder.ns}-${originalBinder.p}-${originalBinder.n}`;\n bindings.modules[moduleKey] = binder;\n } catch (e) {\n console.error(`failed to load module chunk :: ${moduleKey}`, e);\n }\n })\n );\n\n await Promise.all(\n Object.keys(bindings.views).map(async viewKey => {\n const viewComponent: any = bindings.views[viewKey];\n try {\n let fetchViewComponent;\n if (!isModuleEntryPointsEnabled) {\n fetchViewComponent = isModuleEntryPointsEnabled ? viewComponent.c() : await viewComponent.c();\n }\n (bindings.views[viewKey]).component = isModuleEntryPointsEnabled\n ? function load() {\n return viewComponent.c();\n }\n : fetchViewComponent.default;\n } catch (e) {\n console.error(`failed to load view chunk :: ${viewKey}`, e);\n }\n })\n );\n\n await Promise.all(\n Object.keys(bindings.components).map(async componentKey => {\n const ecommerceComponent: any = bindings.components[componentKey];\n try {\n const fetchEComComponent = await ecommerceComponent.c();\n (bindings.components[componentKey]).component = fetchEComComponent.default;\n } catch (e) {\n console.error(`failed to load component chunk :: ${componentKey}`, e);\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\n\nimport 'custom-event-polyfill';\n\nimport { initializeClientApp, clientRender } from '@msdyn365-commerce/runtime-internal/dist/lib/client';\nconst { getUniqueRequestedAssets } = require('../common');\n\n// Fetches the registration object from a given file and dictionary name\n// If the module is not found or dictionary does not exist an empty object is returned\nconst fetchRegistrationObject = (registration, dictionaryName) => {\n return registration ? registration[dictionaryName] : {};\n};\n\n// Registers all the local and installed modules need to render the page client-side\nconst registerModules = () => {\n const bindings = window.__bindings__;\n // installed modules registration\n if (bindings) {\n return {\n modules: {\n ...bindings.modules\n },\n dataActions: {\n // load data actions in the order of the action overrides (installed and local)\n ...bindings.dataActions\n },\n partnerDataActions: {\n ...bindings.packageDataActions['__local__']\n },\n views: {\n ...bindings.viewDictionary\n }\n };\n }\n\n return {\n modules: {},\n dataActions: {},\n partnerDataActions: {},\n views: {}\n };\n};\n\nconst initializeConnectors = (connectorInformation = {}, connectorsRegistration, requestContext) => {\n let experimentationConnector;\n if (connectorsRegistration && connectorInformation) {\n const expConnectorName = connectorInformation.expConnector;\n if (expConnectorName && connectorsRegistration[expConnectorName]) {\n // Grab the stored config from the window object\n const config = window.___initialData___.experimentationConfig;\n // Grab the experimentation user ID\n const expUserId = requestContext && requestContext.experiments && requestContext.experiments.userId;\n // Initialize the provider and listener for client\n const experimentationProvider = connectorsRegistration[expConnectorName].provider;\n const experimentationListener = connectorsRegistration[expConnectorName].listener;\n\n if (!experimentationProvider || !experimentationListener) {\n return { experimentation: undefined };\n }\n\n experimentationProvider.initializeClientSide(config);\n experimentationListener.initializeClientSide(config, expUserId);\n experimentationConnector = { name: expConnectorName, provider: experimentationProvider, listener: experimentationListener };\n }\n }\n return { experimentation: experimentationConnector };\n};\n\nconst initializePerformanceUtils = async bindings => {\n return import(/* webpackChunkName: \"msdyn365-performance-chunk\" */ '@msdyn365-commerce/commerce-performance-analyzer').then(lib => {\n bindings.perfAnalysisLibBinding = lib;\n });\n};\n\nconst initializeClient = async () => {\n const requestedAssets = window.___initialData___ && getUniqueRequestedAssets(window.___initialData___);\n let bindings = { modules: {}, dataActions: {} };\n const requestContext = window.___initialData___ && window.___initialData___.requestContext;\n\n bindings = window.___initialData___ && registerModules(requestContext, requestedAssets);\n\n // component extensions registration\n try {\n bindings.components = fetchRegistrationObject(require('lib/component-registration'), 'componentDictionary');\n } catch (e) {\n if (e.code === 'MODULE_NOT_FOUND') {\n process.env.NODE_ENV === 'development' && console.log(`component registration files not found.`);\n }\n }\n\n // connectors registration\n try {\n bindings.connectors = fetchRegistrationObject(require('lib/connector-registration'), 'connectorDictionary');\n } catch (e) {\n if (e.code === 'MODULE_NOT_FOUND') {\n process.env.NODE_ENV === 'development' && console.log(`connector registration files not found.`);\n }\n }\n\n const connectorInformation = requestContext.connectors;\n const connectors = initializeConnectors(connectorInformation, bindings.connectors, requestContext);\n\n // eslint-disable-next-line camelcase\n const shouldRunPerformanceAnalysis = requestContext.features?.enable_performance_analysis && requestContext.params.isPerfAnalysis;\n if (shouldRunPerformanceAnalysis) {\n await initializePerformanceUtils(bindings);\n }\n\n await initializeClientApp(bindings, connectors);\n clientRender();\n};\n\nPromise.resolve().then(async () => {\n const initializeClientWithRetry = async retry => {\n if (retry > 3) {\n console.warn(`client initialization retry limit reached, Retry count: ${retry}`);\n // all retries failed but we should still render the page with the modules that are registered\n // safe render module will wrap the missing modules\n await initializeClient();\n return;\n }\n\n // Ideally, all the modules should be loaded by this time\n // However, loading does not guarantee execution of the script\n // in which case we should retry after a time window\n const bindings = window.__bindings__;\n if (!bindings) {\n setTimeout(() => initializeClientWithRetry(retry + 1), 500);\n return;\n }\n\n const lazyLoadedModules = window.___initialData___.requestCache.internalCache.__CEP__ || {};\n const modulesList = window.___initialData___._moduleList;\n const themesList = window.___initialData___._themeModulesList;\n const clientModulesList = new Set();\n modulesList.map(m => {\n if (m.typeName !== 'core-root' && !lazyLoadedModules[m.typeName.toUpperCase()]) {\n clientModulesList.add(m.typeName);\n }\n });\n themesList.map(m => m !== '' && clientModulesList.add(m));\n\n // make sure all the module chunks are loaded and executed before initializing the client\n let scriptsExecuted = true;\n Array.from(clientModulesList).map(m => {\n if (!bindings || !bindings.modules[m]) {\n scriptsExecuted = false;\n }\n });\n\n if (!bindings.packageDataActions?.['__local__']) {\n scriptsExecuted = false;\n }\n\n if (!scriptsExecuted) {\n setTimeout(() => initializeClientWithRetry(retry + 1), 500);\n return;\n }\n\n if (scriptsExecuted) {\n await initializeClient();\n } else {\n console.error(`client initialization failed, module scripts execution not complete. Retry count: ${retry}`);\n throw new Error(`client initialization failed, module scripts execution not complete. Retry count: ${retry}`);\n }\n };\n\n await initializeClientWithRetry(0);\n});\n","// This file is included in production builds as the first entry point in the bundle.\n// It must run before the rest of the bundle even executes, since it sets a variable that webpack uses\n// to resolve dynamic imports.\n\n// This variable is not global, it is a 'free' variable that is scoped to this bundle.\n__webpack_public_path__ = window.___publicPath___; // eslint-disable-line\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport React from 'react';\nimport { getRenderingHelper } from '../utils/helpers';\n\nexport type IAddModuleProps = {\n moduleId: string;\n slotId: string;\n enabled: boolean;\n mode: AddControlMode;\n index?: number;\n slotName?: string;\n parentId?: string;\n};\n\nexport enum AddControlMode {\n EmptySlot,\n Sibling\n}\nexport interface IAddModuleState {\n moduleId: string;\n}\n\n/**\n * Editable field component, containing all the logic for inline editable properties in editorial preview\n * Current support: text, image\n */\nexport class AddModuleControl extends React.Component {\n public constructor(props: IAddModuleProps) {\n super(props);\n this.state = {\n moduleId: props.moduleId\n };\n }\n public render(): JSX.Element | null {\n if (!this.props.enabled) {\n return null;\n }\n const localizedStrings = {\n insertModule:\n this.getLocalizedStringsfromTools('insertModule') !== ''\n ? this.getLocalizedStringsfromTools('insertModule')\n : 'Insert module',\n insertFragment:\n this.getLocalizedStringsfromTools('insertFragment') !== ''\n ? this.getLocalizedStringsfromTools('insertFragment')\n : 'Insert fragment',\n moveNotAllowed:\n this.getLocalizedStringsfromTools('moveNotAllowed') !== ''\n ? this.getLocalizedStringsfromTools('moveNotAllowed')\n : 'Move not allowed'\n };\n\n const button = (tooltip: string) => {\n return (\n \n \n \n \n );\n };\n if (this.props.mode === AddControlMode.Sibling) {\n return (\n \n
\n
{button(`Add a module to ${this.props.slotName || this.props.slotId}`)}
\n
\n
\n
\n
{button(`Configure ${this.props.slotName || this.props.slotId}`)}
\n
\n
\n
{localizedStrings.insertModule} \n
{localizedStrings.insertFragment} \n
{localizedStrings.moveNotAllowed} \n
\n
\n
& {\n typeName: string;\n requestCache: RequestCache;\n renderModuleAttributes: (props: IGeneric) => IDictionary;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n componentRef: React.RefObject>;\n renderView: React.FC;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n mappedProps: any;\n lazyLoadHandler: () => void;\n scriptInitCompleted: boolean;\n};\n\n/**\n *\n */\nexport class AsyncClientRenderComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n\n public loadScriptAsync = async (moduleChunk: string): Promise => {\n return new Promise((resolve, reject) => {\n const script = document.createElement('script');\n document.body.appendChild(script);\n script.type = 'text/javascript';\n script.onload = () => {\n resolve();\n };\n script.onerror = e => {\n console.error(`failed to load module chunk :: ${moduleChunk}`, e);\n };\n script.src = `${moduleChunk}`;\n script.async = false;\n script.defer = false;\n });\n };\n\n public waitAndInitializeModule = async (retryCount: number): Promise => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const bindings = (window as any).__bindings__;\n const registeredModules = bindings.modules;\n\n // lets make sure the script execution is complete before attemtping to render the module\n if (!registeredModules[this.props.mappedProps.typeName] && retryCount < 5) {\n setTimeout(() => this.waitAndInitializeModule(++retryCount), 500);\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const pageContext = (window as any).__msdyn365__.pageContext;\n let allModules: IModule[] = [];\n if (pageContext?.requestContext?.features?.loadData_optimization) {\n allModules = await optimizedGetAllModules(pageContext, pageContext.requestContext);\n } else {\n allModules = await pageContext.allModules(pageContext.requestContext, []);\n }\n const currentModuleArray = allModules.filter(m => m.typeName === this.props.mappedProps.typeName);\n const currentModule = currentModuleArray && currentModuleArray.length > 0 ? currentModuleArray[0] : undefined;\n\n if (!currentModule) {\n return;\n }\n\n // reassign the data actions from window bindings to reflect new data actions from client module\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (msdyn365Commerce as any).bindings.dataActions = bindings.dataActions;\n await loadData(\n [currentModule],\n this.props.mappedProps.context.request,\n this.props.mappedProps.internalTelemetry,\n this.props.mappedProps.internalTelemetry,\n this.props.requestCache,\n null,\n []\n );\n this.props.lazyLoadHandler();\n };\n\n public componentDidMount = async (): Promise => {\n if (msdyn365Commerce.isBrowser) {\n if (this.props.scriptInitCompleted) {\n return this.waitAndInitializeModule(0);\n }\n\n const clientModuleChunks = this.props.requestCache.get({\n typeName: CLIENT_ENTRY_POINTS_TYPE,\n key: this.props.typeName\n })\n ? this.props.requestCache.get({ typeName: CLIENT_ENTRY_POINTS_TYPE, key: this.props.typeName })?.item\n : [];\n\n if (!clientModuleChunks || clientModuleChunks.length === 0) {\n return this.waitAndInitializeModule(0);\n } else {\n const chunksToBeAdded: string[] = [];\n clientModuleChunks?.map(chunk => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const scriptElements = document.getElementsByTagName('script') as any;\n let chunkExistsOnPage = false;\n\n for (const scriptEl of scriptElements) {\n if (scriptEl.src.includes(chunk)) {\n chunkExistsOnPage = true;\n }\n }\n\n if (!chunkExistsOnPage) {\n chunksToBeAdded.push(chunk);\n }\n });\n\n if (chunksToBeAdded.length === 0) {\n // if chunk exists on page, we can render the module with wait time for script execution to avoid race condition(in case if the script exeuction is incomplete)\n return this.waitAndInitializeModule(0);\n }\n\n // add the chunks to the page and render module after script load event\n await Promise.all(\n (chunksToBeAdded || []).map(async moduleChunk => {\n return this.loadScriptAsync(moduleChunk);\n })\n );\n\n return this.waitAndInitializeModule(0);\n }\n }\n };\n\n public render = (): React.ReactNode | null => {\n if (!this.props.scriptInitCompleted) {\n return
;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const registrationBindings = (window as any).__bindings__;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const registeredModules = (msdyn365Commerce as any).bindings.modules;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const platformSettings = (msdyn365Commerce as any).platformSettings;\n const isModuleEntryPointsEnabled = platformSettings && platformSettings.enableModuleEntryPoints;\n if (!registrationBindings.modules[this.props.typeName]) {\n return
;\n }\n\n Object.keys(registrationBindings.modules || []).map(moduleTypeName => {\n if (!registeredModules[moduleTypeName]) {\n const rawModuleRegistrationObj: IModuleBinderPartial = registrationBindings.modules[moduleTypeName];\n const newModuleRegistrationObj: IModuleBinder = {} as IModuleBinder;\n newModuleRegistrationObj.component = isModuleEntryPointsEnabled\n ? function load() {\n return rawModuleRegistrationObj.c();\n } // eslint-disable-next-line @typescript-eslint/no-explicit-any\n : (rawModuleRegistrationObj.c() as any).default;\n newModuleRegistrationObj.moduleDirectory = rawModuleRegistrationObj.md;\n newModuleRegistrationObj.dataActions = rawModuleRegistrationObj.da;\n newModuleRegistrationObj.packageName = rawModuleRegistrationObj.p;\n newModuleRegistrationObj.name = rawModuleRegistrationObj.n;\n newModuleRegistrationObj.definitionPath = path.join(\n rawModuleRegistrationObj.md,\n `${rawModuleRegistrationObj.n}.definition.json`\n );\n newModuleRegistrationObj.parentDefinitionPath = rawModuleRegistrationObj.pdp;\n newModuleRegistrationObj.isNodeModule = rawModuleRegistrationObj.iNM;\n newModuleRegistrationObj.moduleNamespace = rawModuleRegistrationObj.ns;\n newModuleRegistrationObj.chunkName = `${rawModuleRegistrationObj.ns}-${rawModuleRegistrationObj.p}-${rawModuleRegistrationObj.n}`;\n registeredModules[moduleTypeName] = newModuleRegistrationObj;\n }\n });\n\n const moduleBinder = registeredModules[this.props.typeName];\n const Component = isModuleEntryPointsEnabled ? moduleBinder?.component()?.default : moduleBinder.component;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const registeredViews = (msdyn365Commerce as any).bindings.views;\n Object.keys(registrationBindings.viewDictionary || []).map(viewRegistrationKey => {\n if (!registeredViews[viewRegistrationKey]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const rawViewRegistrationObj: any = registrationBindings.viewDictionary[viewRegistrationKey];\n const newViewComponent = isModuleEntryPointsEnabled\n ? function load() {\n return rawViewRegistrationObj.c();\n } // eslint-disable-next-line @typescript-eslint/no-explicit-any\n : rawViewRegistrationObj.c().default;\n registeredViews[viewRegistrationKey] = {};\n registeredViews[viewRegistrationKey].component = newViewComponent;\n }\n });\n\n return (\n ;\n addModuleProps: IAddModuleProps;\n};\n/**\n * Add module wrapper component: Wraps the safe render component and add module control component inside a div tag to properly render modules with its respective add sibling box on site builder.\n */\nexport class AddModuleWrapper extends React.Component {\n public constructor(props: IAddModuleWrapperProps) {\n super(props);\n }\n public render(): JSX.Element {\n const { safeRenderProps, addModuleProps, ...props } = this.props;\n return (\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\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { ICache, ICacheKey } from '@msdyn365-commerce/cache-internal';\nimport { getPerformanceUtils, ICoreContext, IModule, msdyn365Commerce } from '@msdyn365-commerce/core-internal';\nimport { asSystemMetadata, EXCEPTION_NOMODULEBINDER, LogLevel } from '@msdyn365-commerce/telemetry-internal';\nimport React from 'react';\n\nimport { IMSDyn365CommerceExtension } from '../app-initialization/models';\nimport { PAGE_INSIGHTS_VIEWS_KEY } from '../consts';\nimport { getModuleBinder, getModuleName, getPageInsightsCacheKey, isPageInsightsEnabled } from '../utils/helpers';\n\nexport interface IModuleWithView extends IModule {\n View: React.FunctionComponent;\n}\n\nconst getViewBinder = (moduleName: string, viewLookupKey: string, requestCache: ICache, pageInsightsEnabled: boolean) => {\n const view = ((msdyn365Commerce as unknown) as IMSDyn365CommerceExtension).viewBinder(viewLookupKey);\n if (view) {\n if (pageInsightsEnabled) {\n const viewCacheKey = getPageInsightsCacheKey(PAGE_INSIGHTS_VIEWS_KEY);\n const viewInsights = requestCache.get<{}>(viewCacheKey)?.item || {};\n viewInsights[`${moduleName}`] = `${viewLookupKey.replace(/\\|/g, '/')}.view.tsx`;\n requestCache.put(viewCacheKey, { item: viewInsights });\n }\n\n return { key: viewLookupKey, view };\n }\n return undefined;\n};\n\n/**\n * View will be read in following hierarchy\n * 1) __local__|__local__|themes|theme1|views|product-tile OR @msdyn-365-commerce-modules|theme1|modules|theme1|views|product-tile\n * 2) __local__|__local__|modules|product-tile|product-tile OR @msdyn-365-commerce-modules|product-tile|modules|product-tile|product-tile\n */\nconst viewLookupFunc = (moduleBinder, themeBinder, requestCache: ICache, pageInsightsEnabled: boolean) =>\n themeBinder &&\n (getViewBinder(\n moduleBinder.name,\n `__local__|__local__|themes|${themeBinder.name}|views|${moduleBinder.name}`,\n requestCache,\n pageInsightsEnabled\n ) ||\n getViewBinder(\n moduleBinder.name,\n `${themeBinder.moduleNamespace}|${themeBinder.packageName}|modules|${themeBinder.name}|views|${moduleBinder.name}`,\n requestCache,\n pageInsightsEnabled\n ));\n\n/**\n * View will be read from the module\n * __local__|__local__|modules|product-tile|product-tile OR @msdyn-365-commerce-modules|product-tile|modules|product-tile|product-tile\n */\nconst defaultViewLookupFunc = (moduleBinder, requestCache: ICache, pageInsightsEnabled: boolean) => {\n const parentModuleBinder = getModuleBinder(getModuleName(moduleBinder.parentDefinitionPath));\n\n return (\n getViewBinder(\n moduleBinder.name,\n `${moduleBinder.moduleNamespace}|${moduleBinder.packageName}|modules|${moduleBinder.name}|${moduleBinder.name}`,\n requestCache,\n pageInsightsEnabled\n ) ||\n (parentModuleBinder &&\n getViewBinder(\n moduleBinder.name,\n `${parentModuleBinder.moduleNamespace}|${parentModuleBinder.packageName}|modules|${parentModuleBinder.name}|${parentModuleBinder.name}`,\n requestCache,\n pageInsightsEnabled\n ))\n );\n};\n\nconst getView = (moduleBinder, themeBinder, context: ICoreContext) => {\n if (!moduleBinder) {\n return { view: null };\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const cache: ICache = (msdyn365Commerce as any).getAppCache(context.actionContext.requestContext);\n const viewCacheKey: ICacheKey = {\n key: `${moduleBinder.name}|${themeBinder ? themeBinder.name : 'no-theme'}`,\n typeName: '__ViewCacheKey__'\n };\n const viewLookupKey = cache.getValue(viewCacheKey);\n const pageInsightsEnabled = isPageInsightsEnabled(context.request.params);\n\n const actionContextData: any = context.actionContext;\n const requestCache: ICache = actionContextData.requestCache;\n if (viewLookupKey) {\n !msdyn365Commerce.isBrowser && actionContextData.requestCache.put(viewCacheKey, { item: viewLookupKey });\n return getViewBinder(moduleBinder.name, viewLookupKey, requestCache, pageInsightsEnabled) || { view: null };\n }\n\n let viewLookup = viewLookupFunc(moduleBinder, themeBinder, requestCache, pageInsightsEnabled);\n\n // If no component found in the theme, search in parent theme (in case of inherited theme)\n if (!viewLookup && themeBinder) {\n const parentThemeName = getModuleName(themeBinder.parentDefinitionPath);\n const parentThemeBinder = getModuleBinder(parentThemeName);\n viewLookup = viewLookupFunc(moduleBinder, parentThemeBinder, requestCache, pageInsightsEnabled);\n }\n\n // If no view file found, fall back to module's default view\n if (!viewLookup) {\n viewLookup = defaultViewLookupFunc(moduleBinder, requestCache, pageInsightsEnabled);\n }\n\n if (viewLookup) {\n cache.put(viewCacheKey, { item: viewLookup.key });\n actionContextData.requestCache.put(viewCacheKey, { item: viewLookup.key });\n return viewLookup;\n }\n\n return { view: null };\n};\n\nconst renderViewForModule: React.FC = (props: T): React.ReactElement | null => {\n props.telemetry.log(LogLevel.Debug, `rendering view-'${props.typeName}' with id-'${props.id}'`);\n const moduleBinder = getModuleBinder(props.typeName);\n if (!moduleBinder) {\n props.context.telemetry.log(LogLevel.Error, EXCEPTION_NOMODULEBINDER, { values: [asSystemMetadata(props.typeName)] });\n return null;\n }\n\n const themeBinder = getModuleBinder(props.context.actionContext.requestContext.params.theme);\n const { view } = getView(moduleBinder, themeBinder, props.context);\n\n if (!view) {\n return props.context.actionContext.requestContext.params.isDebug ? (\n \n View not found - location searched at \n {`views/${moduleBinder.name}.view.tsx`}
\n \n {themeBinder\n ? `views/${themeBinder.name}/${moduleBinder.name}.view.tsx`\n : `No theme [${props.context.actionContext.requestContext.params.theme}] found at local/src`}\n
\n \n {themeBinder\n ? `${\n themeBinder.moduleNamespace !== '__local__'\n ? `${themeBinder.moduleNamespace}/${themeBinder.packageName}/`\n : ''\n }modules/${themeBinder.name}/views/${moduleBinder.name}.view.tsx`\n : `No theme [${props.context.actionContext.requestContext.params.theme}] found at node_modules`}\n
\n {`${\n moduleBinder.moduleNamespace !== '__local__' ? `${moduleBinder.moduleNamespace}/${moduleBinder.packageName}/` : ''\n }modules/${moduleBinder.name}/${moduleBinder.name}.view.tsx`}
\n \n ) : null;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const platformSettings = (msdyn365Commerce as any).platformSettings;\n const Component = platformSettings && platformSettings.enableModuleEntryPoints ? view?.component()?.default : view.component;\n // @ts-ignore\n if (props.addChunk) {\n // @ts-ignore\n props.addChunk(view.cn);\n }\n return = (props: T): React.ReactElement | null => {\n const performanceUtils = getPerformanceUtils(msdyn365Commerce, props.context.actionContext);\n\n const renderId = performanceUtils?.performanceUtilsPackage.Random.Guid.generateGuid();\n\n performanceUtils?.performanceUtilsPackage.runPreRenderViewPerformanceHook({\n moduleId: props.id,\n moduleTypeName: props.typeName,\n\n renderId: renderId,\n\n internalCache: performanceUtils.cache\n });\n\n const node = renderViewForModule(props);\n\n performanceUtils?.performanceUtilsPackage.runPostRenderViewPerformanceHook({\n moduleId: props.id,\n moduleTypeName: props.typeName,\n\n renderId: renderId,\n\n internalCache: performanceUtils.cache\n });\n\n return node;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IDictionary, IModule } from '@msdyn365-commerce/core-internal';\nimport { EXCEPTION_ERROR_CLIENT_BOUNDARY, InternalTelemetry, LogLevel } from '@msdyn365-commerce/telemetry-internal';\nimport { get as _get } from 'lodash';\nimport React, { useMemo } from 'react';\nimport { MODULE_CONFIG_ERRORS_KEY } from '../consts';\nimport { renderView } from './render-view';\nimport { TSafeRenderModuleProps, TSafeRenderModuleState } from './safe-render-module';\n\ntype ErrorType = 'empty' | 'unregistered' | 'error';\n\ninterface IErrorModuleProps extends IModule {\n id: string;\n errorType: ErrorType;\n error: Error;\n message?: string;\n}\n\nconst getStandardErrorModuleMarkup = (props: IErrorModuleProps) => {\n return (\n \n
{props.id}' threw exception
\n
\n
\n
\n
\n
\n
\n
= (props: IErrorModuleProps) => {\n const params = _get(props, 'context.request.params', {});\n const { isDebug } = params;\n return isDebug || process.env.NODE_ENV === 'development' ? useMemo(() => getStandardErrorModuleMarkup(props), [props]) : null;\n};\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const renderErrorOrPlaceHolderModules = (\n err: Error,\n internalTelemetry: InternalTelemetry,\n mappedProps: any,\n state: TSafeRenderModuleState,\n props: TSafeRenderModuleProps,\n isEditor: boolean,\n renderModuleAttributes: (props: { [x: string]: any }) => IDictionary\n): JSX.Element | undefined => {\n if (!isEditor) {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_ERROR_CLIENT_BOUNDARY, { exception: err });\n return (\n
;\n }\n return undefined;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { ICacheKey } from '@msdyn365-commerce/cache-internal';\nimport {\n CoreContext,\n getPerformanceUtils,\n IAddModuleSlot,\n IAny,\n IDictionary,\n IGeneric,\n IModule,\n IModuleContract,\n isAuthoringEditEnabled,\n msdyn365Commerce,\n SDK_FRAGMENT_NAME,\n WithContext\n} from '@msdyn365-commerce/core-internal';\nimport LazyLoad from 'react-lazy-load';\nimport {\n asSystemMetadata,\n EXCEPTION_MISSINGMODULECONFIG,\n EXCEPTION_MODULERENDERFAIL,\n EXCEPTION_NOMODULEBINDER,\n EXCEPTION_UNREGISTEREDMODULEID,\n InternalTelemetry,\n ITelemetry,\n LogLevel\n} from '@msdyn365-commerce/telemetry-internal';\nimport { get as _get } from 'lodash';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { AsyncClientRenderComponent } from './module-client-render-component';\nimport {\n LAYOUT_MOUNT_POINT,\n MODULE_CONFIG_ERRORS_KEY,\n MODULE_LAYOUT_FIELD,\n SERVER_RENDER_ERROR_CACHE_KEY,\n MODULE_CONFIG_KEY\n} from '../consts';\nimport { PageContext } from '../store/page-context';\nimport { AddControlMode, AddModuleControl } from './add-module-control';\nimport { AddModuleWrapper } from './add-module-wrapper';\nimport { ErrorModule, renderErrorOrPlaceHolderModules } from './error-module';\nimport { renderView } from './render-view';\nimport { isLazyRenderModuleEnabled } from '../utils/helpers';\n\ntype ErrorInfo = {\n componentStack: string;\n};\n\nexport type TSafeRenderModuleState = {\n error?: Error;\n info?: ErrorInfo;\n isRegistered?: boolean;\n isConfigured?: boolean;\n isLazyLoaded?: boolean;\n mounted?: boolean;\n};\n\n/**\n * Known types on the props\n */\nexport type TSafeRenderModuleProps = IGeneric & {\n telemetry: ITelemetry;\n internalTelemetry: InternalTelemetry;\n};\n\n/**\n * Component to render module\n */\n@observer\nexport class SafeRenderModule extends React.Component {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private componentRef: React.RefObject>;\n private shouldDisplayErrors: boolean = false;\n private isRenderAttrributeCalled: boolean = false;\n private disableSSRErrorChecks?: boolean = false;\n private renderCallsCounter = 0;\n private mobxShouldComponentUpdate;\n\n public static getDerivedStateFromError(error: Error): TSafeRenderModuleState {\n return { error: error };\n }\n\n constructor(props: TSafeRenderModuleProps) {\n super(props);\n\n this.state = {\n error: undefined,\n info: undefined,\n isConfigured: true,\n isRegistered: true,\n mounted: false\n };\n this.componentRef = React.createRef();\n this.shouldDisplayErrors = props && props.context ? props.context.request.params.isDebug : true;\n\n // If App Setting to disable server-side rendering error checks is true then instead of rendering each module\n // separately and potentially containing each one in an error-boundary in case of an error,\n // safe-render-module will instead render all modules together in one pass for improved performance.\n this.disableSSRErrorChecks = props.context && props.app && props.app.platform && props.app.platform.disableServerSideErrorChecking;\n\n // In the event that this is being rendered in editor or debug mode we will override this setting to render each individual module separately\n // to catch module errors at the cost of performance\n this.disableSSRErrorChecks =\n this.disableSSRErrorChecks && !props.context.request.params.isDebug && !props.context.request.params.isEditor;\n\n this.props.internalTelemetry.log(\n LogLevel.Debug,\n `Safe Render module constructor type-'{typeName}' with id-'{id} and is ${\n this.disableSSRErrorChecks ? 'not ' : ''\n }running in error check mode.'`,\n {\n values: [asSystemMetadata(this.props.typeName), asSystemMetadata(this.props.id)]\n }\n );\n\n this.mobxShouldComponentUpdate = this.shouldComponentUpdate;\n this.shouldComponentUpdate = this.customShouldComponentUpdate;\n }\n\n public componentDidMount(): void {\n if (!this.state.mounted) {\n this.setState({ mounted: true });\n }\n\n if (this.isRenderAttrributeCalled) {\n return;\n }\n\n this._setErrorStates();\n this._setDataAttributes();\n\n this._initializePerformanceComponent();\n }\n\n public customShouldComponentUpdate(nextProps: TSafeRenderModuleProps, nextState: TSafeRenderModuleState): boolean {\n if (this._isEditorial()) {\n if (nextState.error) {\n this.props.store.requestCache.put(\n { typeName: MODULE_CONFIG_ERRORS_KEY, key: this.props.id },\n { item: [{ property: this.props.id, message: nextState.error.message }] }\n );\n }\n }\n\n return this.mobxShouldComponentUpdate(nextProps, nextState);\n }\n\n public componentDidUpdate(): void {\n if (this.isRenderAttrributeCalled) {\n return;\n }\n\n this._setErrorStates();\n this._setDataAttributes();\n }\n\n public componentDidCatch(error: Error, info: ErrorInfo): void {\n this.setState({ error, info });\n }\n\n public render(): JSX.Element | null {\n const performanceUtils = getPerformanceUtils(msdyn365Commerce, this.props.context.actionContext);\n\n const renderId = performanceUtils?.performanceUtilsPackage.Random.Guid.generateGuid();\n\n performanceUtils?.performanceUtilsPackage.runPreRenderPerformanceHook({\n moduleId: this.props.id,\n moduleTypeName: this.props.typeName,\n\n renderId: renderId,\n renderCallIndex: ++this.renderCallsCounter,\n\n internalCache: performanceUtils.cache\n });\n\n const node = this._renderModule();\n\n performanceUtils?.performanceUtilsPackage.runPostRenderPerformanceHook({\n moduleId: this.props.id,\n moduleTypeName: this.props.typeName,\n\n renderId: renderId,\n\n internalCache: performanceUtils.cache\n });\n\n return node;\n }\n\n private _initializePerformanceComponent(): void {\n const performanceUtils = getPerformanceUtils(msdyn365Commerce, this.props.context.actionContext);\n performanceUtils?.performanceUtilsPackage.initializePerformance(\n () => performanceUtils.cache,\n () => this.props.context.actionContext\n );\n }\n\n // eslint-disable-next-line complexity\n private _renderModule(): JSX.Element | null {\n const config = this.props.config;\n const { internalTelemetry } = this.props;\n internalTelemetry.log(LogLevel.Debug, `Safe Render module render type-'{typeName}' with id-'{id}'`, {\n values: [asSystemMetadata(this.props.typeName), asSystemMetadata(this.props.id)]\n });\n const isMounted = this.state.mounted;\n const mappedProps = mapStateToProps(this.props.store, this.props, isMounted);\n const { id, typeName } = mappedProps && mappedProps.id ? mappedProps : this.props;\n const configErrors = mappedProps.configErrors;\n\n // in development mode, check if there is any server render error for module. If so, render error module so developer can address the issue.\n if (process.env.NODE_ENV === 'development' && !this.props.store.requestContext.features.disable_render_module_server_error) {\n const serverRenderError =\n this.props.store.requestCache?.internalCache && this.props.store.requestCache.internalCache[SERVER_RENDER_ERROR_CACHE_KEY];\n\n if (serverRenderError) {\n const moduleWithError = serverRenderError[this.getModuleServerRenderCacheKeyName(this.props.id, this.props.typeName)];\n if (moduleWithError && moduleWithError.item) {\n return (\n
;\n }\n\n return \n );\n }\n return (\n \n \n \n );\n } else if (this.state.mounted) {\n return (\n ): IDictionary => {\n this.isRenderAttrributeCalled = true;\n\n if (!props || !props.id) {\n return {};\n }\n\n // Construct telemetry attributes for module\n const telemetryId: string = props.friendlyName || props.id;\n const telemetryAttributes: IDictionary =\n this.props.internalTelemetry && this.props.internalTelemetry.setTelemetryAttribute\n ? this.props.internalTelemetry.setTelemetryAttribute(telemetryId)\n : {};\n\n const moduleAttributes: IDictionary = { 'data-m-t': props.typeName, ...telemetryAttributes };\n if (this.shouldDisplayErrors || this._isEditorial()) {\n moduleAttributes['data-i'] = this._setDataInfoAttribute(props);\n }\n\n if (props.platform && typeof props.platform === 'object') {\n Object.keys(props.platform).forEach(key => {\n moduleAttributes[`data-m-${key}`] = props.platform[key];\n });\n }\n\n // If a module is associated with an experiment, add this attribtue to track when to activate the experiment\n if (props.context.request && props.context.request.experiments?.moduleIdToExperimentIdMap) {\n if (props.context.request.experiments.moduleIdToExperimentIdMap[props.id]) {\n moduleAttributes[`data-exp`] = `id:${props.context.request.experiments.moduleIdToExperimentIdMap[props.id]}`;\n }\n }\n // In editor scenario, Authoring will update the module layout by sending us updates on\n // the MODULE_LAYOUT_FIELD in the config object\n\n if (this._isEditorial() && props.config && props.config[MODULE_LAYOUT_FIELD]) {\n moduleAttributes[`data-m-layout`] = props.config[MODULE_LAYOUT_FIELD];\n }\n\n return moduleAttributes;\n };\n\n /**\n * Set the data info attribute to be added to the modules\n * @param props The module props.\n */\n private _setDataInfoAttribute(props: IGeneric): string {\n const dataInfo = [`id:${props.id}`];\n props.slotId && dataInfo.push(`s:${props.slotId}`);\n props.parentId && dataInfo.push(`p:${props.parentId}`);\n props.typeName && dataInfo.push(`t:${props.typeName}`);\n props.friendlyName && dataInfo.push(`fn:${props.friendlyName}`);\n const moduleBinder = (msdyn365Commerce as any).moduleBinder(props.typeName);\n if (moduleBinder) {\n moduleBinder.$type && dataInfo.push(`mt:${moduleBinder.$type}`);\n }\n props.errorType && dataInfo.push(`e:${props.errorType}`);\n return `{${dataInfo.join(',')}}`;\n }\n\n /**\n * isEditor\n * Determines if request is coming from the editor\n */\n private _isEditorial(): boolean {\n return _get(this.props, ['context', 'request', 'params', 'isEditor'], false);\n }\n\n /**\n * Creates data info string to be used by cms e.g '{id:prop-id,s:content,p:parent-id}'\n */\n private _generateDataInfo(): string {\n const dataInfo = [`id:${this.props.id}`];\n this.props.slotId && dataInfo.push(`s:${this.props.slotId}`);\n this.props.parentId && dataInfo.push(`p:${this.props.parentId}`);\n this.props.typeName && dataInfo.push(`t:${this.props.typeName}`);\n this.props.friendlyName && dataInfo.push(`fn:${this.props.friendlyName}`);\n const moduleBinder = (msdyn365Commerce as any).moduleBinder(this.props.typeName);\n if (moduleBinder) {\n moduleBinder.$type && dataInfo.push(`mt:${moduleBinder.$type}`);\n }\n\n // Error scenarios\n // 1. Empty module\n // 2. Unregistered module\n // 3. Generic error\n !this.state.isConfigured && dataInfo.push('e:empty');\n !this.state.isRegistered && dataInfo.push('e:unregistered');\n this.state.error && dataInfo.push('e:error');\n\n return `{${dataInfo.join(',')}}`;\n }\n\n /**\n * Conducts the server side render and returns the result.\n * If disable SSR Error Checking flag is turned on, the React Element is returned immediately,\n * otherwise the render result is calculated using renderToString to catch errors\n * and defer modules (used for editor and debug scenarios)\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _doServerSideRender(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n mappedProps: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Component: React.ComponentClass<{}, any>,\n internalTelemetry: InternalTelemetry\n ): JSX.Element {\n let renderHtmlString: string;\n const renderHtml = (\n \n \n );\n if (this.disableSSRErrorChecks) {\n // In non editorial or non debug mode and if app setting to disable server side error checking is turned on\n // return the JSX directly without computing the render result to save time and compute cost\n return renderHtml;\n } else {\n try {\n // eslint-disable-next-line\n renderHtmlString = require('react-dom/server').renderToString(renderHtml);\n if (!renderHtmlString.length) {\n // module returned null\n this.props.store.markModuleAsDeferred(this.props.id);\n }\n } catch (e) {\n this.addFailingModuleServerRenderToCache(e);\n\n internalTelemetry.log(LogLevel.Error, `Safe Render module Failed to render type-'{typeName}' with id-'{id}'`, {\n exception: e,\n values: [asSystemMetadata(this.props.typeName), asSystemMetadata(this.props.id)]\n });\n return (\n ,\n moduleConfigs: IModuleContract[],\n slotId: string,\n addSiblingIndices?: number[],\n isMounted?: boolean\n): React.ReactNode[] => {\n if (!moduleConfigs) {\n return [];\n }\n\n const canAddAtIndex = (index: number) => {\n return addSiblingIndices ? addSiblingIndices.indexOf(index + 1) >= 0 : false;\n };\n // if addSiblingIndices is not undefined, we add the AddModuleControl components between each module; but in hidden state if index value isnt provider\n // this prevents re-rendering of the module when the AddModuleControl components are enabled/disabled\n // in preview mode, addSiblingIndices will be undefined and we will only render the modules\n return moduleConfigs.map((moduleConfig: IModuleContract, index: number) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const config =\n (!!!parentProps?.store?.requestContext?.features?.disable_moduleConfig_optimize &&\n requestCache.getValue({ typeName: MODULE_CONFIG_KEY, key: moduleConfig.id })) ||\n moduleConfig.config;\n return addSiblingIndices && isMounted ? (\n > => {\n try {\n const { internalTelemetry } = props;\n const moduleConfig = getModuleConfig(store, props.id);\n const requestCache = store.requestCache;\n if (!moduleConfig) {\n internalTelemetry.log(\n LogLevel.Error,\n internalTelemetry.stringFormat(EXCEPTION_MISSINGMODULECONFIG, [props.id, props.typeName])\n );\n return {} as IModule>;\n }\n\n // TODO - following statements introducing side effect in render method (props should not change in render). Please take a look after public preview\n // Pull value out of stuff that came from cache (doing this gives us reactivity via MobX)\n Object.keys(moduleConfig.data).forEach(key => {\n if (moduleConfig.data[key] && moduleConfig.data[key].Item) {\n moduleConfig.data[key] = moduleConfig.data[key].Item;\n }\n });\n\n const moduleBinder = (msdyn365Commerce as any).moduleBinder(moduleConfig.typeName);\n if (!moduleBinder && !isLazyRenderModuleEnabled(store.requestContext)) {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_NOMODULEBINDER, { values: [asSystemMetadata(moduleConfig.typeName)] });\n return {} as IModule>;\n }\n const enableAddModuleControls = isAuthoringEditEnabled(store.requestContext);\n const platformSettings = (msdyn365Commerce as any).platformSettings;\n const componentBinder =\n platformSettings && platformSettings.enableModuleEntryPoints\n ? moduleBinder && moduleBinder?.component()?.default\n : moduleBinder && moduleBinder.component;\n\n return {\n ...props,\n ...moduleConfig,\n component: componentBinder,\n slots: enableAddModuleControls\n ? getSlotDictionary(requestCache, props, moduleConfig.slotsForAddModule, isMounted)\n : getSlotDictionary(requestCache, props)\n };\n } catch (e) {\n props.internalTelemetry.log(LogLevel.Error, props.internalTelemetry.stringFormat(EXCEPTION_MODULERENDERFAIL, [props.id]), {\n exception: e\n });\n return {} as IModule>;\n }\n};\n\nconst getModuleConfig = (store: PageContext, moduleId: string): IModule => {\n return store.modules(moduleId);\n};\n\nconst getSlotDictionary = (\n requestCache: any,\n props: IGeneric,\n slotsForAddModule?: IAddModuleSlot[],\n isMounted?: boolean\n): IDictionary => {\n const slotDictionary: IDictionary = {};\n const { modules } = props;\n const slotsWithAddModuleControls = (slotsForAddModule || []).filter(a => !a.index && a.slotName);\n const addSiblingIndexDictionary: { [key: string]: number[] } = {};\n (slotsForAddModule || [])\n .filter(a => a.index && !a.slotName)\n .forEach(a => {\n addSiblingIndexDictionary[a.slotId] = a.index || [];\n });\n // removes placeholder 'click here to configure' modules\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const getNonPlaceholderModules = (mods: any[]) => {\n return mods.filter(a => a.typeName !== 'place-holder-for-container-preview');\n };\n if (modules) {\n Object.keys(modules).forEach((key: string) => {\n slotDictionary[key] = getRenderSlotComponent(\n requestCache,\n props,\n getNonPlaceholderModules(modules[key]),\n key,\n slotsForAddModule ? addSiblingIndexDictionary[key] || [] : undefined,\n isMounted\n );\n });\n }\n slotsWithAddModuleControls.forEach((slot: IAddModuleSlot) => {\n if (isMounted && (!modules || !modules[slot.slotId] || getNonPlaceholderModules(modules[slot.slotId]).length === 0)) {\n slotDictionary[slot.slotId] = [\n ;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n component: any;\n dataActions: IDataAction[];\n definitionExtensions?: string[];\n definitionPath: string;\n isNodeModule: boolean;\n moduleNamespace: string;\n chunkName: string;\n name: string;\n packageName: string;\n pages?: IDictionary;\n parentDefinitionPath: string;\n path: string;\n segments: string[];\n moduleDirectory: string;\n themeSettings: string;\n}\n\nexport interface IModuleBinderPartial {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n c: () => Promise;\n mn: string;\n md: string;\n da: IDataAction[];\n p: string;\n n: string;\n pdp: string;\n iNM: boolean;\n ns: string;\n}\n\nexport interface IPrototype {\n prototype: IMSDyn365CommerceExtension;\n}\n\ninterface IDAPIBindings {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n modules: IDictionary;\n themes: IThemeModule[];\n}\n\nexport interface IBinding {\n modules: IDictionary;\n dataActions: IDictionary;\n partnerDataActions: IDictionary;\n views: IDictionary;\n components: IDictionary;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n connectors: IDictionary;\n dapi: IDAPIBindings;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- NPM package source.\n perfAnalysisLibBinding: any;\n}\n\nexport interface IMSDyn365CommerceExtension {\n bindings: IBinding;\n appCache: IDictionary;\n resourceManager: IResourceManager;\n getResourceManager(): IResourceManager;\n getPartnerOverrideAction(id: string): Function;\n dataAction(name: string): Function;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n getConnector(name: string): any;\n getAppCache(requestContext: IRequestContext): ICache;\n moduleBinder(name: string): IModuleBinder;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n viewBinder(name: string): any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n componentBinder(name: string): any;\n getAllModuleBinder(): IModuleBinder[];\n updatePrivateVariable(): void;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Returns NPM package source.\n perfAnalysisBinder(): any;\n}\n\nexport type IMSDyn365CommerceWithPrototype = typeof MSDyn365Commerce & IPrototype;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { ActionContext, addLocaleInformation, IRefreshConfigs } from '@msdyn365-commerce/action-internal';\nimport { ICache, ICacheKey } from '@msdyn365-commerce/cache-internal';\nimport {\n IAction,\n IActionInput,\n IDataActionOptions,\n IDictionary,\n IModuleContract,\n IRequestContext,\n msdyn365Commerce\n} from '@msdyn365-commerce/core-internal';\nimport {\n asSystemMetadata,\n EXCEPTION_DATAACTION_EXECUTION,\n EXCEPTION_LOADDATA_ACTION_0,\n EXCEPTION_LOADDATA_ACTION_1,\n EXCEPTION_LOADDATA_ACTION_2,\n InternalTelemetry,\n ITelemetry,\n LogLevel,\n MESSAGE_CREATE_INPUT_LOADDATA\n} from '@msdyn365-commerce/telemetry-internal';\nimport { ActionRuntime, IDataAction } from '../app-initialization/models';\nimport { LAZYLOAD_SWITCH_PREFIX, PAGE_INSIGHTS_ACTIONS_KEY } from '../consts';\nimport { combineExtendedDataActionToModule } from '../utils/data-action-extension-helper';\nimport { getPageInsightsCacheKey, isPageInsightsEnabled, timeSliceLongJSTask } from '../utils/helpers';\n\nexport interface IDataActionMetadata {\n dataActionFunction: IAction;\n inputs: IActionInput[];\n name: string;\n runOn: ActionRuntime;\n id: string;\n options?: IDataActionOptions;\n}\n\n/**\n * Method which stores temporary async results in the cache for actions which\n * will be run at a later time\n * @param tempMetadataList The list of actions which need temporary AsyncResults\n * @param requestCache The request cache\n */\nconst storeTemporaryAsyncResults = (tempMetadataList: IDataActionMetadata[], requestCache: ICache): void => {\n const tempResultCacheItem = { item: { _type: 'AsyncResult', status: 'LOADING', runOn: 'client' } };\n\n // Insert fake temporary AsyncResults for actions that will be deferred to client\n tempMetadataList.forEach(tempMetadata => {\n // Non-observable and instance actions should not get a temp promise\n const firstInput = Array.isArray(tempMetadata.inputs) ? tempMetadata.inputs[0] : tempMetadata.inputs;\n if (\n !tempMetadata.dataActionFunction.prototype.isObservable ||\n !tempMetadata.inputs ||\n (firstInput && firstInput.dataCacheType && firstInput.dataCacheType() === 'instance')\n ) {\n return;\n }\n\n if (!Array.isArray(tempMetadata.inputs)) {\n tempMetadata.inputs = [tempMetadata.inputs];\n }\n\n tempMetadata.inputs.forEach(tempInput => {\n // Don't add temp promise if there is a mock or if the resolved data has already been inserted into the cache\n if (\n requestCache.get({ key: `${tempInput.getCacheObjectType()}:${tempInput.getCacheKey()}`, typeName: '__MOCK' }) ===\n undefined &&\n requestCache.get({ key: `${tempInput.getCacheKey()}`, typeName: tempInput.getCacheObjectType() }) === undefined\n ) {\n requestCache.put({ key: tempInput.getCacheKey(), typeName: tempInput.getCacheObjectType() }, tempResultCacheItem);\n }\n });\n });\n};\n\n/**\n * Runs all the data actions specificed in module definitions present on the page\n */\nexport const loadData = async (\n modules: IModuleContract[],\n context: IRequestContext,\n internalTelemetry: InternalTelemetry,\n moduleTelemetry: ITelemetry,\n requestCache: ICache,\n appCache: ICache | null,\n complexDataTypesPromises?: Promise[]\n): Promise => {\n if (!modules || modules.length === 0) {\n return [];\n }\n\n const dataActionMetadataList: IDataActionMetadata[] = [];\n const lazyLoadModuleIds: { [index: string]: boolean } = {};\n const tempMetadataList: IDataActionMetadata[] = [];\n\n // Note: What modules will need to be lazyloaded due to feature switches\n storeLazyloadModuleId(context, lazyLoadModuleIds);\n loadDataProcessing(modules, lazyLoadModuleIds, context, internalTelemetry, dataActionMetadataList, tempMetadataList, requestCache);\n storeTemporaryAsyncResults(tempMetadataList, requestCache);\n\n await timeSliceLongJSTask(context);\n\n if (dataActionMetadataList.length === 0) {\n // When there is no data actions, we still need to resolve complexTypePromises\n if (complexDataTypesPromises) {\n await Promise.all(complexDataTypesPromises);\n }\n return [];\n }\n\n const actionContext = new ActionContext({\n id: 'T1',\n requestContext: context,\n requestCache: requestCache,\n expectedActionCount: dataActionMetadataList.length,\n telemetry: moduleTelemetry,\n appCache\n });\n\n const promises = processDataActionMetadataList(actionContext, dataActionMetadataList, internalTelemetry);\n\n if (complexDataTypesPromises) {\n promises.push(...complexDataTypesPromises);\n }\n\n await Promise.all(promises);\n\n return actionContext.getRefreshActions();\n};\n\nconst fetchDataActionWithActionid = (lookupId: string) => {\n const dataActionFunction = (msdyn365Commerce).dataAction(lookupId);\n if (\n dataActionFunction &&\n dataActionFunction.default &&\n dataActionFunction.default.prototype &&\n dataActionFunction.default.prototype.inputFunc &&\n typeof dataActionFunction.default.prototype.inputFunc === 'function'\n ) {\n return dataActionFunction;\n }\n return null;\n};\n\nconst loadDataProcessing = (\n modules: IModuleContract[],\n lazyLoadModuleIds: IDictionary,\n context: IRequestContext,\n internalTelemetry: InternalTelemetry,\n dataActionMetadataList: IDataActionMetadata[],\n tempMetadataList: IDataActionMetadata[],\n requestCache: ICache\n) => {\n modules.forEach((moduleContract: IModuleContract) => {\n const moduleConfig = moduleContract.config;\n if (typeof moduleConfig === 'object' && moduleConfig && moduleConfig['clientRender'] === true) {\n lazyLoadModuleIds[moduleContract.id] = true;\n }\n\n const moduleBinderInitial = (msdyn365Commerce).moduleBinder(moduleContract.typeName);\n\n const moduleBinder = context.params.theme\n ? combineExtendedDataActionToModule(moduleBinderInitial, moduleContract.typeName, context.params.theme)\n : moduleBinderInitial;\n\n if (moduleBinder && moduleBinder.dataActions && moduleBinder.dataActions.length > 0) {\n moduleBinder.dataActions.forEach((dataAction: IDataAction) => {\n const lookupId = dataAction.id || dataAction.path;\n if (dataAction.name && lookupId) {\n let dataActionFunction = (msdyn365Commerce).dataAction(lookupId);\n if (\n dataActionFunction &&\n dataActionFunction.default &&\n dataActionFunction.default.prototype &&\n dataActionFunction.default.prototype.id\n ) {\n const newLookUpId = dataActionFunction.default.prototype.id;\n // if the dataAction function's id is different with lookup id, try to fetch the dataAction based on its id again.\n if (newLookUpId !== lookupId) {\n dataActionFunction = fetchDataActionWithActionid(newLookUpId) || dataActionFunction;\n }\n }\n if (\n dataActionFunction &&\n dataActionFunction.default &&\n dataActionFunction.default.prototype &&\n dataActionFunction.default.prototype.inputFunc &&\n typeof dataActionFunction.default.prototype.inputFunc === 'function'\n ) {\n try {\n processModuleDataAction(\n dataActionFunction,\n context,\n moduleContract,\n dataAction,\n dataActionMetadataList,\n internalTelemetry,\n lazyLoadModuleIds,\n tempMetadataList,\n requestCache\n );\n } catch (e) {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_LOADDATA_ACTION_0, {\n exception: new Error(EXCEPTION_LOADDATA_ACTION_1),\n values: [asSystemMetadata(dataAction.name || 'unnamed'), asSystemMetadata(moduleContract.id || 'unnamed')]\n });\n }\n } else {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_LOADDATA_ACTION_2, {\n exception: new Error(EXCEPTION_LOADDATA_ACTION_1),\n values: [asSystemMetadata(dataAction.path || 'unnamed'), asSystemMetadata(moduleContract.id || 'unnamed')]\n });\n }\n }\n });\n internalTelemetry.log(\n LogLevel.Debug,\n internalTelemetry.stringFormat(MESSAGE_CREATE_INPUT_LOADDATA, [\n (moduleContract.dataActions || []).map(d => d.name).join(' | '),\n moduleContract.typeName,\n moduleContract.id\n ])\n );\n }\n });\n};\n\nconst processModuleDataAction = (\n dataActionFunction,\n context: IRequestContext,\n moduleContract: IModuleContract,\n dataAction: IDataAction,\n dataActionMetadataList: IDataActionMetadata[],\n internalTelemetry: InternalTelemetry,\n lazyLoadModuleIds: IDictionary,\n tempMetadataList: IDataActionMetadata[],\n requestCache: ICache\n) => {\n let inputs;\n try {\n inputs = dataActionFunction.default.prototype.inputFunc({\n requestContext: context,\n config: moduleContract.config,\n data: moduleContract.data\n });\n const isArray = Array.isArray(inputs);\n moduleContract.dataActions = moduleContract.dataActions || [];\n addLocaleInformation(inputs, context.locale);\n moduleContract.dataActions.push({\n name: dataAction.name,\n entity: isArray ? inputs[0].getCacheObjectType() : inputs.getCacheObjectType(),\n inputs: isArray ? inputs.map((input: IActionInput) => input.getCacheKey()) : inputs.getCacheKey()\n });\n } catch (e) {\n internalTelemetry.log(LogLevel.Debug, 'Unable to create input for Module: {id}, Action: {name}', {\n values: [asSystemMetadata(moduleContract.id), asSystemMetadata(dataAction.name)]\n });\n moduleContract.dataActions = moduleContract.dataActions || [];\n moduleContract.dataActions.push({\n name: dataAction.name,\n entity: undefined,\n inputs: undefined\n });\n }\n\n const dataActionInsightsKey = getPageInsightsCacheKey(PAGE_INSIGHTS_ACTIONS_KEY);\n const pageInsightsEnabled = isPageInsightsEnabled(context.params);\n const dataActionsInsights = requestCache.get<{ Server: {}; Client: {} }>(dataActionInsightsKey)?.item || { Server: {}, Client: {} };\n if (inputs && dataAction) {\n // Add run on information to data action input\n inputs.runOn = convertRunOnToString(dataAction.runOn);\n }\n if (\n msdyn365Commerce.isBrowser ||\n (!context.features.lazyload_all &&\n (dataAction.runOn === ActionRuntime.server || dataAction.runOn === ActionRuntime.serverOnly) &&\n !lazyLoadModuleIds[moduleContract.id] &&\n !lazyLoadModuleIds[moduleContract.typeName])\n ) {\n if (pageInsightsEnabled) {\n dataActionsInsights.Server[moduleContract.typeName] = dataActionsInsights.Server[moduleContract.typeName] || {};\n dataActionsInsights.Server[moduleContract.typeName][dataAction.name] =\n dataActionsInsights.Server[moduleContract.typeName][dataAction.name] || {};\n dataActionsInsights.Server[moduleContract.typeName][dataAction.name] = dataAction.id || dataAction.path;\n requestCache.put(dataActionInsightsKey, { item: dataActionsInsights });\n }\n\n dataActionMetadataList.push({\n name: dataAction.name,\n runOn: dataAction.runOn,\n id: dataAction.id,\n inputs: inputs,\n dataActionFunction: dataActionFunction.default,\n ...(dataAction.options && { options: dataAction.options })\n });\n } else {\n if (pageInsightsEnabled) {\n dataActionsInsights.Client[moduleContract.typeName] = dataActionsInsights.Client[moduleContract.typeName] || {};\n dataActionsInsights.Client[moduleContract.typeName][dataAction.name] =\n dataActionsInsights.Client[moduleContract.typeName][dataAction.name] || {};\n dataActionsInsights.Client[moduleContract.typeName][dataAction.name] = dataAction.id || dataAction.path;\n requestCache.put(dataActionInsightsKey, { item: dataActionsInsights });\n }\n\n // If the data action is supposed to be run server only it should never\n // be placed in the temporary list that will eventually run client side.\n if (dataAction.runOn !== ActionRuntime.serverOnly) {\n tempMetadataList.push({\n name: dataAction.name,\n runOn: dataAction.runOn,\n id: dataAction.id,\n inputs: inputs,\n dataActionFunction: dataActionFunction.default\n });\n }\n }\n};\n\n//\nconst storeLazyloadModuleId = (renderingContext: IRequestContext, lazyLoadModuleIds: IDictionary) => {\n if (renderingContext.features) {\n Object.keys(renderingContext.features).forEach(switchName => {\n if (switchName.startsWith(LAZYLOAD_SWITCH_PREFIX) && renderingContext.features[switchName]) {\n lazyLoadModuleIds[switchName.replace(LAZYLOAD_SWITCH_PREFIX, '')] = true;\n }\n });\n }\n};\n\nexport const processDataActionMetadataList = (\n actionContext: ActionContext,\n dataActionMetadataList: IDataActionMetadata[],\n internalTelemetry: InternalTelemetry\n) => {\n return dataActionMetadataList\n .map(async (dataActionMetadata: IDataActionMetadata) => {\n // all client side actions are lazy loaded inorder not to interfere with the client hydrate.\n // therefore only return those promises that are non-observable and instance actions\n if (process.env.CURRENT_ENVIRONMENT === 'web') {\n await timeSliceLongJSTask(actionContext?.requestContext);\n const promise = actionContext\n .chainAction(dataActionMetadata.dataActionFunction, dataActionMetadata.inputs, dataActionMetadata.options)\n .catch(e => {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_DATAACTION_EXECUTION, {\n values: [asSystemMetadata(dataActionMetadata.id || dataActionMetadata.name)],\n exception: (e && e.error) || e\n });\n });\n\n // We still need to await non-observable client-side data actions (public-preview)\n if (!dataActionMetadata.dataActionFunction.prototype.isObservable) {\n return promise;\n }\n\n // we should await on observable 'instance' actions that are configured to runOn 'server'\n if (\n actionContext.requestContext.features &&\n !actionContext.requestContext.features.disable_inst_action_await &&\n isServerInstanceAction(dataActionMetadata)\n ) {\n return promise;\n }\n } else {\n return actionContext\n .chainAction(dataActionMetadata.dataActionFunction, dataActionMetadata.inputs, dataActionMetadata.options)\n .catch(e => {\n internalTelemetry.log(LogLevel.Error, EXCEPTION_DATAACTION_EXECUTION, {\n values: [asSystemMetadata(dataActionMetadata.id || dataActionMetadata.name)],\n exception: (e && e.error) || e\n });\n });\n }\n })\n .filter(Boolean);\n};\n\nconst isServerInstanceAction = (dataActionMetadata: IDataActionMetadata) => {\n const firstInput = Array.isArray(dataActionMetadata.inputs) ? dataActionMetadata.inputs[0] : dataActionMetadata.inputs;\n return (\n dataActionMetadata.runOn === ActionRuntime.server &&\n dataActionMetadata.dataActionFunction.prototype.isObservable &&\n firstInput &&\n firstInput.dataCacheType &&\n firstInput.dataCacheType() === 'instance'\n );\n};\n\nexport const convertRunOnToString = (runtime: ActionRuntime) => {\n switch (runtime) {\n case ActionRuntime.client:\n return 'client';\n case ActionRuntime.server:\n return 'server';\n case ActionRuntime.serverOnly:\n return 'serverOnly';\n default:\n return 'server';\n }\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IModuleBinder } from '../app-initialization/models';\nimport { getModuleBinder } from '../utils/helpers';\n\nconst dataActionCustimizedMerge = (originDataAction, newDataAction, customizer) =>\n originDataAction\n .filter(originAction => !newDataAction.find(newAction => originAction[customizer] === newAction[customizer]))\n .concat(newDataAction);\n\nexport const combineExtendedDataActionToModule = (originalModuleBinder: IModuleBinder, moduleName: string, themeName: string) => {\n const themeBinder = getModuleBinder(themeName);\n if (!themeBinder || !originalModuleBinder) {\n return originalModuleBinder;\n }\n\n if (themeBinder.dataActions.length === 0) {\n return originalModuleBinder;\n }\n const themeDataActionsForModule = themeBinder.dataActions.filter(\n dataAction => dataAction.moduleName && dataAction.moduleName === moduleName\n );\n\n const moduleDataActions = originalModuleBinder.dataActions ? originalModuleBinder.dataActions : [];\n originalModuleBinder.dataActions = dataActionCustimizedMerge(moduleDataActions, themeDataActionsForModule, 'name');\n return originalModuleBinder;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ICommerceApiSettings } from '@msdyn365-commerce/core-internal';\n\n/**\n * Generates a cache key from the given ApiSettings object\n */\nexport const getCacheKey = (apiSettings: ICommerceApiSettings, catalogId?: number) => {\n if (!apiSettings) {\n return '';\n }\n\n return `${apiSettings.channelId}-${apiSettings.oun}-${catalogId || 0} `;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CacheType, getCatalogIdForSdk, IActionContext, IActionInput, ICommerceApiSettings } from '@msdyn365-commerce/core-internal';\nimport { getCacheKey } from '../utils/link-utils';\n\n/**\n * Links coming from OneRF will have the following structure\n */\nexport interface IServerLink {\n type: string;\n productId?: number;\n categoryId?: number;\n destinationUrl?: string;\n error?: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n [x: string]: any;\n}\n\n/**\n * Used by the URL builder to construct the formatted\n * category or product link\n */\nexport interface IPageTypeContext {\n category?: {\n Slug: string;\n RecordId: number;\n };\n product?: {\n Name: string;\n RecordId: number;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed because type pageTypeContext in url builder allows additional properties\n [x: string]: any;\n}\n\n/**\n * Input Class for ProductLink related actions\n */\nexport class ProductLinkInput implements IActionInput {\n public categoryId: number;\n public productId: number | undefined;\n public channelId: number;\n public catalogId?: number;\n private apiSettings: ICommerceApiSettings;\n private locale: string;\n\n constructor(apiSettings: ICommerceApiSettings, categoryId: number, productId?: number, catalogId?: number | null, locale?: string) {\n this.categoryId = categoryId;\n this.productId = productId;\n this.channelId = apiSettings.channelId;\n this.apiSettings = apiSettings;\n this.catalogId = catalogId || 0;\n this.locale = locale || '';\n }\n\n public getCacheKey = () => `${getCacheKey(this.apiSettings, this.catalogId)}-${this.categoryId}-${this.productId}-${this.locale}`;\n public getCacheObjectType = () => 'ProductLink';\n public dataCacheType = (): CacheType => 'application';\n}\n\n/**\n * Input Class for CategoryLink related actions\n */\nexport class CategoryLinkInput implements IActionInput {\n public categoryId: number;\n public channelId: number;\n public catalogId?: number;\n private apiSettings: ICommerceApiSettings;\n private locale: string;\n\n constructor(apiSettings: ICommerceApiSettings, categoryId: number, catalogId?: number | null, locale?: string) {\n this.categoryId = categoryId;\n this.channelId = apiSettings.channelId;\n this.apiSettings = apiSettings;\n this.catalogId = catalogId || 0;\n this.locale = locale || '';\n }\n\n public getCacheKey = () => `${getCacheKey(this.apiSettings, this.catalogId)}-${this.categoryId}-${this.locale}`;\n public getCacheObjectType = () => 'CategoryLink';\n public dataCacheType = (): CacheType => 'application';\n}\n\n/**\n * ProductList metadata passed from CMS used to hydrate product list\n */\nexport interface IProductListMetaData {\n listType: string;\n productIds?: number[];\n categoryIds?: number[];\n discountIds?: string[];\n searchText?: string;\n includePageContext?: boolean;\n includeDescendentCategoryChildren?: boolean;\n includeCart?: boolean;\n personalization?: boolean;\n recommendationListId?: string;\n relationshipId?: string;\n pageSize?: number;\n}\n\n// Enum Representing all supported ProductList types\nexport enum ProductListType {\n algo,\n editorial,\n productByCategory,\n productBySearch,\n recommendation,\n relatedProducts,\n recentlyViewedProducts,\n promotional\n}\n\n/**\n * Input Class for ProductList related actions\n */\nexport class ProductListInput implements IActionInput {\n public listMetadata: IProductListMetaData;\n public channelId: number;\n public catalogId: number;\n private _cacheType: CacheType;\n private _cacheObjectType: string;\n private _cacheKey: string;\n\n constructor(listMetadata: IProductListMetaData, actionContext: IActionContext) {\n const requestContext = actionContext.requestContext;\n const catalogIdNumber = getCatalogIdForSdk(requestContext, 0);\n\n this.listMetadata = listMetadata;\n this.catalogId = catalogIdNumber ?? 0;\n this.channelId = requestContext.apiSettings.channelId;\n this._cacheObjectType = `ProductList-${listMetadata.listType}`;\n\n const query = requestContext.query || {};\n const skipToken = query.skip;\n const context = JSON.stringify(requestContext.urlTokens);\n const locale = actionContext.requestContext.locale || 'unknown';\n const baseCacheKey = `${this.channelId}-${this.catalogId}-${locale}-${JSON.stringify(listMetadata)}-${skipToken || ''}`;\n\n switch (ProductListType[listMetadata.listType]) {\n case ProductListType.productBySearch:\n // application cache if not reading from context\n this._cacheType = listMetadata.searchText ? 'application' : 'request';\n this._cacheKey = listMetadata.searchText ? baseCacheKey : `${baseCacheKey}-${query.q || ''}`;\n break;\n case ProductListType.productByCategory:\n this._cacheType = 'application';\n this._cacheKey = listMetadata.categoryIds && listMetadata.categoryIds.length ? baseCacheKey : `${baseCacheKey}-${context}`;\n break;\n case ProductListType.relatedProducts:\n this._cacheType = 'application';\n this._cacheKey = listMetadata.productIds && listMetadata.productIds.length ? baseCacheKey : `${baseCacheKey}-${context}`;\n break;\n case ProductListType.promotional:\n this._cacheType = 'application';\n this._cacheKey = listMetadata.discountIds && listMetadata.discountIds.length ? baseCacheKey : `${baseCacheKey}-${context}`;\n break;\n case ProductListType.editorial:\n case ProductListType.algo:\n case ProductListType.recommendation:\n default:\n this._cacheType = listMetadata.includeCart || listMetadata.personalization ? 'request' : 'application';\n this._cacheKey = `${baseCacheKey}-${context}`;\n }\n }\n\n public getCacheKey = () => this._cacheKey;\n public getCacheObjectType = () => this._cacheObjectType;\n public dataCacheType = (): CacheType => this._cacheType;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ICommerceApiSettings } from '@msdyn365-commerce/core-internal';\nimport { ProductSearchResult, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\n\n/**\n * Generates a Image URL based on data return from retail server\n * @param imageUrl The image url returned by Retail Server\n * @param ctx The request context\n */\nexport const generateImageUrl = (imageUrl: string | undefined, apiSettings: ICommerceApiSettings): string | undefined => {\n if (imageUrl) {\n // Images hosted in CMS include schema\n if (imageUrl.startsWith('http')) {\n return imageUrl;\n }\n\n // Images hosted in Retail Server must be encoded and joined with the base image url\n return apiSettings.baseImageUrl + encodeURIComponent(imageUrl);\n } else {\n // d365Commerce.telemetry.warning(`Unable to generate a proper Image URL for Product: ${product.RecordId}`);\n return undefined;\n }\n};\n\n/**\n * Generates a Image URL for a product based on data return from retail server\n * @param product The Product returned by Retail Server\n * @param ctx The request context\n */\nexport const getProductImageUrls = (\n products: SimpleProduct[] | ProductSearchResult[],\n apiSettings: ICommerceApiSettings\n): SimpleProduct[] | ProductSearchResult[] => {\n const productsWithImageUrls: SimpleProduct[] | ProductSearchResult[] = [];\n\n products &&\n products.forEach(product => {\n if (product && product.RecordId) {\n product.PrimaryImageUrl = generateImageUrl(product.PrimaryImageUrl, apiSettings);\n productsWithImageUrls.push(product);\n }\n });\n\n return productsWithImageUrls;\n};\n\n/**\n * Uses the order in which the product ids were returned from the reco call to order\n * the results from the product hydration call\n *\n * @param itemIdOrder The order of product ids to observe\n * @param unorderedProductSearchResults Unordered set of hydrated products\n */\nexport const orderProductSearchResults = (\n itemIdOrder: number[],\n unorderedProductSearchResults: ProductSearchResult[]\n): ProductSearchResult[] => {\n return itemIdOrder.reduce((result: ProductSearchResult[], itemId: number) => {\n const product = unorderedProductSearchResults.find(element => element.RecordId === itemId);\n if (product) {\n result.push(product);\n }\n return result;\n }, []);\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\n/**\n * This setting defines inventory filtering options.\n */\nexport enum ProductListInventoryFilteringOptions {\n /**\n * Filter out all products out of stock.\n */\n HideOOS = 'hideOOS',\n\n /**\n * Sort products by availability, OOS goes last.\n */\n SortOOS = 'sortOOS',\n\n /**\n * No filtering selected.\n */\n Default = 'default'\n}\n\n/**\n * Get inventory sorting value based on channelInventoryConfiguration\n *\n * @param context The current action context\n * @param channelInventoryConfiguration The channelInventoryConfiguration\n */\nexport const getInventorySorting = channelInventoryConfiguration => {\n let sorting;\n if (channelInventoryConfiguration && channelInventoryConfiguration.ProductAvailabilitySortableAttributeRecordId) {\n const sortColumnName = `Attr_${channelInventoryConfiguration.ProductAvailabilitySortableAttributeRecordId}`;\n sorting = {\n Columns: [\n {\n ColumnName: sortColumnName,\n IsDescending: true\n }\n ]\n };\n }\n return sorting;\n};\n\n/**\n * Returns inventory in stock sortable refiner value.\n * @param channelInventoryConfiguration - The channelInventoryConfiguration.\n * @returns Refiners.\n */\nexport const getInventoryInStockSortableRefinerValue = channelInventoryConfiguration => {\n if (channelInventoryConfiguration && channelInventoryConfiguration.ProductAvailabilitySortableAttributeRecordId) {\n return {\n RefinerRecordId: channelInventoryConfiguration.ProductAvailabilitySortableAttributeRecordId,\n DataTypeValue: 6,\n LeftValueBoundString: 'true',\n RightValueBoundString: 'true',\n UnitText: '',\n RowNumber: 0,\n Count: 0,\n ExtensionProperties: [],\n RefinerSourceValue: 1\n };\n }\n return undefined;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { createObservableDataAction } from '@msdyn365-commerce/action-internal';\nimport { IAction, IActionContext, versionGte } from '@msdyn365-commerce/core-internal';\nimport { searchByCriteriaAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductsDataActions.g';\nimport {\n ProductSearchCriteria,\n ProductSearchResult,\n QueryResultSettings\n} from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { CATEGORY_PAGE_NAME } from '../../consts';\nimport { getProductImageUrls } from '../../utils/product-list-utils';\nimport { ProductListInput } from '../hydrator-action-inputs';\nimport {\n getInventorySorting,\n getInventoryInStockSortableRefinerValue,\n ProductListInventoryFilteringOptions\n} from '../utils/inventory-util';\n\nexport const getProductsByCategoryList = async (input: ProductListInput, context: IActionContext): Promise => {\n let categoryId: number;\n const urlTokens = context.requestContext.urlTokens;\n\n // If the category ID has been provided from the list metadata use it, otherwise grab the category ID from context\n if (input.listMetadata.categoryIds && input.listMetadata.categoryIds.length > 0) {\n categoryId = input.listMetadata.categoryIds[0];\n } else if (urlTokens && urlTokens.pageType && urlTokens.pageType.toLowerCase() === CATEGORY_PAGE_NAME && urlTokens.recordId) {\n categoryId = +urlTokens.recordId;\n } else if (urlTokens && urlTokens.categories && urlTokens.categories.length > 0) {\n categoryId = +urlTokens.categories[0];\n } else {\n // Unable to determine category from list meta data or context\n throw new Error('CategoryId Missing for ProductsByCategory List');\n }\n context.telemetry.debug(`Category Id input to ProductsByCategory action : ${categoryId}`);\n const productSearchCriteria: ProductSearchCriteria = {\n Context: {\n ChannelId: +input.channelId,\n CatalogId: +input.catalogId\n },\n CategoryIds: [categoryId],\n SkipVariantExpansion: true,\n IncludeAttributes: true\n };\n\n const queryResultSettings: QueryResultSettings = {\n Paging: {\n Top: input.listMetadata.pageSize || 10\n }\n };\n\n const rsVersion =\n !process.env.MSDyn365Commerce_RSVERSION || process.env.MSDyn365Commerce_RSVERSION === '--'\n ? '0.0'\n : process.env.MSDyn365Commerce_RSVERSION;\n const isHideAndSortByInventoryAvailabilitySupported = versionGte(rsVersion, '9.37');\n if (isHideAndSortByInventoryAvailabilitySupported) {\n let channelInventoryConfiguration = {};\n if (\n context.requestContext.app.config?.productListInventoryDisplay === ProductListInventoryFilteringOptions.HideOOS ||\n context.requestContext.app.config?.productListInventoryDisplay === ProductListInventoryFilteringOptions.SortOOS\n ) {\n // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires\n const StoreOperationsDataActions = require('@msdyn365-commerce/retail-proxy/dist/DataActions/StoreOperationsDataActions.g');\n channelInventoryConfiguration = await StoreOperationsDataActions.getInventoryConfigurationAsync({ callerContext: context });\n }\n\n if (context.requestContext.app.config?.productListInventoryDisplay === ProductListInventoryFilteringOptions.HideOOS) {\n const inventoryInStockRefinerValue = getInventoryInStockSortableRefinerValue(channelInventoryConfiguration);\n if (inventoryInStockRefinerValue) {\n productSearchCriteria.Refinement = [inventoryInStockRefinerValue];\n }\n }\n\n if (context.requestContext.app.config?.productListInventoryDisplay === ProductListInventoryFilteringOptions.SortOOS) {\n const sorting = getInventorySorting(channelInventoryConfiguration);\n if (sorting) {\n queryResultSettings.Sorting = sorting;\n }\n }\n }\n\n return searchByCriteriaAsync(\n {\n callerContext: context,\n queryResultSettings\n },\n productSearchCriteria\n )\n .then((products: ProductSearchResult[]) => {\n context.telemetry.debug('Products returned by ProductByCategory action', products);\n return getProductImageUrls(products, context.requestContext.apiSettings);\n })\n .catch(error => {\n context.telemetry.error(`Error running ProductByCategory action: ${error}`);\n throw new Error(error);\n });\n};\n\nexport const getProductsByCategoryListAction = createObservableDataAction({\n action: >getProductsByCategoryList,\n id: '@msdyn365-commerce/products-by-category'\n});\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { createObservableDataAction } from '@msdyn365-commerce/action-internal';\nimport { getCatalogIdForSdk, IAction, IActionContext, ICookieContext, versionGte } from '@msdyn365-commerce/core-internal';\nimport { searchByCriteriaAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductsDataActions.g';\nimport {\n ProductSearchCriteria,\n ProductSearchResult,\n QueryResultSettings\n} from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { getProductImageUrls } from '../../utils/product-list-utils';\nimport { ProductListInput } from '../hydrator-action-inputs';\nimport { RecentlyViewedProductItem } from './base';\nimport {\n getInventorySorting,\n getInventoryInStockSortableRefinerValue,\n ProductListInventoryFilteringOptions\n} from '../utils/inventory-util';\n\nexport const getProductsByRecentlyViewedList = async (input: ProductListInput, ctx: IActionContext): Promise 
\r\n {label}\r\n