From fc0b730652365b459979bb4e690c1337a459305b Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Wed, 4 Jan 2023 17:31:54 +0100
Subject: [PATCH] move feedback widget on formbricks.com to own component, add
 plausible tracking on feedback click

---
 .../components/shared/FeedbackButton.tsx      | 42 +++++++++++++++++++
 .../components/shared/Layout.tsx              |  2 +
 .../components/shared/LayoutMdx.tsx           |  2 +
 apps/formbricks-com/pages/_app.tsx            | 28 +------------
 4 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 apps/formbricks-com/components/shared/FeedbackButton.tsx

diff --git a/apps/formbricks-com/components/shared/FeedbackButton.tsx b/apps/formbricks-com/components/shared/FeedbackButton.tsx
new file mode 100644
index 0000000000..3cd720442b
--- /dev/null
+++ b/apps/formbricks-com/components/shared/FeedbackButton.tsx
@@ -0,0 +1,42 @@
+import { usePlausible } from "next-plausible";
+import Script from "next/script";
+import { useState } from "react";
+
+declare global {
+  interface Window {
+    formbricks: any;
+  }
+}
+
+export default function FeedbackButton() {
+  const plausible = usePlausible();
+  const [scriptReady, setScriptReady] = useState(false);
+  return (
+    <>
+      <Script src="https://unpkg.com/@formbricks/feedback@0.1.2" defer onReady={() => setScriptReady(true)} />
+      <Script id="feedback-setup">{`
+      window.formbricks = {
+      config: {
+        hqUrl: "https://xm.formbricks.com",
+        formId: "clchup08o0000lj08526vdujt",
+        contact: {
+          name: "Matti",
+          position: "Co-Founder",
+          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
+        },
+      },
+      ...window.formbricks,
+    };`}</Script>
+      {scriptReady && (
+        <button
+          className="bg-brand fixed top-1/2 -right-8 z-40 hidden -translate-y-1/2 -rotate-90 rounded p-4 font-medium text-white sm:block"
+          onClick={(event) => {
+            window.formbricks.open(event);
+            plausible("openFeedback");
+          }}>
+          Feedback
+        </button>
+      )}
+    </>
+  );
+}
diff --git a/apps/formbricks-com/components/shared/Layout.tsx b/apps/formbricks-com/components/shared/Layout.tsx
index a99e473aa9..c36136eb89 100644
--- a/apps/formbricks-com/components/shared/Layout.tsx
+++ b/apps/formbricks-com/components/shared/Layout.tsx
@@ -1,3 +1,4 @@
+import FeedbackButton from "./FeedbackButton";
 import Footer from "./Footer";
 import Header from "./Header";
 import MetaInformation from "./MetaInformation";
@@ -13,6 +14,7 @@ export default function Layout({ title, description, children }: LayoutProps) {
     <div className="flex h-screen flex-col justify-between">
       <MetaInformation title={title} description={description} />
       <Header />
+      <FeedbackButton />
       <main className="max-w-8xl relative mx-auto mb-auto flex flex-col justify-center sm:px-2 lg:px-8 xl:px-12">
         {children}
       </main>
diff --git a/apps/formbricks-com/components/shared/LayoutMdx.tsx b/apps/formbricks-com/components/shared/LayoutMdx.tsx
index 9fb0d63600..852db2897c 100644
--- a/apps/formbricks-com/components/shared/LayoutMdx.tsx
+++ b/apps/formbricks-com/components/shared/LayoutMdx.tsx
@@ -1,3 +1,4 @@
+import FeedbackButton from "./FeedbackButton";
 import Footer from "./Footer";
 import Header from "./Header";
 import Layout from "./Layout";
@@ -17,6 +18,7 @@ export default function LayoutMdx({ meta, children }: Props) {
     <div className="flex h-screen flex-col justify-between">
       <MetaInformation title={meta.title} description={meta.description} />
       <Header />
+      <FeedbackButton />
       <main className="min-w-0 max-w-2xl flex-auto px-4 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16">
         <article className="mx-auto my-16 max-w-3xl px-2">
           {meta.title && (
diff --git a/apps/formbricks-com/pages/_app.tsx b/apps/formbricks-com/pages/_app.tsx
index 72bf915aa1..3734ed4566 100644
--- a/apps/formbricks-com/pages/_app.tsx
+++ b/apps/formbricks-com/pages/_app.tsx
@@ -1,36 +1,10 @@
-import type { AppProps } from "next/app";
 import PlausibleProvider from "next-plausible";
+import type { AppProps } from "next/app";
 import "../styles/globals.css";
-import Script from "next/script";
-
-declare global {
-  interface Window {
-    formbricks: any;
-  }
-}
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <PlausibleProvider domain="formbricks.com" selfHosted={true}>
-      <Script src="https://unpkg.com/@formbricks/feedback@0.1.2" defer />
-      <Script id="feedback-setup">{`
-      window.formbricks = {
-      config: {
-        hqUrl: "https://xm.formbricks.com",
-        formId: "clchup08o0000lj08526vdujt",
-        contact: {
-          name: "Matti",
-          position: "Co-Founder",
-          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
-        },
-      },
-      ...window.formbricks,
-    };`}</Script>
-      <button
-        className="bg-brand fixed top-1/2 -right-8 z-40 hidden -translate-y-1/2 -rotate-90 rounded p-4 font-medium text-white sm:block"
-        onClick={(event) => window.formbricks.open(event)}>
-        Feedback
-      </button>
       <Component {...pageProps} />
     </PlausibleProvider>
   );