Customer Detail and Experience and Site Generation Pages

src/OnboardingSPA/components/Animate/stylesheet.scss

@@ -109,6 +109,25 @@
 	}
 }
 
+@keyframes fadeInFast {
+
+	0% {
+		opacity: 0.1;
+	}
+
+	25% {
+		opacity: 1;
+	}
+
+	75% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0.1;
+	}
+}
+
 @-webkit-keyframes spin {
 
 	0% {

src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js

@@ -1,11 +1,11 @@
+import classNames from 'classnames';
 import { useNavigate } from 'react-router-dom';
-
 import { useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
+import { Icon, chevronRight } from '@wordpress/icons';
 import { store as nfdOnboardingStore } from '../../../store';
-import classNames from 'classnames';
 
-const NextButtonSiteGen = ( { text, className } ) => {
+const NextButtonSiteGen = ( { text, className, callback = null } ) => {
 	const navigate = useNavigate();
 	const { nextStep } = useSelect( ( select ) => {
 		return {
@@ -19,12 +19,19 @@ const NextButtonSiteGen = ( { text, className } ) => {
 				className
 			) }
 			onClick={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback();
+				}
 				if ( nextStep ) {
 					navigate( nextStep.path );
 				}
 			} }
 		>
 			{ text }
+			<Icon
+				className={ 'nfd-onboarding-button--site-gen-next--icon' }
+				icon={ chevronRight }
+			/>
 		</Button>
 	);
 };

src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss

@@ -1,15 +1,18 @@
 .nfd-onboarding-button {
 
 	&--site-gen-next {
-		display: block;
-		background-color: var(--nfd-onboarding-primary);
-		color: var(--nfd-onboarding-secondary);
-		text-align: center;
 		width: 164px;
 		height: 50px;
-		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
+		display: flex;
+		cursor: pointer;
 		margin-top: 24px;
-		border-radius: 6px;
+		text-align: center;
+		border-radius: 8px;
+		align-items: center;
+		justify-content: center;
+		color: var(--nfd-onboarding-secondary);
+		background-color: var(--nfd-onboarding-primary);
+		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
 
 		@media (min-width: 2600px ) {
 			width: 250px;
@@ -22,4 +25,8 @@
 			margin-top: 10px;
 		}
 	}
+
+	&--icon {
+		fill: var(--nfd-onboarding-secondary);
+	}
 }

src/OnboardingSPA/components/CardWithOptions/index.js

@@ -0,0 +1,71 @@
+import { Icon, chevronRight } from '@wordpress/icons';
+
+const CardWithOptions = ( { title, options, skip, callback } ) => {
+	const buildOptions = () => {
+		return options.map( ( data, idx ) => {
+			return (
+				<div
+					key={ idx }
+					role="button"
+					tabIndex={ 0 }
+					className={ 'nfd-sg-card__data__option' }
+					onClick={ () => {
+						if ( callback && typeof callback === 'function' ) {
+							callback( idx + 1 );
+						}
+					} }
+					onKeyDown={ () => {
+						if ( callback && typeof callback === 'function' ) {
+							callback( idx + 1 );
+						}
+					} }
+				>
+					<div className={ 'nfd-sg-card__data__option__left' }>
+						<div
+							className={ 'nfd-sg-card__data__option__left_top' }
+						>
+							{ data.title }
+						</div>
+						<div
+							className={
+								'nfd-sg-card__data__option__left_bottom'
+							}
+						>
+							{ data.desc }
+						</div>
+					</div>
+					<Icon
+						className={ 'nfd-sg-card__data__option__right' }
+						icon={ chevronRight }
+					/>
+				</div>
+			);
+		} );
+	};
+
+	return (
+		<div className={ 'nfd-sg-card' }>
+			<div className={ 'nfd-sg-card__title' }>{ title }</div>
+			<div className={ 'nfd-sg-card__data' }>{ buildOptions() }</div>
+			<div
+				role="button"
+				tabIndex={ 0 }
+				className={ 'nfd-sg-card__skip' }
+				onClick={ () => {
+					if ( callback && typeof callback === 'function' ) {
+						callback( -1 );
+					}
+				} }
+				onKeyDown={ () => {
+					if ( callback && typeof callback === 'function' ) {
+						callback( -1 );
+					}
+				} }
+			>
+				{ skip }
+			</div>
+		</div>
+	);
+};
+
+export default CardWithOptions;

src/OnboardingSPA/components/CardWithOptions/stylesheet.scss

@@ -0,0 +1,79 @@
+$background-color: var(--nfd-onboarding-card-background);
+
+.nfd-sg-card {
+
+	margin: 8px;
+	max-width: 90vw;
+	padding: 24px 12px;
+	border-radius: 12px;
+	background-color: $background-color;
+	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
+	box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05);
+
+	&__title {
+		color: var(--nfd-onboarding-primary);
+		margin: 16px;
+		line-height: 2;
+		font-size: 18px;
+		text-align: center;
+		margin-bottom: 30px;
+		letter-spacing: 1.5px;
+	}
+
+	&__data {
+		margin: 12px;
+
+		&__option {
+			display: flex;
+			cursor: pointer;
+			margin: 16px 4px;
+			align-items: center;
+			border-radius: 4px 4px 0 0;
+			padding: 16px 12px 20px 12px;
+			justify-content: space-between;
+			transition: background-color 400ms ease-in-out;
+
+			&:not(:last-child) {
+				border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
+			}
+
+			&:hover {
+				background-color: var(--nfd-onboarding-hover);
+			}
+
+			&__left_top {
+				color: var(--nfd-onboarding-primary);
+				font-size: 16px;
+				font-weight: 500;
+				padding-bottom: 12px;
+			}
+
+			&__left_bottom {
+				color: var(--nfd-onboarding-primary);
+				font-size: 14px;
+				font-weight: 300;
+			}
+
+			&__right {
+				fill: var(--nfd-onboarding-primary);
+				transition: all 200ms ease-in-out;
+
+				&:hover {
+					transform: scale(1.1);
+				}
+			}
+		}
+	}
+
+	&__skip {
+		cursor: pointer;
+		text-align: end;
+		margin: 0 20px 6px 20px;
+		transition: color 200ms ease-in-out;
+		color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
+
+		&:hover {
+			color: var(--nfd-onboarding-primary);
+		}
+	}
+}

src/OnboardingSPA/components/ErrorState/Step/index.js

@@ -1,5 +1,5 @@
 import CommonLayout from '../../Layouts/Common';
-import HeadingWithSubHeading from '../../HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../Heading/HeadingWithSubHeading';
 import NeedHelpTag from '../../NeedHelpTag';
 
 const StepErrorState = ( { title, subtitle, error } ) => {

src/OnboardingSPA/components/Heading/AIHeading/index.js

@@ -0,0 +1,10 @@
+const AIHeading = ( { title } ) => {
+	return (
+		<div className={ 'ai-heading' }>
+			<div className={ 'ai-heading--icon' } />
+			<div className={ 'ai-heading--title' }>{ title }</div>
+		</div>
+	);
+};
+
+export default AIHeading;

src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss

@@ -0,0 +1,24 @@
+.ai-heading {
+
+	display: flex;
+	margin-bottom: 20px;
+	align-items: center;
+
+	&--icon {
+		width: 50px;
+		margin: 4px;
+		height: 50px;
+		background-size: 200%;
+		background-position: center;
+		background-repeat: no-repeat;
+		background-image: var(--sitegen-ai-animation);
+	}
+
+	&--title {
+		margin: 10px;
+		line-height: 1.5;
+		font-weight: 500;
+		font-size: 1.2rem;
+		color: var(--nfd-onboarding-primary);
+	}
+}

src/OnboardingSPA/components/Loaders/SiteGenLoader/contents.js

@@ -0,0 +1,32 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		title: __( 'Building Website', 'wp-module-onboarding' ),
+		status: [
+			{
+				title: __( 'Generating Website', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Finding Font Pairings', 'wp-module-onboarding' ),
+			},
+			{
+				title: __(
+					'Building Custom Color Palettes',
+					'wp-module-onboarding'
+				),
+			},
+			{
+				title: __( 'Populating Images', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Finalizing Previews', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Packaging Website', 'wp-module-onboarding' ),
+			},
+		],
+	};
+};
+
+export default getContents;

src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js

@@ -0,0 +1,64 @@
+import getContents from './contents';
+import { useSelect } from '@wordpress/data';
+import { useNavigate } from 'react-router-dom';
+import { useEffect, useState } from '@wordpress/element';
+import { store as nfdOnboardingStore } from '../../../store';
+
+const SiteGenLoader = ( { autoNavigate = false } ) => {
+	let statusIdx = 0;
+	const content = getContents();
+	const navigate = useNavigate();
+	const [ percentage, setPercentage ] = useState( 0 );
+	const [ status, setStatus ] = useState( content.status[ statusIdx ].title );
+
+	const { nextStep } = useSelect( ( select ) => {
+		return {
+			nextStep: select( nfdOnboardingStore ).getNextStep(),
+		};
+	} );
+
+	const checkStatus = async () => {
+		// Make fake API Call to get the status.
+		if ( percentage !== 100 ) setPercentage( ( t ) => t + 10 );
+	};
+
+	useEffect( () => {
+		const statusTimer = setInterval( () => {
+			checkStatus();
+			statusIdx += 1;
+			if ( statusIdx === content.status.length ) statusIdx = 0;
+			setStatus( content.status[ statusIdx ].title );
+		}, 3000 );
+		return () => {
+			clearInterval( statusTimer );
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( percentage === 100 ) {
+			if ( nextStep && autoNavigate ) {
+				navigate( nextStep.path );
+			}
+		}
+	}, [ percentage ] );
+
+	return (
+		<div className={ 'nfd-sg-loader' }>
+			<div className={ 'nfd-sg-loader__title' }>{ content.title }</div>
+			<div className={ 'nfd-sg-loader__progress' }>
+				<div className={ 'nfd-sg-loader__progress_bars' }>
+					<div className={ 'nfd-sg-loader__progress_bars_bg' } />
+					<div
+						className={ 'nfd-sg-loader__progress_bars_bar' }
+						style={ { width: `${ percentage }%` } }
+					/>
+				</div>
+			</div>
+			<div
+				className={ 'nfd-sg-loader__status' }
+			>{ `${ status }...` }</div>
+		</div>
+	);
+};
+
+export default SiteGenLoader;