From 1feecdc4ccb8a648c7aa8030166d1c8db0bf4ac4 Mon Sep 17 00:00:00 2001
From: Ash Monty <git@ashmonty.com>
Date: Sat, 9 Jul 2022 17:57:24 +0200
Subject: [PATCH] feat: add progressbar to upgrade page, text tweaks

---
 public/assets/css/main.css       |  5 +++--
 public/assets/css/upgrade.css    | 24 ++++++++++++++++++++++++
 src/cache.js                     |  3 +++
 src/routers/progress.js          |  2 +-
 views/account/upgrade.handlebars | 14 ++++++++++++--
 views/progress.handlebars        |  4 ++--
 6 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index c530a91..87c0375 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -813,7 +813,8 @@ section.update-signup div.circle {
 .donation-progress a:hover {
 	text-decoration: underline;
 }
-.donation-progress .progress-bar {
+
+.progress-bar {
 	position: relative;
 	display: block;
 	width: 100%;
@@ -823,7 +824,7 @@ section.update-signup div.circle {
 	background: var(--btn-secondary);
 	overflow: hidden;
 }
-.donation-progress .progress-bar-inner {
+.progress-bar-inner {
 	height: 100%;
 	background-color: var(--theme);
 }
diff --git a/public/assets/css/upgrade.css b/public/assets/css/upgrade.css
index a2757b4..2e0229d 100644
--- a/public/assets/css/upgrade.css
+++ b/public/assets/css/upgrade.css
@@ -57,8 +57,32 @@ h1.title {
   color: var(--text);
 }
 p.caption {
+  width: min(100%, 500px);
+  margin: 0 auto 36px;
+}
+
+.account-form-wrapper .progress-bar-wrapper {
+  justify-content: center;
   width: min(100%, 500px);
   margin: 0 auto 72px;
+  padding: 24px;
+  border-radius: 6px;
+  background: #1b1f3b;
+  box-sizing: border-box;
+}
+.account-form-wrapper .progress-bar-wrapper p {
+  text-align: left;
+  margin-bottom: 0;
+}
+.account-form-wrapper .progress-bar-wrapper p span {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.account-form-wrapper .progress-bar {
+  height: 8px;
+  border-radius: 4px;
+  margin-top: 0;
 }
 
 form {
diff --git a/src/cache.js b/src/cache.js
index b9f161b..a7c343b 100644
--- a/src/cache.js
+++ b/src/cache.js
@@ -137,6 +137,9 @@ async function updateStripeDonationCache() {
 		hasMore = has_more;
 	}
 
+	donationCache.goal_dollars = donationCache.goal / 100;
+	donationCache.total_dollars = donationCache.total / 100;
+
 	donationCache.completed_real = Math.floor((donationCache.total / donationCache.goal) * 100); // real completion amount
 	donationCache.completed_capped = Math.max(0, Math.min(donationCache.completed_real, 100)); // capped at 100
 
diff --git a/src/routers/progress.js b/src/routers/progress.js
index f33e82a..4849321 100644
--- a/src/routers/progress.js
+++ b/src/routers/progress.js
@@ -23,7 +23,7 @@ router.get('/', async (request, response) => {
 	const trelloCache = await getTrelloCache();
 	renderData.progressLists = trelloCache;
 	const stripeDonationCache = await getStripeDonationCache();
-	renderData.donation = stripeDonationCache;
+	renderData.donationCache = stripeDonationCache;
 
 	response.render('progress', renderData);
 });
diff --git a/views/account/upgrade.handlebars b/views/account/upgrade.handlebars
index 4d5ad46..4c5b2fd 100644
--- a/views/account/upgrade.handlebars
+++ b/views/account/upgrade.handlebars
@@ -33,8 +33,18 @@
 		</a>
 
 		<h1 class="title dot">Upgrade</h1>
-		<p class="caption">Subscribing to a tier gives you access to our developer chats and, depending on the tier,
-				to our beta servers. Please someone reword this, it sucks. No fr.</p>
+		<p class="caption">
+			Reaching the monthly goal will make Pretendo a full time job, providing better quality updates at a faster rate.
+		</p>
+
+		<div class="progress-bar-wrapper">
+			<div class="progress-bar">
+				<div class="progress-bar-inner" style="width: {{ donationCache.completed_capped }}%;" ></div>
+			</div>
+			<p>
+				<span>${{donationCache.total_dollars}}</span> of <span>${{donationCache.goal_dollars}}</span>/month, <span>${{donationCache.completed_real}}%</span> of the monthly goal.
+			</p>
+		</div>
 		<form method="post" data-current-tier="{{currentTier}}">
 			{{#each tiers}}
 				<input type="radio" class="tier-radio" data-tier-name="{{this.name}}" name="tier" value="{{this.price_id}}" id="{{this.price_id}}" />
diff --git a/views/progress.handlebars b/views/progress.handlebars
index 62a28ee..861cb5d 100644
--- a/views/progress.handlebars
+++ b/views/progress.handlebars
@@ -16,9 +16,9 @@
 		<div class="donation-progress">
 			<h1 class="title dot">Donation goal</h1>
 			<div class="progress-bar">
-				<div class="progress-bar-inner" style="width: {{ donation.completed_capped }}%;" ></div>
+				<div class="progress-bar-inner" style="width: {{ donationCache.completed_capped }}%;" ></div>
 			</div>
-			<p>Raised <span class="amount">{{ donation.completed_capped }}%</span> of the monthly goal, thanks to <span class="amount">{{ donation.donators }}</span> donators! To become a subscriber and gain access to cool perks, visit the <a href="/account/upgrade">upgrade page</a>.</p>
+			<p><span>${{donationCache.total_dollars}}</span> of <span>${{donationCache.goal_dollars}}</span>/month, <span>${{donationCache.completed_real}}%</span> of the monthly goal. To become a subscriber and gain access to cool perks, visit the <a href="/account/upgrade">upgrade page</a>.</p>
 		</div>
 
 		{{#each progressLists.sections}}