{"version":3,"file":"static/js/6f9c6951397c339c7db1.bundle.js","mappings":"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","sources":["webpack://Dobbies.Commerce/./src/modules/dobbies-quickview/dobbies-quickview.tsx?f7f4","webpack://Dobbies.Commerce/./src/modules/dobbies-quickview/dobbies-quickview.view.tsx?c9bc","webpack://Dobbies.Commerce/./lib/dobbies-quickview/module-registration.js?398f","webpack://Dobbies.Commerce/external var \"React\"?0d3b","webpack://Dobbies.Commerce/external var \"ReactDOM\"?853b"],"sourcesContent":["/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\n// import { ProductDimensionFull } from '@msdyn365-commerce/commerce-entities';\r\n// import { Carousel, ICarouselProps } from '@msdyn365-commerce/components';\r\n// import { IImageData, IImageSettings, Image } from '@msdyn365-commerce/core';\r\nimport {\r\n // ProductDeliveryOptions,\r\n ProductDimension,\r\n // ProductDimensionValue,\r\n // ProductPrice,\r\n // ReleasedProductType,\r\n SimpleProduct\r\n} from '@msdyn365-commerce/retail-proxy';\r\n// import {\r\n// ArrayExtensions,\r\n// FinitePromiseQueue,\r\n// FinitePromiseQueueError,\r\n// getDeliveryOptionsForSelectedVariant,\r\n// GetDeliveryOptionsForSelectedVariantInput,\r\n// getDimensionsForSelectedVariant,\r\n// GetDimensionsForSelectedVariantInput,\r\n// getPriceForSelectedVariant,\r\n// getProductAvailabilitiesForSelectedVariant,\r\n// getProductPageUrlSync,\r\n// getSelectedVariant,\r\n// IProductInventoryInformation,\r\n// IPromiseQueue,\r\n// ISelectedProduct,\r\n// ObjectExtensions,\r\n// PriceForSelectedVariantInput,\r\n// ProductAvailabilitiesForSelectedVariantInput,\r\n// SelectedVariantInput\r\n// } from '@msdyn365-commerce-modules/retail-actions';\r\nimport {\r\n Button,\r\n format,\r\n getPayloadObject,\r\n getTelemetryAttributes,\r\n getTelemetryObject,\r\n // IComponentNodeProps,\r\n IModuleProps,\r\n // IncrementalQuantity,\r\n INodeProps,\r\n // ISingleSlideCarouselProps,\r\n isMobile,\r\n ITelemetryContent,\r\n // KeyCodes,\r\n Modal,\r\n ModalBody,\r\n ModalFooter,\r\n //ModalHeader,\r\n // NodeTag,\r\n onTelemetryClick,\r\n // SingleSlideCarousel,\r\n TelemetryConstant,\r\n VariantType\r\n} from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\n// import { Spinner, SpinnerSize } from 'office-ui-fabric-react';\r\nimport React from 'react';\r\nimport { IBuyboxState, IProductDetails } from '@msdyn365-commerce-modules/buybox';\r\nimport { getProductPageUrlSync, ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\r\n\r\n// import {\r\n// getBuyboxAddToCart,\r\n// getBuyBoxInventoryLabel,\r\n// getBuyboxKeyInPrice,\r\n// getBuyboxProductAddToWishlist,\r\n// getBuyboxProductDescription,\r\n// getBuyboxProductPrice,\r\n// getBuyboxProductRating,\r\n// getBuyboxProductTitle,\r\n// getBuyboxProductUnitOfMeasure,\r\n// getQuantityLimitsMessages,\r\n// IBuyboxAddToCartViewProps,\r\n// IBuyboxAddToOrderTemplateViewProps,\r\n// IBuyboxAddToWishlistViewProps,\r\n// IBuyboxCallbacks,\r\n// IBuyboxCommonData,\r\n// IBuyboxExtentedProps,\r\n// IBuyboxKeyInPriceViewProps,\r\n// IBuyboxProductConfigureViewProps,\r\n// IBuyboxProductQuantityViewProps,\r\n// IBuyboxState,\r\n// IErrorState,\r\n// IProductDetails,\r\n// RetailDefaultOrderQuantityLimitsFeatureName\r\n// } from '@msdyn365-commerce-modules/buybox';\r\n// import { getBuyboxProductConfigure } from '@msdyn365-commerce-modules/buybox';\r\nimport { IDobbiesQuickviewData } from './dobbies-quickview.data';\r\nimport { IDobbiesQuickviewProps } from './dobbies-quickview.props.autogenerated';\r\n// import { getProductDetails } from './utilities/get-product-details';\r\n// import { getValidProductImages } from './utilities/get-valid-product-images';\r\nimport { getByIdAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductsDataActions.g';\r\n\r\n/**\r\n * QuickView props Interface.\r\n */\r\nexport interface IQuickviewViewProps extends IDobbiesQuickviewProps {\r\n quickView: IModuleProps;\r\n quickViewButton: React.ReactNode;\r\n ModalContainer: IModuleProps;\r\n state: IBuyboxState;\r\n // ModalHeaderContainer: INodeProps;\r\n // ModalHeaderContent: React.ReactNode;\r\n ModalFooterContainer: INodeProps;\r\n // ModalBodyContainer: INodeProps;\r\n // cartContainerProps: INodeProps;\r\n //state: IBuyboxState;\r\n ModuleProps?: IModuleProps;\r\n ProductInfoContainerProps: INodeProps;\r\n MediaGalleryContainerProps: INodeProps;\r\n // callbacks?: IBuyboxCallbacks;\r\n // title?: React.ReactNode;\r\n // description?: React.ReactNode;\r\n // configure?: IBuyboxProductConfigureViewProps;\r\n // inventoryLabel?: React.ReactNode;\r\n // rating?: React.ReactNode;\r\n // price?: React.ReactNode;\r\n // addToCart?: IBuyboxAddToCartViewProps;\r\n // addToOrderTemplate?: IBuyboxAddToOrderTemplateViewProps;\r\n // // addToWishlist?: IBuyboxAddToWishlistViewProps;\r\n // max: number | undefined;\r\n // // keyInPrice?: IBuyboxKeyInPriceViewProps;\r\n // // quantity?: IBuyboxProductQuantityViewProps;\r\n // quantityLimitsMessages?: React.ReactNode;\r\n // CarouselProps: INodeProps;\r\n // Thumbnails: IQuickViewThumbnailsViewProps;\r\n seeDetailsbutton: React.ReactNode;\r\n isModalOpen: boolean;\r\n loading?: React.ReactNode;\r\n //unitOfMeasure?: React.ReactNode;\r\n productDetails?: IProductDetails | undefined;\r\n isMobileDevice?: boolean;\r\n closeButton?: React.ReactNode;\r\n productDetailsIframe?: React.ReactNode;\r\n seeDetailButton?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * QuickView extend props Interface.\r\n */\r\nexport interface IQuickviewExtentedProps extends IDobbiesQuickviewProps {\r\n selectedProductId?: number;\r\n selectedDimensions?: ProductDimension[];\r\n}\r\n\r\n/**\r\n * QuickView thumbnails props Interface.\r\n */\r\nexport interface IQuickViewThumbnailsViewProps {\r\n ThumbnailsContainerProps: INodeProps;\r\n SingleSlideCarouselComponentProps: INodeProps;\r\n items?: IQuickViewThumbnailItemViewProps[];\r\n}\r\n\r\n/**\r\n * QuickView thumbnail item view props Interface.\r\n */\r\nexport interface IQuickViewThumbnailItemViewProps {\r\n ThumbnailItemContainerProps: INodeProps;\r\n Picture: React.ReactElement;\r\n}\r\n\r\n/**\r\n * QuickView state Interface.\r\n */\r\nexport interface IQuickViewState extends IBuyboxState {\r\n isDataLoaded: boolean;\r\n productId: number | undefined;\r\n product: SimpleProduct | undefined;\r\n}\r\n\r\n/**\r\n *\r\n * Quickview component.\r\n * @extends {React.Component>}\r\n */\r\nclass Quickview extends React.Component, IQuickViewState> {\r\n // /**\r\n // * A queue of tasks of processing the changes in the dimensions.\r\n // * Limit to two processes:\r\n // * 1 - for the current process, which is under execution at the moment.\r\n // * 2 - next process, which will process the latest version of data.\r\n // * @remark Enqueueing new promises will discard the previous ones (except the one which is under processing).\r\n // */\r\n // private readonly dimensionUpdateQueue: IPromiseQueue = new FinitePromiseQueue(2);\r\n\r\n // private dimensions: { [id: number]: string } = {};\r\n\r\n private readonly telemetryContent: ITelemetryContent;\r\n\r\n private productDetails: IProductDetails | undefined;\r\n\r\n // private readonly quickViewCallbacks: IBuyboxCallbacks = {\r\n // updateQuantity: (newQuantity: number): boolean => {\r\n // const errorState = { ...this.state.errorState };\r\n // errorState.quantityError = undefined;\r\n // errorState.otherError = undefined;\r\n\r\n // this.setState({ quantity: newQuantity, errorState });\r\n // return true;\r\n // },\r\n // updateErrorState: (newErrorState: IErrorState): void => {\r\n // this.setState({ errorState: newErrorState });\r\n // },\r\n // updateSelectedProduct: (\r\n // newSelectedProduct: Promise,\r\n // newInventory: IProductInventoryInformation | undefined,\r\n // newPrice: ProductPrice | undefined,\r\n // newDeliveryOptions: ProductDeliveryOptions | undefined\r\n // ): void => {\r\n // this.setState({\r\n // selectedProduct: newSelectedProduct,\r\n // productAvailableQuantity: newInventory,\r\n // productDeliveryOptions: newDeliveryOptions\r\n // });\r\n // this._updatePrice(newPrice);\r\n // },\r\n // dimensionSelectedAsync: async (selectedDimensionId: number, selectedDimensionValueId: string): Promise => {\r\n // this.dimensions[selectedDimensionId] = selectedDimensionValueId;\r\n // return this.dimensionUpdateQueue\r\n // .enqueue(async () => {\r\n // return this._updateDimensions();\r\n // })\r\n // .catch((error: unknown) => {\r\n // // Ignore discarded processes.\r\n // if (error !== FinitePromiseQueueError.ProcessWasDiscardedFromTheQueue) {\r\n // throw error;\r\n // }\r\n // });\r\n // },\r\n // getDropdownName: (dimensionType: number, resources: IDobbiesQuickviewResources): string => {\r\n // return this._getDropdownName(dimensionType, resources);\r\n // },\r\n // changeModalOpen: (isModalOpen: boolean): void => {\r\n // this._hideQuickViewDialog();\r\n // },\r\n // changeUpdatingDimension: (isUpdatingDimension: boolean): void => {\r\n // this.setState({ isUpdatingDimension });\r\n // },\r\n // updateKeyInPrice: (customPrice: number): void => {\r\n // // Remove custom amount error when updating the custom price\r\n // const errorState = { ...this.state.errorState };\r\n // errorState.customAmountError = undefined;\r\n\r\n // this.setState({ isPriceKeyedIn: true, keyInPriceAmount: customPrice, errorState });\r\n // this._updatePrice(this.state.productPrice, customPrice);\r\n // }\r\n // };\r\n\r\n // private readonly defaultGalleryImageSettings: IImageSettings = {\r\n // viewports: {\r\n // xs: { q: 'w=767&h=767&m=8', w: 0, h: 0 },\r\n // sm: { q: 'w=600&h=600&m=8', w: 0, h: 0 },\r\n // md: { q: 'w=600&h=772&m=8', w: 0, h: 0 },\r\n // lg: { q: 'h=772&m=8', w: 0, h: 0 }\r\n // },\r\n // lazyload: true,\r\n // cropFocalRegion: true\r\n // };\r\n\r\n // private readonly defaultThumbnailImageSettings: IImageSettings = {\r\n // viewports: {\r\n // xs: { q: 'w=100&m=8', w: 100, h: 0 },\r\n // lg: { q: 'w=100&m=8', w: 100, h: 0 }\r\n // },\r\n // lazyload: true,\r\n // cropFocalRegion: true\r\n // };\r\n\r\n public constructor(props: IDobbiesQuickviewProps) {\r\n super(props);\r\n this.state = {\r\n modalOpen: false,\r\n quantity: 1,\r\n min: undefined,\r\n max: undefined,\r\n errorState: {\r\n configureErrors: {}\r\n },\r\n selectedProduct: undefined,\r\n productPrice: undefined,\r\n productDeliveryOptions: undefined,\r\n isUpdatingDimension: false,\r\n activeIndex: 0,\r\n animating: false,\r\n mediaGalleryItems: undefined,\r\n isDataLoaded: false,\r\n // isDataLoaded: false,\r\n productId: undefined,\r\n product: undefined\r\n };\r\n\r\n // this._quickViewCloseButtonclick = this._quickViewCloseButtonclick.bind(this);\r\n this.telemetryContent = getTelemetryObject(props.context.request.telemetryPageName!, props.friendlyName, props.telemetry);\r\n }\r\n\r\n /**\r\n * React should component udpate function.\r\n * @param nextProps - Next Props.\r\n * @param nextState - Next State.\r\n * @returns Boolean - Whether the module will rerender or not.\r\n */\r\n public shouldComponentUpdate(nextProps: IDobbiesQuickviewProps, nextState: IBuyboxState): boolean {\r\n if (this.state === nextState && this.props.data === nextProps.data) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n const {\r\n config: { className = '' },\r\n resources\r\n } = this.props;\r\n // const { max } = this.state;\r\n // const product = this.productDetails?.product ? this.productDetails.product : undefined;\r\n // const props = this.props as IBuyboxExtentedProps;\r\n // const defaultMinimumKeyInPrice = 10;\r\n // const defaultMaximumKeyInPrice = 100;\r\n const device = isMobile({ variant: VariantType.Browser, context: this.props.context.request });\r\n const isMobileDevice = device === 'sm' || device === 'xs';\r\n const viewprops: any = {\r\n ...(this.props as IQuickviewExtentedProps),\r\n state: this.state,\r\n productDetails: this.productDetails,\r\n isModalOpen: this.state.modalOpen!,\r\n quickView: {\r\n moduleProps: this.props,\r\n className: classnames('ms-quickView fade-in-plp', className),\r\n tag: 'div'\r\n },\r\n isMobileDevice,\r\n quickViewButton: (\r\n
\r\n
\r\n
\r\n ),\r\n seeDetailButton: this._renderSeeDetailButton(this.state.product),\r\n closeButton: this._renderCloseButton(),\r\n productDetailsIframe: this._renderProductDetailsIframe(),\r\n ModalContainer: {\r\n moduleProps: this.props,\r\n tag: Modal,\r\n className: 'ms-quickView__dialog',\r\n isOpen: this.state.modalOpen,\r\n 'aria-label': format(resources.quickViewAriaLabel, this.productDetails?.product?.Name),\r\n //toggle: this._quickViewCloseButtonclick,\r\n modalTransition: { timeout: 0 },\r\n shouldUpdateFocusToFirstElement: this.state.isDataLoaded\r\n },\r\n ModalFooterContainer: {\r\n tag: ModalFooter,\r\n className: 'ms-quickView__footer'\r\n },\r\n ModalHeaderContent: '',\r\n ModalBodyContainer: {\r\n tag: ModalBody,\r\n className: 'ms-quickView__body'\r\n },\r\n cartContainerProps: {\r\n className: 'ms-quickView__product-add-to-cart'\r\n },\r\n ProductInfoContainerProps: {\r\n className: 'ms-quickView__content'\r\n },\r\n MediaGalleryContainerProps: {\r\n className: 'ms-quickView__media-gallery'\r\n }\r\n // seeDetailsbutton: this._renderSeeDetailButton(product),\r\n // loading: !this.state.isDataLoaded && (\r\n // \r\n // ),\r\n // callbacks: this.quickViewCallbacks,\r\n // title: this.state.isDataLoaded && getBuyboxProductTitle(props, this.productDetails),\r\n // description: this.state.isDataLoaded && getBuyboxProductDescription(props, this.productDetails),\r\n // configure: this.state.isDataLoaded\r\n // ? getBuyboxProductConfigure(props, this.state, this.quickViewCallbacks, this.productDetails, this.props.selectedDimensions)\r\n // : undefined,\r\n // price: this.state.isDataLoaded && getBuyboxProductPrice(props, this.state),\r\n // unitOfMeasure: this.state.isDataLoaded && getBuyboxProductUnitOfMeasure(props, this.productDetails),\r\n // rating:\r\n // this.state.isDataLoaded && !this.props.context.app.config.hideRating && getBuyboxProductRating(props, this.productDetails),\r\n // addToCart: this.state.isDataLoaded\r\n // ? getBuyboxAddToCart(\r\n // props,\r\n // this.state,\r\n // this.quickViewCallbacks,\r\n // defaultMinimumKeyInPrice,\r\n // defaultMaximumKeyInPrice,\r\n // this.productDetails\r\n // )\r\n // : undefined,\r\n // keyInPrice:\r\n // this.state.isDataLoaded && this.props.config.enableKeyInPrice && this.state.isCustomPriceSelected\r\n // ? getBuyboxKeyInPrice(props, this.state, this.quickViewCallbacks)\r\n // : undefined,\r\n // quantity: product?.IsGiftCard ? undefined : this._renderQuantity(this.props, this.state, this.quickViewCallbacks),\r\n // inventoryLabel: this.state.isDataLoaded && getBuyBoxInventoryLabel(props, this.productDetails),\r\n // addToWishlist: this.state.isDataLoaded\r\n // ? getBuyboxProductAddToWishlist(props, this.state, this.quickViewCallbacks, this.productDetails)\r\n // : undefined,\r\n // quantityLimitsMessages: this.state.isDataLoaded && getQuantityLimitsMessages(props, this.state),\r\n // max,\r\n // CarouselProps: this._renderCarousel(),\r\n // Thumbnails: this._renderThumbnails()\r\n };\r\n\r\n return this.props.renderView(viewprops) as React.ReactElement;\r\n }\r\n\r\n /**\r\n * Method to render detail button on quick view.\r\n * @param product - Simple product object.\r\n * @returns JSX element.\r\n */\r\n private readonly _renderSeeDetailButton = (product: SimpleProduct | undefined): JSX.Element => {\r\n const { config } = this.props;\r\n const payLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.seeDetails, '');\r\n const attributes = getTelemetryAttributes(this.telemetryContent, payLoad);\r\n\r\n return (\r\n \r\n {config.seeDetailsLinkText}\r\n \r\n );\r\n };\r\n\r\n // /**\r\n // * Method to return carousel.\r\n // * @returns Node props.\r\n // */\r\n // private readonly _renderCarousel = (): INodeProps => {\r\n // const { config, resources } = this.props;\r\n // let mediaGalleryItems: ReactNode[];\r\n // let keys: (string | undefined)[];\r\n // const galleryImageSettings = config.galleryImageSettings;\r\n // if (galleryImageSettings) {\r\n // galleryImageSettings.cropFocalRegion = true;\r\n // }\r\n\r\n // if (ArrayExtensions.hasElements(this.state.mediaGalleryItems)) {\r\n // mediaGalleryItems = this.state.mediaGalleryItems.map((item: IImageData, index: number) => {\r\n // return this._renderCarouselItemImageView(item, galleryImageSettings || this.defaultGalleryImageSettings, index);\r\n // });\r\n // keys = [...this.state.mediaGalleryItems.map(item => item.src)];\r\n // } else {\r\n // mediaGalleryItems = [this._renderEmptyImage(galleryImageSettings)];\r\n // keys = ['empty'];\r\n // }\r\n\r\n // const props: IComponentNodeProps = {\r\n // tag: Carousel,\r\n // className: 'ms-media-gallery__carousel',\r\n // items: mediaGalleryItems,\r\n // activeIndex: this.state.activeIndex ?? 0,\r\n // next: this.next,\r\n // previous: this.previous,\r\n // interval: false,\r\n // directionTextPrev: resources.previousScreenshotFlipperText,\r\n // directionTextNext: resources.nextScreenshotFlipperText,\r\n // indicatorAriaText: resources.ariaLabelForSlide,\r\n // onIndicatorsClickHandler: this.goToIndex,\r\n // handleOnExited: this.onExited,\r\n // handleOnExiting: this.onExiting,\r\n // key: keys\r\n // };\r\n\r\n // return props;\r\n // };\r\n\r\n // /**\r\n // * Method to render thumbnails.\r\n // * @returns QuickView Thumbnails view props.\r\n // */\r\n // private readonly _renderThumbnails = (): IQuickViewThumbnailsViewProps => {\r\n // const { config, id, resources } = this.props;\r\n\r\n // const thumbnailImageSettings = config.thumbnailImageSettings;\r\n // if (thumbnailImageSettings) {\r\n // thumbnailImageSettings.cropFocalRegion = true;\r\n // }\r\n\r\n // let mediaGalleryItems: IQuickViewThumbnailItemViewProps[];\r\n // let keys: (string | undefined)[];\r\n // if (ArrayExtensions.hasElements(this.state.mediaGalleryItems)) {\r\n // mediaGalleryItems = this.state.mediaGalleryItems.map((item: IImageData, index: number) => {\r\n // return this._getThumbnailItem(\r\n // item,\r\n // thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\r\n // index,\r\n // this.state.activeIndex!\r\n // );\r\n // });\r\n // keys = [...this.state.mediaGalleryItems.map(item => item.src)];\r\n // } else {\r\n // mediaGalleryItems = [];\r\n // keys = [];\r\n // }\r\n\r\n // return {\r\n // ThumbnailsContainerProps: { className: 'ms-media-gallery__thumbnails-container' },\r\n // SingleSlideCarouselComponentProps: {\r\n // tag: SingleSlideCarousel,\r\n // className: 'ms-media-gallery__thumbnails',\r\n // flipperPrevLabel: resources.previousScreenshotFlipperText,\r\n // flipperNextLabel: resources.nextScreenshotFlipperText,\r\n // parentId: id,\r\n // useTabList: true,\r\n // key: JSON.stringify(keys)\r\n // } as IComponentNodeProps,\r\n // items: mediaGalleryItems\r\n // };\r\n // };\r\n\r\n // private _updateMediaItems(lastUpdatedTime: number): void {\r\n // const product = this.productDetails?.product;\r\n // if (!this.state.mediaGalleryItems && product?.PrimaryImageUrl) {\r\n // this.setState({\r\n // mediaGalleryItems: [this._mapProductToImageData(product)],\r\n // lastUpdate: lastUpdatedTime\r\n // });\r\n // }\r\n // }\r\n\r\n // private _updatePrice(newPrice: ProductPrice | undefined, customPrice: number | undefined = this.state.keyInPriceAmount): void {\r\n // if (this.state.isCustomPriceSelected && newPrice) {\r\n // newPrice.CustomerContextualPrice = customPrice;\r\n // }\r\n // this.setState({ productPrice: newPrice });\r\n // }\r\n\r\n // private readonly _updateDimensions = async (): Promise => {\r\n // const {\r\n // context: {\r\n // actionContext,\r\n // request: {\r\n // apiSettings: { channelId }\r\n // }\r\n // }\r\n // } = this.props;\r\n\r\n // const { product, productDimensions } = this.productDetails!;\r\n\r\n // if (!product || !productDimensions) {\r\n // return;\r\n // }\r\n\r\n // const dimensionsToUpdate: { [id: number]: string } = { ...this.dimensions };\r\n // this.setState({ isUpdatingDimension: true });\r\n\r\n // // Step 1: Clear error state to display relevant errors\r\n // if (this.state.errorState.otherError || this.state.errorState.quantityError) {\r\n // const clearErrorState = { ...this.state.errorState };\r\n // clearErrorState.otherError = undefined;\r\n // if (this.state.errorState.errorHost === 'ADDTOCART') {\r\n // clearErrorState.quantityError = undefined;\r\n // clearErrorState.errorHost = undefined;\r\n // }\r\n // this.setState({ errorState: clearErrorState });\r\n // }\r\n\r\n // // Step 2: Clear any errors indicating the dimension wasn't selected\r\n // for (const key of Object.keys(dimensionsToUpdate)) {\r\n // if (this.state.errorState.configureErrors[key]) {\r\n // const errorState = { ...this.state.errorState };\r\n // errorState.configureErrors[key] = undefined;\r\n\r\n // this.setState({ errorState });\r\n // }\r\n // }\r\n\r\n // // Step 3, Build the actually selected dimensions, prioritizing the information in state\r\n // // over the information in data\r\n // const mappedDimensions = productDimensions\r\n // .map(dimension => {\r\n // return {\r\n // DimensionTypeValue: dimension.DimensionTypeValue,\r\n // DimensionValue:\r\n // this._updateDimensionValue(dimension, dimensionsToUpdate[dimension.DimensionTypeValue]) || dimension.DimensionValue,\r\n // ExtensionProperties: dimension.ExtensionProperties\r\n // };\r\n // })\r\n // .filter(dimension => {\r\n // return dimension && dimension.DimensionValue;\r\n // });\r\n\r\n // // Step 4. Use these dimensions hydrate the product. Wrap this in a promise\r\n // // so that places like add to cart can await it\r\n // const selectedProduct = new Promise(async resolve => {\r\n // const newProduct = await getSelectedVariant(\r\n // new SelectedVariantInput(\r\n // product.MasterProductId ? product.MasterProductId : product.RecordId,\r\n // channelId,\r\n // mappedDimensions,\r\n // undefined,\r\n // this.props.context.request\r\n // ),\r\n // actionContext\r\n // );\r\n // if (newProduct) {\r\n // // @ts-expect-error\r\n // this.productDetails.productDimensions = await getDimensionsForSelectedVariant(\r\n // new GetDimensionsForSelectedVariantInput(\r\n // newProduct.MasterProductId ? newProduct.MasterProductId : newProduct.RecordId,\r\n // channelId,\r\n // mappedDimensions,\r\n // this.props.context.request\r\n // ),\r\n // actionContext\r\n // );\r\n // }\r\n\r\n // resolve(newProduct);\r\n // });\r\n\r\n // this.setState({ selectedProduct });\r\n // const variantProduct = await selectedProduct;\r\n\r\n // if (variantProduct && this.productDetails) {\r\n // // Step 5. Use these dimensions hydrate the inventory. Wrap this in a promise\r\n // // so that places like add to cart can await it\r\n // this.productDetails.product = variantProduct;\r\n // const images = await getValidProductImages(\r\n // this.productDetails.product.RecordId || 0,\r\n // +this.props.context.request.apiSettings.channelId,\r\n // this.props.context.actionContext,\r\n // this.props.config.thumbnailImageSettings || this.defaultThumbnailImageSettings,\r\n // variantProduct.productVariant ?? variantProduct\r\n // );\r\n // this.setState({\r\n // mediaGalleryItems: [...images],\r\n // activeIndex: 0,\r\n // lastUpdate: Date.now()\r\n // });\r\n\r\n // const newAvailableQuantity = await getProductAvailabilitiesForSelectedVariant(\r\n // new ProductAvailabilitiesForSelectedVariantInput(variantProduct.RecordId, channelId),\r\n // actionContext\r\n // );\r\n\r\n // this.productDetails.productAvailableQuantity = newAvailableQuantity!;\r\n\r\n // const isCustompriceSelected = variantProduct.Dimensions?.find(\r\n // dimension => dimension.DimensionTypeValue === 4 && dimension.DimensionValue?.Value?.toLowerCase() === 'custom'\r\n // );\r\n\r\n // if (isCustompriceSelected) {\r\n // this.setState({ isCustomPriceSelected: true });\r\n // } else {\r\n // // Remove custom amount error when unselect the custom amount\r\n // const errorState = { ...this.state.errorState };\r\n // errorState.customAmountError = undefined;\r\n\r\n // this.setState({ isCustomPriceSelected: false, isPriceKeyedIn: false, errorState });\r\n // }\r\n\r\n // if (newAvailableQuantity && newAvailableQuantity.length > 0) {\r\n // this.setState({ productAvailableQuantity: newAvailableQuantity[0] });\r\n // } else {\r\n // this.setState({ productAvailableQuantity: undefined });\r\n // }\r\n\r\n // // Step 6. Use these dimensions hydrate the product price.\r\n // const newPrice = await getPriceForSelectedVariant(\r\n // new PriceForSelectedVariantInput(variantProduct.RecordId, channelId),\r\n // actionContext\r\n // );\r\n\r\n // if (newPrice) {\r\n // this._updatePrice(newPrice);\r\n // }\r\n\r\n // const RetailMulitplePickupMFeatureState = this.props.data.featureState.result?.find(\r\n // featureState => featureState.Name === 'Dynamics.AX.Application.RetailMultiplePickupDeliveryModeFeature'\r\n // );\r\n\r\n // // Step 7. Use these dimensions hydrate the product delivery options.\r\n // const newDeliveryOptions = await getDeliveryOptionsForSelectedVariant(\r\n // new GetDeliveryOptionsForSelectedVariantInput(\r\n // variantProduct.RecordId,\r\n // channelId,\r\n // undefined,\r\n // undefined,\r\n // RetailMulitplePickupMFeatureState?.IsEnabled\r\n // ),\r\n // actionContext\r\n // );\r\n\r\n // if (newDeliveryOptions) {\r\n // this.setState({ productDeliveryOptions: newDeliveryOptions });\r\n // }\r\n\r\n // this.setState({ isUpdatingDimension: false });\r\n // await this._updateQuantitiesInState(variantProduct);\r\n // }\r\n // };\r\n\r\n private _getProductURL(product: SimpleProduct | undefined): string {\r\n if (product) {\r\n let producturl = ' ';\r\n producturl = getProductPageUrlSync(\r\n product.Name || '',\r\n product.RecordId,\r\n this.props.context && this.props.context.actionContext,\r\n undefined\r\n );\r\n return producturl;\r\n }\r\n return '';\r\n }\r\n\r\n // private async _updateQuantitiesInState(product: SimpleProduct): Promise {\r\n // const isOrderQuantityLimitsFeatureEnabled = await this._isOrderQuantityLimitsFeatureEnabled();\r\n // const defaultQuantity = 1;\r\n // const defaultMaxQuantity = 10;\r\n // if (isOrderQuantityLimitsFeatureEnabled && product) {\r\n // // For some of the products the DefaultQuantity is zero\r\n // this.setState({\r\n // min: product.Behavior?.MinimumQuantity || defaultQuantity,\r\n\r\n // // If max by feature in default order settings is not defined then use max from site settings or default max 10.\r\n // max:\r\n // product.Behavior?.MaximumQuantity && product.Behavior?.MaximumQuantity > 0\r\n // ? product.Behavior?.MaximumQuantity\r\n // : this.props.context.app.config.maxQuantityForCartLineItem || defaultMaxQuantity\r\n // });\r\n // } else {\r\n // this.setState({\r\n // min: 1,\r\n // max: this.props.context.app.config.maxQuantityForCartLineItem || 10\r\n // });\r\n // }\r\n // }\r\n\r\n // private readonly _updateDimensionValue = (\r\n // productDimensionFull: ProductDimensionFull,\r\n // newValueId: string | undefined\r\n // ): ProductDimensionValue | undefined => {\r\n // if (newValueId && productDimensionFull.DimensionValues) {\r\n // return productDimensionFull.DimensionValues.find(dimension => dimension.RecordId === +newValueId);\r\n // }\r\n\r\n // return undefined;\r\n // };\r\n\r\n // private readonly _getDropdownName = (dimensionType: number, resources: IDobbiesQuickviewResources): string => {\r\n // const isGiftCard = this.productDetails?.product?.IsGiftCard;\r\n\r\n // switch (dimensionType) {\r\n // case 1: // ProductDimensionType.Color\r\n // return resources.productDimensionTypeColor;\r\n // case 2: // ProductDimensionType.Configuration\r\n // return resources.productDimensionTypeConfiguration;\r\n // case 3: // ProductDimensionType.Size\r\n // return resources.productDimensionTypeSize;\r\n // case 4: // ProductDimensionType.Style\r\n // return isGiftCard ? resources.productDimensionTypeAmount : resources.productDimensionTypeStyle;\r\n // default:\r\n // return '';\r\n // }\r\n // };\r\n\r\n // private async _isOrderQuantityLimitsFeatureEnabled(): Promise {\r\n // const defaultOrderQuantityLimitsFeatureConfig = this.props.context.request.app.platform?.enableDefaultOrderQuantityLimits;\r\n // if (defaultOrderQuantityLimitsFeatureConfig === 'none') {\r\n // return false;\r\n // }\r\n\r\n // const featureStatuses = await this.props.data.featureState;\r\n // const isFeatureEnabledInHq = featureStatuses.find(featureState => featureState.Name === RetailDefaultOrderQuantityLimitsFeatureName)\r\n // ?.IsEnabled;\r\n // if (!isFeatureEnabledInHq) {\r\n // return false;\r\n // }\r\n\r\n // if (defaultOrderQuantityLimitsFeatureConfig === 'all') {\r\n // return true;\r\n // }\r\n // let customerInfo;\r\n // try {\r\n // customerInfo = await this.props.data.customerInformation;\r\n // } catch (error) {\r\n // this.props.telemetry.information(error);\r\n // this.props.telemetry.debug('Unable to receive Customer Information. May be user is not authorized');\r\n // return false;\r\n // }\r\n\r\n // return (\r\n // customerInfo !== undefined &&\r\n // ((defaultOrderQuantityLimitsFeatureConfig === 'b2b' && customerInfo.IsB2b) ||\r\n // (defaultOrderQuantityLimitsFeatureConfig === 'b2c' && !customerInfo.IsB2b))\r\n // );\r\n // }\r\n\r\n // private readonly onExiting = () => {\r\n // this.setState({ animating: true });\r\n // };\r\n\r\n // private readonly onExited = () => {\r\n // this.setState({ animating: false });\r\n // };\r\n\r\n // private readonly next = (): void => {\r\n // if (this.isLastItem() === undefined) {\r\n // return;\r\n // }\r\n\r\n // const nextIndex = this.isLastItem() ? 0 : this.state.activeIndex! + 1;\r\n // this.goToIndex(nextIndex);\r\n // };\r\n\r\n // private readonly previous = (): void => {\r\n // const nextIndex = this.isFirstItem()\r\n // ? this.state.mediaGalleryItems\r\n // ? this.state.mediaGalleryItems.length - 1\r\n // : 0\r\n // : this.state.activeIndex! - 1;\r\n // this.goToIndex(nextIndex);\r\n // };\r\n\r\n // private readonly goToIndex = (index: number): void => {\r\n // this.setState({ activeIndex: index });\r\n // };\r\n\r\n // private _renderCarouselItemImageView(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\r\n // return <>{this._getCarouselItem(image, imageSettings, index)};\r\n // }\r\n\r\n // private readonly _getCarouselItem = (image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode => (\r\n // \r\n // );\r\n\r\n // private readonly _getThumbnailItem = (\r\n // image: IImageData,\r\n // imageSettings: IImageSettings,\r\n // index: number,\r\n // modifiedActiveIndex: number\r\n // ): IQuickViewThumbnailItemViewProps => {\r\n // const classes = classnames(\r\n // 'ms-media-gallery__thumbnail-item',\r\n // modifiedActiveIndex === index ? 'ms-media-gallery__thumbnail-item-active' : ''\r\n // );\r\n\r\n // return {\r\n // ThumbnailItemContainerProps: {\r\n // tag: 'li' as NodeTag,\r\n // className: classes,\r\n // role: 'tab',\r\n // tabIndex: 0,\r\n // key: index,\r\n // 'aria-label': image.altText,\r\n // 'aria-selected': modifiedActiveIndex === index,\r\n // 'aria-controls': `${this.props.id}__carousel-item__${index}`,\r\n // onClick: this._generateOnThumbnailClick(index),\r\n // onKeyDown: this._generateOnThumbnailKeyDown(index)\r\n // },\r\n // Picture: (\r\n // \r\n // )\r\n // };\r\n // };\r\n\r\n // private readonly _generateOnThumbnailKeyDown = (index: number) => {\r\n // return (event: React.KeyboardEvent) => {\r\n // if (event.which === KeyCodes.Enter || event.which === KeyCodes.Space) {\r\n // event.preventDefault();\r\n // this.goToIndex(index);\r\n // }\r\n // };\r\n // };\r\n\r\n // private readonly _generateOnThumbnailClick = (index: number) => {\r\n // return (event: React.MouseEvent) => {\r\n // event.preventDefault();\r\n // this.goToIndex(index);\r\n // };\r\n // };\r\n\r\n // private _mapProductToImageData(product: SimpleProduct): IImageData {\r\n // return {\r\n // src: product.PrimaryImageUrl || '',\r\n // altText: product.Name\r\n // };\r\n // }\r\n\r\n // private readonly isFirstItem = () => this.state.activeIndex === 0;\r\n\r\n // private readonly isLastItem = () => this.state.mediaGalleryItems && this.state.activeIndex === this.state.mediaGalleryItems.length - 1;\r\n\r\n private readonly onClickHandler = async (event: React.MouseEvent) => {\r\n return this._onClick(event, this.props);\r\n };\r\n\r\n private readonly _onClick = async (_event: React.MouseEvent, props: IQuickviewExtentedProps) => {\r\n if (!ObjectExtensions.isNullOrUndefined(props.selectedProductId)) {\r\n // const {\r\n // context: {\r\n // actionContext,\r\n // request: {\r\n // apiSettings: { channelId }\r\n // }\r\n // }\r\n // } = this.props;\r\n\r\n if (this.props.selectedProductId) {\r\n this.setState({ modalOpen: true });\r\n const productId = this.props.selectedProductId;\r\n const response = await getByIdAsync(\r\n { callerContext: this.props.context.actionContext },\r\n productId,\r\n this.props.context.actionContext.requestContext.apiSettings.channelId\r\n );\r\n const product = Array.isArray(response) ? response[0] : response;\r\n\r\n this.setState({ isDataLoaded: true, productId, product });\r\n }\r\n\r\n // const selectedDimensions = this.props.selectedDimensions;\r\n // this.productDetails = await getProductDetails(productId, channelId, actionContext, selectedDimensions);\r\n // const { product, productPrice } = this.productDetails;\r\n // const currentTime: number = Date.now();\r\n // this._updateMediaItems(currentTime);\r\n // if (productPrice) {\r\n // this._updatePrice(productPrice);\r\n // }\r\n\r\n // if (product) {\r\n // // Check if the product is service or not by product type\r\n // if (product.ItemTypeValue === ReleasedProductType.Service) {\r\n // this.setState({ isServiceItem: true });\r\n // }\r\n // await this._updateQuantitiesInState(product);\r\n // const images = await getValidProductImages(\r\n // product.RecordId,\r\n // +this.props.context.request.apiSettings.channelId,\r\n // this.props.context.actionContext,\r\n // this.props.config.thumbnailImageSettings || this.defaultThumbnailImageSettings,\r\n // product.productVariant ?? product\r\n // );\r\n\r\n // this.setState({\r\n // mediaGalleryItems: [...images],\r\n // activeIndex: 0,\r\n // lastUpdate: currentTime\r\n // });\r\n // }\r\n // this.setState({ isDataLoaded: true });\r\n // }\r\n }\r\n };\r\n private _renderProductDetailsIframe() {\r\n if (!this.state.product) {\r\n return;\r\n }\r\n\r\n const productURL = this._getProductURL(this.state.product);\r\n const pdpLink = `${window.location.origin}${productURL}${productURL.includes('?') ? '&' : '?'}isQuickView=true&onlyBody=true`;\r\n\r\n return (\r\n \r\n );\r\n }\r\n\r\n // private readonly _quickViewCloseButtonclick = () => {\r\n // this._hideQuickViewDialog();\r\n // };\r\n\r\n // private _hideQuickViewDialog(): void {\r\n // this.dimensions = [];\r\n // this.setState({\r\n // modalOpen: false,\r\n // quantity: 1,\r\n // min: undefined,\r\n // max: undefined,\r\n // errorState: {\r\n // configureErrors: {}\r\n // },\r\n // selectedProduct: undefined,\r\n // productPrice: undefined,\r\n // productDeliveryOptions: undefined,\r\n // isUpdatingDimension: false,\r\n // productAvailableQuantity: undefined,\r\n // lastUpdate: undefined,\r\n // activeIndex: undefined,\r\n // animating: undefined,\r\n // mediaGalleryItems: [],\r\n // isDataLoaded: false\r\n // });\r\n // }\r\n\r\n // /**\r\n // * Quantity Change Handler.\r\n // * @param callbacks -Buybox callbacks.\r\n // * @returns Update quantity.\r\n // */\r\n // private readonly onChangeHandler = (callbacks: IBuyboxCallbacks) => (newValue: number): boolean => {\r\n // if (callbacks.updateQuantity) {\r\n // return callbacks.updateQuantity(newValue);\r\n // }\r\n // return true;\r\n // };\r\n\r\n // private readonly _renderQuantity = (\r\n // props: IQuickviewExtentedProps,\r\n // state: IBuyboxState,\r\n // callbacks: IBuyboxCallbacks\r\n // ): IBuyboxProductQuantityViewProps => {\r\n // const { resources } = props;\r\n\r\n // const {\r\n // quantity,\r\n // max,\r\n // errorState: { quantityError }\r\n // } = state;\r\n\r\n // return {\r\n // ContainerProps: {\r\n // className: 'ms-quickView__quantity'\r\n // },\r\n // LabelContainerProps: {\r\n // tag: 'label',\r\n // className: 'ms-quickView__product-quantity-label',\r\n // htmlFor: 'ms-quickView__product-quantity-input'\r\n // },\r\n // heading:
{resources.productQuantityHeading}
,\r\n // errors: quantityError && (\r\n // \r\n // \r\n // ),\r\n // input: (\r\n // \r\n // )\r\n // };\r\n // };\r\n\r\n private _renderCloseButton() {\r\n return (\r\n {\r\n this.setState({\r\n modalOpen: false\r\n });\r\n }}\r\n >\r\n X\r\n \r\n );\r\n }\r\n}\r\nexport default Quickview;\r\n","/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport { Module } from '@msdyn365-commerce-modules/utilities';\r\nimport * as React from 'react';\r\n\r\nimport { IQuickviewViewProps } from './dobbies-quickview';\r\n\r\nconst _renderQuickViewPopup = (props: IQuickviewViewProps): JSX.Element => {\r\n const { ModalContainer, closeButton, productDetailsIframe, seeDetailButton } = props;\r\n\r\n return (\r\n \r\n {closeButton}\r\n\r\n {productDetailsIframe}\r\n\r\n {seeDetailButton}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Functional component which renders quick view button and popup based by the given props file.\r\n * @param {IQuickviewViewProps} props - Configuration for the quick view component.\r\n * @returns {React.FC} - Functional component of the quick view.\r\n */\r\nexport const QuickViewFunctionalComponent: React.FC = (props: IQuickviewViewProps) => {\r\n const { quickView, quickViewButton, isModalOpen, isMobileDevice } = props;\r\n return (\r\n \r\n {!isMobileDevice && quickViewButton}\r\n {isModalOpen && _renderQuickViewPopup(props)}\r\n \r\n );\r\n};\r\n\r\nexport default QuickViewFunctionalComponent;\r\n","const binding = { modules: {}, dataActions: {} };\n\n const registerActionId = (actionPath) => {\n if (binding.dataActions[actionPath] &&\n binding.dataActions[actionPath].default &&\n binding.dataActions[actionPath].default.prototype &&\n binding.dataActions[actionPath].default.prototype.id) {\n binding.dataActions[binding.dataActions[actionPath].default.prototype.id] = binding.dataActions[actionPath];\n } else {\n Object.keys(binding.dataActions[actionPath] || {}).forEach(exportName => {\n if (binding.dataActions[actionPath][exportName] &&\n binding.dataActions[actionPath][exportName].prototype &&\n binding.dataActions[actionPath][exportName].prototype.Action) {\n binding.dataActions[binding.dataActions[actionPath][exportName].prototype.id] = binding.dataActions[actionPath][exportName];\n }\n })\n }\n };\n\n const registerSanitizedActionPath = (sanitizedActionPath, dataAction) => {\n if (process.env.NODE_ENV === 'development') {\n if (!dataAction.default) {\n throw new Error('Data action path does not have a default export');\n }\n if (!(dataAction.default.prototype.id && binding.dataActions[dataAction.default.prototype.id]) || !binding.dataActions[sanitizedActionPath]) {\n binding.dataActions[sanitizedActionPath] = dataAction;\n }\n } else {\n binding.dataActions[sanitizedActionPath] = dataAction;\n if (!binding.dataActions[sanitizedActionPath].default) {\n throw new Error('Data action path ' + sanitizedActionPath + ' does not have a default export');\n }\n binding.dataActions[sanitizedActionPath].default.prototype.RegistrationId = sanitizedActionPath;\n if (binding.dataActions[sanitizedActionPath].default.prototype.id) {\n binding.dataActions[binding.dataActions[sanitizedActionPath].default.prototype.id] = sanitizedActionPath;\n }\n }\n };\n \n\n (binding.modules['dobbies-quickview'] = {\n c: () => require('partner/modules/dobbies-quickview/dobbies-quickview.tsx'),\n $type: 'containerModule',\n da: [{name:'customerInformation', path:'@msdyn365-commerce-modules/retail-actions/dist/lib/get-customer', runOn: 0},{name:'featureState', path:'@msdyn365-commerce-modules/retail-actions/dist/lib/get-feature-state', runOn: 0},{name:'wishlists', path:'@msdyn365-commerce-modules/retail-actions/dist/lib/get-wishlist-by-customer-id', runOn: 0}],\n \n iNM: false,\n ns: '__local__',\n n: 'dobbies-quickview',\n p: '__local__',\n \n pdp: '',\n \n \n md: 'src/modules/dobbies-quickview'\n });\n \n\n {\n const sanitizedActionPath = '@msdyn365-commerce-modules/retail-actions/dist/lib/get-customer';\n let dataAction = require('@msdyn365-commerce-modules/retail-actions/dist/lib/get-customer');\n registerSanitizedActionPath(sanitizedActionPath, dataAction);\n }\n \n\n {\n const sanitizedActionPath = '@msdyn365-commerce-modules/retail-actions/dist/lib/get-feature-state';\n let dataAction = require('@msdyn365-commerce-modules/retail-actions/dist/lib/get-feature-state');\n registerSanitizedActionPath(sanitizedActionPath, dataAction);\n }\n \n\n {\n const sanitizedActionPath = '@msdyn365-commerce-modules/retail-actions/dist/lib/get-wishlist-by-customer-id';\n let dataAction = require('@msdyn365-commerce-modules/retail-actions/dist/lib/get-wishlist-by-customer-id');\n registerSanitizedActionPath(sanitizedActionPath, dataAction);\n }\n \n\n \n window.__bindings__ = window.__bindings__ || {};\n window.__bindings__.modules = {\n ...window.__bindings__.modules || {},\n ...binding.modules\n };\n \n window.__bindings__.dataActions = {\n ...window.__bindings__.dataActions || {},\n ...binding.dataActions\n };\n export const viewDictionary = {};\n viewDictionary['__local__|__local__|modules|dobbies-quickview|dobbies-quickview'] = {\n c: () => require('partner/modules/dobbies-quickview/dobbies-quickview.view.tsx'),\n cn: '__local__-__local__-dobbies-quickview'\n };\nwindow.__bindings__ = window.__bindings__ || {};\nwindow.__bindings__.viewDictionary = {\n ...window.__bindings__.viewDictionary || {},\n ...viewDictionary\n };","module.exports = React;","module.exports = ReactDOM;"],"names":["Quickview","React","constructor","props","super","_renderSeeDetailButton","product","config","this","payLoad","getPayloadObject","telemetryContent","TelemetryConstant","seeDetails","attributes","getTelemetryAttributes","Button","Object","assign","className","onClick","onTelemetryClick","seeDetailsLinkText","href","_getProductURL","onClickHandler","async","_onClick","event","_event","ObjectExtensions","isNullOrUndefined","selectedProductId","setState","modalOpen","productId","response","getByIdAsync","callerContext","context","actionContext","requestContext","apiSettings","channelId","Array","isArray","isDataLoaded","state","quantity","min","undefined","max","errorState","configureErrors","selectedProduct","productPrice","productDeliveryOptions","isUpdatingDimension","activeIndex","animating","mediaGalleryItems","getTelemetryObject","request","telemetryPageName","friendlyName","telemetry","shouldComponentUpdate","nextProps","nextState","data","render","_this$productDetails","resources","device","isMobile","variant","VariantType","Browser","isMobileDevice","viewprops","_objectSpread","productDetails","isModalOpen","quickView","moduleProps","classnames","tag","quickViewButton","quickViewbuttonText","seeDetailButton","closeButton","_renderCloseButton","productDetailsIframe","_renderProductDetailsIframe","ModalContainer","Modal","isOpen","format","quickViewAriaLabel","Name","modalTransition","timeout","shouldUpdateFocusToFirstElement","ModalFooterContainer","ModalFooter","ModalHeaderContent","ModalBodyContainer","ModalBody","cartContainerProps","ProductInfoContainerProps","MediaGalleryContainerProps","renderView","producturl","getProductPageUrlSync","RecordId","productURL","pdpLink","window","location","origin","includes","height","width","style","marginTop","border","src","QuickViewFunctionalComponent","Module","_renderQuickViewPopup","binding","modules","dataActions","registerSanitizedActionPath","sanitizedActionPath","dataAction","default","Error","prototype","RegistrationId","id","c","require","$type","da","name","path","runOn","iNM","ns","n","p","pdp","md","__bindings__","viewDictionary","cn","module","exports","ReactDOM"],"sourceRoot":""}