\n
\n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.primaryImageUrl,\n product.name,\n context\n )}\n
\n
\n
{product.name}
\n {renderPrice(\n context,\n typeName,\n id,\n product.basePrice,\n product.price,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText,\n isPriceMinMaxEnabled,\n priceResources\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.defaultUnitOfMeasure)}\n {renderDescription(product.description)}\n \n
\n {renderProductPlacementImage(\n imageSettings,\n context.request.gridSettings,\n productImageUrl,\n product.primaryImageUrl,\n product.name,\n context\n )}\n
\n \n
{product.name}
\n {renderPrice(\n context,\n typeName,\n id,\n product.basePrice,\n product.price,\n savingsText,\n freePriceText,\n originalPriceText,\n currentPriceText\n )}\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.defaultUnitOfMeasure)}\n \n \n )}\n {renderProductDimensions(product.attributeValues)}\n {!context.app.config.hideRating &&\n renderRating(context, typeName, id, product.averageRating, product.totalRatings, ratingAriaLabel, ratingCountAriaLabel)}\n {renderProductAvailability(inventoryLabel)}\n {quickViewButton && renderQuickView(quickViewButton, product.recordId)}\n {productComparisonButton && renderProductComparisonButton(productComparisonButton, product, getCatalogId(context.request))}\n \n );\n};\n\nfunction renderLabel(\n name?: string,\n price?: string,\n rating?: number,\n ratingAriaLabelText?: string,\n reviewCount?: number,\n ratingCountAriaLabelText?: string\n): string {\n const reviewCountArialableText = getReviewAriaLabel(reviewCount, ratingCountAriaLabelText ?? '');\n return `${name ?? ''} ${price ?? ''} ${getRatingAriaLabel(rating, ratingAriaLabelText)}${\n reviewCountArialableText ? ` ${reviewCountArialableText}` : ''\n }`;\n}\n\nfunction renderDescription(description?: string): JSX.Element | null {\n return {description}
;\n}\n\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\n if (rating && ratingAriaLabel) {\n const roundedRating = rating.toFixed(2);\n return format(ratingAriaLabel || '', roundedRating, '5');\n }\n return '';\n}\n\nfunction getReviewAriaLabel(reviewCount?: number, ratingCountAriaLabelText?: string): string {\n if (reviewCount && ratingCountAriaLabelText) {\n return format(ratingCountAriaLabelText || '', reviewCount);\n }\n return '';\n}\n\nfunction renderRating(\n coreContext: ICoreContext,\n moduleTypeName: string,\n moduleId: string,\n avgRating?: number,\n totalRatings?: number,\n ariaLabel?: string,\n ratingCountAriaLabel?: string\n): JSX.Element | null {\n if (!avgRating) {\n return null;\n }\n\n const numberRatings = totalRatings?.toString() || undefined;\n const ratingAriaLabelText = getRatingAriaLabel(avgRating, ariaLabel);\n const ratingCountAriaLabelText = getReviewAriaLabel(Number(numberRatings), ratingCountAriaLabel);\n\n return (\n \n );\n}\n\nfunction renderPrice(\n context: ICoreContext,\n typeName: string,\n id: string,\n basePrice?: number,\n adjustedPrice?: number,\n savingsText?: string,\n freePriceText?: string,\n originalPriceText?: string,\n currentPriceText?: string,\n isPriceMinMaxEnabled?: boolean,\n priceResources?: IPriceComponentResources\n): JSX.Element | null {\n const price = {\n BasePrice: basePrice,\n AdjustedPrice: adjustedPrice,\n CustomerContextualPrice: adjustedPrice\n };\n\n return (\n \n );\n}\n\nfunction renderProductPlacementImage(\n imageSettings?: IImageSettings,\n gridSettings?: IGridSettings,\n imageUrl?: string,\n fallbackImageUrl?: string,\n altText?: string,\n context?: ICoreContext>\n): JSX.Element | null {\n if (!imageUrl || !gridSettings || !imageSettings) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment -- Site level config can be of any type.\n const contextConfig = context?.app.config?.placeholderImageName;\n const emptyPlaceHolderImage = contextConfig as string;\n let fallbackImageSource = fallbackImageUrl;\n if (emptyPlaceHolderImage && fallbackImageUrl) {\n fallbackImageSource = `${fallbackImageUrl},${emptyPlaceHolderImage}`;\n }\n const img: IImageData = {\n src: imageUrl,\n altText: altText ? altText : '',\n fallBackSrc: fallbackImageSource\n };\n const imageProps = {\n gridSettings,\n imageSettings\n };\n imageProps.imageSettings.cropFocalRegion = true;\n return (\n \n );\n}\n\nexport const ProductComponentV2: React.FunctionComponent = msdyn365Commerce.createComponentOverride<\n IProductComponentV2\n>('ProductV2', { component: ProductCardV2, ...PriceComponentActions });\n\nexport default ProductComponentV2;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { isChannelTypeB2B } from '@msdyn365-commerce/core';\nimport { AsyncResultStatus, Cart, CartLineValidationResults } from '@msdyn365-commerce/retail-proxy';\nimport {\n updateLineDeliverySpecificationsAsync,\n validateForCheckoutAsync\n} from '@msdyn365-commerce/retail-proxy/dist/DataActions/CartsDataActions.g';\nimport {\n Address,\n DeliveryPreferenceType,\n LineDeliverySpecification,\n SimpleProduct,\n TokenizedPaymentCard\n} from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { IModuleStateManager, IModuleStateProps, withModuleState } from '@msdyn365-commerce-modules/checkout-utilities';\nimport {\n ArrayExtensions,\n getAvailabilitiesForCartLineItems,\n IProductInventoryInformation,\n ProductAvailabilitiesForCartLineItems,\n validateCartLinesInventory\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n Button,\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n IModuleProps,\n INodeProps,\n ITelemetryContent,\n TelemetryConstant,\n Waiting\n} from '@msdyn365-commerce-modules/utilities';\nimport { ErrorCode, ErrorLocation } from '@msdyn365-commerce/global-state';\nimport classnames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport { action, computed, get, reaction, when } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { ICheckoutData } from './checkout.data';\nimport { ICheckoutHeadingData, ICheckoutProps } from './checkout.props.autogenerated';\nimport AlertComponent from './components/alert';\nimport { getInvoicePaymentSummary, IInvoicePaymentSummary } from './components/get-invoice-payment-summary';\nimport { getLineItems, ILineItems } from './components/get-line-items';\nimport { getOrderSummary, IOrderSummary } from './components/get-order-summary';\nimport GuidedFormComponent from './components/guided-form';\nimport PlaceOrderButtonComponent from './components/place-order-button';\nimport placeOrder from './methods/place-order';\nimport { focusOnCheckoutError, setCheckoutErrors } from '../../checkout-errors';\nimport { AsyncResultStatusCode, IExpressPaymentDetails } from '../../common';\n\nexport * from './components/get-line-items';\nexport * from './components/get-order-summary';\n\n/**\n * Device type.\n */\ntype DeviceType = 'Mobile';\n\n/**\n * The Checkout state.\n */\ninterface ICheckoutState {\n errorMessage: string;\n isValidationPassed: boolean;\n isPlaceOrderLoading?: boolean;\n isPlaceOrderClicked?: boolean;\n}\n\n/**\n * Known action error failure states\n */\nexport const enum ActionErrorStatus {\n Timeout = 'Timeout',\n HookTimeout = 'Hook Timeout',\n ServiceUnavailable = 'Service Unavailable'\n}\n\n/**\n * The Checkout view props.\n * @extends ICheckoutProps\n */\nexport interface ICheckoutViewProps extends ICheckoutProps {\n className: string;\n canShow?: boolean;\n isEmptyCart?: boolean;\n isConsentGiven?: boolean;\n hasError?: boolean;\n isPaymentVerificationRedirection?: boolean;\n shouldEnableSinglePaymentAuthorizationCheckout?: boolean;\n cartStatus?: string;\n isMobile?: boolean;\n isEditorialMode?: boolean;\n backToShoppingUrl?: string;\n editCartLink?: string;\n hasSalesOrder: boolean;\n hasInvoiceLine?: boolean;\n\n moduleState?: IModuleStateManager;\n telemetryContent?: ITelemetryContent;\n checkoutGuidedFormHasError?: boolean;\n\n checkoutProps: IModuleProps;\n headerProps: INodeProps;\n bodyProps: INodeProps;\n mainProps: INodeProps;\n mainControlProps: INodeProps;\n sideProps: INodeProps;\n sideControlFirstProps: INodeProps;\n sideControlSecondProps: INodeProps;\n termsAndConditionsProps: INodeProps;\n\n guidedForm?: React.ReactNode;\n title?: React.ReactNode;\n loading?: React.ReactNode;\n alert?: React.ReactNode;\n orderSummary?: IOrderSummary;\n invoicePaymentSummary?: IInvoicePaymentSummary;\n lineItems?: ILineItems;\n placeOrderButton?: React.ReactNode;\n termsAndConditions?: React.ReactNode;\n keepShoppingButton?: React.ReactNode;\n orderConfirmation?: React.ReactNode;\n\n checkoutExpressPaymentContainer?: React.ReactNode;\n checkoutErrorRef?: React.RefObject;\n}\n\n/**\n * The checkout module props interface.\n */\nexport interface ICheckoutModuleProps extends ICheckoutProps, IModuleStateProps {}\n\nconst expressPaymentSectionClassName = 'msc-express-payment-container';\n\n/**\n *\n * CheckoutContainer component.\n * @extends {React.Component}\n */\n// @ts-expect-error\n@withModuleState\n@observer\nclass Checkout extends React.PureComponent {\n @computed get cartStatus(): Msdyn365.AsyncResultStatus {\n return this.props.data.checkout?.status;\n }\n\n @computed get isEmptyCart(): boolean {\n if (this.isEditorialMode) {\n // Editorial mode: Ignore empty cart\n return false;\n }\n const cart = this.props.data.checkout?.result?.checkoutCart?.cart;\n return this.cartStatus === 'SUCCESS' && !!cart && !isEmpty(cart) && (!cart.CartLines || cart.CartLines.length === 0);\n }\n\n @computed get hasError(): boolean {\n const cart = this.props.data.checkout?.result?.checkoutCart?.cart;\n return this.cartStatus === 'FAILED' || (this.cartStatus === 'SUCCESS' && (!cart || isEmpty(cart)));\n }\n\n @computed get isEditorialMode(): boolean {\n return this.props.context.request.params.isEditor;\n }\n\n @computed get canPlaceOrder(): boolean {\n const isTermsAndConditionAccepted = this.props.data.checkout.result && this.props.data.checkout.result?.isTermsAndConditionAccepted;\n\n const shouldEnableSinglePaymentAuthorizationCheckout =\n this.props.data.checkout.result?.shouldEnableSinglePaymentAuthorizationCheckout ?? false;\n\n const disableForOBO = Msdyn365.isOboRequest(this.props.context.request) && !this.isPaidOffByCustomerAccount;\n\n // If isTermsAndConditionAccepted is undefined means TermsAndCondition module is not added to page and we should able to place order.\n return (\n this.props.moduleState.isReady &&\n (isTermsAndConditionAccepted === undefined || isTermsAndConditionAccepted || shouldEnableSinglePaymentAuthorizationCheckout) &&\n (this.state.errorMessage === '' ||\n shouldEnableSinglePaymentAuthorizationCheckout ||\n (this.props.data.checkout.result?.isPaymentVerificationRedirection ?? false)) &&\n !(shouldEnableSinglePaymentAuthorizationCheckout && disableForOBO)\n );\n }\n\n @computed get isPaidOffByCustomerAccount(): boolean {\n const amountDue = this.props.data.checkout.result?.checkoutCart.cart.TotalAmount ?? 0;\n const customerAccountAmount = this.props.data.checkout.result?.customerAccountAmount ?? 0;\n\n return customerAccountAmount === amountDue;\n }\n\n @computed get isCartReady(): boolean {\n return (\n !!this.props.data.checkout.result?.checkoutCart?.cart &&\n this.props.data.customerInformation.status !== 'LOADING' &&\n this.props.data.featureState.status !== 'LOADING'\n );\n }\n\n public get expressPaymentDetailsFromCartPage(): IExpressPaymentDetails | null {\n const properties =\n this.props.data.checkout?.result?.checkoutCart?.cart?.ExtensionProperties?.find(\n property => property.Key === 'expressPaymentDetails'\n )?.Value?.StringValue ?? '';\n return properties ? (JSON.parse(properties) as IExpressPaymentDetails) : null;\n }\n\n public state: ICheckoutState = {\n errorMessage: '',\n isValidationPassed: false,\n isPlaceOrderLoading: false,\n isPlaceOrderClicked: false\n };\n\n private readonly telemetryContent: ITelemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n\n private readonly checkoutErrorRef: React.RefObject = React.createRef();\n\n public componentDidMount(): void {\n const {\n resources: { genericErrorMessage }\n } = this.props;\n\n when(\n () => this.asyncResultStatus !== AsyncResultStatusCode.LOADING,\n async () => {\n if (this.expressPaymentDetailsFromCartPage) {\n const {\n email,\n tenderLine,\n tokenizedPaymentCard,\n paymentTenderType: paymentTenderTypeFromCartPage,\n isExpressCheckoutAppliedInCartPage,\n isExpressAddressAppliedInCartPage,\n cardPaymentAcceptResult,\n address\n } = this.expressPaymentDetailsFromCartPage;\n\n this.props.data.checkout.result?.updateExpressCheckoutDetails({\n newEmailAddressFromExpressCheckout: email ?? '',\n newTenderLine: tenderLine,\n newTokenizedPaymentCard: tokenizedPaymentCard,\n newPaymentTenderType: paymentTenderTypeFromCartPage,\n newIsExpressCheckoutApplied: isExpressCheckoutAppliedInCartPage,\n newIsExpressAddressApplied: isExpressAddressAppliedInCartPage,\n newCardPaymentAcceptResult: cardPaymentAcceptResult\n });\n\n if (isExpressAddressAppliedInCartPage && address) {\n this.props.data.checkout.result?.updateBillingAddressFromExpressCheckout({\n newBillingAddressFromExpressCheckout: address\n });\n this.props.data.checkout.result?.updateShippingAddressFromExpressCheckout({\n newShippingAddressFromExpressCheckout: address\n });\n } else {\n void this._saveShippingAndBillingAddress(tokenizedPaymentCard);\n }\n\n this.props.data.checkout.result?.checkoutCart.updateExtensionProperties({\n newExtensionProperties: [\n {\n Key: 'expressPaymentDetails',\n Value: { StringValue: '' }\n }\n ]\n });\n }\n }\n );\n\n when(\n () => this.hasError,\n () => {\n this.setState({\n errorMessage: genericErrorMessage\n });\n this.props.context.telemetry.error('Failed to get cart');\n }\n );\n\n when(\n () => {\n return this.isEmptyCart;\n },\n () => {\n this.redirectToCartPage('Cart is empty, but no editCartLink found');\n }\n );\n\n when(\n () => this.isCartReady,\n () => {\n this.validateForCheckout();\n }\n );\n\n reaction(\n () => this.props.moduleState.isReady,\n () => {\n this.onContainerReady();\n }\n );\n\n // Reaction to call place order when isPaymentSectionContainerReady is true for new checkout flow.\n reaction(\n () => this.props.data.checkout.result?.isPaymentSectionContainerReady,\n async isReady => {\n if (\n this.props.data.checkout.result?.shouldEnableSinglePaymentAuthorizationCheckout &&\n isReady &&\n !this.props.data.checkout.result?.redirectAdditionalContext &&\n (!this.props.data.checkout.result?.isExpressCheckoutApplied ||\n this.props.data.checkout.result?.isPaymentVerificationRedirection)\n ) {\n if (!this.state.isPlaceOrderLoading) {\n this.setState({ isPlaceOrderLoading: true });\n }\n\n this.props.telemetry.information(\n 'Call onPlaceOrder as reaction when isPaymentSectionContainerReady is updated for single auth payment.'\n );\n\n await this.onPlaceOrder();\n\n // If 3D authentication redirection, don't update isPlaceOrderLoading\n if (!this.props.data.checkout.result.isPaymentVerificationRequired) {\n this.setState({ isPlaceOrderLoading: false });\n }\n }\n }\n );\n\n // Reaction to enable place order button when isPaymentSectionContainerHasError is true for new checkout flow.\n reaction(\n () => this.props.data.checkout.result?.isPaymentSectionContainerHasError,\n hasError => {\n if (this.props.data.checkout.result?.shouldEnableSinglePaymentAuthorizationCheckout && hasError) {\n this.setState({ isPlaceOrderLoading: false });\n\n this.props.telemetry.information(\n 'Enable place order button as reaction when isPaymentSectionContainerHasError is updated to true for single auth payment.'\n );\n } else {\n this.props.telemetry.information(\n 'No reaction when isPaymentSectionContainerHasError is updated to false or not single auth payment.'\n );\n }\n }\n );\n\n reaction(\n () => this.props.data.checkout.result?.isBillingAddressHasError,\n hasError => {\n if (this.props.data.checkout.result?.shouldEnableSinglePaymentAuthorizationCheckout && hasError) {\n this.setState({ isPlaceOrderLoading: false });\n\n this.props.data.checkout.result?.updateIsBillingAddressHasError({ newIsBillingAddressHasError: false });\n\n this.props.telemetry.information(\n 'Enable place order button as reaction when isBillingAddressHasError is updated to true for single auth payment.'\n );\n } else {\n this.props.telemetry.information(\n 'No reaction when isBillingAddressHasError is updated to false or not single auth payment.'\n );\n }\n }\n );\n\n // Reaction to enable place order button when redirection is true for new checkout flow.\n reaction(\n () => this.canPlaceOrder,\n async () => {\n if (this.props.data.checkout.result?.shouldEnableSinglePaymentAuthorizationCheckout && this.canPlaceOrder) {\n if (this.props.data.checkout.result?.isPaymentVerificationRedirection) {\n await this.props.data.checkout.result.updateIsPlaceOrderEnabledInRedirection({\n newIsPlaceOrderEnabledInRedirection: true\n });\n\n this.props.telemetry.information(\n 'Set isPaymentVerificationRedirection to true as reaction when canPlaceOrder is updated to true for single auth payment.'\n );\n } else {\n this.props.telemetry.information(\n 'No reaction when canPlaceOrder is updated to true but isPaymentVerificationRedirection is false for single auth payment.'\n );\n this.props.telemetry.information(\n `isOBORequest is ${Msdyn365.isOboRequest(this.props.context.request)} and canPlaceOrder is ${\n this.canPlaceOrder\n }.`\n );\n }\n } else {\n this.props.telemetry.information('No reaction when canPlaceOrder is updated to false or not single auth payment.');\n }\n }\n );\n\n // Reaction to update the error message when there is a checkout error.\n reaction(\n () => this.props.data.checkout.result?.checkoutError,\n checkoutError => {\n const checkoutErrorLocation: boolean = checkoutError?.errorLocation === ErrorLocation.Checkout;\n // If there is an Error in CheckoutPaymentInstrument module, checkout error location will be updated.\n const checkoutPaymentErrorLocation: boolean =\n checkoutError?.errorCode === ErrorCode.Microsoft_Dynamics_Commerce_Runtime_UnableToAuthorizePayment\n ? checkoutError.errorLocation === ErrorLocation.CheckoutPaymentInstrument\n : checkoutErrorLocation;\n if (\n this.props.data.checkout.result?.shouldEnableCheckoutErrorDisplayMessaging &&\n checkoutError &&\n checkoutError.errorMessage &&\n (checkoutErrorLocation ? checkoutErrorLocation : checkoutPaymentErrorLocation)\n ) {\n this._setErrorMessage(checkoutError.errorMessage);\n }\n }\n );\n }\n\n public componentDidUpdate(): void {\n if (\n this.props.data.checkout.result?.shouldEnableCheckoutErrorDisplayMessaging &&\n this.props.data.checkout.result?.shouldFocusOnCheckoutError &&\n this.state.errorMessage\n ) {\n focusOnCheckoutError(this.checkoutErrorRef, this.props.context.actionContext);\n }\n }\n\n // eslint-disable-next-line complexity -- ignore the complexity.\n public render(): JSX.Element {\n const {\n moduleState,\n config: { className, checkoutHeading, disableGuidedCheckoutFlow },\n resources,\n context: {\n request: {\n user: { isAuthenticated }\n }\n }\n } = this.props;\n const { errorMessage } = this.state;\n const { backToShopping, placeOrderText, confirmPaymentText, cookieConsentRequiredMessage, genericErrorMessage } = resources;\n const checkoutClass = classnames('ms-checkout', className);\n const allCheckoutInformation = this.getSlotItems('checkoutInformation');\n\n // @ts-expect-error - check the key of slot\n const checkoutInformation = allCheckoutInformation?.filter(info => !info?.key.includes('express-payment'));\n\n // @ts-expect-error - check the key of slot\n const checkoutExpressPaymentContainer = allCheckoutInformation?.find(info => info?.key.includes('express-payment'));\n\n const isConsentGiven =\n this.props.context.request &&\n this.props.context.request.cookies &&\n this.props.context.request.cookies.isConsentGiven &&\n this.props.context.request.cookies.isConsentGiven();\n\n const isMobile =\n this.props.context.request &&\n this.props.context.request.device &&\n (this.props.context.request.device.Type as DeviceType) === 'Mobile';\n\n const backToShoppingUrl = Msdyn365.getUrlSync('home', this.props.context.actionContext) || '';\n const editCartLink = Msdyn365.getUrlSync('cart', this.props.context.actionContext) || '';\n\n const termsAndConditions =\n this.props.slots.termsAndConditions && this.props.slots.termsAndConditions.length > 0 && this.props.slots.termsAndConditions[0];\n\n const payLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.BackToShopping);\n const backToShoppingAttributes = getTelemetryAttributes(this.telemetryContent, payLoad);\n\n const hasInvoiceLine = this.props.data.checkout && this.props.data.checkout.result?.checkoutCart.hasInvoiceLine;\n const checkoutBtnText = hasInvoiceLine ? confirmPaymentText : placeOrderText;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check for null/undefined.\n const shouldEnableSinglePaymentAuthorizationCheckout =\n this.props.data.checkout?.result?.shouldEnableSinglePaymentAuthorizationCheckout ?? false;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check null/undefined.\n const isExpressCheckoutApplied = this.props.data.checkout?.result?.isExpressCheckoutApplied ?? false;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check null/undefined.\n const hasShippingAddress = this.props.data.checkout?.result?.hasShippingAddress;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check null/undefined.\n const hasCartDeliveryMode = this.props.data.checkout?.result?.hasCartDeliveryMode;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check null/undefined.\n const hasGuestCheckoutEmail = this.props.data.checkout?.result?.hasGuestCheckoutEmail;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check null/undefined.\n const isTermsAndConditionAccepted = this.props.data.checkout?.result?.isTermsAndConditionAccepted;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check null/undefined.\n const isPaymentVerificationRedirection = this.props.data.checkout?.result?.isPaymentVerificationRedirection ?? false;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check null/undefined.\n const shouldEnableCheckoutErrorDisplayMessaging =\n this.props.data.checkout?.result?.shouldEnableCheckoutErrorDisplayMessaging ?? false;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check null/undefined.\n const shouldFocusOnCheckoutError = this.props.data.checkout?.result?.shouldFocusOnCheckoutError;\n\n let hasExpressPaymentContainer = false;\n\n if (\n typeof window !== 'undefined' &&\n (document?.getElementsByClassName(expressPaymentSectionClassName) as HTMLCollectionOf)[0]?.style.display === ''\n ) {\n hasExpressPaymentContainer = true;\n }\n\n let viewProps: ICheckoutViewProps = {\n ...this.props,\n className: checkoutClass,\n checkoutErrorRef: this.checkoutErrorRef,\n isEmptyCart: this.isEmptyCart,\n isConsentGiven,\n hasError: this.hasError,\n isPaymentVerificationRedirection: this.props.data.checkout?.result?.isPaymentVerificationRedirection,\n shouldEnableSinglePaymentAuthorizationCheckout,\n hasSalesOrder:\n this.props.data.checkout &&\n this.props.data.checkout.result !== undefined &&\n this.props.data.checkout.result.salesOrder !== undefined,\n hasInvoiceLine,\n cartStatus: this.cartStatus,\n isMobile,\n backToShoppingUrl,\n editCartLink,\n isEditorialMode: this.isEditorialMode,\n orderConfirmation:\n this.props.slots.orderConfirmation && this.props.slots.orderConfirmation.length > 0\n ? this.props.slots.orderConfirmation[0]\n : undefined,\n checkoutProps: { moduleProps: this.props, className: checkoutClass },\n headerProps: { className: 'ms-checkout__head' },\n bodyProps: { className: 'ms-checkout__body' },\n mainProps: { className: 'ms-checkout__main' },\n mainControlProps: { className: 'ms-checkout__main-control' },\n sideProps: { className: hasExpressPaymentContainer ? 'ms-checkout__has-express-side' : 'ms-checkout__side' },\n sideControlFirstProps: { className: 'ms-checkout__side-control-first' },\n sideControlSecondProps: { className: 'ms-checkout__side-control-second' },\n termsAndConditionsProps: { className: 'ms-checkout__terms-and-conditions' },\n title: checkoutHeading && this.renderMsdyn365Text(checkoutHeading),\n checkoutExpressPaymentContainer\n };\n\n if (!isConsentGiven && isAuthenticated) {\n viewProps = {\n ...viewProps,\n alert: \n };\n } else if (this.isLoading()) {\n viewProps = {\n ...viewProps,\n loading: \n };\n } else if (this.hasError) {\n viewProps = {\n ...viewProps,\n alert: \n };\n } else {\n viewProps = {\n ...viewProps,\n alert: errorMessage && ,\n canShow: true,\n guidedForm: checkoutInformation ? (\n \n ) : (\n undefined\n ),\n orderSummary: getOrderSummary(this.props),\n invoicePaymentSummary: getInvoicePaymentSummary(this.props),\n lineItems: hasInvoiceLine ? undefined : getLineItems(this.props, this.telemetryContent),\n placeOrderButton: (\n \n ),\n termsAndConditions,\n keepShoppingButton: backToShoppingUrl && (\n \n {backToShopping}\n \n ),\n moduleState,\n telemetryContent: this.telemetryContent,\n checkoutGuidedFormHasError: !!errorMessage\n };\n }\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n @computed public get asyncResultStatus(): AsyncResultStatus | undefined {\n const isLoading = Object.values(this.props.data).some(data => get(data, 'status') === AsyncResultStatusCode.LOADING);\n if (isLoading) {\n return AsyncResultStatusCode.LOADING;\n }\n\n const isSuccess = Object.values(this.props.data).every(data => get(data, 'status') === AsyncResultStatusCode.SUCCESS);\n if (isSuccess) {\n return AsyncResultStatusCode.SUCCESS;\n }\n\n const isFailed = Object.values(this.props.data).some(data => get(data, 'status') === AsyncResultStatusCode.FAILED);\n if (isFailed) {\n return AsyncResultStatusCode.FAILED;\n }\n\n return undefined;\n }\n\n /**\n * Renders heading.\n * @param checkoutHeading - The checkout heading.\n * @returns React node.\n */\n public renderMsdyn365Text(checkoutHeading: ICheckoutHeadingData): React.ReactNode {\n return (\n \n );\n }\n\n /**\n * Event handler for heading change event.\n * @param event - The content change event in heading element.\n * @returns The new heading value.\n */\n public handleCheckoutHeadingChange = (event: Msdyn365.ContentEditableEvent) =>\n (this.props.config.checkoutHeading!.text = event.target.value);\n\n /**\n * Checks if cart is loading.\n * @returns True if is loading, false otherwise.\n */\n private readonly isLoading = (): boolean => {\n return !this.cartStatus || this.cartStatus === 'LOADING' || this.isEmptyCart || !this.state.isValidationPassed;\n };\n\n /**\n * Get slot items.\n * @param key - The slot key.\n * @returns React node or undefined.\n */\n private readonly getSlotItems = (key: string): React.ReactNode[] | undefined => {\n const { slots } = this.props;\n return slots && slots[key] && slots[key].length > 0 ? slots[key] : undefined;\n };\n\n /**\n * Trigger the payment section container submit when placing order.\n */\n private readonly triggerPaymentWithPlaceOrder = async (): Promise => {\n this.setState({ isPlaceOrderLoading: true });\n\n await this.props.data.checkout.result?.updateShouldTriggerPaymentWithPlaceOrder({\n newShouldTriggerPaymentWithPlaceOrder: !this.props.data.checkout.result.shouldTriggerPaymentWithPlaceOrder\n });\n };\n\n /**\n * On place order.\n * @returns Void promise.\n */\n private readonly onPlaceOrder = async (): Promise => {\n const {\n resources: { checkoutOutOfStockErrorMessage },\n context: {\n actionContext,\n app: {\n config: { enableStockCheck = false }\n }\n },\n slots: { orderConfirmation },\n data: { checkout, products }\n } = this.props;\n\n this.props.telemetry.information('Checkout onPlaceOrder is called.');\n this.setState({ isPlaceOrderClicked: true });\n\n // If hasInvoiceLine is true, no inventory check\n if (\n !this.props.data.checkout.result?.checkoutCart.hasInvoiceLine &&\n enableStockCheck &&\n (await this.isOverMaxQuantity((await checkout).checkoutCart.cart, await products))\n ) {\n this.setState({\n errorMessage: checkoutOutOfStockErrorMessage\n });\n this.props.context.telemetry.error(checkoutOutOfStockErrorMessage);\n } else {\n const hasOrderConfirmation = orderConfirmation && orderConfirmation.length > 0;\n\n const updatedCartVersion = await this.updateCartLineEmailAddress(this.props.data.checkout.result?.guestCheckoutEmail || '');\n\n await placeOrder(\n actionContext,\n this.props.data.checkout.result,\n this.props.data.products.result,\n !hasOrderConfirmation,\n updatedCartVersion,\n this.props.data.checkout.result?.isPaymentVerificationRedirection\n ).catch(error => {\n this.handleCheckoutError(error);\n });\n\n await checkout.result?.updateIsPaymentSectionContainerReady({ newIsPaymentSectionContainerReady: false });\n }\n };\n\n /**\n * Update receipt email address for electronic cart line.\n * @param newGuestCheckoutEmail - The guest checkout email.\n * @returns The updated cart version.\n */\n private readonly updateCartLineEmailAddress = async (newGuestCheckoutEmail: string): Promise => {\n const emailDeliveryModeCode = this.props.context.request.channel?.EmailDeliveryModeCode;\n\n let electronicDeliveryInvoiceAddress: Address;\n\n const hasShippingAddress = this.props.data.checkout?.result?.hasShippingAddress;\n\n if (hasShippingAddress && this.props.config.useShippingAddressAsElectronicDeliveryInvoiceAddress) {\n electronicDeliveryInvoiceAddress = this.props.data.checkout?.result?.shippingAddress as Address;\n }\n\n const emailDeliveryCartLines = this.props.data.checkout.result?.checkoutCart.cart.CartLines?.filter(\n cartLine => cartLine.DeliveryMode && cartLine.DeliveryMode !== '' && cartLine.DeliveryMode === emailDeliveryModeCode\n );\n\n let updatedCartVersion: number | undefined;\n if (emailDeliveryCartLines && emailDeliveryCartLines.length > 0) {\n const lineDeliverySpecifications: LineDeliverySpecification[] = emailDeliveryCartLines.map(line => {\n return {\n LineId: line.LineId,\n DeliverySpecification: {\n DeliveryModeId: emailDeliveryModeCode,\n DeliveryPreferenceTypeValue: DeliveryPreferenceType.ElectronicDelivery,\n ElectronicDeliveryEmailAddress: newGuestCheckoutEmail,\n DeliveryAddress: hasShippingAddress ? electronicDeliveryInvoiceAddress : undefined\n }\n };\n });\n\n await updateLineDeliverySpecificationsAsync(\n { callerContext: this.props.context.actionContext },\n (await this.props.data.checkout).checkoutCart.cart.Id,\n lineDeliverySpecifications\n )\n .then(updatedCart => {\n updatedCartVersion = updatedCart.Version;\n })\n .catch(error => {\n this.props.context.actionContext.telemetry.exception(error);\n throw new Error('[updateLineDeliverySpecificationsAsync] Unable to update electronic delivery email address in cart');\n });\n }\n\n return updatedCartVersion;\n };\n\n /**\n * Return true if any product in the cart is over its max quantity.\n * @param cart -- The checkout cart.\n * @param products -- The checkout products.\n * @returns - Is any product in the cart is over max quantity.\n */\n private readonly isOverMaxQuantity = async (cart: Cart, products: SimpleProduct[]): Promise => {\n let isOverMaxQuantity = false;\n const emailDeliveryModeCode = this.props.context.request.channel?.EmailDeliveryModeCode;\n\n await getAvailabilitiesForCartLineItems(\n new ProductAvailabilitiesForCartLineItems(this.props.context.actionContext.requestContext.apiSettings),\n this.props.context.actionContext\n )\n .then(productInventoryInformation => {\n const productsThatShouldValidateInventory: IProductInventoryInformation[] = [];\n\n cart.CartLines?.map(cartline => {\n const cartlineProduct = products.find(product => product.RecordId === cartline.ProductId);\n\n // If product is non-stocked or cartline is electronic delivery, then no inventory check\n const isStockedItem = cartlineProduct?.Behavior?.IsStockedProduct;\n const isEmailDelivery =\n cartline.DeliveryMode && cartline.DeliveryMode !== '' ? cartline.DeliveryMode === emailDeliveryModeCode : false;\n const shouldSkipInventoryCheck = !isStockedItem || isEmailDelivery;\n if (!shouldSkipInventoryCheck && ArrayExtensions.hasElements(productInventoryInformation)) {\n const foundProductAvailability = productInventoryInformation.find(productInventory => {\n return productInventory.ProductAvailableQuantity?.ProductId! === cartline.ProductId;\n });\n if (foundProductAvailability) {\n productsThatShouldValidateInventory.push(foundProductAvailability);\n }\n }\n });\n\n const cartLinesInventoryValidation = validateCartLinesInventory(\n cart.CartLines ?? [],\n productsThatShouldValidateInventory,\n this.props.context.actionContext,\n products,\n emailDeliveryModeCode\n );\n\n // If is invalid then exceeds the available quantity\n isOverMaxQuantity = !cartLinesInventoryValidation.isValid;\n return isOverMaxQuantity;\n })\n .catch(error => {\n this.props.context.actionContext.telemetry.exception(error);\n throw new Error('[getAvailabilitiesForCartLineItems] Unable to get availabilities for products in checkout cart');\n });\n\n return isOverMaxQuantity;\n };\n\n /**\n * Gets active child in module state.\n * @returns - The module state manager collection.\n */\n private readonly getActiveChildModuleStates = (): IModuleStateManager[] => {\n const { childIds, getModule } = this.props.moduleState;\n return childIds\n .map(getModule)\n .filter((state): state is IModuleStateManager => !!state && !state.isDisabled && state.hasModuleState);\n };\n\n /**\n * On container ready.\n */\n private readonly onContainerReady = (): void => {\n this.props.telemetry.information('Checkout onContainerReady is called.');\n\n this.getActiveChildModuleStates().forEach(state => {\n state.isReady && state.onContainerReady && state.onContainerReady();\n });\n };\n\n /**\n * Redirects to cart page.\n * @param notFoundEditCartLinkMessage - Not found edit cart link message.\n */\n private readonly redirectToCartPage = (notFoundEditCartLinkMessage: string): void => {\n const editCartLink = Msdyn365.getUrlSync('cart', this.props.context.actionContext) || '';\n if (window && editCartLink) {\n window.location.assign(editCartLink);\n } else {\n this.setState({\n errorMessage: this.props.resources.genericErrorMessage\n });\n this.props.context.telemetry.error(notFoundEditCartLinkMessage);\n }\n };\n\n /**\n * Validates for checkout.\n * @param retry - Retry flag.\n */\n private readonly validateForCheckout = (retry: boolean = true): void => {\n const notFoundEditCartLinkMessage = \"Cart doesn't pass validation, but no editCartLink found\";\n const cart = this.props.data.checkout.result!.checkoutCart.cart;\n const { Id, Version } = cart;\n if (this._shouldValidateQuantityLimits()) {\n if (Version && Id) {\n validateForCheckoutAsync({ callerContext: this.props.context.actionContext, bypassCache: 'none' }, Id, Version)\n .then((result: CartLineValidationResults) => {\n if (result.ValidationFailuresByCartLines?.length !== 0) {\n this.redirectToCartPage(notFoundEditCartLinkMessage);\n } else {\n this.setState({ isValidationPassed: true });\n }\n })\n .catch(error => {\n this.props.telemetry.warning(error);\n this.props.telemetry.debug('Unable to validate Cart');\n if (retry && error.name === 'Microsoft_Dynamics_Commerce_Runtime_InvalidCartVersion') {\n const cartState = this.props.data.checkout.result?.checkoutCart;\n cartState\n ?.refreshCart({})\n .then(() => {\n this.validateForCheckout(false);\n })\n .catch((refreshError: Error) => {\n this.props.telemetry.warning(refreshError.message);\n this.props.telemetry.debug('Unable to refresh Cart');\n });\n } else {\n this.redirectToCartPage(notFoundEditCartLinkMessage);\n }\n });\n } else {\n this.redirectToCartPage(notFoundEditCartLinkMessage);\n }\n } else {\n this.setState({ isValidationPassed: true });\n }\n };\n\n @action\n private readonly _setErrorMessage = (errorMessage: string): void => {\n this.props.telemetry.error(errorMessage);\n this.props.moduleState.setHasError(true);\n this.props.moduleState.onUpdating();\n this.setState({\n errorMessage\n });\n };\n\n private readonly _shouldValidateQuantityLimits = (): boolean => {\n const featureStatuses = this.props.data.featureState.result;\n const isECommerceQuantityLimitsFeatureEnabledInHq =\n featureStatuses?.find(\n featureState => featureState.Name === 'Dynamics.AX.Application.EcommerceQuantityLimitConfigurationsFeature'\n )?.IsEnabled || false;\n\n if (isECommerceQuantityLimitsFeatureEnabledInHq) {\n return true;\n }\n\n const isOrderQuantityLimitsFeatureEnabledInHq =\n featureStatuses?.find(featureState => featureState.Name === 'Dynamics.AX.Application.RetailDefaultOrderQuantityLimitsFeature')\n ?.IsEnabled || false;\n\n if (!isOrderQuantityLimitsFeatureEnabledInHq) {\n return false;\n }\n\n const useSiteBuilderSettings = featureStatuses?.find(\n featureState => featureState.Name === 'RevertToSiteBuilderOrderQuantityLimitsSettings'\n )?.IsEnabled;\n\n if (useSiteBuilderSettings) {\n const defaultOrderQuantityLimitsFeatureConfig = this.props.context?.request?.app?.platform?.enableDefaultOrderQuantityLimits;\n const customerInfo = this.props.data.customerInformation.result;\n const isB2BSite = isChannelTypeB2B(this.props.context.actionContext.requestContext);\n\n const isOrderQuantityLimitsFeatureEnabledInSiteSettings =\n defaultOrderQuantityLimitsFeatureConfig === 'all' ||\n (customerInfo &&\n ((defaultOrderQuantityLimitsFeatureConfig === 'b2b' && isB2BSite) ||\n (defaultOrderQuantityLimitsFeatureConfig === 'b2c' && !isB2BSite)));\n\n return isOrderQuantityLimitsFeatureEnabledInSiteSettings ?? false;\n } else {\n const cartConfiguration = this.props.data.cartConfiguration?.result;\n return !(cartConfiguration?.IgnoreOrderSettings ?? false);\n }\n };\n\n /**\n * Save the address as Shipping and Billing address.\n * @param tokenizedPaymentCard - Tokenized payment card.\n */\n private readonly _saveShippingAndBillingAddress = async (tokenizedPaymentCard?: TokenizedPaymentCard): Promise => {\n const checkoutState = this.props.data.checkout.result;\n\n // For Paypal, the address returned in TokenizedPaymentCard will be used as both shipping and billing address.\n if (checkoutState && tokenizedPaymentCard && tokenizedPaymentCard.Zip) {\n const address: Address = this._getAddressFromTokenizedPaymentCard(tokenizedPaymentCard);\n\n await checkoutState.updateBillingAddressFromExpressCheckout({ newBillingAddressFromExpressCheckout: address });\n await checkoutState.updateShippingAddressFromExpressCheckout({ newShippingAddressFromExpressCheckout: address });\n }\n };\n\n /**\n * Get address from tokenizedPaymentCard.\n * @param tokenizedPaymentCard -- The tokenizedPaymentCard from the payment.\n * @returns The address.\n */\n private readonly _getAddressFromTokenizedPaymentCard = (tokenizedPaymentCard: TokenizedPaymentCard): Address => {\n const address: Address = {\n TwoLetterISORegionName: tokenizedPaymentCard.Country,\n Name: tokenizedPaymentCard.NameOnCard,\n Street: tokenizedPaymentCard.Address1,\n StreetNumber: tokenizedPaymentCard.Address2,\n City: tokenizedPaymentCard.City,\n State: tokenizedPaymentCard.State,\n ZipCode: tokenizedPaymentCard.Zip,\n Phone: tokenizedPaymentCard.Phone\n };\n\n return address;\n };\n\n /**\n * Handle checkout errors.\n * @param error -- The error on checkout api failure.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private readonly handleCheckoutError = (error: any) => {\n // Here checkout failure message will be shown if there is any error in checkout api except data validation.\n const {\n resources: {\n genericErrorMessage,\n invalidCartVersionErrorMessage,\n missingRequiredCartTenderLinesErrorMessage,\n checkoutApiFailureErrorMessage,\n invoiceCheckoutApiFailureErrorMessage\n },\n context: { actionContext }\n } = this.props;\n const checkoutResult = this.props.data.checkout.result;\n const apiError = error && error.message;\n if (error?.statusCode === 500) {\n const errorMessage = checkoutApiFailureErrorMessage;\n this.setState({\n errorMessage\n });\n this.props.telemetry.exception(error);\n this.setState({ isPlaceOrderLoading: false });\n return;\n }\n if (checkoutResult && checkoutResult.shouldEnableCheckoutErrorDisplayMessaging) {\n const errorCode = error && error.name ? error.name : '';\n // apiError message will be used if errorcode resource/enums is unavailable\n setCheckoutErrors(errorCode, this.props.resources, !!checkoutResult.isExpressCheckoutApplied, actionContext, apiError);\n } else {\n let errorMessage = genericErrorMessage;\n this.setState({ isPlaceOrderClicked: false });\n\n if (error && error.name === 'Microsoft_Dynamics_Commerce_Runtime_InvalidCartVersion') {\n errorMessage = invalidCartVersionErrorMessage;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- unknown error type.\n } else if (error && error.name === 'Microsoft_Dynamics_Commerce_Runtime_MissingRequiredCartTenderLines') {\n errorMessage = missingRequiredCartTenderLinesErrorMessage;\n } else if (error && error.name === 'Microsoft_Dynamics_Commerce_Runtime_ExclusiveCouponCannotBeAppliedWithOtherCoupons') {\n // If api error is not available show generic message\n errorMessage = apiError || genericErrorMessage;\n } else {\n if (error.status === ActionErrorStatus.Timeout || error.status === ActionErrorStatus.ServiceUnavailable) {\n errorMessage = checkoutResult?.checkoutCart.hasInvoiceLine\n ? invoiceCheckoutApiFailureErrorMessage\n : checkoutApiFailureErrorMessage;\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- unknown error type.\n if (\n this.props.data.checkout.result?.shouldEnableSinglePaymentAuthorizationCheckout &&\n error.data?.AdditionalContext &&\n !this.props.data.checkout.result?.isPaymentVerificationRedirection\n ) {\n return;\n }\n\n this.setState({\n errorMessage\n });\n this.props.telemetry.exception(error);\n }\n };\n}\n\nexport default Checkout;\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 * as React from 'react';\n\nexport interface ICheckoutDeliveryOptionsDescriptionProps {\n description?: string;\n className?: string;\n}\n\n/**\n * AddPaymentForm SFC.\n * @param root0\n * @param root0.description\n * @extends {React.FC}\n */\nconst CheckoutDeliveryOptionsDescription: React.FC = ({ description, className }) => {\n if (!description) {\n return null;\n }\n\n const descClassName = StringExtensions.isNullOrEmpty(className) ? 'ms-checkout-delivery-options__description' : className;\n return {description};\n};\n\nexport default CheckoutDeliveryOptionsDescription;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\n\nexport interface ICheckoutDeliveryOptionsErrorMessageProps {\n message?: string;\n}\n\n/**\n * AddPaymentForm SFC.\n * @param root0\n * @param root0.message\n * @extends {React.FC}\n */\nconst CheckoutDeliveryOptionsErrorMessage: React.FC = ({ message }) => {\n if (!message) {\n return null;\n }\n\n return {message}
;\n};\n\nexport default CheckoutDeliveryOptionsErrorMessage;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\n\nexport interface ICheckoutDeliveryOptionsErrorTitleProps {\n title?: string;\n}\n\n/**\n * AddPaymentForm SFC.\n * @param root0\n * @param root0.title\n * @extends {React.FC}\n */\nconst CheckoutDeliveryOptionsErrorTitle: React.FC = ({ title }) => {\n if (!title) {\n return null;\n }\n\n return {title}
;\n};\n\nexport default CheckoutDeliveryOptionsErrorTitle;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { getPayloadObject, getTelemetryAttributes, ITelemetryContent, TelemetryConstant } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface ICheckoutDeliveryOptionsRadioButtonProps {\n isChecked: boolean;\n value?: string;\n ariaSetSize: number;\n ariaPosInSet: number;\n ariaLabel?: string;\n telemetryContent?: ITelemetryContent;\n onChange(event: React.ChangeEvent): void;\n}\n\n/**\n * AddPaymentForm SFC.\n * @param root0\n * @param root0.isChecked\n * @param root0.value\n * @param root0.ariaSetSize\n * @param root0.ariaPosInSet\n * @param root0.ariaLabel\n * @param root0.telemetryContent\n * @param root0.onChange\n * @extends {React.FC}\n */\nconst CheckoutDeliveryOptionsRadioButton: React.FC = ({\n isChecked,\n value,\n ariaSetSize,\n ariaPosInSet,\n ariaLabel,\n telemetryContent,\n onChange\n}) => {\n if (!value) {\n return null;\n }\n\n const payLoad = getPayloadObject('click', telemetryContent!, TelemetryConstant.DeliveryOptions);\n const attributes = getTelemetryAttributes(telemetryContent!, payLoad);\n\n return (\n \n );\n};\n\nexport default CheckoutDeliveryOptionsRadioButton;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\n\nexport interface IAddressDetailItem {\n isNewLine: boolean;\n isShowLabel: boolean;\n labelText: string;\n name: string;\n value: string;\n}\n\n/**\n * Address details item.\n * @param props - Configuration of the functional component.\n * @returns React functional component.\n */\nexport const AddressDetailItemFunctionComponent: React.FC = (props: IAddressDetailItem) => {\n const { labelText, value } = props;\n\n const className = `ms-checkout-delivery-options__cart-line-grp__item__header__address`;\n return (\n \n {labelText}\n {value}\n \n );\n};\n\nexport default AddressDetailItemFunctionComponent;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { DeliveryOptionsCartLineAddress } from '@msdyn365-commerce-modules/retail-actions';\nimport { getPayloadObject, getTelemetryAttributes, ITelemetryContent, TelemetryConstant } from '@msdyn365-commerce-modules/utilities';\nimport { CartLine } from '@msdyn365-commerce/retail-proxy';\nimport React, { useState } from 'react';\n\nexport interface ICheckoutCartLineDeliveryDateProps {\n className?: string;\n isDisabled?: boolean;\n minRangeValue?: string;\n maxRangeValue?: string;\n validationErrorForRange?: string;\n fallbackPattern?: string;\n ariaLabel?: string;\n telemetryContent?: ITelemetryContent;\n disclaimerText?: string;\n heading?: string;\n checkBoxLabel?: string;\n onChangeMinValue?: void;\n id?: string;\n cartLines?: CartLine[];\n groupDeliveryOption?: DeliveryOptionsCartLineAddress;\n onChange(event: React.ChangeEvent, cartLines: CartLine[]): void;\n}\n\nconst CheckoutCartLineDeliveryDate: React.FC = ({\n className,\n isDisabled,\n fallbackPattern,\n ariaLabel,\n telemetryContent,\n onChangeMinValue,\n checkBoxLabel,\n disclaimerText,\n heading,\n cartLines,\n groupDeliveryOption,\n onChange\n}) => {\n const [selectedDate, setSelectedDate] = useState('');\n const [isDateEnabled, setIsDateEnabled] = useState(false);\n // State to store today's date\n const [minDate, setMinDate] = useState('');\n\n // Update minDate state with today's date on component mount\n useState(() => {\n const today = new Date().toISOString().split('T')[0];\n setMinDate(today);\n });\n\n const handleDateChange = (event: React.FocusEvent) => {\n const selectedValue = event.target.value;\n // Check if the selected date is allowed\n if (selectedValue >= minDate) {\n setSelectedDate(selectedValue);\n console.log('Selected date is allowed.', selectedValue);\n } else {\n console.log('Selected date is not allowed.');\n }\n\n if (groupDeliveryOption !== undefined && cartLines !== undefined) {\n const cartLinesDate: CartLine[] = [];\n groupDeliveryOption?.cartLineIds?.map(cartLineId => {\n const tempCartLine = cartLines?.find(cartLine => cartLineId === cartLine?.LineId?.toString());\n if (tempCartLine !== undefined) {\n cartLinesDate.push(tempCartLine);\n }\n });\n\n if (cartLinesDate !== undefined) {\n onChange(event, cartLinesDate);\n }\n }\n };\n\n const handleCheckboxChange = () => {\n setIsDateEnabled(!isDateEnabled);\n };\n\n const payLoad = getPayloadObject('click', telemetryContent!, TelemetryConstant.DeliveryOptions);\n const attributes = getTelemetryAttributes(telemetryContent!, payLoad);\n\n return (\n \n
\n \n {checkBoxLabel}\n
\n
{disclaimerText}\n
\n {heading}\n \n
\n
{response}
;\n};\n\nexport default CheckoutCartLineDeliveryOptionsRadio;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { CartLineItemComponent } from '@msdyn365-commerce/components';\nimport { Button, getPayloadObject, getTelemetryAttributes, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport MsDyn365, * as Msdyn365 from '@msdyn365-commerce/core';\nimport { isChannelTypeB2B, TelemetryEvent } from '@msdyn365-commerce/core';\nimport { CartLine, DeliveryOption, ProductCatalog, SimpleProduct } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { getProductUrlSync } from '@msdyn365-commerce-modules/retail-actions';\nimport React, { useState } from 'react';\nimport CheckoutCartLineDeliveryOptionsRadio from './checkout-cartLine-delivery-options-radio';\n\nexport interface ICheckoutDeliveryOptionsLineItemsProps {\n className?: string;\n moduleId: string;\n selectedItemId: string;\n context: Msdyn365.ICoreContext;\n typeName: string;\n cartLines: CartLine[];\n imageSettings: Msdyn365.IImageSettings;\n showShippingChargesForLineItems: boolean;\n resources: ICheckoutDeliveryOptionsLineItemsResources;\n deliveryOptions: DeliveryOption[];\n ariaSetSize: number;\n ariaPosInSet: number;\n telemetryContent?: ITelemetryContent;\n onChange(event: React.ChangeEvent, cartLines: CartLine[]): void;\n currencyCode?: string;\n products?: SimpleProduct[];\n catalogs?: ProductCatalog[];\n gridSettings?: Msdyn365.IGridSettings;\n cartLineId?: string;\n key?: string;\n}\n\nexport interface ICheckoutDeliveryOptionsLineItemsResources {\n quantityDisplayStringLabel: string;\n productDimensionTypeColor: string;\n productDimensionTypeSize: string;\n productDimensionTypeStyle: string;\n productDimensionTypeAmount: string;\n configString: string;\n discountStringText: string;\n shippingChargesText: string;\n priceFree: string;\n ariaLabel: string;\n changeButtonText?: string;\n deliveryMethodLabel?: string;\n}\n\nconst _getLineItemComponent = (\n context: Msdyn365.ICoreContext,\n cartLine: CartLine,\n product: SimpleProduct,\n moduleId: string,\n typeName: string,\n showShippingChargesForLineItems: boolean,\n imageSettings: Msdyn365.IImageSettings,\n resources: ICheckoutDeliveryOptionsLineItemsResources,\n currencyCode: string,\n catalogs?: ProductCatalog[],\n gridSettings?: Msdyn365.IGridSettings,\n cartLineId?: string\n): JSX.Element | undefined => {\n let productUrl = getProductUrlSync(product, context.actionContext, undefined);\n if (MsDyn365.isBrowser && isChannelTypeB2B(context.actionContext.requestContext)) {\n const fullUrl = new URL(productUrl, window.location.href);\n fullUrl.searchParams.set('catalogid', `${cartLine.CatalogId ?? 0}`);\n productUrl = fullUrl.href;\n }\n\n return (\n \n );\n};\n\nconst _getProduct = (productId: number, products: SimpleProduct[]): SimpleProduct | undefined => {\n return products.find((_product: SimpleProduct) => {\n return productId === _product.RecordId;\n });\n};\n\nexport const GetLineItems: React.FC = (props: ICheckoutDeliveryOptionsLineItemsProps) => {\n const products = props.products;\n const lineClassName = props.className;\n const lineItemClassName = `${lineClassName}-item`;\n const currencyCode = props.currencyCode;\n const changeText = props.resources.changeButtonText;\n const [showDeliveryOption, setShowDeliveryOption] = useState(false);\n\n const handleClick = () => {\n setShowDeliveryOption(!showDeliveryOption);\n };\n if (!props.cartLines || props.cartLines.length === 0 || !products || products.length === 0 || currencyCode === undefined) {\n return null;\n }\n const deliveryCode = props.deliveryOptions.find(option => option.Code === props.selectedItemId);\n const payload = getPayloadObject(TelemetryEvent.UpdateInCart, props.telemetryContent!, changeText !== undefined ? changeText : '', '');\n const attributes = getTelemetryAttributes(props.telemetryContent!, payload);\n const response = props.cartLines.map(cartLine => {\n const product = cartLine.ProductId && _getProduct(cartLine.ProductId, products);\n if (!product) {\n return null;\n }\n return (\n \n {_getLineItemComponent(\n props.context,\n cartLine,\n product,\n props.moduleId,\n props.typeName,\n props.showShippingChargesForLineItems,\n props.imageSettings,\n props.resources,\n currencyCode,\n props.catalogs,\n props.gridSettings\n )}\n
{props.resources.deliveryMethodLabel}
\n
\n {deliveryCode?.Description}\n \n
\n {showDeliveryOption ? (\n
\n ) : null}\n
{response}
;\n};\nexport default GetLineItems;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IImageProps, IImageSettings, Image } from '@msdyn365-commerce/core';\nimport { CartLine, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport * as React from 'react';\n\n/**\n * The cartLine product interface.\n */\nexport interface ICartLineWithProduct {\n cartLine: CartLine;\n product?: SimpleProduct;\n}\n\n/**\n * The checkout shipping cartLine interface.\n */\nexport interface ICheckoutShippingCartLineInfo {\n lineId?: string;\n imageProps: IImageProps;\n deliveryMethodDesc?: string;\n requestDeliveryDate?: string;\n}\n\n/**\n * The checkout shipping cartLine props.\n */\nexport interface ICheckoutShippingCartLinesProps {\n moduleClassName: string;\n cartLines: ICheckoutShippingCartLineInfo[];\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention -- Following as per module\nexport const CheckoutShippingCartLines: React.FC = ({ moduleClassName, cartLines }) => {\n if (!ArrayExtensions.hasElements(cartLines)) {\n return null;\n }\n\n return (\n \n
\n {cartLines.map((cartLine: ICheckoutShippingCartLineInfo) => {\n const className = `${moduleClassName}__group-images-lines-product`;\n return (\n
\n
\n
{cartLine.deliveryMethodDesc}
\n
\n
{cartLine.requestDeliveryDate}
\n
\n );\n })}\n
\n
\n {this.groupDeliveryOptions.map((groupDeliveryOption: DeliveryOptionsCartLineAddress, index) => {\n const cartLineId = groupDeliveryOption.cartLineIds !== undefined ? groupDeliveryOption.cartLineIds[0] : '';\n const cartLine1 = shippingCartLines.find(cartLine => cartLineId === cartLine?.LineId?.toString() ?? '');\n const cartLine = shippingCartLines.filter(\n cartLine => groupDeliveryOption && (cartLineId === cartLine?.LineId?.toString() ?? '')\n );\n if (groupDeliveryOption !== undefined) {\n const selectedDeliveryOption = this.cartLineSelectedDeliveryOptions.find(\n cartLineSelectedDeliveryOption => cartLineSelectedDeliveryOption.cartLineId === cartLine[0].LineId\n )?.selectedDeliveryOption;\n return (\n
\n
\n
\n
\n \n {resources.cartLineGroupDeliveryOptionsLabel}\n \n \n {resources.cartLineGroupDeliveryOptionsText}\n \n {requestDeliveryDateEnabled ? (\n \n ) : null}\n \n
\n {groupDeliveryOption.cartLineIds?.map(cartLineId => {\n const cartLine1 = shippingCartLines.find(\n cartLine => cartLineId === cartLine?.LineId?.toString() ?? ''\n );\n const selectedDeliveryOption1 = this.cartLineSelectedDeliveryOptions.find(\n cartLineSelectedDeliveryOption =>\n cartLineSelectedDeliveryOption.cartLineId === cartLine1?.LineId\n )?.selectedDeliveryOption;\n return (\n
\n );\n })}\n
\n
\n );\n } else {\n return null;\n }\n })}\n
\n {heading}\n
\n {lines && (\n <>\n {lines.subtotal}\n {lines.shipping}\n {lines.otherCharge}\n {lines.tax}\n {lines.totalDiscounts}\n {lines.loyalty}\n {lines.customerAccount}\n {lines.giftCard}\n {lines.orderTotal}\n \n )}\n
\n
\n {heading}\n
\n {lines && (\n <>\n {lines.invoices}\n {lines.giftCard}\n {lines.loyalty}\n {lines.orderTotal}\n \n )}\n
\n
{this.props.resources.loyaltyCoveredAmountText}
\n \n \n );\n }\n\n private _renderPointSection(\n point: LoyaltyRewardPoint,\n loyaltyCoveredAmountText: string,\n expiringLoyaltyPointsLabel: string\n ): ICheckoutLoyaltyRewardPoint {\n return {\n key: point.RewardPointId || '',\n checkoutLoyaltyRewardPoint: {\n className: `${this.moduleClassName}__program`\n },\n title: ,\n availablePointsText: ,\n activePoints: (\n \n ),\n expiringPointsText: ,\n expiringPoints: (\n \n )\n };\n }\n\n private readonly init = async (): Promise => {\n this.props.moduleState.init({\n onEdit: this.onEdit,\n onCancel: this.onCancel,\n onSubmit: this.onSubmit,\n isRequired: false,\n ...(!this.isEnabled() && { status: 'disabled' })\n });\n\n const savedLoyaltyAmount = this.props.data.checkout.result?.loyaltyAmount;\n if (savedLoyaltyAmount) {\n this.props.moduleState.onReady();\n } else if (this.props.data.checkout.result?.isPaymentVerificationRedirection) {\n this.props.moduleState.onSkip();\n } else if (\n this.props.data.loyaltyCard.result &&\n this.props.data.checkout.result &&\n this.props.data.loyaltyCard.result.CardNumber !== this.props.data.checkout.result.checkoutCart.cart.LoyaltyCardId\n ) {\n this.props.data.checkout.result.checkoutCart\n .updateLoyaltyCardId({ loyaltyCardNumber: this.props.data.loyaltyCard.result.CardNumber })\n .catch(error => {\n if (this.context.telemetry) {\n this.context.telemetry.warning(error);\n this.context.telemetry.debug('Unable to update the loyalty card');\n }\n });\n }\n };\n\n private readonly onEdit = () => {\n this.props.telemetry.information('Payment section loyalty onEdit is called.');\n\n this.props.moduleState.onUpdating();\n };\n\n private readonly onCancel = () => {\n this.props.telemetry.information('Payment section loyalty onCancel is called.');\n\n this.handleCancelOrSubmit();\n };\n\n private readonly onSubmit = () => {\n this.props.telemetry.information('Payment section loyalty onSubmit is called.');\n\n this.handleCancelOrSubmit();\n };\n\n private readonly handleCancelOrSubmit = () => {\n const checkoutState = this.props.data.checkout.result;\n if (checkoutState && checkoutState.loyaltyAmount > 0) {\n // Show summary screen\n this.props.moduleState.onReady();\n } else {\n // Skip the module\n this.props.moduleState.onSkip();\n }\n };\n\n private readonly isEnabled = () => {\n return (\n this.props.context.request.user.isAuthenticated &&\n this.props.data.loyaltyCard.result &&\n this.props.data.loyaltyCard.result.CardNumber &&\n this.shouldPayLoyalty\n );\n };\n\n private async _applyLoyaltyPoints(): Promise {\n this.props.telemetry.information('Payment section loyalty apply button onClick is called.');\n\n const checkoutState = this.props.data.checkout.result;\n\n if (!checkoutState) {\n return;\n }\n\n this._clearError();\n await checkoutState.updateLoyaltyAmount({ newAmount: Number.parseFloat(this.state.dollarsApplied.toString()) });\n this.setState({\n isFetchingLoyaltyCard: true\n });\n }\n\n private async _removeLoyaltyPoints(): Promise {\n this.props.telemetry.information('Payment section loyalty remove button onClick is called.');\n\n const checkoutState = this.props.data.checkout.result;\n\n if (!checkoutState) {\n return;\n }\n\n this._clearError();\n await checkoutState.updateLoyaltyAmount({ newAmount: 0 });\n this.setState({\n dollarsApplied: 0\n });\n }\n\n private _onInputChange(event: React.ChangeEvent): void {\n const value = event.currentTarget.value;\n this.setState({ dollarsApplied: value.length > 0 ? Number(value) : Number.parseFloat(value), isFetchingLoyaltyCard: false });\n }\n\n private _onBlur(event: React.FocusEvent): void {\n const num = Number.parseFloat(event.currentTarget.value).toFixed(2);\n const element = document.getElementById(`${this.props.id}-label`) as HTMLInputElement;\n if (element && num) {\n element.value = num;\n this.setState({ dollarsApplied: Number.parseFloat(num) });\n }\n }\n\n private _updateLoyalty(): void {\n if (this.props.moduleState.isDisabled && this.isEnabled()) {\n this._updateEstimate();\n this.props.moduleState.onUpdating();\n }\n }\n\n private _updateEstimate(): void {\n const card = this.props.data.loyaltyCard.result;\n const checkout = this.props.data.checkout.result;\n const cart = this.props.data.checkout.result ? this.props.data.checkout.result.checkoutCart.cart : undefined;\n const channelConfig = this.props.context.request.channel;\n if (card && card.CardNumber && cart && channelConfig) {\n const currencyCode = channelConfig.Currency || '';\n const loyalPointsRequest = createGetMaxLoyaltyPointsToRedeemForTransactionBalanceInput(cart.Id, card.CardNumber, currencyCode);\n\n // @ts-expect-error\n // Due to bug 23214358, this is getting improperly cached. Need to turn on cache bypass for now to work around issue\n loyalPointsRequest._query.options.bypassCache = 'get';\n\n callActionOrExecute(loyalPointsRequest, this.props.context.actionContext)\n .then(async points => {\n this.props.context.actionContext.update(\n new GetLoyaltyTransactionEstimationInput(this.props.context.request.apiSettings),\n points\n );\n const newMaxPoints = points.MaxCurrencyValueOfLoyaltyPoints ?? this._defaultLoyaltyPoints;\n\n // If points are already applied, ensure you don't apply more points than max\n if (checkout && checkout.loyaltyAmount > newMaxPoints) {\n await checkout.updateLoyaltyAmount({ newAmount: newMaxPoints });\n }\n\n this.setState({ dollarsApplied: newMaxPoints, isFetchingLoyaltyCard: false });\n })\n .catch(error => {\n this.props.context.actionContext.telemetry.exception(error);\n this.props.context.actionContext.telemetry.debug('Error getting Loyalty Point Redemption Estimate');\n });\n }\n }\n\n @action\n private readonly _setErrorMessage = (errorMessage: string): void => {\n this.props.telemetry.error(errorMessage);\n this.props.moduleState.setHasError(true);\n this.props.moduleState.onUpdating();\n this.setState({\n errorMessage\n });\n };\n\n private readonly _clearError = (): void => {\n this.props.moduleState.setHasError(false);\n this.setState({\n errorMessage: ''\n });\n };\n}\n\nexport default CheckoutLoyalty;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Alert, Button, INodeProps, NodeTag } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { showAdditionalFields } from '../gift-card-balance-check.props.autogenerated';\n\nexport interface IGetFormInput {\n errorMessage: string;\n giftCardNumber: string;\n giftCardPin: string;\n giftCardExp: string;\n inputRef?: React.RefObject;\n inputPinRef?: React.RefObject;\n inputExpRef?: React.RefObject;\n supportExternalGiftCard?: boolean;\n additionalFields?: showAdditionalFields;\n resources: {\n balanceCheckButton: string;\n giftCardFormLabel: string;\n giftCardNumberLabel: string;\n giftCardPinLabel: string;\n giftCardExpLabel: string;\n giftCardAlertLabel: string;\n giftCardPinPlaceholderText: string;\n giftCardExpPlaceholderText: string;\n };\n onEnterGiftCardNumber(giftCardNumber: string): void;\n onEnterGiftCardPin(giftCardPin: string): void;\n onEnterGiftCardExp(giftCardExp: string): void;\n onApplyGiftCard(): Promise;\n}\n\nexport interface IForm {\n formProps: INodeProps;\n label: React.ReactNode;\n inputPinLabel: React.ReactNode;\n inputExpLabel: React.ReactNode;\n alert: React.ReactNode;\n inputProps: INodeProps;\n inputNumProps: INodeProps;\n inputPinProps: INodeProps;\n inputExpProps: INodeProps;\n inputNumber: React.ReactNode;\n inputPin: React.ReactNode;\n inputExp: React.ReactNode;\n applyButton: React.ReactNode;\n supportExternalGiftCard: boolean | undefined;\n showGiftCardPinInput: boolean | undefined;\n showGiftCardExpInput: boolean | undefined;\n alertFieldLabel: React.ReactNode;\n}\n\n/**\n * On apply function.\n * @param onApplyGiftCard -On apply gift card.\n * @returns Apply gift card.\n */\nconst onApplyHandler = (onApplyGiftCard: () => Promise) => async (event: React.SyntheticEvent): Promise => {\n event.preventDefault();\n await onApplyGiftCard();\n};\n\n/**\n * On change number function.\n * @param onEnterGiftCardNumber -On enter gift card number.\n * @returns On gift card enter pin function result.\n */\nconst onChangeNumberHandler = (onEnterGiftCardNumber: (giftCardNumber: string) => void) => (event: React.ChangeEvent) => {\n const value = (event.target.value || '').replace(new RegExp('[<>]', 'gi'), '');\n onEnterGiftCardNumber(value);\n};\n\n/**\n * On change pin function.\n * @param onEnterGiftCardPin -On enter gift card pin.\n * @returns On enter gift card pin function result.\n */\nconst onChangePinHandler = (onEnterGiftCardPin: (giftCardPin: string) => void) => (event: React.ChangeEvent) => {\n const value = (event.target.value || '').replace(new RegExp('[<>]', 'gi'), '');\n onEnterGiftCardPin(value);\n};\n\n/**\n * On change exp function.\n * @param onEnterGiftCardExp -On enter gift card.\n * @returns On enter gift card function result.\n */\nconst onChangeExpHandler = (onEnterGiftCardExp: (giftCardExp: string) => void) => (event: React.ChangeEvent) => {\n const value = (event.target.value || '').replace(new RegExp('[<>]', 'gi'), '');\n onEnterGiftCardExp(value);\n};\n\nexport const getForm = (options: IGetFormInput): IForm => {\n const {\n errorMessage,\n inputRef,\n inputPinRef,\n inputExpRef,\n giftCardNumber,\n giftCardPin,\n giftCardExp,\n onEnterGiftCardNumber,\n onEnterGiftCardPin,\n onEnterGiftCardExp,\n onApplyGiftCard,\n supportExternalGiftCard,\n additionalFields,\n resources: {\n balanceCheckButton,\n giftCardFormLabel,\n giftCardNumberLabel,\n giftCardPinLabel,\n giftCardExpLabel,\n giftCardAlertLabel,\n giftCardPinPlaceholderText,\n giftCardExpPlaceholderText\n }\n } = options;\n\n const formProps = {\n className: classnames('ms-gift-card-balance-check__form', { 'is-invalid': !!errorMessage }),\n onSubmit: onApplyHandler(onApplyGiftCard),\n tag: 'form' as NodeTag\n };\n\n const label = (\n \n );\n\n const inputPinLabel = (\n \n );\n\n const inputExpLabel = (\n \n );\n\n const alertFieldLabel = (\n \n );\n\n const alert = (\n \n {errorMessage}\n \n );\n\n const inputProps = {\n className: 'ms-gift-card-balance-check__input-fields'\n };\n\n const inputNumProps = {\n className: 'ms-gift-card-balance-check__input-num-fields'\n };\n\n const inputPinProps = {\n className: 'ms-gift-card-balance-check__input-pin-fields'\n };\n\n const inputExpProps = {\n className: 'ms-gift-card-balance-check__input-exp-fields'\n };\n\n const inputNumber = (\n \n );\n\n const inputPin = (\n \n );\n\n const inputExp = (\n \n );\n\n const applyButton = (\n \n {balanceCheckButton}\n \n );\n\n let showGiftCardPinInput = false;\n let showGiftCardExpInput = false;\n\n switch (additionalFields) {\n case showAdditionalFields.pin:\n showGiftCardPinInput = true;\n break;\n case showAdditionalFields.expirationDate:\n showGiftCardExpInput = true;\n break;\n case showAdditionalFields.pinAndExpirationDate:\n showGiftCardPinInput = true;\n showGiftCardExpInput = true;\n break;\n default:\n }\n\n return {\n formProps,\n label,\n inputPinLabel,\n inputExpLabel,\n alert,\n inputProps,\n inputNumProps,\n inputPinProps,\n inputExpProps,\n inputNumber,\n inputPin,\n inputExp,\n applyButton,\n supportExternalGiftCard,\n showGiftCardPinInput,\n showGiftCardExpInput,\n alertFieldLabel\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { GiftCard } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface IGetItemInput {\n giftCard: GiftCard;\n resources: {\n enteredGiftCardLabel: string;\n giftCardAvailableBalanceLabel: string;\n };\n getFormattedPrice(price?: number, currencyCode?: string): string;\n}\n\nexport interface IItem {\n itemProps: INodeProps;\n id?: string;\n selectedGiftCard: React.ReactNode;\n removeButton?: React.ReactNode;\n}\n\n/**\n * GiftCardItem component.\n * @param root0\n * @param root0.giftCard\n * @param root0.getFormattedPrice\n * @param root0.resources\n * @param root0.resources.enteredGiftCardLabel\n * @param root0.resources.giftCardAvailableBalanceLabel\n * @extends {React.PureComponent}\n */\nexport const getItem = ({\n giftCard,\n getFormattedPrice,\n resources: { enteredGiftCardLabel, giftCardAvailableBalanceLabel }\n}: IGetItemInput): IItem => {\n const balance = getFormattedPrice(giftCard.Balance, giftCard.CardCurrencyCode);\n const giftCardLast4Digit = (giftCard.Id || '').substr(-4);\n\n const itemProps = {\n className: 'ms-gift-card-balance-check__item'\n };\n\n const selectedGiftCard = (\n \n {enteredGiftCardLabel}\n {` `}\n {giftCardLast4Digit}\n {` `}({giftCardAvailableBalanceLabel}\n {` `}\n {balance})\n \n );\n\n return {\n itemProps,\n id: giftCard && giftCard.Id,\n selectedGiftCard\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n getGiftCardAsync,\n getTenderTypesAsync,\n resolveCardTypesAsync\n} from '@msdyn365-commerce/retail-proxy/dist/DataActions/StoreOperationsDataActions.g';\nimport {\n CardType,\n CardTypeInfo,\n GiftCard,\n RetailOperation,\n TenderType\n} from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { IModuleProps } from '@msdyn365-commerce-modules/utilities';\nimport classname from 'classnames';\nimport * as React from 'react';\n\nimport { OPERATIONS } from '../checkout';\nimport { getForm, IForm } from './components/get-form';\nimport { getItem, IItem } from './components/get-item';\nimport { IGiftCardBalanceCheckProps } from './gift-card-balance-check.props.autogenerated';\n\ninterface IGiftCardBalanceCheckState {\n isFetchingGiftCard: boolean;\n errorMessage: string;\n giftCardNumber: string;\n giftCardPin: string;\n giftCardExp: string;\n giftCard?: GiftCard;\n}\n\nenum SupportedGiftCardType {\n Internal = 'internal',\n External = 'external',\n Both = 'both'\n}\n\nexport interface IGiftCardBalanceCheckModuleProps extends IGiftCardBalanceCheckProps<{}> {}\n\nexport interface IGiftCardBalanceCheckViewProps extends IGiftCardBalanceCheckProps<{}>, IGiftCardBalanceCheckState {\n className?: string;\n\n form: IForm;\n item?: IItem;\n\n giftCardBalanceCheckProps: IModuleProps;\n\n enterGiftCardNumber?(giftCardNumber: string): void;\n enterGiftCardPin?(giftCardPin: string): void;\n enterGiftCardExp?(giftCardExp: string): void;\n applyGiftCard?(): void;\n}\n\n/**\n *\n * GiftCardBalanceCheck component.\n * @extends {React.Component}\n */\nexport class GiftCardBalanceCheck extends React.Component {\n public state: IGiftCardBalanceCheckState = {\n isFetchingGiftCard: false,\n errorMessage: '',\n giftCardNumber: '',\n giftCardPin: '',\n giftCardExp: ''\n };\n\n private readonly inputRef: React.RefObject = React.createRef();\n\n private readonly inputPinRef: React.RefObject = React.createRef();\n\n private readonly inputExpRef: React.RefObject = React.createRef();\n\n public shouldComponentUpdate(nextProps: IGiftCardBalanceCheckModuleProps, nextState: IGiftCardBalanceCheckState): boolean {\n if (this.state === nextState && this.props.data === nextProps.data) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | null {\n const {\n config: { className, showAdditionalFields },\n resources\n } = this.props;\n const { errorMessage, giftCardNumber, giftCardPin, giftCardExp } = this.state;\n\n const supportedGiftCardType = this.props.context.app.config.giftCardSupported;\n\n if (!this._isEnabled()) {\n this.props.context.telemetry.error('Gift card balance check is not supported, module wont render');\n return null;\n }\n\n const supportExternalGiftCard = supportedGiftCardType !== SupportedGiftCardType.Internal;\n\n const moduleClassName = classname('ms-gift-card-balance-check', className);\n\n const viewProps: IGiftCardBalanceCheckViewProps = {\n ...this.props,\n ...this.state,\n className: moduleClassName,\n giftCardBalanceCheckProps: { moduleProps: this.props, className: moduleClassName },\n\n enterGiftCardNumber: this._enterGiftCardNumber,\n enterGiftCardPin: this._enterGiftCardPin,\n enterGiftCardExp: this._enterGiftCardExp,\n applyGiftCard: this._applyGiftCard,\n\n form: getForm({\n errorMessage,\n giftCardNumber,\n giftCardPin,\n giftCardExp,\n inputRef: this.inputRef,\n inputPinRef: this.inputPinRef,\n inputExpRef: this.inputExpRef,\n resources,\n supportExternalGiftCard,\n additionalFields: showAdditionalFields,\n onEnterGiftCardNumber: this._enterGiftCardNumber,\n onEnterGiftCardPin: this._enterGiftCardPin,\n onEnterGiftCardExp: this._enterGiftCardExp,\n onApplyGiftCard: this._applyGiftCard\n }),\n item:\n this.state.giftCard &&\n getItem({\n giftCard: this.state.giftCard,\n getFormattedPrice: this._getFormattedPrice,\n resources\n })\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n private readonly _isEnabled = (): boolean => {\n if (\n !this.props.context.request.user.isAuthenticated &&\n this.props.context.app.config.giftCardSupported !== SupportedGiftCardType.External &&\n !this.props.config.shouldBeEnabledForGuest\n ) {\n return false;\n }\n return true;\n };\n\n private readonly _getFormattedPrice = (price: number = 0, currencyCode: string = 'USD'): string => {\n return this.props.context.cultureFormatter.formatCurrency(price, currencyCode);\n };\n\n private readonly _enterGiftCardNumber = (giftCardNumber: string): void => {\n this.setState({\n giftCardNumber\n });\n this._clearError();\n };\n\n private readonly _enterGiftCardPin = (giftCardPin: string): void => {\n this.setState({\n giftCardPin\n });\n this._clearError();\n };\n\n private readonly _enterGiftCardExp = (giftCardExp: string): void => {\n this.setState({\n giftCardExp\n });\n this._clearError();\n };\n\n private readonly _clearError = (): void => {\n this.setState({\n errorMessage: ''\n });\n };\n\n private readonly _setError = (errorMessage: string): void => {\n this.props.telemetry.error('Error', errorMessage);\n this.props.telemetry.debug('Error', errorMessage);\n this.setState({\n errorMessage\n });\n };\n\n private readonly _applyGiftCard = async (): Promise => {\n if (this.state.isFetchingGiftCard) {\n return;\n }\n this.setState({\n isFetchingGiftCard: true\n });\n\n const giftCardNumber = this.state.giftCardNumber.trim();\n const giftCardPin = this.state.giftCardPin.trim();\n const giftCardExp = this.state.giftCardExp.trim();\n\n const giftCardTypes = await this._getGiftCardTypes(giftCardNumber);\n const giftCardType = giftCardTypes && giftCardTypes[0];\n const isPinRequired = giftCardType && giftCardType.IsPinRequired;\n const isExpRequired = giftCardType && giftCardType.IsExpirationDateRequired;\n const tenderTypeId = giftCardType && giftCardType.PaymentMethodId;\n const giftCard = await this._getGiftCard(giftCardNumber, giftCardPin, giftCardExp, isPinRequired, isExpRequired, tenderTypeId);\n\n if (giftCard) {\n this._clearError();\n this.setState({\n giftCardNumber: '',\n giftCardPin: '',\n giftCardExp: '',\n isFetchingGiftCard: false,\n giftCard\n });\n return Promise.resolve();\n }\n const input = this.inputRef && this.inputRef.current && this.inputRef.current.focus && (this.inputRef.current as HTMLElement);\n input && input.focus();\n this.setState({\n isFetchingGiftCard: false,\n giftCard: undefined\n });\n };\n\n private readonly _findGiftcardTenderTypes = (\n tenderTypes: TenderType[],\n operationId: RetailOperation,\n giftcardType: string\n ): string[] | undefined => {\n let matchedTenderTypes: TenderType[] | undefined;\n\n switch (giftcardType) {\n case SupportedGiftCardType.Internal:\n matchedTenderTypes = tenderTypes.filter(\n tenderType => tenderType.OperationId === operationId && tenderType.ConnectorId === ''\n );\n break;\n case SupportedGiftCardType.External:\n matchedTenderTypes = tenderTypes.filter(\n tenderType => tenderType.OperationId === operationId && tenderType.ConnectorId !== ''\n );\n break;\n default:\n throw new Error('Invalid gift card type');\n }\n\n if (matchedTenderTypes) {\n return matchedTenderTypes.map(tenderType => tenderType.TenderTypeId || '');\n }\n return;\n };\n\n private readonly _getGiftCard = async (\n giftCardNumber: string,\n giftCardPin: string,\n giftCardExp: string,\n isPinRequired: boolean | undefined,\n isExpRequired: boolean | undefined,\n tenderTypeId: string | undefined\n ): Promise => {\n const {\n resources: { invalidCardTypeError, noBalanceError, invalidCardInfoError, noCardPinError, noCardExpError }\n } = this.props;\n\n const supportedGiftCardType = this.props.context.app.config.giftCardSupported;\n\n if (!tenderTypeId) {\n return undefined;\n }\n\n const tenderTypes = await getTenderTypesAsync({ callerContext: this.props.context.actionContext, queryResultSettings: {} }).catch(\n error => {\n throw error;\n }\n );\n\n if (!tenderTypes) {\n throw new Error('Fail to get gift card tender line');\n }\n\n const internalGiftcardTenderTypes = this._findGiftcardTenderTypes(\n tenderTypes,\n OPERATIONS.PayGiftCertificate,\n SupportedGiftCardType.Internal\n );\n const externalGiftcardTenderTypes = this._findGiftcardTenderTypes(\n tenderTypes,\n OPERATIONS.PayGiftCertificate,\n SupportedGiftCardType.External\n );\n\n switch (supportedGiftCardType) {\n case undefined:\n case SupportedGiftCardType.Internal:\n if (!internalGiftcardTenderTypes?.includes(tenderTypeId)) {\n this._setError(invalidCardTypeError);\n return undefined;\n }\n break;\n case SupportedGiftCardType.External:\n if (!externalGiftcardTenderTypes?.includes(tenderTypeId)) {\n this._setError(invalidCardTypeError);\n return undefined;\n }\n break;\n case SupportedGiftCardType.Both:\n if (!internalGiftcardTenderTypes?.includes(tenderTypeId) && !externalGiftcardTenderTypes?.includes(tenderTypeId)) {\n this._setError(invalidCardTypeError);\n return undefined;\n }\n break;\n default:\n throw new Error('Unsupported gift card type');\n }\n\n if (!this.props.context.request.user.isAuthenticated && internalGiftcardTenderTypes?.includes(tenderTypeId)) {\n this._setError(invalidCardTypeError);\n return undefined;\n }\n\n if (isPinRequired && giftCardPin === '') {\n this._setError(noCardPinError);\n return undefined;\n }\n\n if (isExpRequired && giftCardExp === '') {\n this._setError(noCardExpError);\n return undefined;\n }\n\n const month = Number.parseInt(giftCardExp.split('/')[0], 10);\n const year = Number.parseInt(giftCardExp.split('/')[1], 10);\n\n return getGiftCardAsync({ callerContext: this.props.context.actionContext }, giftCardNumber, tenderTypeId, giftCardPin, month, year)\n .then(activeGiftCard => {\n if (!activeGiftCard.Balance || activeGiftCard.Balance === 0) {\n this._setError(noBalanceError);\n return;\n }\n return activeGiftCard;\n })\n .catch(error => {\n this._setError(invalidCardInfoError);\n return undefined;\n });\n };\n\n private readonly _getGiftCardTypes = async (giftCardNumber: string): Promise => {\n const {\n resources: { emptyInputError, invalidCodeError }\n } = this.props;\n\n if (!giftCardNumber) {\n this._setError(emptyInputError);\n return undefined;\n }\n\n return resolveCardTypesAsync({ callerContext: this.props.context.actionContext }, giftCardNumber, CardType.GiftCard)\n .then(giftCardTypes => {\n if (!giftCardTypes || giftCardTypes.length === 0 || giftCardTypes[0] === undefined) {\n this._setError(invalidCodeError);\n return;\n }\n return giftCardTypes;\n })\n .catch(error => {\n this._setError(invalidCodeError);\n return undefined;\n });\n };\n}\n\nexport default GiftCardBalanceCheck;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { AddToCartComponent, IAddToCartFailureResult, IAddToCartResources, OrderDetailsProduct } from '@msdyn365-commerce/components';\nimport { getUrlSync, IComponentProps, ICoreContext } from '@msdyn365-commerce/core';\nimport { SalesLine } from '@msdyn365-commerce/retail-proxy';\nimport { QuickOrderTemplate } from '@msdyn365-commerce-modules/retail-actions';\nimport React from 'react';\n\n/**\n * The data on which the component should operate.\n */\nexport interface IAddToCartSelectedData {\n quickOrderTemplate: QuickOrderTemplate | undefined;\n}\n\n/**\n * The resources needed to render a buy selected component.\n */\nexport interface IAddToCartSelectedResources {\n quickOrderGridBuySelectedButtonText?: string;\n quickOrderGridBuySelectedButtonAriaLabel?: string;\n quickOrderGridBuySelectedAddingToCartErrorNotificationTitle?: string;\n quickOrderGridBuySelectedAddingToCartErrorNotificationCloseAriaLabel?: string;\n quickOrderGridGoToCartText?: string;\n quickOrderGridDialogCloseText?: string;\n quickOrderGridSingleItemText?: string;\n quickOrderGridMultiLineItemFormatText?: string;\n quickOrderGridMultiLinesFormatText?: string;\n quickOrderGridHeaderMessageText?: string;\n addedQuantityText?: string;\n originalPriceText?: string;\n currentPriceText?: string;\n freePriceText?: string;\n}\n\n/**\n * Configuration of a buy selected component.\n */\nexport interface IAddToCartSelectedProps extends IComponentProps {\n className: string;\n context: ICoreContext;\n\n resources: IAddToCartSelectedResources;\n\n isIcon?: boolean;\n onError?(result: IAddToCartFailureResult): void;\n}\n\n/**\n * Get the dialog strings.\n * @param props - The buy selected props.\n * @returns The add to cart resources.\n */\nexport const getDialogStrings = (props: IAddToCartSelectedProps): IAddToCartResources => {\n return {\n goToCartText: props.resources.quickOrderGridGoToCartText ?? '',\n continueShoppingText: props.resources.quickOrderGridDialogCloseText ?? '',\n closeNotificationLabel: props.resources.quickOrderGridBuySelectedAddingToCartErrorNotificationCloseAriaLabel ?? '',\n headerItemOneText: props.resources.quickOrderGridSingleItemText ?? '',\n headerItemFormatText: props.resources.quickOrderGridMultiLineItemFormatText ?? '',\n headerLinesFormatText: props.resources.quickOrderGridMultiLinesFormatText ?? '',\n headerMessageText: props.resources.quickOrderGridHeaderMessageText ?? '',\n freePriceText: props.resources.freePriceText ?? '',\n originalPriceText: props.resources.originalPriceText ?? '',\n currentPriceText: props.resources.currentPriceText ?? '',\n addedQuantityText: props.resources.addedQuantityText ?? '',\n buyAgainNotificationTitle: props.resources.quickOrderGridBuySelectedAddingToCartErrorNotificationTitle ?? '',\n buyAgainNotificationCloseAriaLabel: props.resources.quickOrderGridBuySelectedAddingToCartErrorNotificationCloseAriaLabel ?? ''\n };\n};\n\n/**\n * Get the dialog strings.\n * @param quickOrder - The buy selected props.\n * @returns The add to cart resources.\n */\nexport const getOrderDetails = (quickOrder: QuickOrderTemplate): OrderDetailsProduct[] => {\n const orderDetails: OrderDetailsProduct[] = [];\n for (const quickLine of quickOrder.quickOrderTemplateLines) {\n const quantity = quickLine.productListLine.Quantity;\n const salesLine: SalesLine = {\n Quantity: quantity\n };\n const products = new OrderDetailsProduct(salesLine, quickLine.fullProduct?.ProductDetails);\n orderDetails.push(products);\n }\n return orderDetails;\n};\n\n/**\n * Renders a button which adds given products to the cart.\n * @param props - Configuration of the component.\n * @returns A react element or null if no products were given.\n */\nexport const AddToCartProductListComponent: React.FC = (props: IAddToCartSelectedProps): JSX.Element | null => {\n const {\n data: { quickOrderTemplate }\n } = props;\n\n if (quickOrderTemplate?.quickOrderTemplateLines[0].fullProduct?.ProductDetails === undefined) {\n return null;\n }\n const quantity = quickOrderTemplate.quickOrderTemplateLines[0].productListLine.Quantity;\n const buttonLabel = props.resources.quickOrderGridBuySelectedButtonText;\n const buttonAriaLabel = props.resources.quickOrderGridBuySelectedButtonAriaLabel;\n const dialogStrings: IAddToCartResources = getDialogStrings(props);\n const shouldSkipSiteSettings: boolean = true;\n const orderDetailProducts = getOrderDetails(quickOrderTemplate);\n return (\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IComponentProps, ICoreContext } from '@msdyn365-commerce/core';\nimport { QuickOrderTemplate } from '@msdyn365-commerce-modules/retail-actions';\nimport { Alert, Button, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { AddToCartProductListComponent } from './add-to-list';\nimport { IQuickOrderGridActionsViewProps, IQuickOrderGridState } from './utilities';\n\n/**\n * Interface for quick order grid action data.\n */\nexport interface IQuickOrderGridActionsData {\n quickOrderTemplate: QuickOrderTemplate | undefined;\n}\n\n/**\n * Interface for quick order grid action props.\n */\nexport interface IQuickOrderGridActionsProps extends IComponentProps {\n context: ICoreContext;\n telemetryContent?: ITelemetryContent;\n moduleClassName: string;\n typeName: string;\n handlers: {\n removeProductList(productListId: string): void;\n onErrorMessage(message: string): void;\n };\n quickOrderGridState: IQuickOrderGridState;\n resources: {\n quickOrderGridDeleteButtonText: string;\n quickOrderGridBuySelectedButtonText?: string;\n quickOrderGridBuySelectedButtonAriaLabel?: string;\n quickOrderGridBuySelectedAddingToCartErrorNotificationTitle?: string;\n quickOrderGridBuySelectedAddingToCartErrorNotificationCloseAriaLabel?: string;\n quickOrderGridGoToCartText?: string;\n quickOrderGridDialogCloseText?: string;\n quickOrderGridSingleItemText?: string;\n quickOrderGridMultiLineItemFormatText?: string;\n quickOrderGridMultiLinesFormatText?: string;\n quickOrderGridHeaderMessageText?: string;\n addedQuantityText?: string;\n originalPriceText?: string;\n currentPriceText?: string;\n freePriceText?: string;\n };\n}\n\n/**\n * Remove ProductList Action.\n * @param props -Quick order grid action props.\n */\nconst removeQuickOrderList = (props: IQuickOrderGridActionsProps): void => {\n const {\n data: { quickOrderTemplate },\n handlers\n } = props;\n const { removeProductList } = handlers;\n // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- Need to check data.\n if (quickOrderTemplate && quickOrderTemplate.productList.Id) {\n removeProductList(quickOrderTemplate.productList.Id);\n }\n};\n\n/**\n * Get Addtobag Button.\n * @param props -Order template action props.\n * @returns QuickOrderGrid actions view props.\n */\nconst getQuickOrderGridAddToCartDialog = (props: IQuickOrderGridActionsProps): React.ReactNode => {\n const {\n data: { quickOrderTemplate },\n context,\n moduleClassName,\n resources,\n typeName\n } = props;\n const buttonId = 'quick-order-grid';\n return (\n {\n if (result.cartActionResult?.errorDetails?.LocalizedMessage) {\n props.handlers.onErrorMessage(result.cartActionResult.errorDetails.LocalizedMessage);\n }\n }}\n />\n );\n};\n\n/**\n * Remove Quick order grid action.\n * @param props -Quick order grid action props.\n * @returns Remove order template.\n */\nconst removeActionHandler = (props: IQuickOrderGridActionsProps) => () => {\n removeQuickOrderList(props);\n};\n\n/**\n * Quick order grid action view.\n * @param props -Quick Order Grid template action props.\n * @returns QuickOrderGrid actions view props.\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention -- Name needs to be this.\nexport const QuickOrderGridActionsView = (props: IQuickOrderGridActionsProps): IQuickOrderGridActionsViewProps => {\n const { moduleClassName, quickOrderGridState, resources } = props;\n const { quickOrderGridDeleteButtonText } = resources;\n\n const userMessageNode = quickOrderGridState.topStateMessage ? (\n \n \n {quickOrderGridState.topStateMessage.messageText}\n \n ) : (\n undefined\n );\n\n return {\n addProductListToBag: getQuickOrderGridAddToCartDialog(props),\n removeProductList: (\n \n ),\n userMessage: userMessageNode\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Button, Collapse, ICollapseProps } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { IQuickOrderGridDrawerProps } from './quick-order-grid-drawer-props';\n\n/**\n * Interface for drawer state.\n */\nexport interface IQuickOrderGridDrawerState {\n isOpen: boolean;\n}\n\n/**\n * Placement of glyph.\n */\nexport type GlyphPlacement = 'start' | 'end';\n\n/**\n * Quick Order Grid Drawer - This is a full width uncontrolled collapse where the button glyph changes\n * when the drawer is open and closed.\n */\nexport class QuickOrderGridDrawer extends React.Component {\n private readonly _drawerOpenGlyph: string;\n\n private readonly _drawerCloseGlyph: string;\n\n private readonly _drawerGlyphClass: string;\n\n private _isManuallyToggled: boolean;\n\n public constructor(props: IQuickOrderGridDrawerProps) {\n super(props);\n this._isManuallyToggled = false;\n this.state = { isOpen: props.collapseProps?.isOpen ?? false };\n this._drawerGlyphClass = classnames('drawer__glyph', this.props.toggleGlyphClassName ? this.props.toggleGlyphClassName : '');\n const closeGlyph = this.props.closeGlyph ? this.props.closeGlyph : '';\n if (this.props.isAnimateGlyph) {\n this._drawerOpenGlyph = classnames(this._drawerGlyphClass, this.props.openGlyph ? this.props.openGlyph : closeGlyph);\n this._drawerCloseGlyph = this._drawerOpenGlyph;\n } else {\n this._drawerOpenGlyph = classnames(this._drawerGlyphClass, this.props.openGlyph ? this.props.openGlyph : '');\n this._drawerCloseGlyph = classnames(this._drawerGlyphClass, closeGlyph);\n }\n }\n\n /**\n * Method to call on click of drawer button.\n * @param event - Product DeliveryOption List.\n */\n public toggle = (event: React.MouseEvent | React.KeyboardEvent): void => {\n event.preventDefault();\n this._isManuallyToggled = true;\n if (this.props.onToggle) {\n this.setState(previousState => ({ isOpen: !previousState.isOpen }));\n this.props.onToggle(this.state);\n } else {\n this.setState(previousState => ({ isOpen: !previousState.isOpen }));\n }\n };\n\n public shouldComponentUpdate(nextProps: IQuickOrderGridDrawerProps, nextState: IQuickOrderGridDrawerState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element {\n const collapseProps: ICollapseProps = { ...this.props.collapseProps };\n\n // If the drawer is manually toggled by pressing the button, then we use the internal state\n if (collapseProps.isOpen === undefined || this._isManuallyToggled) {\n collapseProps.isOpen = this.state.isOpen;\n }\n collapseProps.children = this.props.children;\n const drawerClass = classnames('drawer', this.props.className);\n const drawerButtonClassName = `${this.props.className ? this.props.className : ''}__button`;\n this._isManuallyToggled = false;\n return (\n \n \n {this._generateDrawerButtonInnerMarkup(collapseProps.isOpen, drawerClass)}\n \n \n
\n );\n }\n\n private _generateDrawerButtonInnerMarkup(isCollapseState: boolean, drawerClass: string): JSX.Element {\n const drawerButtonTextClass = classnames(\n 'drawer__buttontext',\n this.props.toggleButtonClassName ? this.props.toggleButtonClassName : ''\n );\n const headingDrawerClass = `${drawerClass}-heading`;\n const descriptionDrawerClass = `${drawerClass}-description`;\n return (\n <>\n {this.props.moduleHeadingText}
\n {this.props.moduleDescriptionText}\n {this._generateGlyphMarkup('drawer__glyph__end', isCollapseState)}\n \n );\n }\n\n private _generateGlyphMarkup(location: string, isCollapseState: boolean): JSX.Element {\n let glyphClass = isCollapseState ? this._drawerOpenGlyph : this._drawerCloseGlyph;\n glyphClass = `${glyphClass} ${location}`;\n return ;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Alert, Button } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IQuickOrderGridState } from './utilities';\n\n/**\n * Interface quick order grid form props.\n */\nexport interface IQuickOrderGridFormProps {\n isAddtoListDisabled: boolean | undefined;\n productTextInput: React.RefObject;\n quantityTextInput: React.RefObject;\n maxChars: number;\n minQuantity?: number;\n maxQuantity?: number;\n moduleClassName: string;\n ariaLabelQuantity: string;\n ariaLabelProduct: string;\n ariaLabelAddtoCart: string;\n quickOrderGridState: IQuickOrderGridState;\n handleInputChange(query: string): void;\n handleQuantityChange(query: string): void;\n handleAddProductListClick(): Promise;\n}\n\n/**\n * Interface quick order grid form view props.\n */\nexport interface IQuickOrderGridFormViewProps {\n product: React.ReactNode;\n quantity: React.ReactNode;\n addToListBtn: React.ReactNode;\n userMessage?: React.ReactNode;\n}\n\n/**\n * On Input Change functionality.\n * @param handleInputChange -Input change function.\n * @returns Input change value.\n */\nconst onInputChangeFunction = (handleInputChange: (query: string) => void) => (event: React.ChangeEvent) => {\n handleInputChange(event.target.value || '');\n};\n\n/**\n * On Quantity Change functionality.\n * @param handleQuantityChange -Quantity change function.\n * @returns Quantity change value.\n */\nconst onQuantityChangeFunction = (handleQuantityChange: (query: string) => void) => (event: React.ChangeEvent) => {\n handleQuantityChange(event.target.value || '');\n};\n\n/**\n * Quick order grid form component.\n * @param props -Component form props.\n * @returns Quick order gridp view props..\n */\nexport const QuickOrderGridFormComponent = (props: IQuickOrderGridFormProps): IQuickOrderGridFormViewProps => {\n const {\n moduleClassName,\n productTextInput,\n quantityTextInput,\n quickOrderGridState,\n maxChars,\n minQuantity,\n maxQuantity,\n isAddtoListDisabled,\n ariaLabelQuantity,\n ariaLabelProduct,\n ariaLabelAddtoCart,\n handleQuantityChange,\n handleInputChange,\n handleAddProductListClick\n } = props;\n\n const onInputChange = onInputChangeFunction(handleInputChange);\n\n const onQuantityInputChange = onQuantityChangeFunction(handleQuantityChange);\n\n const productNode = (\n \n
\n {ariaLabelProduct}\n
\n \n \n );\n\n const quantityNode = (\n \n
\n {ariaLabelQuantity}\n
\n \n \n );\n\n const addToListNode = (\n \n \n {ariaLabelAddtoCart}\n \n
\n );\n\n const userMessageNode = quickOrderGridState.stateMessage ? (\n \n \n {quickOrderGridState.stateMessage.messageText}\n \n ) : (\n undefined\n );\n\n return {\n product: productNode,\n addToListBtn: addToListNode,\n quantity: quantityNode,\n userMessage: userMessageNode\n };\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { QuickOrderTemplateLine } from '@msdyn365-commerce-modules/retail-actions';\nimport { observable } from 'mobx';\n\n/**\n * Represents a product for quick order grid.\n */\nexport class QuickOrderGridProduct {\n @observable\n public isSelected: boolean;\n\n public readonly productLine: QuickOrderTemplateLine;\n\n public constructor(productLine: QuickOrderTemplateLine) {\n this.productLine = productLine;\n this.isSelected = false;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IComponent, IComponentProps, ICoreContext } from '@msdyn365-commerce/core';\nimport classnames from 'classnames';\nimport React from 'react';\n\n/**\n * Interface for quick order grid table header resources.\n */\nexport interface IQuickOrderGridTableHeaderResources {\n quickOrderGridProductNumberText: string;\n quickOrderGridProductText: string;\n quickOrderGridUnitPriceText: string;\n quickOrderGridUnitOfMeasureText: string;\n quickOrderGridQuantityText: string;\n quickOrderGridActionsText: string;\n}\n\n/**\n * Interface for quick order grid table props.\n */\nexport interface IQuickOrderGridTableHeaderProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n\n isMobile: boolean;\n resources: IQuickOrderGridTableHeaderResources;\n}\n\n/**\n * Interface for quick order grid table header component.\n */\nexport interface IQuickOrderGridTableHeaderComponent extends IComponent {}\n\n/**\n * Get the quick order grid header cells for desktop.\n * @param props -- The quick order grid table header props.\n * @returns The list of cells for quick order grid header component in desktop version.\n */\nconst QuickOrderGridDesktopHeaderCellsComponent: React.FC = (props: IQuickOrderGridTableHeaderProps) => {\n const { resources } = props;\n const columnWithNumberClassName = `${props.className}__row__column-with-number`;\n return (\n <>\n \n \n | \n {resources.quickOrderGridProductNumberText} | \n {resources.quickOrderGridProductText} | \n {resources.quickOrderGridUnitPriceText} | \n {resources.quickOrderGridUnitOfMeasureText} | \n {resources.quickOrderGridQuantityText} | \n {resources.quickOrderGridActionsText} | \n \n );\n};\n\n/**\n * Get the quick order grid header cells for mobile.\n * @param props -- The quick order grid table header props.\n * @returns The quick order grid header component in desktop version.\n */\nconst QuickOrderGridMobileHeaderCellsComponent: React.FC = (props: IQuickOrderGridTableHeaderProps) => {\n const { resources } = props;\n return (\n <>\n | \n {resources.quickOrderGridProductNumberText} | \n | \n \n );\n};\n\n/**\n * Quick order table header component.\n * @param props - Configuration of the component.\n * @returns React node with the header.\n */\nexport const QuickOrderGridTableHeaderComponent: React.FC = (props: IQuickOrderGridTableHeaderProps) => {\n const rowClassName = `${props.className}__row`;\n\n let headerCells: JSX.Element;\n if (props.isMobile) {\n headerCells = ;\n } else {\n headerCells = ;\n }\n\n return (\n \n {headerCells}
\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { PriceComponent } from '@msdyn365-commerce/components';\nimport MsDyn365, { IComponentProps, ICoreContext, IImageSettings, Image } from '@msdyn365-commerce/core';\nimport { ProductListLine, ProductPrice } from '@msdyn365-commerce/retail-proxy';\nimport { getFallbackImageUrl, getProductPageUrlSync, ObjectExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, IncrementalQuantity, isMobile, VariantType } from '@msdyn365-commerce-modules/utilities';\nimport React, { useState } from 'react';\n\nimport { QuickOrderGridProduct } from '../../quick-order-grid-product';\nimport { IQuickOrderGridRowCallbacks } from '../../utilities';\n\n/**\n * Data required to render each quick order grid row.\n */\nexport interface IQuickOrderGridTableRowData {\n product: QuickOrderGridProduct;\n}\n\n/**\n * Resources for quick order grid table rows.\n */\nexport interface IQuickOrderGridTableRowResources {\n quickOrderGridQuantityMobileText: string;\n quickOrderGridProductDimensionsSeparator: string;\n quickOrderGridViewDetailsButtonText: string;\n quickOrderGridViewDetailsButtonAriaLabel: string;\n quickOrderGridRemoveItemButtonAriaLabel: string;\n quickOrderGridInputQuantityAriaLabel: string;\n quickOrderGridDecrementButtonAriaLabel: string;\n quickOrderGridIncrementButtonAriaLabel: string;\n originalPriceText: string;\n currentPriceText: string;\n freePriceText: string;\n}\n\n/**\n * Interface for quick order grid table props.\n */\nexport interface IQuickOrderGridTableRowProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n productListLine: ProductListLine;\n price?: ProductPrice;\n moduleId: string;\n moduleTypeName: string;\n min: number;\n max: number;\n quantity: number;\n imageSettings?: IImageSettings;\n isMobile: boolean;\n resources: IQuickOrderGridTableRowResources;\n index: number;\n callbacks: IQuickOrderGridRowCallbacks;\n}\n\n/**\n * The default image settings for quick order grid table row.\n */\nconst defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=80&h=80&m=6', w: 0, h: 0 },\n lg: { q: 'w=147&h=147&m=6', w: 0, h: 0 }\n },\n lazyload: true,\n cropFocalRegion: true\n};\n\n/**\n * Renders product image for quick order grid row.\n * @param props - Quick order table row props.\n * @returns React element.\n */\nconst QuickOrderGridTableRowProductImageComponent: React.FC = (props: IQuickOrderGridTableRowProps) => {\n const product = props.data.product.productLine.fullProduct?.ProductDetails;\n const fallbackImageUrl = getFallbackImageUrl(\n product?.ItemId,\n props.context.actionContext.requestContext.apiSettings,\n props.context.request.app?.config?.OmniChannelMedia\n );\n\n const containerClassName = `${props.className}__product-image-container`;\n\n return (\n \n \n
\n );\n};\n\nlet setShowPreviousActions: React.Dispatch> | undefined;\n\n/**\n * Renders product price.\n * @param props - Props for price component.\n * @returns React element.\n */\nconst renderProductPrice = (props: IQuickOrderGridTableRowProps): JSX.Element | null => {\n const { context, moduleId, moduleTypeName, resources } = props;\n const price = props.price;\n\n if (price) {\n return (\n \n );\n }\n return null;\n};\n\n/**\n * Renders product price.\n * @param props - Props for price component.\n * @returns React element.\n */\nconst renderUnitOfMeasure = (props: IQuickOrderGridTableRowProps): JSX.Element | null => {\n const price = props.price;\n\n if (price) {\n return (\n \n {StringExtensions.isNullOrEmpty(props.productListLine.UnitOfMeasure) || price.UnitOfMeasure}\n
\n );\n }\n return null;\n};\n\n/**\n * On Change function.\n * @param onChangeQuantity -On change quantity function.\n * @param itemKey -String.\n * @param props -Order template line props.\n * @returns Set change quantity.\n */\nconst onChangeHandler = (\n onChangeQuantity: (\n orderTemplateLineId: string | undefined,\n quantity: number,\n props?: IQuickOrderGridTableRowProps | undefined\n ) => boolean,\n itemKey: string | undefined,\n props: IQuickOrderGridTableRowProps\n) => (newValue: number) => {\n onChangeQuantity(itemKey, newValue, props);\n return true;\n};\n\n/**\n * On Change function.\n * @param onRemoveItem -On change quantity function.\n * @param quickOrderGridProductKey -QuickOrderGridp Product.\n * @param props -Order template line props.\n * @returns Set change quantity.\n */\nconst onRemoveHandler = (\n onRemoveItem: (quickOrderGridProduct: QuickOrderGridProduct, props?: IQuickOrderGridTableRowProps | undefined) => void,\n quickOrderGridProductKey: QuickOrderGridProduct,\n props: IQuickOrderGridTableRowProps\n) => () => {\n onRemoveItem(quickOrderGridProductKey, props);\n};\n\n/**\n * Renders actions popup for the mobile view.\n * @param props - Configuration for popup.\n * @returns A react node with actions..\n */\nconst QuickOrderGridExtraActionsPopupComponent: React.FC = (\n props: IQuickOrderGridTableRowProps\n): JSX.Element | null => {\n const {\n resources: { quickOrderGridViewDetailsButtonAriaLabel, quickOrderGridViewDetailsButtonText }\n } = props;\n const product = props.data.product.productLine.fullProduct?.ProductDetails;\n const [shouldShowActions, setShowActions] = useState(false);\n let productUrl = '';\n if (product === undefined) {\n return null;\n }\n if (!StringExtensions.isNullOrWhitespace(product.Name) && !ObjectExtensions.isNullOrUndefined(product.RecordId)) {\n productUrl = getProductPageUrlSync(product.Name!, product.RecordId, props.context.actionContext);\n }\n\n const onClickViewDetails = React.useCallback(() => {\n if (MsDyn365.isBrowser) {\n window.location.href = productUrl;\n }\n }, [productUrl]);\n\n const toggle = React.useCallback(() => {\n const shouldShowActionsNewValue = !shouldShowActions;\n if (shouldShowActionsNewValue) {\n if (setShowPreviousActions) {\n setShowPreviousActions(false);\n }\n setShowActions(shouldShowActionsNewValue);\n setShowPreviousActions = setShowActions;\n } else {\n setShowPreviousActions = undefined;\n setShowActions(shouldShowActionsNewValue);\n }\n }, [shouldShowActions, setShowActions]);\n\n if (StringExtensions.isNullOrWhitespace(productUrl)) {\n return null;\n }\n\n const className = `${props.className}__extra-actions-cell`;\n const actionsContainerClassName = `${className}__actions-container`;\n\n return (\n \n
\n {shouldShowActions && (\n
\n \n {quickOrderGridViewDetailsButtonText}\n \n \n {props.resources.quickOrderGridRemoveItemButtonAriaLabel}\n \n
\n )}\n
\n \n | \n {product.ItemId} | \n \n \n \n {product.Name}\n \n \n {product.Dimensions?.map(dimension => dimension.DimensionValue?.Value)\n .filter(dimensionValue => !StringExtensions.isNullOrWhitespace(dimensionValue))\n .join(props.resources.quickOrderGridProductDimensionsSeparator)}\n \n | \n {renderProductPrice(props)} | \n {renderUnitOfMeasure(props)} | \n \n \n | \n \n \n | \n \n );\n }\n\n return null;\n};\n\n/**\n * Renders rows for mobile view.\n * @param props - Configuration for the rows.\n * @returns A react node with a list of quick order grid rows for mobile view.\n */\nexport const QuickOrderGridMobileTableRowCellComponent: React.FC = (props: IQuickOrderGridTableRowProps) => {\n const product = props.data.product.productLine.fullProduct?.ProductDetails;\n const productListLine = props.data.product.productLine.productListLine;\n const { min, max, quantity } = props;\n if (product !== undefined) {\n return (\n <>\n \n \n | \n \n \n {product.RecordId}\n \n \n \n \n | \n \n \n | \n \n );\n }\n return null;\n};\n\n/**\n * Quick order table row component.\n * @param props - Configuration of the component.\n * @returns React node for the row.\n */\nexport const QuickOrderGridTableRowComponent: React.FC = (props: IQuickOrderGridTableRowProps) => {\n const rowClassName = `${props.className}__row`;\n const isMobileView = isMobile({ variant: VariantType.Viewport, context: props.context.request }) === 'xs';\n let headerCells: JSX.Element;\n if (isMobileView) {\n headerCells = ;\n } else {\n headerCells = ;\n }\n\n return (\n \n {headerCells}
\n \n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport MsDyn365, { IComponent, IComponentProps, ICoreContext, IImageSettings } from '@msdyn365-commerce/core';\nimport React from 'react';\n\nimport { ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { QuickOrderGridProduct } from '../quick-order-grid-product';\nimport { IQuickOrderGridRowCallbacks } from '../utilities';\nimport {\n IQuickOrderGridTableHeaderResources,\n IQuickOrderGridTableRowResources,\n QuickOrderGridTableHeaderComponent,\n QuickOrderGridTableRowComponent\n} from './components';\n\n/**\n * Quick order table data interface.\n */\ninterface IQuickOrderGridTableData {\n quickOrderGridProducts: QuickOrderGridProduct[];\n isOrderQuantityLimitsFeatureEnabled: boolean;\n}\n\n/**\n * Quick order table resources.\n */\nexport interface IQuickOrderGridTableResources extends IQuickOrderGridTableHeaderResources, IQuickOrderGridTableRowResources {}\n\n/**\n * Quick order table props.\n */\nexport interface IQuickOrderGridTableProps extends IComponentProps {\n context: ICoreContext;\n className: string;\n moduleId: string;\n moduleTypeName: string;\n\n resources: IQuickOrderGridTableResources;\n isMobileView: boolean;\n imageSettings?: IImageSettings;\n callBacks: IQuickOrderGridRowCallbacks;\n}\n\n/**\n * Quick order table component.\n */\nexport interface IQuickOrderGridTableComponent extends IComponent {}\n\n/**\n * The quick order table.\n * @param props -- The quick order table props.\n * @returns The quick order table element.\n */\nexport const QuickOrderGridTableComponent: React.FC = (props: IQuickOrderGridTableProps) => {\n const [isMobile, setIsMobile] = React.useState(props.isMobileView);\n const quickOrderGridProducts = props.data.quickOrderGridProducts;\n const isOrderQuantityLimitsFeatureEnabled = props.data.isOrderQuantityLimitsFeatureEnabled;\n\n /**\n * Update the view port.\n */\n const updateViewport = () => {\n setIsMobile(props.isMobileView);\n };\n\n if (MsDyn365.isBrowser) {\n window.addEventListener('resize', updateViewport);\n }\n\n const headerClassName = `${props.className}__header`;\n const rowClassName = `${props.className}__row`;\n\n return (\n \n \n {quickOrderGridProducts.map((quickOrderProduct, index) => {\n let quantity = quickOrderProduct.productLine.productListLine.Quantity!;\n const product = quickOrderProduct.productLine.fullProduct;\n let min: number = 1;\n let max: number = 10;\n const behavior = product?.ProductDetails?.Behavior;\n if (isOrderQuantityLimitsFeatureEnabled && !ObjectExtensions.isNullOrUndefined(behavior)) {\n if (behavior.MinimumQuantity && behavior.MinimumQuantity > 0) {\n min = behavior.MinimumQuantity;\n }\n if (behavior.MaximumQuantity && behavior.MaximumQuantity > 0) {\n max = behavior.MaximumQuantity;\n }\n quantity = Math.max(quantity, min);\n }\n const price = quickOrderProduct.productLine.fullProduct?.ProductPrice;\n return (\n \n );\n })}\n
\n );\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n getProductConfigure,\n IProductDimensionCallbacks,\n IProductDimensionConfigureResources,\n IProductDimensionConfigureViewProps\n} from '@msdyn365-commerce/components';\nimport {\n ProductDimension,\n ProductDimensionType,\n ProductDimensionValue,\n ProductListsDataActions,\n ProductListType,\n SimpleProduct\n} from '@msdyn365-commerce/retail-proxy';\nimport {\n addItemToProductListAction,\n AddItemToProductListInput,\n ArrayExtensions,\n createProductList,\n CreateProductListInput,\n FinitePromiseQueue,\n FinitePromiseQueueError,\n getDimensionsForSelectedVariant,\n GetDimensionsForSelectedVariantInput,\n getScanResult,\n GetScanResultInput,\n getSelectedVariant,\n IDimensionForSelectedVariant,\n IPromiseQueue,\n ObjectExtensions,\n QuickOrderTemplate,\n QuickOrderTemplateLine,\n SelectedVariantInput,\n StringExtensions\n} from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getTelemetryObject,\n Heading,\n IModuleProps,\n INodeProps,\n isMobile,\n ITelemetryContent,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { debounce } from 'lodash';\nimport { computed } from 'mobx';\nimport * as React from 'react';\n\nimport { getCatalogId } from '@msdyn365-commerce/core';\nimport { ActiveProductListInput } from './actions';\nimport {\n EcommerceQuantityLimitConfigurationsFeatureName,\n IQuickOrderGridActionsProps,\n IQuickOrderGridActionsViewProps,\n IQuickOrderGridRowCallbacks,\n IQuickOrderGridState,\n QuickOrderGridActionsView,\n QuickOrderGridDrawer,\n QuickOrderGridFormComponent,\n QuickOrderGridProduct,\n QuickOrderGridTableComponent,\n RetailDefaultOrderQuantityLimitsFeatureName\n} from './components';\nimport { IQuickOrderGridData } from './quick-order-grid.data';\nimport { IQuickOrderGridProps, IQuickOrderGridResources } from './quick-order-grid.props.autogenerated';\n\n/**\n * QuickOrder Grid View props.\n */\nexport interface IQuickOrderGridViewProps extends IQuickOrderGridProps {\n header: JSX.Element;\n actions?: INodeProps;\n isB2bCustomer?: boolean;\n isQuickOrderGridFormExpanded: boolean;\n contentProps: INodeProps;\n drawer: INodeProps;\n loading?: React.ReactNode;\n quickOrderGridForm: INodeProps;\n quickOrderGridFormProductContent: INodeProps;\n quickOrderGridFormMsgContent: INodeProps;\n quickOrderGridProps: IModuleProps;\n form: React.ReactNode;\n configure?: IProductDimensionConfigureViewProps;\n isMobileView: boolean;\n container?: JSX.Element;\n orderActions?: IQuickOrderGridActionsViewProps | null;\n bulkPurchase?: React.ReactNode;\n}\n\n/**\n * QuickOrder Grid View port.\n */\nexport type GridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * QuickOrderGrid component.\n * @extends {React.PureComponent>}\n */\nclass QuickOrderGrid extends React.PureComponent, IQuickOrderGridState> {\n private readonly _productTextInput: React.RefObject;\n\n private readonly _quantityInput: React.RefObject;\n\n private readonly _waitTime: number = 500;\n\n private readonly _dimensionUpdateQueueMaxLength: number = 2;\n\n private readonly _errorCssClass: string = 'danger';\n\n private readonly _errorCssGlyphClass: string = 'fas fa-exclamation-triangle';\n\n private readonly _quickOrderGridFormClass: string;\n\n private readonly _quickOrderGridFormProductContent: string;\n\n private readonly _quickOrderGridFormMsgContent: string;\n\n private readonly _telemetryContent: ITelemetryContent;\n\n private readonly _dimensionUpdateQueue: IPromiseQueue = new FinitePromiseQueue(this._dimensionUpdateQueueMaxLength);\n\n private _dimensions: { [id: number]: string } = {};\n\n private _initializedDimensions: Set = new Set();\n\n private readonly _cssClassNameConfigure: string = 'ms-quick-order_grid__content-form-main';\n\n private readonly _className: string = 'ms-quick-order-grid';\n\n // @ts-expect-error: Debouce needs to be used as type.\n private _cancellabelDebounce: debounce;\n\n private _isOrderQuantityLimitsFeatureEnabled: boolean = false;\n\n private _isChannelLimitsFeatureEnabled: boolean = false;\n\n private _applyDefaultOrderSettingsForCartLine: boolean = false;\n\n private readonly _quickOrderGridCallbacks: IProductDimensionCallbacks = {\n initializeDimension: (initializedDimension: string): void => {\n if (initializedDimension) {\n this._initializedDimensions.add(initializedDimension);\n }\n },\n /**\n * Get Dropdown name.\n * @param selectedDimensionId - Dimension type.\n * @param selectedDimensionValueId - Resources.\n * @returns Dropdown name.\n */\n dimensionSelectedAsync: async (selectedDimensionId: number, selectedDimensionValueId: string): Promise => {\n this._dimensions[selectedDimensionId] = selectedDimensionValueId;\n // Only trigger _updateDimensions when all dimensions are initialized\n if (this._initializedDimensions.size === this.state.productDimensions?.length) {\n return this._dimensionUpdateQueue\n .enqueue(async () => {\n return this._updateDimensions();\n })\n .catch((error: string) => {\n // Ignore discarded processes.\n if (error !== FinitePromiseQueueError.ProcessWasDiscardedFromTheQueue) {\n throw new Error(error);\n }\n });\n }\n },\n\n /**\n * Get Dropdown name.\n * @param dimensionType - Dimension type.\n * @param resources - Resources.\n * @returns Dropdown name.\n */\n getDropdownName: (dimensionType: number, resources: IProductDimensionConfigureResources): string => {\n return this._getDropdownName(dimensionType, resources);\n },\n\n /**\n * Method to call on dimension change.\n * @param isUpdatingDimension - Flag to update dimension.\n */\n changeUpdatingDimension: (isUpdatingDimension: boolean): void => {\n this.setState({ isUpdatingDimension });\n }\n };\n\n private readonly _quickOrderGridRowCallbacks: IQuickOrderGridRowCallbacks = {\n /**\n * Method to call remove button.\n * @param line - Grid row product.\n */\n onRemoveItem: (line: QuickOrderGridProduct): void => {\n this._removeItemRowFromTable(line.productLine);\n },\n\n /**\n * Method to call on change quantity button.\n * @param productListLineId - Grid row product list line id.\n * @param quantity - Product quantity.\n * @returns - Falg to get confirmation for action.\n */\n onChangeQuantity: (productListLineId: string | undefined, quantity: number): boolean => {\n return this._changeRowQuantity(productListLineId, quantity);\n }\n };\n\n public constructor(props: IQuickOrderGridProps) {\n super(props);\n this._productTextInput = React.createRef();\n this._quantityInput = React.createRef();\n\n this._telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.state = {\n isQuickOrderGridFormExpanded: false,\n min: 0,\n max: 10,\n quantity: 1,\n productResponse: undefined,\n productDimensions: undefined,\n productDimensionErrorState: {\n configureErrors: {}\n },\n isMobile: this.isMobile,\n products: [],\n isUpdatingDimension: false,\n productListId: ''\n };\n\n this._quickOrderGridFormClass = 'ms-quick-order-grid__content-form';\n this._quickOrderGridFormProductContent = 'ms-quick-order-grid__content-form-main';\n this._quickOrderGridFormMsgContent = 'ms-quick-order-grid__content-form-msg';\n\n this._isOrderQuantityLimitsFeatureEnabled =\n this.props.data.featureState.result?.find(featureState => featureState.Name === RetailDefaultOrderQuantityLimitsFeatureName)\n ?.IsEnabled ?? false;\n\n this._isChannelLimitsFeatureEnabled =\n this.props.data.featureState.result?.find(featureState => featureState.Name === EcommerceQuantityLimitConfigurationsFeatureName)\n ?.IsEnabled ?? false;\n\n const cartConfiguration = this.props.data.cartConfiguration;\n this._applyDefaultOrderSettingsForCartLine = cartConfiguration?.result?.ValidateDefaultOrderSettingsPerLine ?? false;\n }\n\n @computed public get isMobile(): boolean {\n const size = isMobile({ variant: VariantType.Viewport, context: this.props.context.request });\n return size === 'xs';\n }\n\n public render(): JSX.Element | null {\n const { data } = this.props;\n if (!data.customerInformation.result) {\n return null;\n }\n const quickOrderTemplate = data.quickOrderTemplate;\n\n if (quickOrderTemplate?.result !== undefined) {\n this.setState({\n products: quickOrderTemplate.result.quickOrderTemplateLines,\n productListId: quickOrderTemplate.result.productList.Id\n });\n }\n const { className = '', maxQuantity } = this.props.config;\n const customerInfo = this.props.data.customerInformation.result;\n const {\n quickOrderGridModuleHeading,\n quickOrderGridModuleDescription,\n quickOrderGridAddtogrid,\n quickOrderGridProductQuantityInputLabel,\n quickOrderGridProductInputLabel,\n quickOrderGridProductDimensionTypeColor,\n quickOrderGridProductDimensionTypeConfiguration,\n quickOrderGridSelectDimensionFormatString,\n quickOrderGridProductDimensionTypeSize,\n quickOrderGridProductDimensionTypeStyle,\n quickOrderGridProductDimensionTypeAmount,\n quickOrderGridModulePageHeading\n } = this.props.resources;\n\n const productConfigureResources: IProductDimensionConfigureResources = {\n selectDimensionFormatString: quickOrderGridSelectDimensionFormatString,\n productDimensionTypeColor: quickOrderGridProductDimensionTypeColor,\n productDimensionTypeConfiguration: quickOrderGridProductDimensionTypeConfiguration,\n productDimensionTypeSize: quickOrderGridProductDimensionTypeSize,\n productDimensionTypeStyle: quickOrderGridProductDimensionTypeStyle,\n productDimensionTypeAmount: quickOrderGridProductDimensionTypeAmount\n };\n\n const { isQuickOrderGridFormExpanded, productDimensionErrorState, productResponse, productDimensions } = this.state;\n\n const headerClassName = `${this._className}__header`;\n\n const header = (\n \n \n
\n );\n\n const viewProps: IQuickOrderGridViewProps = {\n ...(this.props as IQuickOrderGridProps),\n\n quickOrderGridProps: { className: classnames('ms-quick-order-grid', className), moduleProps: this.props },\n contentProps: { className: 'ms-quick-order-grid__content' },\n isB2bCustomer: customerInfo?.IsB2b,\n header,\n actions: {\n className: `${this._className}-action-bar`,\n tag: 'div'\n },\n drawer: {\n tag: QuickOrderGridDrawer,\n className: `${this._className}__drawer`,\n collapseProps: { isOpen: this.state.isQuickOrderGridFormExpanded },\n moduleHeadingText: quickOrderGridModuleHeading,\n moduleDescriptionText: quickOrderGridModuleDescription,\n requestContext: this.props.context.request,\n telemetryContent: this._telemetryContent\n },\n bulkPurchase: this._renderBulkPurchase(),\n quickOrderGridForm: {\n className: `${this._quickOrderGridFormClass} ${isQuickOrderGridFormExpanded ? 'qo-show' : 'qo-hide'}`\n },\n quickOrderGridFormProductContent: {\n className: this._quickOrderGridFormProductContent\n },\n quickOrderGridFormMsgContent: {\n className: this._quickOrderGridFormMsgContent\n },\n form: QuickOrderGridFormComponent({\n productTextInput: this._productTextInput,\n quantityTextInput: this._quantityInput,\n isAddtoListDisabled: !productResponse,\n ariaLabelAddtoCart: quickOrderGridAddtogrid,\n ariaLabelProduct: quickOrderGridProductInputLabel,\n ariaLabelQuantity: quickOrderGridProductQuantityInputLabel,\n maxChars: 50,\n minQuantity: this.state.min ?? 0,\n maxQuantity: this.state.max ?? maxQuantity,\n moduleClassName: this._className,\n quickOrderGridState: this.state,\n handleInputChange: this._handleInputChange,\n handleQuantityChange: this._handleQuantityChange,\n handleAddProductListClick: this._addItemToProductListLine\n }),\n configure:\n productResponse && productDimensions\n ? getProductConfigure(\n this._cssClassNameConfigure,\n this.props.context,\n this.props.friendlyName,\n this.props.telemetry,\n quickOrderGridSelectDimensionFormatString,\n productConfigureResources,\n this._quickOrderGridCallbacks,\n productResponse,\n productDimensions,\n productDimensionErrorState\n )\n : undefined,\n isQuickOrderGridFormExpanded: this.state.isQuickOrderGridFormExpanded,\n isMobileView: this.state.isMobile,\n container: ArrayExtensions.hasElements(this.state.products) ? this._renderListContainer() : undefined,\n orderActions: this._renderQuickOrderGridActions(quickOrderTemplate?.result)\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n private _renderQuickOrderGridActions(quickOrderTemplate: QuickOrderTemplate | undefined): IQuickOrderGridActionsViewProps | null {\n const { typeName, context, resources } = this.props;\n const {\n quickOrderGridDeleteButtonText,\n quickOrderGridBuySelectedButtonText,\n quickOrderGridBuySelectedButtonAriaLabel,\n quickOrderGridBuySelectedAddingToCartErrorNotificationTitle,\n quickOrderGridBuySelectedAddingToCartErrorNotificationCloseAriaLabel,\n quickOrderGridGoToCartText,\n quickOrderGridDialogCloseText,\n quickOrderGridSingleItemText,\n quickOrderGridMultiLineItemFormatText,\n quickOrderGridMultiLinesFormatText,\n quickOrderGridHeaderMessageText,\n addedQuantityText,\n originalPriceText,\n currentPriceText,\n freePriceText\n } = resources;\n if (ArrayExtensions.hasElements(quickOrderTemplate?.quickOrderTemplateLines)) {\n const quickOrderGridActions: IQuickOrderGridActionsProps = {\n data: { quickOrderTemplate },\n moduleClassName: this._className,\n id: 'quick-order-grid',\n typeName,\n context,\n handlers: {\n removeProductList: this._removeProductList,\n onErrorMessage: (message: string) =>\n this.setState({\n topStateMessage: {\n messageText: message,\n statusCssString: this._errorCssClass,\n messageGlyph: this._errorCssGlyphClass,\n isOpen: true\n }\n })\n },\n quickOrderGridState: this.state,\n resources: {\n quickOrderGridDeleteButtonText,\n quickOrderGridBuySelectedButtonText,\n quickOrderGridBuySelectedButtonAriaLabel,\n quickOrderGridBuySelectedAddingToCartErrorNotificationTitle,\n quickOrderGridBuySelectedAddingToCartErrorNotificationCloseAriaLabel,\n quickOrderGridGoToCartText,\n quickOrderGridDialogCloseText,\n quickOrderGridSingleItemText,\n quickOrderGridMultiLineItemFormatText,\n quickOrderGridMultiLinesFormatText,\n quickOrderGridHeaderMessageText,\n addedQuantityText,\n originalPriceText,\n currentPriceText,\n freePriceText\n }\n };\n\n return QuickOrderGridActionsView(quickOrderGridActions);\n }\n return null;\n }\n\n /**\n * Renders bulk purchase module.\n * @returns Bulk purchase module react node.\n */\n private _renderBulkPurchase(): React.ReactNode {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Temporary switch for the feature which is under development.\n if (!this.props.context.app.config.isBulkPurchaseEnabled) {\n return null;\n }\n\n if (!ArrayExtensions.hasElements(this.props.slots.bulkPurchaseSlots)) {\n return null;\n }\n\n const containerClass = `${this._className}__bulk-purchase`;\n return (\n \n {React.cloneElement(this.props.slots.bulkPurchaseSlots[0] as React.ReactElement, {\n productDimensions: this.state.productDimensions\n })}\n
\n );\n }\n\n /**\n * Render list container.\n * @returns JSX element.\n */\n private _renderListContainer(): JSX.Element {\n const containerClass = `${this._className}__table-content`;\n return {this._renderQuickOrderTable(this._className)}
;\n }\n\n /**\n * Initial the products on quick order.\n * @returns List of quick order products or undefined.\n */\n private _initQuickOrderGridProducts(): QuickOrderGridProduct[] {\n const products: QuickOrderTemplateLine[] = this.state.products;\n\n const quickOrderGridProduct: QuickOrderGridProduct[] = products.map((product: QuickOrderTemplateLine) => {\n return new QuickOrderGridProduct(product);\n });\n\n return ArrayExtensions.validValues(quickOrderGridProduct);\n }\n\n /**\n * Method to call on clear button.\n */\n private readonly _removeProductList = () => {\n const { context, data, telemetry, resources } = this.props;\n const { quickOrderTemplate } = data;\n const userToken = context.request.user.isAuthenticated && context.request.user.token;\n if (userToken && quickOrderTemplate && quickOrderTemplate.result) {\n ProductListsDataActions.deleteAsync({ callerContext: context.actionContext }, quickOrderTemplate.result.productList)\n .then(() => {\n window.location.reload();\n })\n .catch((error: string) => {\n telemetry.warning('[quick-order-grid] Unable to delete product list.');\n telemetry.error(error);\n this._updateStatusState(\n resources.quickOrderGridDeleteProductListFailedText,\n this._errorCssClass,\n this._errorCssGlyphClass,\n true\n );\n });\n } else {\n telemetry.warning('[quick-order-grid] Failed to delete product list. Product List was not found');\n }\n };\n\n /**\n * Initial the products on quick order.\n * @param className - Class name.\n * @returns JSX element.\n */\n private _renderQuickOrderTable(className: string): JSX.Element {\n const tableClassName = `${className}__table-list`;\n\n return (\n \n );\n }\n\n private _updateQuantitiesInState(product: SimpleProduct): void {\n const min: number = this._getMinQuantityForCartLineItem(this._isOrderQuantityLimitsFeatureEnabled, product);\n const max: number = this._getMaxQuantityForCartLineItem(\n this._isChannelLimitsFeatureEnabled || this._isOrderQuantityLimitsFeatureEnabled,\n product\n );\n let quantity: number = this._getQuantity(\n this._isOrderQuantityLimitsFeatureEnabled,\n this._applyDefaultOrderSettingsForCartLine,\n product\n );\n quantity = Math.max(quantity, min);\n\n this.setState({\n min,\n max,\n quantity\n });\n }\n\n private _getMinQuantityForCartLineItem(isOrderQuantityLimitsFeatureEnabled: boolean, product: SimpleProduct): number {\n if (\n isOrderQuantityLimitsFeatureEnabled &&\n this._getIgnoreOrderSettings() &&\n product?.Behavior?.MinimumQuantity &&\n product.Behavior.MinimumQuantity > 0\n ) {\n return product.Behavior.MinimumQuantity;\n }\n\n return 1;\n }\n\n private _getMaxQuantityForCartLineItem(isQuantityLimitsFeatureEnabled: boolean, product: SimpleProduct): number {\n if (\n isQuantityLimitsFeatureEnabled &&\n this._getIgnoreOrderSettings() &&\n product?.Behavior?.MaximumQuantity &&\n product.Behavior.MaximumQuantity > 0\n ) {\n return product.Behavior.MaximumQuantity;\n }\n\n return this.props.context.app.config.maxQuantityForCartLineItem;\n }\n\n /**\n * Retrieves the value of the IgnoreOrderSettings property from the cart configuration.\n * If the property is not present, it defaults to false.\n * @returns {boolean} The value of the IgnoreOrderSettings property.\n */\n private _getIgnoreOrderSettings(): boolean {\n const cartConfiguration = this.props.data.cartConfiguration;\n return !(cartConfiguration?.result?.IgnoreOrderSettings ?? false);\n }\n\n private _getQuantity(\n isOrderQuantityLimitsFeatureEnabled: boolean,\n applyDefaultOrderSettingsForCartLine: boolean,\n product: SimpleProduct\n ): number {\n let defaultQuantity = 1;\n\n if (!isOrderQuantityLimitsFeatureEnabled || !applyDefaultOrderSettingsForCartLine) {\n return defaultQuantity;\n }\n\n if (product?.Behavior?.DefaultQuantity && product.Behavior.DefaultQuantity > 0) {\n defaultQuantity = product.Behavior.DefaultQuantity;\n }\n\n return defaultQuantity;\n }\n\n /**\n * Method to called on product input change.\n * @param query - Product inventory info.\n */\n private readonly _handleInputChange = (query: string): void => {\n const queryMinLength = 4;\n if (!query || query.length > queryMinLength) {\n this.setState({ quantity: 0, productDimensions: [], productResponse: undefined });\n this._updateStatusState('', '', '', false);\n }\n if (this._cancellabelDebounce) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call -- existing code.\n this._cancellabelDebounce.cancel();\n }\n\n const { telemetry, context } = this.props;\n const zeroNumber = 0;\n if (!StringExtensions.isNullOrEmpty(query)) {\n this._cancellabelDebounce = debounce(() => {\n getScanResult(\n new GetScanResultInput(\n context.actionContext.requestContext.apiSettings,\n query,\n context.actionContext.requestContext.apiSettings.channelId\n ),\n this.props.context.actionContext\n )\n .then(results => {\n this.setState({\n productResponse: results?.Product,\n productDimensions: results?.ProductDimensionFull,\n isQuickOrderGridFormExpanded: true\n });\n if (results?.Product) {\n this._updateQuantitiesInState(results.Product);\n }\n })\n .catch((error: Error) => {\n telemetry.exception(error);\n telemetry.debug('Unable to get scan results');\n });\n }, this._waitTime);\n\n setTimeout(() => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- Existing code.\n this._cancellabelDebounce();\n }, zeroNumber);\n this.setState({ isQuickOrderGridFormExpanded: true });\n } else {\n this.setState({ productResponse: undefined, isQuickOrderGridFormExpanded: true });\n }\n };\n\n /**\n * Method to called on quantity change.\n * @param value - Quantity value.\n */\n private readonly _handleQuantityChange = (value: string): void => {\n let currentValue = Number.parseInt(value, 10);\n const inputElement = this._quantityInput.current instanceof HTMLInputElement && this._quantityInput.current;\n const quantityChangeDebounceTimeout = 200;\n let minimumQuantity = 0;\n let needToUpdateUIValue: boolean = false;\n if (this._isOrderQuantityLimitsFeatureEnabled && !ObjectExtensions.isNullOrUndefined(this.state.productResponse?.Behavior)) {\n const behavior = this.state.productResponse!.Behavior;\n minimumQuantity = behavior?.MinimumQuantity ?? 0;\n const newCurrentValue = Math.max(currentValue, minimumQuantity);\n if (newCurrentValue !== currentValue) {\n needToUpdateUIValue = true;\n }\n currentValue = newCurrentValue;\n }\n\n this.setState({ quantity: currentValue }, () => {\n debounce(() => {\n if (needToUpdateUIValue && !Number.isNaN(this.state.quantity) && inputElement) {\n inputElement.setAttribute('aria-valuenow', currentValue.toString());\n inputElement.value = currentValue.toString();\n }\n }, quantityChangeDebounceTimeout)();\n });\n };\n\n /**\n * Method to get dropdwon name.\n * @param dimensionType - Dimension Type.\n * @param resources - String resources.\n * @returns Dropdwon label.\n */\n private readonly _getDropdownName = (dimensionType: number, resources: IProductDimensionConfigureResources): string => {\n const isGiftCard = this.state.productResponse?.IsGiftCard;\n\n switch (dimensionType) {\n case ProductDimensionType.Color: // ProductDimensionType.Color\n return resources.productDimensionTypeColor;\n case ProductDimensionType.Configuration: // ProductDimensionType.Configuration\n return resources.productDimensionTypeConfiguration;\n case ProductDimensionType.Size: // ProductDimensionType.Size\n return resources.productDimensionTypeSize;\n case ProductDimensionType.Style: // ProductDimensionType.Style\n return isGiftCard ? resources.productDimensionTypeAmount : resources.productDimensionTypeStyle;\n default:\n return '';\n }\n };\n\n /**\n * Method to update dimension and product in UI.\n */\n private readonly _updateDimensions = async (): Promise => {\n const {\n context: {\n actionContext,\n request: {\n apiSettings: { channelId }\n }\n }\n } = this.props;\n const { productDimensions, productResponse } = this.state;\n const hasProductDimensions = ArrayExtensions.hasElements(productDimensions);\n if (!productResponse || !hasProductDimensions) {\n return;\n }\n\n const dimensionsToUpdate: { [id: number]: string } = { ...this._dimensions };\n this.setState({ isUpdatingDimension: true });\n\n // Step 1: Update state to indicate which dimensions are selected\n if (this.state.productDimensionErrorState.otherError) {\n // eslint-disable-next-line react/no-access-state-in-setstate -- existing code.\n const clearOtherErrorState = { ...this.state.productDimensionErrorState };\n clearOtherErrorState.otherError = undefined;\n this.setState({ productDimensionErrorState: clearOtherErrorState });\n }\n\n // Step 2: Clear any errors indicating the dimension wasn't selected\n for (const dimensionKey of Object.keys(dimensionsToUpdate)) {\n if (this.state.productDimensionErrorState.configureErrors[dimensionKey]) {\n // eslint-disable-next-line react/no-access-state-in-setstate -- existing code.\n const errorState = { ...this.state.productDimensionErrorState };\n errorState.configureErrors[dimensionKey] = undefined;\n\n this.setState({ productDimensionErrorState: errorState });\n }\n }\n\n // Step 3, Build the actually selected dimensions, prioritizing the information in state\n // over the information in data\n const mappedDimensions = productDimensions\n ?.map(dimension => {\n return {\n DimensionTypeValue: dimension.DimensionTypeValue,\n DimensionValue:\n this._updateDimensionValue(dimension, dimensionsToUpdate[dimension.DimensionTypeValue]) ?? dimension.DimensionValue,\n ExtensionProperties: dimension.ExtensionProperties\n };\n })\n .filter(dimension => {\n return dimension.DimensionValue;\n });\n\n // Step 4. Use these dimensions hydrate the product. Wrap this in a promise\n // so that places like add to cart can await it\n // eslint-disable-next-line no-async-promise-executor -- existing code\n const selectedProduct = new Promise(async resolve => {\n const newProduct = await getSelectedVariant(\n new SelectedVariantInput(\n productResponse.MasterProductId ? productResponse.MasterProductId : productResponse.RecordId,\n channelId,\n mappedDimensions,\n undefined,\n this.props.context.request\n ),\n actionContext\n );\n if (newProduct) {\n await getDimensionsForSelectedVariant(\n new GetDimensionsForSelectedVariantInput(\n newProduct.MasterProductId ? newProduct.MasterProductId : newProduct.RecordId,\n channelId,\n mappedDimensions,\n this.props.context.request\n ),\n actionContext\n );\n }\n\n resolve(newProduct);\n });\n\n const variantProduct = await selectedProduct;\n this.setState({ productResponse: variantProduct !== null ? variantProduct : undefined });\n };\n\n /**\n * Method to get updated dimension value.\n * @param productDimensionFull - Product dimension full.\n * @param newValueId - New Dimension value.\n * @returns Dimension Value.\n */\n private readonly _updateDimensionValue = (\n productDimensionFull: IDimensionForSelectedVariant,\n newValueId: string | undefined\n ): ProductDimensionValue | undefined => {\n if (newValueId && productDimensionFull.DimensionValues) {\n return productDimensionFull.DimensionValues.find(dimension => dimension.RecordId === +newValueId);\n }\n\n return undefined;\n };\n\n /**\n * Method to get dropdwon name.\n * @param dimensionTypeValue - Dimension Type.\n * @param resources - String resources.\n * @param isGiftCard - Flag to check if its a giftcard product.\n * @returns Dropdwon error label.\n */\n private readonly _getDimensionErrorString = (\n dimensionTypeValue: number,\n resources: IQuickOrderGridResources,\n isGiftCard?: boolean\n ): string => {\n const amountErrorMessage = resources.quickOrderGridproductDimensionTypeAmountErrorMessage;\n\n switch (dimensionTypeValue) {\n case ProductDimensionType.Color: // ProductDimensionType.Color\n return resources.quickOrderGridproductDimensionTypeColorErrorMessage;\n case ProductDimensionType.Configuration: // ProductDimensionType.Configuration\n return resources.quickOrderGridproductDimensionTypeConfigurationErrorMessage;\n case ProductDimensionType.Size: // ProductDimensionType.Size\n return resources.quickOrderGridproductDimensionTypeSizeErrorMessage;\n case ProductDimensionType.Style: // ProductDimensionType.Style\n return isGiftCard ? amountErrorMessage : resources.quickOrderGridproductDimensionTypeStyleErrorMessage;\n default:\n return '';\n }\n };\n\n /**\n * Initial the products on quick order.\n * @param productResponse - Simple Product.\n * @param quantity - Product Quantity.\n * @returns Flag to validate productlistline.\n */\n private readonly _validateCart = (productResponse: SimpleProduct, quantity: number): boolean => {\n // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- existing code\n const missingDimensions = productResponse.Dimensions?.filter(\n dimension => !(dimension.DimensionValue && dimension.DimensionValue.Value)\n );\n const minimumQuantity = 0;\n if (ArrayExtensions.hasElements(missingDimensions)) {\n const userMessage = this._getConfigureErrors(missingDimensions, false);\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- existing code\n if (this.state.productDimensionErrorState.configureErrors) {\n // eslint-disable-next-line react/no-access-state-in-setstate -- existing code\n const errorState = { ...this.state.productDimensionErrorState };\n errorState.configureErrors = userMessage;\n\n this.setState({ productDimensionErrorState: errorState });\n return false;\n }\n }\n\n if (quantity <= minimumQuantity) {\n const resources = this.props.resources;\n this._updateStatusState(resources.quickOrderGridWrongQuantityErrorMsg, this._errorCssClass, this._errorCssGlyphClass, true);\n return false;\n }\n return true;\n };\n\n /**\n * Initial the products on quick order.\n * @param result - Simple Product.\n * @param isGiftCard - Product Quantity.\n * @returns Flag to validate cart.\n */\n private _getConfigureErrors(\n result: ProductDimension[] | undefined,\n isGiftCard?: boolean\n ): { [configureId: string]: string | undefined } {\n if (!result) {\n return {};\n }\n const dimensions: { [configureId: string]: string | undefined } = {};\n const resources = this.props.resources;\n for (const dimension of result) {\n dimensions[dimension.DimensionTypeValue] = this._getDimensionErrorString(dimension.DimensionTypeValue, resources, isGiftCard);\n }\n return dimensions;\n }\n\n /**\n * Method to call on quantity change in row.\n * @param itemKey - Product Key.\n * @param quantity - Product quantity.\n * @returns Flag to update status.\n */\n private readonly _changeRowQuantity = (itemKey: string | undefined, quantity: number): boolean => {\n const { context, data, telemetry } = this.props;\n const { quickOrderTemplate } = data;\n if (quickOrderTemplate?.result) {\n const quickOrderTemplateLinesData = quickOrderTemplate.result.quickOrderTemplateLines;\n if (ArrayExtensions.hasElements(quickOrderTemplateLinesData)) {\n const orderLineIndex = quickOrderTemplateLinesData.findIndex(\n (lines: QuickOrderTemplateLine) => lines.productListLine.LineId === itemKey\n );\n const newProductListLine = { ...quickOrderTemplateLinesData[orderLineIndex] };\n if (quickOrderTemplateLinesData[orderLineIndex].productListLine.Quantity === quantity) {\n return true;\n }\n const previousQuantity = newProductListLine.productListLine.Quantity;\n newProductListLine.productListLine.Quantity = quantity;\n const { fullProduct, ...line } = newProductListLine;\n\n ProductListsDataActions.updateProductListLinesAsync(\n { callerContext: context.actionContext },\n quickOrderTemplate.result.productList.Id,\n [line.productListLine]\n )\n .then(list => {\n if (ArrayExtensions.hasElements(list)) {\n const newLine = list.find(lines => lines.LineId === itemKey);\n quickOrderTemplateLinesData[orderLineIndex].productListLine = newLine!;\n const updatedLines = [...quickOrderTemplateLinesData];\n updatedLines[orderLineIndex] = { fullProduct, productListLine: newLine! };\n const updatedProductList = { ...quickOrderTemplate.result, ProductListLines: updatedLines };\n context.actionContext.update(\n new ActiveProductListInput(context.actionContext.requestContext),\n updatedProductList\n );\n return true;\n }\n\n return false;\n })\n .catch((error: Error) => {\n telemetry.warning('[quick-order-grid] Unable to update product quantity.');\n telemetry.error(error.message);\n const userMessage = 'Failed to update quantity value.';\n newProductListLine.productListLine.Quantity = previousQuantity;\n this._updateStatusState(userMessage, this._errorCssClass, this._errorCssGlyphClass, true);\n return false;\n });\n }\n return false;\n }\n\n return false;\n };\n\n /**\n * Method to call on remove item from table.\n * @param line - Order Template Line.\n */\n private readonly _removeItemRowFromTable = (line: QuickOrderTemplateLine): void => {\n const { context, data, telemetry } = this.props;\n const { quickOrderTemplate } = data;\n\n if (quickOrderTemplate?.result) {\n const userToken = context.request.user.isAuthenticated && context.request.user.token;\n if (userToken) {\n ProductListsDataActions.removeProductListLinesAsync(\n { callerContext: context.actionContext },\n line.productListLine.ProductListId!,\n [line.productListLine]\n )\n .then(() => {\n window.location.reload(false);\n })\n .catch((error: Error) => {\n telemetry.warning('[quick-order-grid] Unable remove item from product list grid');\n telemetry.error(error.message);\n });\n } else {\n telemetry.warning('[quick-order-grid] Unable remove items from product list grid user token was not found');\n }\n }\n };\n\n private readonly _isChannelMultipleCatalogsFeatureEnabled = (): boolean => {\n let isMultipleCatalogFeatureEnabledInHq = false;\n if (this.props.data.featureState) {\n isMultipleCatalogFeatureEnabledInHq =\n this.props.data.featureState.result?.find(\n feature => feature.Name === 'Dynamics.AX.Application.ChannelMultipleCatalogsFeature'\n )?.IsEnabled || false;\n }\n return isMultipleCatalogFeatureEnabledInHq;\n };\n\n /**\n * Method to call on add item from form.\n */\n private readonly _addItemToProductListLine = async (): Promise => {\n const {\n context: { actionContext },\n resources,\n telemetry\n } = this.props;\n const {\n quickOrderGridAddedToGridSuccessMessage,\n quickOrderGridAddedToGridFailureMessage,\n quickOrderGridAddedToGridDuplicateError\n } = resources;\n const { productResponse, quantity, productListId } = this.state;\n // get the current catalog id.\n const catalogId = getCatalogId(this.props.context.request);\n\n this._updateStatusState('', '', '', false);\n\n if (productResponse !== undefined && this._validateCart(productResponse, quantity)) {\n if (StringExtensions.isNullOrWhitespace(productListId)) {\n await this._createProductList();\n }\n\n if (StringExtensions.isNullOrWhitespace(this.state.productListId)) {\n this._updateStatusState(quickOrderGridAddedToGridFailureMessage, this._errorCssClass, this._errorCssGlyphClass, true);\n return;\n }\n const input = new AddItemToProductListInput(\n this.state.productListId,\n productResponse.RecordId,\n quantity,\n productResponse.DefaultUnitOfMeasure ?? 'ea',\n this._isChannelMultipleCatalogsFeatureEnabled(),\n catalogId\n );\n\n await addItemToProductListAction(input, actionContext)\n .then(result => {\n if (result.ProductListId) {\n this._updateStatusState(quickOrderGridAddedToGridSuccessMessage, 'success', 'fas fa-check', true);\n window.location.reload();\n this.setState({});\n }\n })\n .catch((error: Error) => {\n telemetry.debug('[quick-order-grid] Error trying to Update Grid Line from the quick order grid');\n if (error.name === 'Microsoft_Dynamics_Commerce_Runtime_DuplicateObject') {\n this._updateStatusState(\n quickOrderGridAddedToGridDuplicateError,\n this._errorCssClass,\n this._errorCssGlyphClass,\n true\n );\n } else {\n this._updateStatusState(\n quickOrderGridAddedToGridFailureMessage,\n this._errorCssClass,\n this._errorCssGlyphClass,\n true\n );\n }\n });\n }\n };\n\n /**\n * Method to create product list.\n * @returns - ProductListId.\n */\n private _createProductList = async (): Promise => {\n const {\n context: { actionContext },\n telemetry,\n resources\n } = this.props;\n const { productListId } = this.state;\n const { quickOrderGridAddedToGridFailureMessage } = resources;\n\n if (StringExtensions.isNullOrWhitespace(productListId)) {\n const input = new CreateProductListInput('', ProductListType.QuickOrder);\n\n await createProductList(input, actionContext)\n .then(result => {\n if (!StringExtensions.isNullOrWhitespace(result.Id)) {\n this.setState({ productListId: result.Id });\n return result.Id;\n }\n return '';\n })\n .catch((error: Error) => {\n telemetry.debug('[quick-order-grid] Error on creating productlist from quick order grid');\n telemetry.error(error.message);\n this._updateStatusState(quickOrderGridAddedToGridFailureMessage, this._errorCssClass, this._errorCssGlyphClass, true);\n return '';\n });\n return '';\n }\n\n return productListId;\n };\n\n /**\n * Method to create product list.\n * @param messageText - Message Text.\n * @param statusCssString - Css class names.\n * @param messageGlyph - Glyph string.\n * @param isOpen - Flag to show.\n */\n private readonly _updateStatusState = (messageText: string, statusCssString: string, messageGlyph: string, isOpen: boolean): void => {\n this.setState({\n // eslint-disable-next-line react/no-unused-state -- Showing user message in Form component.\n stateMessage: {\n messageText,\n statusCssString,\n messageGlyph,\n isOpen\n }\n });\n };\n}\nexport default QuickOrderGrid;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IErrorState } from '@msdyn365-commerce/components';\nimport { SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { IDimensionForSelectedVariant, OrderTemplateLine } from '@msdyn365-commerce-modules/retail-actions';\n\nimport { QuickOrderGridProduct } from './quick-order-grid-product';\n\n/**\n * QuickOrderGrid state message Interface.\n */\nexport interface IQuickOrderGridStateMessage {\n isOpen: boolean;\n messageGlyph: string;\n messageText: string;\n statusCssString: string;\n}\n\n/**\n * QuickOrderGrid state Interface.\n */\nexport interface IQuickOrderGridState {\n isQuickOrderGridFormExpanded: boolean;\n isUpdatingDimension?: boolean;\n productResponse: SimpleProduct | undefined;\n productDimensions: IDimensionForSelectedVariant[] | undefined;\n min: number | undefined;\n max: number | undefined;\n quantity: number;\n stateMessage?: IQuickOrderGridStateMessage;\n topStateMessage?: IQuickOrderGridStateMessage;\n productDimensionErrorState: IErrorState;\n isMobile: boolean;\n products: OrderTemplateLine[];\n productListId: string;\n}\n\n/**\n * QuickOrder Grid Row view.\n */\nexport interface IQuickOrderGridRowViewModel extends OrderTemplateLine {\n isChecked: boolean;\n}\n\n/**\n * Interface for quick order callbacks.\n */\nexport interface IQuickOrderGridRowCallbacks {\n onRemoveItem(line: QuickOrderGridProduct): void;\n onChangeQuantity(orderTemplateLineId: string | undefined, quantity: number): boolean;\n}\n\n/**\n * Interface for quick order grid action view props.\n */\nexport interface IQuickOrderGridActionsViewProps {\n addProductListToBag: React.ReactNode;\n removeProductList?: React.ReactNode;\n userMessage?: React.ReactNode;\n}\n\nexport const RetailDefaultOrderQuantityLimitsFeatureName: string = 'Dynamics.AX.Application.RetailDefaultOrderQuantityLimitsFeature';\n\nexport const EcommerceQuantityLimitConfigurationsFeatureName: string =\n 'Dynamics.AX.Application.EcommerceQuantityLimitConfigurationsFeature';\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport { Address, AddressPurpose, CountryRegionInfo, StateProvinceInfo } from '@msdyn365-commerce/retail-proxy';\r\nimport { format as formatNotification, getTelemetryObject, IModuleProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport { action, observable, reaction, set } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\n\r\nimport { AutoSuggest } from '@msdyn365-commerce-modules/address';\r\nimport { IAutoSuggestOptions } from '@msdyn365-commerce-modules/address';\r\nimport { AddressCommon } from '@msdyn365-commerce-modules/address';\r\nimport { AddressFormat } from '@msdyn365-commerce-modules/address';\r\nimport { AddressItemType } from '@msdyn365-commerce-modules/address';\r\nimport { AddressMetaData } from '@msdyn365-commerce-modules/address';\r\nimport { AddressOperation, AddressType, IAddressResource, IAddressResponse } from '@msdyn365-commerce-modules/address';\r\nimport { AddressAddUpdate, IAddressAddUpdateProps } from '@msdyn365-commerce-modules/address';\r\nimport { AddressList, IAddressListProps } from '@msdyn365-commerce-modules/address';\r\nimport { IB2bAccountManagementAddressData } from './b2b-account-management-address.data';\r\nimport { IB2bAccountManagementAddressProps } from './b2b-account-management-address.props.autogenerated';\r\n\r\n/**\r\n * Account management address view state interface.\r\n */\r\nexport interface IAccountManagementAddressViewState {\r\n isShowAddresList: boolean;\r\n isShowAddOrUpdateAddress: boolean;\r\n}\r\n\r\n/**\r\n * Account management address view state interface.\r\n */\r\nexport interface IAccountManagementAddressViewProps\r\n extends React.Component> {\r\n className: string;\r\n currentOperation: AddressOperation;\r\n selectedAddress?: Address;\r\n addUpdateAddress: Address;\r\n countryRegionId: string;\r\n stateProvinceInfo?: StateProvinceInfo[];\r\n customerAddresses: Address[];\r\n validationError: object;\r\n addressActionResponse?: IAddressResponse;\r\n viewState: IAccountManagementAddressViewState;\r\n AccountAddressManagement: IModuleProps;\r\n isUpdating: boolean;\r\n showAddressList: IAddressListProps;\r\n showAddOrUpdateAddress: IAddressAddUpdateProps;\r\n screenReaderNotification: React.ReactNode;\r\n shouldRenderEditAddressButton: boolean;\r\n}\r\n\r\n/**\r\n *\r\n * Address component.\r\n * @extends {React.Component>}\r\n */\r\n@observer\r\nclass AccountManagementAddress extends React.Component> {\r\n @observable private currentOperation: AddressOperation;\r\n\r\n @observable private selectedAddress?: Address;\r\n\r\n @observable private countryRegionId: string = 'USA';\r\n\r\n @observable private stateProvinceInfo?: StateProvinceInfo[];\r\n\r\n @observable private customerAddresses: Address[];\r\n\r\n @observable private addUpdateAddress: Address;\r\n\r\n @observable private validationError: object;\r\n\r\n @observable private addressActionResponse?: IAddressResponse;\r\n\r\n @observable private isUpdating?: boolean;\r\n\r\n @observable private hasError?: boolean;\r\n\r\n @observable private removeAddressData?: Address;\r\n\r\n private readonly addressCommon: AddressCommon;\r\n\r\n private addressFormat: AddressFormat;\r\n\r\n private countryRegions: CountryRegionInfo[] = [];\r\n\r\n private addressPurposes: AddressPurpose[] = [];\r\n\r\n private readonly resources: IAddressResource;\r\n\r\n private readonly defaultAddressType: number = 6; // Default to Home\r\n\r\n private readonly telemetryContent: ITelemetryContent;\r\n\r\n private autoSuggest?: AutoSuggest;\r\n\r\n public constructor(props: IB2bAccountManagementAddressProps) {\r\n super(props);\r\n const { context, data, resources, telemetry } = this.props;\r\n\r\n this.resources = resources;\r\n this.currentOperation = AddressOperation.List;\r\n this.countryRegions = data.countryRegions.result || [];\r\n this.addressPurposes = data.addressPurposes.result || [];\r\n this.customerAddresses = data.address.result || [];\r\n this.addUpdateAddress = {};\r\n this.validationError = {};\r\n this.addressCommon = new AddressCommon(context, resources, telemetry);\r\n this.addressFormat = new AddressFormat(\r\n this.countryRegions,\r\n new AddressMetaData({ ...resources }, this._getAddressFormatExcludeList()),\r\n // Filter out the Invoice address for the add/update form\r\n this.addressPurposes.filter((address: AddressPurpose) => address.AddressType !== 1)\r\n );\r\n this.telemetryContent = getTelemetryObject(\r\n this.props.context.request.telemetryPageName!,\r\n this.props.friendlyName,\r\n this.props.telemetry\r\n );\r\n }\r\n\r\n /**\r\n * On Suggestion Selected Function.\r\n * @param result - Microsoft.Maps.ISuggestionResult.\r\n */\r\n @action\r\n private readonly _onSuggestionSelected = async (result: Microsoft.Maps.ISuggestionResult): Promise => {\r\n this._clearAddressFields();\r\n const address = this.addressFormat.getTranformedAddress(result, this.stateProvinceInfo);\r\n set(this.addUpdateAddress, { Street: '' });\r\n set(this.addUpdateAddress, { ZipCode: address.ZipCode });\r\n set(this.addUpdateAddress, { CountyName: address.CountyName });\r\n set(this.addUpdateAddress, { City: address.City });\r\n set(this.addUpdateAddress, { State: address.State });\r\n set(this.addUpdateAddress, { DistrictName: address.DistrictName });\r\n set(this.addUpdateAddress, { FullAddress: address.FullAddress });\r\n\r\n // Bing autosuggest put the complete address in the Street input box. Updating the street input box to show only street address.\r\n setTimeout(() => {\r\n set(this.addUpdateAddress, { Street: address.Street });\r\n }, 0);\r\n };\r\n\r\n /**\r\n * Clear Address Fields.\r\n */\r\n @action\r\n private readonly _clearAddressFields = (): void => {\r\n const addressFormatItem = this.addressFormat.getAddressFormat(\r\n this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId\r\n );\r\n addressFormatItem.forEach(format => {\r\n if (this.addUpdateAddress[format.name] !== undefined && !this.autoSuggest?.excludedAddressFields.includes(format.name)) {\r\n this.addressFormat[format.name] = '';\r\n }\r\n });\r\n this._clearValidation();\r\n };\r\n\r\n /**\r\n * Clear Validation Function.\r\n */\r\n @action\r\n private readonly _clearValidation = (): void => {\r\n this.validationError = {};\r\n };\r\n\r\n public async componentDidMount(): Promise {\r\n const {\r\n context: {\r\n telemetry,\r\n actionContext: {\r\n requestContext: { channel }\r\n }\r\n },\r\n config: { autoSuggestionEnabled, autoSuggestOptions }\r\n } = this.props;\r\n\r\n // Initializing data props\r\n this._dataInitialize(this.props);\r\n\r\n void this.props.data.countryRegions.then(() => {\r\n this._setDefaultCountryRegionId();\r\n });\r\n\r\n reaction(\r\n () => this.countryRegionId,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.currentOperation,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n if (autoSuggestionEnabled) {\r\n if (channel && !channel.BingMapsApiKey) {\r\n telemetry.error('BingMapsApiKey is missing.');\r\n return;\r\n }\r\n\r\n if (channel && !channel.BingMapsEnabled) {\r\n telemetry.error('Map is disabled from HQ.');\r\n return;\r\n }\r\n\r\n const options: IAutoSuggestOptions = { ...autoSuggestOptions };\r\n this.autoSuggest = new AutoSuggest(\r\n telemetry,\r\n options,\r\n channel?.BingMapsApiKey,\r\n channel?.ChannelCountryRegionISOCode,\r\n channel?.DefaultLanguageId\r\n );\r\n\r\n reaction(\r\n () =>\r\n this.props.data.storeSelectorStateManager.result?.loadMapApi !== undefined &&\r\n (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update),\r\n async () => {\r\n await this.autoSuggest?._loadMapAPI(await this.props.data.storeSelectorStateManager);\r\n }\r\n );\r\n\r\n reaction(\r\n () => {\r\n this.props.data.storeSelectorStateManager.result?.isMapApiLoaded;\r\n },\r\n async () => {\r\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\r\n await this._attachMapAutoSuggest();\r\n }\r\n }\r\n );\r\n }\r\n }\r\n\r\n /**\r\n * Component did mount function.\r\n */\r\n public async componentDidUpdate(): Promise {\r\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\r\n if (this.props.data.storeSelectorStateManager.result?.isMapApiLoaded) {\r\n await this._attachMapAutoSuggest();\r\n }\r\n } else {\r\n this.autoSuggest?.disposeAutoSuggest();\r\n }\r\n }\r\n\r\n /**\r\n * Should component update function.\r\n * @param nextProps - Account management address props.\r\n * @param nextState - Next state.\r\n * @returns - True if component should update, false otherwise.\r\n */\r\n public shouldComponentUpdate(\r\n nextProps: IB2bAccountManagementAddressProps,\r\n nextState: IAccountManagementAddressViewState\r\n ): boolean {\r\n if (this.state === nextState && this.props.data === nextProps.data) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n public render(): JSX.Element {\r\n const { renderView, config } = this.props;\r\n\r\n const viewProps = {\r\n ...this.props,\r\n currentOperation: this.currentOperation,\r\n selectedAddress: this.selectedAddress,\r\n addUpdateAddress: this.addUpdateAddress,\r\n countryRegionId: this.countryRegionId,\r\n stateProvinceInfo: this.stateProvinceInfo,\r\n customerAddresses: this.customerAddresses,\r\n validationError: this.validationError,\r\n addressActionResponse: this.addressActionResponse,\r\n isUpdating: this.isUpdating,\r\n hasError: this.hasError,\r\n className: config.className,\r\n viewState: {\r\n isShowAddresList: this.currentOperation === AddressOperation.List,\r\n isShowAddOrUpdateAddress: this.currentOperation !== AddressOperation.List\r\n },\r\n AccountAddressManagement: {\r\n moduleProps: this.props,\r\n className: classnames('ms-account-management-address', config.className)\r\n },\r\n showAddressList: this._renderListAddress(),\r\n showAddOrUpdateAddress: this._renderAddOrUpdateAddress(),\r\n screenReaderNotification: this.removeAddressData ? this._renderScreenReaderRemoveText(this.removeAddressData) : null,\r\n shouldRenderEditAddressButton: this.props.config.enableEditAddress\r\n };\r\n\r\n return renderView(viewProps) as React.ReactElement;\r\n }\r\n\r\n /**\r\n * Method data initialization.\r\n * @param props -The account management props.\r\n */\r\n private readonly _dataInitialize = (props: IB2bAccountManagementAddressProps): void => {\r\n const { data } = props;\r\n\r\n reaction(\r\n () => data.countryRegions.result,\r\n () => {\r\n this.countryRegions = data.countryRegions.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.addressPurposes.result,\r\n () => {\r\n this.addressPurposes = data.addressPurposes.result ?? [];\r\n }\r\n );\r\n\r\n reaction(\r\n () => data.address.result,\r\n () => {\r\n this.customerAddresses = data.address.result ?? [];\r\n }\r\n );\r\n };\r\n\r\n /**\r\n * Render Add Or Update Address Function.\r\n * @returns - AddressAddUpdate.\r\n */\r\n private readonly _renderAddOrUpdateAddress = (): IAddressAddUpdateProps => {\r\n return AddressAddUpdate({\r\n isUpdating: this.isUpdating,\r\n resources: this.resources,\r\n addressType: AddressType.Shipping,\r\n addressFormat: this.addressFormat.getAddressFormat(this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId),\r\n defaultCountryRegionId: this.countryRegionId,\r\n defaultAddressType: this.defaultAddressType,\r\n selectedAddress: this.addUpdateAddress,\r\n validationError: this.validationError,\r\n addressActionResponse: this.addressActionResponse,\r\n dropdownDisplayData: this.addressFormat.getPrefilledAddressDropdownData(\r\n this.resources.addressStateDefaultSelectionText,\r\n this.stateProvinceInfo\r\n ),\r\n telemetryContent: this.telemetryContent,\r\n onInputChange: this._onAddressAddUpdateInputChange,\r\n onDropdownChange: this._onAddressAddUpdateDropdownChange,\r\n onSave: this._onAddressAddUpdateSubmit,\r\n onCancel: this._resetView\r\n });\r\n };\r\n\r\n /**\r\n * Render List Address Function.\r\n * @returns - AddressList.\r\n */\r\n private readonly _renderListAddress = (): IAddressListProps => {\r\n const { config } = this.props;\r\n\r\n /**\r\n * Render Address ttitle.\r\n * @param event - Msdyn365.ContentEditableEvent.\r\n */\r\n const handleLineItemHeadingChange = (event: Msdyn365.ContentEditableEvent) => {\r\n config.heading!.text = event.target.value;\r\n };\r\n const heading = config.heading && {\r\n text: config.heading.text,\r\n headingTag: config.heading.tag\r\n };\r\n\r\n return AddressList({\r\n isUpdating: this.isUpdating,\r\n selectedAddress: this.selectedAddress,\r\n addressFormat: this.addressFormat,\r\n addresses: this.customerAddresses,\r\n addressPurposes: this.addressPurposes,\r\n resources: this.resources,\r\n heading,\r\n primaryAddressSectionHeading: config.primaryAddressSectionHeading,\r\n otherAddressSectionHeading: config.otherAddressSectionHeading,\r\n contextRequest: this.props.context.request,\r\n telemetryContent: this.telemetryContent,\r\n handleLineItemHeadingChange,\r\n onEditAddress: this._goToEditAddress,\r\n onRemoveAddress: this._onRemoveAddress,\r\n onAddAddress: this._goToAddAddress,\r\n onUpdatePrimaryAddress: this._onSubmitUpdatePrimaryAddress\r\n });\r\n };\r\n\r\n /**\r\n * Attach Map Auto Suggest Function.\r\n */\r\n private readonly _attachMapAutoSuggest = async (): Promise => {\r\n const {\r\n data: {\r\n storeSelectorStateManager: { result: storeSelectorStateManager }\r\n }\r\n } = this.props;\r\n\r\n if (storeSelectorStateManager?.isMapApiLoaded) {\r\n this.autoSuggest?.attachAutoSuggest('#shipping_addressstreet', '#shipping_addressstreet_container', this._onSuggestionSelected);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Add Update Function.\r\n * @param name - String.\r\n * @param value - String | Boolean | Number.\r\n */\r\n private readonly onAddressAddUpdate = (name: string, value: string | boolean | number) => {\r\n set(this.addUpdateAddress, { [name]: value });\r\n this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId, name);\r\n };\r\n\r\n /**\r\n * On Address Add Update Input Change.\r\n * @param event - Input Change Event.\r\n */\r\n private readonly _onAddressAddUpdateInputChange = (event: React.ChangeEvent): void => {\r\n if (event.target.type === 'checkbox') {\r\n this.onAddressAddUpdate(event.target.name, event.target.checked);\r\n } else {\r\n const value = (event.target.value || '').replace(new RegExp('[<>]', 'gi'), '');\r\n this.onAddressAddUpdate(event.target.name, value);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Add Update Dropdown Change.\r\n * @param event - Dropdown Change Event.\r\n */\r\n private readonly _onAddressAddUpdateDropdownChange = (event: React.ChangeEvent): void => {\r\n if (event.target.name === AddressItemType[AddressItemType.AddressTypeValue]) {\r\n this.onAddressAddUpdate(event.target.name, +event.target.value);\r\n } else {\r\n this.onAddressAddUpdate(event.target.name, event.target.value);\r\n }\r\n if (event.target.name === AddressItemType[AddressItemType.ThreeLetterISORegionName]) {\r\n this._onCountryChange(event.target.value);\r\n }\r\n };\r\n\r\n /**\r\n * On Address Update Function.\r\n * @param response - Promise.\r\n * @param onSuccess - IAddressResponse.\r\n */\r\n private readonly _onAddressUpdate = (response: Promise, onSuccess: (response: IAddressResponse) => void): void => {\r\n this.isUpdating = true;\r\n response.then(\r\n (result: IAddressResponse) => {\r\n if (result.address) {\r\n this.hasError = false;\r\n onSuccess(result);\r\n } else {\r\n this.hasError = true;\r\n this.addressActionResponse = result;\r\n }\r\n this.isUpdating = false;\r\n },\r\n () => {\r\n this.hasError = true;\r\n this.isUpdating = false;\r\n }\r\n );\r\n };\r\n\r\n /**\r\n * On Address Add Update Submit Function.\r\n */\r\n private readonly _onAddressAddUpdateSubmit = (): void => {\r\n if (!this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId)) {\r\n return;\r\n }\r\n let response: Promise;\r\n if (this.addressCommon.isAuthenticatedFlow()) {\r\n response =\r\n this.currentOperation === AddressOperation.Update\r\n ? this.addressCommon.updateCustomerAddress(this.addUpdateAddress)\r\n : this.addressCommon.addCustomerAddress(this.addUpdateAddress);\r\n } else {\r\n response = Promise.resolve({ address: this.addUpdateAddress });\r\n }\r\n\r\n this._onAddressUpdate(response, this._onAddOrUpdateSuccess);\r\n };\r\n\r\n /**\r\n * On Country Change Function.\r\n * @param countryRegionId - String.\r\n */\r\n private readonly _onCountryChange = (countryRegionId: string) => {\r\n this.countryRegionId = countryRegionId;\r\n const twoLetterISORegionName = this.addressFormat.getTwoLetterISORegionName(countryRegionId);\r\n set(this.addUpdateAddress, { ThreeLetterISORegionName: countryRegionId });\r\n set(this.addUpdateAddress, { TwoLetterISORegionName: twoLetterISORegionName });\r\n this.autoSuggest?.changeAutoSuggestionCountryCode(twoLetterISORegionName);\r\n this._clearAddressFields();\r\n };\r\n\r\n /**\r\n * Get Address Format Exclude List Function.\r\n * @returns - Address Format Exclude List.\r\n */\r\n private readonly _getAddressFormatExcludeList = (): AddressItemType[] => {\r\n const { config } = this.props;\r\n const addressFormatExcludeList: AddressItemType[] = [];\r\n\r\n if (!config.showAddressType) {\r\n addressFormatExcludeList.push(AddressItemType.AddressTypeValue);\r\n }\r\n\r\n addressFormatExcludeList.push(AddressItemType.IsPrimary);\r\n\r\n return addressFormatExcludeList;\r\n };\r\n\r\n /**\r\n * Get State Provinces Function.\r\n */\r\n private readonly _getStateProvinces = (): void => {\r\n if (\r\n !this.countryRegionId ||\r\n !(this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update)\r\n ) {\r\n return;\r\n }\r\n\r\n void this.addressCommon.getStateProvinces(this.countryRegionId).then((result: StateProvinceInfo[]) => {\r\n const stateInfo = result.some(state => state.StateId === this.addUpdateAddress.State);\r\n\r\n // Reset state if selected state not found in the list.\r\n if (!stateInfo) {\r\n set(this.addUpdateAddress, { State: '' });\r\n }\r\n this.stateProvinceInfo = result;\r\n });\r\n };\r\n\r\n private _setDefaultCountryRegionId(): void {\r\n const { request } = this.props.context;\r\n const market = request && request.channel && request.channel.ChannelCountryRegionISOCode;\r\n\r\n this.countryRegionId = this.addressCommon.getDefaultCountryRegionId(this.countryRegionId, this.countryRegions, market);\r\n }\r\n\r\n /**\r\n * Update CurrentOperation Function.\r\n * @param operation - AddressOperation.\r\n */\r\n private readonly _updateCurrentOperation = (operation: AddressOperation) => {\r\n this.currentOperation = operation;\r\n this._clearAddressFields();\r\n };\r\n\r\n /**\r\n * On Submit Update Primary Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _onSubmitUpdatePrimaryAddress = (address: Address): void => {\r\n this.selectedAddress = address;\r\n const response = this.addressCommon.updateCustomerPrimaryAddress(address);\r\n this._onAddressUpdate(response, this._onUpdatePrimaryAddressSuccess);\r\n };\r\n\r\n /**\r\n * Go To Edit Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _goToEditAddress = (address: Address): void => {\r\n this.addUpdateAddress = { ...address };\r\n this.countryRegionId = this.addUpdateAddress.ThreeLetterISORegionName || 'USA';\r\n this._updateCurrentOperation(AddressOperation.Update);\r\n };\r\n\r\n /**\r\n * On Remove Address Function.\r\n * @param address - Address.\r\n */\r\n private readonly _onRemoveAddress = (address: Address): void => {\r\n address.Deactivate = true;\r\n this.removeAddressData = address;\r\n const response = this.addressCommon.updateCustomerAddress(address);\r\n this._onAddressUpdate(response, this._onAddOrUpdateSuccess);\r\n };\r\n\r\n /**\r\n * Renders Notification screen reader text for removed address.\r\n * @param address - Address input.\r\n * @returns Notification for removed address.\r\n */\r\n private readonly _renderScreenReaderRemoveText = (address: Address): React.ReactNode => {\r\n const notification = formatNotification(this.resources.removeAddressNotification!, `${address.Name!}`);\r\n return (\r\n \r\n {notification}\r\n
\r\n );\r\n };\r\n\r\n /**\r\n * Go To Add Address Function.\r\n */\r\n private readonly _goToAddAddress = (): void => {\r\n this.addUpdateAddress = {};\r\n this._setDefaultCountryRegionId();\r\n set(this.addUpdateAddress, { ThreeLetterISORegionName: this.countryRegionId });\r\n set(this.addUpdateAddress, { AddressTypeValue: this.defaultAddressType });\r\n this._setDefaultCountryRegionId();\r\n this._updateCurrentOperation(AddressOperation.Add);\r\n };\r\n\r\n /**\r\n * On Add Or Update Success Function.\r\n * @param response - IAddressResponse.\r\n */\r\n private readonly _onAddOrUpdateSuccess = (response: IAddressResponse): void => {\r\n if (response.customerAddresses) {\r\n this.customerAddresses = response.customerAddresses;\r\n }\r\n this._resetView();\r\n };\r\n\r\n /**\r\n * On Update Primary Address Success Function.\r\n * @param response - IAddressResponse.\r\n */\r\n private readonly _onUpdatePrimaryAddressSuccess = (response: IAddressResponse): void => {\r\n if (response.customerAddresses) {\r\n this.customerAddresses = response.customerAddresses;\r\n }\r\n };\r\n\r\n /**\r\n * Reset view function.\r\n */\r\n private readonly _resetView = (): void => {\r\n this.selectedAddress = undefined;\r\n this._updateCurrentOperation(AddressOperation.List);\r\n };\r\n}\r\n\r\nexport default AccountManagementAddress;\r\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\nimport { IGiftCardExtend } from '@msdyn365-commerce/global-state';\r\nimport { Address, AddressPurpose, CountryRegionInfo, StateProvinceInfo } from '@msdyn365-commerce/retail-proxy';\r\nimport { IModuleStateProps, withModuleState } from '@msdyn365-commerce-modules/checkout-utilities';\r\nimport { IModuleProps } from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport { computed, observable, reaction, set } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\n\r\nimport {\r\n AddressBillingHeading,\r\n AddressCommon,\r\n AddressFormat,\r\n AddressItemType,\r\n AddressMetaData,\r\n AddressOperation,\r\n AddressShow,\r\n IAddressAddUpdateProps,\r\n IAddressResponse,\r\n IAddressShowProps\r\n} from '@msdyn365-commerce-modules/address';\r\nimport { IB2bCheckoutBillingAddressData } from './b2b-checkout-billing-address.data';\r\nimport { IB2bCheckoutBillingAddressProps } from './b2b-checkout-billing-address.props.autogenerated';\r\n\r\n/**\r\n * Props interface.\r\n */\r\nexport interface IProps extends IB2bCheckoutBillingAddressProps, IModuleStateProps {}\r\n\r\nexport interface ICheckoutState {\r\n errorMessage: string | undefined;\r\n}\r\n\r\n/**\r\n * Checkout billing address view state interface.\r\n */\r\nexport interface ICheckoutBillingAddressViewState {\r\n isShowAddress: boolean;\r\n isError: boolean;\r\n}\r\n\r\n/**\r\n * Checkout billing address view props interface.\r\n */\r\nexport interface ICheckoutBillingAddressViewProps extends IProps {\r\n className: string;\r\n currentOperation: AddressOperation;\r\n selectedAddress?: Address;\r\n addUpdateAddress: Address;\r\n countryRegionId: string;\r\n stateProvinceInfo?: StateProvinceInfo[];\r\n validationError: object;\r\n addressActionResponse?: IAddressResponse;\r\n viewState: ICheckoutBillingAddressViewState;\r\n CheckoutBillingAddress: IModuleProps;\r\n sameAsShippingCheckbox: React.ReactNode;\r\n heading: React.ReactNode;\r\n showAddress: IAddressShowProps;\r\n showAddOrUpdateAddress: IAddressAddUpdateProps;\r\n error: React.ReactNode;\r\n}\r\n\r\n/**\r\n *\r\n * CheckoutBillingAddress component.\r\n * @extends {React.PureComponent>}\r\n */\r\n// @ts-expect-error\r\n@withModuleState\r\n@observer\r\nclass CheckoutBillingAddress extends React.Component {\r\n @observable private currentOperation: AddressOperation;\r\n\r\n @observable private isBillingAddressSameAsShipping: boolean;\r\n\r\n @observable private selectedAddress?: Address;\r\n\r\n @observable private addUpdateAddress: Address;\r\n\r\n @observable private countryRegionId: string = 'USA';\r\n\r\n @observable private stateProvinceInfo?: StateProvinceInfo[];\r\n\r\n @observable private validationError: object;\r\n\r\n @observable private readonly addressActionResponse?: IAddressResponse;\r\n\r\n private readonly addressCommon: AddressCommon;\r\n\r\n private addressFormat: AddressFormat;\r\n\r\n private countryRegions: CountryRegionInfo[] = [];\r\n\r\n private addressPurposes: AddressPurpose[] = [];\r\n\r\n private addresses: Address[];\r\n\r\n private readonly defaultAddressType: number = 6; // Default to Home\r\n\r\n public constructor(props: IProps) {\r\n super(props);\r\n this.state = { errorMessage: undefined };\r\n const { context, data, resources, telemetry } = this.props;\r\n\r\n this.addUpdateAddress = {};\r\n this.validationError = {};\r\n this.isBillingAddressSameAsShipping = false;\r\n this.currentOperation = AddressOperation.List;\r\n this.addressPurposes = data.addressPurposes.result || [];\r\n this.addresses = data.address.result || [];\r\n this.countryRegions = data.countryRegions.result || [];\r\n this.stateProvinceInfo = data.countryStates.result || [];\r\n this.addressCommon = new AddressCommon(context, resources, telemetry);\r\n this.addressFormat = new AddressFormat(\r\n this.countryRegions,\r\n new AddressMetaData({ ...resources }, this._getAddressFormatExcludeList()),\r\n this.addressPurposes\r\n );\r\n }\r\n\r\n public async componentDidMount(): Promise {\r\n // Initializing data props\r\n\r\n this._dataInitialize(this.props);\r\n\r\n void this.props.data.checkout.then(() => {\r\n this._setDefaultCountryRegionId();\r\n this._initModuleState();\r\n });\r\n\r\n reaction(\r\n () => this.countryRegionId,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.currentOperation,\r\n () => {\r\n this._getStateProvinces();\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.props.data.checkout.result && this.props.data.checkout.result.shippingAddress,\r\n shippingAddress => {\r\n if (this.props.moduleState.isUpdating) {\r\n if (shippingAddress && this.isBillingAddressSameAsShipping) {\r\n this._updateCurrentOperation(AddressOperation.Show, shippingAddress);\r\n } else if (shippingAddress && this.isBillingAddressSameAsShipping) {\r\n this._updateCurrentOperation(AddressOperation.Show, shippingAddress);\r\n }\r\n }\r\n }\r\n );\r\n\r\n reaction(\r\n () => this.isBillingAddressRequried,\r\n isBillingAddressRequried => {\r\n if (!isBillingAddressRequried) {\r\n this.props.data.checkout.result?.removeBillingAddress({});\r\n this.props.moduleState.onDisable();\r\n }\r\n }\r\n );\r\n }\r\n\r\n public shouldComponentUpdate(nextProps: IProps, nextState: ICheckoutState): boolean {\r\n if (this.state === nextState && this.props.data === nextProps.data) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n if (!this.isBillingAddressRequried) {\r\n return null;\r\n }\r\n\r\n const { resources } = this.props;\r\n const { renderView, config } = this.props;\r\n\r\n const viewProps = {\r\n ...this.props,\r\n currentOperation: this.currentOperation,\r\n selectedAddress: this.props.moduleState.hasError ? undefined : this.selectedAddress,\r\n addUpdateAddress: this.props.moduleState.hasError ? undefined : this.addUpdateAddress,\r\n countryRegionId: this.countryRegionId,\r\n stateProvinceInfo: this.stateProvinceInfo,\r\n validationError: this.validationError,\r\n addressActionResponse: this.addressActionResponse,\r\n className: config.className,\r\n viewState: {\r\n isShowAddress: this.selectedAddress && this.currentOperation === AddressOperation.Show && !this.props.moduleState.hasError,\r\n isError: this.props.moduleState.hasError\r\n },\r\n CheckoutBillingAddress: {\r\n moduleProps: this.props,\r\n className: classnames('ms-checkout-billing-address', config.className)\r\n },\r\n heading: