Merge pull request #119 from Automattic/fix/hovercards-issues

Fix: URL params & error msg

Author: wellyshen

web/packages/hovercards/README.md

@@ -492,6 +492,7 @@ The following phrases are used:
 - `Edit your profile`
 - `View profile`
 - `Sorry, we are unable to load this Gravatar profile.`
+- `Profile not found.`
 - `Too Many Requests.`
 - `Internal Server Error.`
 

web/packages/hovercards/src/add-query-arg.ts

@@ -0,0 +1,16 @@
+/**
+ * Adds or updates a query parameter to the given URL.
+ *
+ * @param {string} url   - The URL to which the query parameter will be added.
+ * @param {string} key   - The query parameter key to add or update.
+ * @param {string} value - The value of the query parameter to add or update.
+ * @return {string}      - The updated URL with the new or updated query parameter, or an empty string if the URL is invalid.
+ */
+export default function addQueryArg( url: string, key: string, value: string ): string {
+	const [ baseUrl, queryStr ] = url.split( '?' );
+	const queryParams = new URLSearchParams( queryStr || '' );
+
+	queryParams.set( key, value );
+
+	return `${ baseUrl }?${ queryParams.toString() }`;
+}

web/packages/hovercards/src/core.ts

@@ -1,6 +1,7 @@
 import type { Placement } from './compute-position';
 import computePosition from './compute-position';
 import { escUrl, escHtml } from './sanitizer';
+import addQueryArg from './add-query-arg';
 import __ from './i18n';
 
 interface AccountData {
@@ -255,7 +256,7 @@ export default class Hovercards {
 		const hovercard = dc.createElement( 'div' );
 		hovercard.className = `gravatar-hovercard${ additionalClass ? ` ${ additionalClass }` : '' }`;
 
-		const trackedProfileUrl = escUrl( `${ profileUrl }?utm_source=hovercard` );
+		const trackedProfileUrl = escUrl( addQueryArg( profileUrl, 'utm_source', 'hovercard' ) );
 		const username = escHtml( displayName );
 		const isEditProfile = ! description && myHash === hash;
 		const renderSocialLinks = verifiedAccounts
@@ -411,7 +412,7 @@ export default class Hovercards {
 
 				this._onFetchProfileStart( hash );
 
-				fetch( `${ BASE_API_URL }/${ hash }?source=hovercard` )
+				fetch( addQueryArg( `${ BASE_API_URL }/${ hash }`, 'source', 'hovercard' ) )
 					.then( ( res ) => {
 						// API error handling
 						if ( res.status !== 200 ) {
@@ -457,12 +458,16 @@ export default class Hovercards {
 					.catch( ( code ) => {
 						let message = __( this._i18n, 'Sorry, we are unable to load this Gravatar profile.' );
 
-						if ( code === 429 ) {
-							message = __( this._i18n, 'Too Many Requests.' );
-						}
-
-						if ( code === 500 ) {
-							message = __( this._i18n, 'Internal Server Error.' );
+						switch ( code ) {
+							case 404:
+								message = __( this._i18n, 'Profile not found.' );
+								break;
+							case 429:
+								message = __( this._i18n, 'Too Many Requests.' );
+								break;
+							case 500:
+								message = __( this._i18n, 'Internal Server Error.' );
+								break;
 						}
 
 						const hovercardInner = Hovercards.createHovercardError(