{"version":3,"file":"static/chunks/2963.9c8da90168a3a81f.js","mappings":"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","sources":["webpack://_N_E/./components/HTMLBlock/HTMLBlock.js","webpack://_N_E/<anon>"],"sourcesContent":["import React, {useState, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport Block from '../../adapters/helpers/Block';\nimport dynamic from 'next/dynamic';\nconst ObLink = dynamic(() => import('../ObLink/ObLink'))\nconst Icon = dynamic(() => import('../Icon/Icon'))\nimport { ProductHighlightsConstants } from '../../adapters/helpers/Constants';\nimport DOMPurify from 'isomorphic-dompurify';\nimport { mediaQueryHOC } from '../../adapters/helpers/Hooks';\n\nfunction HTMLBlock(props) {\n    const {isSmall, isXSmall} = props;\n    const block = new Block(props);\n    const id = block.getAnchorId();\n    const className = 'ob-html-block ' + block.getFieldValue('classNames');\n    const text = block.getFieldValue('text');\n    const learnMoreCta = block.getFieldValue('learnMoreCta');\n    const learnMoreDataActionDetail = block.getFieldValue('learnMoreDataActionDetail');\n    const relatedBlocks = block.getFieldValue('relatedBlockContents');\n    const [learnMore, setLearnMore] = useState(true);\n    const handleButtonClick = (scrollElement, offset,mobileOffset) => {\n        if ( scrollElement ) {\n            const elementPosition = scrollElement.getBoundingClientRect().top + window.scrollY;\n            ( isSmall || isXSmall ) ?\n                window.scrollTo( { top: elementPosition - mobileOffset, behavior: 'smooth' } ) :\n                window.scrollTo( { top: elementPosition - offset, behavior: 'smooth' } )\n        }    \n    }\n    const handleCTANaviagation = ( CTAId, isScrollable, offset, mobileOffset ) => {\n      if (CTAId) {\n        const clickHandler = () => {\n          let productSectionId = document.getElementById('product_grid_block');\n          handleButtonClick(productSectionId, offset, mobileOffset);\n          if (!isScrollable) {\n            window.scrollBy(0, ProductHighlightsConstants.offset_900);\n          }\n          const timeout = setTimeout(() => {\n            let WaterFlosserProductSectionId = document.getElementById('water-flosser-product-grid');\n            handleButtonClick(WaterFlosserProductSectionId, offset, mobileOffset);\n            let proProductSectionId = document.getElementById('product_grid_block');\n            handleButtonClick(proProductSectionId, offset, mobileOffset);\n          }, 100);\n\n          return () => clearTimeout(timeout);\n        };\n\n        CTAId.addEventListener('click', clickHandler);\n\n        return () => CTAId.removeEventListener('click', clickHandler);\n      }\n    };\n    useEffect(()=>{\n        const timeout = setTimeout(() => {\n            let isScrollable = false;\n            const waterFlosserHeroCTAID = document.getElementById('water-flosser-home');\n            handleCTANaviagation(waterFlosserHeroCTAID,isScrollable, 300,100);\n            const heroCTAID = document.getElementById('cta-product-link');\n            handleCTANaviagation(heroCTAID, 270,100);\n            handleCTANaviagation(heroCTAID,isScrollable=true, 270,100);\n            const proHeroCTAID = document.getElementById('pro-cta-product-link');\n            handleCTANaviagation(proHeroCTAID,isScrollable=false, 300,100);\n        }, 200)\n        \n        return () => clearTimeout(timeout);\n    },[])\n    useEffect(() => {\n        const hash = window?.location?.hash || null;\n        if(hash === ProductHighlightsConstants.whyOralBHash) {\n            let ele = document.getElementById('wieso');\n            if(ele) {\n                let bodyRect = document.body.getBoundingClientRect(),\n                elemRect = ele.getBoundingClientRect(),\n                offset   = elemRect.top - bodyRect.top;\n                if(window.innerWidth > ProductHighlightsConstants.innerWidth_4600) {\n                    offset = ProductHighlightsConstants.offset_10000;\n                } else if(window.innerWidth > ProductHighlightsConstants.innerWidth_3000){\n                    offset = ProductHighlightsConstants.offset_7100;\n                } else if(window.innerWidth > ProductHighlightsConstants.innerWidth_2300) {\n                    offset = ProductHighlightsConstants.offset_5600;\n                } else if(window.innerWidth > ProductHighlightsConstants.innerWidth_2000) {\n                    offset = ProductHighlightsConstants.offset_5100;\n                } else if(window.innerWidth > ProductHighlightsConstants.innerWidth_1900) {\n                    offset = ProductHighlightsConstants.offset_4800;\n                } else if(window.innerWidth > ProductHighlightsConstants.innerWidth_1700) {\n                    offset = ProductHighlightsConstants.offset_4500;\n                } else if(window.innerWidth > ProductHighlightsConstants.innerWidth_1500) {\n                    offset = ProductHighlightsConstants.offset_4300;\n                } else if(window.innerWidth > ProductHighlightsConstants.innerWidth_1200) {\n                    offset = ProductHighlightsConstants.offset_4200;\n                } else if(window.innerWidth > ProductHighlightsConstants.innerWidth_380) {\n                    offset = ProductHighlightsConstants.offset_5000;\n                }\n                window.scrollTo({\n                    top: offset,\n                    left: 200,\n                    behavior: \"smooth\",\n                });\n                setLearnMore(!learnMore);\n            }\n        }\n    }, []);\n    const learnMoreButton = () => {\n        let button;\n        if(learnMoreCta){\n            if (learnMore) {\n                button = (\n                    <ObLink ariaExpanded={true} className=\"primaryGrey ob-best-clean-learn-more event_view_more_details\" dataActionDetail={learnMoreDataActionDetail} tag={ProductHighlightsConstants.button} ariaLabel={ProductHighlightsConstants.learnMore} onClick={handleLearnMore} >\n                          <Icon name=\"chevronDown\" />\n                          {learnMoreCta}\n                          <span className=\"visuallyhidden\">{learnMoreCta}</span>\n                    </ObLink>\n                )\n            } else {\n                button = (\n                    <ObLink ariaExpanded={false} className=\"primaryGrey ob-best-clean-learn-more event_view_more_details\" dataActionDetail={learnMoreDataActionDetail} tag={ProductHighlightsConstants.button} onClick={handleLearnMore} ariaLabel={ProductHighlightsConstants.learnMore}>\n                        <Icon name=\"chevronRight\" />\n                        {learnMoreCta}\n                        <span className=\"visuallyhidden\">{learnMoreCta}</span>\n                    </ObLink>\n                );\n            }\n      \n        }\n        \n        return button;\n    };\n    \n  \n    const handleLearnMore = () => {\n        setLearnMore(!learnMore);\n    };\n\n    return (\n        <>\n        <div\n            id={id}\n            className={className}\n            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text, { ADD_TAGS: [\"iframe\"] }, { ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] })}}\n        >\n        </div>\n        { learnMoreCta && learnMore ? learnMoreButton() : <div> {new Block(relatedBlocks).renderSpecifiedBlock(relatedBlocks)} </div> }\n        </>\n    )\n}\n\nHTMLBlock.propTypes = {\n    isSmall: PropTypes.bool,\n    isXSmall: PropTypes.bool,\n};\n\nexport default mediaQueryHOC(HTMLBlock);\n\n","\"use strict\";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2963],{42963:function(e,n,t){t.r(n);var i=t(67294),r=t(40483),o=t(5152),a=t.n(o),l=t(24036),d=t(29238),c=t.n(d),s=t(71357),u=t(85893),f=a()((function(){return t.e(1769).then(t.bind(t,61769))}),{loadableGenerated:{webpack:function(){return[61769]}}}),h=a()((function(){return t.e(713).then(t.bind(t,80713))}),{loadableGenerated:{webpack:function(){return[80713]}}});n.default=(0,s.Ui)((function(e){var n=e.isSmall,t=e.isXSmall,o=new r.Z(e),a=o.getAnchorId(),d=\"ob-html-block \"+o.getFieldValue(\"classNames\"),s=o.getFieldValue(\"text\"),m=o.getFieldValue(\"learnMoreCta\"),w=o.getFieldValue(\"learnMoreDataActionDetail\"),_=o.getFieldValue(\"relatedBlockContents\"),v=(0,i.useState)(!0),F=v[0],g=v[1],b=function(e,i,r){if(e){var o=e.getBoundingClientRect().top+window.scrollY;n||t?window.scrollTo({top:o-r,behavior:\"smooth\"}):window.scrollTo({top:o-i,behavior:\"smooth\"})}},p=function(e,n,t,i){if(e){var r=function(){var e=document.getElementById(\"product_grid_block\");b(e,t,i),n||window.scrollBy(0,l.F2.offset_900);var r=setTimeout((function(){var e=document.getElementById(\"water-flosser-product-grid\");b(e,t,i);var n=document.getElementById(\"product_grid_block\");b(n,t,i)}),100);return function(){return clearTimeout(r)}};return e.addEventListener(\"click\",r),function(){return e.removeEventListener(\"click\",r)}}};(0,i.useEffect)((function(){var e=setTimeout((function(){var e=!1,n=document.getElementById(\"water-flosser-home\");p(n,e,300,100);var t=document.getElementById(\"cta-product-link\");p(t,270,100),p(t,e=!0,270,100);var i=document.getElementById(\"pro-cta-product-link\");p(i,e=!1,300,100)}),200);return function(){return clearTimeout(e)}}),[]),(0,i.useEffect)((function(){var e,n;if(((null==(e=window)||null==(n=e.location)?void 0:n.hash)||null)===l.F2.whyOralBHash){var t=document.getElementById(\"wieso\");if(t){var i=document.body.getBoundingClientRect(),r=t.getBoundingClientRect().top-i.top;window.innerWidth>l.F2.innerWidth_4600?r=l.F2.offset_10000:window.innerWidth>l.F2.innerWidth_3000?r=l.F2.offset_7100:window.innerWidth>l.F2.innerWidth_2300?r=l.F2.offset_5600:window.innerWidth>l.F2.innerWidth_2000?r=l.F2.offset_5100:window.innerWidth>l.F2.innerWidth_1900?r=l.F2.offset_4800:window.innerWidth>l.F2.innerWidth_1700?r=l.F2.offset_4500:window.innerWidth>l.F2.innerWidth_1500?r=l.F2.offset_4300:window.innerWidth>l.F2.innerWidth_1200?r=l.F2.offset_4200:window.innerWidth>l.F2.innerWidth_380&&(r=l.F2.offset_5000),window.scrollTo({top:r,left:200,behavior:\"smooth\"}),g(!F)}}}),[]);var W,k=function(){g(!F)};return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(\"div\",{id:a,className:d,dangerouslySetInnerHTML:{__html:c().sanitize(s,{ADD_TAGS:[\"iframe\"]},{ADD_ATTR:[\"allow\",\"allowfullscreen\",\"frameborder\",\"scrolling\"]})}}),m&&F?(m&&(W=F?(0,u.jsxs)(f,{ariaExpanded:!0,className:\"primaryGrey ob-best-clean-learn-more event_view_more_details\",dataActionDetail:w,tag:l.F2.button,ariaLabel:l.F2.learnMore,onClick:k,children:[(0,u.jsx)(h,{name:\"chevronDown\"}),m,(0,u.jsx)(\"span\",{className:\"visuallyhidden\",children:m})]}):(0,u.jsxs)(f,{ariaExpanded:!1,className:\"primaryGrey ob-best-clean-learn-more event_view_more_details\",dataActionDetail:w,tag:l.F2.button,onClick:k,ariaLabel:l.F2.learnMore,children:[(0,u.jsx)(h,{name:\"chevronRight\"}),m,(0,u.jsx)(\"span\",{className:\"visuallyhidden\",children:m})]})),W):(0,u.jsxs)(\"div\",{children:[\" \",new r.Z(_).renderSpecifiedBlock(_),\" \"]})]})}))}}]);"],"names":["self","webpackChunk_N_E","push","e","n","t","r","i","o","a","l","d","c","s","u","f","then","bind","loadableGenerated","webpack","h","default","Ui","isSmall","isXSmall","Z","getAnchorId","getFieldValue","m","w","_","v","useState","F","g","b","getBoundingClientRect","top","window","scrollY","scrollTo","behavior","p","document","getElementById","scrollBy","F2","offset_900","setTimeout","clearTimeout","addEventListener","removeEventListener","useEffect","location","hash","whyOralBHash","body","innerWidth","innerWidth_4600","offset_10000","innerWidth_3000","offset_7100","innerWidth_2300","offset_5600","innerWidth_2000","offset_5100","innerWidth_1900","offset_4800","innerWidth_1700","offset_4500","innerWidth_1500","offset_4300","innerWidth_1200","offset_4200","innerWidth_380","offset_5000","left","W","k","jsxs","Fragment","children","jsx","id","className","dangerouslySetInnerHTML","__html","sanitize","ADD_TAGS","ADD_ATTR","ariaExpanded","dataActionDetail","tag","button","ariaLabel","learnMore","onClick","name","renderSpecifiedBlock"],"sourceRoot":""}