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

products-embed React component

import { Button, Grid, Hidden, Typography } from "@material-ui/core";
import { blue } from "@material-ui/core/colors";
import { makeStyles } from "@material-ui/styles";
import React, { useState } from "react";
import { useEmbedState } from "./hooks";
import ProductColumns from "./ProductColumns";
import ProductConfirm from "./ProductConfirm";
import ProductFeaturedPoint from "./ProductFeaturedPoint";
import ProductHeadingRow from "./ProductHeadingRow";
import ProductMoreInfo from "./ProductMoreInfo";
import ProductPrimaryButton from "./ProductPrimaryButton";

var useStyles = makeStyles(function (theme) {
  return {
    productWrapper: {
      opacity: function opacity(props) {
        return props.faded ? 0.6 : 1;
      },
      marginBottom: theme.spacing(6)
    },
    productBody: {
      backgroundColor: theme.palette.common.white,
      border: "1px solid " + theme.palette.grey[200]
    },
    productDescription: {
      width: "100%",
      borderTop: "1px solid " + theme.palette.grey[200],
      padding: theme.spacing(2)
    },
    productActionsColumn: {
      padding: theme.spacing(2, 4)
    },
    productMoreInfoButton: {
      padding: theme.spacing(0, 1),
      display: "flex",
      justifySelf: "center",
      textTransform: "lowercase",
      color: blue[800]
    },
    productApplyButton: {
      marginTop: theme.spacing(0.5),
      width: "100%"
    }
  };
});

var ProductWrapper = function ProductWrapper(_ref) {
  var highlighted = _ref.highlighted,
      labels = _ref.labels,
      title = _ref.title,
      links = _ref.links,
      brand = _ref.brand,
      columns = _ref.columns,
      description = _ref.description,
      featurePoint = _ref.featurePoint,
      detailed = _ref.detailed,
      disclaimer = _ref.disclaimer,
      meta = _ref.meta,
      product = _ref.product;

  var classes = useStyles({
    faded: meta.faded
  });

  var _useState = useState(false),
      withInfo = _useState[0],
      setWithInfo = _useState[1];

  var _useState2 = useState(false),
      withConfirmation = _useState2[0],
      setWithConfirmation = _useState2[1];

  var _useEmbedState = useEmbedState(),
      onMoreDetails = _useEmbedState.onMoreDetails,
      onApply = _useEmbedState.onApply,
      cta = _useEmbedState.cta;

  var handleMoreInfoClick = function handleMoreInfoClick() {
    if (onMoreDetails) {
      onMoreDetails(product, function () {
        setWithInfo(false);
      });
    }

    setWithInfo(true);
  };

  var handleApplyButtonClick = function handleApplyButtonClick(e) {
    if (onApply) {
      onApply(product);
    }

    if (meta.confirm) {
      e.preventDefault();
      setWithConfirmation(true);
    }
  };

  return React.createElement(
    "div",
    { className: classes.productWrapper },
    React.createElement(ProductHeadingRow, {
      logo: links.logo,
      brand: brand,
      highlighted: highlighted,
      title: title,
      labels: labels
    }),
    React.createElement(
      Grid,
      { className: classes.productBody, container: true, alignItems: "center" },
      React.createElement(ProductColumns, { columns: columns }),
      React.createElement(
        Grid,
        { className: classes.productActionsColumn, item: true, xs: 12, md: 3 },
        React.createElement(
          Grid,
          { container: true, justify: "center" },
          detailed.length > 0 && React.createElement(
            Button,
            {
              className: classes.productMoreInfoButton,
              variant: "text",
              onClick: handleMoreInfoClick
            },
            "more details"
          ),
          React.createElement(
            ProductPrimaryButton,
            {
              className: classes.productApplyButton,
              size: "large",
              href: links.apply,
              target: "_blank",
              rel: "noopener",
              onClick: handleApplyButtonClick
            },
            cta
          )
        )
      ),
      description && React.createElement(
        Hidden,
        {
          className: classes.productDescription,
          xsDown: true,
          implementation: "css"
        },
        React.createElement(
          Typography,
          { variant: "body2", color: "textSecondary" },
          description
        )
      )
    ),
    featurePoint && React.createElement(
      Grid,
      { container: true },
      React.createElement(ProductFeaturedPoint, { description: featurePoint })
    ),
    detailed.length > 0 && React.createElement(ProductMoreInfo, {
      open: withInfo,
      onClose: function onClose() {
        return setWithInfo(false);
      },
      title: title,
      links: links,
      brand: brand,
      description: description,
      detailed: detailed,
      disclaimer: disclaimer
    }),
    meta.confirm && React.createElement(ProductConfirm, {
      open: withConfirmation,
      handleRequestClose: function handleRequestClose() {
        return setWithConfirmation(false);
      },
      title: meta.confirm.heading,
      description: meta.confirm.description,
      forwardUrl: links.apply
    })
  );
};

export default ProductWrapper;