Integrate Account Management component into the Settings Page

changelog/add-9129-account-management-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add the Stripe embedded account management component into the Payments → Settings page.

client/embedded-components/index.tsx

@@ -9,6 +9,7 @@ import {
 	StripeConnectInstance,
 } from '@stripe/connect-js';
 import {
+	ConnectAccountManagement,
 	ConnectAccountOnboarding,
 	ConnectComponentsProvider,
 	ConnectNotificationBanner,
@@ -228,3 +229,46 @@ export const EmbeddedConnectNotificationBanner: React.FC< EmbeddedAccountNotific
 		</>
 	);
 };
+
+/**
+ * Embedded Stripe Account Management Component.
+ *
+ * @param onLoaderStart - Callback when Stripe component starts rendering.
+ * @param onLoadError - Callback when Stripe component load error occurs.
+ *
+ * @return Rendered Account Management component.
+ */
+export const EmbeddedAccountManagement: React.FC< EmbeddedComponentProps > = ( {
+	onLoaderStart,
+	onLoadError,
+} ) => {
+	const { stripeConnectInstance, initializationError } = useInitializeStripe(
+		false,
+		null,
+		false
+	);
+
+	return (
+		<>
+			{ initializationError && (
+				<BannerNotice status="error">
+					{ initializationError }
+				</BannerNotice>
+			) }
+			{ stripeConnectInstance && (
+				<ConnectComponentsProvider
+					connectInstance={ stripeConnectInstance }
+				>
+					<ConnectAccountManagement
+						onLoaderStart={ onLoaderStart }
+						onLoadError={ onLoadError }
+						collectionOptions={ {
+							fields: 'eventually_due',
+							futureRequirements: 'include',
+						} }
+					/>
+				</ConnectComponentsProvider>
+			) }
+		</>
+	);
+};

client/settings/account-management/index.tsx

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { Card, CardBody } from '@wordpress/components';
+import { LoadError } from '@stripe/connect-js';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import BannerNotice from 'wcpay/components/banner-notice';
+import StripeSpinner from 'wcpay/components/stripe-spinner';
+import { EmbeddedAccountManagement } from 'wcpay/embedded-components';
+
+const AccountManagement = () => {
+	const [ loading, setLoading ] = useState( true );
+	const [ loadError, setLoadError ] = useState< LoadError | null >( null );
+
+	const handleLoadError = ( err: LoadError ) => {
+		setLoadError( err );
+	};
+
+	return (
+		<>
+			<Card>
+				<CardBody>
+					{ loading && (
+						<div className="account-management-loader-wrapper">
+							<StripeSpinner />
+						</div>
+					) }
+					{ loadError &&
+						( loadError.error.type === 'invalid_request_error' ? (
+							<BannerNotice
+								icon={ true }
+								status="warning"
+								isDismissible={ false }
+								actions={ [
+									{
+										label: 'Learn more',
+										variant: 'primary',
+										url:
+											'https://woocommerce.com/document/woopayments/startup-guide/#requirements',
+										urlTarget: '_blank',
+									},
+								] }
+							>
+								{ __(
+									'Account management through our financial partner requires HTTPS and cannot be completed.',
+									'woocommerce-payments'
+								) }
+							</BannerNotice>
+						) : (
+							<BannerNotice
+								status="error"
+								isDismissible={ false }
+							>
+								{ loadError.error.message }
+							</BannerNotice>
+						) ) }
+					<EmbeddedAccountManagement
+						onLoaderStart={ () => setLoading( false ) }
+						onLoadError={ handleLoadError }
+					></EmbeddedAccountManagement>
+				</CardBody>
+			</Card>
+		</>
+	);
+};
+
+export default AccountManagement;

client/settings/account-management/style.scss

@@ -0,0 +1,6 @@
+// Wrap loader so it's centered and does not get cut.
+.account-management-loader-wrapper {
+	text-align: center;
+	height: 35px;
+	padding: 20px 0;
+}

client/settings/settings-manager/index.js

@@ -18,6 +18,7 @@ import SettingsLayout from '../settings-layout';
 import SaveSettingsSection from '../save-settings-section';
 import Transactions from '../transactions';
 import Deposits from '../deposits';
+import AccountManagement from '../account-management';
 import LoadableSettingsSection from '../loadable-settings-section';
 import PaymentMethodsSection from '../payment-methods-section';
 import BuyNowPayLaterSection from '../buy-now-pay-later-section';
@@ -103,6 +104,20 @@ const DepositsDescription = () => {
 	);
 };
 
+const AccountDetailsDescription = () => {
+	return (
+		<>
+			<h2>{ __( 'Account details', 'woocommerce-payments' ) }</h2>
+			<p>
+				{ __(
+					'View and edit your WooPayments account details like personal or business information and public information.',
+					'woocommerce-payments'
+				) }
+			</p>
+		</>
+	);
+};
+
 const FraudProtectionDescription = () => {
 	return (
 		<>
@@ -218,6 +233,16 @@ const SettingsManager = () => {
 					</LoadableSettingsSection>
 				</SettingsSection>
 			</DuplicatedPaymentMethodsContext.Provider>
+			<SettingsSection
+				description={ AccountDetailsDescription }
+				id="account-details"
+			>
+				<LoadableSettingsSection numLines={ 20 }>
+					<ErrorBoundary>
+						<AccountManagement />
+					</ErrorBoundary>
+				</LoadableSettingsSection>
+			</SettingsSection>
 			<SettingsSection
 				description={ TransactionsDescription }
 				id="transactions"