Add Formbricks Product-Market-Fit widget

frontend/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@cubejs-client/core": "^0.31.0",
     "@cubejs-client/vue3": "^0.31.0",
+    "@formbricks/pmf": "^0.1.1",
     "@nangohq/pizzly-frontend": "^0.4.0",
     "@octokit/core": "^3.5.1",
     "@tailwindcss/postcss7-compat": "^2.2.17",

frontend/scripts/docker-entrypoint.sh

@@ -27,6 +27,7 @@ declare -a ENV_VARIABLES=(
   "VUE_APP_TYPEFORM_TITLE"
   "VUE_APP_FORMBRICKS_URL"
   "VUE_APP_FORMBRICKS_FORM_ID"
+  "VUE_APP_FORMBRICKS_PMF_FORM_ID"
   "VUE_APP_STRIPE_GROWTH_PLAN_PAYMENT_LINK"
   "VUE_APP_STRIPE_CUSTOMER_PORTAL_LINK"
 )

frontend/src/config.js

@@ -42,7 +42,8 @@ const defaultConfig = {
   },
   formbricks: {
     url: process.env.VUE_APP_FORMBRICKS_URL,
-    formId: process.env.VUE_APP_FORMBRICKS_FORM_ID
+    formId: process.env.VUE_APP_FORMBRICKS_FORM_ID,
+    pmfFormId: process.env.VUE_APP_FORMBRICKS_PMF_FORM_ID
   },
   stripe: {
     publishableKey:
@@ -86,7 +87,8 @@ const composedConfig = {
   },
   formbricks: {
     url: 'CROWD_VUE_APP_FORMBRICKS_URL',
-    formId: 'CROWD_VUE_APP_FORMBRICKS_FORM_ID'
+    formId: 'CROWD_VUE_APP_FORMBRICKS_FORM_ID',
+    pmfFormId: 'CROWD_VUE_APP_FORMBRICKS_PMF_FORM_ID'
   },
   stripe: {
     publishableKey:

frontend/src/modules/layout/components/layout.vue

@@ -96,18 +96,16 @@
                 Could you help us by answering a quick
                 survey? 😄
                 <button
-                  :data-tf-popup="typeformData.id"
-                  :data-tf-iframe-props="`title=${typeformData.title}`"
                   data-tf-medium="snippet"
                   class="btn btn--sm btn--primary ml-4"
-                  @click="hideTypeform()"
+                  @click="toggleShowPmfSurvey()"
                 >
                   Take survey
                 </button>
               </div>
               <div class="flex-1">
                 <div class="w-20 ml-auto">
-                  <button @click="hideTypeform()">
+                  <button @click="hidePmfAsk()">
                     <i
                       class="ri-close-line text-gray-700"
                     ></i>
@@ -121,9 +119,41 @@
       </el-main>
     </el-container>
   </el-container>
+  <!-- PMF Modal -->
+  <div
+    v-if="showPmfSurvey"
+    class="relative z-10"
+    aria-labelledby="modal-title"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div
+      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+    ></div>
+
+    <div class="fixed inset-0 z-10 overflow-y-auto">
+      <div
+        class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0"
+      >
+        <div
+          class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 w-96"
+          @click="(e) => e.stopPropagation()"
+        >
+          <button
+            class="absolute right-3 top-3"
+            @click="toggleShowPmfSurvey()"
+          >
+            <i class="ri-close-line text-gray-700"></i>
+          </button>
+          <div id="formbricks-pmf-container"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { useStore } from 'vuex'
 import { TenantService } from '@/modules/tenant/tenant-service'
 import { mapActions, mapGetters } from 'vuex'
 import Banner from '@/shared/banner/banner.vue'
@@ -143,13 +173,10 @@ export default {
     return {
       fetchIntegrationTimer: null,
       loading: false,
-      hideTypeformBanner: localStorage.getItem(
-        `hideTypeformBanner-${config.typeformId}`
-      ),
-      typeformData: {
-        id: config.typeformId,
-        title: config.typeformTitle
-      }
+      showPmfSurvey: false,
+      hidePmfBanner: localStorage.getItem(
+        `hidePmfBanner-${config.formbricks.pmfFormId}`
+      )
     }
   },
 
@@ -191,10 +218,19 @@ export default {
       return this.currentTenant.hasSampleData
     },
     shouldShowPMFSurveyAlert() {
+      const timestampSignup = new Date(
+        this.currentUser.createdAt
+      ).getTime()
+      const timeStamp4WeeksAgo =
+        new Date().getTime() - 4 * 7 * 24 * 60 * 60 * 1000
+      const timeStamp2023 = new Date('2023-01-01').getTime()
+
       return (
-        config.typeformId &&
-        config.typeformTitle &&
-        !this.hideTypeformBanner
+        timestampSignup >= timeStamp2023 &&
+        timestampSignup <= timeStamp4WeeksAgo &&
+        config.formbricks.url &&
+        config.formbricks.pmfFormId &&
+        !this.hidePmfBanner
       )
     },
     shouldShowTenantCreatingAlert() {
@@ -226,6 +262,18 @@ export default {
     }
   },
 
+  watch: {
+    // whenever question changes, this function will run
+    showPmfSurvey(newValue) {
+      if (newValue) {
+        setTimeout(() => {
+          window.formbricksPmf.init()
+          window.formbricksPmf.reset()
+        }, 10)
+      }
+    }
+  },
+
   created() {
     if (this.isMobile) {
       this.collapseMenu()
@@ -237,14 +285,44 @@ export default {
   },
 
   async mounted() {
+    const store = useStore()
     identify(this.currentUser)
-    let recaptchaScript = document.createElement('script')
-    recaptchaScript.setAttribute(
-      'src',
-      '//embed.typeform.com/next/embed.js'
-    )
-    document.head.appendChild(recaptchaScript)
     this.initPendo()
+    // formbricks pmf
+    if (
+      config.formbricks.url &&
+      config.formbricks.pmfFormId
+    ) {
+      window.formbricksPmf = {
+        ...window.formbricksPmf,
+        config: {
+          formbricksUrl: config.formbricks.url,
+          formId: config.formbricks.pmfFormId,
+          containerId: 'formbricks-pmf-container',
+          onFinished: () => this.hidePmfAsk(),
+          contact: {
+            name: 'Jonathan',
+            position: 'Co-Founder',
+            imgUrl:
+              'https://avatars.githubusercontent.com/u/41432658?v=4'
+          },
+          customer: {
+            id: store.getters['auth/currentUser'].id,
+            name: store.getters['auth/currentUser']
+              .fullName,
+            email: store.getters['auth/currentUser'].email
+          },
+          style: {
+            brandColor: '#e94f2e',
+            headerBGColor: '#F9FAFB',
+            boxBGColor: '#ffffff',
+            textColor: '#140505',
+            buttonHoverColor: '#F9FAFB'
+          }
+        }
+      }
+      require('@formbricks/pmf')
+    }
   },
 
   unmounted() {
@@ -256,10 +334,18 @@ export default {
       collapseMenu: 'layout/collapseMenu'
     }),
 
-    hideTypeform() {
-      this.hideTypeformBanner = true
+    toggleShowPmfSurvey() {
+      this.showPmfSurvey = !this.showPmfSurvey
+      if (this.showPmfSurvey) {
+        window.formbricksPmf.init()
+        window.formbricksPmf.reset()
+      }
+    },
+
+    hidePmfAsk() {
+      this.hidePmfBanner = true
       localStorage.setItem(
-        `hideTypeformBanner-${config.typeformId}`,
+        `hidePmfBanner-${config.typeformId}`,
         true
       )
     },