Imports: Add the UI for the Squarespace importer (#26609)

* Imports: Add the UI for the Squarespace importer

Although the Squarespace export is in WXR format so can be imported
using the WordPress importer, this sets up the UI so the import can be
identified as from Squarespace, and sets the stage for us to do further
preprocessing on the file.

* Rebase after importer header refactor

The `importer-header` component had a much needed refactor. This meant
that the Squarespace logo needed to be added to the options for importer
icons.

client/my-sites/importer/importer-logo.jsx

@@ -13,7 +13,7 @@ import SocialLogo from 'social-logos';
 import SiteImporterLogo from './site-importer/logo';
 
 const ImporterLogo = ( { icon } ) => {
-	if ( includes( [ 'wordpress', 'medium', 'blogger-alt' ], icon ) ) {
+	if ( includes( [ 'wordpress', 'medium', 'blogger-alt', 'squarespace' ], icon ) ) {
 		return <SocialLogo className="importer__service-icon" icon={ icon } size={ 48 } />;
 	}
 

client/my-sites/importer/importer-squarespace.jsx

@@ -0,0 +1,84 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { localize } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import FileImporter from './file-importer';
+import InlineSupportLink from 'components/inline-support-link';
+
+const importerName = 'Squarespace';
+
+class ImporterSquarespace extends React.PureComponent {
+	static displayName = 'ImporterSquarespace';
+
+	static propTypes = {
+		site: PropTypes.shape( {
+			title: PropTypes.string.isRequired,
+		} ).isRequired,
+		importerStatus: PropTypes.shape( {
+			filename: PropTypes.string,
+			importerState: PropTypes.string.isRequired,
+			errorData: PropTypes.shape( {
+				type: PropTypes.string.isRequired,
+				description: PropTypes.string.isRequired,
+			} ),
+			percentComplete: PropTypes.number,
+			siteTitle: PropTypes.string.isRequired,
+			statusMessage: PropTypes.string,
+		} ),
+	};
+
+	render() {
+		const importerData = {
+			title: importerName,
+			icon: 'squarespace',
+			description: this.props.translate(
+				'Import posts, pages, comments, tags, and images from a %(importerName)s export file.',
+				{
+					args: {
+						importerName,
+					},
+				}
+			),
+			uploadDescription: this.props.translate(
+				'To import content from a %(importerName)s site to ' +
+					'{{b}}%(siteTitle)s{{/b}}, upload your ' +
+					'{{b}}%(importerName)s export file{{/b}} here. ' +
+					"Don't have one, or don't know where to find one? " +
+					'Get step by step instructions in our {{inlineSupportLink/}}.',
+				{
+					args: {
+						importerName,
+						siteTitle: this.props.site.title,
+					},
+					components: {
+						b: <strong />,
+						inlineSupportLink: (
+							<InlineSupportLink
+								supportPostId={ 87696 }
+								supportLink={ 'https://en.support.wordpress.com/import/import-from-squarespace' }
+								text={ this.props.translate( '%(importerName)s import guide', {
+									args: {
+										importerName,
+									},
+								} ) }
+								showIcon={ false }
+							/>
+						),
+					},
+				}
+			),
+		};
+		return <FileImporter importerData={ importerData } { ...this.props } />;
+	}
+}
+
+export default localize( ImporterSquarespace );

client/my-sites/importer/style.scss

@@ -50,6 +50,9 @@
 	&.site-importer {
 		background-color: #faad4d;
 	}
+	&.squarespace {
+		background-color: #222;
+	}
 
 	@include breakpoint( '>960px' ) {
 		width: 56px;

client/my-sites/site-settings/section-import.jsx

@@ -22,8 +22,16 @@ import WordPressImporter from 'my-sites/importer/importer-wordpress';
 import MediumImporter from 'my-sites/importer/importer-medium';
 import BloggerImporter from 'my-sites/importer/importer-blogger';
 import SiteImporter from 'my-sites/importer/importer-site-importer';
+import SquarespaceImporter from 'my-sites/importer/importer-squarespace';
 import { fetchState } from 'lib/importer/actions';
-import { appStates, WORDPRESS, MEDIUM, BLOGGER, SITE_IMPORTER } from 'state/imports/constants';
+import {
+	appStates,
+	WORDPRESS,
+	MEDIUM,
+	BLOGGER,
+	SITE_IMPORTER,
+	SQUARESPACE,
+} from 'state/imports/constants';
 import EmailVerificationGate from 'components/email-verification/email-verification-gate';
 import { getSelectedSite, getSelectedSiteSlug } from 'state/ui/selectors';
 import Main from 'components/main';
@@ -58,6 +66,11 @@ const importers = [
 		isImporterEnabled: isEnabled( 'manage/import/site-importer' ),
 		component: SiteImporter,
 	},
+	{
+		type: SQUARESPACE,
+		isImporterEnabled: isEnabled( 'manage/import/squarespace' ),
+		component: SquarespaceImporter,
+	},
 ];
 
 const filterImportsForSite = ( siteID, imports ) => {

client/state/imports/constants.js

@@ -19,3 +19,4 @@ export const WORDPRESS = 'importer-type-wordpress';
 export const MEDIUM = 'importer-type-medium';
 export const BLOGGER = 'importer-type-blogger';
 export const SITE_IMPORTER = 'importer-type-site-importer';
+export const SQUARESPACE = 'importer-type-squarespace';

config/desktop-development.json

@@ -67,6 +67,7 @@
 		"manage/custom-post-types": true,
 		"manage/edit-user": true,
 		"manage/export/guided-transfer": true,
+		"manage/import/squarespace": false,
 		"manage/import/medium": true,
 		"manage/import/site-importer": true,
 		"manage/media": true,

config/desktop.json

@@ -54,6 +54,7 @@
 		"manage/customize": true,
 		"manage/edit-user": true,
 		"manage/import-in-sidebar": true,
+		"manage/import/squarespace": false,
 		"manage/import/medium": true,
 		"manage/import/site-importer": true,
 		"manage/media": true,

config/development.json

@@ -88,6 +88,7 @@
 		"manage/custom-post-types": true,
 		"manage/edit-user": true,
 		"manage/export/guided-transfer": true,
+		"manage/import/squarespace": true,
 		"manage/import/medium": true,
 		"manage/import/site-importer": true,
 		"manage/import-in-sidebar": true,

config/horizon.json

@@ -55,6 +55,7 @@
 		"manage/edit-user": true,
 		"manage/export/guided-transfer": true,
 		"manage/import-in-sidebar": true,
+		"manage/import/squarespace": false,
 		"manage/import/medium": true,
 		"manage/import/site-importer": true,
 		"manage/media": true,

config/production.json

@@ -58,6 +58,7 @@
 		"manage/customize": true,
 		"manage/edit-user": true,
 		"manage/import-in-sidebar": true,
+		"manage/import/squarespace": false,
 		"manage/import/medium": true,
 		"manage/import/site-importer": true,
 		"manage/media": true,

config/stage.json

@@ -60,6 +60,7 @@
 		"manage/customize": true,
 		"manage/edit-user": true,
 		"manage/import-in-sidebar": true,
+		"manage/import/squarespace": false,
 		"manage/import/medium": true,
 		"manage/import/site-importer": true,
 		"manage/media": true,

config/test.json

@@ -50,6 +50,7 @@
 		"keyboard-shortcuts": true,
 		"manage/customize": true,
 		"manage/edit-user": true,
+		"manage/import/squarespace": false,
 		"manage/import/medium": true,
 		"manage/import/site-importer": true,
 		"manage/media": true,

config/wpcalypso.json

@@ -68,6 +68,7 @@
 		"manage/edit-user": true,
 		"manage/export/guided-transfer": true,
 		"manage/import-in-sidebar": true,
+		"manage/import/squarespace": false,
 		"manage/import/medium": true,
 		"manage/import/site-importer": true,
 		"manage/media": true,