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.

frontend/src/modules/settings/pages/Support.vue

@@ -1,45 +1,86 @@
 <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>
 </template>
 
 <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));
  },
  },
 });