feat(ras): allow skipping prerequisites; avoid dead end in onboarding

[dkoo]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Allows certain prerequisites in the Audience Management onboarding flow to be skipped if not strictly required. Skipping prerequisites will allow you to enable Audience Management features, and skipped prerequisites can always be completed at a later time.

Also avoids a dead end state in the UI by decoupling the newspack_reader_activation_enabled option from the check of whether the default campaign was configured or skipped.

How to test the changes in this Pull Request:

1. Start with a fresh site running this PR build and fix(ras): rename Reader Activation to Audience Management throughout admin newspack-popups#1393, and complete all initial site setup.
2. After site setup, visit Audience > Setup and install any missing required plugins.
3. Confirm that among the incomplete prerequisites, the "Legal Pages", "reCAPTCHA", and "Audience Management Campaign" prerequisites all have a "Skip" button like this:

4. Skip the prerequisites that have a "Skip" button, and complete the prerequisites that don't. Confirm that you're prompted with an extra confirmation dialog when skipping, and that skipped prerequisites show a "skipped" state after skipping:

5. After skipping or completing all prerequisites, confirm that the UI shows the "enabled" state (a message at top saying "Audience Management is enabled", plus extra settings related to Newsletters and ESP syncing below the onboarding checklist). Also confirm that Audience Management features are enabled on the front-end.
6. Confirm that after this, you can still complete skipped prerequisites, including the default Campaigns and that completing them clears the "skipped" status and shows a "Ready" green status instead.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[dkoo]

@thomasguillot this could use a design review as well, in case you have any feedback on the "skip"-related UX.

[thomasguillot]

The checkbox doesn't need to be yellow. I think it's fine to just keep the "radio" button empty. For the confirmation dialogue. Could we get a proper Modal instead?

Modal:

• Title: Skip this step
• Content: Are you sure you want to skip this step? You can always come back later.
• Buttons: Cancel | Skip

[thomasguillot]

See #3738 (comment)

[dkoo]

Thanks for the feedback, @thomasguillot! I'll amend the PR with those changes before putting this up for code review again.

[dkoo]

@thomasguillot 17a8223 changes the confirmation modal to a true Modal component instead of the browser modal:

It also simplifies the same functionality in the campaign setup view to use the same function and component as the other prerequisites.

For future reference, this is implemented on the higher order WithWizard component, so any component wrapped by this HOC can show a similar confirmation modal with the confirmAction method passed down via props.

confirmAction(
	__( 'Modal title', 'newspack-plugin' ),
	__( 'Modal message.', 'newspack-plugin' ),
	() => {
		// Some function to run when the user confirms
	}
);

[thomasguillot]

I don't really like how it looks

Can we:

• Remove the title (*)
• Remove the close button (*)
• Move the Primary button after the Secondary button
• Change the Primary button label to "Skip" (*)

(*) Only for this case so we can keep the higher order WithWizard component

[dkoo]

@thomasguillot how does this look? 3dbec2d

The HOC's confirmAction method now takes a single param which is an options object to allow for overwriting defaults.

/**
 * Build a confirmation modal with the given title & message.
 * Execute {callback} if confirmed.
 *
 * @property {Object}   options             Options for the confirmation modal.
 * @property {string}   options.title       The title for the modal component.
 * @property {string}   options.message     The message for the modal component body.
 * @property {string}   options.confirmText The text for the confirmation button.
 * @property {string}   options.cancelText  The text for the cancel button.
 * @property {Function} options.callback    A function to call if the user confirms the action.
 */
confirmAction = ( options ) => {
	const modalOptions = {
		title: null,
		message: __( 'Are you sure?', 'newpack-plugin' ),
		confirmText: __( 'OK', 'newspack-plugin' ),
		cancelText: __( 'Cancel', 'newspack-plugin' ),
		callback: null,
		...options,
	}
	this.setState( { confirmation: modalOptions } );
}

[thomasguillot]

@dkoo I prefer it. Thank you very much! ❤️

[thomasguillot]

✅ Design

[miguelpeixe]

Works as described!

Non-blocking comment, since it has already gone through design. When legal pages are skipped and I open it to edit I get the card content attached to the notice:

I think we could either remove the border or add some spacing.

[thomasguillot]

Non-blocking comment, since it has already gone through design. When legal pages are skipped and I open it to edit I get the card content attached to the notice:

Oh I didn't see this! Yes, the border needs to be removed

[dkoo]

Whoops, good catch! 06ba10b should fix this: