{"version":3,"file":"basketProductList~productList~productPage~relatedProducts~smartflow.d763474b72e62456948a.js","sources":["webpack:///./Source/FECOM.Web.UI/Scripts/apps/Offer/Offer.tsx","webpack:///./Source/FECOM.Web.UI/Scripts/apps/Offer/offerModal.tsx","webpack:///./Source/FECOM.Web.UI/Scripts/apps/product/productPageApi.ts","webpack:///./Source/FECOM.Web.UI/Scripts/components/ResponsiveProductImage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { getProductByProductId } from '../product/productPageApi';\r\nimport { ProductViewModel } from '../../types/generated';\r\nimport OfferModal from './offerModal';\r\nimport { Button } from '../../components/Button';\r\n\r\nexport default function Offer({\r\n  offer,\r\n  className,\r\n  offerFreeProduct\r\n}: OfferProps) {\r\n  const [showModal, updateShowModal] = useState(false);\r\n  const [freeProduct, setFreeProduct] =\r\n    useState<ProductViewModel | null>(offerFreeProduct);\r\n\r\n  useEffect(() => {\r\n    if (freeProduct === null && offer && offer.offerFreeProductId) {\r\n      getProductByProductId(offer.offerFreeProductId).then(\r\n        (data: ProductViewModel) => {\r\n          setFreeProduct(data);\r\n        }\r\n      );\r\n    }\r\n  }, [offer, freeProduct]);\r\n\r\n  return (\r\n    <div className=\"pt-2 pb-2\">\r\n      {offer.offerTypeId && offer.offerTypeId !== 0 ? (\r\n        <>\r\n          <Button\r\n            className={className}\r\n            handleClick={() => {\r\n              updateShowModal(true);\r\n            }}\r\n          >\r\n            {offer.offerName}\r\n          </Button>\r\n\r\n          <OfferModal\r\n            offer={offer}\r\n            showModal={showModal}\r\n            updateShowModal={updateShowModal}\r\n            freeProduct={freeProduct}\r\n          />\r\n        </>\r\n      ) : (\r\n        <div className=\"d-none d-md-block pt-4 pb-2 opacity-0\"></div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport interface OfferDetails {\r\n  productCatalogueRef: string | null;\r\n  offerTypeId: number;\r\n  offerTypeName: string | null;\r\n  offerName: string | null;\r\n  offerDescription: string | null;\r\n  offerQuantityBuy: number;\r\n  offerQuantityFree: number;\r\n  offerFreeProductId: number;\r\n}\r\n\r\nexport interface OfferProps {\r\n  offer: OfferDetails;\r\n  className: string;\r\n  offerFreeProduct: ProductViewModel | null;\r\n}\r\n","import Modal from '../../components/Modal';\r\nimport { ImageSizes } from '../../components/ProductMediaGallery';\r\nimport { ResponsiveProductImage } from '../../components/ResponsiveProductImage';\r\nimport { OfferTypes, ProductViewModel } from '../../types/generated';\r\nimport { OfferDetails } from './Offer';\r\n\r\nexport interface OffersModalProps {\r\n  offer: OfferDetails;\r\n  showModal: boolean;\r\n  updateShowModal: (data: boolean) => void;\r\n  freeProduct: ProductViewModel | null;\r\n}\r\n\r\nexport default function OfferModal({\r\n  offer,\r\n  showModal,\r\n  updateShowModal,\r\n  freeProduct\r\n}: OffersModalProps) {\r\n  const fallbackImage =\r\n    'https://cdn.images.fecom-media.com/image_coming_soon.jpg';\r\n\r\n  const imageSizes: ImageSizes = {\r\n    xs: 70,\r\n    // sm: 480,\r\n    // md: 270,\r\n    lg: 183\r\n    // xl: 445,\r\n  };\r\n\r\n  return (\r\n    offer && (\r\n      <Modal\r\n        //style={previewModalStyles}\r\n        className=\"modal-md modal-dialog-scrollable\"\r\n        title={offer.offerTypeName || 'Available Offer'}\r\n        isVisible={showModal}\r\n        showClose={true}\r\n        handleClose={() => updateShowModal(false)}\r\n        escapeToClose={true}\r\n      >\r\n        <ul className=\"list-unstyled pl-3 mb-0\">\r\n          {offer.offerTypeName === OfferTypes.FreeProduct && freeProduct ? (\r\n            <li key={offer.productCatalogueRef} className=\"pt-3\">\r\n              <div className=\"row mb-3\">\r\n                <div className=\"col text-center\">{offer.offerDescription}</div>\r\n              </div>\r\n              <div className=\"row\">\r\n                <div className=\"col-6 mx-auto\">\r\n                  <ResponsiveProductImage\r\n                    src={freeProduct.imageUrl || fallbackImage}\r\n                    {...imageSizes}\r\n                  />\r\n                  <div className=\"text-center\">\r\n                    <a href={freeProduct.urlPath || ''}>\r\n                      <small>{freeProduct.name}</small>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </li>\r\n          ) : (\r\n            <li key={offer.productCatalogueRef} className=\"pt-3\">\r\n              <div className=\"col text-center\">{offer.offerDescription}</div>\r\n            </li>\r\n          )}\r\n        </ul>\r\n      </Modal>\r\n    )\r\n  );\r\n}\r\n","import { InStockNotificationRequest } from './../../types/generated';\r\n\r\nexport const apiPathProducts = '/umbraco/surface/productssurface/';\r\nexport const apiPathUser = '/umbraco/surface/usersurface/';\r\nexport const apiPathInStock = '/umbraco/surface/instocknotificationsurface/';\r\nexport const apiPathBasket = '/umbraco/surface/basketsurface/';\r\n\r\nconst fetchBaseConfig: RequestInit = {\r\n  credentials: 'same-origin',\r\n  headers: {\r\n    'content-type': 'application/json',\r\n    accept: 'application/json'\r\n  }\r\n};\r\n\r\nexport function getProductDataByVariants() {\r\n  console.log('do something');\r\n}\r\n\r\nexport const getIsFavourite = (catalogueRef?: string | null) => {\r\n  const path = `${apiPathProducts}GetProductIsFavourite/?catalogueRef=${catalogueRef}`;\r\n\r\n  return fetch(path, fetchBaseConfig).then((response) => {\r\n    return response.json();\r\n  });\r\n};\r\n\r\nexport const getIsDownloadUser = () => {\r\n  const path = `${apiPathUser}GetIsDownloadUser`;\r\n\r\n  return fetch(path, fetchBaseConfig).then((response) => {\r\n    return response.json();\r\n  });\r\n};\r\n\r\nexport const registerForInStockNotification = (\r\n  form: Partial<InStockNotificationRequest>\r\n) => {\r\n  const path = `${apiPathInStock}RegisterForInStockNotification`;\r\n  const data = { ...form };\r\n  const config: RequestInit = {\r\n    ...fetchBaseConfig,\r\n    body: JSON.stringify(data),\r\n    method: 'POST'\r\n  };\r\n\r\n  return fetch(path, config).then((response) => {\r\n    return response.json();\r\n  });\r\n};\r\n\r\nexport const getProductByProductId = (productId: number) => {\r\n  const path = `${apiPathProducts}GetProductByProductId/?productId=${productId}`;\r\n\r\n  return fetch(path, fetchBaseConfig).then((response) => {\r\n    return response.json();\r\n  });\r\n};\r\n\r\nexport const getProductQuantityInBasket = (catalogueRef: string) => {\r\n  const path = `${apiPathBasket}GetProductQuantityInBasket/?catalogueRef=${catalogueRef}`;\r\n\r\n  return fetch(path, fetchBaseConfig).then((response) => {\r\n    return response.json();\r\n  });\r\n};\r\n","import * as React from 'react';\r\n\r\nexport interface ResponsiveProductImageProps {\r\n  src: string;\r\n  srcMobile?: string;\r\n  xs?: number;\r\n  sm?: number;\r\n  md?: number;\r\n  lg?: number;\r\n  xl?: number;\r\n  xxl?: number;\r\n  alt?: string;\r\n  className?: string;\r\n}\r\n\r\ntype MediaSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\r\n\r\ninterface Size {\r\n  name: MediaSize;\r\n  size?: number;\r\n}\r\ninterface FilledSize {\r\n  name: MediaSize;\r\n  size: number;\r\n}\r\n\r\nconst mediaQueries = {\r\n  xs: '(max-width: 575px)',\r\n  sm: '(min-width: 576px)',\r\n  md: '(min-width: 768px)',\r\n  lg: '(min-width: 992px)',\r\n  xl: '(min-width: 1200px)',\r\n  xxl: '(min-width: 1500px)'\r\n};\r\n\r\nexport function ResponsiveProductImage({\r\n  xs,\r\n  sm,\r\n  md,\r\n  lg,\r\n  xl,\r\n  xxl,\r\n  src,\r\n  srcMobile,\r\n  alt = '',\r\n  className\r\n}: ResponsiveProductImageProps) {\r\n  const mobileImageSrc = srcMobile || src;\r\n\r\n  const sizes: Size[] = [];\r\n\r\n  if (xs) {\r\n    sizes.push({ name: 'xs', size: xs });\r\n  }\r\n  if (sm) {\r\n    sizes.push({ name: 'sm', size: sm });\r\n  }\r\n  if (md) {\r\n    sizes.push({ name: 'md', size: md });\r\n  }\r\n  if (lg) {\r\n    sizes.push({ name: 'lg', size: lg });\r\n  }\r\n  if (xl) {\r\n    sizes.push({ name: 'xl', size: xl });\r\n  }\r\n  if (xxl) {\r\n    sizes.push({ name: 'xxl', size: xxl });\r\n  }\r\n\r\n  let lastSize = 0;\r\n  let imageUrlWebP: string;\r\n  let sourceTypeWebP: string;\r\n\r\n  const filledSizes: FilledSize[] = sizes\r\n    .map(({ name, size }) => {\r\n      if (!size) {\r\n        return { name, size: lastSize };\r\n      }\r\n\r\n      lastSize = size;\r\n      return { name, size };\r\n    })\r\n    .reverse();\r\n\r\n  var isWebP = (window as { [key: string]: any })['isWebP'];\r\n  if (isWebP) {\r\n    imageUrlWebP = 'format=webp&';\r\n    sourceTypeWebP = 'image/webp';\r\n  }\r\n  const handleOnDragStart = (e: React.DragEvent<HTMLImageElement>) =>\r\n    e.preventDefault();\r\n\r\n  return (\r\n    <div style={{ paddingTop: '100%', position: 'relative' }}>\r\n      <picture>\r\n        {filledSizes.map(({ name, size }) => {\r\n          const sizedSrc =\r\n            name === 'xs' || name === 'sm' ? mobileImageSrc : src;\r\n\r\n          // URL encode to avoid milions of errors in console\r\n          var firstImageUrl = encodeURI(\r\n            `${sizedSrc}?${imageUrlWebP}width=${size}&height=${size}&quality=75 1x&scale=UpscaleCanvas&anchor=MiddleCenter`\r\n          );\r\n          var secondImageUrl = encodeURI(\r\n            `${sizedSrc}?${imageUrlWebP}width=${size * 2}&height=${\r\n              size * 2\r\n            }&quality=75 2x&scale=UpscaleCanvas&anchor=MiddleCenter`\r\n          );\r\n\r\n          const srcSet = `${firstImageUrl}, ${secondImageUrl}`;\r\n\r\n          return (\r\n            <source\r\n              key={name}\r\n              srcSet={srcSet}\r\n              media={mediaQueries[name]}\r\n              type={sourceTypeWebP}\r\n            />\r\n          );\r\n        })}\r\n        <img\r\n          src={`${src}?width=${filledSizes[0].size}&height=${filledSizes[0].size}&scale=UpscaleCanvas&anchor=MiddleCenter`}\r\n          alt={alt}\r\n          width={`${filledSizes[0].size}`}\r\n          height={`${filledSizes[0].size}`}\r\n          style={{\r\n            position: 'absolute',\r\n            backgroundColor: '#f7f7f7',\r\n            top: 0,\r\n            left: 0,\r\n            width: '100%',\r\n            height: '100%'\r\n          }}\r\n          className={className}\r\n          onDragStart={handleOnDragStart}\r\n        />\r\n      </picture>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAEA;AACA;;;;AAEA;AAIA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAAA;AAEA;AAEA;AACA;AACA;AACA;AAJA;AAAA;AAUA;AACA;AACA;AACA;AAJA;AAVA;AAkBA;AAAA;AApBA;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClDA;AAEA;AACA;;;AAUA;AAKA;AAAA;AAAA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AALA;AAQA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAPA;AASA;AAAA;AAEA;AAAA;AACA;AAAA;AACA;AAAA;AAAA;AADA;AAGA;AAAA;AACA;AAAA;AAEA;AADA;AAIA;AAAA;AACA;AAAA;AACA;AAAA;AADA;AADA;AALA;AADA;AAJA;AAmBA;AAAA;AACA;AAAA;AAAA;AADA;AArBA;AATA;AAsCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACpEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAFA;AAFA;AAQA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AAAA;AACA;AAAA;AAEA;AACA;AAHA;AACA;AAKA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjEA;;;AA0BA;AACA;AACA;AACA;AACA;AACA;AACA;AANA;AASA;AAWA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAGA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AACA;AAGA;AAGA;AAMA;AAEA;AAGA;AACA;AACA;AAJA;AAOA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AANA;AAQA;AACA;AAdA;AA1BA;AADA;AA8CA;;;;A","sourceRoot":""}