{"version":3,"file":"index-927f4008.js","sources":["../../../../src/scripts/react-components/image-showcase-product-detail-masthead/image-gallery.tsx","../../../../src/scripts/react-components/image-showcase-product-detail-masthead/index.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { Swiper as SwiperModule, SwiperSlide } from 'swiper/react';\nimport Swiper, { FreeMode, Navigation, Thumbs } from 'swiper';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport 'swiper/css/free-mode';\nimport 'swiper/css/thumbs';\nimport { createDataLayerString } from '../../helpers/helpers';\nimport { BREAKPOINTS } from '../../helpers/breakpoints';\n\ntype ImageGalleryProps = {\n  images: {\n    media_type?: string;\n    media_url: string;\n    alt_text: string;\n  }[];\n  nextLabel: string;\n  prevLabel: string;\n  productHeading: string;\n  showLabel: string;\n};\n\nexport const ImageGallery = ({\n  images,\n  nextLabel,\n  prevLabel,\n  productHeading,\n  showLabel\n}: ImageGalleryProps) => {\n  const [thumbsSwiper, setThumbsSwiper] = useState<Swiper | null>(null);\n  const [swiper, setSwiper] = useState<Swiper | null>(null);\n  const nextButton = useRef(null);\n  const backButton = useRef(null);\n\n  const handleThumbsUpdate = () => {\n    if (swiper?.realIndex) {\n      thumbsSwiper?.slideTo(swiper.realIndex);\n    }\n  };\n\n  const handleClick = (index: number) => {\n    swiper?.slideTo(index);\n  };\n\n  return (\n    <>\n      <div className=\"image-showcase-product-detail-masthead__image\">\n        <SwiperModule\n          spaceBetween={10}\n          onSwiper={swiper => setSwiper(swiper)}\n          onSlideChange={() => {\n            handleThumbsUpdate();\n          }}\n          thumbs={{ swiper: thumbsSwiper }}\n          modules={[FreeMode, Navigation, Thumbs]}\n        >\n          {images.map((image, index) => (\n            <SwiperSlide key={index}>\n              <picture>\n                <source\n                  srcSet={`${image.media_url}?width=1600`}\n                  media={`(min-width: ${BREAKPOINTS.wide - 1}px)`}\n                />\n                <source\n                  srcSet={`${image.media_url}?width=1280`}\n                  media={`(min-width: ${BREAKPOINTS.desktop - 1}px)`}\n                />\n                <source\n                  srcSet={`${image.media_url}?width=1200`}\n                  media={`(min-width: ${BREAKPOINTS.tabletLandscape - 1}px)`}\n                />\n                <source\n                  srcSet={`${image.media_url}?width=943`}\n                  media={`(min-width: ${BREAKPOINTS.tablet - 1}px)`}\n                />\n                <img\n                  src={`${image.media_url}?width=728`}\n                  alt={image.alt_text}\n                  width=\"728\"\n                  height=\"728\"\n                />\n              </picture>\n            </SwiperSlide>\n          ))}\n        </SwiperModule>\n        <button\n          ref={backButton}\n          className=\"swiper-button-prev\"\n          aria-label={prevLabel || 'previous slide'}\n          title={prevLabel || 'previous slide'}\n          data-layer={createDataLayerString([\n            {\n              event: 'product_click',\n              event_category: 'product',\n              event_action: 'gallery',\n              event_label: 'previous arrow',\n              event_attributes: {\n                product_name: productHeading\n              }\n            }\n          ])}\n        ></button>\n\n        <button\n          ref={nextButton}\n          className=\"swiper-button-next\"\n          aria-label={nextLabel || 'next slide'}\n          title={nextLabel || 'next slide'}\n          data-layer={createDataLayerString([\n            {\n              event: 'product_click',\n              event_category: 'product',\n              event_action: 'gallery',\n              event_label: 'next arrow',\n              event_attributes: {\n                product_name: productHeading\n              }\n            }\n          ])}\n        ></button>\n      </div>\n      <div className=\"image-showcase-product-masthead__thumbs-wrapper\">\n        <SwiperModule\n          onSwiper={swiper => setThumbsSwiper(swiper)}\n          navigation={{\n            nextEl: nextButton.current,\n            prevEl: backButton.current\n          }}\n          initialSlide={0}\n          slidesPerGroup={1}\n          spaceBetween={20}\n          slidesPerView={2}\n          freeMode={true}\n          watchSlidesProgress={true}\n          modules={[FreeMode, Navigation, Thumbs]}\n          breakpoints={{\n            768: {\n              slidesPerView: 5,\n              spaceBetween: 30,\n              slidesOffsetBefore: 0\n            }\n          }}\n        >\n          {images.map((image, index) => (\n            <SwiperSlide key={index}>\n              <button\n                className=\"color-swiper__card\"\n                onClick={() => handleClick(index)}\n                data-layer={createDataLayerString([\n                  {\n                    event: 'product_click',\n                    event_category: 'product',\n                    event_action: 'gallery',\n                    event_label: 'thumbnail',\n                    event_attributes: {\n                      product_name: productHeading\n                    }\n                  }\n                ])}\n              >\n                <picture className=\"color-swiper__img-wrapper\">\n                  <source\n                    srcSet={`${image.media_url}?width=444`}\n                    media={`(min-width: ${BREAKPOINTS.wide - 1}px)`}\n                  />\n                  <source\n                    srcSet={`${image.media_url}?width=348`}\n                    media={`(min-width: ${BREAKPOINTS.tabletLandscape - 1}px)`}\n                  />\n                  <source\n                    srcSet={`${image.media_url}?width=218`}\n                    media={`(min-width: ${BREAKPOINTS.tablet - 1}px)`}\n                  />\n                  <img\n                    src={`${image.media_url}?width=486`}\n                    alt={image.alt_text}\n                    width=\"486\"\n                    height=\"486\"\n                    loading=\"lazy\"\n                    className=\"color-swiper__img\"\n                  />\n                </picture>\n                {showLabel !== 'false' && (\n                  <div className=\"color-swiper__label link\">\n                    <span>{image.alt_text}</span>\n                  </div>\n                )}\n              </button>\n            </SwiperSlide>\n          ))}\n        </SwiperModule>\n      </div>\n    </>\n  );\n};\n\nexport default ImageGallery;\n","import React, { useEffect, useState } from 'react';\nimport ImageGallery from './image-gallery';\nimport { BREAKPOINTS } from '../../helpers/breakpoints';\nimport { useDebounce } from '../../helpers/debounce';\nimport { makeSuperScript } from '../../helpers/helpers';\nimport {\n  ExtendedWindowType,\n  MediaType,\n  ImageShowcaseProductDetailMastheadResponseType\n} from '../../helpers/global-types';\n\ntype ImageShowcaseProductDetailMastheadProps = {\n  nextLabel: string;\n  prevLabel: string;\n  defaultImage: string;\n  bazaarReview: string;\n  showLabel: string;\n};\n\nconst ImageShowcaseProductDetailMasthead = ({\n  nextLabel,\n  prevLabel,\n  defaultImage,\n  bazaarReview,\n  showLabel\n}: ImageShowcaseProductDetailMastheadProps) => {\n  const [data, setData] = useState<ImageShowcaseProductDetailMastheadResponseType>();\n  const [error, setError] = useState(false);\n  const [isTablet, setIsTablet] = useState(\n    window.matchMedia(`(max-width: ${BREAKPOINTS.tablet - 2}px)`).matches\n  );\n  const [displayImages, setDisplayImages] = useState<MediaType[]>([]);\n  const [personalizeButtons, setPersonalizeButtons] = useState('');\n  const bazarRef = React.createRef<HTMLDivElement>();\n\n  const handleDisplayMedia = () => {\n    if (data?.productDescription?.defaultImages) {\n      if (data?.productDescription?.defaultImages.length > 0) {\n        setDisplayImages(data?.productDescription.defaultImages);\n      } else {\n        setDisplayImages(JSON.parse(defaultImage));\n      }\n    }\n  };\n\n  const handleResize = useDebounce(() => {\n    const tabletMatch = window.matchMedia(\n      `(max-width: ${BREAKPOINTS.tablet - 2}px)`\n    ).matches;\n    if (isTablet !== tabletMatch) {\n      setIsTablet(prev => !prev);\n    }\n  }, 100);\n\n  useEffect(() => {\n    window.addEventListener('resize', handleResize);\n\n    let observer: MutationObserver;\n\n    const targetNode = document.querySelector('.personalize-buttons');\n\n    if (targetNode) {\n      const targetInnerHtml = targetNode.innerHTML;\n\n      setPersonalizeButtons(targetInnerHtml);\n\n      const config = { attributes: true, childList: true, subtree: true };\n\n      const callback = (mutationList: MutationRecord[]) => {\n        for (const mutation of mutationList) {\n          if (mutation.type === 'childList') {\n            setPersonalizeButtons(targetNode.innerHTML);\n          }\n        }\n      };\n\n      observer = new MutationObserver(callback);\n      observer.observe(targetNode, config);\n    }\n\n    const newData = (window as ExtendedWindowType).mastheadData;\n\n    if (newData) {\n      setData((window as ExtendedWindowType).mastheadData);\n    } else {\n      setError(true);\n    }\n\n    return () => {\n      window.removeEventListener('resize', handleResize);\n\n      if (observer) observer.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (data) {\n      handleDisplayMedia();\n    }\n  }, [data]);\n\n  if (error) {\n    return <p>Error on loading</p>;\n  }\n\n  return (\n    <div className=\"image-showcase-product-detail-masthead__wrapper image-showcase-product-detail-masthead__wrapper--full\">\n      <div className=\"image-showcase-product-detail-masthead__content\">\n        <div className=\"image-showcase-product-detail-masthead__top-content\">\n          <div className=\"image-showcase-product-detail-masthead__info\">\n            <h1\n              className=\"image-showcase-product-detail-masthead__heading rtf--inline\"\n              dangerouslySetInnerHTML={{\n                __html: makeSuperScript(\n                  data?.productDescription?.heading as string\n                ) as string\n              }}\n            />\n            <div\n              className=\"image-showcase-product-detail-masthead__description\"\n              dangerouslySetInnerHTML={{\n                __html: makeSuperScript(\n                  data?.productDescription.description as string\n                ) as string\n              }}\n            />\n          </div>\n          <div className=\"shingle-detail-masthead__cta-wrapper\">\n            <div\n              ref={bazarRef}\n              className=\"shingle-detail-masthead__bazaar-review\"\n              dangerouslySetInnerHTML={{\n                __html: bazaarReview.replace(\n                  '{prod}',\n                  data?.productDescription?.bazaarvoiceProduct || ''\n                )\n              }}\n            ></div>\n            {personalizeButtons && (\n              <div\n                className=\"image-showcase-product-detail-masthead__button-row\"\n                dangerouslySetInnerHTML={{ __html: personalizeButtons }}\n              ></div>\n            )}\n          </div>\n        </div>\n        <div className=\"image-showcase-product-detail-masthead__swiper\">\n          <ImageGallery\n            images={displayImages}\n            nextLabel={nextLabel}\n            prevLabel={prevLabel}\n            productHeading={data?.productDescription?.heading || ''}\n            showLabel={showLabel}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\nexport default ImageShowcaseProductDetailMasthead;\n"],"names":["ImageGallery","images","nextLabel","prevLabel","productHeading","showLabel","thumbsSwiper","setThumbsSwiper","useState","swiper","setSwiper","nextButton","useRef","backButton","handleThumbsUpdate","handleClick","index","React","SwiperModule","FreeMode","Navigation","Thumbs","image","SwiperSlide","BREAKPOINTS","createDataLayerString","ImageShowcaseProductDetailMasthead","defaultImage","bazaarReview","data","setData","error","setError","isTablet","setIsTablet","displayImages","setDisplayImages","personalizeButtons","setPersonalizeButtons","bazarRef","handleDisplayMedia","_a","_b","handleResize","useDebounce","tabletMatch","prev","useEffect","observer","targetNode","targetInnerHtml","config","callback","mutationList","mutation","makeSuperScript","_c"],"mappings":"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"}