Welcome Step Polish & Add What's Next MVP

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

@@ -3,35 +3,62 @@ import { useSelect } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../../store';
 import Button from '../../Button';
 
+import { setFlow } from '../../../utils/api/flow';
+import { wpAdminPage, bluehostDashboardPage } from '../../../../constants';
+
 /**
  * Navigation Button Component on Card
  *
- * @returns
+ * @return
  */
 
-const NavCardButton = ({ text, disabled }) => {
+const NavCardButton = ( { text, disabled } ) => {
 	const navigate = useNavigate();
 	const location = useLocation();
 
-	const { nextStep } = useSelect(
-		(select) => {
+	const { nextStep, currentData } = useSelect(
+		( select ) => {
 			return {
-				nextStep: select(nfdOnboardingStore).getNextStep(),
+				nextStep: select( nfdOnboardingStore ).getNextStep(),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
 			};
 		},
-		[location.path]
+		[ location.path ]
 	);
 
+	const isLastStep = null === nextStep || false === nextStep;
+
+	async function saveDataAndExit() {
+		if ( currentData ) {
+			currentData.isComplete = new Date().getTime();
+			setFlow( currentData );
+		}
+		//Redirect to Admin Page for normal customers
+		// and Bluehost Dashboard for ecommerce customers
+		const exitLink = exitToWordpressForEcommerce()
+			? bluehostDashboardPage
+			: wpAdminPage;
+		window.location.replace( exitLink );
+	}
+
+	const exitToWordpressForEcommerce = () => {
+		if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) {
+			return true;
+		}
+		return false;
+	};
+
 	const handleBtnClick = () => {
-		navigate(nextStep.path);
+		return isLastStep ? saveDataAndExit() : navigate( nextStep.path );
 	};
 
 	return (
 		<Button
 			className="nfd-nav-card-button"
-			text={text}
-			handleClick={handleBtnClick}
-			disabled={disabled}
+			text={ text }
+			handleClick={ handleBtnClick }
+			disabled={ disabled }
 		/>
 	);
 };

src/OnboardingSPA/components/Header/step-navigation.js

@@ -6,126 +6,131 @@ import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { setFlow } from '../../utils/api/flow';
 import { store as nfdOnboardingStore } from '../../store';
-import { getSettings, setSettings } from '../../utils/api/settings';
 import { wpAdminPage, bluehostDashboardPage } from '../../../constants';
 
 /**
  * Back step Navigation button.
+ *
  * @param {*} param0
- * @returns
+ * @return
  */
-const Back = ({ path }) => {
+const Back = ( { path } ) => {
 	const navigate = useNavigate();
-	const navigateBack = () => navigate(path, { state: { origin: 'header' } });
+	const navigateBack = () =>
+		navigate( path, { state: { origin: 'header' } } );
 	return (
-		<Button className= "navigation-buttons navigation-buttons_back" 
-				onClick={navigateBack} 
-				variant="secondary">
-			<Icon icon={chevronLeft} />
-			{__('Back', 'wp-module-onboarding')}
+		<Button
+			className="navigation-buttons navigation-buttons_back"
+			onClick={ navigateBack }
+			variant="secondary"
+		>
+			<Icon icon={ chevronLeft } />
+			{ __( 'Back', 'wp-module-onboarding' ) }
 		</Button>
 	);
 };
 
 /**
  * Next step naigation button
+ *
  * @param {*} param0
- * @returns
+ * @return
  */
-const Next = ({ path }) => {
+const Next = ( { path } ) => {
 	/* [TODO]: some sense of isStepComplete to enable/disable */
 	const navigate = useNavigate();
-	const navigateNext = () => navigate(path, { state: { origin: 'header' } });
+	const navigateNext = () =>
+		navigate( path, { state: { origin: 'header' } } );
 	return (
 		<Button
-			onClick={navigateNext}
+			onClick={ navigateNext }
 			variant="primary"
-			className="navigation-buttons navigation-buttons_next">
-			{__('Next', 'wp-module-onboarding')}
-			<Icon icon={chevronRight} />
+			className="navigation-buttons navigation-buttons_next"
+		>
+			{ __( 'Next', 'wp-module-onboarding' ) }
+			<Icon icon={ chevronRight } />
 		</Button>
 	);
 };
 
-async function syncSocialSettingsFinish( currentData ) {
-	const initialData = await getSettings();
-	const result = await setSettings(currentData?.data?.socialData);
-	if (result?.error != null) {
-		console.error('Unable to Save Social Data!');
-		return initialData?.body;
-	}
-	return result?.body;
-}
-
-async function saveData(path, currentData) {
-
-	if (currentData) {
-          currentData.isComplete = new Date().getTime();
-		// If Social Data is changed then sync it
-		if (path?.includes('basic-info')) {
-			const socialData = await syncSocialSettingsFinish(currentData);
-
-			// If Social Data is changed then Sync that also to the store
-			if (socialData && currentData?.data)
-				currentData.data.socialData = socialData;
-		}
-		setFlow(currentData);
+async function saveDataAndExit( currentData ) {
+	if ( currentData ) {
+		currentData.isComplete = new Date().getTime();
+		setFlow( currentData );
 	}
-	//Redirect to Admin Page for normal customers 
+	//Redirect to Admin Page for normal customers
 	// and Bluehost Dashboard for ecommerce customers
-	const exitLink = exitToWordpressForEcommerce() ? bluehostDashboardPage : wpAdminPage;
-	window.location.replace(exitLink);
+	const exitLink = exitToWordpressForEcommerce()
+		? bluehostDashboardPage
+		: wpAdminPage;
+	window.location.replace( exitLink );
 }
 
 /**
  * Finish step navigation button.
- * @returns
+ *
+ * @param  root0
+ * @param  root0.currentData
+ * @param  root0.saveDataAndExit
+ * @return
  */
-const Finish = ({ path, currentData, saveData }) => (
+const Finish = ( { currentData, saveDataAndExit } ) => (
 	<Button
-		onClick={(e) => saveData(path, currentData)}
+		onClick={ ( e ) => saveDataAndExit( currentData ) }
 		className="navigation-buttons navigation-buttons_finish"
-		variant="primary">
-		{__('Finish', 'wp-module-onboarding')}
-		<Icon icon={chevronRight} />
+		variant="primary"
+	>
+		{ __( 'Finish', 'wp-module-onboarding' ) }
+		<Icon icon={ chevronRight } />
 	</Button>
 );
 
 /**
  * Step buttons presented in Header.
- * @returns
+ *
+ * @return
  */
 const StepNavigation = () => {
 	const location = useLocation();
 	const { previousStep, nextStep, currentData } = useSelect(
-		(select) => {
+		( select ) => {
 			return {
-				nextStep: select(nfdOnboardingStore).getNextStep(),
-				previousStep: select(nfdOnboardingStore).getPreviousStep(),
-				currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
+				nextStep: select( nfdOnboardingStore ).getNextStep(),
+				previousStep: select( nfdOnboardingStore ).getPreviousStep(),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
 			};
 		},
-		[location.pathname]
+		[ location.pathname ]
 	);
 	const isFirstStep = null === previousStep || false === previousStep;
 	const isLastStep = null === nextStep || false === nextStep;
 	return (
 		<div className="nfd-onboarding-header__step-navigation">
-			<ButtonGroup style={{ display: 'flex', columnGap: '0.5rem' }}>
-				{isFirstStep ? null : <Back path={previousStep.path} />}
-				{isLastStep ? <Finish path={location.pathname} currentData={currentData} saveData={saveData}/> : <Next path={nextStep.path} />}
+			<ButtonGroup style={ { display: 'flex', columnGap: '0.5rem' } }>
+				{ isFirstStep || isLastStep ? null : (
+					<Back path={ previousStep.path } />
+				) }
+				{ isLastStep ? (
+					<Finish
+						currentData={ currentData }
+						saveDataAndExit={ saveDataAndExit }
+					/>
+				) : (
+					<Next path={ nextStep.path } />
+				) }
 			</ButtonGroup>
 		</div>
 	);
 };
 
 /*
- * check if this is the last step 
+ * check if this is the last step
  */
 const exitToWordpressForEcommerce = () => {
-	if( window.nfdOnboarding.currentFlow == 'ecommerce' ) {
+	if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) {
 		return true;
 	}
 	return false;
-}
+};
 export default StepNavigation;

src/OnboardingSPA/components/Tab/index.js

@@ -7,11 +7,13 @@
 const Tab = ({ title, text, imgType, className }) => {
     return (
         <div className={className}>
-            <div className="content-text">
+            <div className="tab-text">
                 <h4>{title}</h4>
                 {text}
             </div>
-            <div className={imgType}></div>
+            <div className="tab-image">
+                <div className={imgType}></div>
+            </div>
         </div>
 
     );

src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss

@@ -70,47 +70,57 @@
     display: flex;
     flex-direction: row;
     align-items: stretch;
-    justify-content: space-around;
-
+    justify-content: space-between;
 }
 
-.content-text{
+.tab-text{
     padding-right: 10px;
     font-size:  clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem);
     line-height: 1.6;
-    width: 390px;
 }
 
-.content-img{
-    background-image: var(--get-started-content-img);
+.tab-img {
+    background-color: var(--nfd-onboarding-tertiary);
+    overflow: hidden;
+}
+
+.tab-img-base {
     background-size: contain;
     background-repeat: no-repeat;
-    height: 200px;
-    width: 350px;
+    height: 228px;
+    animation-duration: 360ms;
+    width: clamp(180px, 50vw, 400px);
+    animation-timing-function: ease-out;
+    @media (prefers-reduced-motion) {
+        animation: none !important;
+        translation: none !important;
+    }
+}
+
+.content-img{
+    @extend .tab-img-base;
+    background-image: var(--get-started-content-img);
+    animation-name: fadeInRight;
 }
 
 .features-img{
+    @extend .tab-img-base;
     background-image: var(--get-started-features-img);
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: 200px;
-    width: 350px;
+    animation-name: fadeInUp;
 }
 
 .design-img{
+    @extend .tab-img-base;
     background-image: var(--get-started-design-img);
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: 200px;
-    width: 350px;
+    animation-name: fadeInLeft;
 }
 
 .welcome-card {
 	display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-evenly;
-    height: 100%;
+    justify-content: space-around;
+    height: clamp(560px, 59vh, 800px);
     width: 100%;
     padding-bottom: 10px;
 }
@@ -130,6 +140,5 @@
 
     .content-img, .design-img, .features-img {
         max-height: 100px;
-        max-width: 180px;
     }
 }