newspack-components 4.8.0 → 4.9.0-alpha.1

package/src/debug-badge/index.test.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import DebugBadge from '.';
+
+describe( 'DebugBadge', () => {
+	afterEach( () => {
+		delete window.newspack_aux_data;
+	} );
+
+	it( 'renders the badge and its glyph in debug mode', () => {
+		window.newspack_aux_data = { is_debug_mode: true };
+		const { container } = render( <DebugBadge /> );
+		expect( container.querySelector( '.newspack-debug-badge' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.newspack-debug-badge > svg' ) ).toBeInTheDocument();
+	} );
+
+	it( 'names itself for assistive tech', () => {
+		window.newspack_aux_data = { is_debug_mode: true };
+		render( <DebugBadge /> );
+		expect( screen.getByRole( 'img', { name: 'Debug mode' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders nothing outside debug mode', () => {
+		window.newspack_aux_data = { is_debug_mode: false };
+		const { container } = render( <DebugBadge /> );
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'renders nothing when the global is absent', () => {
+		const { container } = render( <DebugBadge /> );
+		expect( container ).toBeEmptyDOMElement();
+	} );
+} );

package/src/debug-badge/style.scss

@@ -0,0 +1,26 @@
+/**
+ * Debug Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as np-colors;
+
+.newspack-debug-badge {
+	background: np-colors.$primary-600;
+	border-radius: wp-vars.$radius-round;
+	bottom: 0;
+	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	display: grid;
+	height: wp-vars.$button-size;
+	margin: 0 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;
+	place-items: center;
+	pointer-events: none;
+	position: fixed;
+	width: wp-vars.$button-size;
+	z-index: 9997;
+
+	> svg {
+		fill: wp-colors.$white;
+	}
+}

package/src/empty-state/README.md

@@ -68,15 +68,16 @@ import { EmptyState } from 'newspack-components';
 ```
 
 Every slot except `Root` is optional, and anything else you pass to `Root`
-becomes a sibling of the header at the same 8-unit gap. A screen that offers
-choices rather than one action can drop a stack of cards in instead of
-`EmptyState.Actions`. Pass elements: `Root`'s stack keeps a lone string but drops
-one sitting beside an element, so wrap loose text in a `<p>`. The `Grid` margin
-reset reaches direct children only, so a `<p>` inside a slot keeps the browser's
-default block margin and you zero it where you use it. The component resets
-margins on the two elements it renders itself and stops there: a blanket reset on
-slot content would silently flatten a consumer's own stack of cards or prose, and
-the gaps this component owns all come from its stacks anyway.
+becomes a sibling of the header at the same gap the stack uses: 8 units at the
+default size, 6 at `small`. A screen that offers choices rather than one action
+can drop a stack of cards in instead of `EmptyState.Actions`. Pass elements:
+`Root`'s stack keeps a lone string but drops one sitting beside an element, so
+wrap loose text in a `<p>`. The `Grid` margin reset reaches direct children
+only, so a `<p>` inside a slot keeps the browser's default block margin and you
+zero it where you use it. The component resets margins on the two elements it
+renders itself and stops there: a blanket reset on slot content would silently
+flatten a consumer's own stack of cards or prose, and the gaps this component
+owns all come from its stacks anyway.
 
 ## Consumers own their wrappers
 
@@ -120,7 +121,7 @@ With a children slot there is no pair to check. A button that navigates takes
 |------|------|---------|-------------|
 | `children` | `React.ReactNode` | — | The slots, plus any custom body. |
 | `className` | `string` | — | Merged onto the grid. |
-| `size` | `'default'` \| `'small'` | `'default'` | Read by `EmptyState.Header`. `small` suits an empty state standing in for a panel inside a card. |
+| `size` | `'default'` \| `'small'` | `'default'` | Sets the stack gap, and is read by `EmptyState.Header`. `small` suits an empty state standing in for a panel inside a card. |
 
 The grid always carries `newspack-empty-state`, and `className` lands there
 rather than on a wrapper, because consumers key off both. Inside it, the stack

package/src/empty-state/index.test.js

@@ -45,6 +45,16 @@ describe( 'EmptyState.Root', () => {
 		expect( stack ).toHaveStyle( { gap: 'var(--wpds-dimension-gap-2xl, 32px)' } );
 	} );
 
+	it( 'tightens the stack gap when small', () => {
+		const { container } = render(
+			<EmptyState.Root size="small">
+				<p>body</p>
+			</EmptyState.Root>
+		);
+		const stack = container.querySelector( '.newspack-empty-state' ).firstElementChild;
+		expect( stack ).toHaveStyle( { gap: 'var(--wpds-dimension-gap-xl, 24px)' } );
+	} );
+
 	// Consumers key `:has()` selectors off this class, so losing it changes their
 	// layout without failing anything.
 	it( 'merges className onto the grid', () => {

package/src/empty-state/root.tsx

@@ -24,11 +24,12 @@ const gridColumn = { 'data-start': '2', 'data-end': '4' };
 
 const Root = ( { size = 'default', className, children }: EmptyStateRootProps ) => {
 	const context = useMemo( () => ( { size } ), [ size ] );
+	const isSmall = size === 'small';
 
 	return (
 		<EmptyStateContext.Provider value={ context }>
 			<Grid className={ classnames( 'newspack-empty-state', className ) } columns={ 4 } noMargin>
-				<Stack className="newspack-empty-state__stack" direction="column" gap="2xl" { ...gridColumn }>
+				<Stack className="newspack-empty-state__stack" direction="column" gap={ isSmall ? 'xl' : '2xl' } { ...gridColumn }>
 					{ children }
 				</Stack>
 			</Grid>

package/src/empty-state/types.ts

@@ -5,7 +5,7 @@ export type EmptyStateSize = 'default' | 'small';
 export type EmptyStateActionsOrientation = 'row' | 'column';
 
 export type EmptyStateRootProps = {
-	/** Read by `EmptyState.Header` through context. */
+	/** Sets the stack gap here, and is read by `EmptyState.Header` through context. */
 	size?: EmptyStateSize;
 	/** Merged onto the grid, which is the element consumers' `:has()` selectors look for. */
 	className?: string;

package/src/footer/index.js

@@ -11,6 +11,7 @@ import { ExternalLink } from '@wordpress/components';
 /**
  * Internal dependencies.
  */
+import useConfirmDialog from '../hooks/use-confirm-dialog';
 import './style.scss';
 
 const Footer = ( { simple = undefined } ) => {
@@ -24,6 +25,23 @@ const Footer = ( { simple = undefined } ) => {
 		support_email: supportEmail,
 	} = window.newspack_urls || {};
 
+	const resetDialog = useConfirmDialog( {
+		title: __( 'Reset Newspack?', 'newspack-plugin' ),
+		message: __(
+			'This deletes the Newspack settings on this site and returns you to the setup wizard. Your posts, pages and users are not affected. This cannot be undone.',
+			'newspack-plugin'
+		),
+		confirmButtonText: __( 'Reset Newspack', 'newspack-plugin' ),
+		isDestructive: true,
+	} );
+
+	const starterContentDialog = useConfirmDialog( {
+		title: __( 'Remove Starter Content?', 'newspack-plugin' ),
+		message: __( 'This deletes the posts, pages and categories created as starter content. This cannot be undone.', 'newspack-plugin' ),
+		confirmButtonText: __( 'Remove Starter Content', 'newspack-plugin' ),
+		isDestructive: true,
+	} );
+
 	const footerElements = [
 		{
 			label: pluginVersion.label,
@@ -57,12 +75,14 @@ const Footer = ( { simple = undefined } ) => {
 		footerElements.push( {
 			label: __( 'Reset Newspack', 'newspack-plugin' ),
 			url: resetUrl,
+			confirm: resetDialog.requestConfirm,
 		} );
 	}
 	if ( removeStarterContent ) {
 		footerElements.push( {
 			label: __( 'Remove Starter Content', 'newspack-plugin' ),
 			url: removeStarterContent,
+			confirm: starterContentDialog.requestConfirm,
 		} );
 	}
 	if ( supportEmail ) {
@@ -71,15 +91,40 @@ const Footer = ( { simple = undefined } ) => {
 			url: `mailto:${ supportEmail }`,
 		} );
 	}
+	const renderItem = ( { url, label, external, confirm } ) => {
+		if ( external ) {
+			return <ExternalLink href={ url }>{ label }</ExternalLink>;
+		}
+		if ( ! confirm ) {
+			return <a href={ url }>{ label }</a>;
+		}
+		// onClick only sees primary clicks, so an href here would let a middle-click
+		// or "Open link in new tab" reach the URL unguarded.
+		return (
+			<button
+				type="button"
+				onClick={ () =>
+					confirm( () => {
+						window.location.href = url;
+					} )
+				}
+			>
+				{ label }
+			</button>
+		);
+	};
+
 	return (
 		<div className="newspack-footer">
 			{ ! simple && (
 				<ul>
-					{ footerElements.map( ( { url, label, external }, index ) => (
-						<li key={ index }>{ external ? <ExternalLink href={ url }>{ label }</ExternalLink> : <a href={ url }>{ label }</a> }</li>
+					{ footerElements.map( ( element, index ) => (
+						<li key={ index }>{ renderItem( element ) }</li>
 					) ) }
 				</ul>
 			) }
+			{ resetDialog.confirmDialog }
+			{ starterContentDialog.confirmDialog }
 		</div>
 	);
 };

package/src/footer/index.test.js

@@ -0,0 +1,114 @@
+/**
+ * External dependencies.
+ */
+import { fireEvent, render, screen, within } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import Footer from './';
+
+// Footer renders outside the wizard's HashRouter, so there is no MemoryRouter
+// wrapper here on purpose.
+describe( 'Footer', () => {
+	const RESET_URL = 'https://example.test/wp-admin/admin.php?page=newspack-dashboard&newspack_reset=reset';
+	const STARTER_CONTENT_URL = 'https://example.test/wp-admin/admin.php?page=newspack-dashboard&newspack_reset=starter-content';
+	let assigned;
+	let originalLocation;
+	let originalUrls;
+
+	const confirmIn = async name => within( await screen.findByRole( 'dialog' ) ).getByRole( 'button', { name } );
+
+	beforeEach( () => {
+		assigned = [];
+		originalLocation = window.location;
+		originalUrls = window.newspack_urls;
+		delete window.location;
+		window.location = {
+			get href() {
+				return 'https://example.test/wp-admin/admin.php?page=newspack-dashboard';
+			},
+			set href( value ) {
+				assigned.push( value );
+			},
+		};
+		window.newspack_urls = {
+			support: 'https://help.newspack.com/',
+			reset_url: RESET_URL,
+			remove_starter_content: STARTER_CONTENT_URL,
+			plugin_version: { label: 'Newspack 1.0.0' },
+		};
+	} );
+
+	afterEach( () => {
+		delete window.location;
+		window.location = originalLocation;
+		if ( undefined === originalUrls ) {
+			delete window.newspack_urls;
+		} else {
+			window.newspack_urls = originalUrls;
+		}
+	} );
+
+	it( 'offers no link for a browser gesture to follow', () => {
+		render( <Footer /> );
+		expect( screen.getByRole( 'button', { name: 'Reset Newspack' } ) ).not.toHaveAttribute( 'href' );
+		expect( screen.getByRole( 'button', { name: 'Remove Starter Content' } ) ).not.toHaveAttribute( 'href' );
+	} );
+
+	it( 'does not reset on the first click', () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Reset Newspack' } ) );
+		expect( assigned ).toEqual( [] );
+	} );
+
+	it( 'asks before resetting', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Reset Newspack' } ) );
+		expect( await screen.findByText( /deletes the Newspack settings/ ) ).toBeInTheDocument();
+	} );
+
+	it( 'leaves the site alone when the reset is cancelled', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Reset Newspack' } ) );
+		// The modal's close icon also carries aria-label="Cancel"; this is the text button.
+		const cancel = ( await screen.findAllByRole( 'button', { name: 'Cancel' } ) ).find( button => 'Cancel' === button.textContent );
+		fireEvent.click( cancel );
+		expect( assigned ).toEqual( [] );
+	} );
+
+	it( 'resets once confirmed', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Reset Newspack' } ) );
+		fireEvent.click( await confirmIn( 'Reset Newspack' ) );
+		expect( assigned ).toEqual( [ RESET_URL ] );
+	} );
+
+	it( 'does not remove the starter content on the first click', () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Starter Content' } ) );
+		expect( assigned ).toEqual( [] );
+	} );
+
+	it( 'asks before removing the starter content', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Starter Content' } ) );
+		expect( await screen.findByText( /created as starter content/ ) ).toBeInTheDocument();
+	} );
+
+	it( 'removes the starter content once confirmed', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Starter Content' } ) );
+		fireEvent.click( await confirmIn( 'Remove Starter Content' ) );
+		expect( assigned ).toEqual( [ STARTER_CONTENT_URL ] );
+	} );
+
+	it( 'does not guard the non-destructive links', () => {
+		window.newspack_urls.setup_wizard = 'https://example.test/wp-admin/admin.php?page=newspack-setup-wizard';
+		render( <Footer /> );
+		const link = screen.getByRole( 'link', { name: 'Setup Wizard' } );
+		expect( link ).toHaveAttribute( 'href', window.newspack_urls.setup_wizard );
+		fireEvent.click( link );
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/footer/style.scss

@@ -2,6 +2,7 @@
  * Footer
  */
 
+@use "../mixins" as mixins;
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-footer {
@@ -31,7 +32,8 @@
 	li {
 		margin: 8px;
 
-		a {
+		a,
+		button {
 			align-items: flex-end;
 			color: inherit;
 			display: flex;
@@ -42,5 +44,19 @@
 				color: wp-colors.$gray-900;
 			}
 		}
+
+		button {
+			appearance: none;
+			background: none;
+			border: 0;
+			cursor: pointer;
+			font: inherit;
+			padding: 0;
+			text-decoration: underline;
+
+			&:focus-visible {
+				@include mixins.wpds-focus-ring;
+			}
+		}
 	}
 }

package/src/index.js

@@ -17,6 +17,7 @@ export { default as ColorPicker } from './color-picker';
 export { default as ConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as DataViews } from './dataviews';
+export { default as DebugBadge } from './debug-badge';
 export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
 export { default as EmptyState } from './empty-state';

package/src/integration-icon/index.tsx

@@ -6,17 +6,17 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { espProviderIcons } from '../integration-icons';
+import { providerIcons } from '../integration-icons';
 import './style.scss';
 
 /**
- * The single source for how an ESP provider is shown: brand mark plus badge
- * background. A new provider needs an icon file, an `espProviderIcons` entry,
+ * The single source for how a provider is shown: brand mark plus badge
+ * background. A new provider needs an icon file, a `providerIcons` entry,
  * and a background rule in this component's stylesheet.
  */
 const IntegrationIcon = ( { provider, className }: { provider: string; className?: string } ) => {
-	const icons: Record< string, React.ReactNode > = espProviderIcons;
-	const node = Object.prototype.hasOwnProperty.call( espProviderIcons, provider ) ? icons[ provider ] : null;
+	const icons: Record< string, React.ReactNode > = providerIcons;
+	const node = Object.prototype.hasOwnProperty.call( providerIcons, provider ) ? icons[ provider ] : null;
 	if ( ! node ) {
 		return null;
 	}

package/src/integration-icon/style.scss

@@ -21,14 +21,26 @@
 		background: #004cff;
 	}
 
-	&--mailchimp {
-		background: #ffe01b;
+	&--beehiiv {
+		background: #060419;
 	}
 
 	&--constant-contact {
 		background: wp-colors.$gray-100;
 	}
 
+	&--fundraiseup {
+		background: #2bb77b;
+	}
+
+	&--gravity-forms {
+		background: #ff4f00;
+	}
+
+	&--mailchimp {
+		background: #ffe01b;
+	}
+
 	&--manual {
 		background: wp-colors.$gray-800;
 		color: wp-colors.$white;
@@ -39,4 +51,8 @@
 			fill: currentcolor;
 		}
 	}
+
+	&--salesforce {
+		background: #0d9dda;
+	}
 }

package/src/integration-icons/active-campaign.js

@@ -1,11 +1,7 @@
 const activeCampaign = (
 	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
 		<path
-			d="M16.6934 10.5811C17.1772 10.9036 17.4355 11.4194 17.4355 11.9678C17.4355 12.516 17.1449 13.0319 16.6934 13.3545L6.56445 20V18.6133C6.56445 18.1939 6.75844 17.7746 7.14551 17.5166L15.5 11.9678L7.14551 6.38672C6.79063 6.16086 6.56445 5.74175 6.56445 5.29004V4L16.6934 10.5811Z"
-			fill="white"
-		/>
-		<path
-			d="M6.56445 8.77441C6.56445 8.35519 7.04853 8.12873 7.37109 8.35449L12.6611 11.9355L11.9512 12.4189C11.4996 12.7091 10.9193 12.7092 10.4678 12.4189L9.30664 11.6777L6.56445 9.83887V8.77441Z"
+			d="M17.28 10.4037C17.8244 10.7666 18.115 11.3468 18.115 11.9637C18.115 12.5805 17.788 13.1609 17.28 13.5238L5.88501 21V19.4399C5.88501 18.9681 6.10324 18.4965 6.5387 18.2062L15.9375 11.9637L6.5387 5.68506C6.13946 5.43097 5.88501 4.95947 5.88501 4.45129V3L17.28 10.4037ZM5.88501 8.37122C5.88501 7.89959 6.4296 7.64482 6.79248 7.8988L12.7438 11.9275L11.9451 12.4713C11.4371 12.7977 10.7842 12.7978 10.2762 12.4713L8.96997 11.6375L5.88501 9.56873V8.37122Z"
 			fill="white"
 		/>
 	</svg>

package/src/integration-icons/beehiiv.js

@@ -0,0 +1,10 @@
+const beehiiv = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+		<path
+			d="M18.6602 11.4894H5.35668C5.19293 11.4883 5.03627 11.4225 4.92088 11.3063C4.80549 11.1901 4.74073 11.033 4.74073 10.8692V9.92487C4.7398 9.67122 4.78886 9.41988 4.88509 9.1852C4.98132 8.95052 5.12284 8.73709 5.30157 8.55712C5.4803 8.37714 5.69274 8.23414 5.92675 8.13629C6.16076 8.03843 6.41176 7.98764 6.6654 7.9868H17.3353C17.5889 7.98754 17.8398 8.03822 18.0738 8.13595C18.3078 8.23368 18.5203 8.37654 18.6991 8.55637C18.8779 8.7362 19.0195 8.94949 19.1158 9.18406C19.2122 9.41862 19.2614 9.66987 19.2607 9.92346V10.8685C19.2638 10.9491 19.2506 11.0296 19.2218 11.1049C19.193 11.1803 19.1492 11.249 19.0931 11.307C19.0369 11.365 18.9697 11.411 18.8953 11.4422C18.8209 11.4734 18.7409 11.4899 18.6602 11.4894ZM15.8574 6.96492H8.15947C7.99191 6.96343 7.8317 6.89593 7.71361 6.77704C7.59552 6.65816 7.52908 6.4975 7.52872 6.32994C7.52872 4.74919 8.80643 3.46302 10.3773 3.46302H13.641C15.2119 3.46302 16.4896 4.74919 16.4896 6.32994C16.4907 6.41334 16.4752 6.49613 16.4439 6.57345C16.4126 6.65077 16.3662 6.72106 16.3074 6.7802C16.2486 6.83934 16.1785 6.88615 16.1014 6.91787C16.0243 6.94959 15.9416 6.96558 15.8582 6.96492H15.8574ZM19.2755 12.5113H4.74073C3.7858 12.5113 3 13.3013 3 14.2619C3 15.2225 3.7858 16.0132 4.74073 16.0132H9.89879C10.0834 15.0216 10.9453 14.2619 11.9919 14.2619C12.4923 14.2631 12.9767 14.4386 13.3618 14.7582C13.7468 15.0778 14.0085 15.5216 14.1019 16.0132H19.2607C20.2149 16.0132 21 15.2225 21 14.2619C21 13.3013 20.2304 12.5113 19.2755 12.5113ZM18.6454 17.0358H14.1336V20.537H17.5214C18.4756 20.537 19.2607 19.7477 19.2607 18.7864V17.6708C19.2636 17.5882 19.2499 17.506 19.2202 17.4289C19.1906 17.3518 19.1457 17.2816 19.0883 17.2223C19.0308 17.163 18.962 17.1159 18.8859 17.0838C18.8098 17.0518 18.728 17.0354 18.6454 17.0358ZM5.35668 17.0358C5.189 17.0371 5.02861 17.1045 4.91037 17.2234C4.79213 17.3423 4.72559 17.5031 4.72523 17.6708V18.7864C4.72523 19.747 5.51102 20.537 6.46596 20.537H9.85298V17.0358H5.35668Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+export default beehiiv;

package/src/integration-icons/gravity-forms.js

@@ -0,0 +1,10 @@
+const gravityForms = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+		<path
+			d="M8.74072 8.98989H24V4.73383H8.77618C6.75022 4.67092 4.79489 5.46964 3.41 6.92583C0.0886559 10.4377 0 19.2696 0 19.2696H23.8818V11.2749H19.5912V15.0019H4.58018C4.67474 13.6123 5.31889 11.1296 6.53633 9.84462C7.10785 9.25496 7.91399 8.9424 8.74072 8.98989Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+export default gravityForms;

package/src/integration-icons/index.js

@@ -7,23 +7,34 @@ import { atSymbol } from '@wordpress/icons';
  * Internal dependencies
  */
 import activeCampaign from './active-campaign';
+import beehiiv from './beehiiv';
 import constantContact from './constant-contact';
+import fundraiseUp from './fundraise-up';
+import gravityForms from './gravity-forms';
 import mailchimp from './mailchimp';
+import salesforce from './salesforce';
 
 export { default as activeCampaign } from './active-campaign';
+export { default as beehiiv } from './beehiiv';
 export { default as constantContact } from './constant-contact';
 export { default as fundraiseUp } from './fundraise-up';
+export { default as gravityForms } from './gravity-forms';
 export { default as mailchimp } from './mailchimp';
 export { default as salesforce } from './salesforce';
 export { default as wisepops } from './wisepops';
 
-// ESP provider brand marks keyed by the slug the backend reports
-// (`Newspack_Newsletters::service_provider()`). Rendered via IntegrationIcon.
-export const espProviderIcons = {
+// Brand marks keyed by the ESP slug the backend reports
+// (`Newspack_Newsletters::service_provider()`), by integration ID, or by the
+// brand slug an integration maps to. Rendered via IntegrationIcon.
+export const providerIcons = {
 	active_campaign: activeCampaign,
 	mailchimp,
 	constant_contact: constantContact,
 	manual: atSymbol,
+	salesforce,
+	beehiiv,
+	fundraiseup: fundraiseUp,
+	gravity_forms: gravityForms,
 };
 
 export const espProviderOrder = [ 'active_campaign', 'mailchimp', 'constant_contact', 'manual' ];

package/src/integration-icons/salesforce.js

@@ -1,8 +1,8 @@
 const salesforce = (
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
 		<path
-			d="M13.3173 7.24314C14.3498 6.16866 15.7848 5.50017 17.3737 5.50017C19.4877 5.50017 21.3287 6.67965 22.3122 8.42612C23.1661 8.04463 24.1111 7.83113 25.1016 7.83113C28.913 7.83113 32 10.9461 32 14.7925C32 18.639 28.9095 21.7539 25.1016 21.7539C24.6361 21.7539 24.1811 21.7084 23.7436 21.6174C22.8791 23.1574 21.2307 24.2004 19.3407 24.2004C18.5497 24.2004 17.8007 24.0184 17.1357 23.6929C16.2607 25.7543 14.2168 27.1998 11.8403 27.1998C9.46385 27.1998 7.25189 25.6319 6.4399 23.4339C6.0864 23.5074 5.71891 23.5494 5.34092 23.5494C2.39046 23.5494 0 21.1344 0 18.1525C0 16.154 1.07448 14.411 2.67046 13.4765C2.34146 12.7206 2.15947 11.8841 2.15947 11.0091C2.15947 7.57913 4.94192 4.80018 8.37537 4.80018C10.3913 4.80018 12.1833 5.75916 13.3173 7.24314Z"
-			fill="var(--integration-icon-color, #0D9DDA)"
+			d="M10.0838 5.745C10.8213 4.9775 11.8463 4.5 12.9813 4.5C14.4913 4.5 15.8063 5.3425 16.5088 6.59C17.1188 6.3175 17.7938 6.165 18.5013 6.165C21.2238 6.165 23.4288 8.39 23.4288 11.1375C23.4288 13.885 21.2213 16.11 18.5013 16.11C18.1688 16.11 17.8438 16.0775 17.5313 16.0125C16.9138 17.1125 15.7363 17.8575 14.3863 17.8575C13.8213 17.8575 13.2863 17.7275 12.8113 17.495C12.1863 18.9675 10.7263 20 9.02876 20C7.33126 20 5.75126 18.88 5.17126 17.31C4.91876 17.3625 4.65626 17.3925 4.38626 17.3925C2.27876 17.3925 0.571259 15.6675 0.571259 13.5375C0.571259 12.11 1.33876 10.865 2.47876 10.1975C2.24376 9.6575 2.11376 9.06 2.11376 8.435C2.11376 5.985 4.10126 4 6.55376 4C7.99376 4 9.27376 4.685 10.0838 5.745Z"
+			fill="white"
 		/>
 	</svg>
 );

package/src/notice/index.js

@@ -6,7 +6,7 @@
  * WordPress dependencies.
  */
 import { Component, RawHTML } from '@wordpress/element';
-import { Icon, bug, check, help, info } from '@wordpress/icons';
+import { Icon, check, help, info } from '@wordpress/icons';
 
 /**
  * Internal dependencies.
@@ -23,23 +23,10 @@ class Notice extends Component {
 	 * Render
 	 */
 	render() {
-		const {
-			className,
-			debugMode,
-			isError,
-			isHandoff,
-			isHelp,
-			isSuccess,
-			isWarning,
-			noticeText,
-			rawHTML,
-			style = {},
-			children = null,
-		} = this.props;
+		const { className, isError, isHandoff, isHelp, isSuccess, isWarning, noticeText, rawHTML, style = {}, children = null } = this.props;
 		const classes = classnames(
 			'newspack-notice',
 			className,
-			debugMode && 'newspack-notice__is-debug',
 			isError && 'newspack-notice__is-error',
 			isHandoff && 'newspack-notice__is-handoff',
 			isHelp && 'newspack-notice__is-help',
@@ -51,8 +38,6 @@ class Notice extends Component {
 			noticeIcon = help;
 		} else if ( isSuccess ) {
 			noticeIcon = check;
-		} else if ( debugMode ) {
-			noticeIcon = bug;
 		} else {
 			noticeIcon = info;
 		}

package/src/notice/style.scss

@@ -22,25 +22,6 @@
 		margin-right: 4px;
 	}
 
-	&__is-debug {
-		background: np-colors.$primary-600;
-		border-radius: 50%;
-		bottom: 16px;
-		box-shadow: 0 0 8px 4px rgba(black, 0.08);
-		color: white;
-		font-weight: bold;
-		margin: 0 16px;
-		padding: 6px;
-		position: fixed;
-		text-transform: uppercase;
-		z-index: 9997;
-
-		> svg {
-			fill: white;
-			margin: 0;
-		}
-	}
-
 	&__is-error {
 		background: color.adjust(wp-colors.$alert-red, $lightness: 35%);
 

package/src/plugin-toggle/index.js

@@ -99,7 +99,7 @@ class PluginToggle extends Component {
 					toggleChecked={ this.isPluginInstalledAndActive( plugin ) }
 					toggleOnChange={ value => this.managePlugin( slug, value ) }
 					notification={ error }
-					notificationHTML={ error }
+					notificationHTML
 					notificationLevel="error"
 				/>
 			);

package/src/with-wizard-screen/index.js

@@ -6,7 +6,7 @@ import { cloneElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Button, Handoff, Notice, HandoffMessage, TabbedNavigation, Page } from '../';
+import { Button, DebugBadge, Handoff, HandoffMessage, TabbedNavigation, Page } from '../';
 import { activeBreadcrumbs } from '../wizard/breadcrumbs-select';
 import { buttonProps } from '../button-props';
 import Router from '../proxied-imports/router';
@@ -112,7 +112,7 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton,
 			}
 			return (
 				<>
-					{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
+					<DebugBadge />
 					{ hideHeader ? (
 						// Without the Page shell the tabs still own the content: it
 						// renders inside the active tab's panel.