Integrate Account Management component into the Settings Page (#10287)

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/settings/account-management/index.tsx

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { Card, CardBody } from '@wordpress/components';
+import {
+	ConnectAccountManagement,
+	ConnectComponentsProvider,
+} from '@stripe/react-connect-js';
+
+/**
+ * Internal dependencies
+ */
+import StripeSpinner from 'wcpay/components/stripe-spinner';
+import BannerNotice from 'wcpay/components/banner-notice';
+import appearance from 'wcpay/utils/embedded-components/appearance';
+import useAccountSession from 'wcpay/utils/embedded-components/account-session';
+import './style.scss';
+
+const AccountManagement = () => {
+	const [ loadErrorMessage, setLoadErrorMessage ] = useState( '' );
+	const [ loading, setLoading ] = useState( true );
+	const stripeConnectInstance = useAccountSession( {
+		setLoadErrorMessage,
+		appearance,
+	} );
+
+	return (
+		<>
+			<Card>
+				<CardBody>
+					{ loading && (
+						<div className="account-management-loader-wrapper">
+							<StripeSpinner />
+						</div>
+					) }
+					{ loadErrorMessage ? (
+						<BannerNotice status="error">
+							{ loadErrorMessage }
+						</BannerNotice>
+					) : (
+						stripeConnectInstance && (
+							<ConnectComponentsProvider
+								connectInstance={ stripeConnectInstance }
+							>
+								<ConnectAccountManagement
+									onLoaderStart={ () => setLoading( false ) }
+									onLoadError={ ( loadError ) =>
+										setLoadErrorMessage(
+											loadError.error.message ||
+												'Unknown error'
+										)
+									}
+									collectionOptions={ {
+										fields: 'eventually_due',
+										futureRequirements: 'include',
+									} }
+								/>
+							</ConnectComponentsProvider>
+						)
+					) }
+				</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';
@@ -102,6 +103,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 (
 		<>
@@ -143,7 +158,6 @@ const SettingsManager = () => {
 	const [ isTransactionInputsValid, setTransactionInputsValid ] = useState(
 		true
 	);
-
 	const { isLoading } = useSettings();
 
 	useLayoutEffect( () => {
@@ -211,6 +225,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"