Enable user to import a site that is not using WordPress as platform

[gabrielcaires]

Related to #94914

Proposed Changes

• Add other-platform-detected-import step to site-migration and migration flow
• Detect if site is not using WordPress as platform and redirect to the new step
• Refactor on 'useCredentialsForm` to simplify the code and accommodate the changes better.

Why are these changes being made?

• We have observed many users trying to migrate sites that are not using WordPress; this PR aims to capture them and redirect them to the correct step.

Testing Instructions

Scenario: Importing content

• Go to /setup/migration and follow the steps until you reach the credential step
• Fill the "Site address" field with a site that is using one of the platforms we support importing (You can see a list of platforms we are supporting here
• Check if you were redirected to the new step.
• Click on Import and check if you were redirected to the proper import screen based

Scenario: Importing content

• Go to /setup/migration and follow the steps until you reach the credential step
• Fill the "Site address" field with a site that is using one of the platforms we support importing (You can see a list of platforms we are supporting here
• Check if you were redirected to the new step.
• Click on "I need help"
• Check if you were redirected to the We'll take it from here! step

Note

We are planning to update the We'll take it from here! step to be more contextual by case, it will be done in further PRs.

Please test, the same scenarios are applicable to the /setup/site-migration flow

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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-stepper              +1386 B  (+0.1%)     +234 B  (+0.0%)
entry-main                  +738 B  (+0.0%)     +181 B  (+0.0%)
entry-login                 +738 B  (+0.0%)     +181 B  (+0.0%)
entry-domains-landing       +738 B  (+0.1%)     +181 B  (+0.1%)
entry-browsehappy           +738 B  (+0.4%)     +181 B  (+0.3%)
entry-subscriptions         +725 B  (+0.0%)     +174 B  (+0.0%)

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

Sections (~14104 bytes removed 📉 [gzipped])

name                           parsed_size            gzip_size
hosted-site-migration-flow        +16842 B  (+25.6%)    +5887 B  (+60.1%)
site-migration-flow               +16727 B  (+25.5%)    +5720 B  (+59.0%)
migration-flow                     +1325 B   (+1.8%)     +706 B   (+5.3%)
update-design-flow                  +435 B   (+0.0%)      +77 B   (+0.0%)
with-theme-assembler-flow           +413 B   (+0.6%)      +52 B   (+0.5%)
update-options-flow                 +413 B   (+0.8%)      +48 B   (+0.8%)
trial-wooexpress-flow               +413 B   (+0.7%)      +51 B   (+0.7%)
tailored-ecommerce-flow             +413 B   (+0.7%)      +53 B   (+0.8%)
readymade-template-flow             +413 B   (+0.3%)      +52 B   (+0.2%)
migration-signup                    +413 B   (+0.7%)      +51 B   (+0.6%)
free-post-setup-flow                +413 B   (+0.8%)      +50 B   (+0.9%)
free-flow                           +413 B   (+0.6%)      +51 B   (+0.4%)
entrepreneur-flow                   +413 B   (+0.3%)      +51 B   (+0.2%)
assembler-first-flow                +413 B   (+0.5%)      +53 B   (+0.4%)
ai-assembler-flow                   +413 B   (+0.5%)      +54 B   (+0.4%)
site-setup-wg                       +400 B   (+0.4%)      +46 B   (+0.2%)
site-setup-flow                     +400 B   (+0.4%)      +46 B   (+0.2%)
import-flow                         +400 B   (+0.6%)      +42 B   (+0.4%)
woocommerce-installation             +22 B   (+0.0%)      +14 B   (+0.0%)
theme                                +22 B   (+0.0%)      +14 B   (+0.0%)
stats                                +22 B   (+0.0%)      +13 B   (+0.0%)
staging-site                         +22 B   (+0.0%)      +13 B   (+0.0%)
site-purchases                       +22 B   (+0.0%)      +12 B   (+0.0%)
site-performance                     +22 B   (+0.0%)      +13 B   (+0.0%)
site-monitoring                      +22 B   (+0.0%)      +15 B   (+0.0%)
site-logs                            +22 B   (+0.0%)      +15 B   (+0.0%)
site-blocks                          +22 B   (+0.0%)      +14 B   (+0.0%)
settings-writing                     +22 B   (+0.0%)      +13 B   (+0.0%)
settings-podcast                     +22 B   (+0.0%)      +13 B   (+0.0%)
settings-performance                 +22 B   (+0.0%)       +8 B   (+0.0%)
settings-newsletter                  +22 B   (+0.0%)      +13 B   (+0.0%)
settings-discussion                  +22 B   (+0.0%)      +14 B   (+0.0%)
settings                             +22 B   (+0.0%)      +16 B   (+0.0%)
security                             +22 B   (+0.0%)      +14 B   (+0.0%)
purchases                            +22 B   (+0.0%)      +14 B   (+0.0%)
promote-post-i2                      +22 B   (+0.0%)      +14 B   (+0.0%)
privacy                              +22 B   (+0.0%)      +14 B   (+0.0%)
posts-custom                         +22 B   (+0.0%)      +14 B   (+0.0%)
posts                                +22 B   (+0.0%)      +14 B   (+0.0%)
plugins                              +22 B   (+0.0%)      +16 B   (+0.0%)
plans                                +22 B   (+0.0%)      +16 B   (+0.0%)
people                               +22 B   (+0.0%)      +16 B   (+0.0%)
pages                                +22 B   (+0.0%)      +13 B   (+0.0%)
notification-settings                +22 B   (+0.0%)      +14 B   (+0.0%)
media                                +22 B   (+0.0%)      +14 B   (+0.0%)
me                                   +22 B   (+0.0%)      +14 B   (+0.0%)
marketing                            +22 B   (+0.0%)      +14 B   (+0.0%)
link-in-bio-tld-flow                 +22 B   (+0.0%)      +16 B   (+0.0%)
jetpack-cloud-agency-sites-v2        +22 B   (+0.0%)      +19 B   (+0.0%)
jetpack-app                          +22 B   (+0.0%)      +16 B   (+0.0%)
hosting-features                     +22 B   (+0.0%)      +16 B   (+0.0%)
hosting                              +22 B   (+0.0%)      +13 B   (+0.0%)
home                                 +22 B   (+0.0%)      +13 B   (+0.0%)
help                                 +22 B   (+0.0%)      +14 B   (+0.0%)
github-deployments                   +22 B   (+0.0%)      +13 B   (+0.0%)
export                               +22 B   (+0.0%)      +16 B   (+0.0%)
email                                +22 B   (+0.0%)      +13 B   (+0.0%)
earn                                 +22 B   (+0.0%)      +13 B   (+0.0%)
developer                            +22 B   (+0.0%)      +14 B   (+0.0%)
comments                             +22 B   (+0.0%)      +14 B   (+0.0%)
checkout                             +22 B   (+0.0%)      +17 B   (+0.0%)
backup                               +22 B   (+0.0%)      +19 B   (+0.0%)
account-close                        +22 B   (+0.0%)      +14 B   (+0.0%)
account                              +22 B   (+0.0%)      +14 B   (+0.0%)
a8c-for-agencies-sites               +22 B   (+0.0%)      +19 B   (+0.0%)
reader                               -13 B   (-0.0%)       -7 B   (-0.0%)
jetpack-connect                      -13 B   (-0.0%)       -9 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 (~121 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected                                         +22 B  (+0.0%)      +16 B  (+0.0%)
async-load-signup-steps-plans                                                           +22 B  (+0.0%)      +16 B  (+0.0%)
async-load-signup-steps-page-picker                                                     +22 B  (+0.0%)      +17 B  (+0.0%)
async-load-purchase-modal-wrapper                                                       +22 B  (+0.0%)      +14 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +22 B  (+0.0%)      +14 B  (+0.0%)
async-load-design                                                                       +22 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal                                              +22 B  (+0.0%)      +17 B  (+0.0%)
async-load-calypso-layout-guided-tours-component                                        +22 B  (+0.0%)      +15 B  (+0.1%)
async-load-calypso-layout-command-palette                                               +22 B  (+0.0%)      +15 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                                         +22 B  (+0.0%)      +17 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.

[gabrielcaires]

It only runs the site analyzes when the platform is not available on the URL.

It is necessary because when the user uses the back button on some importing page, we lose the platform name.
So, instead of updating all importer options (WPCOM and WPorg), I just made the step analysis again.

[Imran92]

Hi @gabrielcaires ! Nice work on this. Most of the things works nicely.

However, I've left some optional comments on code and have noticed some hiccups in the following scenarios -

1. The back button doesn't work on the this page -

2. We are showing the platform name's index, not the user-friendly version, like 'squarespace' instead of 'Squarespace'. I think we should map them to the user-friendly name. Maybe we can reuse this?

3. If the platform is Wix, it doesn't take me to an importer, rather it shows a screen with a loader indicating import has already started, without me providing any backup file or anything like that-

[gabrielcaires]

If the platform is Wix, it doesn't take me to an importer, rather it shows a screen with a loader indicating import has already started, without me providing any backup file or anything like that-

I don't have the context, but it is intentional in all places we are running importers

wp-calypso/client/landing/stepper/declarative-flow/internals/steps-repository/import/helper.ts

Lines 34 to 38 in 23fdaae

	} else if ( platform === 'wix' && fromSite ) {
	importerUrl = addQueryArgs( importerUrl, {
	run: true,
	} );
	}

[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/other-step on your sandbox.

[gabrielcaires]

1. The back button doesn't work on the this page -

Fixed babdab4

We are showing the platform name's index, not the user-friendly version, like 'squarespace' instead of 'Squarespace'.

Fixed e333b6b

I also added support to show a different message when we can't identify the platform

[Imran92]

If the platform is Wix, it doesn't take me to an importer, rather it shows a screen with a loader indicating import has already started, without me providing any backup file or anything like that-

I don't have the context, but it is intentional in all places we are running importers

wp-calypso/client/landing/stepper/declarative-flow/internals/steps-repository/import/helper.ts

Lines 34 to 38 in 23fdaae

	} else if ( platform === 'wix' && fromSite ) {
	importerUrl = addQueryArgs( importerUrl, {
	run: true,
	} );
	}

That's interesting 🤔 Out of curiosity, I checked our importList step, and it actually doesn't have Wix in the list, so I think we don't actually allow importing Wix site during the flow intentionally, otherwise it'd have been in that list. Also, showing an infinite loading screen to a paid user doesn't sound very good to me. So just as we show the "I need help" button to users who are on "Unknown" platform, should we do the same for Wix as well instead of taking to the loader? So that the user at least has an action to perform and has a way to ask for help

cc: @fditrapani

Also, as per our discussion here (p1729052919758479/1728407315.083759-slack-C07G7FG6J8Y), can we send a request to the backend API with bypass_verification set to true to create the ticket before we move the user to the Mix-up step?