{"version":3,"sources":["webpack:///./src/modules/dobbies-quickview/dobbies-quickview.view.tsx?2997","webpack:///./lib/dobbies-quickview/module-registration.js?398f","webpack:///external \"React\"?c481","webpack:///external \"ReactDOM\"?4b2d","webpack:///./src/modules/dobbies-quickview/dobbies-quickview.tsx?befd"],"names":["QuickViewFunctionalComponent","props","quickView","quickViewButton","isModalOpen","isMobileDevice","React","Module","Object","ModalContainer","closeButton","productDetailsIframe","seeDetailButton","_renderQuickViewPopup","binding","modules","dataActions","c","require","$type","da","iNM","ns","n","p","pdp","md","window","__bindings__","viewDictionary","cn","module","exports","ReactDOM","Quickview","Component","constructor","super","_renderSeeDetailButton","product","config","this","payLoad","getPayloadObject","telemetryContent","TelemetryConstant","seeDetails","attributes","getTelemetryAttributes","Button","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","resources","device","isMobile","variant","VariantType","Browser","viewprops","productDetails","moduleProps","classnames","tag","quickViewbuttonText","_renderCloseButton","_renderProductDetailsIframe","Modal","isOpen","format","quickViewAriaLabel","Name","modalTransition","timeout","shouldUpdateFocusToFirstElement","ModalFooterContainer","ModalFooter","ModalHeaderContent","ModalBodyContainer","ModalBody","cartContainerProps","ProductInfoContainerProps","MediaGalleryContainerProps","renderView","producturl","getProductPageUrlSync","RecordId","productURL","pdpLink","location","origin","includes","height","width","style","marginTop","border","src"],"mappings":"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","file":"static/js/114.2283db2d148e231ae325.chunk.js","sourcesContent":["/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport { 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\tconst { ModalContainer, closeButton, productDetailsIframe, seeDetailButton } = props;\r\n\r\n\treturn (\r\n\t\t<Module {...ModalContainer}>\r\n\t\t\t{closeButton}\r\n\r\n\t\t\t{productDetailsIframe}\r\n\r\n\t\t\t{seeDetailButton}\r\n\t\t</Module>\r\n\t);\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<IQuickviewViewProps>} - Functional component of the quick view.\r\n */\r\nexport const QuickViewFunctionalComponent: React.FC<IQuickviewViewProps> = (props: IQuickviewViewProps) => {\r\n\tconst { quickView, quickViewButton, isModalOpen, isMobileDevice } = props;\r\n\treturn (\r\n\t\t<Module {...quickView}>\r\n\t\t\t{!isMobileDevice && quickViewButton}\r\n\t\t\t{isModalOpen && _renderQuickViewPopup(props)}\r\n\t\t</Module>\r\n\t);\r\n};\r\n\r\nexport default QuickViewFunctionalComponent;\r\n","const binding = { modules: {}, dataActions: {} };\n\n    (binding.modules['dobbies-quickview'] = {\n        c: () => require('partner/modules/dobbies-quickview/dobbies-quickview.tsx'),\n        $type: 'containerModule',\n        da: [],\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    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;","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\n/* eslint-disable no-duplicate-imports */\r\n\r\nimport { ProductDimension, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\r\nimport { getProductPageUrlSync, ObjectExtensions } 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    IModuleProps,\r\n    INodeProps,\r\n    isMobile,\r\n    ITelemetryContent,\r\n    Modal,\r\n    ModalBody,\r\n    ModalFooter,\r\n    onTelemetryClick,\r\n    TelemetryConstant,\r\n    VariantType\r\n} from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport React from 'react';\r\n\r\nimport { IBuyboxState, IProductDetails } from '@msdyn365-commerce-modules/buybox';\r\nimport { IDobbiesQuickviewData } from './dobbies-quickview.data';\r\nimport { IDobbiesQuickviewProps } from './dobbies-quickview.props.autogenerated';\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<IDobbiesQuickviewData> {\r\n    quickView: IModuleProps;\r\n    quickViewButton: React.ReactNode;\r\n    ModalContainer: IModuleProps;\r\n    state: IBuyboxState;\r\n    ModuleProps?: IModuleProps;\r\n    ProductInfoContainerProps: INodeProps;\r\n    MediaGalleryContainerProps: INodeProps;\r\n    seeDetailsbutton: React.ReactNode;\r\n    isModalOpen: boolean;\r\n    loading?: 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<T> extends IDobbiesQuickviewProps<IDobbiesQuickviewData> {\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<IDobbiesQuickviewProps<IDobbiesQuickviewData>>}\r\n */\r\nclass Quickview extends React.Component<IQuickviewExtentedProps<IDobbiesQuickviewData>, IQuickViewState> {\r\n    private readonly telemetryContent: ITelemetryContent;\r\n\r\n    private productDetails: IProductDetails | undefined;\r\n\r\n    public constructor(props: IDobbiesQuickviewProps<IDobbiesQuickviewData>) {\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            productId: undefined,\r\n            product: undefined\r\n        };\r\n\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<IDobbiesQuickviewData>, 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 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<IDobbiesQuickviewData>),\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                <div className='ms-quickView__button' onClick={this.onClickHandler} aria-label={resources.quickViewbuttonText}>\r\n                    <div className='ms-quickView__image' />\r\n                </div>\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                modalTransition: { timeout: 0 },\r\n                shouldUpdateFocusToFirstElement: this.state.isDataLoaded\r\n            },\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        };\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            <Button\r\n                className='ms-quickView__seeDetailsbutton'\r\n                onClick={onTelemetryClick(this.telemetryContent, payLoad, TelemetryConstant.seeDetails)}\r\n                {...attributes}\r\n                aria-label={config.seeDetailsLinkText}\r\n                href={this._getProductURL(product)}\r\n            >\r\n                {config.seeDetailsLinkText}\r\n            </Button>\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 readonly onClickHandler = async (event: React.MouseEvent<HTMLElement>) => {\r\n        return this._onClick(event, this.props);\r\n    };\r\n\r\n    private readonly _onClick = async (_event: React.MouseEvent<HTMLElement>, props: IQuickviewExtentedProps<IDobbiesQuickviewData>) => {\r\n        if (!ObjectExtensions.isNullOrUndefined(props.selectedProductId)) {\r\n            if (this.props.selectedProductId) {\r\n                this.setState({ modalOpen: true });\r\n                const productId = this.props.selectedProductId;\r\n\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    };\r\n\r\n    private _renderProductDetailsIframe() {\r\n        if (!this.state.product) return;\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            <iframe\r\n                height='100%'\r\n                width='100%'\r\n                style={{\r\n                    marginTop: '30px',\r\n                    border: 'none'\r\n                }}\r\n                src={pdpLink}\r\n            />\r\n        );\r\n    }\r\n\r\n    private _renderCloseButton() {\r\n        return (\r\n            <Button\r\n                className='msc-btn ms-quickView__closebutton'\r\n                onClick={() => {\r\n                    this.setState({\r\n                        modalOpen: false\r\n                    });\r\n                }}\r\n            >\r\n                X\r\n            </Button>\r\n        );\r\n    }\r\n}\r\nexport default Quickview;\r\n"],"sourceRoot":""}