Improve tooltip

Author: ClementPasteau

newIDE/app/src/AiGeneration/AiRequestChat/index.js

@@ -139,49 +139,47 @@ const getPriceAndRequestsTextAndTooltip = ({
   const creditsText = (
     <Trans>{Math.max(0, availableCredits)} GDevelop credits available</Trans>
   );
-  const priceInCredits = price.priceInCredits;
-  const maximumPriceInCredits =
-    (price.variablePrice &&
-      price.variablePrice[aiRequestMode] &&
-      price.variablePrice[aiRequestMode]['default'] &&
-      price.variablePrice[aiRequestMode]['default'].maximumPriceInCredits) ||
-    null;
-  const minimumPriceInCredits =
-    (price.variablePrice &&
-      price.variablePrice[aiRequestMode] &&
-      price.variablePrice[aiRequestMode]['default'] &&
-      price.variablePrice[aiRequestMode]['default'].minimumPriceInCredits) ||
-    null;
 
-  const remainingDaysBeforeReset = quota.resetsAt
-    ? Math.ceil((quota.resetsAt - Date.now()) / (1000 * 60 * 60 * 24))
-    : null;
-  const remainingDaysBeforeResetText = remainingDaysBeforeReset ? (
-    <Trans>
-      They reset in
-      {remainingDaysBeforeReset} day(s).
-    </Trans>
-  ) : null;
+  const timeForReset = quota.resetsAt ? new Date(quota.resetsAt) : null;
+  const now = new Date();
+  let summarySentence = undefined;
+  if (timeForReset) {
+    const timeDiff = timeForReset.getTime() - now.getTime();
+    // Date to look like 'Nov 30th'
+    const dateString = timeForReset.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric',
+    });
+    // Time to look like '14:05'
+    const timeString = timeForReset.toLocaleTimeString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+    if (timeDiff <= 0) {
+      summarySentence = <Trans>Your credits will reset soon.</Trans>;
+    } else {
+      summarySentence = (
+        <Trans>
+          You need to wait until {dateString} at {timeString} to reset to
+          {quota.max} AI credits.
+        </Trans>
+      );
+    }
+  }
 
   const tooltipText = (
     <ColumnStackLayout noMargin>
-      <Line noMargin>
-        <Trans>
-          {currentQuotaText} (out of {quota.max}).
-        </Trans>
-        {remainingDaysBeforeResetText}
-      </Line>
-      <Line noMargin>
-        <Trans>
-          A request costs {minimumPriceInCredits}-{maximumPriceInCredits} AI
-          credits, or {priceInCredits} GDevelop credits.
-        </Trans>
-      </Line>
+      {summarySentence && <Line noMargin>{summarySentence}</Line>}
       <Line noMargin>
         <Link
-          href={getHelpLink('/interface/ai')}
+          href={getHelpLink('/interface/ai/', 'cost-of-ai-requests')}
           color="secondary"
-          onClick={() => Window.openExternalURL(getHelpLink('/interface/ai'))}
+          onClick={() =>
+            Window.openExternalURL(
+              getHelpLink('/interface/ai/', 'cost-of-ai-requests')
+            )
+          }
         >
           Learn more
         </Link>
@@ -196,11 +194,7 @@ const getPriceAndRequestsTextAndTooltip = ({
     <LineStackLayout alignItems="center" noMargin>
       {shouldShowCredits && <Coin fontSize="small" />}
       <Text size="body-small" color="secondary" noMargin>
-        {shouldShowCredits ? (
-          creditsText
-        ) : (
-          <Trans>{aiCreditsAvailable} AI credits available</Trans>
-        )}
+        {shouldShowCredits ? creditsText : currentQuotaText}
         <span
           style={{
             verticalAlign: 'middle',