@automattic/jetpack-components 0.39.0

package/components/pricing-table/types.ts

@@ -0,0 +1,84 @@
+import type { Placement } from '../icon-tooltip/types';
+
+export type PricingTableProps = {
+	/**
+	 * Title of the pricing table.
+	 */
+	title: string;
+
+	/**
+	 * Array of items to display in the pricing table.
+	 */
+	items: {
+		name: string;
+		tooltipInfo?: React.ReactNode;
+		tooltipTitle?: string;
+		tooltipPlacement?: Placement;
+	}[];
+
+	/**
+	 * The columns to add to the table.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * Whether to show the intro offer disclaimer text with the ToS.
+	 */
+	showIntroOfferDisclaimer?: boolean;
+};
+
+export type PricingTableColumnProps = {
+	/**
+	 * Whether the column has the primary style.
+	 */
+	primary?: boolean;
+
+	/**
+	 * Items to show in a column.
+	 */
+	children: React.ReactElement[];
+};
+
+export type PricingTableHeaderProps = {
+	/**
+	 * Items to show in a header.
+	 */
+	children: React.ReactNode;
+};
+
+export type PricingTableItemProps = {
+	/**
+	 * Whether or not the item is included in the column.
+	 */
+	isIncluded: boolean;
+
+	/**
+	 * Whether the feature is coming soon. Takes precedence over isIncluded.
+	 */
+	isComingSoon?: boolean;
+
+	/**
+	 * A custom label to display instead of the default one.
+	 */
+	label?: string | number | React.ReactElement;
+
+	/**
+	 * Index of the item, relative to other PricingTableItem components. Internal use only.
+	 */
+	index?: number;
+
+	/*
+	 * If the item has more description a popover info can contain that.
+	 */
+	tooltipInfo?: React.ReactNode;
+
+	/**
+	 * Title for the popover, not required.
+	 */
+	tooltipTitle?: string;
+
+	/**
+	 * Class name for the popover, not required.
+	 */
+	tooltipClassName?: string;
+};

package/components/product-offer/icons-card.tsx

@@ -0,0 +1,47 @@
+import { Icon, plus } from '@wordpress/icons';
+import React, { Fragment } from 'react';
+import { getIconBySlug } from '../icons/index';
+import styles from './style.module.scss';
+import { IconsCardProps } from './types';
+
+/**
+ * Icons composition for a bundle product,
+ * based on the list of supported products.
+ *
+ * @param {IconsCardProps} props         - Component props.
+ * @returns {React.ReactNode}      Bundle product icons react component.
+ */
+export const IconsCard: React.FC< IconsCardProps > = ( { products, icon, size = 24 } ) => {
+	if ( icon ) {
+		const CustomIcon = getIconBySlug( icon );
+		return (
+			<div className={ styles[ 'product-bundle-icons' ] }>
+				<CustomIcon size={ size } />
+			</div>
+		);
+	}
+
+	return (
+		<div className={ styles[ 'product-bundle-icons' ] }>
+			{ products.map( ( product, index ) => {
+				const ProductIcon = getIconBySlug( product );
+				const ProIcon = ProductIcon ? ProductIcon : () => null;
+
+				return (
+					<Fragment key={ index }>
+						<ProIcon size={ size } />
+
+						{ index !== products.length - 1 && (
+							<Icon
+								className={ styles[ 'plus-icon' ] }
+								key={ `icon-plugs${ index * 2 + 1 }` }
+								icon={ plus }
+								size={ 16 }
+							/>
+						) }
+					</Fragment>
+				);
+			} ) }
+		</div>
+	);
+};

package/components/product-offer/index.tsx

@@ -0,0 +1,115 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, check } from '@wordpress/icons';
+import classnames from 'classnames';
+import Alert from '../alert';
+import Button from '../button/index';
+import { CheckmarkIcon } from '../icons/index';
+import ProductPrice from '../product-price/index';
+import Text, { H3, Title } from '../text/index';
+import { IconsCard } from './icons-card';
+import { ProductOfferHeader } from './product-offer-header';
+import styles from './style.module.scss';
+import { ProductOfferProps } from './types';
+import type React from 'react';
+
+/**
+ * Product Detail component.
+ *
+ * @param {ProductOfferProps} props - Component props.
+ * @returns {React.ReactNode} - ProductOffer react component.
+ */
+const ProductOffer: React.FC< ProductOfferProps > = ( {
+	addProductUrl,
+	buttonDisclaimer,
+	buttonText = '',
+	className,
+	description,
+	error = '',
+	features,
+	hasRequiredPlan,
+	icon,
+	isBundle = false,
+	isCard,
+	isLoading,
+	onAdd,
+	pricing = {},
+	slug,
+	subTitle = '',
+	supportedProducts,
+	title = '',
+} ) => {
+	const { isFree, price, currency, offPrice } = pricing;
+	const needsPurchase = ! isFree && ! hasRequiredPlan;
+
+	const defautlButtonText = sprintf(
+		/* translators: placeholder is product name. */
+		__( 'Add %s', 'jetpack' ),
+		title
+	);
+
+	return (
+		<div
+			className={ classnames( styles.wrapper, className, {
+				[ styles[ 'is-bundle-card' ] ]: isBundle,
+				[ styles[ 'is-card' ] ]: isCard || isBundle, // is card when is bundle.
+			} ) }
+		>
+			{ isBundle && <ProductOfferHeader /> }
+
+			<div className={ styles[ 'card-container' ] }>
+				<IconsCard
+					icon={ icon }
+					products={ supportedProducts?.length ? supportedProducts : [ slug ] }
+					size={ 32 }
+				/>
+				<H3>{ title }</H3>
+				{ subTitle && <Title mb={ 3 }>{ subTitle }</Title> }
+				{ description && <Text mb={ 3 }>{ description }</Text> }
+
+				<ul className={ styles.features }>
+					{ features.map( ( feature, id ) => (
+						<Text component="li" key={ `feature-${ id }` } variant="body">
+							<Icon icon={ check } size={ 24 } className={ styles.check } />
+							{ feature }
+						</Text>
+					) ) }
+				</ul>
+
+				{ needsPurchase && (
+					<ProductPrice price={ price } offPrice={ offPrice } currency={ currency } />
+				) }
+
+				{ isFree && <H3>{ __( 'Free', 'jetpack' ) }</H3> }
+
+				<Alert level="error" showIcon={ !! error }>
+					{ error }
+				</Alert>
+
+				{ buttonDisclaimer }
+
+				{ ( ! isBundle || ( isBundle && ! hasRequiredPlan ) ) && (
+					<Button
+						onClick={ addProductUrl ? null : onAdd }
+						isLoading={ isLoading }
+						disabled={ isLoading }
+						variant={ isLoading || ! isBundle ? 'primary' : 'secondary' }
+						className={ styles[ 'add-button' ] }
+						{ ...( addProductUrl ? { href: addProductUrl } : {} ) }
+					>
+						{ buttonText || defautlButtonText }
+					</Button>
+				) }
+
+				{ isBundle && hasRequiredPlan && (
+					<div className={ styles[ 'product-has-required-plan' ] }>
+						<CheckmarkIcon size={ 36 } />
+						<Text>{ __( 'Active on your site', 'jetpack' ) }</Text>
+					</div>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default ProductOffer;
+export * from './icons-card';

package/components/product-offer/product-offer-header.tsx

@@ -0,0 +1,23 @@
+import { __ } from '@wordpress/i18n';
+import { Icon, starFilled as star } from '@wordpress/icons';
+import Text from '../text/index';
+import styles from './style.module.scss';
+import { ProductOfferHeaderProps } from './types';
+import type React from 'react';
+
+/**
+ * Product Detail Card Header component.
+ *
+ * @param {ProductOfferHeaderProps} props - Component props.
+ * @returns {React.ReactNode}  ProductOfferHeader react component.
+ */
+export const ProductOfferHeader: React.FC< ProductOfferHeaderProps > = ( {
+	title = __( 'Popular upgrade', 'jetpack' ),
+} ) => {
+	return (
+		<div className={ styles[ 'card-header' ] }>
+			<Icon icon={ star } className={ styles[ 'product-bundle-icon' ] } size={ 24 } />
+			<Text variant="label">{ title }</Text>
+		</div>
+	);
+};

package/components/product-offer/stories/index.stories.tsx

@@ -0,0 +1,104 @@
+import ProductOffer from '..';
+import { IconsCard } from '../icons-card';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Product Offer',
+	component: ProductOffer,
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		layout: 'centered',
+	},
+} as ComponentMeta< typeof ProductOffer >;
+
+const Template: ComponentStory< typeof ProductOffer > = args => <ProductOffer { ...args } />;
+
+export const SecurityBundle = Template.bind( {} );
+SecurityBundle.parameters = {};
+SecurityBundle.args = {
+	slug: 'security',
+	icon: '',
+	name: 'Security',
+	title: 'Security',
+	subTitle: '',
+	description: 'Comprehensive site security, including Backup, Scan, and Anti-spam.',
+	isBundle: true,
+	isCard: true,
+	supportedProducts: [ 'backup', 'scan', 'anti-spam' ],
+	features: [
+		'Real-time cloud backups with 10GB storage',
+		'Automated real-time malware scan',
+		'One-click fixes for most threats',
+		'Comment & form spam protection',
+	],
+	pricing: {
+		currency: 'USD',
+		price: 24.92,
+		offPrice: 12.42,
+	},
+	buttonText: '',
+	addProductUrl: '',
+	hasRequiredPlan: false,
+	isLoading: false,
+	error: '',
+};
+
+export const JetpackBackup = Template.bind( {} );
+JetpackBackup.parameters = {};
+JetpackBackup.args = {
+	slug: 'backup',
+	icon: '',
+	name: 'Backup',
+	title: 'Jepack Backup',
+	subTitle: '',
+	description:
+		'Never lose a word, image, page, or time worrying about your site with automated backups & one-click restores.',
+	features: [
+		'Real-time cloud backups',
+		'10GB of backup storage',
+		'30-day archive & activity log',
+		'One-click restores',
+	],
+	isBundle: false,
+	isCard: true,
+	pricing: {
+		currency: 'USD',
+		price: 9.66,
+		offPrice: 3.95,
+	},
+	addProductUrl: '',
+	hasRequiredPlan: false,
+	isLoading: false,
+};
+
+export const JetpackProtect = Template.bind( {} );
+JetpackProtect.parameters = {};
+JetpackProtect.args = {
+	slug: 'protect',
+	icon: 'jetpack',
+	title: 'Protect',
+	subTitle: 'Protect your site and scan for security vulnerabilities listed in our database.',
+	features: [
+		'Over 20,000 listed vulnerabilities',
+		'Daily automatic scans',
+		'Check plugin and theme version status',
+		'Easy to navigate and use',
+	],
+	isBundle: false,
+	isCard: true,
+	pricing: {
+		isFree: true,
+	},
+	addProductUrl: '',
+	hasRequiredPlan: false,
+	isLoading: false,
+};
+
+const IconsCardTemplate: ComponentStory< typeof IconsCard > = args => <IconsCard { ...args } />;
+
+export const IconsCardStory = IconsCardTemplate.bind( {} );
+IconsCardStory.parameters = {};
+IconsCardStory.args = {
+	products: [ 'backup', 'scan', 'anti-spam' ],
+};
+IconsCardStory.storyName = 'Icons Card';

package/components/product-offer/style.module.scss

@@ -0,0 +1,93 @@
+.wrapper {
+	padding: calc( var( --spacing-base ) * 8 );
+	position: relative;
+}
+
+.is-card {
+	background-color: var( --jp-white );
+	border: 1px solid var( --jp-gray );
+	border-radius: var( --jp-border-radius );
+	box-shadow: 0 2px 6px var( --product-card-shadow ), 0 1px 2px var( --product-card-shadow );
+
+	.card-header {
+		border-radius: var( --jp-border-radius ) var( --jp-border-radius ) 0 0;
+	}
+}
+
+.card-header {
+	display: flex;
+	align-items: center;
+	background: var( --jp-black );
+	color: var( --jp-white );
+	padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base );
+	line-height: calc( var( --spacing-base ) * 3 );
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.card-container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.product-bundle-icon {
+	fill: var( --jp-white );
+	margin-right: var( --spacing-base );
+}
+
+.product-bundle-icons,
+.product-icon {
+	display: flex;
+	align-items: center;
+	margin-bottom: calc( var( --spacing-base ) * 4 );
+}
+
+.plus-icon {
+	fill: rgb(140, 143, 148);
+	height: 24px;
+	line-height: 24px;
+}
+
+.features {
+	margin: 0;
+	padding: 0;
+	flex-grow: 1;
+	margin-bottom: calc( var( --spacing-base ) * 2 );
+
+	li {
+		list-style: none;
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: var( --spacing-base );
+	}
+
+	.check {
+		fill: var( --jp-green-primary );
+		margin-right: var( --spacing-base );
+		flex-shrink: 0;
+	}
+}
+
+.product-has-required-plan {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	svg {
+		margin-right: var( --spacing-base );
+	}
+}
+
+.add-button {
+	width: 100%;
+	justify-content: center;
+	
+	&:global(.is-primary):disabled {
+		opacity: 1;
+		background-color: var( --jp-black );
+	}
+}

package/components/product-offer/types.ts

@@ -0,0 +1,125 @@
+import { ProductPriceProps } from '../product-price/types';
+import type { JetpackIconSlug } from '../icons';
+
+export type ProductOfferProps = {
+	/**
+	 * Product slug.
+	 */
+	slug?: JetpackIconSlug;
+
+	/**
+	 * Product name.
+	 */
+	name?: string;
+
+	/**
+	 * Custom Icon slug.
+	 */
+	icon?: JetpackIconSlug;
+
+	/**
+	 * Product title.
+	 */
+	title?: string;
+
+	/**
+	 * Product sub-title.
+	 */
+	subTitle?: string;
+
+	/**
+	 * Product description.
+	 */
+	description?: string;
+
+	/**
+	 * Features list of the product.
+	 */
+	features?: Array< string >;
+
+	/**
+	 * Add the styles to look like a card.
+	 */
+	isCard?: boolean;
+
+	/**
+	 * Whether or not the product is a bundle.
+	 */
+	isBundle?: boolean;
+
+	/**
+	 * List of supported products (for bundles).
+	 */
+	supportedProducts?: Array< JetpackIconSlug >;
+
+	/**
+	 * Product Pricing object.
+	 */
+	pricing?: Pricing;
+
+	/**
+	 * Whether or not the product has the required plan.
+	 */
+	hasRequiredPlan?: boolean;
+
+	/**
+	 * Applies the isLoading style to the component.
+	 */
+	isLoading?: boolean;
+
+	/**
+	 * A className to be concat with default ones.
+	 */
+	className?: string;
+
+	/**
+	 * Callback function to be executed on click on Add button.
+	 */
+	onAdd?: VoidFunction;
+
+	/**
+	 * The checkout URL to add/buy the product.
+	 */
+	addProductUrl?: string;
+
+	/**
+	 * The text to be displayed on the Add button.
+	 */
+	buttonText?: string;
+
+	/**
+	 * Content displayed below the Add button.
+	 */
+	buttonDisclaimer?: React.ReactNode;
+
+	/**
+	 * Error message.
+	 */
+	error?: string;
+};
+
+export type Pricing = Pick< ProductPriceProps, 'currency' | 'offPrice' | 'price' > & {
+	/**
+	 * Whether it is a free product
+	 */
+	isFree?: boolean;
+};
+
+export type IconsCardProps = {
+	/**
+	 * Custom icon slug.
+	 */
+	icon: JetpackIconSlug;
+
+	/**
+	 * List of supported products.
+	 */
+	products: Array< JetpackIconSlug >;
+
+	/**
+	 * Icon size.
+	 */
+	size: number;
+};
+
+export type ProductOfferHeaderProps = Pick< ProductOfferProps, 'title' >;

package/components/product-price/index.tsx

@@ -0,0 +1,90 @@
+/*
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+/*
+ * Internal dependencies
+ */
+import Text from '../text';
+import { Price } from './price';
+import styles from './style.module.scss';
+import type { ProductPriceProps } from './types';
+import type React from 'react';
+
+/**
+ * React component to render the price.
+ *
+ * @param {ProductPriceProps} props - Component props.
+ * @returns {React.ReactNode} Price react component.
+ */
+const ProductPrice: React.FC< ProductPriceProps > = ( {
+	price,
+	offPrice,
+	currency = '',
+	showNotOffPrice = true,
+	hideDiscountLabel = true,
+	promoLabel = '',
+	legend = __( '/month, paid yearly', 'jetpack' ),
+	isNotConvenientPrice = false,
+	hidePriceFraction = false,
+	children,
+} ) => {
+	if ( ( price == null && offPrice == null ) || ! currency ) {
+		return null;
+	}
+
+	showNotOffPrice = showNotOffPrice && offPrice != null;
+
+	const discount =
+		typeof price === 'number' && typeof offPrice === 'number'
+			? Math.floor( ( ( price - offPrice ) / price ) * 100 )
+			: 0;
+
+	const showDiscountLabel = ! hideDiscountLabel && discount && discount > 0;
+
+	const discountElt = showDiscountLabel ? discount + __( '% off', 'jetpack' ) : null;
+
+	return (
+		<>
+			<div className={ styles.container }>
+				<div className={ classnames( styles[ 'price-container' ], 'product-price_container' ) }>
+					<Price
+						value={ offPrice ?? price }
+						currency={ currency }
+						isOff={ ! isNotConvenientPrice }
+						hidePriceFraction={ hidePriceFraction }
+					/>
+					{ showNotOffPrice && (
+						<Price
+							value={ price }
+							currency={ currency }
+							isOff={ false }
+							hidePriceFraction={ hidePriceFraction }
+						/>
+					) }
+				</div>
+			</div>
+			<div className={ styles.footer }>
+				{ children ? (
+					children
+				) : (
+					<Text className={ classnames( styles.legend, 'product-price_legend' ) }>{ legend }</Text>
+				) }
+				{ promoLabel && (
+					<Text className={ classnames( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
+						{ promoLabel }
+					</Text>
+				) }
+				{ discountElt && (
+					<Text className={ classnames( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
+						{ discountElt }
+					</Text>
+				) }
+			</div>
+		</>
+	);
+};
+
+export default ProductPrice;
+export * from './price';