feat: BNPL April announcement (#8605)

Co-authored-by: Samir Merchant <[email protected]>
Co-authored-by: Brett Shumaker <[email protected]>

changelog/feat-bnpl-announcement-apr

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+feat: BNPL April announcement.

client/bnpl-announcement/index.js

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { __ } from '@wordpress/i18n';
+import { Button, ExternalLink } from '@wordpress/components';
+import { recordEvent } from 'tracks';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import ConfirmationModal from 'wcpay/components/confirmation-modal';
+import AfterpayBanner from 'assets/images/bnpl_announcement_afterpay.png?asset';
+import ClearpayBanner from 'assets/images/bnpl_announcement_clearpay.png?asset';
+
+const BannerIcon =
+	window.wcpayBnplAnnouncement?.accountCountry === 'GB'
+		? ClearpayBanner
+		: AfterpayBanner;
+
+const Dialog = () => {
+	useEffect( () => {
+		recordEvent( 'wcpay_bnpl_april15_feature_announcement_view' );
+	}, [] );
+
+	const [ isHidden, setIsHidden ] = useState( false );
+
+	if ( isHidden ) return null;
+
+	return (
+		<ConfirmationModal
+			aria={ { labelledby: 'wcpay-bnpl-announcement' } }
+			className="wcpay-bnpl-announcement"
+			onRequestClose={ () => setIsHidden( true ) }
+			actions={
+				<>
+					<ExternalLink
+						onClick={ () => {
+							recordEvent(
+								'wcpay_bnpl_april15_feature_announcement_learn_click'
+							);
+							setIsHidden( true );
+						} }
+						href="https://woo.com/document/woopayments/payment-methods/buy-now-pay-later/"
+					>
+						{ __( 'Learn more', 'woocommerce-payments' ) }
+					</ExternalLink>
+					<Button
+						variant="primary"
+						onClick={ () => {
+							recordEvent(
+								'wcpay_bnpl_april15_feature_announcement_enable_click'
+							);
+							setIsHidden( true );
+						} }
+					>
+						{ __( 'Get started', 'woocommerce-payments' ) }
+					</Button>
+				</>
+			}
+		>
+			<div className="wcpay-bnpl-announcement__payment-icons">
+				<img
+					src={ BannerIcon }
+					alt={ __(
+						'Buy now, pay later is here',
+						'woocommerce-payments'
+					) }
+				></img>
+			</div>
+			<h1 id="wcpay-bnpl-announcement">
+				{ __( 'Buy now, pay later is here', 'woocommerce-payments' ) }
+			</h1>
+			<p>
+				{ __(
+					// eslint-disable-next-line max-len
+					'Boost conversions and give your shoppers additional buying power, with buy now, pay later — now available in your WooPayments dashboard.*',
+					'woocommerce-payments'
+				) }
+			</p>
+			<p className="wcpay-bnpl-announcement__fine-print">
+				{ __(
+					'*Subject to country availability',
+					'woocommerce-payments'
+				) }
+			</p>
+		</ConfirmationModal>
+	);
+};
+
+const container = document.getElementById( 'wpwrap' );
+if ( container ) {
+	const dialogWrapper = document.createElement( 'div' );
+	container.appendChild( dialogWrapper );
+
+	ReactDOM.createRoot( dialogWrapper ).render( <Dialog /> );
+}

client/bnpl-announcement/style.scss

@@ -0,0 +1,68 @@
+.wcpay-bnpl-announcement {
+	&.wcpay-confirmation-modal.wcpay-confirmation-modal {
+		margin-top: auto;
+		height: auto;
+
+		@media screen and ( min-width: 600px ) {
+			max-width: 400px;
+		}
+
+		.components-modal__header {
+			padding: 0;
+
+			.components-button.has-icon {
+				position: absolute;
+				top: 18px;
+				left: auto;
+				right: 18px;
+			}
+		}
+
+		.components-modal__content {
+			padding: 0 20px 100px;
+			margin-top: 60px;
+
+			@media screen and ( min-width: 600px ) {
+				padding: 0 35px 24px;
+			}
+		}
+
+		.wcpay-confirmation-modal__separator {
+			opacity: 0;
+		}
+	}
+
+	&__payment-icons {
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+		flex-wrap: wrap;
+		gap: 17px;
+		margin-bottom: 20px;
+
+		.payment-method__icon {
+			margin-right: 0;
+			max-height: 35px;
+			outline: none;
+
+			&[alt='Affirm'] {
+				max-height: 30px;
+			}
+		}
+	}
+
+	h1 {
+		text-align: left;
+		width: 100%;
+	}
+
+	p {
+		text-align: left;
+	}
+
+	.components-external-link {
+		padding: 6px 12px;
+		align-items: center;
+		display: flex;
+	}
+}

client/connect-account-page/index.tsx

@@ -31,6 +31,12 @@ import strings from './strings';
 import './style.scss';
 import InlineNotice from 'components/inline-notice';
 
+const SandboxModeNotice = () => (
+	<BannerNotice icon status="warning" isDismissible={ false }>
+		{ strings.sandboxModeNotice }
+	</BannerNotice>
+);
+
 const ConnectAccountPage: React.FC = () => {
 	const firstName = wcSettings.admin?.currentUserData?.first_name;
 	const incentive = wcpaySettings.connectIncentive;
@@ -50,12 +56,6 @@ const ConnectAccountPage: React.FC = () => {
 
 	const isCountrySupported = !! availableCountries[ country ];
 
-	const SandboxModeNotice = () => (
-		<BannerNotice icon status="warning" isDismissible={ false }>
-			{ strings.sandboxModeNotice }
-		</BannerNotice>
-	);
-
 	useEffect( () => {
 		recordEvent( 'page_view', {
 			path: 'payments_connect_v2',