From 063cfcea4b053412ceb3b5a98b58ef30d16c64d1 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Tue, 22 Oct 2024 22:27:34 -0700
Subject: [PATCH] Social: Fix Bluesky custom domain handle not being accepted
 (#95603)

* Fix custom domain handles not working for Bluesky

* Mark the account already connected if handle is prefixed with @

* Clear error on submission
---
 .../marketing/connections/bluesky.tsx         | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/my-sites/marketing/connections/bluesky.tsx b/client/my-sites/marketing/connections/bluesky.tsx
index 8f2f827433c0c..34c9c66ce6c44 100644
--- a/client/my-sites/marketing/connections/bluesky.tsx
+++ b/client/my-sites/marketing/connections/bluesky.tsx
@@ -15,24 +15,33 @@ interface Props {
 
 /**
  * Example valid handles:
+ * - domain.tld
  * - username.bsky.social
  * - user-name.bsky.social
- * - my_domain.com.bsky.social
- * - my-domain.com.my-own-server.com
+ * - my-domain.com
  * @param {string} handle - Handle to validate
  * @returns {boolean} - Whether the handle is valid
  */
 function isValidBlueskyHandle( handle: string ) {
 	const parts = handle.split( '.' ).filter( Boolean );
 
-	// A valid handle should have at least 3 parts - username, domain, and tld
-	if ( parts.length < 3 ) {
+	// A valid handle should have at least 2 parts - domain, and tld
+	if ( parts.length < 2 ) {
 		return false;
 	}
 
 	return parts.every( ( part ) => /^[a-z0-9_-]+$/i.test( part ) );
 }
 
+/**
+ * Remove any leading "@" and trim the handle
+ * @param {string} handle - Handle to cleanup
+ * @returns {string} - Cleaned up handle
+ */
+function cleanUpHandle( handle: string ) {
+	return handle.replaceAll( /@/g, '' ).trim();
+}
+
 const isAlreadyConnected = ( connections: Array< Connection >, handle: string ) => {
 	return connections.some( ( { external_name } ) => external_name === handle );
 };
@@ -53,7 +62,7 @@ export const Bluesky: React.FC< Props > = ( {
 	useEffect( () => {
 		const handle = formRef.current?.elements.namedItem( 'handle' ) as HTMLInputElement;
 
-		if ( ! isConnecting && isAlreadyConnected( connections, handle.value ) ) {
+		if ( ! isConnecting && isAlreadyConnected( connections, cleanUpHandle( handle.value ) ) ) {
 			formRef.current?.reset();
 		}
 	}, [ isConnecting, connections ] ); // eslint-disable-line react-hooks/exhaustive-deps
@@ -64,11 +73,12 @@ export const Bluesky: React.FC< Props > = ( {
 	const handleSubmit = ( e: FormEvent< HTMLFormElement > ) => {
 		e.preventDefault();
 		e.stopPropagation();
+		setError( '' );
 
 		const formData = new FormData( e.target as HTMLFormElement );
 
 		// Let us make the user's life easier by removing the leading "@" if they added it
-		const handle = ( formData.get( 'handle' )?.toString().trim() || '' ).replace( /^@/, '' );
+		const handle = cleanUpHandle( formData.get( 'handle' )?.toString().trim() || '' );
 		const app_password = formData.get( 'app_password' )?.toString().trim() || '';
 
 		if ( isAlreadyConnected( connections, handle ) ) {