[WEB-1960]: chore: upgrade to plane paid plans modal. (#5149)

web/ce/components/workspace/edition-badge.tsx

@@ -1,19 +1,35 @@
+import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
-import { Tooltip } from "@plane/ui";
+import { Button, Tooltip } from "@plane/ui";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // assets
 import packageJson from "package.json";
+// local components
+import { PaidPlanUpgradeModal } from "./upgrade";
 
 export const WorkspaceEditionBadge = observer(() => {
   const { isMobile } = usePlatformOS();
+  // states
+  const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
 
   return (
-    <Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
-      <div className="w-full cursor-default rounded-md bg-green-500/10 px-2 py-1 text-center text-xs font-medium text-green-500 outline-none leading-6">
-        Community
-      </div>
-    </Tooltip>
+    <>
+      <PaidPlanUpgradeModal
+        isOpen={isPaidPlanPurchaseModalOpen}
+        handleClose={() => setIsPaidPlanPurchaseModalOpen(false)}
+      />
+      <Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
+        <Button
+          tabIndex={-1}
+          variant="accent-primary"
+          className="w-full cursor-pointer rounded-2xl px-4 py-1.5 text-center text-sm font-medium outline-none"
+          onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
+        >
+          Upgrade
+        </Button>
+      </Tooltip>
+    </>
   );
 });