From 7d1c52e2814b3e2866df0c0a115773b05bf0edde Mon Sep 17 00:00:00 2001
From: robinbraemer <robin.braemer@web.de>
Date: Thu, 29 Feb 2024 19:30:00 +0100
Subject: [PATCH] docs(pricing): Launch Plus plan!

---
 .../theme/components/plans/countdown.vue      | 45 +++++++++++++++++++
 .../theme/components/plans/settings.ts        | 15 +++++++
 .../plans/two_tiers_with_emphasized_tier.vue  | 19 +++++---
 .../plans/with_comparison_table_on_dark.vue   | 14 +++---
 4 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 .web/docs/.vitepress/theme/components/plans/countdown.vue
 create mode 100644 .web/docs/.vitepress/theme/components/plans/settings.ts

diff --git a/.web/docs/.vitepress/theme/components/plans/countdown.vue b/.web/docs/.vitepress/theme/components/plans/countdown.vue
new file mode 100644
index 0000000..08a2d6d
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/plans/countdown.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <span>{{ days }} days </span>
+    <span>{{ hours }} hours </span>
+    <span>{{ minutes }} minutes </span>
+    <span>{{ seconds }} seconds </span>
+  </div>
+</template>
+
+<script>
+import { ref, onUnmounted } from 'vue';
+
+export default {
+  props: {
+    endTime: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const endTime = new Date(props.endTime).getTime();
+    const now = Date.now();
+    const timeLeft = ref((endTime - now) / 1000);
+
+    const days = ref(Math.floor(timeLeft.value / (60 * 60 * 24)));
+    const hours = ref(Math.floor((timeLeft.value % (60 * 60 * 24)) / (60 * 60)));
+    const minutes = ref(Math.floor((timeLeft.value % (60 * 60)) / 60));
+    const seconds = ref(Math.floor(timeLeft.value % 60));
+
+    const interval = setInterval(() => {
+      timeLeft.value -= 1;
+      days.value = Math.floor(timeLeft.value / (60 * 60 * 24));
+      hours.value = Math.floor((timeLeft.value % (60 * 60 * 24)) / (60 * 60));
+      minutes.value = Math.floor((timeLeft.value % (60 * 60)) / 60);
+      seconds.value = Math.floor(timeLeft.value % 60);
+    }, 1000);
+
+    onUnmounted(() => {
+      clearInterval(interval);
+    });
+
+    return { days, hours, minutes, seconds };
+  }
+};
+</script>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/plans/settings.ts b/.web/docs/.vitepress/theme/components/plans/settings.ts
new file mode 100644
index 0000000..c3c7c09
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/plans/settings.ts
@@ -0,0 +1,15 @@
+export const plans = {
+    plus: {
+        price: '$10',
+        href: 'https://app.minekube.com/:org/checkout?plan=plus',
+        ctaText: 'Upgrade to Plus'
+    }
+}
+
+const endTime = "2024-03-31T23:59:59"
+export const discount = {
+  active: new Date() < new Date(endTime),
+  endTime: endTime,
+  price: '$5',
+  note: 'This is our Plus plan launch discount!'
+}
diff --git a/.web/docs/.vitepress/theme/components/plans/two_tiers_with_emphasized_tier.vue b/.web/docs/.vitepress/theme/components/plans/two_tiers_with_emphasized_tier.vue
index a6a733a..9c81d78 100644
--- a/.web/docs/.vitepress/theme/components/plans/two_tiers_with_emphasized_tier.vue
+++ b/.web/docs/.vitepress/theme/components/plans/two_tiers_with_emphasized_tier.vue
@@ -12,10 +12,16 @@
       <div v-for="(tier, tierIdx) in tiers" :key="tier.id" :class="[tier.featured ? 'dark relative bg-red-950 shadow-2xl' : 'dark:bg-transparent/60 bg-[--vp-c-default-soft] sm:mx-8 lg:mx-0', tier.featured ? '' : tierIdx === 0 ? 'rounded-t-3xl sm:rounded-b-none lg:rounded-tr-none lg:rounded-bl-3xl' : 'sm:rounded-t-none lg:rounded-tr-3xl lg:rounded-bl-none', 'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10']">
         <h3 :id="tier.id" :class="[tier.featured ? 'text-[--vp-c-brand-2]' : 'text-[--vp-c-brand-2]', 'text-base font-semibold leading-7']">{{ tier.name }}</h3>
         <p class="mt-4 flex items-baseline gap-x-2">
-          <span :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-1]', 'text-5xl font-bold tracking-tight']">{{ tier.priceMonthly }}</span>
+          <span v-if="!(discount.active && tier.featured)" :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-1]', 'text-5xl font-bold tracking-tight']">{{ tier.priceMonthly }}</span>
+          <span v-if="discount.active && tier.featured" class="text-red-500 text-5xl font-bold tracking-tight">{{ discount.price }}</span>
+          <span v-if="discount.active && tier.featured" class="text-[--vp-c-text-1] line-through text-xl font-bold tracking-tight">{{ tier.priceMonthly }}</span>
           <span :class="[tier.featured ? 'text-[--vp-c-text-2]' : 'text-[--vp-c-text-3]', 'text-base']">/month</span>
         </p>
-        <p :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-2]', 'mt-6 text-base leading-7']">{{ tier.description }}</p>
+        <div v-if="discount.active && tier.featured" class="mt-4 p-1">
+          <countdown :end-time="discount.endTime" class="text-red-400 text-lg font-bold" />
+          <p class="text-[--vp-c-text-1]">{{ discount.note }}</p>
+        </div>
+         <p :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-2]', 'mt-6 text-base leading-7']">{{ tier.description }}</p>
         <ul role="list" :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-2]', 'mt-8 space-y-3 text-sm leading-6 sm:mt-10']">
           <li v-for="feature in tier.features" :key="feature" class="flex gap-x-3">
             <svg :class="[tier.featured ? 'text-[--vp-c-brand-2]' : 'text-[--vp-c-brand-2]', 'h-6 w-5 flex-none']" class="h-6 w-5 flex-none text-[--vp-c-brand-2]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -31,6 +37,9 @@
 </template>
 
 <script setup>
+import Countdown from "./countdown.vue";
+import {discount, plans} from "./settings";
+
 const tiers = [
   {
     name: 'Free for everyone forever',
@@ -50,9 +59,9 @@ const tiers = [
   {
     name: 'Plus',
     id: 'tier-plus',
-    href: 'https://minekube.com/discord',
-    ctaText: 'Plus is coming soon',
-    priceMonthly: '$5',
+    href: plans.plus.href,
+    ctaText: plans.plus.ctaText,
+    priceMonthly: plans.plus.price,
     description: 'Enhance branding and unlock features to scale your project. Everything in Free, plus:',
     features: [
       'Opt-out of Browser Hub fallback',
diff --git a/.web/docs/.vitepress/theme/components/plans/with_comparison_table_on_dark.vue b/.web/docs/.vitepress/theme/components/plans/with_comparison_table_on_dark.vue
index 87d4463..63a01d1 100644
--- a/.web/docs/.vitepress/theme/components/plans/with_comparison_table_on_dark.vue
+++ b/.web/docs/.vitepress/theme/components/plans/with_comparison_table_on_dark.vue
@@ -12,7 +12,7 @@
         <section v-for="tier in tiers" :key="tier.id" :class="[tier.mostPopular ? 'rounded-xl bg-white/5 ring-1 ring-inset ring-white/10' : '', 'p-8']">
           <h3 :id="tier.id" class="text-sm font-semibold leading-6 text-[--vp-c-text-1]">{{ tier.name }}</h3>
           <p class="mt-2 flex items-baseline gap-x-1">
-            <span class="text-4xl font-bold text-[--vp-c-text-1]">{{ tier.priceMonthly }}</span>
+            <span :class="[tier !== tiers[0] && discount.active ? 'text-red-500' : '', 'text-4xl font-bold text-[--vp-c-text-1]']">{{ tier !== tiers[0] && discount.active ? discount.price : tier.priceMonthly }}</span>
             <span class="text-sm font-semibold text-[--vp-c-text-1]">/month</span>
           </p>
           <a :href="tier.href" :aria-describedby="tier.id" :class="[tier.mostPopular ? 'bg-indigo-500 text-[--vp-c-text-1] hover:bg-indigo-400 focus-visible:outline-indigo-500' : 'bg-white/10 text-[--vp-c-text-1] hover:bg-white/20 focus-visible:outline-white', 'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2']">{{ tier.ctaText || 'Buy plan' }}</a>
@@ -69,7 +69,7 @@
                 <th scope="row"><span class="sr-only">Price</span></th>
                 <td v-for="tier in tiers" :key="tier.id" class="px-6 pt-2 xl:px-8">
                   <div class="flex items-baseline gap-x-1 text-[--vp-c-text-1]">
-                    <span class="text-4xl font-bold">{{ tier.priceMonthly }}</span>
+                    <span :class="[tier !== tiers[0] && discount.active ? 'text-red-500' : '', 'text-4xl font-bold']">{{ tier !== tiers[0] && discount.active ? discount.price : tier.priceMonthly }}</span>
                     <span class="text-sm font-semibold leading-6">/month</span>
                   </div>
                   <a :href="tier.href" :class="[tier.mostPopular ? 'bg-black text-white dark:bg-white dark:text-black dark:hover:bg-red-600 hover:bg-red-600 dark:hover:text-[--vp-c-text-1] focus-visible:outline-indigo-600' : 'bg-[--vp-button-brand-bg] text-[--vp-button-brand-text] hover:bg-[--vp-button-brand-hover-bg] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--vp-button-brand-active-bg]', 'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 text-[--vp-c-text-1] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2']">{{ tier.ctaText || 'Buy plan' }}</a>
@@ -112,7 +112,7 @@
 </template>
 
 <script setup>
-// import { CheckIcon, MinusIcon } from '@vue-hero-icons/solid/icons'
+import {discount, plans} from "./settings";
 
 const tiers = [
   {
@@ -127,9 +127,9 @@ const tiers = [
   {
     name: 'Plus',
     id: 'tier-plus-table',
-    ctaText: 'Coming soon',
-    href: 'https://minekube.com/discord',
-    priceMonthly: '$5',
+    ctaText: plans.plus.ctaText,
+    href: plans.plus.href,
+    priceMonthly: plans.plus.price,
     description: 'Quis eleifend a tincidunt pellentesque. A tempor in sed.',
     mostPopular: true,
   },
@@ -137,7 +137,7 @@ const tiers = [
   //   name: 'Enterprise',
   //   id: 'tier-enterprise',
   //   href: '#',
-  //   priceMonthly: '$59',
+  //   priceMonthly: '$109',
   //   description: 'Orci volutpat ut sed sed neque, dui eget. Quis tristique non.',
   //   mostPopular: false,
   // },