Added featurebase (#344)

2024-03-12 12:43:17 +01:00 · 2024-03-12 12:43:17 +01:00 · 18afd44664
parent 5b01b538de
commit 18afd44664
7 changed files with 104 additions and 9 deletions
--- a/README.md
+++ b/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>
--- a/client/app.vue
+++ b/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()
--- a/client/components/global/Navbar.vue
+++ b/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">
-                      <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 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">
+                      <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()
--- a/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
+++ b/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"
    />
--- a/client/components/vendor/FeatureBase.vue
+++ b/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>
--- a/client/opnform.config.js
+++ b/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/",
-    "roadmap": "https://opnform.featurebase.app/roadmap",
+    "feature_requests": "https://feedback.opnform.com/",
+    "changelog_url": "https://feedback.opnform.com/changelog",
+    "roadmap": "https://feedback.opnform.com/roadmap",
  }
 }
--- a/client/runtimeConfig.js
+++ b/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,