@lote-design-system/marketing-blocks/module/components/marketing/pricing/Pricing1.js

marketing blocks

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css, keyframes } from 'styled-components';
import { Container, Row, Column, Button } from '@lote-design-system/core'; // => Dependent styled-components
// Our main component depends upon the following styled-components

const ContainerModify = styled(Container).withConfig({
  displayName: "Pricing1__ContainerModify",
  componentId: "awryp8-0"
})(["max-width:", ";"], ({
  theme
}) => theme.maxContainerWidth);
const SectionPricing = styled.div.withConfig({
  displayName: "Pricing1__SectionPricing",
  componentId: "awryp8-1"
})(["padding:96px 0;"]);
const PricingContent = styled.div.withConfig({
  displayName: "Pricing1__PricingContent",
  componentId: "awryp8-2"
})(["text-align:center;margin-bottom:80px;"]);
const PricingSubtitle = styled.p.withConfig({
  displayName: "Pricing1__PricingSubtitle",
  componentId: "awryp8-3"
})(["color:", ";font-size:18px;font-weight:500;margin-top:0;margin-bottom:8px;"], ({
  theme
}) => theme.colors.text.secondary);
const PricingHeading = styled.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:", ";}"], ({
  theme
}) => theme.fonts.heading, ({
  theme
}) => theme.colors.secondary, ({
  theme
}) => theme.colors.primary);
const pricingMoveCircle = keyframes(["from{transform:translateX(0);}to{transform:translateX(120px);}"]);
const PricingWave = styled.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:", ";}", ""], ({
  theme
}) => theme.palettes.primary[2], ''
/* Turn off when animation is on, Turn on when animation is off */
, ({
  theme
}) => theme.colors.primary, props => {
  if (props.animation) {
    return css(["justify-content:flex-start;&:before{animation:", " 3s linear infinite;}"], pricingMoveCircle);
  }
}); // Card Badge

const CardBadgeWrapper = styled.div.withConfig({
  displayName: "Pricing1__CardBadgeWrapper",
  componentId: "awryp8-6"
})(["position:absolute;display:flex;top:-16px;right:0;left:0;justify-content:center;align-items:center;"]);
const CardBadge = styled.div.withConfig({
  displayName: "Pricing1__CardBadge",
  componentId: "awryp8-7"
})(["background-color:", ";color:#fff;font-size:14px;border-radius:22px;padding:8px 24px;"], ({
  theme
}) => theme.colors.secondary);
const PlanColumn = styled(Column).withConfig({
  displayName: "Pricing1__PlanColumn",
  componentId: "awryp8-8"
})(["margin-top:0;margin-bottom:60px;&:last-child{margin-bottom:0;}"]);
const PlanRow = styled(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;}}}"], ({
  theme
}) => theme.mediaQueries.lg, 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
 */

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

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

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

    default:
      return css([""]);
  }
};

const Card = styled.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;", ";", ";"], ({
  no
}) => {
  if (no) {
    return cardStyles(no);
  }
}, ({
  styled
}) => {
  if (styled) {
    return css(["&{", ";}"], styled);
  }
});
const CardBody = styled.div.withConfig({
  displayName: "Pricing1__CardBody",
  componentId: "awryp8-11"
})(["", " padding:48px 32px 64px;"], ''
/* Top, right & left, Bottom */
);
const CardContent1 = styled.div.withConfig({
  displayName: "Pricing1__CardContent1",
  componentId: "awryp8-12"
})(["text-align:center;"]);
const CardPackageP = styled.p.withConfig({
  displayName: "Pricing1__CardPackageP",
  componentId: "awryp8-13"
})(["font-size:16px;color:", ";font-weight:600;margin-top:16px;margin-bottom:0;text-transform:uppercase;"], ({
  theme
}) => theme.colors.textPrimary);
const CardPriceH1 = styled.h1.withConfig({
  displayName: "Pricing1__CardPriceH1",
  componentId: "awryp8-14"
})(["font-family:", ";font-size:80px;color:", ";font-weight:600;margin-top:16px;margin-bottom:0;"], ({
  theme
}) => theme.fonts.heading, ({
  theme
}) => theme.colors.secondary);
const CardDurationP = styled.p.withConfig({
  displayName: "Pricing1__CardDurationP",
  componentId: "awryp8-15"
})(["font-size:14px;color:", ";font-weight:600;margin-top:16px;margin-bottom:0;text-transform:uppercase;"], ({
  theme
}) => theme.colors.text.primary);
const CardPriceButton = styled(Button).withConfig({
  displayName: "Pricing1__CardPriceButton",
  componentId: "awryp8-16"
})(["font-weight:700;margin-top:18px;"]);
const CardContent2 = styled.div.withConfig({
  displayName: "Pricing1__CardContent2",
  componentId: "awryp8-17"
})(["display:flex;justify-content:center;margin-top:22px;"]);
const CardList = styled.ul.withConfig({
  displayName: "Pricing1__CardList",
  componentId: "awryp8-18"
})(["margin:0;padding:0;li{list-style:none;font-size:16px;color:", ";padding:8px 0;}"], ({
  theme
}) => theme.colors.text.title); // Price Call to Action Wrapper

const PriceCtaWrapper = styled.div.withConfig({
  displayName: "Pricing1__PriceCtaWrapper",
  componentId: "awryp8-19"
})(["max-width:960px;margin:0 auto;padding:96px 0;"]);
const PriceCtaPaddingBox = styled.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;}"], ({
  theme
}) => theme.colors.primary, ({
  theme
}) => theme.mediaQueries.lg);
const PriceCtaStart = styled.div.withConfig({
  displayName: "Pricing1__PriceCtaStart",
  componentId: "awryp8-21"
})(["", "{text-align:center;}"], ({
  theme
}) => theme.mediaQueries.sm);
const PriceCtaEnd = styled.div.withConfig({
  displayName: "Pricing1__PriceCtaEnd",
  componentId: "awryp8-22"
})(["", "{text-align:center;}"], ({
  theme
}) => theme.mediaQueries.sm);
const PriceCtaText = styled.p.withConfig({
  displayName: "Pricing1__PriceCtaText",
  componentId: "awryp8-23"
})(["margin:16px 0;color:#fff;font-size:16px;"]);
const PriceCtaButton = styled(Button).withConfig({
  displayName: "Pricing1__PriceCtaButton",
  componentId: "awryp8-24"
})(["box-shadow:", ";font-weight:700;font-size:14px;"], ({
  theme
}) => theme.boxShadows.md); // <= End Dependent styled-components

const packageSchema = [{
  id: 1,
  name: 'STARTER',
  expiration: '7 DAYS',
  currency: '$',
  price: '0',
  button: {
    text: 'Get Started',
    variation: 'primarySubtle'
  },
  features: [{
    id: 1,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access to the content")
  }, {
    id: 2,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Fully Secure"), " Online Backup")
  }, {
    id: 3,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "One Year"), " Round the clock stop")
  }, {
    id: 4,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.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.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access to the content")
  }, {
    id: 2,
    text: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Fully Secure"), " Online Backup")
  }, {
    id: 3,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "One Year"), " Round the clock stop")
  }, {
    id: 4,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.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.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access to the content")
  }, {
    id: 2,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Fully Secure"), " Online Backup")
  }, {
    id: 3,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "One Year"), " Round the clock stop")
  }, {
    id: 4,
    text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Free"), " complimentary lanyard")
  }]
}];
const buttonShape = {
  text: PropTypes.string.isRequired,
  variation: PropTypes.string.isRequired,
  color: PropTypes.string,
  href: PropTypes.string
};
const featureShape = {
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
};
const packageShape = {
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  name: PropTypes.string.isRequired,
  expiration: PropTypes.string.isRequired,
  currency: PropTypes.string.isRequired,
  price: PropTypes.string.isRequired,
  button: PropTypes.shape(buttonShape).isRequired,
  features: PropTypes.arrayOf(PropTypes.shape(featureShape)).isRequired,
  badgeText: PropTypes.string,
  styledCSS: PropTypes.string
};
const ctaShape = {
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  link: PropTypes.shape({
    href: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    variation: PropTypes.string.isRequired,
    color: PropTypes.string
  })
};
const propTypes = {
  /** The Major words for the pricing section. */
  majorWords: PropTypes.string.isRequired,

  /** The Minor words for the pricing section. */
  minorWords: PropTypes.string.isRequired,

  /** The subtitle for the pricing section. */
  subTitle: PropTypes.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.arrayOf(PropTypes.shape(packageShape)).isRequired,

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

  /** The CTA container will appear below the price section. */
  cta: PropTypes.shape(ctaShape)
};
const defaultProps = {
  majorWords: 'Plans',
  minorWords: 'Extended',
  subTitle: 'Keep Track Of Plans Wherever You Are',
  bar: {
    show: true,
    animation: false
  },
  packages: packageSchema,
  cta: {
    text: /*#__PURE__*/React.createElement("span", null, "We are offering a", /*#__PURE__*/React.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
 */

const 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.createElement(PlanRow, null, data.map((item, index) => {
      return /*#__PURE__*/React.createElement(PlanColumn, {
        key: item.id,
        lg: 4
      }, /*#__PURE__*/React.createElement(Card, {
        no: index + 1,
        styled: item.styledCSS
      }, /*#__PURE__*/React.createElement(CardBody, null, /*#__PURE__*/React.createElement(CardContent1, null, /*#__PURE__*/React.createElement(CardPackageP, null, item.name), /*#__PURE__*/React.createElement(CardPriceH1, null, `${item.currency} ${item.price}`), /*#__PURE__*/React.createElement(CardDurationP, null, item.expiration), /*#__PURE__*/React.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.createElement(CardContent2, null, /*#__PURE__*/React.createElement(CardList, null, item.features.map(feature => {
        return /*#__PURE__*/React.createElement("li", {
          key: feature.id
        }, feature.text);
      }))) : null), typeof item.badgeText === 'string' && item.badgeText.length > 0 ? /*#__PURE__*/React.createElement(CardBadgeWrapper, null, /*#__PURE__*/React.createElement(CardBadge, null, item.badgeText)) : null));
    }));
  } else {
    return null;
  }
};

export const Pricing1 = props => {
  // animation would be a bool type
  const {
    majorWords,
    minorWords,
    subTitle,
    bar,
    packages,
    cta
  } = props,
        attributes = _objectWithoutProperties(props, ["majorWords", "minorWords", "subTitle", "bar", "packages", "cta"]);

  return /*#__PURE__*/React.createElement(SectionPricing, attributes, /*#__PURE__*/React.createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
    lg: 12
  }, /*#__PURE__*/React.createElement(PricingContent, null, /*#__PURE__*/React.createElement(PricingSubtitle, null, subTitle), /*#__PURE__*/React.createElement(PricingHeading, null, minorWords, " ", /*#__PURE__*/React.createElement("span", null, majorWords)), bar && bar.show ? /*#__PURE__*/React.createElement(PricingWave, {
    animation: bar.animation
  }) : null))), renderBody(packages), cta ? /*#__PURE__*/React.createElement(PriceCtaWrapper, null, /*#__PURE__*/React.createElement(PriceCtaPaddingBox, null, /*#__PURE__*/React.createElement(PriceCtaStart, null, /*#__PURE__*/React.createElement(PriceCtaText, null, cta.text)), cta.link ? /*#__PURE__*/React.createElement(PriceCtaEnd, null, /*#__PURE__*/React.createElement(PriceCtaButton, {
    href: cta.link.href,
    variation: cta.link.variation,
    color: cta.link.color
  }, cta.link.text)) : null)) : null));
};
Pricing1.propTypes = propTypes;
Pricing1.defaultProps = defaultProps;