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

marketing blocks

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

var _styledComponents = _interopRequireWildcard(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: "Pricing4__Pricing",
  componentId: "sc-16tltp4-0"
})([""]);

var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Pricing4__ContainerModify",
  componentId: "sc-16tltp4-1"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});
var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Pricing4__ColumnModify",
  componentId: "sc-16tltp4-2"
})(["margin-bottom:64px;"]); // AreaA

var AreaA = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__AreaA",
  componentId: "sc-16tltp4-3"
})(["background-color:", ";padding-top:128px;padding-bottom:256px;"], function (_ref2) {
  var colors = _ref2.theme.colors;
  return colors.text.title;
}); // Header


var PriceHeader = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__PriceHeader",
  componentId: "sc-16tltp4-4"
})(["text-align:center;"]);

var PriceSubtitle = _styledComponents["default"].h4.withConfig({
  displayName: "Pricing4__PriceSubtitle",
  componentId: "sc-16tltp4-5"
})(["font-size:20px;color:#fff;font-weight:400;margin-bottom:4px;"]);

var PriceUpperTitle = _styledComponents["default"].h1.withConfig({
  displayName: "Pricing4__PriceUpperTitle",
  componentId: "sc-16tltp4-6"
})(["font-size:40px;font-weight:700;color:#fff;margin-bottom:8px;"]);

var PriceDescription = _styledComponents["default"].p.withConfig({
  displayName: "Pricing4__PriceDescription",
  componentId: "sc-16tltp4-7"
})(["margin:0 auto;max-width:720px;font-size:16px;color:rgba(255,255,255,0.85);"]); // -- End --
// AreaB


var AreaB = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__AreaB",
  componentId: "sc-16tltp4-8"
})(["background-color:#fdfdfd;padding-top:128px;padding-bottom:128px;"]); // Body


var PriceBody = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__PriceBody",
  componentId: "sc-16tltp4-9"
})(["margin-top:-300px;", "{padding:0 32px;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.md;
}); // Card


var Card = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__Card",
  componentId: "sc-16tltp4-10"
})(["background-color:#fff;box-shadow:", ";height:100%;border-radius:", ";"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.boxShadows.md;
}, function (props) {
  return props.theme.card.borderRadius;
}); // CardHeader


var CardHeader = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__CardHeader",
  componentId: "sc-16tltp4-11"
})(["border-top-left-radius:", ";border-top-right-radius:", ";padding:32px;background-color:#fff;"], function (props) {
  return props.theme.card.borderRadius;
}, function (props) {
  return props.theme.card.borderRadius;
});

var Badge = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__Badge",
  componentId: "sc-16tltp4-12"
})(["margin-bottom:16px;"]);

var BadgeText = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__BadgeText",
  componentId: "sc-16tltp4-13"
})(["display:inline-flex;flex-direction:column;padding:8px 24px;font-size:14px;font-weight:500;border-radius:9999px;color:#722ed1;background-color:#f9f0ff;"]);

var PriceTitle = _styledComponents["default"].h1.withConfig({
  displayName: "Pricing4__PriceTitle",
  componentId: "sc-16tltp4-14"
})(["font-size:64px;font-weight:700;color:", ";margin-bottom:16px;> small{font-weight:400;font-size:16px;color:", ";margin-left:4px;margin-bottom:0;}"], function (_ref5) {
  var colors = _ref5.theme.colors;
  return colors.text.title;
}, function (_ref6) {
  var colors = _ref6.theme.colors;
  return colors.text.primary;
});

var CardText = _styledComponents["default"].p.withConfig({
  displayName: "Pricing4__CardText",
  componentId: "sc-16tltp4-15"
})(["font-size:14px;color:", ";margin-bottom:0;"], function (_ref7) {
  var colors = _ref7.theme.colors;
  return colors.text.primary;
}); // CardFooter


var CardFooter = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__CardFooter",
  componentId: "sc-16tltp4-16"
})(["padding:32px;background-color:#f5f5f5;border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], function (props) {
  return props.theme.card.borderRadius;
}, function (props) {
  return props.theme.card.borderRadius;
}); // FeatureList


var FeatureList = _styledComponents["default"].ul.withConfig({
  displayName: "Pricing4__FeatureList",
  componentId: "sc-16tltp4-17"
})(["display:flex;flex-direction:column;padding-left:0;margin-bottom:30px;> li{list-style:none;&:not(:last-child){margin-bottom:24px;}}"]); // Feature


var Feature = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__Feature",
  componentId: "sc-16tltp4-18"
})(["display:flex;align-items:center;"]);

var FeatureSvgWrapper = _styledComponents["default"].span.withConfig({
  displayName: "Pricing4__FeatureSvgWrapper",
  componentId: "sc-16tltp4-19"
})(["color:#389e0d;margin-right:12px;> svg{width:24px;height:24px;}"]);

var FeatureText = _styledComponents["default"].span.withConfig({
  displayName: "Pricing4__FeatureText",
  componentId: "sc-16tltp4-20"
})(["font-size:14px;color:", ";"], function (_ref8) {
  var colors = _ref8.theme.colors;
  return colors.text.primary;
});

var CardButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Pricing4__CardButton",
  componentId: "sc-16tltp4-21"
})(["box-shadow:", ";width:100%;display:block;"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.boxShadows.md;
}); // -- End --
// Cta

var Cta = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__Cta",
  componentId: "sc-16tltp4-22"
})(["background-color:#f9f9f9;padding:32px;border-radius:", ";", "{display:flex;align-items:center;justify-content:space-between;}"], function (props) {
  return props.theme.card.borderRadius;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.mediaQueries.xl;
});

var CtaBadge = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__CtaBadge",
  componentId: "sc-16tltp4-23"
})(["margin-bottom:16px;"]);

var CtaBadgeText = _styledComponents["default"].div.withConfig({
  displayName: "Pricing4__CtaBadgeText",
  componentId: "sc-16tltp4-24"
})(["display:inline-flex;flex-direction:column;padding:8px 22px;font-size:14px;font-weight:500;border-radius:9999px;color:", ";background-color:#fff;"], function (_ref11) {
  var colors = _ref11.theme.colors;
  return colors.secondary;
});

var CtaText = _styledComponents["default"].p.withConfig({
  displayName: "Pricing4__CtaText",
  componentId: "sc-16tltp4-25"
})(["max-width:720px;color:", ";font-size:16px;margin-bottom:16px;", "{margin-bottom:0;}"], function (_ref12) {
  var colors = _ref12.theme.colors;
  return colors.text.primary;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.mediaQueries.xl;
});

var CtaLink = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Pricing4__CtaLink",
  componentId: "sc-16tltp4-26"
})(["font-weight:500;box-shadow:", ";"], function (_ref14) {
  var theme = _ref14.theme;
  return theme.boxShadows.md;
}); // -- End --
// <= End Dependent styled-components

var packageSchema = [{
  id: 1,
  badgeText: 'STANDARD',
  currency: '$',
  price: '49',
  expireCode: 'mo',
  description: 'We have a wide range of plans to fit your goals and budget. Check out a free trial to see and contact us.',
  features: [{
    id: 1,
    text: 'Self-paced and flexible scheduling',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check"
    })
  }, {
    id: 2,
    text: 'Interactive practice sessions',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check"
    })
  }, {
    id: 3,
    text: 'Access to new beta features',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check"
    })
  }, {
    id: 4,
    text: 'Dedicated customer success team',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check"
    })
  }],
  button: {
    text: 'Get Started',
    variation: 'fill',
    color: 'secondary'
  }
}, {
  id: 2,
  badgeText: 'ENTERPRISE',
  currency: '$',
  price: '79',
  expireCode: 'mo',
  description: 'We have a wide range of plans to fit your goals and budget. Check out a free trial to see and contact us.',
  features: [{
    id: 1,
    text: 'Self-paced and flexible scheduling',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check"
    })
  }, {
    id: 2,
    text: 'Interactive practice sessions',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check"
    })
  }, {
    id: 3,
    text: 'Access to new beta features',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check"
    })
  }, {
    id: 4,
    text: 'Dedicated customer success team',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "check"
    })
  }],
  button: {
    text: 'Get Started',
    variation: 'fill',
    color: 'secondary'
  }
}];

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

var linkShape = {
  href: _propTypes["default"].string.isRequired,
  text: _propTypes["default"].string.isRequired,
  variation: _propTypes["default"].string.isRequired,
  color: _propTypes["default"].string
};
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 packageShape = {
  id: idShape,
  badgeText: _propTypes["default"].string.isRequired,
  currency: _propTypes["default"].string.isRequired,
  price: _propTypes["default"].string.isRequired,
  expireCode: _propTypes["default"].string.isRequired,
  description: _propTypes["default"].string.isRequired,
  features: _propTypes["default"].arrayOf(_propTypes["default"].shape(featureShape)).isRequired,
  button: _propTypes["default"].shape(buttonShape).isRequired
};
var ctaShape = {
  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
  badgeText: _propTypes["default"].string,
  link: _propTypes["default"].shape(linkShape)
};
var propTypes = {
  /** The subtitle for the pricing section. */
  subtitle: _propTypes["default"].string.isRequired,

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

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

  /** Only 2 price plan can be included in this section UI. */
  packages: _propTypes["default"].arrayOf(_propTypes["default"].shape(packageShape)).isRequired,

  /** The CTA container will appear below the price section. */
  cta: _propTypes["default"].shape(ctaShape)
};
var defaultProps = {
  subtitle: 'PRICING PLANS',
  majorText: 'The right price for you, whoever you are',
  minorText: 'If you’re not satisfied, contact us within the first 14 days and we’ll email you.',
  packages: packageSchema,
  cta: {
    text: /*#__PURE__*/_react["default"].createElement("span", null, "Get a full access to all of standard license features and much more for solo projects that make less than $20k gross revenue for", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, "$29"), "."),
    badgeText: 'DISCOUNTED',
    link: {
      href: '/',
      text: 'Buy Discounted License',
      variation: 'white'
    }
  }
};
/**
 * 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;
  }
};
/**
 * It will render the packages of your schema.
 * @param data {Array} - An array of packages schema.
 * @return {null|*} - Returns the JSX or null
 */


var renderBody = function renderBody(data) {
  if (Array.isArray(data) && data.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(_core.Row, null, data.map(function (item) {
      return /*#__PURE__*/_react["default"].createElement(ColumnModify, {
        key: item.id,
        lg: 6
      }, /*#__PURE__*/_react["default"].createElement(Card, null, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(Badge, null, /*#__PURE__*/_react["default"].createElement(BadgeText, null, item.badgeText)), /*#__PURE__*/_react["default"].createElement(PriceTitle, null, item.currency, item.price, /*#__PURE__*/_react["default"].createElement("small", null, "/ ", item.expireCode)), /*#__PURE__*/_react["default"].createElement(CardText, null, item.description)), Array.isArray(item.features) && item.features.length > 0 ? /*#__PURE__*/_react["default"].createElement(CardFooter, null, /*#__PURE__*/_react["default"].createElement(FeatureList, null, item.features.map(function (feature) {
        return /*#__PURE__*/_react["default"].createElement("li", {
          key: feature.id
        }, /*#__PURE__*/_react["default"].createElement(Feature, null, /*#__PURE__*/_react["default"].createElement(FeatureSvgWrapper, null, renderIcon(feature.icon)), /*#__PURE__*/_react["default"].createElement(FeatureText, null, feature.text)));
      }), /*#__PURE__*/_react["default"].createElement(CardButton, {
        href: item.button.href,
        color: item.button.color,
        variation: item.button.variation
      }, item.button.text))) : null));
    }));
  } else {
    return null;
  }
};

var Pricing4 = function Pricing4(props) {
  var subtitle = props.subtitle,
      majorText = props.majorText,
      minorText = props.minorText,
      packages = props.packages,
      cta = props.cta,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["subtitle", "majorText", "minorText", "packages", "cta"]);
  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(PriceSubtitle, null, subtitle), /*#__PURE__*/_react["default"].createElement(PriceUpperTitle, null, majorText), /*#__PURE__*/_react["default"].createElement(PriceDescription, null, minorText)))), /*#__PURE__*/_react["default"].createElement(AreaB, null, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(PriceBody, null, renderBody(packages), cta ? /*#__PURE__*/_react["default"].createElement(_core.Row, null, /*#__PURE__*/_react["default"].createElement(_core.Column, {
    lg: 12
  }, /*#__PURE__*/_react["default"].createElement(Cta, null, /*#__PURE__*/_react["default"].createElement("div", null, typeof cta.badgeText === 'string' && cta.badgeText.length > 0 ? /*#__PURE__*/_react["default"].createElement(CtaBadge, null, /*#__PURE__*/_react["default"].createElement(CtaBadgeText, null, cta.badgeText)) : null, /*#__PURE__*/_react["default"].createElement(CtaText, null, cta.text)), cta.link ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(CtaLink, {
    href: cta.link.href,
    variation: cta.link.variation,
    color: cta.link.color
  }, cta.link.text)) : null))) : null))));
};

exports.Pricing4 = Pricing4;
Pricing4.propTypes = propTypes;
Pricing4.defaultProps = defaultProps;