Hide usage and billing from Navbar in self-hosted

frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx

@@ -20,7 +20,7 @@ import { Menu, Transition } from "@headlessui/react";
 import {TFunction} from "i18next";
 
 import guidGenerator from "@app/components/utilities/randomId";
-import { useOrganization, useUser } from "@app/context";
+import { useOrganization, useSubscription,useUser } from "@app/context";
 import { useLogoutUser } from "@app/hooks/api";
 
 const supportOptions = (t: TFunction) => [
@@ -63,6 +63,9 @@ export interface IUser {
  */
 export const Navbar = () => {
   const router = useRouter();
+  const { subscription } = useSubscription();
+  
+  console.log("subscription: ", subscription);
 
   const { currentOrg, orgs } = useOrganization();
   const { user } = useUser();
@@ -220,6 +223,7 @@ export const Navbar = () => {
                     />
                   </div>
                 </div>
+                {subscription && subscription.slug !== null && (
                   <button
                     // onClick={buttonAction}
                     type="button"
@@ -236,6 +240,7 @@ export const Navbar = () => {
                       <div className="text-sm">{t("nav.user.usage-billing")}</div>
                     </div>
                   </button>
+                )}
                 <button
                   type="button"
                   // onClick={buttonAction}