newspack-components 4.3.0 → 4.4.0-alpha.1

package/src/hooks/use-confirm-dialog.tsx

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies.
+ */
+import { useCallback, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import ConfirmDialog from '../confirm-dialog';
+
+type UseConfirmDialogOptions = {
+	when?: boolean;
+	message: React.ReactNode;
+	title?: string;
+	confirmButtonText?: string;
+	cancelButtonText?: string;
+	isDestructive?: boolean;
+	hideTitle?: boolean;
+	size?: 'small' | 'medium' | 'large' | 'x-large' | 'full';
+	className?: string;
+};
+
+type UseConfirmDialogResult = {
+	confirmDialog: React.ReactElement;
+	requestConfirm: ( callback: () => void ) => void;
+};
+
+/**
+ * A hook that encapsulates the ConfirmDialog component and provides a
+ * `requestConfirm` function for imperative use.
+ *
+ * Calling `requestConfirm( callback )` will show a confirmation dialog.
+ * If the user confirms, `callback` is invoked. If the user cancels, it is not.
+ *
+ * When `when` is explicitly `false`, `requestConfirm( callback )` calls
+ * `callback` immediately without showing the dialog. This is useful for
+ * guarding actions that are only destructive when there are unsaved changes
+ * (e.g. `when={ isDirty }`). When `when` is omitted or `true`, the dialog
+ * is always shown.
+ *
+ * The `confirmDialog` element must be rendered somewhere in the component's
+ * JSX for the dialog to appear.
+ */
+function useConfirmDialog( options: UseConfirmDialogOptions ): UseConfirmDialogResult {
+	const { message, when, ...dialogProps } = options;
+	const [ pendingAction, setPendingAction ] = useState< ( () => void ) | null >( null );
+
+	// Keep a ref so `requestConfirm` can always read the latest `when` value
+	// without needing to be recreated on every render.
+	const whenRef = useRef( when );
+	whenRef.current = when;
+
+	const requestConfirm = useCallback( ( callback: () => void ) => {
+		if ( whenRef.current !== false ) {
+			// Store as a thunk to opt out of React's functional-update interpretation.
+			setPendingAction( () => callback );
+		} else {
+			callback();
+		}
+	}, [] );
+
+	const confirmDialog = (
+		<ConfirmDialog
+			{ ...dialogProps }
+			when={ when }
+			isOpen={ !! pendingAction }
+			onConfirm={ () => {
+				pendingAction?.();
+				setPendingAction( null );
+			} }
+			onCancel={ () => setPendingAction( null ) }
+		>
+			{ message }
+		</ConfirmDialog>
+	);
+
+	return { confirmDialog, requestConfirm };
+}
+
+export default useConfirmDialog;

package/src/hooks/use-unsaved-changes-dialog.tsx

@@ -0,0 +1,140 @@
+/**
+ * WordPress dependencies.
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import useConfirmDialog from './use-confirm-dialog';
+
+type UseUnsavedChangesDialogOptions = {
+	when: boolean;
+};
+
+// Stack of mounted guards; the last entry owns the document-level handler so
+// only the most-recently-mounted guard prompts when several are active. Using a
+// stack keeps ownership correct under out-of-order unmounts.
+const activeGuards: symbol[] = [];
+
+/**
+ * Returns true when `href` resolves to the same origin as the current page —
+ * i.e. it is an internal navigation that would unload the wizard. External
+ * `https://...` links, `mailto:`, `tel:`, and other schemes navigate to a new
+ * context (new tab, mail client, dialer) without unloading the wizard, and
+ * must not trigger the discard-changes prompt.
+ */
+function isSameOriginNavigation( link: HTMLAnchorElement ): boolean {
+	try {
+		const url = new URL( link.href, window.location.href );
+		return url.origin === window.location.origin && ( url.protocol === 'http:' || url.protocol === 'https:' );
+	} catch ( e ) {
+		return false;
+	}
+}
+
+/**
+ * Shared unsaved-changes guard. Wraps `useConfirmDialog` with standardized
+ * messaging, intercepts same-origin link clicks so the dialog fires instead
+ * of a silent navigation, and adds a `beforeunload` listener as the last-resort
+ * guard for refresh / tab-close (browser-native, cannot be styled). The
+ * returned `confirmDialog` element must be rendered in JSX.
+ *
+ * Single-consumer constraint: the click handler is attached at the document
+ * level in capture phase. Two simultaneously-active instances will both fire
+ * a dialog. A development-only warning surfaces this.
+ */
+function useUnsavedChangesDialog( { when }: UseUnsavedChangesDialogOptions ) {
+	const { confirmDialog, requestConfirm } = useConfirmDialog( {
+		when,
+		message: __( 'You have unsaved changes that will be lost. Discard changes?', 'newspack-plugin' ),
+		confirmButtonText: __( 'Discard changes', 'newspack-plugin' ),
+		hideTitle: true,
+	} );
+
+	// Tracks navigation the user has already approved via our custom dialog so
+	// the beforeunload guard doesn't fire a second native prompt on top of it.
+	const isNavigatingRef = useRef( false );
+
+	useEffect( () => {
+		if ( ! when ) {
+			return;
+		}
+		const ownerId = Symbol( 'unsaved-changes-guard' );
+		activeGuards.push( ownerId );
+		if ( process.env.NODE_ENV !== 'production' && activeGuards.length > 1 ) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				'useUnsavedChangesDialog: more than one active instance detected. ' +
+					'Document-level click capture will fire a dialog per instance — ensure only one guard is active at a time.'
+			);
+		}
+		const handler = ( e: MouseEvent ) => {
+			// Only the top-of-stack guard prompts, so concurrent guards can't stack dialogs.
+			if ( activeGuards[ activeGuards.length - 1 ] !== ownerId ) {
+				return;
+			}
+			if ( e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0 ) {
+				return;
+			}
+			const target = e.target as HTMLElement | null;
+			const link = target?.closest( 'a[href]' ) as HTMLAnchorElement | null;
+			if ( ! link ) {
+				return;
+			}
+			const href = link.getAttribute( 'href' );
+			if ( ! href || href.startsWith( '#' ) || href.startsWith( 'javascript:' ) ) {
+				// All `#`-prefixed links are skipped here: plain anchors
+				// (`#section`) are scroll targets, and HashRouter paths
+				// (`#/route`) are intercepted by `ConfirmDialog`'s built-in
+				// `history.block` listener instead. Routing them through
+				// `window.location.href` here would trigger a hashchange
+				// that the still-active block re-catches, double-prompting.
+				return;
+			}
+			if ( link.target && link.target !== '_self' ) {
+				return;
+			}
+			// Skip mailto:, tel:, external origins, and any non-http(s) scheme —
+			// they don't unload the wizard, so a discard prompt would be wrong.
+			if ( ! isSameOriginNavigation( link ) ) {
+				return;
+			}
+			e.preventDefault();
+			e.stopPropagation();
+			const destination = link.href;
+			requestConfirm( () => {
+				isNavigatingRef.current = true;
+				window.location.href = destination;
+			} );
+		};
+		document.addEventListener( 'click', handler, true );
+		return () => {
+			document.removeEventListener( 'click', handler, true );
+			const idx = activeGuards.indexOf( ownerId );
+			if ( idx !== -1 ) {
+				activeGuards.splice( idx, 1 );
+			}
+		};
+	}, [ when, requestConfirm ] );
+
+	useEffect( () => {
+		if ( ! when ) {
+			return;
+		}
+		const handler = ( e: BeforeUnloadEvent ) => {
+			if ( isNavigatingRef.current ) {
+				return;
+			}
+			e.preventDefault();
+			e.returnValue = '';
+		};
+		window.addEventListener( 'beforeunload', handler );
+		return () => window.removeEventListener( 'beforeunload', handler );
+	}, [ when ] );
+
+	return { confirmDialog, requestConfirm };
+}
+
+export default useUnsavedChangesDialog;

package/src/image-upload/index.js

@@ -7,11 +7,12 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { BaseControl } from '@wordpress/components';
 
 /**
  * Internal dependencies.
  */
-import { Button, InfoButton } from '../';
+import { Button } from '../';
 import './style.scss';
 
 /**
@@ -72,41 +73,35 @@ class ImageUpload extends Component {
 	 * Render.
 	 */
 	render = () => {
-		const { buttonLabel, className, disabled, help, image, info, isCovering, label, onChange, style = {} } = this.props;
+		const { buttonLabel, className, disabled, help, image, isCovering, label, onChange, style = {} } = this.props;
 		const classes = classnames(
 			'newspack-image-upload__image',
 			{ 'newspack-image-upload__image--has-image': image },
 			{ 'newspack-image-upload__image--covering': isCovering }
 		);
 		return (
-			<div className={ classnames( 'newspack-image-upload', className ) }>
-				<div className="newspack-image-upload__header">
-					{ /* eslint-disable-next-line jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control */ }
-					{ label && <label className="newspack-image-upload__label">{ label }</label> }
-					{ info && <InfoButton text={ info } /> }
-				</div>
-				<div className={ classes } style={ { ...style } }>
+			<BaseControl __nextHasNoMarginBottom className={ classnames( 'newspack-image-upload', className ) } help={ help }>
+				{ label && <BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel> }
+				<div className={ classes } style={ style }>
 					{ image?.url ? (
 						<>
 							<img data-testid="image-upload" src={ image.url } alt={ __( 'Image preview', 'newspack-plugin' ) } />
 							<div className="newspack-image-upload__controls">
-								<Button disabled={ disabled } onClick={ this.openModal } isLink>
+								<Button disabled={ disabled } onClick={ this.openModal } variant="tertiary">
 									{ __( 'Replace', 'newspack-plugin' ) }
 								</Button>
-								<span className="sep" />
-								<Button disabled={ disabled } onClick={ () => onChange( null ) } isLink isDestructive>
+								<Button disabled={ disabled } onClick={ () => onChange( null ) } variant="tertiary" isDestructive>
 									{ __( 'Remove', 'newspack-plugin' ) }
 								</Button>
 							</div>
 						</>
 					) : (
-						<Button disabled={ disabled } onClick={ this.openModal } isLink>
+						<Button disabled={ disabled } onClick={ this.openModal } variant="tertiary">
 							{ buttonLabel ? buttonLabel : __( 'Upload', 'newspack-plugin' ) }
 						</Button>
 					) }
 				</div>
-				{ help && <p className="newspack-image-upload__help">{ help }</p> }
-			</div>
+			</BaseControl>
 		);
 	};
 }

package/src/image-upload/style.scss

@@ -3,45 +3,29 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-image-upload {
-	margin: 32px 0;
-	&__header {
-		display: flex;
-	}
-	&__label {
-		margin: 0 0 8px;
-	}
+	margin: wp-vars.$grid-unit-40 0;
 	&__image {
 		align-items: center;
+		background-position: center;
 		background-repeat: no-repeat;
 		background-size: contain;
-		background-position: center;
-		border: 1px dashed wp-colors.$gray-700;
-		border-radius: 2px;
+		border: 1px dashed wp-colors.$gray-600;
+		border-radius: wp-vars.$radius-small;
 		display: flex;
 		justify-content: center;
 		max-width: 100%;
-		min-height: 48px;
+		min-height: wp-vars.$grid-unit-50;
 		position: relative;
 		&--covering {
 			background-size: cover;
 		}
 		&:not(&--has-image) {
-			.newspack-button {
-				background: white !important;
-				border-radius: 2px !important;
-				padding: 4px 16px !important;
-
-				&:active,
-				&:focus,
-				&:hover {
-					background: white !important;
-				}
-
-				&:focus {
-					outline-offset: -3px !important;
-				}
+			.components-button {
+				justify-content: center;
+				width: calc(100% - 2px);
 			}
 		}
 		&--has-image {
@@ -49,8 +33,8 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba(black, 0.54);
-				border-radius: 2px;
+				border: 1px solid rgba(wp-colors.$black, 0.54);
+				border-radius: wp-vars.$radius-small;
 				content: "";
 				inset: 0;
 				position: absolute;
@@ -66,7 +50,7 @@
 				position: relative;
 			}
 			&::after {
-				background: rgba(white, 0.9);
+				background: rgba(wp-colors.$white, 0.95);
 				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,
@@ -80,20 +64,8 @@
 				max-height: 100%;
 				max-width: 100%;
 			}
-			.sep {
-				background: transparent;
-				display: block;
-				height: 8px;
-				margin: 0;
-				width: 100%;
-			}
 		}
 	}
-	&__image + &__help {
-		color: wp-colors.$gray-700;
-		font-size: 12px;
-		margin: 1em 0 0;
-	}
 	&__controls {
 		align-items: center;
 		display: flex;

package/src/index.js

@@ -5,15 +5,17 @@ export { default as AutocompleteWithSuggestions } from './autocomplete-with-sugg
 export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
 export { default as Badge } from './badge';
 export { default as Button } from './button';
-export { default as ButtonCard } from './button-card';
 export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
+export { default as CardFeature } from './card-feature';
+export { default as CardForm } from './card-form';
 export { default as CardSettingsGroup } from './card-settings-group';
 export { default as CardSortableList } from './card-sortable-list';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 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 Divider } from './divider';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
@@ -48,6 +50,10 @@ export { default as withWizardScreen } from './with-wizard-screen';
 
 export { default as Router } from './proxied-imports/router';
 export { default as hooks } from './hooks';
+export { default as useConfirmDialog } from './hooks/use-confirm-dialog';
+export { default as useUnsavedChangesDialog } from './hooks/use-unsaved-changes-dialog';
+import * as integrationIcons from './integration-icons';
+export { integrationIcons };
 export { default as utils } from './utils';
 
 import './style.scss';

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

@@ -0,0 +1,14 @@
+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"
+			fill="white"
+		/>
+	</svg>
+);
+
+export default activeCampaign;

package/src/integration-icons/constant-contact.js

@@ -0,0 +1,22 @@
+const constantContact = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+		<path
+			d="M11.3261 20.9997C6.36799 20.9997 3 16.9581 3 12.6626C3 8.30073 6.43425 4.5352 11.0059 4.35852C11.1826 4.34748 11.3372 4.50207 11.3372 4.67875V6.01491C11.3372 6.18055 11.2047 6.3241 11.028 6.33514C7.67102 6.48974 4.96558 9.23935 4.96558 12.6736C4.96558 16.0305 7.61581 19.0341 11.3261 19.0341C14.9371 19.0341 17.4989 16.152 17.6535 12.9717C17.6646 12.8061 17.7971 12.6626 17.9738 12.6626H19.3099C19.4866 12.6626 19.6302 12.8061 19.6302 12.9938C19.4756 17.2342 16.0634 20.9997 11.3261 20.9997Z"
+			fill="#1856ED"
+		/>
+		<path
+			d="M11.3372 16.5827C9.12864 16.5827 7.41704 14.8269 7.41704 12.6625C7.41704 10.6417 8.97405 8.95223 10.9948 8.78659C11.1826 8.77555 11.3372 8.9191 11.3372 9.10683V10.443C11.3372 10.5976 11.2267 10.7411 11.0611 10.7632C10.0894 10.8957 9.38262 11.7239 9.38262 12.6736C9.38262 13.7337 10.2108 14.6281 11.3372 14.6281C12.2758 14.6281 13.115 13.9214 13.2475 12.9497C13.2696 12.7951 13.4132 12.6736 13.5678 12.6736H14.9039C15.0916 12.6736 15.2352 12.8282 15.2242 13.0159C15.0475 14.9925 13.3911 16.5827 11.3372 16.5827Z"
+			fill="#1856ED"
+		/>
+		<path
+			d="M19.0339 11.0283C18.8793 7.79277 16.2953 5.12046 12.9715 4.96586C12.8058 4.95482 12.6623 4.82231 12.6623 4.64563V3.32051C12.6623 3.14383 12.8058 3.00028 12.9936 3.00028C17.3112 3.16592 20.8338 6.62225 20.9994 11.0062C21.0105 11.1828 20.8559 11.3374 20.6792 11.3374H19.3431C19.1885 11.3374 19.0449 11.2049 19.0339 11.0283Z"
+			fill="#FF9E1A"
+		/>
+		<path
+			d="M13.0267 9.41602C12.8279 9.38289 12.6844 9.21725 12.6844 9.05161V7.74859C12.6844 7.56086 12.839 7.41731 13.0267 7.42835C14.9481 7.59399 16.4278 9.12891 16.5934 10.9841C16.6045 11.1718 16.4609 11.3264 16.2732 11.3264H14.8708C14.7383 11.3264 14.6389 11.238 14.6168 11.1055C14.5174 10.3215 13.9211 9.57062 13.0267 9.41602Z"
+			fill="#FF9E1A"
+		/>
+	</svg>
+);
+
+export default constantContact;

package/src/integration-icons/fundraise-up.js

@@ -0,0 +1,18 @@
+const fundraiseUp = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+		<path
+			d="M4.90143 6.11914C4.90143 4.94655 5.85727 4 7.03802 4H19.0985V5.75182C19.0985 6.92441 18.1427 7.87098 16.9619 7.87098H4.90143V6.11914Z"
+			fill="white"
+		/>
+		<path
+			d="M4.90143 11.4721C4.90143 10.6979 5.53463 10.0645 6.33667 10.0645H14.8778V11.824C14.8778 12.9924 13.921 13.9355 12.739 13.9355H4.90143V11.4721Z"
+			fill="white"
+		/>
+		<path
+			d="M4.90143 16.8329C4.90143 16.4387 5.22775 16.1291 5.62502 16.1291L10.657 16.129V17.8886C10.657 19.0569 9.69221 20 8.50045 20H4.90143V16.8329Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+export default fundraiseUp;

package/src/integration-icons/index.js

@@ -0,0 +1,6 @@
+export { default as activeCampaign } from './active-campaign';
+export { default as constantContact } from './constant-contact';
+export { default as fundraiseUp } from './fundraise-up';
+export { default as mailchimp } from './mailchimp';
+export { default as salesforce } from './salesforce';
+export { default as wisepops } from './wisepops';

package/src/integration-icons/mailchimp.js

@@ -0,0 +1,10 @@
+const mailchimp = (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+		<path
+			d="M21.5694 14.9382L21.214 13.9313C21.214 13.9313 22.6947 11.6807 19.0226 10.9108C19.0226 10.9108 19.2595 8.12707 17.9565 6.82408C20.7995 4.04046 20.148 -0.16465 13.6922 2.55975C10.3755 -3.77748 -2.41746 11.0884 2.91293 13.4575C2.37994 14.1683 2.37994 17.7218 6.05198 18.0772C8.53946 23.4076 14.5806 23.763 18.075 22.1638C21.5694 20.5647 23.5831 15.4712 21.5694 14.9382ZM5.99277 17.3072C2.97214 17.0111 2.67608 12.8653 5.28199 12.4506C7.88797 12.036 8.53946 17.5442 5.99277 17.3072ZM5.10435 11.6807C4.27514 11.6807 3.26829 12.806 3.26829 12.806C-0.759109 10.8516 10.5532 -2.11914 12.9815 2.91511C12.9815 2.91511 7.05883 5.75802 5.10435 11.6807ZM16.9497 16.7149C16.9497 16.4781 15.7059 17.0703 13.4553 16.3004C13.633 15.0566 16.2982 17.3664 20.7402 14.3459L21.0956 15.5897C22.7539 15.2935 21.0956 20.9201 15.7651 20.8608C11.4416 20.8016 10.0794 16.3596 12.4484 13.9313C12.9223 13.4575 10.7309 12.5099 11.1454 10.4369C11.3232 9.54857 12.0931 8.24557 14.0476 8.60093C16.0021 8.95628 16.4166 7.17944 17.7196 7.83093C19.0226 8.48243 18.2527 10.97 18.4303 11.3253C18.608 11.6807 20.5033 11.7399 20.8587 12.7468C21.214 13.7536 18.4303 15.945 14.1068 15.3527C13.0999 15.2343 12.5077 16.5373 13.1591 17.3664C14.4621 19.2617 19.7926 18.0179 20.681 16.1819C18.4303 17.8995 13.8106 18.551 13.4553 16.7149C14.7583 17.3072 16.9497 16.9519 16.9497 16.7149ZM9.19096 7.35715C10.494 5.75802 12.2116 4.81038 12.2116 4.81038L11.8562 5.69881C11.8562 5.69881 13.0999 4.75117 14.4621 4.75117L13.9884 5.22495C15.5283 5.28424 16.1798 5.87644 16.1798 5.87644C16.1798 5.87644 12.5669 4.81038 9.19096 7.35715ZM17.1866 9.66699C17.9565 9.60778 17.7196 11.3846 17.7196 11.3846H17.2458C17.2458 11.3846 16.4166 9.72621 17.1866 9.66699ZM13.6922 11.6215C13.1591 11.6807 12.5669 11.9768 12.6262 11.7399C12.8631 10.7923 15.0544 11.0292 14.9952 11.8584C14.936 12.6875 14.4621 11.5031 13.6922 11.6215ZM14.936 12.3322C14.9952 12.4506 14.5214 12.3322 14.166 12.3914C13.8106 12.4506 13.4553 12.6283 13.4553 12.5099C13.4553 12.3914 14.8175 11.8584 14.936 12.3322ZM16.1205 12.5099C16.2982 12.1545 17.0089 12.5099 16.8313 12.8653C16.6536 13.2206 15.9428 12.8653 16.1205 12.5099ZM17.6012 12.6283C17.2458 12.6283 17.2458 11.8584 17.6012 11.8584C17.9565 11.8584 17.9565 12.6875 17.6012 12.6875V12.6283ZM6.94033 15.7674C7.11805 15.945 6.58498 16.3004 6.17041 16.0042C5.75584 15.7081 6.64427 14.2867 5.57813 13.9313C4.51206 13.576 4.8082 14.9382 4.51206 14.7605C4.21592 14.5828 4.92663 12.6875 6.17041 13.4575C7.41419 14.2275 5.81505 15.412 6.52576 15.7674C7.23647 16.1227 6.82191 15.6489 6.94033 15.7674Z"
+			fill="#241C15"
+		/>
+	</svg>
+);
+
+export default mailchimp;

package/src/integration-icons/salesforce.js

@@ -0,0 +1,10 @@
+const salesforce = (
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" 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)"
+		/>
+	</svg>
+);
+
+export default salesforce;

package/src/integration-icons/wisepops.js

@@ -0,0 +1,14 @@
+const wisepops = (
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+		<path
+			d="M19.0543 10.8641C19.5935 10.8642 19.9806 11.384 19.8262 11.9008L16.1245 24.2947C16.0225 24.6356 15.7087 24.8698 15.3526 24.8698H10.5242C10.5199 24.8699 10.5155 24.8702 10.5112 24.8702H3.28999C2.96651 24.8702 2.67422 24.6766 2.548 24.3789L0.064734 18.5208C-0.160398 17.9896 0.229352 17.4005 0.80633 17.4004H8.02794C8.35135 17.4004 8.64327 17.5941 8.76954 17.8918L8.99143 18.4154L11.0754 11.4393C11.1773 11.0982 11.4911 10.8641 11.8473 10.8641H19.0543Z"
+			fill="var(--integration-icon-color, #010101)"
+		/>
+		<path
+			d="M31.1937 7.12976C31.7311 7.12979 32.1179 7.646 31.9671 8.1617L27.2512 24.2907C27.1508 24.6344 26.8355 24.8702 26.4778 24.8702H19.3384C18.8011 24.8702 18.4142 24.3544 18.5649 23.8387L23.2812 7.70967C23.3816 7.36609 23.6965 7.12981 24.0543 7.12976H31.1937Z"
+			fill="var(--integration-icon-color, #010101)"
+		/>
+	</svg>
+);
+
+export default wisepops;

package/src/modal/style.scss

@@ -95,3 +95,7 @@
 		}
 	}
 }
+/** Hide dropdown menus when a modal is open */
+.modal-open .components-popover__content {
+	opacity: 0;
+}

package/src/plugin-installer/index.js

@@ -96,12 +96,11 @@ class PluginInstaller extends Component {
 		};
 		return apiFetch( params )
 			.then( response => {
-				const { pluginInfo } = this.state;
 				this.props.onInstalled( slug );
-				this.updatePluginInfo( {
-					...pluginInfo,
+				return this.updatePluginInfo( prev => ( {
+					...prev,
 					[ slug ]: { ...response, installationStatus: PLUGIN_STATE_ACTIVE },
-				} );
+				} ) );
 			} )
 			.catch( error => {
 				this.setInstallationStatus( slug, PLUGIN_STATE_ERROR, error.message );
@@ -109,28 +108,40 @@ class PluginInstaller extends Component {
 	};
 
 	setChecked = ( slug, checked ) => {
-		const { pluginInfo } = this.state;
-		this.updatePluginInfo( { ...pluginInfo, [ slug ]: { ...pluginInfo[ slug ], checked } } );
+		this.updatePluginInfo( prev => ( {
+			...prev,
+			[ slug ]: { ...prev[ slug ], checked },
+		} ) );
 	};
 
 	setInstallationStatus = ( slug, installationStatus, notification = null ) => {
-		const { pluginInfo } = this.state;
-		this.updatePluginInfo( {
-			...pluginInfo,
-			[ slug ]: { ...pluginInfo[ slug ], installationStatus, notification },
-		} );
+		this.updatePluginInfo( prev => ( {
+			...prev,
+			[ slug ]: { ...prev[ slug ], installationStatus, notification },
+		} ) );
 	};
 
-	updatePluginInfo = pluginInfo => {
+	// Accepts either the next pluginInfo object or an updater `prev => next`.
+	// The updater form is required for serial install chains: setState batches
+	// pending updates inside the same microtask, so reading `this.state.pluginInfo`
+	// at call time can return a snapshot that predates an earlier-in-the-chain
+	// pending write, and the second update would clobber the first.
+	updatePluginInfo = pluginInfoOrUpdater => {
 		return new Promise( resolve => {
 			const { onStatus } = this.props;
-			this.setState( { pluginInfo }, () => {
-				const complete = Object.values( pluginInfo ).every( plugin => {
-					return 'active' === plugin.Status;
-				} );
-				onStatus( { complete, pluginInfo } );
-				resolve();
-			} );
+			this.setState(
+				prevState => ( {
+					pluginInfo: typeof pluginInfoOrUpdater === 'function' ? pluginInfoOrUpdater( prevState.pluginInfo ) : pluginInfoOrUpdater,
+				} ),
+				() => {
+					const { pluginInfo } = this.state;
+					const complete = Object.values( pluginInfo ).every( plugin => {
+						return 'active' === plugin.Status;
+					} );
+					onStatus( { complete, pluginInfo } );
+					resolve();
+				}
+			);
 		} );
 	};