submit button disabled if product is bought

BrunoSette · Oct 28, 2024 · 1ac30ec · 1ac30ec
1 parent 80762d4
commit 1ac30ec
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/app/(dashboard)/pricing/submit-button.tsx b/app/(dashboard)/pricing/submit-button.tsx
@@ -4,14 +4,18 @@ import { Button } from "@/components/ui/button";
 import { ArrowRight, Loader2 } from "lucide-react";
 import { useFormStatus } from "react-dom";
 
-export function SubmitButton() {
+export function SubmitButton({ disabled = false }: { disabled: boolean }) {
   const { pending } = useFormStatus();
 
+  const btnStyle = disabled
+    ? "bg-orange-600 text-white"
+    : "bg-white hover:bg-orange-400 hover:text-white text-black";
+
   return (
     <Button
       type="submit"
-      disabled={pending}
-      className="w-full bg-white hover:bg-orange-400 hover:text-white text-black border border-gray-200 rounded-full flex text-lg items-center justify-center"
+      disabled={pending || disabled}
+      className={`w-full ${btnStyle} border border-gray-200 rounded-full flex text-lg items-center justify-center`}
     >
       {pending ? (
         <div className="flex items-center">
@@ -20,8 +24,8 @@ export function SubmitButton() {
         </div>
       ) : (
         <div className="flex items-center">
-          Get Started
-          <ArrowRight className="ml-2 h-4 w-4" />
+          {disabled ? "Purchased!" : "Get Started"}
+          {!disabled && <ArrowRight className="ml-2 h-4 w-4" />}
         </div>
       )}
     </Button>