{"version":3,"file":"alternativeProductPod.ad659378ce2dd0a61b47.js","sources":["webpack:///./Source/FECOM.Web.UI/Scripts/apps/product/components/PriceBreaks.tsx","webpack:///./Source/FECOM.Web.UI/Scripts/components/AlternativeProductPod.tsx"],"sourcesContent":["import { ReactElement } from 'react';\r\nimport {\r\n  PriceBreak,\r\n  TransactionalCurrency,\r\n  Website\r\n} from '../../../types/generated';\r\nimport formatCurrency from '../../../utilities/formatCurrency';\r\n\r\ninterface PriceBreaksProps {\r\n  priceBreaks: PriceBreak[] | null;\r\n  transactionalCurrency: TransactionalCurrency;\r\n  website: Website;\r\n  showSecondaryPrice: boolean;\r\n  updateQuantity: (value: number) => void;\r\n}\r\n\r\nexport default function PriceBreaks({\r\n  priceBreaks,\r\n  transactionalCurrency,\r\n  showSecondaryPrice,\r\n  updateQuantity\r\n}: PriceBreaksProps): ReactElement {\r\n  function formatPriceBreakPrices(priceBreak: PriceBreak) {\r\n    return (\r\n      <>\r\n        <div className=\"product-price product-price\">\r\n          <span className=\"product-price\">\r\n            {formatCurrency(\r\n              priceBreak.pricingInfo.primaryPrice.value,\r\n              transactionalCurrency\r\n            )}{' '}\r\n            <span className=\"per-item\">each</span>\r\n          </span>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n  const onHandleClick = (units: number) => {\r\n    updateQuantity(units);\r\n  };\r\n\r\n  function formatTotalOfferPrice(priceBreak: PriceBreak) {\r\n    var totalPrice =\r\n      priceBreak.pricingInfo.primaryPrice.value * priceBreak.units;\r\n    var totalSecondaryPrice =\r\n      priceBreak.pricingInfo.secondaryPrice.value * priceBreak.units;\r\n    return (\r\n      <>\r\n        <div className=\"product-price product-price--primary\">\r\n          <span className=\"d-none\">{'GBP'}</span>\r\n          <span className=\"product-price--primary-value\">\r\n            {formatCurrency(totalPrice, transactionalCurrency)}\r\n          </span>\r\n          {!showSecondaryPrice && (\r\n            <span className=\"price-primary-text\">\r\n              {priceBreak.pricingInfo.primaryPriceText}\r\n            </span>\r\n          )}\r\n        </div>\r\n\r\n        {showSecondaryPrice && (\r\n          <div className={`product-price product-price--secondary`}>\r\n            <span className=\"d-none\">{'GBP'}</span>\r\n            <span>\r\n              {formatCurrency(totalSecondaryPrice, transactionalCurrency)}\r\n            </span>{' '}\r\n            <span className=\"price-secondary-text\">\r\n              {priceBreak.pricingInfo.secondaryPriceText}\r\n            </span>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"purchase-options\">\r\n      <h6>Buy More Save More</h6>\r\n      <div className=\"price-breaks\">\r\n        <div className=\"price-breaks__prices\">\r\n          {priceBreaks?.map((priceBreak: PriceBreak) => (\r\n            <div\r\n              key={priceBreak.units}\r\n              className=\"price-break\"\r\n              onClick={() => onHandleClick(priceBreak.units)}\r\n            >\r\n              <div className=\"price-break-container price-break-container--background\">\r\n                <div className=\"left-column\">\r\n                  <span className=\"price-break__offer\">\r\n                    <strong>Buy {priceBreak.units}</strong>\r\n                    <small className=\"text-small\">{` (or more)`}</small>\r\n                  </span>\r\n                  <span className=\"price-break__price\">\r\n                    {formatPriceBreakPrices(priceBreak)} {'  '}\r\n                  </span>\r\n                </div>\r\n                <div className=\"right-column\">\r\n                  <span className=\"savings\">\r\n                    Save up to{' '}\r\n                    {Math.floor(priceBreak.pricingInfo.savingsPercentage)}%\r\n                  </span>\r\n                </div>\r\n              </div>\r\n              <div className=\"product-total-savings price-break-container\">\r\n                {formatTotalOfferPrice(priceBreak)} {'  '}\r\n              </div>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n","import { FunctionComponent } from 'react';\r\nimport {\r\n  AlternativeProductViewModel,\r\n  AlternativeProductType\r\n} from '../types/generated';\r\nimport { TransactionalCurrency } from '../types/enums';\r\nimport formatCurrency from '../utilities/formatCurrency';\r\n\r\ninterface AlternativeProductPodProps {\r\n  alternativeProducts: AlternativeProductViewModel[] | null;\r\n  transactionalCurrency?: TransactionalCurrency;\r\n}\r\n\r\nconst AlternativeProductPod: FunctionComponent<AlternativeProductPodProps> = ({\r\n  transactionalCurrency,\r\n  alternativeProducts\r\n}) => {\r\n  if (!alternativeProducts) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div>\r\n      {alternativeProducts.map((product) => {\r\n        if (\r\n          product.alternativeProductType !== AlternativeProductType.classmates\r\n        ) {\r\n          return null;\r\n        }\r\n\r\n        return (\r\n          <section key={product.productId}>\r\n            <div className=\"pdp-classmates-alternative\">\r\n              <div className=\"pdp-classmates-alternative__header\">\r\n                <div className=\"pdp-classmates-alternative__logo\" />\r\n                <div className=\"pdp-classmates-alternative__saving\">\r\n                  Save{' '}\r\n                  <span className=\"pdp-classmates-alternative__saving-highlight\">\r\n                    {formatCurrency(\r\n                      product.savingsAmount,\r\n                      transactionalCurrency\r\n                    )}\r\n                  </span>{' '}\r\n                  by switching to Classmates\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"pdp-classmates-alternative__img\">\r\n                <img\r\n                  src={`${product.imageUrl}?width=320`}\r\n                  alt={product.name || ''}\r\n                />\r\n              </div>\r\n\r\n              <h3 className=\"pdp-classmates-alternative__title\">\r\n                {product.name}\r\n              </h3>\r\n              <div className=\"pdp-classmates-alternative__price\">\r\n                {formatCurrency(product.priceExcVat, transactionalCurrency)}{' '}\r\n                <span className=\"font-weight-normal\">ex VAT</span>\r\n              </div>\r\n              <div className=\"pdp-classmates-alternative__btn\">\r\n                <a\r\n                  href={product.urlPath || ''}\r\n                  className=\"btn btn--switch-item btn-block\"\r\n                >\r\n                  Switch Now\r\n                </a>\r\n              </div>\r\n            </div>\r\n            <div className=\"money-back\">\r\n              <div className=\"money-back__logo\">\r\n                <img\r\n                  src=\"/images/savings/money-back-guarantee.png\"\r\n                  alt=\"Money Back Guarantee\"\r\n                />\r\n              </div>\r\n              <div className=\"money-back__text\">\r\n                If you&apos;re not happy we&apos;ll give you your money back\r\n              </div>\r\n            </div>\r\n          </section>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default AlternativeProductPod;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;AAMA;;;;AAUA;AAKA;AAAA;AAAA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AAAA;AAKA;AAAA;AAAA;AALA;AADA;AADA;AAYA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAIA;AAAA;AAAA;AANA;AAaA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAGA;AAAA;AAAA;AALA;AAdA;AA0BA;AACA;AACA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AACA;AAGA;AACA;AAAA;AAAA;AAHA;AAKA;AAAA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AAAA;AAFA;AAIA;AAAA;AAAA;AALA;AASA;AAAA;AACA;AAAA;AAAA;AADA;AAVA;AAiBA;AAAA;AAAA;AAtBA;AADA;AADA;AADA;AAFA;AAoCA;;;;;;;;;;;;;;;;;;;;;;;AC/GA;AAKA;;;;AAOA;AAGA;AAAA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AAEA;AAAA;AAAA;AAFA;AAFA;AAcA;AAAA;AAEA;AACA;AAFA;AADA;AAOA;AAAA;AAAA;AAGA;AAAA;AAEA;AAAA;AAAA;AAFA;AAIA;AAAA;AAEA;AACA;AAFA;AAAA;AADA;AA7BA;AAsCA;AAAA;AACA;AAAA;AAEA;AACA;AAFA;AADA;AAMA;AAAA;AAAA;AAPA;AAvCA;AAoDA;AA7DA;AAgEA;AACA;AACA;;;;A","sourceRoot":""}