Adds cyber week banner to welcome

Author: d13

src/webviews/apps/media/cyberweek-2023-wide-dark.png

@@ -55,6 +55,23 @@ <h1 class="welcome__brand"><gitlens-logo></gitlens-logo> <small>Git Supercharged
 					<strong>understand</strong>, <strong>write</strong>, and <strong>review</strong> code. Focus,
 					collaborate, accelerate.
 				</p>
+				<div class="promo-banner" id="promo" hidden>
+					<a
+						href="https://www.gitkraken.com/cw23?utm_source=cyber_week&utm_medium=gitlens_banner&utm_campaign=cyber_week_2023"
+						aria-label="Cyber Week Sale: 50% off first seat of Pro — only $4/month! Includes entire GitKraken suite of dev tools."
+					>
+						<img
+							class="promo-banner__media is-dark"
+							src="#{webroot}/media/cyberweek-2023-wide-dark.webp"
+							alt=""
+						/>
+						<img
+							class="promo-banner__media is-light"
+							src="#{webroot}/media/cyberweek-2023-wide-light.webp"
+							alt=""
+						/>
+					</a>
+				</div>
 			</section>
 			<section class="welcome__section">
 				<h2>Powerful Features</h2>

src/webviews/apps/media/cyberweek-2023-wide-light.png

@@ -3,6 +3,16 @@
 @use '../shared/styles/normalize';
 @use '../shared/styles/theme';
 
+.vscode-high-contrast,
+.vscode-dark {
+	--promo-banner-dark-display: inline-block;
+}
+
+.vscode-high-contrast-light,
+.vscode-light {
+	--promo-banner-light-display: inline-block;
+}
+
 // normalize type
 body {
 	line-height: 1.4;
@@ -183,6 +193,24 @@ gk-card p {
 	margin: 0;
 }
 
+.promo-banner {
+	text-align: center;
+
+	&__media {
+		width: 100%;
+		max-width: 100%;
+		height: auto;
+
+		&.is-light {
+			display: var(--promo-banner-light-display, none);
+		}
+
+		&.is-dark {
+			display: var(--promo-banner-dark-display, none);
+		}
+	}
+}
+
 .welcome {
 	padding: var(--gitlens-gutter-width);
 

src/webviews/apps/welcome/welcome.html

@@ -93,6 +93,12 @@ export class WelcomeApp extends App<State> {
 		this.updateFeatures();
 		this.updateRepoState();
 		this.updateAccountState();
+		this.updatePromo();
+	}
+
+	private updatePromo() {
+		const { canShowPromo } = this.state;
+		document.getElementById('promo')!.hidden = !(canShowPromo ?? false);
 	}
 
 	private updateVersion() {

src/webviews/apps/welcome/welcome.scss

@@ -9,7 +9,8 @@ export interface State extends WebviewState {
 		currentLine: Config['currentLine']['enabled'];
 	};
 	repoFeaturesBlocked?: boolean;
-	isTrialOrPaid?: boolean;
+	isTrialOrPaid: boolean;
+	canShowPromo: boolean;
 }
 
 export interface UpdateConfigurationParams {

src/webviews/apps/welcome/welcome.ts

@@ -2,7 +2,7 @@ import type { ConfigurationChangeEvent } from 'vscode';
 import { Disposable, workspace } from 'vscode';
 import type { Container } from '../../container';
 import type { Subscription } from '../../plus/gk/account/subscription';
-import { SubscriptionState } from '../../plus/gk/account/subscription';
+import { isSubscriptionPaid, SubscriptionState } from '../../plus/gk/account/subscription';
 import type { SubscriptionChangeEvent } from '../../plus/gk/account/subscriptionService';
 import { configuration } from '../../system/configuration';
 import type { IpcMessage } from '../protocol';
@@ -77,6 +77,7 @@ export class WelcomeWebviewProvider implements WebviewProvider<State> {
 				this.container.git.openRepositoryCount === 0 ||
 				this.container.git.hasUnsafeRepositories(),
 			isTrialOrPaid: await this.getTrialOrPaidState(subscription),
+			canShowPromo: await this.getCanShowPromo(subscription),
 		};
 	}
 
@@ -90,6 +91,16 @@ export class WelcomeWebviewProvider implements WebviewProvider<State> {
 		return false;
 	}
 
+	private async getCanShowPromo(subscription?: Subscription): Promise<boolean> {
+		const expiresTime = new Date('2023-12-06T07:59:00.000Z').getTime(); // 2023-12-05 23:59:00 PST-0800
+		if (Date.now() > expiresTime) {
+			return false;
+		}
+
+		const sub = subscription ?? (await this.container.subscription.getSubscription(true));
+		return !isSubscriptionPaid(sub);
+	}
+
 	private updateConfiguration(params: UpdateConfigurationParams) {
 		void configuration.updateEffective(`${params.type}.enabled`, params.value);
 	}