newspack-components 4.3.0 → 4.4.0-alpha.1

package/src/color-picker/index.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies.
  */
-import { ColorPicker as ColorPickerComponent } from '@wordpress/components';
+import { BaseControl, ColorPicker as ColorPickerComponent } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { useState, useRef } from '@wordpress/element';
 
 /**
@@ -26,35 +27,41 @@ const { InteractiveDiv } = utils;
  *
  * @param {Object}             props             - Component props.
  * @param {JSX.Element|string} props.label       - Label for the color picker.
+ * @param {JSX.Element|string} props.help        - Help text for the color picker.
  * @param {string}             [props.color]     - Default color.
  * @param {Function}           props.onChange    - Function to call when the color changes.
  * @param {string}             [props.className] - Additional class name.
  * @return {JSX.Element} ColorPicker component.
  */
-const ColorPicker = ( { label, color = '#fff', onChange, className } ) => {
+const ColorPicker = ( { label, help, color = '#ffffff', onChange, className } ) => {
 	const [ isExpanded, setIsExpanded ] = useState( false );
 	const ref = useRef();
+	const id = useInstanceId( ColorPicker, 'newspack-color-picker' );
+	const labelId = `${ id }-label`;
 	const colordColor = colord( color );
 	hooks.useOnClickOutside( ref, () => setIsExpanded( false ) );
 	return (
-		<div className={ classnames( 'newspack-color-picker', className ) }>
-			<div className="newspack-color-picker__label">{ label }</div>
-
+		<BaseControl id={ id } className={ classnames( 'newspack-color-picker', className ) } help={ help } __nextHasNoMarginBottom>
+			<BaseControl.VisualLabel id={ labelId }>{ label }</BaseControl.VisualLabel>
 			<InteractiveDiv
+				id={ id }
+				aria-labelledby={ labelId }
+				aria-describedby={ help ? `${ id }__help` : undefined }
+				aria-expanded={ isExpanded }
 				className={ 'newspack-color-picker__expander' }
 				onClick={ () => setIsExpanded( ! isExpanded ) }
 				style={ {
 					backgroundColor: color,
-					color: colordColor.contrast() > colordColor.contrast( '#000' ) ? '#fff' : '#000',
+					color: colordColor.contrast() > colordColor.contrast( '#000000' ) ? '#ffffff' : '#000000',
 				} }
 			>
 				{ color }
 			</InteractiveDiv>
 
 			<div className="newspack-color-picker__main" ref={ ref }>
-				{ isExpanded && <ColorPickerComponent color={ color } onChange={ hex => onChange( hex ) } enableAlpha={ false } /> }
+				{ isExpanded && <ColorPickerComponent color={ color } onChange={ onChange } enableAlpha={ false } /> }
 			</div>
-		</div>
+		</BaseControl>
 	);
 };
 

package/src/color-picker/index.test.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ColorPicker from './';
+
+describe( 'ColorPicker', () => {
+	it( 'should render the label', () => {
+		const { getByText } = render( <ColorPicker label="Background color" onChange={ () => {} } /> );
+		expect( getByText( 'Background color' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render help text', () => {
+		const { getByText } = render( <ColorPicker label="Background color" help="Choose a color" onChange={ () => {} } /> );
+		expect( getByText( 'Choose a color' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should start collapsed', () => {
+		const { getByRole } = render( <ColorPicker label="Background color" onChange={ () => {} } /> );
+		expect( getByRole( 'button' ) ).toHaveAttribute( 'aria-expanded', 'false' );
+	} );
+
+	it( 'should expand when the expander is clicked', () => {
+		const { getByRole } = render( <ColorPicker label="Background color" onChange={ () => {} } /> );
+		const expander = getByRole( 'button' );
+		fireEvent.click( expander );
+		expect( expander ).toHaveAttribute( 'aria-expanded', 'true' );
+	} );
+
+	it( 'should associate label via aria-labelledby', () => {
+		const { getByRole, getByText } = render( <ColorPicker label="Background color" onChange={ () => {} } /> );
+		const expander = getByRole( 'button' );
+		const label = getByText( 'Background color' );
+		expect( expander.getAttribute( 'aria-labelledby' ) ).toBe( label.id );
+	} );
+
+	it( 'should associate help text via aria-describedby when help is provided', () => {
+		const { getByRole, getByText } = render( <ColorPicker label="Background color" help="Choose a color" onChange={ () => {} } /> );
+		const expander = getByRole( 'button' );
+		const help = getByText( 'Choose a color' );
+		expect( expander.getAttribute( 'aria-describedby' ) ).toBe( help.id );
+	} );
+
+	it( 'should not set aria-describedby when no help is provided', () => {
+		const { getByRole } = render( <ColorPicker label="Background color" onChange={ () => {} } /> );
+		expect( getByRole( 'button' ) ).not.toHaveAttribute( 'aria-describedby' );
+	} );
+} );

package/src/color-picker/style.scss

@@ -2,31 +2,29 @@
  * Color Picker
  */
 
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
 .newspack-color-picker {
 	position: relative;
-
-	&__label {
-		margin-bottom: 8px;
-	}
-
 	&__expander {
-		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
-		border-radius: 2px;
-		height: 64px;
-		padding: 12px;
+		box-shadow: inset 0 0 0 1px rgba(wp-colors.$black, 0.54);
+		border-radius: wp-vars.$radius-small;
+		height: wp-vars.$grid-unit-80;
+		padding: wp-vars.$grid-unit-10;
 		text-align: right;
 		text-transform: uppercase;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-color: white;
+			border-color: wp-colors.$white;
 		}
 	}
 
 	&__main {
-		background: white;
-		box-shadow: 0 0 8px 4px rgba(black, 0.08);
-		margin: 12px 0;
+		background: wp-colors.$white;
+		box-shadow: wp-vars.$elevation-small;
+		margin: wp-vars.$grid-unit-10 0 0;
 		position: absolute;
 		z-index: 2;
 

package/src/confirm-dialog/README.md

@@ -0,0 +1,128 @@
+# ConfirmDialog
+
+A modal confirmation dialog that intercepts client-side navigation when there are unsaved changes. Built on top of WordPress's `__experimentalConfirmDialog`. The dialog is invisible until a navigation attempt is blocked; when `when` becomes `true` and the user navigates away, the dialog appears automatically and resumes or cancels the navigation based on the user's choice.
+
+For most imperative use cases (confirming a destructive action, guarding an action behind an unsaved-changes check) prefer the [`useConfirmDialog` hook](#useconfirmdialog-hook) over using `ConfirmDialog` directly.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `cancelButtonText` | `string` | — | Label for the cancel button. |
+| `children` | `React.ReactNode` | — | Content rendered in the modal body. |
+| `className` | `string` | — | Additional CSS class. |
+| `confirmButtonText` | `string` | — | Label for the confirm button. |
+| `hideTitle` | `boolean` | — | When `true`, hides the modal title and the × close button. |
+| `isDestructive` | `boolean` | — | When `true`, applies destructive (e.g. red) styling to the confirm button. |
+| `isOpen` | `boolean` | `false` | When `true`, shows the dialog immediately without blocking navigation. Use this for imperative confirmation (e.g. confirming a destructive action on a button click). |
+| `size` | `'small'` \| `'medium'` \| `'large'` \| `'x-large'` \| `'full'` | `'small'` | Controls the width of the modal. |
+| `title` | `string` | — | Title displayed in the modal header. |
+| `when` | `boolean` | `false` | When `true`, blocks router navigation and shows the dialog on any attempted navigation. Set this to reflect whether the current form has unsaved changes. |
+
+## Usage
+
+```jsx
+import { ConfirmDialog } from 'newspack-components';
+
+// Guard navigation when a form has unsaved changes.
+// The dialog appears automatically when the user tries to navigate away.
+<ConfirmDialog
+	when={ hasUnsavedChanges }
+	title="Unsaved changes"
+	confirmButtonText="Leave anyway"
+	cancelButtonText="Stay"
+	isDestructive
+>
+	You have unsaved changes. Are you sure you want to leave?
+</ConfirmDialog>
+
+// Larger modal with a custom size
+<ConfirmDialog
+	when={ hasUnsavedChanges }
+	size="medium"
+	title="Discard changes?"
+	confirmButtonText="Discard"
+	cancelButtonText="Keep editing"
+>
+	Your changes will be lost if you leave this page.
+</ConfirmDialog>
+
+// Guard both navigation and an imperative action with a single dialog instance.
+// isOpen triggers the dialog immediately (e.g. on a button click) without
+// blocking navigation. Both when and isOpen can be used together.
+const [ pendingAction, setPendingAction ] = useState( null );
+<ConfirmDialog
+	when={ hasUnsavedChanges }
+	isOpen={ !! pendingAction }
+	confirmButtonText="Discard changes"
+	isDestructive
+	hideTitle
+	onConfirm={ () => {
+		pendingAction?.();
+		setPendingAction( null );
+	} }
+	onCancel={ () => setPendingAction( null ) }
+>
+	You have unsaved changes that will be lost. Discard changes?
+</ConfirmDialog>
+```
+
+---
+
+## `useConfirmDialog` hook
+
+A higher-level hook that wraps `ConfirmDialog` and manages the pending-action state for you. Prefer this over using `ConfirmDialog` directly when you need imperative confirmation.
+
+```jsx
+import { useConfirmDialog } from 'newspack-components';
+```
+
+### Options
+
+Accepts all `ConfirmDialog` props except `isOpen`, `onConfirm`, `onCancel`, and `children`, plus:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `message` | `React.ReactNode` | — | Content rendered in the modal body. |
+| `when` | `boolean` | — | When explicitly `false`, `requestConfirm` skips the dialog and invokes the callback immediately. Omit (or pass `true`) to always show the dialog. Also controls router navigation blocking, same as the `when` prop on `ConfirmDialog`. |
+
+### Returns
+
+| Key | Type | Description |
+|-----|------|-------------|
+| `confirmDialog` | `React.ReactElement` | The dialog element — render this somewhere in your JSX. |
+| `requestConfirm` | `( callback: () => void ) => void` | Call with a callback to request confirmation. Shows the dialog (unless `when` is `false`); invokes the callback only if the user confirms. |
+
+### Usage
+
+```jsx
+// Always-confirm dialog (e.g. destructive delete action).
+const { confirmDialog, requestConfirm } = useConfirmDialog( {
+	title: 'Are you sure?',
+	confirmButtonText: 'Delete',
+	isDestructive: true,
+	message: 'This will permanently delete the item and cannot be undone.',
+} );
+
+// Render the dialog element in JSX:
+{ confirmDialog }
+
+// Call requestConfirm when the user initiates the action:
+<Button onClick={ () => requestConfirm( handleDelete ) }>Delete</Button>
+
+// Conditional dialog — skips confirmation when there are no unsaved changes.
+// Combines navigation blocking with imperative use in a single instance.
+const { confirmDialog, requestConfirm } = useConfirmDialog( {
+	when: isDirty,
+	message: 'You have unsaved changes that will be lost. Discard changes?',
+	confirmButtonText: 'Discard changes',
+	isDestructive: true,
+	hideTitle: true,
+} );
+
+{ confirmDialog }
+
+// In an action handler — shows the dialog only if isDirty, otherwise
+// calls the callback immediately:
+requestConfirm( () => handleToggleEnabled( newConfig ) );
+```

package/src/confirm-dialog/index.tsx

@@ -5,8 +5,14 @@
 /**
  * WordPress dependencies.
  */
-import { forwardRef } from '@wordpress/element';
 import { __experimentalConfirmDialog as BaseComponent } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { forwardRef, useCallback, useEffect, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import Router from '../proxied-imports/router';
+const { useHistory } = Router;
 
 /**
  * External dependencies.
@@ -23,11 +29,13 @@ type ConfirmDialogProps = {
 	hideTitle?: boolean;
 	title?: string;
 	isDestructive?: boolean;
+	isOpen?: boolean;
+	onConfirm?: () => void;
+	onCancel?: () => void;
 	cancelButtonText?: string;
 	confirmButtonText?: string;
-	onConfirm: () => void;
-	onCancel: () => void;
 	children?: React.ReactNode;
+	when?: boolean;
 };
 
 const sizeClassMap = {
@@ -38,10 +46,70 @@ const sizeClassMap = {
 	full: 'newspack-modal--size-full',
 };
 
+const noOp = () => {};
+
 function ConfirmDialog(
-	{ className, size = 'small', hideTitle, isDestructive, onConfirm, onCancel, ...otherProps }: ConfirmDialogProps,
+	{
+		className,
+		size = 'small',
+		hideTitle,
+		isDestructive,
+		onConfirm = noOp,
+		onCancel = noOp,
+		when = false,
+		isOpen = false,
+		...otherProps
+	}: ConfirmDialogProps,
 	ref: React.Ref< HTMLDivElement >
 ) {
+	const [ showDialog, setShowDialog ] = useState( isOpen );
+	const history = useHistory();
+	const pendingNavigation = useRef< ( () => void ) | null >( null );
+
+	const handleOnConfirm = useCallback( () => {
+		setShowDialog( false );
+		pendingNavigation.current?.();
+		pendingNavigation.current = null;
+		onConfirm();
+	}, [ onConfirm, pendingNavigation ] );
+
+	const handleOnCancel = useCallback( () => {
+		setShowDialog( false );
+		pendingNavigation.current = null;
+		onCancel();
+	}, [ onCancel, pendingNavigation ] );
+
+	// Block navigation when there are unsaved changes.
+	useEffect( () => {
+		if ( ! when ) {
+			return;
+		}
+		const unblock = history.block( ( location: string, action: string ) => {
+			pendingNavigation.current = () => {
+				unblock();
+				if ( action === 'REPLACE' ) {
+					history.replace( location );
+				} else {
+					history.push( location );
+				}
+			};
+			setShowDialog( true );
+			return false;
+		} );
+		return unblock;
+	}, [ when, history ] );
+
+	// Show the dialog imperatively without blocking navigation.
+	useEffect( () => {
+		if ( isOpen ) {
+			setShowDialog( true );
+		}
+	}, [ isOpen ] );
+
+	if ( ! showDialog ) {
+		return null;
+	}
+
 	const classes = classnames(
 		'newspack-modal',
 		sizeClassMap[ size ],
@@ -55,8 +123,8 @@ function ConfirmDialog(
 			className={ classes }
 			{ ...otherProps }
 			ref={ ref }
-			onConfirm={ onConfirm }
-			onCancel={ onCancel }
+			onConfirm={ handleOnConfirm }
+			onCancel={ handleOnCancel }
 			__experimentalHideHeader={ false }
 		/>
 	);

package/src/dataviews/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * DataViews
+ *
+ * Wrapper around @wordpress/dataviews with Newspack styling.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { DataViews as BaseDataViews } from '@wordpress/dataviews';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+type DataViewsProps = React.ComponentProps< typeof BaseDataViews > & {
+	className?: string;
+};
+
+export default function DataViews( { className, ...props }: DataViewsProps ) {
+	return (
+		<div className={ classnames( 'newspack-dataviews', className ) }>
+			<BaseDataViews { ...props } />
+		</div>
+	);
+}
+
+export type { Action, Field, View } from '@wordpress/dataviews';

package/src/dataviews/style.scss

@@ -0,0 +1,9 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@wordpress/dataviews/build-style/style.css";
+
+.newspack-dataviews {
+	/* Make sure full-width DataViews aligns with the 48px margin. */
+	.newspack-wizard__content--full-width & {
+		margin-top: -16px;
+	}
+}

package/src/grid/style.scss

@@ -117,6 +117,11 @@
 			grid-template-columns: repeat(6, 1fr);
 		}
 
+		// Columns 12
+		&__columns-12 {
+			grid-template-columns: repeat(12, 1fr);
+		}
+
 		// Gutter 48
 		&__gutter-48 {
 			grid-gap: 48px;
@@ -217,4 +222,4 @@
 	&__tbody + &__tbody {
 		margin-top: -32px;
 	}
-}
+}

package/src/handoff/README.md

@@ -0,0 +1,93 @@
+# Handoff
+
+Navigates the user to another admin page and displays a return banner at the top of the destination so they can find their way back.
+
+## How it works
+
+1. The user clicks the Handoff button.
+2. A POST request registers the current URL as the return destination and stores optional banner customisations.
+3. The user is redirected to the destination page.
+4. A banner appears at the top of that page with a "Back to Newspack" button (or custom text) that returns them to the origin.
+
+## Usage
+
+### With a URL
+
+Use the `url` prop to hand off to any WordPress admin URL. No plugin needs to be installed.
+
+```jsx
+<Handoff url="/wp-admin/admin.php?page=newspack-dashboard#/">
+    Go to Dashboard
+</Handoff>
+```
+
+### With a managed plugin slug
+
+Use the `plugin` prop to hand off to a Newspack-managed plugin. The button is automatically disabled if the plugin is not installed or inactive.
+
+```jsx
+<Handoff plugin="jetpack">
+    Configure Jetpack
+</Handoff>
+```
+
+Use `editLink` to override the destination to a specific page within the plugin:
+
+```jsx
+<Handoff plugin="wordpress-seo" editLink="/wp-admin/admin.php?page=wpseo_dashboard">
+    Configure Yoast SEO
+</Handoff>
+```
+
+### Via ActionCard
+
+`ActionCard` accepts `handoffUrl` (URL-based) or `handoff` (plugin slug) as convenience props that render a `Handoff` as the action button. `bannerText` and `bannerButtonText` are supported on both:
+
+```jsx
+<ActionCard
+    title="My Feature"
+    actionText="Configure"
+    handoffUrl="/wp-admin/admin.php?page=my-settings"
+    bannerText="Return here once you're done."
+    bannerButtonText="Back to My Feature"
+/>
+
+<ActionCard
+    title="Jetpack"
+    actionText="Configure"
+    handoff="jetpack"
+    editLink="/wp-admin/admin.php?page=jetpack#/settings"
+    bannerText="Return here once you're done."
+    bannerButtonText="Back to My Feature"
+/>
+```
+
+## Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `url` | `string` | Admin URL to hand off to. Use this or `plugin`, not both. |
+| `plugin` | `string` | Slug of a Newspack-managed plugin to hand off to. |
+| `editLink` | `string` | Overrides the destination URL when using `plugin`. |
+| `bannerText` | `string` | Custom body text for the return banner. Defaults to "Return to Newspack after completing configuration". |
+| `bannerButtonText` | `string` | Custom label for the return button. Defaults to "Back to Newspack". |
+| `showOnBlockEditor` | `bool` | Show the return banner inside the block editor. Default `false`. |
+| `useModal` | `bool` | Show a confirmation modal before navigating. |
+| `modalTitle` | `string` | Title for the confirmation modal. |
+| `modalBody` | `string` | Body text for the confirmation modal. |
+| `onReady` | `func` | Called with plugin info once loaded (plugin mode only). |
+| `children` | `node` | Button label. Falls back to "Manage {Plugin Name}" in plugin mode. |
+
+All other props are passed through to the underlying `Button` component (`isPrimary`, `isLink`, `isTertiary`, `className`, etc.).
+
+## Banner customisation
+
+```jsx
+<Handoff
+    url="/wp-admin/admin.php?page=my-settings"
+    bannerText="Finish your configuration, then come back here."
+    bannerButtonText="Back to My Feature"
+>
+    Open Settings
+</Handoff>
+```

package/src/handoff/index.js

@@ -31,8 +31,10 @@ class Handoff extends Component {
 
 	componentDidMount = () => {
 		this._isMounted = true;
-		const { plugin } = this.props;
-		this.retrievePluginInfo( plugin );
+		const { plugin, url } = this.props;
+		if ( plugin && ! url ) {
+			this.retrievePluginInfo( plugin );
+		}
 	};
 
 	componentWillUnmount = () => {
@@ -60,8 +62,25 @@ class Handoff extends Component {
 		return assign( defaults, this.props );
 	};
 
+	goToUrl = () => {
+		const { url, showOnBlockEditor, bannerText, bannerButtonText } = this.props;
+		apiFetch( {
+			path: '/newspack/v1/handoff',
+			method: 'POST',
+			data: {
+				destinationUrl: url,
+				handoffReturnUrl: window && window.location.href,
+				showOnBlockEditor: showOnBlockEditor ? true : false,
+				bannerText,
+				bannerButtonText,
+			},
+		} ).then( response => {
+			window.location.href = response.HandoffLink;
+		} );
+	};
+
 	goToPlugin = plugin => {
-		const { editLink, showOnBlockEditor } = this.props;
+		const { editLink, showOnBlockEditor, bannerText, bannerButtonText } = this.props;
 		apiFetch( {
 			path: '/newspack/v1/plugins/' + plugin + '/handoff',
 			method: 'POST',
@@ -69,6 +88,8 @@ class Handoff extends Component {
 				editLink,
 				handoffReturnUrl: window && window.location.href,
 				showOnBlockEditor: showOnBlockEditor ? true : false,
+				bannerText,
+				bannerButtonText,
 			},
 		} ).then( response => {
 			window.location.href = response.HandoffLink;
@@ -92,30 +113,47 @@ class Handoff extends Component {
 			onReady,
 			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
 			editLink,
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+			bannerText,
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+			bannerButtonText,
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+			url,
 			...otherProps
 		} = this.props;
 		const { pluginInfo, showModal } = this.state;
 		const { modalBody, modalTitle, primaryButton, primaryModalButton, dismissModalButton } = this.textForPlugin( pluginInfo );
 		const { Configured, Name, Slug, Status } = pluginInfo;
 		const classes = classnames( Configured && 'is-configured', className );
+		const goTo = () => ( url ? this.goToUrl() : this.goToPlugin( Slug ) );
 		return (
 			<Fragment>
-				{ Name && 'active' === Status && (
+				{ url && (
+					<Button
+						className={ classes }
+						isSecondary={ ! otherProps.isPrimary && ! otherProps.isTertiary && ! otherProps.isLink }
+						{ ...otherProps }
+						onClick={ () => ( useModal && children ? this.setState( { showModal: true } ) : goTo() ) }
+					>
+						{ children ? children : primaryButton }
+					</Button>
+				) }
+				{ ! url && Name && 'active' === Status && (
 					<Button
 						className={ classes }
 						isSecondary={ ! otherProps.isPrimary && ! otherProps.isTertiary && ! otherProps.isLink }
 						{ ...otherProps }
-						onClick={ () => ( useModal ? this.setState( { showModal: true } ) : this.goToPlugin( Slug ) ) }
+						onClick={ () => ( useModal ? this.setState( { showModal: true } ) : goTo() ) }
 					>
 						{ children ? children : primaryButton }
 					</Button>
 				) }
-				{ Name && 'active' !== Status && (
+				{ ! url && Name && 'active' !== Status && (
 					<Button className={ classes } variant="secondary" disabled { ...otherProps }>
 						{ Name + __( ' not installed', 'newspack-plugin' ) }
 					</Button>
 				) }
-				{ ! Name && (
+				{ ! url && ! Name && (
 					<Button
 						className={ classes }
 						isSecondary={ ! otherProps.isPrimary && ! otherProps.isTertiary && ! otherProps.isLink }
@@ -134,7 +172,7 @@ class Handoff extends Component {
 							<Button variant="secondary" onClick={ () => this.setState( { showModal: false } ) }>
 								{ dismissModalButton }
 							</Button>
-							<Button variant="primary" onClick={ () => this.goToPlugin( Slug ) }>
+							<Button variant="primary" onClick={ goTo }>
 								{ primaryModalButton }
 							</Button>
 						</Card>

package/src/hooks/index.ts

@@ -6,10 +6,11 @@ import { useRef } from '@wordpress/element';
 import usePrompt from './usePrompt';
 import useObjectState from './useObjectState';
 import useOnClickOutside from './useOnClickOutside';
+import useConfirmDialog from './use-confirm-dialog';
 
 const useUniqueId = ( prefix: string ) => {
 	const id = useRef( `${ prefix }-${ Math.round( Math.random() * 99999 ) }` );
 	return id.current;
 };
 
-export default { usePrompt, useObjectState, useOnClickOutside, useUniqueId };
+export default { usePrompt, useObjectState, useOnClickOutside, useUniqueId, useConfirmDialog };