diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 500f33469869d..b6fa00be59ce5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -228,6 +228,9 @@ importers:
'@wordpress/compose':
specifier: 6.14.0
version: 6.14.0(react@18.2.0)
+ '@wordpress/data':
+ specifier: 9.7.0
+ version: 9.7.0(react@18.2.0)
'@wordpress/date':
specifier: 4.37.0
version: 4.37.0
diff --git a/projects/js-packages/components/changelog/add-jetpack-footer-generic-links b/projects/js-packages/components/changelog/add-jetpack-footer-generic-links
new file mode 100644
index 0000000000000..5bf8cbcd39a6c
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-jetpack-footer-generic-links
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Jetpack Footer: added generic links
diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx
index b53a310419809..5238058e1c736 100644
--- a/projects/js-packages/components/components/admin-page/index.tsx
+++ b/projects/js-packages/components/components/admin-page/index.tsx
@@ -20,7 +20,6 @@ const AdminPage: React.FC< AdminPageProps > = ( {
children,
moduleName = __( 'Jetpack', 'jetpack' ),
moduleNameHref,
- a8cLogoHref,
showHeader = true,
showFooter = true,
showBackground = true,
@@ -43,11 +42,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
{ showFooter && (
-
+
) }
diff --git a/projects/js-packages/components/components/admin-page/types.ts b/projects/js-packages/components/components/admin-page/types.ts
index 095a463bc3e7c..eca4122375258 100644
--- a/projects/js-packages/components/components/admin-page/types.ts
+++ b/projects/js-packages/components/components/admin-page/types.ts
@@ -4,11 +4,6 @@ export type AdminPageProps = {
*/
children: React.ReactNode;
- /**
- * Link for 'An Automattic Airline' in the footer.
- */
- a8cLogoHref?: string;
-
/**
* Name of the module, e.g. 'Jetpack Search' that will be displayed in the footer.
*/
diff --git a/projects/js-packages/components/components/jetpack-footer/README.md b/projects/js-packages/components/components/jetpack-footer/README.md
index 85fa30e5c8762..1bf71d99b0140 100644
--- a/projects/js-packages/components/components/jetpack-footer/README.md
+++ b/projects/js-packages/components/components/jetpack-footer/README.md
@@ -3,19 +3,19 @@
Component that renders Jetpack Admin Footer.
It takes moduleName and URL to show in the footer.
-#### How to use:
+## How to use:
```js
-
+
```
-#### Props
+## Props
- `className`: String - (default: `jp-dashboard-footer`) the additional class name set on the element.
-- `a8cLogoHref`: String - (default: `https://www.jetpack.com`) link to be added on 'An Automattic Airline'.
- `moduleName`: String - (default: `Jetpack`) set the name of the Module, e.g. `Jetpack Search`.
-- `menu`: JetpackFooterMenuItem[] - (default: `null`) set the menu items to be rendered in the footer.
+- `moduleNameHref`: String - (default: `https://jetpack.com`) link that the Module name will link to.
+- `menu`: JetpackFooterMenuItem[] - (default: `undefined`) set the menu items to be rendered in the footer.
+- `onAboutClick`: () => void - (default: `undefined`) function called when the About link is clicked.
+- `onPrivacyClick`: () => void - (default: `undefined`) function called when the Privacy link is clicked.
+- `onTermsClick`: () => void - (default: `undefined`) function called when the Terms link is clicked.
+- `siteAdminUrl`: String - (default: `undefined`) URL of the site WP Admin. Required to link to internal pages when applicable (e.g., Privacy).
diff --git a/projects/js-packages/components/components/jetpack-footer/index.tsx b/projects/js-packages/components/components/jetpack-footer/index.tsx
index c6e36b4c8b5ae..a45ce80216da9 100644
--- a/projects/js-packages/components/components/jetpack-footer/index.tsx
+++ b/projects/js-packages/components/components/jetpack-footer/index.tsx
@@ -1,12 +1,15 @@
-import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
import { Icon, external } from '@wordpress/icons';
import classnames from 'classnames';
import React from 'react';
+import { getRedirectUrl } from '../..';
+import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store';
import AutomatticBylineLogo from '../automattic-byline-logo';
import './style.scss';
import JetpackLogo from '../jetpack-logo';
import useBreakpointMatch from '../layout/use-breakpoint-match';
-import type { JetpackFooterProps } from './types';
+import type { JetpackFooterProps, JetpackFooterMenuItem } from './types';
const JetpackIcon: React.FC = () => (
@@ -19,17 +22,74 @@ const JetpackIcon: React.FC = () => (
* @returns {React.ReactNode} JetpackFooter component.
*/
const JetpackFooter: React.FC< JetpackFooterProps > = ( {
- a8cLogoHref = 'https://automattic.com',
moduleName = __( 'Jetpack', 'jetpack' ),
className,
moduleNameHref = 'https://jetpack.com',
menu,
+ siteAdminUrl,
+ onAboutClick,
+ onPrivacyClick,
+ onTermsClick,
...otherProps
} ) => {
const [ isSm ] = useBreakpointMatch( 'sm', '<=' );
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(),
+ };
+ },
+ [ CONNECTION_STORE_ID ]
+ );
+
+ 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' ),
+ title: __( 'About Jetpack', 'jetpack' ),
+ href: areAdminLinksEnabled
+ ? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
+ : getRedirectUrl( 'jetpack-about' ),
+ target: '_blank',
+ onClick: onAboutClick,
+ },
+ {
+ label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack' ),
+ title: __( "Automattic's Privacy Policy", 'jetpack' ),
+ href: areAdminLinksEnabled
+ ? new URL( 'admin.php?page=jetpack#/privacy', siteAdminUrl ).href
+ : getRedirectUrl( 'a8c-privacy' ),
+ target: areAdminLinksEnabled ? '_self' : '_blank',
+ onClick: onPrivacyClick,
+ },
+ {
+ label: _x( 'Terms', 'Shorthand for Terms of Service.', 'jetpack' ),
+ title: __( 'WordPress.com Terms of Service', 'jetpack' ),
+ href: getRedirectUrl( 'wpcom-tos' ),
+ target: '_blank',
+ onClick: onTermsClick,
+ },
+ ];
+
+ if ( menu ) {
+ items = [ ...items, ...menu ];
+ }
+
const jetpackItemContent = (
<>
@@ -59,7 +119,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
jetpackItemContent
) }
- { menu?.map( item => {
+ { items.map( item => {
const isButton = item.role === 'button';
const isExternalLink = ! isButton && item.target === '_blank';
@@ -85,7 +145,14 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
);
} ) }
-
+
diff --git a/projects/js-packages/components/components/jetpack-footer/stories/index.stories.tsx b/projects/js-packages/components/components/jetpack-footer/stories/index.stories.tsx
index 2cbc26a678ebc..70316770809bd 100644
--- a/projects/js-packages/components/components/jetpack-footer/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/jetpack-footer/stories/index.stories.tsx
@@ -9,7 +9,6 @@ export default {
const Template: ComponentStory< typeof JetpackFooter > = args => ;
const DefaultArgs = {
- a8cLogoHref: 'https://automattic.com',
moduleName: 'Jetpack',
className: '',
moduleNameHref: 'https://jetpack.com',
diff --git a/projects/js-packages/components/components/jetpack-footer/test/__snapshots__/component.tsx.snap b/projects/js-packages/components/components/jetpack-footer/test/__snapshots__/component.tsx.snap
index 5779ab8910422..6215f587d95c5 100644
--- a/projects/js-packages/components/components/jetpack-footer/test/__snapshots__/component.tsx.snap
+++ b/projects/js-packages/components/components/jetpack-footer/test/__snapshots__/component.tsx.snap
@@ -36,6 +36,75 @@ exports[`JetpackFooter Render the component should match the snapshot: all props
Test module
+
+
+
+
+
+
+
+
+