{"version":3,"file":"cross-sell-collection-76dcabb5.js","sources":["../../../client/src/javascripts/customer_pages/_grouped-category/price.jsx","../../../client/src/javascripts/customer_pages/_grouped-category/_common/cross-sell/cross-sell-collection-slide.jsx","../../../client/src/javascripts/customer_pages/_grouped-category/_common/cross-sell/cross-sell-collection.jsx"],"sourcesContent":["'use strict';\n\n// Import Libraries\nimport React from 'react';\n// Import JS Modules\nimport Currency     from '../_utils/tools/currency';\nimport DisplayPrice from '../_utils/display-price';\n\nconst Price = ({now, was, includeFrom, displayWas}) => {\n  return (\n    <div>\n      <DisplayPrice price={now}\n                    includeFrom={includeFrom} />\n      {renderWasPriceSection()}\n    </div>\n  );\n\n  function renderWasPriceSection() {\n    if (displayWas && was) {\n      return (\n        <span className='was-price'>\n          {Currency.format(was)}\n        </span>\n      );\n    }\n  }\n};\n\nexport default Price;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport debounce from 'lodash/debounce';\nimport classNames from 'classnames';\nimport Price from '../../price';\n\nconst addToCartUrl = '/add-to-cart';\n\nclass CrossSellCollectionSlide extends React.Component {\n  handleAddToCart = debounce(async () => {\n    const { item } = this.props;\n    const { productThemeId, handleResponseMessage } = this.state;\n    const formData = new FormData();\n\n    formData.append('prism_product_id', item.product_id);\n    formData.append('theme', item.theme_id);\n    formData.append('copies', 1);\n\n    this.setState({ requestInProgress: productThemeId });\n    const response =\n      (await this.fetchRequest(addToCartUrl, formData, 'POST')) || [];\n\n    if (response.error) {\n      this.setState({ requestInProgress: undefined });\n      return handleResponseMessage(response.error);\n    }\n\n    /* eslint-disable no-undef */\n    const itemsInCart = App.order.no_items;\n    App.order.setProperties({ no_items: itemsInCart + 1 }); // update cart\n    /* eslint-enable no-undef */\n\n    if (window.country_name === 'US') {\n      window.ga('set', 'utm_source', window.store);\n      window.ga('set', 'utm_medium', 'recommendation');\n      window.ga('set', 'utm_campaign', 'upsell_cross_sell');\n      window.ga(\n        'send',\n        'event',\n        'Recommendation',\n        'AddToCart',\n        'Cross sell OR Upsell',\n        item.title\n      );\n    }\n\n    this.setState(prevState => {\n      const { productsAddedToCart } = prevState;\n      productsAddedToCart[productThemeId] = response.prism_id;\n\n      return {\n        productsAddedToCart,\n        requestInProgress: undefined,\n      };\n    });\n\n    return handleResponseMessage(response.success);\n  }, 700);\n\n  handleRemoveFromCart = debounce(async () => {\n    const {\n      productThemeId,\n      productsAddedToCart,\n      handleResponseMessage,\n    } = this.state;\n    const prismId = productsAddedToCart[productThemeId];\n    const formData = new FormData();\n\n    formData.append('soft', false);\n\n    this.setState({ requestInProgress: productThemeId });\n    const response =\n      (await this.fetchRequest(\n        `${addToCartUrl}/${prismId}`,\n        formData,\n        'DELETE'\n      )) || [];\n\n    if (response.error) {\n      this.setState({ requestInProgress: undefined, productsAddedToCart: {} });\n      return handleResponseMessage(response.error);\n    }\n\n    /* eslint-disable no-undef */\n    const itemsInCart = App.order.no_items;\n    App.order.setProperties({ no_items: itemsInCart - 1 }); // update cart\n    /* eslint-enable no-undef */\n\n    this.setState(prevState => {\n      const { productsAddedToCart: prevProductsAddedToCart } = prevState;\n      delete prevProductsAddedToCart[productThemeId];\n\n      return {\n        prevProductsAddedToCart,\n        requestInProgress: undefined,\n      };\n    });\n\n    return handleResponseMessage(undefined);\n  }, 700);\n\n  constructor(props) {\n    super(props);\n\n    const { item } = this.props;\n\n    this.state = {\n      productThemeId: `${item.product_id}_${item.theme_id}`,\n      productsAddedToCart: {},\n      requestInProgress: undefined,\n      handleResponseMessage: props.handleResponseMessage,\n    };\n  }\n\n  fetchRequest = async (url, formData, method) => {\n    const response = await fetch(url, {\n      method,\n      body: formData,\n      credentials: 'same-origin',\n    });\n\n    if (!response.ok) {\n      throw new Error(response.statusText);\n    }\n\n    return response.json();\n  };\n\n  inCart = () => {\n    const { productThemeId, productsAddedToCart } = this.state;\n\n    return Object.keys(productsAddedToCart).includes(productThemeId.toString());\n  };\n\n  renderAddToCartButton = () => {\n    const { item } = this.props;\n    const { requestInProgress } = this.state;\n\n    if (this.inCart()) {\n      return (\n        <button\n          type=\"button\"\n          className={classNames(\n            'btn btn-outline-dark carousel-added-to-cart-button',\n            { 'bg-light btn-progress': requestInProgress }\n          )}\n          disabled={requestInProgress}\n          onClick={() => {\n            this.handleRemoveFromCart(item);\n          }}>\n          {this.renderButtonContent(requestInProgress, 'Added')}\n        </button>\n      );\n    }\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          'btn btn-outline-dark carousel-add-to-cart-button',\n          { 'bg-light btn-progress': requestInProgress }\n        )}\n        disabled={requestInProgress}\n        onClick={() => {\n          this.handleAddToCart(item);\n        }}>\n        {this.renderButtonContent(requestInProgress, 'Add to cart')}\n      </button>\n    );\n  };\n\n  renderButtonContent = (requestInProgress, text) => {\n    if (requestInProgress) {\n      // render Spinner\n      return (\n        <b\n          className=\"btn-progress-spinner cross-sell\"\n          style={{ width: '40px', height: '40px' }}>\n          <b className=\"btn-progress-spinner-icon\" />\n        </b>\n      );\n    }\n\n    return text;\n  };\n\n  render() {\n    const { item } = this.props;\n\n    return (\n      <div className=\"border-0 card cross-sell-collection-item d-flex flex-column shadow-none\">\n        <div className=\"card-image thumbnail\">\n          <div className=\"product-image pb-2\">\n            <img\n              className=\"image-fluid m-auto\"\n              src={item.thumbnails[0]}\n              alt={item.title}\n            />\n          </div>\n        </div>\n        <div className=\"align-content-end card-body p-1\">\n          <div className=\"cross-sell-product-info d-flex flex-column text-left mb-3\">\n            <strong className=\"row m-0\">\n              <span>{item.theme_title}</span>\n            </strong>\n            <span>{item.title}</span>\n            <strong>\n              <Price now={item.unit_prices[0].price} />\n            </strong>\n          </div>\n          <div>{this.renderAddToCartButton()}</div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default CrossSellCollectionSlide;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Carousel from '../../../_common/carousel';\nimport CrossSellCollectionSlide from './cross-sell-collection-slide';\n\nclass CrossSellCollection extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      responseMessage: undefined,\n    };\n  }\n\n  renderSlides = () => {\n    const { collection } = this.props;\n\n    return collection.map(item => {\n      const {\n        collection_id: collectionId,\n        product_id: productId,\n        theme_id: themeId,\n      } = item;\n\n      const key = `collectionSlide_${collectionId}_${productId}_${themeId}`;\n\n      return (\n        <CrossSellCollectionSlide\n          key={key}\n          item={item}\n          handleResponseMessage={this.handleResponseMessage}\n        />\n      );\n    });\n  };\n\n  handleResponseMessage = message => {\n    this.setState({ responseMessage: message });\n  };\n\n  render() {\n    const { responseMessage } = this.state;\n    const { id, slidesToShow } = this.props;\n    const slickSettings = {\n      // generic settings\n      arrows: true,\n      infinite: true,\n      speed: 300,\n      dots: true,\n\n      // xl - wide desktops\n      slidesToShow: slidesToShow || 3,\n      slidesToScroll: slidesToShow || 3,\n\n      responsive: [\n        {\n          // lg - desktops\n          breakpoint: 1200,\n          settings: {\n            slidesToShow: 3,\n            slidesToScroll: 3,\n          },\n        },\n        {\n          // md - tablets\n          breakpoint: 992,\n          settings: {\n            slidesToShow: 2,\n            slidesToScroll: 2,\n            arrows: false,\n          },\n        },\n        {\n          // sm - new phones\n          breakpoint: 768,\n          settings: {\n            slidesToShow: 2,\n            slidesToScroll: 2,\n            arrows: false,\n          },\n        },\n        {\n          // xs - old phones\n          breakpoint: 576,\n          settings: {\n            slidesToShow: 2,\n            slidesToScroll: 2,\n            arrows: false,\n          },\n        },\n      ],\n    };\n\n    return (\n      <div className=\"cross-sell-collection\">\n        <div className=\"mb-2\">\n          <span className=\"cross-sell-collection-header\">\n            You might also like\n          </span>\n        </div>\n        <Carousel\n          id={id}\n          slickSettings={slickSettings}\n          responseMessage={responseMessage}>\n          {this.renderSlides()}\n        </Carousel>\n      </div>\n    );\n  }\n}\n\nCrossSellCollection.propTypes = {\n  collection: PropTypes.arrayOf(\n    PropTypes.shape({\n      design_code: PropTypes.string,\n      product_id: PropTypes.number,\n      theme_id: PropTypes.number,\n      thumbnails: PropTypes.arrayOf(PropTypes.string),\n      title: PropTypes.string,\n      unit_prices: PropTypes.arrayOf(\n        PropTypes.shape({ from: PropTypes.number, price: PropTypes.number })\n      ),\n    })\n  ).isRequired,\n  id: PropTypes.string.isRequired,\n  slidesToShow: PropTypes.number.isRequired,\n};\n\nexport default CrossSellCollection;\n"],"names":["Price","now","was","includeFrom","displayWas","React","DisplayPrice","renderWasPriceSection","Currency","addToCartUrl","CrossSellCollectionSlide","props","__publicField","debounce","item","productThemeId","handleResponseMessage","formData","response","itemsInCart","prevState","productsAddedToCart","prismId","prevProductsAddedToCart","url","method","requestInProgress","classNames","text","CrossSellCollection","collection","collectionId","productId","themeId","key","message","responseMessage","id","slidesToShow","slickSettings","Carousel","PropTypes"],"mappings":"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"}