Apply Fork A/B Test Winner

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>
 	);
 };
 

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 {

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' ),

src/OnboardingSPA/steps/TheFork/index.js

@@ -1,10 +1,9 @@
 // WordPress
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 // Classes and functions
 import getContents from './contents';
-import { setFlow } from '../../utils/api/flow';
 
 // Components
 import StartOptions from '../../components/StartOptions';
@@ -22,20 +21,13 @@ import {
 	sendOnboardingEvent,
 	trackOnboardingEvent,
 } from '../../utils/analytics/hiive';
-import {
-	ACTION_SITEGEN_FORK_AI_EXPERIMENT,
-	ACTION_SITEGEN_FORK_OPTION_SELECTED,
-	CATEGORY_EXPERIMENT,
-} from '../../utils/analytics/hiive/constants';
+import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants';
 import { store as nfdOnboardingStore } from '../../store';
 import { DEFAULT_FLOW } from '../../data/flows/constants';
 
 const TheFork = () => {
-	const [ experimentVersion, setExperimentVersion ] = useState();
-	const { currentData, migrationUrl } = useSelect( ( select ) => {
+	const { migrationUrl } = useSelect( ( select ) => {
 		return {
-			currentData:
-				select( nfdOnboardingStore ).getCurrentOnboardingData(),
 			migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
 		};
 	} );
@@ -48,7 +40,6 @@ const TheFork = () => {
 		setIsHeaderNavigationEnabled,
 		setFooterActiveView,
 		setHideFooterNav,
-		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
@@ -59,48 +50,8 @@ const TheFork = () => {
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
 		setFooterActiveView( FOOTER_SITEGEN );
-		handleExperimentVersion();
 	} );
 
-	const handleExperimentVersion = async () => {
-		let theForkExperimentVersion = 0;
-		if ( currentData.sitegen.theForkExperimentVersion !== 0 ) {
-			// Use an existing experiment version if it exists
-			setExperimentVersion(
-				currentData.sitegen.theForkExperimentVersion
-			);
-			theForkExperimentVersion =
-				currentData.sitegen.theForkExperimentVersion;
-		} else {
-			// Generate a random experiment version from 1 to 4
-			theForkExperimentVersion = Math.floor( Math.random() * 5 );
-			setExperimentVersion( theForkExperimentVersion );
-
-			// Sync that to the store and DB for same version on refresh
-			currentData.sitegen.theForkExperimentVersion =
-				theForkExperimentVersion;
-			setCurrentOnboardingData( currentData );
-			await setFlow( currentData );
-			const experimentVersionNames = {
-				1: 'control',
-				2: 'position',
-				3: 'badge',
-				4: 'position_badge',
-			};
-
-			// Send an event for the experiment version shown to the user.
-			sendOnboardingEvent(
-				new OnboardingEvent(
-					ACTION_SITEGEN_FORK_AI_EXPERIMENT,
-					experimentVersionNames[ theForkExperimentVersion ],
-					null,
-					null,
-					CATEGORY_EXPERIMENT
-				)
-			);
-		}
-	};
-
 	const oldFlow = window.nfdOnboarding?.oldFlow
 		? window.nfdOnboarding.oldFlow
 		: DEFAULT_FLOW;
@@ -126,7 +77,6 @@ const TheFork = () => {
 				subtitle={ content.subheading }
 			/>
 			<StartOptions
-				experimentVersion={ experimentVersion }
 				questionnaire={ content.questionnaire }
 				oldFlow={ oldFlow }
 				options={ content.options }

src/OnboardingSPA/utils/analytics/hiive/constants.js

@@ -22,7 +22,6 @@ export const ACTION_ONBOARDING_CHAPTER_COMPLETE = 'onboarding_chapter_complete';
 export const ACTION_SOCIAL_ADDED = 'social_added';
 
 export const ACTION_SITEGEN_FORK_OPTION_SELECTED = 'fork_option_selected';
-export const ACTION_SITEGEN_FORK_AI_EXPERIMENT = 'exp_fork_ai';
 export const ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET = 'site_details_prompt_set';
 export const ACTION_SITEGEN_SOCIAL_CONNECTED = 'social_connected';
 export const ACTION_SITEGEN_SOCIAL_CONNECT_SKIPPED = 'social_connect_skipped';
@@ -57,7 +56,6 @@ export const ACTION_TO_LABEL_KEY_MAP = {
 	[ ACTION_ONBOARDING_CHAPTER_COMPLETE ]: 'chapter',
 	[ ACTION_SOCIAL_ADDED ]: 'platform',
 	[ ACTION_SITEGEN_FORK_OPTION_SELECTED ]: 'flow',
-	[ ACTION_SITEGEN_FORK_AI_EXPERIMENT ]: 'label',
 	[ ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET ]: 'prompt',
 	[ ACTION_SITEGEN_SOCIAL_CONNECTED ]: 'platform',
 	[ ACTION_SITEGEN_HOMEPAGE_SELECTED ]: 'version',

src/onboarding.js

@@ -7,10 +7,7 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 import initializeNFDOnboarding from './OnboardingSPA';
 import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics';
 import { onboardingRestURL } from './OnboardingSPA/utils/api/common';
-import {
-	CATEGORY,
-	CATEGORY_EXPERIMENT,
-} from './OnboardingSPA/utils/analytics/hiive/constants';
+import { CATEGORY } from './OnboardingSPA/utils/analytics/hiive/constants';
 
 if ( runtimeDataExists ) {
 	domReady( () => {
@@ -27,19 +24,6 @@ if ( runtimeDataExists ) {
 			},
 		} );
 
-		HiiveAnalytics.initialize( {
-			namespace: CATEGORY_EXPERIMENT,
-			urls: {
-				single: onboardingRestURL( 'events' ),
-				batch: onboardingRestURL( 'events/batch' ),
-			},
-			settings: {
-				debounce: {
-					time: 3000,
-				},
-			},
-		} );
-
 		initializeNFDOnboarding(
 			NFD_ONBOARDING_ELEMENT_ID,
 			window.nfdOnboarding