Gutenboarding: FSE launch store and flow #43983

razvanpapadopol · 2020-07-08T10:26:31Z

Changes proposed in this Pull Request

Add launch store and use it FSE launch flow.
When pressing Launch site button:
- if a paid plan is active => launch the site and redirect to /home.
- if a free plan is active => the launch modal with launch steps opens.
When completing the launch flow (selecting a domain and a plan):
- if a free plan has been selected => launch the site => redirect to /home.
- if a paid plan has been selected => launch the site => redirect to /checkout => redirect to /home.

Testing instructions

Setup

Add define( 'A8C_FSE_SITE_LAUNCH_ENABLE', true ); to ./config/sandbox.php.
Run yarn dev --sync on your local apps\full-site-editing folder.

Scenario 1

Go to wordpress.com/new and complete the flow by choosing and purchasing a paid plan (not eCommerce).
Sandbox the new site and press Launch site button in wp-admin => Launch screen => redirect to /home.

Scenario 2

Go to wordpress.com/new and complete the flow by choosing Free plan.
Sandbox the new site and press Launch site button in wp-admin.
Complete the flow by choosing a domain and the Free plan => Launch screen => redirect to /home.

Scenario 3

Same as scenario 2 but this time choose a paid plan during launch flow => Launch screen => redirect to /checkout => redirect to /home when completing purchase or abandoning cart.

Follow up

Add error handling for site creation
Update / add unit tests for @data-stores/site
Extract cart services from @data-stores/site into a dedicated cart data-store
Add site launch animation
Check if there are cart items and decide how to use those (eg: paid domain)

Fixes part of #43750

- Use only explicitly declared props - Connect to launch store - Add onSelect prop to advance when selecting an option - Use matching store keys and remove any store registration

- add useSite and useOnLaunch hooks - add onSubmit prop to Launch and call it when reaching last step - add isLaunching state to launch-button - add isLaunching prop to launch-modal and use it to render launching animation and custom title

matticbot · 2020-07-08T10:26:33Z

Test live: https://calypso.live/?branch=add/fse-launch-store

matticbot · 2020-07-08T10:29:19Z

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

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

name                 parsed_size           gzip_size
entry-gutenboarding       +832 B  (+0.0%)     +147 B  (+0.0%)

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

Sections (~52 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
checkout           +53 B  (+0.0%)      +26 B  (+0.0%)
woocommerce        +24 B  (+0.0%)      +12 B  (+0.0%)
purchases          +24 B  (+0.0%)      +14 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 (~8 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks        +24 B  (+0.0%)       +8 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.

matticbot · 2020-07-08T10:35:37Z

Caution: This PR affects files in the FSE Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D46096-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing in the FSE Plugin for more info: PCYsg-ly5-p2

a8ci18n · 2020-07-08T10:43:05Z

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-button/index.tsx

+					aria-haspopup="menu"
+					onClick={ handleClick }
+				>
+					{ __( 'Launch site', 'full-site-editing' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 23 times:
translate( 'Launch site' ) ES Score: 13

- add temporary getCart and setCart action to @data-stores/site - handle cart setting and redirect to checkout in useOnLaunch hook

… Gutenboarding launch flow

alshakero

Reviewed the code. All LGTM! Testing now.

alshakero · 2020-07-09T09:24:53Z

apps/full-site-editing/full-site-editing-plugin/common/data-stores/launch/index.ts

+import reducer, { State } from './reducer';
+import * as actions from './actions';
+import * as selectors from './selectors';
+import persistOptions from './persist';


This has been discussed before, this adds a lot of code and only to limit the persistence duration to 1 week. If you want it like that, that's cool. If not, removing this, and use would be cleaner IMO.

alshakero · 2020-07-09T09:33:53Z

...ite-editing/full-site-editing-plugin/editor-domain-picker/src/domain-picker-button/index.tsx

@@ -24,7 +26,9 @@ export default function DomainPickerButton() {
 				aria-pressed={ isDomainModalVisible }
 				onClick={ () => setDomainModalVisibility( ( s ) => ! s ) }
 			>
-				<span className="domain-picker-button__label">{ `Domain: ${ currentDomain.domain_name }` }</span>
+				<span className="domain-picker-button__label">{ `Domain: ${
+					domain?.domain_name || freeDomain


Nit: optional chaining goes nicely with null coalescing

Suggested change

domain?.domain_name || freeDomain

domain?.domain_name ?? freeDomain

alshakero

Tested every scenario and all work as stated. 🚢

Razvan Papadopol added 6 commits July 8, 2020 12:46

Add @wordpress/data-controls dependency to FSE

0adc515

update eventProperties arg to be optional in recordTracksEvent fn

ae0dc01

add launchSite action and launchStatus state to site data-store

87d00b8

Add and register launch store to FSE data-stores

242ec45

Update domain-picker-fse and plans-grid-fse.

9faeda3

- Use only explicitly declared props - Connect to launch store - Add onSelect prop to advance when selecting an option - Use matching store keys and remove any store registration

razvanpapadopol added Launch [Goal] New Onboarding previously called Gutenboarding labels Jul 8, 2020

razvanpapadopol requested a review from a team July 8, 2020 10:26

razvanpapadopol self-assigned this Jul 8, 2020

a8ci18n reviewed Jul 8, 2020

View reviewed changes

Razvan Papadopol added 3 commits July 8, 2020 14:00

Cleanup resetPlan action from @data-stores/plans

60779a9

Enable paid launch flow in wp-admin.

f9e57a7

- add temporary getCart and setCart action to @data-stores/site - handle cart setting and redirect to checkout in useOnLaunch hook

Change redirect from checkout to /home after launch.

60249d3

razvanpapadopol added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 8, 2020

yansern mentioned this pull request Jul 8, 2020

[EPIC] Step-by-step Launch: missing features #43750

Open

41 tasks

Razvan Papadopol added 3 commits July 8, 2020 15:58

remove privacy step from launch flow

630dc5a

Change location in top frame and not in iframe when redirecting.

2866912

Update checkout redirect when emptying cart to redirect to /home from…

23818f6

… Gutenboarding launch flow

alshakero reviewed Jul 9, 2020

View reviewed changes

alshakero approved these changes Jul 9, 2020

View reviewed changes

yansern merged commit 48442e6 into master Jul 10, 2020

yansern deleted the add/fse-launch-store branch July 10, 2020 09:41

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 10, 2020

deBhal mentioned this pull request Jul 13, 2020

Update FSE plugin to version to 1.13 #44125

Merged

31 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenboarding: FSE launch store and flow #43983

Gutenboarding: FSE launch store and flow #43983

razvanpapadopol commented Jul 8, 2020 •

edited

Loading

matticbot commented Jul 8, 2020

matticbot commented Jul 8, 2020 •

edited

Loading

matticbot commented Jul 8, 2020

a8ci18n Jul 8, 2020

alshakero left a comment

alshakero Jul 9, 2020

alshakero Jul 9, 2020

alshakero left a comment

	domain?.domain_name \|\| freeDomain
	domain?.domain_name ?? freeDomain

Gutenboarding: FSE launch store and flow #43983

Gutenboarding: FSE launch store and flow #43983

Conversation

razvanpapadopol commented Jul 8, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

Follow up

matticbot commented Jul 8, 2020

matticbot commented Jul 8, 2020 • edited Loading

matticbot commented Jul 8, 2020

a8ci18n Jul 8, 2020

Choose a reason for hiding this comment

alshakero left a comment

Choose a reason for hiding this comment

alshakero Jul 9, 2020

Choose a reason for hiding this comment

alshakero Jul 9, 2020

Choose a reason for hiding this comment

alshakero left a comment

Choose a reason for hiding this comment

razvanpapadopol commented Jul 8, 2020 •

edited

Loading

matticbot commented Jul 8, 2020 •

edited

Loading