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.

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

Moves design picker after the goals step #97383

Merged
merged 9 commits into from
Dec 17, 2024

Conversation

p-jackson
Copy link
Member

@p-jackson p-jackson commented Dec 12, 2024

Warning

DO NOT MERGE UNTIL D168479-code HAS BEEN MERGED
Merged via: Automattic/wpcom/pull/168479

Related to #97208

Proposed Changes

theme.picker.mp4

Why are these changes being made?

Testing Instructions

  • Apply the patch D168479-code
  • Make sure you're logged out
  • Go to /setup/onboarding, should show goals screen first, if not, please add flags=onboarding/goals-first
  • Second step is design picker
  • Select a design and see if it shows the preview

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

@p-jackson p-jackson self-assigned this Dec 12, 2024
@matticbot
Copy link
Contributor

matticbot commented Dec 12, 2024

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/dp-before-site-creation on your sandbox.

@matticbot
Copy link
Contributor

matticbot commented Dec 12, 2024

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~29 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
onboarding-flow             +59 B  (+0.1%)      +24 B  (+0.2%)
link-in-bio-tld-flow        +22 B  (+0.0%)       +5 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~39 bytes removed 📉 [gzipped])

name                                  parsed_size           gzip_size
async-load-automattic-design-preview        -87 B  (-0.0%)      -39 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

@candy02058912 candy02058912 force-pushed the update/dp-before-site-creation branch from e21ac6f to ececb82 Compare December 13, 2024 06:58
@candy02058912 candy02058912 marked this pull request as ready for review December 13, 2024 09:07
Copy link
Contributor

@candy02058912 candy02058912 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@p-jackson I noticed this TODO item in the PR description

TODO Removes design picker from site-setup

I'm a bit confused on what this means?

I think this PR is good to mark as "Ready for review" as it fulfills the title of "moves design picker after the goals step."

Upcoming work:

  • the broken layout that we might/might not address per the prototype
  • make sure the "Continue" or "Unlock theme" CTA works

preview@2x

@zaguiini
Copy link
Contributor

make sure the "Continue" or "Unlock theme" CTA works

"Continue" works for me. "Unlock theme" doesn't, and it's because we have some site slug gating within handleCheckout. I think this snippet might help move us forward:

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
index 29df82da807..782df7dd6db 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
@@ -532,26 +532,30 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 			forceRedirection: true,
 		} );
 	}
-	function handleCheckout() {
+
+	function goToNextStep() {
+		if ( ! wpcomSiteSlug && ! siteSlug ) {
+			return pickDesign();
+		}
+
+		navigateToCheckout();
+	}
+
+	function handleCheckoutModalConfirmation() {
 		recordTracksEvent( 'calypso_signup_design_upgrade_modal_checkout_button_click', {
 			theme: selectedDesign?.slug,
 			theme_tier: selectedDesign?.design_tier,
 			is_externally_managed: selectedDesign?.is_externally_managed,
 		} );
 
-		if ( siteSlugOrId ) {
-			// We want to display the Eligibility Modal only for externally managed themes
-			// and when no domain was purchased yet.
-			if (
-				selectedDesign?.is_externally_managed &&
-				hasEligibilityMessages &&
-				! didPurchaseDomain
-			) {
-				setShowEligibility( true );
-			} else {
-				navigateToCheckout();
-			}
+		// We want to display the Eligibility Modal only for externally managed themes
+		// and when no domain was purchased yet.
+		if ( selectedDesign?.is_externally_managed && hasEligibilityMessages && ! didPurchaseDomain ) {
+			setShowEligibility( true );
+		} else {
+			goToNextStep();
 		}
+
 		setShowUpgradeModal( false );
 	}
 
@@ -698,6 +702,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 				{
 					selectedDesign: _selectedDesign,
 					selectedSiteCategory: categorization.selections?.join( ',' ),
+					plan: requiredPlanSlug,
 				},
 				{ ...( positionIndex >= 0 && { position_index: positionIndex } ) }
 			);
@@ -833,7 +838,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 						marketplaceProduct={ selectedMarketplaceProduct }
 						requiredPlan={ requiredPlanSlug }
 						closeModal={ closeUpgradeModal }
-						checkout={ handleCheckout }
+						checkout={ handleCheckoutModalConfirmation }
 					/>
 				) }
 				<QueryEligibility siteId={ site?.ID } />
@@ -849,7 +854,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 						setShowEligibility( false );
 					} }
 					handleContinue={ () => {
-						navigateToCheckout();
+						goToNextStep();
 						setShowEligibility( false );
 					} }
 				/>
diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts
index 313dec5cea8..0d297d2ea3c 100644
--- a/client/landing/stepper/declarative-flow/onboarding.ts
+++ b/client/landing/stepper/declarative-flow/onboarding.ts
@@ -128,7 +128,12 @@ const onboarding: Flow = {
 				}
 
 				case 'designSetup': {
-					const { selectedDesign: _selectedDesign } = providedDependencies;
+					const { selectedDesign: _selectedDesign, plan } = providedDependencies;
+
+					if ( plan ) {
+						setPlanCartItem( plan );
+					}
+
 					if ( isAssemblerDesign( _selectedDesign as Design ) && isAssemblerSupported() ) {
 						return navigate( 'pattern-assembler' );
 					}

@p-jackson
Copy link
Member Author

TODO Removes design picker from site-setup
I'm a bit confused on what this means?

@candy02058912 it just means that the current state of the PR means users see the design picker twice. Once before account creation, then as they continue through the flow, after site creation and checkout, they see the design picker again.

They should only see it once: before account creation.

@candy02058912 candy02058912 force-pushed the update/dp-before-site-creation branch from c74a460 to 2bc98c6 Compare December 16, 2024 08:46
@candy02058912 candy02058912 requested a review from a team as a code owner December 16, 2024 09:02
@matticbot matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Dec 16, 2024
@candy02058912
Copy link
Contributor

@zaguiini tested those changes, and it unblocks the theme selection; I was wondering if we'd like to add the snippet to a separate PR and set it to merge to this branch so people can check out to that branch and review it more easily if we don't want to make this PR too large.

@zaguiini
Copy link
Contributor

zaguiini commented Dec 16, 2024

I think that's a more sensible decision @candy02058912 since these two are related but I haven't thoroughly tested my snippet, so we'll probably want to give it more attention.

@zaguiini
Copy link
Contributor

zaguiini commented Dec 16, 2024

I'm getting redirected to /setup/site-setup/designSetup?siteSlug=%s&goals-at-front-experiment=true&skippedCheckout=1&categories=blog after picking a design and a domain - this is the URL that the checkout is sending me to. Not sure if it's related.

I'm also seeing the plans screen even after "Unlocking" a theme. The problem with that is that "Free" is an option despite having picked a paid theme in the DP. EDIT: This is fine. See p1734386022743679/1734385074.248909-slack-C085HCWCEDN.

@zaguiini
Copy link
Contributor

zaguiini commented Dec 16, 2024

I think that's a more sensible decision @candy02058912 since these two are related but I haven't thoroughly tested my snippet, so we'll probably want to give it more attention.

Scratch that. See p1734385797588649/1734385074.248909-slack-C085HCWCEDN.

I'm getting redirected to /setup/site-setup/designSetup?siteSlug=%s&goals-at-front-experiment=true&skippedCheckout=1&categories=blog after picking a design and a domain - this is the URL that the checkout is sending me to. Not sure if it's related.

Additionally to the snippet shared above, I tried setting the destination as /home/%s within the processing step submission in the /setup/onboarding flow like this:

image

But it didn't work out. After checkout, it redirected me to my site without my theme/style variation. I was talking with @p-jackson about this, and we'll need to briefly redirect to /setup/site-setup (or somewhere else) so that the chosen theme and variation are applied to the new site.

Considering the user already has a site by the time we call the processing step, an option is to store the theme and variation as an option and assign their choices to the site after checkout.

If we want to test only the happy path, another path @p-jackson suggested was to store their options as part of localStorage and introduce a mini processing post-checkout processing screen that reads from their browser (or from query parameters if we totally hate local storage!), applies the theme and sends them home.


On a different note, we also need to take into account additional marketplace products required for specific themes.

@autumnfjeld
Copy link
Contributor

Pinging @arthur791004 in case you want to pick this up.

case 'designSetup': {
const { selectedDesign: _selectedDesign } = providedDependencies;
if ( isAssemblerDesign( _selectedDesign as Design ) && isAssemblerSupported() ) {
return navigate( 'pattern-assembler' );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The pattern assembler has been sunset

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed it 👍

Copy link
Contributor

@candy02058912 candy02058912 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR is good to merge as it isn't reflected in production, and we'll follow up with #97540

@candy02058912 candy02058912 merged commit bfa7b5f into trunk Dec 17, 2024
12 checks passed
@candy02058912 candy02058912 deleted the update/dp-before-site-creation branch December 17, 2024 08:19
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants