From 864b984654f0c55dc8d7f933e4b410d5ef6d82a3 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sat, 16 Nov 2024 15:06:15 +0100
Subject: [PATCH 1/3] Show Promo banner

---
 src/components/PromoBanner.vue | 177 +++++++++++++++++++++++++++++++++
 src/components/Tiers.vue       |  42 +++++++-
 src/css/styles.scss            |   2 +-
 src/layouts/authenticated.vue  |   3 +
 4 files changed, 219 insertions(+), 5 deletions(-)
 create mode 100644 src/components/PromoBanner.vue

diff --git a/src/components/PromoBanner.vue b/src/components/PromoBanner.vue
new file mode 100644
index 00000000..2aae029c
--- /dev/null
+++ b/src/components/PromoBanner.vue
@@ -0,0 +1,177 @@
+<template>
+	<a
+		v-if="show_banner"
+		class="promo-banner"
+		href="https://www.patreon.com/shieldmaidenapp/membership"
+		target="_blank"
+		rel="noopener"
+	>
+		<button v-if="closable" class="no-thanks" @click.stop.prevent="show_banner = false">
+			no thanks
+		</button>
+		<div class="promo-banner__body">
+			<div class="discount">
+				<div class="discount__percentage">{{ discount }}</div>
+				<div class="discount__off">OFF</div>
+			</div>
+			<div>
+				<div class="code">
+					Use promo code
+					<div>{{ code }}</div>
+				</div>
+			</div>
+		</div>
+		<div class="promo-banner__footer">
+			<div class="remaining">
+				Get your first month with a <strong>60%</strong> discount.
+				<span class="remaining__count">{{
+					days_remaining ? days_remaining : hours_remaining
+				}}</span>
+				{{ days_remaining ? "days" : "hours" }} left.
+			</div>
+			<span class="btn bg-patreon-red">Subscribe now!</span>
+		</div>
+	</a>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+	name: "PromoBanner",
+	props: {
+		closable: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {
+			code: "SHIELDMAIDEN60",
+			discount: 60,
+			now: new Date(),
+			start: new Date("2024-11-15T00:00:00Z"),
+			end: new Date("2024-12-03T07:59:59Z"),
+			showSetter: undefined,
+		};
+	},
+	computed: {
+		...mapGetters(["tier"]),
+		show_banner: {
+			get() {
+				const show =
+					(this.tier?.price === "Free" || !this.tier) &&
+					this.now >= this.start &&
+					this.now <= this.end;
+				return this.showSetter !== undefined ? this.showSetter : show;
+			},
+			set(newVal) {
+				this.showSetter = newVal;
+			},
+		},
+		days_remaining() {
+			const diff = this.end - this.now;
+			const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+			return days >= 1 ? days : undefined;
+		},
+		hours_remaining() {
+			const diff = this.end - this.now;
+			const hours = Math.floor(diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60);
+			return this.days_remaining >= 1 ? days : hours;
+		},
+	},
+	methods: {},
+	mounted() {
+		if (this.show_banner) {
+			this.$emit("discount", this.discount);
+		}
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.promo-banner {
+	display: block;
+	border-radius: $border-radius;
+	background-color: $neutral-9;
+	color: $white;
+	position: relative;
+
+	.no-thanks {
+		position: absolute;
+		line-height: normal;
+		color: $neutral-5;
+		font-size: 12px;
+		padding: 5px;
+		top: 0;
+		right: 0;
+
+		&:hover {
+			color: $neutral-4;
+		}
+	}
+	&__body {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: wrap;
+		width: 100%;
+		padding: 15px 25px;
+		column-gap: 25px;
+		row-gap: 10px;
+
+		.code {
+			color: $neutral-2;
+
+			> div {
+				color: $white;
+				display: inline-block;
+				text-transform: uppercase;
+				font-weight: bold;
+				background-color: $neutral-6;
+				border-radius: $border-radius-small;
+				padding: 5px 10px;
+				font-size: 20px;
+			}
+		}
+		.discount {
+			display: flex;
+			align-items: center;
+			&__percentage {
+				font-size: 80px;
+				line-height: 80px;
+				font-weight: bold;
+			}
+			&__off {
+				font-weight: bold;
+				font-size: 30px;
+				line-height: 30px;
+				opacity: 0.8;
+				&:before {
+					content: "%";
+					display: block;
+				}
+			}
+		}
+	}
+	&__footer {
+		border-bottom-left-radius: inherit;
+		border-bottom-right-radius: inherit;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: wrap;
+		padding: 15px 25px;
+		gap: 15px;
+		background-color: $neutral-6-transparent;
+
+		.remaining {
+			font-size: 18px;
+			&__count {
+				font-weight: bold;
+				color: $patreon-red;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index 38118d3d..e0a18830 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -1,5 +1,8 @@
 <template>
 	<div>
+		<q-no-ssr>
+			<PromoBanner class="mb-5" :closable="false" @discount="setDiscount" />
+		</q-no-ssr>
 		<div v-if="!loading">
 			<hk-card-deck>
 				<template v-for="(t, key) in tiers">
@@ -14,11 +17,21 @@
 						</div>
 						<div class="card-body">
 							<div class="top">
-								<span class="price" :class="{ 'patreon-red': t.name === 'Free' }">{{
-									t.price
-								}}</span>
+								<span
+									class="price"
+									:class="{
+										'patreon-red': t.name === 'Free',
+										strike: discount && t.name !== 'Free',
+									}"
+									>{{ t.price }}</span
+								>
+								<span v-if="discount && t.name !== 'Free'" class="price"
+									>${{ discountPrice(t.price) }}</span
+								>
 								<em v-if="t.price === 'Free'" class="neutral-2 sub">forever</em>
-								<em v-else class="neutral-2 sub">per month</em>
+								<em v-else class="neutral-2 sub">{{
+									discount ? "the first month" : "per month"
+								}}</em>
 							</div>
 							<ul>
 								<li v-for="(benefit, key) in default_benefits" :key="key">
@@ -123,6 +136,7 @@
 			</small>
 		</div>
 		<hk-loader v-else name="tiers" />
+		{{ discount }}
 	</div>
 </template>
 
@@ -130,13 +144,18 @@
 import { mapGetters } from "vuex";
 import { db } from "src/firebase";
 import { legacy_tiers } from "src/utils/generalConstants";
+import PromoBanner from "./PromoBanner.vue";
 
 export default {
 	name: "Tiers",
+	components: {
+		PromoBanner,
+	},
 	data() {
 		return {
 			loading: true,
 			show_storage: false,
+			discount: undefined,
 			default_benefits: [
 				"Combat tracker",
 				"Encounter builder",
@@ -191,6 +210,13 @@ export default {
 				tier: t.name,
 			});
 		},
+		setDiscount(discount) {
+			this.discount = discount;
+		},
+		discountPrice(price) {
+			price = Number(price.slice(1));
+			return (price * (1 - this.discount / 100)).toFixed(2);
+		},
 	},
 };
 </script>
@@ -210,10 +236,18 @@ export default {
 
 		.top {
 			padding: 15px;
+
 			.price {
 				font-size: 25px;
 				font-weight: bold;
 				margin-right: 5px;
+
+				&.strike {
+					text-decoration: line-through;
+					font-weight: normal;
+					color: $neutral-2;
+					font-size: 20px;
+				}
 			}
 			i.sub {
 				display: block;
diff --git a/src/css/styles.scss b/src/css/styles.scss
index e1752b07..572955e1 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -1014,7 +1014,7 @@ html body {
 	}
 
 	.breadcrumb {
-		margin-bottom: 20px;
+		margin-bottom: 1rem;
 		background: $neutral-6;
 		border-radius: $border-radius;
 		padding: 10px 15px;
diff --git a/src/layouts/authenticated.vue b/src/layouts/authenticated.vue
index 44758f3b..2d5b8a29 100644
--- a/src/layouts/authenticated.vue
+++ b/src/layouts/authenticated.vue
@@ -6,6 +6,7 @@
 			<OverEncumbered v-if="show_overencumbered" />
 			<div class="row q-col-gutter-md">
 				<div class="col-12" :class="{ 'col-md-9': width > 978 && $route.meta.side !== false }">
+					<PromoBanner class="mb-3" />
 					<router-view :key="$route.fullPath" />
 					<slot />
 				</div>
@@ -27,6 +28,7 @@ import ContentSideRight from "src/components/ContentSideRight";
 import OverEncumbered from "src/components/userContent/OverEncumbered";
 import PaymentDeclined from "src/components/PaymentDeclined.vue";
 import PatreonLinkDialog from "src/components/dialogs/PatreonLinkDialog.vue";
+import PromoBanner from "src/components/PromoBanner.vue";
 
 export default {
 	name: "AuthenticatedLayout",
@@ -36,6 +38,7 @@ export default {
 		ContentSideRight,
 		OverEncumbered,
 		PaymentDeclined,
+		PromoBanner,
 	},
 	preFetch({ store, redirect }) {
 		if (!store.getters.user) {

From a2a10858e7e1921eb91a2b393760229fd5dfb5cc Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sat, 16 Nov 2024 19:08:06 +0100
Subject: [PATCH 2/3] 80 off

---
 src/components/PromoBanner.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PromoBanner.vue b/src/components/PromoBanner.vue
index 2aae029c..8ee6affd 100644
--- a/src/components/PromoBanner.vue
+++ b/src/components/PromoBanner.vue
@@ -23,7 +23,7 @@
 		</div>
 		<div class="promo-banner__footer">
 			<div class="remaining">
-				Get your first month with a <strong>60%</strong> discount.
+				Get your first month with a <strong>{{ discount }}%</strong> discount.
 				<span class="remaining__count">{{
 					days_remaining ? days_remaining : hours_remaining
 				}}</span>
@@ -47,8 +47,8 @@ export default {
 	},
 	data() {
 		return {
-			code: "SHIELDMAIDEN60",
-			discount: 60,
+			code: "SHIELDMAIDEN80",
+			discount: 80,
 			now: new Date(),
 			start: new Date("2024-11-15T00:00:00Z"),
 			end: new Date("2024-12-03T07:59:59Z"),

From 158c51ba8c2747709598eafbfdfa45e44457439d Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sun, 17 Nov 2024 12:06:44 +0100
Subject: [PATCH 3/3] Set date on interval

---
 src/components/PromoBanner.vue | 13 ++++++++++---
 src/components/Tiers.vue       |  1 -
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/PromoBanner.vue b/src/components/PromoBanner.vue
index 8ee6affd..f15ef0f8 100644
--- a/src/components/PromoBanner.vue
+++ b/src/components/PromoBanner.vue
@@ -24,6 +24,7 @@
 		<div class="promo-banner__footer">
 			<div class="remaining">
 				Get your first month with a <strong>{{ discount }}%</strong> discount.
+				<template v-if="hours_remaining <= 1">Less than </template>
 				<span class="remaining__count">{{
 					days_remaining ? days_remaining : hours_remaining
 				}}</span>
@@ -53,6 +54,7 @@ export default {
 			start: new Date("2024-11-15T00:00:00Z"),
 			end: new Date("2024-12-03T07:59:59Z"),
 			showSetter: undefined,
+			timer: null,
 		};
 	},
 	computed: {
@@ -76,15 +78,20 @@ export default {
 		},
 		hours_remaining() {
 			const diff = this.end - this.now;
-			const hours = Math.floor(diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60);
-			return this.days_remaining >= 1 ? days : hours;
+			const hours = Math.floor(diff / (1000 * 60 * 60));
+			return hours;
 		},
 	},
-	methods: {},
 	mounted() {
 		if (this.show_banner) {
 			this.$emit("discount", this.discount);
 		}
+		this.timer = setInterval(() => {
+			this.now = new Date();
+		}, 60000);
+	},
+	beforeDestroy() {
+		clearInterval(this.timer);
 	},
 };
 </script>
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index e0a18830..317f0451 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -136,7 +136,6 @@
 			</small>
 		</div>
 		<hk-loader v-else name="tiers" />
-		{{ discount }}
 	</div>
 </template>