[dashboard] Show a tooltip with billing cycle dates when hovering ove…

…r remaining hours

components/dashboard/src/settings/Plans.tsx

@@ -6,7 +6,7 @@
 
 import React, { useState, useEffect, useContext } from "react";
 import { countries } from 'countries-list';
-import { AccountStatement, Subscription, UserPaidSubscription, AssignedTeamSubscription } from "@gitpod/gitpod-protocol/lib/accounting-protocol";
+import { AccountStatement, Subscription, UserPaidSubscription, AssignedTeamSubscription, CreditDescription } from "@gitpod/gitpod-protocol/lib/accounting-protocol";
 import { PlanCoupon, GithubUpgradeURL } from "@gitpod/gitpod-protocol/lib/payment-protocol";
 import { Plans, Plan, Currency, PlanType } from "@gitpod/gitpod-protocol/lib/plans";
 import { ChargebeeClient } from "../chargebee/chargebee-client";
@@ -17,6 +17,7 @@ import SelectableCard from "../components/SelectableCard";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
+import Tooltip from "../components/Tooltip";
 import settingsMenu from "./settings-menu";
 
 type PlanWithOriginalPrice = Plan & { originalPrice?: number };
@@ -433,9 +434,11 @@ export default function () {
                 {!assignedTs && (
                     <p className="text-base w-96 m-auto">Upgrade your plan to get access to private repositories or more parallel workspaces.</p>
                 )}
-                <p className="mt-2 font-semibold text-gray-500">Remaining hours: {typeof(accountStatement?.remainingHours) === 'number'
-                    ? Math.floor(accountStatement.remainingHours * 10) / 10
-                    : accountStatement?.remainingHours}</p>
+                <Tooltip content={`Current billing cycle: ${guessCurrentBillingCycle(currentPlan, accountStatement).map(d => d.toLocaleDateString()).join(' - ')}`}>
+                    <p className="mt-2 font-semibold text-gray-500">Remaining hours: {typeof(accountStatement?.remainingHours) === 'number'
+                        ? Math.floor(accountStatement.remainingHours * 10) / 10
+                        : accountStatement?.remainingHours}</p>
+                </Tooltip>
                 {(typeof(accountStatement?.remainingHours) === 'number' && typeof(currentPlan.hoursPerMonth) === 'number')
                     ? <progress value={currentPlan.hoursPerMonth - accountStatement.remainingHours} max={currentPlan.hoursPerMonth} />
                     : <progress value="0" max="100" />}
@@ -599,3 +602,20 @@ function applyCoupons(plan: Plan, coupons: PlanCoupon[] | undefined): PlanWithOr
         originalPrice: plan.pricePerMonth
     }
 }
+
+// Look for relevant billing cycle dates in the account statement's computed credits.
+function guessCurrentBillingCycle(currentPlan: Plan, accountStatement?: AccountStatement): Date[] {
+    if (!accountStatement) {
+        return [];
+    }
+    try {
+        const now = new Date().toISOString();
+        const credit = accountStatement.credits.find(c => c.date < now && c.expiryDate >= now && (c.description as CreditDescription)?.planId === currentPlan.chargebeeId);
+        if (!!credit) {
+            return [new Date(credit.date), new Date(credit.expiryDate)];
+        }
+        return [];
+    } catch (error) {
+        return [];
+    }
+}