@automattic/jetpack-components 0.68.2 → 0.69.1

package/build/components/threats-data-views/index.js

@@ -0,0 +1,413 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getThreatType } from '@automattic/jetpack-scan';
+import { DataViews, filterSortAndPaginate, } from '@wordpress/dataviews';
+import { dateI18n } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { useCallback, useMemo, useState } from 'react';
+import Badge from '../badge/index.js';
+import ThreatFixerButton from '../threat-fixer-button/index.js';
+import ThreatSeverityBadge from '../threat-severity-badge/index.js';
+import { THREAT_ACTION_FIX, THREAT_ACTION_IGNORE, THREAT_ACTION_UNIGNORE, THREAT_FIELD_AUTO_FIX, THREAT_FIELD_DESCRIPTION, THREAT_FIELD_EXTENSION, THREAT_FIELD_FIRST_DETECTED, THREAT_FIELD_FIXED_ON, THREAT_FIELD_ICON, THREAT_FIELD_PLUGIN, THREAT_FIELD_SEVERITY, THREAT_FIELD_SIGNATURE, THREAT_FIELD_STATUS, THREAT_FIELD_THEME, THREAT_FIELD_TITLE, THREAT_FIELD_TYPE, THREAT_ICONS, THREAT_STATUSES, THREAT_TYPES, } from './constants.js';
+import styles from './styles.module.scss';
+import ThreatsStatusToggleGroupControl from './threats-status-toggle-group-control.js';
+/**
+ * DataViews component for displaying security threats.
+ *
+ * @param {object}   props                             - Component props.
+ * @param {Array}    props.data                        - Threats data.
+ * @param {Array}    props.filters                     - Initial DataView filters.
+ * @param {Function} props.onChangeSelection           - Callback function run when an item is selected.
+ * @param {Function} props.onFixThreats                - Threat fix action callback.
+ * @param {Function} props.onIgnoreThreats             - Threat ignore action callback.
+ * @param {Function} props.onUnignoreThreats           - Threat unignore action callback.
+ * @param {Function} props.isThreatEligibleForFix      - Function to determine if a threat is eligible for fixing.
+ * @param {Function} props.isThreatEligibleForIgnore   - Function to determine if a threat is eligible for ignoring.
+ * @param {Function} props.isThreatEligibleForUnignore - Function to determine if a threat is eligible for unignoring.
+ *
+ * @return {JSX.Element} The ThreatsDataViews component.
+ */
+export default function ThreatsDataViews({ data, filters, onChangeSelection, isThreatEligibleForFix, isThreatEligibleForIgnore, isThreatEligibleForUnignore, onFixThreats, onIgnoreThreats, onUnignoreThreats, }) {
+    const baseView = {
+        sort: {
+            field: 'severity',
+            direction: 'desc',
+        },
+        search: '',
+        filters: filters || [],
+        page: 1,
+        perPage: 20,
+    };
+    /**
+     * DataView default layouts.
+     *
+     * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data.
+     *
+     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
+     */
+    const defaultLayouts = {
+        table: {
+            ...baseView,
+            fields: [THREAT_FIELD_SEVERITY, THREAT_FIELD_TYPE, THREAT_FIELD_AUTO_FIX],
+            titleField: THREAT_FIELD_TITLE,
+            descriptionField: THREAT_FIELD_DESCRIPTION,
+            showMedia: false,
+        },
+        list: {
+            ...baseView,
+            fields: [
+                THREAT_FIELD_SEVERITY,
+                THREAT_FIELD_TYPE,
+                THREAT_FIELD_EXTENSION,
+                THREAT_FIELD_SIGNATURE,
+            ],
+            titleField: THREAT_FIELD_TITLE,
+            mediaField: THREAT_FIELD_ICON,
+            showMedia: true,
+        },
+    };
+    /**
+     * DataView view object - configures how the dataset is visible to the user.
+     *
+     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
+     */
+    const [view, setView] = useState({
+        type: 'table',
+        ...defaultLayouts.table,
+    });
+    /**
+     * Compute values from the provided threats data.
+     *
+     * @member {object[]} themes    - List of unique themes included in the threats data.
+     * @member {object[]} plugins   - plugins included in the threats data.
+     * @member {object[]} signatures - List of unique threat signatures.
+     * @member {string[]}    dataFields - List of unique fields.
+     */
+    const { themes, plugins, signatures, dataFields, } = useMemo(() => {
+        return data.reduce((acc, threat) => {
+            // Extensions (Themes and Plugins)
+            if (threat.extension) {
+                switch (threat.extension.type) {
+                    case 'themes':
+                        if (!acc.themes.find(({ value }) => value === threat.extension.slug)) {
+                            acc.themes.push({ value: threat.extension.slug, label: threat.extension.name });
+                        }
+                        break;
+                    case 'plugins':
+                        if (!acc.plugins.find(({ value }) => value === threat.extension.slug)) {
+                            acc.plugins.push({ value: threat.extension.slug, label: threat.extension.name });
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            }
+            // Signatures
+            if (threat.signature) {
+                if (!acc.signatures.find(({ value }) => value === threat.signature)) {
+                    acc.signatures.push({ value: threat.signature, label: threat.signature });
+                }
+            }
+            // Fields
+            const fields = Object.keys(threat);
+            fields.forEach(field => {
+                if (!acc.dataFields.includes(field) &&
+                    threat[field] !== null &&
+                    threat[field] !== undefined) {
+                    acc.dataFields.push(field);
+                }
+            });
+            return acc;
+        }, {
+            themes: [],
+            plugins: [],
+            signatures: [],
+            dataFields: [],
+        });
+    }, [data]);
+    /**
+     * DataView fields - describes the visible items for each record in the dataset.
+     *
+     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
+     */
+    const fields = useMemo(() => {
+        const result = [
+            {
+                id: THREAT_FIELD_TITLE,
+                label: __('Threat', 'jetpack-components'),
+                enableGlobalSearch: true,
+                enableHiding: false,
+                render: ({ item }) => (_jsx("div", { className: styles.threat__title, children: item.title })),
+            },
+            {
+                id: THREAT_FIELD_DESCRIPTION,
+                label: __('Description', 'jetpack-components'),
+                enableGlobalSearch: true,
+                enableHiding: false,
+                render: ({ item }) => (_jsx("div", { className: styles.threat__description, children: item.description })),
+            },
+            {
+                id: THREAT_FIELD_ICON,
+                label: __('Icon', 'jetpack-components'),
+                enableHiding: false,
+                getValue({ item }) {
+                    return getThreatType(item);
+                },
+                render({ item }) {
+                    return (_jsx("div", { className: styles.threat__media, children: _jsx(Icon, { icon: THREAT_ICONS[getThreatType(item)], size: 20 }) }));
+                },
+            },
+            {
+                id: THREAT_FIELD_STATUS,
+                label: __('Status', 'jetpack-components'),
+                elements: THREAT_STATUSES,
+                getValue({ item }) {
+                    if (!item.status) {
+                        return 'current';
+                    }
+                    return (THREAT_STATUSES.find(({ value }) => value === item.status)?.value ?? item.status);
+                },
+                render({ item }) {
+                    if (item.status) {
+                        const status = THREAT_STATUSES.find(({ value }) => value === item.status);
+                        if (status) {
+                            return _jsx(Badge, { variant: status?.variant, children: status.label });
+                        }
+                    }
+                    return _jsx(Badge, { variant: "warning", children: __('Active', 'jetpack-components') });
+                },
+            },
+            {
+                id: THREAT_FIELD_TYPE,
+                label: __('Type', 'jetpack-components'),
+                elements: THREAT_TYPES,
+                getValue({ item }) {
+                    switch (getThreatType(item)) {
+                        case 'core':
+                            return __('WordPress', 'jetpack-components');
+                        case 'plugins':
+                            return __('Plugin', 'jetpack-components');
+                        case 'themes':
+                            return __('Theme', 'jetpack-components');
+                        case 'file':
+                            return __('File', 'jetpack-components');
+                        default:
+                            return __('Unknown', 'jetpack-components');
+                    }
+                },
+            },
+            {
+                id: THREAT_FIELD_EXTENSION,
+                label: __('Extension', 'jetpack-components'),
+                enableGlobalSearch: true,
+                enableHiding: true,
+                getValue({ item }) {
+                    return item.extension ? item.extension.slug : '';
+                },
+                render({ item }) {
+                    return item.extension ? item.extension.name : '';
+                },
+            },
+            {
+                id: THREAT_FIELD_PLUGIN,
+                label: __('Plugin', 'jetpack-components'),
+                enableGlobalSearch: true,
+                enableHiding: false,
+                elements: plugins,
+                getValue({ item }) {
+                    return item.extension ? item.extension.slug : '';
+                },
+            },
+            {
+                id: THREAT_FIELD_THEME,
+                label: __('Theme', 'jetpack-components'),
+                enableGlobalSearch: true,
+                enableHiding: false,
+                elements: themes,
+                getValue({ item }) {
+                    return item.extension ? item.extension.slug : '';
+                },
+            },
+            ...(dataFields.includes('severity')
+                ? [
+                    {
+                        id: THREAT_FIELD_SEVERITY,
+                        label: __('Severity', 'jetpack-components'),
+                        type: 'integer',
+                        getValue({ item }) {
+                            return item.severity ?? 0;
+                        },
+                        render({ item }) {
+                            return _jsx(ThreatSeverityBadge, { severity: item.severity });
+                        },
+                    },
+                ]
+                : []),
+            ...(dataFields.includes('signature')
+                ? [
+                    {
+                        id: THREAT_FIELD_SIGNATURE,
+                        label: __('Signature', 'jetpack-components'),
+                        elements: signatures,
+                        enableGlobalSearch: true,
+                        getValue({ item }) {
+                            return item.signature || '';
+                        },
+                    },
+                ]
+                : []),
+            ...(dataFields.includes('firstDetected')
+                ? [
+                    {
+                        id: THREAT_FIELD_FIRST_DETECTED,
+                        label: __('First Detected', 'jetpack-components'),
+                        type: 'datetime',
+                        getValue({ item }) {
+                            return item.firstDetected ? new Date(item.firstDetected) : null;
+                        },
+                        render({ item }) {
+                            return item.firstDetected ? (_jsx("span", { className: styles.threat__firstDetected, children: dateI18n('F j Y', item.firstDetected, false) })) : null;
+                        },
+                    },
+                ]
+                : []),
+            ...(dataFields.includes('fixedOn')
+                ? [
+                    {
+                        id: THREAT_FIELD_FIXED_ON,
+                        label: __('Fixed On', 'jetpack-components'),
+                        type: 'datetime',
+                        getValue({ item }) {
+                            return item.fixedOn ? new Date(item.fixedOn) : null;
+                        },
+                        render({ item }) {
+                            return item.fixedOn ? (_jsx("span", { className: styles.threat__fixedOn, children: dateI18n('F j Y', item.fixedOn, false) })) : null;
+                        },
+                    },
+                ]
+                : []),
+            ...(dataFields.includes('fixable')
+                ? [
+                    {
+                        id: THREAT_FIELD_AUTO_FIX,
+                        label: __('Auto-fix', 'jetpack-components'),
+                        enableHiding: false,
+                        elements: [
+                            {
+                                value: 'yes',
+                                label: __('Yes', 'jetpack-components'),
+                            },
+                            {
+                                value: 'no',
+                                label: __('No', 'jetpack-components'),
+                            },
+                        ],
+                        getValue({ item }) {
+                            return item.fixable ? 'yes' : 'no';
+                        },
+                        render({ item }) {
+                            if (!item.fixable) {
+                                return null;
+                            }
+                            return _jsx(ThreatFixerButton, { threat: item, onClick: onFixThreats });
+                        },
+                    },
+                ]
+                : []),
+        ];
+        return result;
+    }, [dataFields, plugins, themes, signatures, onFixThreats]);
+    /**
+     * DataView actions - collection of operations that can be performed upon each record.
+     *
+     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#actions-object
+     */
+    const actions = useMemo(() => {
+        const result = [];
+        if (dataFields.includes('fixable')) {
+            result.push({
+                id: THREAT_ACTION_FIX,
+                label: __('Auto-fix', 'jetpack-components'),
+                isPrimary: true,
+                callback: onFixThreats,
+                isEligible(item) {
+                    if (!onFixThreats) {
+                        return false;
+                    }
+                    if (isThreatEligibleForFix) {
+                        return isThreatEligibleForFix(item);
+                    }
+                    return !!item.fixable;
+                },
+            });
+        }
+        if (dataFields.includes('status')) {
+            result.push({
+                id: THREAT_ACTION_IGNORE,
+                label: __('Ignore', 'jetpack-components'),
+                isPrimary: true,
+                isDestructive: true,
+                callback: onIgnoreThreats,
+                isEligible(item) {
+                    if (!onIgnoreThreats) {
+                        return false;
+                    }
+                    if (isThreatEligibleForIgnore) {
+                        return isThreatEligibleForIgnore(item);
+                    }
+                    return item.status === 'current';
+                },
+            });
+        }
+        if (dataFields.includes('status')) {
+            result.push({
+                id: THREAT_ACTION_UNIGNORE,
+                label: __('Unignore', 'jetpack-components'),
+                isPrimary: true,
+                isDestructive: true,
+                callback: onUnignoreThreats,
+                isEligible(item) {
+                    if (!onUnignoreThreats) {
+                        return false;
+                    }
+                    if (isThreatEligibleForUnignore) {
+                        return isThreatEligibleForUnignore(item);
+                    }
+                    return item.status === 'ignored';
+                },
+            });
+        }
+        return result;
+    }, [
+        dataFields,
+        onFixThreats,
+        onIgnoreThreats,
+        onUnignoreThreats,
+        isThreatEligibleForFix,
+        isThreatEligibleForIgnore,
+        isThreatEligibleForUnignore,
+    ]);
+    /**
+     * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
+     *
+     * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dataviews/src/filter-and-sort-data-view.ts
+     */
+    const { data: processedData, paginationInfo } = useMemo(() => {
+        return filterSortAndPaginate(data, view, fields);
+    }, [data, view, fields]);
+    /**
+     * Callback function to update the view state.
+     *
+     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function
+     */
+    const onChangeView = useCallback((newView) => {
+        setView(newView);
+    }, []);
+    /**
+     * DataView getItemId function - returns the unique ID for each record in the dataset.
+     *
+     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function
+     */
+    const getItemId = useCallback((item) => item.id.toString(), []);
+    return (_jsx(DataViews, { actions: actions, data: processedData, defaultLayouts: defaultLayouts, fields: fields, getItemId: getItemId, onChangeSelection: onChangeSelection, onChangeView: onChangeView, paginationInfo: paginationInfo, view: view, header: _jsx(ThreatsStatusToggleGroupControl, { data: data, view: view, onChangeView: onChangeView }) }));
+}

package/build/components/threats-data-views/threats-status-toggle-group-control.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Threat } from '@automattic/jetpack-scan';
+import { type View } from '@wordpress/dataviews';
+/**
+ * ToggleGroupControl component for filtering threats by status.
+ * @param {object}     props              - Component props.
+ * @param { Threat[]}  props.data         - Threats data.
+ * @param { View }     props.view         - The current view.
+ * @param { Function } props.onChangeView - Callback function to handle view changes.
+ * @return {JSX.Element|null} The component or null.
+ */
+export default function ThreatsStatusToggleGroupControl({ data, view, onChangeView, }: {
+    data: Threat[];
+    view: View;
+    onChangeView: (newView: View) => void;
+}): JSX.Element;

package/build/components/threats-data-views/threats-status-toggle-group-control.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+ } from '@wordpress/components';
+import { useMemo, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import styles from './styles.module.scss';
+/**
+ * ToggleGroupControl component for filtering threats by status.
+ * @param {object}     props              - Component props.
+ * @param { Threat[]}  props.data         - Threats data.
+ * @param { View }     props.view         - The current view.
+ * @param { Function } props.onChangeView - Callback function to handle view changes.
+ * @return {JSX.Element|null} The component or null.
+ */
+export default function ThreatsStatusToggleGroupControl({ data, view, onChangeView, }) {
+    /**
+     * Compute values from the provided threats data.
+     *
+     * @member {number} activeThreatsCount   - Count of active threats.
+     * @member {number} historicThreatsCount - Count of historic threats.
+     */
+    const { activeThreatsCount, historicThreatsCount, } = useMemo(() => {
+        return data.reduce((acc, threat) => {
+            if (threat.status) {
+                if (threat.status === 'current') {
+                    acc.activeThreatsCount++;
+                }
+                else {
+                    acc.historicThreatsCount++;
+                }
+            }
+            return acc;
+        }, {
+            activeThreatsCount: 0,
+            historicThreatsCount: 0,
+        });
+    }, [data]);
+    /**
+     * Callback function to handle the status change filter.
+     *
+     * @param {string} newStatus - The new status filter value.
+     */
+    const onStatusFilterChange = useCallback((newStatus) => {
+        const updatedFilters = view.filters.filter(filter => filter.field !== 'status');
+        if (newStatus === 'active') {
+            updatedFilters.push({
+                field: 'status',
+                operator: 'isAny',
+                value: ['current'],
+            });
+        }
+        else if (newStatus === 'historic') {
+            updatedFilters.push({
+                field: 'status',
+                operator: 'isAny',
+                value: ['fixed', 'ignored'],
+            });
+        }
+        onChangeView({
+            ...view,
+            filters: updatedFilters,
+        });
+    }, [view, onChangeView]);
+    /**
+     * Memoized function to determine if a status filter is selected.
+     *
+     * @param {Array} threatStatuses - List of threat statuses.
+     */
+    const isStatusFilterSelected = useMemo(() => (threatStatuses) => view.filters.some(filter => filter.field === 'status' &&
+        Array.isArray(filter.value) &&
+        filter.value.length === threatStatuses.length &&
+        threatStatuses.every(threatStatus => filter.value.includes(threatStatus))), [view.filters]);
+    const selectedValue = useMemo(() => {
+        if (isStatusFilterSelected(['current'])) {
+            return 'active';
+        }
+        if (isStatusFilterSelected(['fixed', 'ignored'])) {
+            return 'historic';
+        }
+        return '';
+    }, [isStatusFilterSelected]);
+    if (!(activeThreatsCount + historicThreatsCount)) {
+        return null;
+    }
+    try {
+        return (_jsx("div", { children: _jsx("div", { className: styles['toggle-group-control'], children: _jsxs(ToggleGroupControl, { value: selectedValue, onChange: onStatusFilterChange, isBlock: true, hideLabelFromVision: true, __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, children: [_jsx(ToggleGroupControlOption, { value: "active", label: sprintf(
+                            /* translators: %d: number of active threats */ __('Active threats (%d)', 'jetpack-components'), activeThreatsCount) }), _jsx(ToggleGroupControlOption, { value: "historic", label: sprintf(
+                            /* translators: %d: number of historic threats */
+                            __('History (%d)', 'jetpack-components'), historicThreatsCount) })] }) }) }));
+    }
+    catch {
+        return null;
+    }
+}

package/build/components/toggle-control/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" resolution-mode="require"/>
+interface ToggleControlProps {
+    /** Whether or not the toggle is currently enabled. */
+    checked?: boolean;
+    /** Custom class name to append to the component. */
+    className?: string;
+    /** Whether or not the toggle is currently disabled. */
+    disabled?: boolean;
+    /** Additional information to display below the toggle. */
+    help?: React.ReactNode;
+    /** Whether or not the toggling is currently toggling. */
+    toggling?: boolean;
+    /** The label for the toggle. */
+    label?: React.ReactNode;
+    /** The size of the toggle. */
+    size?: 'small' | 'normal';
+    /** A callback function invoked when the toggle is clicked. */
+    onChange: (value: boolean) => void;
+}
+declare const ToggleControl: React.FC<ToggleControlProps>;
+export default ToggleControl;

package/build/components/toggle-control/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleControl as WPToggleControl } from '@wordpress/components';
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import styles from './styles.module.scss';
+const ToggleControl = ({ checked, className, disabled, help, toggling, label, size = 'normal', onChange, }) => {
+    const showChecked = toggling !== undefined ? (checked && !toggling) || (!checked && toggling) : checked;
+    const handleOnChange = useCallback((value) => {
+        // Don't toggle if the toggle is already toggling.
+        if (toggling) {
+            return;
+        }
+        onChange(value);
+    }, [toggling, onChange]);
+    return (_jsx(WPToggleControl, { __nextHasNoMarginBottom: true, checked: showChecked, className: clsx(styles.toggle, className, {
+            [styles['is-toggling']]: toggling,
+            [styles['is-small']]: size === 'small',
+            [styles['no-label']]: !label,
+        }), disabled: disabled, help: help, label: label, onChange: handleOnChange }));
+};
+export default ToggleControl;

package/build/components/upsell-banner/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { UpsellBannerProps } from './types.js';
+import './style.scss';
+/**
+ * Upsell banner component.
+ *
+ * - The primary CTA is the second button, at the right position.
+ * - The secondary CTA is the first button, at the left position.
+ *
+ * @param {UpsellBannerProps} props - Component props.
+ * @return {React.ReactNode} - UpsellBanner component.
+ */
+declare const UpsellBanner: React.FC<UpsellBannerProps>;
+export default UpsellBanner;

package/build/components/upsell-banner/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { Button } from '@automattic/jetpack-components';
+import './style.scss';
+/**
+ * Upsell banner component.
+ *
+ * - The primary CTA is the second button, at the right position.
+ * - The secondary CTA is the first button, at the left position.
+ *
+ * @param {UpsellBannerProps} props - Component props.
+ * @return {React.ReactNode} - UpsellBanner component.
+ */
+const UpsellBanner = props => {
+    const { icon, title, description, primaryCtaLabel, primaryCtaURL, primaryCtaIsExternalLink, primaryCtaOnClick, secondaryCtaLabel, secondaryCtaURL, secondaryCtaIsExternalLink, secondaryCtaOnClick, } = props;
+    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [_jsxs("div", { className: "upsell-banner--content-info", children: [_jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
+                                        br: _jsx("br", {}),
+                                    }) })] }), _jsxs("div", { className: "upsell-banner--content-cta", children: [secondaryCtaLabel && secondaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button secondary", href: secondaryCtaURL, onClick: secondaryCtaOnClick ?? undefined, isExternalLink: secondaryCtaIsExternalLink, children: secondaryCtaLabel })), primaryCtaLabel && primaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button primary", href: primaryCtaURL, onClick: primaryCtaOnClick ?? undefined, isExternalLink: primaryCtaIsExternalLink, children: primaryCtaLabel }))] })] })] }) }));
+};
+export default UpsellBanner;

package/build/components/upsell-banner/types.d.ts

@@ -0,0 +1,13 @@
+export type UpsellBannerProps = {
+    icon?: string;
+    title: string;
+    description: string;
+    primaryCtaLabel?: string;
+    primaryCtaURL?: string;
+    primaryCtaIsExternalLink?: boolean;
+    primaryCtaOnClick?: () => void;
+    secondaryCtaLabel?: string;
+    secondaryCtaURL?: string;
+    secondaryCtaIsExternalLink?: boolean;
+    secondaryCtaOnClick?: () => void;
+};

package/build/components/upsell-banner/types.js

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

package/build/components/zendesk-chat/constants.d.ts

@@ -0,0 +1 @@
+export declare const chatKey = "d729d42c-b547-4750-a6f6-8b30534a5f12";

package/build/components/zendesk-chat/constants.js

@@ -0,0 +1,2 @@
+// This is not a secret, it can easily be found in the DOM
+export const chatKey = 'd729d42c-b547-4750-a6f6-8b30534a5f12';

package/build/components/zendesk-chat/index.d.ts

@@ -0,0 +1,3 @@
+import type { ZendeskChatType } from './types.js';
+export declare const ZendeskChat: ZendeskChatType;
+export default ZendeskChat;

package/build/components/zendesk-chat/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useCallback } from 'react';
+import { chatKey } from './constants.js';
+export const ZendeskChat = ({ jwt_token }) => {
+    const authenticateUser = useCallback(() => {
+        if (typeof window !== 'undefined' && typeof window.zE === 'function') {
+            window.zE('messenger', 'loginUser', function (callback) {
+                callback(jwt_token);
+            });
+        }
+    }, [jwt_token]);
+    useEffect(() => {
+        const script = document.createElement('script');
+        const container = document.getElementById('zendesk-chat-container');
+        script.src = 'https://static.zdassets.com/ekr/snippet.js?key=' + encodeURIComponent(chatKey);
+        script.type = 'text/javascript';
+        script.id = 'ze-snippet';
+        script.onload = () => {
+            authenticateUser();
+        };
+        if (container) {
+            container.appendChild(script);
+        }
+    }, [authenticateUser]);
+    return _jsx("div", { "data-testid": "zendesk-chat-container", id: "zendesk-chat-container" });
+};
+export default ZendeskChat;