Social | Improve service connect url generation (#42019)

* Move the publicize/services endpoint to publicize package

This commit:
- Moves the `wpcom/v2/publicize/services` endpoint from Jetpack plugin to publicize package
- Adds Services:: wpcom_get_all() method
- Updates the schema, using 'id' instead of 'name' because that helps us use the core getEntityRecords selectors
- Initializes the endpoint in Publicize_Setup

* Update services class to fix caching

This commit:
- Updates the `Services::get_all()` method to use `self::wpcom_get_all()`
- Updates the endpoint to use the updated `publicize/services` endpoint to get the service data
- Updates caching to use the same mechanism as used for connections caching to handle concurrent requests
- Removes URL from the cached services to avoid caching it.
- Updates the transient name with v1 to avoid PHP warnings when using an old transient

* Update the service fields as per the schema

This commit updates the fields in the front-end components to use the correct schema

* Create selectors and actions for services

This commit creates the required selectors and actions for the services list using the core APIs to avoid boilerplate for API call handling.

* Hydrate the core store with our entity config and initial state data

* Refresh the services list for on connect

When a user clicks on connect, it looks for the connect URL for the service, if it's not present, it refreshes the services list to get the connect URL.

* Disable connect button when loading services

When the user clicks on connect, an API call gets fired and till then we need to disable the connect buttons and also show "Connecting..." only for the button that was clicked.

* Use the supported services from the store instead of the initial state

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13521731190

Upstream-Ref: Automattic/jetpack@e31f822

Author: manzoorwanijk

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.79.1-alpha] - unreleased
+
+This is an alpha version! The changes listed here are not final.
+
+### Changed
+- Social | Improve connect URL generation
+
 ## [0.79.0] - 2025-02-24
 ### Added
 - Add support for Bluesky video selection. [#41669]
@@ -1105,6 +1112,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Updated package dependencies. [#24470]
 
+[0.79.1-alpha]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.79.0...v0.79.1-alpha
 [0.79.0]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.78.0...v0.79.0
 [0.78.0]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.77.2...v0.78.0
 [0.77.2]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.77.1...v0.77.2

package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.79.0",
+	"version": "0.79.1-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

src/components/connection-management/reconnect.tsx

@@ -63,11 +63,11 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP
 
 		const formData = new FormData();
 
-		if ( service.ID === 'mastodon' ) {
+		if ( service.id === 'mastodon' ) {
 			formData.set( 'instance', connection.external_handle );
 		}
 
-		if ( service.ID === 'bluesky' ) {
+		if ( service.id === 'bluesky' ) {
 			openConnectionsModal();
 		} else {
 			requestAccess( formData );
@@ -77,7 +77,7 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP
 		deleteConnectionById,
 		openConnectionsModal,
 		requestAccess,
-		service.ID,
+		service.id,
 		setReconnectingAccount,
 	] );
 

src/components/manage-connections-modal/confirmation-form/index.tsx

@@ -70,16 +70,16 @@ export function ConfirmationForm( {
 	const { createErrorNotice } = useGlobalNotices();
 
 	const service = supportedServices.find(
-		supportedService => supportedService.ID === keyringResult.service
+		supportedService => supportedService.id === keyringResult.service
 	);
 	const isAlreadyConnected = useCallback(
 		( externalID: string ) => {
 			return existingConnections.some(
 				connection =>
-					connection.service_name === service?.ID && connection.external_id === externalID
+					connection.service_name === service?.id && connection.external_id === externalID
 			);
 		},
-		[ existingConnections, service.ID ]
+		[ existingConnections, service.id ]
 	);
 
 	const accounts = useMemo( () => {
@@ -94,7 +94,7 @@ export function ConfirmationForm( {
 		const options: Array< AccountOption > = [];
 
 		// If user account is supported, add it to the list
-		if ( ! service.external_users_only ) {
+		if ( ! service.supports.additional_users_only ) {
 			options.push( {
 				label: keyringResult.external_display || keyringResult.external_name,
 				value: keyringResult.external_ID,
@@ -103,7 +103,7 @@ export function ConfirmationForm( {
 		}
 
 		if (
-			service.multiple_external_user_ID_support &&
+			service.supports.additional_users_only &&
 			keyringResult.additional_external_users?.length
 		) {
 			for ( const user of keyringResult.additional_external_users ) {
@@ -148,7 +148,7 @@ export function ConfirmationForm( {
 			}
 
 			const data = {
-				external_user_ID: service.multiple_external_user_ID_support ? external_user_ID : undefined,
+				external_user_ID: service.supports.additional_users ? external_user_ID : undefined,
 				keyring_connection_ID: keyringResult.ID,
 				shared: formData.get( 'shared' ) === '1' ? true : undefined,
 			};
@@ -165,7 +165,7 @@ export function ConfirmationForm( {
 			createConnection( data, {
 				display_name: accountInfo?.label,
 				profile_picture: accountInfo?.profile_picture,
-				service_name: service.ID,
+				service_name: service.id,
 				external_id: external_user_ID.toString(),
 			} );
 
@@ -178,8 +178,8 @@ export function ConfirmationForm( {
 			createErrorNotice,
 			keyringResult.ID,
 			onComplete,
-			service.multiple_external_user_ID_support,
-			service.ID,
+			service.supports,
+			service.id,
 			accounts.not_connected,
 		]
 	);
@@ -240,7 +240,7 @@ export function ConfirmationForm( {
 								// If we are reconnecting an account, preselect it,
 								// otherwise, preselect the first account
 								const defaultChecked = reconnectingAccount
-									? reconnectingAccount.service_name === service?.ID &&
+									? reconnectingAccount.service_name === service?.id &&
 									  reconnectingAccount.external_id === option.value
 									: index === 0;
 

src/components/services/connect-form.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@automattic/jetpack-components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { store } from '../../social-store';
@@ -38,6 +38,13 @@ export function ConnectForm( {
 
 	const { isConnectionsModalOpen } = useSelect( select => select( store ), [] );
 
+	const [ isConnecting, setIsConnecting ] = useState( false );
+
+	const isFetchingServicesList = useSelect(
+		select => select( store ).isFetchingServicesList(),
+		[]
+	);
+
 	const onConfirm = useCallback(
 		( result: KeyringResult ) => {
 			// Set the keyring result only if the modal is open
@@ -54,7 +61,7 @@ export function ConnectForm( {
 	} );
 
 	const onSubmitForm = useCallback(
-		( event: React.FormEvent ) => {
+		async ( event: React.FormEvent ) => {
 			event.preventDefault();
 			// Prevent Jetpack settings from being submitted
 			event.stopPropagation();
@@ -63,9 +70,11 @@ export function ConnectForm( {
 				return onSubmit();
 			}
 
+			setIsConnecting( true );
+
 			const formData = new FormData( event.target as HTMLFormElement );
 
-			requestAccess( formData );
+			await requestAccess( formData );
 		},
 		[ onSubmit, requestAccess ]
 	);
@@ -87,12 +96,17 @@ export function ConnectForm( {
 						variant={ hasConnections ? 'secondary' : 'primary' }
 						type="submit"
 						className={ styles[ 'connect-button' ] }
+						disabled={ isFetchingServicesList }
 					>
 						{ ( label => {
 							if ( label ) {
 								return label;
 							}
 
+							if ( isFetchingServicesList && isConnecting ) {
+								return __( 'Connecting…', 'jetpack-publicize-components' );
+							}
+
 							return hasConnections
 								? _x( 'Connect more', '', 'jetpack-publicize-components' )
 								: __( 'Connect', 'jetpack-publicize-components' );

src/components/services/custom-inputs.tsx

@@ -52,7 +52,7 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 		[ validateBskyHandle ]
 	);
 
-	if ( 'mastodon' === service.ID ) {
+	if ( 'mastodon' === service.id ) {
 		return (
 			<div className={ styles[ 'fields-item' ] }>
 				<label htmlFor={ `${ id }-handle` }>
@@ -85,7 +85,7 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 		);
 	}
 
-	if ( 'bluesky' === service.ID ) {
+	if ( 'bluesky' === service.id ) {
 		return (
 			<>
 				<div className={ styles[ 'fields-item' ] }>

src/components/services/service-item-details.tsx

@@ -66,7 +66,7 @@ export function ServiceItemDetails( { service, serviceConnections }: ServicesIte
 			} ) }
 		>
 			{ service.examples.map( ( Example, idx ) => (
-				<div key={ service.ID + idx } className={ styles.example }>
+				<div key={ service.id + idx } className={ styles.example }>
 					<Example />
 				</div>
 			) ) }

src/components/services/services-list.tsx

@@ -32,11 +32,11 @@ export function ServicesList() {
 	return (
 		<ul className={ styles.services }>
 			{ supportedServices.map( service => (
-				<li key={ service.ID } className={ styles[ 'service-list-item' ] }>
+				<li key={ service.id } className={ styles[ 'service-list-item' ] }>
 					<ServiceItem
 						service={ service }
-						serviceConnections={ connections[ service.ID ] || [] }
-						isPanelDefaultOpen={ reconnectingAccount?.service_name === service.ID }
+						serviceConnections={ connections[ service.id ] || [] }
+						isPanelDefaultOpen={ reconnectingAccount?.service_name === service.id }
 					/>
 				</li>
 			) ) }

src/components/services/use-request-access.ts

@@ -1,5 +1,5 @@
 import { useGlobalNotices } from '@automattic/jetpack-components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store } from '../../social-store';
@@ -40,7 +40,7 @@ export type RequestAccessOptions = {
  * Hook to request access to a service.
  *
  * @param {RequestAccessOptions} options - Options
- * @return {(formData: FormData) => void} - Function to request access
+ * @return - Function to request access
  */
 export function useRequestAccess( { service, onConfirm }: RequestAccessOptions ) {
 	const { createErrorNotice } = useGlobalNotices();
@@ -55,11 +55,27 @@ export function useRequestAccess( { service, onConfirm }: RequestAccessOptions )
 		[]
 	);
 
+	const { refreshServicesList } = useDispatch( store );
+
+	const { getService } = useSelect( select => select( store ), [] );
+
 	return useCallback(
-		( formData: FormData ) => {
-			const url = new URL( service.connect_URL );
+		async ( formData: FormData ) => {
+			let connectUrl = service.url;
+
+			if ( ! connectUrl ) {
+				await refreshServicesList();
+				// Wait until the services list is refreshed
+				do {
+					await new Promise( resolve => setTimeout( resolve, 100 ) );
+
+					connectUrl = getService( service.id )?.url;
+				} while ( ! connectUrl );
+			}
+
+			const url = new URL( connectUrl );
 
-			switch ( service.ID ) {
+			switch ( service.id ) {
 				case 'mastodon': {
 					const instance = formData.get( 'instance' ).toString().trim();
 
@@ -115,11 +131,12 @@ export function useRequestAccess( { service, onConfirm }: RequestAccessOptions )
 		},
 		[
 			createErrorNotice,
+			getService,
 			isBlueskyAccountAlreadyConnected,
 			isMastodonAlreadyConnected,
 			onConfirm,
-			service.ID,
-			service.connect_URL,
+			refreshServicesList,
+			service,
 		]
 	);
 }

src/components/services/use-service.ts

@@ -20,7 +20,7 @@ export function useService() {
 
 	const servicesMap = useMemo( () => {
 		return supportedServices.reduce< SupportedServicesMap >( ( acc, service ) => {
-			acc[ service.ID ] = service;
+			acc[ service.id ] = service;
 			return acc;
 		}, {} );
 	}, [ supportedServices ] );

src/components/services/use-supported-services.tsx

@@ -1,5 +1,6 @@
 import { SocialServiceIcon } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { createInterpolateElement, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import connectionsFacebook from '../../assets/connections-facebook.png';
@@ -8,8 +9,8 @@ import connectionsLinkedin from '../../assets/connections-linkedin.png';
 import connectionsNextdoor from '../../assets/connections-nextdoor.png';
 import connectionsThreads from '../../assets/connections-threads.png';
 import connectionsTumblr from '../../assets/connections-tumblr.png';
+import { store as socialStore } from '../../social-store';
 import { ConnectionService } from '../../types';
-import { getSocialScriptData } from '../../utils/script-data';
 
 export type Badge = {
 	text: string;
@@ -29,17 +30,17 @@ export interface SupportedService extends ConnectionService {
  * @return {Array< SupportedService >} The list of supported services
  */
 export function useSupportedServices(): Array< SupportedService > {
-	const availableServices = useMemo( () => {
-		const { supported_services } = getSocialScriptData();
+	const supported_services = useSelect( select => select( socialStore ).getServicesList(), [] );
 
+	const availableServices = useMemo( () => {
 		return supported_services.reduce< Record< string, ConnectionService > >(
 			( serviceData, service ) => ( {
 				...serviceData,
-				[ service.ID ]: service,
+				[ service.id ]: service,
 			} ),
 			{}
 		);
-	}, [] );
+	}, [ supported_services ] );
 
 	const badgeNew: Badge = {
 		text: __( 'New', 'jetpack-publicize-components' ),
@@ -261,6 +262,6 @@ export function useSupportedServices(): Array< SupportedService > {
 	];
 	return supportedServices.filter(
 		// Return only the ones that are present in the available services.
-		service => Boolean( service.ID )
+		service => Boolean( service.id )
 	);
 }

src/social-store/actions/index.ts

@@ -1,5 +1,6 @@
 import * as connectionData from './connection-data';
 import * as pricingPageSettings from './pricing-page';
+import * as servicesActions from './services';
 import * as shareStatus from './share-status';
 import * as sigActions from './social-image-generator';
 import * as socialModuleSettings from './social-module-settings';
@@ -14,6 +15,7 @@ const actions = {
 	...socialNoteSettings,
 	...pricingPageSettings,
 	...socialModuleSettings,
+	...servicesActions,
 };
 
 export default actions;

src/social-store/actions/services.ts

@@ -0,0 +1,14 @@
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Refreshes the list of supported services.
+ *
+ * @return A thunk to refresh the list of supported services.
+ */
+export function refreshServicesList() {
+	return async function ( { registry } ) {
+		registry
+			.dispatch( coreStore )
+			.invalidateResolution( 'getEntityRecords', [ 'wpcom/v2', 'publicize/services' ] );
+	};
+}