Refactor: move common import and importer modules to the blocks folder (

#63629)

* Refactor: move `import` module from 'signup' to 'blocks'

* Refactor: move `importer` module from 'signup' to 'blocks'

* Add readme files

client/blocks/import/README.md

@@ -0,0 +1,8 @@
+# IMPORT
+
+`import` is a block module that provides components for building import flow (ex. onboarding flow):
+
+- `capture` - capturing site for import from
+- `scanning` - scanning screen
+- `list` - list of available importers
+- `ready` - different variations of ready screens

client/blocks/importer/README.md

@@ -0,0 +1,22 @@
+# IMPORTER
+
+`importer` is a block module that provides all of our supported reskinned importers:
+
+- `blogger`
+- `medium`
+- `squarespace`
+- `wix`
+- `wordpress`
+
+There is also a list of additional components and hooks, such as:
+
+Components:
+- `complete-screen`
+- `done-button`
+- `error-message`
+- `getting-started-video`
+- etc.
+
+Hooks:
+- `use-checkout-url`
+- `use-signup-step-navigator`

client/signup/steps/import-from/components/importer-drag/index.tsx → client/blocks/importer/components/importer-drag/index.tsx

@@ -2,10 +2,10 @@ import classnames from 'classnames';
 import { includes } from 'lodash';
 import React from 'react';
 import { connect } from 'react-redux';
+import { UrlData } from 'calypso/blocks/import/types';
 import { ImporterConfig } from 'calypso/lib/importer/importer-config';
 import ErrorPane from 'calypso/my-sites/importer/error-pane';
 import ImporterHeader from 'calypso/my-sites/importer/importer-header';
-import { UrlData } from 'calypso/signup/steps/import/types';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { startImport } from 'calypso/state/imports/actions';
 import { appStates } from 'calypso/state/imports/constants';

client/signup/steps/import-from/components/importing-pane/importing-pane.tsx → client/blocks/importer/components/importing-pane/importing-pane.tsx

@@ -2,6 +2,7 @@ import { ProgressBar } from '@automattic/components';
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
 import { connect } from 'react-redux';
+import { UrlData } from 'calypso/blocks/import/types';
 import Spinner from 'calypso/components/spinner';
 import AuthorMappingPane from 'calypso/my-sites/importer/author-mapping-pane';
 import {
@@ -10,7 +11,6 @@ import {
 	ImportingPane as ImportingPaneBase,
 	resourcesRemaining,
 } from 'calypso/my-sites/importer/importing-pane';
-import { UrlData } from 'calypso/signup/steps/import/types';
 import { loadTrackingTool } from 'calypso/state/analytics/actions';
 import { mapAuthor, startImporting } from 'calypso/state/imports/actions';
 import './importing-pane.scss';

client/signup/steps/import-from/hooks/use-signup-step-navigator.ts → client/blocks/importer/hooks/use-signup-step-navigator.ts

@@ -1,9 +1,9 @@
 import page from 'page';
+import { getWpOrgImporterUrl } from 'calypso/blocks/import/util';
+import { useCheckoutUrl } from 'calypso/blocks/importer/hooks/use-checkout-url';
+import { StepNavigator } from 'calypso/blocks/importer/types';
+import { WPImportOption } from 'calypso/blocks/importer/wordpress/types';
 import { addQueryArgs } from 'calypso/lib/route';
-import { useCheckoutUrl } from 'calypso/signup/steps/import-from/hooks/use-checkout-url';
-import { StepNavigator } from 'calypso/signup/steps/import-from/types';
-import { WPImportOption } from 'calypso/signup/steps/import-from/wordpress/types';
-import { getWpOrgImporterUrl } from 'calypso/signup/steps/import/util';
 import { getStepUrl } from 'calypso/signup/utils';
 
 export function useSignupStepNavigator(

client/signup/steps/import-from/types.ts → client/blocks/importer/types.ts

@@ -1,4 +1,4 @@
-import { UrlData } from '../import/types';
+import { UrlData } from 'calypso/blocks/import/types';
 import type { SitesItem } from 'calypso/state/selectors/get-sites-items';
 
 export type Importer = 'blogger' | 'medium' | 'squarespace' | 'wix' | 'wordpress';

client/signup/steps/import-from/wordpress/import-content-only/index.tsx → client/blocks/importer/wordpress/import-content-only/index.tsx

@@ -2,16 +2,11 @@ import classnames from 'classnames';
 import { translate, TranslateOptions, TranslateOptionsText } from 'i18n-calypso';
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
+import { UrlData } from 'calypso/blocks/import/types';
+import { Importer, ImportJob, ImportJobParams, StepNavigator } from 'calypso/blocks/importer/types';
+import { getImporterTypeForEngine } from 'calypso/blocks/importer/util';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import importerConfig from 'calypso/lib/importer/importer-config';
-import {
-	Importer,
-	ImportJob,
-	ImportJobParams,
-	StepNavigator,
-} from 'calypso/signup/steps/import-from/types';
-import { getImporterTypeForEngine } from 'calypso/signup/steps/import-from/util';
-import { UrlData } from 'calypso/signup/steps/import/types';
 import { startImport, resetImport } from 'calypso/state/imports/actions';
 import { appStates } from 'calypso/state/imports/constants';
 import { importSite } from 'calypso/state/imports/site-importer/actions';

client/signup/steps/import-from/wordpress/import-everything/confirm.tsx → client/blocks/importer/wordpress/import-everything/confirm.tsx

@@ -4,9 +4,9 @@ import { Icon, check } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import classnames from 'classnames';
 import React, { useState } from 'react';
+import { UrlData } from 'calypso/blocks/import/types';
+import { convertToFriendlyWebsiteName } from 'calypso/blocks/import/util';
 import SiteIcon from 'calypso/blocks/site-icon';
-import { UrlData } from 'calypso/signup/steps/import/types';
-import { convertToFriendlyWebsiteName } from 'calypso/signup/steps/import/util';
 import ConfirmModal from './confirm-modal';
 import ConfirmUpgradePlan from './confirm-upgrade-plan';
 import type { SitesItem } from 'calypso/state/selectors/get-sites-items';

client/signup/steps/import-from/wordpress/import-everything/index.tsx → client/blocks/importer/wordpress/import-everything/index.tsx

@@ -10,7 +10,6 @@ import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
 import { EVERY_TEN_SECONDS, Interval } from 'calypso/lib/interval';
 import { SectionMigrate } from 'calypso/my-sites/migrate/section-migrate';
 import { isEligibleForProPlan } from 'calypso/my-sites/plans-comparison';
-import { StepNavigator } from 'calypso/signup/steps/import-from/types';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import { SitesItem } from 'calypso/state/selectors/get-sites-items';
@@ -23,6 +22,7 @@ import NotAuthorized from '../../components/not-authorized';
 import { isTargetSitePlanCompatible } from '../../util';
 import { MigrationStatus } from '../types';
 import { Confirm } from './confirm';
+import type { StepNavigator } from 'calypso/blocks/importer/types';
 
 interface Props {
 	sourceSiteId: number | null;

client/signup/steps/import-from/wordpress/index.tsx → client/blocks/importer/wordpress/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { convertToFriendlyWebsiteName } from 'calypso/blocks/import/util';
 import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
 import { addQueryArgs } from 'calypso/lib/route';
-import { convertToFriendlyWebsiteName } from 'calypso/signup/steps/import/util';
 import { getUrlData } from 'calypso/state/imports/url-analyzer/selectors';
 import { SitesItem } from 'calypso/state/selectors/get-sites-items';
 import isSiteAutomatedTransfer from 'calypso/state/selectors/is-site-automated-transfer';

client/landing/stepper/declarative-flow/internals/steps-repository/import-list/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import ListStep from 'calypso/blocks/import/list';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
-import ListStep from 'calypso/signup/steps/import/list';
 import { ImportWrapper } from '../import';
 import { generateStepPath } from '../import/helper';
 import './style.scss';

client/landing/stepper/declarative-flow/internals/steps-repository/import-list/style.scss

@@ -1 +1 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';

client/landing/stepper/declarative-flow/internals/steps-repository/import-ready-not/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { ReadyNotStep } from 'calypso/blocks/import/ready';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
-import { ReadyNotStep } from 'calypso/signup/steps/import/ready';
 import { ImportWrapper } from '../import';
 import { generateStepPath } from '../import/helper';
 import './style.scss';

client/landing/stepper/declarative-flow/internals/steps-repository/import-ready-not/style.scss

@@ -1 +1 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';

client/landing/stepper/declarative-flow/internals/steps-repository/import-ready-preview/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { ReadyPreviewStep } from 'calypso/blocks/import/ready';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
 import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
-import { ReadyPreviewStep } from 'calypso/signup/steps/import/ready';
 import { getUrlData } from 'calypso/state/imports/url-analyzer/selectors';
 import { ImportWrapper } from '../import';
 import { BASE_ROUTE } from '../import/config';

client/landing/stepper/declarative-flow/internals/steps-repository/import-ready-preview/style.scss

@@ -1 +1 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';

client/landing/stepper/declarative-flow/internals/steps-repository/import-ready-wpcom/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { ReadyAlreadyOnWPCOMStep } from 'calypso/blocks/import/ready';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
-import { ReadyAlreadyOnWPCOMStep } from 'calypso/signup/steps/import/ready';
 import { getUrlData } from 'calypso/state/imports/url-analyzer/selectors';
 import { ImportWrapper } from '../import';
 import { BASE_ROUTE } from '../import/config';

client/landing/stepper/declarative-flow/internals/steps-repository/import-ready-wpcom/style.scss

@@ -1 +1,2 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';
+

client/landing/stepper/declarative-flow/internals/steps-repository/import-ready/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { ReadyStep } from 'calypso/blocks/import/ready';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
 import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
-import { ReadyStep } from 'calypso/signup/steps/import/ready';
 import { getUrlData } from 'calypso/state/imports/url-analyzer/selectors';
 import { ImportWrapper } from '../import';
 import { BASE_ROUTE } from '../import/config';

client/landing/stepper/declarative-flow/internals/steps-repository/import-ready/style.scss

@@ -1 +1 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';

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

@@ -1,11 +1,11 @@
 import { isEnabled } from '@automattic/calypso-config';
 import { camelCase } from 'lodash';
-import { ImporterPlatform } from 'calypso/signup/steps/import/types';
+import { ImporterPlatform } from 'calypso/blocks/import/types';
 import {
 	getImporterUrl,
 	getWpComOnboardingUrl,
 	getWpOrgImporterUrl,
-} from 'calypso/signup/steps/import/util';
+} from 'calypso/blocks/import/util';
 import { BASE_ROUTE } from './config';
 import type { StepPath } from '../../steps-repository';
 

client/landing/stepper/declarative-flow/internals/steps-repository/import/index.tsx

@@ -2,10 +2,10 @@
 import { StepContainer } from '@automattic/onboarding';
 import { useI18n } from '@wordpress/react-i18n';
 import React, { ReactElement } from 'react';
+import CaptureStep from 'calypso/blocks/import/capture';
 import DocumentHead from 'calypso/components/data/document-head';
 import { useCurrentRoute } from 'calypso/landing/stepper/hooks/use-current-route';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
-import CaptureStep from 'calypso/signup/steps/import/capture';
 import { BASE_ROUTE } from './config';
 import { generateStepPath } from './helper';
 import type { Step } from '../../types';

client/landing/stepper/declarative-flow/internals/steps-repository/import/style.scss

@@ -1,4 +1,4 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';
 
 .site-setup.import {
 	.import__onboarding-page {

client/landing/stepper/declarative-flow/internals/steps-repository/importer-blogger/index.tsx

@@ -1,5 +1,5 @@
+import BloggerImporter from 'calypso/blocks/importer/blogger';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
-import BloggerImporter from 'calypso/signup/steps/import-from/blogger';
 import { withImporterWrapper } from '../importer';
 import './style.scss';
 

client/landing/stepper/declarative-flow/internals/steps-repository/importer-blogger/style.scss

@@ -1,2 +1,2 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';
 @import '../importer/style';

client/landing/stepper/declarative-flow/internals/steps-repository/importer-medium/index.tsx

@@ -1,5 +1,5 @@
+import MediumImporter from 'calypso/blocks/importer/medium';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
-import MediumImporter from 'calypso/signup/steps/import-from/medium';
 import { withImporterWrapper } from '../importer';
 import './style.scss';
 

client/landing/stepper/declarative-flow/internals/steps-repository/importer-medium/style.scss

@@ -1,2 +1,2 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';
 @import '../importer/style';

client/landing/stepper/declarative-flow/internals/steps-repository/importer-squarespace/index.tsx

@@ -1,5 +1,5 @@
+import SquarespaceImporter from 'calypso/blocks/importer/squarespace';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
-import SquarespaceImporter from 'calypso/signup/steps/import-from/squarespace';
 import { withImporterWrapper } from '../importer';
 import './style.scss';
 

client/landing/stepper/declarative-flow/internals/steps-repository/importer-squarespace/style.scss

@@ -1,2 +1,2 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';
 @import '../importer/style';

client/landing/stepper/declarative-flow/internals/steps-repository/importer-wix/index.tsx

@@ -1,5 +1,5 @@
+import WixImporter from 'calypso/blocks/importer/wix';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
-import WixImporter from 'calypso/signup/steps/import-from/wix';
 import { withImporterWrapper } from '../importer';
 import './style.scss';
 

client/landing/stepper/declarative-flow/internals/steps-repository/importer-wix/style.scss

@@ -1,2 +1,2 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';
 @import '../importer/style';

client/landing/stepper/declarative-flow/internals/steps-repository/importer-wordpress/index.tsx

@@ -1,5 +1,5 @@
+import WordpressImporter from 'calypso/blocks/importer/wordpress';
 import { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
-import WordpressImporter from 'calypso/signup/steps/import-from/wordpress';
 import { withImporterWrapper } from '../importer';
 import './style.scss';
 

client/landing/stepper/declarative-flow/internals/steps-repository/importer-wordpress/style.scss

@@ -1,4 +1,4 @@
-@import 'signup/steps/import/style/base';
+@import '~calypso/blocks/import/style/base';
 @import '../importer/style';
 
 .importer-wordpress .step-container__content {

client/landing/stepper/declarative-flow/internals/steps-repository/importer/hooks/use-step-navigator.ts

@@ -1,12 +1,12 @@
+import { getWpOrgImporterUrl } from 'calypso/blocks/import/util';
+import { useCheckoutUrl } from 'calypso/blocks/importer/hooks/use-checkout-url';
+import { WPImportOption } from 'calypso/blocks/importer/wordpress/types';
 import { addQueryArgs } from 'calypso/lib/route';
-import { useCheckoutUrl } from 'calypso/signup/steps/import-from/hooks/use-checkout-url';
-import { WPImportOption } from 'calypso/signup/steps/import-from/wordpress/types';
-import { getWpOrgImporterUrl } from 'calypso/signup/steps/import/util';
 import { StepPath } from '../../../steps-repository';
 import { BASE_STEPPER_ROUTE } from '../../import/config';
 import { removeLeadingSlash } from '../../import/util';
 import type { NavigationControls } from '../../../types';
-import type { StepNavigator } from 'calypso/signup/steps/import-from/types';
+import type { StepNavigator } from 'calypso/blocks/importer/types';
 
 export function useStepNavigator(
 	navigation: NavigationControls,

client/landing/stepper/declarative-flow/internals/steps-repository/importer/index.tsx

@@ -4,6 +4,10 @@ import { useI18n } from '@wordpress/react-i18n';
 import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import NotAuthorized from 'calypso/blocks/importer/components/not-authorized';
+import NotFound from 'calypso/blocks/importer/components/not-found';
+import { Importer, ImportJob } from 'calypso/blocks/importer/types';
+import { getImporterTypeForEngine } from 'calypso/blocks/importer/util';
 import DocumentHead from 'calypso/components/data/document-head';
 import QuerySites from 'calypso/components/data/query-sites';
 import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
@@ -12,10 +16,6 @@ import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { EVERY_FIVE_SECONDS, Interval } from 'calypso/lib/interval';
-import NotAuthorized from 'calypso/signup/steps/import-from/components/not-authorized';
-import NotFound from 'calypso/signup/steps/import-from/components/not-found';
-import { Importer, ImportJob } from 'calypso/signup/steps/import-from/types';
-import { getImporterTypeForEngine } from 'calypso/signup/steps/import-from/util';
 import { fetchImporterState, resetImport } from 'calypso/state/imports/actions';
 import { appStates } from 'calypso/state/imports/constants';
 import {

client/landing/stepper/declarative-flow/internals/steps-repository/importer/types.ts

@@ -1,8 +1,8 @@
-import BloggerImporter from 'calypso/signup/steps/import-from/blogger';
-import MediumImporter from 'calypso/signup/steps/import-from/medium';
-import SquarespaceImporter from 'calypso/signup/steps/import-from/squarespace';
-import WixImporter from 'calypso/signup/steps/import-from/wix';
-import WordpressImporter from 'calypso/signup/steps/import-from/wordpress';
+import BloggerImporter from 'calypso/blocks/importer/blogger';
+import MediumImporter from 'calypso/blocks/importer/medium';
+import SquarespaceImporter from 'calypso/blocks/importer/squarespace';
+import WixImporter from 'calypso/blocks/importer/wix';
+import WordpressImporter from 'calypso/blocks/importer/wordpress';
 
 export type ImporterCompType =
 	| typeof WixImporter

client/signup/steps/import-from/index.tsx

@@ -3,6 +3,16 @@ import classnames from 'classnames';
 import page from 'page';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import BloggerImporter from 'calypso/blocks/importer/blogger';
+import NotAuthorized from 'calypso/blocks/importer/components/not-authorized';
+import NotFound from 'calypso/blocks/importer/components/not-found';
+import { useSignupStepNavigator } from 'calypso/blocks/importer/hooks/use-signup-step-navigator';
+import MediumImporter from 'calypso/blocks/importer/medium';
+import SquarespaceImporter from 'calypso/blocks/importer/squarespace';
+import { Importer, ImportJob } from 'calypso/blocks/importer/types';
+import { getImporterTypeForEngine } from 'calypso/blocks/importer/util';
+import WixImporter from 'calypso/blocks/importer/wix';
+import WordpressImporter from 'calypso/blocks/importer/wordpress';
 import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
 import { EVERY_FIVE_SECONDS, Interval } from 'calypso/lib/interval';
 import StepWrapper from 'calypso/signup/step-wrapper';
@@ -18,16 +28,6 @@ import { getUrlData } from 'calypso/state/imports/url-analyzer/selectors';
 import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import { getSite, getSiteId } from 'calypso/state/sites/selectors';
-import BloggerImporter from './blogger';
-import NotAuthorized from './components/not-authorized';
-import NotFound from './components/not-found';
-import { useSignupStepNavigator } from './hooks/use-signup-step-navigator';
-import MediumImporter from './medium';
-import SquarespaceImporter from './squarespace';
-import { Importer, ImportJob } from './types';
-import { getImporterTypeForEngine } from './util';
-import WixImporter from './wix';
-import WordpressImporter from './wordpress';
 import type { SitesItem } from 'calypso/state/selectors/get-sites-items';
 import './style.scss';
 

client/signup/steps/import-from/style.scss

@@ -1,4 +1,4 @@
-@import '../import/style/base';
+@import '~calypso/blocks/import/style/base';
 
 .signup__step.is-importing {
 	.step-wrapper {