Add Feedback Box to Formbricks Cloud (#461)

* add feedback box

* only show product feedback on cloud

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

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);

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}` : "";