Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove calypso_onboarding_goals_step_added_goals experiment #97203

Merged
merged 2 commits into from
Dec 8, 2024
+35 −159
Merged

Remove calypso_onboarding_goals_step_added_goals experiment #97203

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a4db29
Remove calypso_onboarding_goals_step_added_goals experiment
p-jackson Dec 7, 2024
700c2bf
Remove unnecessary variable
p-jackson Dec 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 4 additions & 53 deletions ...nt/landing/stepper/declarative-flow/internals/steps-repository/design-setup/categories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,62 +73,13 @@ function makeSortCategoryToTop( slugs: string[] ) {
};
}

const sortBlogToTop = makeSortCategoryToTop( [ CATEGORIES.BLOG ] );
const sortStoreToTop = makeSortCategoryToTop( [ CATEGORIES.STORE ] );
const sortBusinessToTop = makeSortCategoryToTop( [ CATEGORIES.BUSINESS ] );

export function getCategorizationOptions(
intent: string,
goals: Onboard.SiteGoal[],
options: {
useGoals?: boolean;
isMultiSelection?: boolean;
} = {}
) {
if ( options.useGoals ) {
return getCategorizationFromGoals( goals, options.isMultiSelection );
}
return getCategorizationFromIntent( intent );
interface CategorizationOptions {
isMultiSelection?: boolean;
}

function getCategorizationFromIntent( intent: string ) {
const result = {
defaultSelections: [] as string[],
} as {
defaultSelections: string[];
sort: ( a: Category, b: Category ) => 0 | 1 | -1;
};

switch ( intent ) {
case 'write':
return {
...result,
defaultSelections: [ CATEGORIES.BLOG ],
sort: sortBlogToTop,
};
case 'sell':
return {
...result,
defaultSelections: [ CATEGORIES.STORE ],
sort: sortStoreToTop,
};
case 'build':
return {
...result,
defaultSelections: [ CATEGORIES.BUSINESS ],
sort: sortBusinessToTop,
};
default:
return {
...result,
sort: sortBlogToTop,
};
}
}

function getCategorizationFromGoals(
export function getCategorizationOptions(
goals: Onboard.SiteGoal[],
isMultiSelection: boolean = false
{ isMultiSelection = false }: CategorizationOptions = {}
) {
const defaultSelections = Array.from(
new Set(
Expand Down
9 changes: 2 additions & 7 deletions ...tepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,6 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
const variantName = experimentAssignment?.variationName;
const oldHighResImageLoading = ! isLoadingExperiment && variantName === 'treatment';

const [ isAddedGoalsExpLoading, addedGoalsExpAssignment ] = useExperiment(
'calypso_onboarding_goals_step_added_goals'
);

const isGoalsHoldout = useIsGoalsHoldout( stepName );

const isGoalCentricFeature = isEnabled( 'design-picker/goal-centric' ) && ! isGoalsHoldout;
Expand Down Expand Up @@ -232,8 +228,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
}
}, [ hasTrackedView, designs ] );

const categorizationOptions = getCategorizationOptions( intent, goals, {
useGoals: addedGoalsExpAssignment?.variationName === 'treatment',
const categorizationOptions = getCategorizationOptions( goals, {
isMultiSelection: isGoalCentricFeature,
} );
const categorization = useCategorization( allDesigns?.filters?.subject || EMPTY_OBJECT, {
Expand Down Expand Up @@ -812,7 +807,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
// ********** Main render logic

// Don't render until we've done fetching all the data needed for initial render.
if ( ! site || isLoadingDesigns || isAddedGoalsExpLoading ) {
if ( ! site || isLoadingDesigns ) {
return <StepperLoader />;
}

Expand Down
48 changes: 2 additions & 46 deletions client/landing/stepper/declarative-flow/internals/steps-repository/goals/goals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Onboard } from '@automattic/data-stores';
import { useLocale, isLocaleRtl } from '@automattic/i18n-utils';
import { useTranslate } from 'i18n-calypso';
import { useMemo } from 'react';
import { loadExperimentAssignment } from 'calypso/lib/explat';
Expand All @@ -8,11 +7,10 @@ import type { Goal } from './types';

const SiteGoal = Onboard.SiteGoal;

export const useGoals = ( isAddedGoalsExp: boolean ): Goal[] => {
export const useGoals = (): Goal[] => {
loadExperimentAssignment( 'calypso_design_picker_image_optimization_202406' ); // Temporary for A/B test.

const translate = useTranslate();
const locale = useLocale();

const addedGoalsExpResult = useMemo( () => {
const goals = [
Expand Down Expand Up @@ -77,47 +75,5 @@ export const useGoals = ( isAddedGoalsExp: boolean ): Goal[] => {
return shuffleArray( goals );
}, [ translate ] );

const goals = [
{
key: SiteGoal.Write,
title: translate( 'Write & Publish' ),
},
{
key: SiteGoal.Sell,
title: translate( 'Sell online' ),
},
{
key: SiteGoal.Promote,
title: translate( 'Promote myself or business' ),
},
{
key: SiteGoal.DIFM,
title: translate( 'Let us build your site in 4 days' ),
isPremium: true,
},
{
key: SiteGoal.Import,
title: translate( 'Import existing content or website' ),
},
{
key: SiteGoal.Other,
title: translate( 'Other' ),
},
];

/**
* Hides the DIFM goal for RTL locales.
*/
const hideDIFMGoalForUnsupportedLocales = ( { key }: Goal ) => {
if ( key === SiteGoal.DIFM && isLocaleRtl( locale ) ) {
return false;
}
return true;
};

if ( isAddedGoalsExp ) {
return addedGoalsExpResult;
}

return goals.filter( hideDIFMGoalForUnsupportedLocales );
return addedGoalsExpResult;
p-jackson marked this conversation as resolved.
Show resolved Hide resolved
};
68 changes: 25 additions & 43 deletions client/landing/stepper/declarative-flow/internals/steps-repository/goals/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import DocumentHead from 'calypso/components/data/document-head';
import { isGoalsBigSkyEligible } from 'calypso/landing/stepper/hooks/use-is-site-big-sky-eligible';
import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { useExperiment } from 'calypso/lib/explat';
import { getQueryArgs } from 'calypso/lib/query-args';
import DashboardIcon from './dashboard-icon';
import { GoalsCaptureContainer } from './goals-capture-container';
Expand Down Expand Up @@ -44,18 +43,11 @@ const refGoals: Record< string, Onboard.SiteGoal[] > = {
* The goals capture step
*/
const GoalsStep: Step = ( { navigation } ) => {
const [ isAddedGoalsExpLoading, addedGoalsExpAssignment ] = useExperiment(
'calypso_onboarding_goals_step_added_goals'
);
const isAddedGoalsExp = addedGoalsExpAssignment?.variationName === 'treatment';

const translate = useTranslate();
const whatAreYourGoalsText = isAddedGoalsExp
? translate( 'What would you like to do?' )
: translate( 'What are your goals?' );
const subHeaderText = isAddedGoalsExp
? translate( 'Pick one or more goals and we’ll tailor the setup experience for you.' )
: translate( 'Tell us what would you like to accomplish with your website.' );
const whatAreYourGoalsText = translate( 'What would you like to do?' );
const subHeaderText = translate(
'Pick one or more goals and we’ll tailor the setup experience for you.'
);

const goals = useSelect(
( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getGoals(),
Expand Down Expand Up @@ -161,10 +153,6 @@ const GoalsStep: Step = ( { navigation } ) => {

const isMediumOrBiggerScreen = useViewportMatch( 'small', '>=' );

if ( isAddedGoalsExpLoading ) {
return null;
}

return (
<>
<DocumentHead title={ whatAreYourGoalsText } />
Expand All @@ -173,47 +161,41 @@ const GoalsStep: Step = ( { navigation } ) => {
whatAreYourGoalsText={ whatAreYourGoalsText }
subHeaderText={ subHeaderText }
stepName="goals-step"
onSkip={ isAddedGoalsExp ? handleSkip : handleDashboardClick }
onSkip={ handleSkip }
goNext={ handleNext }
nextLabelText={ translate( 'Next' ) }
skipLabelText={ isAddedGoalsExp ? translate( 'Skip' ) : translate( 'Skip to dashboard' ) }
skipLabelText={ translate( 'Skip' ) }
recordTracksEvent={ recordTracksEvent }
stepContent={
<>
<SelectGoals
selectedGoals={ goals }
onChange={ setGoals }
isAddedGoalsExp={ isAddedGoalsExp }
/>
<SelectGoals selectedGoals={ goals } onChange={ setGoals } />
{ isMediumOrBiggerScreen && (
<Button
__next40pxDefaultSize
className="select-goals__next"
variant="primary"
onClick={ handleNext }
>
{ isAddedGoalsExp ? translate( 'Next' ) : translate( 'Continue' ) }
{ translate( 'Next' ) }
</Button>
) }
{ isAddedGoalsExp && (
<div className="select-goals__alternative-flows-container">
<Button variant="link" onClick={ handleImportClick } className="select-goals__link">
{ translate( 'Import or migrate an existing site' ) }
</Button>
<span className="select-goals__link-separator" />
<Button variant="link" onClick={ handleDIFMClick } className="select-goals__link">
{ translate( 'Let us build a custom site for you' ) }
</Button>
<Button
variant="link"
onClick={ handleDashboardClick }
className="select-goals__link select-goals__dashboard-button"
>
<DashboardIcon />
{ translate( 'Skip to dashboard' ) }
</Button>
</div>
) }
<div className="select-goals__alternative-flows-container">
<Button variant="link" onClick={ handleImportClick } className="select-goals__link">
{ translate( 'Import or migrate an existing site' ) }
</Button>
<span className="select-goals__link-separator" />
<Button variant="link" onClick={ handleDIFMClick } className="select-goals__link">
{ translate( 'Let us build a custom site for you' ) }
</Button>
<Button
variant="link"
onClick={ handleDashboardClick }
className="select-goals__link select-goals__dashboard-button"
>
<DashboardIcon />
{ translate( 'Skip to dashboard' ) }
</Button>
</div>
</>
}
/>
Expand Down
10 changes: 2 additions & 8 deletions client/landing/stepper/declarative-flow/internals/steps-repository/goals/select-goals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@ import { PremiumBadge } from '@automattic/components';
import { Onboard } from '@automattic/data-stores';
import { SelectCardCheckbox } from '@automattic/onboarding';
import styled from '@emotion/styled';
import { useTranslate } from 'i18n-calypso';
import { useGoals } from './goals';

type SelectGoalsProps = {
onChange: ( selectedGoals: Onboard.SiteGoal[] ) => void;
selectedGoals: Onboard.SiteGoal[];
isAddedGoalsExp: boolean;
};

const Placeholder = styled.div`
Expand All @@ -33,9 +31,8 @@ const Placeholder = styled.div`

const SiteGoal = Onboard.SiteGoal;

export const SelectGoals = ( { onChange, selectedGoals, isAddedGoalsExp }: SelectGoalsProps ) => {
const translate = useTranslate();
const goalOptions = useGoals( isAddedGoalsExp );
export const SelectGoals = ( { onChange, selectedGoals }: SelectGoalsProps ) => {
const goalOptions = useGoals();

// *******************************************************************************
// **** Experiment skeleton left in for future BBE (Goal) copy change tests ****
Expand Down Expand Up @@ -69,9 +66,6 @@ export const SelectGoals = ( { onChange, selectedGoals, isAddedGoalsExp }: Selec
return (
<>
<div className="select-goals__cards-container">
{ ! isAddedGoalsExp && (
<div className="select-goals__cards-hint">{ translate( 'Select all that apply' ) }</div>
) }
{ /* We only need to show the goal loader only if the BBE goal will be displayed */ }
{ hasBuiltByExpressGoal && isBuiltByExpressExperimentLoading
? goalOptions.map( ( { key } ) => (
Expand Down
Loading