@lote-design-system/marketing-blocks
Version:
392 lines (379 loc) • 15 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 { 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: "Pricing2__ContainerModify",
componentId: "sc-1t27izu-0"
})(["max-width:", ";"], ({
theme
}) => theme.maxContainerWidth);
const SectionPricing = styled.div.withConfig({
displayName: "Pricing2__SectionPricing",
componentId: "sc-1t27izu-1"
})(["padding:96px 0;"]);
const PricingContent = styled.div.withConfig({
displayName: "Pricing2__PricingContent",
componentId: "sc-1t27izu-2"
})(["text-align:center;margin-bottom:96px;", "{max-width:540px;text-align:left;}"], ({
theme
}) => theme.mediaQueries.xl);
const PricingSubtitle = styled.p.withConfig({
displayName: "Pricing2__PricingSubtitle",
componentId: "sc-1t27izu-3"
})(["color:", ";font-size:24px;font-weight:500;margin-top:0;margin-bottom:4px;"], ({
theme
}) => theme.colors.text.secondary);
const PricingHeading = styled.h3.withConfig({
displayName: "Pricing2__PricingHeading",
componentId: "sc-1t27izu-4"
})(["font-size:48px;color:", ";font-weight:700;margin-bottom:8px;"], ({
theme
}) => theme.colors.secondary);
const PricingDescription = styled.p.withConfig({
displayName: "Pricing2__PricingDescription",
componentId: "sc-1t27izu-5"
})(["margin-bottom:16px;font-size:16px;color:", ";"], ({
theme
}) => theme.colors.text.primary);
const PriceActionButtonGroup = styled.div.withConfig({
displayName: "Pricing2__PriceActionButtonGroup",
componentId: "sc-1t27izu-6"
})(["margin:0 -8px;"]);
const PriceActionButton = styled(Button).withConfig({
displayName: "Pricing2__PriceActionButton",
componentId: "sc-1t27izu-7"
})(["font-size:14px;font-weight:700;padding:16px 48px;margin:8px;"]);
const PlanColumn = styled(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
*/
const cardStyles = no => {
switch (no) {
case 1:
return css(["&{background-color:#fdfdfd;border:1px solid #f5f5f5;}"]);
case 2:
return css(["&{background-color:#ffffff;border:1px solid #f5f5f5;}"]);
default:
return css([""]);
}
};
const Card = styled.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;", ";", ";"], ({
no
}) => {
if (no) {
return cardStyles(no);
}
}, ({
styled
}) => {
if (styled) {
return css(["&{", ";}"], styled);
}
});
const CardBody = styled.div.withConfig({
displayName: "Pricing2__CardBody",
componentId: "sc-1t27izu-10"
})(["padding:48px 32px 64px;"]);
const CardContent1 = styled.div.withConfig({
displayName: "Pricing2__CardContent1",
componentId: "sc-1t27izu-11"
})([""]);
const CardPackageP = styled.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;"], ({
theme
}) => theme.colors.primary);
const CardPriceH1 = styled.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:", ";}"], ({
theme
}) => theme.colors.secondary, ({
theme
}) => theme.colors.text.primary);
const CardPlanFeatures = styled.div.withConfig({
displayName: "Pricing2__CardPlanFeatures",
componentId: "sc-1t27izu-14"
})([""]);
const CardListGroup = styled.div.withConfig({
displayName: "Pricing2__CardListGroup",
componentId: "sc-1t27izu-15"
})(["margin-top:22px;"]);
const CardListHeading = styled.h6.withConfig({
displayName: "Pricing2__CardListHeading",
componentId: "sc-1t27izu-16"
})(["color:", ";font-size:14px;font-weight:600;margin:0;"], ({
theme
}) => theme.colors.primary);
const CardList = styled.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;}"], ({
theme
}) => theme.colors.text.title);
const CardContent2 = styled.div.withConfig({
displayName: "Pricing2__CardContent2",
componentId: "sc-1t27izu-18"
})(["display:flex;margin-top:16px;", "{justify-content:center;}"], ({
theme
}) => theme.mediaQueries.xl);
const CardPriceButton = styled(Button).withConfig({
displayName: "Pricing2__CardPriceButton",
componentId: "sc-1t27izu-19"
})(["padding:16px 48px;font-weight:700;"]); // <= End Dependent styled-components
const linkSchema = [{
id: 1,
href: '/',
variation: 'whiteSecondary',
text: 'How it works'
}, {
id: 2,
href: '/',
variation: 'fill',
text: ' Get Started'
}];
const 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.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access 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,
title: 'SEO / Search Engine',
features: [{
id: 1,
text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access 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: 3,
title: 'Mobile Development',
features: [{
id: 1,
text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access 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: 'PROFESSIONAL',
expireCode: 'mo',
currency: '$',
price: '250',
button: {
text: 'Get Started',
variation: 'whiteSecondary'
},
modules: [{
id: 1,
title: 'Web Development',
features: [{
id: 1,
text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access 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,
title: 'SEO / Search Engine',
features: [{
id: 1,
text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access 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: 3,
title: 'Mobile Development',
features: [{
id: 1,
text: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Unlimited"), " Access 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 idShape = PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired;
const linkShape = {
id: idShape,
text: PropTypes.string.isRequired,
href: 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.oneOfType([PropTypes.string, PropTypes.node]).isRequired
};
const moduleShape = {
id: idShape,
title: PropTypes.string.isRequired,
features: PropTypes.arrayOf(PropTypes.shape(featureShape)).isRequired
};
const packageShape = {
id: idShape,
name: PropTypes.string.isRequired,
expireCode: PropTypes.string.isRequired,
currency: PropTypes.string.isRequired,
price: PropTypes.string.isRequired,
button: PropTypes.shape(buttonShape).isRequired,
modules: PropTypes.arrayOf(PropTypes.shape(moduleShape)).isRequired,
styledCSS: PropTypes.string
};
const propTypes = {
/** The text for the pricing section. */
title: PropTypes.string.isRequired,
/** The sub text for the pricing section. */
subText: PropTypes.string.isRequired,
/** The description for the pricing section. */
description: PropTypes.string.isRequired,
/** An array of packages Note: Only 2 price packages can be included in this section UI. */
packages: PropTypes.arrayOf(PropTypes.shape(packageShape)).isRequired,
/** The link buttons will be displayed at the bottom of the pricing section. */
links: PropTypes.arrayOf(PropTypes.shape(linkShape))
};
const 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
*/
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 data.map((item, index) => {
return /*#__PURE__*/React.createElement(PlanColumn, {
key: item.id,
xl: 3,
lg: 6,
md: 6
}, /*#__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, " ", item.expireCode), Array.isArray(item.modules) && item.modules.length > 0 ? /*#__PURE__*/React.createElement(CardPlanFeatures, null, item.modules.map(item => {
return /*#__PURE__*/React.createElement(CardListGroup, {
key: item.id
}, /*#__PURE__*/React.createElement(CardListHeading, null, item.title), Array.isArray(item.features) && item.features.length > 0 ? /*#__PURE__*/React.createElement(CardList, null, item.features.map(feature => {
return /*#__PURE__*/React.createElement("li", {
key: feature.id
}, feature.text);
})) : null);
})) : null), item.button ? /*#__PURE__*/React.createElement(CardContent2, null, /*#__PURE__*/React.createElement(CardPriceButton, {
href: item.button.href,
variation: item.button.variation,
color: item.button.color
}, item.button.text)) : null)));
});
} else {
return null;
}
};
export const Pricing2 = props => {
const {
title,
subText,
description,
links,
packages
} = props,
attributes = _objectWithoutProperties(props, ["title", "subText", "description", "links", "packages"]);
return /*#__PURE__*/React.createElement(SectionPricing, attributes, /*#__PURE__*/React.createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
xl: 6,
lg: 12
}, /*#__PURE__*/React.createElement(PricingContent, null, /*#__PURE__*/React.createElement(PricingSubtitle, null, subText), /*#__PURE__*/React.createElement(PricingHeading, null, title), /*#__PURE__*/React.createElement(PricingDescription, null, description), links ? /*#__PURE__*/React.createElement(PriceActionButtonGroup, null, links.map(link => {
return /*#__PURE__*/React.createElement(PriceActionButton, {
key: link.id,
href: link.href,
variation: link.variation,
color: link.color
}, link.text);
})) : null)), renderBody(packages))));
};
Pricing2.propTypes = propTypes;
Pricing2.defaultProps = defaultProps;