@lote-design-system/marketing-blocks/main/components/marketing/pricing/Pricing3.js

marketing blocks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Pricing3 = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _icons = require("@lote-design-system/icons");

var _core = require("@lote-design-system/core");

// => Dependent styled-components
// Our main component depends upon the following styled-components
var Pricing = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__Pricing",
  componentId: "ekfro2-0"
})([""]);

var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Pricing3__ContainerModify",
  componentId: "ekfro2-1"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});
var RowModify = (0, _styledComponents["default"])(_core.Row).withConfig({
  displayName: "Pricing3__RowModify",
  componentId: "ekfro2-2"
})(["", "{margin-right:0;margin-left:0;}"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.mediaQueries.lg;
});
var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Pricing3__ColumnModify",
  componentId: "ekfro2-3"
})(["", "{padding-right:0;padding-left:0;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.lg;
}); // Area A

var AreaA = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__AreaA",
  componentId: "ekfro2-4"
})(["background-color:#f8f8f8;padding-top:128px;padding-bottom:256px;"]); // PriceHeader


var PriceHeader = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__PriceHeader",
  componentId: "ekfro2-5"
})(["text-align:center;"]);

var PriceTitle = _styledComponents["default"].h1.withConfig({
  displayName: "Pricing3__PriceTitle",
  componentId: "ekfro2-6"
})(["font-size:40px;font-weight:700;color:", ";margin-bottom:8px;"], function (_ref4) {
  var colors = _ref4.theme.colors;
  return colors.text.title;
});

var PriceDescription = _styledComponents["default"].p.withConfig({
  displayName: "Pricing3__PriceDescription",
  componentId: "ekfro2-7"
})(["margin:0 auto;max-width:720px;font-size:16px;color:", ";"], function (_ref5) {
  var colors = _ref5.theme.colors;
  return colors.text.primary;
}); // -- End --
// Area B


var AreaB = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__AreaB",
  componentId: "ekfro2-8"
})(["background-color:#fff;padding-top:128px;padding-bottom:128px;"]);

var PriceBody = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__PriceBody",
  componentId: "ekfro2-9"
})(["border-radius:", ";box-shadow:", ";margin-top:-330px;margin-bottom:48px;"], function (props) {
  return props.theme.card.borderRadius;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.boxShadows.lg;
});

var PriceContent1 = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__PriceContent1",
  componentId: "ekfro2-10"
})(["height:100%;padding:32px 64px 32px 32px;background-color:#fff;border-top-right-radius:", ";border-top-left-radius:", ";", "{border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:0;border-bottom-right-radius:0;}"], function (props) {
  return props.theme.card.borderRadius;
}, function (props) {
  return props.theme.card.borderRadius;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.mediaQueries.lg;
}, function (props) {
  return props.theme.card.borderRadius;
}, function (props) {
  return props.theme.card.borderRadius;
});

var PriceContentHeading = _styledComponents["default"].h1.withConfig({
  displayName: "Pricing3__PriceContentHeading",
  componentId: "ekfro2-11"
})(["font-size:28px;font-weight:700;color:", ";margin-bottom:16px;"], function (_ref8) {
  var colors = _ref8.theme.colors;
  return colors.text.title;
});

var PriceContentDescription = _styledComponents["default"].p.withConfig({
  displayName: "Pricing3__PriceContentDescription",
  componentId: "ekfro2-12"
})(["margin-bottom:0;font-size:14px;color:", ";"], function (_ref9) {
  var colors = _ref9.theme.colors;
  return colors.text.primary;
});

var HorizontalDivider = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__HorizontalDivider",
  componentId: "ekfro2-13"
})(["margin:20px 0 32px;"]);

var PriceContentMotto = _styledComponents["default"].h6.withConfig({
  displayName: "Pricing3__PriceContentMotto",
  componentId: "ekfro2-14"
})(["margin-bottom:0;font-size:14px;font-weight:500;color:", ";display:flex;align-items:center;:after{content:'';flex:1 1;border-bottom:1px solid #f5f5f5;margin-left:8px;}"], function (_ref10) {
  var colors = _ref10.theme.colors;
  return colors.primary;
});

var PriceFeatures = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__PriceFeatures",
  componentId: "ekfro2-15"
})(["", "{display:flex;justify-content:space-between;}"], function (_ref11) {
  var theme = _ref11.theme;
  return theme.mediaQueries.lg;
});

var FeatureSet = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__FeatureSet",
  componentId: "ekfro2-16"
})([""]);

var Feature = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__Feature",
  componentId: "ekfro2-17"
})(["display:flex;align-items:center;margin-bottom:30px;"]);

var FeatureSvgWrapper = _styledComponents["default"].span.withConfig({
  displayName: "Pricing3__FeatureSvgWrapper",
  componentId: "ekfro2-18"
})(["color:#52c41a;margin-right:12px;> svg{width:24px;height:24px;}"]);

var FeatureText = _styledComponents["default"].span.withConfig({
  displayName: "Pricing3__FeatureText",
  componentId: "ekfro2-19"
})(["font-size:14px;color:", ";"], function (_ref12) {
  var colors = _ref12.theme.colors;
  return colors.text.primary;
});

var PriceContent2 = _styledComponents["default"].div.withConfig({
  displayName: "Pricing3__PriceContent2",
  componentId: "ekfro2-20"
})(["border-bottom-right-radius:", ";border-bottom-left-radius:", ";height:100%;padding:48px 32px;background-color:#f5f5f5;text-align:center;", "{border-bottom-right-radius:", ";border-top-right-radius:", ";border-top-left-radius:0;border-bottom-left-radius:0;}"], function (props) {
  return props.theme.card.borderRadius;
}, function (props) {
  return props.theme.card.borderRadius;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.mediaQueries.lg;
}, function (props) {
  return props.theme.card.borderRadius;
}, function (props) {
  return props.theme.card.borderRadius;
});

var PriceContentHeading2 = _styledComponents["default"].h1.withConfig({
  displayName: "Pricing3__PriceContentHeading2",
  componentId: "ekfro2-21"
})(["font-size:18px;font-weight:700;color:", ";margin-bottom:16px;"], function (_ref14) {
  var colors = _ref14.theme.colors;
  return colors.text.title;
});

var PriceContentTitle = _styledComponents["default"].h1.withConfig({
  displayName: "Pricing3__PriceContentTitle",
  componentId: "ekfro2-22"
})(["font-size:56px;font-weight:700;color:", ";margin-bottom:16px;display:flex;align-items:center;", " justify-content:center;> small{font-weight:400;margin-left:8px;font-size:16px;color:", ";}"], function (_ref15) {
  var colors = _ref15.theme.colors;
  return colors.text.title;
}, ''
/* text-align-center will not work */
, function (_ref16) {
  var colors = _ref16.theme.colors;
  return colors.text.primary;
});

var PriceContentLink = _styledComponents["default"].a.withConfig({
  displayName: "Pricing3__PriceContentLink",
  componentId: "ekfro2-23"
})(["font-size:14px;margin-bottom:16px;color:", ";display:block;text-decoration:underline;transition:color 0.4s linear;&:hover{color:", ";text-decoration:underline;}"], function (_ref17) {
  var colors = _ref17.theme.colors;
  return colors.text.primary;
}, function (_ref18) {
  var colors = _ref18.theme.colors;
  return colors.secondary;
});

var PriceContentButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Pricing3__PriceContentButton",
  componentId: "ekfro2-24"
})(["width:100%;display:block;box-shadow:", ";margin-bottom:16px;"], function (_ref19) {
  var theme = _ref19.theme;
  return theme.boxShadows.md;
});

var PriceContentText = _styledComponents["default"].p.withConfig({
  displayName: "Pricing3__PriceContentText",
  componentId: "ekfro2-25"
})(["font-size:14px;font-weight:500;color:", ";margin-bottom:0;"], function (_ref20) {
  var colors = _ref20.theme.colors;
  return colors.text.title;
}); // <= End Dependent styled-components


var setSchema = [{
  id: 1,
  name: 'set-1',
  features: [{
    id: 1,
    text: 'Self-paced and flexible scheduling',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check-circle"
    })
  }, {
    id: 2,
    text: 'Access to new beta features',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check-circle"
    })
  }]
}, {
  id: 2,
  name: 'set-2',
  features: [{
    id: 1,
    text: 'Interactive practice sessions',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check-circle"
    })
  }, {
    id: 2,
    text: 'Dedicated customer success team',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check-circle"
    })
  }]
}];
var planSchema = {
  id: 1,
  name: 'Lifetime Membership',
  description: 'We have a wide range of plans to fit your goals and budget. Check out a free trial to see what works for you and then pay monthly. It totally depends upon you.',
  separatorText: "WHAT'S INCLUDED",
  sets: setSchema,
  planTitle: 'Pay once, own it forever',
  currency: 'USD',
  currencySymbol: '$',
  price: '349',
  button: {
    text: 'Get Access',
    variation: 'fill',
    color: 'secondary'
  },
  policyLink: {
    href: '/',
    text: 'Learn about our membership policy.'
  },
  extra: /*#__PURE__*/_react["default"].createElement("span", null, "Get a free sample ", /*#__PURE__*/_react["default"].createElement("strong", null, "(20MB)"))
};

var idShape = _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired;

var linkShape = {
  text: _propTypes["default"].string.isRequired,
  href: _propTypes["default"].string.isRequired
};
var buttonShape = {
  text: _propTypes["default"].string.isRequired,
  variation: _propTypes["default"].string.isRequired,
  color: _propTypes["default"].string,
  href: _propTypes["default"].string
};
var featureShape = {
  id: idShape,
  text: _propTypes["default"].string.isRequired,
  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired
};
var setShape = {
  id: idShape,
  name: _propTypes["default"].string,
  features: _propTypes["default"].arrayOf(_propTypes["default"].shape(featureShape)).isRequired
};
var planShape = {
  id: idShape,
  name: _propTypes["default"].string.isRequired,
  description: _propTypes["default"].string.isRequired,
  separatorText: _propTypes["default"].string.isRequired,
  sets: _propTypes["default"].arrayOf(_propTypes["default"].shape(setShape)).isRequired,
  planTitle: _propTypes["default"].string.isRequired,
  currency: _propTypes["default"].string.isRequired,
  currencySymbol: _propTypes["default"].string.isRequired,
  price: _propTypes["default"].string.isRequired,
  button: _propTypes["default"].shape(buttonShape).isRequired,
  policyLink: _propTypes["default"].shape(linkShape),
  extra: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node])
};
var propTypes = {
  /** The text for the pricing section. */
  title: _propTypes["default"].string.isRequired,

  /** The sub text for the pricing section. */
  subText: _propTypes["default"].string.isRequired,

  /** Only 1 price plan can be included in this section UI. */
  plan: _propTypes["default"].shape(planShape).isRequired
};
var defaultProps = {
  title: 'Simple plan for professionals',
  subText: 'If you’re not satisfied, contact us within the first 14 days and we’ll send you a full refund.',
  plan: planSchema
};
/**
 * Returns the JSX or null for the icon.
 * @param icon {*} - The icon will React.element or a string
 * @return {null|*} - Returns the JSX or null
 */

var renderIcon = function renderIcon(icon) {
  if (_react["default"].isValidElement(icon)) {
    return icon;
  } else if (typeof icon === 'string' && icon.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: icon
    });
  } else {
    return null;
  }
};

var Pricing3 = function Pricing3(props) {
  var title = props.title,
      subText = props.subText,
      plan = props.plan,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["title", "subText", "plan"]);
  return /*#__PURE__*/_react["default"].createElement(Pricing, attributes, /*#__PURE__*/_react["default"].createElement(AreaA, null, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(PriceHeader, null, /*#__PURE__*/_react["default"].createElement(PriceTitle, null, title), /*#__PURE__*/_react["default"].createElement(PriceDescription, null, subText)))), /*#__PURE__*/_react["default"].createElement(AreaB, null, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, plan ? /*#__PURE__*/_react["default"].createElement(PriceBody, null, /*#__PURE__*/_react["default"].createElement(RowModify, null, /*#__PURE__*/_react["default"].createElement(ColumnModify, {
    lg: 9
  }, /*#__PURE__*/_react["default"].createElement(PriceContent1, null, /*#__PURE__*/_react["default"].createElement(PriceContentHeading, null, plan.name), /*#__PURE__*/_react["default"].createElement(PriceContentDescription, null, plan.description), /*#__PURE__*/_react["default"].createElement(HorizontalDivider, null, /*#__PURE__*/_react["default"].createElement(PriceContentMotto, null, plan.separatorText)), Array.isArray(plan.sets) && plan.sets.length > 0 ? /*#__PURE__*/_react["default"].createElement(PriceFeatures, null, plan.sets.map(function (set) {
    return /*#__PURE__*/_react["default"].createElement(FeatureSet, {
      key: set.id
    }, Array.isArray(set.features) && set.features.length > 0 ? set.features.map(function (feature) {
      return /*#__PURE__*/_react["default"].createElement(Feature, {
        key: feature.id
      }, /*#__PURE__*/_react["default"].createElement(FeatureSvgWrapper, null, renderIcon(feature.icon)), /*#__PURE__*/_react["default"].createElement(FeatureText, null, feature.text));
    }) : null);
  })) : null)), /*#__PURE__*/_react["default"].createElement(ColumnModify, {
    lg: 3
  }, /*#__PURE__*/_react["default"].createElement(PriceContent2, null, /*#__PURE__*/_react["default"].createElement(PriceContentHeading2, null, plan.planTitle), /*#__PURE__*/_react["default"].createElement(PriceContentTitle, null, plan.currencySymbol, plan.price, /*#__PURE__*/_react["default"].createElement("small", null, plan.currency)), plan.policyLink ? /*#__PURE__*/_react["default"].createElement(PriceContentLink, {
    href: plan.policyLink.href
  }, plan.policyLink.text) : null, plan.button ? /*#__PURE__*/_react["default"].createElement(PriceContentButton, {
    href: plan.button.href,
    color: plan.button.color,
    variation: plan.button.variation
  }, plan.button.text) : null, plan.extra ? /*#__PURE__*/_react["default"].createElement(PriceContentText, null, plan.extra) : null)))) : null)));
};

exports.Pricing3 = Pricing3;
Pricing3.propTypes = propTypes;
Pricing3.defaultProps = defaultProps;