From 781862b4bdb1b7eeeae121bf0609a33ab55ed7c8 Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Fri, 27 Jan 2023 15:19:37 +0100
Subject: [PATCH 1/4] replace typeform pmf widget with formbricks pmf widget

---
 frontend/package-lock.json                    |  11 ++
 frontend/package.json                         |   1 +
 frontend/src/config.js                        |   3 +-
 .../src/modules/layout/components/layout.vue  | 132 +++++++++++++++---
 4 files changed, 123 insertions(+), 24 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index aa79aa356c..0b2b267bc5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@cubejs-client/core": "^0.31.0",
         "@cubejs-client/vue3": "^0.31.0",
+        "@formbricks/pmf": "^0.0.8",
         "@nangohq/pizzly-frontend": "^0.4.0",
         "@octokit/core": "^3.5.1",
         "@tailwindcss/postcss7-compat": "^2.2.17",
@@ -1946,6 +1947,11 @@
         "@floating-ui/core": "^1.0.1"
       }
     },
+    "node_modules/@formbricks/pmf": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.0.8.tgz",
+      "integrity": "sha512-OMdh7CICkyx89OkWs4eHs+uHyQZOtDKWjk2wJAph5h/l1SBKmjAx5zZMxOPkP1TUXxOO9ZX79GeduNelkSYKZQ=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -17360,6 +17366,11 @@
         "@floating-ui/core": "^1.0.1"
       }
     },
+    "@formbricks/pmf": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.0.8.tgz",
+      "integrity": "sha512-OMdh7CICkyx89OkWs4eHs+uHyQZOtDKWjk2wJAph5h/l1SBKmjAx5zZMxOPkP1TUXxOO9ZX79GeduNelkSYKZQ=="
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f6af691854..eb65742a82 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@cubejs-client/core": "^0.31.0",
     "@cubejs-client/vue3": "^0.31.0",
+    "@formbricks/pmf": "^0.0.8",
     "@nangohq/pizzly-frontend": "^0.4.0",
     "@octokit/core": "^3.5.1",
     "@tailwindcss/postcss7-compat": "^2.2.17",
diff --git a/frontend/src/config.js b/frontend/src/config.js
index ae4600a4a6..5cbee8302e 100644
--- a/frontend/src/config.js
+++ b/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:
diff --git a/frontend/src/modules/layout/components/layout.vue b/frontend/src/modules/layout/components/layout.vue
index 4a8bc472fb..e506febffa 100644
--- a/frontend/src/modules/layout/components/layout.vue
+++ b/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
       )
     },

From 0fbcda5eb3f4a6bce551c30c4cab067fc75f15ab Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Fri, 3 Feb 2023 15:14:20 +0100
Subject: [PATCH 2/4] update formbricks/pmf package to newer version to solve
 styling conflicts between pmf and feedback widget

---
 frontend/package-lock.json | 14 +++++++-------
 frontend/package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0b2b267bc5..4949d0fb28 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@cubejs-client/core": "^0.31.0",
         "@cubejs-client/vue3": "^0.31.0",
-        "@formbricks/pmf": "^0.0.8",
+        "@formbricks/pmf": "^0.0.9",
         "@nangohq/pizzly-frontend": "^0.4.0",
         "@octokit/core": "^3.5.1",
         "@tailwindcss/postcss7-compat": "^2.2.17",
@@ -1948,9 +1948,9 @@
       }
     },
     "node_modules/@formbricks/pmf": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.0.8.tgz",
-      "integrity": "sha512-OMdh7CICkyx89OkWs4eHs+uHyQZOtDKWjk2wJAph5h/l1SBKmjAx5zZMxOPkP1TUXxOO9ZX79GeduNelkSYKZQ=="
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.0.9.tgz",
+      "integrity": "sha512-kGSf6Fmo5zfzdYpN/L5pCd+GtLiWIx7RTm/XVzfATE+LNVWj9rB4JS6Q/8zTbuBVqtHBCe3gOSMnDCEZwX2xLA=="
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -17367,9 +17367,9 @@
       }
     },
     "@formbricks/pmf": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.0.8.tgz",
-      "integrity": "sha512-OMdh7CICkyx89OkWs4eHs+uHyQZOtDKWjk2wJAph5h/l1SBKmjAx5zZMxOPkP1TUXxOO9ZX79GeduNelkSYKZQ=="
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.0.9.tgz",
+      "integrity": "sha512-kGSf6Fmo5zfzdYpN/L5pCd+GtLiWIx7RTm/XVzfATE+LNVWj9rB4JS6Q/8zTbuBVqtHBCe3gOSMnDCEZwX2xLA=="
     },
     "@hapi/hoek": {
       "version": "9.3.0",
diff --git a/frontend/package.json b/frontend/package.json
index eb65742a82..e6605249f7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@cubejs-client/core": "^0.31.0",
     "@cubejs-client/vue3": "^0.31.0",
-    "@formbricks/pmf": "^0.0.8",
+    "@formbricks/pmf": "^0.0.9",
     "@nangohq/pizzly-frontend": "^0.4.0",
     "@octokit/core": "^3.5.1",
     "@tailwindcss/postcss7-compat": "^2.2.17",

From 8aca26114c0d8a24614af177f40e41322bc4d81d Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Mon, 13 Feb 2023 14:09:58 +0100
Subject: [PATCH 3/4] update environment variables in config

---
 frontend/package-lock.json            | 14 +++++++-------
 frontend/package.json                 |  2 +-
 frontend/scripts/docker-entrypoint.sh |  1 +
 frontend/src/config.js                |  3 ++-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4949d0fb28..c75d66b17c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@cubejs-client/core": "^0.31.0",
         "@cubejs-client/vue3": "^0.31.0",
-        "@formbricks/pmf": "^0.0.9",
+        "@formbricks/pmf": "^0.1.0",
         "@nangohq/pizzly-frontend": "^0.4.0",
         "@octokit/core": "^3.5.1",
         "@tailwindcss/postcss7-compat": "^2.2.17",
@@ -1948,9 +1948,9 @@
       }
     },
     "node_modules/@formbricks/pmf": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.0.9.tgz",
-      "integrity": "sha512-kGSf6Fmo5zfzdYpN/L5pCd+GtLiWIx7RTm/XVzfATE+LNVWj9rB4JS6Q/8zTbuBVqtHBCe3gOSMnDCEZwX2xLA=="
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.1.0.tgz",
+      "integrity": "sha512-yiNTsxLOGoY+wB0Lznv1QDjBtPn8gdir3v7IpRGn30yPngXFuKjAOpNKn2iEe7Q+By+hPhff968CH+WjvMhkuA=="
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -17367,9 +17367,9 @@
       }
     },
     "@formbricks/pmf": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.0.9.tgz",
-      "integrity": "sha512-kGSf6Fmo5zfzdYpN/L5pCd+GtLiWIx7RTm/XVzfATE+LNVWj9rB4JS6Q/8zTbuBVqtHBCe3gOSMnDCEZwX2xLA=="
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.1.0.tgz",
+      "integrity": "sha512-yiNTsxLOGoY+wB0Lznv1QDjBtPn8gdir3v7IpRGn30yPngXFuKjAOpNKn2iEe7Q+By+hPhff968CH+WjvMhkuA=="
     },
     "@hapi/hoek": {
       "version": "9.3.0",
diff --git a/frontend/package.json b/frontend/package.json
index e6605249f7..87c622ca60 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@cubejs-client/core": "^0.31.0",
     "@cubejs-client/vue3": "^0.31.0",
-    "@formbricks/pmf": "^0.0.9",
+    "@formbricks/pmf": "^0.1.0",
     "@nangohq/pizzly-frontend": "^0.4.0",
     "@octokit/core": "^3.5.1",
     "@tailwindcss/postcss7-compat": "^2.2.17",
diff --git a/frontend/scripts/docker-entrypoint.sh b/frontend/scripts/docker-entrypoint.sh
index af5959c0cf..3f30e791d9 100755
--- a/frontend/scripts/docker-entrypoint.sh
+++ b/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"
 )
diff --git a/frontend/src/config.js b/frontend/src/config.js
index 5cbee8302e..fb9471347d 100644
--- a/frontend/src/config.js
+++ b/frontend/src/config.js
@@ -87,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:

From a43f026d2727073c29b5d9ef1191223b782e7e1d Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Tue, 14 Feb 2023 10:55:55 +0100
Subject: [PATCH 4/4] update formbricks pmf widget to newest version

---
 frontend/package-lock.json | 14 +++++++-------
 frontend/package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c75d66b17c..87ee09f8bc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@cubejs-client/core": "^0.31.0",
         "@cubejs-client/vue3": "^0.31.0",
-        "@formbricks/pmf": "^0.1.0",
+        "@formbricks/pmf": "^0.1.1",
         "@nangohq/pizzly-frontend": "^0.4.0",
         "@octokit/core": "^3.5.1",
         "@tailwindcss/postcss7-compat": "^2.2.17",
@@ -1948,9 +1948,9 @@
       }
     },
     "node_modules/@formbricks/pmf": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.1.0.tgz",
-      "integrity": "sha512-yiNTsxLOGoY+wB0Lznv1QDjBtPn8gdir3v7IpRGn30yPngXFuKjAOpNKn2iEe7Q+By+hPhff968CH+WjvMhkuA=="
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.1.1.tgz",
+      "integrity": "sha512-8HMn4/VlLTUw2dcbfVXC/mOMM3aTIx6Rx3FZaZtvgRPUMNIv7AXNMDgBJeiHaXm4zXHQz3B7NoNiV/mrf2aCbQ=="
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -17367,9 +17367,9 @@
       }
     },
     "@formbricks/pmf": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.1.0.tgz",
-      "integrity": "sha512-yiNTsxLOGoY+wB0Lznv1QDjBtPn8gdir3v7IpRGn30yPngXFuKjAOpNKn2iEe7Q+By+hPhff968CH+WjvMhkuA=="
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@formbricks/pmf/-/pmf-0.1.1.tgz",
+      "integrity": "sha512-8HMn4/VlLTUw2dcbfVXC/mOMM3aTIx6Rx3FZaZtvgRPUMNIv7AXNMDgBJeiHaXm4zXHQz3B7NoNiV/mrf2aCbQ=="
     },
     "@hapi/hoek": {
       "version": "9.3.0",
diff --git a/frontend/package.json b/frontend/package.json
index 87c622ca60..050fe27a5a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@cubejs-client/core": "^0.31.0",
     "@cubejs-client/vue3": "^0.31.0",
-    "@formbricks/pmf": "^0.1.0",
+    "@formbricks/pmf": "^0.1.1",
     "@nangohq/pizzly-frontend": "^0.4.0",
     "@octokit/core": "^3.5.1",
     "@tailwindcss/postcss7-compat": "^2.2.17",