From 81b4624649f22fe1eef1e40f06f80aec9e60c127 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Mon, 3 Jul 2023 03:15:13 -0500
Subject: [PATCH] Add Feedback Box to Formbricks Cloud (#461)

* add feedback box

* only show product feedback on cloud

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
---
 .../[environmentId]/EnvironmentsNavbar.tsx     | 18 +++++++++++++++++-
 packages/lib/constants.ts                      |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx b/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx
index 43de0c5916..4838f4dffd 100644
--- a/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx
+++ b/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx
@@ -51,6 +51,7 @@ import {
   PlusIcon,
   UserCircleIcon,
   UsersIcon,
+  ChatBubbleBottomCenterTextIcon,
 } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import type { Session } from "next-auth";
@@ -61,6 +62,8 @@ import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import AddProductModal from "./AddProductModal";
 import { formbricksLogout } from "@/lib/formbricks";
+import formbricks from "@formbricks/js";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 
 interface EnvironmentsNavbarProps {
   environmentId: string;
@@ -162,7 +165,7 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
           icon: CreditCardIcon,
           label: "Billing & Plan",
           href: `/environments/${environmentId}/settings/billing`,
-          hidden: process.env.NEXT_PUBLIC_IS_FORMBRICKS_CLOUD !== "1",
+          hidden: IS_FORMBRICKS_CLOUD,
         },
       ],
     },
@@ -420,6 +423,19 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
                 ))}
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
+                  {IS_FORMBRICKS_CLOUD && (
+                    <DropdownMenuItem>
+                      <button
+                        onClick={() => {
+                          formbricks.track("Top Menu: Product Feedback");
+                        }}>
+                        <div className="flex items-center">
+                          <ChatBubbleBottomCenterTextIcon className="mr-2 h-4 w-4" />
+                          <span>Product Feedback</span>
+                        </div>
+                      </button>
+                    </DropdownMenuItem>
+                  )}
                   <DropdownMenuItem
                     onClick={async () => {
                       setLoading(true);
diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts
index 2f4d0fe206..9d0c39072e 100644
--- a/packages/lib/constants.ts
+++ b/packages/lib/constants.ts
@@ -1,5 +1,5 @@
 export const RESPONSES_LIMIT_FREE = 100;
-export const IS_FORMBRICKS_CLOUD = process.env.NEXT_PUBLIC_IS_FORMBRICKS_CLOUD !== "1";
+export const IS_FORMBRICKS_CLOUD = process.env.NEXT_PUBLIC_IS_FORMBRICKS_CLOUD === "1";
 
 // URLs
 const VERCEL_URL = process.env.NEXT_PUBLIC_VERCEL_URL ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` : "";