From 944afe60eda35ce03ba366842f395cf044e78331 Mon Sep 17 00:00:00 2001
From: Keith Daulton <kdaulton@d13design.com>
Date: Mon, 29 Aug 2022 19:19:23 -0400
Subject: [PATCH] Updates subscription banner content on the graph

---
 src/webviews/apps/plus/graph/GraphWrapper.tsx | 49 +++++++++++++++++----------
 src/webviews/apps/plus/graph/graph.scss       |  4 +++
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index 771a281..1e412d6 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -18,7 +18,7 @@ import type {
 	State,
 } from '../../../../plus/webviews/graph/protocol';
 import type { Subscription } from '../../../../subscription';
-import { getTimeRemaining, SubscriptionState } from '../../../../subscription';
+import { getSubscriptionTimeRemaining, SubscriptionState } from '../../../../subscription';
 import { pluralize } from '../../../../system/string';
 
 export interface GraphWrapperProps extends State {
@@ -240,6 +240,22 @@ export function GraphWrapper({
 		onDismissBanner?.('trial');
 	};
 
+	const renderTrialDays = () => {
+		if (
+			!subscriptionSnapshot ||
+			![SubscriptionState.FreeInPreview, SubscriptionState.FreePlusInTrial].includes(subscriptionSnapshot.state)
+		) {
+			return;
+		}
+
+		const days = getSubscriptionTimeRemaining(subscriptionSnapshot, 'days') ?? 0;
+		return (
+			<span className="mr-loose">
+				<span className="badge">GitLens+ Trial</span> ({days < 1 ? '< 1 day' : pluralize('day', days)} left)
+			</span>
+		);
+	};
+
 	const renderAlertContent = () => {
 		if (subscriptionSnapshot == null || !isPrivateRepo) return;
 
@@ -248,11 +264,8 @@ export function GraphWrapper({
 		let content;
 		let actions;
 		let days = 0;
-		if (
-			[SubscriptionState.FreeInPreview, SubscriptionState.FreePlusInTrial].includes(subscriptionSnapshot.state) &&
-			subscriptionSnapshot.previewTrial != null
-		) {
-			days = getTimeRemaining(subscriptionSnapshot.previewTrial.expiresOn, 'days') ?? 0;
+		if ([SubscriptionState.FreeInPreview, SubscriptionState.FreePlusInTrial].includes(subscriptionSnapshot.state)) {
+			days = getSubscriptionTimeRemaining(subscriptionSnapshot, 'days') ?? 0;
 		}
 
 		switch (subscriptionSnapshot.state) {
@@ -271,8 +284,8 @@ export function GraphWrapper({
 							<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">
 								GitLens+ trial
 							</a>
-							. Once your trial ends, you'll need a paid plan to continue to use the Commit Graph on this
-							and other private repos.
+							. Once your trial ends, you'll need a paid plan to continue to use GitLens+ features,
+							including the Commit Graph, on this and other private repos.
 						</p>
 					</>
 				);
@@ -283,18 +296,16 @@ export function GraphWrapper({
 				content = (
 					<>
 						<p className="alert__title">Extend Your GitLens+ Trial</p>
-						<p className="alert__message">Sign in to extend your free trial by an additional 7-days.</p>
+						<p className="alert__message">
+							Your free trial has ended, please sign in to extend your trial of GitLens+ features on
+							private repos by an additional 7-days.
+						</p>
 					</>
 				);
 				actions = (
-					<>
-						<a className="alert-action" href="command:gitlens.plus.loginOrSignUp">
-							Extend Trial
-						</a>{' '}
-						<a className="alert-action" href="command:gitlens.plus.purchase">
-							View Plans
-						</a>
-					</>
+					<a className="alert-action" href="command:gitlens.plus.loginOrSignUp">
+						Extend Trial
+					</a>
 				);
 				break;
 			case SubscriptionState.FreePlusTrialExpired:
@@ -304,7 +315,8 @@ export function GraphWrapper({
 					<>
 						<p className="alert__title">GitLens+ Trial Expired</p>
 						<p className="alert__message">
-							Upgrade your account to use the Commit Graph and other GitLens+ features on private repos.
+							Your free trial has ended, please upgrade your account to continue to use GitLens+ features,
+							including the Commit Graph, on this and other private repos.
 						</p>
 					</>
 				);
@@ -488,6 +500,7 @@ export function GraphWrapper({
 					)}
 				</div>
 				<div className="actionbar__group">
+					{renderTrialDays()}
 					<span className="badge">Preview</span>
 					<a
 						href="https://github.com/gitkraken/vscode-gitlens/discussions/2158"
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index 39af3e4..880788c 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -488,3 +488,7 @@ a {
 		justify-content: center;
 	}
 }
+
+.mr-loose {
+	margin-right: 0.5rem;
+}