A4A: Show referral order confirmation message. (#91675)

* Add NewReferralOrderNotification component.

* Make official A4A layout banner and use it in the new Referral order notification.

* Update Referral checkout to use refferal email to show new referral order notification.

* Fix typo.

client/a8c-for-agencies/components/layout/banner.tsx

@@ -0,0 +1,24 @@
+import NoticeBanner from '@automattic/components/src/notice-banner';
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+type Props = {
+	actions?: React.ReactNode[];
+	className?: string;
+	children: ReactNode;
+	level: 'error' | 'warning' | 'info' | 'success';
+	onClose?: () => void;
+	title?: string;
+};
+
+export default function LayoutBanner( { className, children, onClose, title, actions }: Props ) {
+	const wrapperClass = clsx( className, 'a4a-layout__banner' );
+
+	return (
+		<div className={ wrapperClass }>
+			<NoticeBanner level="success" onClose={ onClose } title={ title } actions={ actions }>
+				{ children }
+			</NoticeBanner>
+		</div>
+	);
+}

client/a8c-for-agencies/components/layout/style.scss

@@ -57,6 +57,7 @@ html,
 	padding-block-end: 32px;
 }
 
+.a4a-layout__banner,
 .a4a-layout__top-wrapper,
 .a4a-layout__body {
 	margin-inline: 0;

client/a8c-for-agencies/constants/index.ts

@@ -2,3 +2,5 @@ export const A4A_DOWNLOAD_LINK_ON_GITHUB =
 	'https://github.com/Automattic/automattic-for-agencies-client/releases/download/v0.1.0/automattic-for-agencies-client.zip';
 export const JETPACK_CONNECT_A4A_LINK =
 	'https://wordpress.com/jetpack/connect?source=a8c-for-agencies';
+
+export const REFERRAL_EMAIL_QUERY_PARAM_KEY = 'referral_email';

client/a8c-for-agencies/hooks/use-url-query-param.ts

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { useURLQueryParams } from 'calypso/jetpack-cloud/sections/partner-portal/hooks';
+
+export default function useUrlQueryParam( key: string ) {
+	const { setParams, resetParams, getParamValue } = useURLQueryParams();
+
+	const setValue = useCallback(
+		( value: string ) => {
+			if ( value ) {
+				setParams( [
+					{
+						key: key,
+						value,
+					},
+				] );
+			} else {
+				resetParams( [ key ] );
+			}
+		},
+		[ key, resetParams, setParams ]
+	);
+
+	return {
+		value: getParamValue( key ),
+		setValue,
+	};
+}

client/a8c-for-agencies/sections/marketplace/checkout/request-client-payment.tsx

@@ -1,8 +1,10 @@
 import page from '@automattic/calypso-router';
 import { Button, FormLabel } from '@automattic/components';
+import { addQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { A4A_REFERRALS_DASHBOARD } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import { REFERRAL_EMAIL_QUERY_PARAM_KEY } from 'calypso/a8c-for-agencies/constants';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormTextInput from 'calypso/components/forms/form-text-input';
 import FormTextarea from 'calypso/components/forms/form-textarea';
@@ -60,14 +62,16 @@ function RequestClientPayment( { checkoutItems }: Props ) {
 	}, [ dispatch ] );
 
 	useEffect( () => {
-		if ( isSuccess ) {
+		if ( isSuccess && !! email ) {
+			sessionStorage.setItem( MARKETPLACE_TYPE_SESSION_STORAGE_KEY, MARKETPLACE_TYPE_REGULAR );
+			page.redirect(
+				addQueryArgs( A4A_REFERRALS_DASHBOARD, { [ REFERRAL_EMAIL_QUERY_PARAM_KEY ]: email } )
+			);
 			setEmail( '' );
 			setMessage( '' );
 			onClearCart();
-			sessionStorage.setItem( MARKETPLACE_TYPE_SESSION_STORAGE_KEY, MARKETPLACE_TYPE_REGULAR );
-			page.redirect( A4A_REFERRALS_DASHBOARD );
 		}
-	}, [ isSuccess, onClearCart ] );
+	}, [ email, isSuccess, onClearCart ] );
 
 	return (
 		<>

client/a8c-for-agencies/sections/referrals/primary/referrals-overview/index.tsx

@@ -18,6 +18,8 @@ import LayoutHeader, {
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
 import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
 import { A4A_MARKETPLACE_PRODUCTS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import { REFERRAL_EMAIL_QUERY_PARAM_KEY } from 'calypso/a8c-for-agencies/constants';
+import useUrlQueryParam from 'calypso/a8c-for-agencies/hooks/use-url-query-param';
 import {
 	MARKETPLACE_TYPE_SESSION_STORAGE_KEY,
 	MARKETPLACE_TYPE_REFERRAL,
@@ -29,6 +31,7 @@ import useGetTipaltiPayee from '../../hooks/use-get-tipalti-payee';
 import ReferralDetails from '../../referral-details';
 import ReferralsFooter from '../footer';
 import LayoutBodyContent from './layout-body-content';
+import NewReferralOrderNotification from './new-referral-order-notification';
 
 import './style.scss';
 
@@ -42,6 +45,10 @@ export default function ReferralsOverview( {
 
 	const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( initialDataViewsState );
 
+	const { value: referralEmail, setValue: setReferralEmail } = useUrlQueryParam(
+		REFERRAL_EMAIL_QUERY_PARAM_KEY
+	);
+
 	const isDesktop = useDesktopBreakpoint();
 
 	const title =
@@ -78,6 +85,13 @@ export default function ReferralsOverview( {
 		>
 			<LayoutColumn wide className="referrals-layout__column">
 				<LayoutTop>
+					{ !! referralEmail && (
+						<NewReferralOrderNotification
+							email={ referralEmail }
+							onClose={ () => setReferralEmail( '' ) }
+						/>
+					) }
+
 					<LayoutHeader>
 						<Title>{ title } </Title>
 						{ isAutomatedReferral && (

client/a8c-for-agencies/sections/referrals/primary/referrals-overview/new-referral-order-notification.tsx

@@ -0,0 +1,30 @@
+import { useTranslate } from 'i18n-calypso';
+import { useState } from 'react';
+import LayoutBanner from 'calypso/a8c-for-agencies/components/layout/banner';
+
+type Props = {
+	email: string;
+	onClose?: () => void;
+};
+
+export default function NewReferralOrderNotification( { email, onClose }: Props ) {
+	const [ showBanner, setShowBanner ] = useState( true );
+
+	const translate = useTranslate();
+
+	const onCloseClick = () => {
+		setShowBanner( false );
+		onClose?.();
+	};
+
+	return (
+		showBanner && (
+			<LayoutBanner level="success" onClose={ onCloseClick }>
+				{ translate( 'Your referral order was emailed to %(referralEmail)s for payment.', {
+					args: { referralEmail: email },
+					comment: 'The %(referralEmail)s is the email where referral order was sent.',
+				} ) }
+			</LayoutBanner>
+		)
+	);
+}

client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss

@@ -204,3 +204,13 @@ $data-view-border-color: #f1f1f1;
 	height: auto;
 	overflow-y: scroll;
 }
+
+
+.referrals-layout .notice-banner {
+	display: none;
+	margin-block-end: 24px;
+}
+
+.referrals-layout:not(.referrals-layout--has-selected) .notice-banner {
+	display: flex;
+}