fix(subscription): fix wrongly display upgrade button on the user pro…

…file dropdown (#1202)

Because

- fix wrongly display upgrade button on the user profile dropdown

This commit

- fix wrongly display upgrade button on the user profile dropdown

packages/toolkit/src/components/top-bar/RemainingCredit.tsx

@@ -4,6 +4,7 @@ import { Button, Skeleton } from "@instill-ai/design-system";
 import {
   InstillStore,
   useAuthenticatedUser,
+  useAuthenticatedUserSubscription,
   useInstillStore,
   useRemainingCredit,
   useShallow,
@@ -36,23 +37,30 @@ export const RemainingCreditCTA = ({
       enabledQuery && me.isSuccess && env("NEXT_PUBLIC_APP_ENV") === "CLOUD",
   });
 
+  const sub = useAuthenticatedUserSubscription({
+    enabled: me.isSuccess && enabledQuery,
+    accessToken,
+  });
+
   return (
     <div className="flex w-full flex-row gap-x-2 rounded-sm bg-semantic-bg-base-bg px-3 py-4">
       {remainingCredit.isSuccess ? (
         <p className="my-auto font-mono text-[11px] font-medium text-[#344054]">{`${remainingCredit.data.toLocaleString("en-US", { style: "decimal" })} credits left`}</p>
       ) : (
         <Skeleton className="my-auto h-5 w-[100px] rounded" />
       )}
-      <Button
-        variant="tertiaryColour"
-        onClick={() => {
-          router.push(ctaTargetHref);
-        }}
-        className="ml-auto"
-        size="md"
-      >
-        Upgrade
-      </Button>
+      {sub.isSuccess && sub.data.detail?.status === "STATUS_ACTIVE" ? null : (
+        <Button
+          variant="tertiaryColour"
+          onClick={() => {
+            router.push(ctaTargetHref);
+          }}
+          className="ml-auto"
+          size="md"
+        >
+          Upgrade
+        </Button>
+      )}
     </div>
   );
 };