= ({ name, label, value = 0, priceContext }) => (\n \n \n {label}\n \n {priceContext ? (\n \n ) : (\n \n {value}\n \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}: IGetOrderSummaryInput): IOrderSummary => {\n return {\n orderSummaryProps: { className: 'ms-order-details__order-summary' },\n heading: \n {orderSummaryHeading}\n
,\n subtotal: (\n \n ),\n shipping: canShip ? (\n \n ) : '',\n tax: ,\n totalAmount: (\n \n ),\n earnedPoints: earnedPoints ? : undefined\n };\n};\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt 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: { paymentMethodsTitle, creditCardEndingLabel, giftCardEndingLabel, amountCoveredLabel, loyaltyCardUsedLabel, cashUsedLabel, customerAccountUsedLabel }\n}: IPaymentMethodsInput): IPaymentMethods => {\n\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.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 {amountCoveredLabel}\n \n
}\n
\n
\n {customerAccountUsedLabel}\n {' '}\n {tenderLine.CustomerId}\n
\n
\n {amountCoveredLabel}\n \n
\n
\n
\n {giftCardEndingLabel}\n {' '}\n {getLastFourDigit(tenderLine.GiftCardId)}\n
\n
\n {amountCoveredLabel}\n \n
\n
\n
\n {loyaltyCardUsedLabel}\n {' '}\n {tenderLine.LoyaltyCardId}\n
\n
\n {amountCoveredLabel}\n \n
\n
\n
\n {cashUsedLabel}\n
\n
\n {amountCoveredLabel}\n \n
\n
\n {paymentMethodsTitle}\n
,\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","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { ChannelDeliveryOptionConfiguration, FeatureState, LoyaltyRewardPoint,\n ProductDeliveryOptions, SalesLine, SalesOrder, SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { Button, getTelemetryObject, IModuleProps, INodeProps, ITelemetryContent } 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 { getOrderInfomationInput, getOrderInformation, 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 { IOrderDetailsData } from './order-details.data';\nimport { addressOptions, IOrderDetailsProps } from './order-details.props.autogenerated';\n\nexport interface IOrderDetailsViewProps extends IOrderDetailsProps {\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 * OrderDetails component.\n * @extends {React.PureComponent>}\n */\nclass OrderDetails extends React.PureComponent> {\n private readonly moduleName: string = 'ms-order-details';\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 multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const { channelDeliveryOptionConfig, featureState } = this.props?.data;\n const retailMultiplePickUpOptionEnabled = featureState?.result?.find((item: FeatureState) => item.Name === multiplePickupStoreSwitchName)?.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\n const { salesId = '' } = request.query || {};\n const isCashAndCarryTransaction = (this.order.ChannelReferenceId === undefined || this.order.ChannelReferenceId === '') && salesId === '';\n\n const canShip = !isCashAndCarryTransaction && orderDetailsLines?.some(orderDetailsLine => ((orderDetailsLine.DeliveryMode && orderDetailsLine.DeliveryMode !== '') ? (orderDetailsLine.DeliveryMode !== this.getDeliveryMode(orderDetailsLine, retailMultiplePickUpOptionEnabled, channelDeliveryOptionConfig?.result, pickupDeliveryModeCode) && orderDetailsLine.DeliveryMode !== emailDeliveryModeCode) : orderDetailsLine));\n\n const {\n resources: { orderSummaryHeading, orderSummaryItemsTotalLabel, orderSummaryShippingFeeLabel, orderSummaryTaxLabel, orderSummaryGrandTotalLabel, pointsEarnedLabel }\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 };\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 constructor(props: IOrderDetailsProps) {\n super(props);\n this.telemetryContent = getTelemetryObject(this.props.context.request.telemetryPageName!, this.props.friendlyName, this.props.telemetry);\n }\n\n public render(): JSX.Element {\n const {\n resources: {\n noSalesOrderDetailsText,\n genericErrorMessage,\n needHelpLabel,\n helpLineNumberLabel,\n loadingLabel,\n orderItemLabel,\n orderItemsLabel,\n helpLineContactAriaLabel\n },\n config: { contactNumber, shouldShowQrCode, showChannelInfo, showTimeslot },\n context: { request: { query } }\n } = this.props;\n\n const showAddress = (this.props.config.addressOptions !== undefined &&\n this.props.config.addressOptions === addressOptions.showAddressWithSingleLine) ||\n this.props.config.addressOptions === addressOptions.showAddressWithMultiplelines;\n const showFullAddress = this.props.config.addressOptions !== undefined && this.props.config.addressOptions === addressOptions.showAddressWithMultiplelines;\n const channelIdentities = this.props.data.channels.result && this.props.data.channels.result.channelIdentities;\n const orgUnitLocations = this.props.data.orgUnitLocations.result && this.props.data.orgUnitLocations.result.orgUnitLocations;\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const { channelDeliveryOptionConfig, featureState } = this.props.data;\n const retailMultiplePickUpOptionEnabled = featureState.result?.find((item: FeatureState) => item.Name === multiplePickupStoreSwitchName)?.IsEnabled;\n\n let viewProps: IOrderDetailsViewProps = this.getOrderDetailsProps();\n\n if (this.hasError) {\n viewProps = {\n ...viewProps,\n alert: \n };\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n if (!this.isDataReady) {\n viewProps = {\n ...viewProps,\n loading: \n };\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n if (!this.order) {\n viewProps = {\n ...viewProps,\n alert: \n };\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n const salesLInput = getSalesLinesInput(this.props, this.moduleName, this.order, this.products,\n this.priceContext, showFullAddress, showTimeslot, this.telemetryContent, retailMultiplePickUpOptionEnabled,\n channelDeliveryOptionConfig?.result, this.deliveryOptions);\n const salesLines = salesLInput && getSalesLines(salesLInput);\n\n const orderInformationInput = getOrderInfomationInput(\n this.props,\n this.moduleName,\n this.order,\n this.priceContext,\n channelIdentities,\n orgUnitLocations,\n showChannelInfo,\n false,\n shouldShowQrCode ?? true\n );\n\n const orderInfomation = getOrderInformation(orderInformationInput);\n\n const { salesId = '' } = query || {};\n const isCashAndCarryTransaction = (this.order.ChannelReferenceId === undefined || this.order.ChannelReferenceId === '') && salesId === '';\n\n viewProps = {\n ...viewProps,\n salesOrder: this.order,\n orderInfomation,\n salesLines,\n groups: salesLines ? getGroups({\n moduleName: this.moduleName,\n salesLines,\n resources: { orderItemLabel, orderItemsLabel },\n showAddress,\n showTimeslot,\n retailMultiplePickUpOptionEnabled,\n isCashAndCarryTransaction\n }) : undefined,\n orderSummary: this.orderSummaryProps ? getOrderDetailsOrderSummary(this.orderSummaryProps) : undefined,\n payment: this.paymentMethodsProps ? getOrderDetailsPaymentMethods(this.paymentMethodsProps) : undefined,\n help: contactNumber ? getOrderDetailsHelp(\n { needHelpLabel, helpLineNumberLabel, contactNumber, helpLineContactAriaLabel, telemetryContent: this.telemetryContent }\n ) : undefined\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n public handleOrderDetailsHeadingChange = (event: Msdyn365.ContentEditableEvent) => this.props.config.heading!.text = event.target.value;\n\n /**\n * Get the order details view properties.\n * @returns {IOrderDetailsProps} The initial values of order details view properties.\n */\n private readonly getOrderDetailsProps = (): IOrderDetailsViewProps => {\n const {\n resources: { backToShopping },\n config: { heading }\n } = this.props;\n const moduleProps = { moduleProps: this.props, className: classname('ms-order-details', this.props.config.className) };\n const backToShoppingUrl = Msdyn365.getUrlSync('home', this.props.context.actionContext) ?? '';\n\n return {\n ...this.props,\n moduleProps,\n heading: heading && (\n \n ),\n backToShoppingLink: backToShoppingUrl && (\n \n ),\n footerProps: { className: 'ms-order-details__footer' }\n };\n };\n\n private readonly getDeliveryMode = (salesLine: SalesLine, featureSate: boolean = false, channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration, pickupDeliveryMode?: string) => {\n if (!featureSate) {\n return pickupDeliveryMode;\n }\n return channelDeliveryOptionConfig?.PickupDeliveryModeCodes?.find(deliveryMode => deliveryMode === salesLine.DeliveryMode);\n\n };\n}\n\nexport default OrderDetails;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\nimport { IVideoPlayerViewProps } from './video-player';\n\nconst VideoPlayerView: React.FC = props => (\n \n {props.player}\n \n);\n\nexport default VideoPlayerView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Address } 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: Address;\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
\n {deliveryType !== 'ship' ? storeLabel : shipToLabel}\n
\n {address.Name &&
\n {address.Name}\n }\n {showCompleteAddress ? (<>\n {address.Street &&
\n {address.Street}\n {' '}\n }\n {address.City &&
\n {address.City}\n }\n {address.State &&
\n {`, ${address.State}`}\n }\n {address.County &&
\n {`, ${address.County}`}\n }\n {address.ZipCode &&
\n {` ${address.ZipCode}`}\n }\n {address.ThreeLetterISORegionName &&
\n {` ${address.ThreeLetterISORegionName}`}\n }\n {address.Phone && (\n
\n \n {phoneLabel}\n \n \n {address.Phone}\n \n )}\n ) : address.FullAddress &&
\n {address.FullAddress}\n }\n
\n
\n {pickupDateTimeslotText}\n
\n
\n {pickupDateTimeslot}\n
\n
\n \n
\n ) : (\n \n ),\n address: salesLine.ShippingAddress && (\n \n ),\n deliveryType: deliveryTypeComp,\n salesStatus: salesStatusComp,\n trackingInfo,\n buyAgainButton: retailMultiplePickUpOptionEnabled ? isCurrentChannel && (\n \n {buyItAgainLabel}\n \n ) : isCurrentChannel && (\n \n {buyItAgainLabel}\n \n ),\n pickupDateTimeslot: pickupDateTimeslotInfo\n };\n};\n\nexport const getDeliveryType = (pickupMode: string, salesLine: SalesLine, salesLineDeliveryMode?: string, pickupDeliveryModeCode?: string, retailMultiplePickupOption?: boolean,\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration, emailDeliveryModeCode?: string): string => {\n let isPickupDeliveryMode: boolean;\n\n if (retailMultiplePickupOption) {\n isPickupDeliveryMode = salesLineDeliveryMode === channelDeliveryOptionConfig?.PickupDeliveryModeCodes?.find(dM => dM === salesLineDeliveryMode);\n } else {\n isPickupDeliveryMode = !!pickupDeliveryModeCode && pickupDeliveryModeCode !== '' && pickupDeliveryModeCode === salesLineDeliveryMode;\n }\n\n return isPickupDeliveryMode ? pickupMode : (emailDeliveryModeCode && emailDeliveryModeCode !== '' && emailDeliveryModeCode === salesLine.DeliveryMode ? deliveryTypeEnum.email : salesLine.DeliveryMode ? deliveryTypeEnum.ship : deliveryTypeEnum.carryOut);\n};\n\nexport const getDeliveryTypeString = (deliveryType: string, deliveryTypeStringMap: IDeliveryTypeStringMap, retailMultiplePickupOption?: boolean): 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 = (deliveryType: string, deliveryTypeStringMap: IDeliveryTypeStringMap, retailMultiplePickupOption?: boolean): 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\nexport const getPickupModeDesc = (product: SimpleProduct, salesLineDeliveryMode?: string, productDeliveryOptions?: ProductDeliveryOptions[], retailMultiplePickupOption?: boolean): string => {\n let deliveryOption: string = 'pickup';\n if (ArrayExtensions.hasElements(productDeliveryOptions) && product !== undefined) {\n let foundProductDeliveryOption;\n foundProductDeliveryOption = productDeliveryOptions?.find((deliveryO) => {\n return deliveryO && deliveryO.ProductId === product.RecordId;\n });\n const deliveryDesc = foundProductDeliveryOption?.DeliveryOptions ? foundProductDeliveryOption?.DeliveryOptions?.find(option => option.Code === salesLineDeliveryMode)?.Description : deliveryOption;\n if (deliveryDesc !== undefined) {\n deliveryOption = deliveryDesc;\n }\n }\n return deliveryOption;\n};\n\nexport const getStoreName = (salesLine: SalesLine, deliveryType?: string): string | undefined => {\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. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IActionContext, IGridSettings, IImageSettings } from '@msdyn365-commerce/core';\nimport { ChannelDeliveryOptionConfiguration, OrderShipments, ProductDeliveryOptions, SalesLine, SalesOrder, Shipment, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\n\nimport { getSalesLine, ISalesLine, ISalesLineResources } from './get-sales-line';\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 showCompleteAddress?: boolean;\n showTimeslot: boolean;\n telemetryContent?: ITelemetryContent;\n retailMultiplePickUpOptionEnabled?: boolean;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n productDeliveryOptions?: ProductDeliveryOptions[];\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}: IGetSalesLinesInput): ISalesLine[] => {\n return salesLines.map(salesLine => {\n const product = products.find(_product => _product.RecordId === salesLine.ProductId) || ({} as SimpleProduct);\n const shipment = shipments && shipments.find(_shipment => _shipment.ShipmentLines?.find(_shipmentLine => _shipmentLine.ItemId === product.ItemId));\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 });\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): 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 };\n};\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt 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 }) => (\n \n {salesLine}\n {buyAgainButton}\n \n);\n\nexport const OrderDetailsGroupDelivery: React.FC = ({ deliveryProps, heading, count, trackingInfo, shippedStatusCheck }) => (\n \n {heading}\n {count}\n {shippedStatusCheck === 'processing' ? trackingInfo : null}\n \n);\n\nexport const OrderDetailsGroup: React.FC = ({ groupProps, delivery, address, salesLinesProps, salesLines, isCashAndCarryTransaction }) => (\n \n {delivery && }\n {salesLines && (\n \n {salesLines.map(salesLine => (\n \n {salesLine.data.deliveryType === 'ship' && salesLine.data.shipment ? salesLine.trackingInfo : null}\n \n {!isCashAndCarryTransaction && salesLine.salesStatus}\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 \n);\n\nexport const OrderDetailsOrderSummary: React.FC = ({ orderSummaryProps, heading, subtotal, shipping, tax, totalAmount, earnedPoints }) => (\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 heading,\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 {groups && }\n {orderSummary && }\n {payment && }\n {help && }\n \n );\n};\n\nexport default OrderDetailsView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt 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 }) => (\n {label}\n);\n\nexport default Label;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt 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 \n {label}\n \n {priceContext ? (\n \n ) : (\n \n {value}\n \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}: IGetOrderSummaryInput): IOrderSummary => {\n return {\n orderSummaryProps: { className: 'ms-order-confirmation__order-summary' },\n heading: \n {orderSummaryHeading}\n
,\n subtotal: (\n \n ),\n shipping: canShip ? (\n \n ) : '',\n tax: ,\n totalAmount: (\n \n ),\n earnedPoints: earnedPoints ? : undefined\n };\n};\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt 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 \n {salesLine}\n \n);\n\nexport const OrderConfirmationGroupDelivery: React.FC = ({ deliveryProps, heading, count, processing, address, trackingInfo, pickupDateTimeslot }) => (\n \n {heading}\n {address}\n {pickupDateTimeslot}\n \n);\n\nexport const OrderConfirmationGroup: React.FC = ({ groupProps, delivery, salesLinesProps, salesLines }) => (\n \n {delivery && }\n {delivery && delivery.shippingItemsToYou}\n {salesLines && (\n \n {salesLines.map((salesLine: ISalesLine) => (\n \n ))}\n \n )}\n \n);\n\nexport const OrderConfirmationGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group: IGroup, index: number) => (\n \n ))}\n \n);\n\nexport const OrderConfirmationOrderSummary: React.FC = ({ orderSummaryProps, heading, subtotal, shipping, tax, totalAmount, earnedPoints }) => (\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 {backToShoppingLink}\n {groups && }\n {payment && }\n {orderSummary && }\n {help && }\n \n );\n};\n\nexport default OrderConfirmationView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IGroup, IGroupDelivery, IGroups } from '../../common/get-groups';\nimport { IOrderInformation } from '../../common/get-order-information';\nimport { ISalesLine } from '../../common/get-sales-line';\nimport { ISalesOrder } from './components/get-sales-order';\nimport { IHeader, IList, IOrderHistoryViewProps } from './order-history';\n\nexport const OrderHistoryOrderInfomation: React.FC = ({\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 = ({ deliveryProps, heading, count, processing, address, trackingInfo }) => (\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 && (\n \n {salesLines.map((salesLine: ISalesLine) => (\n \n {salesLine.salesLine}\n \n ))}\n \n )}\n \n);\n\nexport const OrderHistoryGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group: IGroup, index: number) => (\n \n ))}\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 = ({ salesOrderProps, orderInfomation, groups, orderDetailsLink }) => (\n \n {orderInfomation && }\n {groups && }\n {orderDetailsLink}\n \n);\n\nexport const OrderHistoryList: React.FC = ({ listProps, salesOrders }) => (\n \n {salesOrders && salesOrders.map((salesOrder: ISalesOrder, index: number) => )}\n \n);\n\nconst OrderHistoryView: React.FC = ({\n orderHistoryProps,\n header,\n alert,\n loading,\n emptyMessage,\n backToShoppingLink,\n list,\n moreButton\n}) => (\n \n {header && }\n {loading}\n {alert && (\n <>\n {alert}\n {backToShoppingLink}\n \n )}\n {emptyMessage && (\n <>\n {emptyMessage}\n {backToShoppingLink}\n \n )}\n {list && }\n {moreButton && moreButton}\n \n);\n\nexport default OrderHistoryView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt 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 {\n ICheckoutOrderConfirmationViewProps\n} from './checkout-order-confirmation';\n\nexport const OrderConfirmationOrderInfomation: React.FC = ({\n orderInformationProps,\n receiptEmail,\n createdDate,\n channelReferenceId\n}) => (\n \n {channelReferenceId}\n {receiptEmail}\n \n);\n\nexport const OrderConfirmationSalesLine: React.FC = ({ salesLineProps, salesLine, buyAgainButton }) => (\n \n {salesLine}\n \n);\n\nexport const OrderConfirmationGroupDelivery: React.FC = ({ deliveryProps, heading, count, processing, address, pickupDateTimeslot, trackingInfo }) => (\n \n {heading}\n {count}\n {address}\n {pickupDateTimeslot}\n \n);\n\nexport const OrderConfirmationGroup: React.FC = ({ groupProps, delivery, salesLinesProps, salesLines }) => (\n \n {delivery && }\n {salesLines && (\n \n {salesLines.map(salesLine => (\n \n ))}\n \n )}\n \n);\n\nexport const OrderConfirmationGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group, index) => (\n \n ))}\n \n);\n\nexport const OrderConfirmationOrderSummary: React.FC = ({ orderSummaryProps, heading, subtotal, shipping, tax, totalAmount, earnedPoints }) => (\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 {backToShoppingLink}\n {groups && }\n {orderSummary && }\n {payment && }\n {help && }\n \n );\n};\n\nexport default OrderConfirmationView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IAny, ICoreContext, IGeneric, IImageSettings, IModule, ITelemetry } from '@msdyn365-commerce/core';\nimport { SalesLine, TenderType } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { format } from '@msdyn365-commerce-modules/utilities';\nimport groupBy from 'lodash/groupBy';\n\nimport { ISalesLine } from './get-sales-line';\n\nexport interface IModuleComponentProps extends IModule {\n config: {\n imageSettings?: IImageSettings;\n showShippingChargesForLineItems?: boolean;\n };\n}\n\nexport interface IPriceContext {\n id: string;\n typeName: string;\n context: ICoreContext>;\n telemetry: ITelemetry;\n freePriceText: string;\n}\n\nexport const getTenderIdOperationIdMap = (tenderTypes: TenderType[]): object => {\n return tenderTypes.reduce((map, tenderType) => {\n if (tenderType.TenderTypeId) {\n map[tenderType.TenderTypeId] = tenderType.OperationId;\n }\n return map;\n }, {});\n};\n\nexport const countItems = (salesLines: SalesLine[]) => {\n return salesLines.reduce((count, salesLine) => {\n return count + (salesLine.Quantity || 0);\n }, 0);\n};\n\nexport const getSalesLinesByDelivery = (salesLines?: SalesLine[], pickupDeliveryModeCode?: string): SalesLine[] => {\n if (!salesLines || salesLines.length === 0) {\n return [];\n }\n return salesLines.filter(salesLine =>\n\n // IsPickUp ? getPickUp : getOthers\n ((pickupDeliveryModeCode && pickupDeliveryModeCode !== '') ? salesLine.DeliveryMode === pickupDeliveryModeCode : salesLine.DeliveryMode !== pickupDeliveryModeCode)\n );\n};\n\nexport const defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=80&h=80&m=6', w: 0, h: 0 },\n lg: { q: 'w=147&h=147&m=6', w: 0, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n};\n\nexport type IDeliveryType = 'pickUp' | 'ship' | 'carryOut' | 'email';\n\nexport type ISalesStatusCode = 'canceled' | 'readyForPickup' | 'pickedUp' | 'processing' | 'shipped' | 'unknown' | 'emailed';\n\nexport const getSalesStatusCode = (deliveryType: string, statusValue?: number, pickupMode?: string): ISalesStatusCode => {\n if (statusValue === 7) {\n return 'canceled';\n }\n\n if (pickupMode !== undefined) {\n switch (statusValue) {\n case 3:\n return 'readyForPickup';\n case 4:\n return 'pickedUp';\n default:\n return 'processing';\n }\n }\n if (deliveryType === 'pickUp') {\n switch (statusValue) {\n case 3:\n return 'readyForPickup';\n case 4:\n return 'pickedUp';\n default:\n return 'processing';\n }\n } else if (deliveryType === 'ship') {\n switch (statusValue) {\n case 3:\n return 'processing';\n case 4:\n return 'shipped';\n default:\n return 'processing';\n }\n } else if (deliveryType === 'email') {\n switch (statusValue) {\n case 3:\n return 'processing';\n case 4:\n return 'emailed';\n default:\n return 'processing';\n }\n } else if (deliveryType === 'carryOut') {\n return 'processing';\n } else {\n return 'unknown';\n }\n};\n\nexport type ITrackingId = string | 'unknown';\nexport type IAddressId = string | 'unknown';\n\nexport interface IGroupData {\n deliveryType: IDeliveryType;\n salesStatus: ISalesStatusCode;\n addressId: IAddressId | 'unknown';\n trackingId: ITrackingId | 'unknown';\n count: number;\n salesLines: ISalesLine[];\n}\n\nexport const groupSalesLines = (salesLines: ISalesLine[]): IGroupData[] => {\n const getGroupByDeliveryType = (items: ISalesLine[]) => groupBy(items, item => item.data.deliveryType);\n const getGroupBySalesStatusCode = (items: ISalesLine[]) => groupBy(items, item => item.data.salesStatus);\n const getGroupByTrackingId = (items: ISalesLine[]) => groupBy(items, item => item.data.salesLine.TrackingId || 'unknown');\n const getGroupByAddressId = (items: ISalesLine[]) => groupBy(items, item => (item.data.salesLine.ShippingAddress && item.data.salesLine.ShippingAddress.RecordId) || 'unknown');\n\n const flatGroup: IGroupData[] = [];\n\n // 1) Group by delivery type\n const group = getGroupByDeliveryType(salesLines);\n\n // 2) Group by sales status code\n Object.entries(group).forEach(([deliveryType, groupByDeliveryType]) => {\n // @ts-expect-error\n group[deliveryType] = getGroupBySalesStatusCode(groupByDeliveryType);\n\n Object.entries(group[deliveryType]).forEach(([salesStatus, groupBySalesStatusCode]) => {\n // @ts-expect-error 3) Group by address id\n groupBySalesStatusCode[salesStatus] = getGroupByAddressId(groupBySalesStatusCode);\n\n Object.entries(groupBySalesStatusCode[salesStatus]).forEach(([addressId, groupByAddressId]) => {\n // @ts-expect-error 4) Group by address id\n groupByAddressId[addressId] = getGroupByTrackingId(groupByAddressId);\n\n // @ts-expect-error\n Object.entries(groupByAddressId[addressId]).forEach(([trackingId, groupByTrackingId]) => {\n flatGroup.push({\n // @ts-expect-error\n deliveryType,\n\n // @ts-expect-error\n salesStatus,\n addressId,\n trackingId,\n\n // @ts-expect-error\n count: countItems(groupByTrackingId.map(item => item.data.salesLine)),\n\n // @ts-expect-error\n salesLines: groupByTrackingId\n });\n });\n });\n });\n });\n\n return flatGroup;\n};\n\nexport const getDateTimeslot = (placeHolder: string, startDate: Date | undefined, endDate: Date | undefined, locale: string): string => {\n if (!startDate || !endDate) {\n return '';\n }\n\n const dateOptions: Intl.DateTimeFormatOptions = {\n timeZone: 'UTC'\n };\n const dateformatter = new Intl.DateTimeFormat(locale, dateOptions);\n const date = dateformatter.format(new Date(startDate));\n\n const timeslotOptions: Intl.DateTimeFormatOptions = {\n hour: 'numeric',\n minute: 'numeric',\n hour12: true,\n timeZone: 'UTC'\n };\n const timeslotformatter = new Intl.DateTimeFormat(locale, timeslotOptions);\n const timeslot = format(placeHolder, timeslotformatter.format(new Date(startDate)), timeslotformatter.format(new Date(endDate)));\n return `${date} ${timeslot}`;\n};\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt 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\nconst renderFilterStateItem = (\n filterState: OrderHistoryFilterState,\n resources: IOrderHistoryFilterResources,\n className: string,\n onStateClick: (filterState: OrderHistoryFilterState) => void): React.ReactNode => {\n\n const stateStringRepresentation = OrderHistoryFilterState[filterState];\n\n const onClick = () => {\n onStateClick(filterState);\n };\n\n return (\n \n {getOrderHistoryFilterStateResources(filterState, resources)}\n \n );\n};\n\nconst OrderHistoryFilter: React.FC = (props: IOrderHistoryFilterProps) => {\n // Current version of filter doesn't include functionality for non b2b admins.\n if (!props.data.customerInformation.IsB2bAdmin) {\n return null;\n }\n\n const popoverRef = React.createRef();\n const [popoverState, setPopoverState] = React.useState(false);\n const togglePopover = () => {\n setPopoverState(!popoverState);\n };\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 {\n EnumExtensions.getEnumValues(OrderHistoryFilterState).map(state => {\n return renderFilterStateItem(state, props.resources, props.className, onFilterStateClick);\n })\n }\n \n \n {noOrderHistoryLable}\n
\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n const _orderCountLabel = salesOrders.length === 1 ? orderCountLabel : ordersCountLabel;\n this.payLoad.contentAction.etext = TelemetryConstant.ViewMore;\n const viewMoreAttributes = getTelemetryAttributes(this.telemetryContent!, this.payLoad);\n\n viewProps = {\n ...viewProps,\n header: {\n ...viewProps.header,\n orderCountLabel: \n {`(${salesOrders.length} ${_orderCountLabel})`}\n ,\n extraActions: this.renderExtraActions()\n },\n list: {\n listProps: { className: 'ms-order-history__sales-order-list' },\n salesOrders: salesOrders.map(salesOrder => getSalesOrder({\n ...this.props,\n products,\n salesOrder,\n channelIdentities,\n orgUnitLocations,\n showChannelInfo,\n telemetryContent: this.telemetryContent\n })\n )\n },\n moreButton: isShowMoreButton && (\n \n {moreButtonText}\n \n )\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n public handleOrderHistoryHeadingChange = (event: Msdyn365.ContentEditableEvent) => this.props.config.heading!.text = event.target.value;\n\n private readonly onMoreButtonClick = () => {\n this.getOrderHistory();\n };\n\n private readonly renderExtraActions = () => {\n return this.props.data.customerInformation && this.props.data.customerInformation.result && (\n \n );\n };\n\n private readonly initState = () => {\n this.orderHistory = {\n salesOrders: [],\n products: []\n };\n this.viewState = {\n isDataReady: false,\n hasError: false,\n isShowMoreButton: (this.props.config.pageSize || 0) > 0,\n isLoading: false\n };\n this.pageSize = this.props.config.pageSize || 10;\n this.paging = {\n top: this.pageSize,\n skip: 0\n };\n };\n\n private readonly onFilterStateChanged = (state: OrderHistoryFilterState) => {\n this.initState();\n this.filterState = state;\n this.getOrderHistory()\n .then(() => {\n this.viewState.isDataReady = true;\n })\n .catch(error => {\n this.viewState.hasError = true;\n });\n };\n\n private readonly getOrderHistory = async (): Promise => {\n const actionContext = this.props.context.actionContext;\n const input = new GetSalesOrderHistoryWithHydrationsInput(this.paging, this.props.context.request.apiSettings, this.filterState);\n\n try {\n this.viewState.isLoading = true;\n const response = await getSalesOrderHistoryWithHydrationsAction(input, actionContext);\n if (response) {\n const { products, salesOrders } = response;\n this.orderHistory.products.push(...products);\n this.orderHistory.salesOrders.push(...salesOrders);\n this.viewState.isShowMoreButton = this.viewState.isShowMoreButton && response.salesOrders.length > 0 && response.salesOrders.length === this.pageSize;\n this.paging.skip += this.pageSize;\n }\n this.viewState.isLoading = false;\n await Promise.resolve(); return;\n } catch {\n return Promise.reject();\n }\n };\n}\n\nexport default OrderHistory;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { getUrlSync } from '@msdyn365-commerce/core';\nimport { ChannelDeliveryOptionConfiguration, ChannelIdentity, OrderShipments, OrgUnitLocation, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { Button, getPayloadObject, getTelemetryAttributes, INodeProps, ITelemetryContent, TelemetryConstant } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { getGroups, IGroups } from '../../../common/get-groups';\nimport { getOrderInfomationInput, getOrderInformation, IOrderInformation } from '../../../common/get-order-information';\nimport { getSalesLines, getSalesLinesInput } 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 showChannelInfo?: boolean;\n telemetryContent?: ITelemetryContent;\n retailMultiplePickUpOptionEnabled?: boolean;\n channelDeliveryOptionConfig?: ChannelDeliveryOptionConfiguration;\n}\n\nexport interface ISalesOrder {\n salesOrderProps: INodeProps;\n orderInfomation: IOrderInformation;\n groups?: IGroups;\n orderDetailsLink: React.ReactNode;\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 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 _getorderDetailsPageUrl = (): string => {\n const url = getUrlSync('orderDetails', actionContext) || '';\n const separator = url.includes('?') ? '&' : '?';\n if (salesOrder.SalesId) {\n // Redirect with sales order sales id\n return `${url}${separator}salesId=${salesOrder.SalesId}`;\n }\n\n // Redirect with sales order transaction id\n return `${url}${separator}transactionId=${salesOrder.TransactionId}`;\n\n };\n\n const salesOrderProps = { className: 'ms-order-history__sales-order', key: salesOrder.SalesId || salesOrder.TransactionId };\n\n const orderInfomationInput = getOrderInfomationInput(input, moduleName, salesOrder, priceContext, channelIdentities, orgUnitLocations, showChannelInfo);\n const orderInfomation = getOrderInformation(orderInfomationInput);\n\n const salesLinesInput = products && getSalesLinesInput(input, moduleName, salesOrder, products, priceContext, undefined, undefined, undefined,\n retailMultiplePickUpOptionEnabled, channelDeliveryOptionConfig);\n const salesLines = salesLinesInput && getSalesLines({ ...salesLinesInput, imageOnly: true });\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 };\n};\n"],"sourceRoot":""}