Forms: add new integration list component (#45648)

Author: edanzer

projects/packages/forms/changelog/update-forms-integration-list-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: create new integrations list component.

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/active-integrations/index.js

@@ -6,7 +6,7 @@ import AkismetIcon from '../../../../../icons/akismet';
 import HostingerReachIcon from '../../../../../icons/hostinger-reach';
 import MailPoetOrangeIcon from '../../../../../icons/mailpoet-orange';
 import SalesforceCircleIcon from '../../../../../icons/salesforce-circle';
-import { isValidSalesforceOrgId } from '../salesforce-card';
+import { isValidSalesforceOrgId } from '../helpers/salesforce';
 import './style.scss';
 
 const COLOR_JETPACK = colorStudio.colors[ 'Jetpack Green 40' ];

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/akismet-card.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import useCreateForm from '../../../../../dashboard/hooks/use-create-form';
+
+type Props = {
+	className?: string;
+};
+
+export default function CreateSalesforceLeadFormButton( { className }: Props ) {
+	const { openNewForm } = useCreateForm();
+
+	const handleClick = () => {
+		openNewForm( {
+			formPattern: 'salesforce-lead-form',
+			analyticsEvent: () => {
+				if ( window.jetpackAnalytics?.tracks ) {
+					window.jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_salesforce_lead_form_click' );
+				}
+			},
+		} );
+	};
+
+	return (
+		<Button variant="primary" onClick={ handleClick } className={ className }>
+			{ __( 'Create Salesforce lead form', 'jetpack-forms' ) }
+		</Button>
+	);
+}

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/consent-toggle.tsx renamed to projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/components/consent-toggle.tsx

@@ -0,0 +1,48 @@
+import requestExternalAccess from '@automattic/request-external-access';
+import { Button } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	settingsUrl?: string;
+	onConnected: () => void;
+	isConnected: boolean;
+};
+
+export default function GoogleDriveConnectButton( {
+	settingsUrl,
+	onConnected,
+	isConnected,
+}: Props ) {
+	const connectingText = __( 'Connecting…', 'jetpack-forms' );
+	const connectText = __( 'Connect to Google Drive', 'jetpack-forms' );
+	const [ isToggling, setIsToggling ] = useState( false );
+
+	useEffect( () => {
+		// Reset local UI state when connection flips
+		setIsToggling( false );
+	}, [ isConnected ] );
+
+	const handleClick = () => {
+		if ( ! settingsUrl ) return;
+		setIsToggling( true );
+		requestExternalAccess( settingsUrl, ( { keyring_id: keyringId } ) => {
+			if ( keyringId ) {
+				onConnected();
+			} else {
+				setIsToggling( false );
+			}
+		} );
+	};
+
+	return (
+		<Button
+			variant="secondary"
+			onClick={ handleClick }
+			__next40pxDefaultSize={ true }
+			disabled={ ! settingsUrl || isToggling }
+		>
+			{ isToggling ? connectingText : connectText }
+		</Button>
+	);
+}

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/components/create-salesforce-lead-form-button.tsx

@@ -0,0 +1,38 @@
+import apiFetch from '@wordpress/api-fetch';
+import { Button } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	onDisconnected: () => void;
+	isConnected: boolean;
+};
+
+export default function GoogleDriveDisconnectButton( { onDisconnected, isConnected }: Props ) {
+	const disconnectingText = __( 'Disconnecting…', 'jetpack-forms' );
+	const disconnectText = __( 'Disconnect Google Drive', 'jetpack-forms' );
+	const [ isToggling, setIsToggling ] = useState( false );
+
+	useEffect( () => {
+		setIsToggling( false );
+	}, [ isConnected ] );
+
+	const handleClick = () => {
+		setIsToggling( true );
+		apiFetch( { method: 'DELETE', path: '/wp/v2/feedback/integrations/google-drive' } )
+			.then( ( response: { deleted: boolean } ) => {
+				if ( response.deleted ) {
+					onDisconnected();
+				}
+			} )
+			.finally( () => {
+				setIsToggling( false );
+			} );
+	};
+
+	return (
+		<Button variant="link" onClick={ handleClick } disabled={ isToggling }>
+			{ isToggling ? disconnectingText : disconnectText }
+		</Button>
+	);
+}