Design updates for Embedded Components

changelog/dev-include-connect-js

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Change redirect to Stripe KYC to the embedded Stripe component

changelog/update-9357-continue-onboarding-links-in-embedded-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update onboarding links to use embedded onboarding component

client/index.js

@@ -29,6 +29,7 @@ import CapitalPage from 'capital';
 import OverviewPage from 'overview';
 import DocumentsPage from 'documents';
 import OnboardingPage from 'onboarding';
+import OnboardingKycPage from 'onboarding/kyc';
 import FraudProtectionAdvancedSettingsPage from './settings/fraud-protection/advanced-settings';
 import { getTasks } from 'overview/task-list/tasks';
 
@@ -69,6 +70,20 @@ addFilter(
 			capability: 'manage_woocommerce',
 		} );
 
+		pages.push( {
+			container: OnboardingKycPage,
+			path: '/payments/onboarding/kyc',
+			wpOpenMenu: menuID,
+			breadcrumbs: [
+				rootLink,
+				__( 'Continue onboarding', 'woocommerce-payments' ),
+			],
+			navArgs: {
+				id: 'wc-payments-continue-onboarding',
+			},
+			capability: 'manage_woocommerce',
+		} );
+
 		pages.push( {
 			container: OverviewPage,
 			path: '/payments/overview',

client/onboarding/index.tsx

@@ -13,8 +13,8 @@ import { getMccFromIndustry } from 'onboarding/utils';
 import { OnboardingForm } from './form';
 import Step from './step';
 import BusinessDetails from './steps/business-details';
+import EmbeddedKyc from './steps/embedded-kyc';
 import StoreDetails from './steps/store-details';
-import LoadingStep from './steps/loading';
 import { trackStarted } from './tracking';
 import { getAdminUrl } from 'wcpay/utils';
 import './style.scss';
@@ -47,7 +47,9 @@ const OnboardingStepper = () => {
 					<StoreDetails />
 				</OnboardingForm>
 			</Step>
-			<LoadingStep name="loading" />
+			<Step name="embedded" showHeading={ false }>
+				<EmbeddedKyc />
+			</Step>
 		</Stepper>
 	);
 };

client/onboarding/kyc/appearance.ts

@@ -0,0 +1,61 @@
+/* eslint-disable max-len */
+
+/**
+ * Customised appearance variables for the external KYC flow.
+ */
+export default {
+	variables: {
+		colorPrimary: '#3C2861',
+		colorBackground: '#FFFFFF',
+		buttonPrimaryColorBackground: '#3858E9',
+		buttonPrimaryColorBorder: '#3858E9',
+		buttonPrimaryColorText: '#FFFFFF',
+		buttonSecondaryColorBackground: '#FFFFFF',
+		buttonSecondaryColorBorder: '#3858E9',
+		buttonSecondaryColorText: '#3858E9',
+		colorText: '#101517',
+		colorSecondaryText: '#50575E',
+		actionPrimaryColorText: '#3858E9',
+		actionSecondaryColorText: '#101517',
+		colorBorder: '#DDDDDD',
+		formHighlightColorBorder: '#3858E9',
+		formAccentColor: '#3858E9',
+		colorDanger: '#CC1818',
+		offsetBackgroundColor: '#F0F0F0',
+		formBackgroundColor: '#FFFFFF',
+		badgeNeutralColorText: '#2C3338',
+		badgeNeutralColorBackground: '#F6F7F7',
+		badgeNeutralColorBorder: '#F6F7F7',
+		badgeSuccessColorText: '#005C12',
+		badgeSuccessColorBackground: '#EDFAEF',
+		badgeSuccessColorBorder: '#EDFAEF',
+		badgeWarningColorText: '#614200',
+		badgeWarningColorBackground: '#FCF9E8',
+		badgeWarningColorBorder: '#FCF9E8',
+		badgeDangerColorText: '#8A2424',
+		badgeDangerColorBackground: '#FCF0F1',
+		badgeDangerColorBorder: '#FCF0F1',
+		borderRadius: '2px',
+		buttonBorderRadius: '2px',
+		formBorderRadius: '2px',
+		badgeBorderRadius: '2px',
+		overlayBorderRadius: '8px',
+		spacingUnit: '10px',
+		fontFamily: 'SF Pro Text, Helvetica, Arial, sans-serif',
+		fontSizeBase: '16px',
+		headingXlFontSize: '32px',
+		headingXlFontWeight: '400',
+		headingLgFontSize: '24px',
+		headingLgFontWeight: '400',
+		headingMdFontSize: '20px',
+		headingMdFontWeight: '400',
+		headingSmFontSize: '16px',
+		headingSmFontWeight: '600',
+		headingXsFontSize: '12px',
+		headingXsFontWeight: '600',
+		bodyMdFontWeight: '400',
+		bodyMdFontSize: '16px',
+		bodySmFontSize: '14px',
+		bodySmFontWeight: '400',
+	},
+};

client/onboarding/kyc/index.tsx

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import React, { useEffect } from 'react';
+import { closeSmall, Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Logo from 'assets/images/woopayments.svg';
+import Page from 'components/page';
+import { OnboardingContextProvider } from 'onboarding/context';
+import EmbeddedKyc from 'onboarding/steps/embedded-kyc';
+import strings from 'onboarding/strings';
+import { getConnectUrl } from 'utils';
+
+const OnboardingKycPage: React.FC = () => {
+	const handleExit = () => {
+		const urlParams = new URLSearchParams( window.location.search );
+
+		window.location.href = getConnectUrl(
+			{
+				source:
+					urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) ||
+					'unknown',
+			},
+			'WCPAY_ONBOARDING_KYC'
+		);
+	};
+
+	useEffect( () => {
+		// Remove loading class and add those required for full screen.
+		document.body.classList.remove( 'woocommerce-admin-is-loading' );
+		document.body.classList.add( 'woocommerce-admin-full-screen' );
+		document.body.classList.add( 'is-wp-toolbar-disabled' );
+		document.body.classList.add( 'wcpay-onboarding__body' );
+
+		// Remove full screen classes on unmount.
+		return () => {
+			document.body.classList.remove( 'woocommerce-admin-full-screen' );
+			document.body.classList.remove( 'is-wp-toolbar-disabled' );
+			document.body.classList.remove( 'wcpay-onboarding__body' );
+		};
+	}, [] );
+	return (
+		<Page className="wcpay-onboarding-prototype">
+			<OnboardingContextProvider>
+				<div className="stepper__nav">
+					<button
+						type="button"
+						className={ `stepper__nav-button hide` }
+					>
+						{ strings.back }
+					</button>
+					<img
+						src={ Logo }
+						alt="WooPayments"
+						className="stepper__nav-logo"
+					/>
+					<button
+						type="button"
+						className="stepper__nav-button"
+						onClick={ handleExit }
+					>
+						<Icon icon={ closeSmall } />
+					</button>
+				</div>
+				<div className="stepper__wrapper">
+					<div className="stepper__content">
+						<EmbeddedKyc continueKyc={ true } />
+					</div>
+				</div>
+			</OnboardingContextProvider>
+		</Page>
+	);
+};
+export default OnboardingKycPage;

client/onboarding/step.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import React from 'react';
-import { Icon, closeSmall } from '@wordpress/icons';
 import ChevronLeft from 'gridicons/dist/chevron-left';
 
 /**
@@ -12,14 +11,16 @@
 import { OnboardingSteps } from './types';
 import { useTrackAbandoned } from './tracking';
 import strings from './strings';
-import Logo from 'assets/images/woopayments.svg';
+import WooLogo from 'assets/images/woo-logo.svg';
 import './style.scss';
+import { Button } from '@wordpress/components';
 
 interface Props {
 	name: OnboardingSteps;
+	showHeading?: boolean;
 }
 
-const Step: React.FC< Props > = ( { name, children } ) => {
+const Step: React.FC< Props > = ( { name, children, showHeading = true } ) => {
 	const { trackAbandoned } = useTrackAbandoned();
 	const { prevStep, exit } = useStepperContext();
 	const handleExit = () => {
@@ -36,32 +37,34 @@
 			<div className="stepper__nav">
 				<button
 					type="button"
-					className="stepper__nav-button"
+					className={ `stepper__nav-button ${
+						name === 'embedded' ? 'hide' : ''
+					}` }
 					onClick={ prevStep }
 				>
 					<ChevronLeft />
 					{ strings.back }
 				</button>
-				<img
-					src={ Logo }
-					alt="WooPayments"
-					className="stepper__nav-logo"
-				/>
+				<img src={ WooLogo } alt="Woo" className="stepper__nav-logo" />
 				<button
 					type="button"
 					className="stepper__nav-button"
 					onClick={ handleExit }
 				>
-					<Icon icon={ closeSmall } />
+					{ strings.cancel }
 				</button>
 			</div>
 			<div className="stepper__wrapper">
-				<h1 className="stepper__heading">
-					{ strings.steps[ name ].heading }
-				</h1>
-				<h2 className="stepper__subheading">
-					{ strings.steps[ name ].subheading }
-				</h2>
+				{ showHeading && (
+					<>
+						<h1 className="stepper__heading">
+							{ strings.steps[ name ].heading }
+						</h1>
+						<h2 className="stepper__subheading">
+							{ strings.steps[ name ].subheading }
+						</h2>
+					</>
+				) }
 				<div className="stepper__content">{ children }</div>
 			</div>
 		</>