A4A > Migrations: Add steps for WordPress.com & Pressable self migration tool.

[yashwin]

Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1488

Proposed Changes

This PR:

• Adds the self migration steps for WordPress.com.
• Adds the self migration steps for Pressable.
• Adds contact form support for newly added pages
• Adds event tracking for the buttons
• Fixes a typo
• Makes an update to the tool to fold the card when a step is marked as done or already completed.

Why are these changes being made?

• To add steps for WordPress.com & Pressable self migration tool.

Testing Instructions

1) Open the A4A live link. 2) Go to the /migrations/overview page > Click the Migrate your site dropdown button 3) Select the Self migrate to WordPress.com option > Verify that the steps are matching as per the design(link in the issue). Also, verify that the cards fold when they are marked as done and opens when reset. Clicking on the contact us button on the page heading should open the contact us modal with the appropriate product selected. 4) Repeat step 2 > Verify the same for Self migrate to Pressabel option.

@madebynoam: Please check if the mobile view ok.

Mixed state:

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

[github-actions[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-125043&env=a8c-for-agencies

[matticbot]

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

Sections (~1398 bytes added 📈 [gzipped])

``` name parsed_size gzip_size a8c-for-agencies-migrations +5776 B (+0.6%) +1338 B (+0.5%) staging-site +34 B (+0.0%) +11 B (+0.0%) sites-dashboard +34 B (+0.0%) +11 B (+0.0%) site-tools +34 B (+0.0%) +11 B (+0.0%) site-settings +34 B (+0.0%) +11 B (+0.0%) site-performance +34 B (+0.0%) +11 B (+0.0%) site-monitoring +34 B (+0.0%) +11 B (+0.0%) site-marketing +34 B (+0.0%) +11 B (+0.0%) site-logs +34 B (+0.0%) +11 B (+0.0%) hosting-features +34 B (+0.0%) +11 B (+0.0%) hosting +34 B (+0.0%) +11 B (+0.0%) github-deployments +34 B (+0.0%) +11 B (+0.0%) a8c-for-agencies-team +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies-sites +34 B (+0.0%) +11 B (+0.0%) a8c-for-agencies-settings +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies-referrals +34 B (+0.0%) +11 B (+0.0%) a8c-for-agencies-purchases +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies-plugins +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies-partner-directory +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies-overview +34 B (+0.0%) +13 B (+0.0%) a8c-for-agencies-marketplace +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies-landing +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies-client +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies-agency-tier +34 B (+0.0%) +12 B (+0.0%) a8c-for-agencies +34 B (+0.0%) +12 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.

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.

[yashwin]

About my previous comment about the Go to Markertplace button, the same happens with the Tag your site and Add my bank information.

Other than that, it will LGTM!

Thanks for the review, @cleacos!c

Good catch.I missed committing some changes. It is fixed now: https://github.com/Automattic/wp-calypso/pull/96525/commits/d47db9841b3c74becda4dbdbe56f9e394a8c0740

Could you please take another look?

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/self-migration-tool-steps on your sandbox.

[madebynoam]

Looking good @yashwin, I'll add notes as I go:

Can we add 16px top padding to a4a-layout__body-wrapper. So that we get the usual 32px top padding.

[madebynoam]

Can we change the left padding on foldable-card__content to 72px so that it's aligned with the title?

[madebynoam]

Would also be a bit nicer to set the top padding on that one to 0:

[madebynoam]

For mobile, I'd recommend we stick to consistent button layout, stacked looks good to me: Also if we could bump the title down one size on mobile that would help.

[yashwin]

Thanks for the review, @madebynoam!

I have made all the changes you have suggested!

[a8ci18n]

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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