diff --git a/projects/js-packages/publicize-components/changelog/update-social-select-the-reconnecting-account-by-default-on-confirmation-screen b/projects/js-packages/publicize-components/changelog/update-social-select-the-reconnecting-account-by-default-on-confirmation-screen
new file mode 100644
index 0000000000000..ff27efceca7cc
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/update-social-select-the-reconnecting-account-by-default-on-confirmation-screen
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Updated the connections cofirmation logic to preselect the reconnecting account by default on confirmation screen
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index a9bcad791a093..da26ff630a94c 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -1,7 +1,7 @@
{
"private": true,
"name": "@automattic/jetpack-publicize-components",
- "version": "0.55.1",
+ "version": "0.55.2-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": {
diff --git a/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx b/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx
index bab4d746457b3..7dedd9865b39d 100644
--- a/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx
+++ b/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx
@@ -21,7 +21,7 @@ export type ReconnectProps = {
* @returns {import('react').ReactNode} - React element
*/
export function Reconnect( { connection, service, variant = 'link' }: ReconnectProps ) {
- const { deleteConnectionById, setKeyringResult, openConnectionsModal } =
+ const { deleteConnectionById, setKeyringResult, openConnectionsModal, setReconnectingAccount } =
useDispatch( socialStore );
const { isDisconnecting } = useSelect(
@@ -58,6 +58,12 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP
return;
}
+ await setReconnectingAccount(
+ // Join service name and external ID
+ // just in case the external ID alone is not unique.
+ `${ connection.service_name }:${ connection.external_id }`
+ );
+
const formData = new FormData();
if ( service.ID === 'mastodon' ) {
@@ -65,24 +71,22 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP
}
requestAccess( formData );
- }, [ connection, deleteConnectionById, requestAccess, service.ID ] );
+ }, [ connection, deleteConnectionById, requestAccess, service.ID, setReconnectingAccount ] );
if ( ! connection.can_disconnect ) {
return null;
}
return (
- <>
-
- >
+
);
}
diff --git a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx
index b59d5db91e616..ee578ef4b0349 100644
--- a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx
@@ -53,11 +53,12 @@ function AccountInfo( { label, profile_picture }: AccountInfoProps ) {
*/
export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: ConfirmationFormProps ) {
const supportedServices = useSupportedServices();
- const { existingConnections } = useSelect( select => {
+ const { existingConnections, reconnectingAccount } = useSelect( select => {
const store = select( socialStore );
return {
existingConnections: store.getConnections(),
+ reconnectingAccount: store.getReconnectingAccount(),
};
}, [] );
@@ -121,7 +122,7 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
return { connected, not_connected };
}, [ isAlreadyConnected, keyringResult, service ] );
- const { createConnection } = useDispatch( socialStore );
+ const { createConnection, setReconnectingAccount } = useDispatch( socialStore );
const onConfirm = useCallback(
async ( event: React.FormEvent ) => {
@@ -149,17 +150,24 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
option => option.value === external_user_ID
);
+ if ( reconnectingAccount ) {
+ setReconnectingAccount( '' );
+ }
+
// Do not await the connection creation to unblock the UI
createConnection( data, {
display_name: accountInfo?.label,
profile_picture: accountInfo?.profile_picture,
service_name: service.ID,
+ external_id: external_user_ID,
} );
onComplete();
},
[
createConnection,
+ reconnectingAccount,
+ setReconnectingAccount,
createErrorNotice,
keyringResult.ID,
onComplete,
@@ -205,6 +213,12 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
}
{ accounts.not_connected.map( ( option, index ) => {
+ // If we are reconnecting an account, preselect it,
+ // otherwise, preselect the first account
+ const defaultChecked = reconnectingAccount
+ ? reconnectingAccount === `${ service?.ID }:${ option.value }`
+ : index === 0;
+
return (
// eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/869