{"version":3,"sources":["webpack:///./Scripts/Components/Algolia/utils/ProductGtm.tsx","webpack:///./Scripts/Components/Algolia/components/RecommendedView.tsx","webpack:///./Scripts/Components/Algolia/components/RelatedItem.tsx","webpack:///./Scripts/Components/Algolia/components/types/RecommendationType.ts","webpack:///./Scripts/Components/Algolia/AlgoliaRecommend.tsx","webpack:///./Scripts/Components/SliderArrows.js","webpack:///./Scripts/Components/ProductSlider.js"],"names":["GetProductGtm","id","hit","algoliaId","name","brand","category","variant","price","productDiscount","discount","RecommendedSliderView","props","products","url","HitUrl","priceGroup","GetPricesOfCurrency","imageUrls","HitImages","decsription","campaignPrice","discountPercent","image1","image2","articleNumber","show","gtmProduct","RecommendedGridView","className","data-algolia-recommend-products","item","key","objectID","RecommendView","formattedCampaignPrice","formattedPrice","href","img","src","alt","i","loading","translate","content","description","error","console","RecommendationType","HeaderComponent","title","transformIntoQueryString","query","encodeURIComponent","performProxyCall","a","fetch","response","Error","result","appId","apiKey","indexName","objectIds","recommendationType","maxRecommendations","facetName","undefined","facetValue","queryParametersText","recommendClient","base","getTrendingItems","getRelatedProducts","getFrequentlyBoughtTogether","getLookingSimilar","recommendProxyClient","recommend","currentObjectIds","queryParameters","JSON","ParseQueryParametersFromText","AlgoliaComponent","objectIDs","itemComponent","view","headerComponent","onLeftClick","color","showBackground","onRightClick","leftEnabled","rightEnabled","leftVisible","rightVisible","size","onClick","properties","ShouldShow","property","ProductSlider","isMobile","useIsMobile","useState","swiperInstance","setSwiperInstance","swiperCentered","setSwiperCentered","length","settings","spaceBetween","slidesPerView","freeModeSticky","resistanceRatio","loop","onSwiper","instance","virtualSize","onResize","breakpoints","0","centeredSlides","300","768","1440","SLIDES_PER_VIEW","product","class","styleName","dangerouslySetInnerHTML","__html","slidePrev","slideNext","realIndex"],"mappings":"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","file":"18.43b5e0c82813a80a4e68.js","sourcesContent":["import { AlgoliaProductHit } from \"../components/types/HitProps\";\r\n\r\nexport function GetProductGtm(\r\n  hit: AlgoliaProductHit,\r\n  actualPrice: number,\r\n  discount: number\r\n) {\r\n  return {\r\n    id: hit.objectID,\r\n    algoliaId: hit.objectID,\r\n    name: hit.name,\r\n    brand: hit.brand,\r\n    category: \"\",\r\n    variant: hit.variants?.[0]?.size || \"\",\r\n    price: actualPrice,\r\n    productDiscount: discount,\r\n  };\r\n}\r\n","import React from \"react\";\r\nimport { GetPricesOfCurrency } from \"./Hit\";\r\nimport ProductSlider from \"../../../Components/ProductSlider\";\r\nimport { GetProductGtm } from \"../utils/ProductGtm\";\r\nimport { RecommendViewProps } from \"./types/RecommendViewProps\";\r\nimport { HitImages, HitUrl } from \"../utils/HitUtils\";\r\n\r\nfunction RecommendedSliderView(props: RecommendViewProps) {\r\n  const products = props.items.map((hit) => {\r\n    const url = HitUrl(hit);\r\n    const priceGroup = GetPricesOfCurrency(hit.price);\r\n    const imageUrls = HitImages(hit);\r\n    return {\r\n      name: hit.styleName || hit.name,\r\n      brand: hit.brand,\r\n      decsription: hit.description,\r\n      url: url,\r\n      price: priceGroup.formattedPrice,\r\n      campaignPrice: priceGroup.formattedCampaignPrice,\r\n      discountPercent: priceGroup.formattedDiscountInPercentage,\r\n      image1: imageUrls.length > 0 ? imageUrls[0] : \"\",\r\n      image2: imageUrls.length > 1 ? imageUrls[1] : \"\",\r\n      articleNumber: hit.objectID,\r\n      show: [\r\n        \"quick-add\",\r\n        \"brand\",\r\n        \"name\",\r\n        \"price\",\r\n        \"wish-list\",\r\n        \"tags\",\r\n        \"color-picker\",\r\n        \"voucher-code\",\r\n      ],\r\n      gtmProduct: GetProductGtm(\r\n        hit,\r\n        priceGroup.actualPrice,\r\n        priceGroup.discount\r\n      ),\r\n    };\r\n  });\r\n  return <ProductSlider {...{ products }}></ProductSlider>;\r\n}\r\n\r\nfunction RecommendedGridView(props: RecommendViewProps) {\r\n  return (\r\n    <div className=\"algolia-recommend-products\" data-algolia-recommend-products>\r\n      <div className=\"related-products__list row\">\r\n        {props.items.map((item) => (\r\n          <props.itemComponent item={item} key={item.objectID} />\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function RecommendView(props: RecommendViewProps) {\r\n  const sliderLimit = 4;\r\n\r\n  return props.items.length > sliderLimit ? (\r\n    <RecommendedSliderView {...props} />\r\n  ) : (\r\n    <RecommendedGridView {...props} />\r\n  );\r\n}\r\n","import React from \"react\";\r\nimport { GetPricesOfCurrency } from \"./Hit\";\r\nimport { translate } from \"../../../Services/translation\";\r\nimport { HitProps, RelatedHitProps } from \"./types/HitProps\";\r\nimport { GetProductGtm } from \"../utils/ProductGtm\";\r\nimport { HitImages, HitUrl } from \"../utils/HitUtils\";\r\n\r\nfunction UnsafeRelatedItem({ hit }: HitProps) {\r\n  const priceGroup = GetPricesOfCurrency(hit.price);\r\n  const formattedCampaignPrice = priceGroup.formattedCampaignPrice;\r\n  const formattedPrice = priceGroup.formattedPrice;\r\n  const url = HitUrl(hit);\r\n  const imageUrls = HitImages(hit);\r\n  const gtmProduct = GetProductGtm(\r\n    hit,\r\n    priceGroup.actualPrice,\r\n    priceGroup.discount\r\n  );\r\n\r\n  return (\r\n    <div className=\"related-products__product product-slider-card small-6 medium-3\">\r\n      <json-data className=\"gtm-product\">\r\n        {JSON.stringify(gtmProduct)}\r\n      </json-data>\r\n      <a href={url}>\r\n        <figure>\r\n          {imageUrls.length > 0 ? (\r\n            imageUrls.map((img, i) => (\r\n              <img\r\n                key={img + i}\r\n                src={img}\r\n                alt={hit.name}\r\n                className={i == 0 ? \"first\" : \"second\"}\r\n                loading=\"lazy\"\r\n              />\r\n            ))\r\n          ) : (\r\n            <span>{translate(\"product.missing-image\")}</span>\r\n          )}\r\n        </figure>\r\n        <article>\r\n          <div className=\"product-slider-card__header\">\r\n            <div>\r\n              <span className=\"product-slider-card__brand\">{hit.brand}</span>\r\n              <span className=\"product-slider-card__name\">\r\n                {hit.styleName || hit.name}\r\n              </span>\r\n            </div>\r\n          </div>\r\n          <div className=\"product-slider-card__price\">\r\n            {formattedCampaignPrice ? (\r\n              <span>{formattedCampaignPrice}</span>\r\n            ) : formattedPrice ? (\r\n              <span>{formattedPrice}</span>\r\n            ) : null}\r\n          </div>\r\n          <meta content={hit.description} />\r\n        </article>\r\n      </a>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst RelatedItem = ({ item }: RelatedHitProps) => {\r\n  try {\r\n    return UnsafeRelatedItem({ hit: item });\r\n  } catch (error) {\r\n    console.warn(error);\r\n    return <></>;\r\n  }\r\n};\r\n\r\nexport default RelatedItem;\r\n","export enum RecommendationType {\r\n  FrequentlyBoughtTogether = 0,\r\n  RelatedProducts = 1,\r\n  TrendingItems = 2,\r\n  TrendingFacets = 3,\r\n  LookingSimilar = 4,\r\n}\r\n","import React from \"react\";\r\nimport {\r\n  FrequentlyBoughtTogether,\r\n  LookingSimilar,\r\n  RelatedProducts,\r\n  TrendingItems,\r\n} from \"@algolia/recommend-react\";\r\nimport recommend, { RecommendClient } from \"@algolia/recommend\";\r\nimport { RecommendView } from \"./components/RecommendedView\";\r\nimport RelatedItem from \"./components/RelatedItem\";\r\nimport { AlgoliaRecommendProps } from \"./components/types/AlgoliaRecommendProps\";\r\nimport { RecommendationType } from \"./components/types/RecommendationType\";\r\n\r\nfunction HeaderComponent(title: string) {\r\n  return () => (title ? <h4>{title}</h4> : null);\r\n}\r\n\r\nconst ParseQueryParametersFromText = (queryParametersText: string) => {\r\n  try {\r\n    if (queryParametersText) {\r\n      return JSON.parse(queryParametersText);\r\n    }\r\n  } catch (error) {}\r\n\r\n  return undefined;\r\n};\r\n\r\nconst transformIntoQueryString = (query: any) => {\r\n  return Object.keys(query)\r\n    .sort()\r\n    .filter((key) => query[key] !== undefined)\r\n    .map((key) => {\r\n      return encodeURIComponent(key) + \"=\" + encodeURIComponent(typeof query[key] == \"object\" ? JSON.stringify(query[key]) : query[key]);\r\n    })\r\n    .join(\"&\");\r\n}; \r\n\r\nconst performProxyCall = async (model: string, query: string) => {\r\n  const response = await fetch(`/api/algolia/proxy/${model}?${query}`);\r\n  \r\n  if (response.status >= 400) {\r\n    throw new Error(\"proxy response status was 400 or above, status: \" + response.status);\r\n  }\r\n\r\n  const result = await response.json();\r\n  return result;\r\n}\r\n\r\nconst recommendProxyClient = (base: RecommendClient, apiKey) => {\r\n  return {\r\n    ...base,\r\n    async getTrendingItems(query, o) {\r\n      try {\r\n        return await performProxyCall(\"trending-items\", transformIntoQueryString({ ...query[0], appId: base.appId, apiKey }));\r\n      } catch (error) {\r\n        console.error(\"error while doing proxy request, calling base\", error);\r\n        return base.getTrendingItems(query, o);\r\n      }\r\n    },\r\n    async getRelatedProducts(query, o) {\r\n      try {\r\n        return await performProxyCall(\"related-products\", transformIntoQueryString({ ...query[0], appId: base.appId, apiKey }));\r\n      } catch (error) {\r\n        console.error(\"error while doing proxy request, calling base\", error);\r\n        return base.getRelatedProducts(query, o);\r\n      }\r\n    },\r\n    async getFrequentlyBoughtTogether(query, o) {\r\n      try {\r\n        return await performProxyCall(\"bought-together\", transformIntoQueryString({ ...query[0], appId: base.appId, apiKey })); \r\n      } catch (error) {\r\n        console.error(\"error while doing proxy request, calling base\", error);\r\n        return base.getFrequentlyBoughtTogether(query, o);\r\n      }\r\n    },\r\n    async getLookingSimilar(query, o) {\r\n      try {\r\n        return await performProxyCall(\"looking-similar\", transformIntoQueryString({ ...query[0], appId: base.appId, apiKey }));\r\n      } catch (error) {\r\n        console.error(\"error while doing proxy request, calling base\", error);\r\n        return base.getLookingSimilar(query, o);\r\n      }\r\n    },\r\n  } as RecommendClient;\r\n};\r\n\r\nconst AlgoliaRecommend = ({\r\n  appId,\r\napiKey,\r\n  indexName,\r\n  objectIds,\r\n  title,\r\n  recommendationType,\r\n  maxRecommendations,\r\n  facetName = undefined,\r\n  facetValue = undefined,\r\n  queryParametersText = undefined,\r\n}: AlgoliaRecommendProps) => {\r\n  const recommendClient = recommendProxyClient(recommend(appId, apiKey), apiKey);\r\n  const currentObjectIds = objectIds ? objectIds.split(\",\") : [];\r\n  const queryParameters = ParseQueryParametersFromText(queryParametersText);\r\n\r\n  let AlgoliaComponent;\r\n  switch (recommendationType) {\r\n    case RecommendationType.FrequentlyBoughtTogether:\r\n      AlgoliaComponent = FrequentlyBoughtTogether;\r\n      break;\r\n    case RecommendationType.RelatedProducts:\r\n      AlgoliaComponent = RelatedProducts;\r\n      break;\r\n    case RecommendationType.TrendingItems:\r\n      AlgoliaComponent = TrendingItems;\r\n      break;\r\n    case RecommendationType.LookingSimilar:\r\n      AlgoliaComponent = LookingSimilar;\r\n      break;\r\n    default:\r\n      AlgoliaComponent = null;\r\n      break;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {AlgoliaComponent && (\r\n        <AlgoliaComponent\r\n          recommendClient={recommendClient}\r\n          indexName={indexName}\r\n          objectIDs={currentObjectIds}\r\n          itemComponent={RelatedItem}\r\n          view={RecommendView}\r\n          maxRecommendations={maxRecommendations}\r\n          headerComponent={HeaderComponent(title)}\r\n          facetName={facetName}\r\n          facetValue={facetValue}\r\n          queryParameters={queryParameters}\r\n        />\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default AlgoliaRecommend;\r\n","import { CaretLeft, CaretRight } from \"phosphor-react\"\r\nimport React from \"react\"\r\n\r\nexport default ({ className = \"\", onLeftClick, color, showBackground = true, onRightClick, leftEnabled = true, rightEnabled = true, leftVisible = true, rightVisible = true, size }) => (<>\r\n    {leftVisible && <div className={`slider-arrow slider-arrow--left ${className} ${!showBackground ? \"slider-arrow--hide-background\": \"\"}`} onClick={leftEnabled && onLeftClick}>\r\n        <CaretLeft size={size} color={color} />\r\n    </div>}\r\n    {rightVisible && <div className={`slider-arrow slider-arrow--right ${className} ${!showBackground ? \"slider-arrow--hide-background\" : \"\"}`} onClick={rightEnabled && onRightClick}>\r\n        <CaretRight size={size} color={color} />\r\n    </div>}\r\n</>)","import React, { useEffect, useState } from \"react\"\r\nimport SliderArrows from \"./SliderArrows\"\r\nimport { Swiper, SwiperSlide } from 'swiper/react';\r\nimport useIsMobile from \"../Hooks/useIsMobile\";\r\nimport('swiper/swiper.scss');\r\n\r\nconst SLIDES_PER_VIEW = 4\r\nvar properties = null;\r\n\r\nfunction ShouldShow(property) {\r\n    return typeof properties != 'undefined' && properties != null && properties.includes(property);\r\n}\r\n\r\nconst ProductSlider = props => {\r\n    const { products } = props\r\n\r\n    const isMobile = useIsMobile()\r\n    const [swiperInstance, setSwiperInstance] = useState()\r\n    const [swiperCentered, setSwiperCentered] = useState()\r\n\r\n    if (products != null && products.length > 0){\r\n        properties = products[0].show;\r\n    }\r\n\r\n    const getProductCards = () => products.map((product, i) => \r\n        <SwiperSlide className=\"product-slider-card\" key={i}>\r\n            {product.gtmProduct && <json-data class=\"gtm-product\">{JSON.stringify(product.gtmProduct)}</json-data>}\r\n            <a href={product.url ? product.url : \"\"}>\r\n                <figure>\r\n                    <img src={product.image1} className=\"first\" />\r\n                    {!isMobile && product.image2 && <img src={product.image2} className=\"second\" />}\r\n                </figure>\r\n                <article>\r\n                    <div className=\"product-slider-card__header\">\r\n                        <div>\r\n                            {ShouldShow(\"brand\") && <span className=\"product-slider-card__brand\">{product.brand}</span>}\r\n                            {ShouldShow(\"name\") && <span className=\"product-slider-card__name\">{product.styleName || product.name}</span>}\r\n                        </div>\r\n                    </div>\r\n                    {ShouldShow(\"price\") && <div className=\"product-slider-card__price\">\r\n                        {product.campaignPrice ? product.campaignPrice : product.price}\r\n                        {product.campaignPrice && <>\r\n                            <span className=\"product-slider-card__old-price\">\r\n                                {product.price}\r\n                            </span>\r\n                            <span className=\"product-slider-card__amount-off\">\r\n                                {product.discountPercent}\r\n                            </span>\r\n                        </>}\r\n                        {!product.price && <span dangerouslySetInnerHTML={{__html: \"&nbsp;\"}}></span>}\r\n                    </div>}\r\n                    <meta content={product.description} />\r\n                </article>\r\n            </a>\r\n        </SwiperSlide>\r\n    )\r\n\r\n    const settings = {\r\n        spaceBetween: 1,\r\n        slidesPerView: SLIDES_PER_VIEW,\r\n        freeModeSticky: true,\r\n        resistanceRatio: 0,\r\n        loop: true,\r\n        onSwiper: instance => {\r\n            setSwiperInstance(instance)\r\n            setSwiperCentered(instance.virtualSize <= instance.size)\r\n        },\r\n        onResize: instance => {\r\n            setSwiperCentered(instance.virtualSize <= instance.size)\r\n        },\r\n        breakpoints: {\r\n            0: {\r\n                slidesPerView: 1.2,\r\n                centeredSlides: true,\r\n            },\r\n            300: {\r\n                slidesPerView: 2.2,\r\n            },\r\n            768: {\r\n                slidesPerView: SLIDES_PER_VIEW,\r\n                centeredSlides: false,\r\n            },\r\n            1440: {\r\n                slidesPerView: SLIDES_PER_VIEW+1,\r\n                centeredSlides: false,\r\n            }\r\n        } \r\n    }\r\n\r\n    return <div className={swiperCentered ? \"product-slider--centered\" : \"\"}>\r\n        <Swiper {...settings}>\r\n            {getProductCards()}\r\n            <SliderArrows \r\n                onLeftClick={() => swiperInstance && swiperInstance.slidePrev()} \r\n                onRightClick={() => swiperInstance && swiperInstance.slideNext()} \r\n                rightVisible={() => swiperInstance && swiperInstance.realIndex <= (products.length - 1 - SLIDES_PER_VIEW)}\r\n                leftVisible={() => swiperInstance && swiperInstance.realIndex > 0}\r\n            />\r\n        </Swiper>\r\n    </div>\r\n}\r\n\r\nexport default ProductSlider"],"sourceRoot":""}