disable limited tier if already used

src/app/layout.tsx

@@ -32,12 +32,13 @@ export default async function RootLayout({
 
     let supporterData = {
         visible: true
-    };
+    } as any;
 
     const res = await priv.get<
         AxiosResponse<IsSupporterKeyVisibleResponse>
     >("supporter-key/visible");
     supporterData.visible = res.data.data.visible;
+    supporterData.tier = res.data.data.tier;
 
     const version = env.app.version;
 

src/components/SupporterStatus.tsx

@@ -218,7 +218,9 @@ export default function SupporterStatus() {
                                 </CardFooter>
                             </Card>
 
-                            <Card>
+                            <Card
+                                className={`${supporterStatus?.tier === "Limited Supporter" ? "opacity-50" : ""}`}
+                            >
                                 <CardHeader>
                                     <CardTitle>Limited Supporter</CardTitle>
                                 </CardHeader>
@@ -246,14 +248,29 @@ export default function SupporterStatus() {
                                     </ul>
                                 </CardContent>
                                 <CardFooter>
-                                    <Link
-                                        href="https://www.google.com"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="w-full"
-                                    >
-                                        <Button className="w-full">Buy</Button>
-                                    </Link>
+                                    {supporterStatus?.tier !==
+                                    "Limited Supporter" ? (
+                                        <Link
+                                            href="https://www.google.com"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="w-full"
+                                        >
+                                            <Button className="w-full">
+                                                Buy
+                                            </Button>
+                                        </Link>
+                                    ) : (
+                                        <Button
+                                            className="w-full"
+                                            disabled={
+                                                supporterStatus?.tier ===
+                                                "Limited Supporter"
+                                            }
+                                        >
+                                            Buy
+                                        </Button>
+                                    )}
                                 </CardFooter>
                             </Card>
                         </div>

src/contexts/supporterStatusContext.ts

@@ -2,6 +2,7 @@ import { createContext } from "react";
 
 export type SupporterStatus = {
     visible: boolean;
+    tier?: string;
 };
 
 type SupporterStatusContextType = {