{"version":3,"file":"static/chunks/7765.73aa2a00abaf8ae7.js","mappings":"kVAcA,EARqB,SAAQ,G,IAALA,EAAQ,EAARA,SACtB,OAAM,SACHC,MAAG,CAACC,UAAWC,IAAAA,iB,mBACbF,MAAG,CAACC,UAAWC,IAAAA,iB,SAA2BH,O,8kBCqBlC,SAASI,EAAc,G,IAWdC,EAAAA,EAVtBC,EADoC,EACpCA,qBACAC,EAFoC,EAEpCA,MACAC,EAHoC,EAGpCA,KAEMC,EAA4B,OAApBH,QAAAA,IAAAA,OAAAA,EAAAA,EAAsBG,MAC5BC,GAAUC,EAAAA,EAAAA,KAAVD,MACFE,EAAYF,EAAQ,IAAM,EAAIA,EAAQ,IAAM,EAAIA,EAAQ,IAAM,EAAI,EAChCG,GAAAA,EAAAA,EAAAA,UAAS,GAA1CC,EAAiCD,EAAW,GAA9BE,EAAmBF,EAAW,GAC7CG,GAAYC,EAAAA,EAAAA,QAAkB,MAC9BC,GAAWC,EAAAA,EAAAA,GAAc,oBACzBC,EAA4D,QAA5Cf,EAA6B,QAA7BA,GAAAA,EAAAA,EAAAA,GAAegB,EAAAA,WAAfhB,IAAAA,OAAAA,EAAAA,EAAgCiB,oBAAY,IAA5CjB,EAAAA,EAAgD,QAEhEkB,EAAkB,SAACC,GACvB,IAAQV,EAAiBU,EAAjBV,aAEFW,EACD,GAMA,YARkCC,IAAjBZ,GAA8BA,EAAe,EAG7DX,IAAAA,MACA,IACAA,IAAAA,cACA,IACAA,IAAAA,kBAECA,IAAAA,MAAmB,IAAMA,IAAAA,eAMhC,OAAM,SACHF,MAAG,CAACC,UAAWuB,EAAYE,QALD,WACvBb,GAAgBA,EAAe,GAAGC,EAAgBD,EAAe,I,mBAKlEc,EAAAA,EAAI,CAACC,SAAS,uBAKfC,EAAkB,SAACN,GACvB,IAAQO,EAA6BP,EAA7BO,WAAYjB,EAAiBU,EAAjBV,aAKdW,EACD,GAMA,YAVcC,IAAjBZ,QACeY,IAAfK,GACAjB,GAAgBiB,EAAanB,EAGzBT,IAAAA,MACA,IACAA,IAAAA,eACA,IACAA,IAAAA,kBAECA,IAAAA,MAAmB,IAAMA,IAAAA,gBAOhC,OAAM,SACHF,MAAG,CAACC,UAAWuB,EAAYE,QANA,WACxBI,QAA+BL,IAAjBZ,GAA8BA,EAAeiB,GAC7DhB,EAAgBD,EAAe,I,mBAK9Bc,EAAAA,EAAI,CAACC,SAAS,wBAKfG,GAAe,SAClB/B,MAAG,CAACgC,GAAI9B,IAAAA,W,mBACNF,MAAG,CACFC,UAAWC,IAAAA,MAAmB,IAAMA,IAAAA,yB,mBAEnC+B,EAAAA,EAAI,CAACC,KAAM3B,EAAQ,IAAoBA,OAAjBY,EAAc,KAAQ,OAALZ,GAAS,I,mBAC9C4B,IAAC,C,mBACCC,KAAE,CAACnC,UAAWC,IAAAA,iB,SAA8BI,YAOjD+B,EAAW,CACfC,UAAU,EACVC,SAAU,cACVC,eAAgB,OAChBC,MAAO,IACPC,aAAc,EACdC,eAAgB,EAChBC,QAAQ,EACRC,gBAAgB,EAChBC,WAAS,SAAGxB,EAAe,IAC3ByB,WAAS,SAAGlB,EAAe,IAC3BmB,MAAM,EACN/C,UAAWC,IAAAA,kBACX+C,aAAcpC,EACdqC,aAAc,SAACC,EAAcC,GACvBA,IAASD,GAAMrC,EAAgBsC,IAErCC,WAAY,WAAM,OAAC/C,EAAQyB,GAAe,SAAI/B,MAAG,KACjDsD,aAAc,WAAM,OAAM,SAALtD,MAAG,CAACgC,GAAI9B,IAAAA,oBAC7BqD,WAAY,CACV,CACEC,WAAY,IACZnB,SAAU,CACRK,aAAc,EACdC,eAAgB,EAChBM,aAAc,IAGlB,CACEO,WAAY,IACZnB,SAAU,CACRK,aAAc,IACdC,eAAgB,IAGpB,CACEa,WAAY,IACZnB,SAAU,CACRK,aAAc,IACdC,eAAgB,OAMxBc,EAAAA,EAAAA,YAAU,WACJ1C,EAAU2C,SAAS3C,EAAU2C,QAAQC,UAAU9C,KAClD,CAACA,IAEJ,IAA4C+C,GAAAA,EAAAA,EAAAA,KAApCC,EAAoCD,EAApCC,cAAeC,EAAqBF,EAArBE,iBAEfC,GAAeC,EAAAA,EAAAA,KAAfD,WAEFE,GAAuBC,EAAAA,EAAAA,aAAY,W,qBACvC,SAAQ,EAADC,G,iFACCL,EAAiBK,G,yOADlBA,G,gCADgC,GAKvC,IAGIC,EAAa,OAAL5D,QAAAA,IAAAA,OAAAA,EAAAA,EAAO6D,KAAI,SAACC,EAAqBC,GAC7C,OAAM,SAALC,EAAAA,EAAW,CAEVvE,UAAWC,IAAAA,iBACXoE,KAAMA,EACNG,YAAY,EACZZ,cAAeA,EACfa,gBAAgB,EAChBC,YAAY,GANPJ,MAcT,OAJAd,EAAAA,EAAAA,YAAU,WACRM,GAAcE,EAAqB,aAClC,CAACA,EAAsBF,KAEpB,SACHa,UAAO,CAAC3E,UAAU,U,mBAChBD,MAAG,CAACC,UAAU,6B,SACZgB,GAAQ,sB,UAEJc,G,SACA8C,EAAY,C,SAAET,Q,SAGhBU,EAAAA,EAAM,KAAKzC,EAAQ,CAAE0C,IAAKhE,E,SACxBqD,W,iBCnMbY,EAAOC,QAAU,CAAC,gBAAgB,oCAAoC,gBAAgB,sC,kBCAtFD,EAAOC,QAAU,CAAC,iBAAiB,sCAAsC,MAAQ,6BAA6B,wBAAwB,6CAA6C,mBAAmB,wCAAwC,UAAU,+BAA+B,iBAAiB,sCAAsC,gBAAgB,qCAAqC,IAAM,2BAA2B,YAAc,mCAAmC,MAAQ,6BAA6B,aAAa,kCAAkC,cAAc,mCAAmC,iBAAiB,sCAAsC,iBAAiB,sCAAsC,UAAY,iCAAiC,iBAAmB","sources":["webpack://_N_E/./components/contentful-components/promo-carousel/MobileSlider.tsx","webpack://_N_E/./components/contentful-components/promo-carousel/PromoCarousel.tsx","webpack://_N_E/./components/contentful-components/promo-carousel/MobileSlider.module.scss","webpack://_N_E/./components/contentful-components/promo-carousel/PromoCarousel.module.scss"],"sourcesContent":["import classes from \"./MobileSlider.module.scss\";\n\ninterface MobileSliderProps {\n  children: React.ReactNode;\n}\n\nconst MobileSlider = ({ children }: MobileSliderProps) => {\n  return (\n    <div className={classes[\"outer-wrapper\"]}>\n      <div className={classes[\"inner-wrapper\"]}>{children}</div>\n    </div>\n  );\n};\n\nexport default MobileSlider;\n","import { useEffect, useRef, useState, useCallback } from \"react\";\nimport Slider from \"react-slick\";\nimport \"slick-carousel/slick/slick.css\";\nimport \"slick-carousel/slick/slick-theme.css\";\nimport { useMediaQuery } from \"@mui/material\";\nimport Link from \"@Components/Link\";\nimport Icon from \"@Components/ui/icon/Icon\";\nimport ProductTile from \"@Components/ui/productTile/productTile\";\nimport {\n  PromoCarouselProps,\n  IArrowProps,\n  LazyType,\n  IRefProps,\n  ICarouselItem,\n} from \"@Types/promo-carousel\";\nimport { useCustomer } from \"@wff/hooks/useCustomer\";\nimport { useFavorites } from \"@wff/hooks/useFavorites\";\nimport { useAppSelector } from \"@wff/store/hooks\";\nimport { localeSelector } from \"@wff/store/localeSlice\";\nimport useWindowDimensions from \"../../../hooks/useWindowDimensions\";\nimport MobileSlider from \"./MobileSlider\";\nimport classes from \"./PromoCarousel.module.scss\";\n/**\n * Function to check value is present\n * @param {string} title - Main title of the section\n * @param {boolean} showDots - Defines if dot pagination should be displayed\n * @param {string} collectionTitle - title of the collection that is displaying in carousel\n * @param {string} collectionUrl - the collection's URI\n * @returns\n */\nexport default function PromoCarousel({\n  carouselProductItems,\n  title,\n  slug,\n}: PromoCarouselProps) {\n  const items = carouselProductItems?.items;\n  const { width } = useWindowDimensions();\n  const maxSlides = width > 960 ? 4 : width > 640 ? 3 : width > 480 ? 2 : 1;\n  const [currentSlide, setCurrentSlide] = useState(0);\n  const sliderRef = useRef<IRefProps>(null);\n  const isMobile = useMediaQuery(\"(max-width:30em)\");\n  const currentLocale = useAppSelector(localeSelector)?.languageCode ?? \"en-US\";\n\n  const SamplePrevArrow = (props: IArrowProps) => {\n    const { currentSlide } = props;\n    const disabledArrow = currentSlide !== undefined && currentSlide < 1;\n    const arrowClass = disabledArrow\n      ? `${\n          classes[\"arrow\"] +\n          \" \" +\n          classes[\"arrow-left\"] +\n          \" \" +\n          classes[\"disabled-arrow\"]\n        }`\n      : `${classes[\"arrow\"] + \" \" + classes[\"arrow-left\"]}`;\n\n    const handleLeftArrowClick = () => {\n      if (currentSlide && currentSlide > 0) setCurrentSlide(currentSlide - 1);\n    };\n\n    return (\n      <div className={arrowClass} onClick={handleLeftArrowClick}>\n        <Icon iconName=\"arrow-left-thin\" />\n      </div>\n    );\n  };\n\n  const SampleNextArrow = (props: IArrowProps) => {\n    const { slideCount, currentSlide } = props;\n    const disabledArrow =\n      currentSlide !== undefined &&\n      slideCount !== undefined &&\n      currentSlide >= slideCount - maxSlides;\n    const arrowClass = disabledArrow\n      ? `${\n          classes[\"arrow\"] +\n          \" \" +\n          classes[\"arrow-right\"] +\n          \" \" +\n          classes[\"disabled-arrow\"]\n        }`\n      : `${classes[\"arrow\"] + \" \" + classes[\"arrow-right\"]}`;\n\n    const handleRightArrowClick = () => {\n      if (slideCount && currentSlide !== undefined && currentSlide < slideCount)\n        setCurrentSlide(currentSlide + 1);\n    };\n\n    return (\n      <div className={arrowClass} onClick={handleRightArrowClick}>\n        <Icon iconName=\"arrow-right-thin\" />\n      </div>\n    );\n  };\n\n  const carouselHeading = (\n    <div id={classes[\"dot-nav\"]}>\n      <div\n        className={classes[\"title\"] + \" \" + classes[\"section__flex-wrapper\"]}\n      >\n        <Link href={slug ? `/${currentLocale}/${slug}` : \"#\"}>\n          <a>\n            <h2 className={classes[\"section__heading\"]}>{title}</h2>\n          </a>\n        </Link>\n      </div>\n    </div>\n  );\n  // Carousel/Slider settings:\n  const settings = {\n    infinite: false,\n    lazyLoad: \"progressive\" as LazyType,\n    swipeDirection: \"down\",\n    speed: 500,\n    slidesToShow: 4,\n    slidesToScroll: 1,\n    arrows: true,\n    adaptiveHeight: false,\n    prevArrow: <SamplePrevArrow />,\n    nextArrow: <SampleNextArrow />,\n    dots: true,\n    className: classes[\"section-slider\"],\n    initialSlide: currentSlide,\n    beforeChange: (prev: number, next: number) => {\n      if (next !== prev) setCurrentSlide(next);\n    },\n    appendDots: () => (title ? carouselHeading : <div></div>),\n    customPaging: () => <div id={classes[\"dot-container\"]} />,\n    responsive: [\n      {\n        breakpoint: 960,\n        settings: {\n          slidesToShow: 3,\n          slidesToScroll: 3,\n          initialSlide: 0,\n        },\n      },\n      {\n        breakpoint: 640,\n        settings: {\n          slidesToShow: 1.6,\n          slidesToScroll: 2,\n        },\n      },\n      {\n        breakpoint: 423,\n        settings: {\n          slidesToShow: 1.6,\n          slidesToScroll: 1,\n        },\n      },\n    ],\n  };\n\n  useEffect(() => {\n    if (sliderRef.current) sliderRef.current.slickGoTo(currentSlide);\n  }, [currentSlide]);\n\n  const { favoritesList, getFavoritesList } = useFavorites();\n\n  const { isLoggedIn } = useCustomer();\n\n  const getFavoritesListMemo = useCallback(\n    async (type) => {\n      await getFavoritesList(type);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  );\n\n  const tiles = items?.map((item: ICarouselItem, i: number) => (\n    <ProductTile\n      key={i}\n      className={classes[\"product__padding\"]}\n      item={item}\n      isFavorite={true}\n      favoritesList={favoritesList}\n      isFavoritePage={false}\n      isCarousel={true}\n    />\n  ));\n\n  useEffect(() => {\n    isLoggedIn && getFavoritesListMemo(\"default\");\n  }, [getFavoritesListMemo, isLoggedIn]);\n\n  return (\n    <section className=\"section\">\n      <div className=\"section__content__carousel\">\n        {isMobile ? (\n          <>\n            {carouselHeading}\n            <MobileSlider>{tiles}</MobileSlider>\n          </>\n        ) : (\n          <Slider {...settings} ref={sliderRef}>\n            {tiles}\n          </Slider>\n        )}\n      </div>\n    </section>\n  );\n}\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"outer-wrapper\":\"MobileSlider_outer-wrapper___h1Kb\",\"inner-wrapper\":\"MobileSlider_inner-wrapper___DOlE\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"section-slider\":\"PromoCarousel_section-slider__HNx_b\",\"title\":\"PromoCarousel_title__1KUuy\",\"section__flex-wrapper\":\"PromoCarousel_section__flex-wrapper__DivRn\",\"collection-title\":\"PromoCarousel_collection-title__tgG8k\",\"dot-nav\":\"PromoCarousel_dot-nav__3_Ic5\",\"tns-nav-active\":\"PromoCarousel_tns-nav-active__NHYCJ\",\"dot-container\":\"PromoCarousel_dot-container__Cgnbq\",\"dot\":\"PromoCarousel_dot__ZMVBv\",\"dot__active\":\"PromoCarousel_dot__active__A48sY\",\"arrow\":\"PromoCarousel_arrow__6pFB9\",\"arrow-left\":\"PromoCarousel_arrow-left__zQxtg\",\"arrow-right\":\"PromoCarousel_arrow-right__6CMYt\",\"disabled-arrow\":\"PromoCarousel_disabled-arrow__l2ZAF\",\"dots-container\":\"PromoCarousel_dots-container__0oyK7\",\"dotsClass\":\"PromoCarousel_dotsClass__rUDDk\",\"product__padding\":\"PromoCarousel_product__padding__Ff9Ua\"};"],"names":["children","div","className","classes","PromoCarousel","useAppSelector","carouselProductItems","title","slug","items","width","useWindowDimensions","maxSlides","useState","currentSlide","setCurrentSlide","sliderRef","useRef","isMobile","useMediaQuery","currentLocale","localeSelector","languageCode","SamplePrevArrow","props","arrowClass","undefined","onClick","Icon","iconName","SampleNextArrow","slideCount","carouselHeading","id","Link","href","a","h2","settings","infinite","lazyLoad","swipeDirection","speed","slidesToShow","slidesToScroll","arrows","adaptiveHeight","prevArrow","nextArrow","dots","initialSlide","beforeChange","prev","next","appendDots","customPaging","responsive","breakpoint","useEffect","current","slickGoTo","useFavorites","favoritesList","getFavoritesList","isLoggedIn","useCustomer","getFavoritesListMemo","useCallback","type","tiles","map","item","i","ProductTile","isFavorite","isFavoritePage","isCarousel","section","MobileSlider","Slider","ref","module","exports"],"sourceRoot":""}