From 5ecc11a083150bd097b52dac7c887500b8c842f5 Mon Sep 17 00:00:00 2001
From: Ashley <admin@ashleybailey.me>
Date: Wed, 18 Oct 2023 22:09:57 +0100
Subject: [PATCH] feat: Add live support functionality

This commit adds live support functionality to the Support page. Users can now initiate a support session by clicking the "Start Support Session" button. The support session is facilitated by a Wizarr assistant who will guide users through any issues or questions they may have. Paying members can access this feature. If a user is not a paying member, they will be redirected to the membership page. The support session can be ended by closing the widget or submitting the offline form.
---
 .../src/modules/settings/pages/Support.vue    | 69 +++++++++++++++----
 1 file changed, 55 insertions(+), 14 deletions(-)

diff --git a/frontend/src/modules/settings/pages/Support.vue b/frontend/src/modules/settings/pages/Support.vue
index fd74c54a8..27acc7813 100644
--- a/frontend/src/modules/settings/pages/Support.vue
+++ b/frontend/src/modules/settings/pages/Support.vue
@@ -1,9 +1,11 @@
 <template>
-    <div class="flex flex-col space-y-4">
-        <p class="text-gray-500 dark:text-gray-300">
-            {{ __("We're here to help you with any issues or questions you may have. If you require assistance, paying members can use the button below to begin a live support session with a Wizarr assistant and we will attempt to guide you through any issues you may be having and resolve them.") }}
-        </p>
-        <FormKit type="button" @click="startSupportSession">
+    <div class="flex flex-col space-y-4" :class="bordered">
+        <div class="flex flex-col space-y-1">
+            <span class="text-md font-semibold text-gray-900 dark:text-white">{{ __("Live Support") }}</span>
+            <p class="text-gray-500 dark:text-gray-300">{{ __("We're here to help you with any issues or questions you may have. If you require assistance, paying members can use the button below to begin a live support session with a Wizarr assistant and we will attempt to guide you through any issues you may be having and resolve them.") }}</p>
+        </div>
+        <hr class="border-gray-200 dark:border-gray-700" />
+        <FormKit type="button" @click="startSupportSession" :disabled="!livechat_api" :classes="{ wrapper: 'flex justify-end' }">
             {{ __("Start Support Session") }}
         </FormKit>
     </div>
@@ -11,35 +13,74 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { useThemeStore } from "@/stores/theme";
 import { useUserStore } from "@/stores/user";
 import { mapState } from "pinia";
 
+import jwtDecode from "jwt-decode";
+
 export default defineComponent({
     name: "Support",
+    data() {
+        return {
+            livechat_api: this.$config("livechat_api"),
+            valid_membership: false,
+        };
+    },
     computed: {
-        ...mapState(useUserStore, ["user"]),
+        bordered() {
+            return !this.boxView ? "p-6 border border-gray-200 dark:border-gray-700 rounded" : "";
+        },
+        ...mapState(useThemeStore, ["boxView"]),
+        ...mapState(useUserStore, ["user", "membership"]),
+    },
+    watch: {
+        membership: {
+            immediate: true,
+            handler(membership) {
+                this.valid_membership = membership?.token ? jwtDecode(membership.token) : false;
+            },
+            deep: true,
+        },
     },
     methods: {
+        sessionFinished(support: any) {
+            support.closeWidget();
+            document.querySelector(".rocketchat-widget")?.remove();
+            this.$toast.info(this.__("Support session ended"));
+        },
         async startSupportSession() {
+            // Check if membership is valid
+            if (!this.valid_membership) {
+                // Warn user that they need to be a paying member to use this feature
+                await this.$modal.confirmModal(this.__("Membership Required"), this.__("You must be a paying member to use this feature."), { confirmButtonText: this.__("Okay"), disableCancelButton: true });
+
+                // Redirect to membership page
+                this.$router.push("/admin/settings/membership");
+
+                // Don't continue
+                return;
+            }
+
             // Confirm with user that they wish to start a support session
-            const confirm = await this.$modal.confirmModal(this.__("Start Support Session"), this.__("Are you sure you wish to start a support session?"), { confirmButtonText: this.__("Yes") });
+            const confirm = await this.$modal.confirmModal(this.__("Start Support Session"), this.__("Are you sure you want to start a support session?"), { confirmButtonText: this.__("Yes") });
 
             // If user doesn't confirm, don't continue
             if (!confirm) return;
 
             // Redirect to support page
-            const support = new this.$RocketChat("https://livechat.wizarr.dev");
+            const support = new this.$RocketChat(this.livechat_api);
 
+            // Set guest details
             support.setGuestName(this.user?.display_name ?? "Unknown");
             support.setGuestEmail(this.user?.email ?? "Unknown");
+            support.setGuestToken(this.membership?.token ?? "Unknown");
 
-            // // Open support session
+            // Open support session
             support.maximizeWidget();
-            support.onChatEnded(() => {
-                support.closeWidget();
-                document.getElementsByClassName("rocketchat-widget")[0].remove();
-                this.$toast.info(this.__("Support session ended"));
-            });
+            support.onChatEnded(() => this.sessionFinished(support));
+            support.onOfflineFormSubmit(() => this.sessionFinished(support));
+            support.onChatMinimized(() => this.sessionFinished(support));
         },
     },
 });