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

marketing blocks

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

const Pricing = styled.div.withConfig({
  displayName: "Pricing3__Pricing",
  componentId: "ekfro2-0"
})([""]);
const ContainerModify = styled(Container).withConfig({
  displayName: "Pricing3__ContainerModify",
  componentId: "ekfro2-1"
})(["max-width:", ";"], ({
  theme
}) => theme.maxContainerWidth);
const RowModify = styled(Row).withConfig({
  displayName: "Pricing3__RowModify",
  componentId: "ekfro2-2"
})(["", "{margin-right:0;margin-left:0;}"], ({
  theme
}) => theme.mediaQueries.lg);
const ColumnModify = styled(Column).withConfig({
  displayName: "Pricing3__ColumnModify",
  componentId: "ekfro2-3"
})(["", "{padding-right:0;padding-left:0;}"], ({
  theme
}) => theme.mediaQueries.lg); // Area A

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

const PriceHeader = styled.div.withConfig({
  displayName: "Pricing3__PriceHeader",
  componentId: "ekfro2-5"
})(["text-align:center;"]);
const PriceTitle = styled.h1.withConfig({
  displayName: "Pricing3__PriceTitle",
  componentId: "ekfro2-6"
})(["font-size:40px;font-weight:700;color:", ";margin-bottom:8px;"], ({
  theme: {
    colors
  }
}) => colors.text.title);
const PriceDescription = styled.p.withConfig({
  displayName: "Pricing3__PriceDescription",
  componentId: "ekfro2-7"
})(["margin:0 auto;max-width:720px;font-size:16px;color:", ";"], ({
  theme: {
    colors
  }
}) => colors.text.primary); // -- End --
// Area B

const AreaB = styled.div.withConfig({
  displayName: "Pricing3__AreaB",
  componentId: "ekfro2-8"
})(["background-color:#fff;padding-top:128px;padding-bottom:128px;"]);
const PriceBody = styled.div.withConfig({
  displayName: "Pricing3__PriceBody",
  componentId: "ekfro2-9"
})(["border-radius:", ";box-shadow:", ";margin-top:-330px;margin-bottom:48px;"], props => props.theme.card.borderRadius, ({
  theme
}) => theme.boxShadows.lg);
const PriceContent1 = styled.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;}"], props => props.theme.card.borderRadius, props => props.theme.card.borderRadius, ({
  theme
}) => theme.mediaQueries.lg, props => props.theme.card.borderRadius, props => props.theme.card.borderRadius);
const PriceContentHeading = styled.h1.withConfig({
  displayName: "Pricing3__PriceContentHeading",
  componentId: "ekfro2-11"
})(["font-size:28px;font-weight:700;color:", ";margin-bottom:16px;"], ({
  theme: {
    colors
  }
}) => colors.text.title);
const PriceContentDescription = styled.p.withConfig({
  displayName: "Pricing3__PriceContentDescription",
  componentId: "ekfro2-12"
})(["margin-bottom:0;font-size:14px;color:", ";"], ({
  theme: {
    colors
  }
}) => colors.text.primary);
const HorizontalDivider = styled.div.withConfig({
  displayName: "Pricing3__HorizontalDivider",
  componentId: "ekfro2-13"
})(["margin:20px 0 32px;"]);
const PriceContentMotto = styled.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;}"], ({
  theme: {
    colors
  }
}) => colors.primary);
const PriceFeatures = styled.div.withConfig({
  displayName: "Pricing3__PriceFeatures",
  componentId: "ekfro2-15"
})(["", "{display:flex;justify-content:space-between;}"], ({
  theme
}) => theme.mediaQueries.lg);
const FeatureSet = styled.div.withConfig({
  displayName: "Pricing3__FeatureSet",
  componentId: "ekfro2-16"
})([""]);
const Feature = styled.div.withConfig({
  displayName: "Pricing3__Feature",
  componentId: "ekfro2-17"
})(["display:flex;align-items:center;margin-bottom:30px;"]);
const FeatureSvgWrapper = styled.span.withConfig({
  displayName: "Pricing3__FeatureSvgWrapper",
  componentId: "ekfro2-18"
})(["color:#52c41a;margin-right:12px;> svg{width:24px;height:24px;}"]);
const FeatureText = styled.span.withConfig({
  displayName: "Pricing3__FeatureText",
  componentId: "ekfro2-19"
})(["font-size:14px;color:", ";"], ({
  theme: {
    colors
  }
}) => colors.text.primary);
const PriceContent2 = styled.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;}"], props => props.theme.card.borderRadius, props => props.theme.card.borderRadius, ({
  theme
}) => theme.mediaQueries.lg, props => props.theme.card.borderRadius, props => props.theme.card.borderRadius);
const PriceContentHeading2 = styled.h1.withConfig({
  displayName: "Pricing3__PriceContentHeading2",
  componentId: "ekfro2-21"
})(["font-size:18px;font-weight:700;color:", ";margin-bottom:16px;"], ({
  theme: {
    colors
  }
}) => colors.text.title);
const PriceContentTitle = styled.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:", ";}"], ({
  theme: {
    colors
  }
}) => colors.text.title, ''
/* text-align-center will not work */
, ({
  theme: {
    colors
  }
}) => colors.text.primary);
const PriceContentLink = styled.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;}"], ({
  theme: {
    colors
  }
}) => colors.text.primary, ({
  theme: {
    colors
  }
}) => colors.secondary);
const PriceContentButton = styled(Button).withConfig({
  displayName: "Pricing3__PriceContentButton",
  componentId: "ekfro2-24"
})(["width:100%;display:block;box-shadow:", ";margin-bottom:16px;"], ({
  theme
}) => theme.boxShadows.md);
const PriceContentText = styled.p.withConfig({
  displayName: "Pricing3__PriceContentText",
  componentId: "ekfro2-25"
})(["font-size:14px;font-weight:500;color:", ";margin-bottom:0;"], ({
  theme: {
    colors
  }
}) => colors.text.title); // <= End Dependent styled-components

const setSchema = [{
  id: 1,
  name: 'set-1',
  features: [{
    id: 1,
    text: 'Self-paced and flexible scheduling',
    icon: /*#__PURE__*/React.createElement(Icon, {
      name: "check-circle"
    })
  }, {
    id: 2,
    text: 'Access to new beta features',
    icon: /*#__PURE__*/React.createElement(Icon, {
      name: "check-circle"
    })
  }]
}, {
  id: 2,
  name: 'set-2',
  features: [{
    id: 1,
    text: 'Interactive practice sessions',
    icon: /*#__PURE__*/React.createElement(Icon, {
      name: "check-circle"
    })
  }, {
    id: 2,
    text: 'Dedicated customer success team',
    icon: /*#__PURE__*/React.createElement(Icon, {
      name: "check-circle"
    })
  }]
}];
const 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.createElement("span", null, "Get a free sample ", /*#__PURE__*/React.createElement("strong", null, "(20MB)"))
};
const idShape = PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired;
const linkShape = {
  text: PropTypes.string.isRequired,
  href: PropTypes.string.isRequired
};
const buttonShape = {
  text: PropTypes.string.isRequired,
  variation: PropTypes.string.isRequired,
  color: PropTypes.string,
  href: PropTypes.string
};
const featureShape = {
  id: idShape,
  text: PropTypes.string.isRequired,
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
};
const setShape = {
  id: idShape,
  name: PropTypes.string,
  features: PropTypes.arrayOf(PropTypes.shape(featureShape)).isRequired
};
const planShape = {
  id: idShape,
  name: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  separatorText: PropTypes.string.isRequired,
  sets: PropTypes.arrayOf(PropTypes.shape(setShape)).isRequired,
  planTitle: PropTypes.string.isRequired,
  currency: PropTypes.string.isRequired,
  currencySymbol: PropTypes.string.isRequired,
  price: PropTypes.string.isRequired,
  button: PropTypes.shape(buttonShape).isRequired,
  policyLink: PropTypes.shape(linkShape),
  extra: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
};
const propTypes = {
  /** The text for the pricing section. */
  title: PropTypes.string.isRequired,

  /** The sub text for the pricing section. */
  subText: PropTypes.string.isRequired,

  /** Only 1 price plan can be included in this section UI. */
  plan: PropTypes.shape(planShape).isRequired
};
const 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
 */

const renderIcon = icon => {
  if (React.isValidElement(icon)) {
    return icon;
  } else if (typeof icon === 'string' && icon.length > 0) {
    return /*#__PURE__*/React.createElement(Icon, {
      name: icon
    });
  } else {
    return null;
  }
};

export const Pricing3 = props => {
  const {
    title,
    subText,
    plan
  } = props,
        attributes = _objectWithoutProperties(props, ["title", "subText", "plan"]);

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