): void;\n onCloseButtonClick(): void;\n}\n\nexport interface ICartLineItemViewProps {\n promotionMessageWrapper: INodeProps;\n promotionMessage: React.ReactNode;\n promotionSeeAllLink: React.ReactElement;\n promotionDialog: React.ReactNode;\n}\n\nexport interface ICartLineItemPromotionResourceString {\n promotionLinkText: string;\n promotionStringHeading: string;\n promotionPopupHeading: string;\n promotionCloseButtonAriaLabel: string;\n}\n\nexport const cartPromotions = (props: ICartLineItemPromotion): ICartLineItemViewProps | undefined => {\n const {\n id,\n showPromotionPopup,\n promotions,\n resources: { promotionLinkText, promotionPopupHeading },\n onCloseButtonClick,\n onSeeAllClick\n } = props;\n\n if (!ArrayExtensions.hasElements(promotions)) {\n return;\n }\n\n const titleId = `${id}_title`;\n const className = 'msc-cart__promotion';\n return {\n promotionMessageWrapper: {\n className: 'msc-cart__promotion'\n },\n promotionMessage: (\n <>\n {props.resources.promotionStringHeading} \n \n ),\n promotionSeeAllLink: (\n \n {` `}\n {promotionLinkText} {` `}\n \n ),\n promotionDialog: (\n \n \n \n {promotionPopupHeading}\n \n \n \n \n {promotions.map(_promotion => {\n return (\n \n {_promotion.Promotion?.OfferName} {` `}\n \n );\n })}\n \n \n \n )\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport MsDyn365 from '@msdyn365-commerce/core';\nimport { IInvoiceSummaryLines } from '@msdyn365-commerce-modules/invoice-payment-summary';\nimport { IOrderSummaryLines } from '@msdyn365-commerce-modules/order-summary-utilities';\nimport { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { INodeProps, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ICartViewProps, IOrderSummaryErrors } from './cart';\nimport { ICartlinesViewProps } from './components/cart-line-items';\nimport { ICartLineItemViewProps } from './components/cart-line-items-promotion';\n\nconst _renderCartlines = (\n cartLines: ICartlinesViewProps[] | undefined,\n cartEmptyText: string,\n CartlinesWrapper: INodeProps,\n storeSelector: React.ReactNode | undefined,\n backToShoppingButton: React.ReactNode,\n waitingComponent: React.ReactNode,\n cartLoadingStatus: string,\n cartDataResult: boolean\n): JSX.Element[] | JSX.Element => {\n if (cartLoadingStatus) {\n return <>{cartLoadingStatus};\n }\n if (cartLines) {\n return cartLines.map(cartLine => {\n return (\n \n {cartLine.cartline}\n {storeSelector && cartLine.pickUpInStore ? (\n {cartLine.pickUpInStore.defaultComponent} \n ) : null}\n {cartLine.addToOrderTemplate ? (\n \n {cartLine.remove}\n {cartLine.addToWishlist}\n {cartLine.addToOrderTemplate}\n \n ) : (\n <>\n {cartLine.remove}\n {cartLine.addToWishlist}\n \n )}\n
\n );\n });\n }\n return cartDataResult ? (\n \n
{cartEmptyText}
\n {backToShoppingButton}\n
\n {errorData.header}\n {errorData.errors}\n \n );\n};\n\n/**\n * Method will render invoice summary lines.\n * @param invoiceSummaryLines -The invoicesummary lines interface.\n * @param OrderSummaryItems -The order summary items props.\n * @param props -The cartview props.\n * @returns Jsx element.\n */\nconst _renderInvoiceSummarylines = (\n invoiceSummaryLines: IInvoiceSummaryLines | undefined,\n OrderSummaryItems: INodeProps,\n props: ICartViewProps\n): JSX.Element | null => {\n if (!invoiceSummaryLines) {\n props.context.telemetry.error('InvoiceSummary content is empty, module wont render');\n return null;\n }\n return (\n \n {invoiceSummaryLines.invoices}\n {invoiceSummaryLines.giftCard}\n {invoiceSummaryLines.loyalty}\n {invoiceSummaryLines.orderTotal}\n \n );\n};\n\n/**\n * Method will render order summary lines.\n * @param orderSummaryLines -The ordersummary lines interface.\n * @param OrderSummaryItems -The order summary items props.\n * @param props -The cartview props.\n * @returns Jsx element.\n */\nconst _renderOrderSummarylines = (\n orderSummaryLines: IOrderSummaryLines | undefined,\n OrderSummaryItems: INodeProps,\n props: ICartViewProps\n): JSX.Element | null => {\n if (!orderSummaryLines) {\n props.context.telemetry.error('OrderSummary content is empty, module wont render');\n return null;\n }\n return (\n \n {props.promoCode}\n {orderSummaryLines.subtotal}\n {orderSummaryLines.shipping}\n {orderSummaryLines.otherCharge}\n {orderSummaryLines.tax}\n {orderSummaryLines.totalDiscounts ? orderSummaryLines.totalDiscounts : null}\n {orderSummaryLines.orderTotal}\n \n );\n};\n\n/**\n * Method will render cart promotions.\n * @param promotions -The cartline item view props.\n * @returns Jsx element.\n */\nconst _renderPromotions = (promotions: ICartLineItemViewProps): JSX.Element | undefined => {\n return (\n <>\n \n {promotions.promotionMessage}\n {promotions.promotionSeeAllLink}\n {promotions.promotionDialog}\n \n \n );\n};\n\n/**\n * Method will render cartlines group title.\n * @param cartLine -The cartline view props.\n * @param titleSeparate -The title separate.\n * @returns Jsx element.\n */\nconst renderCartLinesGroupTitle = (cartLine: ICartlinesViewProps, titleSeparate: string) => {\n const isBopisSelected: boolean | undefined = cartLine.pickUpInStore?.isBopisSelected;\n return (\n <>\n \n {isBopisSelected ? (\n \n {cartLine.pickUpInStore?.deliveryOption}\n {titleSeparate}\n {cartLine.pickUpInStore?.orgUnitName}\n
\n ) : null}\n \n \n );\n};\n\n/**\n * Method will render cartlines groups header title.\n * @param pickUpText -The pickup text for group.\n * @param shippingText -The shipping text for group.\n * @param emailShippingText -The email shipping text for group.\n * @param titleSeparate -The title separator.\n * @param cartLine -The cartline view props.\n * @param emailDeliveryModeCode -The email delivery code from channel.\n * @returns Jsx element.\n */\nconst renderCartLinesGroupHeader = (\n pickUpText: string,\n shippingText: string,\n emailShippingText: string,\n titleSeparate: string,\n cartLine: ICartlinesViewProps,\n emailDeliveryModeCode?: string\n) => {\n const isBopisSelected: boolean | undefined = cartLine.pickUpInStore?.isBopisSelected;\n let groupTitle: string;\n\n groupTitle = isBopisSelected ? pickUpText : shippingText;\n if (!StringExtensions.isNullOrEmpty(emailDeliveryModeCode)) {\n groupTitle = cartLine.data && cartLine.data.cartline.DeliveryMode === emailDeliveryModeCode ? emailShippingText : groupTitle;\n }\n\n return (\n <>\n \n
\n
{groupTitle}
\n {renderCartLinesGroupTitle(cartLine, titleSeparate)}\n
\n {props.cartLinesGroup.map(cartlines => {\n return (\n
\n {renderCartLinesGroupHeader(\n props.resources.pickUpText,\n props.resources.shippingText,\n props.resources.emailshippingText,\n props.resources.titleSeparate,\n cartlines[0],\n props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode\n )}\n {_renderCartlines(\n cartlines,\n props.resources.emptyCartText,\n props.CartlinesWrapper,\n props.storeSelector,\n props.backToShoppingButton,\n props.waitingComponent,\n props.cartLoadingStatus,\n props.cartDataResult\n )}\n
\n );\n })}\n
\n
\n
{props.resources.emptyCartText}
\n {props.backToShoppingButton}\n
\n
= (props: ICartViewProps) => (\n \n {props.title}\n {!props.cart?.hasInvoiceLine && props.promotionOptions && _renderPromotions(props.promotionOptions)}\n {props.multiplePickUpEnabled ? (\n renderCartLinesGroup(props)\n ) : (\n \n {_renderCartlines(\n props.cartlines,\n props.resources.emptyCartText,\n props.CartlinesWrapper,\n props.storeSelector,\n props.backToShoppingButton,\n props.waitingComponent,\n props.cartLoadingStatus,\n props.cartDataResult\n )}\n \n )}\n {props.orderSummaryHeading && (\n \n {props.orderSummaryHeading}\n {props.cart?.hasInvoiceLine\n ? _renderInvoiceSummarylines(props.invoiceSummaryLineitems, props.OrderSummaryItems, props)\n : _renderOrderSummarylines(props.orderSummaryLineitems, props.OrderSummaryItems, props)}\n {_renderErrorBlock(props.OrderSummaryErrors)}\n {props.checkoutAsSignInUserButton}\n {props.checkoutAsGuestButton}\n {props.expressCheckoutButton && ArrayExtensions.hasElements(props.expressCheckoutButton) ? (\n {props.expressCheckoutButton} \n ) : null}\n {props.backToShoppingButton}\n {props.createTemplateFromCartButton}\n \n )}\n {props.storeSelector}\n
\n);\n\nexport default CartView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { PriceComponent } from '@msdyn365-commerce/components';\nimport { ICoreContext, ITelemetry } from '@msdyn365-commerce/core';\nimport { ICheckoutState, IGiftCardExtend } from '@msdyn365-commerce/global-state';\nimport { Cart, CartLine } from '@msdyn365-commerce/retail-proxy';\nimport { format } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface IInvoiceSummaryProps {\n orderTotalLabel: string;\n invoiceLabel: string;\n loyaltyLabel?: string;\n giftcardLabel?: string;\n context: ICoreContext;\n telemetry: ITelemetry;\n cart: Cart;\n id: string;\n typeName: string;\n freeText?: string;\n toBeCalculatedText?: string;\n checkoutState?: ICheckoutState;\n}\n\nexport interface IInvoiceSummaryLines {\n orderTotal: React.ReactNode;\n invoices: React.ReactNode;\n giftCard?: React.ReactNode;\n loyalty?: React.ReactNode;\n}\n\ninterface IInvoiceSummaryLineProps {\n label: string;\n context: ICoreContext;\n telemetry: ITelemetry;\n price?: number;\n freeText?: string;\n toBeCalculatedText?: string;\n id: string;\n typeName: string;\n cssLabel: string;\n}\n\nconst InvoiceSummaryLine: React.FC = ({\n price,\n label,\n context,\n id,\n typeName,\n toBeCalculatedText,\n freeText,\n cssLabel\n}) => {\n return (\n \n {label} \n {price || price === 0 ? (\n {toBeCalculatedText} \n )}\n
\n );\n};\n\nconst _buildPaymentSummarySection = (\n props: IInvoiceSummaryProps,\n price: number | undefined,\n label: string,\n cssLabel: string\n): React.ReactNode => {\n return (\n {\n state: IMediaGalleryState;\n MediaGallery: IModuleProps;\n CarouselProps: INodeProps;\n Thumbnails: IMediaGalleryThumbnailsViewProps;\n Modal?: React.ReactElement | null;\n callbackToggle?(): void;\n callbackThumbnailClick?(index: number): void;\n callbackThumbnailKeyDown?(index: number): void;\n}\n\n/**\n * Props for carousel.\n */\ninterface IMediaGalleryCarouselItems {\n items: ItemType[];\n keys: (string | undefined)[];\n}\n\n/**\n * Media gallery component.\n */\nclass MediaGallery extends React.Component, IMediaGalleryState> {\n private readonly _inlineZoomDivRef: Map = new Map();\n\n private readonly fullScreenOverlayButtonRef: React.RefObject = React.createRef();\n private readonly player: React.RefObject = React.createRef();\n private fallbackImage?: string;\n\n private readonly defaultGalleryImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=767&h=767&m=8', w: 0, h: 0 },\n sm: { q: 'w=600&h=600&m=8', w: 0, h: 0 },\n md: { q: 'w=600&h=772&m=8', w: 0, h: 0 },\n lg: { q: 'h=772&m=8', w: 0, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n };\n\n private readonly defaultThumbnailImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=100&m=8', w: 100, h: 0 },\n lg: { q: 'w=100&m=8', w: 100, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n };\n\n private readonly _zoomedImageSettings: IImageSettings;\n\n public constructor(props: IMediaGalleryProps) {\n super(props);\n this._toggleModal = this._toggleModal.bind(this);\n const mediaGalleryImages = this.getImagesData();\n this.state = {\n activeIndex: 0,\n animating: false,\n isImageZoomed: false,\n modalIsOpen: false,\n isInitialLoad: true,\n shouldUseOptimizedImage: !!this.props.config.skipImageValidation,\n mediaGalleryItems: mediaGalleryImages\n };\n\n this._zoomedImageSettings =\n props.config.zoomedImageSettings ?? props.config.galleryImageSettings ?? this.defaultGalleryImageSettings;\n\n this._onImageMouseOut = this._onImageMouseOut.bind(this);\n this._inlineZoomImageOnHover = this._inlineZoomImageOnHover.bind(this);\n this._onInlineImageClick = this._onInlineImageClick.bind(this);\n this._onContainerZoomImageClick = this._onContainerZoomImageClick.bind(this);\n this._onMouseOutLensContainer = this._onMouseOutLensContainer.bind(this);\n }\n\n public isMobile(): boolean {\n const size = isMobile({ variant: VariantType.Viewport, context: this.props.context.request });\n return size === 'xs';\n }\n\n public async componentDidMount(): Promise {\n const source = this.props.config.imageSource ?? imageSource.pageContext;\n const shouldUpdateOnPartialDimensionSelection = this.props.config.shouldUpdateOnPartialDimensionSelection;\n this._setRenderType();\n if (!this.props.context.request.app?.config?.OmniChannelMedia) {\n if (source === imageSource.pageContext) {\n if (this.state.mediaGalleryItems === undefined && this.props.data.mediaLocationsForSelectedVariant.result) {\n const images = await validateProductImages(\n this.props.data.mediaLocationsForSelectedVariant.result,\n this.props.context.actionContext,\n this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings\n );\n await this._setImages(images);\n } else if (this.state.mediaGalleryItems === undefined && this.props.data.product.result) {\n const product = this.props.data.product.result;\n const images = await getValidProductImages(\n product.RecordId,\n +this.props.context.request.apiSettings.channelId,\n this.props.context.actionContext,\n this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n product.productVariant\n );\n\n await this._setImages(images);\n } else {\n await this._setImages([]);\n }\n }\n }\n\n reaction(\n () => {\n const product = this.props.data.product.result;\n if (!product) {\n return null;\n }\n\n if (!shouldUpdateOnPartialDimensionSelection || !product.productVariant?.RecordId) {\n return `${product.RecordId}`;\n }\n\n return `${product.RecordId}-${product.productVariant.RecordId}`;\n },\n async () => {\n const product = this.props.data.product.result;\n let images: IImageData[] = [];\n if (product) {\n if (this.props.context.app?.config?.OmniChannelMedia) {\n images = await getProductImages(\n product.RecordId,\n this.shouldUseCmsAltText(),\n +this.props.context.request.apiSettings.channelId,\n this.props.context.actionContext,\n product.Name,\n shouldUpdateOnPartialDimensionSelection ? product.productVariant : undefined\n );\n } else {\n images = await getValidProductImages(\n product.RecordId,\n +this.props.context.request.apiSettings.channelId,\n this.props.context.actionContext,\n this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n shouldUpdateOnPartialDimensionSelection ? product.productVariant : undefined\n );\n }\n await this._setImages(images);\n } else {\n await this._setImages([]);\n }\n },\n { fireImmediately: true }\n );\n\n if (source === imageSource.productId && this.props.data.mediaLocations.result) {\n const images = await validateProductImages(\n this.props.data.mediaLocations.result,\n this.props.context.actionContext,\n this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings\n );\n await this._setImages(images);\n }\n }\n\n public shouldComponentUpdate(nextProps: IMediaGalleryProps, nextState: IMediaGalleryState): boolean {\n if (this.state === nextState && this.props.data === nextProps.data) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element {\n const { id, config, resources } = this.props;\n\n const { className, showPaginationTooltip } = config;\n\n const isVertical: boolean = config.thumbnailsOrientation === thumbnailsOrientation.vertical;\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- || is required.\n const isFullscreenAllowed: boolean = this.isMobile() || config.allowFullScreen || false;\n const zoomViewMode: string =\n config.imageZoom === imageZoom.inline ? imageZoom.inline : config.imageZoom === imageZoom.container ? imageZoom.container : '';\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Site level config can be of any type.\n const emptyPlaceHolderImage = this.props.context.app.config?.placeholderImageName as string;\n if (this.props.data.product.result) {\n this.fallbackImage = getFallbackImageUrl(\n this.props.data.product.result.ItemId,\n this.props.context.request.apiSettings,\n this.props.context.request.app?.config?.OmniChannelMedia\n );\n }\n if (emptyPlaceHolderImage && this.fallbackImage) {\n this.fallbackImage = `${this.fallbackImage},${emptyPlaceHolderImage}`;\n }\n\n const mediaGalleryCarouselItems = this._getMediaGalleryItems(isFullscreenAllowed, zoomViewMode);\n const mediaGalleryThumbnailCarouselItems = this._getMediaGalleryThumbnailItems();\n const viewProps: IMediaGalleryViewProps = {\n ...(this.props as IMediaGalleryProps),\n state: this.state,\n MediaGallery: {\n moduleProps: this.props,\n className: classnames(`ms-media-gallery ${isVertical ? 'vertical' : ''}`, className)\n },\n Modal: isFullscreenAllowed ? this.imageModalSlider(zoomViewMode) : null,\n callbackToggle: this.openModalDialog,\n callbackThumbnailClick: this._generateOnThumbnailClick,\n callbackThumbnailKeyDown: this._generateOnThumbnailKeyDown,\n CarouselProps: {\n tag: Carousel,\n className: 'ms-media-gallery__carousel',\n items: mediaGalleryCarouselItems.items,\n activeIndex: this.state.activeIndex,\n next: this.next,\n previous: this.previous,\n interval: false,\n directionTextPrev: resources.previousScreenshotFlipperText,\n directionTextNext: resources.nextScreenshotFlipperText,\n onIndicatorsClickHandler: this.goToIndex,\n showPaginationTooltip: showPaginationTooltip === true,\n indicatorAriaText: resources.ariaLabelForSlide,\n handleOnExited: this.onExited,\n handleOnExiting: this.onExiting,\n key: mediaGalleryCarouselItems.keys\n } as IComponentNodeProps,\n Thumbnails: {\n ThumbnailsContainerProps: { className: 'ms-media-gallery__thumbnails-container' },\n SingleSlideCarouselComponentProps: {\n tag: SingleSlideCarousel,\n className: 'ms-media-gallery__thumbnails',\n vertical: isVertical,\n flipperPrevLabel: resources.previousScreenshotFlipperText,\n flipperNextLabel: resources.nextScreenshotFlipperText,\n parentId: id,\n useTabList: true,\n key: JSON.stringify(mediaGalleryThumbnailCarouselItems.keys)\n } as IComponentNodeProps,\n items: mediaGalleryThumbnailCarouselItems.items\n }\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * Zoomed out image on previous/next click.\n */\n public updateZoomedInImage(): void {\n this.setState({ isImageZoomed: false });\n }\n\n private readonly onExiting = () => {\n this.setState({ animating: true });\n };\n\n private readonly onExited = () => {\n this.setState({ animating: false });\n };\n\n /**\n * On click next in carousel.\n */\n private readonly next = (): void => {\n removeInlineZoomStyle();\n if (this.isLastItem() === undefined) {\n return;\n }\n\n const nextIndex = this.isLastItem() ? 0 : this.state.activeIndex + 1;\n this.goToIndex(nextIndex);\n\n this.updateZoomedInImage();\n };\n\n /**\n * On click previous in carousel.\n */\n private readonly previous = (): void => {\n removeInlineZoomStyle();\n const images = this.state.mediaGalleryItems;\n const nextIndex = this.isFirstItem() ? (images ? images.length - 1 : 0) : this.state.activeIndex - 1;\n this.goToIndex(nextIndex);\n this.updateZoomedInImage();\n };\n\n private readonly goToIndex = (index: number): void => {\n const { autoplay } = this.props.config;\n const currentIndex = this.state.activeIndex;\n const mediaItems = this.state.mediaGalleryItems;\n if (autoplay && mediaItems) {\n if (mediaItems[`${index}`]?.mediaTypeValue === MediaType.Video) {\n this.player.current?.play();\n } else if (mediaItems[`${currentIndex}`].mediaTypeValue === MediaType.Video) {\n this.player.current?.pause();\n }\n }\n this.setState({ activeIndex: index });\n };\n\n private _getMediaGalleryThumbnailItems(): IMediaGalleryCarouselItems {\n const mediaGalleryItems = this.state.mediaGalleryItems;\n const thumbnailImageSettings = this.props.config.thumbnailImageSettings;\n if (thumbnailImageSettings) {\n thumbnailImageSettings.cropFocalRegion = true;\n }\n\n const hasMediaGalleryItems = ArrayExtensions.hasElements(mediaGalleryItems);\n\n if (!hasMediaGalleryItems) {\n if (this.state.lastUpdate) {\n const defaultKey = 0;\n return {\n items: [this._getEmptyThumbnailItem(thumbnailImageSettings, defaultKey, this.state.activeIndex)],\n keys: ['empty']\n };\n }\n return { items: [], keys: [] };\n }\n\n return {\n items: [\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n ...mediaGalleryItems!.map((item: IMediaData, index: number) => {\n if (item.mediaTypeValue === MediaType.Video) {\n return this.getVideoThumbNailItem(\n item,\n thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n index,\n this.state.activeIndex\n );\n } else {\n return this._getThumbnailItem(\n item,\n thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n index,\n this.state.activeIndex\n );\n }\n })\n ],\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n keys: [...mediaGalleryItems!.map(item => item.src)]\n };\n }\n\n private getImagesData = (): IImageData[] => {\n if (this.props.config.skipImageValidation || this.props.context.request.app?.config?.OmniChannelMedia) {\n const source = this.props.config.imageSource ?? imageSource.pageContext;\n let images: IImageData[] = [];\n let mediaLocations: MediaLocation[] = [];\n if (source === imageSource.pageContext && this.props.data.mediaLocationsForSelectedVariant.result) {\n mediaLocations = this.props.data.mediaLocationsForSelectedVariant.result;\n } else if (source === imageSource.productId && this.props.data.mediaLocations.result) {\n mediaLocations = this.props.data.mediaLocations.result;\n }\n images = mediaLocations.map(mediaLocation => {\n return {\n src: mediaLocation.Uri ?? '',\n altText: getAltText(\n this.props.context.actionContext.requestContext,\n this.shouldUseCmsAltText(),\n this.props.data.product.result?.Name,\n mediaLocation.AltText\n ),\n additionalProperties: mediaLocation.IsApplicableForChildEntities\n ? {\n isApplicableForChildEntities: 'true'\n }\n : undefined\n };\n });\n const curatedImages = this.props.config.images ?? [];\n\n return [...this._filterMasterImageFromVariant(images), ...curatedImages];\n }\n return [];\n };\n\n private _getMediaGalleryItems(isFullscreenAllowed: boolean, zoomViewMode: string): IMediaGalleryCarouselItems {\n const mediaGalleryItems = this.state.mediaGalleryItems;\n const galleryImageSettings = this.props.config.galleryImageSettings;\n if (galleryImageSettings) {\n galleryImageSettings.cropFocalRegion = true;\n }\n\n const zoomView = isFullscreenAllowed ? 'fullscreen' : zoomViewMode;\n\n const hasMediaGalleryItems = ArrayExtensions.hasElements(mediaGalleryItems);\n\n if (!hasMediaGalleryItems) {\n if (this.state.lastUpdate) {\n return { items: [this._renderEmptyImage(galleryImageSettings)], keys: ['empty'] };\n }\n return { items: [], keys: [] };\n }\n\n return {\n items: [\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n ...mediaGalleryItems!.map((item: IMediaData, index: number) => {\n return this._renderCarouselItemImageView(\n zoomView,\n item,\n galleryImageSettings ?? this.defaultGalleryImageSettings,\n index\n );\n })\n ],\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n keys: [...mediaGalleryItems!.map(item => item.src)]\n };\n }\n\n private async _setImages(images?: IMediaData[]): Promise {\n const curatedImage = this.props.config.images || [];\n const mediaToSet: IMediaData[] = this._filterMasterImageFromVariant(images);\n\n void Promise.all(\n mediaToSet.map(async mediaData => {\n if (mediaData.mediaTypeValue === MediaType.Video && mediaData.src) {\n try {\n const url = new URL(mediaData.src);\n const videoId = url.searchParams.get('CVID');\n if (videoId) {\n mediaData.videoData = await getVideoMetadataFromApi(videoId, this.props.context.actionContext);\n }\n } catch (error) {\n if (this.props.telemetry) {\n this.props.telemetry.debug('Error while fetching videoId');\n }\n }\n }\n return mediaData;\n })\n ).then(mediaData => {\n const mediaItems = mediaData.filter(element => {\n return (\n element.mediaTypeValue !== MediaType.Video ||\n (element.mediaTypeValue === MediaType.Video && element.videoData !== undefined)\n );\n });\n\n this.setState({\n mediaGalleryItems: [...mediaItems, ...curatedImage],\n activeIndex: 0,\n lastUpdate: Date.now(),\n shouldUseOptimizedImage: false\n });\n });\n\n this.setState({\n mediaGalleryItems: [...mediaToSet, ...curatedImage],\n activeIndex: 0,\n lastUpdate: Date.now(),\n shouldUseOptimizedImage: false\n });\n }\n\n private _setRenderType(): void {\n this.setState({\n isInitialLoad: false\n });\n }\n\n private _renderCarouselItemImageView(\n zoomView: string,\n media: IMediaData,\n imageSettings: IImageSettings,\n index: number,\n isInPopup: boolean = false\n ): React.ReactNode {\n if (media.mediaTypeValue === MediaType.Video) {\n if (isInPopup || zoomView !== 'fullscreen') {\n return <>{this._renderCarouselItemVideo(media, index, imageSettings)};\n }\n return <>{this._renderVideoThumbnail(media, index, imageSettings)};\n } else {\n if (this.isMobile()) {\n if (isInPopup) {\n return this._renderImageInContainerOnZoom(media, this._zoomedImageSettings, index);\n }\n return this._renderImageFullScreenOnZoom(media, imageSettings, index);\n }\n\n switch (zoomView) {\n case 'container': {\n return this._renderImageInContainerOnZoom(media, this._zoomedImageSettings, index);\n }\n case 'inline': {\n return this._renderImageInlineOnZoom(media, this._zoomedImageSettings, index);\n }\n case 'fullscreen': {\n return this._renderImageFullScreenOnZoom(media, imageSettings, index);\n }\n\n // No default\n }\n return <>{this._getCarouselItem(media, imageSettings, index, isInPopup)};\n }\n }\n\n private _filterMasterImageFromVariant(images?: IImageData[]): IImageData[] {\n const shouldHidePrimaryImages = this.props.config.shouldHideMasterProductImagesForVariant ?? true;\n let variantImages = images ?? [];\n const isVariantProduct =\n !ObjectExtensions.isNullOrUndefined(this.props.data.product.result?.MasterProductId) ||\n !ObjectExtensions.isNullOrUndefined(this.props.data.product.result?.productVariant);\n const itemId = this.props.data.product.result?.ItemId;\n if (shouldHidePrimaryImages && isVariantProduct && itemId) {\n variantImages = variantImages.filter(item => {\n const isApplicableForChildEntities = item.additionalProperties?.isApplicableForChildEntities;\n return !isApplicableForChildEntities;\n });\n if (!ArrayExtensions.hasElements(variantImages)) {\n variantImages = images ?? [];\n }\n }\n return variantImages;\n }\n\n private readonly _renderCarouselItemVideo = (mediaData: IMediaData, index: number, imageSettings: IImageSettings): React.ReactNode => {\n const videoData = mediaData.videoData;\n if (videoData) {\n const options: IPlayerOptions = this.props.config as IPlayerOptions;\n const playerResources = this.props.resources;\n const videoMetaData: IVideoMetadata = {};\n videoMetaData.videoId = videoData.id;\n videoMetaData.title = videoData.title;\n videoMetaData.duration = videoData.playTime;\n if (videoData.thumbnail) {\n videoMetaData.posterframeUrl = videoData.thumbnail.src;\n }\n if (videoData._links?.binaryReferences) {\n videoMetaData.videoBinaryReferences = videoData._links.binaryReferences;\n }\n const videoPlayerData: IPlayerData = { options, metaData: videoMetaData };\n const attributes = {\n id: `${this.props.id}__carousel-item__${index}`\n };\n return (\n \n \n );\n }\n return this._renderEmptyImage(imageSettings);\n };\n\n private readonly _getCarouselItem = (\n image: IImageData,\n imageSettings: IImageSettings,\n index: number,\n isInPopup: boolean = false\n ): React.ReactNode => (\n ) => {\n event.preventDefault();\n\n this.goToIndex(index);\n };\n };\n\n private _renderImageInlineOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n return (\n \n ): void {\n inlineZoomImageOnHover(event, this.props.config.dataScale ?? String(defaultDataScale));\n }\n\n private _handleMobileViewZoomedImageClick(event: React.MouseEvent) {\n const target = this.state.shouldUseOptimizedImage ? (event.target as HTMLImageElement) : event.currentTarget;\n const mobileZoomedInImageClassName = 'msc-mobile-zoomed-in';\n if (!this.state.isMobileImageZoomed) {\n const bounds = target.getBoundingClientRect();\n const dataScale = Number(this.props.config.dataScale ?? defaultDataScale);\n\n const positionX = event.clientX - bounds.left;\n const positionY = event.clientY - bounds.top;\n const scaledPositionX = positionX * dataScale;\n const scaledPositionY = positionY * dataScale;\n\n target.style.transform = `scale(${dataScale})`;\n target.classList.add(mobileZoomedInImageClassName);\n target.parentElement!.style.overflow = 'auto';\n target.parentElement!.scrollTo(scaledPositionX - positionX, scaledPositionY - positionY);\n this.setState({\n isMobileImageZoomed: true\n });\n } else {\n target.style.transform = '';\n target.classList.remove(mobileZoomedInImageClassName);\n target.parentElement!.style.overflow = '';\n this.setState({\n isMobileImageZoomed: false\n });\n }\n }\n\n private _onInlineImageClick(event: React.MouseEvent): void {\n if (window.innerWidth <= 768) {\n // $msv-breakpoint-m\n this._handleMobileViewZoomedImageClick(event);\n return;\n }\n inlineZoomInitClick(event, this.props.config.dataScale ?? String(defaultDataScale));\n this.setState({\n isImageZoomed: true\n });\n }\n\n private _onImageMouseOut(event: React.MouseEvent): void {\n inlineZoomImageOnMouseOut(event);\n this.setState({\n isImageZoomed: false\n });\n }\n\n private _onContainerZoomImageClick(event: React.MouseEvent): void {\n if (window.innerWidth <= 768) {\n // $msv-breakpoint-m\n this._handleMobileViewZoomedImageClick(event);\n return;\n }\n\n onContainerZoomInit(event);\n\n this.setState({\n isImageZoomed: true\n });\n }\n\n private _onMouseOutLensContainer(event: React.MouseEvent): void {\n onMouseOutLensContainer(event);\n\n this.setState({\n isImageZoomed: false\n });\n }\n\n private _renderImageInContainerOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n return (\n \n );\n }\n\n private _renderImageFullScreenOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n return (\n \n );\n }\n\n /**\n * Render the video thumbnail in full screen.\n * @param mediaData - Media Data.\n * @param index - Index\n * @param imageSettings - Image settings.\n * @returns - JSX.Element\n */\n private readonly _renderVideoThumbnail = (mediaData: IMediaData, index: number, imageSettings: IImageSettings): React.ReactNode => {\n const videoData = mediaData.videoData;\n let image: IImageData;\n if (videoData?.thumbnail) {\n image = videoData.thumbnail;\n } else {\n image = {\n src: 'empty'\n };\n }\n\n return (\n \n );\n };\n\n private _mapProductToImageData(product: SimpleProduct): IImageData {\n return {\n src: product.PrimaryImageUrl ?? ''\n };\n }\n\n private _renderEmptyImage(imageSettings: IImageSettings | undefined): React.ReactNode {\n return (\n \n
\n );\n }\n\n private _getEmptyThumbnailItem(\n imageSettings: IImageSettings | undefined,\n index: number,\n modifiedActiveIndex: number\n ): IMediaGalleryThumbnailItemViewProps {\n const classes = classnames(\n 'ms-media-gallery__thumbnail-item',\n modifiedActiveIndex === index ? 'ms-media-gallery__thumbnail-item-active' : ''\n );\n return {\n ThumbnailItemContainerProps: {\n tag: 'li' as NodeTag,\n className: classes,\n role: 'tab',\n tabIndex: 0,\n key: 'empty',\n 'aria-label': '',\n 'aria-selected': modifiedActiveIndex === index,\n onClick: this._generateOnThumbnailClick(index),\n onKeyDown: this._generateOnThumbnailKeyDown(index)\n },\n Picture: (\n ;\n const carousel = = props => {\n const { CarouselProps, Thumbnails, MediaGallery, Modal } = props;\n\n return (\n \n \n );\n};\n\nconst _renderThumbnails = (thumbnails: IMediaGalleryThumbnailsViewProps): JSX.Element => {\n const { ThumbnailsContainerProps, SingleSlideCarouselComponentProps, items } = thumbnails;\n\n return (\n \n {items && items.map(_renderThumbnailItem)} \n \n );\n};\n\nconst _renderThumbnailItem = (thumbnail: IMediaGalleryThumbnailItemViewProps): JSX.Element => {\n const { ThumbnailItemContainerProps, Picture } = thumbnail;\n\n return {Picture} ;\n};\n\nexport default MediaGalleryView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IImageData, IRequestContext, IVideoData } from '@msdyn365-commerce/core';\n\nexport enum MediaType {\n /**\n * The None.\n */\n None = 0,\n /**\n * The Image type.\n */\n Image = 1,\n /**\n * The video type.\n */\n Video = 2,\n /**\n * The file type.\n */\n File = 3\n}\n\nexport interface IMediaData extends IImageData {\n mediaTypeValue?: MediaType;\n displayOrder?: number;\n videoData?: IVideoData;\n}\n\n/**\n * Gets correct alt text for image based on configuration of site.\n * @param productName Product name.\n * @param context Current request context.\n * @param imageAltText Alt-text from CMS image.\n */\nexport function getAltText(\n context: IRequestContext,\n shouldUseCmsAltText: boolean,\n productName?: string,\n imageAltText?: string\n): string | undefined {\n if (!context?.app?.config?.OmniChannelMedia) {\n return productName;\n }\n if (shouldUseCmsAltText) {\n return imageAltText;\n }\n return productName;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n commerceApiRequest,\n commerceVideoMetadataRequest,\n getCatalogId,\n IActionContext,\n IImageData,\n IImageSettings,\n IVideoData\n} from '@msdyn365-commerce/core';\nimport { MediaLocation, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport {\n ArrayExtensions,\n getMediaLocationsForSelectedVariant,\n MediaLocationsForSelectedVariantInput\n} from '@msdyn365-commerce-modules/retail-actions';\nimport { getAltText } from './helper';\n\nasync function validateMediaLocationAsync(mediaLocation: MediaLocation): Promise<[IImageData, boolean]> {\n const imageData: IImageData = {\n src: mediaLocation.Uri || '',\n altText: mediaLocation.AltText || ''\n };\n if (mediaLocation.IsApplicableForChildEntities) {\n imageData.additionalProperties = { isApplicableForChildEntities: 'true' };\n }\n\n if (imageData.src === '') {\n return [imageData, false];\n }\n\n return new Promise<[IImageData, boolean]>(resolve => {\n try {\n const http = new XMLHttpRequest();\n http.open('HEAD', imageData.src!, true);\n\n http.addEventListener('load', () => {\n resolve([imageData, http.status === 200 || http.status === 201]);\n });\n\n http.addEventListener('error', () => {\n resolve([imageData, false]);\n });\n\n http.send();\n } catch {\n resolve([imageData, false]);\n }\n });\n}\n\nexport async function getValidProductImages(\n productId: number,\n channelId: number,\n actionContext: IActionContext,\n imageSettings: IImageSettings,\n selectedProduct?: SimpleProduct\n): Promise {\n const catalogId = getCatalogId(actionContext.requestContext);\n const actionInput = new MediaLocationsForSelectedVariantInput(productId, channelId, selectedProduct, catalogId);\n\n return getMediaLocationsForSelectedVariant(actionInput, actionContext)\n .then(mediaLocations => {\n if (mediaLocations) {\n return Promise.all(mediaLocations.map(mediaLocation => validateMediaLocationAsync(mediaLocation))).then(pairs => {\n return pairs.filter(pair => pair[1]).map(pair => pair[0]);\n });\n }\n\n return [];\n })\n .catch(error => {\n actionContext.telemetry.exception(error);\n actionContext.telemetry.debug('Unable to get Media Locations for Selected Variant');\n return [];\n });\n}\n\n/**\n * Gets product variant images on dimension change of buy-box module for Omni scenario.\n * @param productId Product record id.\n * @param shouldUseCmsAltText Alt-text source to use.\n * @param channelId Current channel id.\n * @param actionContext Current action context.\n * @param productName Product name.\n * @param selectedProduct Currently selected variant product.\n * @returns List of images.\n */\n\nexport async function getProductImages(\n productId: number,\n shouldUseCmsAltText: boolean,\n channelId: number,\n actionContext: IActionContext,\n productName?: string,\n selectedProduct?: SimpleProduct\n): Promise {\n const catalogId = getCatalogId(actionContext.requestContext);\n if (actionContext.requestContext?.params?.isPreview) {\n const response = await commerceApiRequest(actionContext.requestContext, 'msdyn365-ochannel-product-info', 'post', {\n productId: productId,\n channelId: channelId,\n catalogId: catalogId\n });\n if (response.status !== 200) {\n actionContext.telemetry.debug('Unable to get Media Locations for Selected Variant for preview scenario');\n return [];\n }\n const previewImageData = response?.data as MediaLocation[];\n if (previewImageData) {\n return previewImageData.map(mediaLocation => {\n return {\n src: mediaLocation.Uri ?? '',\n altText: getAltText(actionContext.requestContext, shouldUseCmsAltText, productName, mediaLocation.AltText),\n displayOrder: mediaLocation.DisplayOrder,\n mediaTypeValue: mediaLocation.MediaTypeValue,\n additionalProperties: mediaLocation.IsApplicableForChildEntities\n ? {\n isApplicableForChildEntities: 'true'\n }\n : undefined\n };\n });\n }\n return [];\n }\n const actionInput = new MediaLocationsForSelectedVariantInput(productId, channelId, selectedProduct, catalogId);\n return getMediaLocationsForSelectedVariant(actionInput, actionContext)\n .then(mediaLocations => {\n if (mediaLocations) {\n return mediaLocations.map(mediaLocation => {\n return {\n src: mediaLocation.Uri ?? '',\n altText: getAltText(actionContext.requestContext, shouldUseCmsAltText, productName, mediaLocation.AltText),\n displayOrder: mediaLocation.DisplayOrder,\n mediaTypeValue: mediaLocation.MediaTypeValue,\n additionalProperties: mediaLocation.IsApplicableForChildEntities\n ? {\n isApplicableForChildEntities: 'true'\n }\n : undefined\n };\n });\n }\n return [];\n })\n .catch(error => {\n actionContext.telemetry.exception(error);\n actionContext.telemetry.debug('Unable to get Media Locations for Selected Variant');\n return [];\n });\n}\n\nexport async function validateProductImages(\n mediaLocations: MediaLocation[],\n actionContext: IActionContext,\n imageSettings: IImageSettings\n): Promise {\n return Promise.all(mediaLocations.map(mediaLocation => validateMediaLocationAsync(mediaLocation)))\n .then(pairs => {\n return pairs.filter(pair => pair[1]).map(pair => pair[0]);\n })\n .catch(error => {\n actionContext.telemetry.exception(error);\n actionContext.telemetry.debug('Unable to validate product images');\n return [];\n });\n}\n\n/**\n * GetVideoMetadataFromAPI - Makes API call to get video metadata.\n * @param videoId: Video Id\n * @param actionContext: Action context\n * @returns: Returns the meta data of the video.\n */\nexport async function getVideoMetadataFromApi(videoId: string, actionContext: IActionContext): Promise {\n let videoPlayerData: IVideoData | undefined;\n if (videoId) {\n const response = await commerceVideoMetadataRequest(actionContext.requestContext, [videoId]);\n\n if (response.status !== 200) {\n actionContext.telemetry.debug(`Unable to get video metadata for videoId: ${videoId}`);\n return;\n }\n\n const videoData = response.data as [];\n if (videoData && ArrayExtensions.hasElements(videoData)) {\n videoPlayerData = videoData[0];\n }\n }\n return videoPlayerData;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { 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
{\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 const style: React.CSSProperties = {\n opacity: '0.5'\n };\n return (\n \n {buttonLabel}\n \n );\n }\n\n const shouldSkipSiteSettings: boolean = true;\n const dialogStrings: IAddToCartResources = getDialogStrings(props);\n const emailDeliveryModeCode = props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode;\n return (\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 requestDeliveryDate: _salesLines[0].requestDeliveryDate,\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","/*!\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 {\n ChannelIdentity,\n Customer,\n Note,\n OrderOriginator,\n OrderShipments,\n OrgUnitLocation,\n SalesOrder\n} from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport get from 'lodash/get';\nimport QRCode from 'qrcode.react';\nimport * as React from 'react';\n\nimport { countItems, IModuleComponentProps, IPriceContext } from './utilities';\n\n/**\n * Interface for order information input resources.\n */\nexport interface IOrderInformationInputResources {\n receiptEmailMessage?: string;\n orderItemLabel: string;\n orderItemsLabel: string;\n processingLabel: string;\n orderIdLabel: string;\n receiptIdLabel: string;\n confirmationIdLabel: string;\n trackingLabel: string;\n trackingAriaLabel: string;\n trackingComingSoonLabel: string;\n posChannelNameText?: string;\n onlineStoreChannelNameText?: string;\n orderPlacedOnLabel?: string;\n qrCodeSrText?: string;\n callCenterChannelNameText?: string;\n orderPlacedByFullText?: string;\n orderPlacedByYouText?: string;\n orderOnBehalfOfText?: string;\n noteLabel?: string;\n orderDetailsRequestDeliveryDateText?: string;\n}\n\n/**\n * Interface for order information input.\n */\nexport interface IOrderInformationInput {\n moduleName: string;\n channelReferenceId?: string;\n channelName?: string;\n channelAddress?: string;\n showChannelInfo?: boolean;\n receiptEmail?: string;\n createdDate?: string;\n amount?: number;\n priceContext: IPriceContext;\n salesId?: string;\n receiptId?: string;\n hasTrackingInfo?: boolean;\n count?: number;\n resources: IOrderInformationInputResources;\n isSalesInvoice?: boolean;\n shouldShowQrCode?: boolean;\n channelTypeValue?: number;\n originator?: OrderOriginator;\n isYou?: [boolean, boolean]; // deprecated\n isB2bAdmin?: boolean;\n isOnlineStore?: boolean;\n priceCurrency?: string;\n note?: Note;\n customer?: Customer;\n}\n\nconst callCenterChannelTypeValue = 4;\n\n/**\n * Interface for order information.\n */\nexport interface IOrderInformation {\n orderInformationProps: INodeProps;\n channelName: React.ReactNode;\n channelAddress: React.ReactNode;\n placedBy?: React.ReactNode;\n salesId: React.ReactNode;\n receiptId: React.ReactNode;\n receiptEmail: React.ReactNode;\n createdDate: React.ReactNode;\n count: React.ReactNode;\n amount: React.ReactNode;\n channelReferenceId: React.ReactNode;\n note?: React.ReactNode;\n}\n\n/**\n * The order confirmation ID node.\n * @param channelReferenceId - The order confirmation id.\n * @param moduleName - The module name.\n * @param confirmationIdLabel - The confirmation label.\n * @param shouldShowQrCode - Should the view show the QR code.\n * @param qrCodeSrText - The screen reader text of the QR code.\n * @returns The react node for order confirmation ID.\n */\nconst getChannelReference = (\n channelReferenceId: string | undefined,\n moduleName: string,\n confirmationIdLabel: string,\n shouldShowQrCode: boolean | undefined,\n qrCodeSrText?: string\n): React.ReactNode | undefined => {\n const confirmationIdNode: React.ReactNode = (\n \n {`${confirmationIdLabel} `}\n {channelReferenceId} \n \n );\n return (\n channelReferenceId &&\n (shouldShowQrCode !== undefined && shouldShowQrCode ? (\n \n {confirmationIdNode}\n
\n \n {qrCodeSrText}\n \n
\n
\n
\n
{note.Description}
\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\n/**\n * Get order information.\n * @param {IOrderInformationInput} param0 The input for order information.\n * @returns {IOrderInformation} The order information.\n */\nexport const getOrderInformation = ({\n moduleName,\n channelReferenceId,\n channelName,\n channelAddress,\n channelTypeValue,\n showChannelInfo,\n receiptEmail,\n createdDate,\n amount,\n priceContext,\n isOnlineStore,\n customer,\n originator,\n salesId,\n receiptId,\n count,\n resources: {\n receiptEmailMessage,\n orderItemLabel,\n orderItemsLabel,\n orderIdLabel,\n orderPlacedByFullText,\n orderPlacedByYouText,\n orderOnBehalfOfText,\n receiptIdLabel,\n confirmationIdLabel,\n posChannelNameText,\n onlineStoreChannelNameText,\n orderPlacedOnLabel,\n qrCodeSrText,\n callCenterChannelNameText,\n noteLabel\n },\n isSalesInvoice,\n shouldShowQrCode,\n priceCurrency,\n note\n}: IOrderInformationInput): IOrderInformation => {\n const channelNameNode: React.ReactNode = getChannelName(\n channelTypeValue,\n moduleName,\n callCenterChannelNameText,\n channelAddress,\n posChannelNameText,\n channelName,\n onlineStoreChannelNameText\n );\n\n const orderInformation = {\n orderInformationProps: { className: `${moduleName}__order-information` },\n channelName: showChannelInfo && channelName && channelNameNode,\n channelAddress: showChannelInfo && channelAddress && (\n {channelAddress} \n ),\n placedBy: getPlacedBy(\n moduleName,\n isOnlineStore,\n customer,\n originator,\n orderPlacedByFullText,\n orderPlacedByYouText,\n orderOnBehalfOfText\n ),\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 \n {orderPlacedByFullText}
{placedByName || '-'} {' '}\n {placedByName && wasPlacedByCurrentCustomer && ` ${orderPlacedByYouText}`}\n {wasPlacedOnBehalfOf && (\n
\n {orderOnBehalfOfText} {placedOnBehalfOfName || '-'} {' '}\n {placedOnBehalfOfName && wasPlacedOnBehalfOfCurrentCustomer && ` ${orderPlacedByYouText}`}\n
\n )}\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(\n props.product?.ItemId,\n requestContext.apiSettings,\n props.moduleComponentProps.context.request.app?.config?.OmniChannelMedia\n );\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/**\n * Get pick update date time lot information.\n * @param shouldShowTimeslot -- Should show time slot.\n * @param salesLine -- The sales line.\n * @returns The pickup date time slot information.\n */\nexport const getRequestDeliveryDate = (\n salesLine: SalesLine,\n moduleName: string,\n requestDeliveryDateTitle?: string\n): false | JSX.Element => {\n const canShowRequestDeliveryDate: boolean = salesLine.RequestedDeliveryDate !== undefined && salesLine.RequestedDeliveryDate !== null;\n\n return (\n canShowRequestDeliveryDate && (\n \n
{requestDeliveryDateTitle}
\n
{salesLine.RequestedDeliveryDate}
\n
= ({ 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 { 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 // IsPickUp ? getPickUp : getOthers\n pickupDeliveryModeCode && pickupDeliveryModeCode !== ''\n ? salesLine.DeliveryMode === pickupDeliveryModeCode\n : 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 (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 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\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[]) =>\n 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.\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 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 {salesLine} \n);\n\nexport const OrderConfirmationGroupDelivery: React.FC = ({\n deliveryProps,\n heading,\n count,\n processing,\n address,\n pickupDateTimeslot,\n trackingInfo\n}) => (\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.map(salesLine => (\n \n )}\n \n);\n\nexport const OrderConfirmationGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group, index) => (\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 { 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 { 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
\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 * 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: = ({\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 { 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","/*!\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 priceCurrency?: string;\n}\n\nconst OrderSummaryLine: React.SFC = ({ name, label, value = 0, priceContext, priceCurrency }) => (\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 \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","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IAny, IComponentProps, ICoreContext, IGeneric } from '@msdyn365-commerce/core';\nimport { isMobile, VariantType } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport React from 'react';\n\n/**\n * Resources which are used in order details header.\n */\nexport interface IOrderDetailsTableHeaderResources {\n orderDetailsProductNumberText: string;\n orderDetailsProductText: string;\n orderDetailsUnitPriceText: string;\n orderDetailsModeOfDeliveryText: string;\n orderDetailsStatusText: string;\n orderDetailsQuantityText: string;\n orderDetailsUnitOfMeasureText: string;\n orderDetailsTotalText: string;\n orderDetailsActionsText: string;\n orderDetailsSelectAllRadioAriaLabelText: string;\n orderDetailsConfirmedShipDateTextForTableHeader: string;\n orderDetailsRequestDeliveryDateTextForTableHeader: string;\n orderDetailsAddressTextForTableHeader: string;\n}\n\n/**\n * Configuration of the component.\n */\nexport interface IOrderDetailsTableHeaderProps extends IComponentProps {\n context: ICoreContext>;\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 confirmedShipDateAvailable?: boolean;\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.orderDetailsConfirmedShipDateTextForTableHeader} \n {resources.orderDetailsRequestDeliveryDateTextForTableHeader} \n {resources.orderDetailsAddressTextForTableHeader} \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 { Button } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\ninterface IViewTrackingButtonProps {\n innerReference?: React.RefObject;\n className: string;\n viewTrackingButtonLabel?: string;\n onClicked(): void;\n}\n\nexport const ViewTrackingButton: React.FC = ({\n className,\n onClicked,\n viewTrackingButtonLabel,\n innerReference\n}) => {\n return (\n \n {viewTrackingButtonLabel}\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, {\n IAny,\n IComponentProps,\n ICoreContext,\n IDateFormatOptions,\n IGeneric,\n IImageSettings,\n Image,\n isChannelTypeB2B\n} 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 { ViewTrackingButton } from '../../view-tracking-button';\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 viewTrackingButtonLabel?: 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 orderDetailsReferences?: React.RefObject;\n isExtraButtonDialogViewEnabled?: 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(\n product.simpleProduct?.ItemId,\n props.context.actionContext.requestContext.apiSettings,\n props.context.request.app?.config?.OmniChannelMedia\n );\n\n const containerClassName = `${props.className}__product-image-container`;\n\n 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 formatDate = (context: ICoreContext, date: Date | undefined) => {\n if (date === undefined) {\n return '';\n }\n\n const dateOptions: IDateFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };\n return context.cultureFormatter.formatDate(date, dateOptions);\n };\n\n const confirmedShipDateAvailable = salesLine.ConfirmedShipDate === undefined || salesLine.ConfirmedShipDate === null;\n const requestDeliveryDateAvailable = salesLine.RequestedDeliveryDate === undefined || salesLine.RequestedDeliveryDate === null;\n\n const currentProduct = new OrderDetailsProduct(product.salesLine, product.simpleProduct, productUrl);\n\n const defaultConfirmedShipDateLabelValue = '-';\n\n return (\n <>\n {props.isSelectionModeEnabled ? (\n \n