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

products-embed React component

"use strict";

exports.__esModule = true;

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

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

var _styles = require("@material-ui/styles");

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _ProductColumns = require("./ProductColumns");

var _ProductColumns2 = _interopRequireDefault(_ProductColumns);

var _ProductConfirm = require("./ProductConfirm");

var _ProductConfirm2 = _interopRequireDefault(_ProductConfirm);

var _ProductFeaturedPoint = require("./ProductFeaturedPoint");

var _ProductFeaturedPoint2 = _interopRequireDefault(_ProductFeaturedPoint);

var _ProductHeadingRow = require("./ProductHeadingRow");

var _ProductHeadingRow2 = _interopRequireDefault(_ProductHeadingRow);

var _ProductMoreInfo = require("./ProductMoreInfo");

var _ProductMoreInfo2 = _interopRequireDefault(_ProductMoreInfo);

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

var _ProductPrimaryButton2 = _interopRequireDefault(_ProductPrimaryButton);

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

var useStyles = (0, _styles.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: _colors.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 = (0, _react.useState)(false),
      withInfo = _useState[0],
      setWithInfo = _useState[1];

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

  var _useEmbedState = (0, _hooks.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 _react2.default.createElement(
    "div",
    { className: classes.productWrapper },
    _react2.default.createElement(_ProductHeadingRow2.default, {
      logo: links.logo,
      brand: brand,
      highlighted: highlighted,
      title: title,
      labels: labels
    }),
    _react2.default.createElement(
      _core.Grid,
      { className: classes.productBody, container: true, alignItems: "center" },
      _react2.default.createElement(_ProductColumns2.default, { columns: columns }),
      _react2.default.createElement(
        _core.Grid,
        { className: classes.productActionsColumn, item: true, xs: 12, md: 3 },
        _react2.default.createElement(
          _core.Grid,
          { container: true, justify: "center" },
          detailed.length > 0 && _react2.default.createElement(
            _core.Button,
            {
              className: classes.productMoreInfoButton,
              variant: "text",
              onClick: handleMoreInfoClick
            },
            "more details"
          ),
          _react2.default.createElement(
            _ProductPrimaryButton2.default,
            {
              className: classes.productApplyButton,
              size: "large",
              href: links.apply,
              target: "_blank",
              rel: "noopener",
              onClick: handleApplyButtonClick
            },
            cta
          )
        )
      ),
      description && _react2.default.createElement(
        _core.Hidden,
        {
          className: classes.productDescription,
          xsDown: true,
          implementation: "css"
        },
        _react2.default.createElement(
          _core.Typography,
          { variant: "body2", color: "textSecondary" },
          description
        )
      )
    ),
    featurePoint && _react2.default.createElement(
      _core.Grid,
      { container: true },
      _react2.default.createElement(_ProductFeaturedPoint2.default, { description: featurePoint })
    ),
    detailed.length > 0 && _react2.default.createElement(_ProductMoreInfo2.default, {
      open: withInfo,
      onClose: function onClose() {
        return setWithInfo(false);
      },
      title: title,
      links: links,
      brand: brand,
      description: description,
      detailed: detailed,
      disclaimer: disclaimer
    }),
    meta.confirm && _react2.default.createElement(_ProductConfirm2.default, {
      open: withConfirmation,
      handleRequestClose: function handleRequestClose() {
        return setWithConfirmation(false);
      },
      title: meta.confirm.heading,
      description: meta.confirm.description,
      forwardUrl: links.apply
    })
  );
};

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