Add Coming Soon to Site Features

includes/RestApi/SettingsController.php

@@ -112,6 +112,49 @@ public function register_routes() {
 				),
 			)
 		);
+
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . '/coming-soon',
+			array(
+				array(
+					'methods'             => \WP_REST_Server::CREATABLE,
+					'callback'            => array( $this, 'set_coming_soon' ),
+					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+					'args'                => $this->set_coming_soon_params(),
+				),
+			)
+		);
+	}
+
+	/**
+	 * Set query params for coming soon route.
+	 *
+	 * @return array
+	 */
+	public function set_coming_soon_params() {
+		return array(
+			'comingSoon' => array(
+				'type'     => 'boolean',
+				'required' => true,
+			),
+		);
+	}
+	/**
+	 * Endpoint to set Coming Soon for a website.
+	 *
+	 * @param \WP_REST_Request $request Request model.
+	 *
+	 * @return \WP_REST_Response|\WP_Error
+	 */
+	public function set_coming_soon( \WP_REST_Request $request ) {
+
+		$new_value = ( $request->get_param( 'comingSoon' ) ) ? 'true' : 'false';
+		update_option( 'nfd_coming_soon', $new_value );
+		return new \WP_REST_Response(
+			array(),
+			200
+		);
 	}
 
 	/**

src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js

@@ -25,6 +25,7 @@ const CheckboxItem = ( {
 	callback,
 	tabIndex = 0,
 	isSelectedDefault,
+	fullWidth = false,
 	className = 'checkbox-item',
 } ) => {
 	const [ showDescription, setShowDescription ] = useState( false );
@@ -44,7 +45,9 @@ const CheckboxItem = ( {
 			<div
 				className={ `${ className } ${
 					isSelected && `${ className }--selected`
-				} ${ showDescription && `${ className }--shown` }` }
+				} ${ fullWidth && `${ className }--full-width` } ${
+					showDescription && `${ className }--shown`
+				}` }
 			>
 				<div className={ `${ className }-container` }>
 					<CheckboxControl
@@ -117,7 +120,13 @@ const CheckboxItem = ( {
 					className={ ` ${ className }__dropdown ` }
 					type={ 'dropdown' }
 				>
-					<div className={ `${ className }__desc` }>{ desc }</div>
+					<div
+						className={ `${ className }__desc ${
+							fullWidth && `${ className }__desc--full-width`
+						}` }
+					>
+						{ desc }
+					</div>
 				</Animate>
 			) }
 		</div>

src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss

@@ -13,6 +13,14 @@
 	width: clamp(15rem, 25vw, 35rem);
 	box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295);
 
+	&--full-width {
+		width: clamp(15rem, 53.5vw, 74rem);
+
+		@media (max-width: #{ ($break-medium) }) {
+			width: clamp(15rem, 25vw, 35rem);
+		}
+	}
+
 	&-container {
 		display: flex;
 		align-items: center;
@@ -125,5 +133,13 @@
 		border-right: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
 		border-bottom: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
 		box-shadow: 0 11px 8px -3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.37);
+
+		&--full-width {
+			width: clamp(15rem, 53.5vw, 74rem);
+
+			@media (max-width: #{ ($break-medium) }) {
+				width: clamp(15rem, 25vw, 35rem);
+			}
+		}
 	}
 }

src/OnboardingSPA/components/CheckboxTemplate/CheckboxList/stylesheet.scss

@@ -1,16 +1,18 @@
 .checkbox-list {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
 
-    @media (max-width: #{ ($break-xlarge) }) {
-        flex-direction: column;
-    }
+	@media (max-width: #{ ($break-medium) }) {
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
 
-    &-col {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-    }
-}
+	&-col {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		justify-content: center;
+	}
+}

src/OnboardingSPA/components/ComingSoon/contents.js

@@ -0,0 +1,27 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { translations } from '../../utils/locales/translations';
+
+const getContents = () => {
+	return {
+		title: __( 'Coming Soon', 'wp-module-onboarding' ),
+		subtitle: sprintf(
+			/* translators: %s: site or store */
+			__(
+				'Keep your %s private until you click launch',
+				'wp-module-onboarding'
+			),
+			translations( 'site' )
+		),
+		desc: sprintf(
+			/* translators: %s: site or store */
+			__(
+				"We'll show a placeholder page to logged-out visitors while you build your %s.",
+				'wp-module-onboarding'
+			),
+			translations( 'site' )
+		),
+	};
+};
+
+export default getContents;

src/OnboardingSPA/components/ComingSoon/index.js

@@ -0,0 +1,40 @@
+import { useSelect, useDispatch } from '@wordpress/data';
+
+import getContents from './contents';
+import { CheckboxItem } from '../CheckboxTemplate';
+import { store as nfdOnboardingStore } from '../../store';
+
+const ComingSoon = () => {
+	const content = getContents();
+
+	const { currentData } = useSelect( ( select ) => {
+		return {
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+		};
+	}, [] );
+
+	const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
+
+	async function handleComingSoon( name, selection ) {
+		currentData.data.comingSoon = selection;
+		setCurrentOnboardingData( currentData );
+	}
+
+	return (
+		<div className="coming_soon__wrapper">
+			<CheckboxItem
+				name="coming_soon"
+				title={ content.title }
+				subtitle={ content.subtitle }
+				icon={ '--site-features-comingsoon' }
+				desc={ content.desc }
+				callback={ handleComingSoon }
+				fullWidth={ true }
+				isSelectedDefault={ currentData?.data?.comingSoon }
+			/>
+		</div>
+	);
+};
+
+export default ComingSoon;

src/OnboardingSPA/components/ComingSoon/stylesheet.scss

@@ -0,0 +1,8 @@
+.coming_soon {
+
+	&__wrapper {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+	}
+}

src/OnboardingSPA/components/ExitToWordPress/index.js

@@ -20,6 +20,7 @@ import {
 	CATEGORY,
 } from '../../utils/analytics/hiive/constants';
 import { activateInitialPlugins } from '../../utils/api/plugins';
+import { setComingSoon } from '../../utils/api/comingSoon';
 
 /**
  * Self-contained button and confirmation modal for exiting Onboarding page.
@@ -101,6 +102,7 @@ const ExitToWordPress = ( {
 				}
 			}
 			setFlow( currentData );
+			setComingSoon( currentData?.data?.comingSoon );
 		}
 		activateInitialPlugins();
 		trackOnboardingEvent(

src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js

@@ -18,6 +18,7 @@
 import { pluginDashboardPage } from '../../../../../constants';
 import { setFlow } from '../../../../utils/api/flow';
 import { ACTION_ONBOARDING_COMPLETE } from '../../../../utils/analytics/hiive/constants';
+import { setComingSoon } from '../../../../utils/api/comingSoon';
 
 const ChapterInterstitialLoader = () => {
 	const [ countdown, setCountdown ] = useState( 15 );
@@ -29,6 +30,7 @@
 		if ( currentData ) {
 			currentData.isComplete = new Date().getTime();
 			setFlow( currentData );
+			setComingSoon( currentData?.data?.comingSoon );
 		}
 
 		activateInitialPlugins();
@@ -49,12 +51,12 @@
 		return () => {
 			clearInterval( interval );
 		};
 	}, [ countdown ] );
 
 	useEffect( () => {
 		setIsDrawerSuppressed( true );
 		setSidebarActiveView( false );
 	}, [] );
 	const { brandName, nextStep, currentData } = useSelect( ( select ) => {
 		return {
 			brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),

src/OnboardingSPA/steps/Complete/index.js

@@ -9,6 +9,7 @@
 import { StepErrorState } from '../../components/ErrorState';
 import { THEME_STATUS_INIT } from '../../../constants';
 import { DesignStateHandler } from '../../components/StateHandlers';
+import { setComingSoon } from '../../utils/api/comingSoon';
 
 const StepComplete = () => {
 	const {
@@ -22,18 +23,26 @@
 	const navigate = useNavigate();
 	const [ isError, setIsError ] = useState( false );
 
-	const { nextStep, brandName, isQueueEmpty } = useSelect( ( select ) => {
-		return {
-			nextStep: select( nfdOnboardingStore ).getNextStep(),
-			brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
-			isQueueEmpty: select( nfdOnboardingStore ).isQueueEmpty(),
-		};
-	}, [] );
+	const { nextStep, brandName, isQueueEmpty, currentData } = useSelect(
+		( select ) => {
+			return {
+				nextStep: select( nfdOnboardingStore ).getNextStep(),
+				brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+				isQueueEmpty: select( nfdOnboardingStore ).isQueueEmpty(),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			};
+		},
+		[]
+	);
 
 	const contents = getContents( brandName );
 
 	const checkFlowComplete = async () => {
-		await Promise.all( [ completeFlowRequest() ] ).then( ( values ) =>
+		await Promise.all( [
+			completeFlowRequest(),
+			setComingSoon( currentData?.data?.comingSoon ),
+		] ).then( ( values ) =>
 			values.forEach( ( value ) => {
 				// If any Request returns False then Show Error
 				if ( ! value ) {
@@ -67,11 +76,11 @@
 		} else {
 			flushQueue();
 		}
 	}, [ isQueueEmpty ] );
 
 	useEffect( () => {
 		setNavigationState();
 	}, [] );
 
 	return (
 		<DesignStateHandler

src/OnboardingSPA/steps/SiteFeatures/index.js

@@ -12,6 +12,7 @@
 import CheckboxList from '../../components/CheckboxTemplate/CheckboxList';
 import { CheckboxListSkeleton } from '../../components/CheckboxTemplate';
 import getContents from './contents';
+import ComingSoon from '../../components/ComingSoon';
 
 const StepSiteFeatures = () => {
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -85,13 +86,13 @@
 		setDrawerActiveView( VIEW_NAV_PRIMARY );
 		setIsHeaderNavigationEnabled( true );
 		getCustomPlugins();
 	}, [] );
 
 	const content = getContents();
 
 	return (
 		<CommonLayout>
-			<div style={ { margin: '100px' } }>
+			<div className="site-features__heading">
 				<HeadingWithSubHeading
 					title={ content.heading }
 					subtitle={ content.subheading }
@@ -112,6 +113,7 @@
 					customItemsList={ customPluginsList }
 				/>
 			) }
+			{ customPluginsList && <ComingSoon /> }
 		</CommonLayout>
 	);
 };

src/OnboardingSPA/steps/SiteFeatures/stylesheet.scss

@@ -0,0 +1,7 @@
+.site-features__heading {
+	margin: 100px;
+
+	@media (max-width: #{ ($break-medium) }) {
+		margin: 0;
+	}
+}

src/OnboardingSPA/styles/_icons.scss

@@ -35,4 +35,5 @@ body {
 	--site-features-security: url(../static/icons/site-features/security.svg);
 	--site-features-share: url(../static/icons/site-features/share.svg);
 	--site-features-wishlist: url(../static/icons/site-features/wishlist.svg);
+	--site-features-comingsoon: url(../static/icons/site-features/comingsoon.svg);
 }

src/OnboardingSPA/styles/app.scss

@@ -42,6 +42,7 @@
 @import "../components/NewfoldInterfaceSkeleton/style";
 @import "../components/Loaders/Chapter/Interstitial/stylesheet";
 @import "../components/Grid/stylesheet";
+@import "../components/ComingSoon/stylesheet";
 
 // CSS for Pages
 @import "../steps/BasicInfo/stylesheet";
@@ -55,6 +56,7 @@
 @import "../steps/SitePages/stylesheet";
 @import "../steps/DesignTypography/stylesheet";
 @import "../steps/DesignHeaderMenu/stylesheet";
+@import "../steps/SiteFeatures/stylesheet";
 
 .nfd-onboarding-container {
 	display: flex;

src/OnboardingSPA/utils/api/comingSoon.js

@@ -0,0 +1,16 @@
+import { onboardingRestURL } from './common';
+import { resolve } from './resolve';
+
+import apiFetch from '@wordpress/api-fetch';
+
+export async function setComingSoon( comingSoon ) {
+	return await resolve(
+		apiFetch( {
+			url: onboardingRestURL( 'settings/coming-soon' ),
+			method: 'POST',
+			data: {
+				comingSoon,
+			},
+		} ).then()
+	);
+}