@automattic/jetpack-components 0.68.1 → 0.69.0

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

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+declare global {
+    interface Window {
+        zE: Function;
+    }
+}
+interface ZendeskChatProps {
+    jwt_token: string;
+}
+export type ZendeskChatType = FC<ZendeskChatProps>;
+export {};

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

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

package/build/index.d.ts

@@ -0,0 +1,67 @@
+export { default as JetpackLogo } from './components/jetpack-logo/index.js';
+export { default as JetpackSearchLogo } from './components/jetpack-search-logo/index.js';
+export { default as JetpackProtectLogo } from './components/jetpack-protect-logo/index.js';
+export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo/index.js';
+export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo/index.js';
+export { default as getRedirectUrl } from './tools/jp-redirect/index.js';
+export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url/index.js';
+export { isFirstMonthTrial } from './tools/pricing-utils/index.js';
+export { default as AutomatticBylineLogo } from './components/automattic-byline-logo/index.js';
+export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.js';
+export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.js';
+export { default as JetpackFooter } from './components/jetpack-footer/index.js';
+export { default as Spinner } from './components/spinner/index.js';
+export { default as Gridicon } from './components/gridicon/index.js';
+export { default as IconTooltip } from './components/icon-tooltip/index.js';
+export { default as ActionButton } from './components/action-button/index.js';
+export { default as PricingCard } from './components/pricing-card/index.js';
+export { default as NumberSlider } from './components/number-slider/index.js';
+export { default as AdminSection } from './components/admin-section/basic/index.js';
+export { default as AdminSectionHero } from './components/admin-section/hero/index.js';
+export { default as AdminPage } from './components/admin-page/index.js';
+export { default as DecorativeCard } from './components/decorative-card/index.js';
+export { default as Col } from './components/layout/col/index.js';
+export { default as Testimonials } from './components/testimonials/index.js';
+export { default as Container } from './components/layout/container/index.js';
+export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.js';
+export { default as CopyToClipboard } from './components/copy-to-clipboard/index.js';
+export * from './components/icons/index.js';
+export { default as SplitButton } from './components/split-button/index.js';
+export { default as ThemeProvider } from './components/theme-provider/index.js';
+export { default as ThreatFixerButton } from './components/threat-fixer-button/index.js';
+export { default as ThreatSeverityBadge } from './components/threat-severity-badge/index.js';
+export { default as ThreatsDataViews } from './components/threats-data-views/index.js';
+export { default as Text, H2, H3, Title } from './components/text/index.js';
+export { default as ToggleControl } from './components/toggle-control/index.js';
+export { default as NumberControl } from './components/number-control/index.js';
+export { default as numberFormat } from './components/number-format/index.js';
+export { default as QRCode } from './components/qr-code/index.js';
+export { default as Button } from './components/button/index.js';
+export type { ButtonProps } from './components/button/types.js';
+export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
+export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Chip } from './components/chip/index.js';
+export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
+export { default as BoostScoreBar } from './components/boost-score-bar/index.js';
+export { default as BoostScoreGraph } from './components/boost-score-graph/index.js';
+export { default as ProductPrice } from './components/product-price/index.js';
+export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
+export { default as Dialog } from './components/dialog/index.js';
+export { default as DonutMeter } from './components/donut-meter/index.js';
+export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
+export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';
+export { default as Alert } from './components/alert/index.js';
+export { default as Notice } from './components/notice/index.js';
+export { default as Popover } from './components/popover/index.js';
+export { default as Status } from './components/status/index.js';
+export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.js';
+export { default as ActionPopover } from './components/action-popover/index.js';
+export { default as ZendeskChat } from './components/zendesk-chat/index.js';
+export { default as ProgressBar } from './components/progress-bar/index.js';
+export { default as UpsellBanner } from './components/upsell-banner/index.js';
+export { getUserLocale, cleanLocale } from './lib/locale/index.js';
+export { default as RadioControl } from './components/radio-control/index.js';
+export { default as StatCard } from './components/stat-card/index.js';
+export { default as DiffViewer } from './components/diff-viewer/index.js';
+export { default as MarkedLines } from './components/marked-lines/index.js';
+export * from './components/global-notices/index.js';

package/build/index.js

@@ -0,0 +1,81 @@
+/*
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+export { default as JetpackLogo } from './components/jetpack-logo/index.js';
+export { default as JetpackSearchLogo } from './components/jetpack-search-logo/index.js';
+export { default as JetpackProtectLogo } from './components/jetpack-protect-logo/index.js';
+export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo/index.js';
+export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo/index.js';
+export { default as getRedirectUrl } from './tools/jp-redirect/index.js';
+export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url/index.js';
+export { isFirstMonthTrial } from './tools/pricing-utils/index.js';
+export { default as AutomatticBylineLogo } from './components/automattic-byline-logo/index.js';
+export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.js';
+export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.js';
+export { default as JetpackFooter } from './components/jetpack-footer/index.js';
+export { default as Spinner } from './components/spinner/index.js';
+export { default as Gridicon } from './components/gridicon/index.js';
+export { default as IconTooltip } from './components/icon-tooltip/index.js';
+export { default as ActionButton } from './components/action-button/index.js';
+export { default as PricingCard } from './components/pricing-card/index.js';
+export { default as NumberSlider } from './components/number-slider/index.js';
+export { default as AdminSection } from './components/admin-section/basic/index.js';
+export { default as AdminSectionHero } from './components/admin-section/hero/index.js';
+export { default as AdminPage } from './components/admin-page/index.js';
+export { default as DecorativeCard } from './components/decorative-card/index.js';
+export { default as Col } from './components/layout/col/index.js';
+export { default as Testimonials } from './components/testimonials/index.js';
+export { default as Container } from './components/layout/container/index.js';
+export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.js';
+export { default as CopyToClipboard } from './components/copy-to-clipboard/index.js';
+export * from './components/icons/index.js';
+export { default as SplitButton } from './components/split-button/index.js';
+export { default as ThemeProvider } from './components/theme-provider/index.js';
+export { default as ThreatFixerButton } from './components/threat-fixer-button/index.js';
+export { default as ThreatSeverityBadge } from './components/threat-severity-badge/index.js';
+export { default as ThreatsDataViews } from './components/threats-data-views/index.js';
+export { default as Text, H2, H3, Title } from './components/text/index.js';
+export { default as ToggleControl } from './components/toggle-control/index.js';
+export { default as NumberControl } from './components/number-control/index.js';
+export { default as numberFormat } from './components/number-format/index.js';
+export { default as QRCode } from './components/qr-code/index.js';
+export { default as Button } from './components/button/index.js';
+export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
+export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Chip } from './components/chip/index.js';
+export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
+export { default as BoostScoreBar } from './components/boost-score-bar/index.js';
+export { default as BoostScoreGraph } from './components/boost-score-graph/index.js';
+export { default as ProductPrice } from './components/product-price/index.js';
+export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
+export { default as Dialog } from './components/dialog/index.js';
+export { default as DonutMeter } from './components/donut-meter/index.js';
+export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
+export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';
+export { default as Alert } from './components/alert/index.js';
+export { default as Notice } from './components/notice/index.js';
+export { default as Popover } from './components/popover/index.js';
+export { default as Status } from './components/status/index.js';
+export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.js';
+export { default as ActionPopover } from './components/action-popover/index.js';
+export { default as ZendeskChat } from './components/zendesk-chat/index.js';
+export { default as ProgressBar } from './components/progress-bar/index.js';
+export { default as UpsellBanner } from './components/upsell-banner/index.js';
+export { getUserLocale, cleanLocale } from './lib/locale/index.js';
+export { default as RadioControl } from './components/radio-control/index.js';
+export { default as StatCard } from './components/stat-card/index.js';
+export { default as DiffViewer } from './components/diff-viewer/index.js';
+export { default as MarkedLines } from './components/marked-lines/index.js';
+export * from './components/global-notices/index.js';

package/build/lib/locale/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Clean up WP locale so it matches the format expected by browsers.
+ *
+ * @param {string} locale - Locale given by WordPress.
+ * @return {string} Browser-formatted locale.
+ */
+export declare const cleanLocale: (locale: string) => string;
+/**
+ * Current user locale, or browser locale as fallback.
+ *
+ * @return {string} Formatted user locale (e.g. `en-US` or `fr-FR`).
+ */
+export declare const getUserLocale: () => string;

package/build/lib/locale/index.js

@@ -0,0 +1,34 @@
+import { getSettings } from '@wordpress/date';
+/**
+ * Clean up WP locale so it matches the format expected by browsers.
+ *
+ * @param {string} locale - Locale given by WordPress.
+ * @return {string} Browser-formatted locale.
+ */
+export const cleanLocale = (locale) => {
+    const regex = /^([a-z]{2,3})(_[a-z]{2}|_[a-z][a-z0-9]{4,7})?(?:_.*)?$/i;
+    // Search for the correct locale format:
+    // e.g. af, arq, fr_FR, pap_CW, de_DE_formal, art_xpirate
+    const localeRegex = locale.match(regex);
+    // Locale was set to something that seems invalid, fallback to en-US.
+    if (!localeRegex) {
+        return 'en-US';
+    }
+    return (
+    // Keep only the language and the region, and replace the underscore used in WP locale by an hyphen.
+    `${localeRegex[1]}${localeRegex[2] ? localeRegex[2] : ''}`.replace('_', '-'));
+};
+/**
+ * Current user locale, or browser locale as fallback.
+ *
+ * @return {string} Formatted user locale (e.g. `en-US` or `fr-FR`).
+ */
+export const getUserLocale = () => {
+    const { l10n: { locale }, } = getSettings();
+    if (locale) {
+        return cleanLocale(locale);
+    }
+    // Fallback to the browser locale if necessary.
+    const language = global?.window?.navigator?.language ?? 'en-US';
+    return language;
+};

package/build/tools/get-product-checkout-url/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Return the checkout URL for the given product.
+ *
+ * @param {string}  productSlug     - wpcom product slug.
+ * @param {string}  siteSuffix      - Site suffix
+ * @param {string}  redirectUrl     - Redirect URL used to define redirect_to
+ * @param {boolean} isUserConnected - True when the user is connected Jetpack
+ * @return {string}                  The Calypso checkout URL
+ */
+export default function getProductCheckoutUrl(productSlug: string, siteSuffix: string, redirectUrl: string, isUserConnected: boolean): string;

package/build/tools/get-product-checkout-url/index.js

@@ -0,0 +1,22 @@
+/**
+ * Return the checkout URL for the given product.
+ *
+ * @param {string}  productSlug     - wpcom product slug.
+ * @param {string}  siteSuffix      - Site suffix
+ * @param {string}  redirectUrl     - Redirect URL used to define redirect_to
+ * @param {boolean} isUserConnected - True when the user is connected Jetpack
+ * @return {string}                  The Calypso checkout URL
+ */
+export default function getProductCheckoutUrl(productSlug, siteSuffix, redirectUrl, isUserConnected) {
+    const checkoutUrl = new URL('https://wordpress.com/checkout/');
+    const checkoutProductUrl = new URL(`${checkoutUrl}${siteSuffix}/${productSlug}`);
+    // Add redirect_to parameter
+    checkoutProductUrl.searchParams.set('redirect_to', redirectUrl);
+    // Add unlimited when user is not connected to Jetpack.
+    if (!isUserConnected) {
+        checkoutProductUrl.searchParams.set('unlinked', '1');
+    }
+    // Add site to query string.
+    checkoutProductUrl.searchParams.set('site', siteSuffix);
+    return checkoutProductUrl.toString();
+}

package/build/tools/get-site-admin-url/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns the site admin URL.
+ *
+ * @return {?string} The site admin URL or null if not available.
+ */
+export default function getSiteAdminUrl(): string;

package/build/tools/get-site-admin-url/index.js

@@ -0,0 +1,13 @@
+import { getScriptData } from '@automattic/jetpack-script-data';
+/**
+ * Returns the site admin URL.
+ *
+ * @return {?string} The site admin URL or null if not available.
+ */
+export default function getSiteAdminUrl() {
+    return (getScriptData()?.site?.admin_url ||
+        window.Initial_State?.adminUrl ||
+        window.Jetpack_Editor_Initial_State?.adminUrl ||
+        window?.myJetpackInitialState?.adminUrl ||
+        null);
+}

package/build/tools/jp-redirect/index.d.ts

@@ -0,0 +1,20 @@
+import { GetRedirectUrlArgs } from './types.js';
+/**
+ * Builds an URL using the jetpack.com/redirect/ service
+ *
+ * If source is a simple slug, it will be sent using the source query parameter. e.g. jetpack.com/redirect/?source=slug
+ *
+ * If source is a full URL, starting with https://, it will be sent using the url query parameter. e.g. jetpack.com/redirect/?url=https://wordpress.com
+ *
+ * Note: if using full URL, query parameters and anchor must be passed in args. Any querystring of url fragment in the URL will be discarded.
+ *
+ * @since 0.2.0
+ * @param {string}             source - The URL handler registered in the server or the full destination URL (starting with https://).
+ * @param {GetRedirectUrlArgs} args   - Additional arguments to build the url.
+ *                                    This is not a complete list as any argument passed here
+ *                                    will be sent to as a query parameter to the Redirect server.
+ *                                    These parameters will not necessarily be passed over to the final destination URL.
+ *                                    If you want to add a parameter to the final destination URL, use the `query` argument.
+ * @return {string} The redirect URL
+ */
+export default function getRedirectUrl(source: string, args?: GetRedirectUrlArgs): string;

package/build/tools/jp-redirect/index.js

@@ -0,0 +1,50 @@
+/* global jetpack_redirects */
+/**
+ * Builds an URL using the jetpack.com/redirect/ service
+ *
+ * If source is a simple slug, it will be sent using the source query parameter. e.g. jetpack.com/redirect/?source=slug
+ *
+ * If source is a full URL, starting with https://, it will be sent using the url query parameter. e.g. jetpack.com/redirect/?url=https://wordpress.com
+ *
+ * Note: if using full URL, query parameters and anchor must be passed in args. Any querystring of url fragment in the URL will be discarded.
+ *
+ * @since 0.2.0
+ * @param {string}             source - The URL handler registered in the server or the full destination URL (starting with https://).
+ * @param {GetRedirectUrlArgs} args   - Additional arguments to build the url.
+ *                                    This is not a complete list as any argument passed here
+ *                                    will be sent to as a query parameter to the Redirect server.
+ *                                    These parameters will not necessarily be passed over to the final destination URL.
+ *                                    If you want to add a parameter to the final destination URL, use the `query` argument.
+ * @return {string} The redirect URL
+ */
+export default function getRedirectUrl(source, args = {}) {
+    const queryVars = {};
+    let calypsoEnv;
+    if (typeof window !== 'undefined') {
+        calypsoEnv = window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
+    }
+    if (source.search('https://') === 0) {
+        const parsedUrl = new URL(source);
+        // discard any query and fragments.
+        source = `https://${parsedUrl.host}${parsedUrl.pathname}`;
+        queryVars.url = encodeURIComponent(source);
+    }
+    else {
+        queryVars.source = encodeURIComponent(source);
+    }
+    for (const argName in args) {
+        queryVars[argName] = encodeURIComponent(args[argName]);
+    }
+    if (!Object.keys(queryVars).includes('site') &&
+        typeof jetpack_redirects !== 'undefined' &&
+        Object.hasOwn(jetpack_redirects, 'currentSiteRawUrl')) {
+        queryVars.site = jetpack_redirects.currentBlogID ?? jetpack_redirects.currentSiteRawUrl;
+    }
+    if (calypsoEnv) {
+        queryVars.calypso_env = calypsoEnv;
+    }
+    const queryString = Object.keys(queryVars)
+        .map(key => key + '=' + queryVars[key])
+        .join('&');
+    return `https://jetpack.com/redirect/?` + queryString;
+}

package/build/tools/jp-redirect/types.d.ts

@@ -0,0 +1,39 @@
+export type GetRedirectUrlArgs = {
+    /**
+     * URL of the current site. Will default to the value of
+     * jetpack_redirects.currentSiteRawUrl, if available.
+     * Used to fill in the `[site]` placeholder in the target.
+     */
+    site?: string;
+    /**
+     * Additional path to be appended to the URL.
+     * Used to fill in the `[path]` placeholder in the target.
+     */
+    path?: string;
+    /**
+     * Query parameters to be added to the final destination URL.
+     * Should be in query string format (e.g. 'key=value&foo=bar').
+     */
+    query?: string;
+    /**
+     * Anchor to be added to the URL. Must be a single string.
+     * Example: `section1`.
+     */
+    anchor?: string;
+    /**
+     * Any other custom arguments to be added to the final destination URL.
+     */
+    [key: string]: string;
+};
+export type QueryVars = {
+    url?: string;
+    site?: string;
+    source?: string;
+    calypso_env?: string;
+};
+declare global {
+    const jetpack_redirects: {
+        currentSiteRawUrl?: string;
+        currentBlogID?: string;
+    };
+}

package/build/tools/jp-redirect/types.js

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

package/build/tools/pricing-utils/index.d.ts

@@ -0,0 +1,8 @@
+import { IntroOffer } from './types.js';
+/**
+ * Returns whether an Introductory Offer is a first month trial
+ *
+ * @param {IntroOffer} introOffer - an intro offer object
+ * @return {boolean}               Whether it's a first month trial or not
+ */
+export declare function isFirstMonthTrial(introOffer: IntroOffer): boolean;

package/build/tools/pricing-utils/index.js

@@ -0,0 +1,9 @@
+/**
+ * Returns whether an Introductory Offer is a first month trial
+ *
+ * @param {IntroOffer} introOffer - an intro offer object
+ * @return {boolean}               Whether it's a first month trial or not
+ */
+export function isFirstMonthTrial(introOffer) {
+    return introOffer?.interval_count === 1 && introOffer?.interval_unit === 'month';
+}

package/build/tools/pricing-utils/types.d.ts

@@ -0,0 +1,12 @@
+export interface IntroOffer {
+    product_id: number;
+    product_slug: string;
+    currency_code: string;
+    formatted_price: string;
+    original_price: number;
+    raw_price: number;
+    discount_percentage: number;
+    ineligible_reason: string[] | null;
+    interval_unit: string;
+    interval_count: number;
+}

package/build/tools/pricing-utils/types.js

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

package/components/admin-page/index.tsx

@@ -24,6 +24,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 	moduleNameHref,
 	showHeader = true,
 	showFooter = true,
+	useInternalLinks = false,
 	showBackground = true,
 	sandboxedDomain = '',
 	apiRoot = '',
@@ -90,6 +91,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 							moduleName={ moduleName }
 							moduleNameHref={ moduleNameHref }
 							menu={ optionalMenuItems }
+							useInternalLinks={ useInternalLinks }
 						/>
 					</Col>
 				</Container>

package/components/admin-page/types.ts

@@ -26,6 +26,11 @@ export type AdminPageProps = {
 	 */
 	showFooter?: boolean;
 
+	/**
+	 * Whether or not to link to Jetpack plugin admin pages.
+	 */
+	useInternalLinks?: boolean;
+
 	/**
 	 * Link that the Footer Module name will link to (optional).
 	 */

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -28,6 +28,15 @@ interface UplotChartProps {
 	range?: { startDate: number; endDate: number };
 }
 
+interface UplotReactProps {
+	options: uPlot.Options;
+	data: uPlot.AlignedData;
+	target?: HTMLElement | ( ( self: uPlot, init: () => void ) => void );
+	onDelete?: ( chart: uPlot ) => void;
+	onCreate?: ( chart: uPlot ) => void;
+	resetScales?: boolean;
+}
+
 /**
  * Creates a series information object for uPlot based on the label and color.
  *
@@ -202,9 +211,15 @@ export default function UplotLineChart( { range, periods, annotations = [] }: Up
 		return ( uplot.current = chart );
 	}, [] );
 
+	/**
+	 * Type casting to prevent TypeScript error:
+	 * TS2604: JSX element type 'UplotReact' does not have any construct or call signatures.
+	 */
+	const TypedUplotReact = UplotReact as unknown as React.ComponentType< UplotReactProps >;
+
 	return (
 		<div ref={ uplotContainer } className="boost-uplot-container">
-			<UplotReact data={ data } onCreate={ onCreate } options={ options } />
+			<TypedUplotReact data={ data } onCreate={ onCreate } options={ options } />
 		</div>
 	);
 }

package/components/jetpack-footer/index.tsx

@@ -1,9 +1,7 @@
-import { useSelect } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import React from 'react';
-import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store.jsx';
 import { getRedirectUrl } from '../../index.js';
 import getSiteAdminUrl from '../../tools/get-site-admin-url/index.js';
 import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
@@ -39,6 +37,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 	className,
 	moduleNameHref = 'https://jetpack.com',
 	menu,
+	useInternalLinks,
 	onAboutClick,
 	onPrivacyClick,
 	onTermsClick,
@@ -48,42 +47,25 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 	const [ isMd ] = useBreakpointMatch( 'md', '<=' );
 	const [ isLg ] = useBreakpointMatch( 'lg', '>' );
 
-	const { isActive, connectedPlugins } = useSelect( select => {
-		const connectionStatus = select( CONNECTION_STORE_ID ) as {
-			getConnectedPlugins: () => { slug: string }[];
-			getConnectionStatus: () => { isActive: boolean };
-		};
-
-		return {
-			connectedPlugins: connectionStatus?.getConnectedPlugins(),
-			...connectionStatus.getConnectionStatus(),
-		};
-	}, [] );
 	const siteAdminUrl = getSiteAdminUrl();
-	const areAdminLinksEnabled =
-		siteAdminUrl &&
-		// Some admin pages require the site to be connected (e.g., Privacy)
-		isActive &&
-		// Admin pages are part of the Jetpack plugin and required it to be installed
-		connectedPlugins?.some( ( { slug } ) => 'jetpack' === slug );
 
 	let items: JetpackFooterMenuItem[] = [
 		{
 			label: _x( 'About', 'Link to learn more about Jetpack.', 'jetpack-components' ),
 			title: __( 'About Jetpack', 'jetpack-components' ),
-			href: areAdminLinksEnabled
+			href: useInternalLinks
 				? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
 				: getRedirectUrl( 'jetpack-about' ),
-			target: areAdminLinksEnabled ? '_self' : '_blank',
+			target: useInternalLinks ? '_self' : '_blank',
 			onClick: onAboutClick,
 		},
 		{
 			label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack-components' ),
 			title: __( "Automattic's Privacy Policy", 'jetpack-components' ),
-			href: areAdminLinksEnabled
+			href: useInternalLinks
 				? new URL( 'admin.php?page=jetpack#/privacy', siteAdminUrl ).href
 				: getRedirectUrl( 'a8c-privacy' ),
-			target: areAdminLinksEnabled ? '_self' : '_blank',
+			target: useInternalLinks ? '_self' : '_blank',
 			onClick: onPrivacyClick,
 		},
 		{
@@ -118,6 +100,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 				className
 			) }
 			aria-label={ __( 'Jetpack', 'jetpack-components' ) }
+			role="contentinfo"
 			{ ...otherProps }
 		>
 			<ul>
@@ -156,7 +139,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 				<li className="jp-dashboard-footer__a8c-item">
 					<a
 						href={
-							areAdminLinksEnabled
+							useInternalLinks
 								? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
 								: getRedirectUrl( 'a8c-about' )
 						}

package/components/jetpack-footer/style.scss

@@ -25,6 +25,11 @@
 		}
 
 		&:focus {
+			box-shadow: none;
+			outline-width: 0;
+		}
+
+		&:focus-visible {
 			border-radius: 2px;
 			box-shadow: none;
 			outline: 1.5px solid currentColor;

package/components/jetpack-footer/types.ts

@@ -29,6 +29,11 @@ export type JetpackFooterProps = {
 	 */
 	menu?: JetpackFooterMenuItem[];
 
+	/**
+	 * Whether to enable Jetpack admin links.
+	 */
+	useInternalLinks?: boolean;
+
 	/**
 	 * URL of the site WP Admin.
 	 */

package/components/number-slider/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import ReactSlider from 'react-slider';
+import ReactSlider, { ReactSliderProps } from 'react-slider';
 import { NumberSliderProps } from './types.js';
 import './style.scss';
 
@@ -56,9 +56,15 @@ const NumberSlider: React.FC< NumberSliderProps > = ( {
 				);
 		  };
 
+	/**
+	 * Type casting to prevent TypeScript error:
+	 * TS2604: JSX element type 'ReactSlider' does not have any construct or call signatures.
+	 */
+	const TypedReactSlider = ReactSlider as unknown as React.ComponentType< ReactSliderProps >;
+
 	return (
 		<div className={ componentClassName } data-testid="number-slider">
-			<ReactSlider
+			<TypedReactSlider
 				className="jp-components-number-slider__control"
 				thumbClassName="jp-components-number-slider__thumb"
 				thumbActiveClassName="jp-components-number-slider__thumb--is-active"