@automattic/jetpack-components 0.68.2 → 0.69.0

package/build/components/number-slider/index.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import React from 'react';
+import ReactSlider from 'react-slider';
+import './style.scss';
+/**
+ * Generate Number Slider
+ * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
+ *
+ * @param {NumberSliderProps} props - Props
+ * @return {React.ReactElement} - JSX element
+ */
+const NumberSlider = ({ className, maxValue = 100, minValue = 0, step = 1, value, onChange, onBeforeChange, onAfterChange, renderThumb, }) => {
+    const [isThumbHolding, setIsThumbHolding] = React.useState(false);
+    const componentClassName = clsx('jp-components-number-slider', className, {
+        'jp-components-number-slider--is-holding': isThumbHolding,
+    });
+    const onBeforeChangeCallback = beforeValue => {
+        setIsThumbHolding(true);
+        if (typeof onBeforeChange === 'function') {
+            onBeforeChange(beforeValue);
+        }
+    };
+    const onAfterChangeCallback = afterValue => {
+        setIsThumbHolding(false);
+        if (typeof onAfterChange === 'function') {
+            onAfterChange(afterValue);
+        }
+    };
+    const renderThumbCallback = renderThumb
+        ? renderThumb
+        : (props, state) => {
+            const { key, ...otherProps } = props;
+            return (_jsx("div", { ...otherProps, children: state.valueNow }, key));
+        };
+    /**
+     * Type casting to prevent TypeScript error:
+     * TS2604: JSX element type 'ReactSlider' does not have any construct or call signatures.
+     */
+    const TypedReactSlider = ReactSlider;
+    return (_jsx("div", { className: componentClassName, "data-testid": "number-slider", children: _jsx(TypedReactSlider, { className: "jp-components-number-slider__control", thumbClassName: "jp-components-number-slider__thumb", thumbActiveClassName: "jp-components-number-slider__thumb--is-active", trackClassName: "jp-components-number-slider__track", value: value, max: maxValue, min: minValue, step: step, renderThumb: renderThumbCallback, onChange: onChange, onBeforeChange: onBeforeChangeCallback, onAfterChange: onAfterChangeCallback }) }));
+};
+export default NumberSlider;

package/build/components/number-slider/types.d.ts

@@ -0,0 +1,50 @@
+import type { HTMLProps, RefCallback } from 'react';
+interface HTMLPropsWithRefCallback<T> extends HTMLProps<T> {
+    ref: RefCallback<T>;
+}
+export type NumberSliderProps = {
+    /**
+     * The wrapper class name of this NumberSlider component.
+     */
+    className?: string;
+    /**
+     * The maximum value of the slider.
+     */
+    maxValue?: number;
+    /**
+     * The minimum value of the slider.
+     */
+    minValue?: number;
+    /**
+     * The initial value of the slider.
+     */
+    value?: number;
+    /**
+     * The step value of the slider.
+     */
+    step?: number;
+    /**
+     * Callback called on every value change.
+     * The function will be called with two arguments, the first being the new value(s) the second being thumb index.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback called before starting to move a thumb. The callback will only be called if the action will result in a change.
+     * The function will be called with two arguments, the first being the initial value(s) the second being thumb index.
+     */
+    onBeforeChange?: (value: number) => void;
+    /**
+     * Callback called only after moving a thumb has ended. The callback will only be called if the action resulted in a change.
+     * The function will be called with two arguments, the first being the result value(s) the second being thumb index.
+     */
+    onAfterChange?: (value: number) => void;
+    /**
+     * Node to render on the slider.
+     */
+    renderThumb?: (props: HTMLPropsWithRefCallback<HTMLDivElement>, state: {
+        index: number;
+        value: number | ReadonlyArray<number>;
+        valueNow: number;
+    }) => React.JSX.Element | null;
+};
+export {};

package/build/components/number-slider/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/popover/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" resolution-mode="require"/>
+import './style.scss';
+type PopoverProps = {
+    action: React.ReactNode;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+};
+declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/build/components/popover/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './style.scss';
+const Popover = ({ icon, children, action }) => {
+    return (_jsxs("div", { className: "jp-popover", children: [_jsx("div", { className: "jp-popover__icon", children: icon }), _jsx("div", { className: "jp-popover__body", children: children }), _jsx("div", { className: "jp-popover__action", children: action })] }));
+};
+export default Popover;

package/build/components/pricing-card/index.d.ts

@@ -0,0 +1,11 @@
+import type { PricingCardProps } from './types.js';
+import type React from 'react';
+import './style.scss';
+/**
+ * The Pricing card component.
+ *
+ * @param {PricingCardProps} props -- The component props.
+ * @return {React.ReactNode} The rendered component.
+ */
+declare const PricingCard: React.FC<PricingCardProps>;
+export default PricingCard;

package/build/components/pricing-card/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getCurrencyObject } from '@automattic/format-currency';
+import { Button } from '@wordpress/components';
+import { sprintf, __ } from '@wordpress/i18n';
+import { LoadingPlaceholder } from '@automattic/jetpack-components';
+import TermsOfService from '../terms-of-service/index.js';
+import './style.scss';
+/**
+ * Whether or not to display a price's decimal part in the UI.
+ * Needed as `getCurrencyObject` will always return the decimal part populated even if it
+ * doesn't exist.
+ *
+ * @param {CurrencyObject} currencyObject -- A currency object returned from `getCurrencyObject`.
+ * @return {boolean} Whether or not to display the price decimal part.
+ */
+const showPriceDecimals = (currencyObject) => {
+    return currencyObject.fraction.indexOf('00') === -1;
+};
+/**
+ * The Pricing card component.
+ *
+ * @param {PricingCardProps} props -- The component props.
+ * @return {React.ReactNode} The rendered component.
+ */
+const PricingCard = ({ currencyCode = 'USD', priceDetails = __('/month, paid yearly', 'jetpack-components'), ...props }) => {
+    const currencyObjectBefore = getCurrencyObject(props.priceBefore, currencyCode);
+    const currencyObjectAfter = getCurrencyObject(props.priceAfter, currencyCode);
+    return (_jsxs("div", { className: "jp-components__pricing-card", children: [props.icon && (_jsx("div", { className: "jp-components__pricing-card__icon", children: 'string' === typeof props.icon ? (_jsx("img", { src: props.icon, alt: sprintf(
+                    /* translators: placeholder is a product name */
+                    __('Icon for the product %s', 'jetpack-components'), props.title) })) : (props.icon) })), _jsx("h1", { className: "jp-components__pricing-card__title", children: props.title }), _jsxs("div", { className: "jp-components__pricing-card__pricing", children: [props.priceAfter === 0 && _jsx(LoadingPlaceholder, { width: "100%", height: 48 }), props.priceBefore !== props.priceAfter && props.priceAfter > 0 && (_jsxs("div", { className: "jp-components__pricing-card__price-before", children: [_jsx("span", { className: "jp-components__pricing-card__currency", children: currencyObjectBefore.symbol }), _jsx("span", { className: "jp-components__pricing-card__price", children: currencyObjectBefore.integer }), showPriceDecimals(currencyObjectBefore) && (_jsxs("span", { className: "jp-components__pricing-card__price-decimal", children: [' ', currencyObjectBefore.fraction] })), _jsx("div", { className: "jp-components__pricing-card__price-strikethrough" })] })), props.priceAfter > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "jp-components__pricing-card__price-after", children: [_jsx("span", { className: "jp-components__pricing-card__currency", children: currencyObjectAfter.symbol }), _jsx("span", { className: "jp-components__pricing-card__price", children: currencyObjectAfter.integer }), showPriceDecimals(currencyObjectAfter) && (_jsx("span", { className: "jp-components__pricing-card__price-decimal", children: currencyObjectAfter.fraction }))] }), _jsx("span", { className: "jp-components__pricing-card__price-details", children: priceDetails })] }))] }), props.children && (_jsx("div", { className: "jp-components__pricing-card__extra-content-wrapper", children: props.children })), props.tosText && _jsx("div", { className: "jp-components__pricing-card__tos", children: props.tosText }), props.ctaText && (_jsxs(_Fragment, { children: [!props.tosText && (_jsx("div", { className: "jp-components__pricing-card__tos", children: _jsx(TermsOfService, { agreeButtonLabel: props.ctaText }) })), _jsx("div", { className: "jp-components__pricing-card__cta", children: _jsx(Button, { className: "jp-components__pricing-card__button", label: props.ctaText, onClick: props.onCtaClick, children: props.ctaText }) })] })), props.infoText && (_jsx("div", { className: "jp-components__pricing-card__info", children: props.infoText }))] }));
+};
+export default PricingCard;

package/build/components/pricing-card/types.d.ts

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { Button } from '@wordpress/components';
+import type React from 'react';
+export type PricingCardProps = {
+    /**
+     * The Title.
+     */
+    title: string;
+    /**
+     * The Icon.
+     */
+    icon?: string | React.ReactNode;
+    /**
+     * Price before discount.
+     */
+    priceBefore: number;
+    /**
+     * Price after discount.
+     */
+    priceAfter: number;
+    /**
+     * Price details.
+     */
+    priceDetails?: string;
+    /**
+     * The Currency code, eg 'USD'.
+     */
+    currencyCode?: string;
+    /**
+     * The CTA copy.
+     */
+    ctaText?: string;
+    /**
+     * The CTA callback to be called on click.
+     */
+    onCtaClick?: React.ComponentProps<typeof Button>['onClick'];
+    /**
+     * Optional informative text.
+     */
+    infoText?: React.ReactNode;
+    /**
+     * The TOS copy.
+     */
+    tosText?: React.ReactNode;
+    /**
+     * Optional Child nodes
+     */
+    children?: React.ReactNode;
+};

package/build/components/pricing-card/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/pricing-table/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PricingTableProps, PricingTableColumnProps, PricingTableHeaderProps, PricingTableItemProps } from './types.js';
+export declare const PricingTableItem: React.FC<PricingTableItemProps>;
+export declare const PricingTableHeader: React.FC<PricingTableHeaderProps>;
+export declare const PricingTableColumn: React.FC<PricingTableColumnProps>;
+declare const PricingTable: React.FC<PricingTableProps>;
+export default PricingTable;

package/build/components/pricing-table/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, check, closeSmall } from '@wordpress/icons';
+import clsx from 'clsx';
+import { createContext, useContext, Children, cloneElement, } from 'react';
+import IconTooltip from '../icon-tooltip/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import TermsOfService from '../terms-of-service/index.js';
+import Text from '../text/index.js';
+import styles from './styles.module.scss';
+const INCLUDED_TEXT = __('Included', 'jetpack-components');
+const NOT_INCLUDED_TEXT = __('Not included', 'jetpack-components');
+const COMING_SOON_TEXT = __('Coming soon', 'jetpack-components');
+const PricingTableContext = createContext(undefined);
+const getItemLabels = (isComingSoon, isIncluded, featureNameLabel) => {
+    if (isComingSoon) {
+        return {
+            lg: COMING_SOON_TEXT,
+            // translators: Name of the current feature
+            default: sprintf(__('%s coming soon', 'jetpack-components'), featureNameLabel),
+        };
+    }
+    return {
+        lg: isIncluded ? INCLUDED_TEXT : NOT_INCLUDED_TEXT,
+        default: isIncluded
+            ? featureNameLabel
+            : sprintf(
+            /* translators: Name of the current feature */
+            __('%s not included', 'jetpack-components'), featureNameLabel),
+    };
+};
+export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, index = 0, label = null, tooltipInfo, tooltipTitle, tooltipClassName = '', }) => {
+    const [isLg] = useBreakpointMatch('lg');
+    const item = useContext(PricingTableContext)[index];
+    const showTick = isComingSoon || isIncluded;
+    const featureNameLabel = item.name;
+    const defaultTooltipInfo = item.tooltipInfo;
+    const defaultTooltipTitle = item.tooltipTitle;
+    const showTooltip = tooltipInfo || (!isLg && defaultTooltipInfo);
+    const labels = getItemLabels(isComingSoon, isIncluded, featureNameLabel);
+    const defaultLabel = isLg ? labels.lg : labels.default;
+    return (_jsxs("div", { className: clsx(styles.item, styles.value), children: [_jsx(Icon, { className: clsx(styles.icon, showTick ? styles['icon-check'] : styles['icon-cross']), size: 32, icon: showTick ? check : closeSmall }), _jsx(Text, { variant: "body-small", children: label || defaultLabel }), showTooltip && (_jsx(IconTooltip, { title: tooltipTitle ? tooltipTitle : defaultTooltipTitle, iconClassName: styles['popover-icon'], className: clsx(styles.popover, tooltipClassName), placement: 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(tooltipTitle && tooltipInfo), children: _jsx(Text, { variant: "body-small", component: "div", children: tooltipInfo || defaultTooltipInfo }) }))] }));
+};
+export const PricingTableHeader = ({ children }) => (_jsx("div", { className: styles.header, children: children }));
+export const PricingTableColumn = ({ primary = false, children, }) => {
+    let index = 0;
+    return (_jsx("div", { className: clsx(styles.card, { [styles['is-primary']]: primary }), children: Children.map(children, child => {
+            const item = child;
+            if (item.type === PricingTableItem) {
+                index++;
+                return cloneElement(item, { index: index - 1 });
+            }
+            return item;
+        }) }));
+};
+const PricingTable = ({ title, items, children, showIntroOfferDisclaimer = false, }) => {
+    const [isLg] = useBreakpointMatch('lg');
+    return (_jsxs(PricingTableContext.Provider, { value: items, children: [_jsx("div", { className: clsx(styles.container, { [styles['is-viewport-large']]: isLg }), style: {
+                    '--rows': items.length + 1,
+                    '--columns': Children.toArray(children).length + 1,
+                }, children: _jsxs("div", { className: styles.table, children: [_jsx(Text, { variant: "headline-small", children: title }), isLg &&
+                            items.map((item, i) => (_jsxs("div", { className: clsx(styles.item, {
+                                    [styles['last-feature']]: i === items.length - 1,
+                                }), children: [_jsx(Text, { variant: "body-small", children: _jsx("strong", { children: item.name }) }), item.tooltipInfo && (_jsx(IconTooltip, { title: item.tooltipTitle, iconClassName: styles['popover-icon'], className: styles.popover, placement: item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(item.tooltipTitle && item.tooltipInfo), children: _jsx(Text, { variant: "body-small", children: item.tooltipInfo }) }))] }, i))), children] }) }), _jsx("div", { className: styles['tos-container'], children: _jsxs("div", { className: styles.tos, children: [showIntroOfferDisclaimer && (_jsx(Text, { variant: "body-small", children: __('Reduced pricing is a limited offer for the first year and renews at regular price.', 'jetpack-components') })), _jsx(TermsOfService, { multipleButtons: true })] }) })] }));
+};
+export default PricingTable;

package/build/components/pricing-table/types.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { Placement } from '../icon-tooltip/types.js';
+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;
+    tooltipInfo?: React.ReactNode;
+    /**
+     * Title for the popover, not required.
+     */
+    tooltipTitle?: string;
+    /**
+     * Class name for the popover, not required.
+     */
+    tooltipClassName?: string;
+};

package/build/components/pricing-table/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/product-offer/icons-card.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IconsCardProps } from './types.js';
+/**
+ * Icons composition for a bundle product,
+ * based on the list of supported products.
+ *
+ * @param {IconsCardProps} props - Component props.
+ * @return {React.ReactNode}      Bundle product icons react component.
+ */
+export declare const IconsCard: React.FC<IconsCardProps>;

package/build/components/product-offer/icons-card.js

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

package/build/components/product-offer/index.d.ts

@@ -0,0 +1,11 @@
+import { ProductOfferProps } from './types.js';
+import type React from 'react';
+/**
+ * Product Detail component.
+ *
+ * @param {ProductOfferProps} props - Component props.
+ * @return {React.ReactNode} - ProductOffer react component.
+ */
+declare const ProductOffer: React.FC<ProductOfferProps>;
+export default ProductOffer;
+export * from './icons-card.js';

package/build/components/product-offer/index.js

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

package/build/components/product-offer/product-offer-header.d.ts

@@ -0,0 +1,9 @@
+import { ProductOfferHeaderProps } from './types.js';
+import type React from 'react';
+/**
+ * Product Detail Card Header component.
+ *
+ * @param {ProductOfferHeaderProps} props - Component props.
+ * @return {React.ReactNode}  ProductOfferHeader react component.
+ */
+export declare const ProductOfferHeader: React.FC<ProductOfferHeaderProps>;

package/build/components/product-offer/product-offer-header.js

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

package/build/components/product-offer/types.d.ts

@@ -0,0 +1,102 @@
+/// <reference types="react" resolution-mode="require"/>
+import { ProductPriceProps } from '../product-price/types.js';
+import type { JetpackIconSlug } from '../icons/index.js';
+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/build/components/product-offer/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/product-price/index.d.ts

@@ -0,0 +1,11 @@
+import type { ProductPriceProps } from './types.js';
+import type React from 'react';
+/**
+ * React component to render the price.
+ *
+ * @param {ProductPriceProps} props - Component props.
+ * @return {React.ReactNode} Price react component.
+ */
+declare const ProductPrice: React.FC<ProductPriceProps>;
+export default ProductPrice;
+export * from './price.js';

package/build/components/product-price/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+/*
+ * Internal dependencies
+ */
+import Text from '../text/index.js';
+import { Price } from './price.js';
+import styles from './style.module.scss';
+/**
+ * React component to render the price.
+ *
+ * @param {ProductPriceProps} props - Component props.
+ * @return {React.ReactNode} Price react component.
+ */
+const ProductPrice = ({ price, offPrice, currency = '', showNotOffPrice = true, hideDiscountLabel = true, promoLabel = '', legend = __('/month, paid yearly', 'jetpack-components'), 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-components') : null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.container, children: _jsxs("div", { className: clsx(styles['price-container'], 'product-price_container'), children: [_jsx(Price, { value: offPrice ?? price, currency: currency, isOff: !isNotConvenientPrice, hidePriceFraction: hidePriceFraction }), showNotOffPrice && (_jsx(Price, { value: price, currency: currency, isOff: false, hidePriceFraction: hidePriceFraction })), discountElt && (_jsx(Text, { className: clsx(styles['promo-label'], 'product-price_promo_label'), children: discountElt }))] }) }), _jsxs("div", { className: styles.footer, children: [children ? (children) : (_jsx(Text, { className: clsx(styles.legend, 'product-price_legend'), children: legend })), promoLabel && (_jsx(Text, { className: clsx(styles['promo-label'], 'product-price_promo_label'), children: promoLabel }))] })] }));
+};
+export default ProductPrice;
+export * from './price.js';

package/build/components/product-price/price.d.ts

@@ -0,0 +1,9 @@
+import type { PriceProps } from './types.js';
+import type React from 'react';
+/**
+ * React component to render a Price composition.
+ *
+ * @param {PriceProps} props - Component props.
+ * @return {React.ReactNode} -Price react component.
+ */
+export declare const Price: React.FC<PriceProps>;