A4A Dev Sites: Add notice when missing payment data for referral dev …

…sites (#94282) * Move marketplace useEffect to the useReferralDevSite * Add notice when missig tipalti referral data * Adjust notice styles * Adjust referral form fields style * Remove style import * Streamline styles application * Clean up styling --------- Co-authored-by: Ivan Ottinger <25105483+ivan-ottinger@users.noreply.github.com>
Automattic · Sep 20, 2024 · 66ff5bb · 66ff5bb
1 parent 9ae4c7d
commit 66ff5bb
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 33 deletions.
diff --git a/client/a8c-for-agencies/sections/marketplace/checkout/index.tsx b/client/a8c-for-agencies/sections/marketplace/checkout/index.tsx
@@ -45,7 +45,7 @@ function Checkout( { isClient, referralBlogId }: Props ) {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 
-	const { marketplaceType, setMarketplaceType } = useContext( MarketplaceTypeContext );
+	const { marketplaceType } = useContext( MarketplaceTypeContext );
 	const isAutomatedReferrals = marketplaceType === MARKETPLACE_TYPE_REFERRAL;
 
 	const { selectedCartItems, onRemoveCartItem, onClearCart, setSelectedCartItems } =
@@ -132,14 +132,6 @@ function Checkout( { isClient, referralBlogId }: Props ) {
 		referralBlogId
 	);
 
-	useEffect( () => {
-		// On mount, set the marketplace type to referral if the referralBlogId is present.
-		if ( referralBlogId ) {
-			setMarketplaceType( MARKETPLACE_TYPE_REFERRAL );
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
 	useEffect( () => {
 		// When the referralBlogId is present, add the referral plan to the cart.
 		if ( referralBlogId && ! isLoadingReferralDevSite ) {

diff --git a/client/a8c-for-agencies/sections/marketplace/checkout/request-client-payment.tsx b/client/a8c-for-agencies/sections/marketplace/checkout/request-client-payment.tsx
@@ -12,6 +12,8 @@ import FormTextInput from 'calypso/components/forms/form-text-input';
 import FormTextarea from 'calypso/components/forms/form-textarea';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import MissingPaymentSettingsNotice from '../../referrals/common/missing-payment-settings-notice';
+import useGetTipaltiPayee from '../../referrals/hooks/use-get-tipalti-payee';
 import withMarketplaceType, {
 	MARKETPLACE_TYPE_SESSION_STORAGE_KEY,
 	MARKETPLACE_TYPE_REGULAR,
@@ -36,6 +38,7 @@ function RequestClientPayment( { checkoutItems }: Props ) {
 	const [ email, setEmail ] = useState( '' );
 	const [ message, setMessage ] = useState( '' );
 	const [ validationError, setValidationError ] = useState< ValidationState >( {} );
+	const [ tipaltiActionRequiredVisible, setTipaltiActionRequiredVisible ] = useState( false );
 
 	const { onClearCart } = useShoppingCart();
 
@@ -67,6 +70,14 @@ function RequestClientPayment( { checkoutItems }: Props ) {
 		[ checkoutItems ]
 	);
 
+	const { data: tipaltiData } = useGetTipaltiPayee();
+
+	useEffect( () => {
+		if ( ! tipaltiData.IsPayable ) {
+			setTipaltiActionRequiredVisible( true );
+		}
+	}, [ tipaltiData ] );
+
 	const handleRequestPayment = useCallback( () => {
 		if ( ! hasCompletedForm ) {
 			return;
@@ -109,6 +120,13 @@ function RequestClientPayment( { checkoutItems }: Props ) {
 
 	return (
 		<>
+			{ tipaltiActionRequiredVisible && (
+				<div className="checkout__tipalti-action-required-notice">
+					<MissingPaymentSettingsNotice
+						onClose={ () => setTipaltiActionRequiredVisible( false ) }
+					/>
+				</div>
+			) }
 			<div className="checkout__client-referral-form">
 				<FormFieldset>
 					<FormLabel htmlFor="email">{ translate( 'Client’s email address' ) }</FormLabel>
@@ -120,6 +138,7 @@ function RequestClientPayment( { checkoutItems }: Props ) {
 						onClick={ () =>
 							dispatch( recordTracksEvent( 'calypso_a4a_client_referral_form_email_click' ) )
 						}
+						disabled={ ! tipaltiData.IsPayable }
 					/>
 					<div
 						className={ clsx( 'checkout__client-referral-form-footer-error', {
@@ -141,6 +160,7 @@ function RequestClientPayment( { checkoutItems }: Props ) {
 						onClick={ () =>
 							dispatch( recordTracksEvent( 'calypso_a4a_client_referral_form_message_click' ) )
 						}
+						disabled={ ! tipaltiData.IsPayable }
 					/>
 				</FormFieldset>
 			</div>

diff --git a/client/a8c-for-agencies/sections/marketplace/checkout/style.scss b/client/a8c-for-agencies/sections/marketplace/checkout/style.scss
@@ -104,6 +104,10 @@
 	}
 }
 
+.checkout__tipalti-action-required-notice {
+	padding-top: 24px;
+}
+
 .checkout__summary-pricing {
 	background-color: var(--color-surface);
 	border-radius: 8px; /* stylelint-disable-line scales/radii */
@@ -274,6 +278,11 @@
 
 .checkout__client-referral-form {
 	padding-block-start: 48px;
+
+	input[type="text"].form-text-input:disabled,
+	.form-textarea:disabled {
+		border-color: var(--color-neutral-10);
+	}
 }
 
 .checkout__aside--client {

diff --git a/client/a8c-for-agencies/sections/marketplace/hooks/use-referral-dev-site.ts b/client/a8c-for-agencies/sections/marketplace/hooks/use-referral-dev-site.ts
@@ -1,7 +1,9 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
 import useProductsQuery from 'calypso/a8c-for-agencies/data/marketplace/use-products-query';
 import useFetchDevLicense from 'calypso/a8c-for-agencies/data/purchases/use-fetch-dev-license';
 import useGetTipaltiPayee from 'calypso/a8c-for-agencies/sections/referrals/hooks/use-get-tipalti-payee';
+import { MarketplaceTypeContext } from '../context';
+import { MARKETPLACE_TYPE_REFERRAL } from '../hoc/with-marketplace-type';
 import { ShoppingCartItem } from '../types';
 
 export default function useReferralDevSite(
@@ -12,6 +14,7 @@ export default function useReferralDevSite(
 	const { data: allProducts, isLoading: isLoadingProducts } = useProductsQuery();
 	const { data: license, isLoading: isLoadingLicense } = useFetchDevLicense( referralBlogId );
 	const { isLoading: isLoadingTipalti } = useGetTipaltiPayee();
+	const { setMarketplaceType } = useContext( MarketplaceTypeContext );
 
 	const product = useMemo(
 		() => allProducts?.find( ( p ) => p.product_id === license?.productId ),
@@ -39,6 +42,14 @@ export default function useReferralDevSite(
 		}
 	}, [ license, product, referralPlanAdded, setSelectedCartItems ] );
 
+	useEffect( () => {
+		// On mount, set the marketplace type to referral if the referralBlogId is present.
+		if ( referralBlogId ) {
+			setMarketplaceType( MARKETPLACE_TYPE_REFERRAL );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
 	return {
 		addReferralPlanToCart,
 		isLoading: isLoadingProducts || isLoadingLicense || isLoadingTipalti,

diff --git a/client/a8c-for-agencies/sections/referrals/common/missing-payment-settings-notice/index.tsx b/client/a8c-for-agencies/sections/referrals/common/missing-payment-settings-notice/index.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import LayoutBanner from 'calypso/a8c-for-agencies/components/layout/banner';
+
+import './style.scss';
+
+type Props = {
+	onClose: () => void;
+};
+
+export const MissingPaymentSettingsNotice = ( { onClose }: Props ) => {
+	const translate = useTranslate();
+	return (
+		<LayoutBanner
+			level="warning"
+			title={ translate( 'Your payment settings require action' ) }
+			onClose={ onClose }
+			className="missing-payment-settings-notice"
+		>
+			<div>
+				{ translate( 'Please confirm your details before referring products to your clients.' ) }
+			</div>
+			<Button
+				className="missing-payment-settings-notice__button is-dark"
+				href="/referrals/payment-settings"
+			>
+				{ translate( 'Go to payment settings' ) }
+			</Button>
+		</LayoutBanner>
+	);
+};
+
+export default MissingPaymentSettingsNotice;
diff --git a/client/a8c-for-agencies/sections/referrals/common/missing-payment-settings-notice/style.scss b/client/a8c-for-agencies/sections/referrals/common/missing-payment-settings-notice/style.scss
@@ -0,0 +1,9 @@
+.missing-payment-settings-notice {
+	.notice-banner {
+		padding: 24px;
+	}
+
+	.missing-payment-settings-notice__button {
+		margin-block-start: 1rem;
+	}
+}
diff --git a/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/index.tsx b/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/index.tsx
@@ -10,7 +10,6 @@ import {
 } from 'calypso/a8c-for-agencies/components/items-dashboard/constants';
 import { DataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces';
 import Layout from 'calypso/a8c-for-agencies/components/layout';
-import LayoutBanner from 'calypso/a8c-for-agencies/components/layout/banner';
 import LayoutBody from 'calypso/a8c-for-agencies/components/layout/body';
 import LayoutColumn from 'calypso/a8c-for-agencies/components/layout/column';
 import LayoutHeader, {
@@ -28,6 +27,7 @@ import {
 } from 'calypso/a8c-for-agencies/sections/marketplace/hoc/with-marketplace-type';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import MissingPaymentSettingsNotice from '../../common/missing-payment-settings-notice';
 import useFetchReferralInvoices from '../../hooks/use-fetch-referral-invoices';
 import useFetchReferrals from '../../hooks/use-fetch-referrals';
 import useGetTipaltiPayee from '../../hooks/use-get-tipalti-payee';
@@ -116,23 +116,7 @@ export default function ReferralsOverview( {
 					) }
 					{ actionRequiredNotice && (
 						<div className="referrals-overview__notice">
-							<LayoutBanner
-								level="warning"
-								title={ translate( 'Your payment settings require action' ) }
-								onClose={ () => setRequiredNoticeClosed( true ) }
-							>
-								<div>
-									{ translate(
-										'Please confirm your details before referring products to your clients.'
-									) }
-								</div>
-								<Button
-									className="referrals-overview__notice-button is-dark"
-									href="/referrals/payment-settings"
-								>
-									{ translate( 'Go to payment settings' ) }
-								</Button>
-							</LayoutBanner>
+							<MissingPaymentSettingsNotice onClose={ () => setRequiredNoticeClosed( true ) } />
 						</div>
 					) }
 

diff --git a/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss b/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss
@@ -7,11 +7,6 @@ $data-view-border-color: #f1f1f1;
 	margin-block-end: 48px;
 }
 
-.referrals-overview__notice {
-	.button.referrals-overview__notice-button {
-		margin-block-start: 1rem;
-	}
-}
 
 .referrals-overview__button-popover {
 	.a4a-popover__content {