From da623bab523d219ed92d87ef090ff56e98b17446 Mon Sep 17 00:00:00 2001
From: Renato Augusto Gama dos Santos <renato_0603@hotmail.com>
Date: Tue, 16 Apr 2024 18:59:46 -0300
Subject: [PATCH] AI Featured Image: Improving usage counter UX (#36926)

---
 .../update-featured-image-usage-counter       |  4 +++
 .../featured-image/usage-counter.scss         | 14 ++++++++-
 .../featured-image/usage-counter.tsx          | 30 +++++++++++++------
 3 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/update-featured-image-usage-counter

diff --git a/projects/plugins/jetpack/changelog/update-featured-image-usage-counter b/projects/plugins/jetpack/changelog/update-featured-image-usage-counter
new file mode 100644
index 0000000000000..30d4b114af9a8
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-featured-image-usage-counter
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Update UX of featured image usage counter
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.scss
index ae567be1608cb..eb99ff4349167 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.scss
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.scss
@@ -4,4 +4,16 @@
 	color: var(--studio-gray-50, #646970);
 	font-size: 1em;
 	display: flex;
-}
\ No newline at end of file
+	flex-direction: column;
+
+	& > span {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&-no-limit {
+		color: red;
+	}
+}
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.tsx
index fdc87de649927..107eebe5c0149 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/usage-counter.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -16,19 +17,30 @@ type UsageCounterProps = {
 export default function UsageCounter( { currentLimit, currentUsage, cost }: UsageCounterProps ) {
 	const requestsBalance = currentLimit - currentUsage;
 
-	const requestsBalanceLabel = __( 'Requests needed / available:', 'jetpack' );
-
-	const requestsBalanceValues = sprintf(
-		// Translators: %1$d is the cost of one image, %2$d is the current requests balance.
-		__( '%1$d / %2$d', 'jetpack' ),
-		cost,
-		requestsBalance
+	const requestsNeeded = createInterpolateElement(
+		// Translators: %d is the cost of one image.
+		sprintf( __( 'Requests needed: <counter>%d</counter>', 'jetpack' ), cost ),
+		{
+			counter: <span />,
+		}
+	);
+	const requestsAvailable = createInterpolateElement(
+		// Translators: %d is the current requests balance.
+		sprintf( __( 'Requests available: <counter>%d</counter>', 'jetpack' ), requestsBalance ),
+		{
+			counter:
+				requestsBalance < cost ? (
+					<span className="ai-assistant-featured-image__usage-counter-no-limit" />
+				) : (
+					<strong />
+				),
+		}
 	);
 
 	return (
 		<div className="ai-assistant-featured-image__usage-counter">
-			{ requestsBalanceLabel } <br />
-			{ requestsBalanceValues }
+			<span>{ requestsNeeded }</span>
+			<span>{ requestsAvailable }</span>
 		</div>
 	);
 }