Donations Form block: show Stripe notice when not connected (#36841)

* Donations blocks: show Stripe nudge when not connected

* changelog

* Show loading spinner or nudge, not both

* Use connectUrl

* Whoops.

* Show Stripe nudge whenever disconnected

projects/plugins/jetpack/changelog/dontations-form-show-stripe-notice-when-not-connected

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Dontains Form block: show Stripe nudge if not connected.

projects/plugins/jetpack/extensions/blocks/donations/edit.js

@@ -2,8 +2,10 @@ import { Spinner } from '@automattic/jetpack-components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { StripeNudge } from '../../shared/components/stripe-nudge';
 import { SUPPORTED_CURRENCIES } from '../../shared/currencies';
 import getConnectUrl from '../../shared/get-connect-url';
+import { store as membershipProductsStore } from '../../store/membership-products';
 import { STORE_NAME as MEMBERSHIPS_PRODUCTS_STORE } from '../../store/membership-products/constants';
 import fetchDefaultProducts from './fetch-default-products';
 import fetchStatus from './fetch-status';
@@ -20,6 +22,11 @@ const Edit = props => {
 	const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
 	const post = useSelect( select => select( 'core/editor' ).getCurrentPost(), [] );
 
+	const stripeConnectUrl = useSelect(
+		select => select( membershipProductsStore ).getConnectUrl(),
+		''
+	);
+
 	const { setConnectUrl, setConnectedAccountDefaultCurrency } = useDispatch(
 		MEMBERSHIPS_PRODUCTS_STORE
 	);
@@ -125,9 +132,14 @@ const Edit = props => {
 		return <LoadingError className={ className } error={ loadingError } />;
 	}
 
+	if ( stripeConnectUrl ) {
+		// Need to connect Stripe first
+		return <StripeNudge blockName="donations" />;
+	}
+
 	if ( ! currency ) {
 		// Memberships settings are still loading
-		return <Spinner />;
+		return <Spinner color="black" />;
 	}
 
 	return <Tabs { ...props } products={ products } />;

projects/plugins/jetpack/extensions/blocks/donations/tabs.js

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
-import { StripeNudge } from '../../shared/components/stripe-nudge';
 import Controls from './controls';
 import Tab from './tab';
 
@@ -54,7 +53,6 @@ const Tabs = props => {
 
 	return (
 		<div className={ className }>
-			<StripeNudge blockName="donations" />
 			<div className="donations__container">
 				{ Object.keys( tabs ).length > 1 && (
 					<div className="donations__nav">