Signup reskin: Integration PR #50512

niranjan-uma-shankar · 2021-02-26T06:26:39Z

Changes proposed in this Pull Request

This PR replaces the legacy experiments platform with the new ExPlat JS client for the reskinned signup experiment. Please note that the UI changes for this experiment are implemented in subsequent PRs. This PR only swaps out the legacy experiment platform for the new one.

For more context on the experiment, read pbxNRc-IO-p2.

Testing instructions

Assign yourself to treatment from Abacus, and visit /start
Verify that the reskinned signup UI loads(white background)

Assigning yourself to control should load the regular blue background UI in /start.

matticbot · 2021-02-26T06:26:41Z

Test live: https://calypso.live/?branch=add/setup-reskin-explat

matticbot · 2021-02-26T06:39:21Z

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

App Entrypoints (~438 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-gutenboarding         +944 B  (+0.0%)     +375 B  (+0.1%)
entry-login                 +302 B  (+0.0%)      +82 B  (+0.0%)
entry-main                  +269 B  (+0.0%)      +37 B  (+0.0%)
entry-domains-landing       +116 B  (+0.0%)      +28 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~6544 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
signup              +10048 B  (+4.2%)    +4300 B  (+7.1%)
domains              +3300 B  (+0.3%)    +1027 B  (+0.3%)
settings              +828 B  (+0.1%)     +353 B  (+0.2%)
plugins               +828 B  (+0.2%)     +366 B  (+0.2%)
account               +828 B  (+0.2%)     +344 B  (+0.2%)
jetpack-connect       +361 B  (+0.1%)      +96 B  (+0.1%)
accept-invite         +361 B  (+0.3%)     +101 B  (+0.3%)
security              +186 B  (+0.0%)      +54 B  (+0.0%)
plans                  +62 B  (+0.0%)       -1 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 (~880 bytes removed 📉 [gzipped])

name                                            parsed_size            gzip_size
async-load-signup-steps-domain-upsell               -9875 B  (-29.1%)    -3856 B  (-39.1%)
async-load-signup-steps-domains                     +5411 B   (+1.4%)    +1580 B   (+1.5%)
async-load-design-blocks                            +1014 B   (+0.0%)     +405 B   (+0.1%)
async-load-signup-steps-user                         +888 B   (+0.9%)     +234 B   (+0.8%)
async-load-quick-language-switcher                   +828 B   (+0.5%)     +294 B   (+0.6%)
async-load-design-playground                         +828 B   (+0.0%)     +351 B   (+0.1%)
async-load-design                                    +828 B   (+0.0%)     +351 B   (+0.1%)
async-load-automattic-search                         +828 B   (+0.7%)     +291 B   (+0.8%)
async-load-signup-steps-plans                        +106 B   (+0.0%)      +26 B   (+0.0%)
async-load-signup-steps-theme-selection               +16 B   (+0.0%)       +3 B   (+0.0%)
async-load-signup-steps-test-step                     +16 B   (+0.2%)       +6 B   (+0.3%)
async-load-signup-steps-survey                        +16 B   (+0.1%)       +6 B   (+0.1%)
async-load-signup-steps-site-type                     +16 B   (+0.2%)       +5 B   (+0.2%)
async-load-signup-steps-site-topic                    +16 B   (+0.1%)       +6 B   (+0.1%)
async-load-signup-steps-site-title                    +16 B   (+0.2%)       +7 B   (+0.3%)
async-load-signup-steps-site-style                    +16 B   (+0.1%)       +7 B   (+0.1%)
async-load-signup-steps-site-picker                   +16 B   (+0.0%)       +6 B   (+0.0%)
async-load-signup-steps-site-or-domain                +16 B   (+0.1%)       +7 B   (+0.1%)
async-load-signup-steps-site                          +16 B   (+0.1%)       +7 B   (+0.1%)
async-load-signup-steps-rewind-were-backing           +16 B   (+0.2%)       +6 B   (+0.2%)
async-load-signup-steps-rewind-migrate                +16 B   (+0.1%)       +6 B   (+0.1%)
async-load-signup-steps-rewind-form-creds             +16 B   (+0.0%)       +6 B   (+0.0%)
async-load-signup-steps-rebrand-cities-welcome        +16 B   (+0.1%)       +7 B   (+0.2%)
async-load-signup-steps-reader-landing                +16 B   (+0.2%)       +6 B   (+0.2%)
async-load-signup-steps-plans-atomic-store            +16 B   (+0.0%)       +7 B   (+0.0%)
async-load-signup-steps-passwordless                  +16 B   (+0.1%)       +6 B   (+0.2%)
async-load-signup-steps-p2-site                       +16 B   (+0.1%)       +5 B   (+0.1%)
async-load-signup-steps-p2-details                    +16 B   (+0.2%)       +6 B   (+0.2%)
async-load-signup-steps-import-url-onboarding         +16 B   (+0.0%)       +8 B   (+0.1%)
async-load-signup-steps-import-url                    +16 B   (+0.1%)       +8 B   (+0.1%)
async-load-signup-steps-import-preview                +16 B   (+0.1%)       +6 B   (+0.1%)
async-load-signup-steps-design-picker                 +16 B   (+0.0%)       +6 B   (+0.0%)
async-load-signup-steps-creds-permission              +16 B   (+0.0%)       +8 B   (+0.1%)
async-load-signup-steps-creds-confirm                 +16 B   (+0.0%)       +6 B   (+0.1%)
async-load-signup-steps-creds-complete                +16 B   (+0.2%)       +4 B   (+0.2%)
async-load-signup-steps-clone-start                   +16 B   (+0.1%)       +7 B   (+0.2%)
async-load-signup-steps-clone-ready                   +16 B   (+0.1%)       +6 B   (+0.1%)
async-load-signup-steps-clone-point                   +16 B   (+0.0%)       +7 B   (+0.0%)
async-load-signup-steps-clone-jetpack                 +16 B   (+0.2%)       +7 B   (+0.2%)
async-load-signup-steps-clone-destination             +16 B   (+0.1%)       +6 B   (+0.1%)
async-load-signup-steps-clone-credentials             +16 B   (+0.0%)       +7 B   (+0.0%)
async-load-signup-steps-clone-cloning                 +16 B   (+0.1%)       +7 B   (+0.2%)
async-load-signup-steps-about                         +16 B   (+0.0%)       +6 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.

niranjan-uma-shankar · 2021-03-30T20:30:14Z

@jessie-ross Since this is the first time I'm trying out the new ExPlat JS client, your inputs here would be super helpful.

I also need help with a weird behaviour I'm seeing with getting the experiment assignment. If I'm pointed to sandbox, then the variation is fetched immediately. However, if I'm pointed to production, then the variation returns undefined first and then eventually returns the assignment. I'm able to consistently reproduce this behaviour.

To repro, try the following steps:

Visit http://calypso.localhost:3000/ and assign to treatment of the experiment
Visit http://calypso.localhost:3000/start

If I'm pointed to sandbox, then /start will load the user step correctly with the white background. Notice in the console messages how the experiment variation is picked up as treatment(I logged the value of experimentAssignment?.variationName in this line).

I'm pointed to production, then /start loads control experience first. Notice the console messages picking up undefined first and then treatment. I'm curious why there's a difference in behaviour?

jessie-ross · 2021-03-31T02:27:40Z

Ah it is this error being thrown and causing experimentAssignment to be null:

wp-calypso/packages/explat-client/src/create-explat-client.ts

Lines 176 to 187 in ce5a924

    
           // We want to be loud in development mode to help pick up any issues: 
        
           if ( config.isDevelopmentMode ) { 
        
           	// Highlight when we dangerously get an experiment too soon to when we load one: 
        
           	if ( 
        
           		storedExperimentAssignment && 
        
           		Timing.monotonicNow() - storedExperimentAssignment.retrievedTimestamp < 1000 
        
           	) { 
        
           		throw new Error( 
        
           			`Warning: Trying to dangerously get an ExperimentAssignment too soon after loading it.` 
        
           		); 
        
           	} 
        
           }

It didn't occur in the sandbox since it took so long...

Looking at it now perhaps throwing an error wasn't the right idea, I'm going to PR it right now changing it to logging and removing the need to wrap with a try catch...

In the meantime you could use <ProvideExperimentData> instead of dangerouslyGetExperimentAssignment

jessie-ross · 2021-03-31T09:02:54Z

Looking at it now perhaps throwing an error wasn't the right idea, I'm going to PR it right now changing it to logging and removing the need to wrap with a try catch...

This has been fixed and merged in #51564, if you merge it in here you should find it works correctly 😁

jessie-ross · 2021-03-31T11:13:16Z

client/signup/index.web.js

@@ -9,13 +9,10 @@ import page from 'page';
 import controller from './controller';
 import { makeLayout, render as clientRender } from 'calypso/controller';
 import { getLanguageRouteParam } from 'calypso/lib/i18n-utils';
-import { loadExperimentAssignment } from 'calypso/lib/explat';

 export default async function () {
 	const lang = getLanguageRouteParam();



I think it is a good idea to add a non-awaited loadExperimentAssignment('refined_skin_v1') in here as well - this will prefetch the experiment while everything else is loading so there will be less chance of a loading state occuring.

Ah good point, I'll do that.

I've implemented this change. The PR is ready for review once again :)

jessie-ross · 2021-03-31T11:30:53Z

LGTM from the ExPlat side of things (so long as manual testing it works well) 👍

I recommend using an Exposure event with this one to further target the onboarding flow.

FYI in the very near future (WIP PR #51565) we will be adding an isEligible option which will allow you to do this in code targeting at the assignment level for React code, which would look like so:

<ProvideExperimentData
    name="refined_reskin_v1"
    options={{ isEligible: 'onboarding' === this.props.flowName }}
    >

This means you would get the default experience and no assignment would occur if isEligible is false, meaning that no exposure event would be necessary, and simplifying code a bit more :)

niranjan-uma-shankar · 2021-03-31T11:34:49Z

LGTM from the ExPlat side of things

Thanks for the quick review and feedback!

I recommend using an Exposure event with this one to further target the onboarding flow.

Makes sense. I haven't gotten around to defining the exposure events in Abacus yet but will keep this in mind.

This means you would get the default experience and no assignment would occur if isEligible is false, meaning that no exposure event would be necessary, and simplifying code a bit more

This is going to be a very helpful change, thanks for working on it.

taggon

Works as described! 👍

…nment

…gnup is loading

* Setup experiment in ExPlat and prevent blue flicker for the treatment group * Remove blue flicker when the treatment loads signup user step * Use isReskinned props from parent * Remove flicker of old user step UI when the treatment loads the user step * Refactor * Implement the new ExPlat JS client * Format header and subheader in the reskin flow * Change shade of background white * Setup experiment in ExPlat and prevent blue flicker for the treatment group * Remove blue flicker when the treatment loads signup user step * Use isReskinned props from parent * Remove flicker of old user step UI when the treatment loads the user step * Refactor * Implement the new ExPlat JS client * Change shade of background white * Remove Experiment component that is now deprecated * Fix merge issues * Fix merge issues * Setup experiment in ExPlat and prevent blue flicker for the treatment group * Remove blue flicker when the treatment loads signup user step * Use isReskinned props from parent * Remove flicker of old user step UI when the treatment loads the user step * Refactor * Implement the new ExPlat JS client * Change shade of background white * Remove Experiment component that is now deprecated * Use the ProvideExperimentData component for fetching experiment assignment * 1. Remove commented out lines 2. Load experiment assignments while signup is loading * Remove commented line * Undo a few debugging changes * Remove a remnant from merge conflict * Hide the header in the mapping/transfer screen * Setup experiment in ExPlat and prevent blue flicker for the treatment group * Remove blue flicker when the treatment loads signup user step * Use isReskinned props from parent * Remove flicker of old user step UI when the treatment loads the user step * Refactor * Implement the new ExPlat JS client * Change shade of background white * Remove Experiment component that is now deprecated * Use the ProvideExperimentData component for fetching experiment assignment * 1. Remove commented out lines 2. Load experiment assignments while signup is loading * Remove commented line * Undo a few debugging changes * Setup experiment in ExPlat and prevent blue flicker for the treatment group * Remove blue flicker when the treatment loads signup user step * Use isReskinned props from parent * Remove flicker of old user step UI when the treatment loads the user step * Refactor * Implement the new ExPlat JS client * Change shade of background white * Remove Experiment component that is now deprecated * Use the ProvideExperimentData component for fetching experiment assignment * 1. Remove commented out lines 2. Load experiment assignments while signup is loading * Remove commented line * Undo a few debugging changes * CSS tweaks * Setup experiment in ExPlat and prevent blue flicker for the treatment group * Remove blue flicker when the treatment loads signup user step * Use isReskinned props from parent * Remove flicker of old user step UI when the treatment loads the user step * Refactor * Implement the new ExPlat JS client * Change shade of background white * Remove Experiment component that is now deprecated * Use the ProvideExperimentData component for fetching experiment assignment * 1. Remove commented out lines 2. Load experiment assignments while signup is loading * Remove commented line * Undo a few debugging changes * Setup experiment in ExPlat and prevent blue flicker for the treatment group * Remove blue flicker when the treatment loads signup user step * Use isReskinned props from parent * Remove flicker of old user step UI when the treatment loads the user step * Refactor * Implement the new ExPlat JS client * Change shade of background white * Remove Experiment component that is now deprecated * Use the ProvideExperimentData component for fetching experiment assignment * 1. Remove commented out lines 2. Load experiment assignments while signup is loading * Remove commented line * Undo a few debugging changes * Signup reskin: Add the side section for the domain step (#51499) * Add a side section to the domain step that has the free domain explainer and the use your domain link * Remove reskinned prop in freedomainexplainer component * Fix padding for the search input box * Disable eslint for click event error and fix a couple of eslint errors * Modify CSS to move the width restrictions further up the div hierarchy * Refactor: the strings for the sidebar are now stored in the component to make it more reusable * Some css tweaks * Signup reskin: Remove example suggestions and dropdown filters (#51504) * Remove example suggestions and dropdown filter * Add the tip icon; change the search icon color * CSS tweaks * CSS tweaks * New search icon for the input box * Fix error with SVG import * Move svg file to the main search component * Use the new search component * Signup reskin: Update UI for domain search results (#51524) * Modify UI for the featured domain results * More UI changes to the featured domains section * UI fixes to match with the Figma sketch * Change background color of show more tld filter * UI fix * Some alignment fixes * 1. Remove stray console log line 2. Show progress bar adjacent to the featured domain name only for the variant * Don't show the user your domain line in the search results, since we now show it in the sidebar * Wrap the div only for treatment, so that control remains unaffected * CSS tweaks * Refactor and consolidate * Signup reskin: Mobile tablet views (#51611) * WIP commit - mobile breakpoint CSS changes * Show the sidebar section below the tld filter bar for mobile view * More fixes for the mobile view * UI changes * More UI fixes for the mobile and tab views * Fix the subheader length * A few UI fixes * Show/hide the side bar content via CSS instead of using Calypso's viewport settings * Remove border bottom in iPad view * Fix header alignment * Show free domain explainer before search results are rendered in mobile view * CSS tweaks * CSS tweaks * Signup reskin: UI changes for the user step (#51648) * UI changes for the reskinned user step * Define disabled button colors * UI fix for the header section * Responsive web changed * CSS changes to tweak a few design related things; Refactored to bring all reskin related css changes in a single file * Fix alignment issues in smaller screen sizes * More CSS changes to bring the page closer to the design

…n mobile screen sizes in both control and treatment

a8ci18n · 2021-04-19T23:02:02Z

client/components/domains/domain-product-price/index.jsx

+	}
+
+	renderReskinDomainPrice() {
+		const priceText = this.props.translate( '%(cost)s/year', {


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 17 times:
translate( '%(cost)s /year' ) ES Score: 7

…elds, fill width in user step

a8ci18n · 2021-04-20T13:16:21Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/5736615

Thank you @niranjan-uma-shankar for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2021-04-30T15:28:21Z

Translation for this Pull Request has now been finished.

niranjan-uma-shankar self-assigned this Feb 26, 2021

niranjan-uma-shankar force-pushed the add/setup-reskin-explat branch from 1d8a546 to 204d1fb Compare March 1, 2021 07:43

niranjan-uma-shankar force-pushed the add/setup-reskin-explat branch from e3d7a0b to f355092 Compare March 23, 2021 20:56

niranjan-uma-shankar changed the title ~~Add/setup reskin explat~~ Signup reskin: Implement the new ExPlat client Mar 30, 2021

niranjan-uma-shankar marked this pull request as ready for review March 30, 2021 20:12

niranjan-uma-shankar requested review from a team and jessie-ross and removed request for a team March 30, 2021 20:12

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 30, 2021

niranjan-uma-shankar added the [Feature] Signup & Account Creation All screens and flows for making a new WordPress.com account. label Mar 30, 2021

niranjan-uma-shankar force-pushed the add/setup-reskin-explat branch from 29ea9ee to 75c94c0 Compare March 30, 2021 23:52

southp requested a review from taggon March 31, 2021 03:07

jessie-ross mentioned this pull request Mar 31, 2021

ExPlat: Have dangerouslyGetExperimentAssignment log rather than throw #51564

Merged

niranjan-uma-shankar force-pushed the add/setup-reskin-explat branch from 35af23b to 735e378 Compare March 31, 2021 10:51

jessie-ross reviewed Mar 31, 2021

View reviewed changes

niranjan-uma-shankar force-pushed the add/setup-reskin-explat branch from ee8457a to 42ba61d Compare April 2, 2021 15:29

This was referenced Apr 2, 2021

Signup reskin: Mobile tablet views #51611

Merged

Signup reskin: UI changes for the user step #51648

Merged

taggon approved these changes Apr 5, 2021

View reviewed changes

niranjan-uma-shankar and others added 13 commits April 20, 2021 02:45

Use the ProvideExperimentData component for fetching experiment assig…

c64d6cc

…nment

1. Remove commented out lines 2. Load experiment assignments while si…

9b970f2

…gnup is loading

Remove commented line

3efadb0

Undo a few debugging changes

ca682fc

A few design and style tweaks

5c405d3

ExPlat: Add isEligible check

28fca13

Remove unused getABTestVariation

9baafdd

Fix styles for the search filters, and fix a bug in the filter view i…

40b0c41

…n mobile screen sizes in both control and treatment

Show cross icon for missing feature in plans page

f4bf669

Plans step css tweaks

eaae6b6

CSS tweaks for the monthly plan toggle UI

6d1458d

reduce margin above monthly toggle

e7874d3

niranjan-uma-shankar force-pushed the add/setup-reskin-explat branch from 7a473fc to e7874d3 Compare April 19, 2021 22:46

Fix for tests

dcb56ac

a8ci18n reviewed Apr 19, 2021

View reviewed changes

niranjan-uma-shankar added 2 commits April 20, 2021 15:53

1. Make Start with Free to follow the link UI pattern 2. For input fi…

5d68fb6

…elds, fill width in user step

Fix processing screen

1c86e79

niranjan-uma-shankar merged commit 7d70737 into trunk Apr 20, 2021

niranjan-uma-shankar deleted the add/setup-reskin-explat branch April 20, 2021 12:15

github-actions bot removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Ready to Merge labels Apr 20, 2021

niranjan-uma-shankar restored the add/setup-reskin-explat branch April 20, 2021 14:16

This was referenced Apr 20, 2021

Reskin signup: Fix white flicker when clicking on create account button in user step #52132

Merged

Signup: White flicker on clicking "Create account" #52165

Closed

niranjan-uma-shankar mentioned this pull request Apr 30, 2021

Reskin signup: Restart experiment #52437

Merged

razvanpapadopol mentioned this pull request May 26, 2021

Signup: cleanup 'refined_reskin_v2' experiment #53197

Merged

jaswrks mentioned this pull request Aug 13, 2021

Fix password field in RTL locales, in signup. #55508

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Signup reskin: Integration PR #50512

Signup reskin: Integration PR #50512

niranjan-uma-shankar commented Feb 26, 2021 •

edited

Loading

matticbot commented Feb 26, 2021

matticbot commented Feb 26, 2021 •

edited

Loading

niranjan-uma-shankar commented Mar 30, 2021

jessie-ross commented Mar 31, 2021

jessie-ross commented Mar 31, 2021

jessie-ross Mar 31, 2021

niranjan-uma-shankar Mar 31, 2021

niranjan-uma-shankar Mar 31, 2021

jessie-ross commented Mar 31, 2021 •

edited

Loading

niranjan-uma-shankar commented Mar 31, 2021 •

edited

Loading

taggon left a comment

a8ci18n Apr 19, 2021

a8ci18n commented Apr 20, 2021

a8ci18n commented Apr 30, 2021

Signup reskin: Integration PR #50512

Signup reskin: Integration PR #50512

Conversation

niranjan-uma-shankar commented Feb 26, 2021 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Feb 26, 2021

matticbot commented Feb 26, 2021 • edited Loading

niranjan-uma-shankar commented Mar 30, 2021

jessie-ross commented Mar 31, 2021

jessie-ross commented Mar 31, 2021

jessie-ross Mar 31, 2021

Choose a reason for hiding this comment

niranjan-uma-shankar Mar 31, 2021

Choose a reason for hiding this comment

niranjan-uma-shankar Mar 31, 2021

Choose a reason for hiding this comment

jessie-ross commented Mar 31, 2021 • edited Loading

niranjan-uma-shankar commented Mar 31, 2021 • edited Loading

taggon left a comment

Choose a reason for hiding this comment

a8ci18n Apr 19, 2021

Choose a reason for hiding this comment

a8ci18n commented Apr 20, 2021

a8ci18n commented Apr 30, 2021

niranjan-uma-shankar commented Feb 26, 2021 •

edited

Loading

matticbot commented Feb 26, 2021 •

edited

Loading

jessie-ross commented Mar 31, 2021 •

edited

Loading

niranjan-uma-shankar commented Mar 31, 2021 •

edited

Loading