newspack-components 3.0.0 → 4.0.0

package/src/with-wizard/index.js

@@ -4,7 +4,7 @@
 import { Component, createRef, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { home } from '@wordpress/icons';
+import { category } from '@wordpress/icons';
 
 /**
  * Internal dependencies.
@@ -28,6 +28,7 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 				error: null,
 				loading: requiredPlugins && requiredPlugins.length > 0 ? 1 : 0,
 				quietLoading: false,
+				confirmation: null,
 			};
 			this.wrappedComponentRef = createRef();
 		}
@@ -80,9 +81,7 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 		 */
 		getErrorNotice = error => {
 			const { message } = error;
-			return (
-				<Notice isError className="newspack-wizard__above-header" noticeText={ message } rawHTML />
-			);
+			return <Notice isError className="newspack-wizard__above-header" noticeText={ message } rawHTML />;
 		};
 
 		/**
@@ -98,10 +97,7 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 			}
 			const { message } = error;
 			return (
-				<Modal
-					title={ __( 'Unrecoverable error' ) }
-					onRequestClose={ () => ( window.location = fallbackURL ) }
-				>
+				<Modal title={ __( 'Unrecoverable error' ) } onRequestClose={ () => ( window.location = fallbackURL ) }>
 					<Notice noticeText={ message } isError rawHTML />
 					<Card buttonsCard noBorder className="justify-end">
 						<Button isPrimary href={ fallbackURL }>
@@ -221,7 +217,7 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 												href={ newspack_urls.dashboard }
 												label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
 												showTooltip={ true }
-												icon={ home }
+												icon={ category }
 												iconSize={ 36 }
 											>
 												<NewspackIcon size={ 36 } />
@@ -238,10 +234,7 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 								</div>
 							) }
 							<div className="newspack-wizard newspack-wizard__content">
-								<PluginInstaller
-									plugins={ requiredPlugins }
-									onStatus={ status => this.pluginInstallationStatus( status ) }
-								/>
+								<PluginInstaller plugins={ requiredPlugins } onStatus={ status => this.pluginInstallationStatus( status ) } />
 							</div>
 						</Fragment>
 					) }
@@ -249,6 +242,64 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 			);
 		};
 
+		/**
+		 * 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 } );
+		};
+
+		/**
+		 * Show a confirmation modal with the given title & message.
+		 * Execute {callback} if confirmed.
+		 *
+		 * @return {Component} <Modal>
+		 */
+		getModal = () => {
+			if ( ! this.state.confirmation ) {
+				return null;
+			}
+			const { title, message, confirmText, cancelText, callback } = this.state.confirmation;
+			return (
+				message &&
+				callback && (
+					<Modal isNarrow hideTitle={ ! title } title={ title } onRequestClose={ () => this.setState( { confirmation: null } ) }>
+						<p>{ message }</p>
+						<Card buttonsCard noBorder className="justify-end">
+							<Button variant="secondary" onClick={ () => this.setState( { confirmation: null } ) }>
+								{ cancelText }
+							</Button>
+							<Button
+								variant="primary"
+								onClick={ () => {
+									this.setState( { confirmation: null } );
+									callback();
+								} }
+							>
+								{ confirmText }
+							</Button>
+						</Card>
+					</Modal>
+				)
+			);
+		};
+
 		getFallbackURL = () => {
 			if ( typeof newspack_urls !== 'undefined' ) {
 				return newspack_urls.dashboard;
@@ -261,17 +312,17 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 		render() {
 			const { simpleFooter } = this.props;
 			const { loading, quietLoading, error } = this.state;
-			const loadingClasses = [
-				loading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded',
-			];
+			const loadingClasses = [ loading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded' ];
 			if ( quietLoading ) {
 				loadingClasses.push( 'newspack-wizard__is-loading-quiet' );
 			}
 			return (
 				<Fragment>
 					{ this.getError() }
+					{ this.getModal() }
 					<div className={ loadingClasses.join( ' ' ) }>
 						<WrappedComponent
+							confirmAction={ this.confirmAction }
 							pluginRequirements={ requiredPlugins && this.pluginRequirements() }
 							clearError={ this.clearError }
 							getError={ this.getError }

package/src/with-wizard/style.scss

@@ -3,15 +3,13 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
 
-// Reset Padding of the Admin Page
+// Styling for full-page-react Wizards (ignoring admin-header-only wizards).
+body.newspack-wizard-page:not(.newspack-admin-header) {
 
-.toplevel_page_newspack:not(.menu-top),
-body[class*="newspack_page_newspack-"],
-body[class*="admin_page_newspack-"] {
 	background: white;
 
+	// Reset Padding
 	#wpcontent {
 		padding-left: 0;
 	}
@@ -20,6 +18,13 @@ body[class*="admin_page_newspack-"] {
 		padding-bottom: 220px;
 		min-height: 100vh;
 
+		// For admin notices directly ">" at top of page above the Wizard header.
+		// PHP code should hide these notices, but just incase add this style.
+		> .notice {
+			margin-bottom: 20px;
+			margin-left: 22px;
+		}
+
 		@media screen and ( min-width: 783px ) {
 			padding-bottom: 202px;
 		}
@@ -30,6 +35,24 @@ body[class*="admin_page_newspack-"] {
 	}
 }
 
+// Styling for wizards that are admin-header-only.
+body.newspack-wizard-page.newspack-admin-header {
+
+	// For mobile.
+	@media screen and (max-width: 600px) {
+
+		// The header bar (and tabs) need padding.
+		#newspack-wizards-admin-header {
+			padding-top: 46px;
+		}
+
+		// Since the padding was added to the header bar, remove from body.
+		#wpbody {
+			padding-top: 0;
+		}
+	}
+}
+
 svg {
 	&.newspack--error {
 		fill: wp-colors.$alert-red;
@@ -41,15 +64,14 @@ svg {
 }
 
 // Blue Screen
-
 .newspack-wizard__blue {
 	#wpwrap {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 	}
 
 	.newspack-footer {
-		background: colors.$primary-500;
-		border-color: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
 		justify-content: center;
 
 		&__logo {
@@ -73,7 +95,6 @@ svg {
 }
 
 // Loading
-
 .newspack-wizard__is-loading {
 	background: white;
 	cursor: wait;
@@ -92,7 +113,7 @@ svg {
 	}
 
 	&::before {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 		box-shadow:
 			24px 0 0 white,
 			69px 0 0 -15px wp-colors.$gray-900,
@@ -137,7 +158,7 @@ svg {
 
 	// Blue Screen
 	.newspack-wizard__blue & {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 
 		&::before {
 			animation: loading-quiet 1.25s ease-in-out infinite;
@@ -193,7 +214,7 @@ svg {
 
 		&::before {
 			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: colors.$primary-500;
+			background: var(--wp-admin-theme-color);
 			height: 8px;
 			right: 100%;
 			z-index: 9999;

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

@@ -8,7 +8,7 @@ import { category } from '@wordpress/icons';
  * Internal dependencies
  */
 import { Button, Handoff, NewspackIcon, Notice, HandoffMessage, TabbedNavigation } from '../';
-import { buttonProps } from '../../../shared/js/';
+import { buttonProps } from '../button-props';
 import './style.scss';
 
 /**

package/src/with-wizard-screen/style.scss

@@ -3,16 +3,16 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-wizard {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
 
 	color: wp-colors.$gray-900;
 
@@ -83,7 +83,7 @@
 			}
 
 			&:not(.newspack-icon) {
-				background: colors.$primary-500;
+				background: var(--wp-admin-theme-color);
 				left: 50%;
 				margin: -28px 0 0 -28px !important;
 				opacity: 0;
@@ -125,7 +125,7 @@
 		padding: 0 16px;
 
 		@media screen and ( min-width: 744px ) {
-			padding: 32px 84px;
+			padding: 40px 84px;
 		}
 
 		// Typography

package/src/wizard/components/WizardError.js

@@ -33,10 +33,7 @@ const WizardError = () => {
 	if ( 'fatal' === level ) {
 		const fallbackURL = typeof newspack_urls !== 'undefined' && newspack_urls.dashboard;
 		return (
-			<Modal
-				title={ __( 'Unrecoverable error' ) }
-				onRequestClose={ fallbackURL ? () => ( window.location = fallbackURL ) : undefined }
-			>
+			<Modal title={ __( 'Unrecoverable error' ) } onRequestClose={ fallbackURL ? () => ( window.location = fallbackURL ) : undefined }>
 				<Notice noticeText={ message } isError rawHTML />
 				{ fallbackURL && (
 					<Card buttonsCard noBorder className="justify-end">
@@ -49,9 +46,7 @@ const WizardError = () => {
 		);
 	}
 
-	return (
-		<Notice isError className="newspack-wizard__above-header" noticeText={ message } rawHTML />
-	);
+	return <Notice isError className="newspack-wizard__above-header" noticeText={ message } rawHTML />;
 };
 
 export default WizardError;

package/src/wizard/index.js

@@ -7,96 +7,107 @@ import classnames from 'classnames';
  * WordPress dependencies.
  */
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import {
-	Footer,
-	Notice,
-	Button,
-	NewspackIcon,
-	TabbedNavigation,
-	PluginInstaller,
-	HandoffMessage,
-} 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';
 
 registerStore();
 
 const { HashRouter, Redirect, Route, Switch } = Router;
 
-const Wizard = ( {
-	sections = [],
-	apiSlug,
-	headerText,
-	subHeaderText,
-	hasSimpleFooter,
-	className,
-	renderAboveSections,
-	requiredPlugins = [],
-} ) => {
+/**
+ * @typedef  {Object}     WizardProps
+ * @property {string}     headerText                The header text.
+ * @property {string}     [subHeaderText]           The sub-header text, optional.
+ * @property {string}     [apiSlug]                 The API slug, optional.
+ * @property {string}     [className]               CSS classes, optional.
+ * @property {any[]}      sections                  Array of sections.
+ * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
+ * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
+ * @property {string[]}   [requiredPlugins]         Array of required plugin strings, optional.
+ * @property {boolean}    [isInitialFetchTriggered] Indicates if the initial fetch should be triggered, optional.
+ */
+
+/**
+ * Wizard Component
+ *
+ * Provides a tabbed UI with history.
+ *
+ * @param {WizardProps} props
+ * @return {JSX.Element} Wizard component
+ */
+const Wizard = (
+	{
+		sections = [],
+		headerText,
+		apiSlug,
+		subHeaderText,
+		hasSimpleFooter,
+		className,
+		renderAboveSections,
+		requiredPlugins = [],
+		isInitialFetchTriggered = true,
+	},
+	ref
+) => {
 	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 ) );
+	useSelect( select => isInitialFetchTriggered && select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( apiSlug ) );
 
 	let displayedSections = sections.filter( section => ! section.isHidden );
 
-	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState(
-		requiredPlugins.length === 0
-	);
+	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState( requiredPlugins.length === 0 );
 	if ( ! pluginRequirementsSatisfied ) {
-		headerText =
-			requiredPlugins.length > 1
-				? __( 'Required plugins', 'newspack-plugin' )
-				: __( 'Required plugin', 'newspack-plugin' );
+		headerText = requiredPlugins.length > 1 ? __( 'Required plugins', 'newspack-plugin' ) : __( 'Required plugin', 'newspack-plugin' );
 		displayedSections = [
 			{
 				path: '/',
 				render: () => (
-					<PluginInstaller
-						plugins={ requiredPlugins }
-						onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) }
-					/>
+					<PluginInstaller plugins={ requiredPlugins } onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) } />
 				),
 			},
 		];
 	}
 
+	const urlWithoutHash = window.location.href.split( '#' )[ 0 ];
+
 	return (
-		<>
+		<div ref={ ref }>
 			<div
-				className={ classnames(
-					isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded',
-					{
-						'newspack-wizard__is-loading-quiet': isQuietLoading,
-					}
-				) }
+				className={ classnames( isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
+					'newspack-wizard__is-loading-quiet': isQuietLoading,
+				} ) }
 			>
 				<HashRouter hashType="slash">
 					{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
 					<div className="bg-white">
 						<div className="newspack-wizard__header__inner">
 							<div className="newspack-wizard__title">
-								<Button
-									isLink
-									href={ newspack_urls.dashboard }
-									label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
-									showTooltip={ true }
-									icon={ category }
-									iconSize={ 36 }
-								>
+								{ newspack_urls.dashboard !== urlWithoutHash ? (
+									<Button
+										isLink
+										href={ newspack_urls.dashboard }
+										label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
+										showTooltip={ true }
+										icon={ category }
+										iconSize={ 36 }
+									>
+										<NewspackIcon size={ 36 } />
+									</Button>
+								) : (
 									<NewspackIcon size={ 36 } />
-								</Button>
+								) }
 								<div>
 									{ headerText && <h2>{ headerText }</h2> }
 									{ subHeaderText && <span>{ subHeaderText }</span> }
@@ -116,13 +127,8 @@ const Wizard = ( {
 						{ displayedSections.map( ( section, index ) => {
 							const SectionComponent = section.render;
 							return (
-								<Route key={ index } path={ section.path }>
-									<div
-										className={ classnames(
-											'newspack-wizard newspack-wizard__content',
-											className
-										) }
-									>
+								<Route key={ index } exact={ section.exact ?? false } path={ section.path }>
+									<div className={ classnames( 'newspack-wizard__content', className ) }>
 										{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
 										<SectionComponent />
 									</div>
@@ -134,12 +140,8 @@ const Wizard = ( {
 				</HashRouter>
 			</div>
 			{ ! isLoading && <Footer simple={ hasSimpleFooter } /> }
-		</>
+		</div>
 	);
 };
 
-Wizard.useWizardData = useWizardData;
-
-Wizard.STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
-
-export default Wizard;
+export default forwardRef( Wizard );

package/src/wizard/store/index.js

@@ -16,7 +16,7 @@ import { createAction } from './utils.js';
 export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 
 const DEFAULT_STATE = {
-	isLoading: true,
+	isLoading: false,
 	isQuietLoading: false,
 	apiData: {},
 	error: null,
@@ -59,13 +59,7 @@ const actions = {
 	setError: createAction( 'SET_ERROR' ),
 
 	// Async actions. These will not show up in Redux devtools.
-	*saveWizardSettings( {
-		slug,
-		section = '',
-		payloadPath = false,
-		auxData = {},
-		updatePayload = null,
-	} ) {
+	*saveWizardSettings( { slug, section = '', payloadPath = false, auxData = {}, updatePayload = null } ) {
 		// Optionally data can be updated before saving - an immediate update case
 		// (without an explicit "save" action).
 		if ( updatePayload ) {
@@ -94,6 +88,7 @@ const selectors = {
 	isLoading: state => state.isLoading,
 	isQuietLoading: state => state.isQuietLoading,
 	getWizardAPIData: ( state, slug ) => state.apiData[ slug ] || {},
+	getWizardData: ( state, slug ) => state.apiData[ slug ] ?? {},
 	getError: state => state.error,
 };
 
@@ -104,8 +99,9 @@ const store = createReduxStore( WIZARD_STORE_NAMESPACE, {
 
 	controls: {
 		FETCH_FROM_API: action => {
+			const { isLocalError = false, isQuietFetch = false } = action.payload;
 			dispatch( WIZARD_STORE_NAMESPACE ).startLoadingData( {
-				isQuietLoading: Boolean( action.payload.isQuietFetch ),
+				isQuietLoading: Boolean( isQuietFetch ),
 			} );
 			return apiFetch( action.payload )
 				.then( data => {
@@ -113,8 +109,10 @@ const store = createReduxStore( WIZARD_STORE_NAMESPACE, {
 					return data;
 				} )
 				.catch( error => {
+					if ( isLocalError ) {
+						throw error;
+					}
 					dispatch( WIZARD_STORE_NAMESPACE ).setError( error );
-					return { error };
 				} )
 				.finally( result => {
 					dispatch( WIZARD_STORE_NAMESPACE ).finishLoadingData();

package/src/wizard/store/utils.js

@@ -10,7 +10,6 @@ import { WIZARD_STORE_NAMESPACE } from '.';
 
 export const createAction = type => payload => ( { type, payload } );
 
-export const useWizardData = ( wizardName, defaultValue = {} ) =>
-	useSelect( select =>
-		select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( `newspack-${ wizardName }-wizard` )
-	) || defaultValue;
+export const useWizardData = ( wizardName, defaultValue = {} ) => {
+	return useSelect( select => select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( wizardName ) ) || defaultValue;
+};

package/dist/cjs/date-range-picker/index.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactDaterangePicker = _interopRequireDefault(require("react-daterange-picker"));
-var _moment = _interopRequireDefault(require("moment"));
-var _momentRange = require("moment-range");
-require("react-daterange-picker/dist/css/react-calendar.css");
-require("./style.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies.
- */
-
-/**
- * Internal dependencies.
- */
-
-const moment = (0, _momentRange.extendMoment)(_moment.default);
-const DateRangePicker = ({
-  start,
-  end,
-  onChange
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDaterangePicker.default, {
-    value: moment.range(moment(start), moment(end)),
-    firstOfWeek: 1,
-    onSelect: range => {
-      onChange({
-        start: range.start._d,
-        end: range.end._d
-      });
-    }
-  });
-};
-var _default = exports.default = DateRangePicker;