@lote-design-system/marketing-blocks
Version:
380 lines (359 loc) • 14.2 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } 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: "Pricing4__Pricing",
componentId: "sc-16tltp4-0"
})([""]);
const ContainerModify = styled(Container).withConfig({
displayName: "Pricing4__ContainerModify",
componentId: "sc-16tltp4-1"
})(["max-width:", ";"], ({
theme
}) => theme.maxContainerWidth);
const ColumnModify = styled(Column).withConfig({
displayName: "Pricing4__ColumnModify",
componentId: "sc-16tltp4-2"
})(["margin-bottom:64px;"]); // AreaA
const AreaA = styled.div.withConfig({
displayName: "Pricing4__AreaA",
componentId: "sc-16tltp4-3"
})(["background-color:", ";padding-top:128px;padding-bottom:256px;"], ({
theme: {
colors
}
}) => colors.text.title); // Header
const PriceHeader = styled.div.withConfig({
displayName: "Pricing4__PriceHeader",
componentId: "sc-16tltp4-4"
})(["text-align:center;"]);
const PriceSubtitle = styled.h4.withConfig({
displayName: "Pricing4__PriceSubtitle",
componentId: "sc-16tltp4-5"
})(["font-size:20px;color:#fff;font-weight:400;margin-bottom:4px;"]);
const PriceUpperTitle = styled.h1.withConfig({
displayName: "Pricing4__PriceUpperTitle",
componentId: "sc-16tltp4-6"
})(["font-size:40px;font-weight:700;color:#fff;margin-bottom:8px;"]);
const PriceDescription = styled.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
const AreaB = styled.div.withConfig({
displayName: "Pricing4__AreaB",
componentId: "sc-16tltp4-8"
})(["background-color:#fdfdfd;padding-top:128px;padding-bottom:128px;"]); // Body
const PriceBody = styled.div.withConfig({
displayName: "Pricing4__PriceBody",
componentId: "sc-16tltp4-9"
})(["margin-top:-300px;", "{padding:0 32px;}"], ({
theme
}) => theme.mediaQueries.md); // Card
const Card = styled.div.withConfig({
displayName: "Pricing4__Card",
componentId: "sc-16tltp4-10"
})(["background-color:#fff;box-shadow:", ";height:100%;border-radius:", ";"], ({
theme
}) => theme.boxShadows.md, props => props.theme.card.borderRadius); // CardHeader
const CardHeader = styled.div.withConfig({
displayName: "Pricing4__CardHeader",
componentId: "sc-16tltp4-11"
})(["border-top-left-radius:", ";border-top-right-radius:", ";padding:32px;background-color:#fff;"], props => props.theme.card.borderRadius, props => props.theme.card.borderRadius);
const Badge = styled.div.withConfig({
displayName: "Pricing4__Badge",
componentId: "sc-16tltp4-12"
})(["margin-bottom:16px;"]);
const BadgeText = styled.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;"]);
const PriceTitle = styled.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;}"], ({
theme: {
colors
}
}) => colors.text.title, ({
theme: {
colors
}
}) => colors.text.primary);
const CardText = styled.p.withConfig({
displayName: "Pricing4__CardText",
componentId: "sc-16tltp4-15"
})(["font-size:14px;color:", ";margin-bottom:0;"], ({
theme: {
colors
}
}) => colors.text.primary); // CardFooter
const CardFooter = styled.div.withConfig({
displayName: "Pricing4__CardFooter",
componentId: "sc-16tltp4-16"
})(["padding:32px;background-color:#f5f5f5;border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], props => props.theme.card.borderRadius, props => props.theme.card.borderRadius); // FeatureList
const FeatureList = styled.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
const Feature = styled.div.withConfig({
displayName: "Pricing4__Feature",
componentId: "sc-16tltp4-18"
})(["display:flex;align-items:center;"]);
const FeatureSvgWrapper = styled.span.withConfig({
displayName: "Pricing4__FeatureSvgWrapper",
componentId: "sc-16tltp4-19"
})(["color:#389e0d;margin-right:12px;> svg{width:24px;height:24px;}"]);
const FeatureText = styled.span.withConfig({
displayName: "Pricing4__FeatureText",
componentId: "sc-16tltp4-20"
})(["font-size:14px;color:", ";"], ({
theme: {
colors
}
}) => colors.text.primary);
const CardButton = styled(Button).withConfig({
displayName: "Pricing4__CardButton",
componentId: "sc-16tltp4-21"
})(["box-shadow:", ";width:100%;display:block;"], ({
theme
}) => theme.boxShadows.md); // -- End --
// Cta
const Cta = styled.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;}"], props => props.theme.card.borderRadius, ({
theme
}) => theme.mediaQueries.xl);
const CtaBadge = styled.div.withConfig({
displayName: "Pricing4__CtaBadge",
componentId: "sc-16tltp4-23"
})(["margin-bottom:16px;"]);
const CtaBadgeText = styled.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;"], ({
theme: {
colors
}
}) => colors.secondary);
const CtaText = styled.p.withConfig({
displayName: "Pricing4__CtaText",
componentId: "sc-16tltp4-25"
})(["max-width:720px;color:", ";font-size:16px;margin-bottom:16px;", "{margin-bottom:0;}"], ({
theme: {
colors
}
}) => colors.text.primary, ({
theme
}) => theme.mediaQueries.xl);
const CtaLink = styled(Button).withConfig({
displayName: "Pricing4__CtaLink",
componentId: "sc-16tltp4-26"
})(["font-weight:500;box-shadow:", ";"], ({
theme
}) => theme.boxShadows.md); // -- End --
// <= End Dependent styled-components
const 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.createElement(Icon, {
name: "check"
})
}, {
id: 2,
text: 'Interactive practice sessions',
icon: /*#__PURE__*/React.createElement(Icon, {
name: "check"
})
}, {
id: 3,
text: 'Access to new beta features',
icon: /*#__PURE__*/React.createElement(Icon, {
name: "check"
})
}, {
id: 4,
text: 'Dedicated customer success team',
icon: /*#__PURE__*/React.createElement(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.createElement(Icon, {
name: "check"
})
}, {
id: 2,
text: 'Interactive practice sessions',
icon: /*#__PURE__*/React.createElement(Icon, {
name: "check"
})
}, {
id: 3,
text: 'Access to new beta features',
icon: /*#__PURE__*/React.createElement(Icon, {
name: "check"
})
}, {
id: 4,
text: 'Dedicated customer success team',
icon: /*#__PURE__*/React.createElement(Icon, {
name: "check"
})
}],
button: {
text: 'Get Started',
variation: 'fill',
color: 'secondary'
}
}];
const idShape = PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired;
const linkShape = {
href: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
variation: PropTypes.string.isRequired,
color: PropTypes.string
};
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 packageShape = {
id: idShape,
badgeText: PropTypes.string.isRequired,
currency: PropTypes.string.isRequired,
price: PropTypes.string.isRequired,
expireCode: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
features: PropTypes.arrayOf(PropTypes.shape(featureShape)).isRequired,
button: PropTypes.shape(buttonShape).isRequired
};
const ctaShape = {
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
badgeText: PropTypes.string,
link: PropTypes.shape(linkShape)
};
const propTypes = {
/** The subtitle for the pricing section. */
subtitle: PropTypes.string.isRequired,
/** The minor text for the pricing section. */
majorText: PropTypes.string.isRequired,
/** The minor text for the pricing section. */
minorText: PropTypes.string.isRequired,
/** Only 2 price plan can be included in this section UI. */
packages: PropTypes.arrayOf(PropTypes.shape(packageShape)).isRequired,
/** The CTA container will appear below the price section. */
cta: PropTypes.shape(ctaShape)
};
const 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.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.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
*/
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;
}
};
/**
* 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) {
return /*#__PURE__*/React.createElement(Row, null, data.map(item => {
return /*#__PURE__*/React.createElement(ColumnModify, {
key: item.id,
lg: 6
}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(Badge, null, /*#__PURE__*/React.createElement(BadgeText, null, item.badgeText)), /*#__PURE__*/React.createElement(PriceTitle, null, item.currency, item.price, /*#__PURE__*/React.createElement("small", null, "/ ", item.expireCode)), /*#__PURE__*/React.createElement(CardText, null, item.description)), Array.isArray(item.features) && item.features.length > 0 ? /*#__PURE__*/React.createElement(CardFooter, null, /*#__PURE__*/React.createElement(FeatureList, null, item.features.map(feature => {
return /*#__PURE__*/React.createElement("li", {
key: feature.id
}, /*#__PURE__*/React.createElement(Feature, null, /*#__PURE__*/React.createElement(FeatureSvgWrapper, null, renderIcon(feature.icon)), /*#__PURE__*/React.createElement(FeatureText, null, feature.text)));
}), /*#__PURE__*/React.createElement(CardButton, {
href: item.button.href,
color: item.button.color,
variation: item.button.variation
}, item.button.text))) : null));
}));
} else {
return null;
}
};
export const Pricing4 = props => {
const {
subtitle,
majorText,
minorText,
packages,
cta
} = props,
attributes = _objectWithoutProperties(props, ["subtitle", "majorText", "minorText", "packages", "cta"]);
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(PriceSubtitle, null, subtitle), /*#__PURE__*/React.createElement(PriceUpperTitle, null, majorText), /*#__PURE__*/React.createElement(PriceDescription, null, minorText)))), /*#__PURE__*/React.createElement(AreaB, null, /*#__PURE__*/React.createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/React.createElement(PriceBody, null, renderBody(packages), cta ? /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
lg: 12
}, /*#__PURE__*/React.createElement(Cta, null, /*#__PURE__*/React.createElement("div", null, typeof cta.badgeText === 'string' && cta.badgeText.length > 0 ? /*#__PURE__*/React.createElement(CtaBadge, null, /*#__PURE__*/React.createElement(CtaBadgeText, null, cta.badgeText)) : null, /*#__PURE__*/React.createElement(CtaText, null, cta.text)), cta.link ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CtaLink, {
href: cta.link.href,
variation: cta.link.variation,
color: cta.link.color
}, cta.link.text)) : null))) : null))));
};
Pricing4.propTypes = propTypes;
Pricing4.defaultProps = defaultProps;