Add connect.js library and embedded onboarding integration (#9251)

Co-authored-by: oaratovskyi <oleksandr.aratovskyi@automattic.com> Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com> Co-authored-by: Vlad Olaru <vlad@pixelgrade.com>
Automattic · Sep 6, 2024 · 1b17a55 · 1b17a55
1 parent f65efc5
commit 1b17a55
Show file tree

Hide file tree

Showing 30 changed files with 1,489 additions and 190 deletions.
diff --git a/changelog/dev-include-connect-js b/changelog/dev-include-connect-js
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added Embdedded KYC, currently behind feature flag.
diff --git a/client/globals.d.ts b/client/globals.d.ts
@@ -16,6 +16,7 @@ declare global {
 			paymentTimeline: boolean;
 			isDisputeIssuerEvidenceEnabled: boolean;
 			isPaymentOverviewWidgetEnabled?: boolean;
+			isEmbeddedKycEnabled?: boolean;
 		};
 		fraudServices: unknown[];
 		testMode: boolean;

diff --git a/client/index.js b/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,26 @@ addFilter(
 			capability: 'manage_woocommerce',
 		} );
 
+		// Currently under feature flag.
+		if (
+			wcpaySettings &&
+			wcpaySettings.featureFlags.isEmbeddedKycEnabled
+		) {
+			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',

diff --git a/client/onboarding/index.tsx b/client/onboarding/index.tsx
@@ -13,11 +13,12 @@ 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';
+import LoadingStep from 'wcpay/onboarding/steps/loading';
 
 const OnboardingStepper = () => {
 	const handleExit = () => {
@@ -47,7 +48,13 @@ const OnboardingStepper = () => {
 					<StoreDetails />
 				</OnboardingForm>
 			</Step>
-			<LoadingStep name="loading" />
+			{ wcpaySettings?.featureFlags?.isEmbeddedKycEnabled ? (
+				<Step name="embedded" showHeading={ false }>
+					<EmbeddedKyc />
+				</Step>
+			) : (
+				<LoadingStep name={ 'loading' } />
+			) }
 		</Stepper>
 	);
 };

diff --git a/client/onboarding/kyc/appearance.ts b/client/onboarding/kyc/appearance.ts
@@ -0,0 +1,62 @@
+/* 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:
+			"-apple-system, BlinkMacSystemFont, 'system-ui', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Roboto', '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',
+	},
+};
diff --git a/client/onboarding/kyc/index.tsx b/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;
diff --git a/client/onboarding/step.tsx b/client/onboarding/step.tsx
@@ -17,9 +17,10 @@ import './style.scss';
 
 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,7 +37,9 @@ const Step: React.FC< Props > = ( { name, children } ) => {
 			<div className="stepper__nav">
 				<button
 					type="button"
-					className="stepper__nav-button"
+					className={ `stepper__nav-button ${
+						name === 'embedded' ? 'hide' : ''
+					}` }
 					onClick={ prevStep }
 				>
 					<ChevronLeft />
@@ -56,12 +59,16 @@ const Step: React.FC< Props > = ( { name, children } ) => {
 				</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>
 		</>