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

products-embed React component

import { Grid, makeStyles, Typography } from "@material-ui/core";
import ListIcon from "@material-ui/icons/List";
import React from "react";
import { useEmbedDispatch, useEmbedState, useProductFetcherEffect } from "./hooks";
import ProductMask from "./ProductMask";
import ProductPrimaryButton from "./ProductPrimaryButton";
import ProductWrapper from "./ProductWrapper";
import { PRODUCTS_INCREASE_LIMIT, FILTERS_RESET } from "./utils";

var useStyles = 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 React.createElement(
    React.Fragment,
    null,
    React.createElement(ProductMask, null),
    React.createElement(ProductMask, null),
    React.createElement(ProductMask, null),
    React.createElement(ProductMask, null),
    React.createElement(ProductMask, null)
  );
};

var ProductListError = function ProductListError(_ref) {
  var classes = _ref.classes;
  return React.createElement(
    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 = useEmbedState(),
      filters = _useEmbedState.filters;

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

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

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

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

  var dispatchAction = 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.
  useProductFetcherEffect();

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

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

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

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

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

  return React.createElement(
    "div",
    { className: classes.productListWrapper },
    products.slice(0, productsLimit).map(function (product, i) {
      return React.createElement(ProductWrapper, {
        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 && React.createElement(
      Grid,
      { container: true, justify: "center" },
      React.createElement(
        Grid,
        { item: true },
        React.createElement(
          ProductPrimaryButton,
          {
            variant: "contained",
            color: "secondary",
            onClick: handleLoadMore
          },
          "Load more"
        )
      )
    )
  );
};

export default ProductList;