Merge pull request #363 from newfold-labs/PRESS2-1267-update-fork-new

PRESS2-1267-update-fork-new

src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js

@@ -0,0 +1,23 @@
+/**
+ * Interface Cards with standard design.
+ *
+ * @param {Object} root0
+ * @param {string} root0.title
+ * @param {string} root0.subtitle
+ */
+
+const HeadingWithSubHeading = ( { title, subtitle } ) => {
+	return (
+		<div className="nfd-onboarding-step__heading">
+			<h2 className="nfd-onboarding-step__heading__title">{ title }</h2>
+			{ subtitle && (
+				<div className="nfd-onboarding-step__heading__subtitle">
+					{ subtitle }
+					<div className="nfd-onboarding-step__heading__icon"></div>
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default HeadingWithSubHeading;

src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss

@@ -0,0 +1,34 @@
+.nfd-onboarding-step {
+
+	&__heading {
+		color: var(--nfd-onboarding-primary);
+		width: 96%;
+		margin: 50px 0 50px;
+		line-height: 1;
+
+		&__title {
+			font-weight: 300;
+			text-align: center;
+			color: var(--nfd-onboarding-primary);
+			margin: 35px !important;
+			font-size: 30px;
+		}
+
+		&__subtitle {
+			color: var(--nfd-onboarding-primary) !important;
+			font-weight: 300;
+			text-align: center;
+			font-size: 20px;
+		}
+
+		&__icon {
+			display: inline-flex;
+			width: 100px;
+			height: 17px;
+			background-image: var(--nfd-onboarding-logo-name);
+			background-size: contain;
+			background-repeat: no-repeat;
+			filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(200%) contrast(200%);
+		}
+	}
+}

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

@@ -9,6 +9,7 @@ import themeToggleHOC from '../themeToggleHOC';
 import NewfoldInterfaceSkeleton from '../index';
 import { ThemeProvider } from '../../ThemeContextProvider';
 import { store as nfdOnboardingStore } from '../../../store';
+import classNames from 'classnames';
 import { setFlow } from '../../../utils/api/flow';
 import {
 	generateSiteGenMeta,
@@ -24,6 +25,15 @@ const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
 );
 
 const SiteGen = () => {
+	const { newfoldBrand } = useSelect( ( select ) => {
+		return {
+			newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(),
+		};
+	}, [] );
+
+	useEffect( () => {
+		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
+	}, [ newfoldBrand ] );
 	const location = useLocation();
 
 	const { currentData } = useSelect( ( select ) => {
@@ -117,7 +127,10 @@ const SiteGen = () => {
 		<ThemeProvider>
 			<ThemedNewfoldInterfaceSkeleton
 				id={ 'nfd-onboarding-skeleton--sitegen' }
-				className={ 'nfd-onboarding-skeleton--sitegen' }
+				className={ classNames(
+					'nfd-onboarding-skeleton--sitegen',
+					`brand-${ newfoldBrand }`
+				) }
 				header={ <Header /> }
 				content={ <Content /> }
 				sidebar={ <Sidebar /> }

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js

@@ -14,9 +14,19 @@ import { forwardRef, useEffect } from '@wordpress/element';
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
+import bgAiImg from '../../static/images/ai_bg.png';
 
 function useHTMLClass( className ) {
 	useEffect( () => {
+		// eslint-disable-next-line no-undef
+		const mainImage = new Image();
+		mainImage.src = bgAiImg;
+		mainImage.onload = () => {
+			document.querySelector(
+				'.nfd-onboarding-skeleton--sitegen'
+			).style.backgroundImage = `url('${ bgAiImg }')`;
+		};
+
 		const element =
 			document && document.querySelector( `html:not(.${ className })` );
 		if ( ! element ) {

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss

@@ -190,3 +190,4 @@ html.nfd-interface-interface-skeleton__html-container {
 		}
 	}
 }
+

src/OnboardingSPA/components/StartOptions/index.js

@@ -0,0 +1,93 @@
+import { SITEGEN_FLOW } from '../../data/flows/constants';
+import { resolveGetDataForFlow } from '../../data/flows';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { validateFlow } from '../../data/flows/utils';
+import { useNavigate } from 'react-router-dom';
+import { store as nfdOnboardingStore } from '../../store';
+
+const StartOptions = ( { questionnaire, oldFlow, options } ) => {
+	const navigate = useNavigate();
+	const { brandConfig, migrationUrl } = useSelect( ( select ) => {
+		return {
+			brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
+			migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
+		};
+	} );
+	const {
+		updateAllSteps,
+		updateTopSteps,
+		updateRoutes,
+		updateDesignRoutes,
+		updateInitialize,
+	} = useDispatch( nfdOnboardingStore );
+
+	const switchFlow = ( newFlow ) => {
+		if ( ! validateFlow( brandConfig, newFlow ) ) {
+			return false;
+		}
+		const currentFlow = window.nfdOnboarding.currentFlow;
+		const getData = resolveGetDataForFlow( newFlow );
+		const data = getData();
+		updateAllSteps( data.steps );
+		updateTopSteps( data?.topSteps );
+		updateRoutes( data.routes );
+		updateDesignRoutes( data?.designRoutes );
+		if ( SITEGEN_FLOW !== currentFlow ) {
+			window.nfdOnboarding.oldFlow = currentFlow;
+		}
+		window.nfdOnboarding.currentFlow = newFlow;
+		updateInitialize( true );
+		navigate( data.steps[ 1 ].path );
+	};
+	const selectFlow = ( flow ) => {
+		switch ( flow ) {
+			case 'onboarding':
+				return switchFlow( oldFlow );
+			case 'ai':
+				return switchFlow( SITEGEN_FLOW );
+			case 'migration':
+				return window.open( migrationUrl, '_blank' );
+		}
+	};
+	return (
+		<div className="">
+			<p className="nfd-onboarding-sitegen-options__questionnaire">
+				{ questionnaire }
+			</p>
+			<div className="nfd-onboarding-sitegen-options__container">
+				{ options.map( ( tab, idx ) => {
+					return (
+						<div
+							className="nfd-onboarding-sitegen-options__container__options"
+							key={ idx }
+							role="button"
+							tabIndex={ 0 }
+							onClick={ () => {
+								selectFlow( tab.flow );
+							} }
+							onKeyDown={ () => {
+								{
+									selectFlow( tab.flow );
+								}
+							} }
+						>
+							<h3 className="nfd-onboarding-sitegen-options__container__heading__title">
+								{ tab.span && (
+									<span className="nfd-onboarding-sitegen-options__container__options__span">
+										{ tab.span }
+									</span>
+								) }
+								{ tab.title }
+							</h3>
+							<p className="nfd-onboarding-sitegen-options__container__heading__subtitle">
+								{ tab.subtitle }
+							</p>
+						</div>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+};
+
+export default StartOptions;

src/OnboardingSPA/components/StartOptions/stylesheet.scss

@@ -0,0 +1,73 @@
+.nfd-onboarding-sitegen-options {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	&__questionnaire {
+		color: var(--nfd-onboarding-primary);
+		font-weight: 500;
+		text-align: center;
+		font-size: 18px;
+	}
+
+	&__container {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+
+		&__options {
+			flex: 1;
+			min-width: 310px;
+			height: 130px;
+			border: 1px solid #9ca2a7;
+			text-align: center;
+			padding: 24px;
+			padding-top: 50px;
+			margin: 20px;
+			border-radius: 16px;
+			color: var(--nfd-onboarding-primary);
+			font-size: 20px;
+
+			&__span {
+				background-color: var(--nfd-onboarding-white);
+				color: rgb(6, 0, 0);
+				padding-right: 6px;
+				padding-left: 5px;
+				margin-right: 5px;
+				border: 1px solid #fff;
+				border-radius: 8px;
+			}
+		}
+
+		&__options:hover {
+			background-color: rgba(6, 0, 0, 0.3);
+			cursor: pointer;
+			outline: 2px solid #9ca2a7;
+			transition: 0.1s linear;
+		}
+
+		&__heading {
+			color: var(--nfd-onboarding-primary);
+			width: 96%;
+			margin: 50px 0 50px;
+			line-height: 1;
+
+			&__title {
+				font-weight: 510;
+				text-align: center;
+				color: var(--nfd-onboarding-primary);
+				font-size: 20px;
+				line-height: 20px;
+			}
+
+			&__subtitle {
+				color: var(--nfd-onboarding-primary) !important;
+				font-weight: 510;
+				text-align: center;
+				font-size: 14px;
+				line-height: 16.71px;
+			}
+		}
+	}
+}

src/OnboardingSPA/steps/TheFork/contents.js

@@ -0,0 +1,50 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __( 'Welcome to WordPress', 'wp-module-onboarding' ),
+		subheading: __( 'powered by ', 'wp-module-onboarding' ),
+		questionnaire: __(
+			'Where would you like to start?',
+			'wp-module-onboarding'
+		),
+		options: [
+			{
+				title: __( 'Build it myself', 'wp-module-onboarding' ),
+				subtitle: __(
+					"We'll stay out of your way.",
+					'wp-module-onboarding'
+				),
+				flow: 'onboarding',
+			},
+			{
+				title: __( ' Website Creator', 'wp-module-onboarding' ),
+				subtitle: __(
+					'Custom Al generated content & design.',
+					'wp-module-onboarding'
+				),
+				span: __( 'AI', 'wp-module-onboarding' ),
+				flow: 'ai',
+			},
+			{
+				title: __( 'Hire a Pro', 'wp-module-onboarding' ),
+				subtitle: __(
+					'Leave it to our WordPress experts.',
+					'wp-module-onboarding'
+				),
+				flow: 'migration',
+			},
+		],
+
+		importtext: __(
+			'Already have a WordPress site you want to import?',
+			'wp-module-onboarding'
+		),
+		importlink: __(
+			'https://my.bluehost.com/cgi/services/migration',
+			'wp-module-onboarding'
+		),
+	};
+};
+
+export default getContents;