@b2bfinance/products-embed/lib/ProductList.js

products-embed React component

"use strict";

exports.__esModule = true;

var _core = require("@material-ui/core");

var _List = require("@material-ui/icons/List");

var _List2 = _interopRequireDefault(_List);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _hooks = require("./hooks");

var _ProductMask = require("./ProductMask");

var _ProductMask2 = _interopRequireDefault(_ProductMask);

var _ProductPrimaryButton = require("./ProductPrimaryButton");

var _ProductPrimaryButton2 = _interopRequireDefault(_ProductPrimaryButton);

var _ProductWrapper = require("./ProductWrapper");

var _ProductWrapper2 = _interopRequireDefault(_ProductWrapper);

var _utils = require("./utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    productListWrapper: {
      opacity: function opacity(props) {
        return props.loading ? 0.75 : 1;
      }
    },
    productListError: {
      backgroundColor: theme.palette.error.main,
      padding: theme.spacing(2),
      color: theme.palette.error.contrastText
    },
    productListEmptyWrapper: {
      margin: theme.spacing(10, 0),
      textAlign: "center"
    }
  };
});

var ProductListLoading = function ProductListLoading() {
  return _react2.default.createElement(
    _react2.default.Fragment,
    null,
    _react2.default.createElement(_ProductMask2.default, null),
    _react2.default.createElement(_ProductMask2.default, null),
    _react2.default.createElement(_ProductMask2.default, null),
    _react2.default.createElement(_ProductMask2.default, null),
    _react2.default.createElement(_ProductMask2.default, null)
  );
};

var ProductListError = function ProductListError(_ref) {
  var classes = _ref.classes;
  return _react2.default.createElement(
    _core.Typography,
    { className: classes.productListError },
    "There were errors getting the products for you. Please retry or come back later"
  );
};

var ProductListEmpty = function ProductListEmpty(_ref2) {
  var classes = _ref2.classes;

  var _useEmbedState = (0, _hooks.useEmbedState)(),
      filters = _useEmbedState.filters;

  var dispatchAction = (0, _hooks.useEmbedDispatch)();
  var hasFilters = filters.some(function (filter) {
    return filter.selected.length > 0;
  });

  var handleResetFilters = function handleResetFilters() {
    dispatchAction({
      type: _utils.FILTERS_RESET
    });
  };

  return _react2.default.createElement(
    _core.Grid,
    { className: classes.productListEmptyWrapper, container: true },
    _react2.default.createElement(
      _core.Grid,
      { item: true, xs: 12 },
      _react2.default.createElement(
        _core.Typography,
        { variant: "h1" },
        "No products found"
      )
    ),
    _react2.default.createElement(
      _core.Grid,
      { item: true, xs: 12 },
      _react2.default.createElement(
        _core.Typography,
        { color: "textSecondary", paragraph: true },
        "It looks like we couldn't find any products for you."
      )
    ),
    hasFilters && _react2.default.createElement(
      _core.Grid,
      { item: true, xs: 12 },
      _react2.default.createElement(
        _ProductPrimaryButton2.default,
        {
          color: "secondary",
          size: "large",
          onClick: handleResetFilters
        },
        "Reset Filters"
      )
    )
  );
};

var ProductList = function ProductList() {
  var _useEmbedState2 = (0, _hooks.useEmbedState)(),
      products = _useEmbedState2.products,
      productsLimit = _useEmbedState2.productsLimit,
      productsLoading = _useEmbedState2.productsLoading,
      productsError = _useEmbedState2.productsError;

  var dispatchAction = (0, _hooks.useEmbedDispatch)();

  // Fetch our products using the provider given in the
  // config options. Preloaded products will be used
  // if we have them with no filters have been set.
  (0, _hooks.useProductFetcherEffect)();

  var classes = useStyles({
    loading: productsLoading
  });

  var handleLoadMore = function handleLoadMore() {
    dispatchAction({
      type: _utils.PRODUCTS_INCREASE_LIMIT
    });
  };

  if (productsError) {
    return _react2.default.createElement(ProductListError, { classes: classes });
  }

  if (productsLoading && products.length === 0) {
    return _react2.default.createElement(ProductListLoading, null);
  }

  if (products.length === 0) {
    return _react2.default.createElement(ProductListEmpty, { classes: classes });
  }

  return _react2.default.createElement(
    "div",
    { className: classes.productListWrapper },
    products.slice(0, productsLimit).map(function (product, i) {
      return _react2.default.createElement(_ProductWrapper2.default, {
        key: product.id || i,
        highlighted: product.highlighted,
        labels: product.labels,
        title: product.title,
        links: product.links,
        brand: product.brand,
        columns: product.columns,
        description: product.description,
        featurePoint: product.feature_point,
        detailed: product.detailed,
        disclaimer: product.disclaimer,
        meta: product.meta,
        product: product
      });
    }),
    products.length > productsLimit && _react2.default.createElement(
      _core.Grid,
      { container: true, justify: "center" },
      _react2.default.createElement(
        _core.Grid,
        { item: true },
        _react2.default.createElement(
          _ProductPrimaryButton2.default,
          {
            variant: "contained",
            color: "secondary",
            onClick: handleLoadMore
          },
          "Load more"
        )
      )
    )
  );
};

exports.default = ProductList;
module.exports = exports["default"];