Copy Site: Update design for Copying Progress step #72287

sejas · 2023-01-18T17:00:22Z

Proposed Changes

Redesign the Copying Progress step:

Accept props in ProcessingStep
Pass Title and Subtitle from the step builder

I didn't add the < Back to sites button.

Testing Instructions

Go to /sites
Click on the action menu on a business site
Click on Copy Site
After purchasing the plan, Observe the new Processing copy screen.

Screenshots

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 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-ajp-p2)?

Closes https://github.com/Automattic/dotcom-forge/issues/1480

github-actions · 2023-01-18T17:00:55Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-54440

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-54440&env=jetpack

matticbot · 2023-01-18T17:09:22Z

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

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

name           parsed_size           gzip_size
entry-stepper        +95 B  (+0.0%)      +26 B  (+0.0%)

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

Sections (~78 bytes added 📈 [gzipped])

name       parsed_size           gzip_size
copy-site       +160 B  (+0.1%)      +78 B  (+0.1%)

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.

danielbachhuber · 2023-01-18T20:38:49Z

I didn't add the < Back to sites button.

@sejas I'm not actually convinced this screen should have a 'Back' button:

'Back' almost implies you can exit out of the process.
Logically, 'Back' should take you to the checkout.
If we send the user to the Sites page, there's the chance they could experience some funkiness as the site copy undergoes transformations.

Maybe we should update the message to "This may take a few minutes. Feel free to close this window and we will email you when the process is complete"?

@javierarce What do you think?

sejas · 2023-01-18T20:41:59Z

I agree. The back button can also guide the user to the simple site while it migrates to atomic, which can lead to some edge cases for a few minutes.

sejas · 2023-01-18T20:46:58Z

Maybe we should update the message to "This may take a few minutes. Feel free to close this window and we will email you when the process is complete"?

I prefer the current message: This may take a few minutes. We’ll notify you by email when it’s done.. It actually doesn't take that long, and the user can access will be redirected to the site to start creating/developing.

danielbachhuber · 2023-01-18T20:50:54Z

It actually doesn't take that long

@sejas Have you tried with a 5 GB site yet? 😁

sejas · 2023-01-18T20:54:33Z

@sejas Have you tried with a 5 GB site yet? 😁

Updated the text and the screenshot 👍 .
83bf4ed

* Fix tracking specs against GB v14.8.x * Fix editor-tracking__other-block-events.ts * Fix specs/editor-tracking/editor-tracking__global-styles-events.ts * Remove accidental skip * More global styles tracking fixes * Remove "Details" popover test & related actions The "Details" popover doesn't exist since v14.5. See WordPress/gutenberg#44788 * Fix editor-tracking__toolbar-events.ts * Fix editor-tracking__document-actions-events.ts * Fix editor-tracking__fse-template-events.ts * Fix editor-tracking__pattern-events.ts * Fix padding setting in editor-tracking__global-styles-events.ts * Remove accidental page.close * Update block names for template conversion * Update template part deletion for new site editor * Move page closing to a dedicated step As per #71572 (comment) * Update test to match current theme (twenty-twenty-two) * Skip the whole block since currently tracking is not tested there * Redesign spec around 2022 theme Co-authored-by: dpasque <dan.speckhard.pasque@automattic.com>

* Fix pricing display for long prices * Update copy on comparison to be more clear on mobile

* Stats: Updating CSS for summary details and DRYing it * Stats: Fixing summary page header for small screens * Stats: Fixing header spacing for small screens

* add: Add domain step to copy site flow. * fix: Remove hack as we dont have to deal with eCommerce plans * update: Add domains to the flow progress * update: Update domains component text for copy flow Co-authored-by: Daniel Bachhuber <daniel.bachhuber@automattic.com>

* Update font family, size, weight, and colors for Woo * Fixed width for progress bar * Max width for progress bar

Remove handling of the error code `site_blacklisted`, as it's no longer being returned by WPCOM.

danielbachhuber

Looks great, @sejas ! Landing it so I can include it in my weekly update 😁

a8ci18n · 2023-01-19T00:17:55Z

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

Thank you @sejas for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2023-01-25T16:29:42Z

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

Thank you @sejas for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2023-02-10T12:30:19Z

Translation for this Pull Request has now been finished.

sejas added 3 commits January 18, 2023 16:38

Copy Site: add props to processing step

22bcab0

Copy Site: remove setProgressTitle from automated-copy

e6d97f5

Copy Site: modify vertical spacing on processing-copy

62ef380

sejas self-assigned this Jan 18, 2023

sejas added [Feature] Copy Site The copy site tool. [Feature] Tailored Onboarding Flows All onbaording flows targeted to a specific marketshare / audience. Stepper labels Jan 18, 2023

sejas mentioned this pull request Jan 18, 2023

Copy Site: Add domain step to copy site flow. #72206

Merged

7 tasks

Copy Site: update the subtitle message

83bf4ed

sejas marked this pull request as ready for review January 18, 2023 20:45

sejas added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 18, 2023

danielbachhuber changed the title ~~Update/copy site processing copy step~~ Copy Site: Update design for Copying Progress setp Jan 18, 2023

danielbachhuber changed the title ~~Copy Site: Update design for Copying Progress setp~~ Copy Site: Update design for Copying Progress step Jan 18, 2023

yashwin and others added 7 commits January 18, 2023 14:20

Enable Downtime Monitoring in all the ENVs (#72273)

416c4e0

Fix first month discount display comparison page (#72293)

88cb19b

* Fix pricing display for long prices * Update copy on comparison to be more clear on mobile

Stats: Updating page header for summary details (#71957)

8f01ce7

* Stats: Updating CSS for summary details and DRYing it * Stats: Fixing summary page header for small screens * Stats: Fixing header spacing for small screens

WooExpress: Update onboarding with Woo fonts and colors (#72283)

55878c2

* Update font family, size, weight, and colors for Woo * Fixed width for progress bar * Max width for progress bar

Jetpack Connection: remove the 'blacklisted' error (#72285)

d5e5e7d

Remove handling of the error code `site_blacklisted`, as it's no longer being returned by WPCOM.

danielbachhuber requested review from a team and worldomonation as code owners January 18, 2023 22:21

danielbachhuber removed the request for review from a team January 18, 2023 22:26

danielbachhuber removed the request for review from worldomonation January 18, 2023 22:26

Merge branch 'trunk' into update/copy-site-processing-copy-step

59550c9

danielbachhuber approved these changes Jan 18, 2023

View reviewed changes

danielbachhuber merged commit 9d53cbe into trunk Jan 18, 2023

danielbachhuber deleted the update/copy-site-processing-copy-step branch January 18, 2023 23:26

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 Jan 18, 2023

sejas mentioned this pull request Jan 19, 2023

Copy Site: Update the processing subtitle and text on processing-step #72324

Merged

7 tasks

ilyasfoo mentioned this pull request May 18, 2023

Task: Create a bank of 30 #FunWooFacts for use in Woo loading screens #75273

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Copy Site: Update design for Copying Progress step #72287

Copy Site: Update design for Copying Progress step #72287

sejas commented Jan 18, 2023 •

edited

github-actions bot commented Jan 18, 2023 •

edited by matticbot

matticbot commented Jan 18, 2023 •

edited

danielbachhuber commented Jan 18, 2023

sejas commented Jan 18, 2023

sejas commented Jan 18, 2023

danielbachhuber commented Jan 18, 2023

sejas commented Jan 18, 2023

danielbachhuber left a comment

a8ci18n commented Jan 19, 2023

a8ci18n commented Jan 25, 2023 •

edited

a8ci18n commented Feb 10, 2023

Copy Site: Update design for Copying Progress step #72287

Copy Site: Update design for Copying Progress step #72287

Conversation

sejas commented Jan 18, 2023 • edited

Proposed Changes

Testing Instructions

Screenshots

Pre-merge Checklist

github-actions bot commented Jan 18, 2023 • edited by matticbot

matticbot commented Jan 18, 2023 • edited

danielbachhuber commented Jan 18, 2023

sejas commented Jan 18, 2023

sejas commented Jan 18, 2023

danielbachhuber commented Jan 18, 2023

sejas commented Jan 18, 2023

danielbachhuber left a comment

Choose a reason for hiding this comment

a8ci18n commented Jan 19, 2023

a8ci18n commented Jan 25, 2023 • edited

a8ci18n commented Feb 10, 2023

sejas commented Jan 18, 2023 •

edited

github-actions bot commented Jan 18, 2023 •

edited by matticbot

matticbot commented Jan 18, 2023 •

edited

a8ci18n commented Jan 25, 2023 •

edited