[WEB-1843] chore: billing page and upgrade badge UI improvements. (#5099)

* [WEB-1843] chore: billing page and upgrade badge UI improvements.

* chore: fix sidebar collaped state.

web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx

@@ -2,10 +2,11 @@
 
 import { observer } from "mobx-react";
 // ui
-import { Crown } from "lucide-react";
 import { Breadcrumbs, ContrastIcon } from "@plane/ui";
+// components
 import { BreadcrumbLink } from "@/components/common";
-// icons
+// plane web components
+import { UpgradeBadge } from "@/plane-web/components/workspace";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@@ -22,7 +23,7 @@ export const WorkspaceActiveCycleHeader = observer(() => (
             }
           />
         </Breadcrumbs>
-        <Crown className="h-3.5 w-3.5 text-amber-400" />
+        <UpgradeBadge size="md" />
       </div>
     </div>
   </div>

web/app/[workspaceSlug]/(projects)/settings/billing/page.tsx

@@ -1,15 +1,14 @@
 "use client";
 
 import { observer } from "mobx-react";
-// ui
-import { Button } from "@plane/ui";
 // component
 import { PageHead } from "@/components/core";
 // constants
-import { MARKETING_PRICING_PAGE_LINK } from "@/constants/common";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
 // hooks
 import { useUser, useWorkspace } from "@/hooks/store";
+// plane web components
+import { BillingRoot } from "@/plane-web/components/workspace";
 
 const BillingSettingsPage = observer(() => {
   // store hooks
@@ -34,22 +33,7 @@ const BillingSettingsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <section className="w-full overflow-y-auto md:pr-9 pr-4">
+      <BillingRoot />
-        <div>
-          <div className="flex  items-center border-b border-custom-border-100 py-3.5">
-            <h3 className="text-xl font-medium">Billing & Plans</h3>
-          </div>
-        </div>
-        <div className="px-4 py-6">
-          <div>
-            <h4 className="text-md mb-1 leading-6">Current plan</h4>
-            <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
-            <a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer">
-              <Button variant="neutral-primary">View Plans</Button>
-            </a>
-          </div>
-        </div>
-      </section>
     </>
   );
 });

web/ce/components/workspace/billing/index.ts

@@ -0,0 +1 @@
+export * from "./root";

web/ce/components/workspace/billing/root.tsx

@@ -0,0 +1,23 @@
+// ui
+import { Button } from "@plane/ui";
+// constants
+import { MARKETING_PRICING_PAGE_LINK } from "@/constants/common";
+
+export const BillingRoot = () => (
+  <section className="w-full overflow-y-auto md:pr-9 pr-4">
+    <div>
+      <div className="flex  items-center border-b border-custom-border-100 py-3.5">
+        <h3 className="text-xl font-medium">Billing and Plans</h3>
+      </div>
+    </div>
+    <div className="px-4 py-6">
+      <div>
+        <h4 className="text-md mb-1 leading-6">Current plan</h4>
+        <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
+        <a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer">
+          <Button variant="neutral-primary">View Plans</Button>
+        </a>
+      </div>
+    </div>
+  </section>
+);

web/ce/components/workspace/index.ts

@@ -1 +1,3 @@
 export * from "./edition-badge";
+export * from "./upgrade-badge";
+export * from "./billing";

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

@@ -0,0 +1,27 @@
+import { FC } from "react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type TUpgradeBadge = {
+  className?: string;
+  size?: "sm" | "md";
+};
+
+export const UpgradeBadge: FC<TUpgradeBadge> = (props) => {
+  const { className, size = "sm" } = props;
+
+  return (
+    <div
+      className={cn(
+        "w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-custom-primary-100/20 text-center font-medium outline-none",
+        {
+          "text-sm px-3": size === "md",
+          "text-xs px-2": size === "sm",
+        },
+        className
+      )}
+    >
+      Pro
+    </div>
+  );
+};

web/core/components/workspace/sidebar/workspace-menu.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
-import { ChevronRight, Crown } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // ui
 import { Tooltip } from "@plane/ui";
@@ -18,6 +18,8 @@ import { cn } from "@/helpers/common.helper";
 import { useAppTheme, useEventTracker, useUser } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web components
+import { UpgradeBadge } from "@/plane-web/components/workspace";
 
 export const SidebarWorkspaceMenu = observer(() => {
   // store hooks
@@ -112,16 +114,20 @@ export const SidebarWorkspaceMenu = observer(() => {
                           }
                         )}
                       >
-                        <span className="flex-shrink-0 size-4 grid place-items-center">
+                        <div className={cn("grow flex items-center gap-1.5", { "justify-center": sidebarCollapsed })}>
-                          <link.Icon
+                          <span className="flex-shrink-0 size-4 grid place-items-center">
-                            className={cn("size-4", {
+                            <link.Icon
-                              "rotate-180": link.key === "active-cycles",
+                              className={cn("size-4", {
-                            })}
+                                "rotate-180": link.key === "active-cycles",
-                          />
+                              })}
-                        </span>
+                            />
-                        {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{link.label}</p>}
+                          </span>
+                          {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{link.label}</p>}
+                        </div>
                         {!sidebarCollapsed && link.key === "active-cycles" && (
-                          <Crown className="size-3.5 text-amber-400" />
+                          <div className="flex-shrink-0">
+                            <UpgradeBadge />
+                          </div>
                         )}
                       </div>
                     </Tooltip>

web/ee/components/workspace/billing/index.ts

@@ -0,0 +1 @@
+export * from "./root";

web/ee/components/workspace/billing/root.tsx

@@ -0,0 +1 @@
+export * from "ce/components/workspace/billing/root";

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

@@ -0,0 +1 @@
+export * from "ce/components/workspace/edition-badge";

web/ee/components/workspace/index.ts

@@ -0,0 +1,3 @@
+export * from "./edition-badge";
+export * from "./upgrade-badge";
+export * from "./billing";

web/ee/components/workspace/upgrade-badge.tsx

@@ -0,0 +1 @@
+export * from "ce/components/workspace/upgrade-badge";