Replace connection success notice with a success modal (#10154)

Co-authored-by: Vlad Olaru <[email protected]>
Co-authored-by: Oleksandr Aratovskyi <[email protected]>

changelog/add-9936-connection-success-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Replace payments overview page connection success notice with a modal for live accounts.

client/globals.d.ts

@@ -122,6 +122,7 @@ declare global {
 		storeName: string;
 		isNextDepositNoticeDismissed: boolean;
 		isInstantDepositNoticeDismissed: boolean;
+		isConnectionSuccessModalDismissed: boolean;
 		userLocale: {
 			/**
 			 * The locale of the current user profile, represented as a locale code supported by transact-platform-server.

client/overview/index.js

@@ -15,7 +15,7 @@ import { dispatch } from '@wordpress/data';
 import AccountBalances from 'components/account-balances';
 import AccountStatus from 'components/account-status';
 import ActiveLoanSummary from 'components/active-loan-summary';
-import ConnectionSuccessNotice from './connection-sucess-notice';
+import ConnectionSuccessModal from './modal/connection-success';
 import DepositsOverview from 'components/deposits-overview';
 import ErrorBoundary from 'components/error-boundary';
 import FRTDiscoverabilityBanner from 'components/fraud-risk-tools-banner';
@@ -114,6 +114,12 @@ const OverviewPage = () => {
 		! progressiveOnboarding.isComplete;
 	const showTaskList =
 		! accountRejected && ! accountUnderReview && tasks.length > 0;
+	const isPoDisabledOrCompleted =
+		! progressiveOnboarding.isEnabled || progressiveOnboarding.isComplete;
+	const showConnectionSuccessModal =
+		showConnectionSuccess &&
+		! isTestModeOnboarding &&
+		isPoDisabledOrCompleted;
 
 	const activeAccountFees = Object.entries( wcpaySettings.accountFees )
 		.map( ( [ key, value ] ) => {
@@ -191,7 +197,6 @@ const OverviewPage = () => {
 				<FRTDiscoverabilityBanner />
 			</ErrorBoundary>
 
-			{ showConnectionSuccess && <ConnectionSuccessNotice /> }
 			{ ! accountRejected && ! accountUnderReview && (
 				<ErrorBoundary>
 					<Welcome />
@@ -248,6 +253,11 @@ const OverviewPage = () => {
 					<ProgressiveOnboardingEligibilityModal />
 				</ErrorBoundary>
 			) }
+			{ showConnectionSuccessModal && (
+				<ErrorBoundary>
+					<ConnectionSuccessModal />
+				</ErrorBoundary>
+			) }
 		</Page>
 	);
 };

client/overview/modal/connection-success/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { Modal, Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import strings from './strings';
+
+/**
+ * A modal component displayed when a live account is successfully connected.
+ */
+export const ConnectionSuccessModal = () => {
+	const [ isDismissed, setIsDismissed ] = React.useState(
+		wcpaySettings.isConnectionSuccessModalDismissed
+	);
+	const { updateOptions } = useDispatch( 'wc/admin/options' );
+
+	const onDismiss = async () => {
+		setIsDismissed( true );
+
+		// Update the option to mark the modal as dismissed.
+		await updateOptions( {
+			wcpay_connection_success_modal_dismissed: true,
+		} );
+	};
+
+	return (
+		<>
+			{ ! isDismissed && (
+				<Modal
+					title={ strings.heading }
+					className="woopayments-connection-success-modal"
+					isDismissible={ true }
+					onRequestClose={ onDismiss }
+				>
+					<div className="woopayments-connection-success-modal__content">
+						{ strings.description }
+					</div>
+					<div className="woopayments-connection-success-modal__actions">
+						<Button
+							variant="primary"
+							isBusy={ false }
+							disabled={ false }
+							onClick={ onDismiss }
+						>
+							{ strings.button }
+						</Button>
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+};
+
+export default ConnectionSuccessModal;

client/overview/modal/connection-success/strings.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable max-len */
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+export default {
+	button: __( 'Dismiss', 'woocommerce-payments' ),
+
+	heading: __( "You're ready to accept payments!", 'woocommerce-payments' ),
+
+	description: sprintf(
+		__(
+			'Great news — your %s account has been activated. You can now start accepting payments on your store.',
+			'woocommerce-payments'
+		),
+		'WooPayments'
+	),
+};

client/overview/modal/connection-success/style.scss

@@ -0,0 +1,42 @@
+.components-modal__frame.woopayments-connection-success-modal {
+	max-width: 512px;
+	@media screen and ( max-width: 782px ) {
+		max-width: 343px;
+		margin: auto;
+	}
+
+	.components-modal__header {
+		.components-button.has-icon {
+			padding: 0;
+			svg {
+				width: 30px;
+				height: 30px;
+			}
+		}
+
+		&-heading {
+			font-size: 20px;
+			line-height: 28px;
+			font-weight: 300;
+			text-wrap: auto;
+			color: $gray-900;
+		}
+	}
+
+	.woopayments-connection-success-modal__content {
+		display: flex;
+		gap: $gap-large;
+		flex-direction: column;
+		padding: $gap-small 0 $gap 0;
+		line-height: 20px;
+		font-weight: 400;
+		color: $gray-900;
+	}
+
+	.woopayments-connection-success-modal__actions {
+		flex-direction: row-reverse; // Use this to force items to start from end. That would require actions to be introduced in reverse order.
+		padding: $gap-large 0 0 0;
+		display: flex;
+		gap: $gap-small;
+	}
+}

client/overview/modal/connection-success/test/index.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import ConnectionSuccessModal from '../index';
+
+jest.mock( '@wordpress/data', () => ( {
+	useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ),
+} ) );
+
+declare const global: {
+	wcpaySettings: {
+		isConnectionSuccessModalDismissed: boolean;
+	};
+};
+
+describe( 'Connection Success Modal', () => {
+	global.wcpaySettings = {
+		isConnectionSuccessModalDismissed: false,
+	};
+
+	it( 'modal is open by default', () => {
+		render( <ConnectionSuccessModal /> );
+
+		const queryHeading = () =>
+			screen.queryByRole( 'heading', {
+				name: "You're ready to accept payments!",
+			} );
+
+		expect( queryHeading() ).toBeInTheDocument();
+	} );
+
+	it( 'closes modal when dismiss button is clicked', () => {
+		global.wcpaySettings = {
+			isConnectionSuccessModalDismissed: false,
+		};
+
+		render( <ConnectionSuccessModal /> );
+
+		user.click(
+			screen.getByRole( 'button', {
+				name: 'Dismiss',
+			} )
+		);
+
+		expect(
+			screen.queryByRole( 'heading', {
+				name: "You're ready to accept payments!",
+			} )
+		).not.toBeInTheDocument();
+	} );
+} );

client/overview/style.scss

@@ -39,48 +39,6 @@
 		margin: 24px 0;
 	}
 
-	.wcpay-connection-success {
-		position: relative;
-		text-align: center;
-		padding: $gap-large;
-
-		&__dropdown {
-			position: absolute;
-			top: $gap-large;
-			right: $gap-large;
-
-			.dashicons-ellipsis {
-				transform: rotate( 90deg );
-			}
-		}
-
-		.dashicons-button {
-			margin-right: 0;
-			display: none !important;
-		}
-
-		img {
-			max-height: 73px;
-			max-width: 100%;
-		}
-
-		h2 {
-			font-size: 20px;
-			font-weight: 400;
-			letter-spacing: 0.7px;
-			line-height: 28px;
-			margin-bottom: $gap-small;
-
-			@media ( min-width: 783px ) {
-				padding: 0 10%;
-			}
-		}
-
-		p {
-			color: $gray-700;
-		}
-	}
-
 	// Gutenberg compatibility adjustments. The component changed its classes and
 	// styling in @wordpress/components 19.11.0. We're currently using 11.1.5.
 	// To be removed when we upgrade this package.