=> {\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 * Gets the checkout URL.\n * @param isAuthenticated - Is authenticated flag.\n * @param guestCheckoutUrl - Guest checkout URL.\n * @param signInUrl -The sign in URL.\n * @returns The checkout URL.\n */\n private readonly getCheckoutUrl = (isAuthenticated: boolean, guestCheckoutUrl: string, signInUrl: string): string => {\n if (isAuthenticated) {\n return guestCheckoutUrl;\n }\n\n // eslint-disable-next-line security/detect-unsafe-regex,require-unicode-regexp -- ignore.\n const absoluteUrlRegExp = new RegExp('^(?:[a-z]+:)?//', 'i');\n const isAbsoluteUrl = absoluteUrlRegExp.test(guestCheckoutUrl);\n let returnUrl = guestCheckoutUrl;\n if (MsDyn365.isBrowser && !isAbsoluteUrl) {\n returnUrl = `${window.location.origin}${guestCheckoutUrl}`;\n }\n\n return `${signInUrl}${!signInUrl.includes('?') ? '?' : '&'}ru=${returnUrl}`;\n };\n}\n\nexport default CheckoutExpress;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IModule } from '@msdyn365-commerce/core';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport isMatch from 'lodash/isMatch';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { getModuleStates, updateModuleStates } from './module-state';\nimport { IModuleState, IModuleStateManager, IModuleStateProps, IModuleStates } from './module-state.data';\n\nexport interface IProps extends IModule, IModuleStateProps {\n enableControl?: boolean;\n}\n\nconst sectionContainerModuleId = 'section-container';\nconst paymentInstrumentModuleId = 'payment-instrument';\n\nconst withModuleState = (WrappedComponent: React.ComponentType
): React.ComponentType
=> {\n /**\n *\n * ModuleState component.\n * @extends {React.Component
}\n */\n @observer\n class ModuleState extends React.Component
{\n constructor(props: P) {\n super(props);\n this.initializeState();\n }\n\n public shouldComponentUpdate(nextProps: IModuleStateProps): boolean {\n if (this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | null {\n const { id } = this.props;\n return ;\n }\n\n private readonly initializeState = (): void => {\n const { id, typeName, context } = this.props;\n const states = getModuleStates(context.actionContext);\n if (!states) {\n this.props.telemetry.error('withModuleState initializeState() - states not found');\n return;\n }\n\n if (states[id]) {\n // State has been initialized\n return;\n }\n\n updateModuleStates(\n {\n ...states,\n [id]: {\n id,\n typeName,\n hasInitialized: false,\n hasError: false,\n isRequired: true,\n isCancellable: true,\n isSubmitContainer: false,\n status: undefined,\n childIds: []\n }\n },\n context.actionContext\n );\n };\n\n /**\n * GetModuleStateManager\n * Get module state manager by id.\n * @param id\n */\n private readonly getModuleStateManager = (id: string): IModuleStateManager => {\n const moduleState = this.get()[id];\n return {\n ...moduleState!,\n hasInitialized: this.validate(id, { hasInitialized: true }, true), // All has initialized is initialized\n hasError: this.validate(id, { hasError: true }), // Partial has error is error\n isReady: this.validate(id, { status: 'ready' }, true, true), // All ready is ready (exclued disabled and skipped)\n isUpdating: this.validate(id, { status: 'updating' }), // Partial updating is updating\n isPending: this.validate(id, { status: 'pending' }), // Partial pending is pending\n isSkipped: this.validate(id, { status: 'skipped' }, true, true), // All skipped is skipped (exclued disabled)\n isDisabled: this.validate(id, { status: 'disabled' }, true), // All disabled is disabled\n isCancelAllowed: this.validate(id, { isCancellable: true }, true, true), // Partial not allowed is not allowed\n shouldSubmitContainer: this.validate(id, { isSubmitContainer: true }), // Partial submit is submit.\n hasExternalSubmitGroup: this.hasExternalSubmitGroup(),\n hasModuleState: this.hasModuleState(id),\n setIsRequired: (value: boolean): void => {\n this.update(id, { isRequired: value });\n },\n setIsCancellable: (value: boolean): void => {\n this.update(id, { isCancellable: value });\n },\n setIsSubmitContainer: (value: boolean): void => {\n this.update(id, { isSubmitContainer: value });\n },\n setHasError: (value: boolean): void => {\n this.update(id, { hasError: value });\n },\n onReady: (): void => {\n this.update(id, { status: 'ready' });\n },\n onUpdating: (): void => {\n this.update(id, { status: 'updating' });\n },\n onPending: (): void => {\n this.update(id, { status: 'pending' });\n },\n onSkip: (): void => {\n this.update(id, { status: 'skipped' });\n },\n onDisable: (): void => {\n this.update(id, { status: 'disabled' });\n },\n getModule: (moduleId: string): IModuleStateManager => this.getModuleStateManager(moduleId),\n getModuleByTypeName: (typeName: string): IModuleStateManager => this.getModuleStateManagerByTypeName(typeName),\n init: (options?: Partial): void => {\n if (moduleState?.hasInitialized) {\n // State has been initialized\n return;\n }\n this.update(id, {\n hasInitialized: true,\n ...options\n });\n }\n };\n };\n\n /**\n * GetModuleStateManagerByTypeName\n * Get module state manager by type name.\n * @param typeName\n */\n private readonly getModuleStateManagerByTypeName = (typeName: string): IModuleStateManager => {\n const moduleStates = getModuleStates(this.props.context.actionContext);\n const moduleState = Object.values(moduleStates).find(_moduleState => _moduleState?.typeName === typeName);\n return this.getModuleStateManager((moduleState && moduleState.id) || '');\n };\n\n /**\n * Get\n * Get all module states.\n */\n private readonly get = (): IModuleStates => {\n return getModuleStates(this.props.context.actionContext);\n };\n\n /**\n * Update\n * Update module state.\n * @param id\n * @param value\n */\n private readonly update = (id: string, value: Partial): void => {\n // Console.log('withModuleState - update', id, value);\n const modules = this.get();\n if (!modules[id]) {\n this.props.telemetry.error(`withModuleState update() - Module state with id ${id} is not found.`);\n return;\n }\n modules[id] = {\n ...modules[id]!,\n ...value\n };\n };\n\n private readonly _validateLeaf = (id: string, source: Partial): boolean => {\n const modules = this.get();\n const module = modules[id];\n if (!module) {\n return false;\n }\n return isMatch(module, source);\n };\n\n private readonly _validateContainer = (\n id: string,\n source: Partial,\n allMatched?: boolean,\n skipSkippableItem?: boolean\n ): boolean => {\n const modules = this.get();\n const module = modules[id];\n if (!module) {\n // Module doesn't has module state\n return !!allMatched;\n }\n\n if (skipSkippableItem && (module.status === 'disabled' || module.status === 'skipped')) {\n // Skip disabled or skipped modules\n return !!allMatched;\n }\n\n // It is leaf module\n if (!module.childIds || module.childIds.length === 0) {\n return this._validateLeaf(id, source);\n }\n\n let childIds = module.childIds;\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Do not need type check for appsettings\n if (this.props.context.app.config.shouldEnableSinglePaymentAuthorizationCheckout) {\n // For new checkout flow, we bypass the isReady check for payment section container to enable the place order button.\n childIds = childIds.filter(childId => !this._isPaymentSectionContainer(childId));\n }\n\n // It is container module\n const method = allMatched ? 'every' : 'some';\n return childIds[method](childId => this._validateContainer(childId, source, allMatched, skipSkippableItem));\n };\n\n /**\n * Check if it is a section container with payment module.\n * @param moduleId -- The id of the module.\n * @returns If it is a section container with payment module.\n */\n private readonly _isPaymentSectionContainer = (moduleId: string): boolean => {\n if (!moduleId.includes(sectionContainerModuleId)) {\n return false;\n }\n\n const modules = this.get();\n const module = modules[moduleId];\n\n if (module && ArrayExtensions.hasElements(module.childIds.filter(childId => childId.includes(paymentInstrumentModuleId)))) {\n return true;\n }\n\n return false;\n };\n\n /**\n * Validate\n * Validate current module and all its child module match the provided condition.\n * @param id\n * @param source\n * @param allMatched\n * @param skipSkippableItem\n */\n private readonly validate = (id: string, source: Partial, allMatched?: boolean, skipSkippableItem?: boolean): boolean => {\n const modules = this.get();\n const module = modules[id];\n if (!module) {\n return false;\n }\n\n // It is leaf module\n if (!module.childIds || module.childIds.length === 0) {\n return this._validateLeaf(id, source);\n }\n\n // It is container module\n return this._validateContainer(id, source, allMatched, skipSkippableItem);\n };\n\n /**\n * HasExternalSubmitGroup\n * Module will use external submit group.\n */\n private readonly hasExternalSubmitGroup = (): boolean => {\n return !!this.props.enableControl;\n };\n\n /**\n * HasModuleState\n * Module is using module state manager.\n * @param id\n */\n private readonly hasModuleState = (id: string): boolean => {\n const modules = this.get();\n const module = modules[id];\n return !!module;\n };\n }\n\n return ModuleState;\n};\n\nexport default withModuleState;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Address, AddressPurpose } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { INodeProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { AddressFormat } from '../address-format';\nimport { IAddressResource } from '../address-module.data';\nimport AddressButtonComponent from './address-button';\nimport AddressInputComponent from './address-input';\nimport { AddressShow, IAddressShowProps } from './address-show';\n\nexport interface IAddressSelectInputProps {\n hasExternalSubmitGroup?: boolean;\n addressFormat: AddressFormat;\n addresses: Address[];\n addressPurposes: AddressPurpose[];\n resources: IAddressResource;\n selectedAddress: Address;\n telemetryContent?: ITelemetryContent;\n onAddressOptionChange(event: React.ChangeEvent): void;\n onAddAddress(): void;\n onSave(): void;\n onCancel(): void;\n}\n\nexport interface IAddressSelectItem {\n key: number;\n SelectItem: INodeProps;\n input: React.ReactNode;\n showItems: IAddressShowProps;\n}\n\nexport interface IAddressSelectProps {\n SelectAddress: INodeProps;\n addButton: React.ReactNode;\n items: IAddressSelectItem[];\n isShowSaveButton: boolean;\n saveButton: React.ReactNode;\n isShowCancelButton: boolean;\n cancelButton: React.ReactNode;\n}\n\nconst getInput = (index: number, address: Address, props: IAddressSelectInputProps): React.ReactNode => {\n const { addresses, onAddressOptionChange, selectedAddress, resources } = props;\n\n const ichecked = address.RecordId === selectedAddress.RecordId;\n const additionalAttributes = {\n checked: ichecked,\n 'aria-checked': ichecked,\n 'aria-setsize': addresses.length,\n 'aria-posinset': index + 1,\n 'aria-label': resources.addressChangeCheckboxAriaLabel\n };\n\n return (\n \n );\n};\n\nconst getAddressSelectItems = (props: IAddressSelectInputProps): IAddressSelectItem[] => {\n const { addresses, addressFormat, addressPurposes } = props;\n\n return addresses.map((address, index) => {\n return {\n key: address.RecordId || 0,\n SelectItem: { className: 'msc-address-select__item' },\n input: getInput(index, address, props),\n showItems: AddressShow({ addressFormat: addressFormat.getAddressFormat(address.ThreeLetterISORegionName || ''), address, addressPurposes })\n };\n });\n};\n\nexport const AddressSelect = (props: IAddressSelectInputProps): IAddressSelectProps => {\n const { resources, onCancel, onSave, onAddAddress, hasExternalSubmitGroup } = props;\n\n return {\n SelectAddress: { className: 'msc-address-select' },\n addButton: (\n \n ),\n isShowSaveButton: !hasExternalSubmitGroup,\n saveButton: (\n \n ),\n isShowCancelButton: !hasExternalSubmitGroup,\n cancelButton: (\n \n ),\n items: getAddressSelectItems(props)\n };\n};\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IImageProps, IImageSettings, Image, IRequestContext } from '@msdyn365-commerce/core';\nimport { CartLine, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { format, isMobile, VariantType } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { ICheckoutShippingAddressResources } from '../checkout-shipping-address.props.autogenerated';\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 quantity: number;\n}\n\n/**\n * The checkout shipping cartline props.\n */\nexport interface ICheckoutShippingCartLinesProps {\n moduleClassName: string;\n cartLines: ICheckoutShippingCartLineInfo[];\n title: string;\n itemTitle: string;\n resources: ICheckoutShippingAddressResources;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention -- Following as per module\nexport const CheckoutPickupCartLines: React.FC = ({ moduleClassName, cartLines, title, itemTitle, resources }) => {\n const context = {\n gridSettings: {\n xs: { w: 767 },\n sm: { w: 991 },\n md: { w: 1199 },\n lg: { w: 1599 },\n xl: { w: 1600 }\n }\n } as unknown as IRequestContext;\n const isMobileCheck = isMobile({ variant: VariantType.Browser, context });\n const isMobileView = isMobileCheck === 'xs' || isMobileCheck === 'sm';\n\n if (!ArrayExtensions.hasElements(cartLines)) {\n return null;\n }\n const quantity = 1;\n return (\n \n
\n
\n {title}\n
\n
\n {itemTitle}\n
\n
\n
\n {cartLines.map((cartLine: ICheckoutShippingCartLineInfo) => {\n const isShowQty = cartLine.quantity > quantity;\n let className = `${moduleClassName}__group-images-lines-product`;\n const role = 'text';\n if (isShowQty) {\n className = classnames(className, ' product-image-wide');\n }\n return (\n
\n
\n {isMobileView ? isShowQty &&
\n {cartLine.quantity}\n
: isShowQty &&
\n {cartLine.quantity}\n
}\n {!isMobileView && isShowQty &&
\n {format(resources.productQuantityInfo, cartLine.quantity, cartLine.imageProps.altText)}\n }\n\n
\n );\n })}\n
\n
\n );\n};\n\n/**\n * The checkout shipping cartline image settings.\n */\nexport const defaultImageSettings: IImageSettings = {\n viewports: {\n xs: { q: 'w=108&h=108&q=80&m=6&f=jpg', w: 108, h: 108 },\n lg: { q: 'w=108&h=108&q=80&m=6&f=jpg', w: 108, h: 108 },\n xl: { q: 'w=108&h=108&q=80&m=6&f=jpg', w: 108, h: 108 }\n },\n lazyload: true,\n quality: 80\n};\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Address, AddressPurpose, CartLine, CountryRegionInfo, SimpleProduct, StateProvinceInfo, TenderLine, TokenizedPaymentCard }\n from '@msdyn365-commerce/retail-proxy';\nimport { IModuleStateProps, withModuleState } from '@msdyn365-commerce-modules/checkout-utilities';\nimport { getFallbackImageUrl, getSimpleProducts, ObjectExtensions, ProductInput } from '@msdyn365-commerce-modules/retail-actions';\nimport { format, getTelemetryObject, IModuleProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { action, computed, observable, reaction, set } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { AutoSuggest } from '../../common/address-autosuggest';\nimport { IAutoSuggestOptions } from '../../common/address-autosuggest.data';\nimport { AddressCommon } from '../../common/address-common';\nimport { AddressFormat } from '../../common/address-format';\nimport { AddressItemType } from '../../common/address-format.data';\nimport { AddressMetaData } from '../../common/address-meta-data';\nimport { AddressOperation, AddressType, IAddressResource, IAddressResponse } from '../../common/address-module.data';\nimport { AddressAddUpdate, IAddressAddUpdateProps } from '../../common/components/address-add';\nimport { AddressSelect, IAddressSelectProps } from '../../common/components/address-select';\nimport { AddressShow, IAddressShowProps } from '../../common/components/address-show';\nimport { ICheckoutShippingAddressData } from './checkout-shipping-address.data';\nimport { ICheckoutShippingAddressProps } from './checkout-shipping-address.props.autogenerated';\nimport { CheckoutPickupCartLines, defaultImageSettings, ICartLineWithProduct, ICheckoutShippingCartLineInfo,\n ICheckoutShippingCartLinesProps } from './components/checkout-shipping-cartlines-images';\n\n/**\n * The checkout address props interface.\n */\nexport interface ICheckoutAddressProps extends ICheckoutShippingAddressProps, IModuleStateProps { }\n\n/**\n * The checkout shipping address view state.\n */\nexport interface ICheckoutShippingAddressViewState {\n isShowAddress: boolean;\n isShowAddresList: boolean;\n isShowAddOrUpdateAddress: boolean;\n}\n\n/**\n * The checkout shipping address state.\n */\nexport interface ICheckoutAddresState {\n shippingGroups: ICartLineWithProduct[];\n}\n\n/**\n * The checkout shipping address view props.\n */\nexport interface ICheckoutShippingAddressViewProps extends ICheckoutAddressProps {\n className: string;\n currentOperation: AddressOperation;\n selectedAddress?: Address;\n addUpdateAddress: Address;\n addressListSelectedAddress: Address;\n countryRegionId: string;\n stateProvinceInfo?: StateProvinceInfo[];\n customerAddresses: Address[];\n validationError: object;\n addressActionResponse?: IAddressResponse;\n viewState: ICheckoutShippingAddressViewState;\n CheckoutShippingAddress: IModuleProps;\n isUpdating: boolean;\n hasError: boolean;\n showAddress: IAddressShowProps;\n showAddOrUpdateAddress: IAddressAddUpdateProps;\n cartLineImages?: React.ReactNode;\n showAddressSelect: IAddressSelectProps;\n showAddOrUpdateAddressHandler?(onSaveHandler?: () => void, onCancelHandler?: () => void): IAddressAddUpdateProps;\n showAddressSelectHandler?(onAddAddressHandler?: () => void, onSaveHandler?: () => void, onCancelHandler?: () => void): IAddressSelectProps;\n}\n\n/**\n * IExpressPaymentDetail interface.\n */\ninterface IExpressPaymentDetails {\n email?: string;\n tenderLine?: TenderLine;\n tokenizedPaymentCard?: TokenizedPaymentCard;\n paymentTenderType?: string;\n address?: Address;\n isExpressCheckoutAppliedInCartPage: boolean;\n}\n\n/**\n *\n * Address component.\n * @extends {React.Component>}\n */\n// @ts-expect-error\n@withModuleState\n@observer\nclass CheckoutShippingAddress extends React.Component {\n @observable private currentOperation: AddressOperation;\n\n @observable private selectedAddress?: Address;\n\n @observable private addUpdateAddress: Address;\n\n @observable private countryRegionId: string = 'USA';\n\n @observable private stateProvinceInfo?: StateProvinceInfo[];\n\n @observable private customerAddresses: Address[] = [];\n\n @observable private validationError: object;\n\n @observable private addressActionResponse?: IAddressResponse;\n\n @observable private isUpdating?: boolean;\n\n @observable private hasError?: boolean;\n\n @observable private addressListSelectedAddress: Address = {};\n\n private readonly addressCommon: AddressCommon;\n\n private addressFormat!: AddressFormat;\n\n private countryRegions: CountryRegionInfo[] = [];\n\n private addressPurposes: AddressPurpose[] = [];\n\n private readonly resources: IAddressResource;\n\n private readonly defaultAddressType: number = 6; // Default to Home\n\n private readonly telemetryContent?: ITelemetryContent;\n\n private autoSuggest?: AutoSuggest;\n\n private readonly multiplePickupStoreSwitchName: string = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n\n private retailMultiplePickUpOptionEnabled?: boolean = false;\n\n public constructor(props: ICheckoutAddressProps) {\n super(props);\n this.state = { shippingGroups: [] };\n const { context, data, resources, telemetry } = this.props;\n\n this.addUpdateAddress = {};\n this.resources = resources;\n this.currentOperation = AddressOperation.List;\n this.countryRegions = data.countryRegions.result || [];\n this.addressPurposes = data.addressPurposes.result || [];\n this.customerAddresses = data.address.result || [];\n this.stateProvinceInfo = data.countryStates.result || [];\n this.addressCommon = new AddressCommon(context, resources, telemetry);\n this.addressFormat = new AddressFormat(\n this.countryRegions,\n new AddressMetaData({ ...resources }, this._getAddressFormatExcludeList()),\n this.addressPurposes);\n this.validationError = {};\n this.retailMultiplePickUpOptionEnabled = data.featureState.result\n ?.find(feature => feature.Name === this.multiplePickupStoreSwitchName)?.IsEnabled;\n this.telemetryContent = getTelemetryObject(this.props.context.request.telemetryPageName!, this.props.friendlyName, this.props.telemetry);\n }\n\n /**\n * Initialize pickup group.\n */\n @action\n private readonly _initPickupGroup = async (): Promise => {\n const pickupCartLines: CartLine[] = this._getCartLinesforDelivery();\n const cartLines: ICartLineWithProduct[] = [];\n\n try {\n const products = await this._getProductsByCartLines(this.props.data.checkout.result?.checkoutCart.cart.ChannelId || 0,\n pickupCartLines);\n for (const line of pickupCartLines) {\n const product: SimpleProduct | undefined = products.find(x => x.RecordId === line.ProductId);\n cartLines.push({ cartLine: line, product });\n }\n this.setState({ shippingGroups: cartLines });\n\n } catch (error) {\n this.props.telemetry.error(error);\n this.setState({ shippingGroups: [] });\n }\n };\n\n /**\n * On suggestion selected.\n * @param result - Suggestion result interface.\n */\n @action\n private readonly _onSuggestionSelected = async (result: Microsoft.Maps.ISuggestionResult): Promise => {\n this._clearAddressFields();\n const address = this.addressFormat.getTranformedAddress(result, this.stateProvinceInfo);\n const timeout = 0;\n set(this.addUpdateAddress, { Street: '' });\n set(this.addUpdateAddress, { ZipCode: address.ZipCode });\n set(this.addUpdateAddress, { CountyName: address.CountyName });\n set(this.addUpdateAddress, { City: address.City });\n set(this.addUpdateAddress, { State: address.State });\n set(this.addUpdateAddress, { DistrictName: address.DistrictName });\n set(this.addUpdateAddress, { FullAddress: address.FullAddress });\n\n // Bing autosuggest put the complete address in the Street input box. Updating the street input box to show only street address.\n setTimeout(() => {\n set(this.addUpdateAddress, { Street: address.Street });\n }, timeout);\n\n };\n\n /**\n * Method to clear address fields.\n */\n @action\n private readonly _clearAddressFields = (): void => {\n const addressFormatItem = this.addressFormat.getAddressFormat(this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId);\n for (const formatAddress of addressFormatItem) {\n if (this.addUpdateAddress[formatAddress.name] !== undefined && !this.autoSuggest?.excludedAddressFields.includes(formatAddress.name)) {\n this.addressFormat[formatAddress.name] = '';\n }\n }\n this._clearValidation();\n };\n\n /**\n * Method to clear validation.\n */\n @action\n private readonly _clearValidation = (): void => {\n this.validationError = {};\n };\n\n public get expressPaymentDetailsFromCartPage(): IExpressPaymentDetails | null {\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Explicitly check for null/undefined.\n const properties = this.props.data.cart?.result?.cart?.ExtensionProperties?.find(\n property => property.Key === 'expressPaymentDetails')?.Value?.StringValue ?? '';\n\n return properties ? JSON.parse(properties) as IExpressPaymentDetails : null;\n }\n\n public async componentDidMount(): Promise {\n const {\n context: {\n telemetry,\n actionContext: {\n requestContext: {\n channel\n }\n }\n },\n config: {\n autoSuggestionEnabled,\n autoSuggestOptions\n },\n resources\n } = this.props;\n\n // Initializing data props\n this._dataInitialize(this.props);\n\n this.addressFormat = new AddressFormat(\n this.countryRegions,\n new AddressMetaData({ ...resources }, this._getAddressFormatExcludeList()),\n this.addressPurposes);\n\n this.props.data.checkout.then(() => {\n this._setDefaultCountryRegionId();\n this._initModuleState();\n });\n\n reaction(\n () => this.countryRegionId,\n () => {\n this._getStateProvinces();\n }\n );\n\n reaction(\n () => this.currentOperation,\n () => {\n this._getStateProvinces();\n }\n );\n\n reaction(\n () => this.props.data.checkout.result?.shippingAddressFromExpressCheckout,\n () => {\n if (!this.expressPaymentDetailsFromCartPage && this._canShip()) {\n let address = this.props.data.checkout.result?.shippingAddressFromExpressCheckout;\n\n if (address?.TwoLetterISORegionName) {\n const threeLetterIsoRegionName = this.getThreeLetterIsoRegionName(address.TwoLetterISORegionName);\n\n address = { ...address, ThreeLetterISORegionName: threeLetterIsoRegionName };\n\n if (threeLetterIsoRegionName && threeLetterIsoRegionName !== this.countryRegionId) {\n this._onCountryChange(threeLetterIsoRegionName);\n }\n }\n\n this._updateCurrentOperation(AddressOperation.Add, address);\n this._onAddressAddUpdateSubmit();\n }\n }\n );\n\n if (autoSuggestionEnabled) {\n\n if (channel && !channel.BingMapsApiKey) {\n telemetry.error('BingMapsApiKey is missing.');\n return;\n }\n\n if (channel && !channel.BingMapsEnabled) {\n telemetry.error('Map is disabled from HQ.');\n return;\n }\n\n const options: IAutoSuggestOptions = { ...autoSuggestOptions };\n this.autoSuggest = new AutoSuggest(telemetry, options, channel?.BingMapsApiKey, channel?.ChannelCountryRegionISOCode, channel?.DefaultLanguageId);\n\n // Customer doesn't have any address. Then add view will be loaded directly. Code for the same to handle that\n if (this.props.data.storeSelectorStateManager.result && (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update)) {\n await this.autoSuggest._loadMapAPI(await this.props.data.storeSelectorStateManager);\n }\n\n reaction(\n () => this.props.data.storeSelectorStateManager.result?.loadMapApi && (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update),\n async () => {\n await this.autoSuggest?._loadMapAPI(await this.props.data.storeSelectorStateManager);\n }\n );\n\n reaction(\n () => this.props.data.storeSelectorStateManager.result?.isMapApiLoaded,\n async () => {\n await this._attachMapAutoSuggest();\n }\n );\n }\n await this._initPickupGroup();\n }\n\n public async componentDidUpdate(): Promise {\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\n if (this.props.data.storeSelectorStateManager.result?.isMapApiLoaded) {\n await this._attachMapAutoSuggest();\n }\n } else {\n this.autoSuggest?.disposeAutoSuggest();\n }\n }\n\n public shouldComponentUpdate(nextProps: ICheckoutAddressProps, nextState: ICheckoutAddresState): boolean {\n if (this.state === nextState && this.props.data === nextProps.data) {\n return false;\n }\n return true;\n\n }\n\n public render(): JSX.Element | null {\n if (!this._canShip()) {\n return null;\n }\n\n const { config, context, renderView, resources } = this.props;\n const { headingImages, itemsText, singleItemText } = resources;\n const { imageSettings } = config;\n\n // Line images\n const cartlines: ICheckoutShippingCartLineInfo[] = this.state.shippingGroups.filter(x => !ObjectExtensions.isNullOrUndefined(x.product)).map(line => ({\n lineId: line.cartLine.LineId ?? '',\n imageProps: {\n requestContext: context.actionContext.requestContext,\n className: 'ms-checkout-shipping-address__group-images-lines-line-image',\n altText: line.product?.Name,\n src: line.product?.PrimaryImageUrl ?? '',\n fallBackSrc: getFallbackImageUrl(line.product?.ItemId, context.actionContext.requestContext.apiSettings),\n gridSettings: context.request.gridSettings!,\n imageSettings: imageSettings ?? defaultImageSettings,\n loadFailureBehavior: 'empty'\n },\n quantity: line.cartLine.Quantity ?? 0\n })\n );\n\n const quantity = 1;\n const itemText = cartlines.length > quantity ? itemsText : singleItemText;\n\n const lineImageProps: ICheckoutShippingCartLinesProps = {\n moduleClassName: 'ms-checkout-shipping-address',\n cartLines: cartlines.filter(x => !ObjectExtensions.isNullOrUndefined(x)),\n itemTitle: `(${format(itemText, cartlines.length)})`,\n title: headingImages,\n resources: this.props.resources\n };\n\n const cartLineImages: React.ReactNode = ;\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const { featureState } = this.props.data;\n const isRetailMultiplePickUpOptionEnabled = featureState.result?.find(feature => feature.Name === multiplePickupStoreSwitchName)?.IsEnabled;\n\n const viewProps = {\n ...this.props,\n currentOperation: this.currentOperation,\n selectedAddress: this.selectedAddress,\n addUpdateAddress: this.addUpdateAddress,\n addressListSelectedAddress: this.addressListSelectedAddress,\n countryRegionId: this.countryRegionId,\n stateProvinceInfo: this.stateProvinceInfo,\n customerAddresses: this.customerAddresses,\n validationError: this.validationError,\n addressActionResponse: this.addressActionResponse,\n isUpdating: this.isUpdating,\n hasError: this.hasError,\n className: config.className,\n viewState: {\n isShowAddress: this.currentOperation === AddressOperation.Show && this.selectedAddress,\n isShowAddresList: this.currentOperation === AddressOperation.List && this.customerAddresses.length > 0,\n isShowAddOrUpdateAddress:\n this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update\n },\n CheckoutShippingAddress: {\n moduleProps: this.props,\n className: classnames('ms-checkout-shipping-address', config.className)\n },\n showAddress: this._renderShowAddress(),\n\n /**\n * Show address select.\n * @param onAddAddressHandler - On add address click function.\n * @param onSaveHandler - On save click function.\n * @param onCancelHandler - On cancel click function.\n * @returns - Renders select address.\n */\n showAddressSelectHandler: (\n onAddAddressHandler?: () => void,\n onSaveHandler?: () => void,\n onCancelHandler?: () => void\n ) => this._renderSelectAddress(onAddAddressHandler, onSaveHandler, onCancelHandler),\n\n /**\n * Show add/update address.\n * @param onSaveHandler - On save click function.\n * @param onCancelHandler - On cancel click function.\n * @returns - Renders select address.\n */\n showAddOrUpdateAddressHandler: (\n onSaveHandler?: () => void,\n onCancelHandler?: () => void\n ) => this._renderAddOrUpdateAddress(onSaveHandler, onCancelHandler),\n showAddOrUpdateAddress: this._renderAddOrUpdateAddress(),\n cartLineImages: isRetailMultiplePickUpOptionEnabled ? cartLineImages : undefined,\n showAddressSelect: this._renderSelectAddress()\n };\n\n return renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * Method data initialization.\n * @param props -The checkout address properties.\n */\n private readonly _dataInitialize = (props: ICheckoutAddressProps): void => {\n const { data } = props;\n\n reaction(\n () => data.countryRegions.result,\n () => {\n this.countryRegions = data.countryRegions.result ?? [];\n }\n );\n\n reaction(\n () => data.addressPurposes.result,\n () => {\n this.addressPurposes = data.addressPurposes.result ?? [];\n }\n );\n\n reaction(\n () => data.address.result,\n () => {\n this.customerAddresses = data.address.result ?? [];\n }\n );\n\n reaction(\n () => data.countryStates.result,\n () => {\n this.stateProvinceInfo = data.countryStates.result ?? [];\n }\n );\n\n reaction(\n () => data.featureState.result,\n () => {\n this.retailMultiplePickUpOptionEnabled =\n data.featureState.result?.find(feature => feature.Name === this.multiplePickupStoreSwitchName)?.IsEnabled;\n }\n );\n };\n\n /**\n * Method to get cart lines for delivery.\n * @returns The cart line collection.\n */\n private readonly _getCartLinesforDelivery = (): CartLine[] => {\n return this.props.data.checkout.result?.checkoutCart.cart.CartLines?.filter(line => this._isDelivery(line)) ?? [];\n };\n\n /**\n * Method to check cart line for delivery.\n * @param line -The cart line.\n * @returns True/false as per cart line delivery mode.\n */\n private readonly _isDelivery = (line: CartLine): boolean => {\n return this._isNotPickupMode(line.DeliveryMode) && (line.FulfillmentStoreId === undefined || line.FulfillmentStoreId === '');\n };\n\n /**\n * Method to check cart line for delivery.\n * @param deliveryMode -The delivery mode.\n * @returns True/false as per cart line delivery mode.\n */\n private readonly _isNotPickupMode = (deliveryMode: string | undefined): boolean => {\n const pickupDeliveryModeCode = this.props.context.request.channel?.PickupDeliveryModeCode;\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const { channelDeliveryOptionConfig, featureState } = this.props.data;\n const retailMultiplePickUpOptionEnabled = featureState.result?.find(feature => feature.Name === multiplePickupStoreSwitchName)?.IsEnabled;\n if (retailMultiplePickUpOptionEnabled && deliveryMode !== undefined) {\n const pickupDeliveryMode = channelDeliveryOptionConfig.result?.PickupDeliveryModeCodes?.some(pickupMode => pickupMode !== deliveryMode);\n return pickupDeliveryMode !== undefined ? pickupDeliveryMode : false;\n }\n return deliveryMode !== undefined && pickupDeliveryModeCode !== undefined && (deliveryMode !== pickupDeliveryModeCode);\n };\n\n /**\n * Method to check cart line for delivery.\n * @param channelId - The channelId.\n * @param cartLines - Cart line collections.\n * @returns Collection of SimpleProduct.\n */\n private readonly _getProductsByCartLines = async (channelId: number, cartLines: CartLine[]): Promise => {\n const actionContext = this.props.context.actionContext;\n const productInputs = cartLines.filter(line => !ObjectExtensions.isNullOrUndefined(line.ProductId))\n .map(line => new ProductInput(line.ProductId || 0, actionContext.requestContext.apiSettings, channelId, undefined,\n actionContext.requestContext));\n return getSimpleProducts(productInputs, actionContext);\n };\n\n /**\n * Method to render add/update address.\n * @param onSaveHandler -- Handles onsave functionality.\n * @param onCancelHandler -- Handles oncancel functionality.\n * @returns Address app/update props.\n */\n private readonly _renderAddOrUpdateAddress = (\n onSaveHandler?: () => void,\n onCancelHandler?: () => void\n ): IAddressAddUpdateProps => {\n const addressFormat = this.currentOperation === AddressOperation.Add && this.addressCommon.isAuthenticatedFlow() ? this.addressFormat : this.addressFormat;\n\n /**\n * On Cancel Button Function.\n */\n const onCancelButtonHandler = () => {\n this._resetView();\n onCancelHandler?.();\n };\n return AddressAddUpdate({\n isUpdating: this.isUpdating,\n resources: this.resources,\n addressType: AddressType.Shipping,\n addressFormat: addressFormat.getAddressFormat(this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId),\n defaultCountryRegionId: this.countryRegionId,\n defaultAddressType: this.defaultAddressType,\n selectedAddress: this.addUpdateAddress,\n validationError: this.validationError,\n hasError: this.hasError,\n addressActionResponse: this.addressActionResponse,\n telemetryContent: this.telemetryContent,\n dropdownDisplayData: addressFormat.getPrefilledAddressDropdownData(\n this.resources.addressStateDefaultSelectionText,\n this.stateProvinceInfo\n ),\n onInputChange: this._onAddressAddUpdateInputChange,\n onDropdownChange: this._onAddressAddUpdateDropdownChange,\n hasExternalSubmitGroup: this.props.moduleState.hasExternalSubmitGroup,\n\n /**\n * On Save Function.\n */\n onSave: () => {\n this.onSubmit();\n onSaveHandler?.();\n },\n\n onCancel: !this.selectedAddress && !this.addressCommon.isAuthenticatedFlow() ? () => {} : onCancelButtonHandler\n });\n };\n\n /**\n * Method to render select address.\n * @param onAddAddressHandler - To handle add address button click.\n * @param onSaveHandler - To handle save button click.\n * @param onCancelHandler - To handle cancel button click.\n * @returns Select address props.\n */\n private readonly _renderSelectAddress = (\n onAddAddressHandler?: () => void,\n onSaveHandler?: () => void,\n onCancelHandler?: () => void\n ): IAddressSelectProps => {\n\n /**\n * On Cancel Button Function.\n */\n const onCancelButtonHandler = () => {\n this._resetView();\n onCancelHandler?.();\n };\n return AddressSelect({\n addressFormat: this.addressFormat,\n addresses: this.customerAddresses,\n resources: this.resources,\n addressPurposes: this.addressPurposes,\n selectedAddress: this.addressListSelectedAddress,\n onAddressOptionChange: this._onAddressOptionChange,\n hasExternalSubmitGroup: this.props.moduleState.hasExternalSubmitGroup,\n telemetryContent: this.telemetryContent,\n\n /**\n * On Add Address Function.\n */\n onAddAddress: () => {\n this._goToAddAddress();\n onAddAddressHandler?.();\n },\n\n /**\n * On Save Function.\n */\n onSave: () => {\n this._onSelectAddress();\n onSaveHandler?.();\n },\n\n onCancel: !this.selectedAddress ? () => {} : onCancelButtonHandler\n });\n };\n\n /**\n * Method to render show address.\n * @returns Show address props.\n */\n private _renderShowAddress(): IAddressShowProps | null {\n if (this.selectedAddress) {\n return AddressShow({\n address: this.selectedAddress,\n addressFormat: this.addressFormat.getAddressFormat(this.selectedAddress.ThreeLetterISORegionName || ''),\n addressPurposes: this.addressPurposes\n });\n }\n\n return null;\n }\n\n /**\n * Method to render map auto suggest.\n */\n private readonly _attachMapAutoSuggest = async (): Promise => {\n const {\n data: {\n storeSelectorStateManager: { result: storeSelectorStateManager }\n }\n } = this.props;\n\n if (storeSelectorStateManager?.isMapApiLoaded) {\n this.autoSuggest?.attachAutoSuggest('#shipping_addressstreet', '#shipping_addressstreet_container', this._onSuggestionSelected);\n }\n };\n\n /**\n * Method gets called on address option change.\n * @param event - To get current option.\n */\n private readonly _onAddressOptionChange = (event: React.ChangeEvent) => {\n const addressRecordId = event.currentTarget.value;\n const selectedAddress = this.customerAddresses.find(address => (address.RecordId || '').toString() === addressRecordId);\n if (selectedAddress) {\n this.addressListSelectedAddress = selectedAddress;\n }\n };\n\n /**\n * Method to render map auto suggest.\n * @param name - Address name field.\n * @param value - Address name value field.\n */\n private readonly onAddressAddUpdate = (name: string, value: string | boolean) => {\n set(this.addUpdateAddress, { [name]: value });\n this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId, name);\n };\n\n /**\n * Method to get called on address update change.\n * @param event - Input element.\n */\n private readonly _onAddressAddUpdateInputChange = (event: React.ChangeEvent): void => {\n if (event.target.type === 'checkbox') {\n this.onAddressAddUpdate(event.target.name, event.target.checked);\n } else {\n const value = (event.target.value || '').replace(new RegExp('[<>]', 'gi'), '');\n this.onAddressAddUpdate(event.target.name, value);\n }\n };\n\n /**\n * Method to get called on address update dropdown change.\n * @param event - Select element.\n */\n private readonly _onAddressAddUpdateDropdownChange = (event: React.ChangeEvent): void => {\n this.onAddressAddUpdate(event.target.name, event.target.value);\n\n if (event.target.name === AddressItemType[AddressItemType.ThreeLetterISORegionName]) {\n this._onCountryChange(event.target.value);\n }\n };\n\n /**\n * Method to get called on address update submit.\n */\n private readonly _onAddressAddUpdateSubmit = (): void => {\n if (!this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId)) {\n return;\n }\n\n let response: Promise;\n if (this.addressCommon.isAuthenticatedFlow()) {\n response =\n this.currentOperation === AddressOperation.Update ? this.addressCommon.updateCustomerAddress(\n this.addUpdateAddress\n ) : this.addressCommon.addCustomerAddress(\n this.addUpdateAddress\n );\n } else {\n response = Promise.resolve({ address: this.addUpdateAddress });\n }\n\n this.isUpdating = true;\n this._updateModuleState();\n\n response.then(\n (result: IAddressResponse) => {\n this.isUpdating = false;\n\n let newAddress = result.address;\n newAddress = { ...newAddress, ...this.addUpdateAddress };\n\n if (result.address) {\n this.hasError = false;\n if (result.customerAddresses) {\n this._onAddOrUpdateSuccess({ customerAddresses: result.customerAddresses, address: newAddress });\n } else {\n this._onAddOrUpdateSuccess({ address: newAddress });\n }\n } else {\n this.hasError = true;\n this.addressActionResponse = result;\n this._updateModuleState();\n }\n },\n () => {\n this.hasError = true;\n this.isUpdating = false;\n this._updateModuleState();\n }\n );\n };\n\n /**\n * Method to get called on country change.\n * @param countryRegionId - Country region id.\n */\n private readonly _onCountryChange = (countryRegionId: string) => {\n this.countryRegionId = countryRegionId;\n const twoLetterIsoRegionName = this.addressFormat.getTwoLetterISORegionName(countryRegionId);\n set(this.addUpdateAddress, { ThreeLetterISORegionName: countryRegionId });\n set(this.addUpdateAddress, { TwoLetterISORegionName: twoLetterIsoRegionName });\n this.autoSuggest?.changeAutoSuggestionCountryCode(twoLetterIsoRegionName);\n this._clearAddressFields();\n };\n\n /**\n * Method to get all address format exclude list.\n * @returns Collection of address items.\n */\n private readonly _getAddressFormatExcludeList = (): AddressItemType[] => {\n const { config } = this.props;\n const addressFormatExcludeList: AddressItemType[] = [];\n\n if (!config.showAddressType) {\n addressFormatExcludeList.push(AddressItemType.AddressTypeValue);\n }\n\n addressFormatExcludeList.push(AddressItemType.IsPrimary);\n\n return addressFormatExcludeList;\n };\n\n /**\n * Method to get all state/provinces.\n */\n private readonly _getStateProvinces = (): void => {\n if (\n !this.countryRegionId ||\n !(this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update)\n ) {\n return;\n }\n\n this.addressCommon.getStateProvinces(this.countryRegionId).then((result: StateProvinceInfo[]) => {\n const stateInfo = result.some(state => state.StateId === this.addUpdateAddress.State);\n\n // Reset state if selected state not found in the list.\n if (!stateInfo) {\n set(this.addUpdateAddress, { State: '' });\n }\n\n this.stateProvinceInfo = result;\n });\n };\n\n /**\n * Method to set default country region id.\n */\n private _setDefaultCountryRegionId(): void {\n const { request } = this.props.context;\n const market = request.channel?.ChannelCountryRegionISOCode;\n this.countryRegionId = this.addressCommon.getDefaultCountryRegionId(this.countryRegionId, this.countryRegions, market);\n }\n\n /**\n * Method to get default address region id.\n * @returns - Address object from existing addresses.\n */\n private readonly _getDefaultAddress = (): Address | undefined => {\n if (this.customerAddresses) {\n const primaryAddress = this.customerAddresses.find((address: Address) => address.IsPrimary);\n return primaryAddress || (this.customerAddresses.length > 0 ? this.customerAddresses[0] : undefined);\n }\n return undefined;\n };\n\n /**\n * Method to get address from express payment details from cart page.\n * @returns - Addresss.\n */\n private readonly _getAddressFromCartExpressPaymentDetails = (): Address | undefined => {\n if (this.expressPaymentDetailsFromCartPage) {\n const { tokenizedPaymentCard } = this.expressPaymentDetailsFromCartPage;\n const address = tokenizedPaymentCard ? this.getAddressFromTokenizedPaymentCard(tokenizedPaymentCard) : undefined;\n return address;\n }\n return undefined;\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 twoLetterIsoRegionName = tokenizedPaymentCard.Country;\n\n const threeLetterIsoRegionName = twoLetterIsoRegionName ? this.getThreeLetterIsoRegionName(twoLetterIsoRegionName) : undefined;\n\n if (threeLetterIsoRegionName && threeLetterIsoRegionName !== this.countryRegionId) {\n this._onCountryChange(threeLetterIsoRegionName);\n }\n\n const address: Address = {\n TwoLetterISORegionName: twoLetterIsoRegionName,\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 ThreeLetterISORegionName: threeLetterIsoRegionName,\n AddressTypeValue: this.defaultAddressType\n };\n\n return address;\n };\n\n /**\n * Get three letter ISO region name from two letter ISO region name.\n * @param twoLetterIsoRegionName -- The three letter ISO region name.\n * @returns The three letter ISO region name.\n */\n private readonly getThreeLetterIsoRegionName = (twoLetterIsoRegionName: string): string | undefined => {\n\n const countryRegion = this.countryRegions.find(country => {\n return (country.ISOCode?.toLowerCase() === twoLetterIsoRegionName.toLowerCase());\n });\n\n return countryRegion?.CountryRegionId;\n };\n\n /**\n * Method to initialize all module state.\n */\n private readonly _initModuleState = (): void => {\n this.props.moduleState.init({\n status: this._canShip() ? 'updating' : 'disabled',\n onEdit: this.onEdit,\n onCancel: this.onCancel,\n onSubmit: this.onSubmit\n });\n\n const checkoutState = this.props.data.checkout.result;\n\n if (this._canShip()) {\n let defaultAddress;\n\n if (checkoutState?.checkoutCart.cart.ShippingAddress) {\n defaultAddress = checkoutState.checkoutCart.cart.ShippingAddress;\n } else if (this._getAddressFromCartExpressPaymentDetails()) {\n defaultAddress = this._getAddressFromCartExpressPaymentDetails();\n } else if (this._getDefaultAddress()) {\n defaultAddress = this._getDefaultAddress();\n } else {\n defaultAddress = checkoutState?.isExpressCheckoutApplied ? checkoutState.shippingAddressFromExpressCheckout : undefined;\n }\n\n if (defaultAddress && !this.addressCommon.isEmpty(defaultAddress)) {\n this._updateCurrentOperation(AddressOperation.Show, defaultAddress);\n this._setShippingAddress(defaultAddress);\n this._updateModuleState();\n checkoutState?.updateHasShippingAddress({ newHasShippingAddress: true });\n } else {\n this._updateCurrentOperation(AddressOperation.Add);\n checkoutState?.updateHasShippingAddress({ newHasShippingAddress: false });\n }\n }\n };\n\n /**\n * Method get called on submit address.\n */\n private readonly onSubmit = (): void => {\n switch (this.currentOperation) {\n case AddressOperation.Add:\n case AddressOperation.Update:\n this._onAddressAddUpdateSubmit();\n break;\n case AddressOperation.List:\n this._onSelectAddress();\n break;\n default:\n this.props.telemetry.error('Invalid operation');\n }\n };\n\n /**\n * Method get called on cancel.\n */\n private readonly onCancel = (): void => {\n switch (this.currentOperation) {\n case AddressOperation.Add:\n case AddressOperation.Update:\n this._clearAddressFields();\n if (!(!this.selectedAddress && !this.addressCommon.isAuthenticatedFlow())) {\n this._resetView();\n }\n\n break;\n case AddressOperation.List:\n if (this.selectedAddress) {\n this._resetView();\n }\n break;\n default:\n this.props.telemetry.error('Invalid operation');\n }\n };\n\n /**\n * Method get called on edit address.\n */\n private readonly onEdit = (): void => {\n if (this.addressCommon.isAuthenticatedFlow() && this.shippingAddress) {\n this._updateCurrentOperation(AddressOperation.List, this.shippingAddress);\n } else if (this.shippingAddress) {\n this._updateCurrentOperation(AddressOperation.Update, this.shippingAddress);\n }\n\n this._updateModuleState();\n };\n\n /**\n * Method to check if checkout cartlines are available fro shipping.\n * @returns - True/false as per the delivery mode.\n */\n private readonly _canShip = (): boolean => {\n const { checkout, channelDeliveryOptionConfig } = this.props.data;\n const { request } = this.props.context;\n const pickupDeliveryModeCode = request && request.channel && request.channel.PickupDeliveryModeCode;\n const emailDeliveryModeCode = request && request.channel && request.channel.EmailDeliveryModeCode;\n if (!checkout.result || !request.channel || checkout.result.checkoutCart.isEmpty || checkout.result.checkoutCart.hasInvoiceLine) {\n return false;\n }\n\n // @ts-expect-error: Type-checker not realizing above request.channel check\n return this.retailMultiplePickUpOptionEnabled ? checkout.result.checkoutCart.cart.CartLines?.some(\n cartLine => ((cartLine.DeliveryMode && cartLine.DeliveryMode !== '') ? (cartLine.DeliveryMode !== channelDeliveryOptionConfig.result?.PickupDeliveryModeCodes?.find(deliveryMode => deliveryMode === cartLine.DeliveryMode) &&\n cartLine.DeliveryMode !== emailDeliveryModeCode) : cartLine)\n ) : checkout.result.checkoutCart.cart.CartLines?.some(\n cartLine => ((cartLine.DeliveryMode && cartLine.DeliveryMode !== '') ? (cartLine.DeliveryMode !== pickupDeliveryModeCode &&\n cartLine.DeliveryMode !== emailDeliveryModeCode) : cartLine)\n );\n };\n\n /**\n * Method get called on select address.\n */\n private readonly _onSelectAddress = () => {\n this._updateCurrentOperation(AddressOperation.Show, this.addressListSelectedAddress);\n this._setShippingAddress(this.addressListSelectedAddress);\n this._updateModuleState();\n };\n\n /**\n * Method get called on goto add address.\n */\n private readonly _goToAddAddress = () => {\n this._setDefaultCountryRegionId();\n this._updateCurrentOperation(AddressOperation.Add);\n };\n\n /**\n * Method get called on add/update success.\n * @param response - Retail api response.\n */\n private readonly _onAddOrUpdateSuccess = (response: IAddressResponse) => {\n if (response.customerAddresses) {\n this.customerAddresses = response.customerAddresses;\n }\n\n if (response.address) {\n this._updateCurrentOperation(AddressOperation.Show, response.address);\n this._setShippingAddress(response.address);\n this._updateModuleState();\n }\n };\n\n /**\n * Method get called on set Shipping Address.\n * @param address - Retail Api address result.\n */\n private readonly _setShippingAddress = (address: Address): void => {\n if (this.props.data.checkout.result) {\n const newShippingAddress = { ...address };\n\n if (address.ThreeLetterISORegionName && !newShippingAddress.TwoLetterISORegionName) {\n newShippingAddress.TwoLetterISORegionName = this.addressFormat.getTwoLetterISORegionName(address.ThreeLetterISORegionName);\n }\n\n this.props.data.checkout.result.updateShippingAddress({ newShippingAddress });\n this.props.data.checkout.result.checkoutCart.updateShippingAddress({ newShippingAddress })\n .catch(error => {\n this.props.telemetry.error(error);\n });\n }\n };\n\n @computed private get shippingAddress(): Address | undefined {\n return this.props.data.checkout.result?.shippingAddress;\n }\n\n /**\n * Method get called on reset view.\n */\n private readonly _resetView = (): void => {\n switch (this.currentOperation) {\n case AddressOperation.Add:\n case AddressOperation.Update:\n this._updateCurrentOperation(\n this.addressCommon.isAuthenticatedFlow() ? AddressOperation.List : AddressOperation.Show,\n this.shippingAddress\n );\n break;\n default:\n this._updateCurrentOperation(AddressOperation.Show, this.shippingAddress);\n }\n this._updateModuleState();\n };\n\n /**\n * Update current operation.\n * @param operation - The address operation.\n * @param selectedAddress - The selected address.\n */\n private readonly _updateCurrentOperation = (operation: AddressOperation, selectedAddress?: Address) => {\n this.currentOperation = operation;\n this.selectedAddress = selectedAddress;\n\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\n this.addUpdateAddress = { ...this.selectedAddress } || {};\n set(this.addUpdateAddress, {\n ThreeLetterISORegionName: this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId\n });\n set(this.addUpdateAddress, {\n AddressTypeValue: this.addUpdateAddress.AddressTypeValue || this.defaultAddressType\n });\n } else if (this.currentOperation === AddressOperation.List) {\n this.addressListSelectedAddress = { ...this.selectedAddress } || {};\n }\n };\n\n /**\n * Update module state.\n */\n private readonly _updateModuleState = () => {\n if (this.currentOperation === AddressOperation.Show) {\n this.props.moduleState.onReady();\n } else if (this.isUpdating) {\n this.props.moduleState.onPending();\n } else {\n this.props.moduleState.onUpdating();\n }\n };\n}\n\nexport default CheckoutShippingAddress;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IGiftCardExtend } from '@msdyn365-commerce/global-state';\nimport { Address, GiftCard, TenderLine, TokenizedPaymentCard } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { action, computed, observable } from 'mobx';\n\n/**\n * State information related to what is needed to succesfully perform a checkout.\n */\nexport class CheckoutState {\n @observable private _tokenizedPaymentCard: TokenizedPaymentCard | undefined ;\n\n @computed public get tokenizedPaymentCard(): Readonly | undefined {\n return this._tokenizedPaymentCard;\n }\n\n @observable private _tenderLine: TenderLine | undefined;\n\n @computed public get tenderLine(): Readonly | undefined {\n return this._tenderLine;\n }\n\n @observable private _billingAddress: Address | undefined ;\n\n @computed public get billingAddress(): Readonly | undefined {\n return this._billingAddress;\n }\n\n @observable private _shippingAddress: Address | undefined;\n\n @computed public get shippingAddress(): Readonly | undefined {\n return this._shippingAddress;\n }\n\n @observable private _cardPrefix: string | undefined;\n\n @computed public get cardPrefix(): Readonly | undefined {\n return this._cardPrefix;\n }\n\n @observable private _giftCards: GiftCard[] = [];\n\n @computed public get giftCards(): readonly GiftCard[] {\n return this._giftCards;\n }\n\n @observable private _giftCardExtends: IGiftCardExtend[] = [];\n\n @computed public get giftCardExtends(): readonly IGiftCardExtend[] {\n return this._giftCardExtends;\n }\n\n @observable private _loyaltyCardNumber?: string;\n\n @computed public get loyaltyCardNumber(): Readonly | undefined {\n return this._loyaltyCardNumber;\n }\n\n @observable private _loyaltyAmount: number = 0;\n\n @computed public get loyaltyAmount(): Readonly | number {\n return this._loyaltyAmount;\n }\n\n @observable private _guestCheckoutEmail: string = '';\n\n @computed public get guestCheckoutEmail(): Readonly | string {\n return this._guestCheckoutEmail;\n }\n\n @observable private _isTermsAndConditionAccepted: boolean = false;\n\n @computed public get isTermsAndConditionAccepted(): Readonly | boolean {\n return this._isTermsAndConditionAccepted;\n }\n\n @observable private _customerAccountAmount: number = 0;\n\n @computed public get customerAccountAmount(): Readonly | number {\n return this._customerAccountAmount;\n }\n\n @action\n public updateTokenizedPaymentCard(newTokenizedPaymentCard: TokenizedPaymentCard): void {\n this._tokenizedPaymentCard = newTokenizedPaymentCard;\n }\n\n @action\n public updateTenderLine(newTenderLine: TenderLine | undefined): void {\n this._tenderLine = newTenderLine;\n }\n\n @action\n public updateShippingAddress(newShippingAddress: Address): void {\n this._shippingAddress = newShippingAddress;\n }\n\n @action\n public updateBillingAddress(newBillingAddress: Address): void {\n this._billingAddress = newBillingAddress;\n }\n\n @action\n public updateCardPrefix(newCardPrefix: string): void {\n this._cardPrefix = newCardPrefix;\n }\n\n @action\n public removeGiftCard(giftCardNumber: string): void {\n this._giftCards = this._giftCards.filter(giftCard => giftCard.Id !== giftCardNumber);\n }\n\n @action\n public removeGiftCardExtend(giftCardNumber: string): void {\n this._giftCardExtends = this._giftCardExtends.filter(giftCard => giftCard.Id !== giftCardNumber);\n }\n\n @action\n public addGiftCard(giftCard: GiftCard): void {\n this._giftCards = [giftCard, ...this._giftCards];\n }\n\n @action\n public addGiftCardExtend(giftCard: IGiftCardExtend): void {\n this._giftCardExtends = [giftCard, ...this._giftCards];\n }\n\n @action\n public updateLoyaltyCardNumber(newLoyaltyCardNumber: string): void {\n this._loyaltyCardNumber = newLoyaltyCardNumber;\n }\n\n @action\n public updateLoyaltyAmount(newAmount: number): void {\n this._loyaltyAmount = newAmount;\n }\n\n @action\n public updateGuestCheckoutEmail(newGuestCheckoutEmail: string): void {\n this._guestCheckoutEmail = newGuestCheckoutEmail;\n }\n\n @action\n public updateTermsAndConditionsAcceptance(newIsTermsAndConditionAccepted: boolean): void {\n this._isTermsAndConditionAccepted = newIsTermsAndConditionAccepted;\n }\n\n @action\n public updateCustomerAccountAmount(newAmount: number): void {\n this._customerAccountAmount = newAmount;\n }\n}\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nexport * from './add-payment-form';\nexport * from './error';\nexport * from './iframe';\nexport * from './payment-instrument-message';\nexport * from './waiting';\nexport * from './with-visibility-observer';\n\n/**\n * AsyncResultStatusCode.\n */\nexport enum AsyncResultStatusCode {\n LOADING = 'LOADING',\n SUCCESS = 'SUCCESS',\n FAILED = 'FAILED'\n}\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IAddressAddItem, IAddressAddUpdateProps } from '../../common/components/address-add';\nimport { IBusinessAccountAddressViewProps } from './business-account-address';\n\n/**\n * Address Add Update Component.\n * @param param0 - Root param.\n * @param param0.AddressForm - Address form.\n * @param param0.heading - Address Heading.\n * @param param0.items - IAddressAddItem[].\n * @param param0.hasError - Boolean.\n * @param param0.error - IAddressError.\n * @param param0.isShowSaveButton - Boolean.\n * @param param0.saveButton - Save button.\n * @param param0.isShowCancelButton - Boolean.\n * @param param0.cancelButton - Cancel button.\n * @returns - AddressForm Node.\n */\nconst AddressAddUpdate: React.FC = ({\n AddressForm,\n heading,\n items,\n hasError,\n error,\n isShowSaveButton,\n saveButton,\n isShowCancelButton,\n cancelButton\n}) => {\n\n return (\n \n {heading}\n {items.map((item: IAddressAddItem) => {\n const { AddressItem, key, label, alert, input } = item;\n return (\n \n {label}\n {hasError && alert}\n {input}\n \n );\n })}\n {hasError &&\n \n {error.title}\n {error.message}\n }\n {isShowSaveButton && saveButton}\n {isShowCancelButton && cancelButton}\n \n );\n};\n\n/**\n * Business Account Address View Component.\n * @param props - Props.\n * @returns - BusinessAccountAddress Module.\n */\nconst BusinessAccountAddressView: React.FC = props => {\n const { BusinessAccountAddress, showAddOrUpdateAddress } = props;\n\n return (\n \n \n \n );\n};\n\nexport default BusinessAccountAddressView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IAddContactInfo, ICheckoutGuestProfileViewProps, IShowContactInfo } from './checkout-guest-profile';\n\nexport const ShowContactInfo: React.FC = ({ showInfoProps, email, editButton }) => (\n \n {email}\n {editButton}\n \n);\n\nexport const AddContactInfo: React.FC = ({\n addFormProps,\n submitButton,\n cancelButton,\n inputGroupProps,\n label,\n error,\n input\n}) => (\n \n \n {label}\n {error}\n {input}\n \n {submitButton}\n {cancelButton}\n \n);\n\nconst CheckoutGuestProfileView: React.FC = ({ moduleProps, showContactInfo, addContactInfo }) => {\n return (\n \n {showContactInfo && }\n {addContactInfo && }\n \n );\n};\n\nexport default CheckoutGuestProfileView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\n/**\n * The payment error.\n */\nexport interface IPaymentError {\n title: string;\n message: string;\n className?: string;\n}\n\n/**\n * The payment error.\n * @param param0 - First param.\n * @param param0.title - Title.\n * @param param0.message - Message.\n * @param param0.className - ClassName.\n * @returns React node.\n */\nexport const ErrorComponent: React.FC = ({ title, message, className = 'ms-checkout-payment-instrument' }) => (\n \n
\n {title}\n
\n
\n {message}\n
\n
\n);\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport AddressInputComponent from './address-input';\n\nexport interface IAddressBillingCheckbox {\n isChecked: boolean;\n value: string;\n ariaLabel: string;\n text: string;\n telemetryContent?: ITelemetryContent;\n onChange(event: React.ChangeEvent): void;\n}\n\nexport const AddressBillingCheckbox: React.FC = ({\n isChecked,\n value,\n ariaLabel,\n text,\n telemetryContent,\n onChange\n}) => {\n\n const additionalAttributes = {\n checked: isChecked,\n 'aria-checked': isChecked\n };\n\n return (\n \n );\n};\nexport default AddressBillingCheckbox;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\nexport interface IAddressBillingHeading {\n text: string;\n}\n\nexport const AddressBillingHeading: React.FC = ({\n text\n}) => (\n \n {text}\n
\n);\n\nexport default IAddressBillingHeading;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IGiftCardExtend } from '@msdyn365-commerce/global-state';\nimport { Address, AddressPurpose, CountryRegionInfo, StateProvinceInfo } from '@msdyn365-commerce/retail-proxy';\nimport { IModuleStateProps, withModuleState } from '@msdyn365-commerce-modules/checkout-utilities';\nimport { getTelemetryObject, IModuleProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { action, computed, observable, reaction, set } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { AutoSuggest } from '../../common/address-autosuggest';\nimport { IAutoSuggestOptions } from '../../common/address-autosuggest.data';\nimport { AddressCommon } from '../../common/address-common';\nimport { AddressFormat } from '../../common/address-format';\nimport { AddressItemType } from '../../common/address-format.data';\nimport { AddressMetaData } from '../../common/address-meta-data';\nimport { AddressOperation, AddressType, IAddressResource, IAddressResponse } from '../../common/address-module.data';\nimport { AddressAddUpdate, IAddressAddUpdateProps } from '../../common/components/address-add';\nimport { AddressBillingCheckbox } from '../../common/components/address-billing-checkbox';\nimport { AddressBillingHeading } from '../../common/components/address-billing-heading';\nimport { AddressShow, IAddressShowProps } from '../../common/components/address-show';\nimport { ICheckoutBillingAddressData } from './checkout-billing-address.data';\nimport { ICheckoutBillingAddressProps } from './checkout-billing-address.props.autogenerated';\n\n/**\n * Props interface.\n */\nexport interface IProps extends ICheckoutBillingAddressProps, IModuleStateProps { }\n\n/**\n * Checkout billing address view state interface.\n */\nexport interface ICheckoutBillingAddressViewState {\n isShowAddress: boolean;\n isShowAddOrUpdateAddress: boolean;\n isShowSameAsShippingCheckbox: boolean;\n}\n\n/**\n * Checkout billing address view props interface.\n */\nexport interface ICheckoutBillingAddressViewProps extends IProps {\n className: string;\n currentOperation: AddressOperation;\n selectedAddress?: Address;\n addUpdateAddress: Address;\n countryRegionId: string;\n stateProvinceInfo?: StateProvinceInfo[];\n validationError: object;\n addressActionResponse?: IAddressResponse;\n viewState: ICheckoutBillingAddressViewState;\n CheckoutBillingAddress: IModuleProps;\n sameAsShippingCheckbox: React.ReactNode;\n heading: React.ReactNode;\n showAddress: IAddressShowProps;\n showAddOrUpdateAddress: IAddressAddUpdateProps;\n}\n\n/**\n *\n * CheckoutBillingAddress component.\n * @extends {React.PureComponent>}\n */\n// @ts-expect-error\n@withModuleState\n@observer\nclass CheckoutBillingAddress extends React.Component {\n\n @observable private currentOperation: AddressOperation;\n\n @observable private isBillingAddressSameAsShipping: boolean;\n\n @observable private selectedAddress?: Address;\n\n @observable private addUpdateAddress: Address;\n\n @observable private countryRegionId: string = 'USA';\n\n @observable private stateProvinceInfo?: StateProvinceInfo[];\n\n @observable private validationError: object;\n\n @observable private readonly addressActionResponse?: IAddressResponse;\n\n private readonly addressCommon: AddressCommon;\n\n private addressFormat: AddressFormat;\n\n private countryRegions: CountryRegionInfo[] = [];\n\n private addressPurposes: AddressPurpose[] = [];\n\n private readonly resources: IAddressResource;\n\n private readonly defaultAddressType: number = 6; // Default to Home\n\n // private addRenderRef: React.RefObject;\n private readonly telemetryContent?: ITelemetryContent;\n\n private autoSuggest?: AutoSuggest;\n\n public constructor(props: IProps) {\n super(props);\n const { context, data, resources, telemetry } = this.props;\n\n this.addUpdateAddress = {};\n this.validationError = {};\n this.isBillingAddressSameAsShipping = false;\n this.resources = resources;\n this.currentOperation = AddressOperation.List;\n this.addressPurposes = data.addressPurposes.result || [];\n this.countryRegions = data.countryRegions.result || [];\n this.stateProvinceInfo = data.countryStates.result || [];\n this.addressCommon = new AddressCommon(context, resources, telemetry);\n this.addressFormat = new AddressFormat(\n this.countryRegions,\n new AddressMetaData({ ...resources },\n this._getAddressFormatExcludeList()\n ),\n this.addressPurposes);\n this.telemetryContent = getTelemetryObject(this.props.context.request.telemetryPageName!, this.props.friendlyName, this.props.telemetry);\n\n // This.addRenderRef = React.createRef();\n }\n\n /**\n * On suggestion selected.\n * @param result - The suggestion result.\n */\n @action\n private readonly _onSuggestionSelected = async (result: Microsoft.Maps.ISuggestionResult): Promise => {\n this._clearAddressFields();\n const address = this.addressFormat.getTranformedAddress(result, this.stateProvinceInfo);\n set(this.addUpdateAddress, { Street: '' });\n set(this.addUpdateAddress, { ZipCode: address.ZipCode });\n set(this.addUpdateAddress, { CountyName: address.CountyName });\n set(this.addUpdateAddress, { City: address.City });\n set(this.addUpdateAddress, { State: address.State });\n set(this.addUpdateAddress, { DistrictName: address.DistrictName });\n set(this.addUpdateAddress, { FullAddress: address.FullAddress });\n\n // Bing autosuggest put the complete address in the Street input box. Updating the street input box to show only street address.\n setTimeout(() => {\n set(this.addUpdateAddress, { Street: address.Street });\n }, 0);\n\n };\n\n /**\n * Clear address fields.\n */\n @action\n private readonly _clearAddressFields = (): void => {\n const addressFormatItem = this.addressFormat.getAddressFormat(this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId);\n addressFormatItem.forEach(format => {\n if (this.addUpdateAddress[format.name] !== undefined && !this.autoSuggest?.excludedAddressFields.includes(format.name)) {\n this.addressFormat[format.name] = '';\n }\n });\n this._clearValidation();\n };\n\n /**\n * Clear validation.\n */\n @action\n private readonly _clearValidation = (): void => {\n this.validationError = {};\n };\n\n public async componentDidMount(): Promise {\n\n const {\n context: {\n telemetry,\n actionContext: {\n requestContext: {\n channel\n }\n }\n },\n config: {\n autoSuggestionEnabled,\n autoSuggestOptions\n }\n } = this.props;\n\n // Initializing data props\n this._dataInitialize(this.props);\n\n this.props.data.checkout.then(() => {\n this._setDefaultCountryRegionId();\n this._initModuleState();\n });\n\n reaction(\n () => this.countryRegionId,\n () => {\n this._getStateProvinces();\n }\n );\n\n reaction(\n () => this.currentOperation,\n () => {\n this._getStateProvinces();\n }\n );\n\n reaction(\n () => this.props.data.checkout.result && this.props.data.checkout.result.shippingAddress,\n shippingAddress => {\n if (this.props.moduleState.isUpdating) {\n if (shippingAddress && this.isBillingAddressSameAsShipping) {\n this.isBillingAddressSameAsShipping = true;\n this._updateCurrentOperation(AddressOperation.Show, shippingAddress);\n } else if (shippingAddress && this.isBillingAddressSameAsShipping) {\n this._updateCurrentOperation(AddressOperation.Show, shippingAddress);\n }\n }\n }\n );\n\n reaction(\n () => this.isBillingAddressRequried,\n isBillingAddressRequried => {\n if (isBillingAddressRequried) {\n if (this.props.moduleState.isDisabled) {\n this.onEdit();\n }\n } else {\n this.props.data.checkout.result?.removeBillingAddress({});\n this.props.moduleState.onDisable();\n }\n }\n );\n\n if (autoSuggestionEnabled) {\n\n if (channel && !channel.BingMapsApiKey) {\n telemetry.error('BingMapsApiKey is missing.');\n return;\n }\n\n if (channel && !channel.BingMapsEnabled) {\n telemetry.error('Map is disabled from HQ.');\n return;\n }\n\n const options: IAutoSuggestOptions = { ...autoSuggestOptions };\n this.autoSuggest = new AutoSuggest(telemetry, options, channel?.BingMapsApiKey, channel?.ChannelCountryRegionISOCode, channel?.DefaultLanguageId);\n\n // Customer doesn't have any address. Then add view will be loaded directly. Code for the same to handle that\n if (this.props.data.storeSelectorStateManager.result && (\n this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update\n )) {\n await this.autoSuggest._loadMapAPI(await this.props.data.storeSelectorStateManager);\n }\n\n reaction(\n () => this.props.data.storeSelectorStateManager.result?.loadMapApi && (\n this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update\n ),\n async () => {\n await this.autoSuggest?._loadMapAPI(await this.props.data.storeSelectorStateManager);\n }\n );\n\n reaction(\n () => this.props.data.storeSelectorStateManager.result?.isMapApiLoaded,\n async () => {\n await this._attachMapAutoSuggest();\n }\n );\n }\n }\n\n public async componentDidUpdate(): Promise {\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\n if (this.props.data.storeSelectorStateManager.result?.isMapApiLoaded) {\n await this._attachMapAutoSuggest();\n }\n } else {\n this.autoSuggest?.disposeAutoSuggest();\n }\n }\n\n public shouldComponentUpdate(nextProps: ICheckoutBillingAddressProps, nextState: ICheckoutBillingAddressViewState): boolean {\n if (this.state === nextState && this.props.data === nextProps.data) {\n return false;\n }\n return true;\n\n }\n\n public render(): JSX.Element | null {\n if (!(this.isBillingAddressRequried)) {\n return null;\n }\n\n const { resources } = this.props;\n\n const { renderView, config } = this.props;\n\n const viewProps = {\n ...this.props,\n currentOperation: this.currentOperation,\n selectedAddress: this.selectedAddress,\n addUpdateAddress: this.addUpdateAddress,\n countryRegionId: this.countryRegionId,\n stateProvinceInfo: this.stateProvinceInfo,\n validationError: this.validationError,\n addressActionResponse: this.addressActionResponse,\n className: config.className,\n viewState: {\n isShowAddress: this.selectedAddress && this.currentOperation === AddressOperation.Show,\n isShowAddOrUpdateAddress: this.currentOperation !== AddressOperation.Show,\n isShowSameAsShippingCheckbox: this.isCartContainsItemsForShipping && this.props.moduleState.isUpdating\n },\n CheckoutBillingAddress: {\n moduleProps: this.props,\n className: classnames('ms-checkout-billing-address', config.className)\n },\n heading: ,\n\n sameAsShippingCheckbox: (\n \n ),\n showAddress: this._renderShowAddress(),\n showAddOrUpdateAddress: this._renderAddOrUpdateAddress()\n };\n\n return renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * On address update.\n * @param name - Name.\n * @param value - Value.\n */\n private readonly onAddressAddUpdate = (name: string, value: string) => {\n set(this.addUpdateAddress, { [name]: value });\n this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId, name);\n };\n\n /**\n * Method data initialization.\n * @param props -The checkout address properties.\n */\n private readonly _dataInitialize = (props: IProps): void => {\n const { data } = props;\n\n reaction(\n () => data.countryRegions.result,\n () => {\n this.countryRegions = data.countryRegions.result ?? [];\n }\n );\n\n reaction(\n () => data.addressPurposes.result,\n () => {\n this.addressPurposes = data.addressPurposes.result ?? [];\n }\n );\n\n reaction(\n () => data.countryStates.result,\n () => {\n this.stateProvinceInfo = data.countryStates.result ?? [];\n }\n );\n };\n\n /**\n * Render add or update address function.\n * @returns - Address add update props.\n */\n private readonly _renderAddOrUpdateAddress = (): IAddressAddUpdateProps => {\n return AddressAddUpdate(\n {\n resources: this.resources,\n addressType: AddressType.Billing,\n addressFormat: this.addressFormat.getAddressFormat((this.addUpdateAddress.ThreeLetterISORegionName) ?? this.countryRegionId),\n defaultCountryRegionId: this.countryRegionId,\n defaultAddressType: this.defaultAddressType,\n selectedAddress: this.addUpdateAddress,\n validationError: this.validationError,\n addressActionResponse: this.addressActionResponse,\n dropdownDisplayData: this.addressFormat.getPrefilledAddressDropdownData(\n this.resources.addressStateDefaultSelectionText,\n this.stateProvinceInfo\n ),\n telemetryContent: this.telemetryContent,\n onInputChange: this._onAddressAddUpdateInputChange,\n onDropdownChange: this._onAddressAddUpdateDropdownChange,\n hasExternalSubmitGroup: this.props.moduleState.hasExternalSubmitGroup,\n onSave: this._onSubmitAddress,\n onCancel: this._resetView\n }\n );\n };\n\n private _renderShowAddress(): IAddressShowProps | null {\n if (this.selectedAddress) {\n return AddressShow(\n { address: this.selectedAddress, addressFormat: this.addressFormat.getAddressFormat(\n this.selectedAddress.ThreeLetterISORegionName ?? ''\n ),\n addressPurposes: this.addressPurposes\n }\n );\n }\n\n return null;\n }\n\n /**\n * On country region change function.\n * @param countryRegionId - Country region Id.\n */\n private readonly _onCountryChange = (countryRegionId: string) => {\n this.countryRegionId = countryRegionId;\n const twoLetterIsoRegionName = this.addressFormat.getTwoLetterISORegionName(countryRegionId);\n set(this.addUpdateAddress, { ThreeLetterISORegionName: countryRegionId });\n set(this.addUpdateAddress, { TwoLetterISORegionName: twoLetterIsoRegionName });\n this.autoSuggest?.changeAutoSuggestionCountryCode(twoLetterIsoRegionName);\n this._clearAddressFields();\n };\n\n /**\n * Gets address format for exclude list.\n * @returns - Address item type.\n */\n private readonly _getAddressFormatExcludeList = (): AddressItemType[] => {\n const { config } = this.props;\n const addressFormatExcludeList: AddressItemType[] = [];\n\n if (!config.showAddressType) {\n addressFormatExcludeList.push(AddressItemType.AddressTypeValue);\n }\n\n addressFormatExcludeList.push(AddressItemType.IsPrimary);\n\n return addressFormatExcludeList;\n };\n\n /**\n * Attach map auto suggest.\n */\n private readonly _attachMapAutoSuggest = async (): Promise => {\n const {\n data: {\n storeSelectorStateManager: { result: storeSelectorStateManager }\n }\n } = this.props;\n\n if (storeSelectorStateManager?.isMapApiLoaded) {\n this.autoSuggest?.attachAutoSuggest('#billing_addressstreet', '#billing_addressstreet_container', this._onSuggestionSelected);\n }\n };\n\n /**\n * On address add update input change.\n * @param event - The event.\n */\n private readonly _onAddressAddUpdateInputChange = (event: React.ChangeEvent): void => {\n const value = (event.target.value || '').replace(new RegExp('[<>]', 'gi'), '');\n this.onAddressAddUpdate(event.target.name, value);\n };\n\n /**\n * On address add update dropdown change.\n * @param event - The event.\n */\n private readonly _onAddressAddUpdateDropdownChange = (event: React.ChangeEvent): void => {\n this.onAddressAddUpdate(event.target.name, event.target.value);\n\n if (event.target.name === AddressItemType[AddressItemType.ThreeLetterISORegionName]) {\n this._onCountryChange(event.target.value);\n }\n };\n\n /**\n * Gets state provinces.\n */\n private readonly _getStateProvinces = (): void => {\n if (!this.countryRegionId || !(this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update)) {\n return;\n }\n\n this.addressCommon.getStateProvinces(this.countryRegionId).then(\n (result: StateProvinceInfo[]) => {\n const stateInfo = result.some(state => state.StateId === this.addUpdateAddress.State);\n\n // Reset state if selected state not found in the list.\n if (!stateInfo) {\n set(this.addUpdateAddress, { State: '' });\n }\n this.stateProvinceInfo = result;\n });\n };\n\n /**\n * Initialize module state.\n */\n private readonly _initModuleState = (): void => {\n this.props.moduleState.init({\n status: this.isBillingAddressRequried ? 'updating' : 'disabled',\n onEdit: this.onEdit,\n onCancel: this.onCancel,\n onSubmit: this.onSubmit\n });\n\n const { billingAddress, isBillingAddressSameAsShippingAddress } = this.props.data.checkout.result ?? {};\n\n if (this.isBillingAddressRequried) {\n if (billingAddress) {\n this.isBillingAddressSameAsShipping = isBillingAddressSameAsShippingAddress ?? false;\n this._updateCurrentOperation(AddressOperation.Show, billingAddress);\n this._updateModuleState();\n } else if (this.isCartContainsItemsForShipping) {\n this.isBillingAddressSameAsShipping = true;\n this._updateCurrentOperation(AddressOperation.Show, this.shippingAddress);\n } else {\n this.isBillingAddressSameAsShipping = false;\n this._updateCurrentOperation(AddressOperation.Add);\n }\n }\n };\n\n /**\n * Sets default country region Id.\n */\n private _setDefaultCountryRegionId(): void {\n const { request } = this.props.context;\n const market = request.channel?.ChannelCountryRegionISOCode;\n\n this.countryRegionId = this.addressCommon.getDefaultCountryRegionId(this.countryRegionId, this.countryRegions, market);\n }\n\n /**\n * On change - Billing address same as shipping.\n * @param event - The event.\n */\n private readonly _onBillingAddressSameAsShippingChange = (event: React.ChangeEvent) => {\n this.isBillingAddressSameAsShipping = event.currentTarget.checked;\n\n if (this.isBillingAddressSameAsShipping && this.shippingAddress) {\n this._updateCurrentOperation(AddressOperation.Show, this.shippingAddress);\n } else {\n this._updateCurrentOperation(AddressOperation.Add, this.billingAddress);\n }\n };\n\n @computed private get isCartContainsItemsForShipping(): boolean {\n const { request } = this.props.context;\n const multiplePickupStoreSwitchName = 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature';\n const { channelDeliveryOptionConfig, featureState } = this.props.data;\n const retailMultiplePickUpOptionEnabled = featureState.result\n ?.find(feature => feature.Name === multiplePickupStoreSwitchName)?.IsEnabled;\n\n const pickupDeliveryModeCode = request.channel?.PickupDeliveryModeCode;\n const emailDeliveryModeCode = request.channel?.EmailDeliveryModeCode;\n\n // If hasInvoiceLine is true, there are only invoices no items in cart and return false here\n return this.props.data.checkout.result?.checkoutCart.hasInvoiceLine ? false : (retailMultiplePickUpOptionEnabled ? (\n (this.props.data.checkout.result && this.props.data.checkout.result.checkoutCart.cart.CartLines) || []).some(\n cartLine => ((cartLine.DeliveryMode && cartLine.DeliveryMode !== '') ? (cartLine.DeliveryMode !== channelDeliveryOptionConfig.result?.PickupDeliveryModeCodes?.find(deliveryMode => deliveryMode === cartLine.DeliveryMode) && cartLine.DeliveryMode !== emailDeliveryModeCode) : cartLine)\n ) : ((this.props.data.checkout.result && this.props.data.checkout.result.checkoutCart.cart.CartLines) || []).some(\n cartLine => ((cartLine.DeliveryMode && cartLine.DeliveryMode !== '') ? (cartLine.DeliveryMode !== pickupDeliveryModeCode && cartLine.DeliveryMode !== emailDeliveryModeCode) : cartLine)\n ));\n }\n\n @computed private get billingAddress(): Address | undefined {\n return this.props.data.checkout.result?.billingAddress;\n }\n\n @computed private get shippingAddress(): Address | undefined {\n return this.props.data.checkout.result?.shippingAddress;\n }\n\n @computed private get getLoyaltyAmount(): number {\n const checkoutState = this.props.data.checkout.result;\n return checkoutState?.loyaltyAmount ? checkoutState.loyaltyAmount : 0;\n }\n\n @computed private get getGiftCardTotalAmount(): number {\n const checkoutState = this.props.data.checkout.result;\n if (!checkoutState || !checkoutState.giftCardExtends) {\n return 0;\n }\n return checkoutState.giftCardExtends.reduce(\n (count: number, giftCard: IGiftCardExtend) => {\n return count + (giftCard.Balance || 0);\n },\n 0);\n }\n\n @computed private get getCustomerAccountAmount(): number {\n const checkoutState = this.props.data.checkout.result;\n const defaultAmount = 0;\n\n return checkoutState?.customerAccountAmount ?? defaultAmount;\n }\n\n @computed private get shouldPaidByCard(): boolean {\n const {\n data: {\n checkout\n },\n config\n } = this.props;\n if (!checkout.result) {\n return false;\n }\n\n const checkoutResult = checkout.result;\n const cart = checkoutResult.checkoutCart.cart;\n if (!cart || !cart.CartLines || cart.CartLines.length === 0) {\n return false;\n }\n\n const { paymentTenderType, tokenizedPaymentCard } = checkoutResult;\n const isPaidByOtherPaymentSource = config.paymenTenderType !== paymentTenderType && tokenizedPaymentCard;\n\n // Use payment card when it is not free or gift card balance + Loyalty amount can not cover the total amount\n const amountDue = (cart.TotalAmount || 0) - this.getGiftCardTotalAmount - this.getLoyaltyAmount - this.getCustomerAccountAmount;\n\n return amountDue > 0 && !isPaidByOtherPaymentSource;\n }\n\n @computed private get isBillingAddressRequried(): boolean {\n return this.shouldPaidByCard;\n }\n\n /**\n * On submit address.\n */\n private readonly _onSubmitAddress = (): void => {\n if (!this.addressFormat.validateAddressFormat(this.addUpdateAddress, this.validationError, this.countryRegionId)) {\n this.props.moduleState.setHasError(true);\n return;\n }\n\n this._setBillingAddress(this.addUpdateAddress);\n this._updateCurrentOperation(AddressOperation.Show, this.addUpdateAddress);\n this._updateModuleState();\n };\n\n /**\n * On submit.\n */\n private readonly onSubmit = (): void => {\n switch (this.currentOperation) {\n case AddressOperation.Add:\n case AddressOperation.Update:\n this._onSubmitAddress();\n break;\n case AddressOperation.Show:\n if (this.selectedAddress) {\n this._setBillingAddress(this.selectedAddress);\n this._updateCurrentOperation(AddressOperation.Show, this.selectedAddress);\n this._updateModuleState();\n }\n break;\n default:\n this.props.telemetry.error('Invalid operation');\n }\n };\n\n /**\n * On cancel.\n */\n private readonly onCancel = (): void => {\n switch (this.currentOperation) {\n case AddressOperation.Add:\n case AddressOperation.Update:\n this._resetView();\n this._clearAddressFields();\n break;\n case AddressOperation.Show:\n this._resetView();\n break;\n default:\n this.props.telemetry.error('Invalid operation');\n }\n };\n\n /**\n * On edit.\n */\n private readonly onEdit = (): void => {\n if (this.isBillingAddressSameAsShipping && this.shippingAddress && this.isCartContainsItemsForShipping) {\n this._updateCurrentOperation(AddressOperation.Show, this.shippingAddress);\n } else {\n this._updateCurrentOperation(AddressOperation.Add, this.billingAddress);\n }\n this.props.moduleState.onUpdating();\n };\n\n /**\n * Sets billing address.\n * @param address - The address.\n */\n private readonly _setBillingAddress = (address: Address): void => {\n if (this.props.data.checkout.result) {\n const newBillingAddress = { ...address };\n\n if (address.ThreeLetterISORegionName && !newBillingAddress.TwoLetterISORegionName) {\n newBillingAddress.TwoLetterISORegionName = this.addressFormat.getTwoLetterISORegionName(address.ThreeLetterISORegionName);\n }\n\n this.props.data.checkout.result.updateBillingAddress(\n {\n newBillingAddress,\n additionalProperties: {\n isBillingAddressSameAsShippingAddress: this.isBillingAddressSameAsShipping\n } });\n }\n };\n\n /**\n * Reset view.\n */\n private readonly _resetView = () => {\n this._updateCurrentOperation(AddressOperation.Show, this.billingAddress);\n this._updateModuleState();\n };\n\n /**\n * Update current operation.\n * @param operation - Address operation\n * @param selectedAddress - The selected address.\n */\n private readonly _updateCurrentOperation = (operation: AddressOperation, selectedAddress?: Address) => {\n this.currentOperation = operation;\n this.selectedAddress = selectedAddress;\n\n if (this.currentOperation === AddressOperation.Add || this.currentOperation === AddressOperation.Update) {\n this.addUpdateAddress = { ...this.selectedAddress } || {};\n set(this.addUpdateAddress, { ThreeLetterISORegionName: this.addUpdateAddress.ThreeLetterISORegionName || this.countryRegionId });\n set(this.addUpdateAddress, { AddressTypeValue: this.addUpdateAddress.AddressTypeValue || this.defaultAddressType });\n }\n };\n\n /**\n * Updates the module state.\n */\n private readonly _updateModuleState = () => {\n if (this.currentOperation === AddressOperation.Show) {\n this.props.moduleState.onReady();\n } else {\n this.props.moduleState.onUpdating();\n }\n };\n}\n\nexport default CheckoutBillingAddress;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { CacheType, IActionContext, IActionInput } from '@msdyn365-commerce/core';\n\nimport { IModuleStates } from './module-state.data';\n\n/**\n * GetModulesInput.\n */\nexport class ModuleStatesCacheKey implements IActionInput {\n public getCacheKey = () => 'ModuleState';\n\n public getCacheObjectType = () => 'ModuleState';\n\n public dataCacheType = (): CacheType => 'none';\n}\n\nexport function getModuleStates(ctx: IActionContext): IModuleStates {\n const cacheKey = new ModuleStatesCacheKey();\n\n let moduleStates = ctx.get(cacheKey.getCacheObjectType(), cacheKey.getCacheKey());\n if (moduleStates) {\n return moduleStates;\n }\n ctx.update(cacheKey, {});\n moduleStates = ctx.get(cacheKey.getCacheObjectType(), cacheKey.getCacheKey());\n return moduleStates;\n}\n\nexport function updateModuleStates(value: IModuleStates, ctx: IActionContext): void {\n const cacheKey = new ModuleStatesCacheKey();\n ctx.update(cacheKey, value);\n}\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { IPaymentConnectorPostMessage } from './payment-instrument-message';\n\n/**\n * Payment iFrame interface.\n */\nexport interface IPaymentFrameElementProps {\n className?: string;\n moduleName?: string;\n iframeAriaLabel: string;\n displayContent?: string;\n sourceUrl?: string;\n requestUrlOrigin?: string;\n messageOrigin?: string;\n // eslint-disable-next-line @typescript-eslint/naming-convention -- public props.\n css?: string;\n height?: number;\n // eslint-disable-next-line @typescript-eslint/naming-convention -- public event.\n onIFrameMessage?(event: MessageEvent): void;\n}\n\n/**\n * Default post message name.\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention -- Existing name.\nexport const POST_MESSAGE_NAME = 'message';\n\n/**\n * Get host name.\n * @param url - The url.\n * @returns The host name.\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention -- Public props.\nconst getHostName = (url: string = ''): string => {\n return (url.includes('//') ? url.split('/')[2] : url.split('/')[0]).toLowerCase();\n};\n\n/**\n *\n * IFrameElement component.\n * @extends {React.PureComponent}\n */\nexport class Iframe extends React.PureComponent {\n private readonly iframeRef: React.RefObject;\n\n // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility -- Existing code.\n constructor(props: IPaymentFrameElementProps) {\n super(props);\n this.iframeRef = React.createRef();\n }\n\n public componentDidMount(): void {\n window.addEventListener(POST_MESSAGE_NAME, this.onEvent);\n\n this.updateContentDocument();\n }\n\n public componentDidUpdate(previousProps: IPaymentFrameElementProps): void {\n if (previousProps.displayContent !== this.props.displayContent) {\n this.updateContentDocument();\n }\n }\n\n public componentWillUnmount(): void {\n window.removeEventListener(POST_MESSAGE_NAME, this.onEvent);\n }\n\n public render(): JSX.Element | null {\n const { sourceUrl, className, iframeAriaLabel, height, moduleName = 'checkout-payment-instrument' } = this.props;\n return (\n \n );\n }\n\n /**\n * Post message.\n * @param parameters - Payment connector post message.\n */\n public postMessage = (parameters: IPaymentConnectorPostMessage): void => {\n if (this.iframeRef.current?.contentWindow?.postMessage) {\n this.iframeRef.current.contentWindow.postMessage(parameters.message, parameters.targetOrigin);\n }\n };\n\n /**\n * On event.\n * @param event - The message event.\n */\n private readonly onEvent = (event: MessageEvent) => {\n // eslint-disable-next-line @typescript-eslint/naming-convention -- IFrame.\n const { sourceUrl, onIFrameMessage, requestUrlOrigin, messageOrigin } = this.props;\n const sourceHost = getHostName(sourceUrl);\n const eventHost = getHostName(event.origin);\n const requestHost = getHostName(requestUrlOrigin);\n const messageHost = getHostName(messageOrigin);\n\n // Important: security check\n // check actual origin matches with expected origin\n if (\n !onIFrameMessage ||\n (sourceUrl && !(sourceHost === eventHost || requestHost === eventHost || messageHost === eventHost)) ||\n (!sourceUrl && !(requestHost === eventHost || messageHost === eventHost))\n ) {\n return;\n }\n\n onIFrameMessage(event);\n };\n\n /**\n * Update content document.\n */\n private readonly updateContentDocument = (): void => {\n // eslint-disable-next-line @typescript-eslint/naming-convention -- Existing props.\n const { displayContent, sourceUrl, css } = this.props;\n if (!sourceUrl && displayContent && this.iframeRef.current) {\n const innerDocument = this.iframeRef.current.contentDocument;\n\n if (innerDocument) {\n innerDocument.open();\n innerDocument.write(displayContent);\n if (css) {\n // Append custom style\n const style = document.createElement('style');\n const cssNote = document.createTextNode(css);\n style.appendChild(cssNote);\n innerDocument.head.appendChild(style);\n }\n\n innerDocument.close();\n }\n }\n };\n}\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport {\n Address, AddressPurpose, CountryRegionInfo, StateProvinceInfo\n} from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { get, set } from 'mobx';\n\nimport {\n AddressItemType, IAddressDropdownsData, IAddressItem, IAddressValidationRule\n} from './address-format.data';\nimport { AddressMetaData } from './address-meta-data';\n\n/**\n *\n * Retail Service Address format parser.\n */\nexport class AddressFormat {\n private readonly countryRegionsInfo?: CountryRegionInfo[];\n\n private readonly addressPurposes?: AddressPurpose[];\n\n private readonly addressMetaData: AddressMetaData;\n\n constructor(countryRegionsInfo: CountryRegionInfo[], addressMetaData: AddressMetaData, addressPurposes: AddressPurpose[]) {\n this.countryRegionsInfo = countryRegionsInfo;\n this.addressMetaData = addressMetaData;\n this.addressPurposes = addressPurposes;\n }\n\n public getAddressFormat(countryRegionId: string): IAddressItem[] {\n const countryRegionInfo = this._getCountryRegionInfo(countryRegionId);\n if (countryRegionInfo) {\n return this._getAddressDisplayFormat(countryRegionInfo);\n }\n return [];\n }\n\n public getCountryFormat(): { key?: string; value?: string }[] {\n return (this.countryRegionsInfo || []).map(countryRegion => {\n return {\n key: countryRegion.CountryRegionId,\n value: countryRegion.ShortName\n };\n });\n }\n\n public getStateFormat(stateProvinceInfo?: StateProvinceInfo[]): { key?: string; value?: string }[] {\n return (stateProvinceInfo || []).map(state => {\n return {\n key: state.StateId,\n value: state.StateName\n };\n });\n }\n\n public getAddressTypeFormat(): { key?: number; value?: string }[] {\n return (this.addressPurposes || []).map(addressPurpose => {\n return {\n key: addressPurpose.AddressType,\n value: addressPurpose.Name\n };\n });\n }\n\n public getPrefilledAddressDropdownData = (stateDefaultSelectionText: string, stateProvinceInfo?: StateProvinceInfo[]): IAddressDropdownsData => {\n const defaultStateText = {\n key: '',\n value: stateDefaultSelectionText\n };\n const dropdownData: IAddressDropdownsData = {};\n\n dropdownData[AddressItemType[AddressItemType.ThreeLetterISORegionName]] = this.getCountryFormat();\n dropdownData[AddressItemType[AddressItemType.State]] = this.getStateFormat(stateProvinceInfo);\n dropdownData[AddressItemType[AddressItemType.State]].unshift(defaultStateText);\n dropdownData[AddressItemType[AddressItemType.AddressTypeValue]] = this.getAddressTypeFormat();\n\n return dropdownData;\n };\n\n public getTwoLetterISORegionName = (countryRegionId: string): string | undefined => {\n const countryRegionInfo = this._getCountryRegionInfo(countryRegionId);\n\n return countryRegionInfo!.ISOCode;\n };\n\n public validateAddressFormat = (address: Address, validationError: Address, countryRegionId: string, propertyName?: string): boolean => {\n let isValid: boolean = true;\n let validationtor;\n const addressFormat = this.getAddressFormat((address.ThreeLetterISORegionName) || countryRegionId);\n\n addressFormat.forEach(addressFormatItem => {\n if (!propertyName || (propertyName && addressFormatItem.name === propertyName)) {\n validationtor = this._inputValidation(addressFormatItem, validationError, address);\n if (validationtor !== undefined) {\n isValid = validationtor;\n }\n }\n });\n\n return isValid;\n };\n\n public getTranformedAddress = (result: Microsoft.Maps.ISuggestionResult, stateProvinceInfo?: StateProvinceInfo[]): Address => {\n const address: Address = {};\n\n // Zip Code\n if (result.address.postalCode !== undefined) {\n address.ZipCode = result.address.postalCode;\n } else {\n address.ZipCode = '';\n }\n\n // State\n if (stateProvinceInfo) {\n const selectedState = stateProvinceInfo.find(state => state.StateName === result.address.adminDistrict);\n if (!selectedState) {\n address.State = '';\n address.StateName = result.address.adminDistrict;\n } else {\n address.State = selectedState.StateId;\n address.StateName = selectedState.StateName;\n }\n }\n\n // Street\n if (result.address.addressLine !== undefined) {\n address.Street = result.address.addressLine;\n } else {\n address.Street = ' ';\n }\n\n // City\n if (result.address.locality !== undefined) {\n address.City = result.address.locality;\n } else {\n address.City = '';\n }\n\n // District\n if (result.address.district !== undefined) {\n address.DistrictName = result.address.district;\n address.CountyName = result.address.district;\n } else {\n address.DistrictName = '';\n }\n\n // Formatted Address\n address.FullAddress = result.address.formattedAddress;\n\n return address;\n };\n\n private _inputValidation(addressFormatItem: IAddressItem, validationError: Address, address: Address): boolean | undefined {\n set(validationError, { [addressFormatItem.name]: null });\n for (const validationRule of (addressFormatItem.validationRules || [])) {\n if (!this._validateRegEx(address, addressFormatItem.name, validationRule)) {\n set(validationError, { [addressFormatItem.name]: validationRule.message });\n return false;\n }\n }\n return undefined;\n }\n\n private readonly _validateRegEx = (address: Address, propertyName: string, validationRule: IAddressValidationRule): boolean => {\n if (validationRule.regEx && validationRule.regEx.length > 0) {\n const regex = new RegExp(validationRule.regEx);\n return regex.test(get(address, propertyName) as string || '');\n }\n return true;\n };\n\n private _getCountryRegionInfo(countryRegionId: string): CountryRegionInfo | undefined {\n return (this.countryRegionsInfo || []).find(countryRegion => {\n return ((countryRegion.CountryRegionId || '').toLowerCase() === countryRegionId.toLowerCase());\n });\n }\n\n private _getAddressDisplayFormat(countryRegionInfo: CountryRegionInfo): IAddressItem[] {\n const addressDisplayItem: IAddressItem[] = [];\n\n if (countryRegionInfo && countryRegionInfo.AddressFormatLines) {\n const AddressTypeItem = this._extendAddressDisplayFormat(AddressItemType.AddressTypeValue, true);\n if (AddressTypeItem) {\n addressDisplayItem.push(AddressTypeItem);\n }\n\n const nameDisplayItem = this._extendAddressDisplayFormat(AddressItemType.Name, true);\n if (nameDisplayItem) {\n addressDisplayItem.push(nameDisplayItem);\n }\n\n countryRegionInfo.AddressFormatLines.forEach(formatLine => {\n if (formatLine.AddressComponentNameValue) {\n const addressItem = this.addressMetaData.getItemFormat(formatLine.AddressComponentNameValue);\n if (addressItem) {\n addressItem.isNewLine = formatLine.NewLine || false;\n addressDisplayItem.push(addressItem);\n }\n }\n });\n\n const phoneDisplayItem = this._extendAddressDisplayFormat(AddressItemType.Phone, false);\n if (phoneDisplayItem) {\n addressDisplayItem.push(phoneDisplayItem);\n }\n\n const isPrimaryDisplayItem = this._extendAddressDisplayFormat(AddressItemType.IsPrimary, false);\n if (isPrimaryDisplayItem) {\n addressDisplayItem.push(isPrimaryDisplayItem);\n }\n }\n\n return addressDisplayItem;\n }\n\n private _extendAddressDisplayFormat(type: AddressItemType, isNewLine: boolean): IAddressItem | undefined {\n const addressItem = this.addressMetaData.getItemFormat(type);\n if (addressItem) {\n addressItem.isNewLine = isNewLine;\n }\n return addressItem;\n }\n}\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IActionInput, ICoreContext, IObservableAction, ITelemetry } from '@msdyn365-commerce/core';\nimport {\n Address, AddressPurpose, CountryRegionInfo, StateProvinceInfo\n} from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport {\n addAddress, AddressManagementInput, ArrayExtensions,\n updateAddress, updatePrimaryAddress } from '@msdyn365-commerce-modules/retail-actions';\n\nimport { getAddressPurposesAction, GetAddressPurposesInput } from '../actions/get-address-purposes';\nimport { getStateProvinceAction, GetStateProvincesInput } from '../actions/get-state-provinces';\nimport { IAddressResource, IAddressResponse } from './address-module.data';\n\n/**\n *\n * Address common.\n */\nexport class AddressCommon {\n\n private readonly context: ICoreContext;\n\n private readonly resources: IAddressResource;\n\n private readonly telemetry: ITelemetry;\n\n constructor(context: ICoreContext, resources: IAddressResource, telemetry: ITelemetry) {\n this.context = context;\n this.resources = resources;\n this.telemetry = telemetry;\n }\n\n public getDefaultCountryRegionId = (countryRegionId: string, countryRegions: CountryRegionInfo[], market?: string): string => {\n const marketISOCode = market || 'US';\n const currentCountryRegion = countryRegions.find(countryRegion => (countryRegion.ISOCode || '') === marketISOCode);\n return (currentCountryRegion && currentCountryRegion.CountryRegionId) || countryRegionId;\n };\n\n public parseRetailException = (resources: IAddressResource): IAddressResponse => {\n return {\n errorTitle: resources.addressErrorMessageTitle,\n errorMessage: resources.addressGenericErrorMessage\n };\n };\n\n public isAuthenticatedFlow = (): boolean => {\n return this.context.request.user.isAuthenticated;\n };\n\n public getStateProvinces = async (countryRegionId: string): Promise => {\n let response: StateProvinceInfo[] = [];\n if (this.context && this.context.actionContext) {\n try {\n const input = new GetStateProvincesInput(countryRegionId, this.context.request.apiSettings);\n response = await getStateProvinceAction(input, this.context.actionContext);\n } catch (error) {\n if (this.telemetry) {\n this.telemetry.error(`Error encountered ${error}`);\n this.telemetry.debug('Unable to get state provinces');\n }\n }\n }\n return Promise.resolve(response);\n };\n\n // For any address, check for common requried field else treat it as invalid\\empty address.\n public isEmpty = (address: Address): boolean => {\n if (address && address.ThreeLetterISORegionName && (address.State || address.City)) {\n return false;\n }\n\n return true;\n };\n\n public addCustomerAddress = async (address: Address): Promise => {\n await this.updateLogisticsLocationRoleRecordId(address);\n return this.submitCustomerAddress(addAddress, address);\n };\n\n public updateCustomerAddress = async (address: Address): Promise => {\n await this.updateLogisticsLocationRoleRecordId(address);\n return this.submitCustomerAddress(updateAddress, address);\n };\n\n public updateCustomerPrimaryAddress = async (address: Address): Promise => {\n return this.submitCustomerAddress(updatePrimaryAddress, address);\n };\n\n private readonly submitCustomerAddress = async (addressAction: IObservableAction, address: Address): Promise => {\n address.AddressTypeValue = address.AddressTypeValue || 7; // 7 sets it to HOME by default\n\n const input = new AddressManagementInput(address);\n return this.execAddressAction(addressAction, input, address);\n };\n\n private readonly execAddressAction = async (addressAction: IObservableAction, input: IActionInput | IActionInput[], address: Address): Promise => {\n let response: IAddressResponse = {};\n\n if (this.context && this.context.actionContext) {\n try {\n const addresses = await addressAction(input, this.context.actionContext);\n if (addresses.length > 0) {\n response.address = address.RecordId ? address : addresses[addresses.length - 1];\n } else {\n response.address = address;\n }\n response.customerAddresses = addresses;\n } catch (error) {\n if (this.telemetry) {\n this.telemetry.error(`Error encountered ${error}`);\n this.telemetry.debug('Unable to exec address action');\n }\n response = this.parseRetailException(this.resources);\n }\n }\n return Promise.resolve(response);\n };\n\n /**\n * Function to get the address purposes and update the LogisticsLocationRoleRecordId to update the address type.\n * @param address - Address object.\n * @returns Returns void.\n */\n private readonly updateLogisticsLocationRoleRecordId = async (address: Address): Promise => {\n let addressPurposes: AddressPurpose[] = [];\n try {\n const input: GetAddressPurposesInput = new GetAddressPurposesInput(this.context.request.apiSettings);\n addressPurposes = await getAddressPurposesAction(input, this.context.actionContext);\n } catch (error) {\n // eslint-disable-next-line @typescript-eslint/restrict-template-expressions -- Supparsing the any type for error.\n this.telemetry.error(`Error encountered ${error}`);\n this.telemetry.debug('Unable to get address purposes');\n }\n if (ArrayExtensions.hasElements(addressPurposes)) {\n const addressPurpose: AddressPurpose | undefined = addressPurposes.find(purpose => purpose.AddressType === address.AddressTypeValue);\n if (addressPurpose) {\n address.LogisticsLocationRoleRecordId = addressPurpose.RecordId;\n }\n }\n };\n}\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\n/**\n * Visibility observer state.\n */\ninterface IVisibilityObserverState {\n isVisible?: boolean;\n errorMessage?: string;\n observer?: MutationObserver;\n}\n\n/**\n * Visibility observer props.\n */\nexport interface IVisibilityObserverProps {\n visibilityObserver?: IVisibilityObserverState;\n}\n\n/**\n * With visibility observer.\n * @param WrappedComponent - Wrapped component.\n * @param className - ClassName.\n * @returns React node.\n */\n// eslint-disable-next-line xss/no-mixed-html, @typescript-eslint/naming-convention -- Existing component.\nexport const withVisibilityObserver = (WrappedComponent: React.ComponentType
,\n className = 'ms-checkout-payment-instrument'): React.ComponentType
=> {\n /**\n *\n * VisibilityObserver component.\n * @extends {React.Component
}\n */\n class VisibilityObserver extends React.Component
{\n // eslint-disable-next-line react/state-in-constructor -- Existing pattern.\n public state: IVisibilityObserverState = {\n isVisible: false,\n // eslint-disable-next-line react/no-unused-state -- Need show error.\n errorMessage: '',\n observer: undefined\n };\n\n private readonly selfRef: React.RefObject = React.createRef();\n\n public componentDidMount(): void {\n this.initMutationObserver();\n }\n\n public componentWillUnmount(): void {\n this.stopMutationObserver();\n }\n\n public shouldComponentUpdate(nextProps: IVisibilityObserverProps, nextState: IVisibilityObserverState): boolean {\n if (this.state === nextState && this.props === nextProps) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element | null {\n return (\n \n \n
\n );\n }\n\n /**\n * Initial mutation observer.\n */\n private readonly initMutationObserver = (): void => {\n // Select the node that will be observed for mutations\n const targetNode = document.getElementsByTagName('body')[0];\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Better double check.\n if (!targetNode) {\n this.setState({\n // eslint-disable-next-line react/no-unused-state -- Need show error.\n errorMessage: 'No body element found'\n });\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Better double check.\n if (!MutationObserver) {\n this.setState({\n // eslint-disable-next-line react/no-unused-state -- Need show error.\n errorMessage: 'MutationObserver is not supported'\n });\n return;\n }\n\n // Options for the observer (which mutations to observe)\n const config = { attributes: true, childList: true, subtree: true };\n\n // Create an observer instance linked to the callback function\n const mutationObserver = new MutationObserver(() => {\n this.handleVisibilityChange();\n });\n mutationObserver.observe(targetNode, config);\n\n this.setState({\n observer: mutationObserver\n });\n };\n\n /**\n * Stop mutation observer.\n */\n private readonly stopMutationObserver = (): void => {\n this.state.observer?.disconnect();\n };\n\n /**\n * Handle visibility change.\n */\n private readonly handleVisibilityChange = (): void => {\n // If module is visible or not\n const isVisible = !!this.selfRef.current && this.selfRef.current.offsetWidth > 0 && this.selfRef.current.offsetHeight > 0;\n if (!this.state.isVisible && isVisible) {\n this.setState({\n isVisible\n });\n this.stopMutationObserver();\n }\n };\n }\n\n return VisibilityObserver;\n};\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\n/**\n * Payment connect post message type.\n */\nexport enum PaymentConnectorPostMessageType {\n CardPrefix = 'msax-cc-cardprefix',\n Error = 'msax-cc-error',\n Height = 'msax-cc-height',\n Result = 'msax-cc-result',\n Submit = 'msax-cc-submit',\n ExtraContext = 'msax-cc-extracontext',\n Redirect = 'msax-cc-redirect',\n Showoverlay = 'msax-cc-showoverlay',\n Hideoverlay = 'msax-cc-hideoverlay'\n}\n\n/**\n * Interface for payment connector post message.\n */\nexport interface IPaymentConnectorPostMessage {\n message: string;\n targetOrigin: string;\n}\n\n/**\n * Payment connector message.\n * @param data - Data with message.\n * @param messageType - Message type.\n * @returns Payment connector post message.\n */\nexport function paymentConnectorMessage(data: string, messageType: PaymentConnectorPostMessageType): IPaymentConnectorPostMessage {\n return {\n message: JSON.stringify({\n type: messageType,\n value: data\n }),\n targetOrigin: '*'\n };\n}\n\n/**\n * Payment connector extra context message.\n * @param data - The data.\n * @returns The payment connector post message.\n */\nexport function paymentConnectorExtraContextMessage(data: string): IPaymentConnectorPostMessage {\n return paymentConnectorMessage(data, PaymentConnectorPostMessageType.ExtraContext);\n}\n\n/**\n * Payment connector submit message.\n * @returns The payment connector post message.\n */\nexport function paymentConnectorSubmitMessage(): IPaymentConnectorPostMessage {\n return paymentConnectorMessage('true', PaymentConnectorPostMessageType.Submit);\n}\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ICheckoutSectionContainerItem, ICheckoutSectionContainerViewProps } from './checkout-section-container';\n\nconst ItemComponent: React.FC = ({ loading, itemProps, item }) => (\n <>\n {loading}\n \n {item}\n \n >\n);\n\nconst CheckoutSectionContainerView: React.FC = ({ checkoutPlainContainerProps, items }) => (\n \n {items.map(item => (\n \n ))}\n \n);\n\nexport default CheckoutSectionContainerView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Button, INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nexport interface IAddContactInfoInput {\n inputRef?: React.RefObject;\n hasError: boolean;\n email: string;\n resources: {\n emailLabel: string;\n emailErrortext: string;\n saveBtnLabel: string;\n cancelBtnLabel: string;\n };\n canSubmit: boolean;\n canCancel: boolean;\n onChange(email: string): void;\n onSubmit(): void;\n onCancel(): void;\n}\n\nexport interface IAddContactInfo {\n addFormProps: INodeProps;\n submitButton: React.ReactNode;\n cancelButton: React.ReactNode;\n inputGroupProps: INodeProps;\n label: React.ReactNode;\n error: React.ReactNode;\n input: React.ReactNode;\n}\n\n/**\n * On Input change handler function.\n * @param onChange -On change input function.\n * @returns Call of onChange function.\n */\nconst onInputChangeHandler = (onChange: (email: string) => void) => (event: React.ChangeEvent): void => {\n onChange(event.target.value || '');\n};\n\nconst getAddContactInfo = ({\n hasError,\n inputRef,\n email,\n canSubmit,\n canCancel,\n onChange,\n onSubmit,\n onCancel,\n resources: { emailLabel, emailErrortext, saveBtnLabel, cancelBtnLabel }\n}: IAddContactInfoInput): IAddContactInfo => {\n const onInputChange = onInputChangeHandler(onChange);\n\n return {\n addFormProps: { className: 'ms-checkout-guest-profile__add-contact-info' },\n submitButton: canSubmit && (\n \n ),\n cancelButton: canCancel && (\n \n ),\n inputGroupProps: { className: classnames('ms-checkout-guest-profile__input', { 'is-invalid': hasError }) },\n label: (\n \n ),\n error: hasError && (\n \n {emailErrortext}\n \n ),\n input: (\n \n )\n };\n};\n\nexport default getAddContactInfo;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Button, INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface IShowContactInfoInput {\n canEdit: boolean;\n email: string;\n resources: {\n editBtnLabel: string;\n };\n onEdit(): void;\n}\n\nexport interface IShowContactInfo {\n showInfoProps: INodeProps;\n email: React.ReactNode;\n editButton?: React.ReactNode;\n}\n\nconst getContactInfo = ({ canEdit, email, resources: { editBtnLabel }, onEdit }: IShowContactInfoInput): IShowContactInfo => ({\n showInfoProps: { className: 'ms-checkout-guest-profile__selected-item' },\n email: \n {email}\n ,\n editButton: canEdit && (\n \n )\n});\n\nexport default getContactInfo;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IModuleStateProps, withModuleState } from '@msdyn365-commerce-modules/checkout-utilities';\nimport { EmailRegex } from '@msdyn365-commerce-modules/retail-actions';\nimport { IModuleProps } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { computed, reaction, when } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { ICheckoutGuestProfileData } from './checkout-guest-profile.data';\nimport { ICheckoutGuestProfileProps } from './checkout-guest-profile.props.autogenerated';\nimport getAddContactInfo, { IAddContactInfo } from './components/get-add-contact-info';\nimport getShowContactInfo, { IShowContactInfo } from './components/get-show-contact-info';\n\nexport * from './components/get-add-contact-info';\nexport * from './components/get-show-contact-info';\n\ninterface ICheckoutGuestProfileState {\n email: string;\n}\n\nexport interface ICheckoutGuestProfileModuleProps extends ICheckoutGuestProfileProps, IModuleStateProps { }\n\nexport interface ICheckoutGuestProfileViewProps extends ICheckoutGuestProfileProps, ICheckoutGuestProfileState {\n moduleProps: IModuleProps;\n showContactInfo?: IShowContactInfo;\n addContactInfo?: IAddContactInfo;\n\n onChange?(email: string): void;\n onEdit?(): void;\n onSubmit?(): void;\n onCancel?(): void;\n}\n\n/**\n *\n * CheckoutGuestProfile component.\n * @extends {React.PureComponent, ICheckoutGuestProfileState>}\n */\n// @ts-expect-error\n@withModuleState\n@observer\nclass CheckoutGuestProfile extends React.Component {\n public state: ICheckoutGuestProfileState = {\n email:\n (this.props.context &&\n this.props.context.request &&\n this.props.context.request.user &&\n this.props.context.request.user.isAuthenticated &&\n this.props.context.request.user.emailAddress) ||\n ''\n };\n\n private readonly inputRef: React.RefObject = React.createRef();\n\n @computed get isDataReady(): boolean {\n return (this.props.data.checkout.result && this.props.data.checkout.status) === 'SUCCESS';\n }\n\n public componentDidMount(): void {\n when(\n () => this.isDataReady,\n async () => {\n await this.init();\n }\n );\n\n reaction(\n () => this.props.data.checkout.result?.isExpressCheckoutApplied,\n async (isExpressCheckoutApplied) => {\n if (isExpressCheckoutApplied) {\n const email = this.props.data.checkout.result?.emailAddressFromExpressCheckout ?? '';\n\n await this.submitEmail(email);\n }\n }\n );\n }\n\n public shouldComponentUpdate(nextProps: ICheckoutGuestProfileModuleProps,\n nextState: ICheckoutGuestProfileState): boolean {\n if (this.state === nextState && this.props.data === nextProps.data) {\n return false;\n }\n return true;\n }\n\n public render(): JSX.Element {\n const {\n config: { className },\n resources,\n moduleState: { isReady, hasError, hasExternalSubmitGroup }\n } = this.props;\n const email = this.props.data.checkout.result?.guestCheckoutEmail ?? '';\n\n const viewProps: ICheckoutGuestProfileViewProps = {\n ...this.props,\n ...this.state,\n onChange: this.onChange,\n onEdit: this.onEdit,\n onCancel: this.onCancel,\n onSubmit: this.onSubmit,\n\n moduleProps: {\n moduleProps: this.props,\n className: classnames('ms-checkout-guest-profile', className, isReady ? 'show' : 'add')\n },\n showContactInfo: isReady ? getShowContactInfo({\n canEdit: !hasExternalSubmitGroup,\n email,\n resources,\n onEdit: this.onEdit\n }) : undefined,\n addContactInfo: !isReady ? getAddContactInfo({\n email: this.state.email,\n hasError,\n resources,\n inputRef: this.inputRef,\n onChange: this.onChange,\n canSubmit: !hasExternalSubmitGroup,\n onSubmit: this.onSubmit,\n canCancel: !hasExternalSubmitGroup && !!email,\n onCancel: this.onCancel\n }) : undefined\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n private readonly init = async (): Promise => {\n const checkoutState = this.props.data.checkout.result;\n\n const hasInvoiceLine = checkoutState?.checkoutCart.hasInvoiceLine;\n\n const emailOnCart = checkoutState?.checkoutCart.cart.ReceiptEmail;\n const email = hasInvoiceLine ? (this.props.context.request.user.emailAddress ?? '') : (emailOnCart ??\n (checkoutState?.isExpressCheckoutApplied ? checkoutState.emailAddressFromExpressCheckout : undefined) ?? this.state.email);\n\n if (email) {\n await this.updateGuestProfile(email);\n checkoutState?.updateHasGuestCheckoutEmail({ newHasGuestCheckoutEmail: true });\n } else {\n checkoutState?.updateHasGuestCheckoutEmail({ newHasGuestCheckoutEmail: false });\n }\n\n const isEmailValid = this.isEmailValid(email);\n this.props.moduleState.init({\n onEdit: this.onEdit,\n onCancel: this.onCancel,\n onSubmit: this.onSubmit,\n status: hasInvoiceLine ? 'disabled' : (email && isEmailValid ? 'ready' : 'updating'),\n hasError: !!email && !isEmailValid\n });\n };\n\n private readonly onChange = (rowEmail: string): void => {\n const email = (rowEmail || '').replace(new RegExp('[<>]', 'gi'), '');\n this.setState({ email });\n if (this.props.moduleState.hasError) {\n // Clear error during user updating the email\n this.props.moduleState.setHasError(false);\n }\n };\n\n private readonly isEmailValid = (email: string): boolean => {\n return EmailRegex.defaultRegex.test(email);\n };\n\n private readonly updateGuestProfile = async (newGuestCheckoutEmail: string): Promise => {\n if (this.props.data.checkout.result) {\n await this.props.data.checkout.result.updateGuestCheckoutEmail({ newGuestCheckoutEmail });\n this.setState({ email: newGuestCheckoutEmail });\n }\n };\n\n private readonly onEdit = (): void => {\n this.props.moduleState.onUpdating();\n };\n\n private readonly onSubmit = async (): Promise => {\n const { email } = this.state;\n await this.submitEmail(email);\n };\n\n /**\n * Submit the email address.\n * @param email - The email to be submitted.\n *\n */\n private readonly submitEmail = async (email: string): Promise => {\n const isValid = this.isEmailValid(email);\n if (!isValid) {\n this.props.moduleState.setHasError(true);\n\n // eslint-disable-next-line xss/no-mixed-html -- Get error, focus back on the input field.\n const input = this.inputRef.current?.focus && (this.inputRef.current as HTMLElement);\n input?.focus();\n } else {\n this.props.moduleState.onReady();\n await this.updateGuestProfile(email);\n }\n };\n\n private readonly onCancel = (): void => {\n // Reset to the saved value\n if (!this.props.data.checkout.result) {\n return;\n }\n\n const email = this.props.data.checkout.result.guestCheckoutEmail;\n if (!email) {\n // It has no saved email, set to status updating and request user to fill the email form\n this.props.moduleState.onUpdating();\n\n } else {\n // It has saved email, set to status ready\n this.setState({\n email\n });\n this.props.moduleState.setHasError(false);\n this.props.moduleState.onReady();\n }\n };\n}\n\nexport default CheckoutGuestProfile;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\nconst Loading: React.FC = () => ;\n\nexport default Loading;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { IModuleStateManager, IModuleStateProps, withModuleState } from '@msdyn365-commerce-modules/checkout-utilities';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { IModuleProps, INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport classname from 'classnames';\nimport get from 'lodash/get';\nimport { computed, reaction } from 'mobx';\nimport { observer } from 'mobx-react';\nimport * as React from 'react';\n\nimport { ICheckoutSectionContainerData } from './checkout-section-container.data';\nimport { ICheckoutSectionContainerProps } from './checkout-section-container.props.autogenerated';\nimport LoadingComponent from './components/loading';\n\n/**\n * ICheckoutSectionContainerModuleProps interface.\n */\nexport interface ICheckoutSectionContainerModuleProps extends ICheckoutSectionContainerProps, IModuleStateProps {\n enableControl: boolean;\n}\n\ninterface ICheckoutSectionContainerState {\n isCollapse?: boolean;\n}\n\nexport interface ICheckoutSectionContainerItem {\n id: string;\n loading?: React.ReactNode;\n itemProps: INodeProps;\n item: React.ReactNode;\n}\n\nexport interface ICheckoutSectionContainerViewProps extends ICheckoutSectionContainerProps<{}> {\n className: string;\n checkoutPlainContainerProps: IModuleProps;\n items: ICheckoutSectionContainerItem[];\n}\n\nconst paymentInstrumentModuleId = 'payment-instrument';\n\nconst zeroAmount = 0;\n\n/**\n *\n * CheckoutPlainContainer component.\n * @extends {React.Component>}\n */\n@observer\nexport class CheckoutPlainContainer extends React.Component {\n @computed public get amountDue(): number {\n const {\n data: { checkout }\n } = this.props;\n if (!checkout?.result) {\n return 0;\n }\n\n const checkoutResult = checkout.result;\n const cart = checkoutResult.checkoutCart?.cart;\n if (!cart || !cart.CartLines || !ArrayExtensions.hasElements(cart.CartLines)) {\n return 0;\n }\n\n return cart.TotalAmount ?? zeroAmount;\n }\n\n public constructor(props: ICheckoutSectionContainerModuleProps) {\n super(props);\n this.state = { isCollapse: false };\n }\n\n public componentDidMount(): void {\n const items = this.getItems();\n const childIds = items.map((item: React.ReactNode) => get(item, 'props.id'));\n const shouldEnableSinglePaymentAuthorizationCheckout: boolean =\n this.props.data.checkout.result?.shouldEnableSinglePaymentAuthorizationCheckout ?? false;\n\n this.props.moduleState.init({\n onEdit: this.onEdit,\n onCancel: shouldEnableSinglePaymentAuthorizationCheckout ? undefined : this.onCancel,\n onSubmit: shouldEnableSinglePaymentAuthorizationCheckout ? undefined : this.onSubmit,\n childIds\n });\n\n reaction(\n () => this.props.moduleState.isReady,\n () => {\n this.onContainerReady();\n }\n );\n\n reaction(\n () => this.props.moduleState.shouldSubmitContainer,\n () => {\n this.onSubmit();\n }\n );\n\n // Reaction to collapse the payment section for new checkout flow.\n reaction(\n () => this.props.data.checkout.result?.shouldCollapsePaymentSection,\n shouldCollapsePaymentSection => {\n const isPaymentSectionContainer = ArrayExtensions.hasElements(\n this.props.moduleState.childIds.filter(childId => childId.includes(paymentInstrumentModuleId)));\n\n if (shouldEnableSinglePaymentAuthorizationCheckout && isPaymentSectionContainer) {\n this.setState({ isCollapse: shouldCollapsePaymentSection });\n }\n }\n );\n\n // Reaction to submit section container for new checkout flow\n reaction(\n () => this.props.data.checkout.result?.shouldTriggerPaymentWithPlaceOrder,\n () => {\n const isPaymentSectionContainer = ArrayExtensions.hasElements(\n this.props.moduleState.childIds.filter(childId => childId.includes(paymentInstrumentModuleId)));\n\n if (shouldEnableSinglePaymentAuthorizationCheckout && isPaymentSectionContainer) {\n this.onSubmit();\n }\n }\n );\n\n // Reaction to set isPaymentSectionContainerReady for new checkout flow.\n reaction(\n () => this.props.moduleState.isReady,\n async (isReady) => {\n const isPaymentSectionContainer = ArrayExtensions.hasElements(\n this.props.moduleState.childIds.filter(childId => childId.includes(paymentInstrumentModuleId)));\n\n if (shouldEnableSinglePaymentAuthorizationCheckout && isPaymentSectionContainer && this.amountDue > zeroAmount) {\n await this.props.data.checkout.result?.updateIsPaymentSectionContainerReady({\n newIsPaymentSectionContainerReady: isReady\n });\n }\n }\n );\n\n // Reaction to set isPaymentSectionContainerHasError for new checkout flow.\n reaction(\n () => this.props.moduleState.hasError,\n async (hasError) => {\n const isPaymentSectionContainer = ArrayExtensions.hasElements(\n this.props.moduleState.childIds.filter(childId => childId.includes(paymentInstrumentModuleId)));\n\n if (shouldEnableSinglePaymentAuthorizationCheckout && isPaymentSectionContainer) {\n await this.props.data.checkout.result?.updateIsPaymentSectionContainerHasError({ newIsPaymentSectionContainerHasError: hasError });\n }\n }\n );\n\n reaction(\n () => this.props.data.checkout.result?.isCheckoutCallFailed,\n async () => {\n const isPaymentSectionContainer = ArrayExtensions.hasElements(\n this.props.moduleState.childIds.filter(childId => childId.includes(paymentInstrumentModuleId)));\n\n if (isPaymentSectionContainer && this.props.data.checkout.result?.isCheckoutCallFailed) {\n this.onEdit();\n await this.props.data.checkout.result.updateIsCheckoutCallFailed({ newIsCheckoutCallFailed: false });\n }\n }\n );\n }\n\n public componentDidUpdate(): void {\n if (!this.props.moduleState.hasExternalSubmitGroup) {\n return;\n }\n\n /**\n * Review all modules to updating status if one of the modules has error.\n */\n const { childIds, hasError, getModule } = this.props.moduleState;\n const hasReadyOrSkippedItems = childIds.some((childId: string) => {\n const state = getModule(childId);\n return !!state && (state.isReady || state.isSkipped);\n });\n if (hasReadyOrSkippedItems && hasError) {\n this.onEdit();\n }\n }\n\n public shouldComponentUpdate(nextProps: ICheckoutSectionContainerModuleProps,\n nextState: ICheckoutSectionContainerState): 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 enableControl,\n moduleState,\n config: { width }\n } = this.props;\n\n const items = this.getItems();\n if (items.length === 0) {\n this.props.context.telemetry.error('Checkout section content is empty, module wont render');\n return null;\n }\n\n const moduleClassName = classname(\n 'ms-checkout-section-container',\n {\n 'has-initialized': moduleState.hasInitialized,\n 'is-ready': moduleState.isReady,\n 'is-updating': !moduleState.isReady,\n container: width === 'container',\n 'col-12 fullwidth': width === 'fluid'\n },\n this.props.config.className\n );\n\n const viewProps: ICheckoutSectionContainerViewProps = {\n ...this.props,\n\n className: moduleClassName,\n checkoutPlainContainerProps: {\n moduleProps: this.props,\n className: moduleClassName\n },\n items: items.map((item: React.ReactNode) => {\n const childId = get(item, 'props.id');\n const state = moduleState.getModule(childId);\n\n // Modules has not completed initializing or it's disable\n const hidden = this.state.isCollapse || (state.hasModuleState && (!state.hasInitialized || state.isDisabled || state.isSkipped));\n return {\n id: childId,\n loading: state.hasModuleState && !state.hasInitialized && ,\n itemProps: {\n 'data-type-name': state.typeName,\n className: classname('ms-checkout-section-container__item', {\n hidden,\n initialized: state.hasInitialized,\n disabled: state.isDisabled,\n skipped: state.isSkipped,\n ready: state.isReady,\n updating: state.isUpdating,\n pending: state.isPending\n })\n },\n item: React.cloneElement(item as React.ReactElement, { enableControl })\n };\n })\n };\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n private readonly getItems = (): React.ReactNode[] => {\n const { slots } = this.props;\n return (slots && slots.primary && slots.primary.length && slots.primary) || [];\n };\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 private readonly clearError = (): void => {\n // Clear error before action, otherwise it will rise conflict;\n this.getActiveChildModuleStates().forEach(state => {\n state.hasError && state.setHasError(false);\n });\n };\n\n private readonly onSubmit = (): void => {\n const isPaymentSectionContainer = ArrayExtensions.hasElements(\n this.props.moduleState.childIds.filter(childId => childId.includes(paymentInstrumentModuleId))\n );\n\n this.clearError();\n this.getActiveChildModuleStates().forEach(state => {\n !state.isReady && state.onSubmit && state.onSubmit();\n });\n\n // Handle when the amount due is zero\n if (\n this.props.data.checkout.result?.shouldEnableSinglePaymentAuthorizationCheckout &&\n isPaymentSectionContainer &&\n this.amountDue === zeroAmount\n ) {\n this.props.data.checkout.result?.updateIsPaymentSectionContainerReady({\n newIsPaymentSectionContainerReady: true\n });\n }\n };\n\n private readonly onCancel = (): void => {\n this.clearError();\n this.getActiveChildModuleStates().forEach(state => {\n !state.isReady && state.onCancel && state.onCancel();\n });\n };\n\n private readonly onEdit = (): void => {\n this.getActiveChildModuleStates().forEach(state => {\n (state.isReady || state.isSkipped) && state.onEdit && state.onEdit();\n });\n };\n\n private readonly onContainerReady = (): void => {\n this.getActiveChildModuleStates().forEach(state => {\n state.isReady && state.onContainerReady && state.onContainerReady();\n });\n };\n}\n\nexport default withModuleState(CheckoutPlainContainer);\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IAddressAddItem, IAddressAddUpdateProps } from '../../common/components/address-add';\nimport { IAddressShowItem, IAddressShowProps } from '../../common/components/address-show';\nimport { ICheckoutBillingAddressViewProps } from './checkout-billing-address';\n\n/**\n * Address show component.\n * @param param0 - Root param.\n * @param param0.AddressDetail - Address detail.\n * @param param0.items - IAddressShowItem[].\n * @returns - Address Node.\n */\nconst AddressShow: React.FC = ({\n AddressDetail,\n items\n}) => {\n\n return (\n \n {items.map((item: IAddressShowItem) => {\n return (\n <>\n {item.description}\n >\n );\n })}\n \n );\n};\n\n/**\n * Address Add Update Component.\n * @param param0 - Root param.\n * @param param0.AddressForm - Address form.\n * @param param0.heading - Address Heading.\n * @param param0.items - IAddressAddItem[].\n * @param param0.hasError - Boolean.\n * @param param0.error - IAddressError.\n * @param param0.isShowSaveButton - Boolean.\n * @param param0.saveButton - Save button.\n * @param param0.isShowCancelButton - Boolean.\n * @param param0.cancelButton - Cancel button.\n * @returns - AddressForm Node.\n */\nconst AddressAddUpdate: React.FC = ({\n AddressForm,\n heading,\n items,\n hasError,\n error,\n isShowSaveButton,\n saveButton,\n isShowCancelButton,\n cancelButton\n}) => {\n\n return (\n \n {heading}\n {items.map((item: IAddressAddItem) => {\n const { AddressItem, key, label, alert, input } = item;\n return (\n {label}\n {alert}\n {input}\n );\n })}\n {hasError && \n {error.title}\n {error.message}\n }\n {isShowSaveButton && saveButton}\n {isShowCancelButton && cancelButton}\n \n );\n};\n\n/**\n * Checkout Billing Address View Component.\n * @param props - Props.\n * @returns - CheckoutBillingAddress Module.\n */\nconst CheckoutBillingAddressView: React.FC = props => {\n const { CheckoutBillingAddress, viewState, heading, sameAsShippingCheckbox, showAddress, showAddOrUpdateAddress } = props;\n\n return (\n \n {heading}\n {viewState.isShowSameAsShippingCheckbox && sameAsShippingCheckbox}\n {viewState.isShowAddress && }\n {viewState.isShowAddOrUpdateAddress && }\n \n );\n};\n\nexport default CheckoutBillingAddressView;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport withModuleState from './with-module-state';\n\nexport * from './module-state';\nexport * from './module-state.data';\n\nexport { withModuleState };\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Waiting } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\n/**\n * Payment waiting props.\n */\nexport interface IPaymentWaitingProps {\n message: string;\n className?: string;\n}\n\n/**\n * Payment waiting.\n * @param param0 - First in param.\n * @param param0.message - Message.\n * @param param0.className - ClassName.\n * @returns React node.\n */\nexport const WaitingComponent: React.FC = ({ message, className = 'ms-checkout-payment-instrument' }) => (\n \n \n \n {message}\n \n
\n);\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\nexport interface IAdressAlert {\n message?: string;\n}\n\n/**\n * Address alert.\n * @param props - Configuration of the functional component.\n * @returns React functional component.\n */\nexport const AddressAlertFunctionComponent: React.FC = (props: IAdressAlert) => {\n const message = props.message;\n return (\n \n {\n message &&\n <>\n {message}\n >\n }\n \n );\n};\n\nexport default AddressAlertFunctionComponent;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { getPayloadObject, getTelemetryAttributes, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport interface IAdressCheckbox {\n id?: string;\n name?: string;\n className: string;\n type: string;\n isChecked: boolean;\n autoFocus?: boolean;\n additionalAddributes?: object;\n telemetryContent?: ITelemetryContent;\n onChange(event: React.ChangeEvent): void;\n}\n\n/**\n * Address checkbox.\n * @param props - Configuration of the functional component.\n * @returns React functional component.\n */\nexport const AddressCheckboxFunctionComponent: React.FC = (props: IAdressCheckbox) => {\n const {\n id: itemId,\n name,\n className,\n type,\n isChecked,\n additionalAddributes,\n telemetryContent,\n autoFocus: shouldBeAutoFocused,\n onChange\n } = props;\n\n const payLoad = getPayloadObject('click', telemetryContent!, name!);\n const attributes = getTelemetryAttributes(telemetryContent!, payLoad);\n return (\n \n );\n};\n\nexport default AddressCheckboxFunctionComponent;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\nexport interface IAdressDropdown {\n id: string;\n name: string;\n className: string;\n value: string | number;\n additionalAddributes?: object;\n displayData: { key?: string | number; value?: string }[];\n onChange(event: React.ChangeEvent): void;\n}\n\nconst getDropdownItem = (key?: string | number, value?: string, selectedValue?: string | number): React.ReactNode => {\n let isSelected: boolean;\n if (typeof (key) === 'number') {\n isSelected = key === selectedValue;\n } else {\n isSelected = typeof (selectedValue) === 'string' && (key || '').toLowerCase() === (selectedValue || '').toLowerCase();\n }\n\n return (\n \n );\n};\n\n/**\n * Address dropdown.\n * @param props - Configuration of the functional component.\n * @returns React functional component.\n */\nexport const AddressDropdownFunctionComponent: React.FC = (props: IAdressDropdown) => {\n const {\n id: itemId,\n name,\n className,\n value,\n additionalAddributes,\n displayData,\n onChange\n } = props;\n\n return (\n \n );\n};\n\nexport default AddressDropdownFunctionComponent;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\nexport interface IAdressLabel {\n id: string;\n text: string;\n}\n\n/**\n * Address label.\n * @param props - Configuration of the functional component.\n * @returns React functional component.\n */\nexport const AddressLabelFunctionComponent: React.FC = (props: IAdressLabel) => {\n const {\n id: itemId,\n text\n } = props;\n\n return (\n \n );\n};\n\nexport default AddressLabelFunctionComponent;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Address } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\nimport { Heading as HeadingData } from '@msdyn365-commerce-modules/data-types';\nimport { Heading, INodeProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classname from 'classnames';\nimport { get } from 'mobx';\nimport * as React from 'react';\n\nimport {\n AddressItemDisplayType, AddressItemType, AddressValidationRuleType, IAddressDropdownsData,\n IAddressItem, IAddressValidationRule\n} from '../address-format.data';\nimport { AddressType, IAddressResource, IAddressResponse } from '../address-module.data';\nimport AddressAlertComponent from './address-alert';\nimport AddressButtonComponent from './address-button';\nimport AdressCheckboxComponent from './address-checkbox';\nimport AdressDropdownComponent from './address-dropdown';\nimport AddressErrorMessageComponent from './address-error-message';\nimport AddressErrorTitleComponent from './address-error-title';\nimport AddressInputComponent from './address-input';\nimport AddressLabelComponent from './address-label';\n\nexport interface IAddressAddInputProps {\n isUpdating?: boolean;\n hasError?: boolean;\n hasExternalSubmitGroup?: boolean;\n addressType: AddressType;\n addressFormat: IAddressItem[];\n defaultCountryRegionId: string;\n defaultAddressType: number;\n selectedAddress?: Address;\n dropdownDisplayData: IAddressDropdownsData;\n resources: IAddressResource;\n addressActionResponse?: IAddressResponse;\n addAddressHeading?: HeadingData;\n editAddressHeading?: HeadingData;\n validationError?: object;\n telemetryContent?: ITelemetryContent;\n shouldAutoFocus?: boolean;\n onInputChange(event: React.ChangeEvent): void;\n onDropdownChange(event: React.ChangeEvent): void;\n onSave?(): void;\n onCancel?(): void;\n}\n\nexport interface IAddressError {\n AddressError: INodeProps;\n title: React.ReactNode;\n message: React.ReactNode;\n}\n\nexport interface IAddressAddItem {\n key: string;\n AddressItem: INodeProps;\n label: React.ReactNode;\n alert: React.ReactNode;\n input: React.ReactNode;\n}\n\nexport interface IAddressAddUpdateProps {\n AddressForm: INodeProps;\n heading: React.ReactNode;\n items: IAddressAddItem[];\n hasError: boolean;\n error: IAddressError;\n isShowSaveButton: boolean;\n saveButton: React.ReactNode;\n isShowCancelButton: boolean;\n cancelButton: React.ReactNode;\n}\n\nconst getRequriedAttribute = (validationRules?: IAddressValidationRule[]): object => {\n const requriedRule = (validationRules || []).find(validationRule => {\n return validationRule.type === AddressValidationRuleType.Required;\n });\n\n return requriedRule ? { 'aria-required': true } : {};\n};\n\nconst getAddessItems = (selectedAddress: Address, props: IAddressAddInputProps): IAddressAddItem[] => {\n const { addressFormat, addressType, dropdownDisplayData, defaultCountryRegionId, defaultAddressType, validationError = {}, onInputChange, onDropdownChange, shouldAutoFocus } = props;\n\n return addressFormat.map((addressFormatItem, index) => {\n const elementId = `${addressType.toLowerCase()}_address${addressFormatItem.name.toLowerCase()}`;\n const errorMessage = get(validationError, addressFormatItem.name);\n const className = classname('msc-address-form__item', `msc-address-form__item-${addressFormatItem.name.toLowerCase()}`, { 'msc-address-form__item-newline': addressFormatItem.isNewLine, 'address-form__item-invalid': errorMessage });\n let input;\n\n if (addressFormatItem.displayType === AddressItemDisplayType.Input) {\n input = (\n \n );\n } else if (addressFormatItem.displayType === AddressItemDisplayType.Checkbox) {\n input = (\n \n );\n } else {\n const displayData = dropdownDisplayData[addressFormatItem.name];\n let selectedValue = selectedAddress[addressFormatItem.name];\n\n if (addressFormatItem.type === AddressItemType.ThreeLetterISORegionName) {\n selectedValue = selectedValue || defaultCountryRegionId;\n }\n\n if (addressFormatItem.type === AddressItemType.AddressTypeValue) {\n selectedValue = selectedValue || defaultAddressType;\n }\n\n input = (\n \n );\n }\n\n return {\n key: addressFormatItem.name,\n AddressItem: { className, id: `${elementId}_container` },\n label: ,\n alert: ,\n input\n };\n });\n};\n\nexport const AddressAddUpdate = (props: IAddressAddInputProps): IAddressAddUpdateProps => {\n const { editAddressHeading, addAddressHeading, selectedAddress = {}, resources, hasError, onCancel, onSave, hasExternalSubmitGroup, isUpdating, addressActionResponse, telemetryContent } = props;\n const heading = selectedAddress.RecordId ? editAddressHeading : addAddressHeading;\n\n return {\n AddressForm: { className: 'msc-address-form' },\n heading: heading && ,\n items: getAddessItems(selectedAddress, props),\n isShowSaveButton: !hasExternalSubmitGroup,\n saveButton: onSave && (\n \n ),\n isShowCancelButton: !hasExternalSubmitGroup,\n cancelButton: onCancel && (\n \n ),\n hasError: hasError || false,\n error: {\n AddressError: { className: 'msc-address-form__error' },\n title: addressActionResponse && addressActionResponse.errorTitle && ,\n message: addressActionResponse && addressActionResponse.errorMessage && \n }\n };\n};\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as React from 'react';\n\nexport interface IAdressErrorMessage {\n message: string;\n}\n\n/**\n * Address error message.\n * @param props - Configuration of the functional component.\n * @returns React functional component.\n */\nexport const AddressErrorMessageFunctionComponent: React.FC = (props: IAdressErrorMessage) => {\n const { message } = props;\n\n return (\n \n {message}\n
\n );\n};\n\nexport default AddressErrorMessageFunctionComponent;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Button } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { Iframe } from './iframe';\nimport defaultPaymentConnectorDropinStyle from './payment-instrument.dropin.style';\nimport defaultPaymentConnectorPaypalStyle from './payment-instrument.paypal.style';\nimport defaultPaymentConnectorStyle from './payment-instrument.style';\n\n/**\n * Interface for add payment form.\n */\nexport interface IAddPaymentFormProps {\n acceptPageUrl?: string;\n acceptPageContent?: string;\n iframeRef?: React.RefObject