Forms: Adds country flags to dashboard based on IP. (#45643)

* Forms: Show country flag emoji for response IP addresses

Added a utility to convert country codes to flag emojis and updated the response view and inbox table to display the country flag next to the IP address. Updated styles for flag display and extended the FormResponse type to include a country_code field.

* changelog

* Update to use globe icon and remove flag on response view if not there.

* rebase

* Improve the vertical alignment

Author: enejb

projects/packages/forms/changelog/add-forms-add-flags-to-dashboard

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: Add flag next to the IP address 

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

@@ -31,7 +31,12 @@ import CopyClipboardButton from '../../components/copy-clipboard-button';
 import Gravatar from '../../components/gravatar';
 import useInboxData from '../../hooks/use-inbox-data';
 import { useMarkAsSpam } from '../../hooks/use-mark-as-spam';
-import { getPath, updateMenuCounter, updateMenuCounterOptimistically } from '../../inbox/utils';
+import {
+	getPath,
+	updateMenuCounter,
+	updateMenuCounterOptimistically,
+	getCountryFlagEmoji,
+} from '../../inbox/utils';
 import { store as dashboardStore } from '../../store';
 import type { FormResponse } from '../../../types';
 
@@ -473,6 +478,11 @@ const ResponseViewBody = ( {
 							<th>{ __( 'IP address:', 'jetpack-forms' ) }&nbsp;</th>
 							<td>
 								<Tooltip text={ __( 'Lookup IP address', 'jetpack-forms' ) }>
+									{ response.country_code && (
+										<span className="jp-forms__inbox-response-meta-country-flag response-country-flag">
+											{ getCountryFlagEmoji( response.country_code ) }
+										</span>
+									) }
 									<ExternalLink href={ getRedirectUrl( 'ip-lookup', { path: response.ip } ) }>
 										{ response.ip }
 									</ExternalLink>

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

@@ -13,6 +13,7 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useCallback, useMemo, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
+import { Icon, globe } from '@wordpress/icons';
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router';
 /**
@@ -23,7 +24,7 @@ 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 } from '../utils.js';
+import { getPath, getItemId, getCountryFlagEmoji } from '../utils.js';
 import {
 	viewAction,
 	markAsSpamAction,
@@ -310,7 +311,22 @@ export default function InboxView() {
 				filterBy: { operators: [ 'is' ] },
 				enableSorting: false,
 			},
-			{ id: 'ip', label: __( 'IP Address', 'jetpack-forms' ), enableSorting: false },
+			{
+				id: 'ip',
+				label: __( 'IP Address', 'jetpack-forms' ),
+				enableSorting: false,
+				render: ( { item } ) => {
+					return (
+						<>
+							<span className="response-country-flag">
+								{ ! item.country_code && <Icon icon={ globe } size={ 20 } /> }
+								{ item.country_code && getCountryFlagEmoji( item.country_code ) }
+							</span>
+							{ item.ip || '' }
+						</>
+					);
+				},
+			},
 		],
 		[ filterOptions, dateSettings.formats.date ]
 	);

projects/packages/forms/src/dashboard/inbox/style.scss

@@ -171,6 +171,18 @@
 	align-items: center;
 }
 
+.response-country-flag {
+	font-size: 16px;
+	display: inline;
+	padding-right: 4px;
+	vertical-align: middle;
+}
+
+.response-country-flag svg {
+	fill: currentColor;
+	vertical-align: text-top;
+}
+
 .jp-forms__inbox-response-data-value .file-field {
 	margin-top: 4px;
 

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

@@ -73,3 +73,21 @@ 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
+	);
+};

projects/packages/forms/src/types/index.ts

@@ -100,6 +100,8 @@ export interface FormResponse {
 	author_avatar: string;
 	/** The IP address of the response author. */
 	ip: string;
+	/** The country code of the response author. */
+	country_code: string;
 	/** The title of the form that the response was submitted to. */
 	entry_title: string;
 	/** The permalink of the form that the response was submitted to. */

projects/plugins/jetpack/changelog/add-forms-add-flags-to-dashboard

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Forms: add flag next to the IP Address