@findify/react-components/lib/components/Cards/Product/index.js

Findify react UI components

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

/**
 * @module components/Cards/Product
 */
import cx from 'classnames';
import Image from "../../common/Image";
import Rating from "./Rating";
import Price from "./Price";
import Title from "./Title";
import Description from "./Description";
import Variants from "./Variants";
var styles = {
  "root": "findify-components--cards--product",
  "vertical": "findify-components--cards--product__vertical",
  "horizontal": "findify-components--cards--product__horizontal",
  "autocomplete": "findify-components--cards--product__autocomplete",
  "highlighted": "findify-components--cards--product__highlighted",
  "content": "findify-components--cards--product__content",
  "image": "findify-components--cards--product__image",
  "divider": "findify-components--cards--product__divider",
  "title": "findify-components--cards--product__title",
  "title-link": "findify-components--cards--product__title-link",
  "description": "findify-components--cards--product__description",
  "rating": "findify-components--cards--product__rating",
  "color": "findify-components--cards--product__color",
  "out-of-stock": "findify-components--cards--product__out-of-stock",
  "discount-sticker": "findify-components--cards--product__discount-sticker",
  "variants": "findify-components--cards--product__variants",
  "titleLink": "findify-components--cards--product__title-link",
  "outOfStock": "findify-components--cards--product__out-of-stock",
  "discountSticker": "findify-components--cards--product__discount-sticker"
};
import { DiscountSticker, OutOfStockSticker } from "./Stickers";
import { List } from 'immutable';
import trackProductPosition from "../../../helpers/trackProductPosition";
import { useMemo, useState } from 'react';
import useScrollBackToProduct from "../../../helpers/useScrollBackToProduct";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

var useVariants = function useVariants(item) {
  var _useState = useState(item.get('selected_variant_id')),
      _useState2 = _slicedToArray(_useState, 2),
      currentVariant = _useState2[0],
      setVariant = _useState2[1];

  var variant = useMemo(function () {
    var _item$get;

    return item.merge((_item$get = item.get('variants')) === null || _item$get === void 0 ? void 0 : _item$get.find(function (i) {
      return i.get('id') === currentVariant;
    }));
  }, [currentVariant]);
  return [variant, setVariant];
};

export default (function (_ref) {
  var item = _ref.item,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      className = _ref.className,
      config = _ref.config,
      highlighted = _ref.highlighted,
      isAutocomplete = _ref.isAutocomplete,
      isSearch = _ref.isSearch;
  var container = trackProductPosition(item);

  var _useVariants = useVariants(item),
      _useVariants2 = _slicedToArray(_useVariants, 2),
      variant = _useVariants2[0],
      setVariant = _useVariants2[1];

  useScrollBackToProduct(container, variant, isSearch);
  return /*#__PURE__*/_jsxs("a", {
    ref: container,
    "data-element": "card",
    className: cx(theme.root, theme[config.get('template')], highlighted && theme.highlighted, isAutocomplete && theme.autocomplete, className),
    href: item.get('product_url'),
    onClick: function onClick(e) {
      return item.onClick(e, isSearch);
    },
    children: [/*#__PURE__*/_jsxs("div", {
      className: theme.content,
      children: [!!variant.getIn(['reviews', 'count']) || !!variant.getIn(['reviews', 'total_reviews']) ? /*#__PURE__*/_jsx(Rating, {
        className: theme.rating,
        value: variant.getIn(['reviews', 'average_score']),
        count: variant.getIn(['reviews', 'count']) || variant.getIn(['reviews', 'total_reviews'])
      }) : null, /*#__PURE__*/_jsx(Variants, {
        config: config,
        item: item
      }), !!variant.get('title') ? /*#__PURE__*/_jsx(Title, {
        theme: theme,
        text: variant.get('title')
      }) : null, !!variant.get('description') ? /*#__PURE__*/_jsx(Description, {
        theme: theme,
        text: variant.get('description')
      }) : null, /*#__PURE__*/_jsx("div", {
        className: theme.divider
      }), !!variant.get('price') ? /*#__PURE__*/_jsx(Price, {
        className: theme.priceWrapper,
        item: item
      }) : null, variant.getIn(['stickers', 'out-of-stock']) ? /*#__PURE__*/_jsx(OutOfStockSticker, {
        config: config
      }) : null]
    }), /*#__PURE__*/_jsxs("div", {
      className: theme.image,
      children: [/*#__PURE__*/_jsx(Image, {
        aspectRatio: config.getIn(['image', 'aspectRatio']),
        alt: variant.get('title'),
        lazy: !isAutocomplete && config.getIn(['image', 'lazy']),
        src: config.getIn(['image', 'multiple']) ? [variant.get('image_url'), variant.get('image_2_url')] : variant.get('image_url') || variant.get('thumbnail_url')
      }), config.getIn(['stickers', 'discount']) && variant.get('discount', List()).size && variant.getIn(['stickers', 'discount']) ? /*#__PURE__*/_jsx(DiscountSticker, {
        config: config,
        className: theme.discountSticker,
        discount: variant.get('discount')
      }) : null]
    })]
  });
});