\r\n {isBopisSelected ? shipInsteadDisplayText : pickItUpDisplayText}\r\n \r\n \r\n );\r\n};\r\n\r\nconst renderCartLineComment = (cartLineComment: React.ReactNode, comment: string, cartLineId: string, cartProductTitle?: string) => {\r\n if (!cartLineComment) {\r\n return null;\r\n }\r\n return React.cloneElement(cartLineComment[0] as React.ReactElement, { comment, cartLineId, cartProductTitle})\r\n}\r\n\r\n\r\n/**\r\n * Render Cart Lines.\r\n * @param cartLine - The cart line view props.\r\n * @param resources - Module resource strings.\r\n * @param storeSelector - Store selector element.\r\n * @param cartLineComment - Cart line comment element\r\n * @param telemetryContent - The telemetry object.\r\n * @param isMultiplePickUp - FLag to check if there multiple pickups.\r\n * @param emailDeliveryModeCode - The email delivery mode code.\r\n * @returns JSX Element.\r\n */\r\nconst renderCartLine = (cartLine: ICartlinesViewProps, resources: ICartResources, storeSelector: React.ReactNode | undefined,\r\n cartLineComment: React.ReactNode | undefined, advancedNotes: React.ReactNode | undefined, telemetryContent?: ITelemetryContent,\r\n isMultiplePickUp?: boolean, emailDeliveryModeCode?: string): JSX.Element => {\r\n const comment = cartLine.data?.cartline.Comment || '';\r\n const cartLineProductTitle = cartLine.data?.product?.Name;\r\n if (cartLine.error === resources.outOfStockErrorMessage) {\r\n return (\r\n \r\n {renderCartLineComment(cartLineComment, comment, cartLine.cartlineId!, cartLineProductTitle)}\r\n {cartLine.addToWishlist}\r\n {cartLine.remove}\r\n \r\n );\r\n }\r\n\r\n if (isMultiplePickUp) {\r\n return (\r\n \r\n {renderGroupBopisBlock(cartLine, resources, storeSelector, telemetryContent, emailDeliveryModeCode)}\r\n {renderCartLineComment(cartLineComment, comment, cartLine.cartlineId!, cartLineProductTitle)}\r\n {cartLine.addToOrderTemplate}\r\n {cartLine.addToWishlist}\r\n {cartLine.remove}\r\n \r\n );\r\n }\r\n\r\n if (cartLine.addToOrderTemplate) {\r\n return (\r\n \r\n {renderCartLineComment(cartLineComment, comment, cartLine.cartlineId!, cartLineProductTitle)}\r\n {cartLine.addToOrderTemplate}\r\n {cartLine.addToWishlist}\r\n {cartLine.remove}\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {renderCartLineComment(cartLineComment, comment, cartLine.cartlineId!, cartLineProductTitle)}\r\n {cartLine.addToWishlist}\r\n {cartLine.remove}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Render Cart Lines.\r\n * @param cartLines - The cart line view props.\r\n * @param resources - Module resource strings.\r\n * @param storeSelector - Store selector element.\r\n * @param telemetryContent - The telemetry object.\r\n * @param isMultiplePickUp - Flag to check if there multiple pickups.\r\n * @param emailDeliveryModeCode - The email delivery mode code.\r\n * @returns JSX Element.\r\n */\r\nconst renderCartlinesInternal = (notes: IAdvancedNoteEntity[], isPrintView: boolean, cartLines: ICartlinesViewProps[], resources: ICartResources,\r\n storeSelector: React.ReactNode | undefined, cartLineComment: React.ReactNode | undefined, advancedNotes: React.ReactNode | undefined, telemetryContent?: ITelemetryContent, isMultiplePickUp?: boolean,\r\n emailDeliveryModeCode?: string): JSX.Element[] | JSX.Element => {\r\n return (\r\n cartLines.map((cartLine, index) => {\r\n const itemIndex = index;\r\n const itemId = cartLine.data?.product?.ItemId || '';\r\n return (\r\n \r\n {cartLine.cartline}\r\n \r\n {isMultiplePickUp ? null : renderBopisBlock(cartLine, resources, storeSelector, telemetryContent, emailDeliveryModeCode)}\r\n {\r\n renderCartLine(cartLine, resources, storeSelector, cartLineComment, advancedNotes, telemetryContent, isMultiplePickUp, emailDeliveryModeCode)\r\n }\r\n \r\n {renderAdvancedNotes(isPrintView, advancedNotes, notes.filter(n => n.ItemId === itemId))}\r\n
\r\n );\r\n }));\r\n};\r\n\r\n/**\r\n * Render Cart Lines.\r\n * @param props - The cart line props.\r\n * @param cartLines - The cart line view props.\r\n * @param resources - Module resource strings.\r\n * @param storeSelector - Store selector element.\r\n * @param waitingComponent - Waiting component element.\r\n * @param cartLoadingStatus - Cart loading status string.\r\n * @param isCartDataResult - Flag to check if there is cart data.\r\n * @param telemetryContent - The telemetry object.\r\n * @param isMultiplePickUp - Flag to check if there multiple pickups.\r\n * @param emailDeliveryModeCode - The email delivery mode code.\r\n * @returns JSX Element.\r\n */\r\nconst renderCartlines = (notes: IAdvancedNoteEntity[], isPrintView: boolean, props: ICartViewProps & ICartExtensionProps<{}>, cartLines: ICartlinesViewProps[] | undefined, resources: ICartResources,\r\n storeSelector: React.ReactNode | undefined, waitingComponent: React.ReactNode,\r\n cartLoadingStatus: string, isCartDataResult: boolean, pagination: React.ReactNode,\r\n paginatedView: ICartlinesViewProps[] | undefined,telemetryContent?: ITelemetryContent, isMultiplePickUp?: boolean,\r\n emailDeliveryModeCode?: string): JSX.Element[] | JSX.Element => {\r\n const { slots: { cartLineComment, orderLevelComment, advancedNotes } } = props;\r\n if (cartLoadingStatus) {\r\n return (<>\r\n {cartLoadingStatus}\r\n );\r\n }\r\n\r\n // Props.CartlinesWrapper is only required on cart lines and when multiple pickup mode is disabled. This is also required to handle the empty cart styling.\r\n // Else, empty cart multiple pickup mode is disabled falls under the other cart line wrapper which is creating issue with Empty cart scenario.\r\n // if (cartLines) {\r\n if (paginatedView) {\r\n return props.multiplePickUpEnabled ? (\r\n <>\r\n {pagination}\r\n {renderCartlinesInternal(notes, isPrintView, /*cartLines*/ paginatedView, resources, storeSelector, cartLineComment, advancedNotes, telemetryContent, isMultiplePickUp, emailDeliveryModeCode)}\r\n {pagination}\r\n {renderOrderLevelComment(isPrintView, orderLevelComment)}\r\n \r\n ) : (\r\n <>\r\n \r\n {/**/}\r\n {/* {renderCartlinesInternal(notes, isPrintView, cartLines, resources, storeSelector, cartLineComment, telemetryContent, isMultiplePickUp, emailDeliveryModeCode)}*/}\r\n {/*
*/}\r\n {pagination}\r\n {renderCartlinesInternal(notes, isPrintView, /*cartLines*/ paginatedView, resources, storeSelector, cartLineComment, advancedNotes, telemetryContent, isMultiplePickUp, emailDeliveryModeCode)}\r\n {pagination}\r\n {renderOrderLevelComment(isPrintView, orderLevelComment)}\r\n \r\n \r\n );\r\n }\r\n\r\n return (isCartDataResult ? (\r\n \r\n
\r\n {props.slots.emptyCart}\r\n
\r\n
\r\n {isBopisSelected ? \r\n {cartLine.pickUpInStore?.deliveryOption}\r\n {\", \"}\r\n {cartLine.pickUpInStore?.orgUnitName}\r\n
: null}\r\n \r\n {countTitle}\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\n/**\r\n * Render Cart Lines group title.\r\n * @param cartLine - The cart line view props.\r\n * @param resources - Module resource strings.\r\n * @param count - Count of products.\r\n * @param emailDeliveryModeCode - The email delivery mode code.\r\n * @returns JSX Element.\r\n */\r\nconst renderCartLinesGroupHeader = (cartLine: ICartlinesViewProps, resources: ICartResources, count: number, emailDeliveryModeCode?: string) => {\r\n const isBopisSelected = cartLine.pickUpInStore?.isBopisSelected;\r\n const { pickUpText, shippingText, emailshippingText } = resources;\r\n let groupTitle: string;\r\n\r\n groupTitle = isBopisSelected ? pickUpText : shippingText;\r\n groupTitle = cartLine.data && cartLine.data.cartline.DeliveryMode === emailDeliveryModeCode ? emailshippingText : groupTitle;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n {groupTitle}\r\n
\r\n {renderCartLinesGroupTitle(cartLine, resources, count)}\r\n
\r\n {props.cartLinesGroup.map(cartlines => {\r\n return (
\r\n {renderCartLinesGroupHeader(cartlines[0], resources, countItems(cartlines),\r\n props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode)}\r\n {renderCartlines(advancedNotes, isPrintView, props, cartlines, props.resources, props.storeSelector,\r\n props.waitingComponent, props.cartLoadingStatus, props.cartDataResult,\r\n pagination,\r\n paginatedView,props.telemetryContent, props.multiplePickUpEnabled, props.context.actionContext.requestContext.channel?.EmailDeliveryModeCode)}\r\n
);\r\n })}\r\n
\r\n
\r\n {props.slots.emptyCart}\r\n
\r\n
\r\n {errorData.header}\r\n {errorData.errors}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Render invoice summary.\r\n * @param invoiceSummaryLines - Invoice summary component.\r\n * @param orderSummaryItems - Order summary component.\r\n * @param props - The module props.\r\n * @returns JSX Element.\r\n */\r\nconst renderInvoiceSummarylines = (invoiceSummaryLines: IInvoiceSummaryLines | undefined, orderSummaryItems: INodeProps,\r\n props: ICartViewProps): JSX.Element | null => {\r\n if (!invoiceSummaryLines) {\r\n props.context.telemetry.error(\"InvoiceSummary content is empty, module wont render\");\r\n return null;\r\n }\r\n return (\r\n \r\n {invoiceSummaryLines.invoices}\r\n {invoiceSummaryLines.giftCard}\r\n {invoiceSummaryLines.loyalty}\r\n {invoiceSummaryLines.orderTotal}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Render order summary.\r\n * @param orderSummaryLines - Order summary component.\r\n * @param orderSummaryItems - Order summary items component.\r\n * @param props - The module props.\r\n * @returns JSX Element.\r\n */\r\nconst renderOrderSummarylines = (orderSummaryLines: IOrderSummaryLines | undefined, orderSummaryItems: INodeProps,\r\n props: ICartViewProps): JSX.Element | null => {\r\n if (!orderSummaryLines) {\r\n props.context.telemetry.error(\"OrderSummary content is empty, module wont render\");\r\n return null;\r\n }\r\n return (\r\n \r\n {orderSummaryLines.subtotal}\r\n {/* {orderSummaryLines.totalDiscounts ? orderSummaryLines.totalDiscounts : null} */}\r\n {orderSummaryLines.shipping}\r\n {orderSummaryLines.otherCharge}\r\n {orderSummaryLines.tax}\r\n {orderSummaryLines.orderTotal}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Render error block.\r\n * @param promotions - The module view props.\r\n * @returns JSX Element.\r\n */\r\nconst renderPromotions = (promotions: ICartLineItemViewProps): JSX.Element | undefined => {\r\n return (\r\n <>\r\n \r\n {promotions.promotionMessage}\r\n \r\n {promotions.promotionSeeAllLink}\r\n \r\n {promotions.promotionDialog}\r\n \r\n\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Render order summary checkout.\r\n * @param props - The module view props.\r\n * @returns JSX Element.\r\n */\r\nconst renderOrderSummaryCheckout = (props: ICartViewProps, renderClearCart: React.ReactNode): JSX.Element | undefined => {\r\n return (\r\n \r\n {props.cart?.hasInvoiceLine ? null : props.promoCode}\r\n \r\n {props.checkoutAsSignInUserButton}\r\n {props.checkoutAsGuestButton}\r\n \r\n {props.createTemplateFromCartButton}\r\n {renderClearCart}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Renders the clear cart button on the page. Clicking the button triggers the modal to confirm the action.\r\n *\r\n * @param {(e: React.SetStateAction) => void} setClearCartModalActive\r\n * @param {ICartResources} resources\r\n * @return {*} {React.ReactNode}\r\n */\r\nconst _renderClearCart = (\r\n setClearCartModalActive: (e: React.SetStateAction) => void,\r\n resources: ICartResources\r\n): React.ReactNode => (\r\n \r\n setClearCartModalActive(true)}\r\n >\r\n {resources.clearCartButtonText}\r\n \r\n
\r\n);\r\n\r\n/**\r\n* Modal which is responsible for verifying the clear cart intention. Can either be dismissed or confirmed. If confirmed, will clear the cart.\r\n*\r\n* @param {(e: React.MouseEvent) => void} handleClearCart\r\n* @param {(e: React.SetStateAction) => void} setClearCartModalActive\r\n* @param {() => void} toggle\r\n* @param {boolean} clearCartModalActive\r\n* @param {ICartResources} resources\r\n* @return {*}\r\n*/\r\nconst _renderClearCartModal = (\r\n handleClearCart: (e: React.MouseEvent) => void,\r\n setClearCartModalActive: (e: React.SetStateAction) => void,\r\n toggle: () => void,\r\n clearCartModalActive: boolean,\r\n resources: ICartResources\r\n) => {\r\n const clearCartClassName = 'clearcart';\r\n\r\n /**\r\n * Renders the button area\r\n */\r\n const _renderButtonArea = (): React.ReactNode => (\r\n \r\n \r\n {resources.clearCartButtonText}\r\n \r\n setClearCartModalActive(false)} className={`${clearCartClassName}__button--cancel`}>\r\n {resources.clearCancelButtonText}\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n {resources.clearCartHeader} \r\n {resources.clearConfirmBody} \r\n {_renderButtonArea()} \r\n \r\n );\r\n};\r\n\r\n/**\r\n * Render order summary checkout button.\r\n * @param props - The module view props.\r\n * @returns JSX Element.\r\n */\r\nconst renderOrderSummaryCheckoutButton = (props: ICartViewProps): JSX.Element | undefined => {\r\n return (\r\n \r\n {props.checkoutAsSignInUserButton}\r\n {props.checkoutAsGuestButton}\r\n \r\n );\r\n};\r\n\r\nconst _renderPrintView = (isPrintView: boolean,\r\n handlePrintViewChange: (e: React.MouseEventHandler) => void,\r\n printViewLabel: string\r\n): React.ReactNode => (\r\n \r\n);\r\n\r\n/**\r\n * Renders the advanced-notes that display all of the associated notes for each cart line item at the bottom of the item in the cart.\r\n */\r\n\r\nconst renderAdvancedNotes = (isPrintView: boolean, advancedNotes: React.ReactNode, notes: IAdvancedNoteEntity[]): React.ReactNode => {\r\n\r\n if (!advancedNotes) {\r\n return null;\r\n }\r\n\r\n return(\r\n \r\n {React.cloneElement(advancedNotes[0] as React.ReactElement, { notes })}\r\n
\r\n )\r\n}\r\n\r\n/**\r\n * Renders the order-level-comment that displays a comment at the bottom of the cart.\r\n */\r\n\r\nconst renderOrderLevelComment = (isPrintView: boolean, orderLevelComment: React.ReactNode | undefined): React.ReactNode => {\r\n if (!orderLevelComment) {\r\n return null;\r\n }\r\n\r\n return(\r\n \r\n {orderLevelComment}\r\n
\r\n );\r\n};\r\n\r\n/**\r\n * Render cart view.\r\n * @param props - The module view props.\r\n * @returns JSX Element.\r\n */\r\nconst CartView: React.FC> = (props: ICartViewProps & ICartExtensionProps<{}>) => {\r\n\r\n const handlePrintViewChange = () => setIsPrintView(!isPrintView);\r\n const [isPrintView, setIsPrintView] = React.useState(false);\r\n const [advancedNotes, setAdvancedNotes] = React.useState(undefined);\r\n const printViewToggle = _renderPrintView(isPrintView, handlePrintViewChange, \"Print View\");\r\n const totalItemCountOne: number = 1;\r\n const defaultPageLength: number = 5;\r\n const updatedTitle = (\r\n \r\n {props.resources.cartTitle}\r\n \r\n {` (${Number(props.cart?.totalItemsInCart)} ${props.cart?.totalItemsInCart !== totalItemCountOne ? \"items\" : \"item\"})`}\r\n \r\n \r\n );\r\n const getAdvancedNotes = async (): Promise => {\r\n const itemIds = props.cart?.cart.CartLines?.map(cl => cl.ItemId!) || [];\r\n if (!itemIds.length) {\r\n return;\r\n }\r\n getAdvancedNotesAsync({ callerContext: props.context.actionContext }, itemIds)\r\n .then(notes => {\r\n setAdvancedNotes(notes || []);\r\n })\r\n }\r\n\r\n const pageLength = props.config.pageLength || defaultPageLength;\r\n\r\n const [paginatedView, setPaginatedView] = React.useState(\r\n props.cartlines && props.cartlines.length >= pageLength ? props.cartlines.slice(0, pageLength) : props.cartlines\r\n );\r\n const [paginationPage, setPaginationPage] = React.useState(0);\r\n const [clearCartModalActive, setClearCartModalActive] = React.useState(false);\r\n\r\n const handleClearCart = () => {\r\n const cart = props.cart;\r\n const cartlines = cart?.cart.CartLines;\r\n\r\n if (cart && cartlines) {\r\n let ids = { cartLineIds: Array() };\r\n cartlines.map(c => (c.LineId ? ids.cartLineIds.push(c.LineId) : null));\r\n cart.removeCartLines(ids);\r\n setClearCartModalActive(false);\r\n cart.refreshCart({});\r\n }\r\n };\r\n\r\n /**\r\n * Utility class to easily go up one page\r\n */\r\n const nextPage = () => {\r\n changePage(paginationPage + 1);\r\n};\r\n\r\n/**\r\n * Utility class to easily go down one page\r\n */\r\nconst prevPage = () => {\r\n changePage(paginationPage - 1);\r\n};\r\n\r\n/**\r\n * Update the state of @const paginationPage and @const paginatedView to the given page, folliowing some logic\r\n * to prevent the page from going into the negatives or beyond the maximum page length.\r\n *\r\n * @param {number} page\r\n * @return {*}\r\n */\r\nconst changePage = (page: number) => {\r\n if (page < 0) {\r\n return;\r\n }\r\n\r\n if (props.cartlines && page >= props.cartlines.length / pageLength) {\r\n page = props.cartlines.length / pageLength - 1;\r\n }\r\n\r\n let skip = page * pageLength;\r\n if (props.cartlines && props.cartlines.length >= skip) {\r\n setPaginationPage(page);\r\n let slice = props.cartlines?.slice(skip);\r\n setPaginatedView(slice.length >= pageLength ? slice.slice(0, pageLength) : slice);\r\n }\r\n};\r\n\r\n React.useEffect(() => {\r\n if (!advancedNotes)\r\n void getAdvancedNotes();\r\n }, [props.data])\r\n\r\n React.useEffect(() => {\r\n changePage(paginationPage);\r\n }, props.cartlines);\r\n\r\n const toggle = () => setClearCartModalActive(!clearCartModalActive);\r\n const renderClearCart = _renderClearCart(setClearCartModalActive, props.resources);\r\n\r\n let pagination = (\r\n \r\n {updatedTitle}\r\n
\r\n {props.orderSummaryLineitems?.orderTotal}\r\n
\r\n {renderOrderSummaryCheckoutButton(props)}\r\n {!props.cart?.hasInvoiceLine && props.promotionOptions && renderPromotions(props.promotionOptions)}\r\n {props.multiplePickUpEnabled ? renderCartLinesGroup(advancedNotes || [], isPrintView, props, props.resources, pagination, paginatedView) : renderCartlines(advancedNotes || [], isPrintView, props, props.cartlines,\r\n props.resources, props.storeSelector, props.waitingComponent, props.cartLoadingStatus, props.cartDataResult, pagination, paginatedView)}\r\n {props.orderSummaryHeading &&\r\n
\r\n {printViewToggle}\r\n \r\n {props.orderSummaryHeading}\r\n {props.cart?.hasInvoiceLine ? renderInvoiceSummarylines(\r\n props.invoiceSummaryLineitems, props.OrderSummaryItems, props) : renderOrderSummarylines(\r\n props.orderSummaryLineitems, props.OrderSummaryItems, props)}\r\n {renderErrorBlock(props.OrderSummaryErrors)}\r\n \r\n {renderOrderSummaryCheckout(props, renderClearCart)}\r\n }\r\n {props.storeSelector}\r\n {_renderClearCartModal(handleClearCart, setClearCartModalActive, toggle, clearCartModalActive, props.resources)}\r\n
= ({\r\n AddressDetail,\r\n items\r\n}) => {\r\n\r\n return (\r\n \r\n {items.map((item: IAddressShowItem) => {\r\n return (\r\n <>\r\n {item.description}\r\n \r\n );\r\n })}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Address Select Component.\r\n * @param param0 - Root param.\r\n * @param param0.SelectAddress - Select address.\r\n * @param param0.addButton - Add button.\r\n * @param param0.items - IAddressSelectItem[].\r\n * @param param0.isShowSaveButton - Boolean.\r\n * @param param0.saveButton - Save button.\r\n * @param param0.isShowCancelButton - Boolean.\r\n * @param param0.cancelButton - Cancel button.\r\n * @returns - SelectAddress Node.\r\n */\r\nconst AddressSelect: React.FC = ({\r\n SelectAddress,\r\n addButton,\r\n items,\r\n isShowSaveButton,\r\n saveButton,\r\n isShowCancelButton,\r\n cancelButton\r\n}) => {\r\n\r\n return (\r\n \r\n {addButton}\r\n {items.map((item: IAddressSelectItem) => {\r\n const SelectItem = item.SelectItem;\r\n return (\r\n {item.input}\r\n );\r\n })}\r\n {isShowSaveButton && saveButton}\r\n {isShowCancelButton && cancelButton}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Address Add Update Component.\r\n * @param param0 - Root param.\r\n * @param param0.AddressForm - Address form.\r\n * @param param0.heading - Address heading.\r\n * @param param0.items - IAddressAddItem[].\r\n * @param param0.hasError - Boolean.\r\n * @param param0.error - Error message.\r\n * @param param0.isShowSaveButton - Boolean.\r\n * @param param0.saveButton - Save button.\r\n * @param param0.isShowCancelButton - Boolean.\r\n * @param param0.cancelButton - Cancel button.\r\n * @returns Address add update component node.\r\n */\r\nconst AddressAddUpdate: React.FC = ({\r\n AddressForm,\r\n heading,\r\n items,\r\n hasError,\r\n error,\r\n isShowSaveButton,\r\n saveButton,\r\n isShowCancelButton,\r\n cancelButton\r\n}) => {\r\n\r\n return (\r\n \r\n {heading}\r\n {items.map((item: IAddressAddItem) => {\r\n const { AddressItem, key, label, alert, input } = item;\r\n return (\r\n {label}\r\n {alert}\r\n {input}\r\n );\r\n })}\r\n {hasError && \r\n {error.title}\r\n {error.message}\r\n }\r\n {isShowSaveButton && saveButton}\r\n {isShowCancelButton && cancelButton}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Checkout Shipping Address View Component.\r\n * @param props - Props.\r\n * @returns - CheckoutShippingAddress Module.\r\n */\r\nconst CheckoutShippingAddressView: React.FC = props => {\r\n const { CheckoutShippingAddress, viewState, showAddress, showAddressSelect, showAddOrUpdateAddress, cartLineImages } = props;\r\n const address = props.data.checkout.result?.shippingAddress;\r\n const [ nonEligibleItems, setnonEligibleItems ] = React.useState([]);\r\n React.useEffect(() => {\r\n void checkEligibilityForShippingAddress();\r\n }, [address])\r\n React.useEffect(() => {\r\n props.moduleState.setHasError(true);\r\n }, [])\r\n\r\n const _getExtensionPropertyValueByKey = (\r\n properties: CommerceProperty[] | undefined,\r\n key: string,\r\n valueType: CommercePropertyValueEnum\r\n ) => {\r\n const property = properties?.find(p => p.Key === key)?.Value;\r\n\r\n // eslint-disable-next-line security/detect-object-injection\r\n const val = property ? property[valueType] : null;\r\n return val;\r\n };\r\n\r\n\r\n const checkEligibilityForShippingAddress = async () => {\r\n const notEligibleList: string[] = [];\r\n const cart = props.data.checkout.result?.checkoutCart?.cart;\r\n if (cart && address) {\r\n const itemIds = cart.CartLines?.map(cl => cl.ItemId!) || [];\r\n const addressCountry = address.ThreeLetterISORegionName || null;\r\n const addressState = address.State || null;\r\n const addressRegion = address.County || null;\r\n const input = new GetProductEligibilityInput(itemIds, true, cart.Id || '', addressCountry, addressState, addressRegion);\r\n const eligibilityData = await GetProductEligibilityAction(input, props.context.actionContext);\r\n if (eligibilityData.length) {\r\n eligibilityData.forEach((i: any) => {\r\n const id = _getExtensionPropertyValueByKey(i.ExtensionProperties, 'ItemId', CommercePropertyValueEnum.string);\r\n if (!i.IsEligible) {\r\n notEligibleList.push(id as string);\r\n }\r\n });\r\n }\r\n }\r\n setnonEligibleItems(notEligibleList);\r\n props.moduleState.setHasError(notEligibleList.length > 0);\r\n }\r\n\r\n const renderCartError = () => {\r\n if (!nonEligibleItems.length) {\r\n return null;\r\n }\r\n return (\r\n \r\n
\r\n The following items are not eligible for your current shipping address. Please remove them from the cart or change your address:\r\n
\r\n {nonEligibleItems.map(i => {\r\n const item = getCartLineFromItemId(i);\r\n return
{item?.ItemId} - {item?.Description}
\r\n })}\r\n
Remove Items \r\n
\r\n {cartLineImages}\r\n {viewState.isShowAddress && \r\n );\r\n};\r\n\r\nexport default CheckoutShippingAddressView;\r\n","import React from 'react';\r\n// import { ICartResources } from '../../definition-extensions/cart.ext.props.autogenerated';\r\n// import { ICheckoutResources } from '../../definition-extensions/checkout.ext.props.autogenerated';\r\n\r\n\r\ninterface ILinePaginationProps {\r\n nextPage: (e: React.MouseEvent) => void,\r\n prevPage: (e: React.MouseEvent) => void,\r\n changePage: (page: number) => void,\r\n currentPage: number,\r\n numPages: number,\r\n prev: string,\r\n next: string\r\n}\r\n\r\n/**\r\n * Renders pagination navigation on the page, which displays 4 buttons that allow\r\n * user to navigate to the first, last, next or previous pages. Also displays \r\n * the current page out of the total number of pages. ( ie. 5/7 )\r\n *\r\n * @param {(e: React.MouseEvent) => void} nextPage\r\n * @param {(e: React.MouseEvent) => void} prevPage\r\n * @param {(page: number) => void} changePage\r\n * @param {number} currentPage\r\n * @param {number} numPages\r\n * @param {ICartResources} resources\r\n * @return {*} {React.ReactNode}\r\n */\r\nexport const LinePagination : React.FC = ({\r\n nextPage,\r\n prevPage,\r\n changePage,\r\n currentPage,\r\n numPages,\r\n prev,\r\n next}) => {\r\n const firstPage: number = 1;\r\n \r\n return (\r\n \r\n \r\n {numPages > 0 &&\r\n <>\r\n {/* {currentPage !== 0 && */}\r\n <>\r\n
changePage(0)}>\r\n {`${firstPage}`}\r\n \r\n
\r\n {prev}\r\n \r\n \r\n {/* } */}\r\n
\r\n \r\n {currentPage + 1} / {numPages}\r\n \r\n
\r\n {/* {currentPage !== numPages && */}\r\n <>\r\n
\r\n {next}\r\n \r\n
changePage(numPages-1)}>\r\n {`${numPages}`}\r\n \r\n \r\n {/* } */}\r\n \r\n }\r\n
= ({\n confirmationText,\n shouldShowQrCode,\n channelReferenceIdLabel,\n channelReferenceId\n}) => {\n return (\n \n
{confirmationText} \n {channelReferenceId && (\n
\n {`${channelReferenceIdLabel} ${channelReferenceId}`}\n
\n )}\n {channelReferenceId && shouldShowQrCode && (\n
\n \n )}\n
= ({ errorMessage }) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n \n {errorMessage} \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 { IDictionary } from '@msdyn365-commerce/core';\nimport { CommerceProperty, SalesOrdersDataActions } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport * as React from 'react';\n\nimport { CheckInConfirmationComponent } from './check-in-confirmation';\nimport { CheckInErrorComponent } from './check-in-error';\nimport { IAdditionalInformationKeysData, ICheckInForPickupConfig, ICheckInForPickupProps } from './check-in-for-pickup.props.autogenerated';\n\n/**\n * The interface representing a piece of additional information data.\n */\ninterface IAdditionalInformation {\n formKey: IAdditionalInformationKeysData;\n value: string;\n}\n\n/**\n * The state for check-in view.\n */\nexport interface ICheckInViewState {\n /**\n * If the module has header error to show.\n */\n isHeaderError: boolean;\n\n /**\n * If the customer has checked in.\n */\n isCheckedIn: boolean;\n\n /**\n * Additional information to capture.\n */\n additionalInformation: IDictionary[];\n}\n\n/**\n * The properties for check-in view.\n */\nexport interface ICheckInViewProps extends ICheckInForPickupProps {\n headerError: React.ReactNode;\n confirmationComponent: React.ReactNode;\n viewState: ICheckInViewState;\n additionalInformationValues: string[];\n checkInForOrderPickup(additionalInformation?: IAdditionalInformation[]): Promise;\n}\n\n/**\n * The state of the CheckInForPickup module.\n */\nexport interface ICheckInForPickupState {\n /**\n * The header error message.\n */\n headerErrorMessage: string;\n\n /**\n * If the customer has checked in successfully.\n */\n isCheckedIn: boolean;\n}\n\n/**\n *\n * CheckIn component.\n * @extends {React.Component, ICheckInForPickupState>}\n */\nclass CheckInForPickup extends React.Component, ICheckInForPickupState> {\n public constructor(props: ICheckInForPickupProps) {\n super(props);\n this.state = {\n headerErrorMessage: '',\n isCheckedIn: false\n };\n }\n\n public render(): JSX.Element | null {\n const isHeaderError: boolean = this.state.headerErrorMessage !== '';\n\n const viewProps = {\n ...this.props,\n headerError: , nextState: ICheckInForPickupState): boolean {\n if (\n this.props.config.additionalInformationHeading !== nextProps.config.additionalInformationHeading ||\n this.props.config.confirmationText !== nextProps.config.confirmationText\n ) {\n return true;\n }\n if (this.state.headerErrorMessage !== nextState.headerErrorMessage || this.state.isCheckedIn !== nextState.isCheckedIn) {\n return true;\n }\n return false;\n }\n\n public async componentDidMount(): Promise {\n await this._onInit();\n }\n\n /**\n * The async callback for submitting check-in.\n * @param additionalInformationList - The optional additional information captured.\n * @returns The async result.\n */\n public checkInForOrderPickup = async (additionalInformationList?: IAdditionalInformation[]): Promise => {\n const channelId: number = Number.parseInt(this.props.context.request.query!.channelId, 10);\n const channelReferenceId: string = this.props.context.request.query!.channelReferenceId;\n const packingSlipId: string = this.props.context.request.query!.packingSlipId;\n\n const additionalInformationToSubmit: { formKey: string; value: string }[] | undefined = additionalInformationList?.map(\n additionalInformationKeyValuePair => {\n return {\n formKey: additionalInformationKeyValuePair.formKey.resourceId ?? '',\n value: additionalInformationKeyValuePair.value\n };\n }\n );\n const extensionPropertyList: CommerceProperty[] = [];\n if (!ObjectExtensions.isNullOrUndefined(additionalInformationToSubmit)) {\n for (const additionalInformation of additionalInformationToSubmit) {\n extensionPropertyList.push({\n Key: additionalInformation.formKey,\n Value: {\n StringValue: additionalInformation.value\n }\n });\n }\n }\n try {\n await SalesOrdersDataActions.checkInForOrderPickupAsync(\n { callerContext: this.props.context.actionContext, queryResultSettings: {} },\n channelId,\n packingSlipId,\n channelReferenceId,\n extensionPropertyList\n );\n } catch (error) {\n this.setState({ headerErrorMessage: this.props.resources.genericErrorMessage, isCheckedIn: false });\n this.props.telemetry.error(error);\n return Promise.resolve();\n }\n this.setState({ headerErrorMessage: '', isCheckedIn: true });\n return Promise.resolve();\n };\n\n /**\n * The action performed on module initialization.\n * @returns The async result.\n */\n private readonly _onInit = async (): Promise => {\n const channelId: number = Number.parseInt(this.props.context.request.query?.channelId ?? '', 10);\n const channelReferenceId: string | undefined = this.props.context.request.query?.channelReferenceId;\n const packingSlipId: string | undefined = this.props.context.request.query?.packingSlipId;\n if (Number.isNaN(channelId) || !channelReferenceId || !packingSlipId) {\n // No error message shown in editor mode.\n if (this.props.context.request.params.isEditor) {\n return Promise.resolve();\n } else if (this.props.context.request.params.isPreview) {\n this.setState({ headerErrorMessage: this.props.resources.requiredParameterMissingErrorMessage });\n } else {\n this.setState({ headerErrorMessage: this.props.resources.genericErrorMessage });\n }\n this.props.context.telemetry.error(\n 'One or more required URL parameters are missing. ' +\n 'Please make sure you have pass in channelId, channelReferenceId and packingSlipId through URL parameter.'\n );\n return Promise.resolve();\n }\n\n const { additionalInformationKeys } = this.props.config;\n\n const hasAdditionalInformation: boolean = ArrayExtensions.hasElements(additionalInformationKeys);\n\n // Call check-in-for-pickup directly if no additional information to capture.\n if (!hasAdditionalInformation) {\n try {\n await SalesOrdersDataActions.checkInForOrderPickupAsync(\n { callerContext: this.props.context.actionContext, queryResultSettings: {} },\n channelId,\n packingSlipId,\n channelReferenceId\n );\n } catch (error) {\n this.setState({ headerErrorMessage: this.props.resources.genericErrorMessage, isCheckedIn: false });\n this.props.telemetry.error(error);\n return Promise.resolve();\n }\n this.setState({ headerErrorMessage: '', isCheckedIn: true });\n }\n return Promise.resolve();\n };\n}\n\nexport default CheckInForPickup;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { FormBuilder } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ICheckInViewProps } from './check-in-for-pickup';\n\n/**\n * The check-in view for submitting check-in, capturing additional information, and showing check-in confirmation.\n * @param props - The check-in view properties.\n * @returns The check-in view as a react component.\n */\nconst CheckInViewComponent: React.FC = (props: ICheckInViewProps) => {\n const { headerError, checkInForOrderPickup, confirmationComponent, viewState } = props;\n return (\n <>\n {viewState.isHeaderError && headerError}\n {!viewState.isHeaderError && ArrayExtensions.hasElements(props.config.additionalInformationKeys) && (\n ): void;\n doNotShowAgainMessage: string;\n}\n\nexport interface IDistributorButtonProps {\n onClick(event: React.MouseEvent): void;\n text: string;\n className: string;\n}\n\nexport interface IDistributorEmptyMessageProps {\n emptyLocationsText?: string;\n}\n\nexport const DistributorSelectorCountMessage: React.FC = ({\n distributors,\n distributorCountMessage\n}) => {\n if (distributors) {\n return (\n \n {distributorCountMessage.replace('{count}', distributors.length.toString())}\n
\n );\n }\n\n return null;\n};\n\nexport const DistributorSelectorTermsOfService: React.FC = ({\n link,\n requestContext,\n onTextChange\n}) => {\n if (link) {\n const editableLink: Msdyn365.ILinksData = {\n ariaLabel: link.ariaLabel,\n className: 'ms-distributor-selector__terms-link',\n linkText: link.linkText,\n linkUrl: link.linkUrl.destinationUrl,\n openInNewTab: link.openInNewTab,\n role: 'link'\n };\n\n return (\n \n
\n );\n }\n return null;\n};\n\nexport const DistributorSelectorWaiting: React.FC = () => {\n return
;\n};\n\nexport const DistributorSelectorDoNotShowAgain: React.FC = ({ onChange, doNotShowAgainMessage }) => {\n return (\n \n {doNotShowAgainMessage} \n
\n );\n};\n\nexport const DistributorSelectorButton: React.FC = ({ onClick, text, className }) => {\n return (\n \n {text}\n \n );\n};\n\nexport const DistributorEmptyMessage: React.FC = ({ emptyLocationsText }) => (\n \n
{emptyLocationsText}
\n
= (props: IDistributorSelectorLineItemProps) => {\n const {\n distributor,\n resources,\n index,\n currentDistributorId,\n telemetryContent,\n shouldShowIndex,\n selectDistributorText,\n distributorDetailsToBeShown,\n mainClassName\n } = props;\n\n const distributorName: string | undefined = distributor.OrgUnit?.OrgUnitName;\n const isCurrentDistributor = currentDistributorId === distributor.OrgUnit?.RecordId;\n const payLoad: IPayLoad = getPayloadObject('click', telemetryContent!, TelemetryConstant.CurrentDistributor);\n const currentDistributorAttributes = getTelemetryAttributes(telemetryContent!, payLoad);\n const distributorAddress = distributor.OrgUnit?.OrgUnitAddress?.FullAddress;\n const distributorPhoneNo = distributor.OrgUnit?.OrgUnitAddress?.Phone;\n const deliveryMethods = distributor?.OrgUnitDeliveryOptions?.DeliveryOptions;\n\n return (\n \n {isCurrentDistributor ? (\n
\n
{resources.currentDistributorText}
\n
\n ) : null}\n
\n {shouldShowIndex && {index} }\n {distributorName} \n
\n
\n {distributorDetailsToBeShown && distributorDetailsToBeShown.indexOf('location') > -1 ? (\n
\n
{resources.locationHeadingText} \n {distributorAddress && (\n
\n {distributorAddress} \n
\n )}\n
\n ) : null}\n {distributorDetailsToBeShown && distributorDetailsToBeShown.indexOf('primaryContact') > -1 ? (\n
\n
{resources.primaryContactText} \n {distributorPhoneNo && (\n
\n {distributorPhoneNo} \n
\n )}\n
\n ) : null}\n {distributorDetailsToBeShown && distributorDetailsToBeShown.indexOf('deliveryMethod') > -1 ? (\n
\n
{resources.deliveryMethodHeadingText} \n {ArrayExtensions.hasElements(deliveryMethods) && (\n
\n <>\n {deliveryMethods?.map(deliveryMethod => {\n return (\n \n {deliveryMethod.Description}\n \n );\n })}\n \n
\n )}\n
\n ) : null}\n
\n {resources.viewAllDistributorText}\n \n {!isCurrentDistributor ? (\n
\n {selectDistributorText}\n \n ) : null}\n \n
{\n private readonly selectedDistributorRef: React.RefObject;\n private distributorCounter: number;\n @observable private shouldDisplayList: boolean | undefined;\n\n public constructor(props: IDistributorSelectorLinesProps) {\n super(props);\n this.selectedDistributorRef = React.createRef();\n this.distributorCounter = 0;\n this.shouldDisplayList = this.props.shouldDisplayList;\n }\n\n public componentDidMount(): void {\n reaction(\n () => this.shouldDisplayList,\n () => {\n setTimeout(() => {\n this._scrollIntoView();\n }, 0);\n }\n );\n }\n\n public componentDidUpdate(previousProps: IDistributorSelectorLinesProps): void {\n if (this.props.selectedDistributorId !== previousProps.selectedDistributorId) {\n this._scrollIntoView();\n }\n }\n\n public render(): JSX.Element | null {\n const { distributors, mainClassName } = this.props;\n this.shouldDisplayList = this.props.shouldDisplayList;\n\n if (!ArrayExtensions.hasElements(distributors)) {\n return null;\n }\n\n this.distributorCounter = 0;\n\n return (\n \n {distributors.map((distributor, index) => {\n return this._renderDistributor(distributor, index);\n })}\n
\n );\n }\n\n /**\n * On click Handler function.\n * @param orgUnit -OrgUnit distributor.\n * @returns Click action on orgUnit Distributor.\n */\n private readonly onDistributorSelected = (orgUnit: OrgUnit | undefined) => () => {\n this.props.onDistributorSelected(orgUnit);\n };\n\n private _renderDistributor(distributor: IDistributorInfo, index: number): JSX.Element | undefined {\n const {\n distributors,\n mainClassName,\n currentDistributorId,\n resources,\n telemetryContent,\n distributorDetailsToBeShown,\n selectDistributorText,\n shouldShowIndex,\n onSetAsCurrentDistributor,\n onViewAllDistributorDetails\n } = this.props;\n const selectedDistributorId = this.props.selectedDistributorId;\n const defaultAriaSetsize = 0;\n const orgUnit = distributor?.OrgUnit;\n if (distributor) {\n ++this.distributorCounter;\n return (\n \n ;\n}\n\n/**\n * Distributor Payment types state interface.\n */\nexport interface IDistributorPaymentTypeListState {\n isFilterExpanded: boolean;\n selectedPaymentTypes?: string;\n}\n\n/**\n * Distributor payment option list Filter\n */\nexport class DistributorPaymentOptionList extends React.PureComponent {\n private readonly _distributorPaymentTypesMenu: React.RefObject;\n\n public constructor(props: IDistributorPaymentTypesListProps) {\n super(props);\n this._distributorPaymentTypesMenu = React.createRef();\n this.state = {\n isFilterExpanded: false,\n selectedPaymentTypes: ''\n };\n }\n\n public render(): JSX.Element {\n const { mainClassName, paymentTypesMenuText, paymentTypesList, defaultOptionText } = this.props;\n const selectedPaymentTypesDesc = defaultOptionText\n ? defaultOptionText\n : paymentTypesList?.find((payment: TenderType) => payment.TenderTypeId === this.state.selectedPaymentTypes)?.Name;\n const role = 'menu';\n return (\n \n
\n {selectedPaymentTypesDesc !== undefined ? selectedPaymentTypesDesc : paymentTypesMenuText}\n \n {this.state.isFilterExpanded ? (\n
\n {paymentTypesList?.map((tenderType: TenderType) => {\n return (\n \n \n {tenderType.Name} \n \n \n );\n })}\n \n ) : null}\n
): Promise => {\n event.preventDefault();\n const paymentCode = event.currentTarget.getAttribute('data-value');\n if (paymentCode !== null) {\n this.setState({\n selectedPaymentTypes: paymentCode\n });\n\n this._renderTenderTypes();\n await this.props.onChange(paymentCode);\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 IPayLoad,\n ITelemetryContent,\n TelemetryConstant,\n getPayloadObject,\n getTelemetryAttributes\n} from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\nimport { TenderType } from '@msdyn365-commerce/retail-proxy';\nimport { DistributorPaymentOptionList } from './distributor-payment-option-list';\n\n/**\n * Distributor Selector Search Form Props interface.\n */\nexport interface IDistributorSelectorSearchFormProps {\n mainClassName: string;\n shouldDisplayList?: boolean;\n telemetryContent?: ITelemetryContent;\n viewMapText: string;\n viewListText: string;\n paymentFilterMenuHeading: string;\n paymentFilterByHeading: string;\n showLocatorView?: boolean;\n showPaymentTypeFilter?: boolean;\n paymentTypes?: TenderType[];\n filteredPaymentType?: string;\n onPaymentFilterSelected(tenderTypeId: string): void;\n onToggleListMapViewState(): void;\n}\n\n/**\n * Simple search form consisting of search text and a search button.\n */\nexport class DistributorSelectorSearchForm extends React.PureComponent {\n private readonly toggleMapViewAttributes: Msdyn365.IDictionary | undefined;\n\n public constructor(props: IDistributorSelectorSearchFormProps) {\n super(props);\n const payLoad: IPayLoad = getPayloadObject('click', props.telemetryContent!, TelemetryConstant.ToggleMapView);\n this.toggleMapViewAttributes = getTelemetryAttributes(props.telemetryContent!, payLoad);\n }\n\n public render(): JSX.Element {\n const {\n mainClassName,\n shouldDisplayList,\n viewMapText,\n viewListText,\n showLocatorView,\n paymentTypes,\n paymentFilterMenuHeading,\n paymentFilterByHeading,\n showPaymentTypeFilter,\n onToggleListMapViewState\n } = this.props;\n const toggleButtonText = shouldDisplayList ? viewMapText : viewListText;\n const toggleButtonClass = shouldDisplayList ? 'view-map' : 'list-view';\n\n return (\n \n
\n {showLocatorView && (\n \n {toggleButtonText}\n \n )}\n {showPaymentTypeFilter &&\n this.renderPaymentTypeList(this.props, paymentTypes, paymentFilterMenuHeading, paymentFilterByHeading)}\n
\n
=> {\n this.props.onPaymentFilterSelected(tenderTypeId);\n return Promise.resolve();\n };\n\n private readonly renderPaymentTypeList = (\n props: IDistributorSelectorSearchFormProps,\n paymentTypesOptions: TenderType[] | undefined,\n paymentFilterMenuHeading: string | undefined,\n paymentFilterByHeading: string | undefined\n ): JSX.Element | null => {\n return (\n <>\n {paymentFilterByHeading}
\n {\n state: IDistributorState;\n\n // Current distributor button props\n currentDistributorContainer?: IModuleProps;\n currentDistributorButton: React.ReactNode;\n\n // Containers:\n moduleProps: IModuleProps;\n bodyContainerProps: INodeProps;\n footerContainerProps: INodeProps;\n headerContainerProps: INodeProps;\n\n // Distributor warning Props\n distributorWarningHeaderProps?: React.ReactNode;\n distributorWarningContentHeadingProps?: React.ReactNode;\n distributorWarningContent?: React.ReactNode;\n distributorWarningDoNotShowAgain?: React.ReactNode;\n distributorWarningContinue?: React.ReactNode;\n distributorWarningCancel?: React.ReactNode;\n distributorWarningButtonWrapper: INodeProps;\n\n // Distributor selector Props\n distributorSelectorHeaderProps?: React.ReactNode;\n // Components\n distributorCountMessage?: React.ReactNode;\n searchForm?: React.ReactNode;\n spinner?: React.ReactNode;\n noDistributorsMessage?: React.ReactNode;\n mapContainerProps?: INodeProps;\n maps?: React.ReactNode;\n isMobileView?: boolean;\n distributorDetailsModal?: INodeProps;\n bodyWrapperProps?: INodeProps;\n distributorsResultContainerProps: INodeProps;\n distributorsResultWrapperProps: INodeProps;\n distributorLinesViewProps?: React.ReactNode;\n terms?: React.ReactNode;\n\n // distributor details modal popup\n showDistributorDetailsPopup: boolean;\n distributorDetailsModalPopup: IModuleProps;\n distributorDetailsModalHeader: INodeProps;\n distributorDetailsHeaderProps: React.ReactNode;\n distributorDetailsModalBody: INodeProps;\n distributorDetailsModalBodyContainer: INodeProps;\n\n distributorDetailsLocation: React.ReactNode;\n distributorDetailsPrimaryContact: React.ReactNode;\n distributorDetailsDeliveryMethods: React.ReactNode;\n distributorDetailsViewAllDetails: React.ReactNode;\n distributorDetailsModalFooter: INodeProps;\n distributorDetailsChangeDistributor: React.ReactNode;\n\n // distributor details slider\n distributorDetailsSliderWrapper: INodeProps;\n distributorDetailsSliderHeaderContainer: INodeProps;\n distributorDetailsSliderFooterContainer: INodeProps;\n distributorDetailsSliderBodyContainer: INodeProps;\n distributorDetailsSliderDistributorName: React.ReactNode;\n distributorDetailsSliderHeaderContent: React.ReactNode;\n distributorDetailsSliderInformationWrapper: INodeProps;\n distributorDetailsSliderCurrentDistributorTitle: React.ReactNode;\n distributorDetailsSliderSelectDistributor: React.ReactNode;\n}\n\n/**\n * ILocationHours Interface.\n */\nexport interface ILocationHours {\n openFrom?: string;\n openTo?: string;\n}\n\n/**\n *\n * DistributorSelector component\n * @extends {React.Component>}\n */\n@observer\nclass DistributorSelector extends React.Component, IDistributorState> {\n private readonly telemetryContent: ITelemetryContent;\n private mainClass = 'ms-distributor-selector';\n private headerClass = 'ms-header__current-distributor';\n private readonly currentDistributorBtnRef: React.RefObject = React.createRef();\n private currentDistributor?: ICurrentDistributor;\n\n public constructor(props: IDistributorSelectorProps) {\n super(props);\n this.state = {\n isSearchInProgress: true,\n searchTerm: '',\n showWarningDialog: false,\n showDistributorDetails: false,\n distributorId: undefined,\n distributorDetailsFromPopup: false,\n filteredPaymentTypeId: ''\n };\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.currentDistributor = this.getCurrentDistributor();\n }\n\n public async componentDidMount(): Promise {\n const {\n context: {\n actionContext: {\n requestContext: { channel }\n },\n request: { user }\n }\n } = this.props;\n\n if (this.props.data.distributorSelectorStateManager.result) {\n await this._getAndUpdateDistributorList();\n this.checkUserStateAndOpenDialog(user);\n }\n\n reaction(\n () => this.props.data.distributorSelectorStateManager.result,\n async () => {\n await this._getAndUpdateDistributorList();\n this.checkUserStateAndOpenDialog(user);\n }\n );\n\n reaction(\n () => this.props.data.distributorSelectorStateManager.result?.loadMapApi,\n () => {\n this.props.data.distributorSelectorStateManager.result?.loadMapApi({\n key: channel?.BingMapsEnabled ? channel.BingMapsApiKey : '',\n lang: this.props.context.actionContext.requestContext.locale,\n market: this.props.context.actionContext.requestContext.channel?.ChannelCountryRegionISOCode\n });\n }\n );\n }\n\n public render(): JSX.Element | null {\n const {\n config: {\n className,\n distributorSelectorHeading,\n distributorWarningDialogHeading,\n distributorWarningContent,\n termsOfServiceLink,\n distributorDetailsToBeShown,\n selectDistributorText,\n doNotShowAgainCheckbox,\n noDistributorFoundText\n },\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n },\n context: {\n request: { user }\n },\n slots: { maps: mapSlot },\n resources\n } = this.props;\n const { showWarningDialog } = this.state;\n const currentDistributorId = this.currentDistributor?.DistributorId;\n const currentDistributorName = this.currentDistributor?.DistributorName;\n const headerText = currentDistributorName ? currentDistributorName : resources.headerCurrentDistributorText;\n\n let distributorInfoList = distributorSelectorStateManager?.distributorList;\n const paymentTypes = this.getUniquePaymentTypes(distributorInfoList);\n\n const hasMapSlot = ArrayExtensions.hasElements(mapSlot);\n const isMobileDevice = isMobile({ variant: VariantType.Viewport, context: this.props.context.request }) === 'xs';\n const selectedDistributorId = distributorSelectorStateManager?.selectedDistributorId;\n\n const distributorDetails = this.state.showDistributorDetails\n ? this.getDistributorDetails(this.state.distributorId)\n : this.getDistributorDetails(currentDistributorId);\n const isCurrentDistributorSelected = this.state.distributorId === currentDistributorId;\n const shouldOpenDistributorSelectorDialog = !!distributorSelectorStateManager?.isDistributorSelectorDialogOpen;\n const shouldOpenDistributorDetailPopup = !!(distributorSelectorStateManager?.isDistributorDetailPopupOpen && distributorDetails);\n const shouldDisplayList = distributorSelectorStateManager?.listMapViewState?.displayList;\n if (this.state.filteredPaymentTypeId && distributorInfoList) {\n distributorInfoList = this.filterDistributorsByPaymentTypes(distributorInfoList, this.state.filteredPaymentTypeId);\n }\n const sortedDistributorList = distributorInfoList ? this._sortDistributor(distributorInfoList, currentDistributorId) : [];\n\n const canShowLocationView =\n (distributorSelectorStateManager?.distributorSelectorContext?.showMapViewLink === undefined ||\n distributorSelectorStateManager.distributorSelectorContext.showMapViewLink) &&\n distributorSelectorStateManager?.isMapModuleLoaded &&\n hasMapSlot;\n\n const showDistributorDetailsOnMap = distributorSelectorStateManager?.showDistributorDetailsOnMap;\n\n // @ts-ignore\n const viewProps: IDistributorSelectorViewProps = {\n ...(this.props as IDistributorSelectorProps),\n state: this.state,\n maps: hasMapSlot ? mapSlot[0] : undefined,\n showDistributorDetailsPopup: shouldOpenDistributorDetailPopup,\n currentDistributorContainer: this.shouldShowDistributors(user)\n ? {\n tag: 'div' as NodeTag,\n moduleProps: this.props,\n className: `${this.headerClass}-container`\n }\n : undefined,\n currentDistributorButton: (\n \n {headerText} \n \n ),\n moduleProps: {\n tag: Modal,\n moduleProps: this.props,\n className: classname(hasMapSlot ? `${this.mainClass} maps` : `${this.mainClass}`, className),\n autoFocus: true,\n fade: true,\n isOpen: shouldOpenDistributorSelectorDialog,\n 'aria-label': showWarningDialog ? distributorWarningDialogHeading : distributorSelectorHeading,\n onClosed: this._closeDistributorSelectorDialog,\n horizontalPosition: 'center',\n verticalPosition: 'center',\n toggle:\n currentDistributorId || !ArrayExtensions.hasElements(distributorInfoList)\n ? this._closeDistributorSelectorDialog\n : undefined\n },\n isMobileView: isMobileDevice,\n headerContainerProps: {\n tag: ModalHeader,\n className: `${this.mainClass}-modal-header`,\n toggle:\n currentDistributorId || !ArrayExtensions.hasElements(distributorInfoList)\n ? this._closeDistributorSelectorDialog\n : undefined\n },\n distributorSelectorHeaderProps: distributorSelectorHeading && (\n => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n await distributorSelectorStateManager?.toggleListMapViewState();\n };\n\n /**\n * Method to be called on the click on don't show again checkbox.\n */\n public onChangeForDoNotShow = (event: React.ChangeEvent): void => {\n this.setState({ warningDialogState: event.target.checked });\n };\n\n public onSelectDistributor = async (): Promise => {\n if (this.state.distributorId) {\n await this._setCurrentDistributor(this.state.distributorId);\n }\n };\n\n public onChangeDistributorClick = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n if (distributorSelectorStateManager) {\n // Set selected distributor id\n await distributorSelectorStateManager.setSelectedDistributorId(undefined);\n\n if (distributorSelectorStateManager.isDistributorDetailPopupOpen) {\n // close the detail popup\n await distributorSelectorStateManager.closeDistributorDetailPopup();\n }\n\n if (distributorSelectorStateManager.isDistributorSelectorDialogOpen) {\n this.setState({ distributorId: undefined, showDistributorDetails: false, distributorDetailsFromPopup: false });\n } else {\n // Open the distributor selector modal\n await distributorSelectorStateManager.openDistributorSelectorDialog({\n parentElementRef: this.currentDistributorBtnRef\n });\n }\n }\n };\n\n public onDistributorCloseButtonClick = async () => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n if (distributorSelectorStateManager) {\n await distributorSelectorStateManager.closeDistributorDetailPopup();\n }\n };\n\n /**\n * Method to be called on the click on the continue button.\n */\n public continueButtonClick = async (): Promise => {\n const {\n context: {\n actionContext: {\n requestContext: { cookies }\n }\n },\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n\n const currentDistributor = this.state.currentSelectedDistributor;\n\n if (this.state.warningDialogState) {\n distributorSelectorStateManager?.hideWarningMessage(cookies.isConsentGiven());\n }\n\n await this._closeDistributorSelectorDialog();\n this.redirectToDistributorURL(currentDistributor);\n };\n\n /**\n * Method to be called on click on the cancel button.\n */\n public cancelButtonClick = async (): Promise => {\n await this._closeDistributorSelectorDialog();\n this.setState({ warningDialogState: false, showWarningDialog: false, currentSelectedDistributor: undefined });\n };\n\n public backToSearchClick = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n this.setState({ showDistributorDetails: false, distributorId: undefined });\n await distributorSelectorStateManager?.setSelectedDistributorId(undefined);\n };\n\n public onViewAllDistributorDetailsFromPopup = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n\n if (distributorSelectorStateManager) {\n if (!this.currentDistributor?.DistributorId) {\n return;\n }\n\n // close the detail popup\n await distributorSelectorStateManager.closeDistributorDetailPopup();\n\n // Open the distributor selector modal\n await distributorSelectorStateManager.openDistributorSelectorDialog({\n parentElementRef: this.currentDistributorBtnRef\n });\n\n // Set selected distributor id\n await distributorSelectorStateManager.setSelectedDistributorId(this.currentDistributor?.DistributorId);\n\n this.setState({\n distributorId: this.currentDistributor?.DistributorId,\n showDistributorDetails: true,\n distributorDetailsFromPopup: true\n });\n }\n };\n\n public onViewAllDistributorDetails = async (distributorId: number | undefined): Promise => {\n if (!distributorId) {\n return;\n }\n this.setState({ distributorId: distributorId, showDistributorDetails: true });\n };\n\n private getCurrentDistributor = (): ICurrentDistributor | undefined => {\n const {\n context: {\n request: {\n url: { requestUrl },\n user\n }\n }\n } = this.props;\n\n // We show the distributor selector module when the user is signed-in.\n if (user.isAuthenticated) {\n const distributorList = this.props.data.distributorList?.result;\n\n const currentDistributor = distributorList?.find(distributor =>\n distributor.MarketSettings?.localeItems.some(\n locale => requestUrl.href.toLowerCase().indexOf(locale.localeBaseUrl.toLowerCase()) >= 0\n )\n );\n\n if (currentDistributor) {\n return {\n DistributorId: currentDistributor.OrgUnit?.RecordId,\n DistributorName: currentDistributor.OrgUnit?.OrgUnitName\n };\n } else {\n return undefined;\n }\n }\n return undefined;\n };\n\n private getUniquePaymentTypes = (distributors?: IDistributorInfo[]) => {\n const uniquePaymentTypes = new Set();\n distributors?.forEach(distributor => {\n distributor.PaymentTypes?.forEach(paymentType => {\n uniquePaymentTypes.add(paymentType);\n });\n });\n return [...uniquePaymentTypes];\n };\n\n /**\n * The method to be called for filtering store locations based on the user's selected filters.\n * @param distributors - Distributors List.\n * @param filteredPaymentTypeId - Filter selected by the user.\n * @returns -Filtered distributors.\n */\n private readonly filterDistributorsByPaymentTypes = (distributors: IDistributorInfo[], filteredPaymentTypeId: string) => {\n return distributors.filter(distributor => {\n return distributor?.PaymentTypes?.some(paymentType => {\n return paymentType.TenderTypeId === filteredPaymentTypeId;\n });\n });\n };\n\n /**\n * Redirect user to the distributor selector site.\n * @param currentDistributor - Current distributor details\n */\n private redirectToDistributorURL = (currentDistributor: IDistributorInfo | undefined) => {\n const { telemetry } = this.props;\n const marketSettings = currentDistributor?.MarketSettings;\n\n // Check if the current locale is present.\n const currentLocale = marketSettings?.localeItems.find(localeItem => localeItem.locale === this.props.context.request.locale);\n let distributorURL = '';\n if (currentLocale) {\n distributorURL = currentLocale.localeBaseUrl;\n } else {\n // Check if the default locale is set.\n let defaultLocale = marketSettings?.localeItems.find(localeItem => localeItem.isDefaultLocale);\n if (!defaultLocale) {\n defaultLocale = ArrayExtensions.hasElements(marketSettings?.localeItems) ? marketSettings?.localeItems[0] : undefined;\n } else {\n distributorURL = defaultLocale.localeBaseUrl;\n }\n }\n\n if (distributorURL) {\n if (!distributorURL.startsWith('https://')) {\n distributorURL = `https://${distributorURL}`;\n }\n window.location.href = distributorURL;\n } else if (telemetry) {\n telemetry.debug('redirectToDistributorURL: Distributor URL is empty');\n }\n };\n\n /**\n * Handle click on the distributor selector.\n * @returns : Promise void.\n */\n private handleDistributorSelectorClick = async () => {\n const distributorSelectorStateManager = this.props.data.distributorSelectorStateManager?.result;\n\n if (this.currentDistributor?.DistributorId) {\n if (distributorSelectorStateManager?.isDistributorDetailPopupOpen) {\n distributorSelectorStateManager?.closeDistributorDetailPopup();\n } else {\n await distributorSelectorStateManager?.openDistributorDetailPopup({\n parentElementRef: this.currentDistributorBtnRef\n });\n }\n return;\n }\n };\n\n /**\n * Filter distributors by payment types.\n * @param tenderTypeId -Delivery Code.\n */\n private readonly onFilteredPaymentType = (tenderTypeId: string) => {\n this.setState({ filteredPaymentTypeId: tenderTypeId });\n };\n\n /**\n * Creates the distributor details view props.\n * @param distributorDetails: Distributor details\n * @returns : View props for the distributor details.\n */\n private renderDistributorDetailsViewProps = (distributorDetails: IDistributorInfo | undefined) => {\n const {\n config: { switchDistributorText, distributorDetailsToBeShown },\n resources\n } = this.props;\n const distributorAddress = distributorDetails?.OrgUnit?.OrgUnitAddress?.FullAddress;\n const distributorPhoneNo = distributorDetails?.OrgUnit?.OrgUnitAddress?.Phone;\n const deliveryMethods = distributorDetails?.OrgUnitDeliveryOptions?.DeliveryOptions;\n\n const distributorDetailsViewProps = {\n distributorDetailsModalPopup: {\n tag: 'div',\n moduleProps: this.props,\n className: classname(`${this.mainClass}__details_dialog`)\n },\n distributorDetailsModalHeader: {\n tag: 'div',\n className: `${this.mainClass}__dialog__header`\n },\n distributorDetailsHeaderProps: (\n <>\n {distributorDetails?.OrgUnit?.OrgUnitName || ''} \n \n
{resources.locationHeadingText} \n {distributorAddress && (\n
\n {distributorAddress} \n
\n )}\n
\n
{resources.primaryContactText} \n {distributorPhoneNo && (\n
\n {distributorPhoneNo} \n
\n )}\n
\n
{resources.deliveryMethodHeadingText} \n {ArrayExtensions.hasElements(deliveryMethods) && (\n
\n <>\n {deliveryMethods?.map(deliveryMethod => {\n return (\n \n {deliveryMethod.Description}\n \n );\n })}\n \n
\n )}\n
\n {resources.viewAllDistributorText}\n \n ),\n distributorDetailsChangeDistributor: (\n \n {\n \n ),\n distributorDetailsModalFooter: {\n tag: 'div',\n className: `${this.mainClass}__dialog__footer`\n },\n distributorDetailsSliderWrapper: {\n tag: 'div',\n className: classname(\n `${this.mainClass}__details-slider-wrapper`,\n this.state.showDistributorDetails ? 'show' : '',\n this.state.distributorDetailsFromPopup ? 'no-header' : ''\n )\n }\n };\n return distributorDetailsViewProps;\n };\n\n private renderDistributorSliderViewProps = (\n distributorDetails: IDistributorInfo | undefined,\n isCurrentDistributorSelected: boolean\n ) => {\n const {\n resources,\n config: { selectDistributorText }\n } = this.props;\n const payLoad: IPayLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.CurrentDistributor);\n const currentDistributorAttributes = getTelemetryAttributes(this.telemetryContent, payLoad);\n\n const distributorSliderViewProps = {\n distributorDetailsSliderDistributorName: (\n {distributorDetails?.OrgUnit?.OrgUnitName} \n ),\n distributorDetailsSliderHeaderContent: (\n \n {resources.distributorSliderBackToSearch}\n \n ),\n distributorDetailsSliderHeaderContainer: {\n tag: 'div',\n className: `${this.mainClass}__details-slider-heading`\n },\n distributorDetailsSliderBodyContainer: {\n tag: 'div',\n className: `${this.mainClass}__details-slider-body`\n },\n distributorDetailsSliderFooterContainer: {\n tag: 'div',\n className: `${this.mainClass}__details-slider-footer`\n },\n distributorDetailsSliderInformationWrapper: {\n tag: 'div',\n className: `${this.mainClass}__details-slider-info-wrapper`\n },\n distributorDetailsSlidercurrentDistributorTitle: isCurrentDistributorSelected && (\n \n
{resources.currentDistributorText}
\n
\n {\n => {\n const {\n data: {\n distributorList: { result: distributorList }\n }\n } = this.props;\n\n this.setState({ isSearchInProgress: true });\n\n if (distributorList) {\n await this._updateDistributorListInStateManager(distributorList);\n }\n\n this.setState({ isSearchInProgress: false });\n };\n\n /**\n * Method to update the distributor state manager.\n * @param distributorList - distributor Info Object.\n * @returns Void promise.\n */\n private readonly _updateDistributorListInStateManager = async (distributorList: IDistributorInfo[]): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n },\n telemetry\n } = this.props;\n\n if (!distributorSelectorStateManager || !distributorList) {\n return;\n }\n\n const currentDistributorId = this.currentDistributor?.DistributorId;\n const sortedDistributorList = this._sortDistributor(distributorList, currentDistributorId);\n\n // When serializing the distributor selector state manager, functions get stripped.\n if (distributorSelectorStateManager.setDistributorsList) {\n await distributorSelectorStateManager.setDistributorsList(sortedDistributorList).catch((error: Error) => {\n if (telemetry) {\n telemetry.error(error.message);\n telemetry.debug('Unable to Update distributor state');\n }\n });\n }\n };\n\n /**\n * Method will sort all distributor.\n * @param distributors - Distributor List.\n * @param currentDistributorId - Distributor Id.\n * @returns List of distributor.\n */\n private _sortDistributor(distributors: IDistributorInfo[], currentDistributorId: number | undefined): IDistributorInfo[] {\n const isCurrentDistributor = (value: IDistributorInfo) => currentDistributorId && value.OrgUnit?.RecordId === currentDistributorId;\n\n return [...distributors.filter(isCurrentDistributor), ...distributors.filter(distributor => !isCurrentDistributor(distributor))];\n }\n\n /**\n * Method to be called closing the distributor selector dialog.\n * @returns Void promise.\n */\n private readonly _closeDistributorSelectorDialog = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n if (distributorSelectorStateManager) {\n distributorSelectorStateManager.distributorSelectorContext?.parentElementRef?.current?.focus();\n // Update the distributor map visibility to true.\n distributorSelectorStateManager.updateDistributorMapVisibility(true);\n await distributorSelectorStateManager.setSelectedDistributorId(undefined);\n await distributorSelectorStateManager.closeDistributorSelectorDialog();\n this.setState({\n searchTerm: '',\n showWarningDialog: false,\n currentSelectedDistributor: undefined,\n distributorDetailsFromPopup: false,\n showDistributorDetails: false,\n distributorId: undefined\n });\n }\n };\n\n /**\n * On Selecting distributor.\n * @param distributorId - Distributor Id.\n */\n private readonly _setSelectedDistributor = async (orgUnit: OrgUnit | undefined): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n\n if (!distributorSelectorStateManager || !orgUnit) {\n return;\n }\n\n await distributorSelectorStateManager.setSelectedDistributorId(orgUnit.RecordId);\n };\n\n /**\n * On Selecting Current Distributor.\n * @param distributorId - Distributor Id.\n */\n private readonly _setCurrentDistributor = async (distributorId: number | undefined): Promise => {\n if (!distributorId) {\n return;\n }\n\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n\n if (!distributorSelectorStateManager) {\n return;\n }\n const distributorList = distributorSelectorStateManager?.distributorList;\n const currentDistributor = distributorList?.find(distributor => distributor.OrgUnit?.RecordId === distributorId);\n if (distributorSelectorStateManager.hideDistributorWarning || !this.currentDistributor) {\n this.redirectToDistributorURL(currentDistributor);\n await this._closeDistributorSelectorDialog();\n } else {\n this.setState({ showWarningDialog: true, currentSelectedDistributor: currentDistributor });\n }\n };\n}\n\nexport default DistributorSelector;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport { IDistributorSelectorViewProps } from './distributor-selector';\n\n/**\n * Render the body of the popup.\n * @param props -- Distributor selector view props.\n * @returns -- Returns the html.\n */\nconst renderDistributorSelectorBody: React.FC = props => {\n const {\n bodyContainerProps,\n state,\n spinner,\n distributorLinesViewProps,\n maps,\n bodyWrapperProps,\n distributorsResultContainerProps,\n distributorsResultWrapperProps,\n mapContainerProps,\n distributorCountMessage,\n searchForm,\n noDistributorsMessage\n } = props;\n\n return (\n \n \n {searchForm}\n \n {state.isSearchInProgress ? (\n spinner\n ) : (\n \n {distributorLinesViewProps ? (\n <>\n {distributorCountMessage}\n {distributorLinesViewProps}\n \n ) : (\n <>{noDistributorsMessage}\n )}\n \n )}\n \n {mapContainerProps ? (\n \n {maps}\n {distributorLinesViewProps} \n \n ) : (\n undefined\n )}\n \n \n );\n};\n\nconst renderDistributorDetails: React.FC = props => {\n const {\n distributorDetailsSliderWrapper,\n distributorDetailsSliderHeaderContainer,\n distributorDetailsSliderHeaderContent,\n distributorDetailsSliderBodyContainer,\n distributorDetailsSliderCurrentDistributorTitle,\n distributorDetailsSliderFooterContainer,\n distributorDetailsSliderDistributorName,\n distributorDetailsSliderInformationWrapper,\n distributorDetailsLocation,\n distributorDetailsPrimaryContact,\n distributorDetailsSliderSelectDistributor,\n terms,\n distributorDetailsChangeDistributor,\n state,\n distributorDetailsDeliveryMethods\n } = props;\n\n return (\n \n {!state.distributorDetailsFromPopup ? (\n {distributorDetailsSliderHeaderContent} \n ) : null}\n \n {distributorDetailsSliderCurrentDistributorTitle}\n {distributorDetailsSliderDistributorName}\n \n {distributorDetailsLocation}\n {distributorDetailsPrimaryContact}\n {distributorDetailsDeliveryMethods}\n \n {distributorDetailsSliderSelectDistributor}\n {state.distributorDetailsFromPopup ? distributorDetailsChangeDistributor : null}\n \n {terms} \n \n );\n};\n\nconst renderDistributorWarningBody: React.FC = props => {\n const { bodyContainerProps, distributorWarningContent } = props;\n\n return {distributorWarningContent} ;\n};\n\nconst renderDistributorSelectorModal: React.FC = props => {\n const { footerContainerProps, headerContainerProps, distributorSelectorHeaderProps, moduleProps, terms } = props;\n return (\n \n {renderDistributorDetails(props)}\n {distributorSelectorHeaderProps} \n {renderDistributorSelectorBody(props)}\n {terms} \n \n );\n};\n\nconst renderDistributorDetailsPopup = (props: IDistributorSelectorViewProps): JSX.Element | null => {\n const {\n distributorDetailsModalPopup,\n distributorDetailsModalHeader,\n distributorDetailsHeaderProps,\n distributorDetailsModalBody,\n distributorDetailsModalBodyContainer,\n distributorDetailsLocation,\n distributorDetailsPrimaryContact,\n distributorDetailsViewAllDetails,\n distributorDetailsChangeDistributor,\n distributorDetailsModalFooter,\n showDistributorDetailsPopup,\n distributorDetailsDeliveryMethods\n } = props;\n if (showDistributorDetailsPopup) {\n return (\n \n {distributorDetailsHeaderProps} \n \n \n {distributorDetailsLocation}\n {distributorDetailsPrimaryContact}\n {distributorDetailsDeliveryMethods}\n \n {distributorDetailsViewAllDetails}\n \n {distributorDetailsChangeDistributor} \n \n );\n }\n return null;\n};\n\nconst renderWarningDialog = (props: IDistributorSelectorViewProps): JSX.Element | undefined => {\n const {\n footerContainerProps,\n headerContainerProps,\n distributorWarningHeaderProps,\n moduleProps,\n distributorWarningButtonWrapper,\n distributorWarningDoNotShowAgain,\n distributorWarningContinue,\n distributorWarningCancel\n } = props;\n return (\n \n {distributorWarningHeaderProps} \n {renderDistributorWarningBody(props)}\n \n {distributorWarningDoNotShowAgain}\n \n {distributorWarningCancel} {distributorWarningContinue}\n \n \n \n );\n};\n\n/**\n * Distributor selector view props.\n * @param props - Distributor selector view props.\n * @returns - HTML.\n */\nconst DistributorSelectorView: React.FC = props => {\n const { currentDistributorContainer, currentDistributorButton, state } = props;\n\n return currentDistributorContainer ? (\n \n {currentDistributorButton}\n {renderDistributorDetailsPopup(props)}\n {state.showWarningDialog ? renderWarningDialog(props) : renderDistributorSelectorModal(props)}\n \n ) : null;\n};\n\nexport default DistributorSelectorView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IReviewModalViewProps } from '@msdyn365-commerce-modules/ratings-reviews';\nimport {\n IReportReviewModalViewProps,\n IReviewCardViewProps,\n IReviewsListState,\n IReviewsListViewProps\n} from '@msdyn365-commerce-modules/ratings-reviews/src/modules/reviews-list';\nimport { IModuleProps, Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nconst ReviewsListview: React.FC = props => {\n const {\n averageRating,\n filterByDropdown,\n moduleProps,\n noReviewsMessage,\n noReviewsWithFilterMessage,\n pageControls,\n refineReviewsProps,\n reportReviewModal,\n reviewsListProps,\n reviewCards,\n reviewCount,\n reviewModal,\n sortByDropdown,\n state,\n userReview\n } = props;\n\n if (!userReview && reviewCards.length === 0 && !state.isFilterApplied) {\n return {noReviewsMessage} ;\n }\n\n return (\n \n {averageRating}\n {reviewCount}\n \n {sortByDropdown}\n {filterByDropdown}\n \n \n {userReview && buildReviewCard(userReview)}\n {reviewCards.map(review => {\n return buildReviewCard(review);\n })}\n \n {reviewCards.length === 0 && state.isFilterApplied && noReviewsWithFilterMessage}\n {pageControls}\n {createReviewModal(reviewModal, moduleProps)}\n {createReportModal(reportReviewModal, state)}\n \n );\n};\n\nconst buildReviewCard = (props: IReviewCardViewProps) => {\n return (\n \n \n {props.rating}\n {props.name}\n {props.date}\n \n \n \n {props.reviewTitle}\n {props.reviewText}\n \n \n {props.responseName}\n {props.responseDate}\n {props.responseText}\n \n \n {props.ratingHelpfulLabel}\n {props.like}\n {props.dislike}\n {props.edit}\n {props.report}\n \n \n \n );\n};\n\nconst createReviewModal = (props: IReviewModalViewProps, moduleProps: IModuleProps): JSX.Element => {\n return (\n \n {props.modalHeader}\n \n \n \n {props.rating}\n {props.ratingLabel}\n \n \n {props.titleLabel}\n {props.titleInput}\n \n \n {props.textLabel}\n {props.textInput}\n \n {props.privacyPolicyUrl}\n {props.error}\n \n \n \n {props.submitButton}\n {props.cancelButton}\n \n \n );\n};\n\nconst createReportModal = (props: IReportReviewModalViewProps, state: IReviewsListState): JSX.Element => {\n return (\n \n {state.reported ? props.headerSubmitted : props.header} \n \n {state.reported ? props.reportSubmittedMessage : [props.reportMessage, props.radioButtons, props.error]}\n \n {state.reported ? props.succesfulButton : [props.submitButton, props.cancelButton]} \n \n );\n};\n\nexport default ReviewsListview;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ExtensibleEnumeration } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, EmailRegex } from '@msdyn365-commerce-modules/retail-actions';\nimport * as React from 'react';\n\nimport { IOrderLookupResources, IOrderLookupSearchAdditionalFieldsData } from '../order-lookup.props.autogenerated';\n\n/**\n * Render label.\n * @param className - Classname for label.\n * @param value - Text for label.\n * @returns -The JSX Element.\n */\nexport const labelGroup = (className: string, value: string): JSX.Element => {\n return {value}
;\n};\n\n/**\n * Error label.\n * @param responseErrorMessage - Error message for label.\n * @param errorMessageClassName - Error message for class name.\n * @returns - Error ReactNode.\n */\nexport const renderErrorLabel = (responseErrorMessage: string, errorMessageClassName: string): React.ReactNode => {\n return responseErrorMessage && {responseErrorMessage}
;\n};\n\n/**\n * Registered user message.\n * @param resources - Resource values.\n * @param signInUrl - Signin url.\n * @param signInLinkClassName - Signin link classname.\n * @param registeredUserClassName - Registered user message classname.\n * @returns - ReactNode.\n */\nexport const renderRegisteredUserMessage = (\n resources: IOrderLookupResources,\n signInUrl: string,\n signInLinkClassName: string,\n registeredUserClassName: string\n): React.ReactNode => {\n const { orderLookupRegisteredUserText, orderLookupViewAccountText, orderLookupSignInLinkText } = resources;\n const message: string = orderLookupRegisteredUserText;\n const infoMessage: string = orderLookupViewAccountText;\n const signInText: string = orderLookupSignInLinkText;\n return (\n \n );\n};\n\n/**\n * EmailValid submit.\n * @param email - Onsubmit of form and button click.\n * @returns - Boolean.\n */\nexport const isEmailValid = (email: string): boolean => {\n return EmailRegex.defaultRegex.test(email);\n};\n\n/**\n * Additional field validation for on submit.\n * @param name - Onsubmit of form and button click.\n * @returns - Boolean.\n */\nexport const isAdditionalFieldValid = (name: string): boolean => {\n const regEx = new RegExp('^(?!\\\\s)[A-Za-z0-9\\\\s]+$', 'u');\n return regEx.test(name);\n};\n\n/**\n * Validate order lookup field against extensible enum.\n * @param orderStatusLookUpParameter - Order lookup parameter.\n * @param orderLookupExtensibleEnum - Order lookup extensible enum.\n * @returns - Boolean.\n */\nexport const validateOrderLookupField = (\n orderStatusLookUpParameter: string,\n orderLookupExtensibleEnum: ExtensibleEnumeration[]\n): boolean => {\n let isValidField: boolean = false;\n for (const item of orderLookupExtensibleEnum) {\n if (item.Name.toLocaleLowerCase() === orderStatusLookUpParameter.toLocaleLowerCase()) {\n isValidField = true;\n return isValidField;\n }\n }\n return isValidField;\n};\n\n/**\n * Validate order lookup additional fields with proxy values.\n * @param value - Value to be validated.\n * @param orderLookupExtensibleEnum - Order lookup extensible enum.\n * @returns - Boolean.\n */\nexport const validateAdditionalFieldWithProxy = (value: string, orderLookupExtensibleEnum: ExtensibleEnumeration[]): boolean => {\n return !orderLookupExtensibleEnum.some(item => item.Name.toLocaleLowerCase() === value.toLocaleLowerCase());\n};\n\n/**\n * Validate order lookup additional fields against extensible enum.\n * @param orderStatusLookUpAdditionalParameters - Order lookup parameter.\n * @param orderLookupExtensibleEnum - Order lookup extensible enum.\n * @returns - Boolean.\n */\nexport const validateOrderLookupAdditionalField = (\n orderStatusLookUpAdditionalParameters: IOrderLookupSearchAdditionalFieldsData[],\n orderLookupExtensibleEnum: ExtensibleEnumeration[]\n): boolean => {\n let isValidAdditionalField: boolean = false;\n if (ArrayExtensions.hasElements(orderStatusLookUpAdditionalParameters)) {\n orderStatusLookUpAdditionalParameters.map(item => {\n const fieldKey: string = item.fieldKey ?? '';\n if (!isValidAdditionalField) {\n isValidAdditionalField = validateAdditionalFieldWithProxy(fieldKey, orderLookupExtensibleEnum);\n }\n return isValidAdditionalField;\n });\n } else {\n isValidAdditionalField = false;\n }\n return isValidAdditionalField;\n};\n\n/**\n * Render validation message if field does not matches with extensible enum.\n * @param orderLookupFieldValidationErrorMessage - Order lookup validation message.\n * @returns - ReactNode.\n */\nexport const renderFieldErrors = (orderLookupFieldValidationErrorMessage: string): React.ReactNode => {\n return {orderLookupFieldValidationErrorMessage}
;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { labelGroup } from '../utilities/order-lookup-utility';\n\n/**\n * Additional input field props.\n */\nexport interface IOrderLookupAdditionalFieldInfoInput {\n className: string;\n ariaLabel: string;\n inputType: string;\n value: string;\n name: string;\n additionalFieldLabel: string;\n additionalFieldLabelClassName: string;\n isValidAdditionalFieldName: boolean;\n additionalFieldValidationMessage: string;\n onChange(event: React.ChangeEvent): void;\n}\n\n/**\n * Order lookup additional field props.\n */\nexport interface IOrderLookupAdditionalFieldInfo {\n additionalFieldLabel: React.ReactNode;\n additionalFieldInput: React.ReactNode;\n additionalFieldError: React.ReactNode;\n}\n\n/**\n * RenderOrderLookupAdditionalFieldInput component.\n */\n@observer\nexport default class RenderOrderLookupAdditionalFieldInput extends React.Component {\n public constructor(props: IOrderLookupAdditionalFieldInfoInput) {\n super(props);\n }\n\n public shouldComponentUpdate(nextProps: IOrderLookupAdditionalFieldInfoInput): boolean {\n if (this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | undefined {\n return (\n \n {this._getOrderLookupAdditionalFields().additionalFieldLabel}\n {this._getOrderLookupAdditionalFields().additionalFieldError}\n {this._getOrderLookupAdditionalFields().additionalFieldInput}\n
\n );\n }\n\n /**\n * Function to create the order lookup additional fields.\n * @returns IOrderLookupFieldInfo.\n */\n private _getOrderLookupAdditionalFields(): IOrderLookupAdditionalFieldInfo {\n return {\n additionalFieldLabel: labelGroup(this.props.additionalFieldLabelClassName, this.props.additionalFieldLabel),\n additionalFieldInput: (\n \n
\n ),\n additionalFieldError: (\n \n {!this.props.isValidAdditionalFieldName ? this.props.additionalFieldValidationMessage : ''}\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 { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { labelGroup } from '../utilities/order-lookup-utility';\n\n/**\n * Input field props.\n */\nexport interface IOrderLookupFieldInfoInput {\n inputReference?: React.RefObject;\n className: string;\n ariaLabel: string;\n inputType: string;\n value: string;\n name: string;\n orderLookupLabel: string;\n orderLookupLabelClassName: string;\n fieldErrorClassName: string;\n isInputTypeError: boolean;\n isValidInputField: boolean;\n renderAlert(className: string): JSX.Element;\n onChange(event: React.ChangeEvent): void;\n}\n\n/**\n * Order lookup field props.\n */\nexport interface IOrderLookupFieldInfo {\n label: React.ReactNode;\n input: React.ReactNode;\n error: React.ReactNode;\n}\n\n/**\n * RenderOrderLookupInputs component.\n */\n@observer\nexport default class RenderOrderLookupFormFields extends React.Component {\n public constructor(props: IOrderLookupFieldInfoInput) {\n super(props);\n }\n\n public shouldComponentUpdate(nextProps: IOrderLookupFieldInfoInput): boolean {\n if (this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | undefined {\n return (\n \n {this._getOrderLookupFields().label}\n {this._getOrderLookupFields().error}\n {this._getOrderLookupFields().input}\n
\n );\n }\n\n /**\n * Function to create the order lookup fields.\n * @returns IOrderLookupFieldInfo.\n */\n private _getOrderLookupFields(): IOrderLookupFieldInfo {\n return {\n label: labelGroup(this.props.orderLookupLabelClassName, this.props.orderLookupLabel),\n input: (\n \n
\n ),\n error: (\n \n {this.props.isInputTypeError ? this.props.renderAlert(this.props.name) : ''}\n {this.props.isValidInputField ? this.props.renderAlert(this.props.name) : ''}\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 * as Msdyn365 from '@msdyn365-commerce/core';\nimport { IActionContext } from '@msdyn365-commerce/core-internal';\nimport { ExtensibleEnumeration, StoreOperationsDataActions } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, IModuleProps, INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport RenderOrderLookupAdditionalFieldInput from './components/order-lookup-additional-fields';\nimport RenderOrderLookupFormFields from './components/order-lookup-fields';\nimport {\n IOrderLookupProps,\n IOrderLookupSearchAdditionalFieldsData,\n orderStatusLookUpParametersType as orderStatusLookUpParametersTypes\n} from './order-lookup.props.autogenerated';\nimport {\n isAdditionalFieldValid,\n isEmailValid,\n renderErrorLabel,\n renderFieldErrors,\n renderRegisteredUserMessage,\n validateOrderLookupAdditionalField,\n validateOrderLookupField\n} from './utilities/order-lookup-utility';\n\n/**\n * OrderLookup view props.\n */\nexport interface IOrderLookupViewProps extends IOrderLookupProps<{}> {\n additionalProperties: JSX.Element[] | undefined;\n orderLookup: IModuleProps;\n orderLookupContainer: INodeProps;\n orderLookupAdditionalFieldContainer: INodeProps;\n paragraph?: React.ReactNode;\n heading?: React.ReactNode;\n submitButton?: INodeProps;\n submitButtonLabelText?: string;\n orderLookupForm?: INodeProps;\n renderOrderLookupInputField: JSX.Element | undefined;\n orderNumberInput?: JSX.Element | undefined;\n errorMessage?: React.ReactNode;\n fieldErrorMessage?: React.ReactNode;\n registeredUserMessage?: React.ReactNode;\n onChange?(event: React.ChangeEvent): void;\n submit?(): void;\n}\n\n/**\n * OrderLookupSearchValues -- supported values.\n */\nenum OrderLookupSearchValues {\n email = 'email',\n ordernumber = 'ordernumber'\n}\n\n/**\n * To render and handle state for additional order lookup fields.\n */\nexport interface IOrderLookupAdditionalFields {\n labelName: string;\n isValidFieldName: boolean;\n fieldValue: string;\n ariaLabel: string;\n additionalfieldErrorMessage: string;\n}\n\n/**\n * OrderLookup view props.\n */\nexport interface IOrderLookupFormState {\n orderNumber: string;\n email: string;\n isOrdNumberError: boolean;\n isEmailError: boolean;\n isValidEmailError: boolean;\n isReqError: boolean;\n isDisabled: boolean;\n isValidLookupField: boolean;\n isValidAdditionalLookupField: boolean;\n responseErrorMessage: string;\n additionalProperties: IOrderLookupAdditionalFields[];\n}\n\n/**\n *\n * OrderLookup component.\n * @extends {React.PureComponent>}\n */\nclass OrderLookup extends React.PureComponent, IOrderLookupFormState> {\n public orderNumberInputRef: React.RefObject;\n\n public emailInputRef: React.RefObject;\n\n public isEmailValue: boolean = false;\n\n private requiredErrorMessage: string | undefined;\n\n private emailValidationErrorMessage: string | undefined;\n\n private isOrderNumberValue: boolean = false;\n\n private orderLookupExtensibleEnum: ExtensibleEnumeration[] = [];\n\n public constructor(props: IOrderLookupProps<{}>) {\n super(props);\n this.orderNumberInputRef = React.createRef();\n this.emailInputRef = React.createRef();\n const { config } = this.props;\n const { orderLookupSearchAdditionalFields } = config;\n const additionalPropertyStates: IOrderLookupAdditionalFields[] = [];\n\n if (orderLookupSearchAdditionalFields) {\n for (const item of orderLookupSearchAdditionalFields) {\n additionalPropertyStates.push({\n labelName: item.labelName ?? '',\n isValidFieldName: true,\n fieldValue: '',\n ariaLabel: item.ariaLabel ?? '',\n additionalfieldErrorMessage: item.validationMessage ?? ''\n });\n }\n }\n\n this.state = {\n orderNumber: '',\n email: '',\n isOrdNumberError: false,\n isEmailError: false,\n isValidEmailError: false,\n isReqError: false,\n isDisabled: true,\n isValidLookupField: true,\n isValidAdditionalLookupField: false,\n responseErrorMessage: '',\n additionalProperties: additionalPropertyStates\n };\n }\n\n public render(): JSX.Element | null {\n const {\n config: { paragraph, heading },\n resources,\n context\n } = this.props;\n\n const {\n orderLookupDefaultHeadingText,\n orderLookupButtonLabel,\n orderLookupFormAriaLabel,\n orderLookupOrderNumberLabel,\n orderLookupOrderNumberAriaLabel,\n orderLookupSubmitAriaLabel,\n orderLookupFieldValidationErrorMessage\n } = resources;\n\n const { responseErrorMessage, isDisabled, orderNumber, isOrdNumberError } = this.state;\n\n const headingText = StringExtensions.isNullOrEmpty(heading?.text) ? orderLookupDefaultHeadingText : heading?.text;\n const headingTag = heading?.tag ?? 'h1';\n\n const moduleClassName = 'ms-order-lookup';\n const orderLookupContainerClassName = `${moduleClassName}__details`;\n const orderLookupHeadingClassName = `${orderLookupContainerClassName}__heading`;\n const orderLookupFormClassName = `${orderLookupContainerClassName}__form`;\n const orderLookupAdditionalFiledContainerClassName = `${orderLookupFormClassName}__additional-fields-container`;\n const orderLookupFormFieldsClassName = `${orderLookupFormClassName}__fields`;\n const orderNumberLabelClassName = `${orderLookupFormFieldsClassName}__order-number-label`;\n const orderNumberInputErrorClassName = `${orderLookupFormFieldsClassName}__order-number-input-error`;\n const submitButtonClassName = `${orderLookupFormClassName}__submit`;\n const labelErrorMessageClassName = `${moduleClassName}__error-message`;\n const registeredUserClassName = `${moduleClassName}__registered-user`;\n const signinLinkClassName = `${registeredUserClassName}__sign-in-link msc-btn`;\n\n const orderLookupHeading = (\n {\n const { config, context } = this.props;\n const { actionContext } = context;\n const { orderStatusLookUpParametersType, orderLookupSearchAdditionalFields } = config;\n let isOrderLookupAdditionalFieldValid: boolean = false;\n let isOrderLookupFieldValid: boolean = false;\n\n const getExtensibleEnumerations = await StoreOperationsDataActions.getExtensibleEnumerationsAsync({ callerContext: actionContext });\n this.orderLookupExtensibleEnum =\n getExtensibleEnumerations.find(item => item.TypeName === 'OrderLookupAdditionalCriteriaType')?.ExtensibleEnumerations ?? [];\n\n const orderLookupParameter: string = orderStatusLookUpParametersType ?? '';\n const orderLookupAdditionalParameter: IOrderLookupSearchAdditionalFieldsData[] = orderLookupSearchAdditionalFields ?? [];\n\n isOrderLookupFieldValid = validateOrderLookupField(orderLookupParameter, this.orderLookupExtensibleEnum);\n isOrderLookupAdditionalFieldValid = validateOrderLookupAdditionalField(\n orderLookupAdditionalParameter,\n this.orderLookupExtensibleEnum\n );\n this.setLookupFieldState(isOrderLookupFieldValid, isOrderLookupAdditionalFieldValid);\n }\n\n /**\n * Handle text change.\n * @param event - The dialog that is allowed to remain open.\n */\n public handleTextChange = (event: Msdyn365.ContentEditableEvent): void => {\n this.props.config.heading!.text = event.target.value;\n };\n\n /**\n * Handle paragraph change.\n * @param event - The dialog that is allowed to remain open.\n */\n public handleParagraphChange = (event: Msdyn365.ContentEditableEvent): void => {\n const { config } = this.props;\n config.paragraph = event.target.value;\n };\n\n /**\n * Sets isValidLookupField after validating with extensible emun.\n * @param isValidField - Sets the property.\n * @param isValidAdditionalField - Sets the additional field property.\n */\n public setLookupFieldState(isValidField: boolean, isValidAdditionalField: boolean): void {\n this.setState({ isValidLookupField: isValidField, isValidAdditionalLookupField: isValidAdditionalField });\n }\n\n /**\n * HandleSubmit submit.\n */\n public readonly handleSubmit = (): void => {\n const { config, context } = this.props;\n const { actionContext } = context;\n const { additionalProperties, orderNumber, email } = this.state;\n const orderLookupValue = email;\n const { orderStatusLookUpParametersType } = config;\n const orderLookupName = orderStatusLookUpParametersType !== undefined ? orderStatusLookUpParametersType : '';\n const isValid: boolean = this._validateOrderLookupForm();\n if (isValid) {\n const actionContextValue: IActionContext = actionContext;\n const orderDetailsPath = Msdyn365.getUrlSync('orderDetails', actionContextValue) ?? '';\n if (orderDetailsPath) {\n const baseUrl = new URL(window.location.origin);\n const redirectUrl = new URL(orderDetailsPath, baseUrl);\n const searchParameters = redirectUrl.searchParams;\n\n searchParameters.set('confirmationId', orderNumber);\n searchParameters.set('propertyName', orderLookupName);\n searchParameters.set('propertyValue', orderLookupValue);\n\n if (ArrayExtensions.hasElements(additionalProperties)) {\n additionalProperties.map((item, index) => {\n const fieldName = !StringExtensions.isNullOrWhitespace(item.ariaLabel)\n ? item.ariaLabel.replace(' ', '').toLocaleLowerCase()\n : '';\n const fieldValue = !StringExtensions.isNullOrWhitespace(item.fieldValue) ? item.fieldValue : '';\n searchParameters.set(`field${index + 1}Name`, fieldName);\n searchParameters.set(`field${index + 1}Value`, fieldValue);\n return item;\n });\n }\n\n window.location.assign(redirectUrl.toString());\n }\n }\n };\n\n /**\n * OnChange event.\n * @param event - Value of input field.\n */\n public readonly onChange = (event: React.ChangeEvent): void => {\n const { additionalProperties } = this.state;\n const { config } = this.props;\n const { orderStatusLookUpParametersType } = config;\n const name = event.target.name || '';\n const value = event.target.value || '';\n this.isOrderNumberValue = !StringExtensions.isNullOrWhitespace(this.orderNumberInputRef.current?.value);\n this.isEmailValue = !StringExtensions.isNullOrWhitespace(this.emailInputRef.current?.value);\n\n if (orderStatusLookUpParametersType?.toLocaleLowerCase() === 'none') {\n this.isEmailValue = true;\n }\n\n this.setState({ responseErrorMessage: '' });\n const additionalPropertyStates: IOrderLookupAdditionalFields[] = [];\n let isAdditionalFieldError: boolean = true as boolean;\n let isKeyExistInAdditionalFieldArray: boolean = false as boolean;\n\n for (const item of additionalProperties) {\n const fieldName: string = item.ariaLabel.replace(' ', '');\n if (fieldName.toLocaleLowerCase() === name.toLocaleLowerCase()) {\n additionalPropertyStates.push({\n labelName: item.labelName,\n isValidFieldName: true,\n fieldValue: value,\n ariaLabel: item.ariaLabel,\n additionalfieldErrorMessage: item.additionalfieldErrorMessage\n });\n } else {\n additionalPropertyStates.push({\n labelName: item.labelName,\n isValidFieldName: item.isValidFieldName,\n fieldValue: item.fieldValue,\n ariaLabel: item.ariaLabel,\n additionalfieldErrorMessage: item.additionalfieldErrorMessage\n });\n }\n if (fieldName.toLocaleLowerCase() === orderStatusLookUpParametersType?.toLocaleLowerCase()) {\n isKeyExistInAdditionalFieldArray = true;\n }\n }\n\n for (const items of additionalPropertyStates) {\n if (StringExtensions.isNullOrWhitespace(items.fieldValue)) {\n isAdditionalFieldError = false;\n }\n }\n\n this.setState({ additionalProperties: additionalPropertyStates });\n\n if (!isKeyExistInAdditionalFieldArray) {\n switch (name.toLocaleLowerCase()) {\n case OrderLookupSearchValues.ordernumber: {\n this.setState({\n orderNumber: value,\n isOrdNumberError: false,\n isReqError: false\n });\n break;\n }\n case OrderLookupSearchValues.email: {\n this.setState({\n email: value,\n isEmailError: false,\n isValidEmailError: false,\n isReqError: false\n });\n break;\n }\n default: {\n this.setState({ isReqError: false });\n }\n }\n }\n\n if (\n this.isOrderNumberValue &&\n this.isEmailValue &&\n isAdditionalFieldError &&\n this.state.isValidLookupField &&\n !this.state.isValidAdditionalLookupField\n ) {\n this.setState({ isDisabled: false });\n } else {\n this.setState({ isDisabled: true });\n }\n };\n\n private _createParagraph(text?: Msdyn365.RichText): React.ReactNode | null {\n const { context } = this.props;\n const { request } = context;\n if (!text) {\n return null;\n }\n return (\n \n {this.requiredErrorMessage}\n \n )}\n {isEmailValidError && isValidEmailInput && (\n \n {this.emailValidationErrorMessage}\n \n )}\n \n );\n };\n\n /**\n * Render order number validation message.\n * @param className - Class name for error field.\n * @returns - JSX.Element.\n */\n private readonly _renderOrderNumberAlert = (className: string): JSX.Element => {\n const {\n resources: { orderLookupOrderNumberValidationErrorMessage, orderLookupRequiredTextErrorMessage }\n } = this.props;\n\n const { isOrdNumberError, isReqError } = this.state;\n return (\n <>\n {isReqError && (\n \n {orderLookupRequiredTextErrorMessage}\n \n )}\n {isOrdNumberError && (\n \n {orderLookupOrderNumberValidationErrorMessage}\n \n )}\n \n );\n };\n\n private _renderAdditionalFields(): JSX.Element[] | undefined {\n const { additionalProperties } = this.state;\n const additionalFieldsInput: JSX.Element[] = [];\n for (const item of additionalProperties) {\n const name: string = item.ariaLabel.replace(' ', '');\n additionalFieldsInput.push(\n = props => {\n const {\n orderLookup,\n orderLookupContainer,\n orderLookupAdditionalFieldContainer,\n heading,\n paragraph,\n orderLookupForm,\n renderOrderLookupInputField,\n orderNumberInput,\n errorMessage,\n submitButton,\n additionalProperties,\n registeredUserMessage,\n fieldErrorMessage\n } = props;\n return (\n \n \n {heading}\n {paragraph}\n \n {orderNumberInput}\n {renderOrderLookupInputField}\n {ArrayExtensions.hasElements(additionalProperties) && (\n \n {additionalProperties.map((item: JSX.Element) => (\n {item} \n ))}\n \n )}\n {fieldErrorMessage}\n \n {props.submitButtonLabelText}\n \n {errorMessage}\n \n {registeredUserMessage}\n \n \n );\n};\n\nexport default OrderLookupViewComponent;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getTelemetryObject,\n Heading,\n IComponentNodeProps,\n INodeProps,\n ISingleSlideCarouselProps,\n ITelemetryContent,\n NodeTag,\n SingleSlideCarousel\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { ITileListProps, ITitleData } from './tile-list.props.autogenerated';\n\n/**\n * Tile-list view props.\n */\nexport interface ITileListViewProps extends ITileListProps<{}> {\n title?: React.ReactNode;\n tiles: React.ReactNode[];\n tileItemContainer: INodeProps;\n tileListContainer: INodeProps;\n tileListHeading: INodeProps;\n singleSlideCarouselComponentProps: INodeProps;\n}\n\n/**\n *\n * TileList component.\n * @extends {React.PureComponent>}\n */\nexport class TileList extends React.PureComponent> {\n private readonly _telemetryContent: ITelemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n private static _createHeading(heading?: ITitleData): React.ReactNode | null {\n if (!heading || !heading.text || StringExtensions.isNullOrWhitespace(heading.text)) {\n return null;\n }\n return = {\n tag: SingleSlideCarousel,\n className: this.props.config.className ?? '',\n flipperPrevLabel: resources.flipperPrevious,\n flipperNextLabel: resources.flipperNext,\n parentId: this.props.id,\n telemetryContent: this._telemetryContent,\n vertical: false\n };\n\n const viewProps = {\n ...this.props,\n title: TileList._createHeading(title),\n singleSlideCarouselComponentProps: propsCarousel,\n tileItemContainer: {\n tag: 'li' as NodeTag,\n className: 'ms-tile__item',\n role: 'listitem'\n },\n tileListContainer: { className: classnames('ms-tile-list', className) },\n tileListHeading: { className: 'ms-tile-list__heading' },\n tiles: this.props.slots.content\n };\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n}\n\nexport default TileList;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Node } from '@msdyn365-commerce-modules/utilities';\nimport React, { ReactNode } from 'react';\n\nimport { ITileListViewProps } from './tile-list';\n\n/**\n * View component.\n * @param props - The view properties.\n * @returns Returns props.\n */\nexport const tileListView: React.FC = props => {\n const { title, tiles, tileListContainer, tileListHeading, tileItemContainer, singleSlideCarouselComponentProps } = props;\n return (\n \n {title} \n \n {tiles.map((tileItem: ReactNode, index: number) => {\n const keyIndex = `tile-list-item__${index}`;\n return (\n \n {tileItem}\n \n );\n })}\n \n \n );\n};\n\nexport default tileListView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n IGroup,\n IGroupDelivery,\n IGroups,\n IHeader,\n IList,\n IOrderHistoryViewProps,\n IOrderInformation,\n ISalesOrder\n} from '@msdyn365-commerce-modules/order-management';\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport const OrderHistoryOrderInfomation: React.FC = ({\n orderInformationProps,\n salesId,\n receiptId,\n channelName,\n createdDate,\n count,\n amount,\n channelReferenceId\n}) => (\n \n {channelName}\n {salesId}\n {receiptId}\n {createdDate}\n {count}\n {amount}\n {channelReferenceId}\n \n);\n\nexport const OrderHistoryGroupDelivery: React.FC = ({\n deliveryProps,\n heading,\n count,\n processing,\n address,\n trackingInfo\n}) => (\n \n {heading}\n {count}\n {processing}\n {address}\n {trackingInfo}\n \n);\n\nexport const OrderHistoryGroup: React.FC = ({ groupProps, delivery, salesLinesProps, salesLines }) => (\n \n {salesLines && (\n \n {salesLines.map(salesLine => (\n {salesLine.salesLine} \n ))}\n \n )}\n \n);\n\nexport const OrderHistoryGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group, index) => (\n \n);\n\nexport const OrderHistoryHeader: React.FC = ({ headerProps, heading, orderCountLabel, extraActions }) => (\n \n {heading}\n {orderCountLabel}\n {extraActions}\n \n);\n\nexport const OrderHistorySalesOder: React.FC = ({\n salesOrderProps,\n orderInfomation,\n groups,\n orderDetailsLink,\n expandProductsButton\n}) => (\n \n \n {orderInfomation.placedBy &&
{orderInfomation.placedBy} }\n
{orderInfomation &&
\n
\n);\n\nexport const OrderHistoryList: React.FC = ({ listProps, salesOrders }) => (\n \n {salesOrders && salesOrders.map((salesOrder, index) => \n);\n\nconst OrderHistoryView: React.FC = ({\n orderHistoryProps,\n header,\n alert,\n loading,\n emptyMessage,\n backToShoppingLink,\n list,\n table,\n moreButton\n}) => (\n \n {header && \n {emptyMessage}\n {backToShoppingLink}\n \n )}\n {list && \n);\n\nexport default OrderHistoryView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { getPayloadObject, getTelemetryAttributes, getTelemetryObject, Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport {\n ISignInItem,\n ISignInLoading,\n ISignInLocalAccount,\n ISignInSocialAccount,\n ISignInSocialItem,\n ISignInB2BAccount,\n ISignInB2BItem,\n ISignInViewProps,\n ISignInButton\n} from '@msdyn365-commerce-modules/account-management';\n\nimport { ISignInProps, ISignInResources } from '../definition-extensions/sign-in.ext.props.autogenerated';\n\nconst LocalAccount: React.FC = ({ localAccount, items, forgetPassword, disclaimer, error, signInButton }) => {\n return (\n \n {items &&\n items.map((item: ISignInItem) => {\n return (\n \n {item.label}\n {item.error}\n {item.input}\n \n );\n })}\n {forgetPassword}\n {disclaimer}\n {error}\n {signInButton}\n \n );\n};\n\nconst SocialAccount: React.FC = ({ socialAccounts, items }) => {\n return (\n \n {items &&\n items.map((item: ISignInSocialItem) => {\n return (\n \n {item.image}\n {item.text}\n \n );\n })}\n \n );\n};\n\nconst B2BAccount: React.FC = ({ socialAccounts, items }) => {\n return (\n \n {items &&\n items.map((item: ISignInB2BItem) => {\n return (\n item && (\n \n {item.text}\n \n )\n );\n })}\n \n );\n};\n\nconst SignInLoading: React.FC = ({ modal, modalBody, icon, message }) => {\n return (\n \n \n {icon}\n {message}\n \n \n );\n};\nconst SignInButton: React.FC = ({ id, className, text, ariaLabel, telemetryContent, onClick }) => {\n const payLoad = getPayloadObject('click', telemetryContent!, text);\n const attributes = getTelemetryAttributes(telemetryContent!, payLoad);\n return (\n \n {text}\n \n );\n};\n\nconst signUpButton: React.FC> = (\n props: ISignInViewProps & ISignInProps\n) => {\n const {\n resources,\n telemetry,\n friendlyName,\n context: {\n request: { telemetryPageName }\n }\n } = props;\n const telemetryContent = getTelemetryObject(telemetryPageName!, friendlyName, telemetry);\n const attributes = {\n href: '#'\n };\n\n return (\n > = props => {\n const {\n signIn,\n viewState,\n loading,\n defaultAADConainer,\n aadConainer,\n signInSection,\n signUpSection,\n signInSectionHeading,\n signInLocalAccount,\n signInSocialAccount,\n signUpSectionHeading,\n signInB2BAccount,\n signUpDescription\n } = props;\n\n return (\n \n {viewState.isShowLoading && \n \n {signInSectionHeading}\n {LocalAccount(signInLocalAccount)}\n {SocialAccount(signInSocialAccount)}\n \n \n {signUpSectionHeading}\n {signUpDescription}\n {signUpButton(props)}\n \n \n
\n or \n
\n {B2BAccount(signInB2BAccount)}\n
\n \n );\n};\n\nexport default SignInView;\n"],"names":["toggleBopisHandler","cartLine","isBopisSelected","_cartLine$pickUpInSto","pickUpInStore","callbacks","toggleBopis","onChangeStoreHandler","_cartLine$pickUpInSto2","renderCartLineComment","cartLineComment","comment","cartLineId","cartProductTitle","React","renderCartLine","resources","storeSelector","telemetryContent","isMultiplePickUp","emailDeliveryModeCode","_cartLine$data3","_cartLine$data4","data","cartline","Comment","cartLineProductTitle","product","Name","error","outOfStockErrorMessage","Node","className","cartlineId","addToWishlist","remove","renderGroupBopisBlock","_cartLine$data2","DeliveryMode","changeStoreDisplayText","shipInsteadDisplayText","pickItUpDisplayText","payLoad","getPayloadObject","TelemetryConstant","PickupInStore","puckUpinStoreAttribute","getTelemetryAttributes","Button","role","onClick","Object","assign","addToOrderTemplate","renderCartlinesInternal","isPrintView","cartLines","map","index","itemIndex","key","renderBopisBlock","_cartLine$data","shipToAddressDisplayText","pickUpAtStoreWithLocationText","ContainerProps","orgUnitName","renderCartlines","props","waitingComponent","cartLoadingStatus","isCartDataResult","slots","orderLevelComment","multiplePickUpEnabled","CartlinesWrapper","renderOrderLevelComment","emptyCart","renderCartLinesGroupHeader","count","_cartLine$pickUpInSto6","pickUpText","shippingText","emailshippingText","groupTitle","toLowerCase","replace","renderCartLinesGroupTitle","_cartLine$pickUpInSto3","_cartLine$pickUpInSto4","_cartLine$pickUpInSto5","itemLabel","itemsLabel","countTitle","deliveryOption","_props$cart2","_props$cart3","_props$orderSummaryLi","_props$cart4","_props$cart5","setIsPrintView","printViewToggle","_renderPrintView","handlePrintViewChange","printViewLabel","type","updatedTitle","cartTitle","Number","cart","totalItemsInCart","id","renderModuleAttributes","orderSummaryLineitems","orderTotal","checkoutAsGuestButton","renderOrderSummaryCheckoutButton","hasInvoiceLine","promotionOptions","promotions","promotionMessageWrapper","promotionMessage","promotionSeeAllLink","promotionDialog","renderCartLinesGroup","cartLinesGroup","ArrayExtensions","hasElements","cartlines","_props$context$action","_props$context$action2","countItem","reduce","item","_item$data$cartline$Q","_item$data","Quantity","countItems","context","actionContext","requestContext","channel","EmailDeliveryModeCode","cartDataResult","orderSummaryHeading","OrderSummaryWrapper","renderInvoiceSummarylines","invoiceSummaryLines","orderSummaryItems","invoices","giftCard","loyalty","telemetry","invoiceSummaryLineitems","OrderSummaryItems","renderOrderSummarylines","orderSummaryLines","subtotal","shipping","otherCharge","tax","errorData","OrderSummaryErrors","errors","Wrapper","header","_props$cart","promoCode","createTemplateFromCartButton","renderOrderSummaryCheckout","AddressShow","_ref","AddressDetail","items","description","AddressSelect","_ref2","SelectAddress","addButton","isShowSaveButton","saveButton","isShowCancelButton","cancelButton","SelectItem","input","showItems","AddressAddUpdate","_ref3","AddressForm","heading","hasError","shipUsaOnlyMessageText","renderDeliveryLimitationMessage","AddressItem","label","alert","AddressError","title","message","CheckoutShippingAddress","checkoutErrorRef","viewState","showAddress","showAddressSelect","showAddOrUpdateAddress","cartLineImages","Module","ref","isShowAddress","isShowAddresList","isShowAddOrUpdateAddress","advancedNotes","notes","_cartLine$data5","itemId","ItemId","renderAdvancedNotes","filter","n","pagination","paginatedView","_props$cart6","setAdvancedNotes","undefined","pageLength","config","setPaginatedView","length","slice","paginationPage","setPaginationPage","clearCartModalActive","setClearCartModalActive","changePage","page","skip","_props$cartlines","async","itemIds","CartLines","cl","getAdvancedNotesAsync","callerContext","then","getAdvancedNotes","renderClearCart","_renderClearCart","clearCartButtonText","LinePagination","nextPage","prevPage","currentPage","numPages","Math","ceil","prev","paginationPrev","next","paginationNext","checkoutAsSignInUserButton","_renderClearCartModal","handleClearCart","toggle","Modal","isOpen","ModalHeader","clearCartHeader","ModalBody","clearConfirmBody","ModalFooter","clearCancelButtonText","ids","cartLineIds","Array","c","LineId","push","removeCartLines","refreshCart","_props$data$checkout$","address","checkout","result","shippingAddress","nonEligibleItems","setnonEligibleItems","checkEligibilityForShippingAddress","moduleState","setHasError","_props$data$checkout$2","notEligibleList","checkoutCart","_cart$CartLines","addressCountry","ThreeLetterISORegionName","addressState","State","addressRegion","County","GetProductEligibilityInput","Id","eligibilityData","GetProductEligibilityAction","forEach","i","_getExtensionPropertyValueByKey","properties","valueType","_properties$find","property","find","p","Key","Value","ExtensionProperties","CommercePropertyValueEnum","string","IsEligible","removeIneligibleItems","cartState","checkoutState","badCartLines","includes","window","location","reload","getCartLineFromItemId","_props$data$checkout$3","Description","disabled","CheckInConfirmationComponent","confirmationText","shouldShowQrCode","channelReferenceIdLabel","channelReferenceId","QRCode","value","size","CheckInErrorComponent","errorMessage","CheckInForPickup","constructor","super","checkInForOrderPickup","channelId","parseInt","this","request","query","packingSlipId","additionalInformationToSubmit","additionalInformationList","additionalInformationKeyValuePair","_additionalInformatio","formKey","resourceId","extensionPropertyList","ObjectExtensions","isNullOrUndefined","additionalInformation","StringValue","SalesOrdersDataActions","queryResultSettings","setState","headerErrorMessage","genericErrorMessage","isCheckedIn","Promise","resolve","_onInit","_this$props$context$r","_this$props$context$r2","_this$props$context$r3","_this$props$context$r4","isNaN","params","isEditor","isPreview","requiredParameterMissingErrorMessage","additionalInformationKeys","state","render","_this$props$context$r5","isHeaderError","viewProps","_objectSpread","headerError","confirmationComponent","defaultConfirmationText","confirmationIdLabel","additionalInformationValues","renderView","shouldComponentUpdate","nextProps","nextState","additionalInformationHeading","_props$config$additio","FormBuilder","additionalInformationDefaultHeading","submitButtonText","additionalInformationSubmitButtonText","keys","requiredValueMissingErrorMessage","onSubmit","DistributorSelectorCountMessage","distributors","distributorCountMessage","toString","DistributorSelectorTermsOfService","link","onTextChange","editableLink","ariaLabel","linkText","linkUrl","destinationUrl","openInNewTab","Msdyn365","editProps","DistributorSelectorWaiting","classnames","DistributorSelectorDoNotShowAgain","onChange","doNotShowAgainMessage","DistributorSelectorButton","_ref4","text","DistributorEmptyMessage","_ref5","emptyLocationsText","onSetCurrentDistributorClickHandler","_props$distributor$Or","handlers","onSetAsCurrentDistributor","distributor","OrgUnit","RecordId","onViewAllDistributorDetailsClickHandler","_props$distributor$Or2","onViewAllDistributorDetails","DistributorSelectorLineItemComponent","_distributor$OrgUnit","_distributor$OrgUnit2","_distributor$OrgUnit3","_distributor$OrgUnit4","_distributor$OrgUnitD","currentDistributorId","shouldShowIndex","selectDistributorText","distributorDetailsToBeShown","mainClassName","distributorName","OrgUnitName","isCurrentDistributor","CurrentDistributor","currentDistributorAttributes","distributorAddress","OrgUnitAddress","FullAddress","distributorPhoneNo","Phone","deliveryMethods","OrgUnitDeliveryOptions","DeliveryOptions","currentDistributorText","indexOf","locationHeadingText","primaryContactText","deliveryMethodHeadingText","deliveryMethod","viewAllDistributorText","DistributorSelectorLines","onDistributorSelected","orgUnit","_scrollIntoView","_selectedDistributorD","selectedDistributorDiv","selectedDistributorRef","current","parent","shouldDisplayList","parentElement","scrollTop","offsetTop","clientHeight","scrollLeft","offsetLeft","distributorCounter","componentDidMount","reaction","setTimeout","componentDidUpdate","previousProps","selectedDistributorId","_renderDistributor","selected","__decorate","observable","DistributorPaymentOptionList","_renderTenderTypes","isExpandOptionsState","isFilterExpanded","handleFilterSelection","event","preventDefault","paymentCode","currentTarget","getAttribute","selectedPaymentTypes","_distributorPaymentTypesMenu","_paymentTypesList$fin","paymentTypesMenuText","paymentTypesList","defaultOptionText","selectedPaymentTypesDesc","payment","TenderTypeId","tenderType","tabIndex","onKeyDown","DistributorSelectorSearchForm","_onChangeHandler","onPaymentFilterSelected","tenderTypeId","renderPaymentTypeList","paymentTypesOptions","paymentFilterMenuHeading","paymentFilterByHeading","filteredPaymentType","ToggleMapView","toggleMapViewAttributes","viewMapText","viewListText","showLocatorView","paymentTypes","showPaymentTypeFilter","onToggleListMapViewState","toggleButtonText","toggleButtonClass","DistributorSelector","mainClass","headerClass","currentDistributorBtnRef","toggleListMapViewState","distributorSelectorStateManager","onChangeForDoNotShow","warningDialogState","target","checked","onSelectDistributor","distributorId","_setCurrentDistributor","onChangeDistributorClick","setSelectedDistributorId","isDistributorDetailPopupOpen","closeDistributorDetailPopup","isDistributorSelectorDialogOpen","showDistributorDetails","distributorDetailsFromPopup","openDistributorSelectorDialog","parentElementRef","onDistributorCloseButtonClick","continueButtonClick","cookies","currentDistributor","currentSelectedDistributor","hideWarningMessage","isConsentGiven","_closeDistributorSelectorDialog","redirectToDistributorURL","cancelButtonClick","showWarningDialog","backToSearchClick","onViewAllDistributorDetailsFromPopup","_this$currentDistribu","_this$currentDistribu2","_this$currentDistribu3","DistributorId","getCurrentDistributor","url","requestUrl","user","isAuthenticated","_this$props$data$dist","distributorList","_distributor$MarketSe","MarketSettings","localeItems","some","locale","href","localeBaseUrl","_currentDistributor$O","_currentDistributor$O2","DistributorName","getUniquePaymentTypes","uniquePaymentTypes","Set","_distributor$PaymentT","PaymentTypes","paymentType","add","filterDistributorsByPaymentTypes","filteredPaymentTypeId","_distributor$PaymentT2","marketSettings","currentLocale","localeItem","distributorURL","defaultLocale","isDefaultLocale","startsWith","debug","handleDistributorSelectorClick","_this$props$data$dist2","_this$currentDistribu4","openDistributorDetailPopup","onFilteredPaymentType","renderDistributorDetailsViewProps","distributorDetails","_distributorDetails$O","_distributorDetails$O2","_distributorDetails$O3","_distributorDetails$O4","switchDistributorText","distributorDetailsModalPopup","tag","moduleProps","classname","distributorDetailsModalHeader","distributorDetailsHeaderProps","closeDistributorDetailPopupButtonAriaLabel","distributorDetailsModalBody","distributorDetailsModalBodyContainer","distributorDetailsLocation","distributorDetailsPrimaryContact","distributorDetailsDeliveryMethods","distributorDetailsViewAllDetails","distributorDetailsChangeDistributor","onEdit","handleChangeDistributorTextChange","distributorDetailsModalFooter","distributorDetailsSliderWrapper","renderDistributorSliderViewProps","isCurrentDistributorSelected","_distributorDetails$O5","distributorDetailsSliderDistributorName","distributorDetailsSliderHeaderContent","distributorSliderBackToSearch","distributorDetailsSliderHeaderContainer","distributorDetailsSliderBodyContainer","distributorDetailsSliderFooterContainer","distributorDetailsSliderInformationWrapper","distributorDetailsSlidercurrentDistributorTitle","distributorDetailsSliderSelectDistributor","handleSelectDistributorTextChange","handleHeadingChange","distributorWarningDialogHeading","distributorSelectorHeading","handleWarningTextChange","distributorWarningContent","handleLinkTextChange","termsOfServiceLink","stopPropagation","shouldShowDistributors","isOboRequest","getAccountSelectionCookie","isSignedIn","checkUserStateAndOpenDialog","getDistributorDetails","_getAndUpdateDistributorList","isSearchInProgress","_updateDistributorListInStateManager","_this$currentDistribu5","sortedDistributorList","_sortDistributor","setDistributorsList","catch","_distributorSelectorS","distributorSelectorContext","focus","updateDistributorMapVisibility","closeDistributorSelectorDialog","searchTerm","_setSelectedDistributor","hideDistributorWarning","getTelemetryObject","telemetryPageName","friendlyName","_this$props$data$dist3","loadMapApi","_this$props$data$dist4","_this$props$context$a","BingMapsEnabled","BingMapsApiKey","lang","market","ChannelCountryRegionISOCode","_this$currentDistribu6","_this$currentDistribu7","_distributorSelectorS2","_distributorSelectorS3","doNotShowAgainCheckbox","noDistributorFoundText","maps","mapSlot","currentDistributorName","headerText","headerCurrentDistributorText","distributorInfoList","hasMapSlot","isMobileDevice","isMobile","variant","VariantType","Viewport","shouldOpenDistributorSelectorDialog","shouldOpenDistributorDetailPopup","listMapViewState","displayList","canShowLocationView","showMapViewLink","isMapModuleLoaded","showDistributorDetailsOnMap","showDistributorDetailsPopup","currentDistributorContainer","currentDistributorButton","color","headerCurrentDistributorAriaLabel","autoFocus","fade","onClosed","horizontalPosition","verticalPosition","isMobileView","headerContainerProps","distributorSelectorHeaderProps","distributorWarningHeaderProps","footerContainerProps","bodyContainerProps","bodyWrapperProps","distributorsResultContainerProps","distributorsResultWrapperProps","mapContainerProps","searchForm","spinner","distributorLinesViewProps","isLocationDisabled","noDistributorsMessage","terms","distributorWarningButtonWrapper","distributorWarningDoNotShowAgain","distributorWarningContinue","distributorWarningCancel","_value$OrgUnit","observer","renderDistributorSelectorModal","distributorDetailsSliderCurrentDistributorTitle","renderDistributorDetails","renderDistributorSelectorBody","renderWarningDialog","renderDistributorWarningBody","renderDistributorDetailsPopup","buildReviewCard","cardProps","headerProps","rating","name","date","cardBodyProps","reviewProps","reviewTitle","reviewText","responseProps","responseName","responseDate","responseText","controlsProps","ratingHelpfulLabel","like","dislike","edit","report","createReviewModal","modal","modalHeader","modalBody","form","inputRow","ratingLabel","titleLabel","titleInput","textLabel","textInput","privacyPolicyUrl","modalFooter","submitButton","createReportModal","reported","headerSubmitted","reportSubmittedMessage","reportMessage","radioButtons","succesfulButton","averageRating","filterByDropdown","noReviewsMessage","noReviewsWithFilterMessage","pageControls","refineReviewsProps","reportReviewModal","reviewsListProps","reviewCards","reviewCount","reviewModal","sortByDropdown","userReview","isFilterApplied","review","labelGroup","renderErrorLabel","responseErrorMessage","errorMessageClassName","renderRegisteredUserMessage","signInUrl","signInLinkClassName","registeredUserClassName","orderLookupRegisteredUserText","orderLookupViewAccountText","orderLookupSignInLinkText","infoMessage","signInText","renderFieldErrors","orderLookupFieldValidationErrorMessage","RenderOrderLookupAdditionalFieldInput","_getOrderLookupAdditionalFields","additionalFieldLabel","additionalFieldError","additionalFieldInput","additionalFieldLabelClassName","inputType","isValidAdditionalFieldName","additionalFieldValidationMessage","RenderOrderLookupFormFields","_getOrderLookupFields","orderLookupLabelClassName","orderLookupLabel","inputReference","fieldErrorClassName","isInputTypeError","renderAlert","isValidInputField","OrderLookupSearchValues","OrderLookup","isEmailValue","isOrderNumberValue","orderLookupExtensibleEnum","handleTextChange","handleParagraphChange","paragraph","handleSubmit","additionalProperties","orderNumber","email","orderLookupValue","orderStatusLookUpParametersType","orderLookupName","_validateOrderLookupForm","_Msdyn365$getUrlSync","actionContextValue","orderDetailsPath","baseUrl","URL","origin","redirectUrl","searchParameters","searchParams","set","fieldName","StringExtensions","isNullOrWhitespace","toLocaleLowerCase","fieldValue","_this$orderNumberInpu","_this$emailInputRef$c","orderNumberInputRef","emailInputRef","additionalPropertyStates","isAdditionalFieldError","isKeyExistInAdditionalFieldArray","labelName","isValidFieldName","additionalfieldErrorMessage","ordernumber","isOrdNumberError","isReqError","isEmailError","isValidEmailError","isValidLookupField","isValidAdditionalLookupField","isDisabled","_renderAlert","orderLookupEmailValidationErrorMessage","orderLookupRequiredTextErrorMessage","requiredErrorMessage","isNullOrEmpty","emailValidationErrorMessage","isRequireError","isEmailValidError","isValidEmailInput","_renderOrderNumberAlert","orderLookupOrderNumberValidationErrorMessage","_renderOrderLookupInput","orderLookupEmailLabel","orderLookupEmailAriaLabel","_additionalFieldValidation","isFieldValid","RegExp","test","isValid","isDisable","trim","EmailRegex","defaultRegex","isEmailValid","orderLookupSearchAdditionalFields","_item$labelName","_item$ariaLabel","_item$validationMessa","validationMessage","_heading$tag","_context$request$user","orderLookupDefaultHeadingText","orderLookupButtonLabel","orderLookupFormAriaLabel","orderLookupOrderNumberLabel","orderLookupOrderNumberAriaLabel","orderLookupSubmitAriaLabel","headingText","headingTag","moduleClassName","orderLookupContainerClassName","orderLookupFormClassName","orderLookupAdditionalFiledContainerClassName","orderLookupFormFieldsClassName","orderNumberLabelClassName","orderNumberInputErrorClassName","submitButtonClassName","signinLinkClassName","orderLookupHeading","orderLookup","orderLookupContainer","orderLookupAdditionalFieldContainer","_createParagraph","renderOrderLookupInputField","orderLookupForm","autoComplete","orderNumberInput","submitButtonLabelText","fieldErrorMessage","registeredUserMessage","submit","_renderAdditionalFields","_getExtensibleEnumera","_getExtensibleEnumera2","isOrderLookupAdditionalFieldValid","isOrderLookupFieldValid","getExtensibleEnumerations","StoreOperationsDataActions","TypeName","ExtensibleEnumerations","orderLookupAdditionalParameter","validateOrderLookupField","orderStatusLookUpParameter","isValidField","validateOrderLookupAdditionalField","orderStatusLookUpAdditionalParameters","isValidAdditionalField","_item$fieldKey","fieldKey","validateAdditionalFieldWithProxy","setLookupFieldState","additionalFieldsInput","OrderLookupViewComponent","_orderLookupForm$clas","_submitButton$classNa","TileList","_telemetryContent","static","Heading","_this$props$config$cl","propsCarousel","SingleSlideCarousel","flipperPrevLabel","flipperPrevious","flipperNextLabel","flipperNext","parentId","vertical","_createHeading","singleSlideCarouselComponentProps","tileItemContainer","tileListContainer","tileListHeading","tiles","content","tileListView","tileItem","keyIndex","OrderHistoryOrderInfomation","orderInformationProps","salesId","receiptId","channelName","createdDate","amount","OrderHistoryGroupDelivery","deliveryProps","processing","trackingInfo","OrderHistoryGroup","groupProps","delivery","salesLinesProps","salesLines","salesLine","OrderHistoryGroups","groupsProps","groups","group","OrderHistoryHeader","orderCountLabel","extraActions","OrderHistorySalesOder","_ref6","salesOrderProps","orderInfomation","orderDetailsLink","expandProductsButton","placedBy","OrderHistoryList","_ref7","listProps","salesOrders","salesOrder","_ref8","orderHistoryProps","loading","emptyMessage","backToShoppingLink","list","table","moreButton","SignInLoading","icon","SignInButton","attributes","signIn","defaultAADConainer","aadConainer","signInSection","signUpSection","signInSectionHeading","signInLocalAccount","signInSocialAccount","signUpSectionHeading","signInB2BAccount","signUpDescription","isShowLoading","localAccount","forgetPassword","disclaimer","signInButton","wrapper","LocalAccount","socialAccounts","button","image","SocialAccount","b2bSignUpButtonAriaLabel","b2bSignUpButtonText","signUpButton","B2BAccount"],"sourceRoot":""}