Merge branch 'trunk' of https://github.com/newfold-labs/wp-module-onb…

…oarding into add/design-state-handler-fresh-install-check
newfold-labs · May 2, 2024 · 2eb67fa · 2eb67fa
2 parents c4c52c3 + 39138e7
commit 2eb67fa
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 205 deletions.
diff --git a/src/OnboardingSPA/components/MiniPreview/contents.js b/src/OnboardingSPA/components/MiniPreview/contents.js
@@ -2,7 +2,7 @@ import { __, sprintf } from '@wordpress/i18n';
 
 import { translations } from '../../utils/locales/translations';
 
-const getContents = ( brandUrl = '' ) => {
+const getContents = () => {
 	return {
 		heading: __( 'Preview', 'wp-module-onboarding' ),
 		defaultTitle: sprintf(
@@ -15,7 +15,6 @@ const getContents = ( brandUrl = '' ) => {
 			__( 'Just another WordPress %s', 'wp-module-onboarding' ),
 			translations( 'Site' )
 		),
-		defaultUrl: brandUrl,
 	};
 };
 

diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js
@@ -2,6 +2,7 @@ import { memo, useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../store';
+import { wpSiteUrl } from '../../../constants';
 
 import getContents from './contents';
 
@@ -12,18 +13,16 @@ const MiniPreview = ( {
 	isSocialFormOpen,
 	setIsSocialFormOpen,
 } ) => {
-	const { socialDataStore, brandUrl } = useSelect( ( select ) => {
+	const { socialDataStore } = useSelect( ( select ) => {
 		return {
 			socialDataStore:
 				select( nfdOnboardingStore ).getOnboardingSocialData(),
-			brandUrl: select( nfdOnboardingStore ).getNewfoldBrandUrl(),
 		};
 	}, [] );
 
-	const content = getContents( brandUrl );
+	const content = getContents();
 	const titlePreview = title === '' ? content.defaultTitle : title;
 	const descPreview = desc === '' ? content.defaultDesc : desc;
-	const urlPreview = title === '' ? content.defaultUrl : titleToUrl();
 
 	const [ facebook, setFacebook ] = useState( '' );
 	const [ twitter, setTwitter ] = useState( '' );
@@ -78,13 +77,6 @@ const MiniPreview = ( {
 		{ url: tiktok, image: 'var(--tiktok-icon)' },
 	];
 
-	function titleToUrl() {
-		return `https://${ title
-			?.toLowerCase()
-			.replace( /\s/g, '' )
-			.replace( /\W/g, '' ) }.com`;
-	}
-
 	function socialIconList() {
 		return socialDataset.map( ( socialInfo, idx ) => {
 			return (
@@ -180,7 +172,7 @@ const MiniPreview = ( {
 							className="browser-row-search__search-box_input"
 							type="text"
 							onChange={ () => {} }
-							value={ urlPreview }
+							value={ wpSiteUrl }
 						></input>
 					</div>
 					<div className="browser-row-search__more">
@@ -196,7 +188,7 @@ const MiniPreview = ( {
 							{ titlePreview }
 						</h4>
 						<span className="browser-content_top-row-link">
-							{ urlPreview }
+							{ wpSiteUrl }
 						</span>
 					</div>
 					<h5 className="browser-content_desc">{ descPreview }</h5>

diff --git a/src/OnboardingSPA/components/StartOptions/contents.js b/src/OnboardingSPA/components/StartOptions/contents.js
diff --git a/src/OnboardingSPA/components/StartOptions/index.js b/src/OnboardingSPA/components/StartOptions/index.js
@@ -1,6 +1,6 @@
 // WordPress
+import { memo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { memo, useEffect, useState } from '@wordpress/element';
 
 // Classes and functions
 import { useNavigate } from 'react-router-dom';
@@ -15,20 +15,9 @@ import {
 import { SITEGEN_FLOW } from '../../data/flows/constants';
 import { store as nfdOnboardingStore } from '../../store';
 import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants';
-import getContents from './contents';
 
-const StartOptions = ( {
-	experimentVersion,
-	questionnaire,
-	oldFlow,
-	options,
-} ) => {
-	const content = getContents();
+const StartOptions = ( { questionnaire, oldFlow, options } ) => {
 	const navigate = useNavigate();
-	const [ forkOptions, setForkOptions ] = useState( [] );
-	const [ showAIRecommendedBadge, setShowAIRecommendedBadge ] =
-		useState( false );
-
 	const { brandConfig, hireProUrl, currentData } = useSelect( ( select ) => {
 		return {
 			brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
@@ -47,25 +36,6 @@ const StartOptions = ( {
 		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
-	useEffect( () => {
-		if (
-			experimentVersion &&
-			( experimentVersion === 2 || experimentVersion === 4 )
-		) {
-			// Swap the DIY flow with the AI Flow
-			[ options[ 0 ], options[ 1 ] ] = [ options[ 1 ], options[ 0 ] ];
-		}
-
-		if (
-			experimentVersion &&
-			( experimentVersion === 3 || experimentVersion === 4 )
-		) {
-			// Show a Badge in the AI Option
-			setShowAIRecommendedBadge( true );
-		}
-		setForkOptions( options );
-	}, [ experimentVersion ] );
-
 	const switchFlow = ( newFlow ) => {
 		if ( ! validateFlow( brandConfig, newFlow ) ) {
 			return false;
@@ -116,68 +86,52 @@ const StartOptions = ( {
 			);
 		}
 	};
-
 	return (
-		experimentVersion &&
-		forkOptions && (
-			<div className="">
-				<p className="nfd-onboarding-sitegen-options__questionnaire">
-					{ questionnaire }
-				</p>
-				<div className="nfd-onboarding-sitegen-options__container">
-					{ forkOptions.map( ( tab, idx ) => {
-						if (
-							tab.flow === SITEGEN_FLOW &&
-							! validateFlow( brandConfig, tab.flow )
-						) {
-							// Do not show the Sitegen AI option if not enabled for the customer
-							return false;
-						}
-						return (
-							<div
-								className={
-									'nfd-onboarding-sitegen-options__container__options'
-								}
-								key={ idx }
-								role="button"
-								tabIndex={ 0 }
-								onClick={ () => {
+		<div className="">
+			<p className="nfd-onboarding-sitegen-options__questionnaire">
+				{ questionnaire }
+			</p>
+			<div className="nfd-onboarding-sitegen-options__container">
+				{ options.map( ( tab, idx ) => {
+					if (
+						tab.flow === SITEGEN_FLOW &&
+						! validateFlow( brandConfig, tab.flow )
+					) {
+						// Do not show the Sitegen AI option if not enabled for the customer
+						return false;
+					}
+					return (
+						<div
+							className="nfd-onboarding-sitegen-options__container__options"
+							key={ idx }
+							role="button"
+							tabIndex={ 0 }
+							onClick={ () => {
+								selectFlow( tab.flow );
+							} }
+							onKeyDown={ () => {
+								{
 									selectFlow( tab.flow );
-								} }
-								onKeyDown={ () => {
-									{
-										selectFlow( tab.flow );
-									}
-								} }
-								data-flow={ tab.flow }
-							>
-								{ tab.flow === SITEGEN_FLOW &&
-									showAIRecommendedBadge && (
-										<div
-											className={
-												'nfd-onboarding-sitegen-options__container__options--badge'
-											}
-										>
-											{ content.badge }
-										</div>
-									) }
-								<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>
+								}
+							} }
+							data-flow={ 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>
 	);
 };
 

diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss
@@ -23,7 +23,6 @@
 
 		&__options {
 			flex: 1;
-			position: relative;
 			min-width: 310px;
 			height: 130px;
 			border: 1px solid #9ca2a7;
@@ -59,16 +58,6 @@
 				padding-top: 3px;
 				padding-bottom: 2px;
 			}
-
-			&--badge {
-				top: -12px;
-				font-size: 16px;
-				padding: 8px 12px;
-				border-radius: 4px;
-				position: absolute;
-				background: linear-gradient(0deg, #f36, #f36);
-
-			}
 		}
 
 		&__options:hover {

diff --git a/src/OnboardingSPA/steps/TheFork/contents.js b/src/OnboardingSPA/steps/TheFork/contents.js
@@ -10,21 +10,21 @@ const getContents = () => {
 		),
 		options: [
 			{
-				title: __( 'Guided Configuration', 'wp-module-onboarding' ),
+				title: __( ' Website Creator', 'wp-module-onboarding' ),
 				subtitle: __(
-					'Robust configuration guide to help you build your site',
+					'Unique AI generated content & design curated for you.',
 					'wp-module-onboarding'
 				),
-				flow: 'sitebuild',
+				span: __( 'AI', 'wp-module-onboarding' ),
+				flow: 'sitegen',
 			},
 			{
-				title: __( ' Website Creator', 'wp-module-onboarding' ),
+				title: __( 'Guided Configuration', 'wp-module-onboarding' ),
 				subtitle: __(
-					'Unique AI generated content & design curated for you.',
+					'Robust configuration guide to help you build your site',
 					'wp-module-onboarding'
 				),
-				span: __( 'AI', 'wp-module-onboarding' ),
-				flow: 'sitegen',
+				flow: 'sitebuild',
 			},
 			{
 				title: __( 'Hire a Pro', 'wp-module-onboarding' ),