From c7e9f7b8a16c5def29bf38c1577ca4bdad718c49 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 23 Apr 2024 17:44:52 +0530 Subject: [PATCH 1/3] Remove fork AB Testing --- .../components/StartOptions/contents.js | 9 -- .../components/StartOptions/index.js | 148 ++++++------------ .../components/StartOptions/stylesheet.scss | 11 -- src/OnboardingSPA/steps/TheFork/contents.js | 14 +- src/OnboardingSPA/steps/TheFork/index.js | 56 +------ .../utils/analytics/hiive/constants.js | 2 - src/onboarding.js | 30 ++-- 7 files changed, 72 insertions(+), 198 deletions(-) delete mode 100644 src/OnboardingSPA/components/StartOptions/contents.js diff --git a/src/OnboardingSPA/components/StartOptions/contents.js b/src/OnboardingSPA/components/StartOptions/contents.js deleted file mode 100644 index 28a4b8916..000000000 --- a/src/OnboardingSPA/components/StartOptions/contents.js +++ /dev/null @@ -1,9 +0,0 @@ -import { __ } from '@wordpress/i18n'; - -const getContents = () => { - return { - badge: __( 'Fastest', 'wp-module-onboarding' ), - }; -}; - -export default getContents; diff --git a/src/OnboardingSPA/components/StartOptions/index.js b/src/OnboardingSPA/components/StartOptions/index.js index 20463ee16..3d400e248 100644 --- a/src/OnboardingSPA/components/StartOptions/index.js +++ b/src/OnboardingSPA/components/StartOptions/index.js @@ -1,34 +1,18 @@ -// WordPress +import { SITEGEN_FLOW } from '../../data/flows/constants'; +import { resolveGetDataForFlow } from '../../data/flows'; import { useSelect, useDispatch } from '@wordpress/data'; -import { memo, useEffect, useState } from '@wordpress/element'; - -// Classes and functions -import { useNavigate } from 'react-router-dom'; import { validateFlow } from '../../data/flows/utils'; -import { resolveGetDataForFlow } from '../../data/flows'; - -// Misc +import { useNavigate } from 'react-router-dom'; +import { memo } from '@wordpress/element'; +import { store as nfdOnboardingStore } from '../../store'; import { OnboardingEvent, trackOnboardingEvent, } from '../../utils/analytics/hiive'; -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 +31,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 +81,51 @@ const StartOptions = ( { ); } }; - return ( - experimentVersion && - forkOptions && ( -
-

- { questionnaire } -

-
- { 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 ( -
{ +
+

+ { questionnaire } +

+
+ { 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 ( +
{ + selectFlow( tab.flow ); + } } + onKeyDown={ () => { + { selectFlow( tab.flow ); - } } - onKeyDown={ () => { - { - selectFlow( tab.flow ); - } - } } - data-flow={ tab.flow } - > - { tab.flow === SITEGEN_FLOW && - showAIRecommendedBadge && ( -
- { content.badge } -
- ) } -

- { tab.span && ( - - { tab.span } - - ) } - { tab.title } -

-

- { tab.subtitle } -

-
- ); - } ) } -
+ } + } } + > +

+ { tab.span && ( + + { tab.span } + + ) } + { tab.title } +

+

+ { tab.subtitle } +

+
+ ); + } ) }
- ) +
); }; diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss index 021bde287..b57c58d58 100644 --- 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 index 38f301ca6..bd3228135 100644 --- 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' ), diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index 2133c0ed0..71698c9e7 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/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 } /> { @@ -27,18 +24,19 @@ if ( runtimeDataExists ) { }, } ); - HiiveAnalytics.initialize( { - namespace: CATEGORY_EXPERIMENT, - urls: { - single: onboardingRestURL( 'events' ), - batch: onboardingRestURL( 'events/batch' ), - }, - settings: { - debounce: { - time: 3000, - }, - }, - } ); + // uncomment and use during New experiment + // HiiveAnalytics.initialize( { + // namespace: CATEGORY_EXPERIMENT, + // urls: { + // single: onboardingRestURL( 'events' ), + // batch: onboardingRestURL( 'events/batch' ), + // }, + // settings: { + // debounce: { + // time: 3000, + // }, + // }, + // } ); initializeNFDOnboarding( NFD_ONBOARDING_ELEMENT_ID, From 82f62d89c7cd24fb023b7fe5994cf308c42976ee Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 24 Apr 2024 12:46:16 +0530 Subject: [PATCH 2/3] Update index.js --- src/OnboardingSPA/components/StartOptions/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/OnboardingSPA/components/StartOptions/index.js b/src/OnboardingSPA/components/StartOptions/index.js index 3d400e248..9f66db05f 100644 --- a/src/OnboardingSPA/components/StartOptions/index.js +++ b/src/OnboardingSPA/components/StartOptions/index.js @@ -109,6 +109,7 @@ const StartOptions = ( { questionnaire, oldFlow, options } ) => { selectFlow( tab.flow ); } } } + data-flow={ tab.flow } >

{ tab.span && ( From 15714cee993921ed335c554ec48dad4c4b2db5c3 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 26 Apr 2024 15:27:30 +0530 Subject: [PATCH 3/3] Organize Imports and remove commented code --- .../components/StartOptions/index.js | 15 ++++++++++----- src/onboarding.js | 14 -------------- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/src/OnboardingSPA/components/StartOptions/index.js b/src/OnboardingSPA/components/StartOptions/index.js index 9f66db05f..0653eb92c 100644 --- a/src/OnboardingSPA/components/StartOptions/index.js +++ b/src/OnboardingSPA/components/StartOptions/index.js @@ -1,14 +1,19 @@ -import { SITEGEN_FLOW } from '../../data/flows/constants'; -import { resolveGetDataForFlow } from '../../data/flows'; +// WordPress +import { memo } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { validateFlow } from '../../data/flows/utils'; + +// Classes and functions import { useNavigate } from 'react-router-dom'; -import { memo } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../store'; +import { validateFlow } from '../../data/flows/utils'; +import { resolveGetDataForFlow } from '../../data/flows'; + +// Misc import { OnboardingEvent, trackOnboardingEvent, } from '../../utils/analytics/hiive'; +import { SITEGEN_FLOW } from '../../data/flows/constants'; +import { store as nfdOnboardingStore } from '../../store'; import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants'; const StartOptions = ( { questionnaire, oldFlow, options } ) => { diff --git a/src/onboarding.js b/src/onboarding.js index 2f96a01ff..83805ad3e 100644 --- a/src/onboarding.js +++ b/src/onboarding.js @@ -24,20 +24,6 @@ if ( runtimeDataExists ) { }, } ); - // uncomment and use during New experiment - // HiiveAnalytics.initialize( { - // namespace: CATEGORY_EXPERIMENT, - // urls: { - // single: onboardingRestURL( 'events' ), - // batch: onboardingRestURL( 'events/batch' ), - // }, - // settings: { - // debounce: { - // time: 3000, - // }, - // }, - // } ); - initializeNFDOnboarding( NFD_ONBOARDING_ELEMENT_ID, window.nfdOnboarding