From 30ed47d3fbf741b39e049bc6ea73780c0bc7c36e Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Wed, 4 Sep 2024 15:24:31 +0200
Subject: [PATCH] add trial banners and unblock member invite modal during
 trial

---
 resources/js/Components/Banner.vue            |  24 +---
 .../js/Components/Billing/BillingBanner.vue   | 120 ++++++++++++++++++
 .../Common/Member/MemberInviteModal.vue       |  20 ++-
 resources/js/Layouts/AppLayout.vue            |   2 +
 resources/js/utils/billing.ts                 |  23 ++++
 5 files changed, 166 insertions(+), 23 deletions(-)
 create mode 100644 resources/js/Components/Billing/BillingBanner.vue

diff --git a/resources/js/Components/Banner.vue b/resources/js/Components/Banner.vue
index ba88be2c..0bf1c1dd 100644
--- a/resources/js/Components/Banner.vue
+++ b/resources/js/Components/Banner.vue
@@ -26,22 +26,14 @@ watchEffect(async () => {
     <div>
         <div
             v-if="show && message"
-            :class="{
-                'bg-indigo-500': style == 'success',
-                'bg-red-700': style == 'danger',
-            }">
-            <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
+            class="bg-secondary border-b border-border-secondary">
+            <div class="mx-auto py-1 px-3 sm:px-6 lg:px-8">
                 <div class="flex items-center justify-between flex-wrap">
                     <div class="w-0 flex-1 flex items-center min-w-0">
-                        <span
-                            class="flex p-2 rounded-lg"
-                            :class="{
-                                'bg-indigo-600': style == 'success',
-                                'bg-red-600': style == 'danger',
-                            }">
+                        <span class="flex">
                             <svg
                                 v-if="style == 'success'"
-                                class="h-5 w-5 text-white"
+                                class="h-6 w-6 text-text-secondary"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
                                 viewBox="0 0 24 24"
@@ -76,13 +68,7 @@ watchEffect(async () => {
                     <div class="shrink-0 sm:ms-3">
                         <button
                             type="button"
-                            class="-me-1 flex p-2 rounded-md focus:outline-none sm:-me-2 transition"
-                            :class="{
-                                'hover:bg-indigo-600 focus:bg-indigo-600':
-                                    style == 'success',
-                                'hover:bg-red-600 focus:bg-red-600':
-                                    style == 'danger',
-                            }"
+                            class="-me-1 flex p-2 rounded-md focus:outline-none sm:-me-2 transition hover:bg-tertiary focus:bg-tertiary"
                             aria-label="Dismiss"
                             @click.prevent="show = false">
                             <svg
diff --git a/resources/js/Components/Billing/BillingBanner.vue b/resources/js/Components/Billing/BillingBanner.vue
new file mode 100644
index 00000000..bbaf3440
--- /dev/null
+++ b/resources/js/Components/Billing/BillingBanner.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import MainContainer from '@/packages/ui/src/MainContainer.vue';
+import {
+    CheckBadgeIcon,
+    XMarkIcon,
+    XCircleIcon,
+} from '@heroicons/vue/16/solid';
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { isBlocked, isFreePlan, isInTrial } from '@/utils/billing';
+import { useSessionStorage } from '@vueuse/core';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+
+const hideTrialBanner = useSessionStorage(
+    'showTrialBanner-' + getCurrentOrganizationId(),
+    false
+);
+const showTrialBanner = computed(() => isInTrial() && !hideTrialBanner.value);
+const hideBlockedBanner = useSessionStorage(
+    'showBlockedBanner-' + getCurrentOrganizationId(),
+    false
+);
+const showBlockedBanner = computed(
+    () => isBlocked() && !hideBlockedBanner.value
+);
+const hideFreeUpgradeBanner = useSessionStorage(
+    'showFreeUpgradeBanner-' + getCurrentOrganizationId(),
+    false
+);
+const showFreeUpgradeBanner = computed(
+    () => isFreePlan() && !isBlocked() && !hideFreeUpgradeBanner.value
+);
+</script>
+
+<template>
+    <div
+        v-if="showTrialBanner"
+        class="bg-accent-600/50 text-sm py-0.5 border-b border-border-secondary">
+        <MainContainer class="flex items-center justify-between">
+            <div class="flex items-center space-x-1.5">
+                <CheckBadgeIcon class="w-4 text-white/50"></CheckBadgeIcon>
+                <span class="font-medium"> Your trial expires in X days. </span>
+                <span>
+                    To continue using all features & support the development of
+                    solidtime, please upgrade your plan.
+                </span>
+            </div>
+            <div class="flex items-center space-x-2">
+                <Link href="/billing">
+                    <div
+                        class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
+                        <span>Upgrade now</span>
+                    </div>
+                </Link>
+                <button @click="showTrialBanner = false" class="p-1">
+                    <XMarkIcon
+                        class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
+                </button>
+            </div>
+        </MainContainer>
+    </div>
+    <div
+        v-if="showBlockedBanner"
+        class="bg-red-600/50 text-sm py-0.5 border-b border-border-secondary">
+        <MainContainer class="flex items-center justify-between">
+            <div class="flex items-center space-x-1.5">
+                <XCircleIcon class="w-4 text-white/50"></XCircleIcon>
+                <span class="font-medium">
+                    Your organization is currently blocked.
+                </span>
+                <span>
+                    Please upgrade to a premium plan or remove all users except
+                    the owner to unblock your organization.
+                </span>
+            </div>
+            <div class="flex items-center space-x-2">
+                <Link href="/billing">
+                    <div
+                        class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
+                        <span>Upgrade now</span>
+                    </div>
+                </Link>
+                <button @click="showBlockedBanner = false" class="p-1">
+                    <XMarkIcon
+                        class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
+                </button>
+            </div>
+        </MainContainer>
+    </div>
+    <div
+        v-if="showFreeUpgradeBanner"
+        class="bg-tertiary text-sm py-0.5 border-b border-border-secondary">
+        <MainContainer class="flex items-center justify-between">
+            <div class="flex items-center space-x-1.5">
+                <XCircleIcon class="w-4 text-white/50"></XCircleIcon>
+                <span class="font-medium">
+                    Your are currently using the Free Plan.
+                </span>
+                <span
+                    >To unlock all premium features & support the development of
+                    solidtime, please upgrade your plan.</span
+                >
+            </div>
+            <div class="flex items-center space-x-2">
+                <Link href="/billing">
+                    <div
+                        class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
+                        <span>Upgrade now</span>
+                    </div>
+                </Link>
+                <button @click="showFreeUpgradeBanner = false" class="p-1">
+                    <XMarkIcon
+                        class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
+                </button>
+            </div>
+        </MainContainer>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Member/MemberInviteModal.vue b/resources/js/Components/Common/Member/MemberInviteModal.vue
index 0dcbaefb..5e6f01eb 100644
--- a/resources/js/Components/Common/Member/MemberInviteModal.vue
+++ b/resources/js/Components/Common/Member/MemberInviteModal.vue
@@ -2,7 +2,7 @@
 import TextInput from '@/packages/ui/src/Input/TextInput.vue';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
@@ -11,7 +11,11 @@ import type { Role } from '@/types/jetstream';
 import { Link, useForm } from '@inertiajs/vue3';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { filterRoles } from '@/utils/roles';
-import { hasActiveSubscription, isBillingActivated } from '@/utils/billing';
+import {
+    hasActiveSubscription,
+    isBillingActivated,
+    isInTrial,
+} from '@/utils/billing';
 import { CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
 import { canUpdateOrganization } from '@/utils/permissions';
 import { api } from '@/packages/api/src';
@@ -80,6 +84,14 @@ async function submit() {
 
 const clientNameInput = ref<HTMLInputElement | null>(null);
 useFocus(clientNameInput, { initialValue: true });
+
+const inviteMembersIsAllowed = computed(() => {
+    return (
+        !isBillingActivated() ||
+        (isBillingActivated() && hasActiveSubscription()) ||
+        (isBillingActivated() && isInTrial())
+    );
+});
 </script>
 
 <template>
@@ -91,7 +103,7 @@ useFocus(clientNameInput, { initialValue: true });
         </template>
 
         <template #content>
-            <div v-if="isBillingActivated() && !hasActiveSubscription()">
+            <div v-if="!inviteMembersIsAllowed">
                 <div
                     class="rounded-full flex items-center justify-center w-20 h-20 mx-auto border border-border-tertiary bg-secondary">
                     <UserGroupIcon class="w-12"></UserGroupIcon>
@@ -201,7 +213,7 @@ useFocus(clientNameInput, { initialValue: true });
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
             <PrimaryButton
-                v-if="!isBillingActivated() || hasActiveSubscription()"
+                v-if="inviteMembersIsAllowed"
                 class="ms-3"
                 :class="{ 'opacity-25': saving }"
                 :disabled="saving"
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 28c55c82..af5e7500 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -34,6 +34,7 @@ import type { User } from '@/types/models';
 import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
 import { fetchToken, isTokenValid } from '@/utils/session';
 import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
+import BillingBanner from '@/Components/Billing/BillingBanner.vue';
 
 defineProps({
     title: String,
@@ -217,6 +218,7 @@ const page = usePage<{
             <Head :title="title" />
 
             <Banner />
+            <BillingBanner v-if="isBillingActivated()" />
 
             <div
                 class="min-h-screen bg-default-background border-l border-default-background-separator">
diff --git a/resources/js/utils/billing.ts b/resources/js/utils/billing.ts
index 948739e0..b5119872 100644
--- a/resources/js/utils/billing.ts
+++ b/resources/js/utils/billing.ts
@@ -8,6 +8,29 @@ export function isBillingActivated() {
     return page.props.has_billing_extension;
 }
 
+export function isInTrial() {
+    const page = usePage<{
+        billing: {
+            has_trial: boolean;
+        };
+    }>();
+
+    return page.props.billing.has_trial;
+}
+export function isBlocked() {
+    const page = usePage<{
+        billing: {
+            is_blocked: boolean;
+        };
+    }>();
+
+    return page.props.billing.is_blocked;
+}
+
+export function isFreePlan() {
+    return !hasActiveSubscription() && !isInTrial();
+}
+
 export function hasActiveSubscription() {
     const page = usePage<{
         billing: {