Focused Launch: Add persistent success view after launch #47808

razvanpapadopol · 2020-11-26T18:51:21Z

Changes proposed in this Pull Request

There are two special cases after launching a site from the editor using Focused Launch:

the user completes a purchase (eg: Premium plan) and they get redirected to Thank you page
the user navigates away from the editor without dismissing the Success View by pressing one of the action buttons.

In these cases, when returning to the editor, Success View is displayed.

Testing instructions

Run the project locally

Make sure you're connected to your sandbox, and that your sandbox is clean and up to date
Check out the branch on your machine and run in two parallel terminal windows:
- yarn && yarn start
- cd apps/editing-toolkit && yarn dev --sync

Open the Focused Launch modal

Add a new, unlaunched site created with /start to your sandbox (for convenience, SITE_ID)
Visit calypso.localhost:3000/page/SITE_ID/home?flags=create/focused-launch-flow and click on the "Launch" button. The Focused Launch modal should appear.

Focused launch — selecting the free options

Follow instructions from the previous Run the project locally and Open the Focused Launch modal sections
Select free domain and plan and click "Launch your site" at the bottom
- The loading view and then Success view should appear.

Focused launch — selecting paid options, but exiting checkout without paying

Follow instructions from the previous Run the project locally and Open the Focused Launch modal sections
Select a paid domain and a paid plan
- The loading view and then checkout overlay should be displayed
Close the checkout overlay without completing the purchase
- The Success view should be shown, giving you the option to continue editing (no redirect)

Focused launch — selecting paid options, with successful payment

Follow instructions from the previous Run the project locally and Open the Focused Launch modal sections
Select a paid domain and a paid plan
- The loading view and then checkout overlay should be displayed
Complete the plan purchase
- You should be redirected to Thank you page (depending on the plan)
- After skipping the upsell you should be redirected back to block editor. The Focused Launch modal should open automatically and show the Success view (with some delay, as discussed in this comment)

Fixes #47392

(it fixes #47392 only partially, but it is the last spec left in that issue)

matticbot · 2020-11-26T18:51:23Z

Test live: https://calypso.live/?branch=update/focused-launch-persistent-success-view

matticbot · 2020-11-26T19:05:41Z

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

Async-loaded Components (~83 bytes added 📈 [gzipped])

name                                           parsed_size           gzip_size
async-load-calypso-blocks-editor-launch-modal        +31 B  (+0.0%)      +83 B  (+0.2%)

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.

razvanpapadopol · 2020-11-26T21:45:27Z

@ollierozdarz
Here is a demo of how this currently works: https://cloudup.com/cEGZnSLCDiP
Around the second 12, you'll see a sudden transition from editor to Success view. Is this fine, should we try to remove the transition or should we delay the Success view appearance with 1-2 seconds?

Another open point is when to use this behaviour:

only after a redirect to checkout thank you page (point 1 in description)
only in a certain time interval after site launch (eg: the following 5 minutes)

ollierozdarz · 2020-11-27T03:23:48Z

@razvanpapadopol I think we should try delay this by a couple of seconds (let's say 2 seconds) once a user enters the editor - that way it doesn't feel like a bug or so jarring. If we can add some CSS easing (ease-out) to the Thank you page/modal as well then it'll also take the edge off.

ciampo · 2020-12-01T13:27:52Z

It took a while, but I should have correctly rebased this branch on top of trunk, leaving only the actual changes that this PR makes in the diff.
While in the process, I also fixed the build issue by renaming a few instances of the hideSuccessView() that were missed in previous commits.

All checks should pass now — I'll start addressing the remaining feedback

ciampo · 2020-12-01T18:31:17Z

packages/launch/src/launch/index.tsx

@@ -35,6 +35,9 @@ const FocusedLaunchModal: React.FunctionComponent< Props > = ( {
 	const isModalTitleVisible = useSelect( ( select ) =>
 		select( LAUNCH_STORE ).isModalTitleVisible()
 	);
+	const shouldDisplaySuccessView = useSelect( ( select ) =>
+		select( LAUNCH_STORE ).shouldDisplaySuccessView()
+	);


More of a curiosity of mine, but I wonder if it'd be more efficient to select from the Launch Store only once:

const { isModalDismissible, isModalTitleVisible, shouldDisplaySuccessView } = useSelect( ( select ) => { const launchSelect = select( LAUNCH_STORE ); return { isModalDismissible: launchSelect.isModalDismissible(), isModalTitleVisible: launchSelect.isModalTitleVisible(), shouldDisplaySuccessView: launchSelect.shouldDisplaySuccessView(), }; } );

Ideally I think we should call useSelect only once in a component if the dependencies Array (second argument of useSelect) is the same and in this case is undefined.

Example with deps: https://github.com/Automattic/wp-calypso/blob/trunk/client/landing/gutenboarding/hooks/use-free-domain-suggestion.ts#L15-L26
Example with multiple stores accessed in one call: https://github.com/Automattic/wp-calypso/blob/trunk/apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/index.tsx#L47-L57

Added the change in 9fc3bc7

I'm not going to create a janitorial issue for this but let's keep in mind and use this pattern at least until we have something better from readability & performance PoV.

FYI @Automattic/luna

ciampo · 2020-12-01T18:40:54Z

I think we should try delay this by a couple of seconds (let's say 2 seconds) once a user enters the editor - that way it doesn't feel like a bug or so jarring.

This part should be addressed (needs to be reviewed / tested)

If we can add some CSS easing (ease-out) to the Thank you page/modal as well then it'll also take the edge off.

@ollierozdarz Just to make sure, what do you mean by "Thank you page/modal"?

ollierozdarz · 2020-12-01T21:17:13Z

Hey @ciampo, sorry, confusing wording 🙂 This is the page I'm talking about:

razvanpapadopol · 2020-12-02T08:33:51Z

packages/launch/src/focused-launch/index.tsx

+	// @TODO:
+	//   - if this is a block editor specific feature, move to the LaunchContext
+	//     and only specify when including Focused Launch thorugh Editing Toolkit
+	//   - think about a less hacky way to achieve this (e.g. @wordpress/hooks?)


Good catch! Let's move this to Editing Toolkit for now since this side effect is applied only inside the editor (hiding the Launch button).

Done in 1a7836f

Wonder if we should still add a janitorial issue to implement this functionality in a less hacky way? Adding a class to the body works for now but it's not very robust

Here it is 👉 #47988
It's not assigned to any milestone since this more a general [editor - launch] integration issue.

packages/data-stores/src/launch/selectors.ts

ciampo · 2020-12-02T15:17:33Z

Hey @ciampo, sorry, confusing wording 🙂 This is the page I'm talking about:

Tracked separately in #47962

matticbot · 2020-12-02T18:57:33Z

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

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

* Update isFocusedLaunchOpen to use shouldDisplaySuccessView * Use shouldDisplaySuccessView to render Success view as the initial route when opening Focused Launch * Dispatch hideSuccessView when interacting with action buttons on the Success view

…tSuccessView and disablePersistentSuccessView

…uccessView"

…sed Launch view

ciampo

The first round of feedback has been addressed. Probably better if someone who hasn't worked on this PR has a look too

yansern · 2020-12-03T12:34:02Z

Alright, all the test instructions have been tested and works as described.

Although I have to say, that upsell copy after making the purchase is rather tacky & wordy, it's a bit of a buzzkill after that whole sleek experience of launching a site.

yansern

The success view is truly persistent, even after refreshing the block editor, it shows up until user clicks on one of the buttons.

Code wise, in a nutshell, everything revolves around these 3 things:

shouldDisplaySuccessView
enablePersistentSuccessView
disablePersistentSuccessView

LGTM. Tested. Good to go.

rickybanister · 2020-12-03T15:04:26Z

@donlair should the interstitial offer above be shown during the launch flow as well as signup? Is it supposed to be seen after all checkout experiences? I agree that it deflates the launch flow a bit, but wanted to confirm the intention.

razvanpapadopol · 2021-01-06T09:46:14Z

@rickybanister we'll prevent any redirect from Focused Launch after completing checkout and display the Success View which was designed by @ollierozdarz exactly for this purpose. More details in #48081

razvanpapadopol added this to the Focused Launch: MVP milestone Nov 26, 2020

razvanpapadopol self-assigned this Nov 26, 2020

This was referenced Nov 26, 2020

Focused Launch: Add Launch your site button #47601

Merged

Focused Launch: "Launch your site" button #47392

Closed

razvanpapadopol force-pushed the add/focused-launch/launch-button branch from 696bbfd to d8decc5 Compare November 27, 2020 12:05

razvanpapadopol force-pushed the update/focused-launch-persistent-success-view branch from 91ec62b to b51e1b8 Compare November 27, 2020 14:08

razvanpapadopol added the [Status] In Progress label Nov 27, 2020

razvanpapadopol force-pushed the add/focused-launch/launch-button branch from d8decc5 to 8a7a404 Compare November 30, 2020 10:28

Base automatically changed from add/focused-launch/launch-button to trunk November 30, 2020 13:56

ciampo self-assigned this Dec 1, 2020

razvanpapadopol added the [Status] Needs Rebase label Dec 1, 2020

ciampo force-pushed the update/focused-launch-persistent-success-view branch from b51e1b8 to 3c435ce Compare December 1, 2020 13:22

ciampo removed the [Status] Needs Rebase label Dec 1, 2020

ciampo reviewed Dec 1, 2020

View reviewed changes

ciampo requested a review from tjcafferkey December 1, 2020 18:35

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

ciampo removed the [Status] In Progress label Dec 1, 2020

razvanpapadopol commented Dec 2, 2020

View reviewed changes

packages/data-stores/src/launch/selectors.ts Outdated Show resolved Hide resolved

ciampo mentioned this pull request Dec 2, 2020

Focused Launch: slide-out animation when modal is dismissed #47962

Open

1 task

razvanpapadopol force-pushed the update/focused-launch-persistent-success-view branch from d5b58b6 to 9fc3bc7 Compare December 2, 2020 19:05

razvanpapadopol mentioned this pull request Dec 3, 2020

Launch button in editor: improve integration #47988

Closed

Razvan Papadopol and others added 8 commits December 3, 2020 08:37

Rename actions that toggle displaying success view to enablePersisten…

26e32fb

…tSuccessView and disablePersistentSuccessView

Fix: rename all instances of "hideSuccessView" to "disablePersistentS…

7e75505

…uccessView"

Split unrelated Focused Launch useEffect hooks

f9e20b4

Delay modal enter animation when the Success view is the initial Focu…

92b82c7

…sed Launch view

Only inherit animation delay the custom delay is applied

eb79e7d

Move code to add 'is-focused-launch-complete' class to editing toolkit.

647154e

Remove unnecessary selectors and update components.

dcae170

razvanpapadopol force-pushed the update/focused-launch-persistent-success-view branch from 9fc3bc7 to dcae170 Compare December 3, 2020 06:38

razvanpapadopol requested review from a team and ciampo and removed request for ciampo December 3, 2020 06:43

ciampo reviewed Dec 3, 2020

View reviewed changes

yansern approved these changes Dec 3, 2020

View reviewed changes

razvanpapadopol merged commit 268ea23 into trunk Dec 3, 2020

razvanpapadopol deleted the update/focused-launch-persistent-success-view branch December 3, 2020 14:02

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

razvanpapadopol added the Launch label Dec 3, 2020

ciampo mentioned this pull request Dec 3, 2020

Editing Toolkit: Update to 2.8.11 #48018

Merged

razvanpapadopol mentioned this pull request Dec 7, 2020

Focus Launch: Should we launch with the free plan if user closes checkout modal? #47897

Closed

razvanpapadopol mentioned this pull request Feb 10, 2021

Focused Launch: Only launch site if checkout is complete #48452

Merged

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Focused Launch: Add persistent success view after launch #47808

Focused Launch: Add persistent success view after launch #47808

razvanpapadopol commented Nov 26, 2020 •

edited by yansern

Loading

matticbot commented Nov 26, 2020

matticbot commented Nov 26, 2020 •

edited

Loading

razvanpapadopol commented Nov 26, 2020

ollierozdarz commented Nov 27, 2020

ciampo commented Dec 1, 2020 •

edited

Loading

ciampo Dec 1, 2020

razvanpapadopol Dec 2, 2020

razvanpapadopol Dec 2, 2020

ciampo commented Dec 1, 2020

ollierozdarz commented Dec 1, 2020

razvanpapadopol Dec 2, 2020

razvanpapadopol Dec 2, 2020

ciampo Dec 2, 2020 •

edited

Loading

razvanpapadopol Dec 3, 2020

ciampo commented Dec 2, 2020 •

edited

Loading

matticbot commented Dec 2, 2020

ciampo left a comment

yansern commented Dec 3, 2020

yansern left a comment

rickybanister commented Dec 3, 2020

razvanpapadopol commented Jan 6, 2021

Focused Launch: Add persistent success view after launch #47808

Focused Launch: Add persistent success view after launch #47808

Conversation

razvanpapadopol commented Nov 26, 2020 • edited by yansern Loading

Changes proposed in this Pull Request

Testing instructions

Run the project locally

Open the Focused Launch modal

Focused launch — selecting the free options

Focused launch — selecting paid options, but exiting checkout without paying

Focused launch — selecting paid options, with successful payment

matticbot commented Nov 26, 2020

matticbot commented Nov 26, 2020 • edited Loading

razvanpapadopol commented Nov 26, 2020

ollierozdarz commented Nov 27, 2020

ciampo commented Dec 1, 2020 • edited Loading

ciampo Dec 1, 2020

Choose a reason for hiding this comment

razvanpapadopol Dec 2, 2020

Choose a reason for hiding this comment

razvanpapadopol Dec 2, 2020

Choose a reason for hiding this comment

ciampo commented Dec 1, 2020

ollierozdarz commented Dec 1, 2020

razvanpapadopol Dec 2, 2020

Choose a reason for hiding this comment

razvanpapadopol Dec 2, 2020

Choose a reason for hiding this comment

ciampo Dec 2, 2020 • edited Loading

Choose a reason for hiding this comment

razvanpapadopol Dec 3, 2020

Choose a reason for hiding this comment

ciampo commented Dec 2, 2020 • edited Loading

matticbot commented Dec 2, 2020

ciampo left a comment

Choose a reason for hiding this comment

yansern commented Dec 3, 2020

yansern left a comment

Choose a reason for hiding this comment

rickybanister commented Dec 3, 2020

razvanpapadopol commented Jan 6, 2021

razvanpapadopol commented Nov 26, 2020 •

edited by yansern

Loading

matticbot commented Nov 26, 2020 •

edited

Loading

ciampo commented Dec 1, 2020 •

edited

Loading

ciampo Dec 2, 2020 •

edited

Loading

ciampo commented Dec 2, 2020 •

edited

Loading