\n
\n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.primaryImageUrl,\n product.name,\n context\n )}\n
\n
\n
{product.name}
\n {renderPrice(\n context,\n typeName,\n id,\n product.basePrice,\n product.price,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText,\n isPriceMinMaxEnabled,\n priceResources\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.defaultUnitOfMeasure)}\n {renderDescription(product.description)}\n \n
\n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.primaryImageUrl,\n product.name,\n context\n )}\n
\n \n
{product.name}
\n {renderPrice(\n context,\n typeName,\n id,\n product.basePrice,\n product.price,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.defaultUnitOfMeasure)}\n \n \n )}\n {renderProductDimensions(product.attributeValues)}\n {!context.app.config.hideRating &&\n renderRating(context, typeName, id, product.averageRating, product.totalRatings, ratingAriaLabel, ratingCountAriaLabel)}\n {renderProductAvailability(inventoryLabel)}\n {quickViewButton && renderQuickView(quickViewButton, product.recordId)}\n {productComparisonButton && renderProductComparisonButton(productComparisonButton, product, getCatalogId(context.request))}\n \n );\n};\n\nfunction renderLabel(\n name?: string,\n price?: string,\n rating?: number,\n ratingAriaLabelText?: string,\n reviewCount?: number,\n ratingCountAriaLabelText?: string\n): string {\n const reviewCountArialableText = getReviewAriaLabel(reviewCount, ratingCountAriaLabelText ?? '');\n return `${name ?? ''} ${price ?? ''} ${getRatingAriaLabel(rating, ratingAriaLabelText)}${\n reviewCountArialableText ? ` ${reviewCountArialableText}` : ''\n }`;\n}\n\nfunction renderDescription(description?: string): JSX.Element | null {\n return {description}
;\n}\n\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\n if (rating && ratingAriaLabel) {\n const roundedRating = rating.toFixed(2);\n return format(ratingAriaLabel || '', roundedRating, '5');\n }\n return '';\n}\n\nfunction getReviewAriaLabel(reviewCount?: number, ratingCountAriaLabelText?: string): string {\n if (reviewCount && ratingCountAriaLabelText) {\n return format(ratingCountAriaLabelText || '', reviewCount);\n }\n return '';\n}\n\nfunction renderRating(\n coreContext: ICoreContext,\n moduleTypeName: string,\n moduleId: string,\n avgRating?: number,\n totalRatings?: number,\n ariaLabel?: string,\n ratingCountAriaLabel?: string\n): JSX.Element | null {\n if (!avgRating) {\n return null;\n }\n\n const numberRatings = totalRatings?.toString() || undefined;\n const ratingAriaLabelText = getRatingAriaLabel(avgRating, ariaLabel);\n const ratingCountAriaLabelText = getReviewAriaLabel(Number(numberRatings), ratingCountAriaLabel);\n\n return (\n \n );\n}\n\nfunction renderPrice(\n context: ICoreContext,\n typeName: string,\n id: string,\n basePrice?: number,\n adjustedPrice?: number,\n savingsText?: string,\n freePriceText?: string,\n originalPriceText?: string,\n currentPriceText?: string,\n isPriceMinMaxEnabled?: boolean,\n priceResources?: IPriceComponentResources\n): JSX.Element | null {\n const price = {\n BasePrice: basePrice,\n AdjustedPrice: adjustedPrice,\n CustomerContextualPrice: adjustedPrice\n };\n\n return (\n \n );\n}\n\nfunction renderProductPlacementImage(\n imageSettings?: IImageSettings,\n gridSettings?: IGridSettings,\n imageUrl?: string,\n fallbackImageUrl?: string,\n altText?: string,\n context?: ICoreContext>\n): JSX.Element | null {\n if (!imageUrl || !gridSettings || !imageSettings) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment -- Site level config can be of any type.\n const contextConfig = context?.app.config?.placeholderImageName;\n const emptyPlaceHolderImage = contextConfig as string;\n let fallbackImageSource = fallbackImageUrl;\n if (emptyPlaceHolderImage && fallbackImageUrl) {\n fallbackImageSource = `${fallbackImageUrl},${emptyPlaceHolderImage}`;\n }\n const img: IImageData = {\n src: imageUrl,\n altText: altText ? altText : '',\n fallBackSrc: fallbackImageSource\n };\n const imageProps = {\n gridSettings,\n imageSettings\n };\n imageProps.imageSettings.cropFocalRegion = true;\n return (\n \n );\n}\n\nexport const ProductComponentV2: React.FunctionComponent = msdyn365Commerce.createComponentOverride<\n IProductComponentV2\n>('ProductV2', { component: ProductCardV2, ...PriceComponentActions });\n\nexport default ProductComponentV2;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n CacheType,\n createObservableDataAction,\n IAction,\n IActionContext,\n IActionInput,\n IAny,\n ICommerceApiSettings,\n ICreateActionContext,\n IGeneric\n} from '@msdyn365-commerce/core';\nimport { getCartState } from '@msdyn365-commerce/global-state';\nimport { ProductDeliveryOptions, ProductsDataActions } from '@msdyn365-commerce/retail-proxy';\nimport {\n ArrayExtensions,\n ActiveCartProductsInput,\n QueryResultSettingsProxy,\n buildCacheKey,\n getActiveCartProductsAction\n} from '@msdyn365-commerce-modules/retail-actions';\n\n/**\n * Input class for pickup delivery options for items in cart.\n */\nexport class ProductPickUpOptionsForCartLineItems implements IActionInput {\n public readonly apiSettings: ICommerceApiSettings;\n\n public constructor(apiSettings: ICommerceApiSettings) {\n this.apiSettings = apiSettings;\n }\n\n /**\n * Get Cache Key.\n * @returns - Cache key string.\n */\n public getCacheKey = (): string => buildCacheKey('ActiveCartLineItemsPickUpOptions', this.apiSettings);\n\n /**\n * Get Cachetype Name.\n * @returns - Cache name string.\n */\n public getCacheObjectType = (): string => 'ActiveCartLineItemsPickUpOptions';\n\n /**\n * Get Cachetype.\n * @returns - CacheType enum.\n */\n public dataCacheType = (): CacheType => 'none';\n}\n\n/**\n * CreateInput method for the GetPickUpOptionCartLineItems method.\n * @param inputData - The input data passed to the createInput method.\n * @returns - Input for data action.\n */\nconst createInput = (inputData: ICreateActionContext>) => {\n return new ProductPickUpOptionsForCartLineItems(inputData.requestContext.apiSettings);\n};\n\n/**\n * The action method for the GetPickUpOptionCartLineItems data action.\n * @param input - The action input.\n * @param context - The action context.\n * @returns - Order Template object.\n */\nexport async function getPickUpOptionsForCartLineItems(\n input: ProductPickUpOptionsForCartLineItems,\n context: IActionContext\n): Promise {\n // If no input is provided fail out\n if (!input.apiSettings.channelId) {\n throw new Error('[getPickUpOptionsForCartLineItems]No valid Input was provided, failing');\n }\n const cartState = await getCartState(context);\n const cart = cartState.cart;\n const products = await getActiveCartProductsAction(new ActiveCartProductsInput(), context);\n const filterOption = 4;\n const response: ProductDeliveryOptions[] = [];\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- existing code.\n if (cart === undefined || !ArrayExtensions.hasElements(products)) {\n return Promise.resolve(response);\n }\n\n const pickupoptions = await ProductsDataActions.getDeliveryOptionsAsync(\n {\n callerContext: context,\n queryResultSettings: QueryResultSettingsProxy.getPagingFromInputDataOrDefaultValue(context)\n },\n products.map(product => product.RecordId),\n {},\n filterOption\n );\n\n return pickupoptions;\n}\n\n/**\n * The GetPickupOptionCartLineItems Data Action\n * Returns pickup options.\n */\nexport const getPickUpOptionsForCartLineItemsDataAction = createObservableDataAction({\n id: '@msdyn365-commerce-modules/retail-actions/get-pickup-options-for-cartlines',\n action: getPickUpOptionsForCartLineItems as IAction,\n input: createInput\n});\n\nexport default getPickUpOptionsForCartLineItemsDataAction;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ICartState } from '@msdyn365-commerce/global-state';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n CartLine,\n ChannelDeliveryOptionConfiguration,\n DeliveryOption,\n OrgUnitLocation,\n ProductDeliveryOptions,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport { IStoreSelectorStateManager } from '@msdyn365-commerce-modules/bopis-utilities';\nimport { INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface IPickUpInStoreViewProps {\n callbacks: {\n toggleBopis(isBopisSelected: boolean): void;\n };\n defaultComponent?: React.ReactNode;\n orgUnitName?: string;\n isBopisSelected: boolean;\n ContainerProps: INodeProps;\n deliveryOption?: string;\n}\n\nexport interface IPickUpInStoreProps {\n cartline: CartLine;\n product: SimpleProduct;\n shipitText: string;\n pickUpInStoreText: string;\n changeStoreText: string;\n cartState: ICartState | undefined;\n storeSelectorStateManager: IStoreSelectorStateManager | undefined;\n orgUnitLocations?: OrgUnitLocation[] | undefined;\n deliveryOptions?: ProductDeliveryOptions;\n pickupDeliveryModeCode?: string;\n storeSelectorModuleId?: string;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n retailMulitplePickupFeatureState?: boolean;\n locationChangedHandler(): void;\n}\n\nexport const PickUpInStore = (props: IPickUpInStoreProps): IPickUpInStoreViewProps | undefined => {\n const _onLocationChangedCallback = async (\n orgUnitLocation: OrgUnitLocation,\n cartState: ICartState | undefined,\n cartline: CartLine,\n deliveryMode?: string\n ) => {\n if (!cartState) {\n return Promise.resolve();\n }\n return cartState\n .updateCartLinePickupLocation({ cartLineId: cartline.LineId!, location: orgUnitLocation, deliveryMode })\n .then(result => {\n if (result.status === 'SUCCESS') {\n props.locationChangedHandler();\n }\n })\n .catch(error => {});\n };\n\n const _toggleBOPIS = (isBopisSelected: boolean) => {\n const { storeSelectorStateManager, product, cartline, cartState, storeSelectorModuleId } = props;\n\n if (isBopisSelected) {\n if (!storeSelectorStateManager) {\n return;\n }\n storeSelectorStateManager\n .openDialog({\n id: storeSelectorModuleId,\n product,\n alreadySelectedLocation: {\n OrgUnitNumber: cartline.FulfillmentStoreId\n },\n deliveryOptions: props.deliveryOptions,\n onLocationSelected: async (orgUnitLocation, deliveryMode: string | undefined) => {\n return _onLocationChangedCallback(orgUnitLocation, cartState, cartline, deliveryMode);\n }\n })\n .catch(error => {});\n } else {\n if (!cartState) {\n return;\n }\n cartline.DeliveryMode = '';\n cartline.FulfillmentStoreId = '';\n cartline.ShippingAddress = {};\n cartState\n .clearCartLinePickupLocation({ cartLineId: cartline.LineId! })\n .then(result => {\n if (result.status === 'SUCCESS') {\n props.locationChangedHandler();\n }\n })\n .catch(error => {});\n }\n };\n\n const _getOrgUnitName = (fulfillmentStoreId: string | undefined, orgUnitLocations: OrgUnitLocation[] | undefined) => {\n if (!orgUnitLocations || !fulfillmentStoreId || orgUnitLocations.length === 0) {\n return '';\n }\n\n const foundLocation = orgUnitLocations.find(orgUnitLocation => {\n return orgUnitLocation.OrgUnitNumber === fulfillmentStoreId;\n });\n\n if (foundLocation) {\n return foundLocation.OrgUnitName;\n }\n return fulfillmentStoreId;\n };\n\n const _renderShippingMethod = (\n cartLine: CartLine,\n shipItText: string,\n pickupInStoretext: string,\n changeStoreText: string,\n orgUnitLocations: OrgUnitLocation[] | undefined\n ): JSX.Element => {\n const orgUnitName = _getOrgUnitName(cartLine.FulfillmentStoreId, orgUnitLocations);\n const bopisSelected = !!cartLine.FulfillmentStoreId;\n\n const toggleBOPIS = (isBopisSelected: boolean) => {\n return () => {\n _toggleBOPIS(isBopisSelected);\n };\n };\n\n return (\n <>\n \n \n {cartLine.FulfillmentStoreId ? (\n \n {orgUnitName}\n \n
\n ) : null}\n \n );\n };\n\n const _getDeliveryOption = (pickupStore: IPickUpInStoreProps, deliveryOptions: ProductDeliveryOptions) => {\n const delivery = deliveryOptions?.DeliveryOptions?.find(option => option.Code === pickupStore.pickupDeliveryModeCode);\n return delivery?.Description;\n };\n\n /**\n * Method to check if we have atleast one common delivery code between product and channel.\n * @param productdeliveryOptions - Product DeliveryOption List.\n * @param storePickUpOptionList - Channel DeliveryOption List.\n * @returns Boolean flag.\n */\n const matchDeliveryOptions = (\n productdeliveryOptions: DeliveryOption[] | undefined,\n storePickUpOptionList: string[] | undefined\n ): boolean => {\n const deliveryOption: string[] = [];\n productdeliveryOptions?.map(delivery => {\n const pickup = storePickUpOptionList?.find(deliveryCode => deliveryCode === delivery.Code);\n if (pickup) {\n deliveryOption.push(pickup);\n }\n return deliveryOption;\n });\n\n return ArrayExtensions.hasElements(deliveryOption);\n };\n\n // If no delivery options present on the product, or none of the delivery options\n // match the PickupDeliveryModeCode, that means the item cannot be used for BOPIS\n if (!props.deliveryOptions || !props.deliveryOptions.DeliveryOptions) {\n return undefined;\n }\n\n if (props.retailMulitplePickupFeatureState && props.channelDeliveryOptionConfig) {\n if (!matchDeliveryOptions(props.deliveryOptions.DeliveryOptions, props.channelDeliveryOptionConfig?.PickupDeliveryModeCodes)) {\n return undefined;\n }\n } else if (\n !props.pickupDeliveryModeCode ||\n !props.deliveryOptions.DeliveryOptions.find(option => option.Code === props.pickupDeliveryModeCode)\n ) {\n return undefined;\n }\n\n return {\n callbacks: {\n toggleBopis: _toggleBOPIS\n },\n defaultComponent: _renderShippingMethod(\n props.cartline,\n props.shipitText,\n props.pickUpInStoreText,\n props.changeStoreText,\n props.orgUnitLocations\n ),\n orgUnitName: _getOrgUnitName(props.cartline.FulfillmentStoreId, props.orgUnitLocations),\n isBopisSelected: !!props.cartline.FulfillmentStoreId,\n deliveryOption: _getDeliveryOption(props, props.deliveryOptions),\n ContainerProps: {\n className: 'msc-cart-line__bopis-container'\n }\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n AddToOrderTemplateComponent,\n AddToWishlistComponent,\n CartLineItemComponent,\n IAddToOrderTemplateDialogResources,\n ICartlineResourceString,\n IDuplicateItemsWhenAddingToOrderTemplateDialogResources,\n IItemAddedToOrderTemplateDialogResources,\n IOrderTemplateNameDialogResources,\n IWishlistActionSuccessResult\n} from '@msdyn365-commerce/components';\nimport MsDyn365, {\n IAny,\n ICoreContext,\n IGeneric,\n IGridSettings,\n IImageSettings,\n ITelemetry,\n TelemetryEvent,\n isChannelTypeB2B\n} from '@msdyn365-commerce/core';\nimport { ICartState } from '@msdyn365-commerce/global-state';\nimport {\n AsyncResult,\n CartLine,\n CartLineValidationResultsByLineId,\n ChannelDeliveryOptionConfiguration,\n CommerceList,\n Customer,\n OrgUnitLocation,\n ProductDeliveryOptions,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport { ProductCatalog, ProductDimensionType, ReleasedProductType } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { IStoreSelectorStateManager } from '@msdyn365-commerce-modules/bopis-utilities';\nimport {\n ArrayExtensions,\n getInvoiceDetailsPageUrlSync,\n getProductUrlSync,\n IProductInventoryInformation,\n isCartLineItemPickUpType,\n ObjectExtensions,\n OrderTemplate,\n StringExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, getPayloadObject, getTelemetryAttributes, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { getProductByProductId, getProductByProductIdAndWarehouse } from '../../../Common/get-product';\nimport { IPickUpInStoreViewProps, PickUpInStore } from './cart-pick-up-in-store';\n\nexport interface ICartLineItemsProps {\n cartlines: CartLine[];\n cartlinesErrors: CartLineValidationResultsByLineId;\n cartState: ICartState | undefined;\n orgUnitLocations: OrgUnitLocation[] | undefined;\n resources: ICartlineResourceString;\n productAvailabilites: IProductInventoryInformation[] | undefined;\n products: SimpleProduct[] | undefined;\n productDeliveryOptions: ProductDeliveryOptions[] | undefined;\n pickupDeliveryModeCode?: string;\n catalogs?: ProductCatalog[];\n retailMulitplePickupFeatureState?: boolean;\n\n /* GridSettings for the product image in cartline */\n gridSettings: IGridSettings;\n\n /* ImageSettings for the product image in cartline */\n imageSettings: IImageSettings;\n id: string;\n typeName: string;\n context: ICoreContext>;\n telemetry: ITelemetry;\n removeButtonText: string;\n addToWishlistButtonText: string;\n removeFromWishlistButtonText: string;\n shipItText: string;\n pickitUpText: string;\n changeStoreText: string;\n outOfStockText: string;\n outOfRangeOneText: string;\n outOfRangeFormatText: string;\n storeSelectorStateManager: IStoreSelectorStateManager | undefined;\n isStockCheckEnabled: boolean;\n wishlists: CommerceList[] | undefined;\n defaultWishlistName: string;\n maxCartlineQuantity: number;\n includeErrors?: boolean;\n showShippingChargesForLineItems?: boolean;\n telemetryContent?: ITelemetryContent;\n isQuantityLimitsFeatureEnabled: boolean;\n hasInvoiceLine?: boolean;\n storeSelectorModuleId?: string;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n\n addToOrderTemplateDialogResources: IAddToOrderTemplateDialogResources;\n createOrderTemplateDialogResources: IOrderTemplateNameDialogResources;\n itemAddedToOrderTemplateDialogResources: IItemAddedToOrderTemplateDialogResources;\n duplicateItemsWhenAddingToOrderTemplateDialogResources: IDuplicateItemsWhenAddingToOrderTemplateDialogResources;\n\n addToOrderTemplateButtonText: string;\n addToOrderTemplateButtonTooltip: string;\n addToOrderTemplateMessage: string;\n addItemToOrderTemplateError: string;\n orderTemplates: OrderTemplate[] | undefined;\n customerInformation: Customer | undefined;\n shouldIgnoreWarehouse: boolean | undefined;\n productAvailability?: AsyncResult;\n productPickUpOptions?: ProductDeliveryOptions[] | undefined;\n isMultipleCatalogFeatureEnabledInHq: boolean;\n catalogId?: number;\n\n removeItemClickHandler(cartlineToRemove: CartLine): void;\n moveToWishlistSuccessHandler(result: IWishlistActionSuccessResult, cartlineId: CartLine): void;\n updateCartLinesQuantitySuccessHandler(cartline: CartLine, quantity: number, lineIndex?: number): boolean;\n locationChangedHandler(): void;\n}\n\nexport interface ICartlinesViewProps {\n cartline: React.ReactNode;\n pickUpInStore?: IPickUpInStoreViewProps;\n remove: React.ReactNode;\n addToWishlist: React.ReactNode | undefined;\n addToOrderTemplate: React.ReactNode | undefined;\n\n error?: string;\n cartlineId?: string;\n hasError?: boolean;\n data?: {\n product?: SimpleProduct;\n cartline: CartLine;\n };\n}\n\nconst _getCartItemAvailableQuantity = (\n isStockCheckEnabled: boolean,\n productAvailability: IProductInventoryInformation | undefined\n): number => {\n if (\n !isStockCheckEnabled ||\n !productAvailability ||\n !productAvailability.ProductAvailableQuantity ||\n !productAvailability.IsProductAvailable ||\n !productAvailability.ProductAvailableQuantity.AvailableQuantity\n ) {\n return 0;\n }\n\n return productAvailability.ProductAvailableQuantity.AvailableQuantity;\n};\n\nconst _getCartItemMaxQuantity = (\n maxQuantityByConfig: number,\n isStockCheckEnabled: boolean,\n availableQuantityInStock: number,\n isQuantityLimitsFeatureEnabled: boolean,\n maxByQuantityLimitsFeature: number\n) => {\n if (isQuantityLimitsFeatureEnabled) {\n let maxByQuantityLimitsFeatureResult = maxByQuantityLimitsFeature;\n\n // If max by feature in not defined when feature is on then we suggest that there no max by feature\n // and consider available qty if stock check enabled and max from config in site settings.\n if (!maxByQuantityLimitsFeature) {\n maxByQuantityLimitsFeatureResult = maxQuantityByConfig || 10;\n }\n\n return isStockCheckEnabled\n ? maxByQuantityLimitsFeatureResult < availableQuantityInStock\n ? maxByQuantityLimitsFeatureResult\n : availableQuantityInStock\n : maxByQuantityLimitsFeatureResult;\n }\n if (isStockCheckEnabled) {\n return availableQuantityInStock < maxQuantityByConfig ? availableQuantityInStock : maxQuantityByConfig;\n }\n return maxQuantityByConfig;\n};\n\nconst _getErrorMessage = (\n availableQuantityInStock: number,\n currentQuantity: number,\n props: ICartLineItemsProps,\n shouldSkipStockCheck: boolean,\n cartLine: CartLine,\n lineId: string | undefined,\n foundProductAvailability?: IProductInventoryInformation\n): string | undefined => {\n const finalErrorMessages: string[] = [];\n\n const isLoadingDeliveryOptions = props.productAvailability?.status === 'LOADING';\n if (isLoadingDeliveryOptions) {\n return undefined;\n }\n // check availability passed as prop for each cartline\n if (props.productAvailabilites && ArrayExtensions.hasElements(props.productAvailabilites)) {\n if (foundProductAvailability === undefined) {\n finalErrorMessages.push(props.outOfStockText);\n return finalErrorMessages.toString();\n }\n }\n if (props.includeErrors && props.isStockCheckEnabled && !shouldSkipStockCheck) {\n if (availableQuantityInStock <= 0) {\n finalErrorMessages.push(props.outOfStockText);\n } else if (availableQuantityInStock < currentQuantity) {\n if (availableQuantityInStock === 1) {\n finalErrorMessages.push(props.outOfRangeOneText);\n } else {\n finalErrorMessages.push(props.outOfRangeFormatText.replace('{numLeft}', availableQuantityInStock.toString()));\n }\n }\n }\n\n // Server-side validation\n const checkForErrors = props.cartlinesErrors.ValidationResultsPairs;\n const errorsFoundByLineId = checkForErrors?.filter(index => index.LineId === lineId);\n if (errorsFoundByLineId !== undefined) {\n for (const i of errorsFoundByLineId) {\n if (ArrayExtensions.hasElements(i.ValidationFailures)) {\n i.ValidationFailures.forEach(validation => {\n if (validation.ErrorContext !== undefined) {\n finalErrorMessages.push(validation.ErrorContext);\n }\n });\n }\n }\n }\n\n if (ArrayExtensions.hasElements(finalErrorMessages)) {\n return finalErrorMessages.join(' ');\n }\n\n return undefined;\n};\n\n/**\n * On Remove Click functionality.\n * @param removeItemClickHandler -Remove item click function.\n * @param cartline -CartLine.\n * @returns Remove change value.\n */\nconst onRemoveClickFunction = (removeItemClickHandler: (cartlineToRemove: CartLine) => void, cartline: CartLine) => () => {\n removeItemClickHandler(cartline);\n};\n\n// eslint-disable-next-line complexity -- Auto-suppressed.\nconst _assembleNode = (\n cartline: CartLine,\n product: SimpleProduct | undefined,\n props: ICartLineItemsProps,\n index: number,\n foundProductAvailability?: IProductInventoryInformation,\n productPickUpOptions?: ProductDeliveryOptions\n): ICartlinesViewProps => {\n const {\n imageSettings,\n gridSettings,\n id,\n typeName,\n context,\n resources,\n removeButtonText,\n removeItemClickHandler,\n moveToWishlistSuccessHandler,\n addToOrderTemplateButtonText,\n addToOrderTemplateButtonTooltip,\n addToOrderTemplateDialogResources,\n createOrderTemplateDialogResources,\n itemAddedToOrderTemplateDialogResources,\n duplicateItemsWhenAddingToOrderTemplateDialogResources,\n addToWishlistButtonText,\n removeFromWishlistButtonText,\n orderTemplates,\n customerInformation,\n wishlists,\n defaultWishlistName,\n storeSelectorModuleId,\n isMultipleCatalogFeatureEnabledInHq\n } = props;\n\n const isAuthenticated = context.request.user.isAuthenticated;\n const nameOfWishlist = wishlists && wishlists.length > 0 && wishlists[0].Name ? wishlists[0].Name : defaultWishlistName;\n const availableQuantityInStock = _getCartItemAvailableQuantity(props.isStockCheckEnabled, foundProductAvailability);\n\n const maxQuantity =\n product &&\n _getCartItemMaxQuantity(\n props.maxCartlineQuantity,\n props.isStockCheckEnabled,\n availableQuantityInStock,\n props.isQuantityLimitsFeatureEnabled,\n product?.Behavior?.MaximumQuantity || 0\n );\n\n // Skip stock check if the cart line is a service item or an invoice line\n const shouldSkipStockCheck = product?.ItemTypeValue === ReleasedProductType.Service || !!cartline.IsInvoiceLine;\n\n const errorMessage = ObjectExtensions.isNullOrUndefined(maxQuantity)\n ? undefined\n : _getErrorMessage(\n availableQuantityInStock,\n cartline.Quantity!,\n props,\n shouldSkipStockCheck,\n cartline,\n cartline.LineId,\n foundProductAvailability\n );\n\n const onRemoveClickHandler = onRemoveClickFunction(removeItemClickHandler, cartline);\n\n const payload = getPayloadObject(TelemetryEvent.RemoveFromCart, props.telemetryContent!, removeButtonText, '');\n const attributes = getTelemetryAttributes(props.telemetryContent!, payload);\n\n const inventoryLbl = foundProductAvailability?.StockLevelLabel;\n const inventoryCode = foundProductAvailability\n ? `ms-cart-line__inventory-code-${foundProductAvailability.StockLevelCode?.toLowerCase()}`\n : undefined;\n const productDimension = 4;\n const customPriceDimensionType = productDimension as ProductDimensionType.Style;\n const isCustomPriceSelected =\n product?.Dimensions?.find(dimension => dimension.DimensionTypeValue === customPriceDimensionType)?.DimensionValue?.Value ===\n 'Custom';\n\n let productUrl: string | undefined;\n if (product) {\n productUrl = getProductUrlSync(product, props.context.actionContext, undefined);\n\n if (MsDyn365.isBrowser && isChannelTypeB2B(props.context.actionContext.requestContext)) {\n const fullUrl = new URL(productUrl, window.location.href);\n fullUrl.searchParams.set('catalogid', `${cartline.CatalogId ?? 0}`);\n productUrl = fullUrl.href;\n }\n } else {\n productUrl = getInvoiceDetailsPageUrlSync(cartline.Description || '', props.context.actionContext);\n }\n\n return {\n data: {\n product,\n cartline\n },\n cartlineId: cartline.LineId,\n error: errorMessage,\n hasError:\n (!shouldSkipStockCheck && props.isStockCheckEnabled ? cartline.Quantity! > (maxQuantity ?? 0) : false) ||\n (!ObjectExtensions.isNullOrUndefined(errorMessage) && !StringExtensions.isNullOrEmpty(errorMessage)),\n cartline: (\n \n ),\n pickUpInStore: product\n ? PickUpInStore({\n storeSelectorModuleId,\n cartState: props.cartState,\n cartline,\n product,\n shipitText: props.shipItText,\n pickUpInStoreText: props.pickitUpText,\n changeStoreText: props.changeStoreText,\n storeSelectorStateManager: props.storeSelectorStateManager,\n orgUnitLocations: props.orgUnitLocations,\n deliveryOptions: productPickUpOptions,\n pickupDeliveryModeCode:\n cartline.DeliveryMode !== (undefined || '') ? cartline.DeliveryMode : props.pickupDeliveryModeCode,\n retailMulitplePickupFeatureState: props.retailMulitplePickupFeatureState,\n channelDeliveryOptionConfig: props.channelDeliveryOptionConfig,\n locationChangedHandler: props.locationChangedHandler\n })\n : undefined,\n remove: (\n \n ),\n addToWishlist:\n isAuthenticated && product && !isCustomPriceSelected ? (\n \n ) : (\n undefined\n ),\n addToOrderTemplate:\n isAuthenticated && orderTemplates && product ? (\n \n ) : (\n undefined\n )\n };\n};\n\nexport const assembleCartlines = (\n cartlines: CartLine[],\n products: SimpleProduct[] | undefined,\n props: ICartLineItemsProps\n): ICartlinesViewProps[] | null => {\n const reactNodes: ICartlinesViewProps[] = [];\n\n cartlines.map((cartline, index) => {\n let product;\n if (props.isQuantityLimitsFeatureEnabled) {\n // When feature is enabled the same products could have different quantity limits in Behavior so we need\n // to check productId and WarehouseId for identification.\n product = getProductByProductIdAndWarehouse(cartline.ProductId, products, cartline.WarehouseId, props.cartState);\n } else {\n product = getProductByProductId(cartline.ProductId, products);\n }\n let foundProductAvailability;\n\n // check if cartlineitem is pickup item\n const isPickUpItem = isCartLineItemPickUpType(\n cartline,\n props.retailMulitplePickupFeatureState,\n props.channelDeliveryOptionConfig,\n props.pickupDeliveryModeCode\n );\n if (props.productAvailabilites && ArrayExtensions.hasElements(props.productAvailabilites)) {\n foundProductAvailability = props.productAvailabilites.find(productAvailability => {\n if (!props.shouldIgnoreWarehouse && isPickUpItem) {\n // check warehouse only if siteBuilder setting is not \"Based on aggregate for shipping and pickup warehouses\" and cartlineitem is pickupitem\n return (\n productAvailability.ProductAvailableQuantity?.ProductId === cartline.ProductId &&\n productAvailability.InventLocationId?.toUpperCase() === cartline.WarehouseId?.toUpperCase()\n );\n }\n return productAvailability.ProductAvailableQuantity.ProductId === cartline.ProductId;\n });\n }\n\n let productPickUpOptions;\n if (props.productPickUpOptions !== undefined && ArrayExtensions.hasElements(props.productPickUpOptions)) {\n productPickUpOptions = props.productPickUpOptions.find(deliveryOption => {\n return deliveryOption && deliveryOption.ProductId === cartline.ProductId;\n });\n }\n reactNodes.push(_assembleNode(cartline, product, props, index, foundProductAvailability, productPickUpOptions));\n });\n\n return reactNodes;\n};\n\n/**\n * CartLineItems component.\n * @param props\n */\nexport const CartLineItems = (props: ICartLineItemsProps) => {\n const { products, cartlines } = props;\n return assembleCartlines(cartlines, products, props);\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartLine, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport groupBy from 'lodash/groupBy';\n\nimport { assembleCartlines, ICartLineItemsProps, ICartlinesViewProps } from './cart-line-items';\n\nconst _assembleGroupCartlines = (\n cartlines: CartLine[],\n products: SimpleProduct[] | undefined,\n props: ICartLineItemsProps\n): ICartlinesViewProps[][] | null => {\n const reactNodes: ICartlinesViewProps[][] = [];\n if (!products || products.length === 0) {\n props.context.telemetry.error('Products content is empty, module wont render');\n return null;\n }\n\n const getGroupByStorePickup = (items: CartLine[]) => groupBy(items, item => item.FulfillmentStoreId);\n const getGroupByDelivery = (items: CartLine[]) => groupBy(items, item => item.DeliveryMode);\n const groupDelivery = getGroupByDelivery(cartlines);\n const cartLinesGroup: CartLine[] = [];\n\n // 1) Group by store and pick up mode\n Object.entries(groupDelivery).forEach(([deliveryType, groupByDeliveryType]) => {\n // @ts-expect-error\n groupDelivery[deliveryType] = getGroupByStorePickup(groupByDeliveryType);\n cartLinesGroup.push(getGroupByStorePickup(groupByDeliveryType));\n });\n\n // 2) Create cartlines group\n Object.keys(cartLinesGroup).forEach(key => {\n const cartLines = cartLinesGroup[key];\n Object.keys(cartLines).forEach(index => {\n const cartLine = cartLines[index];\n const carLineViewProps = assembleCartlines(cartLine, products, props);\n if (carLineViewProps !== null) {\n reactNodes.push(carLineViewProps);\n }\n });\n });\n\n return reactNodes;\n};\n\nconst _assembleGroupInvoiceCartlines = (\n cartLines: CartLine[],\n products: SimpleProduct[] | undefined,\n props: ICartLineItemsProps\n): ICartlinesViewProps[][] | null => {\n const reactNodes: ICartlinesViewProps[][] = [];\n if (cartLines && cartLines.length > 0) {\n // Create invoice cartLines group\n const carLineViewProps = assembleCartlines(cartLines, products, props);\n if (carLineViewProps !== null) {\n reactNodes.push(carLineViewProps);\n }\n }\n return reactNodes;\n};\n\n/**\n * CartLine Group component.\n * @param props\n */\nexport const CartLineGroupItems = (props: ICartLineItemsProps) => {\n const { products, cartlines, hasInvoiceLine } = props;\n return hasInvoiceLine\n ? _assembleGroupInvoiceCartlines(cartlines, products, props)\n : _assembleGroupCartlines(cartlines, products, props);\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IActionContext } from '@msdyn365-commerce/core';\nimport { CartPromotionLine } from '@msdyn365-commerce/retail-proxy';\nimport { getPromotionOptionsForCartLineItems, PromotionOptionsForCartLineItems } from '@msdyn365-commerce-modules/retail-actions';\n\n/**\n * IPromotionData entity interface.\n */\nexport interface IPromotionData {\n promotionOptions?: CartPromotionLine[];\n}\n\n/**\n * Calls the Retail API and returns a promotion data.\n * @param ctx\n */\nexport async function getPromotionData(ctx: IActionContext): Promise {\n const promotionData: IPromotionData = {};\n\n await getPromotionOptionsForCartLineItems(new PromotionOptionsForCartLineItems(ctx.requestContext.apiSettings), ctx)\n .then(promotionOptions => {\n if (promotionOptions) {\n promotionData.promotionOptions = promotionOptions;\n }\n })\n .catch(error => {\n ctx.telemetry.exception(error);\n return {};\n });\n\n return promotionData;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n IAddToOrderTemplateDialogResources,\n IDuplicateItemsWhenAddingToOrderTemplateDialogResources,\n IItemAddedToOrderTemplateDialogResources,\n ILinesAddedToOrderTemplateDialogResources,\n IOrderTemplateNameDialogResources,\n IWishlistActionSuccessResult,\n PromoCodeComponent,\n SaveCartToOrderTemplateComponent\n} from '@msdyn365-commerce/components';\nimport MsDyn365, { getCatalogId, getUrlSync, IImageSettings, isChannelTypeB2B } from '@msdyn365-commerce/core';\nimport { ICartActionResult, ICartState } from '@msdyn365-commerce/global-state';\nimport { AsyncResult, CartLine, CartLineValidationResultsByLineId, LineValidationResult } from '@msdyn365-commerce/retail-proxy';\nimport { FeatureState, ProductDeliveryOptions, ReleasedProductType } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { cartLineQuantityUpdatedAsync, validateCartAsync } from '@msdyn365-commerce-modules/cart-utilities';\nimport { IInvoiceSummaryLines, InvoiceSummary } from '@msdyn365-commerce-modules/invoice-payment-summary';\nimport { IOrderSummaryLines, OrderSummary } from '@msdyn365-commerce-modules/order-summary-utilities';\nimport {\n ActiveCartProductsInput,\n ArrayExtensions,\n getActiveCartProductsAction,\n ICartLineInventoryValidationResult,\n ObjectExtensions,\n validateCartLinesInventory,\n ProductPickUpOptionsForCartLineItems,\n validateCatalogId\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n Alert,\n Button,\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n INodeProps,\n IPayLoad,\n ITelemetryContent,\n TelemetryConstant,\n Waiting,\n updateMaxQuantityForCartLineItem,\n urlCheck\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { reaction } from 'mobx';\nimport { observer } from 'mobx-react';\nimport React from 'react';\nimport { getPickUpOptionsForCartLineItems } from './actions/get-pickup-options-for-cartlines';\n\nimport { ICartData } from './cart.data';\nimport { ICartProps, ICartResources } from './cart.props.autogenerated';\nimport { CartLineGroupItems } from './components/cart-line-groups';\nimport { CartLineItems, ICartlinesViewProps } from './components/cart-line-items';\nimport { cartPromotions, ICartLineItemViewProps } from './components/cart-line-items-promotion';\nimport { getPromotionData, IPromotionData } from './utils/get-promotion-in-cart';\n\n/**\n * Cart view props interface.\n */\nexport interface ICartViewProps extends ICartProps {\n className: string;\n title?: React.ReactNode;\n CartlinesWrapper: INodeProps;\n cartlines?: ICartlinesViewProps[];\n cartLinesGroup?: ICartlinesViewProps[][];\n cart: ICartState | undefined;\n orderSummaryHeading: React.ReactNode;\n orderSummaryLineitems?: IOrderSummaryLines;\n invoiceSummaryLineitems?: IInvoiceSummaryLines;\n OrderSummaryWrapper: INodeProps;\n OrderSummaryItems: INodeProps;\n OrderSummaryErrors?: IOrderSummaryErrors;\n checkoutAsGuestButton: React.ReactNode;\n checkoutAsSignInUserButton: React.ReactNode;\n storeSelector?: React.ReactNode;\n expressCheckoutButton?: React.ReactNode[];\n ExpressCheckoutSectionWrapper: INodeProps;\n backToShoppingButton: React.ReactNode;\n waitingComponent: React.ReactNode;\n promotionOptions?: ICartLineItemViewProps;\n promoCode: React.ReactNode;\n cartLoadingStatus: string;\n cartDataResult: boolean;\n multiplePickUpEnabled?: boolean;\n createTemplateFromCartButton: React.ReactNode;\n telemetryContent?: ITelemetryContent;\n checkoutBlockedDueToUnavailableFunds?: React.ReactNode;\n removeItemClickHandler(cartlineToRemove: CartLine): void;\n moveToWishlistSuccessHandler(result: IWishlistActionSuccessResult, cartlineId: CartLine): void;\n}\n\n/**\n * Order summary errors interface.\n */\nexport interface IOrderSummaryErrors {\n Wrapper: INodeProps;\n header: React.ReactNode;\n errors: React.ReactNode[];\n}\n\n/**\n * Cart component state interface.\n */\ninterface ICartComponentState {\n showPromotionDialog: boolean;\n cartlinesErrors: CartLineValidationResultsByLineId;\n promotionData: IPromotionData;\n isCartValid: boolean;\n productPickUpOptions?: ProductDeliveryOptions[];\n}\n\n/**\n * Cart component.\n * @extends {React.PureComponent>}\n */\n@observer\nclass Cart extends React.Component> {\n public state: ICartComponentState;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly payLoad: IPayLoad;\n\n private isQuantityLimitsFeatureEnabled: boolean = false;\n\n private _isMounted: boolean = false;\n\n private readonly promotionPopupId: string = 'cart-promotion-popup';\n\n public constructor(props: ICartProps) {\n super(props);\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.payLoad = getPayloadObject('click', this.telemetryContent, '');\n this.promotionLinkClick = this.promotionLinkClick.bind(this);\n this.promotionCloseButtonclick = this.promotionCloseButtonclick.bind(this);\n\n this.state = {\n showPromotionDialog: false,\n promotionData: {},\n isCartValid: true,\n productPickUpOptions: undefined,\n cartlinesErrors: {}\n };\n }\n\n /**\n * Component did mount function.\n */\n public async componentDidMount(): Promise {\n this._isMounted = true;\n const {\n config,\n context: { actionContext }\n } = this.props;\n\n this.isQuantityLimitsFeatureEnabled =\n (await this.getOrderQuantityLimitsFeatureFlag()) || (await this._isChannelLimitsFeatureEnabled());\n if (this.isQuantityLimitsFeatureEnabled) {\n await this.validateCart();\n }\n\n if (config.showAvailablePromotions) {\n if (this._isMounted && this.props.data.cart.result?.cart.CartLines) {\n this.setState({ promotionData: await getPromotionData(actionContext) });\n }\n\n reaction(\n () => this.props.data.cart.result?.cart.CartLines,\n async () => {\n if (this._isMounted) {\n this.setState({ promotionData: await getPromotionData(actionContext) });\n }\n }\n );\n }\n reaction(\n () => this.props.data.cart.result?.cart.CartLines,\n async () => {\n if (this._isMounted) {\n const input = new ProductPickUpOptionsForCartLineItems(actionContext.requestContext.apiSettings);\n this.setState({ productPickUpOptions: await getPickUpOptionsForCartLineItems(input, actionContext) });\n }\n }\n );\n }\n\n /**\n * Component will unmount function.\n */\n public componentWillUnmount(): void {\n this._isMounted = false;\n }\n\n /**\n * Should component update function.\n * @param nextProps - Next props.\n * @param nextState - Next state.\n * @returns True if component should update, false otherwise.\n */\n public shouldComponentUpdate(nextProps: ICartProps, nextState: ICartComponentState): boolean {\n if (this.state === nextState && this.props.data === nextProps.data) {\n return false;\n }\n return true;\n }\n\n /* eslint-disable complexity -- Disabling complexity for render method */\n public render(): JSX.Element | null {\n const {\n data: {\n cart: { result: cart },\n products: { result: products }\n },\n context: {\n request: {\n user: { isAuthenticated, signInUrl }\n }\n },\n resources\n } = this.props;\n\n const guestCheckoutUrl = getUrlSync('checkout', this.props.context.actionContext) || '';\n const backToShoppingUrl = getUrlSync('home', this.props.context.actionContext) || '';\n const checkoutURL = this.getCheckoutURL(isAuthenticated, guestCheckoutUrl, signInUrl || '');\n const isCartEmpty = cart && cart.cart.CartLines && cart.cart.CartLines.length === 0;\n const cartLines = this._getCartLines();\n const emailDeliveryModeCode = this.props.context.request.channel?.EmailDeliveryModeCode;\n const validInventoryAcrossCartLines = validateCartLinesInventory(\n cart?.cart.CartLines ?? [],\n this.props.data.productAvailabilites.result ?? [],\n this.props.context.actionContext,\n products ?? [],\n emailDeliveryModeCode\n );\n\n const hasError =\n !validInventoryAcrossCartLines?.isValid ||\n (!validInventoryAcrossCartLines && !this.state.isCartValid) ||\n (cartLines ? cartLines.some(cartline => cartline.hasError) : false);\n const RetailMultiplePickupFeatureState = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature'\n );\n const multiplePickUpEnabled = RetailMultiplePickupFeatureState?.IsEnabled;\n const channelMultipleCatalogsFeature = 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature';\n const { featureState } = this.props.data;\n const isMultipleCatalogsFeatureEnabled =\n featureState.result?.find((item: FeatureState) => item.Name === channelMultipleCatalogsFeature)?.IsEnabled || false;\n const currentCatalogId = getCatalogId(this.props.context.request);\n validateCatalogId(currentCatalogId);\n const cartLinesGroup = cart?.hasInvoiceLine || multiplePickUpEnabled ? this.getCartLinesGroup() : null;\n this.payLoad.contentAction.etext = TelemetryConstant.Checkout;\n const checkoutBySignInAttributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n this.payLoad.contentAction.etext = TelemetryConstant.GuestCheckout;\n const checkoutByGuestAttributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n this.payLoad.contentAction.etext = TelemetryConstant.BackToShopping;\n const backtoShoppingAttributes = getTelemetryAttributes(this.telemetryContent, this.payLoad);\n\n // If there's inventory issues across multiple cart lines then update the error and display as part of the order summary\n if (validInventoryAcrossCartLines && !validInventoryAcrossCartLines.isValid) {\n if (multiplePickUpEnabled && cartLinesGroup !== null) {\n for (const cartLineGroup of cartLinesGroup) {\n this._updateCartLineErrorForInvalidInventory(cartLineGroup, validInventoryAcrossCartLines);\n }\n }\n\n this._updateCartLineErrorForInvalidInventory(cartLines, validInventoryAcrossCartLines);\n }\n\n const viewProps = {\n ...this.props,\n className: classnames('ms-cart'),\n title: {resources.cartTitle}
,\n cart: this.props.data.cart.result,\n CartlinesWrapper: { className: 'msc-cartline-wraper' },\n OrderSummaryWrapper: { className: cart?.hasInvoiceLine ? 'msc-invoice-summary-wrapper' : 'msc-order-summary-wrapper' },\n OrderSummaryItems: { className: cart?.hasInvoiceLine ? 'msc-invoice-summary__items' : 'msc-order-summary__items' },\n cartlines: cartLines,\n cartLinesGroup,\n promoCode: this._getPromoCode(),\n promotionOptions: this._getPromotions(),\n context: this.props.context,\n typeName: this.props.typeName,\n telemetry: this.props.telemetry,\n id: this.props.id,\n multiplePickUpEnabled,\n removePromoAriaLabelFormat: resources.removePromoAriaLabelFormat,\n orderSummaryHeading: ArrayExtensions.hasElements(cart?.cart.CartLines) ? (\n cart?.hasInvoiceLine ? (\n {resources.invoiceSummaryTitle}
\n ) : (\n {resources.orderSummaryTitle}
\n )\n ) : null,\n orderSummaryLineitems: this._getOrderSummaryLineItems(),\n invoiceSummaryLineitems: this._getInvoiceSummaryLineItems(),\n checkoutAsSignInUserButton: !isCartEmpty ? (\n \n {resources.checkoutButtonTitle}\n \n ) : null,\n checkoutAsGuestButton:\n !isCartEmpty && !isAuthenticated && this.props.config.showGuestCheckoutButton ? (\n \n {resources.guestCheckoutButtonTitle}\n \n ) : null,\n expressCheckoutButton: !isCartEmpty ? this.props.slots.paymentExpress : null,\n ExpressCheckoutSectionWrapper: { className: 'msc-express-payment-container-in-cart-page' },\n backToShoppingButton: (\n \n {resources.backToShoppingButtonTitle}\n \n ),\n createTemplateFromCartButton:\n this._displayAddCartToTemplate() && products ? (\n \n ) : null,\n checkoutBlockedDueToUnavailableFunds: null,\n storeSelector:\n this.props.slots.storeSelector && this.props.slots.storeSelector.length > 0 ? this.props.slots.storeSelector[0] : null,\n removeItemClickHandler: this.removeItemFromCartHandler,\n moveToWishlistSuccessHandler: this.moveToWishlistSuccessHandler,\n waitingComponent: ,\n cartLoadingStatus: this.props.data.cart.status === 'FAILED' ? this.props.resources.cartLoadingErrorMessage : null,\n cartDataResult: this.props.data.cart.result && this.props.data.cart.result.isEmpty,\n OrderSummaryErrors: this._getOrderSummaryErrors(cartLines),\n telemetryContent: this.telemetryContent\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n /* eslint-enable complexity -- Disabling complexity for render method */\n\n /**\n * Promotion click event handler.\n * @param event - The mouse event.\n */\n private readonly promotionLinkClick = (event: React.MouseEvent) => {\n this.setState({\n showPromotionDialog: !this.state.showPromotionDialog\n });\n };\n\n /**\n * Promotion close button click.\n */\n private readonly promotionCloseButtonclick = () => {\n this._hidePromotionDialog();\n };\n\n /**\n * Hide promotion dialog.\n */\n private _hidePromotionDialog(): void {\n this.setState({\n showPromotionDialog: false\n });\n }\n\n /**\n * Display add to cart template.\n * @returns True if should display, false otherwise.\n */\n private _displayAddCartToTemplate(): boolean {\n const cart = this.props.data.cart?.result;\n if (ObjectExtensions.isNullOrUndefined(cart) || cart.hasInvoiceLine) {\n return false;\n }\n\n if (\n isChannelTypeB2B(this.props.context.actionContext.requestContext) &&\n this.props.data.orderTemplates.result &&\n ArrayExtensions.hasElements(cart.cart?.CartLines) &&\n this.props.data.customerInformation.result\n ) {\n return true;\n }\n\n return false;\n }\n\n /**\n * Get promotions.\n * @returns React node with the promotions.\n */\n private _getPromotions(): React.ReactNode {\n return (\n this.props.config.showAvailablePromotions &&\n cartPromotions({\n id: this.promotionPopupId,\n showPromotionPopup: this.state.showPromotionDialog,\n onSeeAllClick: this.promotionLinkClick,\n onCloseButtonClick: this.promotionCloseButtonclick,\n promotions: this.state.promotionData.promotionOptions,\n resources: {\n promotionStringHeading: this.props.resources.promotionStringHeading,\n promotionLinkText: this.props.resources.promotionLinkText,\n promotionPopupHeading: this.props.resources.promotionPopupHeading,\n promotionCloseButtonAriaLabel: this.props.resources.promotionCloseButtonAriaLabel\n }\n })\n );\n }\n\n /**\n * Add error message in cart line in case the quantity exceeds the current inventory.\n * @param cartLines - The cart lines.\n * @param cartLineInventoryValidationResult - The cart line inventory result.\n */\n private _updateCartLineErrorForInvalidInventory(\n cartLines: ICartlinesViewProps[] | null,\n cartLineInventoryValidationResult: ICartLineInventoryValidationResult\n ) {\n const { resources } = this.props;\n\n if (\n ArrayExtensions.hasElements(cartLines) &&\n !cartLineInventoryValidationResult.isValid &&\n ArrayExtensions.hasElements(cartLineInventoryValidationResult.productIdWithErrors)\n ) {\n for (const productIdWithError of cartLineInventoryValidationResult.productIdWithErrors) {\n const cartLine = cartLines?.find(element => element.data?.cartline.ProductId === productIdWithError);\n if (cartLine) {\n cartLine.error = resources.outOfStockErrorMessage;\n cartLine.hasError = true;\n }\n }\n }\n }\n\n /**\n * Get order summary errors.\n * @param cartLines - The cart lines.\n * @returns Order summary errors.\n */\n private _getOrderSummaryErrors(cartLines: ICartlinesViewProps[] | null): IOrderSummaryErrors | undefined {\n const allErrors =\n (cartLines &&\n cartLines\n .map(cartline => {\n // Check if the product is service or not by product type\n const isServiceItem = cartline.data?.product?.ItemTypeValue === ReleasedProductType.Service;\n\n if (!isServiceItem && cartline.error) {\n const fullError =\n cartline.data && cartline.data.product?.Name\n ? `${cartline.data.product.Name}: ${cartline.error}`\n : cartline.error;\n\n return (\n \n {fullError}\n
\n );\n }\n\n return null;\n })\n .filter((line): line is JSX.Element => !!line)) ||\n [];\n\n return {\n Wrapper: {\n tag: Alert,\n className: 'msc-alert',\n isOpen: allErrors.length > 0,\n color: 'danger',\n assertive: true,\n 'aria-label': this.props.resources.outOfStockErrorMessageHeader\n },\n header: (\n \n \n {this.props.resources.outOfStockErrorMessageHeader}\n
\n ),\n errors: allErrors\n };\n }\n\n /**\n * Gets invoice summary line items.\n * @returns Invoice summary lines.\n */\n private _getInvoiceSummaryLineItems(): IInvoiceSummaryLines | undefined {\n const {\n data: {\n cart: { result: cart }\n },\n telemetry,\n resources\n } = this.props;\n\n return cart?.hasInvoiceLine\n ? InvoiceSummary({\n orderTotalLabel: resources.totalAmountLabel,\n invoiceLabel: resources.invoiceLabel,\n cart: cart.cart,\n context: this.props.context,\n typeName: this.props.typeName,\n telemetry,\n id: this.props.id\n })\n : undefined;\n }\n\n /**\n * Gets order summary line items.\n * @returns Order summary lines.\n */\n private _getOrderSummaryLineItems(): IOrderSummaryLines | undefined {\n const {\n data: {\n cart: { result: cart },\n channelDeliveryOptionConfig\n },\n telemetry,\n resources\n } = this.props;\n\n const channelConfiguration = this.props.context && this.props.context.request && this.props.context.request.channel;\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const featureState = this.props?.data?.featureState;\n const retailMultiplePickUpOptionEnabled = featureState?.result?.find(item => item.Name === multiplePickupStoreSwitchName)\n ?.IsEnabled;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- app configs are of generic type\n const isShowOrHideTaxEnabled = this.props.context.request.app.config?.isEnableShowOrHideSalesTaxECommerceEnabled === true;\n\n return channelConfiguration && ArrayExtensions.hasElements(cart?.cart.CartLines) && !cart?.hasInvoiceLine\n ? OrderSummary({\n cart: cart!.cart,\n subTotalLabel: resources.itemsWithCountLabel,\n shippingLabel: resources.estimatedShippingLabel,\n otherChargeLabel: resources.otherCharges,\n taxLabel: resources.estimatedTaxLabel,\n orderTotalLabel: resources.orderTotal,\n totalDiscountsLabel: resources.totalDiscountsLabel,\n context: this.props.context,\n typeName: this.props.typeName,\n id: this.props.id,\n toBeCalculatedText: resources.yetToBeCalculatedText,\n freeText: resources.priceFree,\n channelConfiguration,\n retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig: channelDeliveryOptionConfig?.result,\n telemetry,\n isTaxIncludedInPrice: cart!.cart.IsTaxIncludedInPrice,\n isShowTaxBreakup: isShowOrHideTaxEnabled\n })\n : undefined;\n }\n\n /**\n * Gets promo code.\n * @returns React node with the promo code.\n */\n private _getPromoCode(): React.ReactNode {\n const {\n data: {\n cart: { result: cart }\n },\n resources\n } = this.props;\n\n return (\n cart && (\n \n )\n );\n }\n\n /**\n * Generate add to order template dialog resources.\n * @param resources - The resources.\n * @returns IAddToOrderTemplateDialogResources.\n */\n private _generateAddToOrderTemplateDialogResources(resources: ICartResources): IAddToOrderTemplateDialogResources {\n return {\n addToOrderTemplateHeader: resources.addToOrderTemplateHeader,\n\n noOrderTemplatesMessage: resources.noOrderTemplatesMessage,\n noOrderTemplatesDescription: resources.noOrderTemplatesDescription,\n\n createAnOrderTemplateButtonText: resources.createAnOrderTemplateButtonText,\n createNewOrderTemplateButtonText: resources.createNewOrderTemplateButtonText,\n cancelOrderTemplateCreationButtonText: resources.cancelOrderTemplateCreationButtonText,\n\n selectTemplatesText: resources.selectTemplatesText,\n addToTemplateButtonText: resources.addToTemplateButtonText,\n lineItemsText: resources.lineItemsText\n };\n }\n\n /**\n * Generate item added to order template dialog resources.\n * @param resources - The resources.\n * @returns IItemAddedToOrderTemplateDialogResources.\n */\n private _generateItemAddedToOrderTemplateDialogResources(resources: ICartResources): IItemAddedToOrderTemplateDialogResources {\n return {\n viewOrderTemplateButtonText: resources.viewOrderTemplateButtonText,\n continueShoppingButtonText: resources.continueShoppingButtonText,\n itemAddedToOrderTemplateHeaderItemOneText: resources.itemAddedToOrderTemplateHeaderItemOneText,\n itemAddedToOrderTemplateHeaderItemFormatText: resources.itemAddedToOrderTemplateHeaderItemFormatText,\n itemAddedToOrderTemplateHeaderMessageText: resources.itemAddedToOrderTemplateHeaderMessageText,\n freePriceText: resources.freePriceText,\n originalPriceText: resources.originalPriceText,\n currentPriceText: resources.currentPriceText\n };\n }\n\n /**\n * Generate lines added to order template dialog resources.\n * @param resources - The resources.\n * @returns ILinesAddedToOrderTemplateDialogResources.\n */\n private _generateLinesAddedToOrderTemplateDialogResources(resources: ICartResources): ILinesAddedToOrderTemplateDialogResources {\n return {\n viewOrderTemplateButtonText: resources.viewOrderTemplateButtonText,\n continueShoppingButtonText: resources.continueShoppingButtonText,\n linesAddedToOrderTemplateHeaderItemsOneText: resources.linesAddedToOrderTemplateHeaderItemsOneText,\n linesAddedToOrderTemplateHeaderItemsFormatText: resources.linesAddedToOrderTemplateHeaderItemsFormatText,\n linesAddedToOrderTemplateHeaderLinesOneText: resources.linesAddedToOrderTemplateHeaderLinesOneText,\n linesAddedToOrderTemplateHeaderLinesFormatText: resources.linesAddedToOrderTemplateHeaderLinesFormatText,\n linesAddedToOrderTemplateHeaderMessageText: resources.linesAddedToOrderTemplateHeaderMessageText,\n linesAddedToOrderTemplateCustomPriceAlertMessageText: resources.linesAddedToOrderTemplateCustomPriceAlertMessageText\n };\n }\n\n /**\n * Generate duplicate items when adding to order template dialog resources.\n * @param resources - The resources.\n * @returns IDuplicateItemsWhenAddingToOrderTemplateDialogResources.\n */\n private _generateDuplicateItemsWhenAddingToOrderTemplateDialogResources(\n resources: ICartResources\n ): IDuplicateItemsWhenAddingToOrderTemplateDialogResources {\n return {\n duplicatedProductsHeader: resources.duplicatedProductsHeader,\n duplicatedProductsDescription: resources.duplicatedProductsDescription,\n updateQuantityButtonText: resources.updateQuantityButtonText,\n cancelDuplicateItemsButtonText: resources.cancelDuplicateItemsButtonText\n };\n }\n\n /**\n * Generate order template name dialog resources.\n * @param resources - The resources.\n * @returns IOrderTemplateNameDialogResources.\n */\n private _generateOrderTemplateNameDialogResources(resources: ICartResources): IOrderTemplateNameDialogResources {\n return {\n orderTemplateHeaderLabel: resources.createOrderTemplateHeader,\n orderTemplateTitleLabel: resources.orderTemplateTitle,\n orderTemplateNameAriaLabel: resources.orderTemplateNameAriaLabel,\n orderTemplateDescription: resources.createOrderTemplateDescription,\n\n defaultOrderTemplateName: resources.defaultOrderTemplateName,\n\n orderTemplateButtonLabel: resources.createOrderTemplateButtonText,\n orderTemplateCancelButtonLabel: resources.cancelNewOrderTemplateCreationButtonText\n };\n }\n\n /**\n * Gets the cart lines view props.\n * @returns ICartlinesViewProps [].\n */\n private _getCartLines(): ICartlinesViewProps[] | null {\n const {\n data: {\n cart: { result: cart },\n wishlists: { result: wishlists },\n orderTemplates: { result: orderTemplates },\n customerInformation: { result: customerInformation }\n },\n context: {\n request: { channel: { PickupDeliveryModeCode } = { PickupDeliveryModeCode: undefined } }\n },\n config,\n telemetry,\n resources,\n modules\n } = this.props;\n\n const imageSettings = this.getImageSettings(config.imageSettings);\n\n const RetailMultiplePickupFeatureState = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature'\n );\n const multiplePickUpEnabled = RetailMultiplePickupFeatureState?.IsEnabled;\n\n const cartlinesErrors: CartLineValidationResultsByLineId = this.state.cartlinesErrors;\n let storeSelectorId: string = '';\n if (modules && Object.keys(modules).length > 0 && modules.storeSelector && modules.storeSelector.length > 0) {\n storeSelectorId = modules.storeSelector[0].id;\n }\n const channelMultipleCatalogsFeature = 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature';\n const isMultipleCatalogsFeatureEnabled =\n this.props.data.featureState.result?.find((item: FeatureState) => item.Name === channelMultipleCatalogsFeature)?.IsEnabled ||\n false;\n return ArrayExtensions.hasElements(cart?.cart.CartLines)\n ? CartLineItems({\n cartlines: cart!.cart.CartLines,\n storeSelectorModuleId: storeSelectorId,\n cartlinesErrors,\n products: this.props.data.products.result,\n productAvailabilites: this.props.data.productAvailabilites.result,\n productDeliveryOptions: this.props.data.deliveryOptions.result,\n catalogs: this.props.data.catalogs?.result,\n imageSettings,\n isStockCheckEnabled: this.props.context.app.config.enableStockCheck || false,\n maxCartlineQuantity: updateMaxQuantityForCartLineItem(this.props.context.app.config.maxQuantityForCartLineItem),\n shouldIgnoreWarehouse: this.props.context.app.config.warehouseAggregation === 'multiple',\n gridSettings: this.props.context.request.gridSettings!,\n context: this.props.context,\n typeName: this.props.typeName,\n id: this.props.id,\n retailMulitplePickupFeatureState: multiplePickUpEnabled,\n resources: {\n sizeString: resources.productDimensionTypeSize,\n colorString: resources.productDimensionTypeColor,\n configString: resources.productDimensionTypeConfiguration,\n styleString: resources.productDimensionTypeStyle,\n amountString: resources.productDimensionTypeAmount,\n quantityDisplayString: resources.quantityDisplayText,\n inputQuantityAriaLabel: resources.inputQuantityAriaLabel,\n decrementButtonAriaLabel: resources.decrementButtonAriaLabel,\n incrementButtonAriaLabel: resources.incrementButtonAriaLabel,\n discountStringText: resources.discountStringText,\n originalPriceText: resources.originalPriceText,\n currentPriceText: resources.currentPriceText,\n shippingChargesText: resources.shippingCharges,\n salesAgreementPricePrompt: resources.salesAgreementPricePrompt,\n priceEditorResources: {\n ...resources\n }\n },\n telemetry,\n addToWishlistButtonText: resources.addToWishlistButtonText,\n removeFromWishlistButtonText: resources.removeFromWishlistButtonText,\n removeButtonText: resources.removeCartButtonText,\n shipItText: resources.shipInsteadDisplayText,\n pickitUpText: resources.pickItUpDisplayText,\n changeStoreText: resources.changeStoreDisplayText,\n storeSelectorStateManager: this.props.data.storeSelectorStateManager.result,\n outOfStockText: resources.outOfStockErrorMessage,\n outOfRangeOneText: resources.errorMessageOutOfRangeOneLeft,\n outOfRangeFormatText: resources.errorMessageOutOfRangeFormat,\n cartState: this.props.data.cart.result,\n orgUnitLocations: this.props.data.orgUnitLocations.result,\n removeItemClickHandler: this.removeItemFromCartHandler,\n moveToWishlistSuccessHandler: this.moveToWishlistSuccessHandler,\n updateCartLinesQuantitySuccessHandler: this.updateCartlineQuantity,\n locationChangedHandler: this.fulfillmentStoreIdUpdated,\n wishlists,\n defaultWishlistName: resources.defaultWishlistName,\n pickupDeliveryModeCode: PickupDeliveryModeCode,\n includeErrors: config.showOutOfStockErrors,\n showShippingChargesForLineItems: config.showShippingChargesForLineItems,\n telemetryContent: this.telemetryContent,\n isQuantityLimitsFeatureEnabled: this.isQuantityLimitsFeatureEnabled,\n\n addToOrderTemplateDialogResources: this._generateAddToOrderTemplateDialogResources(resources),\n createOrderTemplateDialogResources: this._generateOrderTemplateNameDialogResources(resources),\n itemAddedToOrderTemplateDialogResources: this._generateItemAddedToOrderTemplateDialogResources(resources),\n duplicateItemsWhenAddingToOrderTemplateDialogResources: this._generateDuplicateItemsWhenAddingToOrderTemplateDialogResources(\n resources\n ),\n\n addToOrderTemplateButtonText: resources.addToOrderTemplateButtonText,\n addToOrderTemplateButtonTooltip: resources.addToOrderTemplateButtonTooltip,\n addToOrderTemplateMessage: resources.addToOrderTemplateMessage,\n addItemToOrderTemplateError: resources.addItemToOrderTemplateError,\n orderTemplates,\n customerInformation,\n productAvailability: this.props.data.productAvailabilites,\n isMultipleCatalogFeatureEnabledInHq: isMultipleCatalogsFeatureEnabled || false\n })\n : null;\n }\n\n /**\n * Gets the checkout URL.\n * @param isAuthenticated - Is authenticated flag.\n * @param guestCheckoutUrl - Guest checkout URL.\n * @param signInUrl -The sign in URL.\n * @returns The checkout URL.\n */\n private getCheckoutURL(isAuthenticated: boolean, guestCheckoutUrl: string, signInUrl: string): string {\n if (isAuthenticated) {\n return guestCheckoutUrl;\n }\n\n const isAbsoluteUrl = urlCheck(guestCheckoutUrl);\n let returnURL = guestCheckoutUrl;\n if (MsDyn365.isBrowser && !isAbsoluteUrl) {\n returnURL = `${window.location.origin}${guestCheckoutUrl}`;\n }\n\n return `${signInUrl}${!signInUrl.includes('?') ? '?' : '&'}ru=${returnURL}`;\n }\n\n /**\n * Gets the image settings.\n * @param imageSettings - Image settings.\n * @returns IImageSettings.\n */\n private readonly getImageSettings = (imageSettings: IImageSettings | undefined): IImageSettings => {\n return (\n imageSettings || {\n viewports: {\n xs: { q: 'w=80&h=94&m=6', w: 0, h: 0 },\n sm: { q: 'w=148&h=174&m=6', w: 0, h: 0 },\n lg: { q: 'w=148&h=174&m=6', w: 0, h: 0 }\n },\n lazyload: true\n }\n );\n };\n\n /**\n * Remove item from cart handler.\n * @param cartlineToRemove - The cart line to remove.\n */\n private readonly removeItemFromCartHandler = (cartlineToRemove: CartLine) => {\n if (this.props.data.cart.result) {\n const input = {\n cartLineIds: [cartlineToRemove.LineId!.toString()]\n };\n this.props.data.cart.result\n .removeCartLines(input)\n .then(() => {\n this.validateCart().catch(error => {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to validate Cart');\n });\n })\n .catch(error => {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to Remove Cart Line');\n });\n }\n };\n\n /**\n * Move to wish list handler.\n * @param result - The wish list action success result.\n * @param cartline - The cart line.\n */\n private readonly moveToWishlistSuccessHandler = (result: IWishlistActionSuccessResult, cartline?: CartLine) => {\n if (result.status === 'ADDED' && cartline) {\n this.removeItemFromCartHandler(cartline);\n }\n };\n\n /**\n * Updates the cart line quantity.\n * @param cartlineToUpdate - The cart line.\n * @param quantity - The quantity.\n * @param lineIndex - The line index.\n * @returns True if the cart line was updated, false otherwise.\n */\n private readonly updateCartlineQuantity = (cartlineToUpdate: CartLine, quantity: number, lineIndex?: number): boolean => {\n cartLineQuantityUpdatedAsync(\n this.isQuantityLimitsFeatureEnabled,\n this.props.data.cart.result,\n this.props.telemetry,\n this.props.data.products.result,\n cartlineToUpdate,\n quantity\n )\n .then((cartActionResult: ICartActionResult | undefined): boolean => {\n if (cartActionResult?.status === 'SUCCESS') {\n this.validateCart().catch(error => {\n this.props.telemetry.warning((error as Error).message);\n this.props.telemetry.debug('Unable to validate Cart');\n });\n this.setState({\n cartlinesErrors: {}\n });\n return true;\n }\n\n if (!ObjectExtensions.isNullOrUndefined(cartActionResult)) {\n // Show update line error message.\n const lineUpdateFailure: LineValidationResult = {\n LineId: ObjectExtensions.isNullOrUndefined(cartlineToUpdate.LineId) ? '0' : cartlineToUpdate.LineId,\n ValidationFailures: [\n {\n ErrorContext: ArrayExtensions.hasElements(cartActionResult.validationResults)\n ? cartActionResult.validationResults[0].ErrorContext\n : '',\n LocalizedMessage: cartActionResult.errorDetails?.LocalizedMessage\n }\n ]\n };\n\n this.setState({\n cartlinesErrors: { ValidationResultsPairs: [lineUpdateFailure] }\n });\n }\n\n return false;\n })\n .catch(() => {\n return false;\n });\n\n return false;\n };\n\n /**\n * Fulfillment store id is updated.\n */\n private readonly fulfillmentStoreIdUpdated = () => {\n if (this.isQuantityLimitsFeatureEnabled) {\n // Refresh products (in props.data) based on latest cart.\n getActiveCartProductsAction(new ActiveCartProductsInput(), this.props.context.actionContext)\n .then(async () => this.validateCart())\n .catch((error: Error) => {\n this.props.telemetry.warning(error.message);\n this.props.telemetry.debug('Unable to validate Cart');\n });\n }\n };\n\n /**\n * Validates cart.\n * @returns Void promise.\n */\n private async validateCart(): Promise {\n if (!this.isQuantityLimitsFeatureEnabled) {\n this.setState({ cartlinesErrors: {}, isCartValid: true });\n return AsyncResult.resolve();\n }\n\n const {\n data: { cart },\n telemetry,\n context\n } = this.props;\n\n const validationResults: CartLineValidationResultsByLineId | undefined = await validateCartAsync(cart, telemetry, context, true);\n\n if (validationResults) {\n const isValid = !ArrayExtensions.hasElements(validationResults.ValidationResultsPairs);\n this.setState({\n cartlinesErrors: validationResults,\n isCartValid: isValid\n });\n } else {\n this.setState({ cartlinesErrors: {}, isCartValid: true });\n }\n\n return AsyncResult.resolve();\n }\n\n /**\n * Get order quantity limit feature flag.\n * @returns True if flag is enabled, false otherwise.\n */\n private async getOrderQuantityLimitsFeatureFlag(): Promise {\n const featureStatuses = await this.props.data.featureState;\n\n try {\n const isQuantityLimitsFeatureEnabledInHq =\n featureStatuses.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailDefaultOrderQuantityLimitsFeature'\n )?.IsEnabled || false;\n if (!isQuantityLimitsFeatureEnabledInHq) {\n return false;\n }\n } catch (error) {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to get feature states');\n return false;\n }\n\n const useSiteBuilderSettings = featureStatuses?.find(\n featureState => featureState.Name === 'RevertToSiteBuilderOrderQuantityLimitsSettings'\n )?.IsEnabled;\n\n if (useSiteBuilderSettings) {\n const defaultOrderQuantityLimitsFeatureConfig = this.props.context?.request?.app?.platform?.enableDefaultOrderQuantityLimits;\n if (defaultOrderQuantityLimitsFeatureConfig === 'none') {\n return false;\n }\n\n if (defaultOrderQuantityLimitsFeatureConfig === 'all') {\n return true;\n }\n\n try {\n const customerInfo = await this.props.data.customerInformation;\n return (\n !!customerInfo &&\n ((defaultOrderQuantityLimitsFeatureConfig === 'b2b' && customerInfo.IsB2b) ||\n (defaultOrderQuantityLimitsFeatureConfig === 'b2c' && !customerInfo.IsB2b))\n );\n } catch (error) {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to get customer info');\n return false;\n }\n } else {\n const cartConfiguration = await this.props.data.cartConfiguration;\n return !(cartConfiguration?.IgnoreOrderSettings ?? false);\n }\n }\n\n private async _isChannelLimitsFeatureEnabled(): Promise {\n const featureStatuses = await this.props.data.featureState;\n\n const isChannelLimitsFeatureEnabledInHq = featureStatuses?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.EcommerceQuantityLimitConfigurationsFeature'\n )?.IsEnabled;\n\n return isChannelLimitsFeatureEnabledInHq ?? false;\n }\n\n /**\n * Gets the cart lines group.\n * @returns ICartlinesViewProps [][].\n */\n private getCartLinesGroup(): ICartlinesViewProps[][] | null {\n const {\n data: {\n cart: { result: cart },\n wishlists: { result: wishlists },\n orderTemplates: { result: orderTemplates },\n customerInformation: { result: customerInformation }\n },\n context: {\n request: { channel: { PickupDeliveryModeCode } = { PickupDeliveryModeCode: undefined } }\n },\n config,\n telemetry,\n resources,\n modules\n } = this.props;\n\n const imageSettings = this.getImageSettings(config.imageSettings);\n const cartlinesErrors: CartLineValidationResultsByLineId = this.state.cartlinesErrors;\n let storeSelectorId: string = '';\n if (modules && Object.keys(modules).length > 0 && modules.storeSelector && modules.storeSelector.length > 0) {\n storeSelectorId = modules.storeSelector[0].id;\n }\n\n const RetailMultiplePickupFeatureState = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature'\n );\n const multiplePickUpEnabled = RetailMultiplePickupFeatureState?.IsEnabled;\n const { featureState } = this.props.data;\n const channelMultipleCatalogsFeature = 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature';\n const isMultipleCatalogsFeatureEnabled =\n featureState.result?.find((item: FeatureState) => item.Name === channelMultipleCatalogsFeature)?.IsEnabled || false;\n return this.props.data.products &&\n (cart?.hasInvoiceLine || this.props.data.products.result) &&\n cart &&\n cart.cart.CartLines &&\n cart.cart.CartLines.length > 0 &&\n this.props.data.channelDeliveryOptionConfig?.result\n ? CartLineGroupItems({\n cartlines: cart.cart.CartLines,\n storeSelectorModuleId: storeSelectorId,\n cartlinesErrors,\n products: this.props.data.products.result,\n productAvailabilites: this.props.data.productAvailabilites.result,\n productDeliveryOptions: this.props.data.deliveryOptions.result,\n catalogs: this.props.data.catalogs?.result,\n imageSettings,\n isStockCheckEnabled: this.props.context.app.config.enableStockCheck || false,\n hasInvoiceLine: cart?.hasInvoiceLine || false,\n maxCartlineQuantity: updateMaxQuantityForCartLineItem(this.props.context.app.config.maxQuantityForCartLineItem),\n gridSettings: this.props.context.request.gridSettings!,\n context: this.props.context,\n retailMulitplePickupFeatureState: multiplePickUpEnabled,\n typeName: this.props.typeName,\n id: this.props.id,\n resources: {\n sizeString: resources.productDimensionTypeSize,\n colorString: resources.productDimensionTypeColor,\n configString: resources.productDimensionTypeConfiguration,\n styleString: resources.productDimensionTypeStyle,\n amountString: resources.productDimensionTypeAmount,\n quantityDisplayString: resources.quantityDisplayText,\n inputQuantityAriaLabel: resources.inputQuantityAriaLabel,\n decrementButtonAriaLabel: resources.decrementButtonAriaLabel,\n incrementButtonAriaLabel: resources.incrementButtonAriaLabel,\n discountStringText: resources.discountStringText,\n originalPriceText: resources.originalPriceText,\n currentPriceText: resources.currentPriceText,\n shippingChargesText: resources.shippingCharges,\n salesAgreementPricePrompt: resources.salesAgreementPricePrompt,\n priceEditorResources: {\n ...resources\n }\n },\n telemetry,\n addToWishlistButtonText: resources.addToWishlistButtonText,\n removeFromWishlistButtonText: resources.removeFromWishlistButtonText,\n removeButtonText: resources.removeCartButtonText,\n shipItText: resources.shipInsteadDisplayText,\n pickitUpText: resources.pickItUpDisplayText,\n changeStoreText: resources.changeStoreDisplayText,\n storeSelectorStateManager: this.props.data.storeSelectorStateManager.result,\n outOfStockText: resources.outOfStockErrorMessage,\n outOfRangeOneText: resources.errorMessageOutOfRangeOneLeft,\n outOfRangeFormatText: resources.errorMessageOutOfRangeFormat,\n cartState: this.props.data.cart.result,\n orgUnitLocations: this.props.data.orgUnitLocations.result,\n removeItemClickHandler: this.removeItemFromCartHandler,\n moveToWishlistSuccessHandler: this.moveToWishlistSuccessHandler,\n updateCartLinesQuantitySuccessHandler: this.updateCartlineQuantity,\n locationChangedHandler: this.fulfillmentStoreIdUpdated,\n wishlists,\n defaultWishlistName: resources.defaultWishlistName,\n pickupDeliveryModeCode: PickupDeliveryModeCode,\n includeErrors: config.showOutOfStockErrors,\n showShippingChargesForLineItems: config.showShippingChargesForLineItems,\n telemetryContent: this.telemetryContent,\n isQuantityLimitsFeatureEnabled: this.isQuantityLimitsFeatureEnabled,\n\n addToOrderTemplateDialogResources: this._generateAddToOrderTemplateDialogResources(resources),\n createOrderTemplateDialogResources: this._generateOrderTemplateNameDialogResources(resources),\n itemAddedToOrderTemplateDialogResources: this._generateItemAddedToOrderTemplateDialogResources(resources),\n duplicateItemsWhenAddingToOrderTemplateDialogResources: this._generateDuplicateItemsWhenAddingToOrderTemplateDialogResources(\n resources\n ),\n\n addToOrderTemplateButtonText: resources.addToOrderTemplateButtonText,\n addToOrderTemplateButtonTooltip: resources.addToOrderTemplateButtonTooltip,\n addToOrderTemplateMessage: resources.addToOrderTemplateMessage,\n addItemToOrderTemplateError: resources.addItemToOrderTemplateError,\n orderTemplates,\n customerInformation,\n channelDeliveryOptionConfig: this.props.data.channelDeliveryOptionConfig?.result,\n shouldIgnoreWarehouse: this.props.context.app.config.warehouseAggregation === 'multiple',\n productAvailability: this.props.data.productAvailabilites,\n productPickUpOptions: this.state.productPickUpOptions || this.props.data.cartLinesPickUpOptions?.result,\n isMultipleCatalogFeatureEnabledInHq: isMultipleCatalogsFeatureEnabled || false\n })\n : null;\n }\n}\n\nexport default Cart;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartPromotionLine } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { INodeProps, Modal, ModalBody, ModalFooter, ModalHeader } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nexport interface ICartLineItemPromotion {\n id: string;\n showPromotionPopup: boolean;\n promotions: CartPromotionLine[] | undefined;\n resources: ICartLineItemPromotionResourceString;\n onSeeAllClick(event: React.MouseEvent): void;\n onCloseButtonClick(): void;\n}\n\nexport interface ICartLineItemViewProps {\n promotionMessageWrapper: INodeProps;\n promotionMessage: React.ReactNode;\n promotionSeeAllLink: React.ReactElement;\n promotionDialog: React.ReactNode;\n}\n\nexport interface ICartLineItemPromotionResourceString {\n promotionLinkText: string;\n promotionStringHeading: string;\n promotionPopupHeading: string;\n promotionCloseButtonAriaLabel: string;\n}\n\nexport const cartPromotions = (props: ICartLineItemPromotion): ICartLineItemViewProps | undefined => {\n const {\n id,\n showPromotionPopup,\n promotions,\n resources: { promotionLinkText, promotionPopupHeading },\n onCloseButtonClick,\n onSeeAllClick\n } = props;\n\n if (!ArrayExtensions.hasElements(promotions)) {\n return;\n }\n\n const titleId = `${id}_title`;\n const className = 'msc-cart__promotion';\n return {\n promotionMessageWrapper: {\n className: 'msc-cart__promotion'\n },\n promotionMessage: (\n <>\n \n {props.resources.promotionStringHeading}\n \n ),\n promotionSeeAllLink: (\n \n {` `}\n {promotionLinkText} {` `}\n \n ),\n promotionDialog: (\n \n \n \n {promotionPopupHeading}\n
\n \n \n \n {promotions.map(_promotion => {\n return (\n - \n {_promotion.Promotion?.OfferName} {` `}\n
\n );\n })}\n
\n \n \n \n )\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductsDimensionsAvailabilities } from '@msdyn365-commerce/commerce-entities';\nimport { IPriceComponentResources, ProductComponent } from '@msdyn365-commerce/components';\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { getCatalogId, getUrlSync, ICoreContext } from '@msdyn365-commerce/core';\nimport { ProductPrice, ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport {\n ArrayExtensions,\n DimensionAvailabilitiesForProductSearchResultInput,\n DimensionTypes,\n DimensionSwatchDisplayTypes,\n getDimensionAvailabilitiesForProductSearchResultAction,\n getPriceForProductSearchResult,\n IDimensionsApp,\n ObjectExtensions,\n PriceForProductSearchResultInput,\n ProductPriceForSelectedProductsInput,\n validateCatalogId,\n getProductPriceForSelectedProducts\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n Button,\n getTelemetryObject,\n IComponentNodeProps,\n IModuleProps,\n INodeProps,\n ISingleSlideCarouselProps,\n ITelemetryContent,\n NodeTag,\n SingleSlideCarousel\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { IProductCollectionData } from './product-collection.data';\nimport { IProductCollectionProps, layout } from './product-collection.props.autogenerated';\n\nexport interface IProductCollectionViewProps extends IProductCollectionProps {\n heading?: React.ReactNode;\n ProductCollectionContainer: IModuleProps;\n SingleSlideCarouselComponentProps: INodeProps;\n GridComponentProps: INodeProps;\n products: IProductComponentViewProps[];\n isCarousel: boolean;\n productPrices?: ProductPrice[];\n seeAllButton?: React.ReactNode;\n}\n\nexport interface IProductComponentViewProps {\n ProductContainer: INodeProps;\n productComponent: React.ReactNode;\n}\nexport interface IProductComponentState {\n products: ProductSearchResult[];\n productPrices: ProductPrice[];\n productsDimensionAvailabilities?: IProductsDimensionsAvailabilities[][];\n}\n\n/**\n * ProductCollection component.\n */\nclass ProductCollection extends React.PureComponent, IProductComponentState> {\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly productPrices: ProductPrice[];\n\n constructor(props: IProductCollectionProps) {\n super(props);\n this.productPrices = [];\n this.state = {\n products: this.props.config.productCollection.products || [],\n productPrices: this.productPrices || []\n };\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n }\n\n public async componentDidMount(): Promise {\n if (this.props.config.enableAffiliationBasedPricing && this.props.context.actionContext.requestContext.user.isAuthenticated) {\n await this._getActivePrice();\n }\n }\n\n public render(): JSX.Element | null {\n const { heading, className, shouldDisplaySeeAllButton } = this.props.config;\n const { resources } = this.props;\n const recommendation = this.props.config.productCollection.recommendationListId;\n const discountIds = this.props.config.productCollection.discountIds;\n\n // Initialize state in case if the products were not found during initial module render\n // eslint-disable-next-line @typescript-eslint/no-floating-promises -- Initialize data if not there.\n this.initProductState(this.props.config.productCollection);\n\n const products = this.state.products;\n const productPrices = this.state.productPrices;\n\n const isCarousel = this.props.config.layout === layout.carousel;\n const headingLabel = heading ? heading.text : '';\n const headingComponent = heading && (\n \n );\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- product check for safety.\n const updatedProducts = products?.map((item: ProductSearchResult, index: number) => {\n const getProductData = this._getProduct(\n item,\n index,\n productPrices ? productPrices.find(p => p.ProductId === item.RecordId) : undefined\n );\n return !ObjectExtensions.isNullOrUndefined(getProductData) ? getProductData : undefined;\n });\n\n const productCollectionViewProps = {\n ...this.props,\n heading: headingComponent,\n SingleSlideCarouselComponentProps: {\n tag: SingleSlideCarousel,\n className: '',\n flipperPrevLabel: `${headingLabel} ${resources.flipperPrevious}`,\n flipperNextLabel: `${headingLabel} ${resources.flipperNext}`,\n parentId: this.props.id,\n telemetryContent: this.telemetryContent\n } as IComponentNodeProps,\n ProductCollectionContainer: {\n moduleProps: this.props,\n className: classnames('ms-product-collection', className)\n },\n GridComponentProps: {\n tag: 'ul' as NodeTag,\n className: 'ms-product-collection__items'\n },\n isCarousel,\n\n products:\n ArrayExtensions.hasElements(updatedProducts) &&\n updatedProducts.filter(item => {\n return item !== undefined;\n }),\n productPrices: this.productPrices,\n seeAllButton:\n (recommendation || discountIds) &&\n shouldDisplaySeeAllButton &&\n (ArrayExtensions.hasElements(updatedProducts) || this.props.config.productCollection.listType === 'promotional')\n ? this._getSeeAllButton(headingLabel, recommendation, discountIds)\n : undefined,\n resources: resources\n };\n return this.props.renderView(productCollectionViewProps) as React.ReactElement;\n }\n\n public handleHeadingChange = (event: Msdyn365.ContentEditableEvent) => (this.props.config.heading!.text = event.target.value);\n\n /**\n * Get products dimension availabilities.\n * @param products - Products.\n * @returns Promise.\n */\n private readonly _getProductsDimensionsAvailabilities = async (products: ProductSearchResult[]): Promise => {\n const context = this.props.context as ICoreContext;\n const dimensionsToDisplayOnProductCard = context.app.config.dimensionsInProductCard;\n const dimensionsToDisplayAsSwatch = context.app.config.dimensionsAsSwatchType;\n const validProducts = ArrayExtensions.validValues(products);\n if (\n ArrayExtensions.hasElements(validProducts) &&\n ArrayExtensions.hasElements(dimensionsToDisplayOnProductCard) &&\n !dimensionsToDisplayOnProductCard.includes(DimensionTypes.none) &&\n ArrayExtensions.hasElements(dimensionsToDisplayAsSwatch) &&\n !dimensionsToDisplayAsSwatch.includes(DimensionTypes.none)\n ) {\n const productsDimensionAvailabilities = await getDimensionAvailabilitiesForProductSearchResultAction(\n new DimensionAvailabilitiesForProductSearchResultInput(\n validProducts,\n this.props.context as ICoreContext,\n DimensionSwatchDisplayTypes.productCard\n ),\n this.props.context.actionContext\n );\n\n if (ArrayExtensions.hasElements(productsDimensionAvailabilities)) {\n this.setState({ productsDimensionAvailabilities });\n }\n }\n };\n\n /**\n * Helper method to initialize products state.\n * @param productCollection - List of products.\n */\n private readonly initProductState = async (productCollection: Msdyn365.IProductList) => {\n let products = this.state.products;\n let productPrices = this.state.productPrices;\n const productCollectionProducts = productCollection.products;\n if (!ArrayExtensions.hasElements(products) && ArrayExtensions.hasElements(productCollectionProducts)) {\n products = productCollectionProducts;\n this.setState({ products });\n } else if (\n ArrayExtensions.hasElements(products) &&\n ArrayExtensions.hasElements(productCollectionProducts) &&\n !ArrayExtensions.equals(products, productCollectionProducts)\n ) {\n products = productCollectionProducts;\n this.setState({ products });\n } else if (productCollectionProducts === undefined && ArrayExtensions.hasElements(this.state.products)) {\n products = [];\n this.setState({ products: products });\n }\n\n if (Msdyn365.msdyn365Commerce.isBrowser && !ArrayExtensions.hasElements(this.state.productsDimensionAvailabilities)) {\n await this._getProductsDimensionsAvailabilities(products);\n }\n\n if (this.props.config.productCollection.listType === 'promotional') {\n productPrices = await getProductPriceForSelectedProducts(\n new ProductPriceForSelectedProductsInput(products.filter(p => !p.IsMasterProduct).map(p => p.RecordId)),\n this.props.context.actionContext\n );\n\n this.setState({ productPrices: productPrices });\n }\n };\n\n private readonly _getProduct = (\n product: ProductSearchResult,\n index: number,\n productPrice?: ProductPrice\n ): IProductComponentViewProps | null => {\n if (!product || !product.Name) {\n this.props.telemetry.trace('[product-collection] Product or product name is null');\n return null;\n }\n const telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n const { imageSettings, allowBackNavigation } = this.props.config;\n const resources = this.props.resources;\n const breaCrumbType = this.props.context.app.config.breadcrumbType;\n const allowBack = allowBackNavigation && (breaCrumbType === 'back' || breaCrumbType === 'categoryAndBack');\n const quickviewSlot =\n this.props.slots && this.props.slots.quickview && this.props.slots.quickview.length > 0 ? this.props.slots.quickview[0] : null;\n const productComparisonButtonSlot = ArrayExtensions.hasElements(this.props.slots.productComparisonButton)\n ? this.props.slots.productComparisonButton[0]\n : null;\n\n const reviewCount = 1;\n const reviewTotalRatings = Number(product.TotalRatings);\n const reviewCountAriaLabelValue =\n reviewTotalRatings > reviewCount ? resources.ratingCountAriaLabel : resources.ratingCountAriaLabelSingleUser;\n const isPriceMinMaxEnabled = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailSearchPriceRangeFeature'\n );\n const priceResources: IPriceComponentResources = {\n priceRangeSeparator: resources.priceRangeSeparator\n };\n return {\n ProductContainer: {\n tag: 'li' as NodeTag,\n className: 'ms-product-collection__item',\n role: 'listitem',\n key: index\n },\n productComponent: (\n \n ArrayExtensions.hasElements(dimensionAvailability) &&\n dimensionAvailability[0].masterProductId === (product.MasterProductId ?? product.RecordId)\n )}\n />\n )\n };\n };\n\n /**\n * Get the active price for products.\n */\n private readonly _getActivePrice = async (): Promise => {\n const productsList = this.state.products;\n const products = await getPriceForProductSearchResult(\n new PriceForProductSearchResultInput(productsList),\n this.props.context.actionContext\n );\n if (Msdyn365.msdyn365Commerce.isBrowser) {\n await this._getProductsDimensionsAvailabilities(products);\n }\n\n this.setState({ products });\n };\n\n /**\n * Get the see all button.\n * @param headingLabel - Heading label.\n * @param recommendation - Recommendation.\n * @param discountIds - Discount Ids.\n * @returns IProductComponentSeeAllViewProps - Product component see all view props.\n */\n private readonly _getSeeAllButton = (headingLabel: string, recommendation?: string, discountIds?: string[]): React.ReactNode => {\n if (!Msdyn365.msdyn365Commerce.isBrowser) {\n return null;\n }\n\n if (!recommendation && !discountIds) {\n return null;\n }\n\n const catalogId = getCatalogId(this.props.context.request);\n validateCatalogId(catalogId);\n const searchPageLink = getUrlSync('search', this.props.context.actionContext);\n if (!searchPageLink) {\n return null;\n }\n\n const url = new URL(searchPageLink, window.location.href);\n\n if (discountIds) {\n // see all button for promotion page\n url.searchParams.set('discountIds', discountIds.toString());\n url.searchParams.set('title', headingLabel);\n url.searchParams.set('catalogid', `${catalogId}`);\n } else if (recommendation) {\n // See all button for recommendation\n url.searchParams.set('recommendation', recommendation);\n url.searchParams.set('title', headingLabel);\n url.searchParams.set('catalogid', `${catalogId}`);\n }\n\n return (\n \n {this.props.resources.seeAllButtonText}\n \n );\n };\n}\n\nexport default ProductCollection;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Button, Collapse, ICollapseProps } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { IQuickOrderDrawerProps } from './quick-order-drawer-props';\n\nexport interface IQuickOrderDrawerState {\n isOpen: boolean;\n}\n\nexport type GlyphPlacement = 'start' | 'end';\n\n/**\n * Quick Order Drawer - This is a full width uncontrolled collapse where the button glyph changes\n * when the drawer is open and closed.\n */\n\nexport default class QuickOrderDrawer extends React.Component {\n public state: IQuickOrderDrawerState;\n\n private readonly drawerOpenGlyph: string;\n\n private readonly drawerCloseGlyph: string;\n\n private readonly drawerGlyphClass: string;\n\n private isManuallyToggled: boolean;\n\n constructor(props: IQuickOrderDrawerProps) {\n super(props);\n this._toggle = this._toggle.bind(this);\n this.isManuallyToggled = false;\n this.state = { isOpen: (props.collapseProps && props.collapseProps.isOpen) || false };\n this.drawerGlyphClass = classnames('drawer__glyph', this.props.toggleGlyphClassName ? this.props.toggleGlyphClassName : '');\n\n if (this.props.animateGlyph) {\n this.drawerOpenGlyph = classnames(\n this.drawerGlyphClass,\n this.props.openGlyph ? this.props.openGlyph : this.props.closeGlyph ? this.props.closeGlyph : ''\n );\n this.drawerCloseGlyph = this.drawerOpenGlyph;\n } else {\n this.drawerOpenGlyph = classnames(this.drawerGlyphClass, this.props.openGlyph ? this.props.openGlyph : '');\n this.drawerCloseGlyph = classnames(this.drawerGlyphClass, this.props.closeGlyph ? this.props.closeGlyph : '');\n }\n }\n\n public shouldComponentUpdate(nextProps: IQuickOrderDrawerProps, nextState: IQuickOrderDrawerState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element {\n const collapseProps = { ...this.props.collapseProps } as ICollapseProps;\n\n // If the drawer is manually toggled by pressing the button, then we use the internal state\n if (collapseProps.isOpen === undefined || this.isManuallyToggled) {\n collapseProps.isOpen = this.state.isOpen;\n } else {\n // eslint-disable-next-line react/no-direct-mutation-state\n this.state.isOpen = collapseProps.isOpen;\n }\n collapseProps.children = this.props.children;\n const drawerClass = classnames('drawer', this.props.className ? this.props.className : '');\n this.isManuallyToggled = false;\n return (\n \n \n {this._generateDrawerButtonInnerMarkup(collapseProps.isOpen)}\n \n \n
\n );\n }\n\n private _generateDrawerButtonInnerMarkup(collapseState: boolean): JSX.Element {\n const drawerButtonTextClass = classnames(\n 'drawer__buttontext',\n this.props.toggleButtonClassName ? this.props.toggleButtonClassName : ''\n );\n return (\n <>\n {this.props.moduleHeadingText}
\n \n {this.props.moduleDescriptionText}\n \n {this._generateGlyphMarkup('drawer__glyph__end', collapseState)}\n \n );\n }\n\n private _generateGlyphMarkup(location: string, collapseState: boolean): JSX.Element {\n let glyphClass = collapseState ? this.drawerOpenGlyph : this.drawerCloseGlyph;\n glyphClass = `${glyphClass} ${location}`;\n return ;\n }\n\n private _toggle(e: React.MouseEvent | React.KeyboardEvent): void {\n e.preventDefault();\n this.setState({ isOpen: !this.state.isOpen });\n this.isManuallyToggled = true;\n if (this.props.onToggle) {\n this.props.onToggle(this.state);\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 { Alert, Button } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IQuickOrderState } from '../quick-order';\n\nexport interface IQuickOrderFormProps {\n disableAddtoCart: boolean | undefined;\n productTextInput: React.RefObject;\n quantityTextInput: React.RefObject;\n maxChars: number;\n maxQuantity?: number;\n ariaLabelQuantity: string;\n ariaLabelProduct: string;\n ariaLabelAddtoCart: string;\n addQuantityPlaceholderText: string;\n quickOrderState: IQuickOrderState;\n handleInputChange(query: string): void;\n handleQuantityChange(query: string): void;\n handleAddToCartClick(): Promise;\n}\n\nexport interface IQuickOrderFormViewProps {\n product: React.ReactNode;\n quantity: React.ReactNode;\n addToCartBtn: React.ReactNode;\n userMessage?: React.ReactNode;\n}\n\n/**\n * On Input Change functionality.\n * @param handleInputChange -Input change function.\n * @returns Input change value.\n */\nconst onInputChangeFunction = (handleInputChange: (query: string) => void) => (event: React.ChangeEvent) => {\n handleInputChange(event.target.value || '');\n};\n\n/**\n * On Quantity Change functionality.\n * @param handleQuantityChange -Quantity change function.\n * @returns Quantity change value.\n */\nconst onQuantityChangeFunction = (handleQuantityChange: (query: string) => void) => (event: React.ChangeEvent) => {\n handleQuantityChange(event.target.value || '');\n};\n\nexport const QuickOrderFormComponent = (props: IQuickOrderFormProps): IQuickOrderFormViewProps => {\n const {\n productTextInput,\n quantityTextInput,\n quickOrderState,\n maxChars,\n maxQuantity,\n disableAddtoCart,\n ariaLabelQuantity,\n ariaLabelProduct,\n ariaLabelAddtoCart,\n addQuantityPlaceholderText,\n handleQuantityChange,\n handleInputChange,\n handleAddToCartClick\n } = props;\n\n const onInputChange = onInputChangeFunction(handleInputChange);\n\n const onQuantityInputChange = onQuantityChangeFunction(handleQuantityChange);\n\n const productNode = (\n \n
\n {ariaLabelProduct}\n
\n \n \n );\n\n const quantityNode = (\n \n
\n {ariaLabelQuantity}\n
\n \n \n );\n\n const addtoCartNode = (\n \n \n {ariaLabelAddtoCart}\n \n
\n );\n\n const userMessageNode =\n quickOrderState && quickOrderState.stateMessage ? (\n \n \n {quickOrderState.stateMessage.messageText}\n \n ) : (\n undefined\n );\n\n return {\n product: productNode,\n addToCartBtn: addtoCartNode,\n quantity: quantityNode,\n userMessage: userMessageNode\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartLine, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { observable } from 'mobx';\n\n/**\n * Represents a product for quick order.\n */\nexport class QuickOrderProduct {\n @observable\n public isSelected: boolean;\n\n public readonly cartLine: CartLine;\n\n public readonly simpleProduct: SimpleProduct;\n\n public constructor(cartLine: CartLine, simpleProduct: SimpleProduct) {\n this.cartLine = cartLine;\n this.simpleProduct = simpleProduct;\n this.isSelected = false;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IComponent, IComponentProps, ICoreContext } from '@msdyn365-commerce/core';\nimport classnames from 'classnames';\nimport React from 'react';\n\n/**\n * Interface for quick order table header resources.\n */\nexport interface IQuickOrderTableHeaderResources {\n quickOrderProductNumberText: string;\n quickOrderProductText: string;\n quickOrderUnitPriceText: string;\n quickOrderUnitOfMeasureText: string;\n quickOrderQuantityText: string;\n quickOrderTotalText: string;\n quickOrderActionsText: string;\n}\n\n/**\n * Interface for quick order table props.\n */\nexport interface IQuickOrderTableHeaderProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n\n isMobile: boolean;\n resources: IQuickOrderTableHeaderResources;\n}\n\n/**\n * Interface for quick order table header component.\n */\nexport interface IQuickOrderTableHeaderComponent extends IComponent {}\n\n/**\n * Get the quick order header cells for desktop.\n * @param props -- The quick order table header props.\n * @returns The list of cells for quick order header component in desktop version.\n */\nconst QuickOrderDesktopHeaderCellsComponent: React.FC = (props: IQuickOrderTableHeaderProps) => {\n const { resources } = props;\n const columnWithNumberClassName = `${props.className}__row__column-with-number`;\n return (\n <>\n \n \n | \n {resources.quickOrderProductNumberText} | \n {resources.quickOrderProductText} | \n {resources.quickOrderUnitPriceText} | \n {resources.quickOrderUnitOfMeasureText} | \n {resources.quickOrderQuantityText} | \n {resources.quickOrderTotalText} | \n {resources.quickOrderActionsText} | \n \n );\n};\n\n/**\n * Get the quick order header cells for mobile.\n * @param props -- The quick order table header props.\n * @returns The quick order header component in desktop version.\n */\nconst QuickOrderMobileHeaderCellsComponent: React.FC = (props: IQuickOrderTableHeaderProps) => {\n const { resources } = props;\n return (\n <>\n | \n {resources.quickOrderProductNumberText} | \n | \n \n );\n};\n\n/**\n * Quick order table header component.\n * @param props - Configuration of the component.\n * @returns React node with the header.\n */\nexport const QuickOrderTableHeaderComponent: React.FC = (props: IQuickOrderTableHeaderProps) => {\n const rowClassName = `${props.className}__row`;\n\n let headerCells: JSX.Element;\n if (props.isMobile) {\n headerCells = ;\n } else {\n headerCells = ;\n }\n\n return (\n \n {headerCells}
\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IComponentProps, ICoreContext, IImageSettings, Image } from '@msdyn365-commerce/core';\nimport { CartLine, format, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { getFallbackImageUrl, getProductPageUrlSync, ObjectExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, IncrementalQuantity } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\n/**\n * Data required to render each quick order row.\n */\nexport interface IQuickOrderTableRowData {\n cartLine: CartLine;\n product: SimpleProduct;\n}\n\n/**\n * Resources for quick order table rows.\n */\nexport interface IQuickOrderTableRowResources {\n quickOrderQuantityMobileText: string;\n quickOrderProductDimensionsSeparator: string;\n quickOrderViewDetailsButtonText: string;\n quickOrderViewDetailsButtonAriaLabel: string;\n quickOrderRemoveItemButtonAriaLabel: string;\n quickOrderInputQuantityAriaLabel: string;\n quickOrderDecrementButtonAriaLabel: string;\n quickOrderIncrementButtonAriaLabel: string;\n}\n\n/**\n * Interface for quick order table props.\n */\nexport interface IQuickOrderTableRowProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n\n imageSettings?: IImageSettings;\n isMobile: boolean;\n resources: IQuickOrderTableRowResources;\n}\n\n/**\n * The default image settings for quick order table row.\n */\nconst defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=80&h=80&m=6', w: 0, h: 0 },\n lg: { q: 'w=147&h=147&m=6', w: 0, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n};\n\n/**\n * Renders product image for quick order row.\n * @param props - Quick order table row props.\n * @returns React element.\n */\nconst QuickOrderTableRowProductImageComponent: React.FC = (props: IQuickOrderTableRowProps) => {\n const fallbackImageUrl = getFallbackImageUrl(\n props.data.product.ItemId,\n props.context.actionContext.requestContext.apiSettings,\n props.context.request.app?.config?.OmniChannelMedia\n );\n\n const containerClassName = `${props.className}__product-image-container`;\n\n return (\n \n \n
\n );\n};\n\n/**\n * Renders actions popup for the mobile view.\n * @param props - Configuration for popup.\n * @returns A react node with actions..\n */\nconst QuickOrderExtraActionsPopupComponent: React.FC = (props: IQuickOrderTableRowProps): JSX.Element | null => {\n const product: SimpleProduct = props.data.product;\n\n let productUrl = '';\n if (!StringExtensions.isNullOrWhitespace(product.Name) && !ObjectExtensions.isNullOrUndefined(product.RecordId)) {\n productUrl = getProductPageUrlSync(product.Name!, product.RecordId, props.context.actionContext);\n }\n\n if (StringExtensions.isNullOrWhitespace(productUrl)) {\n return null;\n }\n\n const className = `${props.className}__extra-actions-cell`;\n\n return (\n \n \n
\n );\n};\n\n/**\n * Renders quick order table rows for desktop view.\n * @param props - Configuration for the rows.\n * @returns A react node with a list of quick order rows for desktop view.\n */\nexport const QuickOrderDesktopTableRowCellComponent: React.FC = (props: IQuickOrderTableRowProps) => {\n const product: SimpleProduct = props.data.product;\n const cartLine: CartLine = props.data.cartLine;\n const columnWithNumberClassName = `${props.className}__column-with-number`;\n\n let productUrl = '';\n if (!StringExtensions.isNullOrWhitespace(product.Name) && !ObjectExtensions.isNullOrUndefined(product.RecordId)) {\n productUrl = getProductPageUrlSync(product.Name!, product.RecordId, props.context.actionContext);\n }\n\n return (\n <>\n \n \n | \n {product.ItemId} | \n \n \n \n {product.Name}\n \n \n {product.Dimensions?.map(dimension => dimension.DimensionValue?.Value)\n .filter(dimensionValue => !StringExtensions.isNullOrWhitespace(dimensionValue))\n .join(props.resources.quickOrderProductDimensionsSeparator)}\n \n | \n {cartLine.Price} | \n {cartLine.UnitOfMeasureSymbol} | \n \n \n | \n {cartLine.TotalAmount} | \n \n \n | \n \n );\n};\n\n/**\n * Renders rows for mobile view.\n * @param props - Configuration for the rows.\n * @returns A react node with a list of quick order rows for mobile view.\n */\nexport const QuickOrderMobileTableRowCellComponent: React.FC = (props: IQuickOrderTableRowProps) => {\n const product: SimpleProduct = props.data.product;\n const cartLine: CartLine = props.data.cartLine;\n\n return (\n <>\n \n \n | \n \n \n {product.ItemId}\n \n {format(props.resources.quickOrderQuantityMobileText, cartLine.Quantity)}\n \n \n | \n \n \n | \n \n );\n};\n\n/**\n * Quick order table row component.\n * @param props - Configuration of the component.\n * @returns React node for the row.\n */\nexport const QuickOrderTableRowComponent: React.FC = (props: IQuickOrderTableRowProps) => {\n const rowClassName = `${props.className}__row`;\n\n let headerCells: JSX.Element;\n if (props.isMobile) {\n headerCells = ;\n } else {\n headerCells = ;\n }\n\n return (\n \n {headerCells}
\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport MsDyn365, { IComponent, IComponentProps, ICoreContext } from '@msdyn365-commerce/core';\nimport React from 'react';\n\nimport { QuickOrderProduct } from '../quick-order-product';\nimport { IQuickOrderTableHeaderResources, QuickOrderTableHeaderComponent } from './components/quick-order-table-header-component';\nimport { IQuickOrderTableRowResources, QuickOrderTableRowComponent } from './components/quick-order-table-row-component';\n\n/**\n * Quick order table data interface.\n */\ninterface IQuickOrderTableData {\n quickOrderProducts: QuickOrderProduct[];\n}\n\n/**\n * Quick order table resources.\n */\nexport interface IQuickOrderTableResources extends IQuickOrderTableHeaderResources, IQuickOrderTableRowResources {}\n\n/**\n * Quick order table props.\n */\nexport interface IQuickOrderTableProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n\n resources: IQuickOrderTableResources;\n isMobileView: boolean;\n}\n\n/**\n * Quick order table component.\n */\nexport interface IQuickOrderTableComponent extends IComponent {}\n\n/**\n * The quick order table.\n * @param props -- The quick order table props.\n * @returns The quick order table element.\n */\nexport const QuickOrderTableComponent: React.FC = (props: IQuickOrderTableProps) => {\n const [isMobile, setIsMobile] = React.useState(props.isMobileView);\n const quickOrderProducts = props.data.quickOrderProducts;\n\n /**\n * Update the view port.\n */\n const updateViewport = () => {\n setIsMobile(props.isMobileView);\n };\n if (MsDyn365.isBrowser) {\n window.addEventListener('resize', updateViewport);\n }\n\n const headerClassName = `${props.className}__header`;\n const rowClassName = `${props.className}__row`;\n\n return (\n \n \n {quickOrderProducts.map((quickOrderProduct, index) => {\n return (\n \n );\n })}\n
\n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ProductDimensionFull } from '@msdyn365-commerce/commerce-entities';\nimport {\n getProductConfigure,\n IErrorState,\n IProductDimensionCallbacks,\n IProductDimensionConfigureResources,\n IProductDimensionConfigureViewProps\n} from '@msdyn365-commerce/components';\nimport { CartLine, ProductDimension, ProductDimensionValue, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { getDeliveryOptionsAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductsDataActions.g';\nimport {\n ArrayExtensions,\n FinitePromiseQueue,\n FinitePromiseQueueError,\n getDimensionsForSelectedVariant,\n GetDimensionsForSelectedVariantInput,\n getProductAvailabilitiesForSelectedVariant,\n getScanResult,\n GetScanResultInput,\n getSelectedVariant,\n IProductInventoryInformation,\n IPromiseQueue,\n ObjectExtensions,\n ProductAvailabilitiesForSelectedVariantInput,\n QueryResultSettingsProxy,\n SelectedVariantInput,\n StringExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getTelemetryObject,\n IModuleProps,\n INodeProps,\n ITelemetryContent,\n updateMaxQuantityForCartLineItem\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { debounce } from 'lodash';\nimport { computed, observable } from 'mobx';\nimport * as React from 'react';\n\nimport { QuickOrderDrawer, QuickOrderFormComponent, QuickOrderProduct } from './components';\nimport { QuickOrderTableComponent } from './components/quick-order-table/quick-order-table-component';\nimport { IQuickOrderData } from './quick-order.data';\nimport { IQuickOrderProps, IQuickOrderResources } from './quick-order.props.autogenerated';\n\n/**\n * Quick Order View Props Interface properties.\n */\nexport interface IQuickOrderViewProps extends IQuickOrderProps {\n isB2B?: boolean;\n productText: string;\n isQuickOrderFormExpanded: boolean;\n contentProps: INodeProps;\n drawer: INodeProps;\n quickOrderForm: INodeProps;\n quickOrderFormProductContent: INodeProps;\n quickOrderFormMsgContent: INodeProps;\n quickOrderProps: IModuleProps;\n quickOrderList?: React.ReactNode;\n form: React.ReactNode;\n configure?: IProductDimensionConfigureViewProps;\n isMobileView: boolean;\n}\n\n/**\n * Quick Order State Message Interface properties.\n */\nexport interface IQuickOrderStateMessage {\n isOpen: boolean;\n messageGlyph: string;\n messageText: string;\n statusCssString: string;\n}\n\n/**\n * GridSize Interface properties.\n */\nexport type GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Quick Order Interface properties.\n */\nexport interface IQuickOrderState {\n isQuickOrderFormExpanded: boolean;\n isUpdatingDimension?: boolean;\n productAvailableQuantity: IProductInventoryInformation | undefined;\n productResponse: SimpleProduct | undefined;\n productDimensions: ProductDimensionFull[] | undefined;\n productText: string;\n quantity: number;\n stateMessage?: IQuickOrderStateMessage;\n productDimensionErrorState: IErrorState;\n isMobile: boolean;\n products: SimpleProduct[];\n}\n\n/**\n *\n * QuickOrder component.\n * @extends {React.PureComponent, IQuickOrderState>}\n */\nclass QuickOrder extends React.PureComponent, IQuickOrderState> {\n @observable\n private readonly viewport: GridSize;\n\n private readonly productTextInput: React.RefObject;\n\n private readonly quantityInput: React.RefObject;\n\n private readonly waitTime: number = 500;\n\n private readonly quickOrderFormClass: string;\n\n private readonly quickOrderFormProductContent: string;\n\n private readonly quickOrderFormMsgContent: string;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly dimensionUpdateQueue: IPromiseQueue = new FinitePromiseQueue(2);\n\n private dimensions: { [id: number]: string } = {};\n\n private initializedDimensions: Set = new Set();\n\n private readonly cssClassNameConfigure: string = 'ms-quick-order__content-form-main';\n\n // @ts-expect-error -- Existing code.\n private cancellableDebounce: debounce;\n\n private readonly quickOrderCallbacks: IProductDimensionCallbacks = {\n initializeDimension: (initializedDimension: string): void => {\n if (initializedDimension) {\n this.initializedDimensions.add(initializedDimension);\n }\n },\n /**\n * Get Dropdown name.\n * @param selectedDimensionId - Dimension type.\n * @param selectedDimensionValueId - Resources.\n * @returns Dropdown name.\n */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n dimensionSelectedAsync: async (selectedDimensionId: number, selectedDimensionValueId: string): Promise => {\n this.dimensions[selectedDimensionId] = selectedDimensionValueId;\n // Only trigger _updateDimensions when all dimensions are initialized\n if (this.initializedDimensions.size === this.state.productDimensions?.length) {\n return this.dimensionUpdateQueue\n .enqueue(async () => {\n return this._updateDimensions();\n })\n .catch((error: any) => {\n // Ignore discarded processes.\n if (error !== FinitePromiseQueueError.ProcessWasDiscardedFromTheQueue) {\n throw error;\n }\n });\n }\n },\n\n /**\n * Get Dropdown name.\n * @param dimensionType - Dimension type.\n * @param resources - Resources.\n * @returns Dropdown name.\n */\n getDropdownName: (dimensionType: number, resources: IProductDimensionConfigureResources): string => {\n return this._getDropdownName(dimensionType, resources);\n },\n\n /**\n * Method to call on dimension change.\n * @param isUpdatingDimension - Flag to update dimension.\n */\n changeUpdatingDimension: (isUpdatingDimension: boolean): void => {\n this.setState({ isUpdatingDimension });\n }\n };\n\n public constructor(props: IQuickOrderProps) {\n super(props);\n this.productTextInput = React.createRef();\n this.quantityInput = React.createRef();\n this.viewport = props.context.request.device.Type === 'Mobile' ? 'xs' : 'lg';\n\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.state = {\n productText: '',\n isQuickOrderFormExpanded: false,\n productAvailableQuantity: undefined,\n quantity: 1,\n productResponse: undefined,\n productDimensions: undefined,\n productDimensionErrorState: {\n configureErrors: {}\n },\n isMobile: this.isMobile,\n products: []\n };\n this._handleInputChange = this._handleInputChange.bind(this);\n this._handleQuantityChange = this._handleQuantityChange.bind(this);\n this.quickOrderFormClass = 'ms-quick-order__content-form';\n this.quickOrderFormProductContent = 'ms-quick-order__content-form-main';\n this.quickOrderFormMsgContent = 'ms-quick-order__content-form-msg';\n }\n\n @computed get isMobile(): boolean {\n return this.viewport === 'xs' || this.viewport === 'sm';\n }\n\n public render(): JSX.Element | null {\n const { data } = this.props;\n if (!data.customerInformation.result) {\n return null;\n }\n\n const { className = '', maxQuantity } = this.props.config;\n const customerInfo = this.props.data.customerInformation.result;\n const {\n quickOrderModuleHeading,\n quickOrderModuleDescription,\n quickOrderAddtobag,\n quickOrderProductQuantityInputLabel,\n quickOrderProductInputLabel,\n quickOrderProductDimensionTypeColor,\n quickOrderProductDimensionTypeConfiguration,\n quickOrderSelectDimensionFormatString,\n quickOrderProductDimensionTypeSize,\n quickOrderProductDimensionTypeStyle,\n quickOrderProductDimensionTypeAmount,\n quickAddQuantityPlaceholderText\n } = this.props.resources;\n\n const productConfigureResources: IProductDimensionConfigureResources = {\n selectDimensionFormatString: quickOrderSelectDimensionFormatString,\n productDimensionTypeColor: quickOrderProductDimensionTypeColor,\n productDimensionTypeConfiguration: quickOrderProductDimensionTypeConfiguration,\n productDimensionTypeSize: quickOrderProductDimensionTypeSize,\n productDimensionTypeStyle: quickOrderProductDimensionTypeStyle,\n productDimensionTypeAmount: quickOrderProductDimensionTypeAmount\n };\n\n const { isQuickOrderFormExpanded, productText, productDimensionErrorState, productResponse, productDimensions } = this.state;\n\n const moduleClassName: string = 'ms-quick-order';\n\n const viewProps: IQuickOrderViewProps = {\n ...(this.props as IQuickOrderProps),\n\n quickOrderProps: { className: classnames('ms-quick-order', className), moduleProps: this.props },\n contentProps: { className: 'ms-quick-order__content' },\n isB2B: customerInfo?.IsB2b,\n drawer: {\n tag: QuickOrderDrawer,\n className: `${moduleClassName}__drawer`,\n collapseProps: { isOpen: this.state.isQuickOrderFormExpanded },\n moduleHeadingText: quickOrderModuleHeading,\n moduleDescriptionText: quickOrderModuleDescription,\n requestContext: this.props.context.request,\n telemetryContent: this.telemetryContent\n },\n quickOrderForm: {\n className: `${this.quickOrderFormClass} ${isQuickOrderFormExpanded ? 'qo-show' : 'qo-hide'}`\n },\n quickOrderFormProductContent: {\n className: this.quickOrderFormProductContent\n },\n quickOrderFormMsgContent: {\n className: this.quickOrderFormMsgContent\n },\n productText,\n quickOrderList: ArrayExtensions.hasElements(this.state.products) ? this._renderQuickOrderTable('ms-quick-order') : undefined,\n form: QuickOrderFormComponent({\n productTextInput: this.productTextInput,\n quantityTextInput: this.quantityInput,\n disableAddtoCart: !productResponse,\n ariaLabelAddtoCart: quickOrderAddtobag,\n ariaLabelProduct: quickOrderProductInputLabel,\n ariaLabelQuantity: quickOrderProductQuantityInputLabel,\n addQuantityPlaceholderText: quickAddQuantityPlaceholderText,\n maxChars: 50,\n maxQuantity,\n quickOrderState: this.state,\n handleInputChange: this._handleInputChange,\n handleAddToCartClick: this._addItemToCart,\n handleQuantityChange: this._handleQuantityChange\n }),\n configure:\n productResponse && productDimensions\n ? getProductConfigure(\n this.cssClassNameConfigure,\n this.props.context,\n this.props.friendlyName,\n this.props.telemetry,\n quickOrderSelectDimensionFormatString,\n productConfigureResources,\n this.quickOrderCallbacks,\n productResponse,\n productDimensions,\n productDimensionErrorState\n )\n : undefined,\n isQuickOrderFormExpanded: this.state.isQuickOrderFormExpanded,\n isMobileView: this.state.isMobile\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * Initial the products on quick order.\n * @returns List of quick order products or undefined.\n */\n private _initQuickOrderProducts(): QuickOrderProduct[] {\n const {\n data: {\n cart: { result: cart }\n }\n } = this.props;\n\n const products: SimpleProduct[] = this.state.products;\n\n const quickOrderProducts = cart?.cart.CartLines?.map((cartLine: CartLine) => {\n const quickOrderProduct = products.find(product => product.RecordId === cartLine.ProductId);\n if (ObjectExtensions.isNullOrUndefined(quickOrderProduct)) {\n return undefined;\n }\n\n return new QuickOrderProduct(cartLine, quickOrderProduct);\n });\n\n return ArrayExtensions.validValues(quickOrderProducts);\n }\n\n /**\n * Render Quick Order Table.\n * @param className - Class name.\n * @returns JSX element.\n */\n private _renderQuickOrderTable(className: string): JSX.Element {\n const tableClassName = `${className}__table-list`;\n\n return (\n \n );\n }\n\n /**\n * Method to handle input change.\n * @param query - Class name.\n */\n private readonly _handleInputChange = (query: string): void => {\n if (!query || query.length > 4) {\n this.setState({ productText: query, quantity: 0, productResponse: undefined, productDimensions: [] });\n this.setState({\n stateMessage: {\n messageText: '',\n statusCssString: '',\n messageGlyph: '',\n isOpen: false\n }\n });\n const inputQuantityText = this.quantityInput.current instanceof HTMLInputElement && this.quantityInput.current;\n if (inputQuantityText) {\n inputQuantityText.value = '0';\n }\n } else {\n return;\n }\n\n if (this.cancellableDebounce) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call -- existing code.\n this.cancellableDebounce.cancel();\n }\n\n const { telemetry, context } = this.props;\n const maxChar = 50;\n if (context) {\n if (!StringExtensions.isNullOrWhitespace(query)) {\n if (query.length > maxChar) {\n return;\n }\n\n this.cancellableDebounce = debounce(() => {\n getScanResult(\n new GetScanResultInput(\n context.actionContext.requestContext.apiSettings,\n query,\n context.actionContext.requestContext.apiSettings.channelId\n ),\n this.props.context.actionContext\n )\n .then(results => {\n this.setState({\n productResponse: results?.Product,\n productDimensions: results?.ProductDimensionFull,\n isQuickOrderFormExpanded: true\n });\n })\n .catch(error => {\n this.setState({ productText: '' });\n telemetry.exception(error);\n telemetry.debug('Unable to get scan results');\n });\n }, this.waitTime);\n\n setTimeout(() => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- Existing code.\n this.cancellableDebounce();\n }, 0);\n this.setState({ productText: query, isQuickOrderFormExpanded: true });\n } else {\n this.setState({ productText: '', productResponse: undefined, isQuickOrderFormExpanded: true });\n }\n }\n };\n\n /**\n * Method to add product in cart.\n */\n // eslint-disable-next-line complexity\n private readonly _addItemToCart = async (): Promise => {\n const { context, data, resources, telemetry } = this.props;\n const { cart } = data;\n const { quickOrderAddedToCartSuccessMessage, quickOrderAddedToCartFailureMessage } = resources;\n const { productResponse, quantity } = this.state;\n this.setState({\n stateMessage: {\n messageText: '',\n statusCssString: '',\n messageGlyph: '',\n isOpen: false\n }\n });\n\n const isValidCart = productResponse && (await this._validateCart(productResponse, quantity));\n if (isValidCart && cart.result && productResponse !== undefined) {\n // Get product delivery mode info\n const deliveryOptions = await getDeliveryOptionsAsync(\n {\n callerContext: this.props.context.actionContext,\n queryResultSettings: QueryResultSettingsProxy.getPagingFromInputDataOrDefaultValue(this.props.context.actionContext)\n },\n [productResponse.RecordId]\n );\n const emailDeliveryModeCode = this.props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode;\n const defaultDeliveryOption =\n ArrayExtensions.hasElements(deliveryOptions) && ArrayExtensions.hasElements(deliveryOptions[0].DeliveryOptions)\n ? deliveryOptions[0].DeliveryOptions[0].Code\n : undefined;\n\n if (this.state.productAvailableQuantity === undefined) {\n await this._updateAvailability();\n }\n const shouldValidateQuantityLimits: boolean = this._shouldValidateQuantityLimits();\n const { productAvailableQuantity } = this.state;\n const addProductToCartInput = {\n product: productResponse,\n count: quantity,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access -- Existing code.\n enableStockCheck: context.app.config.enableStockCheck,\n availableQuantity: productAvailableQuantity ? productAvailableQuantity.ProductAvailableQuantity.AvailableQuantity : 0,\n additionalProperties: { orderQuantityLimitsFeatureIsEnabled: shouldValidateQuantityLimits },\n isAddEmailDeliveryItemToCart: defaultDeliveryOption !== undefined && defaultDeliveryOption === emailDeliveryModeCode,\n deliveryMode: defaultDeliveryOption\n };\n\n cart.result\n .addProductToCart(addProductToCartInput)\n .then(async result => {\n if (result.status === 'SUCCESS') {\n this.props.telemetry.debug('[quick-order] Cart Updated');\n const inputProductText = this.productTextInput.current instanceof HTMLInputElement && this.productTextInput.current;\n const inputQuantityText = this.quantityInput.current instanceof HTMLInputElement && this.quantityInput.current;\n if (inputProductText) {\n inputProductText.value = '';\n }\n if (inputQuantityText) {\n inputQuantityText.value = '0';\n }\n // clean dimensions once product is added to cart\n this.dimensions = [];\n this.setState({\n productText: '',\n quantity: 0,\n productResponse: undefined,\n productDimensions: [],\n stateMessage: {\n messageText: quickOrderAddedToCartSuccessMessage,\n statusCssString: 'success',\n messageGlyph: 'fas fa-check',\n isOpen: true\n }\n });\n } else if (result.substatus === 'MAXQUANTITY') {\n this.props.telemetry.debug('[quick-order] Unable to Update Cart Line from the quick order', quantity);\n const maxQtyLimitReachedMessage = this._getMaxQtyMessage(productAvailableQuantity, quantity);\n\n this.setState({\n stateMessage: {\n messageText: maxQtyLimitReachedMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n }\n });\n } else if (result.substatus === 'QUANTITYLIMITS' && shouldValidateQuantityLimits) {\n const maxQtyLimitReachedMessage = result.errorDetails?.LocalizedMessage!;\n this.props.telemetry.debug(\n '[quick-order] Unable to Update Cart Line from the quick order',\n maxQtyLimitReachedMessage\n );\n\n this.setState({\n stateMessage: {\n messageText: maxQtyLimitReachedMessage || quickOrderAddedToCartFailureMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n }\n });\n } else {\n this.props.telemetry.debug('[quick-order] Unable to Update Cart Line from the quick order');\n\n this.setState({\n stateMessage: {\n messageText: quickOrderAddedToCartFailureMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n }\n });\n }\n })\n .catch(error => {\n telemetry.warning(error);\n telemetry.debug('[quick-order] Error trying to Update Cart Line from the quick order');\n\n this.setState({\n stateMessage: {\n messageText: quickOrderAddedToCartFailureMessage,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n }\n });\n });\n }\n };\n\n private readonly _shouldValidateQuantityLimits = (): boolean => {\n const featureStatuses = this.props.data.featureState.result;\n const isECommerceQuantityLimitsFeatureEnabledInHq =\n featureStatuses?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.EcommerceQuantityLimitConfigurationsFeature'\n )?.IsEnabled || false;\n\n if (isECommerceQuantityLimitsFeatureEnabledInHq) {\n return true;\n }\n\n const isOrderQuantityLimitsFeatureEnabledInHq =\n featureStatuses?.find(featureState => featureState.Name === 'Dynamics.AX.Application.RetailDefaultOrderQuantityLimitsFeature')\n ?.IsEnabled || false;\n\n if (!isOrderQuantityLimitsFeatureEnabledInHq) {\n return false;\n }\n\n const useSiteBuilderSettings = featureStatuses?.find(\n featureState => featureState.Name === 'RevertToSiteBuilderOrderQuantityLimitsSettings'\n )?.IsEnabled;\n\n if (useSiteBuilderSettings) {\n const defaultOrderQuantityLimitsFeatureConfig = this.props.context.request.app.platform?.enableDefaultOrderQuantityLimits;\n const customerInfo = this.props.data.customerInformation.result;\n\n const isOrderQuantityLimitsFeatureEnabledInSiteSettings =\n defaultOrderQuantityLimitsFeatureConfig === 'all' ||\n (customerInfo &&\n ((defaultOrderQuantityLimitsFeatureConfig === 'b2b' && customerInfo.IsB2b) ||\n (defaultOrderQuantityLimitsFeatureConfig === 'b2c' && !customerInfo.IsB2b)));\n\n return isOrderQuantityLimitsFeatureEnabledInSiteSettings ?? false;\n } else {\n const cartConfiguration = this.props.data.cartConfiguration?.result;\n return !(cartConfiguration?.IgnoreOrderSettings ?? false);\n }\n };\n\n private _getMaxQtyMessage(productInventoryInfo: IProductInventoryInformation | undefined, currentQuantity: number): string {\n const { context, data } = this.props;\n const { cart } = data;\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access -- existing code.\n const maxQuantityForLineItem = updateMaxQuantityForCartLineItem(context.app.config.maxQuantityForCartLineItem);\n\n const addedQuantity =\n cart.result?.cart.CartLines?.find(\n item => item.ItemId?.toString() === this.state.productText && item.ProductId === this.state.productResponse?.RecordId\n )?.Quantity || 0;\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- existing code.\n if (\n !productInventoryInfo ||\n !productInventoryInfo.ProductAvailableQuantity.AvailableQuantity ||\n !context.app.config.enableStockCheck\n ) {\n return this._getConcatenatedMaxQtyMessage(addedQuantity.toString(), maxQuantityForLineItem.toString());\n }\n\n const minInventory = Math.min(maxQuantityForLineItem, productInventoryInfo.ProductAvailableQuantity.AvailableQuantity);\n\n return this._getConcatenatedMaxQtyMessage(addedQuantity.toString(), minInventory.toString());\n }\n\n /**\n * Method to return concatenated added quantity Message.\n * @param currentQuantity - Current or added Quantity.\n * @param maxQuantity - Max Quantity.\n * @returns - ConcatenatedMaxQtyMessage.\n */\n private readonly _getConcatenatedMaxQtyMessage = (currentQuantity: string, maxQuantity: string): string => {\n const { quickOrderMaxQuantityLimitText, quickOrderAlreadyItemQuantityText } = this.props.resources;\n\n if (currentQuantity !== '0') {\n return (\n quickOrderAlreadyItemQuantityText.replace('{curQuantity}', currentQuantity) +\n quickOrderMaxQuantityLimitText.replace('{maxQuantity}', maxQuantity)\n );\n }\n\n return quickOrderMaxQuantityLimitText.replace('{maxQuantity}', maxQuantity);\n };\n\n /**\n * Method to handle quantity change.\n * @param value - Quantity.\n */\n private readonly _handleQuantityChange = (value: string): void => {\n let currentValue = Number.parseInt(value, 10);\n const inputElement = this.quantityInput.current instanceof HTMLInputElement && this.quantityInput.current;\n\n if (isNaN(currentValue)) {\n currentValue = 0;\n }\n\n this.setState({ quantity: currentValue }, () => {\n debounce(() => {\n if (!isNaN(this.state.quantity) && this.state.quantity >= 0 && inputElement) {\n inputElement.setAttribute('aria-valuenow', currentValue.toString());\n inputElement.setAttribute('value', currentValue.toString());\n }\n }, 200)();\n });\n };\n\n private readonly _updateDimensionValue = (\n productDimensionFull: ProductDimensionFull,\n newValueId: string | undefined\n ): ProductDimensionValue | undefined => {\n if (newValueId && productDimensionFull.DimensionValues) {\n return productDimensionFull.DimensionValues.find(dimension => dimension.RecordId === +newValueId);\n }\n\n return undefined;\n };\n\n private readonly _getDropdownName = (dimensionType: number, resources: IProductDimensionConfigureResources): string => {\n const isGiftCard = this.state.productResponse?.IsGiftCard;\n\n switch (dimensionType) {\n case 1: // ProductDimensionType.Color\n return resources.productDimensionTypeColor;\n case 2: // ProductDimensionType.Configuration\n return resources.productDimensionTypeConfiguration;\n case 3: // ProductDimensionType.Size\n return resources.productDimensionTypeSize;\n case 4: // ProductDimensionType.Style\n return isGiftCard ? resources.productDimensionTypeAmount : resources.productDimensionTypeStyle;\n default:\n return '';\n }\n };\n\n /**\n * Method to update product dimension.\n */\n private readonly _updateDimensions = async (): Promise => {\n const {\n context: {\n actionContext,\n request: {\n apiSettings: { channelId }\n }\n }\n } = this.props;\n const { productDimensions, productResponse } = this.state;\n if (!productResponse || !productDimensions) {\n return;\n }\n\n const dimensionsToUpdate: { [id: number]: string } = { ...this.dimensions };\n this.setState({ isUpdatingDimension: true });\n\n // Step 1: Update state to indicate which dimensions are selected\n if (this.state.productDimensionErrorState.otherError) {\n const clearOtherErrorState = { ...this.state.productDimensionErrorState };\n clearOtherErrorState.otherError = undefined;\n this.setState({ productDimensionErrorState: clearOtherErrorState });\n }\n\n // Step 2: Clear any errors indicating the dimension wasn't selected\n for (const key of Object.keys(dimensionsToUpdate)) {\n if (this.state.productDimensionErrorState.configureErrors[key]) {\n const errorState = { ...this.state.productDimensionErrorState };\n errorState.configureErrors[key] = undefined;\n\n this.setState({ productDimensionErrorState: errorState });\n }\n }\n\n // Step 3, Build the actually selected dimensions, prioritizing the information in state\n // over the information in data\n const mappedDimensions = productDimensions\n .map(dimension => {\n return {\n DimensionTypeValue: dimension.DimensionTypeValue,\n DimensionValue:\n this._updateDimensionValue(dimension, dimensionsToUpdate[dimension.DimensionTypeValue]) || dimension.DimensionValue,\n ExtensionProperties: dimension.ExtensionProperties\n };\n })\n .filter(dimension => {\n return dimension.DimensionValue;\n });\n\n // Step 4. Use these dimensions hydrate the product. Wrap this in a promise\n // so that places like add to cart can await it\n const selectedProduct = new Promise(async (resolve, reject) => {\n const newProduct = await getSelectedVariant(\n new SelectedVariantInput(\n productResponse.MasterProductId ? productResponse.MasterProductId : productResponse.RecordId,\n channelId,\n mappedDimensions,\n undefined,\n this.props.context.request\n ),\n actionContext\n );\n if (newProduct) {\n await getDimensionsForSelectedVariant(\n new GetDimensionsForSelectedVariantInput(\n newProduct.MasterProductId ? newProduct.MasterProductId : newProduct.RecordId,\n channelId,\n mappedDimensions,\n this.props.context.request\n ),\n actionContext\n );\n }\n\n resolve(newProduct);\n });\n\n const variantProduct = await selectedProduct;\n this.setState({ productResponse: variantProduct !== null ? variantProduct : undefined });\n if (variantProduct) {\n // Step 5. Use these dimensions hydrate the inventory. Wrap this in a promise\n // so that places like add to cart can await it\n const newAvailableQuantity = await getProductAvailabilitiesForSelectedVariant(\n new ProductAvailabilitiesForSelectedVariantInput(variantProduct.RecordId, channelId),\n actionContext\n );\n\n if (newAvailableQuantity && newAvailableQuantity.length > 0) {\n this.setState({ productAvailableQuantity: newAvailableQuantity[0] });\n } else {\n this.setState({ productAvailableQuantity: undefined });\n }\n }\n };\n\n /**\n * Method to update product availability.\n */\n private readonly _updateAvailability = async (): Promise => {\n const {\n context: {\n actionContext,\n request: {\n apiSettings: { channelId }\n }\n }\n } = this.props;\n const { productResponse } = this.state;\n if (!productResponse) {\n return;\n }\n\n let productAvailable: IProductInventoryInformation | undefined;\n await getProductAvailabilitiesForSelectedVariant(\n new ProductAvailabilitiesForSelectedVariantInput(productResponse.RecordId, channelId),\n actionContext\n ).then(result => {\n if (ArrayExtensions.hasElements(result)) {\n productAvailable = result.find(quantity => quantity.ProductAvailableQuantity.ProductId === productResponse.RecordId);\n } else {\n this.setState({ productAvailableQuantity: undefined });\n }\n this.setState({ productAvailableQuantity: productAvailable });\n });\n };\n\n /**\n * Method to get dimension error string.\n * @param dimensionTypeValue - Dimension value.\n * @param resources - Localized error message.\n * @param isGiftCard - Flag to check giftcard.\n * @returns Dimension error string.\n */\n private readonly _getDimensionErrorString = (\n dimensionTypeValue: number,\n resources: IQuickOrderResources,\n isGiftCard?: boolean\n ): string => {\n switch (dimensionTypeValue) {\n case 1: // ProductDimensionType.Color\n return resources.quickOrderproductDimensionTypeColorErrorMessage;\n case 2: // ProductDimensionType.Configuration\n return resources.quickOrderproductDimensionTypeConfigurationErrorMessage;\n case 3: // ProductDimensionType.Size\n return resources.quickOrderproductDimensionTypeSizeErrorMessage;\n case 4: // ProductDimensionType.Style\n return isGiftCard\n ? resources.quickOrderproductDimensionTypeAmountErrorMessage\n : resources.quickOrderproductDimensionTypeStyleErrorMessage;\n default:\n return '';\n }\n };\n\n private readonly _updateProductAvailability = async (): Promise => {\n if (this.state.productAvailableQuantity === undefined) {\n await this._updateAvailability();\n }\n };\n\n /**\n * Method to validate the cart.\n * @param productResponse - Simple product object.\n * @param quantity - Quantity.\n * @returns Flag after validating cart.\n */\n private readonly _validateCart = async (productResponse: SimpleProduct, quantity: number): Promise => {\n const missingDimensions = productResponse.Dimensions?.filter((dimension: ProductDimension) => !dimension.DimensionValue?.Value);\n if (missingDimensions && missingDimensions.length > 0) {\n const userMessage = this._getConfigureErrors(missingDimensions, false);\n if (this.state.productDimensionErrorState.configureErrors) {\n const errorState = { ...this.state.productDimensionErrorState };\n errorState.configureErrors = userMessage;\n\n this.setState({ productDimensionErrorState: errorState });\n return false;\n }\n }\n\n if (quantity <= 0) {\n const resources = this.props.resources;\n this.setState({\n stateMessage: {\n messageText: resources.quickOrderWrongQuantityErrorMsg,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n }\n });\n return false;\n }\n\n // If stock check false no need to check the availability.\n const { context } = this.props;\n if (!context.app.config.enableStockCheck) {\n return true;\n }\n\n await this._updateProductAvailability();\n const { productAvailableQuantity } = this.state;\n const availableQuantity = productAvailableQuantity ? productAvailableQuantity.ProductAvailableQuantity.AvailableQuantity : 0;\n if (availableQuantity === undefined || availableQuantity <= 0) {\n this.setState({\n stateMessage: {\n messageText: this.props.resources.quickOrderOutofStockErrorMsg,\n statusCssString: 'danger',\n messageGlyph: 'fas fa-exclamation-triangle',\n isOpen: true\n }\n });\n return false;\n }\n return true;\n };\n\n /**\n * Method to get configuration error string.\n * @param result - List of Dimension values.\n * @param isGiftCard - Flag to check giftcard.\n * @returns Error object.\n */\n private _getConfigureErrors(\n result: ProductDimension[] | undefined,\n isGiftCard?: boolean\n ): { [configureId: string]: string | undefined } {\n if (!result) {\n return {};\n }\n const dimensions: { [configureId: string]: string | undefined } = {};\n const resources = this.props.resources;\n for (const dimension of result) {\n dimensions[dimension.DimensionTypeValue] = this._getDimensionErrorString(dimension.DimensionTypeValue, resources, isGiftCard);\n }\n return dimensions;\n }\n}\n\nexport default QuickOrder;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { observable } from 'mobx';\n\n/**\n * State information related to what is needed to succesfully perform a autosuggest.\n */\nexport class SearchState {\n @observable public searchText?: string;\n\n @observable public defaultBasicSearchUrl?: string;\n\n @observable public searchQueryStringParameter?: string;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Autosuggestions } from '@msdyn365-commerce/commerce-entities';\nimport {\n CacheType,\n createObservableDataAction,\n getCatalogId,\n IAction,\n IActionContext,\n IActionInput,\n ICreateActionContext\n} from '@msdyn365-commerce/core';\nimport {\n AttributeDataType,\n ChannelInventoryConfiguration,\n ProductRefinerSource,\n ProductRefinerValue,\n ProductSearchCriteria,\n SearchSuggestion,\n SearchSuggestionCriteria\n} from '@msdyn365-commerce/retail-proxy';\nimport {\n getInventoryConfigurationAsync,\n getSearchSuggestionsAsync\n} from '@msdyn365-commerce/retail-proxy/dist/DataActions/StoreOperationsDataActions.g';\nimport { generateImageUrl } from '@msdyn365-commerce-modules/retail-actions';\n\nexport enum SuggestionType {\n Category = 'ScopedCategory',\n Keyword = 'Keyword',\n Product = 'Product',\n None = 'None'\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 * Input class for auto suggest search input.\n */\nexport class AutoSuggestInput implements IActionInput {\n public searchQuery?: string;\n\n public topResultsCount?: number;\n\n public suggestionType?: string;\n\n public hitPrefix?: string;\n\n public hitSuffix?: string;\n\n public constructor(searchText?: string, top?: number, suggestionType?: string, hitPrefix?: string, hitSuffix?: string) {\n this.searchQuery = searchText;\n this.topResultsCount = top;\n this.suggestionType = suggestionType;\n this.hitPrefix = hitPrefix;\n this.hitSuffix = hitSuffix;\n }\n\n public getCacheKey = () => 'AutoSuggestSearchSuggestions';\n\n public getCacheObjectType = () => 'AutoSuggestSearchSuggestions';\n\n public dataCacheType = (): CacheType => 'none';\n}\n\nconst createInput = (inputData: ICreateActionContext) => {\n return new AutoSuggestInput();\n};\n\n/**\n * Calls the Retail API and returns a auto-suggest suggestions.\n * @param input\n * @param ctx\n */\nexport async function getSearchSuggestionsAction(input: AutoSuggestInput, ctx: IActionContext): Promise {\n // If no input is provided fail out\n if (!input || !input.searchQuery) {\n throw new Error('[getSearchSuggestionsAction]No valid Input was provided, failing');\n }\n\n const autosuggest: Autosuggestions = {};\n\n const autoSuggestPromises = [_getAutoSuggest(input, autosuggest, ctx)];\n return Promise.all(autoSuggestPromises).then(() => {\n return autosuggest;\n });\n}\n\n/**\n * Returns inventory in stock sortable refiner value.\n * @param channelInventoryConfiguration - The channelInventoryConfiguration.\n * @param isInStock - The flag indicating whether is getting in-stock refiner or out-of-stock refiner.\n * @returns Refiners.\n */\nconst getInventorySortableRefinerValue = (\n channelInventoryConfiguration: ChannelInventoryConfiguration,\n isInStock: boolean\n): ProductRefinerValue | undefined => {\n if (channelInventoryConfiguration && channelInventoryConfiguration.ProductAvailabilitySortableAttributeRecordId) {\n return {\n RefinerRecordId: channelInventoryConfiguration.ProductAvailabilitySortableAttributeRecordId,\n DataTypeValue: AttributeDataType.TrueFalse,\n LeftValueBoundString: isInStock ? 'true' : 'false',\n RightValueBoundString: isInStock ? 'true' : 'false',\n UnitText: '',\n RowNumber: 0,\n Count: 0,\n ExtensionProperties: [],\n RefinerSourceValue: ProductRefinerSource.Attribute\n };\n }\n return undefined;\n};\n\nasync function _getAutoSuggest(input: AutoSuggestInput, autosuggest: Autosuggestions, ctx: IActionContext): Promise {\n const catalogId = getCatalogId(ctx.requestContext);\n let productSearchCriteria: ProductSearchCriteria = {\n SearchCondition: input.searchQuery && input.searchQuery.length > 0 ? input.searchQuery : '',\n Context: {\n ChannelId: +ctx.requestContext.apiSettings.channelId,\n CatalogId: catalogId\n }\n };\n\n if (ctx.requestContext.app.config?.productListInventoryDisplay === ProductListInventoryFilteringOptions.HideOOS) {\n const channelInventoryConfiguration = await getInventoryConfigurationAsync({ callerContext: ctx });\n const isInStockRefiner = true;\n const inventoryRefinerValue = getInventorySortableRefinerValue(channelInventoryConfiguration, isInStockRefiner);\n\n if (inventoryRefinerValue) {\n productSearchCriteria = {\n ...productSearchCriteria,\n Refinement: [inventoryRefinerValue]\n };\n }\n }\n\n const searchCriteria: SearchSuggestionCriteria = {\n ProductSearchCriteria: productSearchCriteria,\n HitPrefix: input.hitPrefix,\n HitSuffix: input.hitSuffix,\n SuggestionType: input.suggestionType\n };\n\n const searchSuggestions = await getSearchSuggestionsAsync(\n { callerContext: ctx, queryResultSettings: { Paging: { Top: input.topResultsCount } } },\n searchCriteria\n );\n\n if (searchSuggestions && searchSuggestions.length > 0) {\n // Generate image url\n searchSuggestions.map(\n (item: SearchSuggestion) =>\n (item.ImageUrl = item.ImageUrl ? generateImageUrl(item.ImageUrl, ctx.requestContext.apiSettings) : '')\n );\n\n autosuggest.AllSearchResults = searchSuggestions;\n } else {\n ctx.telemetry.error(\n `[getSearchSuggestionsAction] unable to get availabilites for search with suggestion type ${searchCriteria.SuggestionType}`\n );\n }\n}\n\nexport const getSearchSuggestionsActionDataAction = createObservableDataAction({\n id: '@msdyn365-commerce-modules/search/get-auto-suggest-suggestions',\n action: >getSearchSuggestionsAction,\n input: createInput\n});\n\nexport default getSearchSuggestionsActionDataAction;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport MsDyn365, { getRichTextHtml } from '@msdyn365-commerce/core';\nimport { ProductRefiner, ProductRefinerSource, ProductRefinerValue, SearchSuggestion } from '@msdyn365-commerce/retail-proxy';\nimport { format, getPayloadObject, getTelemetryAttributes, IPayLoad, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ISearchData } from '../search.data';\nimport { ISearchProps } from '../search.props.autogenerated';\n\nexport interface ISearchCategorySuggestProps {\n searchCategorySuggestClass: string;\n searchPageURL: string;\n searchQsp: string | undefined;\n hitPrefix: string;\n hitSuffix: string;\n autoSuggestProps: ISearchProps;\n searchText: string;\n searchRefiners: ProductRefiner[] | undefined;\n suggestions: SearchSuggestion[] | undefined;\n telemetryContent?: ITelemetryContent;\n shouldShowFullPath?: boolean;\n}\n\nexport interface ISearchCategoryViewProps {\n title: React.ReactNode;\n text: React.ReactNode[];\n}\n\nlet payLoad: IPayLoad;\n\n/**\n * CategorySuggestionsComponent.\n * @param props\n */\nexport const CategorySuggestionsComponent = (props: ISearchCategorySuggestProps): ISearchCategoryViewProps | undefined => {\n const {\n suggestions,\n searchText,\n autoSuggestProps: {\n resources: { categorySuggestionHeading }\n }\n } = props;\n\n const reactNodes: React.ReactNode[] = [];\n payLoad = getPayloadObject('click', props.telemetryContent!, '');\n\n suggestions?.map(item => {\n reactNodes.push(_assembleNode(item, props));\n });\n\n const titleNode = _renderTitle(categorySuggestionHeading, searchText);\n\n return { title: titleNode, text: reactNodes };\n};\n\nconst _renderTitle = (categorySuggestionHeading: string, searchText: string) => {\n const categoryAutoSuggestionHeading = categorySuggestionHeading\n ? format(categorySuggestionHeading, searchText)\n : `Search \"${searchText}\" in categories`;\n\n return {categoryAutoSuggestionHeading};\n};\n\nconst _assembleNode = (item: SearchSuggestion, props: ISearchCategorySuggestProps) => {\n const { searchText, hitPrefix, hitSuffix, shouldShowFullPath } = props;\n\n const splitValue = shouldShowFullPath ? item.Value : item.Value && item.Value.split('|').pop();\n const ariaLabel = splitValue\n ? splitValue.replace(new RegExp(`[${hitPrefix}]`, 'gi'), '').replace(new RegExp(`[${hitSuffix}]`, 'gi'), '')\n : item.Value && item.Value.replace(new RegExp(`[${hitPrefix}]`, 'gi'), '').replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n payLoad.contentAction.etext = item.Value;\n const attribute = getTelemetryAttributes(props.telemetryContent!, payLoad);\n return (\n \n \n {_generateLink(item, searchText, props) && _getHighlightedText(splitValue ? splitValue : '', hitPrefix, hitSuffix)}\n \n \n );\n};\n\nconst _generateLink = (suggestion: SearchSuggestion, searchText: string, props: ISearchCategorySuggestProps): string => {\n return suggestion && suggestion.Id ? _getCategoryLink(suggestion.Id, searchText, props) : '';\n};\n\nconst _getCategoryLink = (id: string, searchText: string, props: ISearchCategorySuggestProps): string => {\n const { searchPageURL, searchQsp, searchRefiners } = props;\n\n if (!MsDyn365.isBrowser) {\n return '';\n }\n\n const queryUrl = new URL(searchPageURL, window.location.href);\n\n if (searchQsp && searchText) {\n queryUrl.searchParams.set(searchQsp, searchText);\n }\n\n const categoryRefiners = searchRefiners?.find(refiners => {\n return refiners.SourceValue === ProductRefinerSource.Category;\n });\n const refiner = categoryRefiners?.Values?.find(item => {\n return item.RefinerRecordId === Number.parseInt(id, 10);\n });\n\n const encodedRefiner = refiner && JSON.stringify(compressRefiners([refiner]));\n if (encodedRefiner) {\n queryUrl.searchParams.set('refiners', encodedRefiner);\n }\n\n return queryUrl.href;\n};\n\nconst _getHighlightedText = (suggestion: string, hitPrefix: string, hitSuffix: string): JSX.Element => {\n const formattedText = suggestion\n .replace(new RegExp(`[${hitPrefix}]`, 'gi'), '')\n .replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n\n // eslint-disable-next-line react/no-danger\n return ;\n};\n\n// TODO: This code is currently duplicated in categoryautosuggest need to either remove one of these files\n// or move this code to a common place\nconst compressedRefinerKeys = [\n 'DataTypeValue',\n 'LeftValueBoundString',\n 'RefinerRecordId',\n 'RefinerSourceValue',\n 'RightValueBoundString',\n 'UnitText'\n];\n\n/**\n * Compressed a list of refiners for use in URLs.\n * @param refiners The uncompressed refiners.\n */\nconst compressRefiners = (refiners: ProductRefinerValue[]) => {\n const compressedRefiners: (string | number)[][] = [];\n\n refiners.forEach(refiner => {\n const compressedRefiner: (string | number)[] = [];\n compressedRefinerKeys.forEach(refinerKey => {\n compressedRefiner.push(refiner[refinerKey]);\n });\n compressedRefiners.push(compressedRefiner);\n });\n\n return compressedRefiners;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Button } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface ISearchFormProps {\n hideSearchLabel: boolean | undefined;\n isSearchFormExpanded?: boolean | undefined;\n disableSubmitSearch: boolean | undefined;\n searchTextInput: React.RefObject;\n maxChars: number;\n searchQsp: string;\n searchPlaceholder: string;\n query: string;\n ariaLabelCancel: string;\n ariaLabelSearch: string;\n ariaLabelSubmit: string;\n handleCancelSearchChange(): void;\n handleInputChange(query: string): void;\n}\n\nexport interface ISearchFormViewProps {\n input: React.ReactNode;\n submitBtn: React.ReactNode;\n cancelBtn: React.ReactNode;\n}\n\n/**\n * On Input Change functionality.\n * @param handleInputChange -Input change function.\n * @returns Set updated input value.\n */\nconst onInputChangeFunction = (handleInputChange: (query: string) => void) => (event: React.ChangeEvent) => {\n handleInputChange(event.target.value || '');\n};\nexport const FormComponent = (props: ISearchFormProps): ISearchFormViewProps => {\n const {\n searchQsp,\n searchPlaceholder,\n hideSearchLabel,\n searchTextInput,\n handleInputChange,\n maxChars,\n disableSubmitSearch,\n handleCancelSearchChange,\n query,\n ariaLabelCancel,\n ariaLabelSearch,\n ariaLabelSubmit\n } = props;\n\n const onInputChange = onInputChangeFunction(handleInputChange);\n\n const inputNode = !hideSearchLabel ? (\n \n ) : (\n \n );\n\n const submitBtnNode = !disableSubmitSearch && ;\n\n const cancelBtNoden = (\n \n );\n\n return { input: inputNode, cancelBtn: cancelBtNoden, submitBtn: submitBtnNode };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport MsDyn365, { getRichTextHtml } from '@msdyn365-commerce/core';\nimport { SearchSuggestion } from '@msdyn365-commerce/retail-proxy';\nimport { getPayloadObject, getTelemetryAttributes, IPayLoad, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ISearchData } from '../search.data';\nimport { ISearchProps } from '../search.props.autogenerated';\n\nexport interface ISearchKeywordSuggestProps {\n searchKeywordSuggestClass: string;\n searchPageURL: string;\n searchQsp: string | undefined;\n hitPrefix: string;\n hitSuffix: string;\n autoSuggestProps: ISearchProps;\n searchText: string;\n suggestions: SearchSuggestion[] | undefined;\n telemetryContent?: ITelemetryContent;\n}\n\nexport interface ISearchKeywordViewProps {\n text: React.ReactNode[];\n}\n\nlet payLoad: IPayLoad;\n\n/**\n * KeywordSuggestionsComponent.\n * @param props\n */\nexport const KeywordSuggestionsComponent = (props: ISearchKeywordSuggestProps): ISearchKeywordViewProps | undefined => {\n const { suggestions, hitPrefix, hitSuffix } = props;\n\n payLoad = getPayloadObject('click', props.telemetryContent!, '');\n\n const reactNodes: React.ReactNode[] = [];\n\n suggestions?.map(item => {\n reactNodes.push(_assembleNode(item, hitPrefix, hitSuffix, props));\n });\n\n return { text: reactNodes };\n};\n\nconst _assembleNode = (item: SearchSuggestion, hitPrefix: string, hitSuffix: string, props: ISearchKeywordSuggestProps) => {\n const ariaLabel =\n item.Value && item.Value.replace(new RegExp(`[${hitPrefix}]`, 'gi'), '').replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n payLoad.contentAction.etext = ariaLabel;\n const attribute = getTelemetryAttributes(props.telemetryContent!, payLoad);\n return (\n \n \n {_generateLink(item, hitPrefix, hitSuffix, props) &&\n _getHighlightedText(item.Value ? item.Value : '', hitPrefix, hitSuffix)}\n \n \n );\n};\n\nconst _generateLink = (suggestion: SearchSuggestion, hitPrefix: string, hitSuffix: string, props: ISearchKeywordSuggestProps): string => {\n const { searchPageURL, searchQsp } = props;\n\n const formattedLink = (suggestion.Value as string)\n .replace(new RegExp(`[${hitPrefix}]`, 'gi'), '')\n .replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n\n if (!MsDyn365.isBrowser) {\n return '';\n }\n\n const queryUrl = new URL(searchPageURL, window.location.href);\n if (searchQsp && formattedLink) {\n queryUrl.searchParams.set(searchQsp, formattedLink);\n }\n\n return queryUrl.href;\n};\n\nconst _getHighlightedText = (suggestion: string, hitPrefix: string, hitSuffix: string): JSX.Element => {\n const formattedText = suggestion\n .replace(new RegExp(`[${hitPrefix}]`, 'gi'), '')\n .replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n\n // eslint-disable-next-line react/no-danger\n return ;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Button, getPayloadObject, getTelemetryAttributes, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface ISearchLabelProps {\n isSearchFormExpanded: boolean;\n searchLabelClass: string;\n searchLabelArialLabel: string;\n searchtext: string;\n searchCollapsedLabel: React.RefObject;\n hideSearchLabel?: boolean;\n telemetryContent: ITelemetryContent;\n handleCancelSearchChange(): void;\n}\n\nexport const LabelComponent = (props: ISearchLabelProps) => {\n const {\n searchLabelClass,\n searchLabelArialLabel,\n isSearchFormExpanded,\n searchtext,\n searchCollapsedLabel,\n hideSearchLabel,\n handleCancelSearchChange,\n telemetryContent\n } = props;\n const payLoad = getPayloadObject('click', telemetryContent, searchtext, '');\n const attributes = getTelemetryAttributes(telemetryContent, payLoad);\n\n return (\n \n \n {!hideSearchLabel && (\n \n {searchtext}\n \n )}\n \n
\n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { PriceComponent } from '@msdyn365-commerce/components';\nimport { getRichTextHtml, IActionContext, IImageSettings, Image, ITelemetry } from '@msdyn365-commerce/core';\nimport { SearchSuggestion } from '@msdyn365-commerce/retail-proxy';\nimport { getProductPageUrlSync, ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getPayloadObject,\n getTelemetryAttributes,\n INodeProps,\n IPayLoad,\n ITelemetryContent,\n NodeTag\n} from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ISearchData } from '../search.data';\nimport { ISearchProps } from '../search.props.autogenerated';\n\n/**\n * Search product suggest resources.\n */\nexport interface ISearchProductSuggestResources {\n freePriceText: string;\n}\n\nexport interface ISearchProductSuggestProps {\n searchProductSuggestClass: string;\n searchPageURL: string;\n searchQsp: string | undefined;\n hitPrefix: string;\n hitSuffix: string;\n autoSuggestProps: ISearchProps;\n searchText: string;\n suggestions: SearchSuggestion[] | undefined;\n telemetry: ITelemetry;\n moduleType: string;\n moduleId: string;\n telemetryContent?: ITelemetryContent;\n resources?: ISearchProductSuggestResources;\n}\n\nexport interface ISearchProductViewProps {\n title: React.ReactNode;\n items: ISearchProductItemViewProps[];\n}\n\nexport interface ISearchProductItemViewProps {\n text: React.ReactNode;\n thumbnail: React.ReactNode;\n price: React.ReactNode;\n LiProduct: INodeProps;\n AProduct: INodeProps;\n id: string | undefined;\n}\n\nlet payLoad: IPayLoad;\nlet telemetryContent: ITelemetryContent | undefined;\n\n/**\n * ProductSuggestionsComponent.\n * @param props\n */\nexport const ProductSuggestionsComponent = (props: ISearchProductSuggestProps): ISearchProductViewProps | undefined => {\n const {\n suggestions,\n hitSuffix,\n hitPrefix,\n autoSuggestProps: {\n context: { actionContext },\n resources: { productSuggestionHeading }\n },\n moduleType,\n moduleId\n } = props;\n const reactNodes: ISearchProductItemViewProps[] = [];\n telemetryContent = props.telemetryContent;\n payLoad = getPayloadObject('click', props.telemetryContent!, '');\n\n suggestions?.map(item => {\n reactNodes.push(_assembleNode(item, hitPrefix, hitSuffix, actionContext, props, moduleType, moduleId));\n });\n\n const titleNode = _renderTitle(productSuggestionHeading);\n\n return { title: titleNode, items: reactNodes };\n};\n\nconst _renderTitle = (productSuggestionHeading: string) => {\n const productAutoSuggestionHeading = productSuggestionHeading ? productSuggestionHeading : 'Go to products';\n\n return {productAutoSuggestionHeading};\n};\n\nconst _assembleNode = (\n item: SearchSuggestion,\n hitPrefix: string,\n hitSuffix: string,\n actionContext: IActionContext,\n props: ISearchProductSuggestProps,\n moduleType: string,\n moduleId: string\n): ISearchProductItemViewProps => {\n const altText =\n item.Value && item.Value.replace(new RegExp(`[${hitPrefix}]`, 'gi'), '').replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n\n const price = item.Value3?.Value?.DecimalValue;\n return {\n text: _getHighlightedText(item.Value ? item.Value : '', hitPrefix, hitSuffix),\n thumbnail: _renderThumbnail(item, altText ? altText : '', props),\n price: !ObjectExtensions.isNullOrUndefined(price) && _renderPrice(price, price, moduleId, moduleType, props),\n LiProduct: _getLiWrapper(),\n AProduct: _getAWrapper(item, hitPrefix, hitSuffix, actionContext, props),\n id: item.Id\n };\n};\n\nconst _getLiWrapper = () => {\n return {\n className: 'msc-autoSuggest__productResults-item',\n tag: 'li' as NodeTag\n };\n};\n\nconst _getAWrapper = (\n item: SearchSuggestion,\n hitPrefix: string,\n hitSuffix: string,\n actionContext: IActionContext,\n props: ISearchProductSuggestProps\n) => {\n const {\n autoSuggestProps: { context }\n } = props;\n const ariaLabel =\n item.Value && item.Value.replace(new RegExp(`[${hitPrefix}]`, 'gi'), '').replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n\n payLoad.contentAction.recid = item.Id;\n const attribute = getTelemetryAttributes(telemetryContent!, payLoad);\n const productPrice = context.cultureFormatter.formatCurrency(item.Value3!.Value!.DecimalValue!);\n\n return {\n className: 'msc-autoSuggest__productResults-item',\n tag: 'a' as NodeTag,\n 'aria-label': `${ariaLabel!} ${productPrice}`,\n href: _generateLink(item, hitPrefix, hitSuffix, actionContext),\n ...attribute\n };\n};\n\nconst _generateLink = (suggestion: SearchSuggestion, hitPrefix: string, hitSuffix: string, actionContext: IActionContext) => {\n const formattedLink = (suggestion.Value as string)\n .replace(new RegExp(`[${hitPrefix}]`, 'gi'), '')\n .replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n return suggestion.Value && suggestion.Id\n ? getProductPageUrlSync(formattedLink, (suggestion.Id as unknown) as number, actionContext, undefined)\n : '';\n};\n\nconst _getHighlightedText = (suggestion: string, hitPrefix: string, hitSuffix: string): JSX.Element => {\n const formattedText = suggestion\n .replace(new RegExp(`[${hitPrefix}]`, 'gi'), '')\n .replace(new RegExp(`[${hitSuffix}]`, 'gi'), '');\n\n return (\n // eslint-disable-next-line react/no-danger\n \n );\n};\n\nconst _renderPrice = (\n adjustedPrice: number,\n basePrice: number,\n moduleId: string,\n moduleType: string,\n props: ISearchProductSuggestProps\n): JSX.Element | null => {\n const {\n autoSuggestProps: { context }\n } = props;\n\n return (\n \n );\n};\n\nconst _renderThumbnail = (suggestion: SearchSuggestion, altText: string, props: ISearchProductSuggestProps): JSX.Element | null => {\n const {\n autoSuggestProps: {\n context: {\n request: { gridSettings }\n },\n config: { imageSettings }\n }\n } = props;\n if (imageSettings) {\n imageSettings.cropFocalRegion = true;\n }\n\n if (!suggestion || !suggestion.ImageUrl) {\n props.telemetry.error('Search suggestion content is empty, module wont render.');\n return null;\n }\n\n const defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=40&h=40&m=6', w: 0, h: 0 },\n lg: { q: 'w=40&h=40&m=6', w: 0, h: 0 },\n xl: { q: 'w=40&h=40&m=6', w: 0, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n };\n\n return (\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 { Autosuggestions } from '@msdyn365-commerce/commerce-entities';\nimport MsDyn365, { getCatalogId, getUrlSync } from '@msdyn365-commerce/core';\nimport { ProductRefiner, ProductRefinerSource, ProductsDataActions } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, ObjectExtensions, Random, validateCatalogId } from '@msdyn365-commerce-modules/retail-actions';\nimport { createSearchStateInput } from '@msdyn365-commerce-modules/search-utilities';\nimport { getTelemetryObject, IModuleProps, INodeProps, ITelemetryContent, KeyCodes } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { debounce } from 'lodash';\nimport { Spinner, SpinnerSize } from 'office-ui-fabric-react';\nimport * as React from 'react';\n\nimport getSearchSuggestionsAction, { AutoSuggestInput, SuggestionType } from './actions/get-auto-suggest-suggestions';\nimport {\n CategorySuggestionsComponent,\n FormComponent,\n ISearchCategoryViewProps,\n ISearchKeywordViewProps,\n ISearchProductViewProps,\n KeywordSuggestionsComponent,\n LabelComponent,\n ProductSuggestionsComponent\n} from './components';\nimport { ISearchData } from './search.data';\nimport { ISearchProps, ISuggestionTypeCriterionData, SuggestionTypeCriterionSuggestionType } from './search.props.autogenerated';\n\nexport interface ISearchState {\n isSearchFormExpanded: boolean;\n searchText: string;\n searchKeywordSuggestClass: string;\n searchProductSuggestClass: string;\n searchCategorySuggestClass: string;\n suggestions: Autosuggestions | undefined;\n searchRefiners?: ProductRefiner[] | undefined;\n autoSuggestAriaLabel: string;\n isInitialState: boolean;\n isLoadingAutoSuggest?: boolean;\n}\n\nexport interface ISearchViewProps extends ISearchProps {\n Search: IModuleProps;\n AutoSuggestAriaLabel: INodeProps;\n AutoSuggestAriaLabelText: string;\n searchText: string;\n AutoSuggest: INodeProps;\n KeywordSuggest: INodeProps;\n ProductSuggest: INodeProps;\n CategorySuggest: INodeProps;\n SearchForm: INodeProps;\n FormWrapper: INodeProps;\n UlKeyword: INodeProps;\n UlProduct: INodeProps;\n UlCategory: INodeProps;\n label: React.ReactNode;\n form: React.ReactNode;\n autosuggestKeyword?: ISearchKeywordViewProps;\n autosuggestProduct?: ISearchProductViewProps;\n autosuggestCategory?: ISearchCategoryViewProps;\n callbacks: {\n handleCancelSearchChange(): void;\n handleCancelSearchFocused?(): void;\n };\n isSearchFormExpanded: boolean;\n isLoadingAutoSuggest?: boolean;\n isLoadingNode?: React.ReactNode;\n}\n\n/**\n *\n * Search module.\n * @extends {React.Component, ISearchState>}\n */\nclass Search extends React.Component, ISearchState> {\n private readonly searchTextInput: React.RefObject;\n\n private readonly searchCollapsedLabel: React.RefObject;\n\n private readonly formReference: React.RefObject;\n\n private readonly maxChars: number;\n\n private readonly topResultsCount?: number;\n\n private readonly hitPrefix: string = '{';\n\n private readonly hitSuffix: string = '}';\n\n private readonly waitTime: number = 500;\n\n private readonly autoSuggestResultScreenReaderDiv: React.RefObject;\n\n private readonly autoSuggestResultDiv: React.RefObject;\n\n private readonly searchFormClass: string;\n\n private readonly searchLabelClass: string;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private loadSuggestionsRequestId?: string;\n\n private inputSuggestionType: ISuggestionTypeCriterionData[];\n\n // @ts-expect-error\n private cancellabelDebounce: debounce;\n\n public constructor(props: ISearchProps) {\n super(props);\n this.searchTextInput = React.createRef();\n this.searchCollapsedLabel = React.createRef();\n this.autoSuggestResultScreenReaderDiv = React.createRef();\n this.autoSuggestResultDiv = React.createRef();\n this.formReference = React.createRef();\n this.state = {\n isSearchFormExpanded: false,\n searchText: '',\n searchKeywordSuggestClass: 'ms-search__autoSuggest__keyword',\n searchProductSuggestClass: 'ms-search__autoSuggest__product',\n searchCategorySuggestClass: 'ms-search__autoSuggest__category',\n suggestions: undefined,\n searchRefiners: undefined,\n autoSuggestAriaLabel: '',\n isInitialState: true,\n isLoadingAutoSuggest: false\n };\n this.maxChars =\n (this.props.context &&\n this.props.context.app &&\n this.props.context.app.config &&\n this.props.context.app.config.searchInputMaxLength) ||\n 50;\n\n this.inputSuggestionType = [];\n this.topResultsCount = this.props.config && this.props.config.topResultsCount ? this.props.config.topResultsCount : 5;\n this.searchFormClass = 'ms-search__form';\n this.searchLabelClass = 'ms-search__label';\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n\n this._initSuggestionTypes();\n }\n\n public async componentDidMount(): Promise {\n document.body && document.body.addEventListener('mousedown', this._focusOutTarget);\n window && window.addEventListener('keyup', this._keyup);\n }\n\n public componentWillUnmount(): void {\n document.body && document.body.removeEventListener('mousedown', this._focusOutTarget, false);\n window && window.removeEventListener('keyup', this._keyup, false);\n }\n\n public componentDidUpdate(): void {\n const {\n config: { hideSearchLabel }\n } = this.props;\n const { isSearchFormExpanded, isInitialState } = this.state;\n\n if (!this.props.context.request.params.isEditor) {\n if (!hideSearchLabel && isSearchFormExpanded) {\n this.searchTextInput && this.searchTextInput.current && this.searchTextInput.current.focus();\n } else if (!isInitialState) {\n this.searchCollapsedLabel && this.searchCollapsedLabel.current && this.searchCollapsedLabel.current.focus();\n }\n }\n }\n\n public shouldComponentUpdate(nextProps: ISearchProps, nextState: ISearchState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n // eslint-disable-next-line complexity -- ignore complexity.\n public render(): JSX.Element {\n const {\n context,\n resources: { searchtext, searchLabelArialLabel, cancelBtnAriaLabel, searchBtnAriaLabel, submitBtnAriaLabel },\n config: { hideSearchLabel, disableSubmitSearch, searchplaceholderText, shouldShowFullCategoryPath, className = '' }\n } = this.props;\n\n const {\n isSearchFormExpanded,\n searchText,\n searchKeywordSuggestClass,\n searchProductSuggestClass,\n searchCategorySuggestClass,\n suggestions,\n searchRefiners,\n isLoadingAutoSuggest\n } = this.state;\n\n const searchQsp = (context && context.app && context.app.config && context.app.config.searchQueryStringParameter) || 'q';\n const searchPageURL = getUrlSync('search', context && context.actionContext) || '';\n const searchURL = this._appendQueryParams(searchPageURL, searchText, searchQsp);\n const searchPlaceholder = searchplaceholderText && searchplaceholderText.length > 0 ? searchplaceholderText : 'Search in Fabrikam';\n\n const keywordSuggestions = suggestions?.AllSearchResults?.filter(\n suggestion => suggestion.SuggestionType === SuggestionType.Keyword || suggestion.SuggestionType === SuggestionType.None\n );\n const productSuggestions = suggestions?.AllSearchResults?.filter(\n suggestion => suggestion.SuggestionType === SuggestionType.Product\n );\n const categoryRefiners = searchRefiners?.find(refiner => {\n return refiner.SourceValue === ProductRefinerSource.Category;\n });\n const categorySuggestions = suggestions?.AllSearchResults?.filter(suggestion => {\n if (suggestion.SuggestionType !== SuggestionType.Category) {\n return false;\n }\n const refiner = categoryRefiners?.Values?.find(item => {\n return `${item.RefinerRecordId ?? 0}` === suggestion.Id;\n });\n\n return !ObjectExtensions.isNullOrUndefined(refiner);\n });\n\n const viewProps: ISearchViewProps = {\n ...(this.props as ISearchProps),\n\n Search: {\n moduleProps: this.props,\n className: `${classnames('ms-search', className)} ${disableSubmitSearch ? 'no-submit' : 'with-submit'}`\n },\n AutoSuggestAriaLabel: {\n tag: 'div',\n className: 'msc-autoSuggest__screen-reader',\n 'aria-live': 'assertive',\n ref: this.autoSuggestResultScreenReaderDiv\n },\n AutoSuggestAriaLabelText: this.state.autoSuggestAriaLabel,\n searchText: this.state.searchText,\n AutoSuggest: {\n ref: this.autoSuggestResultDiv,\n className: 'ms-search__autoSuggest'\n },\n KeywordSuggest: {\n className: searchKeywordSuggestClass\n },\n ProductSuggest: {\n className: searchProductSuggestClass\n },\n CategorySuggest: {\n className: searchCategorySuggestClass\n },\n SearchForm: {\n className: `${this.searchFormClass} ${isSearchFormExpanded ? 'bx-show' : 'bx-hide'}`\n },\n FormWrapper: {\n tag: 'form',\n ref: this.formReference,\n className: 'ms-search__searchForm',\n 'aria-label': 'Search',\n name: 'searchForm',\n role: 'search',\n action: searchURL,\n autoComplete: 'off',\n onSubmit: this._handleSubmit\n },\n UlKeyword: {\n tag: 'ul',\n className: classnames('msc-autoSuggest__keywordResults-items', className)\n },\n UlProduct: {\n tag: 'ul',\n className: classnames('msc-autoSuggest__productResults-items', className)\n },\n UlCategory: {\n tag: 'ul',\n className: classnames('msc-autoSuggest__categoryResults-items', className)\n },\n label: LabelComponent({\n isSearchFormExpanded,\n searchLabelClass: `${this.searchLabelClass} ${isSearchFormExpanded ? 'bx-hide' : 'bx-show'}`,\n searchtext,\n searchLabelArialLabel,\n searchCollapsedLabel: this.searchCollapsedLabel,\n hideSearchLabel,\n handleCancelSearchChange: this._handleCancelSearchChange,\n telemetryContent: this.telemetryContent\n }),\n form: FormComponent({\n ariaLabelCancel: cancelBtnAriaLabel,\n ariaLabelSearch: searchBtnAriaLabel,\n ariaLabelSubmit: submitBtnAriaLabel,\n hideSearchLabel,\n searchTextInput: this.searchTextInput,\n disableSubmitSearch,\n handleInputChange: this._handleInputChange,\n handleCancelSearchChange: this._handleCancelSearchChange,\n maxChars: this.maxChars,\n searchQsp,\n searchPlaceholder,\n query: searchText\n }),\n autosuggestKeyword:\n searchText &&\n searchText.length > 0 &&\n (isLoadingAutoSuggest || (keywordSuggestions && ArrayExtensions.hasElements(keywordSuggestions)))\n ? KeywordSuggestionsComponent({\n searchKeywordSuggestClass,\n searchPageURL,\n searchQsp,\n hitPrefix: this.hitPrefix,\n hitSuffix: this.hitSuffix,\n autoSuggestProps: this.props,\n searchText,\n suggestions: keywordSuggestions,\n telemetryContent: this.telemetryContent\n })\n : undefined,\n autosuggestProduct:\n searchText &&\n searchText.length > 0 &&\n (isLoadingAutoSuggest || (productSuggestions && ArrayExtensions.hasElements(productSuggestions)))\n ? ProductSuggestionsComponent({\n searchProductSuggestClass,\n searchPageURL,\n searchQsp,\n hitPrefix: this.hitPrefix,\n hitSuffix: this.hitSuffix,\n autoSuggestProps: this.props,\n searchText,\n suggestions: productSuggestions,\n telemetry: this.props.telemetry,\n moduleType: this.props.typeName,\n moduleId: this.props.id,\n telemetryContent: this.telemetryContent,\n resources: this.props.resources\n })\n : undefined,\n autosuggestCategory:\n searchText &&\n searchText.length > 0 &&\n (isLoadingAutoSuggest || (categorySuggestions && ArrayExtensions.hasElements(categorySuggestions)))\n ? CategorySuggestionsComponent({\n searchCategorySuggestClass,\n searchPageURL,\n searchQsp,\n hitPrefix: this.hitPrefix,\n hitSuffix: this.hitSuffix,\n autoSuggestProps: this.props,\n searchText,\n suggestions: categorySuggestions,\n searchRefiners,\n telemetryContent: this.telemetryContent,\n shouldShowFullPath: shouldShowFullCategoryPath\n })\n : undefined,\n callbacks: {\n handleCancelSearchChange: this._handleCancelSearchChange,\n handleCancelSearchFocused: this._handleCancelSearchFocused\n },\n isSearchFormExpanded: this.state.isSearchFormExpanded,\n isLoadingAutoSuggest,\n isLoadingNode: this._isLoadingNode()\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n private _initSuggestionTypes() {\n const suggestionTypes = this.props.config.suggestionTypeCriterion;\n\n const suggestions = ArrayExtensions.unique(ArrayExtensions.validValues(suggestionTypes));\n if (!ArrayExtensions.hasElements(suggestions)) {\n this.inputSuggestionType = [\n { SuggestionType: SuggestionTypeCriterionSuggestionType.keyword },\n { SuggestionType: SuggestionTypeCriterionSuggestionType.product },\n { SuggestionType: SuggestionTypeCriterionSuggestionType.scopedCategory }\n ];\n return;\n }\n\n const validSuggestions = suggestions.filter(suggestion => suggestion.SuggestionType);\n if (ArrayExtensions.hasElements(validSuggestions)) {\n this.inputSuggestionType = validSuggestions;\n return;\n }\n\n this.inputSuggestionType = [];\n }\n\n /**\n * Function to create the ReactNode for loading Autosuggest result.\n * @returns ReachNode for loading Autosuggest result.\n */\n private readonly _isLoadingNode = (): React.ReactNode => {\n const loadingText = this.props.resources.autoSuggestResultLoadingMessage;\n return ;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private readonly _focusOutTarget = (e: any): void => {\n const { suggestions } = this.state;\n\n if (suggestions && suggestions.AllSearchResults && e.target.closest('.ms-search') === null) {\n this._clearAutoSuggestState();\n }\n };\n\n private readonly _keyup = (e: KeyboardEvent): void => {\n const { suggestions } = this.state;\n\n if (suggestions && suggestions.AllSearchResults && e.keyCode === KeyCodes.Escape) {\n this._clearAutoSuggestState();\n } else if (this.state.isSearchFormExpanded && e.keyCode === KeyCodes.Escape) {\n if (this.state.isSearchFormExpanded) {\n this.setState({ isSearchFormExpanded: false });\n }\n }\n\n if (\n !(\n (this.formReference.current && this.formReference.current.contains((e.target as unknown) as Node)) ||\n (this.autoSuggestResultDiv.current && this.autoSuggestResultDiv.current.contains((e.target as unknown) as Node))\n )\n ) {\n if (suggestions && suggestions.AllSearchResults) {\n this._clearAutoSuggestState();\n }\n\n if (this.state.isSearchFormExpanded) {\n this.setState({ isSearchFormExpanded: false });\n }\n }\n };\n\n private readonly _clearAutoSuggestState = (): void => {\n const {\n context: { actionContext },\n data: { searchState }\n } = this.props;\n\n if (this.searchTextInput.current && this.searchTextInput.current.value.length > 0) {\n searchState.searchText = '';\n searchState.defaultBasicSearchUrl = '';\n searchState.searchQueryStringParameter = '';\n actionContext ? actionContext.update(createSearchStateInput(searchState), searchState) : null;\n this.searchTextInput.current.value = '';\n }\n\n this.setState({ searchText: '', suggestions: undefined, searchRefiners: undefined });\n };\n\n private async _getSearchSuggestions(loadSuggestionsRequestId: string, query: string) {\n try {\n const searchSuggestions = await getSearchSuggestionsAction(\n new AutoSuggestInput(query, this.topResultsCount, this._getSuggestionType(), this.hitPrefix, this.hitSuffix),\n this.props.context.actionContext\n );\n if (loadSuggestionsRequestId !== this.loadSuggestionsRequestId) {\n return undefined;\n }\n return searchSuggestions;\n } catch (error) {\n if (loadSuggestionsRequestId !== this.loadSuggestionsRequestId) {\n return undefined;\n }\n this.setState({ suggestions: undefined, searchRefiners: undefined, autoSuggestAriaLabel: this._setAutoSuggestResultCount() });\n this.props.telemetry.exception(error);\n this.props.telemetry.debug('Unable to get auto suggest results');\n return undefined;\n }\n }\n\n private async _updateSearchRefiners(loadSuggestionsRequestId: string, query: string, suggestions: Autosuggestions | undefined) {\n try {\n const refiners = await this._getSearchRefiners(query);\n if (loadSuggestionsRequestId !== this.loadSuggestionsRequestId) {\n return;\n }\n this.setState({\n suggestions,\n searchRefiners: refiners,\n autoSuggestAriaLabel: this._setAutoSuggestResultCount(suggestions),\n isLoadingAutoSuggest: false\n });\n } catch (error) {\n if (loadSuggestionsRequestId !== this.loadSuggestionsRequestId) {\n return;\n }\n this.setState({ suggestions, searchRefiners: undefined, autoSuggestAriaLabel: this._setAutoSuggestResultCount(suggestions) });\n this.props.telemetry.exception(error);\n this.props.telemetry.debug('Unable to get refiners results');\n }\n }\n\n private _loadSuggestions(query: string) {\n this.cancellabelDebounce = debounce(async () => {\n this.setState({ isLoadingAutoSuggest: true });\n const loadSuggestionsRequestId = Random.Guid.generateGuid();\n this.loadSuggestionsRequestId = loadSuggestionsRequestId;\n const searchSuggestions = await this._getSearchSuggestions(loadSuggestionsRequestId, query);\n await this._updateSearchRefiners(loadSuggestionsRequestId, query, searchSuggestions);\n }, this.waitTime);\n\n setTimeout(() => {\n this.cancellabelDebounce();\n }, 0);\n }\n\n private readonly _handleInputChange = (query: string): void => {\n if (!query || query.length <= this.maxChars) {\n this.setState({ searchText: query });\n }\n\n if (this.cancellabelDebounce) {\n this.cancellabelDebounce.cancel();\n }\n\n const {\n context,\n data: { searchState }\n } = this.props;\n\n if (context) {\n if (query && query.length > 0) {\n if (query.length > this.maxChars) {\n return;\n }\n\n if (ArrayExtensions.hasElements(this.inputSuggestionType)) {\n this._loadSuggestions(query);\n }\n\n searchState.searchText = query;\n } else {\n this.setState({ suggestions: undefined, searchRefiners: undefined });\n searchState.searchText = '';\n }\n context.actionContext.update(createSearchStateInput(searchState), searchState);\n }\n };\n\n private _getSuggestionType(): string {\n const distinctSuggestionTypes: string[] = this.inputSuggestionType.map(\n suggestionTypeItem => suggestionTypeItem.SuggestionType!.charAt(0).toUpperCase() + suggestionTypeItem.SuggestionType!.slice(1)\n );\n return distinctSuggestionTypes.join(',');\n }\n\n private async _getSearchRefiners(searchText: string): Promise {\n const { actionContext: ctx } = this.props.context;\n const catalogId = getCatalogId(ctx.requestContext);\n validateCatalogId(catalogId);\n return ProductsDataActions.getProductSearchRefinersAsync(\n { callerContext: ctx },\n {\n SearchCondition: searchText,\n Context: {\n ChannelId: +ctx.requestContext.apiSettings.channelId,\n CatalogId: catalogId\n }\n }\n );\n }\n\n private readonly _handleSubmit = (\n e: React.MouseEvent | React.KeyboardEvent | React.FormEvent\n ): void => {\n const {\n config: { disableSubmitSearch },\n context: {\n actionContext,\n app: {\n config: { searchQueryStringParameter }\n }\n }\n } = this.props;\n\n const query = this.searchTextInput.current && this.searchTextInput.current.value;\n e.preventDefault();\n\n if (!query || (query && query.length === 0) || disableSubmitSearch) {\n this.searchTextInput && this.searchTextInput.current && this.searchTextInput.current.focus();\n } else {\n const searchQsp = searchQueryStringParameter || 'q';\n const searchURL = this._appendQueryParams(getUrlSync('search', actionContext) || '', query, searchQsp);\n document.location.href = searchURL;\n }\n };\n\n private readonly _handleCancelSearchChange = (): void => {\n const { isSearchFormExpanded, suggestions } = this.state;\n\n if (!isSearchFormExpanded) {\n this.setState({\n isSearchFormExpanded: true,\n searchText: '',\n isInitialState: false\n });\n } else {\n if (suggestions && suggestions.AllSearchResults) {\n this._clearAutoSuggestState();\n }\n this.setState({ isSearchFormExpanded: false });\n }\n };\n\n private readonly _handleCancelSearchFocused = (): void => {\n const { suggestions } = this.state;\n if (!(suggestions && suggestions.AllSearchResults)) {\n this._clearAutoSuggestState();\n this.setState({ isSearchFormExpanded: false });\n }\n };\n\n private readonly _appendQueryParams = (route: string, query: string, qsp: string): string => {\n if (!MsDyn365.isBrowser) {\n return '';\n }\n\n const queryUrl = new URL(route, window.location.href);\n if (qsp && query) {\n queryUrl.searchParams.set(qsp, query);\n }\n\n return queryUrl.href;\n };\n\n private readonly _setAutoSuggestResultCount = (result?: Autosuggestions) => {\n if (this.autoSuggestResultScreenReaderDiv.current !== null) {\n const ariaLiveRegion = this.autoSuggestResultScreenReaderDiv.current;\n const suggestResultString = this.props.resources.autoSuggestFoundMessage;\n const emptyResultString = this.props.resources.noAutoSuggestionMessage;\n ariaLiveRegion.innerText =\n result && result.AllSearchResults && result.AllSearchResults.length > 0 ? suggestResultString : emptyResultString;\n ariaLiveRegion.setAttribute('aria-live', 'assertive');\n return ariaLiveRegion.innerText;\n }\n return '';\n };\n}\n\nexport default Search;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ITelemetry } from '@msdyn365-commerce/core';\nimport { AttributeDataType, DisplayTemplate, ProductRefinerValue, RefinerType } from '@msdyn365-commerce/retail-proxy';\n\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { DimensionTypes } from '@msdyn365-commerce-modules/retail-actions';\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\n\n/**\n * Types of product refiner values.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\nexport enum ProductRefinerValueDataTypeValue {\n /**\n * Range slider is used for selections like price.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Range = 1,\n\n /**\n * Range input is a different way to specify ranges and can be expressed with input boxes\n * as well as a set of discrete single-select type values.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n RangeInput = 4,\n\n /**\n * This is a discrete list item, either multi-select or single-select.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n List = 5,\n\n /**\n * Boolean types allows only single-select.\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Boolean = 6\n}\n\n/**\n * Types of product refiners.\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\nexport enum ProductRefinerTypeValue {\n /**\n * Refiner values are single-select.\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Single = 0,\n\n /**\n * Refiner values are multi-select.\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Multi = 1\n}\n\n/**\n * ProductRefinerSource enum type.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\nexport enum ProductRefinerSource {\n /**\n * The None member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n None = 0,\n\n /**\n * The Attribute member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Attribute = 1,\n\n /**\n * The Category member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Category = 2,\n\n /**\n * The Price member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Price = 3,\n\n /**\n * The Rating member.\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\n * @example\n * ```\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\n * ```\n */\n Rating = 4\n}\n\nexport interface IRefineItemData {\n sourceValue?: number;\n swatchImageUrl?: string;\n swatchColorHexCode?: string;\n refinerItemId: number;\n dataTypeValue?: number;\n name: string;\n label: string;\n count?: number;\n isChecked: boolean;\n refineItemUrl?: string;\n minValue?: string;\n maxValue?: string;\n dimensionType?: DimensionTypes;\n rowNumber?: number;\n unitText?: string;\n updatedSliderMaxValue?: string;\n updatedSliderMinValue?: string;\n}\n/**\n * Checks if the data type value corresponds to a slider.\n * @param dataTypeValue\n */\nexport function isRangeType(dataTypeValue: number | undefined): boolean {\n return dataTypeValue === AttributeDataType.Currency || dataTypeValue === AttributeDataType.Decimal;\n}\n\n/**\n * Checks if the data type value corresponds to a range type integer.\n * @param dataTypeValue\n */\nexport function isRangeTypeForInteger(dataTypeValue: number | undefined): boolean {\n return (\n dataTypeValue === AttributeDataType.Currency ||\n dataTypeValue === AttributeDataType.Decimal ||\n dataTypeValue === AttributeDataType.Integer\n );\n}\n\n/**\n * Checks if the data type value corresponds to a custom input box Range.\n * @param dataTypeValue\n */\nexport function isCustomRangeTypeIntegerSelected(\n selectedRefinementCriterion: ProductRefinerValue,\n parentProductRefinerHierarchy: IProductRefinerHierarchy\n): boolean {\n return (\n selectedRefinementCriterion?.RowNumber !== undefined &&\n selectedRefinementCriterion?.RowNumber !== null &&\n selectedRefinementCriterion?.DataTypeValue === AttributeDataType.Integer &&\n parentProductRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range\n );\n}\n\n/**\n * Checks if the selectedRefinementCriterion is siingle type with API va;ues or custom type.\n * If custom type then RowNumber is null\n * @param dataTypeValue\n */\nexport function isSingleSelectRangeTypeIntegerSelected(\n selectedRefinementCriterion: ProductRefinerValue,\n productRefinerValue: ProductRefinerValue\n): boolean {\n return (\n productRefinerValue.LeftValueBoundString === selectedRefinementCriterion?.LeftValueBoundString &&\n productRefinerValue.RightValueBoundString === selectedRefinementCriterion?.RightValueBoundString &&\n selectedRefinementCriterion?.RowNumber !== undefined &&\n selectedRefinementCriterion?.RowNumber !== null &&\n selectedRefinementCriterion !== undefined\n );\n}\n\n/**\n * Find the refinement criterion associated with this product refiner value.\n * @param productRefinerValue Product refiner value to match.\n * @param refinementCriteria Selected refinement criteria.\n */\nexport function findMatchingRefinementCriterion(\n productRefinerValue: ProductRefinerValue,\n refinementCriteria: ProductRefinerValue[]\n): ProductRefinerValue | undefined {\n // If the value is a range, then match only on data type value; otherwise match on item string\n return refinementCriteria.find((refinementCriterion: ProductRefinerValue) =>\n isMatchingRefinementCriterion(productRefinerValue, refinementCriterion)\n );\n}\n\n/**\n * Find the refinement criterion associated with this product refiner value.\n * @param productRefinerValue Product refiner value to match.\n * @param refinementCriteria Selected refinement criteria.\n * @param refinementCriterion\n */\nexport function isMatchingRefinementCriterion(\n productRefinerValue: ProductRefinerValue,\n refinementCriterion: ProductRefinerValue,\n parent?: IProductRefinerHierarchy\n): boolean {\n // If the value is a range, then match only on data type value; otherwise match on item string\n // Distinguish by displaytype also\n return (\n refinementCriterion.RefinerRecordId === productRefinerValue.RefinerRecordId &&\n refinementCriterion.RefinerSourceValue === productRefinerValue.RefinerSourceValue &&\n refinementCriterion.DataTypeValue === productRefinerValue.DataTypeValue &&\n ((parent?.DisplayTemplateValue === DisplayTemplate.Range\n ? isRangeType(refinementCriterion.DataTypeValue)\n : isRangeTypeForInteger(refinementCriterion.DataTypeValue)) ||\n refinementCriterion.LeftValueBoundString === productRefinerValue.LeftValueBoundString)\n );\n}\n\nexport function getIntegerRangeName(productRefinerValue: ProductRefinerValue): string {\n let rangeValue = '';\n\n if (productRefinerValue.LeftValueBoundString === '' && productRefinerValue.RightValueBoundString !== '') {\n rangeValue = `< ${productRefinerValue.RightValueBoundLocalizedString || productRefinerValue.RightValueBoundString}`;\n } else if (productRefinerValue.RightValueBoundString === '' && productRefinerValue.LeftValueBoundString !== '') {\n rangeValue = `> ${productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString}`;\n } else if (productRefinerValue.RightValueBoundString !== '' && productRefinerValue.LeftValueBoundString !== '') {\n rangeValue = `${productRefinerValue.LeftValueBoundLocalizedString ||\n productRefinerValue.LeftValueBoundString} - ${productRefinerValue.RightValueBoundString ||\n productRefinerValue.RightValueBoundString}`;\n }\n return rangeValue;\n}\n\n/**\n * Get input without formatting.\n * @param input - Input string.\n * @returns - Returns number.\n */\nexport function getInputWithoutFormatting(input: string): string {\n // First try to cast raw input to a number\n const inputAsNumber = Number(input);\n if (!Number.isNaN(inputAsNumber)) {\n return input;\n }\n\n // Otherwise try a reverse lookup and fall back to the raw input if all else fails\n // const reverseLookupResult = formattedPriceReverseLookup.get(input);\n // return reverseLookupResult || input;\n return input;\n}\n\nexport function getUpdatedRefinementCriteria(\n itemToggleNotification: IRefineItemToggleNotification,\n currentRefinementCriteria: ProductRefinerValue[]\n): ProductRefinerValue[] {\n const updatedRefinementCriteria: ProductRefinerValue[] = [];\n let toggledItemFound = false;\n\n // Keeping only itemToggled value for integer-range type in currentRefinementCriteria\n if (\n itemToggleNotification.parentProductRefinerHierarchy.DataTypeValue === AttributeDataType.Integer &&\n itemToggleNotification.parentProductRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range\n ) {\n currentRefinementCriteria = currentRefinementCriteria.filter(r => {\n return r.RefinerRecordId !== itemToggleNotification.productRefinerValue.RefinerRecordId;\n });\n }\n\n currentRefinementCriteria.forEach((selectedCriterion: ProductRefinerValue) => {\n if (\n isMatchingRefinementCriterion(\n itemToggleNotification.productRefinerValue,\n selectedCriterion,\n itemToggleNotification.parentProductRefinerHierarchy\n )\n ) {\n toggledItemFound = true;\n if (itemToggleNotification.isSelecting) {\n const next = {\n ...selectedCriterion,\n LeftValueBoundString:\n (itemToggleNotification.rangeStart !== undefined && `${itemToggleNotification.rangeStart}`) ||\n selectedCriterion.LeftValueBoundString,\n RightValueBoundString:\n (itemToggleNotification.rangeEnd !== undefined && `${itemToggleNotification.rangeEnd}`) ||\n selectedCriterion.RightValueBoundString\n };\n updatedRefinementCriteria.push(next);\n } // Else the item is being de-selected, so omit it from the refinement criteria\n } else {\n // Keep existing criterion because it is not in the item toggle notification\n updatedRefinementCriteria.push(selectedCriterion);\n }\n });\n\n if (!toggledItemFound) {\n const next = {\n ...itemToggleNotification.productRefinerValue,\n LeftValueBoundString:\n (itemToggleNotification.rangeStart !== undefined && `${itemToggleNotification.rangeStart}`) ||\n itemToggleNotification.productRefinerValue.LeftValueBoundString,\n RightValueBoundString:\n (itemToggleNotification.rangeEnd !== undefined && `${itemToggleNotification.rangeEnd}`) ||\n itemToggleNotification.productRefinerValue.RightValueBoundString\n };\n updatedRefinementCriteria.push(next);\n\n // If single select, then deselect any others in the parent refiner group\n if (\n (itemToggleNotification.productRefinerValue.DataTypeValue === AttributeDataType.Text ||\n itemToggleNotification.productRefinerValue.DataTypeValue === AttributeDataType.TrueFalse) &&\n itemToggleNotification.parentProductRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect\n ) {\n itemToggleNotification.parentProductRefinerHierarchy.Values.forEach((child: ProductRefinerValue) => {\n if (child.RefinerRecordId === next.RefinerRecordId && child.LeftValueBoundString === next.LeftValueBoundString) {\n // Do nothing\n } else {\n const matchingIndex = updatedRefinementCriteria.findIndex((criterion: ProductRefinerValue) =>\n isMatchingRefinementCriterion(child, criterion, itemToggleNotification.parentProductRefinerHierarchy)\n );\n if (matchingIndex > -1) {\n updatedRefinementCriteria.splice(matchingIndex, 1);\n }\n }\n });\n }\n }\n\n return updatedRefinementCriteria;\n}\n\nexport function formatPrice(\n amount: string | undefined,\n currency: string | undefined,\n locale: string | undefined,\n telemetry: ITelemetry\n): string {\n if (!amount || !currency) {\n telemetry.trace(`[refine-menu.utilities.formatPrice] could not format price for ${amount} ${currency}`);\n return amount || '';\n }\n const priceAmount = (amount && Number(amount)) || 0;\n let result: string;\n\n try {\n result = new Intl.NumberFormat(locale, {\n style: 'currency',\n currencyDisplay: 'symbol',\n currency,\n minimumFractionDigits: 0\n }).format(priceAmount);\n } catch (error) {\n result = `${priceAmount} ${currency}`;\n telemetry.warning(`[refine-menu.utilities.formatPrice] Failed to format price for ${result}: ${error}`);\n }\n\n return result;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { AttributeDataType, DisplayTemplate, ProductRefinerValue } from '@msdyn365-commerce/retail-proxy';\nimport { getPayloadObject, getTelemetryAttributes, IPayLoad } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { computed } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { ProductListInventoryFilteringOptions } from '../actions';\nimport { IChoiceSummaryProps } from './choice-summary.props';\nimport { getIntegerRangeName, isMatchingRefinementCriterion, isRangeType } from './utilities';\n\ninterface IRefinerMap {\n key: string;\n value: ProductRefinerValue;\n rangeDisplayType?: number | undefined;\n}\n\n/**\n * ChoiceSummary component.\n */\n@observer\nexport default class ChoiceSummary extends React.PureComponent {\n private readonly closeButtonGlyph: string = 'msi-close-btn';\n\n private readonly payLoad: IPayLoad;\n\n @computed get selectedRefinersMap(): IRefinerMap[] {\n let { selectedChoices } = this.props;\n const { channelInventoryConfigurationId, refinerHierarchy } = this.props;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- app configs are of generic type\n if (this.props.context?.app.config.productListInventoryDisplay === ProductListInventoryFilteringOptions.HideOOS) {\n selectedChoices = selectedChoices.filter(choice => {\n const parent = refinerHierarchy.find(\n (hierarchy: IProductRefinerHierarchy) =>\n !!hierarchy.Values.find((value: ProductRefinerValue) => isMatchingRefinementCriterion(value, choice))\n );\n return parent && parent.RecordId !== channelInventoryConfigurationId;\n });\n }\n return selectedChoices.map((selectedRefiner: ProductRefinerValue, index) => {\n const rangeParentDisplay = refinerHierarchy.filter(p => p.RecordId === selectedRefiner.RefinerRecordId);\n return {\n key: this._getKeyForRefinerValue(selectedRefiner, index.toString()),\n value: selectedRefiner,\n // parameter to store Display Template type\n rangeDisplayType: rangeParentDisplay[0]?.DisplayTemplateValue || undefined\n } as IRefinerMap;\n });\n }\n\n constructor(props: Readonly) {\n super(props);\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, '');\n }\n\n public render(): JSX.Element {\n const { clearAllText, label, classNames, choiceAriaLabel, closeAriaLabel } = this.props;\n const items = this.selectedRefinersMap;\n this.payLoad.contentAction.etext = clearAllText;\n const clearAllAttributes = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\n return (\n \n {items.length > 0 && label &&
{label}}\n
\n {items.map((item: IRefinerMap) => {\n this.payLoad.contentAction.etext = item.key;\n const attribute = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\n // Get range value for Range display and integer type only (not for Integer with TextBox(4) display)\n const rangeInteger =\n item.value.DataTypeValue === AttributeDataType.Integer &&\n item.rangeDisplayType &&\n item.rangeDisplayType === DisplayTemplate.Range &&\n item.value.RefinerRecordId !== 0;\n const newIntRange = rangeInteger\n ? item.key\n : item.value.LeftValueBoundString && item.value.LeftValueBoundLocalizedString === ''\n ? item.value.LeftValueBoundString\n : (item.value.LeftValueBoundLocalizedString || item.value.LeftValueBoundLocalizedString === undefined) &&\n item.value.RefinerRecordId === 0\n ? item.key\n : item.value.LeftValueBoundString;\n return (\n - \n \n {newIntRange}\n \n \n
\n );\n })}\n
\n {items.length > 0 && clearAllText && (\n
\n {clearAllText}\n \n )}\n \n {` `}\n {text}\n {` `}\n
\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ICoreContext, IGridSettings, IImageData, IImageSettings, Image, IRequestContext } from '@msdyn365-commerce/core';\nimport { SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { getFallbackImageUrl, getProductPageUrlSync } from '@msdyn365-commerce-modules/retail-actions';\nimport { getPayloadObject, getTelemetryAttributes, ITelemetryContent, onTelemetryClick } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ISearchResultContainerResources } from '../search-result-container.props.autogenerated';\n\n// Import { IComponent, IComponentProps, ICoreContext, IGridSettings, IImageData, IImageSettings, Image, msdyn365Commerce } from '@msdyn365-commerce/core';\n\ninterface IFeatureSearchResultItem {\n product: SimpleProduct | null;\n context: ICoreContext;\n resources: ISearchResultContainerResources;\n imageSettings?: IImageSettings;\n moduleType: string;\n moduleId: string;\n telemetryContent?: ITelemetryContent;\n recommendation?: string;\n}\n\nexport const FeatureSearchResultItem: React.FC = ({\n product,\n context,\n imageSettings,\n resources,\n telemetryContent,\n recommendation\n}) => {\n if (product === null) {\n return null;\n }\n\n const productName = product.Name;\n const productRecordId = product && product.RecordId ? product.RecordId : 0;\n const productUrl = getProductPageUrlSync(product.Name || '', productRecordId, context && context.actionContext, undefined);\n const fallbackImage = getFallbackImageUrl(\n product.ItemId,\n context.actionContext.requestContext.apiSettings,\n context.request.app?.config?.OmniChannelMedia\n );\n const heading =\n recommendation && recommendation === 'descriptions' ? resources.featureSimilarDescriptionTitle : resources.featureSimilarLooksTitle;\n\n // Construct telemetry attribute to render\n const payLoad = getPayloadObject('click', telemetryContent!, productName!, productRecordId.toString());\n\n const attribute = getTelemetryAttributes(telemetryContent!, payLoad);\n return (\n \n
\n \n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n product.PrimaryImageUrl,\n product.Name,\n fallbackImage,\n context.actionContext.requestContext\n )}\n
\n \n \n
{heading}
\n {renderProductTitle(product?.Name)}\n
{title}
;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\n\ninterface ILink {\n className?: string;\n text?: string;\n href?: string;\n ariaLabel?: string;\n}\n\nexport const Link: React.FC = ({ text, className, href, ariaLabel }) => (\n \n {' '}\n {text}{' '}\n \n);\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nexport interface ISearchResultModalViewProps {\n modal: React.ReactElement;\n modalHeader: React.ReactElement;\n modalFooter: React.ReactElement;\n modalBody: React.ReactElement;\n}\n\ninterface IModalToggleProps {\n innerRef: React.RefObject | undefined;\n id: string;\n text: string;\n ariaLabel: string;\n onClick(): void;\n}\n\nexport interface ISearchResultModalResources {\n modalTitle: string;\n modalCloseButtonText: string;\n}\n\nexport interface ISearchResultModalProps {\n resources: ISearchResultModalResources;\n isOpen: boolean;\n returnRef: React.RefObject | undefined;\n onModalToggle(): void;\n}\n\nexport const ModalToggle: React.FC = (props: IModalToggleProps) => {\n const { text, onClick, ariaLabel, innerRef, id } = props;\n return (\n \n );\n};\n\nexport const SearchResultModal = (props: ISearchResultModalProps): ISearchResultModalViewProps => {\n return {\n modal: modalNode(props),\n modalHeader: modalHeaderNode(props),\n modalFooter: modalFooterNode(props),\n modalBody: \n };\n};\n\nconst modalNode = (props: ISearchResultModalProps) => {\n return (\n \n );\n};\n\nconst modalHeaderNode = (props: ISearchResultModalProps) => {\n return {props.resources.modalTitle};\n};\n\nconst modalFooterNode = (props: ISearchResultModalProps) => {\n return (\n \n \n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductsDimensionsAvailabilities } from '@msdyn365-commerce/commerce-entities';\nimport { IPriceComponentResources, ProductComponent } from '@msdyn365-commerce/components';\nimport { ICoreContext, IImageSettings } from '@msdyn365-commerce/core';\nimport { ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ISearchResultContainerResources } from '../search-result-container.props.autogenerated';\n\ninterface IProductSearchResultItems {\n products: ProductSearchResult[];\n context: ICoreContext;\n resources: ISearchResultContainerResources;\n imageSettings?: IImageSettings;\n moduleType: string;\n moduleId: string;\n allowBackNavigation?: boolean;\n telemetryContent: ITelemetryContent;\n quickviewSlot?: {} | null | undefined;\n productComparisonButton?: {} | null | undefined;\n channelInventoryConfigurationId?: number;\n isPriceMinMaxEnabled?: boolean;\n productsDimensionAvailabilities?: IProductsDimensionsAvailabilities[][];\n}\n\n/**\n * Returns the product inventory label.\n * @param channelInventoryConfigurationId - The channel configuration Id.\n * @param product - The product.\n * @returns The inventory label.\n */\nexport function getInventoryLabel(channelInventoryConfigurationId: number | undefined, product: ProductSearchResult): string | undefined {\n if (!channelInventoryConfigurationId || !ArrayExtensions.hasElements(product.AttributeValues)) {\n return undefined;\n }\n const inventoryAttribute = product.AttributeValues.find(attribute => attribute.RecordId === channelInventoryConfigurationId);\n if (inventoryAttribute) {\n return inventoryAttribute.TextValue;\n }\n return undefined;\n}\n\nexport const ProductSearchResultItems: React.FC = ({\n products,\n context,\n imageSettings,\n resources,\n moduleType,\n moduleId,\n allowBackNavigation,\n telemetryContent,\n quickviewSlot,\n productComparisonButton,\n channelInventoryConfigurationId,\n isPriceMinMaxEnabled,\n productsDimensionAvailabilities\n}) => {\n const priceResources: IPriceComponentResources = {\n priceRangeSeparator: resources.priceRangeSeparator\n };\n return (\n \n {products.map((product: ProductSearchResult, index: number) => (\n - \n \n ArrayExtensions.hasElements(dimensionAvailability) &&\n dimensionAvailability[0].masterProductId === product.MasterProductId\n )}\n />\n
\n ))}\n
\n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ISliderLabel, ISliderThumbProps, Slider } from '@msdyn365-commerce-modules/utilities';\nimport debounce from 'lodash/debounce';\nimport { computed } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { IRefineItemProps, IRefineItemState } from './refine-item';\n\ntype InputType = 'Min' | 'Max';\n\nexport type RangeRefineItemType = 'slider' | 'input';\n\n/**\n * Range refine item properties.\n */\nexport interface IRangeRefineItemProps extends IRefineItemProps {\n rangeType: RangeRefineItemType;\n minValueSliderThumbAriaLabel?: string;\n maxValueSliderThumbAriaLabel?: string;\n sliderKey?: string;\n}\n\n/**\n * Range refine item state.\n */\nexport interface IRangeRefineItemState extends IRefineItemState {\n validationErrorMin: string | undefined;\n validationErrorMax: string | undefined;\n selectedMin: string | undefined;\n selectedMax: string | undefined;\n touchedMin: boolean;\n touchedMax: boolean;\n sliderId: string;\n minValue: string | undefined;\n maxValue: string | undefined;\n labels: ISliderLabel[];\n sliderThumbs: ISliderThumbProps[];\n}\n\n/**\n * RangeRefineItem component (controlled by RefineSubmenu).\n */\n@observer\nexport default class RangeRefineItem extends React.Component {\n private readonly _formattedPriceReverseLookup: Map = new Map();\n\n private readonly minInput: React.RefObject;\n\n private readonly maxInput: React.RefObject;\n\n @computed get currencyCode(): string {\n return this.props.productRefinerValue.UnitText || '';\n }\n\n public constructor(props: IRangeRefineItemProps) {\n super(props);\n this._onRangeUpdate = this._onRangeUpdate.bind(this);\n this._onRangeUpdateEnd = this._onRangeUpdateEnd.bind(this);\n this._handleRangeTooltipText = this._handleRangeTooltipText.bind(this);\n this._changeMin = this._changeMin.bind(this);\n this._changeMax = this._changeMax.bind(this);\n this._finishChangeMin = this._finishChangeMin.bind(this);\n this._finishChangeMax = this._finishChangeMax.bind(this);\n\n this.minInput = React.createRef();\n this.maxInput = React.createRef();\n\n const { selectedRefinementCriterion } = this.props;\n const initialMin = selectedRefinementCriterion?.LeftValueBoundString ?? '0';\n const initialMax = selectedRefinementCriterion?.RightValueBoundString;\n const sliderId = `slider_${String(this.props.parentProductRefinerHierarchy.RecordId)}_${String(\n this.props.productRefinerValue.RefinerRecordId\n )}`;\n const minValue = this.props.productRefinerValue.LeftValueBoundString;\n const maxValue = this.props.productRefinerValue.RightValueBoundString;\n const minPrice = this._formatPrice(minValue);\n const maxPrice = this._formatPrice(maxValue);\n const labels: ISliderLabel[] = this.getLabels(sliderId, minPrice, maxPrice);\n const selectedMin =\n this.props.selectedRefinementCriterion?.LeftValueBoundString ?? this.props.productRefinerValue.LeftValueBoundString ?? '0';\n const selectedMax =\n this.props.selectedRefinementCriterion?.RightValueBoundString ??\n this.props.productRefinerValue.RightValueBoundString ??\n maxValue;\n const selectedMinPrice = this._formatPrice(selectedMin);\n const selectedMaxPrice = this._formatPrice(selectedMax);\n const sliderKeyString = this.props.sliderKey ? `_${String(this.props.sliderKey)}` : '';\n const sliderThumbs: ISliderThumbProps[] = this.getSliderThumbs(\n sliderId,\n sliderKeyString,\n selectedMin,\n selectedMinPrice,\n selectedMax,\n selectedMaxPrice,\n maxPrice\n );\n this.state = {\n isChecked: false,\n validationErrorMin: undefined,\n validationErrorMax: undefined,\n selectedMin: initialMin,\n selectedMax: initialMax,\n touchedMin: false,\n touchedMax: false,\n sliderId,\n minValue,\n maxValue,\n labels,\n sliderThumbs\n };\n }\n\n public shouldComponentUpdate(nextProps: IRangeRefineItemProps, nextState: IRangeRefineItemState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public componentDidUpdate(previousProps: IRangeRefineItemProps): void {\n if (previousProps !== this.props) {\n this.updateSliderProps();\n }\n }\n\n public render(): JSX.Element | undefined {\n const { productRefinerValue, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\n\n if (!productRefinerValue || !parentProductRefinerHierarchy) {\n refineItemCommonProps.telemetry.error(\n 'Cannot render refine value range without productRefinerValue and parentProductRefinerHierarchy'\n );\n return undefined;\n }\n\n if (this.props.rangeType === 'input') {\n return this._renderInputFields();\n }\n\n return this._renderSlider();\n }\n\n /**\n * Function to update slider props.\n */\n private updateSliderProps(): void {\n const sliderId = `slider_${String(this.props.parentProductRefinerHierarchy.RecordId)}_${String(\n this.props.productRefinerValue.RefinerRecordId\n )}`;\n const minValue = this.props.productRefinerValue.LeftValueBoundString;\n const maxValue = this.props.productRefinerValue.RightValueBoundString;\n const minPrice = this._formatPrice(minValue);\n const maxPrice = this._formatPrice(maxValue);\n const labels: ISliderLabel[] = this.getLabels(sliderId, minPrice, maxPrice);\n const selectedMin =\n this.props.selectedRefinementCriterion?.LeftValueBoundString ?? this.props.productRefinerValue.LeftValueBoundString ?? '0';\n const selectedMax =\n this.props.selectedRefinementCriterion?.RightValueBoundString ??\n this.props.productRefinerValue.RightValueBoundString ??\n maxValue;\n const selectedMinPrice = this._formatPrice(selectedMin);\n const selectedMaxPrice = this._formatPrice(selectedMax);\n const sliderKeyString = this.props.sliderKey ? `_${String(this.props.sliderKey)}` : '';\n const sliderThumbs: ISliderThumbProps[] = this.getSliderThumbs(\n sliderId,\n sliderKeyString,\n selectedMin,\n selectedMinPrice,\n selectedMax,\n selectedMaxPrice,\n maxPrice\n );\n this.setState({ sliderId, minValue, maxValue, labels, sliderThumbs });\n }\n\n /**\n * Function to create the labels for slider.\n * @param sliderId - Slider element id for the DOM.\n * @param minPrice - Slider min value.\n * @param maxPrice - Slider max value.\n * @returns Array labels.\n */\n private readonly getLabels = (sliderId: string, minPrice: string, maxPrice: string): ISliderLabel[] => {\n return [\n {\n labelId: `${sliderId}_start`,\n labelString: `${minPrice}`,\n labelPositioning: 'start'\n },\n {\n labelId: `${sliderId}_end`,\n labelString: `${maxPrice}`,\n labelPositioning: 'end'\n }\n ];\n };\n\n /**\n * Function to create the slider thumbs for slider.\n * @param sliderId - Slider element id for the DOM.\n * @param sliderKey - Unique key for slider.\n * @param selectedMin - Slider selected min value.\n * @param selectedMinPrice - Slider selected min price.\n * @param selectedMax - Slider selected max value.\n * @param selectedMaxPrice - Slider selected max price..\n * @param maxPrice - Slider max price..\n * @returns Slider Thumb Props.\n */\n private readonly getSliderThumbs = (\n sliderId: string,\n sliderKey: string,\n selectedMin: string,\n selectedMinPrice: string,\n selectedMax: string | undefined,\n selectedMaxPrice: string,\n maxPrice: string\n ): ISliderThumbProps[] => {\n const sliderThumbDefaultValue = 0;\n return [\n {\n id: `${sliderId}${sliderKey}_slider_thumb_start`,\n value: (selectedMin && Number(selectedMin)) || sliderThumbDefaultValue,\n ariaLabel: `${this.props.minValueSliderThumbAriaLabel ?? ''} ${this.currencyCode}`,\n ariaValueText: `${selectedMinPrice}`\n },\n {\n id: `${sliderId}${sliderKey}_slider_thumb_end`,\n value: Number(selectedMax) || Number(maxPrice),\n ariaLabel: `${this.props.maxValueSliderThumbAriaLabel ?? ''} ${this.currencyCode}`,\n ariaValueText: `${selectedMaxPrice}`\n }\n ];\n };\n\n private _renderInputFields(): JSX.Element | undefined {\n const { isDisabled, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\n const { selectedMin, selectedMax, touchedMin, touchedMax, validationErrorMin, validationErrorMax } = this.state;\n\n const rangeAriaLabel = (refineItemCommonProps.rangeNameFormat || '{0}').replace('{0}', parentProductRefinerHierarchy.KeyName || '');\n const formAttrs = {\n 'aria-label': rangeAriaLabel,\n 'aria-disabled': isDisabled\n };\n\n // To enable price formatting of selected fields, this is the approach:\n // initial value: min=0 formatted as price, max=undefined\n // onFocus/onChange: convert to number (unformat) and mark as touched to indicate value is being edited\n // onBlur: validate and format entered value as price\n const minInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-min ${\n validationErrorMin ? 'refine-submenu__input-range--error' : ''\n }`;\n const maxInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-max ${\n validationErrorMax ? 'refine-submenu__input-range--error' : ''\n }`;\n const minLabelClassName = 'ms-refine-submenu__input-range-label refine-submenu__input-range-label-min';\n const maxLabelClassName = 'ms-refine-submenu__input-range-label refine-submenu__input-range-label-max';\n const formattedSelectedMin = this._getFormattedSelectedValue(selectedMin, touchedMin, validationErrorMin);\n const formattedSelectedMax = this._getFormattedSelectedValue(selectedMax, touchedMax, validationErrorMax);\n return (\n \n );\n }\n\n private _renderSlider(): JSX.Element | undefined {\n const { isDisabled, sliderKey } = this.props;\n const ariaAttributes = {\n 'aria-disabled': isDisabled\n };\n\n return (\n \n );\n }\n\n private _changeMin(event: React.FocusEvent): void {\n this._changeValue(event, 'Min');\n }\n\n private _changeMax(event: React.FocusEvent): void {\n this._changeValue(event, 'Max');\n }\n\n private _changeValue(event: React.FocusEvent, inputType: InputType): void {\n const selectedKey = `selected${inputType}`;\n const touchedKey = `touched${inputType}`;\n this.setState({\n [selectedKey]: this._getInputWithoutFormatting(event.currentTarget.value),\n [touchedKey]: true\n });\n }\n\n private _finishChangeMin(event: React.FocusEvent): boolean {\n const selectedMinValue = this._getInputWithoutFormatting(event.currentTarget.value);\n this.setState({\n selectedMin: selectedMinValue,\n minTouched: false\n });\n const minInput = Number(selectedMinValue);\n const {\n onToggle,\n parentProductRefinerHierarchy,\n productRefinerValue,\n refineItemCommonProps,\n selectedRefinementCriterion\n } = this.props;\n const max = (selectedRefinementCriterion && selectedRefinementCriterion.RightValueBoundString) || undefined;\n\n const maxNum = max ? Number(max) : undefined;\n\n if (isNaN(minInput)) {\n this.setState({ validationErrorMin: refineItemCommonProps.validationErrorNaN });\n this._focus('Min');\n return false;\n }\n\n if (this._validateRange(minInput, maxNum)) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true,\n rangeStart: minInput,\n rangeEnd: maxNum\n });\n return true;\n }\n this._focus('Min');\n\n return false;\n }\n\n private _finishChangeMax(event: React.FocusEvent): boolean {\n const selectedMaxValue = this._getInputWithoutFormatting(event.currentTarget.value);\n this.setState({\n selectedMax: selectedMaxValue,\n maxTouched: false\n });\n const maxInput = Number(selectedMaxValue);\n const {\n onToggle,\n parentProductRefinerHierarchy,\n productRefinerValue,\n refineItemCommonProps,\n selectedRefinementCriterion\n } = this.props;\n const min = (selectedRefinementCriterion && selectedRefinementCriterion.LeftValueBoundString) || '0';\n\n const minNum = Number(min);\n\n if (isNaN(maxInput)) {\n this.setState({ validationErrorMax: refineItemCommonProps.validationErrorNaN });\n this._focus('Max');\n return false;\n }\n\n if (this._validateRange(minNum, maxInput)) {\n if (productRefinerValue) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true,\n rangeStart: minNum,\n rangeEnd: maxInput\n });\n } else {\n this._focus('Max');\n }\n return true;\n }\n\n return false;\n }\n\n private _focus(inputType: InputType): void {\n const ref = inputType === 'Max' ? this.maxInput : this.minInput;\n\n setTimeout(() => {\n if (ref && ref.current) {\n ref.current.focus();\n }\n }, 50);\n }\n\n private _getFormattedSelectedValue(\n selected: string | undefined,\n touched: boolean,\n validationError: string | undefined\n ): string | undefined {\n if (touched || validationError || selected === undefined) {\n return selected;\n }\n return this._formatPrice(selected);\n }\n\n private _validateRange(min: number, max: number | undefined): boolean {\n const { refineItemCommonProps } = this.props;\n if (max === undefined) {\n return true;\n }\n\n if (min > max) {\n this.setState({\n validationErrorMin: refineItemCommonProps.validationErrorRange,\n validationErrorMax: refineItemCommonProps.validationErrorRange\n });\n return false;\n }\n\n return true;\n }\n\n private _formatPrice(amount: string | undefined): string {\n if (this.props.productRefinerValue.RefinerRecordId === 0) {\n const result = this.props.context.cultureFormatter.formatCurrency(Number(amount), this.currencyCode);\n return result;\n }\n return amount || '';\n }\n\n private _getInputWithoutFormatting(input: string): string {\n // First try to cast raw input to a number\n const inputAsNum = Number(input);\n if (!isNaN(inputAsNum)) {\n return input;\n }\n\n // Otherwise try a reverse lookup and fall back to the raw input if all else fails\n const reverseLookupResult = this._formattedPriceReverseLookup.get(input);\n return reverseLookupResult || input;\n }\n\n // NOTE: Fix types once Shared Components build pipeline bug fixed\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onRangeUpdate(sliderChangeNotification: any): void {\n // Need to filter out mousemove events as these cause errors after the menu updates and slider re-renders\n if (sliderChangeNotification.eventType !== 'mousemove') {\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue } = this.props;\n if (productRefinerValue && sliderChangeNotification) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true,\n rangeStart: sliderChangeNotification.firstThumbValue,\n rangeEnd: sliderChangeNotification.secondThumbValue\n });\n\n this._focusOnSliderThumb(sliderChangeNotification);\n }\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onRangeUpdateEnd(sliderChangeNotification: any): void {\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue } = this.props;\n if (productRefinerValue && sliderChangeNotification) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true,\n rangeStart: sliderChangeNotification.firstThumbValue,\n rangeEnd: sliderChangeNotification.secondThumbValue\n });\n\n this._focusOnSliderThumb(sliderChangeNotification);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _focusOnSliderThumb(sliderChangeNotification: any): void {\n if (sliderChangeNotification.id) {\n const element = document.getElementById(`${sliderChangeNotification.id}range`);\n if (element) {\n setTimeout(() => {\n element.focus();\n }, 0);\n }\n }\n }\n\n private _handleRangeTooltipText(tooltip: number): string {\n return this._formatPrice(`${tooltip}`);\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { RatingComponent, SwatchComponent } from '@msdyn365-commerce/components';\nimport { IAny, ICoreContext, IGeneric } from '@msdyn365-commerce/core';\nimport {\n AttributeDataType,\n DisplayTemplate,\n ProductRefinerSource,\n ProductRefinerValue,\n RefinerType\n} from '@msdyn365-commerce/retail-proxy';\nimport { checkIfShouldDisplayAsSwatch, DimensionTypes, IDimensionsApp, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { format, getPayloadObject, getTelemetryAttributes, IPayLoad, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { IRefineItemCommonProps } from './refine-item.props.common';\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\nimport { getIntegerRangeName, isSingleSelectRangeTypeIntegerSelected } from './utilities';\n\n/**\n * RefineItem properties.\n */\nexport interface IRefineItemProps {\n parentProductRefinerHierarchy: IProductRefinerHierarchy;\n productRefinerValue: ProductRefinerValue;\n selectedRefinementCriterion: ProductRefinerValue | undefined;\n selectedRefinerValues?: ProductRefinerValue[];\n refineItemCommonProps: IRefineItemCommonProps;\n isDisabled: boolean;\n context: ICoreContext>;\n moduleId: string;\n moduleTypeName: string;\n index?: number;\n productCountAriaLabel?: string;\n singleProductCountAriaLabel?: string;\n refineItemAriaLabel?: string;\n refineItemsAriaLabel?: string;\n isMobileView?: boolean;\n\n /**\n * The telemetry content\n */\n telemetryContent?: ITelemetryContent;\n onToggle(notfication: Readonly): void;\n urlBuilder(refiner: IRefineItemToggleNotification): string;\n}\n\n/**\n * Refine item state.\n */\nexport interface IRefineItemState extends React.ComponentState {\n isChecked: boolean;\n renderingError?: object;\n}\n\n/**\n * Single-select and multi-select refine item component (controlled by RefineSubmenu).\n */\nexport default class RefineItem extends React.Component {\n private readonly anchorType: React.RefObject;\n\n private readonly payLoad: IPayLoad;\n\n public constructor(props: IRefineItemProps) {\n super(props);\n this._onClick = this._onClick.bind(this);\n this.state = {\n isChecked: !!this.props.selectedRefinementCriterion\n };\n this.anchorType = React.createRef();\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, '');\n }\n\n public shouldComponentUpdate(nextProps: IRefineItemProps, nextState: IRefineItemState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | undefined {\n const {\n isDisabled,\n refineItemCommonProps,\n parentProductRefinerHierarchy,\n productRefinerValue,\n selectedRefinementCriterion,\n productCountAriaLabel,\n singleProductCountAriaLabel,\n index,\n children,\n onToggle,\n context,\n telemetryContent,\n refineItemAriaLabel,\n refineItemsAriaLabel,\n ...attrs\n } = this.props;\n if (!productRefinerValue) {\n refineItemCommonProps.telemetry.error('[refine-item] Cannot render refineItem without productRefinerValue');\n return undefined;\n }\n if (!productRefinerValue.LeftValueBoundString) {\n refineItemCommonProps.telemetry.warning(\n `[refine-item] RefineItem without LeftValueBoundString: ${JSON.stringify(productRefinerValue)}`\n );\n }\n const isSingleSelect = parentProductRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect;\n let itemTypeClassName = isSingleSelect ? 'single-select' : 'multi-select';\n itemTypeClassName = `ms-refine-submenu-item ${itemTypeClassName}`;\n const inputType = isSingleSelect ? 'radio' : 'checkbox';\n const isChecked = !!selectedRefinementCriterion;\n itemTypeClassName = isChecked ? `${itemTypeClassName}-checked` : itemTypeClassName;\n if (parentProductRefinerHierarchy.SourceValue === ProductRefinerSource.Rating) {\n return this._renderRating(\n productRefinerValue,\n parentProductRefinerHierarchy,\n isChecked,\n context,\n index,\n telemetryContent,\n productCountAriaLabel,\n singleProductCountAriaLabel\n );\n }\n this.payLoad.contentAction.etext = productRefinerValue.LeftValueBoundLocalizedString ?? productRefinerValue.LeftValueBoundString;\n const attribute = getTelemetryAttributes(telemetryContent!, this.payLoad);\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string.\n const productText = productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString || '';\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string.\n const productCount = productRefinerValue.Count || 0;\n let refineMenuItemAriaLabel;\n if (productCount === 1) {\n refineMenuItemAriaLabel = refineItemAriaLabel\n ? format(refineItemAriaLabel, parentProductRefinerHierarchy.KeyName, productText)\n : '';\n } else {\n refineMenuItemAriaLabel = refineItemsAriaLabel\n ? format(refineItemsAriaLabel, parentProductRefinerHierarchy.KeyName, productText, productCount)\n : '';\n }\n\n const dimensionType = (this.props.parentProductRefinerHierarchy.KeyName?.toLocaleLowerCase() ?? '') as DimensionTypes;\n const shouldDisplayAsSwatch = this._getShouldDisplayAsSwatch(dimensionType);\n\n let className = 'ms-refine-submenu-item';\n if (shouldDisplayAsSwatch) {\n className = classnames(className, `ms-refine-submenu-item__dimension__${dimensionType}`);\n }\n\n // If the swatch has no color or image specified, it should be displayed as text.\n // We don't use swatch logic to display the number of the results found together with the text.\n const hasColor = !StringExtensions.isNullOrWhitespace(productRefinerValue.SwatchColorHexCode);\n const hasImage = !StringExtensions.isNullOrWhitespace(productRefinerValue.SwatchImageUrl);\n const hasContentSwatch = hasColor || hasImage;\n if (\n parentProductRefinerHierarchy.DataTypeValue === AttributeDataType.Integer &&\n parentProductRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range\n ) {\n const rangeValue = getIntegerRangeName(productRefinerValue);\n return (\n \n \n \n {rangeValue}\n {productRefinerValue.Count !== undefined && ` (${productRefinerValue.Count})`}\n \n \n \n );\n } else {\n return (\n \n \n {hasContentSwatch && shouldDisplayAsSwatch && this._renderSwatch(dimensionType)}\n \n {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string. */}\n {productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString}\n {productRefinerValue.Count !== undefined && ` (${productRefinerValue.Count})`}\n \n \n \n );\n }\n }\n\n private _getShouldDisplayAsSwatch(dimensionType: DimensionTypes) {\n const shouldDisplayAsSwatch = checkIfShouldDisplayAsSwatch(dimensionType, this.props.context as ICoreContext);\n return shouldDisplayAsSwatch;\n }\n\n private _renderSwatch(dimensionType: DimensionTypes): JSX.Element | null {\n const productRefinerValue = this.props.productRefinerValue;\n\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string.\n const text = productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString || '';\n const swatchItems = [\n {\n itemId: `${productRefinerValue.RefinerRecordId ?? ''}-${dimensionType}-${text}`,\n value: text,\n dimensionType,\n colorHexCode: productRefinerValue.SwatchColorHexCode,\n imageUrl: productRefinerValue.SwatchImageUrl\n }\n ];\n\n return (\n \n );\n }\n\n private _getRefinerUrl(): string {\n const { urlBuilder, parentProductRefinerHierarchy, productRefinerValue, selectedRefinementCriterion } = this.props;\n\n if (productRefinerValue) {\n return urlBuilder({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: !selectedRefinementCriterion\n });\n }\n\n return '';\n }\n\n private readonly _onClick = (e: React.MouseEvent): void => {\n e.preventDefault();\n\n const { parentProductRefinerHierarchy, productRefinerValue, selectedRefinementCriterion } = this.props;\n if (productRefinerValue) {\n this.props.onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: !selectedRefinementCriterion\n });\n\n setTimeout(() => {\n this.anchorType.current && this.anchorType.current.focus();\n }, 0);\n }\n };\n\n private _renderRating(\n productRefinerValue: ProductRefinerValue,\n parentProductRefinerHierarchy: IProductRefinerHierarchy,\n isChecked: boolean,\n context: ICoreContext,\n index?: number,\n telemetryContent?: ITelemetryContent,\n ratingUserCountAriaLabel?: string,\n ratingSingleUserCountAriaLabel?: string\n ): JSX.Element | undefined {\n if (productRefinerValue.LeftValueBoundString) {\n this.payLoad.contentAction.etext = productRefinerValue.LeftValueBoundLocalizedString;\n const attribute = getTelemetryAttributes(telemetryContent!, this.payLoad);\n const refinerRating = Number.parseInt(productRefinerValue.LeftValueBoundString, 10);\n const ratingRefiner = this.props.selectedRefinerValues?.find(\n value => value.DataTypeValue === productRefinerValue.DataTypeValue\n );\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Replace with actual value for empty string.\n const selectedRating = Number.parseInt(ratingRefiner?.LeftValueBoundString || '0', 10);\n const defaultChkProductCount = 1;\n let ratingComponentClass: string = 'ms-rating-component';\n if (refinerRating > selectedRating) {\n ratingComponentClass = `${ratingComponentClass}__up`;\n } else if (refinerRating < selectedRating) {\n ratingComponentClass = `${ratingComponentClass}__down`;\n } else {\n ratingComponentClass = `${ratingComponentClass}__current`;\n }\n const productCountAriaLabelValue =\n productRefinerValue.Count !== undefined && productRefinerValue.Count === defaultChkProductCount\n ? ratingSingleUserCountAriaLabel && format(ratingSingleUserCountAriaLabel, productRefinerValue.Count)\n : ratingUserCountAriaLabel && format(ratingUserCountAriaLabel, productRefinerValue.Count);\n return (\n \n \n \n \n {productRefinerValue.Count !== undefined && `(${productRefinerValue.Count})`}\n \n \n \n );\n }\n return undefined;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { isUndefined } from 'lodash';\nimport { ProductRefinerValue } from '@msdyn365-commerce/retail-proxy';\nimport { Button } from '@msdyn365-commerce-modules/utilities';\nimport { IRefineItemState } from './refine-item';\nimport { isCustomRangeTypeIntegerSelected } from './utilities';\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { IRefineItemCommonProps } from './refine-item.props.common';\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\n\nexport type RangeRefineItemInputType = 'slider' | 'input';\n\n/**\n * Range refine item properties.\n */\nexport interface IRangeRefineItemInputProps {\n parentProductRefinerHierarchy: IProductRefinerHierarchy;\n selectedRefinementCriterion: ProductRefinerValue | undefined;\n refineItemCommonProps: IRefineItemCommonProps;\n isDisabled: boolean;\n rangeType: RangeRefineItemInputType;\n\n /**\n * The telemetry content\n */\n onToggle(notfication: Readonly): void;\n}\n\n/**\n * Range refine item state.\n */\nexport interface IRangeRefineItemInputState extends IRefineItemState {\n validationErrorMin: string | undefined;\n validationErrorMax: string | undefined;\n selectedMin: string | undefined;\n selectedMax: string | undefined;\n invalidData: boolean | undefined;\n}\n\n/**\n * RangeRefineItem component (controlled by RefineSubmenu).\n */\n@observer\nexport default class RangeRefineItemInput extends React.Component {\n private readonly _formattedPriceReverseLookup: Map = new Map();\n\n private readonly minInput: React.RefObject;\n\n private readonly maxInput: React.RefObject;\n\n public constructor(props: IRangeRefineItemInputProps) {\n super(props);\n this._changeMinInputRange = this._changeMinInputRange.bind(this);\n this._changeMaxInputRange = this._changeMaxInputRange.bind(this);\n this._applyCustom = this._applyCustom.bind(this);\n\n this.minInput = React.createRef();\n this.maxInput = React.createRef();\n let initialMin = '';\n let initialMax = '';\n const { selectedRefinementCriterion, parentProductRefinerHierarchy } = this.props;\n if (selectedRefinementCriterion) {\n initialMin = isCustomRangeTypeIntegerSelected(selectedRefinementCriterion, parentProductRefinerHierarchy)\n ? ''\n : selectedRefinementCriterion?.LeftValueBoundString || '';\n initialMax = isCustomRangeTypeIntegerSelected(selectedRefinementCriterion, parentProductRefinerHierarchy)\n ? ''\n : selectedRefinementCriterion?.RightValueBoundString || '';\n }\n\n this.state = {\n validationErrorMin: undefined,\n validationErrorMax: undefined,\n selectedMin: initialMin,\n selectedMax: initialMax,\n invalidData: !(initialMin && initialMax),\n isChecked: false\n };\n }\n\n public shouldComponentUpdate(nextProps: IRangeRefineItemInputProps, nextState: IRangeRefineItemInputState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n nextState.invalidData = !(nextState.selectedMin && nextState.selectedMax);\n return true;\n }\n\n public componentDidUpdate(previousProps: IRangeRefineItemInputProps): void {\n if (previousProps !== this.props) {\n this.updateInputRangerProps();\n }\n }\n\n public render(): JSX.Element | undefined {\n if (this.props.rangeType === 'input') {\n return this._renderInputFields();\n }\n return undefined;\n }\n\n // /**\n // * Function to update slider props.\n // */\n private updateInputRangerProps(): void {\n const selectedMin = !isUndefined(this.props.selectedRefinementCriterion?.RowNumber)\n ? ''\n : this.props.selectedRefinementCriterion?.LeftValueBoundString;\n const selectedMax = !isUndefined(this.props.selectedRefinementCriterion?.RowNumber)\n ? ''\n : this.props.selectedRefinementCriterion?.RightValueBoundString;\n this.setState({ selectedMin, selectedMax });\n }\n\n private _renderInputFields(): JSX.Element | undefined {\n const { isDisabled, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\n const { validationErrorMin, validationErrorMax } = this.state;\n\n const rangeAriaLabel = (refineItemCommonProps.rangeNameFormat || '{0}').replace('{0}', parentProductRefinerHierarchy.KeyName || '');\n const formAttrs = {\n 'aria-label': rangeAriaLabel,\n 'aria-disabled': isDisabled\n };\n\n const minInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-min ${\n validationErrorMin ? 'refine-submenu__input-range--error' : ''\n }`;\n const maxInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-max ${\n validationErrorMax ? 'refine-submenu__input-range--error' : ''\n }`;\n return (\n \n \n \n );\n }\n\n private _applyCustom(event: React.MouseEvent): void {\n const selectedMinValue = this._getInputWithoutFormatting(this.state.selectedMin || '');\n this.setState({\n selectedMin: selectedMinValue,\n minTouched: false\n });\n const minInput = Number(selectedMinValue);\n const { onToggle, parentProductRefinerHierarchy } = this.props;\n const max = this.state.selectedMax;\n\n const maxNum = max ? Number(max) : undefined;\n const productRefinerValue: ProductRefinerValue = {\n RefinerRecordId: parentProductRefinerHierarchy.Values[0].RefinerRecordId,\n LeftValueBoundString: this.state.selectedMin,\n RightValueBoundString: this.state.selectedMax,\n DataTypeValue: parentProductRefinerHierarchy.DataTypeValue,\n RefinerSourceValue: parentProductRefinerHierarchy.Values[0].RefinerSourceValue\n };\n\n if (this._validateRange(minInput, maxNum)) {\n onToggle({\n parentProductRefinerHierarchy,\n productRefinerValue,\n isSelecting: true\n });\n }\n }\n\n private _changeMinInputRange(event: React.ChangeEvent): void {\n this.setState({\n selectedMin: event.target.value.trim()\n });\n }\n\n private _changeMaxInputRange(event: React.ChangeEvent): void {\n this.setState({\n selectedMax: event.target.value.trim()\n });\n }\n\n private _validateRange(min: number, max: number | undefined): boolean {\n const { refineItemCommonProps } = this.props;\n if (max === undefined) {\n return true;\n }\n\n if (min > max) {\n this.setState({\n validationErrorMin: refineItemCommonProps.validationErrorRange,\n validationErrorMax: refineItemCommonProps.validationErrorRange\n });\n return false;\n }\n\n return true;\n }\n\n private _getInputWithoutFormatting(input: string): string {\n // First try to cast raw input to a number\n const inputAsNum = Number(input);\n if (!isNaN(inputAsNum)) {\n return input;\n }\n\n // Otherwise try a reverse lookup and fall back to the raw input if all else fails\n const reverseLookupResult = this._formattedPriceReverseLookup.get(input);\n return reverseLookupResult || input;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\nimport { IAny, ICoreContext, IGeneric } from '@msdyn365-commerce/core';\nimport {\n AttributeDataType,\n DisplayTemplate,\n ProductRefinerSource,\n ProductRefinerValue,\n RefinerType\n} from '@msdyn365-commerce/retail-proxy';\nimport { Button, Collapse, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport RangeRefineItem, { RangeRefineItemType } from './range-refine-item';\nimport RefineItem from './refine-item';\nimport { IRefineItemCommonProps } from './refine-item.props.common';\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\nimport { findMatchingRefinementCriterion, isRangeTypeForInteger } from './utilities';\nimport RangeRefineItemInput from './range-refine-item-input';\n\n/**\n * Properties associated with the RefineSubmenu component.\n */\nexport interface IRefineSubmenuProps {\n tempRangeTypeTODO: RangeRefineItemType;\n minValueSliderThumbAriaLabel?: string;\n maxValueSliderThumbAriaLabel?: string;\n productRefinerHierarchy: IProductRefinerHierarchy;\n selectedRefinerValues: ProductRefinerValue[];\n refineItemCommonProps: IRefineItemCommonProps;\n isDisabled: boolean;\n isExpandedOnInitialLoad: boolean;\n context: ICoreContext>;\n moduleId: string;\n moduleTypeName: string;\n productCountAriaLabel?: string;\n singleProductCountAriaLabel?: string;\n refineItemAriaLabel?: string;\n refineItemsAriaLabel?: string;\n isMobile?: boolean;\n\n /**\n * The telemetry content\n */\n telemetryContent?: ITelemetryContent;\n onUpdateRefiners(notfication: Readonly): void;\n urlBuilder(refiner: IRefineItemToggleNotification): string;\n}\n\n/**\n * Refine submenu state.\n */\nexport interface IRefineSubmenuState extends React.ComponentState {\n expanded: boolean;\n}\n\n/**\n *\n * The RefineSubmenu component renders the submenu category and child items.\n * This computed observes the stateful category hierarchy object.\n * @extends {React.PureComponent}\n */\nclass RefineSubmenu extends React.Component {\n constructor(props: IRefineSubmenuProps) {\n super(props);\n\n this._onToggleItem = this._onToggleItem.bind(this);\n this._onToggleSubmenu = this._onToggleSubmenu.bind(this);\n\n const isExpanded = this.props.isExpandedOnInitialLoad;\n\n this.state = {\n expanded: isExpanded\n };\n }\n\n public shouldComponentUpdate(nextProps: IRefineSubmenuProps, nextState: IRefineSubmenuState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | null {\n const { productRefinerHierarchy, refineItemCommonProps } = this.props;\n\n if (!productRefinerHierarchy) {\n refineItemCommonProps.telemetry.error('Cannot render submenu without refiner hierarchy data');\n }\n\n if (productRefinerHierarchy.SourceValue === ProductRefinerSource.Rating && this.props.context.app.config.hideRating) {\n return null;\n }\n\n const className = classnames(\n 'ms-refine-submenu',\n 'list-group',\n productRefinerHierarchy.KeyName // Deprecated because of the localization issues. Leaving for backward compatibility reasons.\n );\n\n return (\n \n \n {productRefinerHierarchy.KeyName}\n \n \n {this._renderChildItems(productRefinerHierarchy)}\n \n
\n );\n }\n\n private _renderChildItems(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\n if (\n productRefinerHierarchy.DataTypeValue === AttributeDataType.Integer &&\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range\n ) {\n return this._renderSingleMultiSelect(productRefinerHierarchy);\n }\n // Check if is of integer range type\n if (isRangeTypeForInteger(productRefinerHierarchy.DataTypeValue)) {\n return this._renderRange(productRefinerHierarchy);\n }\n return this._renderSingleMultiSelect(productRefinerHierarchy);\n }\n\n private _renderSingleMultiSelect(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\n const {\n isDisabled,\n refineItemCommonProps,\n selectedRefinerValues,\n context,\n productCountAriaLabel,\n singleProductCountAriaLabel,\n refineItemAriaLabel,\n refineItemsAriaLabel,\n isMobile\n } = this.props;\n const isSingleSelect =\n productRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect &&\n productRefinerHierarchy.SourceValue === ProductRefinerSource.Rating;\n const role = isSingleSelect ? { role: 'listbox' } : undefined;\n let selectedRefinementCriterion: ProductRefinerValue | undefined = {};\n const refinerValuesList = productRefinerHierarchy.Values || [];\n const listItems = refinerValuesList.map((child: ProductRefinerValue, index: number) => {\n if (!child) {\n refineItemCommonProps.telemetry.error(\n `[refine-submenu] Could not render refine item for refiner ${productRefinerHierarchy.RecordId} (${productRefinerHierarchy.KeyName})`\n );\n return null;\n }\n\n selectedRefinementCriterion = findMatchingRefinementCriterion(child, selectedRefinerValues);\n return (\n \n refinerValuesList.find(value => value.RefinerRecordId === selectedValue.RefinerRecordId)\n )}\n refineItemCommonProps={refineItemCommonProps}\n onToggle={this._onToggleItem}\n urlBuilder={this.props.urlBuilder}\n isDisabled={isDisabled}\n key={index}\n index={index}\n context={context}\n moduleId={this.props.moduleId}\n moduleTypeName={this.props.moduleTypeName}\n telemetryContent={this.props.telemetryContent}\n productCountAriaLabel={productCountAriaLabel}\n refineItemAriaLabel={refineItemAriaLabel}\n refineItemsAriaLabel={refineItemsAriaLabel}\n singleProductCountAriaLabel={singleProductCountAriaLabel}\n isMobileView={isMobile}\n />\n );\n });\n return (\n \n {listItems}\n {productRefinerHierarchy.DataTypeValue === AttributeDataType.Integer &&\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range && (\n \n )}\n \n );\n }\n\n private _getRangeType(productRefinerHierarchy: IProductRefinerHierarchy): 'input' | 'slider' {\n if (\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range ||\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Slider ||\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.SliderWithBars\n ) {\n return 'slider';\n }\n return 'input';\n }\n\n private _renderRange(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\n const {\n isDisabled,\n refineItemCommonProps,\n selectedRefinerValues,\n context,\n minValueSliderThumbAriaLabel,\n maxValueSliderThumbAriaLabel\n } = this.props;\n const submenuClassNamePrefix = 'ms-refine-submenu__item list-group-item refine-submenu__item';\n const refinerValuesList = productRefinerHierarchy.Values || [];\n const listItems = refinerValuesList.map((child: ProductRefinerValue, index: number) => {\n if (!child) {\n refineItemCommonProps.telemetry.error(\n `Could not render refine item for refiner ${productRefinerHierarchy.RecordId} (${productRefinerHierarchy.KeyName})`\n );\n return null;\n }\n\n const selectedRefinementCriterion = findMatchingRefinementCriterion(child, selectedRefinerValues);\n\n const rangeType = this._getRangeType(productRefinerHierarchy);\n const key = selectedRefinementCriterion\n ? `${selectedRefinementCriterion.LeftValueBoundString}-${selectedRefinementCriterion.RightValueBoundString}`\n : `not-selected-${index}`;\n return (\n \n \n \n );\n });\n return ;\n }\n\n private _onToggleItem(itemToggleNotification: IRefineItemToggleNotification): void {\n this.props.onUpdateRefiners(itemToggleNotification);\n }\n\n private _onToggleSubmenu(): void {\n this.setState(prevState => ({\n expanded: !prevState.expanded\n }));\n }\n}\n\nexport default RefineSubmenu;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\n\ninterface ISeparator {\n separator: string;\n}\n\nexport const Separator: React.FC = ({ separator }) => (\n \n {` `}\n {separator}\n {` `}\n \n);\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\n\ninterface ITitle {\n className: string;\n text: string;\n}\n\nexport const Title: React.FC = ({ text, className }) => (\n \n {` `}\n {text}\n {` `}\n \n);\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n CategoryHierarchy as CategoryHierarchyData,\n IProductRefinerHierarchy,\n IProductsDimensionsAvailabilities\n} from '@msdyn365-commerce/commerce-entities';\nimport MsDyn365, { getCatalogId, ICoreContext } from '@msdyn365-commerce/core';\nimport {\n ChannelInventoryConfiguration,\n format,\n ProductPrice,\n ProductRefinerValue,\n SortColumn,\n StoreOperationsDataActions,\n TextValueTranslation\n} from '@msdyn365-commerce/retail-proxy';\nimport {\n ArrayExtensions,\n DimensionAvailabilitiesForProductSearchResultInput,\n DimensionTypes,\n DimensionSwatchDisplayTypes,\n getDimensionAvailabilitiesForProductSearchResultAction,\n getPriceForProductSearchResult,\n IDimensionsApp,\n PriceForProductSearchResultInput,\n ObjectExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getTelemetryObject,\n ILabeledDropdownOnChangeNotification,\n ILabeledDropdownOption,\n IModuleProps,\n INodeProps,\n isMobile,\n ITelemetryContent,\n LabeledDropdown,\n UncontrolledPagination,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { action, computed, observable, reaction, transaction } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport {\n buildListPageUrl,\n getCollectionProducts,\n getCollectionRefinersAction,\n getCurrentUrl,\n GetFullProductsByCollectionInput,\n IFullProductsSearchResultsWithCount,\n parseQueryParam,\n ProductListInventoryFilteringOptions,\n RefinersByCollectionInput,\n sortOptions\n} from './actions';\nimport { hydrateRefinersFromUrl } from './actions/url-utils';\nimport {\n ErrorMessage,\n FeatureSearchResultItem,\n getUpdatedRefinementCriteria,\n IChoiceSummaryClickNotification,\n IRefineItemCommonProps,\n IRefineItemToggleNotification,\n ISearchResultModalViewProps,\n isMatchingRefinementCriterion,\n Link,\n ModalToggle,\n ProductSearchResultItems,\n SearchResultModal,\n Separator,\n Title\n} from './components';\nimport ChoiceSummary from './components/choice-summary';\nimport RefineSubmenu from './components/refine-submenu';\nimport { ListPageState } from './list-page-state';\nimport { ISearchResultContainerData } from './search-result-container.data';\nimport { expandRefinersCount, ISearchResultContainerProps } from './search-result-container.props.autogenerated';\n\nexport interface ISearchResultContainerViewProps extends ISearchResultContainerProps {\n products?: React.ReactNode;\n className?: string;\n SearchResultContainer: IModuleProps;\n TitleViewProps: ITitleViewProps;\n categoryHierarchy: ICategoryHierarchyViewProps;\n pagination?: React.ReactNode;\n ProductsContainer: INodeProps;\n ProductSectionContainer: INodeProps;\n refineMenu: IRefineMenuViewProps;\n sortByOptions: ISortByViewProps;\n choiceSummary?: React.ReactNode;\n modalToggle: React.ReactNode;\n searchResultModal: ISearchResultModalViewProps;\n isMobile: boolean;\n CategoryNavContainer: INodeProps;\n RefineAndProductSectionContainer: INodeProps;\n errorMessage: React.ReactNode;\n FeatureSearchContainer: INodeProps;\n similarLookProduct?: React.ReactNode;\n productPrices?: ProductPrice[];\n productsDimensionAvailabilities?: IProductsDimensionsAvailabilities[][];\n}\n\nexport interface ITitleViewProps {\n TitleContainer: INodeProps;\n title: ISearchResultTitle;\n}\n\nexport interface IRefineMenuViewProps {\n RefineMenuContainer: INodeProps;\n RefinerSectionContainer: INodeProps;\n refiners?: React.ReactNode[];\n}\n\nexport interface ICategoryHierarchyViewProps {\n categoryHierarchyList?: React.ReactNode[];\n categoryHierarchySeparator?: React.ReactNode;\n CategoryHierarchyContainer: INodeProps;\n}\n\nexport interface ISortByViewProps {\n SortingContainer: INodeProps;\n sortByDropDown?: React.ReactNode;\n}\n\nexport type GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Title component for search result container.\n */\nexport interface ISearchResultTitle {\n titlePrefix?: React.ReactNode;\n titleText?: React.ReactNode;\n titleCount?: React.ReactNode;\n}\n\nexport interface ISearchResultContainerState {\n sortingState: ISortByCollectionState;\n modalIsOpen: boolean;\n refiners: IProductRefinerHierarchy[];\n productsDimensionAvailabilities?: IProductsDimensionsAvailabilities[][];\n channelInventoryConfiguration?: ChannelInventoryConfiguration;\n}\n\ninterface ISortByCollectionState {\n selectedSortByOption: ILabeledDropdownOption;\n pending: boolean;\n}\n\n/**\n *\n * SearchResultContainer component.\n * @extends {React.PureComponent>}\n */\n@observer\nexport default class SearchResultContainer extends React.PureComponent<\n ISearchResultContainerProps,\n ISearchResultContainerState\n> {\n @computed get isMobile(): boolean {\n return this._viewport === 'xs' || this._viewport === 'sm';\n }\n\n private readonly sortByDropdownOptions: ILabeledDropdownOption[] = [\n { key: sortOptions.sortByOptionRelevanceDesc, value: this.props.resources.sortByOptionRelevanceDesc },\n { key: sortOptions.sortByOptionNameAsc, value: this.props.resources.sortByOptionNameAsc },\n { key: sortOptions.sortByOptionNameDesc, value: this.props.resources.sortByOptionNameDesc },\n { key: sortOptions.sortByOptionPriceAsc, value: this.props.resources.sortByOptionPriceAsc },\n { key: sortOptions.sortByOptionPriceDesc, value: this.props.resources.sortByOptionPriceDesc },\n { key: sortOptions.sortByOptionRatingDesc, value: this.props.resources.sortByOptionRatingDesc },\n { key: sortOptions.sortByOptionBestSelling, value: this.props.resources.sortByOptionBestSelling },\n { key: sortOptions.sortByOptionNewScore, value: this.props.resources.sortByOptionNewScore },\n { key: sortOptions.sortByOptionTrendingScore, value: this.props.resources.sortByOptionTrendingScore }\n ];\n\n private readonly _refineItemCommonProps: IRefineItemCommonProps;\n\n private readonly _pageType: string | undefined = this.props.context.request.urlTokens.pageType;\n\n @observable\n private _viewport: GridSize = 'lg';\n\n private readonly _modalToggleRef: React.RefObject;\n\n private readonly _sortAndFilterContainerRef: React.RefObject;\n\n private expandrefinerCount: number | undefined = 0;\n\n private readonly telemetryContent: ITelemetryContent;\n\n private readonly productPrices: ProductPrice[];\n\n private readonly defaultPageNumber = 0;\n\n private readonly catalogId = getCatalogId(this.props.context.request);\n\n private isListPageStateUpdated: boolean = false;\n\n private _isMounted: boolean = false;\n\n public static getFriendlyName(locale: string, nameTranslations?: TextValueTranslation[]): string | undefined {\n let nameTranslation: TextValueTranslation | undefined;\n if (locale && nameTranslations && ArrayExtensions.hasElements(nameTranslations)) {\n nameTranslation = nameTranslations.find(item => item.Language!.toLowerCase() === locale.toLowerCase());\n }\n\n return nameTranslation?.Text;\n }\n\n public constructor(props: ISearchResultContainerProps, state: ISearchResultContainerState) {\n super(props);\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Check required.\n this._viewport = props.context.request?.device?.Type === 'Mobile' ? 'xs' : 'lg';\n this._modalToggleRef = React.createRef();\n this._sortAndFilterContainerRef = React.createRef();\n this._toggleModal = this._toggleModal.bind(this);\n this._updateViewport = this._updateViewport.bind(this);\n this.productPrices = [];\n this.state = {\n sortingState: {\n pending: false,\n selectedSortByOption: this.sortByDropdownOptions[0]\n },\n modalIsOpen: false,\n refiners: [],\n channelInventoryConfiguration: undefined\n };\n const { placeholderTextMax, minLabel, maxLabel, rangeNameFormat } = this.props.resources;\n\n const locale = this.props.context.request.locale;\n const telemetry = this.props.telemetry;\n const validationErrorNaN = this.props.resources.validationErrorNotNumber;\n const validationErrorRange = this.props.resources.validationErrorNotRange;\n this._refineItemCommonProps = {\n telemetry,\n locale,\n placeholderTextMax,\n minLabel,\n maxLabel,\n rangeNameFormat,\n validationErrorNaN,\n validationErrorRange\n };\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this._updateViewport();\n }\n public async componentDidMount(): Promise {\n this._isMounted = true;\n if (MsDyn365.isBrowser && window.addEventListener) {\n window.addEventListener('resize', this._updateViewport);\n this._updateViewport();\n }\n\n const listPageState = await this.props.data.listPageState;\n const products = await this.props.data.products;\n const channelInventoryConfiguration = await StoreOperationsDataActions.getInventoryConfigurationAsync({\n callerContext: this.props.context.actionContext\n });\n if (this._isMounted) {\n this.setState({ channelInventoryConfiguration });\n }\n\n this._updateListPageState(listPageState, products);\n\n // Initialize reaction based on listPageState properties\n reaction(\n () => {\n return [\n listPageState.activeFilters?.length,\n listPageState.currentPageNumber,\n ArrayExtensions.hasElements(listPageState.sortingCritera?.Columns)\n ];\n },\n async () => {\n const newListPageState = await this.props.data.listPageState;\n const input = new GetFullProductsByCollectionInput(\n newListPageState.pageType,\n this.props.context.request.apiSettings,\n {\n Paging: {\n Top: this.props.config.itemsPerPage,\n Skip: Math.max(newListPageState.pageSize * (newListPageState.currentPageNumber ?? 0), 0)\n },\n count: true,\n Sorting: newListPageState.sortingCritera ?? {}\n },\n newListPageState.activeFilters ?? [],\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- RecordId is string. Check required.\n +(this.props.context.request.urlTokens.recordId || 0),\n\n // eslint-disable-next-line max-len -- existing code\n this.props.context.request.query?.q\n ? this.props.context.request.query.q\n : JSON.stringify({\n ProductId: this.props.context.request.query?.productId,\n Recommendation: this.props.context.request.query?.recommendation\n }),\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Required check.\n !!this.props?.config?.includeAttributes,\n this.props.config.updateRefinerPanel,\n this.props.context.request.locale,\n this.catalogId,\n channelInventoryConfiguration\n );\n\n const productResults = await getCollectionProducts(input, this.props.context.actionContext);\n newListPageState.totalProductCount = productResults.count;\n newListPageState.activeProducts = productResults.products;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- check is required.\n if (\n this.props.config.enableAffiliationBasedPricing &&\n this.props.context.actionContext.requestContext?.user?.isAuthenticated\n ) {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises -- Call api to retrieve the availabilities data without blocking the UI.\n this._getActivePrice();\n }\n\n await this._updateVariantAvailability();\n\n if (this.props.config.updateRefinerPanel) {\n const refinerInput = new RefinersByCollectionInput(\n newListPageState.pageType,\n this.props.context.request.apiSettings,\n {\n Paging: {\n Top: this.props.config.itemsPerPage,\n Skip: Math.max(\n newListPageState.pageSize * (newListPageState.currentPageNumber ?? this.defaultPageNumber),\n this.defaultPageNumber\n )\n },\n count: true,\n Sorting: newListPageState.sortingCritera ?? {}\n },\n newListPageState.activeFilters ?? [],\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- RecordId is string. Check required.\n +(this.props.context.request.urlTokens.recordId || 0),\n this.props.context.request.query?.q\n ? this.props.context.request.query.q\n : this.props.context.request.query?.productId,\n false,\n this.props.config.updateRefinerPanel,\n undefined,\n this.catalogId,\n channelInventoryConfiguration\n );\n\n const refiners = await getCollectionRefinersAction(refinerInput, this.props.context.actionContext);\n this.setState({ refiners });\n }\n }\n );\n\n if (\n this.props.config.enableAffiliationBasedPricing &&\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Condition required.\n this.props.context.actionContext.requestContext?.user?.isAuthenticated\n ) {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises -- Call api to retrieve the availabilities data without blocking the UI.\n this._getActivePrice();\n }\n await this._updateVariantAvailability();\n }\n\n public componentWillUnmount(): void {\n this._isMounted = false;\n if (MsDyn365.isBrowser && window.removeEventListener) {\n window.removeEventListener('resize', this._updateViewport);\n }\n }\n\n public render(): JSX.Element {\n const {\n config: { imageSettings, className },\n resources,\n data: { listPageState, products: productCollection, featureProduct }\n } = this.props;\n\n if (!this.isListPageStateUpdated && listPageState.result && productCollection.result) {\n this._updateListPageState(listPageState.result, productCollection.result);\n this.isListPageStateUpdated = true;\n }\n\n const products = (this.props.data.listPageState.result && this.props.data.listPageState.result.activeProducts) || [];\n const searchProduct = listPageState.result?.featureProduct ?? featureProduct.result ?? null;\n let errorText = '';\n if (!ArrayExtensions.hasElements(products)) {\n errorText = this._pageType === 'Category' ? resources.resultCategoryNotFoundText : resources.resultSearchNotFoundText;\n }\n const productsComponent = this._getProducts();\n const featureComponent = (\n \n );\n\n const searchResultContainerViewProps = {\n ...this.props,\n products: productsComponent,\n TitleViewProps: this._getCollectionTitle(),\n categoryHierarchy: !this.props.config.disableHierarchy && this._getCategoryHierarchy(),\n refineMenu: this._getRefineMenu(),\n className: classnames('ms-search-result-container', className),\n SearchResultContainer: {\n moduleProps: this.props,\n className: classnames('ms-search-result-container', className)\n },\n sortByOptions: this.props.data.listPageState.result?.totalProductCount !== 0 ? this._getSortingDropDown() : null,\n pagination: this._getPagination(),\n ProductsContainer: { className: 'ms-search-result-container__Products' },\n ProductSectionContainer: { className: 'ms-search-result-container__product-section' },\n CategoryNavContainer: { className: 'ms-search-result-container__category-nav-section' },\n RefineAndProductSectionContainer: { className: 'ms-search-result-container__refine-product-section' },\n choiceSummary: this._getChoiceSummary(),\n modalToggle:\n this.props.data.listPageState.result?.totalProductCount !== 0 ? (\n \n ) : null,\n searchResultModal: this._getSearchResultModal(),\n isMobile: this.isMobile,\n errorMessage: errorText && ,\n FeatureSearchContainer: { className: 'ms-feature-search-result' },\n similarLookProduct: searchProduct ? featureComponent : null,\n productPrices: this.productPrices,\n productsDimensionAvailabilities: this.state.productsDimensionAvailabilities\n };\n return this.props.renderView(searchResultContainerViewProps) as React.ReactElement;\n }\n\n /**\n * Get products variants dimension availabilities.\n * @returns Void.\n */\n private readonly _updateVariantAvailability = async (): Promise => {\n const context = this.props.context as ICoreContext;\n const dimensionsToDisplayOnProductCard = context.app.config.dimensionsInProductCard;\n const dimensionsToDisplayAsSwatch = context.app.config.dimensionsAsSwatchType;\n if (\n ArrayExtensions.hasElements(dimensionsToDisplayOnProductCard) &&\n !dimensionsToDisplayOnProductCard.includes(DimensionTypes.none) &&\n ArrayExtensions.hasElements(dimensionsToDisplayAsSwatch) &&\n !dimensionsToDisplayAsSwatch.includes(DimensionTypes.none) &&\n this.props.config.includeAttributes\n ) {\n await this._getProductsDimensionsAvailabilities();\n }\n };\n\n /**\n * Update the list page state with initial data.\n * @param listPageState -- List page State.\n * @param products -- Products.\n */\n @action\n private readonly _updateListPageState = (listPageState: ListPageState, products: IFullProductsSearchResultsWithCount): void => {\n let querySorting: SortColumn[] = [];\n const defaultPageNumber: number = 10;\n\n if (this._pageType === 'Category') {\n listPageState.pageType = 'Category';\n } else {\n listPageState.pageType = 'Search';\n }\n\n if (this.props.context.request.query?.sorting) {\n querySorting = JSON.parse(decodeURIComponent(this.props.context.request.query.sorting)) as SortColumn[];\n }\n\n listPageState.currentPageNumber =\n (this.props.context.request.query?.skip &&\n +this.props.context.request.query.skip / (this.props.config.itemsPerPage ?? defaultPageNumber)) ||\n 0;\n listPageState.sortingCritera = { Columns: querySorting };\n listPageState.pageSize = this.props.config.itemsPerPage ?? defaultPageNumber;\n listPageState.activeProducts = products.products;\n listPageState.totalProductCount = products.count;\n listPageState.activeFilters = hydrateRefinersFromUrl(this.props.context.request) || [];\n if (this.props.context.request.query?.productId) {\n const featureProduct = this.props.data.featureProduct.result;\n if (featureProduct) {\n listPageState.featureProduct = featureProduct;\n }\n }\n };\n\n /**\n * Get products dimension availabilities.\n * @returns Void.\n */\n private readonly _getProductsDimensionsAvailabilities = async (): Promise => {\n const productsList = this.props.data.listPageState.result?.activeProducts ?? [];\n\n const productsDimensionAvailabilities = await getDimensionAvailabilitiesForProductSearchResultAction(\n new DimensionAvailabilitiesForProductSearchResultInput(\n productsList,\n this.props.context as ICoreContext,\n DimensionSwatchDisplayTypes.productCard\n ),\n this.props.context.actionContext\n );\n\n if (ArrayExtensions.hasElements(productsDimensionAvailabilities)) {\n this.setState({ productsDimensionAvailabilities });\n }\n };\n\n /**\n * Get the active price for the products.\n */\n private readonly _getActivePrice = async (): Promise => {\n const productsList = this.props.data.listPageState.result?.activeProducts ?? [];\n const products = await getPriceForProductSearchResult(\n new PriceForProductSearchResultInput(productsList),\n this.props.context.actionContext\n );\n\n const listPageState = await this.props.data.listPageState;\n listPageState.activeProducts = products;\n };\n\n private readonly _getSearchResultModal = (): ISearchResultModalViewProps => {\n const { resources } = this.props;\n return SearchResultModal({\n resources: {\n modalCloseButtonText: resources.modalCloseButtonText,\n modalTitle: resources.modalTitle\n },\n isOpen: this.state.modalIsOpen,\n returnRef: this._modalToggleRef,\n onModalToggle: this._toggleModal\n });\n };\n\n private readonly _getCollectionTitle = (): ITitleViewProps => {\n const { data, context, resources } = this.props;\n\n let collectionTitle: string | undefined = '';\n if (context && context.request && context.request.query && context.request.query.q) {\n collectionTitle = `\"${context.request.query.q}\"`;\n } else {\n collectionTitle =\n (data.category.result &&\n SearchResultContainer.getFriendlyName(context.request.locale, data.category.result.NameTranslations)) ||\n (data.category.result && data.category.result.Name) ||\n this.props.context.request.query?.title ||\n '';\n }\n let productCountText = '';\n let productCountNumber: number | undefined;\n if (data.listPageState && data.listPageState.result && data.listPageState.result.totalProductCount !== undefined) {\n productCountNumber = data.listPageState.result.totalProductCount;\n } else if (data.products && data.products.result) {\n productCountNumber = data.products.result.count;\n }\n\n if (productCountNumber && productCountNumber !== 0) {\n productCountText =\n productCountNumber !== 1\n ? format(this.props.resources.numberOfProducts, productCountNumber)\n : this.props.resources.oneProduct;\n } else {\n productCountText = format(this.props.resources.numberOfProducts, 0);\n }\n const pageName = context.request.telemetryPageName ? `result-count-${context.request.telemetryPageName.toLowerCase()}` : '';\n const titlePrefix = ;\n const titleText = collectionTitle && ;\n const titleCount = ;\n\n return {\n TitleContainer: { className: `ms-search-result-container__title ${pageName}` },\n title: {\n titlePrefix,\n titleText,\n titleCount\n }\n };\n };\n\n private readonly _getCategoryHierarchy = (): ICategoryHierarchyViewProps => {\n const { data } = this.props;\n const categoryHierarchy = data.categoryHierarchy.result;\n const categoryLinks =\n categoryHierarchy &&\n categoryHierarchy.map((value: CategoryHierarchyData, index: number) => {\n return (\n \n );\n });\n const categoryLinkSeparator = ;\n\n return {\n CategoryHierarchyContainer: { tag: 'nav', className: 'ms-search-result-container__category-hierarchy' },\n categoryHierarchyList: categoryLinks,\n categoryHierarchySeparator: categoryLinkSeparator\n };\n };\n\n private readonly _getSortingDropDown = (): ISortByViewProps => {\n const { resources } = this.props;\n const activeDropdown = this._getCurrentlySelectedOption() || this.state.sortingState.selectedSortByOption;\n let dropdownOptions = this._getAllSortByOptions();\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- App config settings are of \"any\" value.\n if (this.props.context.app.config.hideRating) {\n dropdownOptions = dropdownOptions.filter(dropdownOption => dropdownOption.key !== sortOptions.sortByOptionRatingDesc);\n }\n\n const dropdown = (\n \n );\n return {\n SortingContainer: { className: 'ms-search-result-container__Sort-by-category' },\n sortByDropDown: dropdown\n };\n };\n\n private readonly _getPagination = (): React.ReactNode => {\n const { config, context, data, resources } = this.props;\n const listPageState = data.listPageState.result;\n const fullUrl = getCurrentUrl(context.request);\n const itemsPerPage = config.itemsPerPage || 10;\n // eslint-disable-next-line max-len -- existing code\n const skipCount = !ObjectExtensions.isNullOrUndefined(listPageState?.currentPageNumber)\n ? listPageState!.currentPageNumber * (this.props.config.itemsPerPage || 10)\n : (this.props.context.request.query && +this.props.context.request.query.skip) || 0;\n const totalItems = listPageState?.totalProductCount || 0;\n const previousText = resources.flipperPrevious;\n const nextText = resources.flipperNext;\n\n if (totalItems <= itemsPerPage) {\n return null;\n }\n return (\n \n );\n };\n\n private readonly _getRefineMenu = (): IRefineMenuViewProps => {\n const { data, context, config } = this.props;\n const tempRangeTypeTODO = context.request.query && context.request.query.inputRange ? 'input' : 'slider';\n const validRefiners =\n this.props.config.updateRefinerPanel && ArrayExtensions.hasElements(this.state.refiners)\n ? this.state.refiners.filter(refiner => {\n return ArrayExtensions.hasElements(refiner.Values) && !this._shouldHideFromRefiners(refiner);\n })\n : data.refiners.result &&\n data.refiners.result.filter(refiner => {\n return ArrayExtensions.hasElements(refiner.Values) && !this._shouldHideFromRefiners(refiner);\n });\n\n const activeRefiners = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\n\n this._getexpandRefinerCount(validRefiners && validRefiners.length, config.expandRefinersCount);\n const expandedRefiners = this.expandrefinerCount;\n const subMenus =\n validRefiners &&\n validRefiners.map((productRefinerHierarchy: IProductRefinerHierarchy, index: number) => {\n return (\n index)}\n tempRangeTypeTODO={tempRangeTypeTODO}\n context={context}\n moduleId={this.props.id}\n moduleTypeName={this.props.typeName}\n telemetryContent={this.telemetryContent}\n productCountAriaLabel={this.props.resources.productCountAriaLabel}\n refineItemAriaLabel={this.props.resources.refineItemAriaLabel}\n refineItemsAriaLabel={this.props.resources.refineItemsAriaLabel}\n singleProductCountAriaLabel={this.props.resources.singleProductCountAriaLabel}\n isMobile={this.isMobile}\n />\n );\n });\n\n return {\n RefineMenuContainer: { className: 'ms-search-result-container__refine-menu' },\n RefinerSectionContainer: { className: 'ms-search-result-container__refiner-section' },\n refiners: subMenus\n };\n };\n\n /**\n * Should hide from refiners.\n * @param refiner - The refiner.\n * @returns ShouldHideFromRefiners.\n */\n private readonly _shouldHideFromRefiners = (refiner: IProductRefinerHierarchy): boolean => {\n const { channelInventoryConfiguration } = this.state;\n const isInventorySortableAttribute =\n (this.props.data.products.result?.inventoryAwareSortableAttributeId !== 0 &&\n refiner.RecordId === this.props.data.products.result?.inventoryAwareSortableAttributeId) ||\n (channelInventoryConfiguration?.ProductAvailabilitySortableAttributeRecordId !== 0 &&\n refiner.RecordId === channelInventoryConfiguration?.ProductAvailabilitySortableAttributeRecordId);\n\n const isInventoryProductAttribute =\n (this.props.data.products.result?.channelInventoryConfigurationId !== 0 &&\n refiner.RecordId === this.props.data.products.result?.channelInventoryConfigurationId) ||\n (channelInventoryConfiguration?.InventoryProductAttributeRecordId !== 0 &&\n refiner.RecordId === channelInventoryConfiguration?.InventoryProductAttributeRecordId);\n\n // Always hide sortable attribute since it's just for sorting products in Azure search, not for customers\n return (\n isInventorySortableAttribute ||\n (this.props.context.app.config.productListInventoryDisplay === ProductListInventoryFilteringOptions.HideOOS &&\n isInventoryProductAttribute)\n );\n };\n\n private readonly _getChoiceSummary = (): React.ReactNode => {\n const { resources, data, telemetry } = this.props;\n const { channelInventoryConfiguration } = this.state;\n const selectedRefiners = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\n const refinerValueName = this.props.data.refiners.result?.find(rating => rating.KeyName === 'Rating');\n return (\n \n );\n };\n\n /**\n * Get Active products.\n * @returns - JSX Elements.\n */\n private readonly _getProducts = (): JSX.Element => {\n const {\n config: { imageSettings, allowBackNavigation: shouldAllowBackNavigation }\n } = this.props;\n const { resources } = this.props;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access -- Reading config value.\n const breadCrumbType: string = this.props.context.app.config.breadcrumbType;\n const shouldAllowBack = shouldAllowBackNavigation && (breadCrumbType === 'back' || breadCrumbType === 'categoryAndBack');\n\n const products = (this.props.data.listPageState.result && this.props.data.listPageState.result.activeProducts) || [];\n const quickviewSlot = this.props.slots?.quickview?.[0];\n const productComparisonButton = ArrayExtensions.hasElements(this.props.slots.productComparisonButton)\n ? this.props.slots.productComparisonButton[0]\n : null;\n\n const isPriceMinMaxFeatureState = this.props.data.featureState.result?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.RetailSearchPriceRangeFeature'\n );\n return (\n \n );\n };\n\n private readonly _updateSortByDropdown = (notification: ILabeledDropdownOnChangeNotification): void => {\n const {\n context: { request: requestContext, actionContext }\n } = this.props;\n\n if (!requestContext || !actionContext || !this.props.data.listPageState.result) {\n // eslint-disable-next-line max-len -- existing code\n const error = `[sort-by-category] cannot sort without context: ${!requestContext ? 'requestContext ' : ''} ${\n !actionContext ? 'actionContext ' : ''\n } could not be found`;\n this.props.telemetry.warning(error);\n return;\n }\n\n window.history.pushState(\n {},\n '',\n buildListPageUrl(\n getCurrentUrl(this.props.context.request),\n undefined,\n [this._getSortColumnFromSelectedOption(notification.selectedOption)],\n undefined\n )\n );\n transaction(() => {\n this.props.data.listPageState.result!.currentPageNumber = 0;\n this.props.data.listPageState.result!.sortingCritera = {\n Columns: [this._getSortColumnFromSelectedOption(notification.selectedOption)]\n };\n });\n };\n\n private readonly _getSortColumnFromSelectedOption = (option: ILabeledDropdownOption): SortColumn => {\n const { data } = this.props;\n\n if (!data.searchConfiguration.result) {\n return {};\n }\n\n const mappedConfiguration = data.searchConfiguration.result.find(searchConfiguration => {\n return searchConfiguration.key === option.key;\n });\n\n if (mappedConfiguration) {\n return mappedConfiguration.sortColumn;\n }\n\n return {};\n };\n\n /**\n * Retrieves current sort criteria.\n * @returns Sort criteria column which is currently active or undefined if it's not specified.\n */\n private readonly _getSortCriteriaColumn = (): SortColumn | undefined => {\n const sortCriteria = this.props.data.listPageState.result?.sortingCritera;\n if (ArrayExtensions.hasElements(sortCriteria?.Columns)) {\n return sortCriteria!.Columns[0];\n }\n\n const queryColumns = parseQueryParam('sorting', this.props.context.request);\n if (ArrayExtensions.hasElements(queryColumns)) {\n return queryColumns[0];\n }\n\n return undefined;\n };\n\n /**\n * Retrieves dropdown options.\n * @returns All dropdown options.\n */\n private readonly _getAllSortByOptions = (): ILabeledDropdownOption[] => {\n const searchConfiguration = this.props.data.searchConfiguration.result;\n\n if (!searchConfiguration) {\n return [];\n }\n\n const mappedSearchConfiguration = this.sortByDropdownOptions.filter(mappedSearchConfig =>\n searchConfiguration.find(item => mappedSearchConfig.key === item.key)\n );\n\n return ArrayExtensions.validValues(mappedSearchConfiguration);\n };\n\n /**\n * Retrieves current selected dropdown option based on the sort criteria.\n * @returns Current dropdown option.\n */\n private readonly _getCurrentlySelectedOption = (): ILabeledDropdownOption | undefined => {\n const activeSortColumn = this._getSortCriteriaColumn();\n\n const searchConfiguration = this.props.data.searchConfiguration.result;\n\n if (!activeSortColumn || !searchConfiguration) {\n return undefined;\n }\n\n const activeMappedConfig = searchConfiguration.find(\n mappedSearchConfig =>\n mappedSearchConfig.sortColumn.ColumnName === activeSortColumn.ColumnName &&\n mappedSearchConfig.sortColumn.IsDescending === activeSortColumn.IsDescending\n );\n if (!activeMappedConfig) {\n return undefined;\n }\n\n return this.sortByDropdownOptions.find(dropdownOption => dropdownOption.key === activeMappedConfig.key);\n };\n\n private readonly _onUpdateRefiners = (itemToggleNotification: IRefineItemToggleNotification): void => {\n const {\n context: { request: requestContext, actionContext }\n } = this.props;\n\n if (!requestContext || !actionContext || !this.props.data.listPageState.result) {\n const error = `Refine menu cannot refine search criteria: \n ${!requestContext ? 'requestContext ' : ''} ${!actionContext ? 'actionContext ' : ''} could not be found`;\n this.props.telemetry.warning(error);\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Server side the list PageState will not be called.\n const updatedRefinementCriteria = getUpdatedRefinementCriteria(\n itemToggleNotification,\n this.props.data.listPageState.result?.activeFilters || []\n );\n\n window.history.pushState({}, '', buildListPageUrl(getCurrentUrl(this.props.context.request), updatedRefinementCriteria));\n transaction(() => {\n this.props.data.listPageState.result!.currentPageNumber = 0;\n this.props.data.listPageState.result!.activeFilters = updatedRefinementCriteria;\n });\n };\n\n private readonly _buildRefinerUrl = (itemToggleNotification: IRefineItemToggleNotification): string => {\n if (this.props.data.listPageState.result) {\n const newRefinementCriteria = getUpdatedRefinementCriteria(\n itemToggleNotification,\n this.props.data.listPageState.result.activeFilters || []\n );\n\n return buildListPageUrl(getCurrentUrl(this.props.context.request), newRefinementCriteria);\n }\n this.props.telemetry.warning('[buildRefinerQueryString]List Page State Not available, unable to build refiner URL');\n return '';\n };\n\n private readonly _onChoiceClicked = (notification: IChoiceSummaryClickNotification): void => {\n const { data, telemetry } = this.props;\n\n if (!data.listPageState.result) {\n telemetry.warning('[choice-summary-by-category._onChoiceClicked]ListPageState unavailable, unable to update refiners.');\n return;\n }\n\n let currentRefinementCriteria = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\n\n if (!notification.clearAll) {\n const selectedChoice = notification.choiceClicked;\n if (!selectedChoice) {\n telemetry.warning('[choice-summary-by-category._onChoiceClicked] Choice could not be determined');\n return;\n }\n currentRefinementCriteria = currentRefinementCriteria.filter(\n (selectedCriterion: ProductRefinerValue) => !isMatchingRefinementCriterion(selectedChoice, selectedCriterion)\n );\n } else {\n currentRefinementCriteria = [];\n\n // Set focus to sort and filter\n const dropdownElementId = this._sortAndFilterContainerRef.current && this._sortAndFilterContainerRef.current.props.dropdownId;\n const dropdownElement = dropdownElementId && document.getElementById(dropdownElementId);\n setTimeout(() => {\n dropdownElement && dropdownElement.focus();\n }, 50);\n }\n\n const fullUrl = getCurrentUrl(this.props.context.request);\n window.history.pushState({}, '', buildListPageUrl(fullUrl, currentRefinementCriteria));\n data.listPageState.result.currentPageNumber = 0;\n data.listPageState.result.activeFilters = currentRefinementCriteria;\n };\n\n private readonly _buildRefinerUrlForChoiceSummary = (selectedRefiner: ProductRefinerValue, isClearAll: boolean): string => {\n const { data, telemetry } = this.props;\n const fullUrl = getCurrentUrl(this.props.context.request);\n\n if (!data.listPageState.result) {\n telemetry.warning('[choice-summary-by-category._buildRefinerUrl]ListPageState unavailable, unable to create refiner URL.');\n return fullUrl.href;\n }\n\n let currentRefinementCriteria = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\n\n if (!isClearAll) {\n if (!selectedRefiner) {\n telemetry.warning('[choice-summary-by-category._buildRefinerUrl] URL for Choice could not be determined');\n return fullUrl.href;\n }\n currentRefinementCriteria = currentRefinementCriteria.filter(\n (selectedCriterion: ProductRefinerValue) => !isMatchingRefinementCriterion(selectedRefiner, selectedCriterion)\n );\n } else {\n currentRefinementCriteria = [];\n }\n\n return buildListPageUrl(fullUrl, currentRefinementCriteria);\n };\n\n private _getViewport(): GridSize {\n if (MsDyn365.isBrowser) {\n return isMobile({ variant: VariantType.Browser, context: this.props.context.request });\n }\n return isMobile({ variant: VariantType.Viewport, context: this.props.context.request });\n }\n\n private _toggleModal(): void {\n this.setState({\n modalIsOpen: !this.state.modalIsOpen\n });\n }\n\n private _updateViewport(): void {\n this._viewport = this._getViewport();\n\n if (this.state.modalIsOpen && !this.isMobile) {\n this._toggleModal();\n }\n }\n\n private readonly _getexpandRefinerCount = (validRefiners?: number, refinerCount?: expandRefinersCount): void => {\n switch (refinerCount) {\n case expandRefinersCount.all:\n this.expandrefinerCount = validRefiners;\n break;\n case expandRefinersCount.one:\n this.expandrefinerCount = 1;\n break;\n case expandRefinersCount.two:\n this.expandrefinerCount = 2;\n break;\n case expandRefinersCount.three:\n this.expandrefinerCount = 3;\n break;\n case expandRefinersCount.four:\n this.expandrefinerCount = 4;\n break;\n default:\n this.expandrefinerCount = 0;\n }\n };\n\n /**\n * Renders a Pagination previous text.\n * @param paginationPreviousText - Pagination previous text from resources.\n * @returns Previous text and flipper icon.\n */\n private readonly _renderPrev = (paginationPreviousText: string) => {\n return (\n \n \n {paginationPreviousText}\n
\n );\n };\n\n /**\n * Renders a Pagination next text.\n * @param paginationNextText - Pagination next text from resources.\n * @returns Next text and flipper icon.\n */\n private readonly _renderNext = (paginationNextText: string) => {\n return (\n \n {paginationNextText}\n \n
\n );\n };\n}\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport { Address, AddressPurpose, CountryRegionInfo, StateProvinceInfo } from '@msdyn365-commerce/retail-proxy';\r\nimport { format as formatNotification, getTelemetryObject, IModuleProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport { action, observable, reaction, set } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\n\r\nimport { AutoSuggest } from '@msdyn365-commerce-modules/address';\r\nimport { IAutoSuggestOptions } from '@msdyn365-commerce-modules/address';\r\nimport { AddressCommon } from '@msdyn365-commerce-modules/address';\r\nimport { AddressFormat } from '@msdyn365-commerce-modules/address';\r\nimport { AddressItemType } from '@msdyn365-commerce-modules/address';\r\nimport { AddressMetaData } from '@msdyn365-commerce-modules/address';\r\nimport { AddressOperation, AddressType, IAddressResource, IAddressResponse } from '@msdyn365-commerce-modules/address';\r\nimport { AddressAddUpdate, IAddressAddUpdateProps } from '@msdyn365-commerce-modules/address';\r\nimport { AddressList, IAddressListProps } from '@msdyn365-commerce-modules/address';\r\nimport { IEveAccountManagementAddressData } from './eve-account-management-address.data';\r\nimport { IEveAccountManagementAddressProps } from './eve-account-management-address.props.autogenerated';\r\nimport { defaultAddressTypeMap } from '../../utilities/DefaultAddressTypeMap';\r\n\r\n/**\r\n * Account management address view state interface.\r\n */\r\nexport interface IAccountManagementAddressViewState {\r\n isShowAddresList: boolean;\r\n isShowAddOrUpdateAddress: boolean;\r\n}\r\n\r\n/**\r\n * Account management address view state interface.\r\n */\r\nexport interface IAccountManagementAddressViewProps\r\n extends React.Component> {\r\n className: string;\r\n currentOperation: AddressOperation;\r\n selectedAddress?: Address;\r\n addUpdateAddress: Address;\r\n countryRegionId: string;\r\n stateProvinceInfo?: StateProvinceInfo[];\r\n customerAddresses: Address[];\r\n validationError: object;\r\n addressActionResponse?: IAddressResponse;\r\n viewState: IAccountManagementAddressViewState;\r\n AccountAddressManagement: IModuleProps;\r\n isUpdating: boolean;\r\n showAddressList: IAddressListProps;\r\n showAddOrUpdateAddress: IAddressAddUpdateProps;\r\n screenReaderNotification: React.ReactNode;\r\n}\r\n\r\n/**\r\n *\r\n * Address component.\r\n * @extends {React.Component>}\r\n */\r\n@observer\r\nclass AccountManagementAddress extends React.Component> {\r\n @observable private currentOperation: AddressOperation;\r\n\r\n @observable private selectedAddress?: Address;\r\n\r\n @observable private countryRegionId: string = 'USA';\r\n\r\n @observable private stateProvinceInfo?: StateProvinceInfo[];\r\n\r\n @observable private customerAddresses: Address[];\r\n\r\n @observable private addUpdateAddress: Address;\r\n\r\n @observable private validationError: object;\r\n\r\n @observable private addressActionResponse?: IAddressResponse;\r\n\r\n @observable private isUpdating?: boolean;\r\n\r\n @observable private hasError?: boolean;\r\n\r\n @observable private removeAddressData?: Address;\r\n\r\n private readonly addressCommon: AddressCommon;\r\n\r\n private addressFormat: AddressFormat;\r\n\r\n private countryRegions: CountryRegionInfo[] = [];\r\n\r\n private addressPurposes: AddressPurpose[] = [];\r\n\r\n private readonly resources: IAddressResource;\r\n\r\n private readonly defaultAddressType: number;\r\n\r\n private readonly telemetryContent: ITelemetryContent;\r\n\r\n private autoSuggest?: AutoSuggest;\r\n\r\n public constructor(props: IEveAccountManagementAddressProps) {\r\n super(props);\r\n const {\r\n context,\r\n data,\r\n resources,\r\n telemetry,\r\n config: { defaultAddressType }\r\n } = this.props;\r\n\r\n this.resources = resources;\r\n this.currentOperation = AddressOperation.List;\r\n this.countryRegions = data.countryRegions.result || [];\r\n this.addressPurposes = data.addressPurposes.result || [];\r\n this.customerAddresses = data.address.result || [];\r\n this.addUpdateAddress = {};\r\n this.validationError = {};\r\n this.addressCommon = new AddressCommon(context, resources, telemetry);\r\n this.addressFormat = new AddressFormat(\r\n this.countryRegions,\r\n new AddressMetaData({ ...resources }, this._getAddressFormatExcludeList()),\r\n this.addressPurposes\r\n );\r\n this.telemetryContent = getTelemetryObject(\r\n this.props.context.request.telemetryPageName!,\r\n this.props.friendlyName,\r\n this.props.telemetry\r\n );\r\n\r\n const _defaultAddressType = defaultAddressTypeMap[defaultAddressType || defaultAddressTypeMap.Delivery];\r\n this.defaultAddressType = _defaultAddressType || defaultAddressTypeMap.Delivery;\r\n }\r\n\r\n /**\r\n * On Suggestion Selected Function.\r\n * @param result - Microsoft.Maps.ISuggestionResult.\r\n */\r\n @action\r\n private readonly _onSuggestionSelected = async (result: Microsoft.Maps.ISuggestionResult): Promise => {\r\n this._clearAddressFields();\r\n const address = this.addressFormat.getTranformedAddress(result, this.stateProvinceInfo);\r\n set(this.addUpdateAddress, { Street: '' });\r\n set(this.addUpdateAddress, { ZipCode: address.ZipCode });\r\n set(this.addUpdateAddress, { CountyName: address.CountyName });\r\n set(this.addUpdateAddress, { City: address.City });\r\n set(this.addUpdateAddress, { State: address.State });\r\n set(this.addUpdateAddress, { DistrictName: address.DistrictName });\r\n set(this.addUpdateAddress, { FullAddress: address.FullAddress });\r\n\r\n // Bing autosuggest put the complete address in the Street input box. Updating the street input box to show only street address.\r\n setTimeout(() => {\r\n set(this.addUpdateAddress, { Street: address.Street });\r\n }, 0);\r\n };\r\n\r\n /**\r\n * Clear Address Fields.\r\n */\r\n @action\r\n private readonly _clearAddressFields = (): void => {\r\n const addressFormatItem = this.addressFormat.getAddressFormat(\r\n this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId\r\n );\r\n addressFormatItem.forEach(format => {\r\n if (this.addUpdateAddress[format.name] !== undefined && !this.autoSuggest?.excludedAddressFields.includes(format.name)) {\r\n this.addressFormat[format.name] = '';\r\n }\r\n });\r\n this._clearValidation();\r\n };\r\n\r\n /**\r\n * Clear Validation Function.\r\n */\r\n @action\r\n private readonly _clearValidation = (): void => {\r\n this.validationError = {};\r\n };\r\n\r\n public async componentDidMount(): Promise {\r\n const {\r\n context: {\r\n telemetry,\r\n actionContext: {\r\n requestContext: { channel }\r\n }\r\n },\r\n config: { autoSuggestionEnabled, autoSuggestOptions }\r\n } = this.props;\r\n\r\n // Initializing data props\r\n this._dataInitialize(this.props);\r\n\r\n this.props.data.countryRegions.then(() => {\r\n this._setDefaultCountryRegionId();\r\n });\r\n\r\n reaction(\r\n () => this.countryRegionId,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.currentOperation,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n if (autoSuggestionEnabled) {\r\n if (channel && !channel.BingMapsApiKey) {\r\n telemetry.error('BingMapsApiKey is missing.');\r\n return;\r\n }\r\n\r\n if (channel && !channel.BingMapsEnabled) {\r\n telemetry.error('Map is disabled from HQ.');\r\n return;\r\n }\r\n\r\n const options: IAutoSuggestOptions = { ...autoSuggestOptions };\r\n this.autoSuggest = new AutoSuggest(\r\n telemetry,\r\n options,\r\n channel?.BingMapsApiKey,\r\n channel?.ChannelCountryRegionISOCode,\r\n channel?.DefaultLanguageId\r\n );\r\n\r\n reaction(\r\n () =>\r\n this.props.data.storeSelectorStateManager.result?.loadMapApi !== undefined &&\r\n (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update),\r\n async () => {\r\n await this.autoSuggest?._loadMapAPI(await this.props.data.storeSelectorStateManager);\r\n }\r\n );\r\n\r\n reaction(\r\n () => {\r\n this.props.data.storeSelectorStateManager.result?.isMapApiLoaded;\r\n },\r\n async () => {\r\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\r\n await this._attachMapAutoSuggest();\r\n }\r\n }\r\n );\r\n }\r\n }\r\n\r\n /**\r\n * Component did mount function.\r\n */\r\n public async componentDidUpdate(): Promise {\r\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\r\n if (this.props.data.storeSelectorStateManager.result?.isMapApiLoaded) {\r\n await this._attachMapAutoSuggest();\r\n }\r\n } else {\r\n this.autoSuggest?.disposeAutoSuggest();\r\n }\r\n }\r\n\r\n /**\r\n * Should component update function.\r\n * @param nextProps - Account management address props.\r\n * @param nextState - Next state.\r\n * @returns - True if component should update, false otherwise.\r\n */\r\n public shouldComponentUpdate(\r\n nextProps: IEveAccountManagementAddressProps,\r\n nextState: IAccountManagementAddressViewState\r\n ): boolean {\r\n if (this.state === nextState && this.props.data === nextProps.data) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n public render(): JSX.Element {\r\n const { renderView, config } = this.props;\r\n\r\n const viewProps = {\r\n ...this.props,\r\n currentOperation: this.currentOperation,\r\n selectedAddress: this.selectedAddress,\r\n addUpdateAddress: this.addUpdateAddress,\r\n countryRegionId: this.countryRegionId,\r\n stateProvinceInfo: this.stateProvinceInfo,\r\n customerAddresses: this.customerAddresses,\r\n validationError: this.validationError,\r\n addressActionResponse: this.addressActionResponse,\r\n isUpdating: this.isUpdating,\r\n hasError: this.hasError,\r\n className: config.className,\r\n viewState: {\r\n isShowAddresList: this.currentOperation === AddressOperation.List,\r\n isShowAddOrUpdateAddress: this.currentOperation !== AddressOperation.List\r\n },\r\n AccountAddressManagement: {\r\n moduleProps: this.props,\r\n className: classnames('ms-account-management-address', config.className)\r\n },\r\n showAddressList: this._renderListAddress(),\r\n showAddOrUpdateAddress: this._renderAddOrUpdateAddress(),\r\n screenReaderNotification: this.removeAddressData ? this._renderScreenReaderRemoveText(this.removeAddressData) : null\r\n };\r\n\r\n return renderView(viewProps) as React.ReactElement;\r\n }\r\n\r\n /**\r\n * Method data initialization.\r\n * @param props -The account management props.\r\n */\r\n private readonly _dataInitialize = (props: IEveAccountManagementAddressProps): void => {\r\n const { data } = props;\r\n\r\n reaction(\r\n () => data.countryRegions.result,\r\n () => {\r\n this.countryRegions = data.countryRegions.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.addressPurposes.result,\r\n () => {\r\n this.addressPurposes = data.addressPurposes.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.address.result,\r\n () => {\r\n this.customerAddresses = data.address.result ?? [];\r\n }\r\n );\r\n };\r\n\r\n /**\r\n * Render Add Or Update Address Function.\r\n * @returns - AddressAddUpdate.\r\n */\r\n private readonly _renderAddOrUpdateAddress = (): IAddressAddUpdateProps => {\r\n return AddressAddUpdate({\r\n isUpdating: this.isUpdating,\r\n resources: this.resources,\r\n addressType: AddressType.Shipping,\r\n addressFormat: this.addressFormat.getAddressFormat(this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId),\r\n defaultCountryRegionId: this.countryRegionId,\r\n defaultAddressType: this.defaultAddressType,\r\n selectedAddress: this.addUpdateAddress,\r\n validationError: this.validationError,\r\n addressActionResponse: this.addressActionResponse,\r\n dropdownDisplayData: this.addressFormat.getPrefilledAddressDropdownData(\r\n this.resources.addressStateDefaultSelectionText,\r\n this.stateProvinceInfo\r\n ),\r\n telemetryContent: this.telemetryContent,\r\n onInputChange: this._onAddressAddUpdateInputChange,\r\n onDropdownChange: this._onAddressAddUpdateDropdownChange,\r\n onSave: this._onAddressAddUpdateSubmit,\r\n onCancel: this._resetView\r\n });\r\n };\r\n\r\n /**\r\n * Render List Address Function.\r\n * @returns - AddressList.\r\n */\r\n private readonly _renderListAddress = (): IAddressListProps => {\r\n const { config } = this.props;\r\n\r\n /**\r\n * Render Address ttitle.\r\n * @param event - Msdyn365.ContentEditableEvent.\r\n */\r\n const handleLineItemHeadingChange = (event: Msdyn365.ContentEditableEvent) => {\r\n config.heading!.text = event.target.value;\r\n };\r\n const heading = config.heading && {\r\n text: config.heading.text,\r\n headingTag: config.heading.tag\r\n };\r\n\r\n return AddressList({\r\n isUpdating: this.isUpdating,\r\n selectedAddress: this.selectedAddress,\r\n addressFormat: this.addressFormat,\r\n addresses: this.customerAddresses,\r\n addressPurposes: this.addressPurposes,\r\n resources: this.resources,\r\n heading,\r\n primaryAddressSectionHeading: config.primaryAddressSectionHeading,\r\n otherAddressSectionHeading: config.otherAddressSectionHeading,\r\n contextRequest: this.props.context.request,\r\n telemetryContent: this.telemetryContent,\r\n handleLineItemHeadingChange,\r\n onEditAddress: this._goToEditAddress,\r\n onRemoveAddress: this._onRemoveAddress,\r\n onAddAddress: this._goToAddAddress,\r\n onUpdatePrimaryAddress: this._onSubmitUpdatePrimaryAddress\r\n });\r\n };\r\n\r\n /**\r\n * Attach Map Auto Suggest Function.\r\n */\r\n private readonly _attachMapAutoSuggest = async (): Promise => {\r\n const {\r\n data: {\r\n storeSelectorStateManager: { result: storeSelectorStateManager }\r\n }\r\n } = this.props;\r\n\r\n if (storeSelectorStateManager?.isMapApiLoaded) {\r\n this.autoSuggest?.attachAutoSuggest('#shipping_addressstreet', '#shipping_addressstreet_container', this._onSuggestionSelected);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Add Update Function.\r\n * @param name - String.\r\n * @param value - String | Boolean | Number.\r\n */\r\n private readonly onAddressAddUpdate = (name: string, value: string | boolean | number) => {\r\n set(this.addUpdateAddress, { [name]: value });\r\n this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId, name);\r\n };\r\n\r\n /**\r\n * On Address Add Update Input Change.\r\n * @param event - Input Change Event.\r\n */\r\n private readonly _onAddressAddUpdateInputChange = (event: React.ChangeEvent): void => {\r\n if (event.target.type === 'checkbox') {\r\n this.onAddressAddUpdate(event.target.name, event.target.checked);\r\n } else {\r\n const value = (event.target.value || '').replace(new RegExp('[<>]', 'gi'), '');\r\n this.onAddressAddUpdate(event.target.name, value);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Add Update Dropdown Change.\r\n * @param event - Dropdown Change Event.\r\n */\r\n private readonly _onAddressAddUpdateDropdownChange = (event: React.ChangeEvent): void => {\r\n if (event.target.name === AddressItemType[AddressItemType.AddressTypeValue]) {\r\n this.onAddressAddUpdate(event.target.name, +event.target.value);\r\n } else {\r\n this.onAddressAddUpdate(event.target.name, event.target.value);\r\n }\r\n if (event.target.name === AddressItemType[AddressItemType.ThreeLetterISORegionName]) {\r\n this._onCountryChange(event.target.value);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Update Function.\r\n * @param response - Promise.\r\n * @param onSuccess - IAddressResponse.\r\n */\r\n private readonly _onAddressUpdate = (response: Promise, onSuccess: (response: IAddressResponse) => void): void => {\r\n this.isUpdating = true;\r\n response.then(\r\n (result: IAddressResponse) => {\r\n if (result.address) {\r\n this.hasError = false;\r\n onSuccess(result);\r\n } else {\r\n this.hasError = true;\r\n this.addressActionResponse = result;\r\n }\r\n this.isUpdating = false;\r\n },\r\n () => {\r\n this.hasError = true;\r\n this.isUpdating = false;\r\n }\r\n );\r\n };\r\n\r\n /**\r\n * On Address Add Update Submit Function.\r\n */\r\n private readonly _onAddressAddUpdateSubmit = (): void => {\r\n if (!this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId)) {\r\n return;\r\n }\r\n let response: Promise;\r\n if (this.addressCommon.isAuthenticatedFlow()) {\r\n response =\r\n this.currentOperation === AddressOperation.Update\r\n ? this.addressCommon.updateCustomerAddress(this.addUpdateAddress)\r\n : this.addressCommon.addCustomerAddress(this.addUpdateAddress);\r\n } else {\r\n response = Promise.resolve({ address: this.addUpdateAddress });\r\n }\r\n\r\n this._onAddressUpdate(response, this._onAddOrUpdateSuccess);\r\n };\r\n\r\n /**\r\n * On Country Change Function.\r\n * @param countryRegionId - String.\r\n */\r\n private readonly _onCountryChange = (countryRegionId: string) => {\r\n this.countryRegionId = countryRegionId;\r\n const twoLetterISORegionName = this.addressFormat.getTwoLetterISORegionName(countryRegionId);\r\n set(this.addUpdateAddress, { ThreeLetterISORegionName: countryRegionId });\r\n set(this.addUpdateAddress, { TwoLetterISORegionName: twoLetterISORegionName });\r\n this.autoSuggest?.changeAutoSuggestionCountryCode(twoLetterISORegionName);\r\n this._clearAddressFields();\r\n };\r\n\r\n /**\r\n * Get Address Format Exclude List Function.\r\n * @returns - Address Format Exclude List.\r\n */\r\n private readonly _getAddressFormatExcludeList = (): AddressItemType[] => {\r\n const { config } = this.props;\r\n const addressFormatExcludeList: AddressItemType[] = [];\r\n\r\n if (!config.showAddressType) {\r\n addressFormatExcludeList.push(AddressItemType.AddressTypeValue);\r\n }\r\n\r\n addressFormatExcludeList.push(AddressItemType.IsPrimary);\r\n\r\n return addressFormatExcludeList;\r\n };\r\n\r\n /**\r\n * Get State Provinces Function.\r\n */\r\n private readonly _getStateProvinces = (): void => {\r\n if (\r\n !this.countryRegionId ||\r\n !(this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update)\r\n ) {\r\n return;\r\n }\r\n\r\n this.addressCommon.getStateProvinces(this.countryRegionId).then((result: StateProvinceInfo[]) => {\r\n const stateInfo = result.some(state => state.StateId === this.addUpdateAddress.State);\r\n\r\n // Reset state if selected state not found in the list.\r\n if (!stateInfo) {\r\n set(this.addUpdateAddress, { State: '' });\r\n }\r\n this.stateProvinceInfo = result;\r\n });\r\n };\r\n\r\n private _setDefaultCountryRegionId(): void {\r\n const { request } = this.props.context;\r\n const market = request && request.channel && request.channel.ChannelCountryRegionISOCode;\r\n\r\n this.countryRegionId = this.addressCommon.getDefaultCountryRegionId(this.countryRegionId, this.countryRegions, market);\r\n }\r\n\r\n /**\r\n * Update CurrentOperation Function.\r\n * @param operation - AddressOperation.\r\n */\r\n private readonly _updateCurrentOperation = (operation: AddressOperation) => {\r\n this.currentOperation = operation;\r\n this._clearAddressFields();\r\n };\r\n\r\n /**\r\n * On Submit Update Primary Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _onSubmitUpdatePrimaryAddress = (address: Address): void => {\r\n this.selectedAddress = address;\r\n const response = this.addressCommon.updateCustomerPrimaryAddress(address);\r\n this._onAddressUpdate(response, this._onUpdatePrimaryAddressSuccess);\r\n };\r\n\r\n /**\r\n * Go To Edit Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _goToEditAddress = (address: Address): void => {\r\n this.addUpdateAddress = { ...address };\r\n this.countryRegionId = this.addUpdateAddress.ThreeLetterISORegionName || 'USA';\r\n this._updateCurrentOperation(AddressOperation.Update);\r\n };\r\n\r\n /**\r\n * On Remove Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _onRemoveAddress = (address: Address): void => {\r\n address.Deactivate = true;\r\n this.removeAddressData = address;\r\n const response = this.addressCommon.updateCustomerAddress(address);\r\n this._onAddressUpdate(response, this._onAddOrUpdateSuccess);\r\n };\r\n\r\n /**\r\n * Renders Notification screen reader text for removed address.\r\n * @param address - Address input.\r\n * @returns Notification for removed address.\r\n */\r\n private readonly _renderScreenReaderRemoveText = (address: Address): React.ReactNode => {\r\n const notification = formatNotification(this.resources.removeAddressNotification!, `${address.Name!}`);\r\n return (\r\n \r\n {notification}\r\n
\r\n );\r\n };\r\n\r\n /**\r\n * Go To Add Address Function.\r\n */\r\n private readonly _goToAddAddress = (): void => {\r\n this.addUpdateAddress = {};\r\n this._setDefaultCountryRegionId();\r\n set(this.addUpdateAddress, { ThreeLetterISORegionName: this.countryRegionId });\r\n set(this.addUpdateAddress, { AddressTypeValue: this.defaultAddressType });\r\n this._setDefaultCountryRegionId();\r\n this._updateCurrentOperation(AddressOperation.Add);\r\n };\r\n\r\n /**\r\n * On Add Or Update Success Function.\r\n * @param response - IAddressResponse.\r\n */\r\n private readonly _onAddOrUpdateSuccess = (response: IAddressResponse): void => {\r\n if (response.customerAddresses) {\r\n this.customerAddresses = response.customerAddresses;\r\n }\r\n this._resetView();\r\n };\r\n\r\n /**\r\n * On Update Primary Address Success Function.\r\n * @param response - IAddressResponse.\r\n */\r\n private readonly _onUpdatePrimaryAddressSuccess = (response: IAddressResponse): void => {\r\n if (response.customerAddresses) {\r\n this.customerAddresses = response.customerAddresses;\r\n }\r\n };\r\n\r\n /**\r\n * Reset view function.\r\n */\r\n private readonly _resetView = (): void => {\r\n this.selectedAddress = undefined;\r\n this._updateCurrentOperation(AddressOperation.List);\r\n };\r\n}\r\n\r\nexport default AccountManagementAddress;\r\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport { IImageProps, IImageSettings, Image } from '@msdyn365-commerce/core';\r\nimport { CartLine, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\r\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\r\nimport { format } from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport * as React from 'react';\r\n\r\nimport { IEveCheckoutShippingAddressResources } from '../eve-checkout-shipping-address.props.autogenerated';\r\n\r\n/**\r\n * The cartline product interface.\r\n */\r\nexport interface ICartLineWithProduct {\r\n cartLine: CartLine;\r\n product?: SimpleProduct;\r\n}\r\n\r\n/**\r\n * The checkout shipping cartline interface.\r\n */\r\nexport interface ICheckoutShippingCartLineInfo {\r\n lineId: string;\r\n imageProps: IImageProps;\r\n quantity: number;\r\n}\r\n\r\n/**\r\n * The checkout shipping cartline props.\r\n */\r\nexport interface ICheckoutShippingCartLinesProps {\r\n moduleClassName: string;\r\n cartLines: ICheckoutShippingCartLineInfo[];\r\n title: string;\r\n itemTitle: string;\r\n resources: IEveCheckoutShippingAddressResources;\r\n}\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention -- Following as per module\r\nexport const CheckoutPickupCartLines: React.FC = ({\r\n moduleClassName,\r\n cartLines,\r\n title,\r\n itemTitle,\r\n resources\r\n}) => {\r\n if (!ArrayExtensions.hasElements(cartLines)) {\r\n return null;\r\n }\r\n const quantity = 1;\r\n return (\r\n