fix: pro plane fixes

web/core/components/workspace/plane-badge.tsx

@@ -1,28 +1,46 @@
 import React, { useState } from "react";
+import { observer } from "mobx-react";
 import Image from "next/image";
+import { useRouter } from "next/router";
+import useSWR from "swr";
 // ui
 import { Tooltip, Button, getButtonStyling } from "@plane/ui";
-// components
 // hooks
 import { cn } from "@/helpers/common.helper";
 import { useEventTracker, useInstance } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
-import { PlaneOneModal, ProPlanModal } from "@/plane-web/components/license";
+import { PlaneOneModal, CloudProductsModal, ProPlanDetailsModal } from "@/plane-web/components/license";
 // assets
 import PlaneOneLogo from "@/public/plane-logos/plane-one.svg";
+// services
+import { DiscoService } from "@/services/disco.service";
+
 import packageJson from "package.json";
 
-export const PlaneBadge: React.FC = () => {
+const discoService = new DiscoService();
+
+export const PlaneBadge: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
   // states
   const [isProPlanModalOpen, setIsProPlanModalOpen] = useState(false);
+  const [isProPlanDetailsModalOpen, setProPlanDetailsModalOpen] = useState(false);
   const [isPlaneOneModalOpen, setIsPlaneOneModalOpen] = useState(false);
   // hooks
   const { captureEvent } = useEventTracker();
   const { isMobile } = usePlatformOS();
   const { instance } = useInstance();
 
-  const handleProPlanModalOpen = () => {
+  // fetch workspace current plane information
+  const { data } = useSWR(
+    workspaceSlug ? "WORKSPACE_CURRENT_PLANE" : null,
+    workspaceSlug ? () => discoService.getWorkspaceCurrentPlane(workspaceSlug.toString()) : null
+  );
+
+  console.log("data", data);
+
+  const handleProPlanPurchaseModalOpen = () => {
     setIsProPlanModalOpen(true);
     captureEvent("pro_plan_modal_opened", {});
   };
@@ -32,17 +50,31 @@ export const PlaneBadge: React.FC = () => {
     captureEvent("plane_one_modal_opened", {});
   };
 
-  if (process.env.NEXT_PUBLIC_PRO_PLAN_MONTHLY_REDIRECT_URL || process.env.NEXT_PUBLIC_PRO_PLAN_YEARLY_REDIRECT_URL) {
+  // const handleProPlanDetailsModalOpen = () => {
+  //   setProPlanDetailsModalOpen(true);
+  // };
+
+  if (process.env.NEXT_PUBLIC_IS_MULTI_TENANT === "1") {
     return (
       <>
-        <ProPlanModal isOpen={isProPlanModalOpen} handleClose={() => setIsProPlanModalOpen(false)} />
-        <Button
-          variant="outline-primary"
-          className="w-1/2 cursor-pointer rounded-2xl px-3 py-1.5 text-center text-sm font-medium outline-none"
-          onClick={handleProPlanModalOpen}
-        >
-          Plane Pro
-        </Button>
+        <CloudProductsModal isOpen={isProPlanModalOpen} handleClose={() => setIsProPlanModalOpen(false)} />
+        <ProPlanDetailsModal isOpen={isProPlanDetailsModalOpen} handleClose={() => setProPlanDetailsModalOpen(false)} />
+        {data && data.product === "s" && (
+          <Button
+            variant="outline-primary"
+            className="w-1/2 cursor-pointer rounded-2xl px-3 py-1.5 text-center text-sm font-medium outline-none"
+            onClick={handleProPlanPurchaseModalOpen}
+          >
+            Upgrade to Pro
+          </Button>
+        )}
+        {data && data.product === "FREE" && (
+          <div className="w-1/2 flex justify-start">
+            <span className="items-center justify-center px-3.5 py-0.5 text-xs leading-4 rounded-xl bg-custom-primary-100/10 text-custom-primary-100">
+              Pro
+            </span>
+          </div>
+        )}
       </>
     );
   }
@@ -77,4 +109,4 @@ export const PlaneBadge: React.FC = () => {
       </Tooltip>
     </>
   );
-};
+});

web/core/services/disco.service.ts

@@ -0,0 +1,35 @@
+import { IPaymentProduct, IWorkspaceProductSubscription } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// services
+import { APIService } from "@/services/api.service";
+
+export class DiscoService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  listProducts(workspaceSlug: string): Promise<IPaymentProduct[]> {
+    return this.get(`/api/payments/workspaces/${workspaceSlug}/products/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  getPaymentLink(workspaceSlug: string, data = {}) {
+    return this.post(`/api/payments/workspaces/${workspaceSlug}/payment-link/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  getWorkspaceCurrentPlane(workspaceSlug: string): Promise<IWorkspaceProductSubscription> {
+    return this.get(`/api/payments/workspaces/${workspaceSlug}/current-plan/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}