Added featurebase (#344)

README.md

@@ -15,7 +15,7 @@
 <a href="https://github.com/JhumanJ/OpnForm/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License">
 <a href="https://github.com/JhumanJ/OpnForm/issues/new"><img src="https://img.shields.io/badge/Report a bug-Github-%231F80C0" alt="Report a bug"></a>
 <a href="https://github.com/JhumanJ/OpnForm/discussions/new?category=q-a"><img src="https://img.shields.io/badge/Ask a question-Github-%231F80C0" alt="Ask a question"></a>
-<a href="https://opnform.featurebase.app/"><img src="https://img.shields.io/badge/Feature request-Featurebase-%231F80C0" alt="Ask a question"></a>
+<a href="https://feedback.opnform.com"><img src="https://img.shields.io/badge/Feature request-Featurebase-%231F80C0" alt="Ask a question"></a>
 <a href="https://discord.gg/YTSjU2a9TS"><img src="https://dcbadge.vercel.app/api/server/YTSjU2a9TS?style=flat" alt="Ask a question"></a>
 <a href="https://console.algora.io/org/OpnForm/bounties?status=open"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2FOpnForm%2Fbounties%3Fstatus%3Dopen" alt="Open Bounties"></a>
 <a href="https://console.algora.io/org/OpnForm/bounties?status=completed"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2FOpnForm%2Fbounties%3Fstatus%3Dcompleted" alt="Rewarded Bounties"></a>

client/app.vue

@@ -29,19 +29,21 @@
     <ToolsStopImpersonation/>
 
     <Notifications />
+    <feature-base/>
   </div>
 </template>
 
 <script>
 import {computed} from 'vue'
 import {useAppStore} from '~/stores/app'
+import FeatureBase from "~/components/vendor/FeatureBase.vue";
 
 export default {
   el: '#app',
 
   name: 'OpnForm',
 
-  components: {},
+  components: {FeatureBase},
 
   setup() {
     const config = useRuntimeConfig()

client/components/global/Navbar.vue

@@ -16,7 +16,19 @@
           >
             Templates
           </NuxtLink>
-          <NuxtLink v-if="$route.name !== 'ai-form-builder'" :to="{name:'ai-form-builder'}"
+          <template v-if="featureBaseEnabled">
+            <button v-if="user" @click.prevent="openChangelog"
+                    class="text-sm text-gray-600 dark:text-white hidden sm:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
+            >
+              What's new? <span id="fb-update-badge"></span>
+            </button>
+            <a :href="opnformConfig.links.changelog_url" target="_blank" v-else
+               class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
+            >
+              What's new?
+            </a>
+          </template>
+          <NuxtLink v-if="$route.name !== 'ai-form-builder' && user === null" :to="{name:'ai-form-builder'}"
                     class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
           >
             AI Form Builder
@@ -103,8 +115,10 @@
                   <NuxtLink :to="{ name: 'settings-admin' }" v-if="user.moderator"
                             class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+                         stroke="currentColor" class="w-4 h-4 mr-2">
+                      <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
                     </svg>
                     Admin
                   </NuxtLink>
@@ -190,6 +204,9 @@ export default {
     paidPlansEnabled() {
       return this.config.public.paidPlansEnabled
     },
+    featureBaseEnabled() {
+      return this.config.public.featureBaseOrganization !== null
+    },
     showAuth() {
       return this.$route.name && this.$route.name !== 'forms-slug'
     },
@@ -217,6 +234,10 @@ export default {
   },
 
   methods: {
+    openChangelog() {
+      if (process.server) return
+      window.Featurebase('manually_open_changelog_popup')
+    },
     async logout() {
       // Log out the user.
       this.authStore.logout()

client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -36,7 +36,7 @@
     </h5>
     <select-input :key="resetKey" v-model="logic.actions" name="actions"
                   :multiple="true" class="mt-1" placeholder="Actions..."
-                  help="Action(s) triggerred when above conditions are true"
+                  help="Action(s) triggered when above conditions are true"
                   :options="actionOptions"
                   @update:model-value="onActionInput"
     />

client/components/vendor/FeatureBase.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {onMounted} from "vue";
+
+const scriptLoaded = ref(false);
+const user = computed(() => useAuthStore().user);
+const featureBaseOrganization = useRuntimeConfig().public.featureBaseOrganization;
+
+const loadScript = () => {
+  if (scriptLoaded.value || !user.value || !featureBaseOrganization) return;
+  const script = document.createElement("script");
+  script.src = "https://do.featurebase.app/js/sdk.js";
+  script.id = "featurebase-sdk";
+  document.head.appendChild(script);
+  scriptLoaded.value = true;
+};
+
+const setupForUser = () => {
+  if (process.server || !user.value || !featureBaseOrganization) return
+  window.Featurebase(
+    "identify",
+    {
+      organization: featureBaseOrganization,
+      email: user.value.email,
+      name: user.value.name,
+      id: user.value.id.toString(),
+      profilePicture: user.value.photo_url
+    }
+  );
+
+  window.Featurebase("initialize_changelog_widget", {
+    organization: featureBaseOrganization,
+    placement: "right",
+    theme: "light",
+    alwaysShow: true,
+    fullscreenPopup: true,
+    usersName: user.value?.name
+  })
+
+  window.Featurebase("initialize_feedback_widget", {
+    organization: featureBaseOrganization,
+    theme: "light",
+    placement: "right",
+    email: user.value?.email,
+    usersName: user.value?.name
+  });
+}
+
+onMounted(() => {
+  if (process.server) return
+
+  // Setup base
+  if (!window.hasOwnProperty('Featurebase') || typeof window.Featurebase !== "function") {
+    window.Featurebase = function () {
+      (window.Featurebase.q = window.Featurebase.q || []).push(arguments);
+    };
+  }
+
+  if (!user.value) return
+  loadScript()
+  setupForUser()
+})
+
+watch(user, (val) => {
+  if (process.server || !val) return
+
+  loadScript()
+  setupForUser()
+});
+
+</script>
+<template></template>

client/opnform.config.js

@@ -8,14 +8,14 @@ export default {
   "links": {
     "help_url": "https://github.com/JhumanJ/OpnForm/discussions",
     "helpdesk_sitemap_url": "https://notionforms.crisp.help/sitemap.xml",
-    "changelog_url": "https://opnform.canny.io/changelog",
     "github_url": "https://github.com/JhumanJ/OpnForm",
     "github_forum_url": "https://github.com/JhumanJ/OpnForm/discussions",
     'discord': 'https://discord.gg/YTSjU2a9TS',
     "twitter": "https://twitter.com/OpnForm",
     "zapier_integration": "https://zapier.com/developer/public-invite/146950/58db583730cc46b821614468d94c35de/",
     "book_onboarding": "https://zcal.co/i/YQVGEULQ",
-    "feature_requests": "https://opnform.featurebase.app/",
+    "feature_requests": "https://feedback.opnform.com/",
-    "roadmap": "https://opnform.featurebase.app/roadmap",
+    "changelog_url": "https://feedback.opnform.com/changelog",
+    "roadmap": "https://feedback.opnform.com/roadmap",
   }
 }

client/runtimeConfig.js

@@ -13,6 +13,7 @@ export default {
     paidPlansEnabled: process.env.NUXT_PUBLIC_PAID_PLANS_ENABLED || false,
     customDomainsEnabled: process.env.NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED || false,
     useDummyImageProvider: process.env.NUXT_PUBLIC_IMAGE_OPTIMIZATION_DISABLED || false,
+    featureBaseOrganization: process.env.NUXT_PUBLIC_FEATURE_BASE_ORGANISATION || null,
 
     // Config within public will be also exposed to the client
     SENTRY_DSN_PUBLIC: process.env.SENTRY_DSN_PUBLIC,