From 9c4b2e99aef0dbd0731c4b3bccf4165d1ccb717e Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Wed, 8 Feb 2023 14:02:12 +0100
Subject: [PATCH] formbricks-app: use feedback widget from packages

---
 apps/web/package.json                      | 1 +
 apps/web/src/components/FeedbackButton.tsx | 8 +-------
 pnpm-lock.yaml                             | 2 ++
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 7d972f924a..08877eda71 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,6 +12,7 @@
     "@formbricks/charts": "workspace:*",
     "@formbricks/ee": "workspace:*",
     "@formbricks/engine-react": "workspace:*",
+    "@formbricks/feedback": "workspace:*",
     "@formbricks/ui": "workspace:*",
     "@headlessui/react": "^1.7.8",
     "@heroicons/react": "^2.0.14",
diff --git a/apps/web/src/components/FeedbackButton.tsx b/apps/web/src/components/FeedbackButton.tsx
index 7399cdec8a..1f8ddf3198 100644
--- a/apps/web/src/components/FeedbackButton.tsx
+++ b/apps/web/src/components/FeedbackButton.tsx
@@ -1,6 +1,5 @@
 import clsx from "clsx";
 import { useSession } from "next-auth/react";
-import Script from "next/script";
 import { useEffect, useRef, useState } from "react";
 
 declare global {
@@ -14,7 +13,6 @@ const feedbackEnabled = !!(
 );
 
 export function FeedbackButton() {
-  const [configLoaded, setConfigLoaded] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const feedbackRef = useRef<HTMLInputElement>(null);
   const { data: session } = useSession();
@@ -53,7 +51,7 @@ export function FeedbackButton() {
           customer: session.user,
         },
       };
-      setConfigLoaded(true);
+      require("@formbricks/feedback");
     }
   }, [session]);
 
@@ -61,10 +59,6 @@ export function FeedbackButton() {
 
   return (
     <>
-      {configLoaded && (
-        <Script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.2.1/dist/index.umd.js" defer />
-      )}
-
       <div
         className={clsx(
           "xs:flex-row xs:right-0 xs:top-1/2 xs:w-[18rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-fit w-full transition-all duration-500 ease-in-out",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2851d0c38e..9b2c4c4f32 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -189,6 +189,7 @@ importers:
       '@formbricks/database': workspace:*
       '@formbricks/ee': workspace:*
       '@formbricks/engine-react': workspace:*
+      '@formbricks/feedback': workspace:*
       '@formbricks/tailwind-config': workspace:*
       '@formbricks/tsconfig': workspace:*
       '@formbricks/ui': workspace:*
@@ -225,6 +226,7 @@ importers:
       '@formbricks/charts': link:../../packages/charts
       '@formbricks/ee': link:../../packages/ee
       '@formbricks/engine-react': link:../../packages/engine-react
+      '@formbricks/feedback': link:../../packages/feedback-widget
       '@formbricks/ui': link:../../packages/ui
       '@headlessui/react': 1.7.8_biqbaboplfbrettd7655fr4n2y
       '@heroicons/react': 2.0.14_react@18.2.0