@lote-design-system/marketing-blocks/main/components/marketing/pricing/Pricing1.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.Pricing1 = 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 _core = require("@lote-design-system/core");

// => Dependent styled-components
// Our main component depends upon the following styled-components
var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Pricing1__ContainerModify",
  componentId: "awryp8-0"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});

var SectionPricing = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__SectionPricing",
  componentId: "awryp8-1"
})(["padding:96px 0;"]);

var PricingContent = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__PricingContent",
  componentId: "awryp8-2"
})(["text-align:center;margin-bottom:80px;"]);

var PricingSubtitle = _styledComponents["default"].p.withConfig({
  displayName: "Pricing1__PricingSubtitle",
  componentId: "awryp8-3"
})(["color:", ";font-size:18px;font-weight:500;margin-top:0;margin-bottom:8px;"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.text.secondary;
});

var PricingHeading = _styledComponents["default"].h3.withConfig({
  displayName: "Pricing1__PricingHeading",
  componentId: "awryp8-4"
})(["font-family:", ";font-size:40px;color:", ";font-weight:700;margin:12px 0 18px;text-transform:uppercase;span{color:", ";}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.fonts.heading;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.secondary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.primary;
});

var pricingMoveCircle = (0, _styledComponents.keyframes)(["from{transform:translateX(0);}to{transform:translateX(120px);}"]);

var PricingWave = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__PricingWave",
  componentId: "awryp8-5"
})(["margin:auto;position:relative;background:", ";height:8px;width:126px;display:flex;align-items:center;", " justify-content:center;border-radius:22px;&:before{content:'';position:absolute;height:18px;width:18px;border-radius:50%;background:", ";}", ""], function (_ref6) {
  var theme = _ref6.theme;
  return theme.palettes.primary[2];
}, ''
/* Turn off when animation is on, Turn on when animation is off */
, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colors.primary;
}, function (props) {
  if (props.animation) {
    return (0, _styledComponents.css)(["justify-content:flex-start;&:before{animation:", " 3s linear infinite;}"], pricingMoveCircle);
  }
}); // Card Badge


var CardBadgeWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__CardBadgeWrapper",
  componentId: "awryp8-6"
})(["position:absolute;display:flex;top:-16px;right:0;left:0;justify-content:center;align-items:center;"]);

var CardBadge = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__CardBadge",
  componentId: "awryp8-7"
})(["background-color:", ";color:#fff;font-size:14px;border-radius:22px;padding:8px 24px;"], function (_ref8) {
  var theme = _ref8.theme;
  return theme.colors.secondary;
});

var PlanColumn = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Pricing1__PlanColumn",
  componentId: "awryp8-8"
})(["margin-top:0;margin-bottom:60px;&:last-child{margin-bottom:0;}"]);
var PlanRow = (0, _styledComponents["default"])(_core.Row).withConfig({
  displayName: "Pricing1__PlanRow",
  componentId: "awryp8-9"
})(["", "{margin-right:0;margin-left:0;> ", "{padding-right:0;padding-left:0;&:nth-child(odd){margin-top:60px;margin-bottom:0;}}}"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.mediaQueries.lg;
}, _core.Column);
/**
 * A function that returns the styles associated with the card number.
 * @param no {number} - Set the card number to get the styles
 * @return {string[]} - Returns the styles
 */

var cardStyles = function cardStyles(no) {
  switch (no) {
    case 1:
      return (0, _styledComponents.css)(["&{background-color:#fff;border:1px solid rgba(0,0,0,0.04);", " z-index:3;", "{", " transform:translateX(14px);}}"], ''
      /* Higher than other */
      , function (_ref10) {
        var theme = _ref10.theme;
        return theme.mediaQueries.xl;
      }, ''
      /* Move only on large devices */
      );

    case 2:
      return (0, _styledComponents.css)(["&{background-color:#faf9f8;", " z-index:6;}"], ''
      /* Higher than other */
      );

    case 3:
      return (0, _styledComponents.css)(["&{background-color:", ";", " z-index:3;", "{", " transform:translateX(-14px);}", ",", ",", ",", " li{color:#fff;}}"], function (_ref11) {
        var theme = _ref11.theme;
        return theme.colors.primary;
      }, ''
      /* Higher than other */
      , function (_ref12) {
        var theme = _ref12.theme;
        return theme.mediaQueries.xl;
      }, ''
      /* Move only on large devices */
      , CardPackageP, CardPriceH1, CardDurationP, CardList);

    default:
      return (0, _styledComponents.css)([""]);
  }
};

var Card = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__Card",
  componentId: "awryp8-10"
})(["position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;border-radius:8px;background-clip:border-box;", ";", ";"], function (_ref13) {
  var no = _ref13.no;

  if (no) {
    return cardStyles(no);
  }
}, function (_ref14) {
  var styled = _ref14.styled;

  if (styled) {
    return (0, _styledComponents.css)(["&{", ";}"], styled);
  }
});

var CardBody = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__CardBody",
  componentId: "awryp8-11"
})(["", " padding:48px 32px 64px;"], ''
/* Top, right & left, Bottom */
);

var CardContent1 = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__CardContent1",
  componentId: "awryp8-12"
})(["text-align:center;"]);

var CardPackageP = _styledComponents["default"].p.withConfig({
  displayName: "Pricing1__CardPackageP",
  componentId: "awryp8-13"
})(["font-size:16px;color:", ";font-weight:600;margin-top:16px;margin-bottom:0;text-transform:uppercase;"], function (_ref15) {
  var theme = _ref15.theme;
  return theme.colors.textPrimary;
});

var CardPriceH1 = _styledComponents["default"].h1.withConfig({
  displayName: "Pricing1__CardPriceH1",
  componentId: "awryp8-14"
})(["font-family:", ";font-size:80px;color:", ";font-weight:600;margin-top:16px;margin-bottom:0;"], function (_ref16) {
  var theme = _ref16.theme;
  return theme.fonts.heading;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.colors.secondary;
});

var CardDurationP = _styledComponents["default"].p.withConfig({
  displayName: "Pricing1__CardDurationP",
  componentId: "awryp8-15"
})(["font-size:14px;color:", ";font-weight:600;margin-top:16px;margin-bottom:0;text-transform:uppercase;"], function (_ref18) {
  var theme = _ref18.theme;
  return theme.colors.text.primary;
});

var CardPriceButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Pricing1__CardPriceButton",
  componentId: "awryp8-16"
})(["font-weight:700;margin-top:18px;"]);

var CardContent2 = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__CardContent2",
  componentId: "awryp8-17"
})(["display:flex;justify-content:center;margin-top:22px;"]);

var CardList = _styledComponents["default"].ul.withConfig({
  displayName: "Pricing1__CardList",
  componentId: "awryp8-18"
})(["margin:0;padding:0;li{list-style:none;font-size:16px;color:", ";padding:8px 0;}"], function (_ref19) {
  var theme = _ref19.theme;
  return theme.colors.text.title;
}); // Price Call to Action Wrapper


var PriceCtaWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__PriceCtaWrapper",
  componentId: "awryp8-19"
})(["max-width:960px;margin:0 auto;padding:96px 0;"]);

var PriceCtaPaddingBox = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__PriceCtaPaddingBox",
  componentId: "awryp8-20"
})(["background-color:", ";border-radius:4px;padding:16px 32px;", "{align-items:center;display:flex;justify-content:space-between;}"], function (_ref20) {
  var theme = _ref20.theme;
  return theme.colors.primary;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.mediaQueries.lg;
});

var PriceCtaStart = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__PriceCtaStart",
  componentId: "awryp8-21"
})(["", "{text-align:center;}"], function (_ref22) {
  var theme = _ref22.theme;
  return theme.mediaQueries.sm;
});

var PriceCtaEnd = _styledComponents["default"].div.withConfig({
  displayName: "Pricing1__PriceCtaEnd",
  componentId: "awryp8-22"
})(["", "{text-align:center;}"], function (_ref23) {
  var theme = _ref23.theme;
  return theme.mediaQueries.sm;
});

var PriceCtaText = _styledComponents["default"].p.withConfig({
  displayName: "Pricing1__PriceCtaText",
  componentId: "awryp8-23"
})(["margin:16px 0;color:#fff;font-size:16px;"]);

var PriceCtaButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Pricing1__PriceCtaButton",
  componentId: "awryp8-24"
})(["box-shadow:", ";font-weight:700;font-size:14px;"], function (_ref24) {
  var theme = _ref24.theme;
  return theme.boxShadows.md;
}); // <= End Dependent styled-components

var packageSchema = [{
  id: 1,
  name: 'STARTER',
  expiration: '7 DAYS',
  currency: '$',
  price: '0',
  button: {
    text: 'Get Started',
    variation: 'primarySubtle'
  },
  features: [{
    id: 1,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access to the content")
  }, {
    id: 2,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Fully Secure"), " Online Backup")
  }, {
    id: 3,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "One Year"), " Round the clock stop")
  }, {
    id: 4,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Free"), " complimentary lanyard")
  }]
}, {
  id: 2,
  name: 'MEDIATOR',
  expiration: 'PER MONTH',
  currency: '$',
  price: '250',
  button: {
    text: 'Get Started',
    variation: 'fill'
  },
  badgeText: 'Most Popular',
  features: [{
    id: 1,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access to the content")
  }, {
    id: 2,
    text: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Fully Secure"), " Online Backup")
  }, {
    id: 3,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "One Year"), " Round the clock stop")
  }, {
    id: 4,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Free"), " complimentary lanyard")
  }]
}, {
  id: 3,
  name: 'PROFESSIONAL',
  expiration: 'PER MONTH',
  currency: '$',
  price: '350',
  button: {
    text: 'Get Started',
    variation: 'white'
  },
  features: [{
    id: 1,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access to the content")
  }, {
    id: 2,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Fully Secure"), " Online Backup")
  }, {
    id: 3,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "One Year"), " Round the clock stop")
  }, {
    id: 4,
    text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Free"), " complimentary lanyard")
  }]
}];
var buttonShape = {
  text: _propTypes["default"].string.isRequired,
  variation: _propTypes["default"].string.isRequired,
  color: _propTypes["default"].string,
  href: _propTypes["default"].string
};
var featureShape = {
  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired
};
var packageShape = {
  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
  name: _propTypes["default"].string.isRequired,
  expiration: _propTypes["default"].string.isRequired,
  currency: _propTypes["default"].string.isRequired,
  price: _propTypes["default"].string.isRequired,
  button: _propTypes["default"].shape(buttonShape).isRequired,
  features: _propTypes["default"].arrayOf(_propTypes["default"].shape(featureShape)).isRequired,
  badgeText: _propTypes["default"].string,
  styledCSS: _propTypes["default"].string
};
var ctaShape = {
  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
  link: _propTypes["default"].shape({
    href: _propTypes["default"].string.isRequired,
    text: _propTypes["default"].string.isRequired,
    variation: _propTypes["default"].string.isRequired,
    color: _propTypes["default"].string
  })
};
var propTypes = {
  /** The Major words for the pricing section. */
  majorWords: _propTypes["default"].string.isRequired,

  /** The Minor words for the pricing section. */
  minorWords: _propTypes["default"].string.isRequired,

  /** The subtitle for the pricing section. */
  subTitle: _propTypes["default"].string.isRequired,

  /** An array of packages Note: Only 3 price packages can be included in this
   section UI and the second priced package will be considered the main package. */
  packages: _propTypes["default"].arrayOf(_propTypes["default"].shape(packageShape)).isRequired,

  /** The bar will be displayed at the bottom of the pricing section. */
  bar: _propTypes["default"].shape({
    show: _propTypes["default"].bool.isRequired,
    animation: _propTypes["default"].bool
  }),

  /** The CTA container will appear below the price section. */
  cta: _propTypes["default"].shape(ctaShape)
};
var defaultProps = {
  majorWords: 'Plans',
  minorWords: 'Extended',
  subTitle: 'Keep Track Of Plans Wherever You Are',
  bar: {
    show: true,
    animation: false
  },
  packages: packageSchema,
  cta: {
    text: /*#__PURE__*/_react["default"].createElement("span", null, "We are offering a", /*#__PURE__*/_react["default"].createElement("strong", {
      style: {
        margin: '0 4px'
      }
    }, "14-days trail"), ". Please check it."),
    link: {
      href: '/',
      text: 'Learn more',
      variation: 'white'
    }
  }
};
/**
 * 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) {
    // We will apply the default styled CSS to each package, but if
    // the user has written custom CSS, then the old CSS will override
    // wth the new CSS.
    return /*#__PURE__*/_react["default"].createElement(PlanRow, null, data.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement(PlanColumn, {
        key: item.id,
        lg: 4
      }, /*#__PURE__*/_react["default"].createElement(Card, {
        no: index + 1,
        styled: item.styledCSS
      }, /*#__PURE__*/_react["default"].createElement(CardBody, null, /*#__PURE__*/_react["default"].createElement(CardContent1, null, /*#__PURE__*/_react["default"].createElement(CardPackageP, null, item.name), /*#__PURE__*/_react["default"].createElement(CardPriceH1, null, "".concat(item.currency, " ").concat(item.price)), /*#__PURE__*/_react["default"].createElement(CardDurationP, null, item.expiration), /*#__PURE__*/_react["default"].createElement(CardPriceButton, {
        href: item.button.href,
        variation: item.button.variation,
        color: item.button.color
      }, item.button.text)), Array.isArray(item.features) && item.features.length > 0 ? /*#__PURE__*/_react["default"].createElement(CardContent2, null, /*#__PURE__*/_react["default"].createElement(CardList, null, item.features.map(function (feature) {
        return /*#__PURE__*/_react["default"].createElement("li", {
          key: feature.id
        }, feature.text);
      }))) : null), typeof item.badgeText === 'string' && item.badgeText.length > 0 ? /*#__PURE__*/_react["default"].createElement(CardBadgeWrapper, null, /*#__PURE__*/_react["default"].createElement(CardBadge, null, item.badgeText)) : null));
    }));
  } else {
    return null;
  }
};

var Pricing1 = function Pricing1(props) {
  // animation would be a bool type
  var majorWords = props.majorWords,
      minorWords = props.minorWords,
      subTitle = props.subTitle,
      bar = props.bar,
      packages = props.packages,
      cta = props.cta,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["majorWords", "minorWords", "subTitle", "bar", "packages", "cta"]);
  return /*#__PURE__*/_react["default"].createElement(SectionPricing, attributes, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(_core.Row, null, /*#__PURE__*/_react["default"].createElement(_core.Column, {
    lg: 12
  }, /*#__PURE__*/_react["default"].createElement(PricingContent, null, /*#__PURE__*/_react["default"].createElement(PricingSubtitle, null, subTitle), /*#__PURE__*/_react["default"].createElement(PricingHeading, null, minorWords, " ", /*#__PURE__*/_react["default"].createElement("span", null, majorWords)), bar && bar.show ? /*#__PURE__*/_react["default"].createElement(PricingWave, {
    animation: bar.animation
  }) : null))), renderBody(packages), cta ? /*#__PURE__*/_react["default"].createElement(PriceCtaWrapper, null, /*#__PURE__*/_react["default"].createElement(PriceCtaPaddingBox, null, /*#__PURE__*/_react["default"].createElement(PriceCtaStart, null, /*#__PURE__*/_react["default"].createElement(PriceCtaText, null, cta.text)), cta.link ? /*#__PURE__*/_react["default"].createElement(PriceCtaEnd, null, /*#__PURE__*/_react["default"].createElement(PriceCtaButton, {
    href: cta.link.href,
    variation: cta.link.variation,
    color: cta.link.color
  }, cta.link.text)) : null)) : null));
};

exports.Pricing1 = Pricing1;
Pricing1.propTypes = propTypes;
Pricing1.defaultProps = defaultProps;