@lote-design-system/marketing-blocks/main/components/marketing/pricing/Pricing2.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.Pricing2 = 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: "Pricing2__ContainerModify",
  componentId: "sc-1t27izu-0"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});

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

var PricingContent = _styledComponents["default"].div.withConfig({
  displayName: "Pricing2__PricingContent",
  componentId: "sc-1t27izu-2"
})(["text-align:center;margin-bottom:96px;", "{max-width:540px;text-align:left;}"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.mediaQueries.xl;
});

var PricingSubtitle = _styledComponents["default"].p.withConfig({
  displayName: "Pricing2__PricingSubtitle",
  componentId: "sc-1t27izu-3"
})(["color:", ";font-size:24px;font-weight:500;margin-top:0;margin-bottom:4px;"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.text.secondary;
});

var PricingHeading = _styledComponents["default"].h3.withConfig({
  displayName: "Pricing2__PricingHeading",
  componentId: "sc-1t27izu-4"
})(["font-size:48px;color:", ";font-weight:700;margin-bottom:8px;"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.secondary;
});

var PricingDescription = _styledComponents["default"].p.withConfig({
  displayName: "Pricing2__PricingDescription",
  componentId: "sc-1t27izu-5"
})(["margin-bottom:16px;font-size:16px;color:", ";"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.text.primary;
});

var PriceActionButtonGroup = _styledComponents["default"].div.withConfig({
  displayName: "Pricing2__PriceActionButtonGroup",
  componentId: "sc-1t27izu-6"
})(["margin:0 -8px;"]);

var PriceActionButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Pricing2__PriceActionButton",
  componentId: "sc-1t27izu-7"
})(["font-size:14px;font-weight:700;padding:16px 48px;margin:8px;"]);
var PlanColumn = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Pricing2__PlanColumn",
  componentId: "sc-1t27izu-8"
})(["margin-bottom:60px;&:last-child{margin-bottom:0;}"]);
/**
 * 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:#fdfdfd;border:1px solid #f5f5f5;}"]);

    case 2:
      return (0, _styledComponents.css)(["&{background-color:#ffffff;border:1px solid #f5f5f5;}"]);

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

var Card = _styledComponents["default"].div.withConfig({
  displayName: "Pricing2__Card",
  componentId: "sc-1t27izu-9"
})(["position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:4px;", ";", ";"], function (_ref6) {
  var no = _ref6.no;

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

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

var CardBody = _styledComponents["default"].div.withConfig({
  displayName: "Pricing2__CardBody",
  componentId: "sc-1t27izu-10"
})(["padding:48px 32px 64px;"]);

var CardContent1 = _styledComponents["default"].div.withConfig({
  displayName: "Pricing2__CardContent1",
  componentId: "sc-1t27izu-11"
})([""]);

var CardPackageP = _styledComponents["default"].p.withConfig({
  displayName: "Pricing2__CardPackageP",
  componentId: "sc-1t27izu-12"
})(["font-size:16px;color:", ";font-weight:600;margin-top:16px;margin-bottom:0;text-transform:uppercase;"], function (_ref8) {
  var theme = _ref8.theme;
  return theme.colors.primary;
});

var CardPriceH1 = _styledComponents["default"].h1.withConfig({
  displayName: "Pricing2__CardPriceH1",
  componentId: "sc-1t27izu-13"
})(["font-size:32px;color:", ";font-weight:700;margin-top:16px;margin-bottom:0;span{font-size:16px;color:", ";}"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.colors.secondary;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.colors.text.primary;
});

var CardPlanFeatures = _styledComponents["default"].div.withConfig({
  displayName: "Pricing2__CardPlanFeatures",
  componentId: "sc-1t27izu-14"
})([""]);

var CardListGroup = _styledComponents["default"].div.withConfig({
  displayName: "Pricing2__CardListGroup",
  componentId: "sc-1t27izu-15"
})(["margin-top:22px;"]);

var CardListHeading = _styledComponents["default"].h6.withConfig({
  displayName: "Pricing2__CardListHeading",
  componentId: "sc-1t27izu-16"
})(["color:", ";font-size:14px;font-weight:600;margin:0;"], function (_ref11) {
  var theme = _ref11.theme;
  return theme.colors.primary;
});

var CardList = _styledComponents["default"].ul.withConfig({
  displayName: "Pricing2__CardList",
  componentId: "sc-1t27izu-17"
})(["margin-top:8px;margin-bottom:0;padding:0;li{list-style:none;font-size:14px;color:", ";padding:8px 0;}"], function (_ref12) {
  var theme = _ref12.theme;
  return theme.colors.text.title;
});

var CardContent2 = _styledComponents["default"].div.withConfig({
  displayName: "Pricing2__CardContent2",
  componentId: "sc-1t27izu-18"
})(["display:flex;margin-top:16px;", "{justify-content:center;}"], function (_ref13) {
  var theme = _ref13.theme;
  return theme.mediaQueries.xl;
});

var CardPriceButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Pricing2__CardPriceButton",
  componentId: "sc-1t27izu-19"
})(["padding:16px 48px;font-weight:700;"]); // <= End Dependent styled-components

var linkSchema = [{
  id: 1,
  href: '/',
  variation: 'whiteSecondary',
  text: 'How it works'
}, {
  id: 2,
  href: '/',
  variation: 'fill',
  text: ' Get Started'
}];
var packageSchema = [{
  id: 1,
  name: 'STARTER',
  expireCode: 'mo',
  currency: '$',
  price: '180',
  button: {
    text: 'Get Started',
    variation: 'fill'
  },
  modules: [{
    id: 1,
    title: 'Web Development',
    features: [{
      id: 1,
      text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access 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,
    title: 'SEO / Search Engine',
    features: [{
      id: 1,
      text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access 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: 3,
    title: 'Mobile Development',
    features: [{
      id: 1,
      text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access 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: 'PROFESSIONAL',
  expireCode: 'mo',
  currency: '$',
  price: '250',
  button: {
    text: 'Get Started',
    variation: 'whiteSecondary'
  },
  modules: [{
    id: 1,
    title: 'Web Development',
    features: [{
      id: 1,
      text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access 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,
    title: 'SEO / Search Engine',
    features: [{
      id: 1,
      text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access 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: 3,
    title: 'Mobile Development',
    features: [{
      id: 1,
      text: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Unlimited"), " Access 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 idShape = _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired;

var linkShape = {
  id: idShape,
  text: _propTypes["default"].string.isRequired,
  href: _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"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired
};
var moduleShape = {
  id: idShape,
  title: _propTypes["default"].string.isRequired,
  features: _propTypes["default"].arrayOf(_propTypes["default"].shape(featureShape)).isRequired
};
var packageShape = {
  id: idShape,
  name: _propTypes["default"].string.isRequired,
  expireCode: _propTypes["default"].string.isRequired,
  currency: _propTypes["default"].string.isRequired,
  price: _propTypes["default"].string.isRequired,
  button: _propTypes["default"].shape(buttonShape).isRequired,
  modules: _propTypes["default"].arrayOf(_propTypes["default"].shape(moduleShape)).isRequired,
  styledCSS: _propTypes["default"].string
};
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,

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

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

  /** The link buttons will be displayed at the bottom of the pricing section. */
  links: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape))
};
var defaultProps = {
  title: 'Keep your journey wherever are',
  subText: 'PRICING PLANS',
  description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  links: linkSchema,
  packages: packageSchema
};
/**
 * 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 data.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement(PlanColumn, {
        key: item.id,
        xl: 3,
        lg: 6,
        md: 6
      }, /*#__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, item.currency, " ", item.price, " ", item.expireCode), Array.isArray(item.modules) && item.modules.length > 0 ? /*#__PURE__*/_react["default"].createElement(CardPlanFeatures, null, item.modules.map(function (item) {
        return /*#__PURE__*/_react["default"].createElement(CardListGroup, {
          key: item.id
        }, /*#__PURE__*/_react["default"].createElement(CardListHeading, null, item.title), Array.isArray(item.features) && item.features.length > 0 ? /*#__PURE__*/_react["default"].createElement(CardList, null, item.features.map(function (feature) {
          return /*#__PURE__*/_react["default"].createElement("li", {
            key: feature.id
          }, feature.text);
        })) : null);
      })) : null), item.button ? /*#__PURE__*/_react["default"].createElement(CardContent2, null, /*#__PURE__*/_react["default"].createElement(CardPriceButton, {
        href: item.button.href,
        variation: item.button.variation,
        color: item.button.color
      }, item.button.text)) : null)));
    });
  } else {
    return null;
  }
};

var Pricing2 = function Pricing2(props) {
  var title = props.title,
      subText = props.subText,
      description = props.description,
      links = props.links,
      packages = props.packages,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["title", "subText", "description", "links", "packages"]);
  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, {
    xl: 6,
    lg: 12
  }, /*#__PURE__*/_react["default"].createElement(PricingContent, null, /*#__PURE__*/_react["default"].createElement(PricingSubtitle, null, subText), /*#__PURE__*/_react["default"].createElement(PricingHeading, null, title), /*#__PURE__*/_react["default"].createElement(PricingDescription, null, description), links ? /*#__PURE__*/_react["default"].createElement(PriceActionButtonGroup, null, links.map(function (link) {
    return /*#__PURE__*/_react["default"].createElement(PriceActionButton, {
      key: link.id,
      href: link.href,
      variation: link.variation,
      color: link.color
    }, link.text);
  })) : null)), renderBody(packages))));
};

exports.Pricing2 = Pricing2;
Pricing2.propTypes = propTypes;
Pricing2.defaultProps = defaultProps;