fix(catalog): fix link on Team plan (#1370)

Because - Fixes link on Team Plan
instill-ai · Aug 13, 2024 · 7efd02c · 7efd02c
1 parent 03da2c5
commit 7efd02c
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 21 deletions.
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.99.0-rc.10",
+  "version": "0.99.0-rc.23",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

diff --git a/packages/toolkit/src/view/knowledge/KnowledgeBaseView.tsx b/packages/toolkit/src/view/knowledge/KnowledgeBaseView.tsx
@@ -319,6 +319,7 @@ export const KnowledgeBaseView = (props: KnowledgeBaseViewProps) => {
               subscription={subscriptionInfo.subscription}
               namespaceType={namespaceType}
               isLocalEnvironment={isLocalEnvironment}
+              selectedNamespace={selectedNamespace}
             />
           ) : null}
           {activeTab === "chunks" && selectedKnowledgeBase ? (

diff --git a/packages/toolkit/src/view/knowledge/components/notifications/InsufficientStorageBanner.tsx b/packages/toolkit/src/view/knowledge/components/notifications/InsufficientStorageBanner.tsx
@@ -1,18 +1,38 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import { Nullable } from "instill-sdk";
 
 import { Button, Icons, LinkButton } from "@instill-ai/design-system";
 
 type InsufficientStorageBannerProps = {
   setshowStorageWarning: React.Dispatch<React.SetStateAction<boolean>>;
+  plan: string;
+  namespaceType: Nullable<"user" | "organization">;
+  selectedNamespace: Nullable<string>;
 };
 
 export const InsufficientStorageBanner = ({
   setshowStorageWarning,
+  plan,
+  namespaceType,
+  selectedNamespace,
 }: InsufficientStorageBannerProps) => {
   const router = useRouter();
 
+  const getUpgradeLink = () => {
+    if (plan === "PLAN_FREE" && namespaceType === "user") {
+      return "/subscribe";
+    } else if (plan === "PLAN_FREE" && namespaceType === "organization") {
+      return `/${selectedNamespace}/organization-settings/billing/subscriptions/plan`;
+    } else if (plan === "PLAN_PRO" && namespaceType === "user") {
+      return "/settings/organizations/new";
+    } else if (plan === "PLAN_TEAM" && namespaceType === "organization") {
+      return "https://cal.com/instill-ai/30min-talk";
+    }
+    return "/settings/billing/subscriptions";
+  };
+
   return (
     <div className="mb-4 w-full bg-semantic-warning-bg p-4 flex justify-between">
       <div className="flex items-start">
@@ -26,7 +46,7 @@ export const InsufficientStorageBanner = ({
             size="sm"
             variant="secondary"
             onClick={() => {
-              router.push(`/settings/billing/subscriptions`);
+              router.push(getUpgradeLink());
             }}
           >
             Upgrade your plan for more storage space

diff --git a/packages/toolkit/src/view/knowledge/components/notifications/UpgradePlanLink.tsx b/packages/toolkit/src/view/knowledge/components/notifications/UpgradePlanLink.tsx
@@ -1,37 +1,36 @@
 import Link from "next/link";
+import { Nullable } from "instill-sdk";
 
 type UpgradePlanLinkProps = {
   plan: string;
-  namespaceType: "user" | "organization" | null;
-  pageName: "catalog" | "upload";
+  namespaceType: Nullable<"user" | "organization">;
+  selectedNamespace: Nullable<string>;
 };
 
 export const UpgradePlanLink = ({
   plan,
   namespaceType,
-  pageName,
+  selectedNamespace,
 }: UpgradePlanLinkProps) => {
   const getLinkContent = () => {
-    const baseText = pageName === "catalog" ? "catalogs" : "storage space";
-
     if (plan === "PLAN_FREE" && namespaceType === "user") {
       return {
-        text: `Upgrade your plan to create more ${baseText}`,
+        text: "Upgrade your plan to create more storage space",
         href: "/subscribe",
       };
     } else if (plan === "PLAN_FREE" && namespaceType === "organization") {
       return {
-        text: `Upgrade your plan to create more ${baseText}`,
-        href: "/org-free/organization-settings/billing/subscriptions/plan",
+        text: "Upgrade your plan to create more storage space",
+        href: `/${selectedNamespace}/organization-settings/billing/subscriptions/plan`,
       };
     } else if (plan === "PLAN_PRO" && namespaceType === "user") {
       return {
-        text: `Create an organization to add more ${baseText}`,
+        text: "Create an organization to add more storage space",
         href: "/settings/organizations/new",
       };
     } else if (plan === "PLAN_TEAM" && namespaceType === "organization") {
       return {
-        text: `Contact us to learn about the enterprise plan and create more ${baseText}`,
+        text: "Contact us to learn about the enterprise plan and create more storage space",
         href: "https://cal.com/instill-ai/30min-talk",
       };
     }

diff --git a/packages/toolkit/src/view/knowledge/components/tabs/CatalogFilesTab.tsx b/packages/toolkit/src/view/knowledge/components/tabs/CatalogFilesTab.tsx
@@ -167,6 +167,9 @@ export const CatalogFilesTab = ({
       {!isLocalEnvironment && showStorageWarning && !isEnterprisePlan ? (
         <InsufficientStorageBanner
           setshowStorageWarning={setShowStorageWarning}
+          plan={subscription?.plan || "PLAN_FREE"}
+          namespaceType={namespaceType}
+          selectedNamespace={selectedNamespace}
         />
       ) : null}
       <div className="flex flex-col items-start justify-start gap-1 mb-2">
@@ -184,7 +187,7 @@ export const CatalogFilesTab = ({
             <UpgradePlanLink
               plan={subscription?.plan || "PLAN_FREE"}
               namespaceType={namespaceType}
-              pageName="catalog"
+              selectedNamespace={selectedNamespace}
             />
           ) : null}
         </p>

diff --git a/packages/toolkit/src/view/knowledge/components/tabs/KnowledgeBaseTab.tsx b/packages/toolkit/src/view/knowledge/components/tabs/KnowledgeBaseTab.tsx
@@ -79,9 +79,8 @@ export const KnowledgeBaseTab = ({
 
   const createKnowledgeBase = useCreateKnowledgeBase();
   const updateKnowledgeBase = useUpdateKnowledgeBase();
-  const isTeamPlan =
-    subscription?.plan === "PLAN_ENTERPRISE" ||
-    subscription?.plan === "PLAN_TEAM";
+  const isEnterprisePlan = subscription?.plan === "PLAN_ENTERPRISE";
+  const isTeamPlan = subscription?.plan === "PLAN_TEAM";
 
   const catalogState = useGetKnowledgeBases({
     accessToken,
@@ -214,17 +213,17 @@ export const KnowledgeBaseTab = ({
           </p>
           <p className=" product-body-text-3-regular space-x-2">
             <span className="text-semantic-fg-secondary">
-              {isLocalEnvironment || isTeamPlan
+              {isLocalEnvironment || isEnterprisePlan || isTeamPlan
                 ? `(${filteredAndSortedKnowledgeBases.length})`
                 : `(${filteredAndSortedKnowledgeBases.length}/${knowledgeBaseLimit})`}
             </span>
-            {!isLocalEnvironment && !isTeamPlan && (
+            {!isLocalEnvironment && !isEnterprisePlan ? (
               <UpgradePlanLink
                 plan={subscription?.plan || "PLAN_FREE"}
                 namespaceType={namespaceType}
-                pageName="catalog"
+                selectedNamespace={selectedNamespace}
               />
-            )}
+            ) : null}
           </p>
         </div>
         <KnowledgeSearchSort

diff --git a/packages/toolkit/src/view/knowledge/components/tabs/UploadExploreTab.tsx b/packages/toolkit/src/view/knowledge/components/tabs/UploadExploreTab.tsx
@@ -90,6 +90,7 @@ type UploadExploreTabProps = {
   subscription: Nullable<UserSubscription | OrganizationSubscription>;
   namespaceType: Nullable<"user" | "organization">;
   isLocalEnvironment: boolean;
+  selectedNamespace: Nullable<string>;
 };
 
 const selector = (store: InstillStore) => ({
@@ -108,6 +109,7 @@ export const UploadExploreTab = ({
   subscription,
   namespaceType,
   isLocalEnvironment,
+  selectedNamespace,
 }: UploadExploreTabProps) => {
   const queryClient = useQueryClient();
   const { amplitudeIsInit } = useAmplitudeCtx();
@@ -391,6 +393,9 @@ export const UploadExploreTab = ({
       {!isLocalEnvironment && showStorageWarning && !isEnterprisePlan ? (
         <InsufficientStorageBanner
           setshowStorageWarning={setShowStorageWarning}
+          plan={subscription?.plan || "PLAN_FREE"}
+          namespaceType={namespaceType}
+          selectedNamespace={selectedNamespace}
         />
       ) : null}
       <div className="flex flex-col items-start justify-start gap-1 mb-2">
@@ -408,7 +413,7 @@ export const UploadExploreTab = ({
             <UpgradePlanLink
               plan={subscription?.plan || "PLAN_FREE"}
               namespaceType={namespaceType}
-              pageName="upload"
+              selectedNamespace={selectedNamespace}
             />
           ) : null}
         </p>