Forms: add countryname-tooltip to IP-flags (#45886)

Author: simison

projects/packages/forms/changelog/update-forms-ip-flag-countryname

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: show country name as tooltip in IP flags

projects/packages/forms/src/blocks/field-telephone/edit.js

@@ -15,13 +15,13 @@ import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { globe } from '@wordpress/icons';
 import clsx from 'clsx';
+import { getTranslatedCountryName } from '../../util/country-names-translated';
 import JetpackFieldControls from '../shared/components/jetpack-field-controls';
 import useFieldSelected from '../shared/hooks/use-field-selected';
 import useFormWrapper from '../shared/hooks/use-form-wrapper';
 import useJetpackFieldStyles from '../shared/hooks/use-jetpack-field-styles';
 import useSyncRequiredIndicator from '../shared/hooks/use-sync-required-indicator';
 import { countries } from './country-list';
-import { getTranslatedCountryName } from './country-names-translated';
 
 const EMPTY_ARRAY = [];
 

projects/packages/forms/src/dashboard/components/flag/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { Tooltip } from '@wordpress/components';
+import { getTranslatedCountryName } from '../../../util/country-names-translated';
+
+type FlagProps = {
+	countryCode?: string;
+};
+
+/**
+ * Render the country flag emoji based on a country code.
+ *
+ * @param {FlagProps}        props             - The component props.
+ * @param {string|undefined} props.countryCode - Two-letter ISO 3166-1 alpha-2 country code (e.g., "US") or undefined if unknown.
+ * @return {JSX.Element} The Flag component
+ */
+export default function Flag( { countryCode }: FlagProps ): JSX.Element | null {
+	if ( ! countryCode ) {
+		return null;
+	}
+	const upperCountryCode = countryCode.toUpperCase();
+	const offset = 127397;
+
+	const flag = String.fromCodePoint(
+		upperCountryCode.charCodeAt( 0 ) + offset,
+		upperCountryCode.charCodeAt( 1 ) + offset
+	);
+
+	const countryName = getTranslatedCountryName( countryCode );
+
+	return (
+		<Tooltip text={ countryName }>
+			<span aria-label={ countryName } role="img">
+				{ flag }
+			</span>
+		</Tooltip>
+	);
+}

projects/packages/forms/src/dashboard/components/response-view/body.tsx

@@ -28,15 +28,11 @@ import photon from 'photon';
  */
 import useConfigValue from '../../../hooks/use-config-value';
 import CopyClipboardButton from '../../components/copy-clipboard-button';
+import Flag from '../../components/flag';
 import Gravatar from '../../components/gravatar';
 import useInboxData from '../../hooks/use-inbox-data';
 import { useMarkAsSpam } from '../../hooks/use-mark-as-spam';
-import {
-	getPath,
-	updateMenuCounter,
-	updateMenuCounterOptimistically,
-	getCountryFlagEmoji,
-} from '../../inbox/utils';
+import { getPath, updateMenuCounter, updateMenuCounterOptimistically } from '../../inbox/utils';
 import { store as dashboardStore } from '../../store';
 import type { FormResponse } from '../../../types';
 
@@ -482,7 +478,7 @@ const ResponseViewBody = ( {
 								<td>
 									{ response.country_code && (
 										<span className="jp-forms__inbox-response-meta-country-flag response-country-flag">
-											{ getCountryFlagEmoji( response.country_code ) }
+											<Flag countryCode={ response.country_code } />
 										</span>
 									) }
 									<Tooltip text={ __( 'Lookup IP address', 'jetpack-forms' ) }>

projects/packages/forms/src/dashboard/inbox/dataviews/index.js

@@ -21,12 +21,13 @@ import { useSearchParams } from 'react-router';
 /**
  * Internal dependencies
  */
+import Flag from '../../components/flag';
 import Gravatar from '../../components/gravatar';
 import InboxStatusToggle from '../../components/inbox-status-toggle';
 import { ResponseMobileView, SingleResponseView } from '../../components/response-view';
 import useInboxData from '../../hooks/use-inbox-data';
 import EmptyResponses from '../empty-responses';
-import { getPath, getItemId, getCountryFlagEmoji } from '../utils.js';
+import { getPath, getItemId } from '../utils.js';
 import {
 	viewAction,
 	markAsSpamAction,
@@ -368,7 +369,7 @@ export default function InboxView() {
 						<>
 							<span className="response-country-flag">
 								{ ! item.country_code && <Icon icon={ globe } size={ 20 } /> }
-								{ item.country_code && getCountryFlagEmoji( item.country_code ) }
+								{ item.country_code && <Flag countryCode={ item.country_code } /> }
 							</span>
 							{ item.ip || '' }
 						</>

projects/packages/forms/src/dashboard/inbox/utils.js

@@ -73,21 +73,3 @@ export const updateMenuCounterOptimistically = count => {
  * @return {string} The ID of the item.
  */
 export const getItemId = item => item?.id?.toString() ?? '';
-
-/**
- * Get the country flag emoji from a country code.
- *
- * @param {string|null} countryCode - Two-letter ISO 3166-1 alpha-2 country code (e.g., "US") or null if unknown.
- * @return {string} The country flag emoji.
- */
-export const getCountryFlagEmoji = countryCode => {
-	if ( ! countryCode ) {
-		return '';
-	}
-	const upperCountryCode = countryCode.toUpperCase();
-	const offset = 127397;
-	return String.fromCodePoint(
-		upperCountryCode.charCodeAt( 0 ) + offset,
-		upperCountryCode.charCodeAt( 1 ) + offset
-	);
-};