= (props: IOrderHistoryTableRowProps) => {\n const {\n data: { salesOrder, channelIdentities, orgUnitLocations, customer, originator },\n resources: { orderPlacedByFullText, orderPlacedByYouText, orderOnBehalfOfText }\n } = props;\n\n const linkToOrderHistoryDetails = getOrderDetailsPageUrl(props.context.actionContext, props.data.salesOrder);\n\n const defaultCount = 0;\n const itemsCount = ArrayExtensions.hasElements(salesOrder.SalesLines) ? countItems(salesOrder.SalesLines) : defaultCount;\n const channelName = getOrderChannelName(salesOrder, channelIdentities);\n const channelAddress = getOrderChannelAddress(salesOrder, orgUnitLocations);\n const channelTypeValue = getOrderChannelTypeValue(salesOrder, channelIdentities);\n const isOnlineStore = isOnlineStoreChannel(channelTypeValue, channelAddress);\n\n const columnWithNumberClassName = `${props.className}__column-with-number`;\n\n let orderNumberCellText = props.resources.orderHistoryOrderNumberIsNotAvailable;\n if (!StringExtensions.isNullOrWhitespace(salesOrder.SalesId)) {\n orderNumberCellText = salesOrder.SalesId!;\n }\n\n const isYou =\n !isOboRequest(props.context.request) &&\n originator?.CustomerId &&\n originator?.CustomerName &&\n !originator?.StaffId &&\n !originator?.StaffName &&\n customer?.AccountNumber === originator?.CustomerId\n ? true\n : false;\n const isYouObo = !isYou && !isOboRequest(props.context.request);\n let placedByName =\n originator?.StaffId && originator.StaffName\n ? originator.StaffName\n : originator?.CustomerId && originator.CustomerName\n ? originator.CustomerName\n : '-';\n placedByName = `${placedByName} ${isYou ? orderPlacedByYouText : ''}`;\n const isOnBehalfOfOrder = isOnlineStore && originator?.StaffName && customer?.Name;\n const maxOrderTextLength = window.innerWidth > 700 ? 20 : 12;\n const placedByText = `${orderPlacedByFullText} ${placedByName}`;\n const onBehalfOfText = `${orderOnBehalfOfText} ${customer?.Name} ${isYouObo ? orderPlacedByYouText : ''}`;\n\n return (\n <>\n {props.shouldShowOrderPlacedBy && (\n \n \n {placedByName}\n {isOnBehalfOfOrder && (\n <>\n \n )}\n \n {orderNumberCellText} \n {isOnBehalfOfOrder && !props.shouldShowOrderPlacedBy && (\n <>\n \n {getShortEllipsisText(placedByText, maxOrderTextLength)}\n \n \n )}\n \n {formatDate(props.context, salesOrder.CreatedDateTime)} \n {itemsCount} \n {formatAmount(props.context, salesOrder.TotalAmount, salesOrder.CurrencyCode)} \n {props.shouldShowChannelInfo && (\n \n {channelName &&\n (channelAddress\n ? `${props.resources.posChannelNameText} ${channelName}`\n : props.resources.onlineStoreChannelNameText)}\n \n )}\n \n \n {props.resources.orderHistoryViewDetailsButtonText}\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 order history rows for mobile view.\n */\nexport const OrderHistoryMobileTableRowCellComponent: React.FC = (props: IOrderHistoryTableRowProps) => {\n const {\n data: { salesOrder }\n } = props;\n\n const linkToOrderHistoryDetails = getOrderDetailsPageUrl(props.context.actionContext, props.data.salesOrder);\n\n const onClickViewDetails = React.useCallback(() => {\n if (MsDyn365.isBrowser) {\n window.location.href = linkToOrderHistoryDetails;\n }\n }, [linkToOrderHistoryDetails]);\n\n const orderNumber = StringExtensions.isNullOrWhitespace(salesOrder.SalesId)\n ? props.resources.orderHistoryOrderNumberIsNotAvailable\n : salesOrder.SalesId!;\n\n const dateText = format(\n props.resources.orderHistoryCreatedDateMobileDescriptionText,\n formatDate(props.context, salesOrder.CreatedDateTime)\n );\n\n const cellClassName = `${props.className}__mobile-cell`;\n\n return (\n <>\n \n \n {orderNumber} \n {dateText} \n \n \n \n \n {props.resources.orderHistoryViewDetailsButtonText}\n \n \n \n );\n};\n\n/**\n * Renders order history rows.\n * @param props - Configuration for the rows.\n * @returns A react node with a list of order history rows.\n */\nexport const OrderHistoryTableRowComponent: React.FC = (props: IOrderHistoryTableRowProps) => {\n const isMobileView = isMobile({ variant: VariantType.Viewport, context: props.context.request }) === 'xs';\n\n return (\n \n {isMobileView ? (\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 } from '@msdyn365-commerce/core';\nimport { ChannelIdentity, Customer, OrderOriginator, OrgUnitLocation } from '@msdyn365-commerce/retail-proxy';\nimport React from 'react';\n\nimport { IOrderHistory } from '../../actions/get-order-shipment-history';\nimport { IOrderHistoryTableHeaderResources, OrderHistoryTableHeaderComponent } from './components/order-history-table-header-component';\nimport { IOrderHistoryTableRowResources, OrderHistoryTableRowComponent } from './components/order-history-table-row-component';\n\n/**\n * Interface with the data required for order history.\n */\nexport interface IOrderHistoryTableData {\n orderHistory: IOrderHistory;\n channelIdentities?: ChannelIdentity[];\n orgUnitLocations?: OrgUnitLocation[];\n customer?: Customer;\n originators?: OrderOriginator[];\n}\n\n/**\n * Resources needed to render order history table.\n */\nexport interface IOrderHistoryTableResources extends IOrderHistoryTableHeaderResources, IOrderHistoryTableRowResources {}\n\n/**\n * Configuration of order history table.\n */\nexport interface IOrderHistoryTableProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n\n resources: IOrderHistoryTableResources;\n\n shouldShowChannelInfo: boolean;\n shouldShowOrderPlacedBy?: boolean;\n}\n\n/**\n * Renders order history table.\n * @param props - Configuration for order history table.\n * @returns React node with the table.\n */\nexport const OrderHistoryTableComponent: React.FC = (props: IOrderHistoryTableProps) => {\n const rowClassName = `${props.className}__row`;\n const headerClassName = `${props.className}__header`;\n\n return (\n \n \n {props.data.orderHistory.salesOrders.map((salesOrder, index) => {\n return (\n \n (salesOrder.SalesId && o.SalesId === salesOrder.SalesId) ||\n (salesOrder.TransactionId && o.TransactionId === salesOrder.TransactionId)\n )\n }}\n shouldShowChannelInfo={props.shouldShowChannelInfo}\n shouldShowOrderPlacedBy={props.shouldShowOrderPlacedBy}\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 * as React from 'react';\n\nimport { IGetOrderSummaryInput, IOrderSummary, IPriceContext } from '../../../common';\n\ninterface ISummaryLineProps {\n priceContext?: IPriceContext;\n name: string;\n label: string;\n value?: number;\n}\n\nconst OrderSummaryLine: React.SFC = ({ name, label, value = 0, priceContext }) => (\n \n {label} \n {priceContext ? (\n {value} \n )}\n
\n);\n\nexport const getOrderDetailsOrderSummary = ({\n order,\n priceContext,\n earnedPoints,\n resource: {\n orderSummaryHeading,\n orderSummaryItemsTotalLabel,\n orderSummaryShippingFeeLabel,\n orderSummaryTaxLabel,\n orderSummaryGrandTotalLabel,\n pointsEarnedLabel\n },\n canShip,\n isTaxIncludedInPrice,\n isShowTaxBreakUp\n}: IGetOrderSummaryInput): IOrderSummary => {\n const subTotal = isTaxIncludedInPrice && isShowTaxBreakUp ? order.SubtotalAmountWithoutTax : order.SubtotalAmount;\n const taxOnShippingCharge = order.TaxOnShippingCharge !== undefined ? order.TaxOnShippingCharge : 0;\n const shippingChargeAmount = order.ShippingChargeAmount !== undefined ? order.ShippingChargeAmount : 0;\n\n // isTaxIncludedInPrice isShowTaxBreakup useProperties\n // False False/True shippingChargeAmount\n // True True shippingChargeAmount\n // True false shippingChargeAmount + taxOnShippingCharge\n const shippingCharge =\n isTaxIncludedInPrice && !isShowTaxBreakUp ? shippingChargeAmount + taxOnShippingCharge : order.ShippingChargeAmount;\n return {\n orderSummaryProps: { className: 'ms-order-details__order-summary' },\n heading: {orderSummaryHeading}
,\n subtotal: \n {`${confirmationIdLabel} `}\n {channelReferenceId} \n \n );\n return (\n channelReferenceId &&\n (shouldShowQrCode !== undefined && shouldShowQrCode ? (\n \n {confirmationIdNode}\n
\n \n {qrCodeSrText}\n \n
\n
{callCenterChannelNameText} ;\n } else if (channelAddress) {\n const posChannelName = `${posChannelNameText ?? ''} ${channelName ?? ''}`;\n channelNameNode = {posChannelName} ;\n } else {\n const onlineChannelName = `${onlineStoreChannelNameText ?? ''} ${channelName ?? ''}`;\n channelNameNode = {onlineChannelName} ;\n }\n return channelNameNode;\n};\n\nconst getPlacedBy = (\n moduleName: string,\n originator: OrderOriginator | undefined,\n isYou: [boolean, boolean] | undefined,\n orderPlacedByFullText: string | undefined,\n orderPlacedByYouText: string | undefined,\n orderOnBehalfOfText: string | undefined\n): React.ReactNode | undefined => {\n let placedByNode: React.ReactNode | undefined;\n\n if (originator) {\n const placedByName =\n originator.StaffId && originator.StaffName\n ? originator.StaffName\n : originator.CustomerId && originator.CustomerName\n ? originator.CustomerName\n : '-';\n const onBehalfOfText = originator.StaffId && originator.StaffName && originator.CustomerId && originator.CustomerName;\n placedByNode = (\n \n {orderPlacedByFullText}
{placedByName} {isYou && isYou[0] && ` ${orderPlacedByYouText}`}\n {onBehalfOfText && (\n
\n {orderOnBehalfOfText} {`${originator.CustomerName}`} \n {isYou && isYou[1] && ` ${orderPlacedByYouText}`}\n
\n )}\n
{channelAddress} \n ),\n placedBy: getPlacedBy(moduleName, originator, isYou, orderPlacedByFullText, orderPlacedByYouText, orderOnBehalfOfText),\n salesId: salesId ? {`${orderIdLabel} ${salesId}`} : '',\n receiptId: receiptId ? (\n {`${receiptIdLabel} ${receiptId}`} \n ) : (\n ''\n ),\n receiptEmail: receiptEmail && (\n \n {receiptEmailMessage}\n {receiptEmail} \n \n ),\n createdDate: !isSalesInvoice && createdDate && (\n \n {orderPlacedOnLabel}\n {` `}\n {createdDate}\n \n ),\n count: !isSalesInvoice && count !== undefined && count > 0 && (\n \n {count === 1 ? `${count} ${orderItemLabel}` : `${count} ${orderItemsLabel}`}\n \n ),\n amount: !isSalesInvoice && (amount || amount === 0) && (\n = ({\r\n product,\r\n context,\r\n imageSettings,\r\n resources,\r\n telemetryContent\r\n}) => {\r\n if(product === null) {\r\n return null;\r\n }\r\n\r\n const productName = product.Name;\r\n const productRecordId = product && product.RecordId ? product.RecordId: 0;\r\n const productUrl = getProductPageUrlSync(product.Name || '', productRecordId, context && context.actionContext, undefined);\r\n const fallbackImage = getFallbackImageUrl(product.ItemId, context.actionContext.requestContext.apiSettings);\r\n\r\n // Construct telemetry attribute to render\r\n const payLoad = getPayloadObject('click', telemetryContent!, productName!, productRecordId.toString());\r\n\r\n const attribute = getTelemetryAttributes(telemetryContent!, payLoad);\r\n return (\r\n \r\n );\r\n\r\n};\r\n\r\nfunction renderProductPlacementImage(imageSettings?: IImageSettings, gridSettings?: IGridSettings, imageUrl?: string, altText?: string, fallbackImage?: string,): JSX.Element | null {\r\n if (!imageUrl || !gridSettings || !imageSettings) {\r\n return null;\r\n }\r\n const img: IImageData = {\r\n src: imageUrl,\r\n altText: altText ? altText : ''\r\n };\r\n const imageProps = {\r\n gridSettings: gridSettings,\r\n imageSettings: imageSettings,\r\n fallBackSrc: fallbackImage\r\n };\r\n return (\r\n {title} ;\r\n}","import { getPayloadObject, getTelemetryAttributes, IPayLoad, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\r\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\r\nimport { RatingComponent } from '@msdyn365-commerce/components';\r\nimport { ICoreContext } from '@msdyn365-commerce/core';\r\nimport { ProductRefinerSource, ProductRefinerValue, RefinerType } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\r\nimport { IRefineItemCommonProps } from './refine-item.props.common';\r\n\r\n/**\r\n * RefineItem properties\r\n */\r\nexport interface IRefineItemProps {\r\n\r\n parentProductRefinerHierarchy: IProductRefinerHierarchy;\r\n productRefinerValue: ProductRefinerValue;\r\n selectedRefinementCriterion: ProductRefinerValue | undefined;\r\n selectedRefinerValues?: ProductRefinerValue[];\r\n refineItemCommonProps: IRefineItemCommonProps;\r\n isDisabled: boolean;\r\n context: ICoreContext;\r\n moduleId: string;\r\n moduleTypeName: string;\r\n index?: number;\r\n /** The telemetry content */\r\n telemetryContent?: ITelemetryContent;\r\n onToggle(notfication: Readonly): void;\r\n urlBuilder(refiner: IRefineItemToggleNotification): string;\r\n}\r\n\r\n/**\r\n * Refine item state\r\n */\r\nexport interface IRefineItemState extends React.ComponentState {\r\n isChecked: boolean;\r\n renderingError?: object;\r\n}\r\n\r\n/**\r\n * Single-select and multi-select refine item component (controlled by RefineSubmenu)\r\n */\r\nexport default class RefineItem extends React.Component {\r\n private anchorType: React.RefObject;\r\n private payLoad: IPayLoad;\r\n\r\n constructor(props: IRefineItemProps) {\r\n super(props);\r\n this._onClick = this._onClick.bind(this);\r\n this.state = {\r\n isChecked: !!this.props.selectedRefinementCriterion\r\n };\r\n this.anchorType = React.createRef();\r\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, '');\r\n }\r\n\r\n // tslint:disable-next-line:max-func-body-length\r\n public render(): JSX.Element | undefined {\r\n const {\r\n isDisabled,\r\n refineItemCommonProps,\r\n parentProductRefinerHierarchy,\r\n productRefinerValue,\r\n selectedRefinementCriterion,\r\n index,\r\n // @ts-ignore\r\n children,\r\n onToggle,\r\n context,\r\n telemetryContent,\r\n ...attrs\r\n } = this.props;\r\n if (!productRefinerValue) {\r\n refineItemCommonProps.telemetry.error('[refine-item] Cannot render refineItem without productRefinerValue');\r\n return undefined;\r\n }\r\n if (!productRefinerValue.LeftValueBoundString) {\r\n refineItemCommonProps.telemetry.warning(`[refine-item] RefineItem without LeftValueBoundString: ${JSON.stringify(productRefinerValue)}`);\r\n }\r\n const isSingleSelect = parentProductRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect;\r\n let itemTypeClassName = isSingleSelect ? 'single-select' : 'multi-select';\r\n itemTypeClassName = `ms-refine-submenu-item ${itemTypeClassName}`;\r\n const inputType = isSingleSelect ? 'radio' : 'checkbox';\r\n const isChecked = !!selectedRefinementCriterion;\r\n itemTypeClassName = isChecked ? `${itemTypeClassName}-checked` : itemTypeClassName;\r\n if (parentProductRefinerHierarchy.SourceValue === ProductRefinerSource.Rating) {\r\n if (productRefinerValue.LeftValueBoundString) {\r\n this.payLoad.contentAction.etext = productRefinerValue.LeftValueBoundLocalizedString;\r\n const attribute = getTelemetryAttributes(telemetryContent!, this.payLoad);\r\n const refinerRating = parseInt(productRefinerValue.LeftValueBoundString, 10);\r\n const ratingRefiner = this.props.selectedRefinerValues?.find(value => value.DataTypeValue === productRefinerValue.DataTypeValue);\r\n const selectedRating = parseInt(ratingRefiner?.LeftValueBoundString || '0', 10);\r\n let ratingComponentClass: string = 'ms-rating-component';\r\n if (refinerRating > selectedRating) {\r\n ratingComponentClass = `${ratingComponentClass}__up`;\r\n } else if (refinerRating < selectedRating) {\r\n ratingComponentClass = `${ratingComponentClass}__down`;\r\n } else {\r\n ratingComponentClass = `${ratingComponentClass}__current`;\r\n }\r\n return (\r\n \r\n \r\n {productRefinerValue.Count !== undefined && `(${productRefinerValue.Count})`} \r\n \r\n \r\n );\r\n } else {\r\n return undefined;\r\n }\r\n } else {\r\n this.payLoad.contentAction.etext = productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString;\r\n const attribute = getTelemetryAttributes(telemetryContent!, this.payLoad);\r\n return (\r\n \r\n \r\n \r\n {productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString}\r\n {productRefinerValue.Count !== undefined && ` (${productRefinerValue.Count})`}\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n private _getRefinerUrl(): string {\r\n const { urlBuilder, parentProductRefinerHierarchy, productRefinerValue, selectedRefinementCriterion } = this.props;\r\n\r\n if (productRefinerValue) {\r\n return urlBuilder({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: !selectedRefinementCriterion\r\n });\r\n }\r\n\r\n return '';\r\n }\r\n\r\n private _onClick = (e: React.MouseEvent): void => {\r\n e.preventDefault();\r\n\r\n const { parentProductRefinerHierarchy, productRefinerValue, selectedRefinementCriterion } = this.props;\r\n if (productRefinerValue) {\r\n this.props.onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: !selectedRefinementCriterion\r\n });\r\n\r\n setTimeout(\r\n () => {\r\n this.anchorType.current && this.anchorType.current.focus();\r\n },\r\n 0\r\n );\r\n }\r\n }\r\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 { TenderLine } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport * as React from 'react';\n\nimport { IPaymentMethods, IPaymentMethodsInput } from '../../../common';\n\nexport const getOrderDetailsPaymentMethods = ({\n priceContext,\n tenderLines,\n tenderIdOperationIdMap,\n resource: {\n paymentMethodsTitle,\n creditCardEndingLabel,\n giftCardEndingLabel,\n amountCoveredLabel,\n loyaltyCardUsedLabel,\n cashUsedLabel,\n customerAccountUsedLabel\n }\n}: IPaymentMethodsInput): IPaymentMethods => {\n const OPERATIONS = {\n PayCard: 201,\n PayGiftCertificate: 214,\n PayLoyalty: 207,\n PayCash: 200,\n PayCustomerAccount: 202\n };\n\n const getLastFourDigit = (digits = '') => (digits ? digits.substr(-4) : '');\n\n const getCard = (tenderLine: TenderLine, showAmount: boolean = false) => {\n const cardLastFourDigit = getLastFourDigit(tenderLine.MaskedCardNumber);\n\n // @ts-expect-error\n const isValidCardNumber = cardLastFourDigit && !isNaN(cardLastFourDigit);\n const amount = (tenderLine.AuthorizedAmount || 0) > 0 ? tenderLine.AuthorizedAmount : tenderLine.Amount;\n const showAmountCovered = !!(showAmount && amount && amount > 0);\n\n return (\n \n
\n {`${tenderLine.CardTypeId} ${isValidCardNumber ? `${creditCardEndingLabel} ${cardLastFourDigit}` : ''}`}\n
\n {showAmountCovered && (\n
\n {amountCoveredLabel}\n
\n )}\n
\n
\n {customerAccountUsedLabel}\n {` `}\n {tenderLine.CustomerId}\n
\n
\n {amountCoveredLabel}\n
\n
\n
\n {giftCardEndingLabel}\n {` `}\n {getLastFourDigit(tenderLine.GiftCardId)}\n
\n
\n {amountCoveredLabel}\n
\n
\n
\n {loyaltyCardUsedLabel}\n {` `}\n {tenderLine.LoyaltyCardId}\n
\n
\n {amountCoveredLabel}\n
\n
\n
{cashUsedLabel}
\n
\n {amountCoveredLabel}\n
\n
{paymentMethodsTitle}
,\n methods: tenderLines.reduce((lines: React.ReactNode[], tenderLine) => {\n if (!tenderLine.TenderTypeId) {\n return lines;\n }\n switch (tenderIdOperationIdMap[tenderLine.TenderTypeId]) {\n case OPERATIONS.PayCard:\n lines.push(getCard(tenderLine, tenderLines.length > 1));\n break;\n case OPERATIONS.PayGiftCertificate:\n lines.push(getGiftCertificate(tenderLine));\n break;\n case OPERATIONS.PayLoyalty:\n lines.push(getLoyalty(tenderLine));\n break;\n case OPERATIONS.PayCash:\n lines.push(getCash(tenderLine));\n break;\n case OPERATIONS.PayCustomerAccount:\n lines.push(getCustomerAccountPayment(tenderLine));\n break;\n default:\n\n // Do nothing\n }\n return lines;\n }, [])\n };\n};\n","import { ITelemetry } from '@msdyn365-commerce/core';\r\nimport { AttributeDataType, ProductRefinerValue, RefinerType } from '@msdyn365-commerce/retail-proxy';\r\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\r\n\r\n/**\r\n * Types of product refiner values\r\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\nexport const enum ProductRefinerValueDataTypeValue {\r\n /**\r\n * Range slider is used for selections like price\r\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n Range = 1,\r\n\r\n /**\r\n * Range input is a different way to specify ranges and can be expressed with input boxes\r\n * as well as a set of discrete single-select type values\r\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n RangeInput = 4,\r\n\r\n /**\r\n * This is a discrete list item, either multi-select or single-select\r\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n List = 5,\r\n\r\n /**\r\n * Boolean types allows only single-select\r\n * @deprecated This will be removed soon. Please, use `AttributeDataType` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { AttributeDataType } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n Boolean = 6\r\n}\r\n\r\n/**\r\n * Types of product refiners\r\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\nexport const enum ProductRefinerTypeValue {\r\n /**\r\n * Refiner values are single-select\r\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n Single = 0,\r\n\r\n /**\r\n * Refiner values are multi-select\r\n * @deprecated This will be removed soon. Please, use `RefinerType` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { RefinerType } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n Multi = 1\r\n}\r\n\r\n/**\r\n * ProductRefinerSource enum type.\r\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\nexport const enum ProductRefinerSource {\r\n /**\r\n * The None member.\r\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n None = 0,\r\n /**\r\n * The Attribute member.\r\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n Attribute = 1,\r\n /**\r\n * The Category member.\r\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n Category = 2,\r\n /**\r\n * The Price member.\r\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n Price = 3,\r\n /**\r\n * The Rating member.\r\n * @deprecated This will be removed soon. Please, use `ProductRefinerSource` from `@msdyn365-commerce/retail-proxy` instead.\r\n * @example\r\n * ```\r\n * import { ProductRefinerSource } from `@msdyn365-commerce/retail-proxy`;\r\n * ```\r\n */\r\n Rating = 4\r\n}\r\n\r\n/**\r\n * Checks if the data type value corresponds to a slider.\r\n */\r\nexport function isRangeType(dataTypeValue: number | undefined): boolean {\r\n return dataTypeValue === AttributeDataType.Currency ||\r\n dataTypeValue === AttributeDataType.Decimal ||\r\n dataTypeValue === AttributeDataType.Integer;\r\n}\r\n\r\n/**\r\n * Find the refinement criterion associated with this product refiner value\r\n * @param productRefinerValue product refiner value to match\r\n * @param refinementCriteria selected refinement criteria\r\n */\r\nexport function findMatchingRefinementCriterion(\r\n productRefinerValue: ProductRefinerValue,\r\n refinementCriteria: ProductRefinerValue[]\r\n): ProductRefinerValue | undefined {\r\n // if the value is a range, then match only on data type value; otherwise match on item string\r\n return refinementCriteria.find(\r\n (refinementCriterion: ProductRefinerValue) => isMatchingRefinementCriterion(productRefinerValue, refinementCriterion)\r\n );\r\n}\r\n\r\n/**\r\n * Find the refinement criterion associated with this product refiner value\r\n * @param productRefinerValue product refiner value to match\r\n * @param refinementCriteria selected refinement criteria\r\n */\r\nexport function isMatchingRefinementCriterion(\r\n productRefinerValue: ProductRefinerValue,\r\n refinementCriterion: ProductRefinerValue\r\n): boolean {\r\n // if the value is a range, then match only on data type value; otherwise match on item string\r\n return refinementCriterion.RefinerRecordId === productRefinerValue.RefinerRecordId &&\r\n refinementCriterion.RefinerSourceValue === productRefinerValue.RefinerSourceValue &&\r\n refinementCriterion.DataTypeValue === productRefinerValue.DataTypeValue &&\r\n (isRangeType(refinementCriterion.DataTypeValue) || refinementCriterion.LeftValueBoundString === productRefinerValue.LeftValueBoundString);\r\n}\r\n\r\nexport function getUpdatedRefinementCriteria(\r\n itemToggleNotification: IRefineItemToggleNotification,\r\n currentRefinementCriteria: ProductRefinerValue[]): ProductRefinerValue[] {\r\n const updatedRefinementCriteria: ProductRefinerValue[] = [];\r\n let toggledItemFound = false;\r\n currentRefinementCriteria.forEach((selectedCriterion: ProductRefinerValue) => {\r\n if (isMatchingRefinementCriterion(itemToggleNotification.productRefinerValue, selectedCriterion)) {\r\n toggledItemFound = true;\r\n if (itemToggleNotification.isSelecting) {\r\n const next = {\r\n ...selectedCriterion,\r\n LeftValueBoundString: itemToggleNotification.rangeStart !== undefined && `${itemToggleNotification.rangeStart}` || selectedCriterion.LeftValueBoundString,\r\n RightValueBoundString: itemToggleNotification.rangeEnd !== undefined && `${itemToggleNotification.rangeEnd}` || selectedCriterion.RightValueBoundString,\r\n };\r\n updatedRefinementCriteria.push(next);\r\n\r\n } // else the item is being de-selected, so omit it from the refinement criteria\r\n } else {\r\n // keep existing criterion because it is not in the item toggle notification\r\n updatedRefinementCriteria.push(selectedCriterion);\r\n }\r\n });\r\n\r\n if (!toggledItemFound) {\r\n const next = {\r\n ...itemToggleNotification.productRefinerValue,\r\n LeftValueBoundString: itemToggleNotification.rangeStart !== undefined && `${itemToggleNotification.rangeStart}` || itemToggleNotification.productRefinerValue.LeftValueBoundString,\r\n RightValueBoundString: itemToggleNotification.rangeEnd !== undefined && `${itemToggleNotification.rangeEnd}` || itemToggleNotification.productRefinerValue.RightValueBoundString,\r\n };\r\n updatedRefinementCriteria.push(next);\r\n\r\n // If single select, then deselect any others in the parent refiner group\r\n if ((itemToggleNotification.productRefinerValue.DataTypeValue === AttributeDataType.Text || itemToggleNotification.productRefinerValue.DataTypeValue === AttributeDataType.TrueFalse) &&\r\n itemToggleNotification.parentProductRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect) {\r\n itemToggleNotification.parentProductRefinerHierarchy.Values.forEach((child: ProductRefinerValue) => {\r\n if (child.RefinerRecordId === next.RefinerRecordId && child.LeftValueBoundString === next.LeftValueBoundString) {\r\n // do nothing\r\n } else {\r\n const matchingIndex = updatedRefinementCriteria.findIndex((criterion: ProductRefinerValue) => isMatchingRefinementCriterion(child, criterion));\r\n if (matchingIndex > -1) {\r\n updatedRefinementCriteria.splice(matchingIndex, 1);\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n return updatedRefinementCriteria;\r\n}\r\n\r\nexport function formatPrice(\r\n amount: string | undefined,\r\n currency: string | undefined,\r\n locale: string | undefined,\r\n telemetry: ITelemetry): string {\r\n if (!amount || !currency) {\r\n telemetry.trace(`[refine-menu.utilities.formatPrice] could not format price for ${amount} ${currency}`);\r\n return amount || '';\r\n }\r\n const priceAmount = (amount && Number(amount)) || 0;\r\n let result: string;\r\n\r\n try {\r\n result = new Intl.NumberFormat(locale, {\r\n style: 'currency',\r\n currencyDisplay: 'symbol',\r\n currency: currency,\r\n minimumFractionDigits: 0\r\n }).format(priceAmount);\r\n } catch (e) {\r\n result = `${priceAmount} ${currency}`;\r\n telemetry.warning(`[refine-menu.utilities.formatPrice] Failed to format price for ${result}: ${e}`);\r\n }\r\n\r\n return result;\r\n}","import { Slider } from '@msdyn365-commerce-modules/utilities';\r\nimport debounce from 'lodash/debounce';\r\nimport { computed } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\nimport { formatPrice } from './utilities';\r\n\r\ntype InputType = 'Min' | 'Max';\r\n\r\nimport { IRefineItemProps, IRefineItemState } from './refine-item';\r\n\r\nexport type RangeRefineItemType = 'slider' | 'input';\r\n\r\n/**\r\n * Range refine item properties\r\n */\r\nexport interface IRangeRefineItemProps extends IRefineItemProps {\r\n rangeType: RangeRefineItemType;\r\n minValueSliderThumbAriaLabel?: string;\r\n maxValueSliderThumbAriaLabel?: string;\r\n}\r\n\r\n/**\r\n * Range refine item state\r\n */\r\nexport interface IRangeRefineItemState extends IRefineItemState {\r\n validationErrorMin: string | undefined;\r\n validationErrorMax: string | undefined;\r\n selectedMin: string | undefined;\r\n selectedMax: string | undefined;\r\n touchedMin: boolean;\r\n touchedMax: boolean;\r\n}\r\n\r\n/**\r\n * RangeRefineItem component (controlled by RefineSubmenu)\r\n */\r\n@observer\r\nexport default class RangeRefineItem extends React.Component {\r\n private _formattedPriceReverseLookup: Map = new Map();\r\n\r\n private minInput: React.RefObject;\r\n private maxInput: React.RefObject;\r\n\r\n @computed get currencyCode(): string {\r\n return this.props.productRefinerValue.UnitText || '';\r\n }\r\n\r\n constructor(props: IRangeRefineItemProps) {\r\n super(props);\r\n this._onRangeUpdate = this._onRangeUpdate.bind(this);\r\n this._onRangeUpdateEnd = this._onRangeUpdateEnd.bind(this);\r\n this._handleRangeTooltipText = this._handleRangeTooltipText.bind(this);\r\n this._changeMin = this._changeMin.bind(this);\r\n this._changeMax = this._changeMax.bind(this);\r\n this._finishChangeMin = this._finishChangeMin.bind(this);\r\n this._finishChangeMax = this._finishChangeMax.bind(this);\r\n\r\n this.minInput = React.createRef();\r\n this.maxInput = React.createRef();\r\n\r\n const { selectedRefinementCriterion } = this.props;\r\n const initialMin = selectedRefinementCriterion && selectedRefinementCriterion.LeftValueBoundString || '0';\r\n const initialMax = selectedRefinementCriterion && selectedRefinementCriterion.RightValueBoundString || undefined;\r\n this.state = {\r\n isChecked: false,\r\n validationErrorMin: undefined,\r\n validationErrorMax: undefined,\r\n selectedMin: initialMin,\r\n selectedMax: initialMax,\r\n touchedMin: false,\r\n touchedMax: false\r\n };\r\n }\r\n\r\n public render(): JSX.Element | undefined {\r\n const { productRefinerValue, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\r\n\r\n if (!productRefinerValue || !parentProductRefinerHierarchy) {\r\n refineItemCommonProps.telemetry.error('Cannot render refine value range without productRefinerValue and parentProductRefinerHierarchy');\r\n return undefined;\r\n }\r\n\r\n if (this.props.rangeType === 'input') {\r\n return this._renderInputFields();\r\n }\r\n\r\n return this._renderSlider();\r\n }\r\n\r\n private _renderInputFields(): JSX.Element | undefined {\r\n const { isDisabled, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\r\n const { selectedMin, selectedMax, touchedMin, touchedMax, validationErrorMin, validationErrorMax } = this.state;\r\n\r\n const rangeAriaLabel = (refineItemCommonProps.rangeNameFormat || '{0}').replace('{0}', (parentProductRefinerHierarchy.KeyName || ''));\r\n const formAttrs = {\r\n 'aria-label': rangeAriaLabel,\r\n 'aria-disabled': isDisabled\r\n };\r\n\r\n // To enable price formatting of selected fields, this is the approach:\r\n // initial value: min=0 formatted as price, max=undefined\r\n // onFocus/onChange: convert to number (unformat) and mark as touched to indicate value is being edited\r\n // onBlur: validate and format entered value as price\r\n const minInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-min ${validationErrorMin ? 'refine-submenu__input-range--error' : ''}`;\r\n const maxInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-max ${validationErrorMax ? 'refine-submenu__input-range--error' : ''}`;\r\n const minLabelClassName = 'ms-refine-submenu__input-range-label refine-submenu__input-range-label-min';\r\n const maxLabelClassName = 'ms-refine-submenu__input-range-label refine-submenu__input-range-label-max';\r\n const formattedSelectedMin = this._getFormattedSelectedValue(selectedMin, touchedMin, validationErrorMin);\r\n const formattedSelectedMax = this._getFormattedSelectedValue(selectedMax, touchedMax, validationErrorMax);\r\n return (\r\n \r\n );\r\n }\r\n\r\n private _renderSlider(): JSX.Element | undefined {\r\n const { isDisabled, productRefinerValue, parentProductRefinerHierarchy, selectedRefinementCriterion } = this.props;\r\n const min = productRefinerValue.LeftValueBoundString;\r\n const max = productRefinerValue.RightValueBoundString;\r\n const selectedMin = selectedRefinementCriterion && selectedRefinementCriterion.LeftValueBoundString || productRefinerValue.LeftValueBoundString || '0';\r\n const selectedMax = selectedRefinementCriterion && selectedRefinementCriterion.RightValueBoundString || productRefinerValue.RightValueBoundString || max;\r\n const sliderId = `slider_${parentProductRefinerHierarchy.RecordId}_${productRefinerValue.RefinerRecordId}`;\r\n const ariaAttributes = {\r\n 'aria-disabled': isDisabled\r\n };\r\n\r\n const minPrice = this._formatPrice(min);\r\n const maxPrice = this._formatPrice(max);\r\n const selectedMinPrice =this._formatPrice(selectedMin);\r\n const selectedMaxPrice =this._formatPrice(selectedMax);\r\n\r\n return (\r\n ): void {\r\n this._changeValue(event, 'Min');\r\n }\r\n\r\n private _changeMax(event: React.FocusEvent): void {\r\n this._changeValue(event, 'Max');\r\n }\r\n\r\n private _changeValue(event: React.FocusEvent, inputType: InputType): void {\r\n const selectedKey = `selected${inputType}`;\r\n const touchedKey = `touched${inputType}`;\r\n this.setState({\r\n [selectedKey]: this._getInputWithoutFormatting(event.currentTarget.value),\r\n [touchedKey]: true\r\n });\r\n }\r\n\r\n private _finishChangeMin(event: React.FocusEvent): boolean {\r\n const selectedMinValue = this._getInputWithoutFormatting(event.currentTarget.value);\r\n this.setState({\r\n selectedMin: selectedMinValue,\r\n minTouched: false\r\n });\r\n const minInput = Number(selectedMinValue);\r\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue, refineItemCommonProps, selectedRefinementCriterion } = this.props;\r\n const max = selectedRefinementCriterion && selectedRefinementCriterion.RightValueBoundString || undefined;\r\n\r\n const maxNum = max ? Number(max) : undefined;\r\n\r\n if (isNaN(minInput)) {\r\n this.setState({validationErrorMin: refineItemCommonProps.validationErrorNaN});\r\n this._focus('Min');\r\n return false;\r\n }\r\n\r\n if (this._validateRange(minInput, maxNum)) {\r\n onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: true,\r\n rangeStart: minInput,\r\n rangeEnd: maxNum\r\n });\r\n return true;\r\n } else {\r\n this._focus('Min');\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private _finishChangeMax(event: React.FocusEvent): boolean {\r\n const selectedMaxValue = this._getInputWithoutFormatting(event.currentTarget.value);\r\n this.setState({\r\n selectedMax: selectedMaxValue,\r\n maxTouched: false\r\n });\r\n const maxInput = Number(selectedMaxValue);\r\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue, refineItemCommonProps, selectedRefinementCriterion } = this.props;\r\n const min = selectedRefinementCriterion && selectedRefinementCriterion.LeftValueBoundString || '0';\r\n\r\n const minNum = Number(min);\r\n\r\n if (isNaN(maxInput)) {\r\n this.setState({validationErrorMax: refineItemCommonProps.validationErrorNaN});\r\n this._focus('Max');\r\n return false;\r\n }\r\n\r\n if (this._validateRange(minNum, maxInput)) {\r\n if (productRefinerValue) {\r\n onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: true,\r\n rangeStart: minNum,\r\n rangeEnd: maxInput\r\n });\r\n } else {\r\n this._focus('Max');\r\n }\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private _focus(inputType: InputType): void {\r\n const ref = inputType === 'Max' ? this.maxInput : this.minInput;\r\n\r\n setTimeout(() => {\r\n if (ref && ref.current) {\r\n ref.current.focus();\r\n }\r\n }, 50);\r\n }\r\n\r\n private _getFormattedSelectedValue(selected: string | undefined, touched: boolean, validationError: string | undefined): string | undefined {\r\n if (touched || validationError || selected === undefined) {\r\n return selected;\r\n }\r\n return this._formatPrice(selected);\r\n }\r\n\r\n private _validateRange(min: number, max: number | undefined): boolean {\r\n const { refineItemCommonProps } = this.props;\r\n if (max === undefined) {\r\n return true;\r\n }\r\n\r\n if (min > max) {\r\n this.setState({\r\n validationErrorMin: refineItemCommonProps.validationErrorRange,\r\n validationErrorMax: refineItemCommonProps.validationErrorRange\r\n });\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n private _formatPrice(amount: string | undefined): string {\r\n const locale = this.props.refineItemCommonProps.locale;\r\n const result = formatPrice(amount, this.currencyCode, locale, this.props.refineItemCommonProps.telemetry);\r\n\r\n if (amount !== undefined && !this._formattedPriceReverseLookup.has(result)) {\r\n this._formattedPriceReverseLookup.set(result, amount);\r\n }\r\n\r\n return result;\r\n }\r\n\r\n private _getInputWithoutFormatting(input: string): string {\r\n // First try to cast raw input to a number\r\n const inputAsNum = Number(input);\r\n if (!isNaN(inputAsNum)) {\r\n return input;\r\n }\r\n\r\n // Otherwise try a reverse lookup and fall back to the raw input if all else fails\r\n const reverseLookupResult = this._formattedPriceReverseLookup.get(input);\r\n return reverseLookupResult || input;\r\n }\r\n\r\n // NOTE: Fix types once Shared Components build pipeline bug fixed\r\n // tslint:disable-next-line:no-any\r\n private _onRangeUpdate(sliderChangeNotification: any): void {\r\n // Need to filter out mousemove events as these cause errors after the menu updates and slider re-renders\r\n if (sliderChangeNotification.eventType !== 'mousemove') {\r\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue } = this.props;\r\n if (productRefinerValue && sliderChangeNotification) {\r\n onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: true,\r\n rangeStart: sliderChangeNotification.firstThumbValue,\r\n rangeEnd: sliderChangeNotification.secondThumbValue\r\n });\r\n\r\n this._focusOnSliderThumb(sliderChangeNotification);\r\n }\r\n }\r\n }\r\n\r\n // tslint:disable-next-line\r\n private _onRangeUpdateEnd(sliderChangeNotification: any): void {\r\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue } = this.props;\r\n if (productRefinerValue && sliderChangeNotification) {\r\n onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: true,\r\n rangeStart: sliderChangeNotification.firstThumbValue,\r\n rangeEnd: sliderChangeNotification.secondThumbValue\r\n });\r\n\r\n this._focusOnSliderThumb(sliderChangeNotification);\r\n }\r\n }\r\n\r\n // tslint:disable-next-line\r\n private _focusOnSliderThumb(sliderChangeNotification: any): void {\r\n if (sliderChangeNotification.id) {\r\n const element = document.getElementById(`${sliderChangeNotification.id}range`);\r\n if (!!element) {\r\n setTimeout(\r\n () => {\r\n element.focus();\r\n }, 0);\r\n }\r\n }\r\n }\r\n\r\n private _handleRangeTooltipText(tooltip: number): string {\r\n return this._formatPrice(`${tooltip}`);\r\n }\r\n}","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Address as AddressRetail } from '@msdyn365-commerce/retail-proxy';\nimport * as React from 'react';\n\nexport type addressType = 'store' | 'ship';\n\nexport interface IShippingAddressProps {\n moduleName: string;\n address: AddressRetail;\n deliveryType: string;\n showCompleteAddress?: boolean;\n resource: {\n shipToLabel: string;\n storeLabel: string;\n phoneLabel: string;\n phoneAriaLabel: string;\n };\n}\n\nconst Address: React.SFC = ({\n moduleName,\n address,\n deliveryType,\n showCompleteAddress,\n resource: { shipToLabel, storeLabel, phoneLabel }\n}) => (\n \n
{deliveryType !== 'ship' ? storeLabel : shipToLabel}
\n {address.Name &&
{address.Name} }\n {showCompleteAddress ? (\n <>\n {address.Street && (\n
\n {address.Street}\n {` `}\n \n )}\n {address.City &&
{address.City} }\n {address.State &&
{`, ${address.State}`} }\n {address.County &&
{`, ${address.County}`} }\n {address.ZipCode &&
{` ${address.ZipCode}`} }\n {address.ThreeLetterISORegionName && (\n
{` ${address.ThreeLetterISORegionName}`} \n )}\n {address.Phone && (\n
\n {phoneLabel} \n \n )}\n \n ) : (\n address.FullAddress &&
{address.FullAddress} \n )}\n
= ({ text, className }) => (\n \n {` `}\n {text}\n {` `}\n \n);\n","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\nimport {\r\n getGroups,\r\n IGroup,\r\n IGroupDelivery,\r\n IGroups,\r\n IOrderDetailsViewProps,\r\n IOrderInformation,\r\n IOrderSummary,\r\n IPaymentMethods,\r\n IPriceContext,\r\n} from '@msdyn365-commerce-modules/order-management';\r\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\r\nimport { Address } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\nimport { ISalesLine } from '../../../components/citta-order-management/get-sales-line';\r\nimport { getSalesLines, getSalesLinesInput } from '../../../components/citta-order-management/get-sales-lines';\r\nimport { IOrderDetailsConfig, IOrderDetailsProps as IOrderDetailsExtentionProps, IOrderDetailsResources as IOrderDetailsExtentionResources } from '../definition-extensions/order-details.ext.props.autogenerated';\r\nimport ShippingAddress from './components/shipping-address';\r\nimport { IOrderChannelConfigurationData } from './order-channelConfig.data';\r\nimport { PriceComponent } from '@msdyn365-commerce/components';\r\nexport interface IOrderInformationExt extends IOrderInformation {\r\n processingLabelText?: string;\r\n orderIdLabelText?: string;\r\n}\r\nexport const OrderInfomation: React.FC = ({\r\n orderInformationProps,\r\n salesId,\r\n createdDate,\r\n count,\r\n amount,\r\n channelReferenceId,\r\n channelName,\r\n channelAddress,\r\n processingLabelText,\r\n orderIdLabelText\r\n}) => (\r\n \r\n {channelName}\r\n {channelAddress}\r\n {_renderProcessStatus(salesId, orderIdLabelText!, processingLabelText!)}\r\n {createdDate}\r\n {count}\r\n {amount}\r\n {channelReferenceId}\r\n \r\n );\r\nfunction _renderProcessStatus(salesId: React.ReactNode, orderIdLabelText: string, processingLabelText: string): React.ReactNode {\r\n return (\r\n \r\n {typeof salesId === 'string' ? (orderIdLabelText?.concat(' ', processingLabelText!)) : salesId}\r\n \r\n );\r\n}\r\nexport const SalesLine: React.FC = ({ salesLineProps, salesLine, buyAgainButton }) => (\r\n \r\n {salesLine}\r\n {buyAgainButton}\r\n \r\n);\r\n\r\nexport const GroupDelivery: React.FC = ({ deliveryProps, heading, count }) => (\r\n \r\n {heading}\r\n {count}\r\n \r\n);\r\n\r\n// tslint:disable\r\nexport const Group: React.FC = ({ groupProps, delivery, salesLinesProps, salesLines }) => (\r\n \r\n {delivery && \r\n {salesLines.map(salesLine => (\r\n \r\n {/*@ts-ignore*/}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n);\r\n// tslint:enable\r\n\r\nexport const Groups: React.FC = ({ groupsProps, groups }) => (\r\n \r\n {groups.map((group, index) => (\r\n \r\n);\r\n\r\nexport const OrderSummary: React.FC = ({ orderSummaryProps, heading, subtotal, shipping, tax, totalAmount, earnedPoints }) => (\r\n \r\n {heading}\r\n {subtotal}\r\n {shipping}\r\n {tax}\r\n {totalAmount}\r\n {earnedPoints}\r\n \r\n);\r\n\r\nexport const Payment: React.FC = ({ paymentMethodsProps, title, methods }) => (\r\n \r\n {title}\r\n {methods}\r\n \r\n);\r\n\r\nconst OrderDetailsView: React.FC & IOrderDetailsExtentionResources> = props => {\r\n const {moduleProps, heading, alert, loading, payment, config, resources } = props;\r\n const priceContext = _getPriceContext(props);\r\n\r\n if (!props.data.orderHydration.result) {\r\n return \r\n {loading}\r\n \r\n }\r\n const salesLinesInput = getSalesLinesInput(props, 'ms-order-details', props.data.orderHydration.result!.salesOrder, props.data.orderHydration.result!.products, priceContext);\r\n const salesLines = salesLinesInput && getSalesLines(salesLinesInput);\r\n const groups = salesLines\r\n ? getGroups({\r\n moduleName:'ms-order-details',\r\n salesLines,\r\n resources: resources\r\n }): undefined;\r\n\r\n return (\r\n \r\n {heading}\r\n {alert}\r\n {loading}\r\n \r\n {_renderOrderOverview(props, salesLines, groups)}\r\n \r\n {groups && \r\n {_renderOrderSummary(props, salesLines, groups)}\r\n {payment &&
}\r\n
\r\n );\r\n};\r\n\r\nfunction _renderOrderSummary(props: IOrderDetailsViewProps & IOrderDetailsExtentionProps & IOrderDetailsExtentionResources,\r\n salesLines: ISalesLine[] | undefined, groups: IGroups | undefined): React.ReactNode\r\n{\r\n const isB2B = props.context?.request?.app?.platform?.enableDefaultOrderQuantityLimits === 'b2b';\r\n\r\n const {orderSummary} = props;\r\n if (!orderSummary) {\r\n return null;\r\n }\r\n return (\r\n \r\n {orderSummary.heading}\r\n
\r\n {orderSummary && (\r\n <>\r\n {_renderSubTotal(props)}\r\n {_renderShippingInclTaxes(props)}\r\n {_renderOtherCharges(props)}\r\n {/*hide on us*/}\r\n {orderSummary.tax}\r\n {_renderTotalOrder(props)}\r\n {isB2B? null : _renderTotalSavings(props)}\r\n \r\n )}\r\n
\r\n
& IOrderDetailsExtentionResources): JSX.Element | null {\r\n const DiscountAmount = props.data.orderHydration.result?.salesOrder.DiscountAmount;\r\n return (\r\n \r\n {DiscountAmount && DiscountAmount > 0 ? (\r\n <>\r\n Total savings \r\n
\r\n );\r\n}\r\n\r\nfunction _renderSubTotal(props: IOrderDetailsViewProps & IOrderDetailsExtentionProps & IOrderDetailsExtentionResources): JSX.Element | null {\r\n var subtotal=0;\r\n props.data.orderHydration.result?.salesOrder.SalesLines?.forEach((item)=>{\r\n subtotal += item.Price! * item.Quantity!;\r\n });\r\n const OrderSubTotal = subtotal;//props.data.checkout.result?.checkoutCart.cart.NetPrice;\r\n return (\r\n \r\n {OrderSubTotal && OrderSubTotal > 0 ? (\r\n <>\r\n {props.resources.orderSummaryItemsTotalLabel} \r\n
\r\n );\r\n }\r\n function _renderTotalOrder(props: IOrderDetailsViewProps & IOrderDetailsExtentionProps & IOrderDetailsExtentionResources): JSX.Element | null {\r\n const OrderTotal = props.data.orderHydration.result?.salesOrder.TotalAmount;\r\n return (\r\n \r\n {OrderTotal && OrderTotal > 0 ? (\r\n <>\r\n {props.resources.orderSummaryGrandTotalLabel} \r\n
\r\n );\r\n }\r\n\r\nfunction _renderOtherCharges(props: IOrderDetailsViewProps & IOrderDetailsExtentionProps & IOrderDetailsExtentionResources): React.ReactNode | null{\r\n const chargeLines = props.data.orderHydration.result?.salesOrder.ChargeLines;\r\n let chargeAmountInclTax = 0;\r\n if(chargeLines) {\r\n chargeLines.forEach(chargeLine => {\r\n if (chargeLine.IsShipping) {\r\n const chargeAmountInclTaxLocal = chargeLine.CalculatedAmount ? chargeLine.CalculatedAmount : 0;\r\n chargeAmountInclTax = chargeAmountInclTax + chargeAmountInclTaxLocal;\r\n }\r\n });\r\n }\r\n if (chargeAmountInclTax == 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {chargeAmountInclTax && chargeAmountInclTax > 0 ? (\r\n <>\r\n Other charges \r\n
\r\n );\r\n}\r\n\r\nfunction _renderShippingInclTaxes(props: IOrderDetailsViewProps & IOrderDetailsExtentionProps & IOrderDetailsExtentionResources): React.ReactNode | null{\r\n const chargeLines = props.data.orderHydration.result?.salesOrder.ChargeLines;\r\n let chargeAmountInclTax = 0;\r\n if(chargeLines) {\r\n chargeLines.forEach(chargeLine => {\r\n if (!chargeLine.IsShipping) {\r\n const chargeAmountInclTaxLocal = chargeLine.CalculatedAmount ? chargeLine.CalculatedAmount : 0;\r\n chargeAmountInclTax = chargeAmountInclTax + chargeAmountInclTaxLocal;\r\n }\r\n });\r\n }\r\n if (chargeAmountInclTax == 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {chargeAmountInclTax && chargeAmountInclTax > 0 ? (\r\n <>\r\n {props.resources.shippingCharges} \r\n
\r\n );\r\n}\r\n\r\nfunction _renderOrderOverview (props: IOrderDetailsViewProps & IOrderDetailsExtentionProps & IOrderDetailsExtentionResources,\r\n salesLines: ISalesLine[] | undefined, groups: IGroups | undefined): React.ReactNode {\r\n const giftCardItemId: string | undefined = props.data.channelConfiguration.result?.GiftCardItemId;\r\n const isB2B = props.app.platform.enableCustomerAccountPayment === 'b2b';\r\n const filteredSalesLines = salesLines?.filter(s=>s.data.salesLine.ItemId !== giftCardItemId);\r\n const {orderInfomation, config, resources } = props;\r\n const {processingLabel, orderIdLabel} = resources;\r\n if(filteredSalesLines && filteredSalesLines?.length > 0) {\r\n return (\r\n <>\r\n \r\n {orderInfomation &&
}\r\n {/* {groups && groups.groups[0].delivery.trackingInfo} */}\r\n {isB2B? \"\" : salesLines && _renderDeliveryMode(filteredSalesLines, resources)}\r\n {config && config.gstNumber ?\r\n
\r\n
{resources.companyNameLabel}
\r\n
\r\n {resources.gstNumberLabel}{' '}\r\n \r\n {config.gstNumber}\r\n \r\n
\r\n
\r\n : null}\r\n
\r\n { filteredSalesLines && _renderAddress(filteredSalesLines, resources)}\r\n
\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {orderInfomation &&
}\r\n {/* {groups && groups.groups[0].delivery.trackingInfo} */}\r\n {config && config.gstNumber ?\r\n
\r\n
{resources.companyNameLabel}
\r\n
\r\n {resources.gstNumberLabel}{' '}\r\n \r\n {config.gstNumber}\r\n \r\n
\r\n
\r\n : null}\r\n
& IOrderDetailsExtentionResources): IPriceContext {\r\n const{id, typeName, context, telemetry, resources:{ freePriceText }} = props;\r\n return {\r\n id,\r\n typeName,\r\n context,\r\n telemetry,\r\n freePriceText\r\n };\r\n}\r\nfunction _renderAddress(salesLines: ISalesLine[], resources:IOrderDetailsExtentionResources): React.ReactNode {\r\n const shippingAddress = _getShippingAddress(salesLines);\r\n return (\r\n {resources.deliveryMode}{': '}\r\n \r\n {salesLines[0].data.deliveryType === 'ship' ? 'Shipping' : 'Click & Collect' }\r\n \r\n
\r\n );\r\n}\r\nfunction _getShippingAddress(salesLinesProps: ISalesLine[]): Address {\r\n return salesLinesProps[0].data.salesLine.ShippingAddress || {};\r\n}\r\n\r\nexport default OrderDetailsView;\r\n","import * as React from 'react';\r\ninterface ILink {\r\n className?: string;\r\n text?: string;\r\n href?: string;\r\n ariaLabel?: string;\r\n}\r\n\r\nexport const Link: React.FC = ({ text, className, href, ariaLabel }) => ( {text} );","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport OrderDetails from './order-details';\nimport OrderDetailsView from './order-details.view';\n\nexport * from './components';\nexport * from './order-details';\nexport * from './order-details.data';\nexport { IOrderDetailsConfig, IOrderDetailsProps, IOrderDetailsResources } from './order-details.props.autogenerated';\nexport * from './order-details.view';\n\nexport { OrderDetails, OrderDetailsView };\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { getPayloadObject, getTelemetryAttributes } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IGetHelpInput, IHelp } from '../../..';\n\nexport const getOrderConfirmationHelp = ({\n needHelpLabel,\n helpLineNumberLabel,\n contactNumber,\n helpLineContactAriaLabel,\n telemetryContent\n}: IGetHelpInput): IHelp => {\n const payLoad = getPayloadObject('click', telemetryContent!, '');\n const attribute = getTelemetryAttributes(telemetryContent!, payLoad);\n return {\n helpProps: { className: 'ms-order-confirmation__help' },\n needHelpLabel: {needHelpLabel}
,\n helpLineNumberLabel: {helpLineNumberLabel} ,\n contactNumber: (\n \n {contactNumber}\n \n )\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport {\n ChannelDeliveryOptionConfiguration,\n ProductDeliveryOptions,\n SalesLine,\n SalesOrder,\n SimpleProduct,\n TransactionType\n} from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport {\n Button,\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n IModuleProps,\n INodeProps,\n ITelemetryContent,\n TelemetryConstant\n} from '@msdyn365-commerce-modules/utilities';\nimport classname from 'classnames';\nimport get from 'lodash/get';\nimport { computed } from 'mobx';\nimport * as React from 'react';\n\nimport { IGetOrderSummaryInput, IHelp, IOrderSummary, IPaymentMethods, IPaymentMethodsInput } from '../../common';\nimport { getGroups, IGroups } from '../../common/get-groups';\nimport { getOrderInformation, getOrderInformationInput, IOrderInformation } from '../../common/get-order-information';\nimport { ISalesLine } from '../../common/get-sales-line';\nimport { getSalesLines, getSalesLinesInput } from '../../common/get-sales-lines';\nimport { Label } from '../../common/label';\nimport { getTenderIdOperationIdMap, IPriceContext } from '../../common/utilities';\nimport { getOrderConfirmationHelp } from './components/get-help';\nimport { getOrderConfirmationOrderSummary } from './components/get-order-summary';\nimport { getOrderConfirmationPaymentMethods } from './components/get-payment-methods';\nimport { IOrderConfirmationData } from './order-confirmation.data';\nimport { IOrderConfirmationProps } from './order-confirmation.props.autogenerated';\n\nexport interface IOrderConfirmationViewProps extends IOrderConfirmationProps {\n moduleProps: IModuleProps;\n salesOrder?: SalesOrder;\n footerProps?: INodeProps;\n alert?: React.ReactNode;\n loading?: React.ReactNode;\n heading: React.ReactNode;\n backToShoppingLink?: React.ReactNode;\n orderInfomation?: IOrderInformation;\n salesLines?: ISalesLine[];\n groups?: IGroups;\n orderSummary?: IOrderSummary;\n payment?: IPaymentMethods;\n help?: IHelp;\n}\n\n/**\n *\n * OrderConfirmation component.\n * @extends {React.PureComponent>}\n */\nclass OrderConfirmation extends React.PureComponent> {\n private readonly moduleName: string = 'ms-order-confirmation';\n\n private readonly telemetryContent?: ITelemetryContent;\n\n private readonly backToShoppingAttributes?: Msdyn365.IDictionary;\n\n constructor(props: IOrderConfirmationProps) {\n super(props);\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n const payLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.BackToShopping);\n this.backToShoppingAttributes = getTelemetryAttributes(this.telemetryContent, payLoad);\n }\n\n @computed get isCurrentChannel(): boolean {\n if (!this.order) {\n return false;\n }\n return this.order.ChannelId === get(this.props, 'context.request.apiSettings.channelId');\n }\n\n @computed get isDataReady(): boolean {\n return get(this.props, 'data.orderHydration.status') === 'SUCCESS';\n }\n\n @computed get hasError(): boolean {\n return get(this.props, 'data.orderHydration.status') === 'FAILED';\n }\n\n @computed get order(): SalesOrder | undefined {\n return get(this.props, 'data.orderHydration.result.salesOrder');\n }\n\n @computed get products(): SimpleProduct[] {\n return get(this.props, 'data.orderHydration.result.products') || [];\n }\n\n @computed get deliveryOptions(): ProductDeliveryOptions[] {\n return get(this.props, 'data.orderHydration.result.deliveryOptions') || [];\n }\n\n @computed public get customerName(): Readonly {\n const customer = this.props.data.accountInformation?.result;\n if (Msdyn365.isOboRequest(this.props.context.request)) {\n // For OBO scenario, display full customer name because multiple customers may have the same first name.\n return customer ? customer.Name : undefined;\n } else {\n return customer ? customer.FirstName || customer.Name : undefined;\n }\n }\n\n @computed get priceContext(): IPriceContext {\n const {\n id,\n typeName,\n context,\n telemetry,\n resources: { freePriceText }\n } = this.props;\n return {\n id,\n typeName,\n context,\n telemetry,\n freePriceText\n };\n }\n\n @computed get earnedPoints(): number {\n const loyaltyCard = this.props.data.loyaltyCard.result;\n if (loyaltyCard && loyaltyCard.RewardPoints && this.order) {\n const pointPrograms = new Set(loyaltyCard.RewardPoints.map(point => point.RewardPointId));\n const rewardLines = this.order.LoyaltyRewardPointLines || [];\n let total = 0;\n rewardLines.forEach(line => {\n if ((line.RewardPointAmountQuantity || 0) > 0 && pointPrograms.has(line.RewardPointId)) {\n total += line.RewardPointAmountQuantity!;\n }\n });\n return total;\n }\n return 0;\n }\n\n @computed get orderSummaryProps(): IGetOrderSummaryInput | undefined {\n if (!this.order) {\n return;\n }\n const { request } = this.props.context;\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const { channelDeliveryOptionConfig, featureState } = this.props?.data;\n const retailMultiplePickUpOptionEnabled = featureState?.result?.find(item => item.Name === multiplePickupStoreSwitchName)\n ?.IsEnabled;\n const pickupDeliveryModeCode = request && request.channel && request.channel.PickupDeliveryModeCode;\n const emailDeliveryModeCode = request && request.channel && request.channel.EmailDeliveryModeCode;\n const orderDetailsLines = this.order?.SalesLines;\n const canShip = orderDetailsLines?.some(orderDetailsLine =>\n orderDetailsLine.DeliveryMode && orderDetailsLine.DeliveryMode !== ''\n ? orderDetailsLine.DeliveryMode !==\n this.getDeliveryMode(\n orderDetailsLine,\n retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig?.result,\n pickupDeliveryModeCode\n ) && orderDetailsLine.DeliveryMode !== emailDeliveryModeCode\n : orderDetailsLine\n );\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- app configs are of generic type\n const isShowOrHideTaxEnabled = request.app.config.isEnableShowOrHideSalesTaxECommerceEnabled === true;\n\n const {\n resources: {\n orderSummaryHeading,\n orderSummaryItemsTotalLabel,\n orderSummaryShippingFeeLabel,\n orderSummaryTaxLabel,\n orderSummaryGrandTotalLabel,\n pointsEarnedLabel\n }\n } = this.props;\n return {\n order: this.order,\n earnedPoints: this.earnedPoints,\n priceContext: this.priceContext,\n resource: {\n orderSummaryHeading,\n orderSummaryItemsTotalLabel,\n orderSummaryShippingFeeLabel,\n orderSummaryTaxLabel,\n pointsEarnedLabel,\n orderSummaryGrandTotalLabel\n },\n canShip,\n isTaxIncludedInPrice: this.order.IsTaxIncludedInPrice,\n isShowTaxBreakUp: isShowOrHideTaxEnabled\n };\n }\n\n @computed get paymentMethodsProps(): IPaymentMethodsInput | undefined {\n const tenderTypes = this.props.data.tenderTypes.result;\n if (!this.order || !this.order.TenderLines || !tenderTypes) {\n return;\n }\n\n const locale = get(this.props, 'context.request.locale') || 'en-US';\n\n const {\n resources: {\n paymentMethodsTitle,\n creditCardEndingLabel,\n giftCardEndingLabel,\n amountCoveredLabel,\n cashUsedLabel,\n loyaltyCardUsedLabel,\n customerAccountUsedLabel\n }\n } = this.props;\n\n return {\n priceContext: this.priceContext,\n tenderLines: this.order.TenderLines,\n tenderIdOperationIdMap: getTenderIdOperationIdMap(tenderTypes),\n locale,\n resource: {\n paymentMethodsTitle,\n creditCardEndingLabel,\n giftCardEndingLabel,\n amountCoveredLabel,\n cashUsedLabel,\n loyaltyCardUsedLabel,\n customerAccountUsedLabel\n }\n };\n }\n\n public render(): JSX.Element {\n const {\n resources: {\n noSalesOrderText,\n genericErrorMessage,\n needHelpLabel,\n helpLineNumberLabel,\n loadingLabel,\n backToShopping,\n orderItemLabel,\n orderItemsLabel,\n pickupItemsHeader,\n pickingItemsLabel,\n shippingAddressTitle,\n shippingItemToYouLabel,\n shippingItemToOBOCustomerLabel,\n helpLineContactAriaLabel,\n emailItemsHeader,\n emailingItemsLabel\n },\n config: { heading, contactNumber, shouldShowQrCode, showTimeslot }\n } = this.props;\n\n const moduleProps = { moduleProps: this.props, className: classname('ms-order-confirmation', this.props.config.className) };\n const backToShoppingUrl = Msdyn365.getUrlSync('home', this.props.context.actionContext) || '';\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const { channelDeliveryOptionConfig, featureState } = this.props?.data;\n const retailMultiplePickUpOptionEnabled = featureState?.result?.find(item => item.Name === multiplePickupStoreSwitchName)\n ?.IsEnabled;\n\n let viewProps: IOrderConfirmationViewProps = {\n ...this.props,\n moduleProps,\n heading: heading && heading.text && (\n \n {backToShopping}\n \n ),\n footerProps: { className: 'ms-order-confirmation__footer' }\n };\n\n if (this.hasError) {\n viewProps = {\n ...viewProps,\n alert: = ({\r\n products,\r\n context,\r\n imageSettings,\r\n resources,\r\n moduleType,\r\n moduleId,\r\n allowBackNavigation,\r\n telemetryContent\r\n}) => {\r\n\r\n return (\r\n\r\n \r\n {products.map((product: ProductSearchResult, index: number) => (\r\n \r\n \r\n ))}\r\n \r\n );\r\n\r\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, ProductRefinerValue, RefinerType } from '@msdyn365-commerce/retail-proxy';\n\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\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 (\n dataTypeValue === AttributeDataType.Currency ||\n dataTypeValue === AttributeDataType.Decimal ||\n dataTypeValue === AttributeDataType.Integer\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(productRefinerValue: ProductRefinerValue, refinementCriterion: ProductRefinerValue): boolean {\n // If the value is a range, then match only on data type value; otherwise match on item string\n return (\n refinementCriterion.RefinerRecordId === productRefinerValue.RefinerRecordId &&\n refinementCriterion.RefinerSourceValue === productRefinerValue.RefinerSourceValue &&\n refinementCriterion.DataTypeValue === productRefinerValue.DataTypeValue &&\n (isRangeType(refinementCriterion.DataTypeValue) ||\n refinementCriterion.LeftValueBoundString === productRefinerValue.LeftValueBoundString)\n );\n}\n\nexport function getUpdatedRefinementCriteria(\n itemToggleNotification: IRefineItemToggleNotification,\n currentRefinementCriteria: ProductRefinerValue[]\n): ProductRefinerValue[] {\n const updatedRefinementCriteria: ProductRefinerValue[] = [];\n let toggledItemFound = false;\n currentRefinementCriteria.forEach((selectedCriterion: ProductRefinerValue) => {\n if (isMatchingRefinementCriterion(itemToggleNotification.productRefinerValue, selectedCriterion)) {\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)\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 { format, INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport classNames from 'classnames';\nimport * as React from 'react';\n\nimport { ISalesLine } from './get-sales-line';\nimport { groupSalesLines, IDeliveryType, ISalesStatusCode } from './utilities';\n\nexport interface IGroupDelivery {\n deliveryProps: INodeProps;\n pickupProps: INodeProps;\n showTimeslot: boolean;\n heading: React.ReactNode;\n count: React.ReactNode;\n processing: React.ReactNode;\n trackingInfo: React.ReactNode;\n address: React.ReactNode;\n shippingItemsToYou?: React.ReactNode;\n pickupDateTimeslot?: React.ReactNode;\n shippedStatusCheck?: React.ReactNode;\n}\n\nexport interface IGroup {\n groupProps: INodeProps;\n salesLinesProps: INodeProps;\n delivery: IGroupDelivery;\n salesLines: ISalesLine[];\n address: React.ReactNode;\n\n // Row data\n data: {\n count: number;\n deliveryType: IDeliveryType;\n salesStatus: ISalesStatusCode;\n };\n isCashAndCarryTransaction?: boolean;\n}\n\nexport interface IGroupsInput {\n moduleName: string;\n salesLines: ISalesLine[];\n resources: {\n orderItemLabel: string;\n orderItemsLabel: string;\n pickupItemsHeader?: string;\n pickingItemsLabel?: string;\n shippingAddressTitle?: string;\n shippingItemToYouLabel?: string;\n shippingItemToOBOCustomerLabel?: string;\n emailItemsHeader?: string;\n emailingItemsLabel?: string;\n };\n showAddress?: boolean;\n isConfirmationView?: boolean;\n showTimeslot?: boolean;\n retailMultiplePickUpOptionEnabled?: boolean;\n isCashAndCarryTransaction?: boolean;\n isSelectionModeEnabled?: boolean;\n isOboRequest?: boolean;\n customerName?: string;\n}\n\nexport interface IGroups {\n groupsProps: INodeProps;\n groups: IGroup[];\n}\n\n/**\n * Creates sales lines node props object.\n * @param moduleName - Module name to use as a class name prefix.\n * @param isSelectionModeEnabled - Specifies if the selection mode is enabled for the sales lines.\n * @returns Sales lines node props with the class name to use for the sales lines container.\n */\nconst getSalesLinesProps: (moduleName: string, isSelectionModeEnabled?: boolean) => INodeProps = (\n moduleName: string,\n isSelectionModeEnabled?: boolean\n): INodeProps => {\n const className = `${moduleName}__sales-lines`;\n const salesLinesProps: INodeProps = {\n className: classNames(\n className,\n isSelectionModeEnabled ? `${className}__selection-global-enabled` : `${className}__selection-global-disabled`\n )\n };\n return salesLinesProps;\n};\n\nexport const getGroups = ({\n moduleName,\n salesLines,\n showAddress,\n showTimeslot,\n isConfirmationView,\n retailMultiplePickUpOptionEnabled,\n isCashAndCarryTransaction,\n isSelectionModeEnabled,\n customerName,\n isOboRequest,\n resources: {\n orderItemLabel,\n orderItemsLabel,\n pickupItemsHeader,\n pickingItemsLabel,\n shippingAddressTitle,\n shippingItemToYouLabel,\n shippingItemToOBOCustomerLabel,\n emailItemsHeader,\n emailingItemsLabel\n }\n}: IGroupsInput): IGroups => {\n const groups = groupSalesLines(salesLines).map(group => {\n const { deliveryType, salesStatus, count, salesLines: _salesLines } = group;\n const itemLabel = count === 1 ? orderItemLabel : orderItemsLabel;\n const pickingItemsLabelText = pickingItemsLabel && format(pickingItemsLabel, count, itemLabel);\n const shippingItemsToText = isOboRequest\n ? shippingItemToOBOCustomerLabel && format(shippingItemToOBOCustomerLabel, count, itemLabel, customerName)\n : shippingItemToYouLabel && format(shippingItemToYouLabel, count, itemLabel);\n const emailingItemsLabelText = emailingItemsLabel && format(emailingItemsLabel, count, itemLabel);\n const multiplePickup = deliveryType === 'ship' ? 'ship' : deliveryType === 'email' ? 'email' : 'pickup';\n const groupProps = { className: `${moduleName}__group-deliveryType-${multiplePickup} salesStatus-${salesStatus}` };\n\n const salesLinesProps = getSalesLinesProps(moduleName, isSelectionModeEnabled);\n const address = _salesLines[0].address;\n const trackingInfo = _salesLines[0].trackingInfo;\n const isProcessing = _salesLines[0].data.salesStatus === 'processing';\n const pickDateTimeslot = _salesLines[0].pickupDateTimeslot;\n const shippedStatusCheck = _salesLines[0].data.salesStatus;\n const multiplePickUp = retailMultiplePickUpOptionEnabled ? 'multiple-pickUp' : '';\n const delivery: IGroupDelivery = {\n deliveryProps: { className: `${moduleName}__group-delivery ${multiplePickUp}` },\n pickupProps: { className: `${moduleName}__delivery-container` },\n heading: (\n \n {isProcessing\n ? isConfirmationView\n ? deliveryType === 'pickUp'\n ? pickupItemsHeader\n : deliveryType === 'ship'\n ? shippingAddressTitle\n : deliveryType === 'email'\n ? emailItemsHeader\n : deliveryType\n : _salesLines[0].deliveryType\n : _salesLines[0].salesStatus}\n \n ),\n processing: isProcessing ? (\n {_salesLines[0].salesStatus} \n ) : (\n undefined\n ),\n count: !isConfirmationView && {`(${count} ${itemLabel})`} ,\n shippingItemsToYou:\n isConfirmationView && deliveryType === 'ship' ? (\n {shippingItemsToText} \n ) : deliveryType === 'pickUp' ? (\n {pickingItemsLabelText} \n ) : deliveryType === 'email' ? (\n {emailingItemsLabelText} \n ) : (\n {pickingItemsLabelText} \n ),\n trackingInfo,\n address,\n pickupDateTimeslot: pickDateTimeslot,\n showTimeslot: showTimeslot || false,\n shippedStatusCheck\n };\n return {\n groupProps,\n salesLinesProps,\n delivery,\n salesLines: _salesLines,\n address: showAddress && address,\n data: {\n count,\n deliveryType,\n salesStatus\n },\n isCashAndCarryTransaction\n };\n });\n\n return {\n groupsProps: { className: `${moduleName}__groups` },\n groups\n };\n};\n","import {\r\n Button,\r\n Modal,\r\n ModalBody,\r\n ModalFooter,\r\n ModalHeader\r\n} from '@msdyn365-commerce-modules/utilities';\r\nimport React from 'react';\r\n\r\nexport interface ISearchResultModalViewProps {\r\n modal: React.ReactElement;\r\n modalHeader: React.ReactElement;\r\n modalFooter: React.ReactElement;\r\n modalBody: React.ReactElement;\r\n}\r\n\r\ninterface IModalToggleProps {\r\n innerRef: React.RefObject | undefined;\r\n id: string;\r\n text: string;\r\n ariaLabel: string;\r\n onClick(): void;\r\n}\r\n\r\nexport interface ISearchResultModalResources {\r\n modalTitle: string;\r\n modalCloseButtonText: string;\r\n}\r\n\r\nexport interface ISearchResultModalProps {\r\n resources: ISearchResultModalResources;\r\n isOpen: boolean;\r\n returnRef: React.RefObject | undefined;\r\n onModalToggle():void;\r\n className: string\r\n}\r\n\r\nexport const ModalToggle: React.FC = (props: IModalToggleProps) => {\r\n const {text, onClick, ariaLabel, innerRef, id} = props;\r\n return {text} ;\r\n};\r\n\r\nexport const SearchResultModal = (props: ISearchResultModalProps):ISearchResultModalViewProps => {\r\n return {\r\n modal: modalNode(props),\r\n modalHeader: modalHeaderNode(props),\r\n modalFooter: modalFooterNode(props),\r\n modalBody: \r\n {props.resources.modalTitle}\r\n \r\n );\r\n};\r\n\r\nconst modalFooterNode = (props: ISearchResultModalProps) => {\r\n return (\r\n \r\n \r\n {props.resources.modalCloseButtonText}\r\n \r\n \r\n );\r\n};","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\nimport { Address } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\n\r\nexport interface IShippingAddressProps {\r\n address: Address;\r\n resource: {\r\n shipToLabel: string;\r\n };\r\n}\r\n// @ts-ignore\r\nconst ShippingAddress: React.SFC = ({ address, resource: { shipToLabel } }) => (\r\n \r\n
{shipToLabel}
\r\n
\r\n {address.Name && {address.Name} }\r\n \r\n {address.StreetNumber && {address.StreetNumber} }\r\n {address.Street && {address.Street} }\r\n \r\n {address.City && (\r\n \r\n {address.City} \r\n {address.State && {` ${address.State}`.toUpperCase()} }\r\n \r\n )}\r\n {address.ZipCode && (\r\n \r\n {address.ZipCode && {` ${address.ZipCode}`} }\r\n \r\n )}\r\n {address.Phone && {address.Phone} }\r\n
\r\n
{\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 // Push inventory in stock refiner when productListInventoryDisplay is hide oos\n const inventoryRefiner = await this._getInventoryRefiner(listPageState, channelInventoryConfiguration);\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 inventoryRefiner\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 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 inventoryRefiner\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\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 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 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 = 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 /**\n * Get inventory refiners.\n * @param listPageState The listPageState\n * @returns inventory refiner.\n */\n private readonly _getInventoryRefiner = async (\n listPageState: ListPageState,\n channelInventoryConfiguration: ChannelInventoryConfiguration\n ): Promise => {\n if (this.props.context.app.config.productListInventoryDisplay === ProductListInventoryFilteringOptions.HideOOS) {\n const baseCollectionInput = new BaseCollectionInput(\n listPageState.pageType,\n this.props.context.request.apiSettings,\n {\n count: true\n },\n\n // Parameter - refiners\n [],\n\n // Parameter - category\n undefined,\n\n // Parameter - searchText\n '',\n\n // Parameter - includeAttributes\n false,\n\n // Parameter - isUpdateRefinerPanel\n false,\n\n // Parameter - locale\n undefined,\n this.catalogId,\n channelInventoryConfiguration\n );\n const inventoryInStockRefinerValueInput = new InventoryInStockRefinerValueInput(\n baseCollectionInput,\n channelInventoryConfiguration?.InventoryProductAttributeRecordId\n );\n return getInventoryRefinerAction(inventoryInStockRefinerValueInput, this.props.context.actionContext);\n }\n return Promise.resolve(undefined);\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 ('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 {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 * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { getPayloadObject, getTelemetryAttributes, IPayLoad, TelemetryConstant } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IGetHelpInput, IHelp } from '../../../common';\n\nexport const getOrderDetailsHelp = ({\n needHelpLabel,\n helpLineNumberLabel,\n contactNumber,\n helpLineContactAriaLabel,\n telemetryContent\n}: IGetHelpInput): IHelp => {\n const payLoad: IPayLoad = getPayloadObject('click', telemetryContent!, TelemetryConstant.ContactNumber);\n const attributes = getTelemetryAttributes(telemetryContent!, payLoad);\n return {\n helpProps: { className: 'ms-order-details__help' },\n needHelpLabel: {needHelpLabel}
,\n helpLineNumberLabel: {helpLineNumberLabel} ,\n contactNumber: (\n \n {contactNumber}\n \n )\n };\n};\n","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\nimport * as React from 'react';\r\n\r\nimport { Button, Collapse, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\r\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\r\nimport {IAny, ICoreContext, IGeneric} from '@msdyn365-commerce/core';\r\nimport { DisplayTemplate, ProductRefinerSource, ProductRefinerValue, RefinerType } from '@msdyn365-commerce/retail-proxy';\r\nimport RangeRefineItem, { RangeRefineItemType } from './range-refine-item';\r\nimport RefineItem from './refine-item';\r\nimport { IRefineItemToggleNotification } from './refine-item-toggle-notification';\r\nimport { IRefineItemCommonProps } from './refine-item.props.common';\r\nimport { findMatchingRefinementCriterion, isRangeType } from './utilities';\r\n\r\n/**\r\n * Properties associated with the RefineSubmenu component\r\n */\r\nexport interface IRefineSubmenuProps {\r\n tempRangeTypeTODO: RangeRefineItemType;\r\n minValueSliderThumbAriaLabel?: string;\r\n maxValueSliderThumbAriaLabel?: string;\r\n productRefinerHierarchy: IProductRefinerHierarchy;\r\n selectedRefinerValues: ProductRefinerValue[];\r\n refineItemCommonProps: IRefineItemCommonProps;\r\n isDisabled: boolean;\r\n isExpandedOnInitialLoad: boolean;\r\n context: ICoreContext>;\r\n moduleId: string;\r\n moduleTypeName: string;\r\n /** The telemetry content */\r\n telemetryContent?: ITelemetryContent;\r\n onUpdateRefiners(notfication: Readonly): void;\r\n urlBuilder(refiner: IRefineItemToggleNotification): string;\r\n}\r\n\r\n/**\r\n * Refine submenu state\r\n */\r\nexport interface IRefineSubmenuState extends React.ComponentState {\r\n expanded: boolean;\r\n}\r\n\r\n/**\r\n *\r\n * The RefineSubmenu component renders the submenu category and child items.\r\n * This computed observes the stateful category hierarchy object.\r\n * @extends {React.PureComponent}\r\n */\r\nclass RefineSubmenu extends React.Component {\r\n constructor(props: IRefineSubmenuProps) {\r\n super(props);\r\n\r\n this._onToggleItem = this._onToggleItem.bind(this);\r\n this._onToggleSubmenu = this._onToggleSubmenu.bind(this);\r\n\r\n const isExpanded = this.props.isExpandedOnInitialLoad;\r\n // if (this.props.productRefinerHierarchy.DataTypeValue === ProductRefinerValueDataTypeValue.Range) {\r\n // isExpanded = true;\r\n // }\r\n\r\n this.state = {\r\n expanded: isExpanded\r\n };\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n const { productRefinerHierarchy, refineItemCommonProps } = this.props;\r\n\r\n if (!productRefinerHierarchy) {\r\n refineItemCommonProps.telemetry.error('Cannot render submenu without refiner hierarchy data');\r\n }\r\n\r\n if((productRefinerHierarchy.SourceValue === ProductRefinerSource.Rating) && (this.props.context.app.config.hideRating)) {\r\n return null;\r\n }\r\n return (\r\n \r\n \r\n {productRefinerHierarchy.KeyName}\r\n \r\n \r\n {this._renderChildItems(productRefinerHierarchy)}\r\n \r\n
\r\n );\r\n }\r\n\r\n private _renderChildItems(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\r\n if (isRangeType(productRefinerHierarchy.DataTypeValue)) {\r\n return this._renderRange(productRefinerHierarchy);\r\n }\r\n return this._renderSingleMultiSelect(productRefinerHierarchy);\r\n }\r\n\r\n private _renderSingleMultiSelect(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\r\n const { isDisabled, refineItemCommonProps, selectedRefinerValues, context } = this.props;\r\n const isSingleSelect = (productRefinerHierarchy.RefinerTypeValue === RefinerType.SingleSelect) && (productRefinerHierarchy.SourceValue === ProductRefinerSource.Rating);\r\n const role = isSingleSelect ? { role: 'radiogroup' } : undefined;\r\n const refinerValuesList = (productRefinerHierarchy.Values || []);\r\n const listItems = refinerValuesList.map((child: ProductRefinerValue, index: number) => {\r\n if (!child) {\r\n refineItemCommonProps.telemetry.error(\r\n `[refine-submenu] Could not render refine item for refiner ${productRefinerHierarchy.RecordId} (${productRefinerHierarchy.KeyName})`\r\n );\r\n return null;\r\n }\r\n\r\n const selectedRefinementCriterion = findMatchingRefinementCriterion(child, selectedRefinerValues);\r\n\r\n return (\r\n refinerValuesList.find(value => value.RefinerRecordId === selectedValue.RefinerRecordId))}\r\n refineItemCommonProps={refineItemCommonProps}\r\n onToggle={this._onToggleItem}\r\n urlBuilder={this.props.urlBuilder}\r\n isDisabled={isDisabled}\r\n key={index}\r\n index= {index}\r\n context = {context}\r\n moduleId={this.props.moduleId}\r\n moduleTypeName={this.props.moduleTypeName}\r\n telemetryContent={this.props.telemetryContent}\r\n />\r\n );\r\n });\r\n return (\r\n \r\n );\r\n }\r\n\r\n private _getRangeType(productRefinerHierarchy: IProductRefinerHierarchy): 'input' | 'slider' {\r\n if (productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Range ||\r\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.Slider ||\r\n productRefinerHierarchy.DisplayTemplateValue === DisplayTemplate.SliderWithBars) {\r\n return 'slider';\r\n }\r\n return 'input';\r\n }\r\n\r\n private _renderRange(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\r\n const { isDisabled, refineItemCommonProps, selectedRefinerValues, context, minValueSliderThumbAriaLabel, maxValueSliderThumbAriaLabel } = this.props;\r\n const submenuClassNamePrefix = 'ms-refine-submenu__item list-group-item refine-submenu__item';\r\n const refinerValuesList = (productRefinerHierarchy.Values || []);\r\n const listItems = refinerValuesList.map((child: ProductRefinerValue, index: number) => {\r\n if (!child) {\r\n refineItemCommonProps.telemetry.error(\r\n `Could not render refine item for refiner ${productRefinerHierarchy.RecordId} (${productRefinerHierarchy.KeyName})`\r\n );\r\n return null;\r\n }\r\n\r\n const selectedRefinementCriterion = findMatchingRefinementCriterion(child, selectedRefinerValues);\r\n\r\n const rangeType = this._getRangeType(productRefinerHierarchy);\r\n const key = selectedRefinementCriterion ? `${selectedRefinementCriterion.LeftValueBoundString}-${selectedRefinementCriterion.RightValueBoundString}` : `not-selected-${index}`;\r\n return (\r\n \r\n \r\n );\r\n });\r\n return ;\r\n }\r\n\r\n private _onToggleItem(itemToggleNotification: IRefineItemToggleNotification): void {\r\n this.props.onUpdateRefiners(itemToggleNotification);\r\n }\r\n\r\n private _onToggleSubmenu(): void {\r\n this.setState(prevState => ({\r\n expanded: !prevState.expanded\r\n }));\r\n }\r\n}\r\n\r\nexport default RefineSubmenu;","/*!\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 IErrorMessage {\n text?: string;\n}\n\nexport const ErrorMessage: React.FC = ({ text }) => {\n return (\n \n \n {` `}\n {text}\n {` `}\n \n \n );\n};\n","import { IRefineItemToggleNotification } from '@msdyn365-commerce-modules/search-result-container';\r\nimport { ITelemetry } from '@msdyn365-commerce/core';\r\nimport { ProductRefinerValue } from '@msdyn365-commerce/retail-proxy';\r\n\r\n/**\r\n * Types of product refiner values\r\n */\r\nexport const enum ProductRefinerValueDataTypeValue {\r\n /**\r\n * Range slider is used for selections like price\r\n */\r\n Range = 1,\r\n\r\n /**\r\n * Range input is a different way to specify ranges and can be expressed with input boxes\r\n * as well as a set of discrete single-select type values\r\n */\r\n RangeInput = 4,\r\n\r\n /**\r\n * This is a discrete list item, either multi-select or single-select\r\n */\r\n List = 5,\r\n\r\n /**\r\n * Boolean types allows only single-select\r\n */\r\n Boolean = 6\r\n}\r\n\r\n/**\r\n * Types of product refiners\r\n */\r\nexport const enum ProductRefinerTypeValue {\r\n /**\r\n * Refiner values are single-select\r\n */\r\n Single = 0,\r\n\r\n /**\r\n * Refiner values are multi-select\r\n */\r\n Multi = 1\r\n}\r\n\r\n/**\r\n * ProductRefinerSource enum type.\r\n */\r\nexport const enum ProductRefinerSource {\r\n /**\r\n * The None member.\r\n */\r\n None = 0,\r\n /**\r\n * The Attribute member.\r\n */\r\n Attribute = 1,\r\n /**\r\n * The Category member.\r\n */\r\n Category = 2,\r\n /**\r\n * The Price member.\r\n */\r\n Price = 3,\r\n /**\r\n * The Rating member.\r\n */\r\n Rating = 4\r\n}\r\n\r\n/**\r\n * Find the refinement criterion associated with this product refiner value\r\n * @param productRefinerValue product refiner value to match\r\n * @param refinementCriteria selected refinement criteria\r\n */\r\nexport function findMatchingRefinementCriterion(\r\n productRefinerValue: ProductRefinerValue,\r\n refinementCriteria: ProductRefinerValue[]\r\n): ProductRefinerValue | undefined {\r\n // if the value is a range, then match only on data type value; otherwise match on item string\r\n return refinementCriteria.find(\r\n (refinementCriterion: ProductRefinerValue) => isMatchingRefinementCriterion(productRefinerValue, refinementCriterion)\r\n );\r\n}\r\n\r\n/**\r\n * Find the refinement criterion associated with this product refiner value\r\n * @param productRefinerValue product refiner value to match\r\n * @param refinementCriteria selected refinement criteria\r\n */\r\nexport function isMatchingRefinementCriterion(\r\n productRefinerValue: ProductRefinerValue,\r\n refinementCriterion: ProductRefinerValue\r\n): boolean {\r\n // if the value is a range, then match only on data type value; otherwise match on item string\r\n return (\r\n refinementCriterion.RefinerRecordId === productRefinerValue.RefinerRecordId &&\r\n refinementCriterion.RefinerSourceValue === productRefinerValue.RefinerSourceValue &&\r\n refinementCriterion.DataTypeValue === productRefinerValue.DataTypeValue &&\r\n (refinementCriterion.DataTypeValue === ProductRefinerValueDataTypeValue.Range ||\r\n refinementCriterion.LeftValueBoundString === productRefinerValue.LeftValueBoundString)\r\n );\r\n}\r\n\r\nexport function getUpdatedRefinementCriteria(\r\n itemToggleNotification: IRefineItemToggleNotification,\r\n currentRefinementCriteria: ProductRefinerValue[]): ProductRefinerValue[] {\r\n const updatedRefinementCriteria: ProductRefinerValue[] = [];\r\n let toggledItemFound = false;\r\n currentRefinementCriteria.forEach((selectedCriterion: ProductRefinerValue) => {\r\n if (isMatchingRefinementCriterion(itemToggleNotification.productRefinerValue, selectedCriterion)) {\r\n toggledItemFound = true;\r\n if (itemToggleNotification.isSelecting) {\r\n const next = {\r\n ...selectedCriterion,\r\n LeftValueBoundString: itemToggleNotification.rangeStart !== undefined && `${itemToggleNotification.rangeStart}` || selectedCriterion.LeftValueBoundString,\r\n RightValueBoundString: itemToggleNotification.rangeEnd !== undefined && `${itemToggleNotification.rangeEnd}` || selectedCriterion.RightValueBoundString,\r\n };\r\n updatedRefinementCriteria.push(next);\r\n\r\n } // else the item is being de-selected, so omit it from the refinement criteria\r\n } else {\r\n // keep existing criterion because it is not in the item toggle notification\r\n updatedRefinementCriteria.push(selectedCriterion);\r\n }\r\n });\r\n\r\n if (!toggledItemFound) {\r\n const next = {\r\n ...itemToggleNotification.productRefinerValue,\r\n LeftValueBoundString: itemToggleNotification.rangeStart !== undefined && `${itemToggleNotification.rangeStart}` || itemToggleNotification.productRefinerValue.LeftValueBoundString,\r\n RightValueBoundString: itemToggleNotification.rangeEnd !== undefined && `${itemToggleNotification.rangeEnd}` || itemToggleNotification.productRefinerValue.RightValueBoundString,\r\n };\r\n updatedRefinementCriteria.push(next);\r\n\r\n // If single select, then deselect any others in the parent refiner group\r\n if ((itemToggleNotification.productRefinerValue.DataTypeValue === ProductRefinerValueDataTypeValue.List || itemToggleNotification.productRefinerValue.DataTypeValue === ProductRefinerValueDataTypeValue.Boolean) &&\r\n itemToggleNotification.parentProductRefinerHierarchy.RefinerTypeValue === ProductRefinerTypeValue.Single) {\r\n itemToggleNotification.parentProductRefinerHierarchy.Values.forEach((child: ProductRefinerValue) => {\r\n if (child.RefinerRecordId === next.RefinerRecordId && child.LeftValueBoundString === next.LeftValueBoundString) {\r\n // do nothing\r\n } else {\r\n const matchingIndex = updatedRefinementCriteria.findIndex((criterion: ProductRefinerValue) => isMatchingRefinementCriterion(child, criterion));\r\n if (matchingIndex > -1) {\r\n updatedRefinementCriteria.splice(matchingIndex, 1);\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n return updatedRefinementCriteria;\r\n}\r\n\r\nexport function formatPrice(\r\n amount: string | undefined,\r\n currency: string | undefined,\r\n locale: string | undefined,\r\n telemetry: ITelemetry): string {\r\n if (!amount || !currency) {\r\n telemetry.trace(`[refine-menu.utilities.formatPrice] could not format price for ${amount} ${currency}`);\r\n return amount || '';\r\n }\r\n const priceAmount = (amount && Number(amount)) || 0;\r\n let result: string;\r\n\r\n try {\r\n result = new Intl.NumberFormat(locale, {\r\n style: 'currency',\r\n currencyDisplay: 'symbol',\r\n currency: currency\r\n }).format(priceAmount);\r\n } catch (e) {\r\n result = `${priceAmount} ${currency}`;\r\n telemetry.warning(`[refine-menu.utilities.formatPrice] Failed to format price for ${result}: ${e}`);\r\n }\r\n\r\n return result;\r\n}","import { Slider } from '@msdyn365-commerce-modules/utilities';\r\nimport debounce from 'lodash/debounce';\r\nimport { computed } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\nimport { formatPrice } from './utilities';\r\n\r\ntype InputType = 'Min' | 'Max';\r\n\r\nimport { IRefineItemProps, IRefineItemState } from './refine-item';\r\n\r\nexport type RangeRefineItemType = 'slider' | 'input';\r\n\r\n/**\r\n * Range refine item properties\r\n */\r\nexport interface IRangeRefineItemProps extends IRefineItemProps {\r\n rangeType: RangeRefineItemType;\r\n minValueSliderThumbAriaLabel?: string;\r\n maxValueSliderThumbAriaLabel?: string;\r\n}\r\n\r\n/**\r\n * Range refine item state\r\n */\r\nexport interface IRangeRefineItemState extends IRefineItemState {\r\n validationErrorMin: string | undefined;\r\n validationErrorMax: string | undefined;\r\n selectedMin: string | undefined;\r\n selectedMax: string | undefined;\r\n touchedMin: boolean;\r\n touchedMax: boolean;\r\n}\r\n\r\n/**\r\n * RangeRefineItem component (controlled by RefineSubmenu)\r\n */\r\n@observer\r\nexport default class RangeRefineItem extends React.Component {\r\n private _formattedPriceReverseLookup: Map = new Map();\r\n\r\n private minInput: React.RefObject;\r\n private maxInput: React.RefObject;\r\n\r\n @computed get currencyCode(): string {\r\n return this.props.productRefinerValue.UnitText || '';\r\n }\r\n\r\n constructor(props: IRangeRefineItemProps) {\r\n super(props);\r\n this._onRangeUpdate = this._onRangeUpdate.bind(this);\r\n this._onRangeUpdateEnd = this._onRangeUpdateEnd.bind(this);\r\n this._handleRangeTooltipText = this._handleRangeTooltipText.bind(this);\r\n this._changeMin = this._changeMin.bind(this);\r\n this._changeMax = this._changeMax.bind(this);\r\n this._finishChangeMin = this._finishChangeMin.bind(this);\r\n this._finishChangeMax = this._finishChangeMax.bind(this);\r\n\r\n this.minInput = React.createRef();\r\n this.maxInput = React.createRef();\r\n\r\n const { selectedRefinementCriterion } = this.props;\r\n const initialMin = selectedRefinementCriterion && selectedRefinementCriterion.LeftValueBoundString || '0';\r\n const initialMax = selectedRefinementCriterion && selectedRefinementCriterion.RightValueBoundString || undefined;\r\n this.state = {\r\n isChecked: false,\r\n validationErrorMin: undefined,\r\n validationErrorMax: undefined,\r\n selectedMin: initialMin,\r\n selectedMax: initialMax,\r\n touchedMin: false,\r\n touchedMax: false\r\n };\r\n }\r\n\r\n public render(): JSX.Element | undefined {\r\n const { productRefinerValue, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\r\n\r\n if (!productRefinerValue || !parentProductRefinerHierarchy) {\r\n refineItemCommonProps.telemetry.error('Cannot render refine value range without productRefinerValue and parentProductRefinerHierarchy');\r\n return undefined;\r\n }\r\n\r\n if (this.props.rangeType === 'input') {\r\n return this._renderInputFields();\r\n }\r\n\r\n return this._renderSlider();\r\n }\r\n\r\n private _renderInputFields(): JSX.Element | undefined {\r\n const { isDisabled, parentProductRefinerHierarchy, refineItemCommonProps } = this.props;\r\n const { selectedMin, selectedMax, touchedMin, touchedMax, validationErrorMin, validationErrorMax } = this.state;\r\n\r\n const rangeAriaLabel = (refineItemCommonProps.rangeNameFormat || '{0}').replace('{0}', (parentProductRefinerHierarchy.KeyName || ''));\r\n const formAttrs = {\r\n 'aria-label': rangeAriaLabel,\r\n 'aria-disabled': isDisabled\r\n };\r\n\r\n // To enable price formatting of selected fields, this is the approach:\r\n // initial value: min=0 formatted as price, max=undefined\r\n // onFocus/onChange: convert to number (unformat) and mark as touched to indicate value is being edited\r\n // onBlur: validate and format entered value as price\r\n const minInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-min ${validationErrorMin ? 'refine-submenu__input-range--error' : ''}`;\r\n const maxInputClassName = `ms-refine-submenu__input-range refine-submenu__input-range-max ${validationErrorMax ? 'refine-submenu__input-range--error' : ''}`;\r\n const minLabelClassName = 'ms-refine-submenu__input-range-label refine-submenu__input-range-label-min';\r\n const maxLabelClassName = 'ms-refine-submenu__input-range-label refine-submenu__input-range-label-max';\r\n const formattedSelectedMin = this._getFormattedSelectedValue(selectedMin, touchedMin, validationErrorMin);\r\n const formattedSelectedMax = this._getFormattedSelectedValue(selectedMax, touchedMax, validationErrorMax);\r\n return (\r\n \r\n );\r\n }\r\n\r\n private _renderSlider(): JSX.Element | undefined {\r\n const { isDisabled, productRefinerValue, parentProductRefinerHierarchy, selectedRefinementCriterion } = this.props;\r\n const min = productRefinerValue.LeftValueBoundString;\r\n const max = productRefinerValue.RightValueBoundString;\r\n const selectedMin = selectedRefinementCriterion && selectedRefinementCriterion.LeftValueBoundString || productRefinerValue.LeftValueBoundString || '0';\r\n const selectedMax = selectedRefinementCriterion && selectedRefinementCriterion.RightValueBoundString || productRefinerValue.RightValueBoundString || max;\r\n const sliderId = `slider_${parentProductRefinerHierarchy.RecordId}_${productRefinerValue.RefinerRecordId}`;\r\n const ariaAttributes = {\r\n 'aria-disabled': isDisabled\r\n };\r\n\r\n const minPrice = this._formatPrice(min);\r\n const maxPrice = this._formatPrice(max);\r\n const selectedMinPrice = this._formatPrice(selectedMin);\r\n const selectedMaxPrice = this._formatPrice(selectedMax);\r\n\r\n return (\r\n ): void {\r\n this._changeValue(event, 'Min');\r\n }\r\n\r\n private _changeMax(event: React.FocusEvent): void {\r\n this._changeValue(event, 'Max');\r\n }\r\n\r\n private _changeValue(event: React.FocusEvent, inputType: InputType): void {\r\n const selectedKey = `selected${inputType}`;\r\n const touchedKey = `touched${inputType}`;\r\n this.setState({\r\n [selectedKey]: this._getInputWithoutFormatting(event.currentTarget.value),\r\n [touchedKey]: true\r\n });\r\n }\r\n\r\n private _finishChangeMin(event: React.FocusEvent): boolean {\r\n const selectedMinValue = this._getInputWithoutFormatting(event.currentTarget.value);\r\n this.setState({\r\n selectedMin: selectedMinValue,\r\n minTouched: false\r\n });\r\n const minInput = Number(selectedMinValue);\r\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue, refineItemCommonProps, selectedRefinementCriterion } = this.props;\r\n const max = selectedRefinementCriterion && selectedRefinementCriterion.RightValueBoundString || undefined;\r\n\r\n const maxNum = max ? Number(max) : undefined;\r\n\r\n if (isNaN(minInput)) {\r\n this.setState({ validationErrorMin: refineItemCommonProps.validationErrorNaN });\r\n this._focus('Min');\r\n return false;\r\n }\r\n\r\n if (this._validateRange(minInput, maxNum)) {\r\n onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: true,\r\n rangeStart: minInput,\r\n rangeEnd: maxNum\r\n });\r\n return true;\r\n } else {\r\n this._focus('Min');\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private _finishChangeMax(event: React.FocusEvent): boolean {\r\n const selectedMaxValue = this._getInputWithoutFormatting(event.currentTarget.value);\r\n this.setState({\r\n selectedMax: selectedMaxValue,\r\n maxTouched: false\r\n });\r\n const maxInput = Number(selectedMaxValue);\r\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue, refineItemCommonProps, selectedRefinementCriterion } = this.props;\r\n const min = selectedRefinementCriterion && selectedRefinementCriterion.LeftValueBoundString || '0';\r\n\r\n const minNum = Number(min);\r\n\r\n if (isNaN(maxInput)) {\r\n this.setState({ validationErrorMax: refineItemCommonProps.validationErrorNaN });\r\n this._focus('Max');\r\n return false;\r\n }\r\n\r\n if (this._validateRange(minNum, maxInput)) {\r\n if (productRefinerValue) {\r\n onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: true,\r\n rangeStart: minNum,\r\n rangeEnd: maxInput\r\n });\r\n } else {\r\n this._focus('Max');\r\n }\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private _focus(inputType: InputType): void {\r\n const ref = inputType === 'Max' ? this.maxInput : this.minInput;\r\n\r\n setTimeout(() => {\r\n if (ref && ref.current) {\r\n ref.current.focus();\r\n }\r\n }, 50);\r\n }\r\n\r\n private _getFormattedSelectedValue(selected: string | undefined, touched: boolean, validationError: string | undefined): string | undefined {\r\n if (touched || validationError || selected === undefined) {\r\n return selected;\r\n }\r\n return this._formatPrice(selected);\r\n }\r\n\r\n private _validateRange(min: number, max: number | undefined): boolean {\r\n const { refineItemCommonProps } = this.props;\r\n if (max === undefined) {\r\n return true;\r\n }\r\n\r\n if (min > max) {\r\n this.setState({\r\n validationErrorMin: refineItemCommonProps.validationErrorRange,\r\n validationErrorMax: refineItemCommonProps.validationErrorRange\r\n });\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n private _formatPrice(amount: string | undefined): string {\r\n const locale = this.props.refineItemCommonProps.locale;\r\n const result = formatPrice(amount, this.currencyCode, locale, this.props.refineItemCommonProps.telemetry);\r\n if (this.props.productRefinerValue!.LeftValueBoundString === '0' && this.props.productRefinerValue!.RightValueBoundString === '0') {\r\n return result.slice(2);\r\n }\r\n if (amount !== undefined && !this._formattedPriceReverseLookup.has(result)) {\r\n this._formattedPriceReverseLookup.set(result, amount);\r\n }\r\n\r\n return result;\r\n }\r\n\r\n private _getInputWithoutFormatting(input: string): string {\r\n // First try to cast raw input to a number\r\n const inputAsNum = Number(input);\r\n if (!isNaN(inputAsNum)) {\r\n return input;\r\n }\r\n\r\n // Otherwise try a reverse lookup and fall back to the raw input if all else fails\r\n const reverseLookupResult = this._formattedPriceReverseLookup.get(input);\r\n return reverseLookupResult || input;\r\n }\r\n\r\n // NOTE: Fix types once Shared Components build pipeline bug fixed\r\n // tslint:disable-next-line:no-any\r\n private _onRangeUpdate(sliderChangeNotification: any): void {\r\n // Need to filter out mousemove events as these cause errors after the menu updates and slider re-renders\r\n if (sliderChangeNotification.eventType !== 'mousemove') {\r\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue } = this.props;\r\n if (productRefinerValue && sliderChangeNotification) {\r\n onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: true,\r\n rangeStart: sliderChangeNotification.firstThumbValue,\r\n rangeEnd: sliderChangeNotification.secondThumbValue\r\n });\r\n\r\n this._focusOnSliderThumb(sliderChangeNotification);\r\n }\r\n }\r\n }\r\n\r\n // tslint:disable-next-line\r\n private _onRangeUpdateEnd(sliderChangeNotification: any): void {\r\n const { onToggle, parentProductRefinerHierarchy, productRefinerValue } = this.props;\r\n if (productRefinerValue && sliderChangeNotification) {\r\n onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: true,\r\n rangeStart: sliderChangeNotification.firstThumbValue,\r\n rangeEnd: sliderChangeNotification.secondThumbValue\r\n });\r\n\r\n this._focusOnSliderThumb(sliderChangeNotification);\r\n }\r\n }\r\n\r\n // tslint:disable-next-line\r\n private _focusOnSliderThumb(sliderChangeNotification: any): void {\r\n if (sliderChangeNotification.id) {\r\n const element = document.getElementById(sliderChangeNotification.id);\r\n if (!!element) {\r\n setTimeout(\r\n () => {\r\n element.focus();\r\n },\r\n 0);\r\n }\r\n }\r\n }\r\n\r\n private _handleRangeTooltipText(tooltip: number): string {\r\n return this._formatPrice(`${tooltip}`);\r\n }\r\n}","import { IRefineItemCommonProps, IRefineItemToggleNotification } from '@msdyn365-commerce-modules/search-result-container';\r\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\r\nimport { RatingComponent } from '@msdyn365-commerce/components';\r\nimport { ICoreContext } from '@msdyn365-commerce/core';\r\nimport { ProductRefinerValue } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\nimport { ProductRefinerSource, ProductRefinerTypeValue } from './utilities';\r\n\r\n/**\r\n * RefineItem properties\r\n */\r\nexport interface IRefineItemProps {\r\n\r\n parentProductRefinerHierarchy: IProductRefinerHierarchy;\r\n productRefinerValue: ProductRefinerValue;\r\n selectedRefinementCriterion: ProductRefinerValue | undefined;\r\n refineItemCommonProps: IRefineItemCommonProps;\r\n isDisabled: boolean;\r\n keyId: number;\r\n context: ICoreContext;\r\n moduleId: string;\r\n moduleTypeName: string;\r\n onToggle(notfication: Readonly): void;\r\n urlBuilder(refiner: IRefineItemToggleNotification): string;\r\n}\r\n\r\n/**\r\n * Refine item state\r\n */\r\nexport interface IRefineItemState extends React.ComponentState {\r\n isChecked: boolean;\r\n renderingError?: object;\r\n}\r\n\r\n/**\r\n * Single-select and multi-select refine item component (controlled by RefineSubmenu)\r\n */\r\nexport default class RefineItem extends React.Component {\r\n private anchorType: React.RefObject;\r\n\r\n constructor(props: IRefineItemProps) {\r\n super(props);\r\n this._onClick = this._onClick.bind(this);\r\n this.state = {\r\n isChecked: !!this.props.selectedRefinementCriterion\r\n };\r\n this.anchorType = React.createRef();\r\n }\r\n\r\n public render(): JSX.Element | undefined {\r\n const {\r\n isDisabled,\r\n refineItemCommonProps,\r\n parentProductRefinerHierarchy,\r\n productRefinerValue,\r\n selectedRefinementCriterion,\r\n // @ts-ignore\r\n children,\r\n onToggle,\r\n context,\r\n keyId,\r\n ...attrs\r\n } = this.props;\r\n if (!productRefinerValue) {\r\n refineItemCommonProps.telemetry.error('[refine-item] Cannot render refineItem without productRefinerValue');\r\n return undefined;\r\n }\r\n if (!productRefinerValue.LeftValueBoundString) {\r\n refineItemCommonProps.telemetry.warning(`[refine-item] RefineItem without LeftValueBoundString: ${JSON.stringify(productRefinerValue)}`);\r\n }\r\n const isSingleSelect = parentProductRefinerHierarchy.RefinerTypeValue === ProductRefinerTypeValue.Single;\r\n let itemTypeClassName = isSingleSelect ? 'single-select' : 'multi-select';\r\n itemTypeClassName = `ms-refine-submenu-item ${itemTypeClassName}`;\r\n const inputType = isSingleSelect ? 'radio' : 'checkbox';\r\n const role = isSingleSelect ? 'radio' : undefined;\r\n itemTypeClassName = !!selectedRefinementCriterion ? `${itemTypeClassName}-checked` : itemTypeClassName;\r\n if (parentProductRefinerHierarchy.SourceValue === ProductRefinerSource.Rating) {\r\n if (productRefinerValue.LeftValueBoundString) {\r\n return (\r\n \r\n \r\n {productRefinerValue.Count !== undefined && `(${productRefinerValue.Count})`} \r\n \r\n \r\n );\r\n } else {\r\n return undefined;\r\n }\r\n } else {\r\n return (\r\n \r\n \r\n \r\n {productRefinerValue.LeftValueBoundLocalizedString || productRefinerValue.LeftValueBoundString}\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n private _getRefinerUrl(): string {\r\n const { urlBuilder, parentProductRefinerHierarchy, productRefinerValue, selectedRefinementCriterion } = this.props;\r\n\r\n if (productRefinerValue) {\r\n return urlBuilder({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: !selectedRefinementCriterion\r\n });\r\n }\r\n\r\n return '';\r\n }\r\n\r\n private _onClick = (e: React.MouseEvent): void => {\r\n e.preventDefault();\r\n\r\n const { parentProductRefinerHierarchy, productRefinerValue, selectedRefinementCriterion } = this.props;\r\n if (productRefinerValue) {\r\n this.props.onToggle({\r\n parentProductRefinerHierarchy: parentProductRefinerHierarchy,\r\n productRefinerValue: productRefinerValue,\r\n isSelecting: !selectedRefinementCriterion\r\n });\r\n\r\n setTimeout(\r\n () => {\r\n this.anchorType.current && this.anchorType.current.focus();\r\n },\r\n 0\r\n );\r\n }\r\n }\r\n}","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\nimport { findMatchingRefinementCriterion, IRefineItemCommonProps, IRefineItemToggleNotification, RangeRefineItemType } from '@msdyn365-commerce-modules/search-result-container';\r\nimport { Button, Collapse } from '@msdyn365-commerce-modules/utilities';\r\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\r\nimport { ICoreContext } from '@msdyn365-commerce/core';\r\nimport { ProductRefinerValue } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\nimport RangeRefineItem from './range-refine-item';\r\nimport RefineItem from './refine-item';\r\nimport { ProductRefinerTypeValue, ProductRefinerValueDataTypeValue } from './utilities';\r\n\r\n/**\r\n * Properties associated with the RefineSubmenu component\r\n */\r\nexport interface IRefineSubmenuProps {\r\n tempRangeTypeTODO: RangeRefineItemType;\r\n minValueSliderThumbAriaLabel?: string;\r\n maxValueSliderThumbAriaLabel?: string;\r\n productRefinerHierarchy: IProductRefinerHierarchy;\r\n selectedRefinerValues: ProductRefinerValue[];\r\n sortingCriteraValues?: string[];\r\n refineItemCommonProps: IRefineItemCommonProps;\r\n isDisabled: boolean;\r\n isExpandedOnInitialLoad: boolean;\r\n context: ICoreContext;\r\n moduleId: string;\r\n moduleTypeName: string;\r\n refinersToBeUpdated: string;\r\n onUpdateRefiners(notfication: Readonly): void;\r\n urlBuilder(refiner: IRefineItemToggleNotification): string;\r\n}\r\n\r\n/**\r\n * Refine submenu state\r\n */\r\nexport interface IRefineSubmenuState extends React.ComponentState {\r\n expanded: boolean;\r\n}\r\n\r\n/**\r\n *\r\n * The RefineSubmenu component renders the submenu category and child items.\r\n * This computed observes the stateful category hierarchy object.\r\n * @extends {React.PureComponent}\r\n */\r\nclass RefineSubmenu extends React.Component {\r\n constructor(props: IRefineSubmenuProps) {\r\n super(props);\r\n\r\n this._onToggleItem = this._onToggleItem.bind(this);\r\n this._onToggleSubmenu = this._onToggleSubmenu.bind(this);\r\n\r\n let isExpanded = this.props.isExpandedOnInitialLoad;\r\n if (this.props.productRefinerHierarchy.DataTypeValue === ProductRefinerValueDataTypeValue.Range) {\r\n isExpanded = true;\r\n }\r\n\r\n this.state = {\r\n expanded: isExpanded\r\n };\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n const { productRefinerHierarchy, refineItemCommonProps, refinersToBeUpdated } = this.props;\r\n\r\n if (!productRefinerHierarchy) {\r\n refineItemCommonProps.telemetry.error('Cannot render submenu without refiner hierarchy data');\r\n }\r\n const refinersLists = refinersToBeUpdated && refinersToBeUpdated.split(',');\r\n let refinerName = productRefinerHierarchy.KeyName || '';\r\n refinersLists && refinersLists.map((refiners: string) => {\r\n if (refiners.split('|').length > 1 && refiners.split('|')[0].toLowerCase() === refinerName?.toLowerCase()) {\r\n refinerName = refiners.split('|')[1] && refiners.split('|')[1] || refinerName;\r\n }\r\n });\r\n\r\n return (\r\n \r\n \r\n {refinerName}\r\n \r\n \r\n {this._renderChildItems(productRefinerHierarchy)}\r\n \r\n
\r\n );\r\n }\r\n\r\n private _renderChildItems(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\r\n switch (productRefinerHierarchy.DataTypeValue) {\r\n case ProductRefinerValueDataTypeValue.Range:\r\n case ProductRefinerValueDataTypeValue.RangeInput:\r\n return this._renderRange(productRefinerHierarchy);\r\n default:\r\n return this._renderSingleMultiSelect(productRefinerHierarchy);\r\n }\r\n }\r\n\r\n private _renderSingleMultiSelect(productRefinerHierarchy: IProductRefinerHierarchy): JSX.Element | null {\r\n const { isDisabled, refineItemCommonProps, selectedRefinerValues, sortingCriteraValues, context } = this.props;\r\n const isSingleSelect = productRefinerHierarchy.RefinerTypeValue === ProductRefinerTypeValue.Single;\r\n const role = isSingleSelect ? { role: 'radiogroup' } : undefined;\r\n // const refinerValuesList = (productRefinerHierarchy.Values || []);\r\n const refinerValuesList = (productRefinerHierarchy.Values || []).sort(function (a:ProductRefinerValue,b:ProductRefinerValue){\r\n if(a.LeftValueBoundString && b.LeftValueBoundString){ return a.LeftValueBoundString.localeCompare(b.LeftValueBoundString)}\r\n return 0;\r\n });\r\n const listItems = refinerValuesList.map((child: ProductRefinerValue, index: number) => {\r\n if (!child) {\r\n refineItemCommonProps.telemetry.error(\r\n `[refine-submenu] Could not render refine item for refiner ${productRefinerHierarchy.RecordId} (${productRefinerHierarchy.KeyName})`\r\n );\r\n return null;\r\n }\r\n\r\n let selectedRefinementCriterion = findMatchingRefinementCriterion(child, selectedRefinerValues);\r\n\r\n if (child.RightValueBoundString && sortingCriteraValues && sortingCriteraValues?.indexOf(child.RightValueBoundString) !== -1) {\r\n selectedRefinementCriterion = child;\r\n }\r\n return (\r\n \r\n \r\n );\r\n });\r\n return ;\r\n }\r\n\r\n private _onToggleItem(itemToggleNotification: IRefineItemToggleNotification): void {\r\n this.props.onUpdateRefiners(itemToggleNotification);\r\n }\r\n\r\n private _onToggleSubmenu(): void {\r\n this.setState(prevState => ({\r\n expanded: !prevState.expanded\r\n }));\r\n }\r\n}\r\n\r\nexport default RefineSubmenu;","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\nimport MsDyn365, { IRequestContext } from '@msdyn365-commerce/core';\r\nimport { ProductRefinerValue, SortColumn } from '@msdyn365-commerce/retail-proxy';\r\n\r\n/**\r\n * Refiner Compression:\r\n * Refiners contains a non-trivial amount of data that is required to successfully make\r\n * a refiner-based API call. To allow for deep-linking of refiners in the URL, refiner data\r\n * must be compressed so that URL max length is not exceeded. Refiners will be compressed into\r\n * the following array style index-based format:\r\n * [DataTypeValue, LeftValueBoundString, RefinerRecordId, RefinerSourceValue, RightValueBoundString, UnitText]\r\n */\r\nconst compressedRefinerKeys = ['DataTypeValue', 'LeftValueBoundString', 'RefinerRecordId', 'RefinerSourceValue', 'RightValueBoundString', 'UnitText'];\r\n\r\n/**\r\n * Hydrates compressed refiner data from URL\r\n * @param fullUrl The full URL of the page\r\n */\r\nexport const hydrateRefinersFromUrl = (requestContext: IRequestContext): ProductRefinerValue[] => {\r\n const compressedRefinerArray = parseQueryParam<(string | number)[][]>('refiners', requestContext);\r\n if (!compressedRefinerArray || !compressedRefinerArray.length) {\r\n return [];\r\n }\r\n\r\n return compressedRefinerArray.map((compressedRefiner) => {\r\n try {\r\n const parsedRefiner: ProductRefinerValue = {};\r\n compressedRefinerKeys.forEach((refinerKey, index) => {\r\n // @ts-ignore: This line is intentionally not typesafe\r\n parsedRefiner[refinerKey] = compressedRefiner[index];\r\n });\r\n return parsedRefiner;\r\n } catch (e) {\r\n return undefined;\r\n }\r\n }).filter(Boolean);\r\n};\r\n\r\n/**\r\n * Compressed a list of refiners for use in URLs\r\n * @param refiners The uncompressed refiners\r\n */\r\nexport const compressRefiners = (refiners: ProductRefinerValue[]) => {\r\n const compressedRefiners: (string | number)[][] = [];\r\n\r\n refiners.forEach((refiner) => {\r\n const compressedRefiner: (string | number)[] = [];\r\n compressedRefinerKeys.forEach((refinerKey) => {\r\n // @ts-ignore: This line is intentionally not typesafe\r\n compressedRefiner.push(refiner[refinerKey]);\r\n });\r\n compressedRefiners.push(compressedRefiner);\r\n });\r\n\r\n return compressedRefiners;\r\n};\r\n\r\n/**\r\n * Method which creates a URL contiaining serialized active refiners\r\n * @param fullUrl The Current URL of the page\r\n * @param refiners The refiners which should be added to the URL\r\n */\r\nexport const buildListPageUrl = (fullUrl: URL, refiners?: ProductRefinerValue[], sortingColumns?: SortColumn[], skipCount?: number) => {\r\n // Refiner Change flow\r\n if (refiners !== undefined) {\r\n if (!refiners.length) {\r\n fullUrl.searchParams.delete('refiners');\r\n } else {\r\n fullUrl.searchParams.set('refiners', JSON.stringify(compressRefiners(refiners)));\r\n }\r\n\r\n // Adding or removing a refiner means we want to always load page 1\r\n fullUrl.searchParams.delete('skip');\r\n return fullUrl.href;\r\n }\r\n\r\n if (sortingColumns !== undefined) {\r\n if (!sortingColumns.length) {\r\n fullUrl.searchParams.delete('sorting');\r\n } else {\r\n fullUrl.searchParams.set('sorting', JSON.stringify(sortingColumns));\r\n }\r\n\r\n // Changing the sort means always load page 1\r\n fullUrl.searchParams.delete('skip');\r\n return fullUrl.href;\r\n }\r\n\r\n if (skipCount) {\r\n fullUrl.searchParams.set('skip', skipCount.toString());\r\n }\r\n\r\n return fullUrl.href;\r\n};\r\n\r\n/**\r\n * Parses a query param from the query object of the request context\r\n * @param key The query parameter key\r\n * @param requestContext The request context\r\n */\r\nexport const parseQueryParam = (key: string, requestContext: IRequestContext): T | null => {\r\n if (requestContext.query && requestContext.query[key]) {\r\n return JSON.parse(decodeURIComponent(requestContext.query[key]));\r\n }\r\n return null;\r\n};\r\n\r\n/**\r\n * Gets the current URL of the page from the request context\r\n * @param requestContext The request context\r\n */\r\nexport const getCurrentUrl = (requestContext: IRequestContext): URL => {\r\n if (MsDyn365.isBrowser) {\r\n return new URL(window.location.href);\r\n } else {\r\n // NOTE: Typing on requestURL is incorrect\r\n if (requestContext.url.requestUrl.href) {\r\n return new URL(requestContext.url.requestUrl.href);\r\n } else {\r\n return new URL((requestContext.url.requestUrl));\r\n }\r\n }\r\n};\r\n","import { getUpdatedRefinementCriteria, IRefineItemCommonProps, IRefineItemToggleNotification, ISearchResultContainerViewProps } from '@msdyn365-commerce-modules/search-result-container';\r\nimport { Button,ILabeledDropdownOption, INodeProps, Node } from '@msdyn365-commerce-modules/utilities';\r\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\r\nimport { SortColumn } from '@msdyn365-commerce/retail-proxy';\r\nimport { transaction } from 'mobx';\r\nimport * as React from 'react';\r\nimport { ICittaSearchResultContainerProps } from '../../modules/citta-search-result-container/citta-search-result-container.props.autogenerated';\r\nimport RefineSubmenu from './refine-submenu';\r\nimport { buildListPageUrl, getCurrentUrl } from './url-utils';\r\nexport interface ISortByViewProps {\r\n SortingContainer: INodeProps;\r\n sortByDropDown?: React.ReactNode;\r\n}\r\n\r\nexport interface ISortByProps {\r\n props: ISearchResultContainerViewProps & ICittaSearchResultContainerProps<{}>;\r\n}\r\n\r\nexport interface ISortByOptionsState {\r\n sortingState: ISortByCollectionState;\r\n}\r\n\r\ninterface ISortByCollectionState {\r\n selectedSortByOption: ILabeledDropdownOption;\r\n dropdownOpen: boolean;\r\n pending: boolean;\r\n}\r\nexport interface IRefineMenuViewProps {\r\n RefineMenuContainer: INodeProps;\r\n RefinerSectionContainer: INodeProps;\r\n refinersHeader: React.ReactNode;\r\n refiners?: React.ReactNode[];\r\n}\r\n\r\nconst sortOptions = {\r\n sortByOptionRelevanceDesc: 'Ranking-Desc',\r\n sortByOptionRatingAsc: 'AverageRating-Asc',\r\n sortByOptionRatingDesc: 'AverageRating-Desc',\r\n sortByOptionNameAsc: 'Name-Asc',\r\n sortByOptionNameDesc: 'Name-Desc',\r\n sortByOptionPriceAsc: 'Price-Asc',\r\n sortByOptionPriceDesc: 'Price-Desc'\r\n};\r\n\r\nexport interface IRefinerProps {\r\n props: ISearchResultContainerViewProps & ICittaSearchResultContainerProps<{}>;\r\n toggleModal: Function;\r\n}\r\n/** This component will be used to render Refiners on Citta category and search results page */\r\nexport default class CittaRefiners extends React.PureComponent {\r\n private _refineItemCommonProps: IRefineItemCommonProps;\r\n \r\n private sortByDropdownOptions: ILabeledDropdownOption[] = [\r\n { key: sortOptions.sortByOptionRelevanceDesc, value: this.props.props.resources.sortByOptionRelevanceDesc },\r\n { key: sortOptions.sortByOptionNameAsc, value: this.props.props.resources.sortByOptionNameAsc },\r\n { key: sortOptions.sortByOptionNameDesc, value: this.props.props.resources.sortByOptionNameDesc },\r\n { key: sortOptions.sortByOptionPriceAsc, value: this.props.props.resources.sortByOptionPriceAsc },\r\n { key: sortOptions.sortByOptionPriceDesc, value: this.props.props.resources.sortByOptionPriceDesc },\r\n ];\r\n\r\n\r\n constructor(props: IRefinerProps) {\r\n super(props);\r\n const {\r\n placeholderTextMax,\r\n minLabel,\r\n maxLabel,\r\n rangeNameFormat\r\n } = props.props.resources;\r\n\r\n const locale = props.props.context.request.locale;\r\n const telemetry = props.props.telemetry;\r\n const validationErrorNaN = props.props.resources.validationErrorNotNumber;\r\n const validationErrorRange = props.props.resources.validationErrorNotRange;\r\n this._refineItemCommonProps = {\r\n telemetry,\r\n locale,\r\n placeholderTextMax,\r\n minLabel,\r\n maxLabel,\r\n rangeNameFormat,\r\n validationErrorNaN,\r\n validationErrorRange\r\n };\r\n\r\n this.state = {\r\n sortingState: {\r\n pending: false,\r\n dropdownOpen: false,\r\n selectedSortByOption: this.sortByDropdownOptions[0]\r\n }\r\n };\r\n\r\n this._renderRefiners = this._renderRefiners.bind(this);\r\n this._onClearRefiners = this._onClearRefiners.bind(this);\r\n this._getSortColumnFromSelectedOption = this._getSortColumnFromSelectedOption.bind(this);\r\n this._getSortingRefiner = this._getSortingRefiner.bind(this);\r\n\r\n }\r\n public render(): JSX.Element | null {\r\n const refineMenu: IRefineMenuViewProps = this._renderRefiners();\r\n const sortRefiner = this._getSortingRefiner();\r\n\r\n if (refineMenu.refiners) {\r\n return (\r\n \r\n \r\n \r\n {refineMenu.refinersHeader}\r\n {sortRefiner.sortByDropDown}\r\n {refineMenu.refiners.map((submenu, index) => (\r\n \r\n {submenu}\r\n \r\n ))}\r\n \r\n \r\n );\r\n }\r\n return null;\r\n }\r\n\r\n private _onClearRefiners = (): void => {\r\n const { context } = this.props.props;\r\n const requestContext = context && context.request;\r\n const actionContext = context && context.actionContext;\r\n\r\n if (!requestContext || !actionContext || !this.props.props.data.listPageState.result) {\r\n const error = `Refine menu cannot refine search criteria: ${!requestContext ? 'requestContext ' : ''} ${!actionContext ? 'actionContext ' : ''} could not be found`;\r\n this.props.props.telemetry.warning(error);\r\n }\r\n\r\n window.history.pushState({}, '', buildListPageUrl(getCurrentUrl(requestContext), []));\r\n transaction(() => {\r\n this.props.props.data.listPageState.result!.currentPageNumber = 0;\r\n this.props.props.data.listPageState.result!.activeFilters = [];\r\n });\r\n }\r\n\r\n private _getSortingRefiner = (): ISortByViewProps => {\r\n const { data, context, config } = this.props.props;\r\n\r\n const tempRangeTypeTODO = context.request.query && context.request.query.inputRange ? 'input' : 'slider';\r\n const sortingCritera = (data.listPageState.result && data.listPageState.result.sortingCritera) || undefined;\r\n \r\n let sortByValues:string[] = [];\r\n const activeRefiners = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\r\n\r\n if (data.searchConfiguration.result) {\r\n if (sortingCritera && sortingCritera.Columns?.length) {\r\n data.searchConfiguration!.result!.forEach((searchConfiguration) => { \r\n sortingCritera.Columns!.forEach (sortingC => {\r\n if (searchConfiguration.sortColumn.ColumnName === sortingC.ColumnName && searchConfiguration.sortColumn.IsDescending === sortingC.IsDescending) {\r\n sortByValues.push(searchConfiguration.key);\r\n }\r\n })\r\n });\r\n }\r\n }\r\n\r\n let sortByDropdownOptions = [\r\n {\r\n RefinerSourceValue: 1,\r\n DataValueType: 5,\r\n Count: 8,\r\n RowNumber: 0,\r\n RefinerRecordId: 0,\r\n UnitText: 'Sort By',\r\n RightValueBoundString: sortOptions.sortByOptionRelevanceDesc,\r\n LeftValueBoundString: this.props.props.resources.sortByOptionRelevanceDesc\r\n },\r\n {\r\n RefinerSourceValue: 1,\r\n DataValueType: 5,\r\n Count: 8,\r\n RowNumber: 0,\r\n RefinerRecordId: 0,\r\n UnitText: 'Sort By',\r\n RightValueBoundString: sortOptions.sortByOptionNameAsc,\r\n LeftValueBoundString: this.props.props.resources.sortByOptionNameAsc\r\n },\r\n {\r\n RefinerSourceValue: 1,\r\n DataValueType: 5,\r\n Count: 8,\r\n RowNumber: 0,\r\n RefinerRecordId: 0,\r\n UnitText: 'Sort By',\r\n RightValueBoundString: sortOptions.sortByOptionNameDesc,\r\n LeftValueBoundString: this.props.props.resources.sortByOptionNameDesc\r\n },\r\n {\r\n RefinerSourceValue: 1,\r\n DataValueType: 5,\r\n Count: 8,\r\n RowNumber: 0,\r\n RefinerRecordId: 0,\r\n UnitText: 'Sort By',\r\n RightValueBoundString: sortOptions.sortByOptionPriceAsc,\r\n LeftValueBoundString: this.props.props.resources.sortByOptionPriceAsc\r\n },\r\n {\r\n RefinerSourceValue: 1,\r\n DataValueType: 5,\r\n Count: 8,\r\n RowNumber: 0,\r\n RefinerRecordId: 0,\r\n UnitText: 'Sort By',\r\n RightValueBoundString: sortOptions.sortByOptionPriceDesc,\r\n LeftValueBoundString: this.props.props.resources.sortByOptionPriceDesc\r\n }\r\n ];\r\n\r\n let sortBy: IProductRefinerHierarchy = {\r\n KeyName: 'SortBy',\r\n Values: sortByDropdownOptions\r\n } ;\r\n const dropdown = (\r\n \r\n
\r\n {'x'}\r\n \r\n
\r\n\r\n
Refine
\r\n
\r\n {'Clear'}\r\n \r\n
\r\n
{\r\n\r\n public render(): JSX.Element | null {\r\n const { image1 = '', image2 = '', altText, gridSettings, imageSettings } = this.props;\r\n const img1: IImageData = {\r\n src: image1,\r\n altText: altText ? altText : ''\r\n };\r\n const img2: IImageData = {\r\n src: image2,\r\n altText: altText ? altText : ''\r\n };\r\n const imageProps = {\r\n gridSettings: gridSettings,\r\n imageSettings: imageSettings\r\n };\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n private handleMoveHover = () => {\r\n this.setState({ showHoverImg: true });\r\n }\r\n\r\n private handleMoveOut = () => {\r\n this.setState({ showHoverImg: false });\r\n }\r\n}\r\n","import { generateImageUrl, getProductPageUrlSync } from '@msdyn365-commerce-modules/retail-actions';\r\nimport { format } from '@msdyn365-commerce-modules/utilities';\r\nimport { RatingComponent } from '@msdyn365-commerce/components';\r\nimport { IComponentProps, ICoreContext, IGridSettings, IImageSettings } from '@msdyn365-commerce/core';\r\nimport { ProductPrice, ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\nimport CittaPicture from '../../../components/citta-picture';\r\n\r\nimport PriceComponent from '../../../components/price-component';\r\n\r\nexport interface IProductComponentProps extends IComponentProps<{ product?: ProductSearchResult }> {\r\n className?: string;\r\n imageSettings?: IImageSettings;\r\n savingsText?: string;\r\n freePriceText?: string;\r\n originalPriceText?: string;\r\n currentPriceText?: string;\r\n ratingAriaLabel?: string;\r\n salesLineTagKey?: string;\r\n tagsToIgnore?: string;\r\n}\r\n\r\n/**\r\n *\r\n * The ProductComponent renders the products.\r\n * @extends {React.PureComponent}\r\n */\r\nclass ProductComponent extends React.Component {\r\n\r\n constructor(props: IProductComponentProps) {\r\n super(props);\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n const product = this.props.data.product;\r\n if (!product) {\r\n return null;\r\n }\r\n let imageOrientation: string = '';\r\n let onlineTags: string = '';\r\n let salesLineTag: string = '';\r\n let productImage1: string = '';\r\n let productImage2: string = '';\r\n let stockAvailabilityPropertyText: string = '';\r\n let stockAvailabilities: any[] = [];\r\n\r\n if (product.ExtensionProperties!.length > 0) {\r\n product.ExtensionProperties!.map(property => {\r\n if (property.Key === 'ProductImage1') {\r\n productImage1 = property.Value!.StringValue!;\r\n } else if (property.Key === 'ProductImage2') {\r\n productImage2 = property.Value!.StringValue!;\r\n }\r\n else if (property.Key === 'ProductAvailability') {\r\n stockAvailabilities.push({name: property.Value?.StringValue, value: property.Value?.IntegerValue});\r\n }\r\n });\r\n }\r\n if (product.AttributeValues!.length > 0) {\r\n product.AttributeValues!.map(property => {\r\n if (property.Name === 'Image Orientation') {\r\n imageOrientation = property.TextValue!;\r\n } else if (property.Name === 'Online Tags' || property.Name === \"Online Tags B2BN\" || property.Name === \"Online Tags B2BA\") {\r\n onlineTags = property.TextValue!;\r\n if (this.props.tagsToIgnore && onlineTags) {\r\n let tags = this.props.tagsToIgnore.split('|');\r\n if (tags.includes(onlineTags)) {\r\n onlineTags = '';\r\n }\r\n }\r\n } else if (property.Name === this.props.salesLineTagKey) {\r\n salesLineTag = property.TextValue!;\r\n }\r\n });\r\n }\r\n\r\n const image1 = generateImageUrl(productImage1, this.props.context.request.apiSettings);\r\n const image2 = generateImageUrl(productImage2, this.props.context.request.apiSettings);\r\n\r\n const productUrl = getProductPageUrlSync(product.Name || '', product.RecordId, this.props.context && this.props.context.actionContext, undefined);\r\n\r\n // Construct telemetry attribute to render\r\n const attribute = this.props.context\r\n && this.props.context.telemetry\r\n && this.props.context.telemetry.setTelemetryAttribute\r\n && this.props.context.telemetry.setTelemetryAttribute(product.RecordId.toString(), {\r\n pid: product.RecordId,\r\n pname: product.Name,\r\n mname: this.props.id\r\n }\r\n );\r\n const productImageSettings = imageOrientation === 'Landscape' ? this._getLandscapeImageSettings(this.props.imageSettings) : this.props.imageSettings;\r\n return (\r\n \r\n {onlineTags}
\r\n \r\n {this._renderProductPlacementImage(productImageSettings, this.props.context.request.gridSettings, product.PrimaryImageUrl, image1, image2, product.Name)}\r\n
\r\n \r\n
{product.Name} \r\n {this._renderPrice(this.props.context, this.props.typeName, this.props.id, product.BasePrice, product.Price, this.props.savingsText, this.props.freePriceText, this.props.originalPriceText, this.props.currentPriceText)}\r\n {this._renderSalesLineTag(salesLineTag)}\r\n {this._renderDescription(product.Description)}\r\n {!this.props.context.app.config.hideRating && this._renderRating(this.props.context, this.props.typeName, this.props.id, product.AverageRating, product.TotalRatings, this.props.ratingAriaLabel)}\r\n {stockAvailabilityPropertyText}\r\n
\r\n {this._renderAvailabilities(stockAvailabilities)}\r\n
\r\n
\r\n );\r\n }\r\n\r\n private _renderAvailabilities(stockAvailabilities: any[]) {\r\n return stockAvailabilities && stockAvailabilities.map(sA => \r\n 0 ? 'in-stock' : 'out-of-stock'}>{sA.name.match(/\\b(\\w)/g).join('')} \r\n
\r\n )\r\n }\r\n\r\n private _renderLabel(name?: string, price?: string, rating?: number, ratingAriaLabel?: string): string {\r\n let ratingLabel = '';\r\n\r\n name = name || '';\r\n price = price || '';\r\n\r\n if (rating) {\r\n const roundedRating = rating.toFixed(2);\r\n ratingLabel = format(ratingAriaLabel || '', roundedRating, '5');\r\n }\r\n\r\n return (`${name} ${price} ${ratingLabel}`);\r\n }\r\n\r\n private _renderSalesLineTag(salesLineTag?: string): JSX.Element | null {\r\n if (salesLineTag! && salesLineTag !== '') {\r\n return (\r\n {salesLineTag}
\r\n );\r\n }\r\n return null;\r\n }\r\n\r\n private _renderDescription(description?: string): JSX.Element | null {\r\n return {description}
;\r\n }\r\n\r\n private _renderRating(context: ICoreContext, typeName: string, id: string, avgRating?: number, totalRatings?: number, ariaLabel?: string): JSX.Element | null {\r\n if (!avgRating) {\r\n return null;\r\n }\r\n\r\n const numRatings = totalRatings && totalRatings.toString() || undefined;\r\n\r\n return (\r\n > = props => {\r\n const {\r\n SearchResultContainer,\r\n pagination,\r\n ProductsContainer,\r\n modalToggle,\r\n searchResultModal,\r\n TitleViewProps,\r\n categoryHierarchy,\r\n errorMessage,\r\n // @ts-ignore\r\n toggleModal\r\n } = props;\r\n\r\n return (\r\n \r\n {renderCategoryHierarchy(categoryHierarchy)}\r\n \r\n {modalToggle}\r\n
\r\n {createSearchResultModal(searchResultModal, props, toggleModal)}\r\n {renderTitle(TitleViewProps)}\r\n \r\n {errorMessage}\r\n {renderProducts(props)}\r\n \r\n {pagination}\r\n \r\n );\r\n};\r\n\r\nfunction renderProducts(props: ISearchResultContainerViewProps & ICittaSearchResultContainerProps<{}>): JSX.Element | null {\r\n const { config, context, resources } = props;\r\n const liClass = 'ms-product-search-result__item';\r\n const products = (props.data.listPageState.result && props.data.listPageState.result.activeProducts) || [];\r\n if (!products || products.length === 0) {\r\n return null;\r\n }\r\n return (\r\n \r\n {products.map((product: ProductSearchResult, index: number) => (\r\n \r\n \r\n ))}\r\n \r\n );\r\n}\r\n\r\nfunction getImageOrientation(product: ProductSearchResult): string {\r\n let imageOrientation: string = '';\r\n if (product.AttributeValues!.length > 0) {\r\n product.AttributeValues!.map(property => {\r\n if (property.Name === 'Image Orientation') {\r\n imageOrientation = property.TextValue!;\r\n }\r\n });\r\n }\r\n return imageOrientation;\r\n}\r\n\r\nconst createSearchResultModal = (modalProps: ISearchResultModalViewProps, props: ISearchResultContainerViewProps & ICittaSearchResultContainerProps<{}>, toggleModal: Function): JSX.Element => {\r\n return React.cloneElement(modalProps.modal, {className: \"category-refiner\"}, null, createModalBody(modalProps, props, toggleModal))\r\n};\r\n\r\nconst createModalBody = (modalProps: ISearchResultModalViewProps, props: ISearchResultContainerViewProps & ICittaSearchResultContainerProps<{}>, toggleModal: Function): JSX.Element | null => {\r\n return React.cloneElement(modalProps.modalBody, {}, null, renderRefineMenu(props, toggleModal));\r\n};\r\n\r\nfunction renderRefineMenu(props: ISearchResultContainerViewProps & ICittaSearchResultContainerProps<{}>, toggleModal: Function): JSX.Element {\r\n return (\r\n \r\n {categoryHierarchyList.map((category, index) => (\r\n \r\n {category}\r\n {categoryHierarchyList && categoryHierarchyList[index + 1] && categoryHierarchySeparator}\r\n \r\n ))}\r\n \r\n );\r\n }\r\n\r\n return null;\r\n};\r\n\r\nconst renderTitle = (props: ITitleViewProps): JSX.Element | null => {\r\n const { title, TitleContainer } = props;\r\n if (title) {\r\n return (\r\n \r\n {title.titleText} \r\n \r\n {title.titleCount}\r\n \r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\n// const renderTitleCount = (props: ITitleViewProps): JSX.Element | null => {\r\n// const { title, TitleContainer } = props;\r\n// if (title) {\r\n// return (\r\n// \r\n// {title.titleText} \r\n// \r\n// {title.titleCount}\r\n// \r\n// \r\n// );\r\n// }\r\n// return null;\r\n// };\r\n\r\nexport default SearchResultContainerView;","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { SalesOrder, SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport {\n Button,\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n IModuleProps,\n INodeProps,\n ITelemetryContent,\n TelemetryConstant\n} from '@msdyn365-commerce-modules/utilities';\nimport classname from 'classnames';\nimport get from 'lodash/get';\nimport { computed } from 'mobx';\nimport * as React from 'react';\n\nimport { IGetOrderSummaryInput, IHelp, IOrderSummary, IPaymentMethods, IPaymentMethodsInput } from '../../common';\nimport { getGroups, IGroups } from '../../common/get-groups';\nimport { getOrderInformation, getOrderInformationInput, IOrderInformation } from '../../common/get-order-information';\nimport { ISalesLine } from '../../common/get-sales-line';\nimport { getSalesLines, getSalesLinesInput } from '../../common/get-sales-lines';\nimport { Label } from '../../common/label';\nimport { getTenderIdOperationIdMap, IPriceContext } from '../../common/utilities';\nimport { getOrderConfirmationHelp } from '../order-confirmation/components/get-help';\nimport { getOrderConfirmationOrderSummary } from '../order-confirmation/components/get-order-summary';\nimport { getOrderConfirmationPaymentMethods } from '../order-confirmation/components/get-payment-methods';\nimport { ICheckoutOrderConfirmationData } from './checkout-order-confirmation.data';\nimport { ICheckoutOrderConfirmationProps } from './checkout-order-confirmation.props.autogenerated';\n\nexport interface ICheckoutOrderConfirmationViewProps extends ICheckoutOrderConfirmationProps {\n moduleProps: IModuleProps;\n salesOrder?: SalesOrder;\n footerProps?: INodeProps;\n alert?: React.ReactNode;\n loading?: React.ReactNode;\n heading: React.ReactNode;\n backToShoppingLink?: React.ReactNode;\n orderInfomation?: IOrderInformation;\n salesLines?: ISalesLine[];\n groups?: IGroups;\n orderSummary?: IOrderSummary;\n payment?: IPaymentMethods;\n help?: IHelp;\n}\n\n/**\n *\n * OrderConfirmation component.\n * @extends {React.PureComponent>}\n */\nclass OrderConfirmation extends React.PureComponent> {\n private readonly moduleName: string = 'ms-order-confirmation';\n\n private readonly telemetryContent?: ITelemetryContent;\n\n private readonly backToShoppingAttributes?: Msdyn365.IDictionary;\n\n constructor(props: ICheckoutOrderConfirmationProps) {\n super(props);\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n const payLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.BackToShopping);\n this.backToShoppingAttributes = getTelemetryAttributes(this.telemetryContent, payLoad);\n }\n\n @computed get isCurrentChannel(): boolean {\n if (!this.order) {\n return false;\n }\n return this.order.ChannelId === get(this.props, 'context.request.apiSettings.channelId');\n }\n\n @computed get isDataReady(): boolean {\n return get(this.props, 'data.checkout.status') === 'SUCCESS';\n }\n\n @computed get hasError(): boolean {\n return get(this.props, 'data.checkout.status') === 'FAILED';\n }\n\n @computed get order(): SalesOrder | undefined {\n return get(this.props, 'data.checkout.result.salesOrder');\n }\n\n @computed get products(): SimpleProduct[] {\n return get(this.props, 'data.checkout.result.orderedProducts') || [];\n }\n\n @computed get priceContext(): IPriceContext {\n const {\n id,\n typeName,\n context,\n telemetry,\n resources: { freePriceText }\n } = this.props;\n return {\n id,\n typeName,\n context,\n telemetry,\n freePriceText\n };\n }\n\n @computed get earnedPoints(): number {\n const loyaltyCard = this.props.data.loyaltyCard.result;\n if (loyaltyCard && loyaltyCard.RewardPoints && this.order) {\n const pointPrograms = new Set(loyaltyCard.RewardPoints.map(point => point.RewardPointId));\n const rewardLines = this.order.LoyaltyRewardPointLines || [];\n let total = 0;\n rewardLines.forEach(line => {\n if ((line.RewardPointAmountQuantity || 0) > 0 && pointPrograms.has(line.RewardPointId)) {\n total += line.RewardPointAmountQuantity!;\n }\n });\n return total;\n }\n return 0;\n }\n\n @computed get orderSummaryProps(): IGetOrderSummaryInput | undefined {\n if (!this.order) {\n return;\n }\n\n const {\n resources: {\n orderSummaryHeading,\n orderSummaryItemsTotalLabel,\n orderSummaryShippingFeeLabel,\n orderSummaryTaxLabel,\n orderSummaryGrandTotalLabel,\n pointsEarnedLabel\n }\n } = this.props;\n return {\n order: this.order,\n earnedPoints: this.earnedPoints,\n priceContext: this.priceContext,\n resource: {\n orderSummaryHeading,\n orderSummaryItemsTotalLabel,\n orderSummaryShippingFeeLabel,\n orderSummaryTaxLabel,\n pointsEarnedLabel,\n orderSummaryGrandTotalLabel\n }\n };\n }\n\n @computed get paymentMethodsProps(): IPaymentMethodsInput | undefined {\n const tenderTypes = this.props.data.tenderTypes.result;\n if (!this.order || !this.order.TenderLines || !tenderTypes) {\n return;\n }\n\n const locale = get(this.props, 'context.request.locale') || 'en-US';\n\n const {\n resources: {\n paymentMethodsTitle,\n creditCardEndingLabel,\n giftCardEndingLabel,\n amountCoveredLabel,\n cashUsedLabel,\n loyaltyCardUsedLabel,\n customerAccountUsedLabel\n }\n } = this.props;\n\n return {\n priceContext: this.priceContext,\n tenderLines: this.order.TenderLines,\n tenderIdOperationIdMap: getTenderIdOperationIdMap(tenderTypes),\n locale,\n resource: {\n paymentMethodsTitle,\n creditCardEndingLabel,\n giftCardEndingLabel,\n amountCoveredLabel,\n cashUsedLabel,\n loyaltyCardUsedLabel,\n customerAccountUsedLabel\n }\n };\n }\n\n public render(): JSX.Element {\n const {\n resources: {\n noSalesOrderText,\n genericErrorMessage,\n needHelpLabel,\n helpLineNumberLabel,\n loadingLabel,\n backToShopping,\n orderItemLabel,\n orderItemsLabel,\n helpLineContactAriaLabel\n },\n config: { heading, contactNumber, showTimeslot }\n } = this.props;\n\n const moduleProps = { moduleProps: this.props, className: classname('ms-order-confirmation', this.props.config.className) };\n const backToShoppingUrl = Msdyn365.getUrlSync('home', this.props.context.actionContext) || '';\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const { channelDeliveryOptionConfig, featureState } = this.props?.data;\n const retailMultiplePickUpOptionEnabled = featureState?.result?.find(item => item.Name === multiplePickupStoreSwitchName)\n ?.IsEnabled;\n\n let viewProps: ICheckoutOrderConfirmationViewProps = {\n ...this.props,\n moduleProps,\n heading: heading && heading.text && (\n \n {backToShopping}\n \n ),\n footerProps: { className: 'ms-order-confirmation__footer' }\n };\n\n if (this.hasError) {\n viewProps = {\n ...viewProps,\n alert: \n
\n {`${tenderLine.CardTypeId} ${isValidCardNumber ? `${creditCardEndingLabel} ${cardLastFourDigit}` : ''}`}\n
\n {showAmountCovered && (\n
\n {amountCoveredLabel}\n
\n )}\n
\n
\n {giftCardEndingLabel}\n {` `}\n {getLastFourDigit(tenderLine.GiftCardId)}\n
\n
\n {amountCoveredLabel}\n
\n
\n
\n {loyaltyCardUsedLabel}\n {` `}\n {tenderLine.LoyaltyCardId}\n
\n
\n {amountCoveredLabel}\n
\n
\n
{cashUsedLabel}
\n
\n {amountCoveredLabel}\n
\n
\n
\n {customerAccountUsedLabel}\n {` `}\n {tenderLine.CustomerId}\n
\n
\n {amountCoveredLabel}\n
\n
{paymentMethodsTitle}
,\n methods: tenderLines.reduce((lines: React.ReactNode[], tenderLine) => {\n if (!tenderLine.TenderTypeId) {\n return lines;\n }\n switch (tenderIdOperationIdMap[tenderLine.TenderTypeId]) {\n case RetailOperation.PayCard:\n lines.push(getCard(tenderLine, tenderLines.length > 1));\n break;\n case RetailOperation.PayGiftCertificate:\n lines.push(getGiftCertificate(tenderLine));\n break;\n case RetailOperation.PayLoyalty:\n lines.push(getLoyalty(tenderLine));\n break;\n case RetailOperation.PayCash:\n lines.push(getCash(tenderLine));\n break;\n case RetailOperation.PayCustomerAccount:\n lines.push(getCustomerAccountPayment(tenderLine));\n break;\n default:\n\n // Do nothing\n }\n return lines;\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 OrderHistory from './order-history';\nimport OrderHistoryView from './order-history.view';\n\nexport * from './actions/get-order-shipment-history';\nexport * from './components';\nexport * from './order-history';\nexport * from './order-history.data';\nexport { IOrderHistoryConfig, IOrderHistoryProps, IOrderHistoryResources } from './order-history.props.autogenerated';\nexport * from './order-history.view';\n\nexport { OrderHistory, OrderHistoryView };\n","import * as React from 'react';\r\ninterface ISeparator {\r\n separator: string;\r\n}\r\n\r\nexport const Separator: React.FC = ({ separator }) => ( {separator} );","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { OrderDetailsProduct } from '@msdyn365-commerce/components';\nimport Msdyn365, { ContentEditableEvent, getUrlSync, isChannelTypeB2B, Text, isUserTypeB2B } from '@msdyn365-commerce/core';\nimport {\n ChannelDeliveryOptionConfiguration,\n FeatureState,\n LoyaltyRewardPoint,\n OrderOriginator,\n ProductCatalog,\n ProductDeliveryOptions,\n SalesLine,\n SalesOrder,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, getTelemetryObject, IModuleProps, INodeProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classname from 'classnames';\nimport get from 'lodash/get';\nimport { computed, observable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { BuySelectedComponent, IGetOrderSummaryInput, IHelp, IOrderSummary, IPaymentMethods, IPaymentMethodsInput } from '../../common';\nimport { getGroups, IGroups } from '../../common/get-groups';\nimport { getOrderInformation, getOrderInformationInput, IOrderInformation } from '../../common/get-order-information';\nimport { ISalesLine } from '../../common/get-sales-line';\nimport { getSalesLines, getSalesLinesInput } from '../../common/get-sales-lines';\nimport { Label } from '../../common/label';\nimport { getTenderIdOperationIdMap, IPriceContext } from '../../common/utilities';\nimport { getOrderDetailsHelp } from './components/get-help';\nimport { getOrderDetailsOrderSummary } from './components/get-order-summary';\nimport { getOrderDetailsPaymentMethods } from './components/get-payment-methods';\nimport { OrderDetailsTableComponent } from './components/table-view';\nimport { IOrderDetailsData } from './order-details.data';\nimport { addressOptions, IOrderDetailsProps } from './order-details.props.autogenerated';\n\n/**\n * Specifies different layouts for order details.\n */\nexport enum OrderDetailsViewMode {\n listView = 0,\n detailedView = 1\n}\n\nexport interface IOrderDetailsViewProps extends IOrderDetailsProps {\n moduleProps: IModuleProps;\n tableViewActions?: React.ReactNode;\n viewModes?: React.ReactNode;\n table?: React.ReactNode;\n salesOrder?: SalesOrder;\n footerProps?: INodeProps;\n alert?: React.ReactNode;\n loading?: React.ReactNode;\n heading: React.ReactNode;\n placedBy?: React.ReactNode;\n backToShoppingLink?: React.ReactNode;\n orderInfomation?: IOrderInformation;\n salesLines?: ISalesLine[];\n groups?: IGroups;\n orderSummary?: IOrderSummary;\n payment?: IPaymentMethods;\n help?: IHelp;\n catalogs?: ProductCatalog[];\n}\n\n/**\n *\n * OrderDetails component.\n * @extends {React.PureComponent>}\n */\n@observer\nclass OrderDetails extends React.PureComponent> {\n @observable private _viewMode: OrderDetailsViewMode;\n\n @observable private _products: OrderDetailsProduct[];\n\n @observable private _isSelectionModeEnabled: boolean;\n\n private readonly moduleName: string = 'ms-order-details';\n\n private readonly multiplePickupStoreSwitchName: string = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n\n private readonly telemetryContent: ITelemetryContent;\n\n @computed get isCurrentChannel(): boolean {\n if (!this.order) {\n return false;\n }\n return this.order.ChannelId === get(this.props, 'context.request.apiSettings.channelId');\n }\n\n @computed get isDataReady(): boolean {\n return get(this.props, 'data.orderHydration.status') === 'SUCCESS';\n }\n\n @computed get hasError(): boolean {\n return get(this.props, 'data.orderHydration.status') === 'FAILED';\n }\n\n @computed get order(): SalesOrder | undefined {\n return get(this.props, 'data.orderHydration.result.salesOrder');\n }\n\n @computed get products(): SimpleProduct[] {\n return get(this.props, 'data.orderHydration.result.products') || [];\n }\n\n @computed get deliveryOptions(): ProductDeliveryOptions[] {\n return get(this.props, 'data.orderHydration.result.deliveryOptions') || [];\n }\n\n @computed get priceContext(): IPriceContext {\n const {\n id,\n typeName,\n context,\n telemetry,\n resources: { freePriceText }\n } = this.props;\n return {\n id,\n typeName,\n context,\n telemetry,\n freePriceText\n };\n }\n\n @computed get earnedPoints(): number {\n const loyaltyCard = this.props.data.loyaltyCard.result;\n if (loyaltyCard && loyaltyCard.RewardPoints && this.order) {\n const pointPrograms = new Set(loyaltyCard.RewardPoints.map((point: LoyaltyRewardPoint) => point.RewardPointId));\n const rewardLines = this.order.LoyaltyRewardPointLines || [];\n let total = 0;\n rewardLines.forEach(line => {\n if ((line.RewardPointAmountQuantity || 0) > 0 && pointPrograms.has(line.RewardPointId)) {\n total += line.RewardPointAmountQuantity!;\n }\n });\n return total;\n }\n return 0;\n }\n\n @computed get orderSummaryProps(): IGetOrderSummaryInput | undefined {\n if (!this.order) {\n return;\n }\n const { request } = this.props.context;\n const { channelDeliveryOptionConfig, featureState } = this.props?.data;\n const isMultiplePickUpOptionEnabled = featureState?.result?.find(\n (item: FeatureState) => item.Name === this.multiplePickupStoreSwitchName\n )?.IsEnabled;\n const pickupDeliveryModeCode = request && request.channel && request.channel.PickupDeliveryModeCode;\n const emailDeliveryModeCode = request && request.channel && request.channel.EmailDeliveryModeCode;\n const orderDetailsLines = this.order?.SalesLines;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- app configs are of generic type\n const isShowOrHideTaxEnabled = request.app.config.isEnableShowOrHideSalesTaxECommerceEnabled === true;\n\n const { salesId = '' } = request.query || {};\n const isCashAndCarryTransaction =\n (this.order.ChannelReferenceId === undefined || this.order.ChannelReferenceId === '') && salesId === '';\n\n const canShip =\n !isCashAndCarryTransaction &&\n orderDetailsLines?.some(orderDetailsLine =>\n orderDetailsLine.DeliveryMode && orderDetailsLine.DeliveryMode !== ''\n ? orderDetailsLine.DeliveryMode !==\n this.getDeliveryMode(\n orderDetailsLine,\n isMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig?.result,\n pickupDeliveryModeCode\n ) && orderDetailsLine.DeliveryMode !== emailDeliveryModeCode\n : orderDetailsLine\n );\n\n const {\n resources: {\n orderSummaryHeading,\n orderSummaryItemsTotalLabel,\n orderSummaryShippingFeeLabel,\n orderSummaryTaxLabel,\n orderSummaryGrandTotalLabel,\n pointsEarnedLabel\n }\n } = this.props;\n return {\n order: this.order,\n earnedPoints: this.earnedPoints,\n priceContext: this.priceContext,\n resource: {\n orderSummaryHeading,\n orderSummaryItemsTotalLabel,\n orderSummaryShippingFeeLabel,\n orderSummaryTaxLabel,\n pointsEarnedLabel,\n orderSummaryGrandTotalLabel\n },\n canShip,\n isTaxIncludedInPrice: this.order.IsTaxIncludedInPrice,\n isShowTaxBreakUp: isShowOrHideTaxEnabled\n };\n }\n\n @computed get paymentMethodsProps(): IPaymentMethodsInput | undefined {\n const tenderTypes = this.props.data.tenderTypes.result;\n if (!this.order || !this.order.TenderLines || !tenderTypes) {\n return;\n }\n\n const locale = get(this.props, 'context.request.locale') || 'en-US';\n\n const {\n resources: {\n paymentMethodsTitle,\n creditCardEndingLabel,\n giftCardEndingLabel,\n amountCoveredLabel,\n cashUsedLabel,\n loyaltyCardUsedLabel,\n customerAccountUsedLabel\n }\n } = this.props;\n\n return {\n priceContext: this.priceContext,\n tenderLines: this.order.TenderLines,\n tenderIdOperationIdMap: getTenderIdOperationIdMap(tenderTypes),\n locale,\n resource: {\n paymentMethodsTitle,\n creditCardEndingLabel,\n giftCardEndingLabel,\n amountCoveredLabel,\n cashUsedLabel,\n loyaltyCardUsedLabel,\n customerAccountUsedLabel\n }\n };\n }\n\n @computed\n private get _orderDetailsProducts(): OrderDetailsProduct[] {\n if (!ArrayExtensions.hasElements(this._products)) {\n this._initProductsModel();\n }\n\n return this._products;\n }\n\n @computed\n private get _orderDetailsAvailableProducts(): OrderDetailsProduct[] {\n if (!ArrayExtensions.hasElements(this._products)) {\n this._initProductsModel();\n }\n\n return this._products.filter(product => product.isProductAvailable);\n }\n\n @computed\n private get _selectedProducts(): OrderDetailsProduct[] {\n const products = this._orderDetailsAvailableProducts;\n const selectedProducts = products.filter(product => product.isSelected);\n if (!ArrayExtensions.hasElements(selectedProducts)) {\n return [];\n }\n\n return selectedProducts;\n }\n\n public constructor(props: IOrderDetailsProps) {\n super(props);\n this._viewMode = OrderDetailsViewMode.detailedView;\n this._products = [];\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this._isSelectionModeEnabled = false;\n }\n\n public render(): JSX.Element {\n const {\n resources: { noSalesOrderDetailsText, loadingLabel },\n config: { shouldShowQrCode, showChannelInfo, showTimeslot, isReorderingEnabled }\n } = this.props;\n\n const showFullAddress =\n this.props.config.addressOptions !== undefined &&\n this.props.config.addressOptions === addressOptions.showAddressWithMultiplelines;\n const channelIdentities = this.props.data.channels.result?.channelIdentities;\n const orgUnitLocations = this.props.data.orgUnitLocations.result?.orgUnitLocations;\n const customer = this.props.data.customerInformation && this.props.data.customerInformation.result;\n const originators = this.props.data.orderOriginators && this.props.data.orderOriginators.result;\n const originator: OrderOriginator | undefined = originators && originators.length === 1 ? originators[0] : undefined;\n const channelMultipleCatalogsFeature = 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature';\n const { channelDeliveryOptionConfig, featureState } = this.props.data;\n const isMultiplePickUpOptionEnabled = featureState.result?.find(\n (item: FeatureState) => item.Name === this.multiplePickupStoreSwitchName\n )?.IsEnabled;\n const isMultipleCatalogsFeatureEnabled = featureState.result?.find(\n (item: FeatureState) => item.Name === channelMultipleCatalogsFeature\n )?.IsEnabled;\n const { confirmationId = '', salesId = '', transactionId = '' } = this.props.context.actionContext.requestContext.query ?? {};\n\n const orderInformationInput =\n this.order &&\n getOrderInformationInput(\n this.props,\n this.moduleName,\n this.order,\n this.priceContext,\n channelIdentities,\n orgUnitLocations,\n customer,\n originator,\n showChannelInfo,\n false,\n shouldShowQrCode ?? true\n );\n\n const orderInformation =\n this._isSelectionModeEnabled || !orderInformationInput ? undefined : getOrderInformation(orderInformationInput);\n\n let viewProps: IOrderDetailsViewProps = this.getOrderDetailsProps();\n if (isUserTypeB2B(this.props.context.request) && orderInformationInput?.isOnlineStore && originator) {\n viewProps = {\n ...viewProps,\n placedBy: orderInformation?.placedBy\n };\n }\n\n if ((salesId || transactionId) && !this.props.context.actionContext.requestContext.user.isAuthenticated) {\n const signInUrl: string = this.props.context.actionContext.requestContext.user.signInUrl ?? '';\n if (Msdyn365.isBrowser) {\n window.location.assign(signInUrl);\n }\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n if (this.hasError || !this.order) {\n if (((salesId || transactionId) && this.props.context.actionContext.requestContext.user.isAuthenticated) || confirmationId) {\n viewProps = {\n ...viewProps,\n alert: \n {this.props.resources.orderDetailsEnableSelectionButtonText}\n \n );\n }\n\n private _renderDisableSelectionButton(className: string): JSX.Element | undefined {\n if (!this._isSelectionModeEnabled) {\n return undefined;\n }\n\n return (\n \n {this.props.resources.orderDetailsDisableSelectionButtonText}\n \n );\n }\n\n private _renderBuySelected(className: string): JSX.Element | undefined {\n if (!this._isSelectionModeEnabled) {\n return undefined;\n }\n\n return (\n \n {this._renderBuySelected(containerClassName)}\n {this._renderEnableSelectionButton(containerClassName)}\n {this._renderDisableSelectionButton(containerClassName)}\n
\n );\n };\n\n private _initProductsModel(): void {\n const orderDetailProducts = this.props.data.orderHydration.result?.salesOrder.SalesLines?.map(salesLine => {\n const salesOrderProduct = this.props.data.orderHydration.result?.products.find(\n product => product.RecordId === salesLine.ProductId\n );\n return new OrderDetailsProduct(salesLine, salesOrderProduct);\n });\n\n this._products = ArrayExtensions.validValues(orderDetailProducts);\n }\n\n /**\n * Renders view mode switches for order details.\n * @returns A react node.\n */\n private readonly _renderViewModes = () => {\n if (!this.props.config.isGridViewEnabled) {\n return null;\n }\n\n const viewModesClassName = 'ms-order-details__ms-order-details-view-modes';\n return (\n \n
\n );\n };\n\n /**\n * Get the order details view properties.\n * @returns The initial values of order details view properties.\n */\n private readonly getOrderDetailsProps = (): IOrderDetailsViewProps => {\n const {\n resources: { backToShopping, orderDetailsBuyItemsAgainHeaderText },\n config: { heading }\n } = this.props;\n const moduleProps = { moduleProps: this.props, className: classname('ms-order-details', this.props.config.className) };\n const backToShoppingUrl = getUrlSync('home', this.props.context.actionContext) ?? '';\n\n return {\n ...this.props,\n moduleProps,\n heading: heading && (\n \n {backToShopping}\n \n ),\n footerProps: { className: 'ms-order-details__footer' }\n };\n };\n\n private readonly getDeliveryMode = (\n salesLine: SalesLine,\n featureSate: boolean = false,\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration,\n pickupDeliveryMode?: string\n ) => {\n if (!featureSate) {\n return pickupDeliveryMode;\n }\n return channelDeliveryOptionConfig?.PickupDeliveryModeCodes?.find(deliveryMode => deliveryMode === salesLine.DeliveryMode);\n };\n}\n\nexport default OrderDetails;\n","import * as React from 'react';\r\ninterface IErrorMessage {\r\n text?: string;\r\n}\r\n\r\nexport const ErrorMessage: React.FC = ({ text }) => {\r\n return (\r\n \r\n {text} \r\n \r\n );\r\n};","import * as React from 'react';\r\ninterface ITitle {\r\n className: string;\r\n text: string;\r\n}\r\n\r\nexport const Title: React.FC = ({ text, className }) => ( {text} );\r\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n CacheType,\n createObservableDataAction,\n IAction,\n IActionContext,\n IActionInput,\n ICommerceApiSettings\n} from '@msdyn365-commerce/core';\nimport { IQueryResultSettings, SalesLine } from '@msdyn365-commerce/retail-proxy';\nimport { getOrderShipmentsHistoryAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/CustomersDataActions.g';\nimport { OrderShipments, SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport {\n buildCacheKey,\n getOrganizationWideOrderHistory,\n GetOrganizationWideOrderHistoryInput,\n getSimpleProducts,\n ProductInput\n} from '@msdyn365-commerce-modules/retail-actions';\n\nimport { OrderHistoryFilterState } from '../components/order-history-filter';\n\n/**\n * IPaging Interface.\n */\nexport interface IPaging {\n top: number;\n skip: number;\n}\n\n/**\n * IOrderHistory Interface.\n */\nexport interface IOrderHistory {\n salesOrders: OrderShipments[];\n products: SimpleProduct[];\n nextPageToken?: string;\n}\n\n/**\n * IOrderHistoryResult Interface.\n */\nexport interface IOrderHistoryResult {\n salesOrders: OrderShipments[];\n nextPageToken?: string;\n}\n\n/**\n * Calls the Retail API and returns the products.\n * @param paging - Paging interface.\n * @param nextPageToken - Next Page Link.\n * @returns Collection of OrderShipments.\n */\nconst getOrderShipmentHistory = (paging: IPaging, nextPageToken?: string) => async (ctx: IActionContext): Promise => {\n const orderHistoryResults = getOrderShipmentsHistoryAsync(\n {\n callerContext: ctx,\n bypassCache: 'get',\n queryResultSettings: {\n Paging: {\n Top: paging.top,\n NextPageToken: nextPageToken\n }\n }\n },\n '',\n nextPageToken\n );\n\n const orderHistoryResponse = await orderHistoryResults;\n const nextLinkUrl = orderHistoryResults.metadata?.others?.nextLink;\n const nextPageLink = nextLinkUrl !== undefined ? new URL(nextLinkUrl).searchParams.get('nextPageToken') : undefined;\n const nextPage = nextPageLink !== null ? nextPageLink : undefined;\n return {\n salesOrders: orderHistoryResponse,\n nextPageToken: nextPage\n };\n};\n\n/**\n * Calls the Retail API and returns the products.\n * @param paging - Paging props.\n * @param nextPageToken - Next Page Link.\n * @returns Collections of order shipments.\n */\nconst getOrganizationWideOrderShipmentHistory = (paging: IPaging, nextPageToken?: string) => async (\n context: IActionContext\n): Promise => {\n const queryResultSetting: IQueryResultSettings = {\n Paging: {\n Top: paging.top,\n Skip: paging.skip,\n NextPageToken: nextPageToken\n }\n };\n\n const orgOrderHistoryResults = getOrganizationWideOrderHistory(new GetOrganizationWideOrderHistoryInput(queryResultSetting), context);\n\n const orgOrderHistoryResponse = await orgOrderHistoryResults;\n const nextLinkUrl = orgOrderHistoryResults.metadata?.others?.nextLink;\n const nextPageLink = nextLinkUrl !== undefined ? new URL(nextLinkUrl).searchParams.get('nextPageToken') : undefined;\n const nextPage = nextPageLink !== null ? nextPageLink : undefined;\n return {\n salesOrders: orgOrderHistoryResponse,\n nextPageToken: nextPage\n };\n};\n\n/**\n * Calls the Retail API and returns the products.\n * @param productIds - Collection of products id.\n * @param channelId - ChannelId number.\n * @returns Collections of simple products.\n */\nconst getProducts = (productIds: number[] = [], channelId?: number) => (ctx: IActionContext): Promise => {\n const productInputs = productIds.map(\n productId => new ProductInput(productId, ctx.requestContext.apiSettings, channelId, undefined, ctx.requestContext)\n );\n return getSimpleProducts(productInputs, ctx);\n};\n\n/**\n * Action input.\n */\nexport class GetSalesOrderHistoryWithHydrationsInput implements IActionInput {\n public paging: IPaging;\n\n public filterState: OrderHistoryFilterState;\n\n public nextPageToken?: string;\n\n private readonly apiSettings: ICommerceApiSettings;\n\n constructor(paging: IPaging, apiSettings: ICommerceApiSettings, filterState?: OrderHistoryFilterState, nextPageLink?: string) {\n this.apiSettings = apiSettings;\n this.paging = paging;\n this.filterState = filterState || OrderHistoryFilterState.CurrentUser;\n this.nextPageToken = nextPageLink;\n }\n\n public getCacheKey = () => buildCacheKey('OrderHistory', this.apiSettings);\n\n /**\n * GetCacheObjectType.\n * @returns String.\n */\n public getCacheObjectType = () => 'OrderHistory';\n\n public dataCacheType = (): CacheType => 'none';\n}\n\n/**\n * Splits product ids from the given orders into lists by their channel id.\n * @param {OrderShipments[]} salesOrders Orders with the products.\n * @param {number} currentChannelId Channel id to use by default if no channel id is provided for a product.\n * @returns {{ [x: number]: number[] }} A dictionary where the key is a channel id,\n * and the value is a list of product ids in which all items correspond to the key channel id.\n * @remark The list of product ids is always non-empty.\n */\nconst splitProductsByChannelId = (salesOrders: OrderShipments[], currentChannelId: number): { [x: number]: number[] } => {\n const productIdsByChannel: { [x: number]: number[] } = {};\n\n salesOrders.forEach(salesOrder =>\n salesOrder?.SalesLines?.forEach(line => {\n const orderProductId = line.ProductId || 0;\n const orderChannelId = salesOrder.ChannelId || currentChannelId;\n if (!productIdsByChannel[orderChannelId]) {\n productIdsByChannel[orderChannelId] = [];\n }\n productIdsByChannel[orderChannelId].push(orderProductId);\n })\n );\n\n return productIdsByChannel;\n};\n\n/**\n * Get sales order with hydrations action.\n * @param input - GetOrderHistory hydration input.\n * @param context - Channel context.\n * @returns - Order History props.\n */\nexport async function getSalesOrderHistoryWithHydrationsAction(\n input: GetSalesOrderHistoryWithHydrationsInput,\n context: IActionContext\n): Promise {\n if (!context) {\n throw new Error('getSalesOrderWithHydrationsAction - Action context cannot be null/undefined');\n }\n const channelId = context.requestContext.apiSettings.channelId;\n let salesOrders: OrderShipments[] = [];\n let nextPage: string | undefined = '';\n let orderHistoryResponse: IOrderHistoryResult;\n\n switch (input.filterState) {\n case OrderHistoryFilterState.CurrentUser:\n orderHistoryResponse = await getOrderShipmentHistory(input.paging, input.nextPageToken)(context);\n salesOrders = orderHistoryResponse.salesOrders;\n nextPage = orderHistoryResponse.nextPageToken;\n break;\n case OrderHistoryFilterState.OrganizationWide:\n orderHistoryResponse = await getOrganizationWideOrderShipmentHistory(input.paging, input.nextPageToken)(context);\n salesOrders = orderHistoryResponse.salesOrders;\n nextPage = orderHistoryResponse.nextPageToken;\n break;\n default:\n throw new Error('getSalesOrderWithHydrationsAction - Invalid OrderHistoryFilterState passed');\n }\n\n salesOrders.map(salesOrder => {\n return (salesOrder.SalesLines = salesOrder.SalesLines?.filter((saleline: SalesLine) => !saleline.IsVoided));\n });\n\n if (!salesOrders || salesOrders.length === 0) {\n return {\n salesOrders: [],\n products: [],\n nextPageToken: nextPage\n };\n }\n\n // Splits the data by channel ids so that the products from different channels can be processed separately.\n const productIdsByChannelId = splitProductsByChannelId(salesOrders, channelId);\n\n // Promise that retrieves information about the products for each channel id.\n // Note, the list of product ids should not be empty\n // as it will generate an empty request which will force the promise to fail.\n const getProductsPromise = Object.entries(productIdsByChannelId).map(([entryChannelId, entryProductIdsList]) => {\n const getProductsCall = getProducts(entryProductIdsList, Number(entryChannelId));\n return getProductsCall(context);\n });\n\n return Promise.all(getProductsPromise)\n .then(\n (productList): IOrderHistory => {\n const products = productList.reduce((memo, list) => {\n return [...memo, ...list];\n }, []);\n return {\n salesOrders,\n products,\n nextPageToken: nextPage\n };\n }\n )\n .catch(error => {\n context.telemetry.exception(error);\n context.telemetry.debug('Failed to get products');\n throw error;\n });\n}\n\nexport const getSalesOrderHistoryWithHydrationsActionDataAction = createObservableDataAction({\n id: '@msdyn365-commerce-modules/order-management/order-history/get-order-shipment-history',\n action: >getSalesOrderHistoryWithHydrationsAction\n});\n\nexport default getSalesOrderHistoryWithHydrationsActionDataAction;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nexport * from './get-help';\nexport * from './get-order-summary';\nexport * from './get-payment-methods';\nexport * from './table-view';\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nexport * from './get-sales-order';\nexport * from './order-history-filter';\nexport * from './table-view';\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ISearchResultModalViewProps } from './components';\nimport {\n ICategoryHierarchyViewProps,\n IRefineMenuViewProps,\n ISearchResultContainerViewProps,\n ISortByViewProps,\n ITitleViewProps\n} from './search-result-container';\n\nconst SearchResultContainerView: React.FC = props => {\n const {\n SearchResultContainer,\n products,\n pagination,\n ProductsContainer,\n ProductSectionContainer,\n choiceSummary,\n isMobile,\n modalToggle,\n searchResultModal,\n TitleViewProps,\n refineMenu,\n categoryHierarchy,\n sortByOptions,\n CategoryNavContainer,\n RefineAndProductSectionContainer,\n errorMessage,\n FeatureSearchContainer,\n similarLookProduct\n } = props;\n const isRecoSearchPage = props.context.actionContext.requestContext.query?.recommendation;\n if (isMobile) {\n return (\n \n {renderCategoryHierarchy(categoryHierarchy)}\n {renderTitle(TitleViewProps)}\n {choiceSummary}\n {modalToggle}\n {createSearchResultModal(searchResultModal, refineMenu, sortByOptions, isRecoSearchPage)}\n {similarLookProduct} \n \n {errorMessage}\n {products}\n \n {pagination}\n \n );\n }\n return (\n \n \n {categoryHierarchy && renderCategoryHierarchy(categoryHierarchy)}\n {TitleViewProps && renderTitleCount(TitleViewProps)}\n \n \n {refineMenu && renderRefiner(refineMenu)}\n \n {TitleViewProps && renderTitle(TitleViewProps)}\n {choiceSummary}\n {sortByOptions && !isRecoSearchPage && renderSort(sortByOptions)}\n {similarLookProduct} \n \n {errorMessage}\n {products}\n \n {pagination}\n \n \n \n );\n};\n\nconst createSearchResultModal = (\n modalProps: ISearchResultModalViewProps,\n refineMenu: IRefineMenuViewProps,\n sortByDropDown: ISortByViewProps,\n isRecoSearchPage?: string\n): JSX.Element => {\n return React.cloneElement(\n modalProps.modal,\n {},\n modalProps.modalHeader,\n createModalBody(modalProps, refineMenu, sortByDropDown, isRecoSearchPage),\n modalProps.modalFooter\n );\n};\n\nconst createModalBody = (\n props: ISearchResultModalViewProps,\n refineMenu: IRefineMenuViewProps,\n sortByDropDown: ISortByViewProps,\n isRecoSearchPage?: string\n): JSX.Element | null => {\n if (sortByDropDown) {\n return React.cloneElement(props.modalBody, {}, renderSort(sortByDropDown, isRecoSearchPage), renderRefiner(refineMenu));\n }\n return null;\n};\n\nconst renderRefiner = (props: IRefineMenuViewProps): JSX.Element | null => {\n const { refiners, RefineMenuContainer, RefinerSectionContainer } = props;\n if (refiners) {\n return (\n \n \n {refiners.map((submenu, index) => (\n {submenu} \n ))}\n \n \n );\n }\n return null;\n};\n\nconst renderSort = (props: ISortByViewProps, isRecoSearchPage?: string): JSX.Element | null => {\n const { SortingContainer, sortByDropDown } = props;\n if (sortByDropDown && !isRecoSearchPage) {\n return {sortByDropDown} ;\n }\n return null;\n};\n\nconst renderCategoryHierarchy = (props: ICategoryHierarchyViewProps): JSX.Element | null => {\n const { CategoryHierarchyContainer, categoryHierarchyList, categoryHierarchySeparator } = props;\n if (categoryHierarchyList) {\n return (\n \n {categoryHierarchyList.map((category, index) => (\n \n {category}\n {categoryHierarchyList && categoryHierarchyList[index + 1] && categoryHierarchySeparator}\n \n ))}\n \n );\n }\n\n return null;\n};\n\nconst renderTitle = (props: ITitleViewProps): JSX.Element | null => {\n const { title, TitleContainer } = props;\n if (title) {\n return (\n \n \n {title.titlePrefix}\n {title.titleText}\n \n \n );\n }\n return null;\n};\n\nconst renderTitleCount = (props: ITitleViewProps): JSX.Element | null => {\n const { title, TitleContainer } = props;\n if (title) {\n return (\n \n {title.titleCount} \n \n );\n }\n return null;\n};\n\nexport default SearchResultContainerView;\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 * Represents state of the expand button.\n */\nexport class ExpandButtonState {\n @observable public extraProductsCount: number;\n\n public constructor(extraProductsCount: number) {\n this.extraProductsCount = extraProductsCount;\n }\n}\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 * Represents state of the sales line product.\n */\nexport class SalesLineState {\n @observable public isHidden?: boolean;\n\n public stateId: string;\n\n public constructor(stateId: string, isHidden?: boolean) {\n this.stateId = stateId;\n this.isHidden = isHidden;\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 { ProductRefinerSource, ProductRefinerValue, RefinerType } 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';\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\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 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 ): 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 {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 { OrderDetailsProduct } from '@msdyn365-commerce/components';\nimport { IActionContext, IGridSettings, IImageSettings } from '@msdyn365-commerce/core';\nimport {\n ChannelDeliveryOptionConfiguration,\n OrderShipments,\n ProductCatalog,\n ProductDeliveryOptions,\n SalesLine,\n SalesOrder,\n Shipment,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport { ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\n\nimport { getSalesLine, ISalesLine, ISalesLineResources } from './get-sales-line';\nimport { SalesLineState } from './sales-line-state';\nimport { IModuleComponentProps, IPriceContext } from './utilities';\n\nexport interface IGetSalesLinesInput {\n moduleName: string;\n moduleComponentProps: IModuleComponentProps;\n isCurrentChannel: boolean;\n\n salesLines: SalesLine[];\n products: SimpleProduct[];\n shipments?: Shipment[];\n priceContext: IPriceContext;\n resources: ISalesLineResources;\n actionContext: IActionContext;\n gridSettings: IGridSettings;\n imageSettings?: IImageSettings;\n imageOnly?: boolean;\n salesLineStates?: SalesLineState[];\n showCompleteAddress?: boolean;\n showTimeslot: boolean;\n telemetryContent?: ITelemetryContent;\n retailMultiplePickUpOptionEnabled?: boolean;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n productDeliveryOptions?: ProductDeliveryOptions[];\n isSelectionModeEnabled?: boolean;\n orderDetailsProducts?: OrderDetailsProduct[];\n isReorderingEnabled?: boolean;\n isChannelMultipleCatalogsFeatureEnabled?: boolean;\n catalogs?: ProductCatalog[];\n}\n\nexport const getSalesLines = ({\n moduleName,\n moduleComponentProps,\n salesLines,\n products,\n shipments,\n resources,\n isCurrentChannel,\n imageOnly,\n showCompleteAddress,\n showTimeslot,\n telemetryContent,\n retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig,\n productDeliveryOptions,\n isSelectionModeEnabled,\n orderDetailsProducts,\n isReorderingEnabled,\n salesLineStates: productStates,\n isChannelMultipleCatalogsFeatureEnabled,\n catalogs\n}: IGetSalesLinesInput): ISalesLine[] => {\n return salesLines.map((salesLine, index) => {\n const product = products.find(simpleProduct => simpleProduct.RecordId === salesLine.ProductId);\n const shipment =\n product &&\n shipments?.find(currentShipment =>\n currentShipment.ShipmentLines?.find(\n shipmentLine =>\n shipmentLine.ItemId === product.ItemId && shipmentLine.InventoryTransactionId === salesLine.InventoryTransactionId\n )\n );\n const orderDetailsProduct = isSelectionModeEnabled\n ? product && orderDetailsProducts?.find(currentProduct => currentProduct.salesLine.ProductId === product.RecordId)\n : undefined;\n const productState = productStates?.find(value => value.stateId === `${salesLine.LineId ?? ''}-${index}`);\n\n return getSalesLine({\n moduleName,\n moduleComponentProps,\n product,\n shipment,\n salesLine,\n isCurrentChannel,\n resources,\n imageOnly,\n showCompleteAddress,\n showTimeslot,\n telemetryContent,\n retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig,\n productDeliveryOptions,\n isSelectionModeEnabled,\n orderDetailsProduct,\n isReorderingEnabled,\n salesLineState: productState,\n isChannelMultipleCatalogsFeatureEnabled,\n catalogs\n });\n });\n};\n\ninterface IProps extends IModuleComponentProps {\n resources: ISalesLineResources;\n}\n\nexport const getSalesLinesInput = (\n props: IProps,\n moduleName: string,\n order: SalesOrder | OrderShipments,\n products: SimpleProduct[],\n priceContext: IPriceContext,\n showCompleteAddress?: boolean,\n showTimeslot?: boolean,\n telemetryContent?: ITelemetryContent,\n retailMultiplePickUpOptionEnabled?: boolean,\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration,\n productDeliveryOptions?: ProductDeliveryOptions[] | undefined,\n isSelectionModeEnabled?: boolean | undefined,\n orderDetailsProducts?: OrderDetailsProduct[] | undefined,\n isReorderingEnabled?: boolean,\n isChannelMultipleCatalogsFeatureEnabled?: boolean,\n catalogs?: ProductCatalog[]\n): IGetSalesLinesInput | undefined => {\n if (!order || !order.SalesLines || order.SalesLines.length === 0) {\n return;\n }\n\n const {\n resources,\n config: { imageSettings },\n context: {\n actionContext,\n request: {\n gridSettings,\n apiSettings: { channelId }\n }\n }\n } = props;\n\n const isCurrentChannel = !order.ChannelId || order.ChannelId === channelId;\n\n return {\n moduleName,\n moduleComponentProps: props,\n isCurrentChannel,\n salesLines: order.SalesLines,\n products,\n shipments: order.Shipments,\n priceContext,\n resources,\n actionContext,\n gridSettings: gridSettings!,\n imageSettings,\n showCompleteAddress,\n showTimeslot: showTimeslot ?? false,\n telemetryContent,\n retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig,\n productDeliveryOptions,\n isSelectionModeEnabled: isSelectionModeEnabled ?? false,\n orderDetailsProducts,\n isReorderingEnabled,\n isChannelMultipleCatalogsFeatureEnabled,\n catalogs\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { getUrlSync, IActionContext } from '@msdyn365-commerce/core';\nimport {\n ChannelDeliveryOptionConfiguration,\n ChannelIdentity,\n Customer,\n format,\n OrderOriginator,\n OrderShipments,\n OrgUnitLocation,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport { ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n Button,\n getPayloadObject,\n getTelemetryAttributes,\n INodeProps,\n ITelemetryContent,\n TelemetryConstant\n} from '@msdyn365-commerce-modules/utilities';\nimport { Observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { ExpandButtonState, SalesLineState } from '../../../common';\nimport { getGroups, IGroups } from '../../../common/get-groups';\nimport { getOrderInformation, getOrderInformationInput, IOrderInformation } from '../../../common/get-order-information';\nimport { ISalesLine } from '../../../common/get-sales-line';\nimport { getSalesLines, getSalesLinesInput, IGetSalesLinesInput } from '../../../common/get-sales-lines';\nimport { IOrderHistoryData } from '../order-history.data';\nimport { IOrderHistoryProps } from '../order-history.props.autogenerated';\n\nexport interface ISalesOrderProps extends IOrderHistoryProps {\n salesOrder: OrderShipments;\n products: SimpleProduct[];\n channelIdentities?: ChannelIdentity[];\n orgUnitLocations?: OrgUnitLocation[];\n customer?: Customer;\n originator?: OrderOriginator;\n showChannelInfo?: boolean;\n telemetryContent?: ITelemetryContent;\n retailMultiplePickUpOptionEnabled?: boolean;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n salesLinesLimit?: number;\n}\n\nexport interface ISalesOrder {\n salesOrderProps: INodeProps;\n orderInfomation: IOrderInformation;\n groups?: IGroups;\n orderDetailsLink: React.ReactNode;\n expandProductsButton?: React.ReactNode;\n}\n\n/**\n * Retrieves the url for order details page.\n * @param actionContext - Core action context.\n * @param salesOrder - Order information.\n * @returns Url to order details.\n */\nexport const getOrderDetailsPageUrl = (actionContext: IActionContext, salesOrder: OrderShipments): string => {\n const orderDetailsUrl = getUrlSync('orderDetails', actionContext) || '';\n const separator = orderDetailsUrl.includes('?') ? '&' : '?';\n if (salesOrder.SalesId) {\n // Redirect with sales order sales id\n return `${orderDetailsUrl}${separator}salesId=${salesOrder.SalesId}`;\n }\n\n // Redirect with sales order transaction id\n return `${orderDetailsUrl}${separator}transactionId=${salesOrder.TransactionId!}`;\n};\n\n/**\n * Updates product states to show all products.\n * @param expandButtonState - Expand button state.\n * @param productStates - Product states.\n * @returns Callback method.\n */\nconst onExpandProductsCallback = (expandButtonState: ExpandButtonState, productStates: SalesLineState[]) => () => {\n for (const productState of productStates) {\n productState.isHidden = false;\n }\n expandButtonState.extraProductsCount = 0;\n};\n\nexport const getSalesOrder = (input: ISalesOrderProps): ISalesOrder => {\n const {\n id,\n typeName,\n context,\n telemetry,\n products,\n salesOrder,\n showChannelInfo,\n channelIdentities,\n orgUnitLocations,\n customer,\n originator,\n telemetryContent,\n resources: { freePriceText, detailsAriaLabel, detailsLabel, orderItemLabel, orderItemsLabel },\n context: { actionContext },\n retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig\n } = input;\n\n const moduleName = 'ms-order-history';\n\n const priceContext = {\n id,\n typeName,\n context,\n telemetry,\n freePriceText\n };\n\n const salesOrderProps = { className: 'ms-order-history__sales-order', key: salesOrder.SalesId || salesOrder.TransactionId };\n\n const orderInfomationInput = getOrderInformationInput(\n input,\n moduleName,\n salesOrder,\n priceContext,\n channelIdentities,\n orgUnitLocations,\n customer,\n originator,\n showChannelInfo\n );\n\n const orderInfomation = getOrderInformation(orderInfomationInput);\n\n const salesLinesInput =\n products &&\n getSalesLinesInput(\n input,\n moduleName,\n salesOrder,\n products,\n priceContext,\n undefined,\n undefined,\n undefined,\n retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig\n );\n\n let salesLines: ISalesLine[] | undefined;\n let expandProductsButton: React.ReactNode;\n if (salesLinesInput) {\n const getSalesLinesInputProps: IGetSalesLinesInput = { ...salesLinesInput, imageOnly: true };\n if (!ObjectExtensions.isNullOrUndefined(input.salesLinesLimit)) {\n const extraProductsCount = getSalesLinesInputProps.salesLines.length - input.salesLinesLimit;\n getSalesLinesInputProps.salesLineStates = getSalesLinesInputProps.salesLines.map(\n (salesLine, index) => new SalesLineState(`${salesLine.LineId ?? ''}-${index}`, index >= input.salesLinesLimit!)\n );\n if (extraProductsCount > 0) {\n const expandButtonState = new ExpandButtonState(extraProductsCount);\n expandProductsButton = (\n <>\n \n {() => {\n const text = format(\n input.resources.orderHistoryExpandProductsButtonText,\n expandButtonState.extraProductsCount\n );\n return (\n expandButtonState.extraProductsCount > 0 && (\n \n {text}\n \n )\n );\n }}\n \n \n );\n }\n }\n salesLines = getSalesLines(getSalesLinesInputProps);\n }\n\n expandProductsButton = (\n <>\n {expandProductsButton}\n
\n \n );\n\n const payLoad = getPayloadObject('click', telemetryContent!, TelemetryConstant.OrderDetails);\n const orderDetailsAttributes = getTelemetryAttributes(telemetryContent!, payLoad);\n\n const groups =\n salesLines &&\n getGroups({\n moduleName,\n salesLines,\n resources: { orderItemLabel, orderItemsLabel },\n retailMultiplePickUpOptionEnabled\n });\n\n const orderDetailsLink = (\n \n {detailsLabel}\n \n );\n\n return {\n salesOrderProps,\n orderInfomation,\n groups,\n orderDetailsLink,\n expandProductsButton\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport listPageStateAction, { ListPageState, ListPageStateInput } from './modules/search-result-container/list-page-state';\nimport SearchResultContainerModule from './modules/search-result-container/search-result-container';\nimport SearchResultContainerView from './modules/search-result-container/search-result-container.view';\n\nexport * from './modules/search-result-container/components';\nexport * from './modules/search-result-container/list-page-state';\nexport * from './modules/search-result-container/search-result-container';\nexport * from './modules/search-result-container/search-result-container.data';\nexport * from './modules/search-result-container/search-result-container.props.autogenerated';\nexport * from './modules/search-result-container/search-result-container.view';\n\nexport { ListPageState, listPageStateAction, ListPageStateInput, SearchResultContainerModule, SearchResultContainerView };\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nexport * from './choice-summary';\nexport * from './choice-summary.props';\nexport * from './error-message';\nexport * from './feature-search-result-item';\nexport * from './link';\nexport * from './modal';\nexport * from './product-search-result-items';\nexport * from './range-refine-item';\nexport * from './refine-item';\nexport * from './refine-item.props.common';\nexport * from './refine-item-toggle-notification';\nexport * from './refine-submenu';\nexport * from './separator';\nexport * from './title';\nexport * from './utilities';\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","/**\r\n * Copyright (c) Microsoft Corporation\r\n * All rights reserved. See License.txt in the project root for license information.\r\n * ICittaSearchResultContainer contentModule Interface Properties\r\n * THIS FILE IS AUTO-GENERATED - MANUAL MODIFICATIONS WILL BE LOST\r\n */\r\n\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\n\r\nexport const enum expandRefinersCount {\r\n all = 'all',\r\n one = 'one',\r\n two = 'two',\r\n three = 'three',\r\n four = 'four'\r\n}\r\n\r\nexport const enum expandedMenusOnLoad {\r\n none = 'none',\r\n first = 'first',\r\n all = 'all'\r\n}\r\n\r\nexport interface ICittaSearchResultContainerConfig extends Msdyn365.IModuleConfig {\r\n itemsPerPage?: number;\r\n allowBackNavigation?: boolean;\r\n imageSettings?: Msdyn365.IImageSettings;\r\n className?: string;\r\n expandRefinersCount?: expandRefinersCount;\r\n disableHierarchy?: boolean;\r\n includeAttributes?: boolean;\r\n enableAffiliationBasedPricing?: boolean;\r\n expandedMenusOnLoad?: expandedMenusOnLoad;\r\n refinersToBeHidden?: string;\r\n refinersToBeUpdated?: string;\r\n tagsToIgnore?: string;\r\n salesLineTagKey?: string;\r\n}\r\n\r\nexport interface ICittaSearchResultContainerResources {\r\n noResultsForRefinersText: string;\r\n resultCategoryNotFoundText: string;\r\n resultSearchNotFoundText: string;\r\n paginationAriaLabel: string;\r\n priceFree: string;\r\n originalPriceText: string;\r\n currentPriceText: string;\r\n ratingAriaLabel: string;\r\n flipperNext: string;\r\n flipperPrevious: string;\r\n searchTextPrefix: string;\r\n numberOfProducts: string;\r\n oneProduct: string;\r\n categoryLinkAriaLabel: string;\r\n sortByDropdownLabel: string;\r\n sortByOptionNameAsc: string;\r\n sortByOptionNameDesc: string;\r\n sortByOptionPriceAsc: string;\r\n sortByOptionPriceDesc: string;\r\n sortByOptionRatingDesc: string;\r\n sortByOptionRelevanceDesc: string;\r\n placeholderTextMax: string;\r\n minLabel: string;\r\n maxLabel: string;\r\n rangeNameFormat: string;\r\n validationErrorNotNumber: string;\r\n validationErrorNotRange: string;\r\n clearAllText: string;\r\n choiceSummaryLabel: string;\r\n choiceFormat: string;\r\n choiceRangeValueFormat: string;\r\n choiceAriaLabel: string;\r\n modalTitle: string;\r\n modalCloseButtonText: string;\r\n minValueSliderThumbAriaLabel: string;\r\n maxValueSliderThumbAriaLabel: string;\r\n featureSimilarLooksTitle: string;\r\n}\r\n\r\nexport interface ICittaSearchResultContainerProps extends Msdyn365.IModule {\r\n resources: ICittaSearchResultContainerResources;\r\n config: ICittaSearchResultContainerConfig;\r\n}\r\n"," /*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\nimport {ArrayExtensions, getCustomer, GetCustomerInput } from '@msdyn365-commerce-modules/retail-actions';\r\nimport { getTelemetryObject, ILabeledDropdownOnChangeNotification, ILabeledDropdownOption, IModuleProps, INodeProps, ITelemetryContent, LabeledDropdown, UncontrolledPagination } from '@msdyn365-commerce-modules/utilities';\r\nimport { CategoryHierarchy as CategoryHierarchyData, IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\r\nimport MsDyn365 from '@msdyn365-commerce/core';\r\nimport { format, ProductPrice,ProductRefinerValue, ProjectionDomain, SortColumn, TextValueTranslation } from '@msdyn365-commerce/retail-proxy';\r\nimport {\r\n getActivePricesAsync\r\n} from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductsDataActions.g';\r\nimport { AffiliationLoyaltyTier, CustomerAffiliation } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\r\nimport classnames from 'classnames';\r\nimport { computed, observable, reaction, transaction } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\nimport { buildListPageUrl, getCollectionProducts, getCurrentUrl, GetFullProductsByCollectionInput, parseQueryParam, sortOptions } from './actions';\r\nimport { ICittaSearchResultContainerData } from './citta-search-result-container.data';\r\nimport { expandRefinersCount, ICittaSearchResultContainerProps } from './citta-search-result-container.props.autogenerated';\r\nimport {\r\n ErrorMessage, FeatureSearchResultItem, getUpdatedRefinementCriteria, IChoiceSummaryClickNotification,\r\n IRefineItemCommonProps, IRefineItemToggleNotification, ISearchResultModalViewProps, isMatchingRefinementCriterion,Link, ModalToggle, ProductSearchResultItems, SearchResultModal, Separator, Title\r\n} from './components';\r\nimport ChoiceSummary from './components/choice-summary';\r\nimport RefineSubmenu from './components/refine-submenu';\r\n\r\nexport interface ISearchResultContainerViewProps extends ICittaSearchResultContainerProps {\r\n products?: React.ReactNode;\r\n className?: string;\r\n SearchResultContainer: IModuleProps;\r\n TitleViewProps: ITitleViewProps;\r\n categoryHierarchy: ICategoryHierarchyViewProps;\r\n pagination?: React.ReactNode;\r\n ProductsContainer: INodeProps;\r\n ProductSectionContainer: INodeProps;\r\n refineMenu: IRefineMenuViewProps;\r\n sortByOptions: ISortByViewProps;\r\n choiceSummary?: React.ReactNode;\r\n modalToggle: React.ReactNode;\r\n isMobile: boolean;\r\n CategoryNavContainer: INodeProps;\r\n RefineAndProductSectionContainer: INodeProps;\r\n errorMessage: React.ReactNode;\r\n FeatureSearchContainer: INodeProps;\r\n similarLookProduct?: React.ReactNode;\r\n productPrices?: ProductPrice[];\r\n toggleModal: Function;\r\n}\r\n\r\nexport interface ITitleViewProps {\r\n TitleContainer: INodeProps;\r\n title:ISearchResultTitle;\r\n}\r\n\r\nexport interface IRefineMenuViewProps {\r\n RefineMenuContainer: INodeProps;\r\n RefinerSectionContainer: INodeProps;\r\n refiners?: React.ReactNode[];\r\n}\r\n\r\nexport interface ICategoryHierarchyViewProps {\r\n categoryHierarchyList?: React.ReactNode[];\r\n categoryHierarchySeparator?: React.ReactNode;\r\n CategoryHierarchyContainer: INodeProps;\r\n}\r\n\r\nexport interface ISortByViewProps {\r\n SortingContainer: INodeProps;\r\n sortByDropDown?:React.ReactNode;\r\n}\r\n\r\nexport type GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n\r\n/**\r\n * Title component for search result container\r\n */\r\nexport interface ISearchResultTitle {\r\n titlePrefix?: React.ReactNode;\r\n titleText?: React.ReactNode;\r\n titleCount?: React.ReactNode;\r\n}\r\n\r\nexport interface ISearchResultContainerState {\r\n sortingState: ISortByCollectionState;\r\n modalIsOpen: boolean;\r\n}\r\n\r\ninterface ISortByCollectionState {\r\n selectedSortByOption: ILabeledDropdownOption;\r\n pending: boolean;\r\n}\r\n\r\n/**\r\n *\r\n * SearchResultContainer component\r\n * @extends {React.PureComponent>}\r\n */\r\n@observer\r\nexport default class SearchResultContainer extends React.PureComponent, ISearchResultContainerState> {\r\n\r\n @computed get isMobile(): boolean {\r\n return (this._viewport === 'xs' || this._viewport === 'sm');\r\n }\r\n\r\n private sortByDropdownOptions: ILabeledDropdownOption[] = [\r\n { key: sortOptions.sortByOptionRelevanceDesc, value: this.props.resources.sortByOptionRelevanceDesc },\r\n { key: sortOptions.sortByOptionNameAsc, value: this.props.resources.sortByOptionNameAsc },\r\n { key: sortOptions.sortByOptionNameDesc, value: this.props.resources.sortByOptionNameDesc },\r\n { key: sortOptions.sortByOptionPriceAsc, value: this.props.resources.sortByOptionPriceAsc },\r\n { key: sortOptions.sortByOptionPriceDesc, value: this.props.resources.sortByOptionPriceDesc },\r\n { key: sortOptions.sortByOptionRatingDesc, value: this.props.resources.sortByOptionRatingDesc },\r\n ];\r\n private _refineItemCommonProps: IRefineItemCommonProps;\r\n private _pageType: string | undefined = this.props.context.request.urlTokens.pageType;\r\n @observable\r\n private _viewport: GridSize;\r\n\r\n private _modalToggleRef: React.RefObject;\r\n private _sortAndFilterContainerRef: React.RefObject;\r\n private expandrefinerCount: number | undefined = 0;\r\n private telemetryContent: ITelemetryContent;\r\n private productPrices: ProductPrice[];\r\n\r\n public static getFriendlyName(locale: string, nameTranslations?: TextValueTranslation[]): string | undefined {\r\n let nameTranslation: TextValueTranslation | undefined;\r\n if (locale && nameTranslations && nameTranslations.length > 0) {\r\n nameTranslation = nameTranslations.find(item => item.Language!.toLowerCase() === locale.toLowerCase());\r\n }\r\n\r\n return nameTranslation && nameTranslation.Text;\r\n }\r\n\r\n constructor(props: ICittaSearchResultContainerProps, state: ISearchResultContainerState) {\r\n super(props);\r\n this._viewport = props.context.request && props.context.request.device && props.context.request.device.Type === 'Mobile' ? 'xs' : 'lg';\r\n this._modalToggleRef = React.createRef();\r\n this._sortAndFilterContainerRef = React.createRef();\r\n this._toggleModal = this._toggleModal.bind(this);\r\n this._updateViewport = this._updateViewport.bind(this);\r\n this.productPrices=[];\r\n this.state = {\r\n sortingState: {\r\n pending: false,\r\n selectedSortByOption: this.sortByDropdownOptions[0]\r\n },\r\n modalIsOpen: false,\r\n };\r\n const {\r\n placeholderTextMax,\r\n minLabel,\r\n maxLabel,\r\n rangeNameFormat\r\n } = this.props.resources;\r\n\r\n const locale = this.props.context.request.locale;\r\n const telemetry = this.props.telemetry;\r\n const validationErrorNaN = this.props.resources.validationErrorNotNumber;\r\n const validationErrorRange = this.props.resources.validationErrorNotRange;\r\n this._refineItemCommonProps = {\r\n telemetry,\r\n locale,\r\n placeholderTextMax,\r\n minLabel,\r\n maxLabel,\r\n rangeNameFormat,\r\n validationErrorNaN,\r\n validationErrorRange\r\n };\r\n this.telemetryContent = getTelemetryObject(this.props.context.request.telemetryPageName!,\r\n this.props.friendlyName,\r\n this.props.telemetry);\r\n\r\n // Initalization of list page\r\n this.props.data.products.then((products) => {\r\n this.props.data.listPageState.then((listPageState) => {\r\n if (this._pageType === 'Category') {\r\n listPageState.pageType = 'Category';\r\n } else {\r\n listPageState.pageType = 'Search';\r\n }\r\n\r\n let querySorting: SortColumn[] = [];\r\n\r\n if (this.props.context.request.query && this.props.context.request.query.sorting) {\r\n querySorting = JSON.parse(decodeURIComponent(this.props.context.request.query.sorting)) as SortColumn[];\r\n }\r\n\r\n listPageState.currentPageNumber = this.props.context.request.query && (+this.props.context.request.query.skip / (this.props.config.itemsPerPage || 10)) || 0;\r\n listPageState.sortingCritera = { Columns: querySorting };\r\n listPageState.pageSize = this.props.config.itemsPerPage || 10;\r\n listPageState.activeProducts = products.products;\r\n listPageState.totalProductCount = products.count;\r\n // Initialize reaction based on listPageState properties\r\n reaction(\r\n () => {\r\n return [listPageState.activeFilters && listPageState.activeFilters.length, listPageState.currentPageNumber, listPageState.sortingCritera && listPageState.sortingCritera.Columns && listPageState.sortingCritera.Columns.length];\r\n },\r\n () => {\r\n const input = new GetFullProductsByCollectionInput(\r\n listPageState.pageType,\r\n this.props.context.request.apiSettings,\r\n { Paging: { Top: this.props.config.itemsPerPage, Skip: Math.max((listPageState.pageSize * (listPageState.currentPageNumber || 0)), 0) }, count: true, Sorting: listPageState.sortingCritera || {} },\r\n listPageState.activeFilters || [],\r\n +(this.props.context.request.urlTokens.itemId || 0),\r\n this.props.context.request.query && this.props.context.request.query.q ? this.props.context.request.query.q : this.props.context.request.query?.productId,\r\n this.props && this.props.config && this.props.config.includeAttributes !== undefined && this.props.config.includeAttributes === true ? true : false,\r\n this.props.context.request.locale\r\n );\r\n getCollectionProducts(input, this.props.context.actionContext).then(productResults => {\r\n listPageState.activeProducts = productResults.products;\r\n listPageState.totalProductCount = productResults.count;\r\n this._getActivePrice().catch(ex=> {throw ex;});\r\n });\r\n }\r\n );\r\n\r\n });\r\n });\r\n\r\n if (this.props.context.request.query?.productId) {\r\n this.props.data.featureProduct.then((products) => {\r\n this.props.data.listPageState.then((listPageStateFeature) => {\r\n listPageStateFeature.featureProduct = products;\r\n\r\n });\r\n });\r\n }\r\n this._updateViewport();\r\n }\r\n\r\n public componentDidMount(): void {\r\n if (MsDyn365.isBrowser && window.addEventListener) {\r\n window.addEventListener('resize', this._updateViewport);\r\n this._updateViewport();\r\n }\r\n if (this.props.config.enableAffiliationBasedPricing &&\r\n this.props.context.actionContext.requestContext?.user?.isAuthenticated) {\r\n // tslint:disable-next-line:no-floating-promises\r\n this._getActivePrice();\r\n }\r\n }\r\n public componentWillUnmount(): void {\r\n if (MsDyn365.isBrowser && window.removeEventListener) {\r\n window.removeEventListener('resize', this._updateViewport);\r\n }\r\n }\r\n\r\n public render(): JSX.Element {\r\n const { imageSettings, className, allowBackNavigation } = this.props.config;\r\n const { resources } = this.props;\r\n const products = (this.props.data.listPageState.result && this.props.data.listPageState.result.activeProducts) || [];\r\n const searchProduct = (this.props.data.listPageState.result && this.props.data.listPageState.result.featureProduct) || null;\r\n let errorText = '';\r\n const breaCrumbType = this.props.context.app.config.breadcrumbType;\r\n const allowBack = allowBackNavigation && (breaCrumbType === 'back' || breaCrumbType === 'categoryAndBack');\r\n if(!products || products.length === 0) {\r\n errorText = this._pageType === 'Category'? resources.resultCategoryNotFoundText : resources.resultSearchNotFoundText;\r\n\r\n }\r\n const productsComponent = (\r\n => {\r\n let products = (this.props.data.listPageState.result && this.props.data.listPageState.result.activeProducts) || [];\r\n const productRecIds = ArrayExtensions.hasElements(products) ? products.map(prod => prod.RecordId) : [];\r\n const projectDomain: ProjectionDomain = { ChannelId: this.props.context.request.apiSettings.channelId, CatalogId: this.props.context.request.apiSettings.catalogId };\r\n const affliations: AffiliationLoyaltyTier[] = [];\r\n const customerInput = new GetCustomerInput(this.props.context.actionContext.requestContext.apiSettings);\r\n const customer = await getCustomer(customerInput, this.props.context.actionContext);\r\n\r\n if (customer && customer.CustomerAffiliations) {\r\n customer.CustomerAffiliations.forEach((affliation: CustomerAffiliation) => {\r\n const aff: AffiliationLoyaltyTier = { AffiliationId: affliation.RetailAffiliationId, CustomerId: customer.AccountNumber };\r\n affliations.push(aff);\r\n });\r\n }\r\n \r\n await getActivePricesAsync(\r\n { callerContext: this.props.context.actionContext, queryResultSettings: {} },\r\n projectDomain,\r\n productRecIds,\r\n new Date(),\r\n null,\r\n affliations,\r\n true\r\n ).then((activePricesResponse:ProductPrice[]) => {\r\n this.productPrices = activePricesResponse;\r\n products = products.map(prod => {\r\n const activePrice = activePricesResponse.find(price => price.ProductId === prod.RecordId);\r\n if (activePrice) {\r\n prod.Price = activePrice.CustomerContextualPrice ?? prod.Price;\r\n prod.BasePrice = Math.max(activePrice.BasePrice || 0, activePrice.TradeAgreementPrice || 0, activePrice.AdjustedPrice || 0);\r\n }\r\n return prod;\r\n });\r\n this.props.data.listPageState.then((listPageState) => {\r\n listPageState.activeProducts = products;\r\n });\r\n }).catch((error: Error) => {\r\n this.props.context.actionContext.trace(error.message);\r\n this.props.context.actionContext.telemetry.exception(error);\r\n this.props.context.actionContext.telemetry.debug(`[get Affiliation based price on search result container ]Error executing action`);\r\n throw new Error('[get Affiliation based price on search result container]Error executing action');\r\n });\r\n }\r\n private _getSearchResultModal = (): ISearchResultModalViewProps => {\r\n const {resources} = this.props;\r\n return SearchResultModal(\r\n {\r\n resources:{\r\n modalCloseButtonText: resources.modalCloseButtonText,\r\n modalTitle: resources.modalTitle\r\n },\r\n className: \"tetete\",\r\n isOpen:this.state.modalIsOpen,\r\n returnRef: this._modalToggleRef,\r\n onModalToggle: this._toggleModal\r\n });\r\n }\r\n\r\n private _getCollectionTitle = (): ITitleViewProps => {\r\n const { data, context, resources } = this.props;\r\n\r\n let collectionTitle: string | undefined = '';\r\n if (context && context.request && context.request.query && context.request.query.q) {\r\n collectionTitle = `\"${context.request.query.q}\"`;\r\n } else {\r\n collectionTitle = (data.category.result && SearchResultContainer.getFriendlyName(context.request.locale, data.category.result.NameTranslations)) ||\r\n (data.category.result && data.category.result.Name);\r\n }\r\n let productCountText = '';\r\n let productCountNumber: number | undefined;\r\n if (data.listPageState && data.listPageState.result && data.listPageState.result.totalProductCount !== undefined) {\r\n productCountNumber = data.listPageState.result.totalProductCount;\r\n } else if (data.products && data.products.result) {\r\n productCountNumber = data.products.result.count;\r\n }\r\n\r\n if (productCountNumber && productCountNumber !== 0) {\r\n productCountText = productCountNumber !== 1 ? format(this.props.resources.numberOfProducts, productCountNumber) : this.props.resources.oneProduct;\r\n } else {\r\n productCountText = format(this.props.resources.numberOfProducts, 0);\r\n }\r\n const titlePrefix = {previousText} }\r\n nextText={{nextText}
}\r\n previousAriaLabel={previousText}\r\n nextAriaLabel={nextText}\r\n telemetryContent={this.telemetryContent}\r\n />);\r\n }\r\n\r\n private _getRefineMenu = (): IRefineMenuViewProps => {\r\n const { data, context, config } = this.props;\r\n const tempRangeTypeTODO = context.request.query && context.request.query.inputRange ? 'input' : 'slider';\r\n const validRefiners = data.refiners.result && data.refiners.result.filter(refiner => {\r\n return refiner.Values.length > 0;\r\n });\r\n\r\n const activeRefiners = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\r\n\r\n this._getexpandRefinerCount(validRefiners && validRefiners.length, config.expandRefinersCount);\r\n const expandedRefiners = this.expandrefinerCount;\r\n const subMenus = validRefiners && validRefiners.map((productRefinerHierarchy: IProductRefinerHierarchy, index: number) => {\r\n return (\r\n index ? true : false}\r\n tempRangeTypeTODO={tempRangeTypeTODO}\r\n context = {context}\r\n moduleId={this.props.id}\r\n moduleTypeName={this.props.typeName}\r\n telemetryContent={this.telemetryContent}\r\n />\r\n );\r\n });\r\n \r\n return {\r\n RefineMenuContainer:{className: 'ms-search-result-container__refine-menu' },\r\n RefinerSectionContainer:{className: 'ms-search-result-container__refiner-section'},\r\n refiners: subMenus\r\n };\r\n\r\n }\r\n\r\n private _getChoiceSummary = (): React.ReactNode => {\r\n const { resources, data, telemetry } = this.props;\r\n const selectedRefiners = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\r\n return (\r\n ('sorting', this.props.context.request) || [])[0];\r\n\r\n if (activeSortColumn && data.searchConfiguration.result) {\r\n const activeMappedConfig = data.searchConfiguration.result.find((mappedSearchConfig) => {\r\n return (mappedSearchConfig.sortColumn.ColumnName === activeSortColumn.ColumnName) &&\r\n (mappedSearchConfig.sortColumn.IsDescending === activeSortColumn.IsDescending);\r\n });\r\n if (activeMappedConfig) {\r\n return this.sortByDropdownOptions.find((dropdownOption) => dropdownOption.key === activeMappedConfig.key);\r\n }\r\n }\r\n\r\n return;\r\n }\r\n\r\n private _onUpdateRefiners = (itemToggleNotification: IRefineItemToggleNotification): void => {\r\n const { context } = this.props;\r\n const requestContext = context && context.request;\r\n const actionContext = context && context.actionContext;\r\n\r\n if (!requestContext || !actionContext || !this.props.data.listPageState.result) {\r\n const error = `Refine menu cannot refine search criteria: ${!requestContext ? 'requestContext ' : ''} ${!actionContext ? 'actionContext ' : ''} could not be found`;\r\n this.props.telemetry.warning(error);\r\n }\r\n\r\n const updatedRefinementCriteria = getUpdatedRefinementCriteria(itemToggleNotification, this.props.data.listPageState.result && this.props.data.listPageState.result.activeFilters || []);\r\n\r\n window.history.pushState({}, '', buildListPageUrl(getCurrentUrl(this.props.context.request), updatedRefinementCriteria));\r\n transaction(() => {\r\n this.props.data.listPageState.result!.currentPageNumber = 0;\r\n this.props.data.listPageState.result!.activeFilters = updatedRefinementCriteria;\r\n });\r\n }\r\n\r\n private _buildRefinerUrl = (itemToggleNotification: IRefineItemToggleNotification): string => {\r\n if (this.props.data.listPageState.result) {\r\n const newRefinementCriteria = getUpdatedRefinementCriteria(itemToggleNotification, this.props.data.listPageState.result.activeFilters || []);\r\n\r\n return buildListPageUrl(getCurrentUrl(this.props.context.request), newRefinementCriteria);\r\n } else {\r\n this.props.telemetry.warning(`[buildRefinerQueryString]List Page State Not available, unable to build refiner URL`);\r\n return '';\r\n }\r\n }\r\n\r\n private _onChoiceClicked = (notification: IChoiceSummaryClickNotification): void => {\r\n const { data, telemetry } = this.props;\r\n\r\n if (!data.listPageState.result) {\r\n telemetry.warning('[choice-summary-by-category._onChoiceClicked]ListPageState unavailable, unable to update refiners.');\r\n return;\r\n }\r\n\r\n let currentRefinementCriteria = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\r\n\r\n if (!notification.clearAll) {\r\n const selectedChoice = notification.choiceClicked;\r\n if (!selectedChoice) {\r\n telemetry.warning('[choice-summary-by-category._onChoiceClicked] Choice could not be determined');\r\n return;\r\n }\r\n currentRefinementCriteria = currentRefinementCriteria.filter(\r\n (selectedCriterion: ProductRefinerValue) => !isMatchingRefinementCriterion(selectedChoice, selectedCriterion)\r\n );\r\n } else {\r\n currentRefinementCriteria = [];\r\n\r\n // set focus to sort and filter\r\n const dropdownElementId = this._sortAndFilterContainerRef.current && this._sortAndFilterContainerRef.current.props.dropdownId;\r\n const dropdownElement = dropdownElementId && document.getElementById(dropdownElementId);\r\n setTimeout(() => {\r\n dropdownElement && dropdownElement.focus();\r\n },\r\n 50);\r\n }\r\n\r\n const fullUrl = getCurrentUrl(this.props.context.request);\r\n window.history.pushState({}, '', buildListPageUrl(fullUrl, currentRefinementCriteria));\r\n data.listPageState.result.currentPageNumber = 0;\r\n data.listPageState.result.activeFilters = currentRefinementCriteria;\r\n }\r\n\r\n private _buildRefinerUrlForChoiceSummary = (selectedRefiner: ProductRefinerValue, isClearAll: boolean): string => {\r\n const { data, telemetry } = this.props;\r\n const fullUrl = getCurrentUrl(this.props.context.request);\r\n\r\n if (!data.listPageState.result) {\r\n telemetry.warning('[choice-summary-by-category._buildRefinerUrl]ListPageState unavailable, unable to create refiner URL.');\r\n return fullUrl.href;\r\n }\r\n\r\n let currentRefinementCriteria = (data.listPageState.result && data.listPageState.result.activeFilters) || [];\r\n\r\n if (!isClearAll) {\r\n if (!selectedRefiner) {\r\n telemetry.warning('[choice-summary-by-category._buildRefinerUrl] URL for Choice could not be determined');\r\n return fullUrl.href;\r\n }\r\n currentRefinementCriteria = currentRefinementCriteria.filter(\r\n (selectedCriterion: ProductRefinerValue) => !isMatchingRefinementCriterion(selectedRefiner, selectedCriterion)\r\n );\r\n } else {\r\n currentRefinementCriteria = [];\r\n }\r\n\r\n return buildListPageUrl(fullUrl, currentRefinementCriteria);\r\n }\r\n\r\n private _getViewport(): GridSize {\r\n const { context } = this.props;\r\n\r\n // always render in mobile viewport on a mobile device\r\n if (context.request && context.request.device && context.request.device.Type === 'Mobile') {\r\n return 'xs';\r\n }\r\n\r\n if (MsDyn365.isBrowser && window.innerWidth) {\r\n const gridSettings = context.request.gridSettings;\r\n if (gridSettings) {\r\n if (gridSettings.xs && window.innerWidth <= gridSettings.xs.w) {\r\n return 'xs';\r\n } else if (gridSettings.sm && window.innerWidth <= gridSettings.sm.w) {\r\n return 'sm';\r\n } else if (gridSettings.md && window.innerWidth <= gridSettings.md.w) {\r\n return 'md';\r\n } else if (gridSettings.lg && window.innerWidth <= gridSettings.lg.w) {\r\n return 'lg';\r\n } else {\r\n return 'xl';\r\n }\r\n }\r\n }\r\n\r\n return 'lg';\r\n }\r\n\r\n private _toggleModal(): void {\r\n this.setState({\r\n modalIsOpen: !this.state.modalIsOpen\r\n });\r\n }\r\n\r\n private _updateViewport(): void {\r\n this._viewport = this._getViewport();\r\n\r\n if (this.state.modalIsOpen && !this.isMobile) {\r\n this._toggleModal();\r\n }\r\n }\r\n\r\n private _getexpandRefinerCount = (validRefiners?: number, refinerCount?: expandRefinersCount): void => {\r\n switch(refinerCount) {\r\n case expandRefinersCount.all:\r\n this.expandrefinerCount = validRefiners;\r\n break;\r\n case expandRefinersCount.one:\r\n this.expandrefinerCount = 1;\r\n break;\r\n case expandRefinersCount.two:\r\n this.expandrefinerCount = 2;\r\n break;\r\n case expandRefinersCount.three:\r\n this.expandrefinerCount = 3;\r\n break;\r\n case expandRefinersCount.four:\r\n this.expandrefinerCount = 4;\r\n break;\r\n default:\r\n this.expandrefinerCount = 0;\r\n }\r\n }\r\n\r\n}\r\n","import { getPayloadObject, getTelemetryAttributes, IPayLoad } from '@msdyn365-commerce-modules/utilities';\r\nimport { IProductRefinerHierarchy } from '@msdyn365-commerce/commerce-entities';\r\nimport { ProductRefinerValue } from '@msdyn365-commerce/retail-proxy';\r\nimport classnames from 'classnames';\r\nimport { get } from 'lodash';\r\nimport { computed } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\nimport { IChoiceSummaryProps } from './choice-summary.props';\r\nimport { isMatchingRefinementCriterion, isRangeType } from './utilities';\r\n\r\ninterface IRefinerMap {\r\n key: string;\r\n value: ProductRefinerValue;\r\n}\r\n\r\n /**\r\n * ChoiceSummary component\r\n */\r\n@observer\r\nexport default class ChoiceSummary extends React.Component {\r\n private closeButtonGlyph: string = 'msi-close-btn';\r\n private payLoad: IPayLoad;\r\n\r\n @computed get selectedRefinersMap(): IRefinerMap[] {\r\n const { selectedChoices } = this.props;\r\n return selectedChoices.map((selectedRefiner: ProductRefinerValue) => {\r\n return {\r\n key: this._getKeyForRefinerValue(selectedRefiner),\r\n value: selectedRefiner\r\n } as IRefinerMap;\r\n });\r\n }\r\n\r\n constructor(props: Readonly) {\r\n super(props);\r\n this.payLoad = getPayloadObject('click', this.props.telemetryContent!, '');\r\n }\r\n\r\n public render(): JSX.Element {\r\n const { clearAllText, label, classNames, choiceAriaLabel } = this.props;\r\n const items = this.selectedRefinersMap;\r\n this.payLoad.contentAction.etext = clearAllText;\r\n const clearAllAttributes = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\r\n return (\r\n \r\n {items.length > 0 && label &&
{label} }\r\n
\r\n {items.map((item: IRefinerMap, index: number) => {\r\n const listItemProps = {\r\n 'aria-posinset': index,\r\n 'aria-setsize': items.length\r\n };\r\n\r\n this.payLoad.contentAction.etext = item.key;\r\n const attribute = getTelemetryAttributes(this.props.telemetryContent!, this.payLoad);\r\n\r\n return (\r\n \r\n \r\n {item.key}\r\n \r\n );\r\n })}\r\n \r\n {items.length > 0 && clearAllText &&
{clearAllText} }\r\n
): void => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n const target = e.currentTarget as HTMLElement;\r\n const clearAll = target.getAttribute('class')!.indexOf('choice-summary__clear-all') > -1;\r\n const selectedRefiner = clearAll ? undefined : this._getSelectedRefinerChoice(target);\r\n\r\n if (this.props.onChoiceClicked) {\r\n this.props.onChoiceClicked({\r\n clearAll: clearAll,\r\n itemClicked: target,\r\n choiceClicked: selectedRefiner,\r\n nextItemToFocus: target.nextSibling as HTMLElement\r\n });\r\n }\r\n }\r\n\r\n private _getSelectedRefinerChoice(itemClicked: HTMLElement): ProductRefinerValue | undefined {\r\n const result = this.selectedRefinersMap.find(selected => (itemClicked.innerText && itemClicked.innerText.trim()) === selected.key);\r\n return (result && result.value) || undefined;\r\n }\r\n}\r\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IHelp, IOrderSummary, IPaymentMethods } from '../../common';\nimport { IGroup, IGroupDelivery, IGroups } from '../../common/get-groups';\nimport { IOrderInformation } from '../../common/get-order-information';\nimport { ISalesLine } from '../../common/get-sales-line';\nimport { IOrderDetailsViewProps } from './order-details';\n\nexport const OrderDetailsOrderInfomation: React.FC = ({\n orderInformationProps,\n salesId,\n receiptId,\n createdDate,\n count,\n amount,\n channelReferenceId,\n channelName,\n channelAddress\n}) => (\n \n {channelName}\n {channelAddress}\n {channelReferenceId}\n {salesId}\n {receiptId}\n {createdDate}\n {count}\n {amount}\n \n);\n\nexport const OrderDetailsSalesLine: React.FC = ({ salesLineProps, salesLine, buyAgainButton, errors }) => (\n \n {salesLine}\n {buyAgainButton}\n {errors}\n \n);\n\nexport const OrderDetailsGroupDelivery: React.FC = ({ deliveryProps, heading, count }) => (\n \n {heading}\n {count}\n \n);\n\nexport const OrderDetailsGroup: React.FC = ({\n groupProps,\n delivery,\n address,\n salesLinesProps,\n salesLines,\n isCashAndCarryTransaction\n}) => (\n \n {delivery && \n {salesLines.map(salesLine => (\n \n {salesLine.data.deliveryType === 'ship' && salesLine.data.shipment ? salesLine.trackingInfo : null}\n \n ))}\n \n )}\n {!delivery.showTimeslot && address}\n {delivery.showTimeslot && (\n \n {address}\n {delivery.pickupDateTimeslot}\n \n )}\n \n);\n\nexport const OrderDetailsGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group: IGroup, index: number) => (\n \n);\n\nexport const OrderDetailsOrderSummary: React.FC = ({\n orderSummaryProps,\n heading,\n subtotal,\n shipping,\n tax,\n totalAmount,\n earnedPoints\n}) => (\n \n {heading}\n {subtotal}\n {shipping}\n {tax}\n {totalAmount}\n {earnedPoints}\n \n);\n\nexport const OrderDetailsPayment: React.FC = ({ paymentMethodsProps, title, methods }) => (\n \n {title}\n {methods}\n \n);\n\nexport const OrderDetailsHelp: React.FC = ({ helpProps, needHelpLabel, helpLineNumberLabel, contactNumber }) => (\n \n {needHelpLabel}\n {helpLineNumberLabel}\n {contactNumber}\n \n);\n\nconst OrderDetailsView: React.FC = ({\n moduleProps,\n tableViewActions,\n viewModes,\n table,\n placedBy,\n heading,\n alert,\n loading,\n orderInfomation,\n orderSummary,\n payment,\n help,\n groups\n}) => {\n return (\n \n {placedBy}\n {heading}\n {alert}\n {loading}\n {orderInfomation && \n );\n};\n\nexport default OrderDetailsView;\n","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\n\r\n// @ts-ignore\r\nimport Address from '@msdyn365-commerce-modules/order-management/dist/lib/common/address';\r\n// @ts-ignore\r\nimport LabelComponent from '@msdyn365-commerce-modules/order-management/dist/lib/common/label';\r\n// @ts-ignore\r\nimport { defaultImageSettings, getDateTimeslot, getSalesStatusCode, getSalesStatusCode, IDeliveryType, IDeliveryType, IModuleComponentProps, IModuleComponentProps, ISalesStatusCode } from '@msdyn365-commerce-modules/order-management/dist/lib/common/utilities';\r\nimport { getFallbackImageUrl, getProductUrlSync } from '@msdyn365-commerce-modules/retail-actions';\r\nimport { Button, getPayloadObject, getTelemetryAttributes, INodeProps, ITelemetryContent, TelemetryConstant } from '@msdyn365-commerce-modules/utilities';\r\nimport { CartLineItemComponent } from '@msdyn365-commerce/components';\r\nimport { Image } from '@msdyn365-commerce/core';\r\nimport { SalesLine, Shipment, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\n\r\nexport type ISalesStatusStringMap = {\r\n [x in ISalesStatusCode]: string | undefined;\r\n};\r\n\r\nexport type IDeliveryTypeStringMap = {\r\n [x in IDeliveryType]: string | undefined;\r\n};\r\n\r\nexport interface ISalesLineResources {\r\n productDimensionTypeSize: string;\r\n productDimensionTypeColor: string;\r\n productDimensionTypeStyle: string;\r\n salesLineQuantityText: string;\r\n configString: string;\r\n shipToLabel: string;\r\n storeLabel: string;\r\n phoneLabel: string;\r\n phoneAriaLabel: string;\r\n buyItAgainAriaLabel: string;\r\n buyItAgainLabel: string;\r\n orderStatusReadyForPickup: string;\r\n orderStatusPickedUp: string;\r\n orderStatusShipped: string;\r\n orderStatusCanceled: string;\r\n orderStatusProcessing: string;\r\n pickedUpSalesLines: string;\r\n deliveredSalesLines: string;\r\n carryOutSalesLines: string;\r\n trackingLabel: string;\r\n trackingAriaLabel: string;\r\n trackingComingSoonLabel: string;\r\n discountStringText: string;\r\n orderStatusEmailed: string;\r\n emailSalesLines: string;\r\n pickupDateTimeslotText: string;\r\n pickupTimeslotPlaceHolder: string;\r\n shippingCharges?: string;\r\n}\r\n\r\nexport interface IGetSalesLineInput {\r\n moduleName: string;\r\n moduleComponentProps: IModuleComponentProps;\r\n product: SimpleProduct;\r\n shipment?: Shipment;\r\n salesLine: SalesLine;\r\n isCurrentChannel: boolean;\r\n resources: ISalesLineResources;\r\n imageOnly?: boolean;\r\n showCompleteAddress?: boolean;\r\n showTimeslot: boolean;\r\n telemetryContent?: ITelemetryContent;\r\n}\r\n\r\nexport interface ISalesLine {\r\n salesLineProps: INodeProps;\r\n salesLine: React.ReactNode;\r\n address?: React.ReactNode;\r\n buyAgainButton?: React.ReactNode;\r\n salesStatus: React.ReactNode;\r\n deliveryType: React.ReactNode;\r\n trackingInfo: React.ReactNode;\r\n pickupDateTimeslot: React.ReactNode;\r\n\r\n // row data\r\n data: {\r\n salesLine: SalesLine;\r\n product: SimpleProduct;\r\n shipment?: Shipment;\r\n deliveryType: IDeliveryType;\r\n productUrl: string;\r\n salesStatus: ISalesStatusCode;\r\n };\r\n}\r\n\r\n// tslint:disable-next-line:max-func-body-length cyclomatic-complexity\r\nexport const getSalesLine = ({\r\n moduleName,\r\n moduleComponentProps: {\r\n id,\r\n typeName,\r\n context,\r\n telemetry,\r\n config: { imageSettings, showShippingChargesForLineItems }\r\n },\r\n showCompleteAddress,\r\n product,\r\n shipment,\r\n salesLine,\r\n isCurrentChannel,\r\n imageOnly,\r\n showTimeslot,\r\n resources: {\r\n productDimensionTypeSize: sizeString,\r\n productDimensionTypeColor: colorString,\r\n productDimensionTypeStyle: styleString,\r\n salesLineQuantityText: quantityDisplayString,\r\n configString,\r\n shipToLabel,\r\n storeLabel,\r\n phoneLabel,\r\n phoneAriaLabel,\r\n buyItAgainLabel,\r\n buyItAgainAriaLabel,\r\n orderStatusReadyForPickup,\r\n orderStatusProcessing,\r\n orderStatusShipped,\r\n orderStatusPickedUp,\r\n orderStatusCanceled,\r\n orderStatusEmailed,\r\n pickedUpSalesLines,\r\n deliveredSalesLines,\r\n carryOutSalesLines,\r\n emailSalesLines,\r\n trackingLabel,\r\n trackingAriaLabel,\r\n trackingComingSoonLabel,\r\n discountStringText,\r\n pickupDateTimeslotText,\r\n pickupTimeslotPlaceHolder,\r\n shippingCharges\r\n },\r\n telemetryContent\r\n}: IGetSalesLineInput): ISalesLine => {\r\n const salesStatusStringMap: ISalesStatusStringMap = {\r\n canceled: orderStatusCanceled,\r\n readyForPickup: orderStatusReadyForPickup,\r\n pickedUp: orderStatusPickedUp,\r\n processing: orderStatusProcessing,\r\n shipped: orderStatusShipped,\r\n unknown: undefined,\r\n emailed: orderStatusEmailed\r\n };\r\n\r\n const deliveryTypeStringMap: IDeliveryTypeStringMap = {\r\n pickUp: pickedUpSalesLines,\r\n ship: deliveredSalesLines,\r\n carryOut: carryOutSalesLines,\r\n email: emailSalesLines\r\n };\r\n\r\n const gridSettings = context.request.gridSettings;\r\n const pickupDeliveryModeCode = context.request.channel && context.request.channel.PickupDeliveryModeCode;\r\n const emailDeliveryModeCode = context.request.channel && context.request.channel.EmailDeliveryModeCode;\r\n const productUrl = getProductUrlSync(product, context.actionContext, undefined);\r\n const deliveryType =\r\n !!pickupDeliveryModeCode && pickupDeliveryModeCode !== '' && pickupDeliveryModeCode === salesLine.DeliveryMode\r\n ? 'pickUp'\r\n : !!emailDeliveryModeCode && emailDeliveryModeCode !== '' && emailDeliveryModeCode === salesLine.DeliveryMode\r\n ? 'email'\r\n : !!salesLine.DeliveryMode\r\n ? 'ship'\r\n : 'carryOut';\r\n const salesStatus = getSalesStatusCode(deliveryType, salesLine.SalesStatusValue);\r\n const salesStatusString = salesStatusStringMap[salesStatus];\r\n const salesStatusComp = salesStatusString && \r\n {trackingLabel}\r\n {shipment ? (\r\n \r\n {shipment.TrackingNumber}\r\n \r\n ) : (\r\n <>{trackingComingSoonLabel}\r\n )}\r\n \r\n );\r\n const payLoad = getPayloadObject('click', telemetryContent!, TelemetryConstant.BuyItAgain);\r\n const buyItAgainAttributes = getTelemetryAttributes(telemetryContent!, payLoad);\r\n const fallbackImageUrl = getFallbackImageUrl(product.ItemId, context.actionContext.requestContext.apiSettings);\r\n\r\n const canShowTimeslot: boolean = showTimeslot\r\n && deliveryType === 'pickUp'\r\n && salesLine.PickupTimeslotStartDateTime !== undefined\r\n && salesLine.PickupTimeslotEndDateTime !== undefined;\r\n\r\n const pickupDateTimeslot = canShowTimeslot ? getDateTimeslot(pickupTimeslotPlaceHolder, salesLine.PickupTimeslotStartDateTime, salesLine.PickupTimeslotEndDateTime, context.request.locale) : '';\r\n const pickupDateTimeslotInfo = canShowTimeslot && (\r\n \r\n
{pickupDateTimeslotText}
\r\n
{pickupDateTimeslot}
\r\n
\r\n
\r\n ) : (\r\n \r\n {buyItAgainLabel}\r\n \r\n ),\r\n pickupDateTimeslot: pickupDateTimeslotInfo,\r\n };\r\n};\r\n","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\n// @ts-ignore\r\nimport { IModuleComponentProps, IPriceContext } from '@msdyn365-commerce-modules/order-management/dist/types/common/utilities';\r\nimport { ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\r\nimport { IActionContext, IGridSettings, IImageSettings } from '@msdyn365-commerce/core';\r\nimport { OrderShipments, SalesLine, SalesOrder, Shipment, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\r\nimport { getSalesLine, ISalesLine, ISalesLineResources } from './get-sales-line';\r\n\r\nexport interface IGetSalesLinesInput {\r\n moduleName: string;\r\n moduleComponentProps: IModuleComponentProps;\r\n isCurrentChannel: boolean;\r\n\r\n salesLines: SalesLine[];\r\n products: SimpleProduct[];\r\n shipments?: Shipment[];\r\n priceContext: IPriceContext;\r\n resources: ISalesLineResources;\r\n actionContext: IActionContext;\r\n gridSettings: IGridSettings;\r\n imageSettings?: IImageSettings;\r\n imageOnly?: boolean;\r\n showCompleteAddress?: boolean;\r\n showTimeslot: boolean;\r\n telemetryContent?: ITelemetryContent;\r\n}\r\n\r\nexport const getSalesLines = ({\r\n moduleName,\r\n moduleComponentProps,\r\n salesLines,\r\n products,\r\n shipments,\r\n resources,\r\n isCurrentChannel,\r\n imageOnly,\r\n showCompleteAddress,\r\n showTimeslot,\r\n telemetryContent\r\n}: IGetSalesLinesInput): ISalesLine[] => {\r\n return salesLines.map(salesLine => {\r\n const product = products.find(_product => _product.RecordId === salesLine.ProductId) || ({} as SimpleProduct);\r\n const shipment = shipments && shipments.find(_shipment => _shipment.ShipmentLines?.find(_shipmentLine => _shipmentLine.ItemId === product.ItemId));\r\n return getSalesLine({\r\n moduleName,\r\n moduleComponentProps,\r\n product,\r\n shipment,\r\n salesLine,\r\n isCurrentChannel,\r\n resources,\r\n imageOnly,\r\n showCompleteAddress,\r\n showTimeslot,\r\n telemetryContent\r\n });\r\n });\r\n};\r\n\r\ninterface IProps extends IModuleComponentProps {\r\n resources: ISalesLineResources;\r\n}\r\n\r\nexport const getSalesLinesInput = (\r\n props: IProps,\r\n moduleName: string,\r\n order: SalesOrder | OrderShipments,\r\n products: SimpleProduct[],\r\n priceContext: IPriceContext,\r\n showCompleteAddress?: boolean,\r\n showTimeslot?: boolean,\r\n telemetryContent?: ITelemetryContent\r\n): IGetSalesLinesInput | undefined => {\r\n if (!order || !order.SalesLines || !order.SalesLines.length) {\r\n return;\r\n }\r\n const {\r\n resources,\r\n config: { imageSettings },\r\n context: {\r\n actionContext,\r\n request: {\r\n gridSettings,\r\n apiSettings: { channelId }\r\n }\r\n }\r\n } = props;\r\n\r\n const isCurrentChannel = !order.ChannelId || order.ChannelId === channelId;\r\n\r\n return {\r\n moduleName,\r\n moduleComponentProps: props,\r\n isCurrentChannel,\r\n salesLines: order.SalesLines,\r\n products,\r\n shipments: order.Shipments,\r\n priceContext: priceContext,\r\n resources,\r\n actionContext: actionContext,\r\n gridSettings: gridSettings!,\r\n imageSettings: imageSettings,\r\n showCompleteAddress: showCompleteAddress,\r\n showTimeslot: showTimeslot || false,\r\n telemetryContent: telemetryContent\r\n };\r\n};\r\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 { 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 { isMatchingRefinementCriterion, isRangeType } from './utilities';\n\ninterface IRefinerMap {\n key: string;\n value: ProductRefinerValue;\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 return {\n key: this._getKeyForRefinerValue(selectedRefiner, index.toString()),\n value: selectedRefiner\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\n return (\n \n \n {item.value.LeftValueBoundString && item.value.LeftValueBoundLocalizedString === ''\n ? item.value.LeftValueBoundString\n : (item.value.LeftValueBoundLocalizedString ||\n item.value.LeftValueBoundLocalizedString === undefined) &&\n item.value.RefinerRecordId === 0\n ? item.key\n : item.value.LeftValueBoundString}\n \n );\n })}\n \n {items.length > 0 && clearAllText && (\n
\n {clearAllText}\n \n )}\n ): void => {\n e.preventDefault();\n e.stopPropagation();\n\n const target = e.currentTarget as HTMLElement;\n const clearAll = target.getAttribute('class')!.includes('choice-summary__clear-all');\n const selectedRefiner = clearAll ? undefined : this._getSelectedRefinerChoice(target);\n\n if (this.props.onChoiceClicked) {\n this.props.onChoiceClicked({\n clearAll,\n itemClicked: target,\n choiceClicked: selectedRefiner,\n nextItemToFocus: target.nextSibling as HTMLElement\n });\n }\n };\n\n private _getSelectedRefinerChoice(itemClicked: HTMLElement): ProductRefinerValue | undefined {\n const result = this.selectedRefinersMap.find(selected => itemClicked.id === selected.key);\n return (result && result.value) || undefined;\n }\n}\n","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\nimport {\r\n getGroups,\r\n IGroup,\r\n IGroupDelivery,\r\n IGroups,\r\n IHelp,\r\n IOrderConfirmationViewProps,\r\n IOrderInformation,\r\n IOrderSummary,\r\n IPaymentMethods,\r\n IPriceContext\r\n} from '@msdyn365-commerce-modules/order-management';\r\nimport * as MsDyn365 from '@msdyn365-commerce/core';\r\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\r\nimport { Address } from '@msdyn365-commerce/retail-proxy';\r\nimport * as React from 'react';\r\nimport { ISalesLine } from '../../../components/citta-order-management/get-sales-line';\r\nimport { getSalesLines, getSalesLinesInput } from '../../../components/citta-order-management/get-sales-lines';\r\nimport { IOrderConfirmationConfig, IOrderConfirmationProps as IOrderDetailsExtentionProps, IOrderConfirmationResources as IOrderConfirmationExtentionResources } from '../definition-extensions/order-confirmation.ext.props.autogenerated';\r\nimport ShippingAddress from './components/shipping-address';\r\nimport { IOrderChannelConfigurationData } from './order-channelConfig.data';\r\nimport CittaTelemetry from '../../../common/telemetry/citta-telemetry';\r\nimport { PriceComponent } from '@msdyn365-commerce/components';\r\nexport interface IOrderInformationExt extends IOrderInformation {\r\n processingLabelText?: string;\r\n orderIdLabelText?: string;\r\n}\r\n\r\n// private cittaTelemetry: CittaTelemetry = new CittaTelemetry(this.props.context.app.config.cittaInstrumentationKey);\r\n\r\nexport const OrderConfirmationOrderInfomation: React.FC = ({\r\n orderInformationProps,\r\n salesId,\r\n createdDate,\r\n count,\r\n amount,\r\n channelReferenceId,\r\n channelName,\r\n channelAddress,\r\n processingLabelText,\r\n orderIdLabelText\r\n}) => (\r\n \r\n {channelName}\r\n {channelAddress}\r\n {_renderProcessStatus(salesId, orderIdLabelText!, processingLabelText!)}\r\n {createdDate}\r\n {count}\r\n {amount}\r\n {channelReferenceId}\r\n \r\n);\r\n\r\nfunction _renderProcessStatus(salesId: React.ReactNode, orderIdLabelText: string, processingLabelText: string): React.ReactNode {\r\n return (\r\n \r\n {typeof salesId === 'string' ? (orderIdLabelText?.concat(' ', processingLabelText!)) : salesId}\r\n \r\n );\r\n}\r\n\r\nexport const OrderConfirmationSalesLine: React.FC = ({ salesLineProps, salesLine, buyAgainButton }) => (\r\n \r\n {salesLine}\r\n \r\n);\r\n\r\nexport const OrderConfirmationGroupDelivery: React.FC = ({ deliveryProps, heading, count, processing }) => (\r\n \r\n {heading}\r\n {count}\r\n \r\n);\r\n\r\nexport const OrderConfirmationGroup: React.FC = ({ groupProps, delivery, salesLinesProps, salesLines }) => (\r\n \r\n {delivery && \r\n {salesLines.map(salesLine => (\r\n // @ts-ignore\r\n \r\n )}\r\n \r\n);\r\n\r\nexport const OrderConfirmationGroups: React.FC = ({ groupsProps, groups }) => (\r\n \r\n {groups.map((group, index) => (\r\n \r\n);\r\n\r\nexport const OrderConfirmationOrderSummary: React.FC = ({ orderSummaryProps, heading, subtotal, shipping, tax, totalAmount, earnedPoints }) => (\r\n \r\n {heading}\r\n {subtotal}\r\n {shipping}\r\n {tax}\r\n {totalAmount}\r\n {earnedPoints}\r\n \r\n);\r\n\r\nexport const OrderConfirmationPayment: React.FC = ({ paymentMethodsProps, title, methods }) => (\r\n \r\n {title}\r\n {methods}\r\n \r\n);\r\n\r\nexport const OrderConfirmationHelp: React.FC = ({ helpProps, needHelpLabel, helpLineNumberLabel, contactNumber }) => (\r\n \r\n {needHelpLabel}\r\n {helpLineNumberLabel}\r\n {contactNumber}\r\n \r\n);\r\n\r\n\r\n// const createJsonObject = \r\n\r\n\r\nexport default class OrderConfirmationView extends React.PureComponent & IOrderConfirmationExtentionResources> {\r\n public async componentDidMount() {\r\n if (this.props.data.orderHydration.result) {\r\n const products = this.props.data.orderHydration.result!.products;\r\n const salesOrder = this.props.data.orderHydration.result!.salesOrder;\r\n const productIds = products.map(p => {return `&productIds=${p.RecordId}`});\r\n let response = await MsDyn365.commerceApiRequest(\r\n this.props.context.request,\r\n `CustomGetCategoryPaths${productIds.join('')}`,\r\n 'get'\r\n ) as any;\r\n\r\n let gaProducts: any[] = [];\r\n let quantity = 0;\r\n\r\n if (response.status === 200) {\r\n response.data.forEach((productCategories: any) => {\r\n let product = products.find(salesLine => salesLine.RecordId === productCategories.ProductId);\r\n let saleeLine = salesOrder.SalesLines && salesOrder.SalesLines.find(line => line.ProductId === productCategories.ProductId);\r\n\r\n let category = productCategories.CategoryPath && productCategories.CategoryPath.map((pC: any) => {\r\n if (pC.Segments[3]) {\r\n return pC.Segments[3].CategoryName;\r\n } \r\n else if (pC.Segments[2]) {\r\n return pC.Segments[2].CategoryName;\r\n } \r\n else if (pC.Segments[1]) {\r\n return pC.Segments[1].CategoryName;\r\n } \r\n else {\r\n return null;\r\n }\r\n });\r\n\r\n let price = product?.Price;\r\n\r\n if ((saleeLine?.TotalAmount && saleeLine?.Quantity)) {\r\n price = (saleeLine?.TotalAmount / saleeLine?.Quantity)\r\n }\r\n\r\n const productDimensions = product?.Dimensions && product?.Dimensions.map(pD => {\r\n return pD.DimensionValue?.Value || \"\";\r\n }).join(\" - \")\r\n\r\n gaProducts.push({\r\n \"id\": product?.RecordId,\r\n \"sku\": product?.ItemId,\r\n \"name\": product?.Name,\r\n \"quantity\": saleeLine?.Quantity,\r\n \"price\": price,\r\n \"category\": category.join(\", \"),\r\n \"variant\": productDimensions\r\n })\r\n\r\n quantity += (saleeLine?.Quantity || 0);\r\n }) \r\n\r\n let data = {\r\n \"event\": \"eec.purchase\",\r\n \"ecommerce\": {\r\n \"currencyCode\": salesOrder.CurrencyCode,\r\n \"purchase\": {\r\n \"products\": gaProducts,\r\n \"actionField\": {\r\n \"id\": salesOrder.ChannelReferenceId,\r\n \"shipping\": salesOrder.ChargeAmount,\r\n \"tax\": salesOrder.TaxAmount,\r\n \"revenue\": salesOrder.TotalAmount,\r\n \"affiliation\": 'Online Store'\r\n },\r\n \"totalQty\": quantity,\r\n \"orderSummary\": {\r\n \"subTotal\": salesOrder.SubtotalAmount,\r\n \"shipping\": salesOrder.ChargeAmount,\r\n \"tax\": salesOrder.TaxAmount,\r\n \"orderTotal\": salesOrder.TotalAmount,\r\n \"transactionId\": salesOrder.Id,\r\n \"confirmationId\": salesOrder.ChannelReferenceId\r\n }\r\n }\r\n }\r\n }\r\n \r\n // @ts-ignore\r\n if (dataLayer) {\r\n // @ts-ignore\r\n dataLayer.push(data)\r\n }\r\n // @ts-ignore\r\n if (ecommerce) {\r\n // @ts-ignore\r\n ecommerce = {\r\n \"purchase\": {\r\n \"products\": gaProducts,\r\n \"actionField\": {\r\n \"id\": salesOrder.ChannelReferenceId,\r\n \"shipping\": salesOrder.ChargeAmount,\r\n \"tax\": salesOrder.TaxAmount,\r\n \"revenue\": salesOrder.TotalAmount,\r\n \"affiliation\": 'Online Store'\r\n }\r\n }\r\n }\r\n }\r\n // @ts-ignore\r\n if (psdatalayer) {\r\n // @ts-ignore\r\n psdatalayer = {\r\n ecommerce: {\r\n purchase: {\r\n \"products\": gaProducts,\r\n \"actionField\": {\r\n \"id\": salesOrder.ChannelReferenceId,\r\n \"shipping\": salesOrder.ChargeAmount,\r\n \"tax\": salesOrder.TaxAmount,\r\n \"revenue\": salesOrder.TotalAmount,\r\n \"affiliation\": 'Online Store'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n \r\n\r\n }\r\n \r\n }\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n const props = this.props;\r\n\r\n try {\r\n let cittaTelemetry = new CittaTelemetry(props.context.app.config.cittaInstrumentationKey);\r\n cittaTelemetry.trace(createLogMessage('landed on order-confirmation page'));\r\n } catch {}\r\n const {moduleProps, heading, backToShoppingLink, alert,loading, orderInfomation, orderSummary, payment, config, resources } = props;\r\n console.log('orderSummary', orderSummary, orderInfomation)\r\n const priceContext = _getPriceContext(props);\r\n if (!props.data.orderHydration || ! props.data.orderHydration.result) {\r\n return (\r\n \r\n {loading}\r\n \r\n )\r\n }\r\n const salesLinesInput = getSalesLinesInput(props, 'ms-order-confirmation', props.data.orderHydration.result!.salesOrder, props.data.orderHydration.result!.products, priceContext);\r\n const salesLines = salesLinesInput && getSalesLines(salesLinesInput);\r\n const groups = salesLines ? getGroups({\r\n moduleName: 'ms-order-confirmation',\r\n salesLines,\r\n resources: resources\r\n }) : undefined;\r\n\r\n return (\r\n \r\n \r\n {heading}\r\n {alert}\r\n {loading}\r\n {orderInfomation?.channelReferenceId}\r\n \r\n {resources.orderSubmittedMessage}{' '}{config.domain ? config.domain : ''}\r\n \r\n \r\n {orderInfomation?.receiptEmail}\r\n \r\n {backToShoppingLink}\r\n
\r\n \r\n {_renderOrderOverview(props, salesLines, groups)}\r\n \r\n {groups && \r\n {_renderOrderSummary(props, salesLines, groups)}\r\n {payment &&
\r\n \r\n );\r\n }\r\n}\r\n\r\nfunction createLogMessage (message: string) {\r\n // const url: string = decodeURI(window.location.search);\r\n // const origin = window.location.origin;\r\n const logMessage = `${message}}`;\r\n return logMessage;\r\n}\r\n\r\nfunction _renderOrderOverview (props: IOrderConfirmationViewProps & IOrderDetailsExtentionProps & IOrderConfirmationExtentionResources,\r\n salesLines: ISalesLine[] | undefined, groups: IGroups | undefined): React.ReactNode {\r\n const giftCardItemId: string | undefined = props.data.channelConfiguration.result?.GiftCardItemId;\r\n const filteredSalesLines = salesLines?.filter(s=>s.data.salesLine.ItemId !== giftCardItemId);\r\n const isB2B = props.context?.request?.app?.platform?.enableDefaultOrderQuantityLimits === 'b2b';\r\n\r\n if(filteredSalesLines && filteredSalesLines?.length > 0) {\r\n return (\r\n <>\r\n \r\n {props.orderInfomation &&\r\n }\r\n {groups && groups.groups[0].delivery.trackingInfo}\r\n {salesLines && ( isB2B? null : _renderDeliveryMode(filteredSalesLines, props.resources))}\r\n
\r\n \r\n {salesLines && _renderAddress(filteredSalesLines, props.resources)}\r\n
\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {props.orderInfomation &&\r\n }\r\n {groups && groups.groups[0].delivery.trackingInfo}\r\n
\r\n );\r\n}\r\n\r\nfunction _getPriceContext(props: IOrderConfirmationViewProps & IOrderDetailsExtentionProps & IOrderConfirmationExtentionResources): IPriceContext {\r\n const { id, typeName, context, telemetry, resources: { freePriceText } } = props;\r\n return {\r\n id,\r\n typeName,\r\n context,\r\n telemetry,\r\n freePriceText\r\n };\r\n}\r\n\r\nfunction _renderDeliveryMode(salesLines: ISalesLine[], resources: IOrderConfirmationExtentionResources): React.ReactNode {\r\n return (\r\n \r\n {resources.deliveryMode}{': '}\r\n \r\n {salesLines[0].data.deliveryType === 'ship' ? 'Shipping' : 'Click & Collect'}\r\n \r\n
\r\n );\r\n}\r\nfunction _renderAddress(salesLines: ISalesLine[], resources: IOrderConfirmationExtentionResources): React.ReactNode {\r\n const shippingAddress = _getShippingAddress(salesLines);\r\n return ( & IOrderConfirmationExtentionResources,\r\n salesLines: ISalesLine[] | undefined, groups: IGroups | undefined): React.ReactNode\r\n{\r\n const isB2B = props.context?.request?.app?.platform?.enableDefaultOrderQuantityLimits === 'b2b';\r\n\r\n const {orderSummary} = props;\r\n if (!orderSummary) {\r\n return null;\r\n }\r\n return (\r\n \r\n {orderSummary.heading}\r\n
\r\n {orderSummary && (\r\n <>\r\n {_renderSubTotal(props)}\r\n {_renderShippingInclTaxes(props)}\r\n {_renderOtherCharges(props)}\r\n {/*hide on us*/}\r\n {orderSummary.tax}\r\n {_renderTotalOrder(props)}\r\n {isB2B? null : _renderTotalSavings(props)}\r\n \r\n )}\r\n
\r\n
& IOrderConfirmationExtentionResources): JSX.Element | null {\r\n const DiscountAmount = props.data.orderHydration.result?.salesOrder.DiscountAmount;\r\n return (\r\n \r\n {DiscountAmount && DiscountAmount > 0 ? (\r\n <>\r\n Total savings \r\n
\r\n );\r\n}\r\n\r\nfunction _renderSubTotal(props: IOrderConfirmationViewProps & IOrderDetailsExtentionProps & IOrderConfirmationExtentionResources): JSX.Element | null {\r\n const isB2B = props.context?.request?.app?.platform?.enableDefaultOrderQuantityLimits === 'b2b';\r\n let subtotal = 0;\r\n if (isB2B) {\r\n subtotal = props.data.orderHydration.result?.salesOrder.NetAmount!;\r\n }\r\n else {\r\n props.data.orderHydration.result?.salesOrder.SalesLines?.forEach((item)=>{\r\n subtotal += item.Price! * item.Quantity!;\r\n });\r\n }\r\n const OrderSubTotal = subtotal;//props.data.checkout.result?.checkoutCart.cart.NetPrice;\r\n return (\r\n \r\n {OrderSubTotal && OrderSubTotal > 0 ? (\r\n <>\r\n {props.resources.orderSummaryItemsTotalLabel} \r\n
\r\n );\r\n }\r\n function _renderTotalOrder(props: IOrderConfirmationViewProps & IOrderDetailsExtentionProps & IOrderConfirmationExtentionResources): JSX.Element | null {\r\n const OrderTotal = props.data.orderHydration.result?.salesOrder.TotalAmount;\r\n return (\r\n \r\n {OrderTotal && OrderTotal > 0 ? (\r\n <>\r\n {props.resources.orderSummaryGrandTotalLabel} \r\n
\r\n );\r\n }\r\n\r\nfunction _renderOtherCharges(props: IOrderConfirmationViewProps & IOrderDetailsExtentionProps & IOrderConfirmationExtentionResources): React.ReactNode | null{\r\n const chargeLines = props.data.orderHydration.result?.salesOrder.ChargeLines;\r\n let chargeAmountInclTax = 0;\r\n if(chargeLines) {\r\n chargeLines.forEach(chargeLine => {\r\n if (chargeLine.IsShipping) {\r\n const chargeAmountInclTaxLocal = chargeLine.CalculatedAmount ? chargeLine.CalculatedAmount : 0;\r\n chargeAmountInclTax += chargeAmountInclTaxLocal;\r\n }\r\n });\r\n }\r\n if (chargeAmountInclTax == 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {chargeAmountInclTax && chargeAmountInclTax > 0 ? (\r\n <>\r\n Other charges \r\n
\r\n );\r\n}\r\n\r\nfunction _renderShippingInclTaxes(props: IOrderConfirmationViewProps & IOrderDetailsExtentionProps & IOrderConfirmationExtentionResources): React.ReactNode | null{\r\n const chargeLines = props.data.orderHydration.result?.salesOrder.ChargeLines;\r\n\r\n let chargeAmountInclTax = 0;\r\n if(chargeLines) {\r\n chargeLines.forEach(chargeLine => {\r\n if (!chargeLine.IsShipping) {\r\n const chargeAmountInclTaxLocal = chargeLine.CalculatedAmount ? chargeLine.CalculatedAmount : 0;\r\n chargeAmountInclTax += chargeAmountInclTaxLocal;\r\n }\r\n });\r\n }\r\n if (chargeAmountInclTax == 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {chargeAmountInclTax && chargeAmountInclTax > 0 ? (\r\n <>\r\n {props.resources.orderSummaryShippingFeeLabel} \r\n
\r\n );\r\n}\r\n\r\n// export default OrderConfirmationView;\r\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IComponentProps, msdyn365Commerce } from '@msdyn365-commerce/core';\nimport { Customer } from '@msdyn365-commerce/retail-proxy';\nimport { EnumExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, Popover } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nexport interface IOrderHistoryFilterResources {\n orderHistoryFilterYourOrderHistory: string;\n orderHistoryFilterOrganizationWide: string;\n}\n\nexport interface IOrderHistoryFilterData {\n customerInformation: Customer;\n}\n\nexport interface IOrderHistoryFilterProps extends IComponentProps {\n className: string;\n\n resources: IOrderHistoryFilterResources;\n\n currentState: OrderHistoryFilterState;\n onFilterStateChanged(state: OrderHistoryFilterState): void;\n}\n\nexport enum OrderHistoryFilterState {\n CurrentUser,\n OrganizationWide\n}\n\nconst getOrderHistoryFilterStateResources = (filterState: OrderHistoryFilterState, resources: IOrderHistoryFilterResources): string => {\n switch (filterState) {\n case OrderHistoryFilterState.CurrentUser:\n return resources.orderHistoryFilterYourOrderHistory;\n case OrderHistoryFilterState.OrganizationWide:\n return resources.orderHistoryFilterOrganizationWide;\n default:\n throw new Error('Failed to retrieve resource description for unknown order history filter state.');\n }\n};\n\n/**\n * On Click functionality.\n * @param onStateClick -Filter state function.\n * @param filterState -Order history filter state.\n * @returns On state click functionality.\n */\nconst onClickHandler = (onStateClick: (filterState: OrderHistoryFilterState) => void, filterState: OrderHistoryFilterState) => () => {\n onStateClick(filterState);\n};\n\nconst renderFilterStateItem = (\n filterState: OrderHistoryFilterState,\n resources: IOrderHistoryFilterResources,\n className: string,\n onStateClick: (filterState: OrderHistoryFilterState) => void\n): React.ReactNode => {\n const stateStringRepresentation = OrderHistoryFilterState[filterState];\n\n return (\n \n {getOrderHistoryFilterStateResources(filterState, resources)}\n \n );\n};\n\n/**\n * On Toggle Popover functionality.\n * @param setPopoverState -Set popover state function.\n * @param isPopoverState -Boolean value.\n * @returns Set toggle popover state functionality.\n */\nconst togglePopoverHandler = (setPopoverState: React.Dispatch>, isPopoverState: boolean) => () => {\n setPopoverState(!isPopoverState);\n};\n\nconst OrderHistoryFilter: React.FC = (props: IOrderHistoryFilterProps) => {\n // Current version of filter doesn't include functionality for non b2b users or non-admin b2b users.\n if (!props.data.customerInformation.IsB2bAdmin) {\n return
;\n }\n\n const popoverRef = React.createRef();\n const [popoverState, setPopoverState] = React.useState(false);\n\n const [filterState, setFilterState] = React.useState(props.currentState);\n\n const onFilterStateClick = (clickedState: OrderHistoryFilterState) => {\n setFilterState(clickedState);\n setPopoverState(false);\n props.onFilterStateChanged(clickedState);\n };\n\n return (\n \n
\n {getOrderHistoryFilterStateResources(filterState, props.resources)}\n \n \n {EnumExtensions.getEnumValues(OrderHistoryFilterState).map(state => {\n return renderFilterStateItem(state, props.resources, props.className, onFilterStateClick);\n })}\n \n = msdyn365Commerce.createComponent<\n // @ts-expect-error\n IOrderHistoryFilterProps\n>('OrderHistoryFilterComponent', { component: OrderHistoryFilter });\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartLineItemComponent, OrderDetailsProduct } from '@msdyn365-commerce/components';\nimport MsDyn365, { IGridSettings, IImageSettings, Image, IRequestContext, isChannelTypeB2B } from '@msdyn365-commerce/core';\nimport {\n ChannelDeliveryOptionConfiguration,\n format,\n ProductCatalog,\n ProductDeliveryOptions,\n SalesLine,\n Shipment,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, getFallbackImageUrl, getProductPageUrlSync, ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { INodeProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { Observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport Address from './address';\nimport { BuySelectedComponent } from './buy-selected-component';\nimport LabelComponent from './label';\nimport { SalesLineState } from './sales-line-state';\nimport {\n defaultImageSettings,\n getDateTimeslot,\n getSalesStatusCode,\n IDeliveryType,\n IModuleComponentProps,\n ISalesStatusCode\n} from './utilities';\n\nexport type ISalesStatusStringMap = {\n [x in ISalesStatusCode]: string | undefined;\n};\n\nexport type IDeliveryTypeStringMap = {\n [x in IDeliveryType]: string | undefined;\n};\n\nexport interface ISalesLineResources {\n productDimensionTypeSize: string;\n productDimensionTypeColor: string;\n productDimensionTypeStyle: string;\n productDimensionTypeAmount?: string;\n salesLineQuantityText: string;\n configString: string;\n shipToLabel: string;\n storeLabel: string;\n phoneLabel: string;\n phoneAriaLabel: string;\n buyItAgainAriaLabel: string;\n buyItAgainLabel: string;\n orderStatusReadyForPickup: string;\n orderStatusPickedUp: string;\n orderStatusShipped: string;\n orderStatusCanceled: string;\n orderStatusProcessing: string;\n pickedUpSalesLines: string;\n deliveredSalesLines: string;\n carryOutSalesLines: string;\n trackingLabel: string;\n trackingAriaLabel: string;\n trackingComingSoonLabel: string;\n discountStringText: string;\n orderStatusEmailed: string;\n emailSalesLines: string;\n pickupDateTimeslotText: string;\n pickupTimeslotPlaceHolder: string;\n shippingCharges?: string;\n orderDetailsUnavailableProductText?: string;\n orderDetailsBuySelectedButtonText?: string;\n orderDetailsBuySelectedButtonAriaLabel?: string;\n orderDetailsBuySelectedAddingToCartErrorNotificationTitle?: string;\n orderDetailsBuySelectedAddingToCartErrorNotificationCloseAriaLabel?: string;\n orderDetailsGoToCartText?: string;\n orderDetailsDialogCloseText?: string;\n orderDetailsSelectRadioAriaLabelText?: string;\n orderDetailsSingleItemText?: string;\n orderDetailsMultiLineItemFormatText?: string;\n orderDetailsMultiLinesFormatText?: string;\n orderDetailsHeaderMessageText?: string;\n orderDetailsMultiItemsValidationErrorMessage?: string;\n orderDetailsOneErrorText?: string;\n orderDetailsMultiErrorText?: string;\n addedQuantityText?: string;\n originalPriceText?: string;\n currentPriceText?: string;\n freePriceText?: string;\n}\n\nexport interface IGetSalesLineInput {\n moduleName: string;\n moduleComponentProps: IModuleComponentProps;\n product?: SimpleProduct;\n shipment?: Shipment;\n salesLine: SalesLine;\n isCurrentChannel: boolean;\n resources: ISalesLineResources;\n imageOnly?: boolean;\n salesLineState?: SalesLineState;\n showCompleteAddress?: boolean;\n showTimeslot: boolean;\n telemetryContent?: ITelemetryContent;\n retailMultiplePickUpOptionEnabled?: boolean;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n productDeliveryOptions?: ProductDeliveryOptions[];\n isSelectionModeEnabled?: boolean;\n orderDetailsProduct?: OrderDetailsProduct;\n isReorderingEnabled?: boolean;\n isChannelMultipleCatalogsFeatureEnabled?: boolean;\n catalogs?: ProductCatalog[];\n}\n\nexport interface ISalesLine {\n salesLineProps: INodeProps;\n salesLine: React.ReactNode;\n address?: React.ReactNode;\n buyAgainButton?: React.ReactNode;\n salesStatus: React.ReactNode;\n deliveryType: React.ReactNode;\n trackingInfo: React.ReactNode;\n pickupDateTimeslot: React.ReactNode;\n errors?: React.ReactNode;\n\n // Row data\n data: {\n salesLine: SalesLine;\n product?: SimpleProduct;\n shipment?: Shipment;\n deliveryType: string;\n productUrl: string | undefined;\n salesStatus: ISalesStatusCode;\n isChecked?: boolean;\n };\n}\n\nenum deliveryTypeEnum {\n ship = 'ship',\n email = 'email',\n carryOut = 'carryOut',\n pickUp = 'pickUp'\n}\n\n/**\n * The on select line call back.\n * @param orderDetailsProduct -- The current order details product.\n * @returns The call back method.\n */\nconst onSelectLine = (orderDetailsProduct: OrderDetailsProduct) => () => {\n orderDetailsProduct.isSelected = !orderDetailsProduct.isSelected;\n};\n\n/**\n * Get the checkbox element.\n * @param orderDetailsProduct -- The order details product.\n * @param orderDetailsSelectRadioAriaLabelText -- The aria label text.\n * @param moduleName -- The module name.\n * @returns The checkbox element.\n */\nconst getOrderDetailsSalesLineCheckbox = (\n orderDetailsProduct: OrderDetailsProduct,\n orderDetailsSelectRadioAriaLabelText: string | undefined,\n moduleName: string\n): JSX.Element | null => {\n const checkboxRowAriaLabel = format(orderDetailsSelectRadioAriaLabelText ?? '{0}', orderDetailsProduct.salesLine.ProductId);\n\n return (\n \n \n \n
\n );\n};\n\n/**\n * Get tracking information.\n * @param deliveryType -- The delivery type.\n * @param moduleName -- Module name.\n * @param trackingLabel -- Tracking label.\n * @param trackingAriaLabel -- Tracking aria label.\n * @param trackingComingSoonLabel -- Tracking coming soon label.\n * @param shipment -- Shipment.\n * @returns The tracking information.\n */\nexport const getTrackingInfo = (\n deliveryType: string,\n moduleName: string,\n trackingLabel: string,\n trackingAriaLabel: string,\n trackingComingSoonLabel: string,\n shipment: Shipment | undefined\n): false | JSX.Element => {\n return (\n deliveryType === deliveryTypeEnum.ship && (\n \n {trackingLabel}\n {shipment ? (\n \n {shipment.TrackingNumber}\n \n ) : (\n <>{trackingComingSoonLabel}\n )}\n \n )\n );\n};\n\n/**\n * Get pick update date time lot information.\n * @param shouldShowTimeslot -- Should show time slot.\n * @param isDeliveryPickupSame -- Is delivery and pickup the same.\n * @param salesLine -- The sales line.\n * @param pickupTimeslotPlaceHolder -- The pickup time slot place holder.\n * @param moduleName -- The module name.\n * @param locale -- The locale.\n * @param pickupDateTimeslotText -- The pickup date time slot text.\n * @returns The pickup date time slot information.\n */\nexport const getPickupDateTimeslotInfo = (\n shouldShowTimeslot: boolean,\n isDeliveryPickupSame: boolean,\n salesLine: SalesLine,\n pickupTimeslotPlaceHolder: string,\n moduleName: string,\n locale: string,\n pickupDateTimeslotText: string\n): false | JSX.Element => {\n const canShowTimeslot: boolean =\n shouldShowTimeslot &&\n isDeliveryPickupSame &&\n salesLine.PickupTimeslotStartDateTime !== undefined &&\n salesLine.PickupTimeslotEndDateTime !== undefined;\n\n const pickupDateTimeslot = canShowTimeslot\n ? getDateTimeslot(pickupTimeslotPlaceHolder, salesLine.PickupTimeslotStartDateTime, salesLine.PickupTimeslotEndDateTime, locale)\n : '';\n\n return (\n canShowTimeslot && (\n \n
{pickupDateTimeslotText}
\n
{pickupDateTimeslot}
\n
\n {() =>\n !salesLineState?.isHidden && (\n \n
\n )\n }\n \n );\n};\n\n/**\n * Renders sales line.\n * @param props - Sales line props.\n * @returns React node.\n */\nconst SalesLineComponent: React.FC = (props: IGetSalesLineInput) => {\n const productName = props.product?.Name ?? props.salesLine.Description;\n const requestContext = props.moduleComponentProps.context.actionContext.requestContext;\n\n if (props.imageOnly) {\n const fallbackImageUrl = getFallbackImageUrl(props.product?.ItemId, requestContext.apiSettings);\n return getSalesLinePicture(\n props.moduleName,\n requestContext,\n productName,\n props.product,\n fallbackImageUrl,\n requestContext.gridSettings!,\n props.moduleComponentProps.config.imageSettings,\n props.salesLineState\n );\n }\n\n const orderDetailsProducts = props.orderDetailsProduct ?? new OrderDetailsProduct(props.salesLine, props.product);\n\n const isSelectionModeEnabled = props.isSelectionModeEnabled && orderDetailsProducts.isProductAvailable;\n\n const orderDetailCheckbox =\n isSelectionModeEnabled &&\n getOrderDetailsSalesLineCheckbox(orderDetailsProducts, props.resources.orderDetailsSelectRadioAriaLabelText, props.moduleName);\n\n let productUrl: string | undefined;\n if (!ObjectExtensions.isNullOrUndefined(productName) && !ObjectExtensions.isNullOrUndefined(props.salesLine.ProductId)) {\n productUrl = getProductPageUrlSync(productName, props.salesLine.ProductId, props.moduleComponentProps.context.actionContext);\n\n if (MsDyn365.isBrowser && isChannelTypeB2B(requestContext)) {\n const fullUrl = new URL(productUrl, window.location.href);\n fullUrl.searchParams.set('catalogid', `${props.salesLine.CatalogId ?? 0}`);\n productUrl = fullUrl.href;\n }\n }\n\n const className = `${props.moduleName}__sales-line-checkbox-control`;\n\n return (\n \n {orderDetailCheckbox}\n {props.resources.orderDetailsUnavailableProductText}
\n )\n };\n};\n\nexport const getDeliveryType = (\n pickupMode: string,\n salesLine: SalesLine,\n salesLineDeliveryMode?: string,\n pickupDeliveryModeCode?: string,\n retailMultiplePickupOption?: boolean,\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration,\n emailDeliveryModeCode?: string\n): string => {\n let isPickupDeliveryMode: boolean;\n\n if (retailMultiplePickupOption) {\n isPickupDeliveryMode =\n salesLineDeliveryMode === channelDeliveryOptionConfig?.PickupDeliveryModeCodes?.find(dM => dM === salesLineDeliveryMode);\n } else {\n isPickupDeliveryMode =\n !!pickupDeliveryModeCode && pickupDeliveryModeCode !== '' && pickupDeliveryModeCode === salesLineDeliveryMode;\n }\n\n return isPickupDeliveryMode\n ? pickupMode\n : emailDeliveryModeCode && emailDeliveryModeCode !== '' && emailDeliveryModeCode === salesLine.DeliveryMode\n ? deliveryTypeEnum.email\n : salesLine.DeliveryMode\n ? deliveryTypeEnum.ship\n : deliveryTypeEnum.carryOut;\n};\n\nexport const getDeliveryTypeString = (\n deliveryType: string,\n deliveryTypeStringMap: IDeliveryTypeStringMap,\n retailMultiplePickupOption?: boolean\n): string | undefined => {\n if (retailMultiplePickupOption) {\n switch (deliveryType) {\n case deliveryTypeEnum.ship:\n case deliveryTypeEnum.carryOut:\n case deliveryTypeEnum.email:\n return deliveryTypeStringMap[deliveryType];\n default:\n return deliveryType;\n }\n } else {\n return deliveryTypeStringMap[deliveryType];\n }\n};\n\nexport const getDeliveryTypeClassName = (\n deliveryType: string,\n deliveryTypeStringMap: IDeliveryTypeStringMap,\n retailMultiplePickupOption?: boolean\n): string | undefined => {\n switch (deliveryType) {\n case deliveryTypeEnum.ship:\n case deliveryTypeEnum.carryOut:\n case deliveryTypeEnum.email:\n return deliveryType;\n default:\n return deliveryTypeEnum.pickUp;\n }\n};\n\nconst defaultDeliveryOption: string = 'pickup';\n\n/**\n * Retrieves the delivery description by product id.\n * @param productRecordId - Product record id.\n * @param salesLineDeliveryMode - Delivery mode from the sales line.\n * @param productDeliveryOptions - Possible delivery options.\n * @returns Delivery option description.\n */\nexport const getDeliveryDescriptionByProductId = (\n productRecordId?: number,\n salesLineDeliveryMode?: string,\n productDeliveryOptions?: ProductDeliveryOptions[]\n): string => {\n if (ObjectExtensions.isNullOrUndefined(productRecordId) || !ArrayExtensions.hasElements(productDeliveryOptions)) {\n return defaultDeliveryOption;\n }\n\n const productDeliveryOption = productDeliveryOptions.find(currentDeliveryOption => {\n return currentDeliveryOption.ProductId === productRecordId;\n });\n\n const deliveryDescription = productDeliveryOption?.DeliveryOptions?.find(option => option.Code === salesLineDeliveryMode)?.Description;\n\n return deliveryDescription ?? defaultDeliveryOption;\n};\n\nexport const getPickupModeDesc = (\n product?: SimpleProduct,\n salesLineDeliveryMode?: string,\n productDeliveryOptions?: ProductDeliveryOptions[],\n retailMultiplePickupOption?: boolean\n): string => {\n return getDeliveryDescriptionByProductId(product?.RecordId, salesLineDeliveryMode, productDeliveryOptions);\n};\n\n/**\n * Get the store name.\n * @param isMultiplePickUpOptionEnabled -- Is mutiple pick up option enabled.\n * @param salesLine -- Sales line.\n * @param deliveryType -- Delivery type.\n * @returns The store name.\n */\nexport const getStoreName = (\n isMultiplePickUpOptionEnabled: boolean | undefined,\n salesLine: SalesLine,\n deliveryType?: string\n): string | undefined | null => {\n if (!isMultiplePickUpOptionEnabled) {\n return null;\n }\n\n switch (deliveryType) {\n case deliveryTypeEnum.ship:\n case deliveryTypeEnum.email:\n case deliveryTypeEnum.carryOut:\n return '';\n default:\n return `, ${salesLine.ShippingAddress?.Name}`;\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 { DisplayTemplate, ProductRefinerSource, ProductRefinerValue, RefinerType } 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, isRangeType } from './utilities';\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 // If (this.props.productRefinerHierarchy.DataTypeValue === ProductRefinerValueDataTypeValue.Range) {\n // isExpanded = true;\n // }\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 (isRangeType(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 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 const selectedRefinementCriterion = findMatchingRefinementCriterion(child, selectedRefinerValues);\n\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 \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 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","export * from './link';\r\nexport * from './product-search-result-items';\r\nexport * from './feature-search-result-item';\r\nexport * from './title';\r\nexport * from './separator';\r\nexport * from './range-refine-item';\r\nexport * from './refine-item';\r\nexport * from './refine-item-toggle-notification';\r\nexport * from './refine-item.props.common';\r\nexport * from './utilities';\r\nexport * from './choice-summary';\r\nexport * from './choice-summary.props';\r\nexport * from './modal';\r\nexport * from './refine-submenu';\r\nexport * from './error-message';\r\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 ILabelProps {\n className: string;\n label: string;\n}\n\nexport const Label: React.FC = ({ className, label }) => {label} ;\n\nexport default Label;\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 * as React from 'react';\n\nimport { IGetOrderSummaryInput, IOrderSummary, IPriceContext } from '../../../common';\n\ninterface ISummaryLineProps {\n priceContext?: IPriceContext;\n name: string;\n label: string;\n value?: number;\n}\n\nconst OrderSummaryLine: React.SFC = ({ name, label, value = 0, priceContext }) => (\n \n {label} \n {priceContext ? (\n {value} \n )}\n
\n);\n\nexport const getOrderConfirmationOrderSummary = ({\n order,\n priceContext,\n earnedPoints,\n resource: {\n orderSummaryHeading,\n orderSummaryItemsTotalLabel,\n orderSummaryShippingFeeLabel,\n orderSummaryTaxLabel,\n orderSummaryGrandTotalLabel,\n pointsEarnedLabel\n },\n canShip,\n isTaxIncludedInPrice,\n isShowTaxBreakUp\n}: IGetOrderSummaryInput): IOrderSummary => {\n const subTotal = isTaxIncludedInPrice && isShowTaxBreakUp ? order.SubtotalAmountWithoutTax : order.SubtotalAmount;\n const taxOnShippingCharge = order.TaxOnShippingCharge !== undefined ? order.TaxOnShippingCharge : 0;\n const shippingChargeAmount = order.ShippingChargeAmount !== undefined ? order.ShippingChargeAmount : 0;\n\n // isTaxIncludedInPrice isShowTaxBreakup useProperties\n // False False/True otherChargeAmount\n // True True otherChargeAmount\n // True false otherChargeAmount+TaxOnNonShippingCharges\n const shippingCharge =\n isTaxIncludedInPrice && !isShowTaxBreakUp ? shippingChargeAmount + taxOnShippingCharge : order.ShippingChargeAmount;\n return {\n orderSummaryProps: { className: 'ms-order-confirmation__order-summary' },\n heading: {orderSummaryHeading}
,\n subtotal: >;\n className: string;\n\n resources: IOrderDetailsTableHeaderResources;\n\n isCashAndCarryTransaction: boolean;\n isSelectedAll: boolean;\n isSelectionModeEnabled: boolean;\n isChannelMultipleCatalogsFeatureEnabled?: boolean;\n onSelectAll(isSelected: boolean): void;\n}\n\n/**\n * Renders checkbox for order details lines selection.\n * @param props - Order detail table header props.\n * @returns React element.\n */\nconst OrderDetailsHeaderCheckboxComponent: React.FC = (props: IOrderDetailsTableHeaderProps) => {\n const switchCheckedState = React.useCallback(() => {\n props.onSelectAll(!props.isSelectedAll);\n }, [props]);\n\n return (\n \n \n );\n};\n\n/**\n * Renders desktop view cells.\n * @param props - Configuration of the module.\n * @returns List of cells for the header.\n */\nconst OrderDetailsDesktopHeaderCellsComponent: React.FC = (props: IOrderDetailsTableHeaderProps) => {\n const { resources } = props;\n\n const columnWithNumberClassName = `${props.className}__row__column-with-number`;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- app configs are of generic type\n const shouldDisplayUnitOfMeasure =\n props.context.app.config.unitOfMeasureDisplayType && props.context.app.config.unitOfMeasureDisplayType !== 'none';\n\n return (\n <>\n {props.isSelectionModeEnabled ? (\n \n \n ) : (\n undefined\n )}\n {resources.orderDetailsProductNumberText} \n {resources.orderDetailsProductText} \n {resources.orderDetailsUnitPriceText} \n {resources.orderDetailsModeOfDeliveryText} \n {props.isCashAndCarryTransaction ? undefined : {resources.orderDetailsStatusText} }\n {resources.orderDetailsQuantityText} \n {shouldDisplayUnitOfMeasure && {resources.orderDetailsUnitOfMeasureText} }\n\n {resources.orderDetailsTotalText} \n {resources.orderDetailsActionsText} \n \n );\n};\n\n/**\n * Renders mobile view cells.\n * @param props - Configuration of the module.\n * @returns List of cells for the header.\n */\nconst OrderDetailsMobileHeaderCellsComponent: React.FC = (props: IOrderDetailsTableHeaderProps) => {\n const { resources } = props;\n return (\n <>\n {props.isSelectionModeEnabled ? (\n \n \n ) : (\n undefined\n )}\n {resources.orderDetailsProductText} \n \n );\n};\n\n/**\n * Order details table header component.\n * @param props - Configuration of the component.\n * @returns React node with the header.\n */\nexport const OrderDetailsTableHeaderComponent: React.FC = (props: IOrderDetailsTableHeaderProps) => {\n const rowClassName = `${props.className}__row`;\n\n let headerCells: JSX.Element;\n const isMobileView = isMobile({ variant: VariantType.Viewport, context: props.context.request }) === 'xs';\n if (isMobileView) {\n headerCells = \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 { OrderDetailsProduct } from '@msdyn365-commerce/components';\nimport MsDyn365, { IAny, IComponentProps, ICoreContext, IGeneric, IImageSettings, Image, isChannelTypeB2B } from '@msdyn365-commerce/core';\nimport { ChannelDeliveryOptionConfiguration, format, ProductDeliveryOptions, SalesOrder } from '@msdyn365-commerce/retail-proxy';\nimport { getFallbackImageUrl, getProductPageUrlSync, ObjectExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, isMobile, VariantType } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport React, { useState } from 'react';\n\nimport { BuySelectedComponent } from '../../../../../common/buy-selected-component';\nimport {\n getDeliveryDescriptionByProductId,\n getDeliveryType,\n getDeliveryTypeString,\n IDeliveryTypeStringMap,\n ISalesStatusStringMap\n} from '../../../../../common/get-sales-line';\nimport { defaultImageSettings, getSalesStatusCode } from '../../../../../common/utilities';\n\n/**\n * Data required to render each order details row.\n */\nexport interface IOrderDetailsTableRowData {\n salesOrder: SalesOrder;\n product: OrderDetailsProduct;\n deliveryOptions: ProductDeliveryOptions[];\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n}\n\n/**\n * Resources for order details table rows.\n */\nexport interface IOrderDetailsTableRowResources {\n orderDetailsProductDimensionsSeparator: string;\n orderDetailsQuantityMobileText: string;\n orderDetailsViewDetailsButtonText: string;\n orderDetailsViewDetailsButtonAriaLabel: string;\n pickedUpSalesLines: string;\n deliveredSalesLines: string;\n carryOutSalesLines: string;\n emailSalesLines: string;\n orderStatusReadyForPickup: string;\n orderStatusProcessing: string;\n orderStatusShipped: string;\n orderStatusPickedUp: string;\n orderStatusCanceled: string;\n orderStatusEmailed: string;\n\n orderDetailsSelectRadioAriaLabelText: string;\n\n orderDetailsBuyItAgainButtonText: string;\n orderDetailsBuyItAgainButtonAriaLabel: string;\n orderDetailsBuySelectedAddingToCartErrorNotificationTitle: string;\n orderDetailsBuySelectedAddingToCartErrorNotificationCloseAriaLabel: string;\n orderDetailsUnavailableProductText?: string;\n}\n\n/**\n * Configuration for the order details rows.\n */\nexport interface IOrderDetailsTableRowProps extends IComponentProps {\n context: ICoreContext>;\n className: string;\n\n imageSettings?: IImageSettings;\n isCashAndCarryTransaction: boolean;\n isReorderingEnabled?: boolean;\n isRetailMultiplePickUpOptionEnabled?: boolean;\n isSelectionModeEnabled: boolean;\n\n resources: IOrderDetailsTableRowResources;\n isChannelMultipleCatalogsFeatureEnabled?: boolean;\n}\n\n/**\n * Formats amount.\n * @param context - Core context.\n * @param amount - Amount to display.\n * @param currencyCode - Currency for the amount.\n * @returns String value.\n */\nconst formatAmount = (context: ICoreContext, amount: number | undefined, currencyCode: string | undefined) => {\n if (amount === undefined) {\n return '';\n }\n return context.cultureFormatter.formatCurrency(amount, currencyCode);\n};\n\n/**\n * Renders checkbox for order details line selection.\n * @param props - Order detail table row props.\n * @returns React element.\n */\nconst OrderDetailsRowCheckboxComponent: React.FC = (props: IOrderDetailsTableRowProps) => {\n const product = props.data.product;\n\n const checkboxRowAriaLabel = format(props.resources.orderDetailsSelectRadioAriaLabelText, product.salesLine.ProductId);\n const onSelectLine = React.useCallback(() => {\n product.isSelected = !product.isSelected;\n }, [product]);\n\n return (\n \n \n );\n};\n\n/**\n * Renders product image for order details line.\n * @param props - Order detail table row props.\n * @returns React element.\n */\nconst OrderDetailsRowProductImageComponent: React.FC = (props: IOrderDetailsTableRowProps) => {\n const product = props.data.product;\n const fallbackImageUrl = getFallbackImageUrl(product.simpleProduct?.ItemId, props.context.actionContext.requestContext.apiSettings);\n\n const containerClassName = `${props.className}__product-image-container`;\n\n const productName = product.simpleProduct?.Name ?? product.salesLine.Description;\n\n return (\n \n
\n );\n};\n\n/**\n * Renders rows for desktop view.\n * @param props - Configuration for the rows.\n * @returns A react node with a list of order details rows for desktop view.\n */\nexport const OrderDetailsDesktopTableRowCellComponent: React.FC = (props: IOrderDetailsTableRowProps) => {\n const {\n data: { product, salesOrder, deliveryOptions }\n } = props;\n const salesLine = product.salesLine;\n\n const pickupMode = getDeliveryDescriptionByProductId(salesLine.ProductId, salesLine.DeliveryMode, deliveryOptions);\n const pickupDeliveryModeCode = props.context.request.channel?.PickupDeliveryModeCode;\n const emailDeliveryModeCode = props.context.request.channel?.EmailDeliveryModeCode;\n const deliveryType = getDeliveryType(\n pickupMode,\n salesLine,\n salesLine.DeliveryMode,\n pickupDeliveryModeCode,\n props.isRetailMultiplePickUpOptionEnabled,\n props.data.channelDeliveryOptionConfig,\n emailDeliveryModeCode\n );\n const deliveryTypeStringMap: IDeliveryTypeStringMap = {\n pickUp: props.resources.pickedUpSalesLines,\n ship: props.resources.deliveredSalesLines,\n carryOut: props.resources.carryOutSalesLines,\n email: props.resources.emailSalesLines\n };\n const deliveryTypeString = getDeliveryTypeString(deliveryType, deliveryTypeStringMap, props.isRetailMultiplePickUpOptionEnabled);\n\n const salesStatusStringMap: ISalesStatusStringMap = {\n canceled: props.resources.orderStatusCanceled,\n readyForPickup: props.resources.orderStatusReadyForPickup,\n pickedUp: props.resources.orderStatusPickedUp,\n processing: props.resources.orderStatusProcessing,\n shipped: props.resources.orderStatusShipped,\n unknown: undefined,\n emailed: props.resources.orderStatusEmailed\n };\n\n const salesStatus = getSalesStatusCode(deliveryType, salesLine.SalesStatusValue, pickupMode);\n const salesStatusString = salesStatusStringMap[salesStatus];\n\n const columnWithNumberClassName = `${props.className}__column-with-number`;\n\n const productName = product.simpleProduct?.Name ?? salesLine.Description;\n\n let productUrl = '';\n if (!ObjectExtensions.isNullOrUndefined(productName) && !ObjectExtensions.isNullOrUndefined(salesLine.ProductId)) {\n productUrl = getProductPageUrlSync(productName, salesLine.ProductId, props.context.actionContext);\n\n if (MsDyn365.isBrowser && isChannelTypeB2B(props.context.actionContext.requestContext)) {\n const fullUrl = new URL(productUrl, window.location.href);\n fullUrl.searchParams.set('catalogid', `${salesLine.CatalogId ?? 0}`);\n productUrl = fullUrl.href;\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- app configs are of generic type\n const shouldDisplayUnitOfMeasure =\n props.context.app.config.unitOfMeasureDisplayType && props.context.app.config.unitOfMeasureDisplayType !== 'none';\n\n const currentProduct = new OrderDetailsProduct(product.salesLine, product.simpleProduct, productUrl);\n\n return (\n <>\n {props.isSelectionModeEnabled ? (\n \n \n ) : (\n undefined\n )}\n \n \n {salesLine.ItemId} \n \n \n
\n {productName}\n \n
\n {product.simpleProduct?.Dimensions?.map(dimension => dimension.DimensionValue?.Value)\n .filter(dimensionValue => !StringExtensions.isNullOrWhitespace(dimensionValue))\n .join(props.resources.orderDetailsProductDimensionsSeparator)}\n \n {!product.isProductAvailable && (\n
{props.resources.orderDetailsUnavailableProductText}
\n )}\n
\n {formatAmount(props.context, salesLine.Price, salesOrder.CurrencyCode)} \n {deliveryTypeString} \n {props.isCashAndCarryTransaction ? undefined : {salesStatusString} }\n {salesLine.Quantity} \n {shouldDisplayUnitOfMeasure && {salesLine.UnitOfMeasureSymbol} }\n\n {formatAmount(props.context, salesLine.TotalAmount, salesOrder.CurrencyCode)} \n \n \n \n );\n};\n\nlet setShowPreviousActions: React.Dispatch> | undefined;\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 OrderDetailsExtraActionsPopupComponent: React.FC = (\n props: IOrderDetailsTableRowProps\n): JSX.Element | null => {\n const {\n resources: { orderDetailsViewDetailsButtonAriaLabel, orderDetailsViewDetailsButtonText }\n } = props;\n\n const [shouldShowActions, setShowActions] = useState(false);\n\n const salesLine = props.data.product.salesLine;\n\n const productName = props.data.product.simpleProduct?.Name ?? salesLine.Description;\n let productUrl = '';\n if (!ObjectExtensions.isNullOrUndefined(productName) && !ObjectExtensions.isNullOrUndefined(salesLine.ProductId)) {\n productUrl = getProductPageUrlSync(productName, salesLine.ProductId, props.context.actionContext);\n\n if (MsDyn365.isBrowser && isChannelTypeB2B(props.context.actionContext.requestContext)) {\n const fullUrl = new URL(productUrl, window.location.href);\n fullUrl.searchParams.set('catalogid', `${salesLine.CatalogId ?? 0}`);\n productUrl = fullUrl.href;\n }\n }\n const currentProduct = new OrderDetailsProduct(props.data.product.salesLine, props.data.product.simpleProduct, productUrl);\n\n const onClickViewDetails = React.useCallback(() => {\n if (MsDyn365.isBrowser) {\n window.location.href = productUrl;\n }\n }, [productUrl]);\n\n const toggle = React.useCallback(() => {\n const shouldShowActionsNewValue = !shouldShowActions;\n if (shouldShowActionsNewValue) {\n if (setShowPreviousActions) {\n setShowPreviousActions(false);\n }\n setShowActions(shouldShowActionsNewValue);\n setShowPreviousActions = setShowActions;\n } else {\n setShowPreviousActions = undefined;\n setShowActions(shouldShowActionsNewValue);\n }\n }, [shouldShowActions, setShowActions]);\n\n if (StringExtensions.isNullOrWhitespace(productUrl)) {\n return null;\n }\n\n const className = `${props.className}__extra-actions-cell`;\n const actionsContainerClassName = `${className}__actions-container`;\n\n return (\n \n
\n {shouldShowActions && (\n
\n \n {orderDetailsViewDetailsButtonText}\n \n
\n )}\n
= (props: IOrderDetailsTableRowProps) => {\n const {\n data: { product }\n } = props;\n const salesLine = product.salesLine;\n const productName = product.simpleProduct?.Name ?? salesLine.Description;\n\n return (\n <>\n {props.isSelectionModeEnabled ? (\n \n \n ) : (\n undefined\n )}\n \n \n \n \n {productName} \n \n {format(props.resources.orderDetailsQuantityMobileText, salesLine.Quantity)}\n \n
\n \n \n \n \n );\n};\n\n/**\n * Renders order details rows.\n * @param props - Configuration for the rows.\n * @returns A react node with a list of order details rows.\n */\nexport const OrderDetailsTableRowComponent: React.FC = (props: IOrderDetailsTableRowProps) => {\n const isMobileView = isMobile({ variant: VariantType.Viewport, context: props.context.request }) === 'xs';\n const className = classnames(\n props.className,\n props.data.product.isProductAvailable ? `${props.className}__available-product` : `${props.className}__unavailable-product`,\n props.className,\n props.data.product.isSelected ? `${props.className}__selected` : `${props.className}__unselected`\n );\n\n return (\n \n {isMobileView ? (\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 { OrderDetailsProduct } from '@msdyn365-commerce/components';\nimport { IComponentProps, ICoreContext, IImageSettings } from '@msdyn365-commerce/core';\nimport { ChannelDeliveryOptionConfiguration, ProductDeliveryOptions, SalesOrder } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport React from 'react';\n\nimport { IOrderDetailsTableHeaderResources, OrderDetailsTableHeaderComponent } from './components/order-details-table-header-component';\nimport { IOrderDetailsTableRowResources, OrderDetailsTableRowComponent } from './components/order-details-table-row-component';\n\n/**\n * Interface with the data required for order details.\n */\nexport interface IOrderDetailsTableData {\n order: SalesOrder;\n products: OrderDetailsProduct[];\n deliveryOptions: ProductDeliveryOptions[];\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n}\n\n/**\n * Resources needed to render order details table.\n */\nexport interface IOrderDetailsTableResources extends IOrderDetailsTableHeaderResources, IOrderDetailsTableRowResources {}\n\n/**\n * Configuration of order details table.\n */\nexport interface IOrderDetailsTableProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n\n imageSettings?: IImageSettings;\n isCashAndCarryTransaction: boolean;\n isReorderingEnabled?: boolean;\n isRetailMultiplePickUpOptionEnabled?: boolean;\n isSelectionModeEnabled: boolean;\n\n resources: IOrderDetailsTableResources;\n isChannelMultipleCatalogsFeatureEnabled?: boolean;\n}\n\n/**\n * On select all function.\n * @param props - Invoice table props.\n * @returns On change.\n */\nconst onSelectAllHandler = (props: IOrderDetailsTableProps) => (isSelected: boolean) => {\n for (const product of props.data.products) {\n product.isSelected = isSelected;\n }\n};\n\n/**\n * Renders order details table.\n * @param props - Configuration for order details table.\n * @returns React node with the table.\n */\nexport const OrderDetailsTableComponent: React.FC = (props: IOrderDetailsTableProps) => {\n const rowClassName = `${props.className}__row`;\n const headerClassName = `${props.className}__header`;\n const products = props.data.products;\n const availableProducts = products.filter(product => product.isProductAvailable);\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 { 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 ): 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 * 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 { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IHelp, IOrderSummary, IPaymentMethods } from '../../common';\nimport { IGroup, IGroupDelivery, IGroups } from '../../common/get-groups';\nimport { IOrderInformation } from '../../common/get-order-information';\nimport { ISalesLine } from '../../common/get-sales-line';\nimport { IOrderConfirmationViewProps } from './order-confirmation';\n\nexport const OrderConfirmationOrderInfomation: React.FC = ({\n orderInformationProps,\n receiptEmail,\n createdDate,\n channelReferenceId\n}) => (\n \n {createdDate}\n {channelReferenceId}\n {receiptEmail}\n \n);\n\nexport const OrderConfirmationSalesLine: React.FC = ({ salesLineProps, salesLine, buyAgainButton }) => (\n {salesLine} \n);\n\nexport const OrderConfirmationGroupDelivery: React.FC = ({\n deliveryProps,\n heading,\n count,\n processing,\n address,\n trackingInfo,\n pickupDateTimeslot\n}) => (\n \n {heading}\n {address}\n {pickupDateTimeslot}\n \n);\n\nexport const OrderConfirmationGroup: React.FC = ({ groupProps, delivery, salesLinesProps, salesLines }) => (\n \n {delivery && \n {salesLines.map((salesLine: ISalesLine) => (\n \n )}\n \n);\n\nexport const OrderConfirmationGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group: IGroup, index: number) => (\n \n);\n\nexport const OrderConfirmationOrderSummary: React.FC = ({\n orderSummaryProps,\n heading,\n subtotal,\n shipping,\n tax,\n totalAmount,\n earnedPoints\n}) => (\n \n {heading}\n {subtotal}\n {shipping}\n {tax}\n {totalAmount}\n {earnedPoints}\n \n);\n\nexport const OrderConfirmationPayment: React.FC = ({ paymentMethodsProps, title, methods }) => (\n \n {title}\n {methods}\n \n);\n\nexport const OrderConfirmationHelp: React.FC = ({ helpProps, needHelpLabel, helpLineNumberLabel, contactNumber }) => (\n \n {needHelpLabel}\n {helpLineNumberLabel}\n {contactNumber}\n \n);\n\nconst OrderConfirmationView: React.FC = ({\n moduleProps,\n heading,\n backToShoppingLink,\n alert,\n loading,\n orderInfomation,\n orderSummary,\n payment,\n help,\n groups\n}) => {\n return (\n \n {heading}\n {alert}\n {loading}\n {orderInfomation && \n );\n};\n\nexport default OrderConfirmationView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { AddToCartComponent, IAddToCartResources, OrderDetailsProduct } from '@msdyn365-commerce/components';\nimport { getUrlSync, IComponentProps, ICoreContext } from '@msdyn365-commerce/core';\nimport { ArrayExtensions, ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\n/**\n * The data which the component should operate.\n */\nexport interface IBuySelectedData {\n products: OrderDetailsProduct[];\n}\n\n/**\n * The resources needed to render a buy selected component.\n */\nexport interface IBuySelectedResources {\n orderDetailsUnavailableProductText?: string;\n orderDetailsBuySelectedButtonText?: string;\n orderDetailsBuySelectedButtonAriaLabel?: string;\n orderDetailsBuySelectedAddingToCartErrorNotificationTitle?: string;\n orderDetailsBuySelectedAddingToCartErrorNotificationCloseAriaLabel?: string;\n orderDetailsBuyItAgainLabel?: string;\n orderDetailsBuyItAgainAriaLabel?: string;\n orderDetailsGoToCartText?: string;\n orderDetailsDialogCloseText?: string;\n orderDetailsSingleItemText?: string;\n orderDetailsMultiLineItemFormatText?: string;\n orderDetailsMultiLinesFormatText?: string;\n orderDetailsHeaderMessageText?: string;\n orderDetailsMultiItemsValidationErrorMessage?: string;\n orderDetailsOneErrorText?: string;\n orderDetailsMultiErrorText?: string;\n addedQuantityText?: string;\n originalPriceText?: string;\n currentPriceText?: string;\n freePriceText?: string;\n}\n\n/**\n * Configuration of a buy selected component.\n */\nexport interface IBuySelectedProps extends IComponentProps {\n className: string;\n context: ICoreContext;\n\n resources: IBuySelectedResources;\n\n isIcon?: boolean;\n isReorderingEnabled?: boolean;\n}\n\n/**\n * Get the dialog strings.\n * @param props -- The buy selected props.\n * @returns The add to cart resources.\n */\nexport const getDialogStrings = (props: IBuySelectedProps): IAddToCartResources => {\n return {\n goToCartText: props.resources.orderDetailsGoToCartText ?? '',\n continueShoppingText: props.resources.orderDetailsDialogCloseText ?? '',\n closeNotificationLabel: props.resources.orderDetailsBuySelectedAddingToCartErrorNotificationCloseAriaLabel ?? '',\n headerItemOneText: props.resources.orderDetailsSingleItemText ?? '',\n headerItemFormatText: props.resources.orderDetailsMultiLineItemFormatText ?? '',\n headerLinesFormatText: props.resources.orderDetailsMultiLinesFormatText ?? '',\n headerMessageText: props.resources.orderDetailsHeaderMessageText ?? '',\n freePriceText: props.resources.freePriceText ?? '',\n originalPriceText: props.resources.originalPriceText ?? '',\n currentPriceText: props.resources.currentPriceText ?? '',\n addedQuantityText: props.resources.addedQuantityText ?? '',\n buyAgainNotificationTitle: props.resources.orderDetailsBuySelectedAddingToCartErrorNotificationTitle ?? '',\n buyAgainNotificationCloseAriaLabel: props.resources.orderDetailsBuySelectedAddingToCartErrorNotificationCloseAriaLabel ?? '',\n validationErrorMessage: props.resources.orderDetailsMultiItemsValidationErrorMessage,\n oneErrorText: props.resources.orderDetailsOneErrorText,\n multiErrorsText: props.resources.orderDetailsMultiErrorText\n };\n};\n\n/**\n * Renders a button which adds given products to the cart.\n * @param props - Configuration of the component.\n * @returns A react element or null if no products were given.\n */\nexport const BuySelectedComponent: React.FC = (props: IBuySelectedProps): JSX.Element | null => {\n const products = props.data.products.filter(product => !ObjectExtensions.isNullOrUndefined(product.simpleProduct));\n const buttonLabel = props.isIcon\n ? ''\n : props.resources.orderDetailsBuySelectedButtonText ?? props.resources.orderDetailsBuyItAgainLabel;\n const buttonAriaLabel = props.resources.orderDetailsBuySelectedButtonAriaLabel ?? props.resources.orderDetailsBuyItAgainAriaLabel;\n\n const singleProductCount = 1;\n if (props.data.products.length === singleProductCount && !props.data.products[0].isProductAvailable) {\n // Return disabled button\n return (\n \n {buttonLabel}\n \n );\n }\n\n if (!ArrayExtensions.hasElements(products)) {\n // Return disabled button\n return (\n \n {buttonLabel}\n \n );\n }\n\n const firstProduct: OrderDetailsProduct = products[0];\n\n // Reorder is not enable, buy again button link to product details page.\n if (!props.isReorderingEnabled) {\n return (\n \n {buttonLabel}\n \n );\n }\n\n const shouldSkipSiteSettings: boolean = true;\n const dialogStrings: IAddToCartResources = getDialogStrings(props);\n\n return (\n = ({\n orderInformationProps,\n salesId,\n receiptId,\n channelName,\n createdDate,\n count,\n amount,\n channelReferenceId\n}) => (\n \n {channelName}\n {salesId}\n {receiptId}\n {createdDate}\n {count}\n {amount}\n {channelReferenceId}\n \n);\n\nexport const OrderHistoryGroupDelivery: React.FC = ({\n deliveryProps,\n heading,\n count,\n processing,\n address,\n trackingInfo\n}) => (\n \n {heading}\n {count}\n {processing}\n {address}\n {trackingInfo}\n \n);\n\nexport const OrderHistoryGroup: React.FC = ({ groupProps, delivery, salesLinesProps, salesLines }) => (\n \n {delivery && \n {salesLines.map((salesLine: ISalesLine) => (\n {salesLine.salesLine} \n ))}\n \n )}\n \n);\n\nexport const OrderHistoryGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group: IGroup, index: number) => (\n \n);\n\nexport const OrderHistoryHeader: React.FC = ({ headerProps, heading, orderCountLabel, extraActions }) => (\n \n {heading}\n {orderCountLabel}\n {extraActions}\n \n);\n\nexport const OrderHistorySalesOder: React.FC = ({\n salesOrderProps,\n orderInfomation,\n groups,\n orderDetailsLink,\n expandProductsButton\n}) => (\n \n {orderInfomation && \n);\n\nexport const OrderHistoryList: React.FC = ({ listProps, salesOrders }) => (\n \n {salesOrders && salesOrders.map((salesOrder: ISalesOrder, index: number) => \n);\n\nconst OrderHistoryView: React.FC = ({\n orderHistoryProps,\n header,\n alert,\n loading,\n emptyMessage,\n backToShoppingLink,\n list,\n table,\n moreButton\n}) => (\n \n {header && \n);\n\nexport default OrderHistoryView;\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