Add tooltips if the connect URL is empty

client/settings/connect-stripe-account/index.js

@@ -7,6 +7,7 @@ import CardBody from '../card-body';
 import StripeBanner from 'wcstripe/components/stripe-banner';
 import { recordEvent } from 'wcstripe/tracking';
 import InlineNotice from 'wcstripe/components/inline-notice';
+import Tooltip from 'wcstripe/components/tooltip';
 
 const CardWrapper = styled( Card )`
 	max-width: 560px;
@@ -58,6 +59,32 @@ const ConnectStripeAccount = ( { oauthUrl, oauthTestUrl } ) => {
 		window.location.assign( oauthTestUrl );
 	};
 
+	const connectButton = (
+		<Button
+			variant="primary"
+			onClick={ handleCreateOrConnectAccount }
+			disabled={ ! oauthUrl }
+		>
+			{ __(
+				'Create or connect an account',
+				'woocommerce-gateway-stripe'
+			) }
+		</Button>
+	);
+
+	const connectTestButton = (
+		<Button
+			variant="tertiary"
+			onClick={ handleCreateOrConnectTestAccount }
+			disabled={ ! oauthTestUrl }
+		>
+			{ __(
+				'Create or connect a test account',
+				'woocommerce-gateway-stripe'
+			) }
+		</Button>
+	);
+
 	return (
 		<CardWrapper>
 			<StripeBanner />
@@ -95,26 +122,32 @@ const ConnectStripeAccount = ( { oauthUrl, oauthTestUrl } ) => {
 						} ) }
 					</TermsOfServiceText>
 				) }
-				{ oauthUrl ? (
+				{ oauthUrl || oauthTestUrl ? (
 					<ButtonWrapper>
-						<Button
-							variant="primary"
-							onClick={ handleCreateOrConnectAccount }
-						>
-							{ __(
-								'Create or connect an account',
-								'woocommerce-gateway-stripe'
-							) }
-						</Button>
-						<Button
-							variant="tertiary"
-							onClick={ handleCreateOrConnectTestAccount }
-						>
-							{ __(
-								'Create or connect a test account',
-								'woocommerce-gateway-stripe'
-							) }
-						</Button>
+						{ ! oauthUrl ? (
+							<Tooltip
+								content={ __(
+									'An issue occurred generating a connection to Stripe. Please try again or connect in test mode.',
+									'woocommerce-gateway-stripe'
+								) }
+							>
+								{ connectButton }
+							</Tooltip>
+						) : (
+							connectButton
+						) }
+						{ ! oauthTestUrl ? (
+							<Tooltip
+								content={ __(
+									'An issue occurred generating a connection to Stripe in test mode. Please try again or connect in live mode.',
+									'woocommerce-gateway-stripe'
+								) }
+							>
+								{ connectTestButton }
+							</Tooltip>
+						) : (
+							connectTestButton
+						) }
 					</ButtonWrapper>
 				) : (
 					<InlineNotice isDismissible={ false } status="error">