fix(onboarding): handoff message component

Author: miguelpeixe

assets/components/src/handoff-message/index.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies.
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import { HANDOFF_KEY } from '../consts';
+import { Notice } from '../';
+
+/**
+ * Handoff Message Component.
+ */
+export default function HandoffMessage() {
+	const [ handoffMessage, setHandoffMessage ] = useState( false );
+	useEffect( () => {
+		// Slight delay to allow for localStorage to be updated by RAS component.
+		setTimeout( () => {
+			const handoff = JSON.parse( localStorage.getItem( HANDOFF_KEY ) );
+			if ( handoff?.message ) {
+				setHandoffMessage( handoff.message );
+			} else {
+				setHandoffMessage( false );
+			}
+		}, 100 );
+	}, [] );
+	if ( ! handoffMessage ) return null;
+	return <Notice isHandoff isDismissible={ false } rawHTML noticeText={ handoffMessage } />;
+}

assets/components/src/index.js

@@ -11,6 +11,7 @@ export { default as CustomSelectControl } from './custom-select-control';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';
+export { default as HandoffMessage } from './handoff-message';
 export { default as InfoButton } from './info-button';
 export { default as ImageUpload } from './image-upload';
 export { default as GlobalNotices } from './global-notices';

assets/components/src/with-wizard-screen/index.js

@@ -2,14 +2,12 @@
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
 import { category } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Button, Handoff, NewspackIcon, Notice, TabbedNavigation } from '../';
-import { HANDOFF_KEY } from '../consts';
+import { Button, Handoff, NewspackIcon, Notice, HandoffMessage, TabbedNavigation } from '../';
 import { buttonProps } from '../../../shared/js/';
 import './style.scss';
 
@@ -23,7 +21,6 @@ import classnames from 'classnames';
  */
 export default function withWizardScreen( WrappedComponent, { hidePrimaryButton } = {} ) {
 	const WrappedWithWizardScreen = props => {
-		const [ handoffMessage, setHandoffMessage ] = useState( false );
 		const {
 			className,
 			buttonText,
@@ -38,14 +35,6 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 			disableUpcomingInTabbedNavigation,
 		} = props;
 
-		useEffect( () => {
-			const handoff = JSON.parse( localStorage.getItem( HANDOFF_KEY ) );
-
-			if ( handoff?.message ) {
-				setHandoffMessage( handoff.message );
-			}
-		}, [] );
-
 		const retrievedButtonProps = buttonProps( buttonAction );
 		const retrievedSecondaryButtonProps = buttonProps( secondaryButtonAction );
 		const SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? Handoff : Button;
@@ -99,9 +88,7 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 					/>
 				) }
 
-				{ handoffMessage && (
-					<Notice isHandoff isDismissible={ false } rawHTML noticeText={ handoffMessage } />
-				) }
+				<HandoffMessage />
 
 				<div className={ classnames( 'newspack-wizard newspack-wizard__content', className ) }>
 					{ typeof renderAboveContent === 'function' ? renderAboveContent() : null }

assets/components/src/wizard/index.js

@@ -7,19 +7,26 @@ import classnames from 'classnames';
  * WordPress dependencies.
  */
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller } from '../';
+import {
+	Footer,
+	Notice,
+	Button,
+	NewspackIcon,
+	TabbedNavigation,
+	PluginInstaller,
+	HandoffMessage,
+} from '../';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
 import { useWizardData } from './store/utils';
 import WizardError from './components/WizardError';
-import { HANDOFF_KEY } from '../consts';
 
 registerStore();
 
@@ -35,22 +42,13 @@ const Wizard = ( {
 	renderAboveSections,
 	requiredPlugins = [],
 } ) => {
-	const [ handoffMessage, setHandoffMessage ] = useState( false );
 	const isLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isLoading() );
 	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
 
 	// Trigger initial data fetch. Some sections might not use the wizard data,
 	// but for consistency, fetching is triggered regardless of the section.
 	useSelect( select => select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( apiSlug ) );
 
-	useEffect( () => {
-		const handoff = JSON.parse( localStorage.getItem( HANDOFF_KEY ) );
-
-		if ( handoff?.message ) {
-			setHandoffMessage( handoff.message );
-		}
-	}, [] );
-
 	let displayedSections = sections.filter( section => ! section.isHidden );
 
 	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState(
@@ -112,9 +110,7 @@ const Wizard = ( {
 							<WizardError />
 						</TabbedNavigation>
 					) }
-					{ handoffMessage && (
-						<Notice isHandoff isDismissible={ false } rawHTML noticeText={ handoffMessage } />
-					) }
+					<HandoffMessage />
 
 					<Switch>
 						{ displayedSections.map( ( section, index ) => {

assets/wizards/engagement/views/newsletters/index.js

@@ -32,13 +32,13 @@ import {
 export const NewspackNewsletters = ( {
 	className,
 	onUpdate,
-	authUrl = false,
-	setAuthUrl,
-	isOnboarding = true,
 	initialProvider,
-	setInitialProvider,
 	newslettersConfig,
-	setLockedLists,
+	isOnboarding = true,
+	authUrl = false,
+	setInitialProvider = () => {},
+	setAuthUrl = () => {},
+	setLockedLists = () => {},
 } ) => {
 	const [ inFlight, setInFlight ] = useState( false );
 	const [ error, setError ] = useState( false );