Social: Create a social service connect button

projects/js-packages/publicize-components/index.ts

@@ -5,6 +5,7 @@ import './src/social-store';
 
 export { default as Connection } from './src/components/connection';
 export { default as ConnectionVerify } from './src/components/connection-verify';
+export { default as ConnectButton } from './src/components/connect-button';
 export { default as Form } from './src/components/form';
 export { default as SocialPreviewsModal } from './src/components/social-previews/modal';
 export { default as SocialPreviewsPanel } from './src/components/social-previews/panel';

projects/js-packages/publicize-components/package.json

@@ -22,6 +22,7 @@
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
+		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/social-previews": "2.0.1-beta.13",
 		"@wordpress/annotations": "2.56.0",
 		"@wordpress/api-fetch": "6.53.0",

projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx

@@ -19,6 +19,7 @@ export interface Connection {
 	description: string;
 	name: string;
 	examples?: Array< React.ComponentType >;
+	connectUrl?: string;
 }
 
 export const getSupportedConnections = (): Connection[] => {
@@ -79,7 +80,7 @@ export const getSupportedConnections = (): Connection[] => {
 				'Share photos from your site to your Instagram Business account.',
 				'jetpack'
 			),
-			name: 'instagram',
+			name: 'instagram-business',
 			examples: [
 				() => (
 					<>

projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx

@@ -1,14 +1,38 @@
 import { Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown } from '@wordpress/icons';
 import classNames from 'classnames';
-import { useCallback, useState } from 'react';
+import { store } from '../../social-store';
+import ConnectButton from '../connect-button';
 import { ConnectPage } from './connect-page/connect-page';
 import { getSupportedConnections } from './constants';
 import styles from './style.module.scss';
 
 const AddConnectionModal = ( { onCloseModal } ) => {
+	const supportedServices = useSelect( select => {
+		const supportedConnections = getSupportedConnections();
+		const services = select( store )
+			.getServices()
+			.filter( service => service.type === 'publicize' )
+			.reduce(
+				( serviceData, service ) => ( {
+					...serviceData,
+					[ service.ID ]: service.connect_URL,
+				} ),
+				{}
+			);
+
+		return supportedConnections
+			.filter( connection => Object.hasOwn( services, connection.name ) )
+			.map( connection => ( {
+				...connection,
+				connectUrl: services[ connection.name ],
+			} ) );
+	}, [] );
+
 	const [ currentService, setCurrentService ] = useState( null );
 
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
@@ -53,7 +77,7 @@
 						</tr>
 					</thead>
 					<tbody>
-						{ getSupportedConnections().map( service => (
+						{ supportedServices.map( service => (
 							<tr key={ service.name }>
 								<td>
 									<service.icon iconSize={ isSmall ? 36 : 48 } />
@@ -70,9 +94,12 @@
 								</td>
 								<td>
 									<div className={ styles[ 'column-actions' ] }>
-										<Button type="submit" variant="primary" size={ isSmall ? 'small' : 'normal' }>
-											{ __( 'Connect', 'jetpack' ) }
-										</Button>
+										<ConnectButton
+											connectUrl={ service.connectUrl }
+											onClose={ res => console.log( res ) }
+											key={ service.name }
+											size={ isSmall ? 'small' : 'normal' }
+										/>
 										<Button
 											size={ isSmall ? 'small' : 'normal' }
 											className={ styles[ 'chevron-button' ] }

projects/js-packages/publicize-components/src/components/connect-button/index.js

@@ -0,0 +1,18 @@
+import { Button } from '@automattic/jetpack-components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { requestExternalAccess } from '../../utils/request-external-access.js';
+
+const ConnectButton = ( { connectUrl, onClose, className = null, size = 'normal' } ) => {
+	const requestConnection = useCallback(
+		() => requestExternalAccess( connectUrl, onClose ),
+		[ connectUrl, onClose ]
+	);
+	return (
+		<Button className={ className } variant="primary" onClick={ requestConnection } size={ size }>
+			{ __( 'Connect', 'jetpack' ) }
+		</Button>
+	);
+};
+
+export default ConnectButton;

projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js

@@ -106,3 +106,14 @@ export function getConnectionProfileDetails( state, service, { forceDefaults = f
 
 	return { displayName, profileImage, username };
 }
+
+/**
+ * Returns the services list from the store.
+ *
+ * @param {import("../types").SocialStoreState} state - State object.
+ *
+ * @returns {Array} The services list
+ */
+export function getServices( state ) {
+	return state.connectionData?.services ?? [];
+}

projects/js-packages/publicize-components/src/types/types.ts

@@ -12,6 +12,7 @@ type JetpackSettingsSelectors = {
 
 type ConnectionDataSelectors = {
 	getConnections: () => Array< object >;
+	getServices: () => Array< object >;
 	getConnectionsAdminUrl: () => string;
 	hasConnections: () => boolean;
 };

projects/js-packages/publicize-components/src/utils/index.js

@@ -1,3 +1,4 @@
 export * from './get-share-message-max-length';
 export * from './get-supported-additional-connections';
+export * from './request-external-access';
 export * from './types';

projects/js-packages/publicize-components/src/utils/request-external-access.js

@@ -0,0 +1,34 @@
+import PopupMonitor from '@automattic/popup-monitor';
+
+/**
+ * The callback function of the requestExternalAccess utility.
+ * @callback requestCallback
+ * @param {object} result - Received authentication data.
+ * @param {number} result.keyring_id
+ * @param {string} result.id_token
+ * @param {object} result.user
+ */
+
+/**
+ * Utility for requesting authorization of sharing services.
+ * @param {string} url - The URL to be loaded in the newly opened window.
+ * @param {requestCallback} cb - The callback that handles the response.
+ */
+export const requestExternalAccess = ( url, cb ) => {
+	const popupMonitor = new PopupMonitor();
+	let lastMessage;
+
+	popupMonitor.open(
+		url,
+		null,
+		'toolbar=0,location=0,status=0,menubar=0,' + popupMonitor.getScreenCenterSpecs( 780, 700 )
+	);
+
+	popupMonitor.once( 'close', () => {
+		cb( lastMessage?.ID ? lastMessage : {} );
+	} );
+
+	popupMonitor.on( 'message', message => {
+		lastMessage = message?.data;
+	} );
+};

projects/packages/publicize/src/jetpack-social-settings/class-settings.php

@@ -7,6 +7,7 @@
 
 namespace Automattic\Jetpack\Publicize\Jetpack_Social_Settings;
 
+use Automattic\Jetpack\Connection\Client;
 use Automattic\Jetpack\Connection\Manager;
 use Automattic\Jetpack\Modules;
 use Automattic\Jetpack\Publicize\Publicize;
@@ -192,6 +193,7 @@
 			$settings['connectionData'] = array(
 				'connections' => $publicize->get_all_connections_for_user(),
 				'adminUrl'    => esc_url_raw( $publicize->publicize_connections_url( 'jetpack-social-connections-admin-page' ) ),
+				'services'    => $this->get_services(),
 			);
 
 			$settings['is_publicize_enabled'] = true;
@@ -206,6 +208,25 @@
 		return $settings;
 	}
 
+	/**
+	 * Get the list of supported Publicize services.
+	 *
+	 * @return array List of external services and their settings.
+	 */
+	public function get_services() {
+		$site_id = Manager::get_site_id();
+		if ( is_wp_error( $site_id ) ) {
+			return [];
+		}
+		$path     = sprintf( '/sites/%d/external-services', $site_id );
+		$response = Client::wpcom_json_api_request_as_user( $path );
+		if ( is_wp_error( $response ) ) {
+			return [];
+		}
+		$body = json_decode( wp_remote_retrieve_body( $response ) );
+		return array_values( (array) $body->services ) ?? [];
+	}
+
 	/**
 	 * Update the settings.
 	 *

projects/plugins/social/src/class-jetpack-social.php

@@ -11,6 +11,7 @@
 
 use Automattic\Jetpack\Admin_UI\Admin_Menu;
 use Automattic\Jetpack\Assets;
+use Automattic\Jetpack\Connection\Client;
 use Automattic\Jetpack\Connection\Initial_State as Connection_Initial_State;
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Automattic\Jetpack\Connection\Rest_Authentication as Connection_Rest_Authentication;
@@ -256,16 +257,32 @@
 					'connectionData'  => array(
 						'connections' => $publicize->get_all_connections_for_user(), // TODO: Sanitize the array
 						'adminUrl'    => esc_url_raw( $publicize->publicize_connections_url( 'jetpack-social-connections-admin-page' ) ),
+						'services'    => $this->get_services(),
 					),
 					'sharesData'      => $publicize->get_publicize_shares_info( Jetpack_Options::get_option( 'id' ) ),
 				),
 				$initial_state
 			);
 		}
 
+		error_log( print_r( $state, true ) );
 		return $state;
 	}
 
+	public function get_services() {
+		$site_id = Connection_Manager::get_site_id();
+		if ( is_wp_error( $site_id ) ) {
+			return [];
+		}
+		$path     = sprintf( '/sites/%d/external-services', $site_id );
+		$response = Client::wpcom_json_api_request_as_user( $path );
+		if ( is_wp_error( $response ) ) {
+			return [];
+		}
+		$body = json_decode( wp_remote_retrieve_body( $response ) );
+		return array_values( (array) $body->services ) ?? [];
+	}
+
 	/**
 	 * Returns a boolean as to whether we have a plan that supports
 	 * sharing beyond the free limit.