{"version":3,"file":"relatedProducts.cdd67347f76fdb814d9f.js","sources":["webpack:///./Source/FECOM.Web.UI/Scripts/components/RelatedProducts.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\r\nimport {\r\n  ProductListItemViewModel,\r\n  BasketRowViewModel,\r\n  Website\r\n} from '../types/generated';\r\nimport ProductPod from './ProductPod';\r\nimport { PageLocation, TransactionalCurrency } from '../types/enums';\r\nimport { getBasketCatalogueRefs } from '../apps/basket/basketApi';\r\nimport canUseDOM from '../utilities/canUseDOM';\r\nimport * as basketApi from '../apps/basket/basketApi';\r\nimport { createCurrencyCode } from '../utilities/formatCurrency';\r\n\r\nexport interface RelatedProductsProps {\r\n  products: ProductListItemViewModel[] | null;\r\n  transactionalCurrency: TransactionalCurrency;\r\n  showSecondaryPrice: boolean;\r\n  website: Website;\r\n}\r\n\r\nexport default function RelatedProducts({\r\n  products,\r\n  transactionalCurrency,\r\n  showSecondaryPrice,\r\n  website\r\n}: RelatedProductsProps) {\r\n  const [catalogueRefs, setCatalogueRefs] = useState<string[]>([]);\r\n\r\n  useEffect(() => {\r\n    if (canUseDOM()) {\r\n      getBasketCatalogueRefs().then((refs) => {\r\n        setCatalogueRefs(refs);\r\n      });\r\n    }\r\n  }, []);\r\n\r\n  if (!products || products.length === 0) {\r\n    return null;\r\n  }\r\n\r\n  function trackAddToBasket() {\r\n    basketApi\r\n      .getBasket()\r\n      .then((response) => {\r\n        window._sqzl = window._sqzl || [];\r\n\r\n        window.monetateQ = window.monetateQ || [];\r\n        window.monetateQ.push(['setPageType', 'product']);\r\n        let Window = window as any;\r\n        if (Window.Fecom && Window.Fecom.catalogueRef) {\r\n          const catalogueRef = Window.Fecom.catalogueRef;\r\n          window.monetateQ.push([\r\n            'addProductDetails',\r\n            [\r\n              {\r\n                productId: catalogueRef,\r\n                sku: catalogueRef\r\n              }\r\n            ]\r\n          ]);\r\n        }\r\n        if (response.hasRows) {\r\n          response.rows.forEach((element: BasketRowViewModel) => {\r\n            window.monetateQ.push([\r\n              'addCartRows',\r\n              [\r\n                {\r\n                  productId: element.catalogueRef,\r\n                  sku: element.sku,\r\n                  quantity: element.quantity,\r\n                  unitPrice: element.priceExcVat,\r\n                  currency: createCurrencyCode(transactionalCurrency)\r\n                }\r\n              ]\r\n            ]);\r\n\r\n            window._sqzl.push({\r\n              event: 'AddToCart',\r\n              products: [\r\n                {\r\n                  id: element.catalogueRef,\r\n                  price: element.priceExcVat,\r\n                  quantity: element.quantity\r\n                }\r\n              ]\r\n            });\r\n          });\r\n\r\n          console.log(\r\n            response.rows.length +\r\n              ' Related products AddToCart event sent to squeezely'\r\n          );\r\n        }\r\n        window.monetateQ.push(['trackData']);\r\n      })\r\n      .catch((error) => {\r\n        console.log(error);\r\n      });\r\n  }\r\n\r\n  return (\r\n    <div className=\"row js-related-products\">\r\n      {products.map((product) => (\r\n        <div\r\n          key={product.productId}\r\n          className=\"col-sm-6 col-md-3 mb-4 js-sli-click-trigger\"\r\n          data-click-url={product?.sliLogUrl}\r\n        >\r\n          <ProductPod\r\n            transactionalCurrency={transactionalCurrency}\r\n            {...product}\r\n            isAdded={\r\n              product.catalogueRef != null\r\n                ? catalogueRefs.includes(product.catalogueRef)\r\n                : false\r\n            }\r\n            showSecondaryPrice={showSecondaryPrice}\r\n            website={website}\r\n            location={PageLocation.YMAL}\r\n            onTrackAddToBasketMonetate={trackAddToBasket}\r\n          />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAMA;AACA;AACA;AACA;AACA;AACA;;AASA;AAKA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AAIA;AACA;AAFA;AAMA;AACA;AAAA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AALA;AACA;AASA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAHA;AAUA;AAEA;AAIA;AACA;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAHA;AAMA;AADA;AAGA;AAKA;AACA;AACA;AACA;AAXA;AALA;AADA;AADA;AAwBA;;;;A","sourceRoot":""}