Jetpack Search: adapt post-checkout modals #40481

AnnaMag · 2020-03-26T14:34:38Z

Changes proposed in this Pull Request

Adapt a copy and redirects within the Thank you modal displayed in the post-checkout step of the Jetpack Search product purchase.

Testing instructions

go to /plans for a JP connected site on a non-Professional plan
purchase Jetpack Search, pass the checkout step
verify that the Thank you modal appears and the copy is correct
verify the redirects to the customizer and Jetpack dashboard within WP-Admin

Fixes #40434

Sequel: add tracking

matticbot · 2020-03-26T14:34:40Z

Test live: https://calypso.live/?branch=add/enable-thank-you-for-search

matticbot · 2020-03-26T14:48:26Z

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

Sections (~254 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
plans       +383 B  (+0.1%)     +254 B  (+0.2%)

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

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.

keoshi · 2020-03-26T16:19:56Z

@AnnaMag @gibrown Following up our quick call, let me know if the changes below make sense:

Welcome to Jetpack Search!

We are currently indexing the content on your site.

In the meantime, we have configured Jetpack Search on your site — you should try customizing it in your traditional WordPress dashboard.

[Customize Search now (link to the Customizer)] [Go back to my site (link to wp-admin/Jetpack)]

I'll also add these as suggestions on the code.

client/my-sites/plans/current-plan/current-plan-thank-you/search-thank-you.js

client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js

michelleweber · 2020-03-26T16:35:12Z

Welcome to Jetpack Search!

We're indexing the all content on your site.

In the meantime, we've configured some basic Jetpack Search settings on your site — head to your traditional WordPress dashboard to customize them.

[Customize Search now (link to the Customizer)] [Go back to my site (link to wp-admin/Jetpack)]

Question -- how do they know (or can they) when indexing is done? I'd be nice to tell them that here, if there's a notification or a screen they can check or something.

AnnaMag · 2020-03-26T16:58:21Z

@keoshi would you rather use the illustration from Automattic/jetpack#15074?

keoshi · 2020-03-26T17:00:12Z

@AnnaMag Nah, let's go with what we have here to highlight the moment of celebration. The other illustration is a bit bland, even if more relevant to the product.

keoshi · 2020-03-26T17:01:49Z

@michelleweber Glad you noticed that! :)

We did propose to have a different copy during the design phases:

We are currently indexing your site and will notify you when it is complete.

But it seems that this bit won't be ready for the launch phase. Pinging @gibrown for confirmation though.

Thank you again, Michelle!

client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js

gibrown · 2020-03-26T18:46:15Z

That copy sounds good and ya we can't currently tell them when indexing is complete (or rather we aren't tying that into this project).

gibrown · 2020-03-26T18:58:13Z

client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js

+							<Button
+								primary
+								compact={ true }
+								href="customize.php?autofocus[section]=jetpack_search"


Just a quick note here that this link doesn't work yet.

yes, it is in the making

gibrown · 2020-03-26T18:58:45Z

I gave this a quick test and it worked great other than the links.

AnnaMag · 2020-03-27T00:09:13Z

Ready for review @keoshi, @gibrown. Thank you

keoshi · 2020-03-27T13:43:57Z

purchase Jetpack Search, pass the checkout step

How can I do this step?

client/my-sites/plans/current-plan/current-plan-thank-you/search-thank-you.js

gibrown

Pushed a minor fix to have the customize link go to the jpsearch panel. Looks good and works well.

keoshi · 2020-03-27T15:52:24Z

YES! Thank you for that change, @gibrown !

keoshi

Couldn't test it, but the screenshot looks good. I just added a few suggestions based on a test I did with the existing thank you modal.

Any reason why we have to use is-compact buttons here? If not, then please see if my changes make sense.

client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js

client/my-sites/plans/current-plan/current-plan-thank-you/style.scss

AnnaMag · 2020-03-27T17:10:37Z

@keoshi good catch. Apologies for unclear test instructions!

I pushed the changes and retested. Looks great, thank you.

keoshi · 2020-03-27T17:18:01Z

No problem. Thank you!

🛳

gibrown · 2020-03-28T16:24:40Z

@AnnaMag @jsnmoon I think debugging this test failure is beyond my abilities. I already tried rerunning it, so I guess it is real. :)

jsnmoon · 2020-03-28T23:34:38Z

@gibrown Test failures have been fixed.

Search: add CTA buttons to the thank you modal and set the primary button

AnnaMag added [Status] In Progress [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. [Feature] Search Jetpack Search - A feature to speed up and improve the look of Search on your site. labels Mar 26, 2020

AnnaMag self-assigned this Mar 26, 2020

AnnaMag force-pushed the add/enable-thank-you-for-search branch from 8dc565b to 0805513 Compare March 26, 2020 14:36

AnnaMag force-pushed the add/enable-thank-you-for-search branch from 0805513 to a487576 Compare March 26, 2020 14:49

keoshi reviewed Mar 26, 2020

View reviewed changes

client/my-sites/plans/current-plan/current-plan-thank-you/search-thank-you.js Outdated Show resolved Hide resolved

keoshi reviewed Mar 26, 2020

View reviewed changes

client/my-sites/plans/current-plan/current-plan-thank-you/search-thank-you.js Outdated Show resolved Hide resolved

keoshi reviewed Mar 26, 2020

View reviewed changes

client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js Outdated Show resolved Hide resolved

keoshi reviewed Mar 26, 2020

View reviewed changes

client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js Outdated Show resolved Hide resolved

keoshi added the [Status] Needs Copy Review Add this when you'd like to get a review / feedback from the Editorial team on your PR label Mar 26, 2020

a8ci18n reviewed Mar 26, 2020

View reviewed changes

client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js Show resolved Hide resolved

gibrown reviewed Mar 26, 2020

View reviewed changes

gibrown removed the [Status] Needs Copy Review Add this when you'd like to get a review / feedback from the Editorial team on your PR label Mar 26, 2020

AnnaMag force-pushed the add/enable-thank-you-for-search branch from 6862c6d to 77934cd Compare March 27, 2020 00:05

AnnaMag added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR labels Mar 27, 2020

AnnaMag requested review from keoshi and jsnmoon March 27, 2020 00:10

AnnaMag removed the [Status] In Progress label Mar 27, 2020

AnnaMag force-pushed the add/enable-thank-you-for-search branch from 77934cd to 434c2ef Compare March 27, 2020 10:26

keoshi reviewed Mar 27, 2020

View reviewed changes

client/my-sites/plans/current-plan/current-plan-thank-you/search-thank-you.js Outdated Show resolved Hide resolved

gibrown approved these changes Mar 27, 2020

View reviewed changes

keoshi reviewed Mar 27, 2020

View reviewed changes

AnnaMag force-pushed the add/enable-thank-you-for-search branch from 1b0d920 to 1be9077 Compare March 27, 2020 17:01

AnnaMag added 8 commits March 29, 2020 13:25

Jetpack Search: add draft of the thank you note

3e23c93

Search: adapt the Thank You modal copy

be18e99

Search: add CTA buttons to the thank you modal and set the primary button

Search: remove mention of wp-admin redirect from the Thank you modal.

ee822cb

Search: adapt the copy of the modal

8102471

Component: add correct redirect links in the Thank you modal

edc6297

Correct button placement after adjusting the copy

a956594

styling and copy final touches

35c4a3f

Extend the customizer link with the relevant section.

6c4f5e6

AnnaMag force-pushed the add/enable-thank-you-for-search branch from c4d958e to 6c4f5e6 Compare March 29, 2020 11:25

AnnaMag merged commit 18ae060 into master Mar 29, 2020

AnnaMag deleted the add/enable-thank-you-for-search branch March 29, 2020 11:47

matticbot removed the [Status] Ready to Merge label Mar 29, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jetpack Search: adapt post-checkout modals #40481

Jetpack Search: adapt post-checkout modals #40481

AnnaMag commented Mar 26, 2020 •

edited

matticbot commented Mar 26, 2020

matticbot commented Mar 26, 2020 •

edited

keoshi commented Mar 26, 2020

michelleweber commented Mar 26, 2020 •

edited by gibrown

AnnaMag commented Mar 26, 2020 •

edited

keoshi commented Mar 26, 2020

keoshi commented Mar 26, 2020

gibrown commented Mar 26, 2020

gibrown Mar 26, 2020

AnnaMag Mar 26, 2020 •

edited

gibrown commented Mar 26, 2020

AnnaMag commented Mar 27, 2020 •

edited

keoshi commented Mar 27, 2020

gibrown left a comment

keoshi commented Mar 27, 2020

keoshi left a comment

AnnaMag commented Mar 27, 2020 •

edited

keoshi commented Mar 27, 2020

gibrown commented Mar 28, 2020

jsnmoon commented Mar 28, 2020

Jetpack Search: adapt post-checkout modals #40481

Jetpack Search: adapt post-checkout modals #40481

Conversation

AnnaMag commented Mar 26, 2020 • edited

Changes proposed in this Pull Request

Testing instructions

matticbot commented Mar 26, 2020

matticbot commented Mar 26, 2020 • edited

keoshi commented Mar 26, 2020

michelleweber commented Mar 26, 2020 • edited by gibrown

AnnaMag commented Mar 26, 2020 • edited

keoshi commented Mar 26, 2020

keoshi commented Mar 26, 2020

gibrown commented Mar 26, 2020

gibrown Mar 26, 2020

Choose a reason for hiding this comment

AnnaMag Mar 26, 2020 • edited

Choose a reason for hiding this comment

gibrown commented Mar 26, 2020

AnnaMag commented Mar 27, 2020 • edited

keoshi commented Mar 27, 2020

gibrown left a comment

Choose a reason for hiding this comment

keoshi commented Mar 27, 2020

keoshi left a comment

Choose a reason for hiding this comment

AnnaMag commented Mar 27, 2020 • edited

keoshi commented Mar 27, 2020

gibrown commented Mar 28, 2020

jsnmoon commented Mar 28, 2020

AnnaMag commented Mar 26, 2020 •

edited

matticbot commented Mar 26, 2020 •

edited

michelleweber commented Mar 26, 2020 •

edited by gibrown

AnnaMag commented Mar 26, 2020 •

edited

AnnaMag Mar 26, 2020 •

edited

AnnaMag commented Mar 27, 2020 •

edited

AnnaMag commented Mar 27, 2020 •

edited