@carlonicora/nextjs-jsonapi 1.28.0 → 1.29.0

package/src/features/billing/stripe-customer/components/forms/PaymentMethodEditor.tsx

@@ -1,20 +1,13 @@
 "use client";
 
-import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { useEffect, useState } from "react";
 import {
-  Alert,
-  AlertDescription,
-  Button,
-  Checkbox,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  Label,
 } from "../../../../../shadcnui";
-import { StripeCustomerService } from "../../data";
+import { PaymentMethodForm } from "./PaymentMethodForm";
 
 type PaymentMethodEditorProps = {
   open: boolean;
@@ -23,86 +16,13 @@ type PaymentMethodEditorProps = {
 };
 
 export function PaymentMethodEditor({ open, onOpenChange, onSuccess }: PaymentMethodEditorProps) {
-  const stripe = useStripe();
-  const elements = useElements();
-
-  const [setupIntent, setSetupIntent] = useState<{ clientSecret: string } | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-  const [setAsDefault, setSetAsDefault] = useState<boolean>(true);
-
-  // Fetch setup intent on component mount
-  useEffect(() => {
-    const fetchSetupIntent = async () => {
-      setLoading(true);
-      try {
-        const intent = await StripeCustomerService.createSetupIntent();
-        setSetupIntent(intent);
-      } catch (err) {
-        console.error("[PaymentMethodEditor] Failed to create setup intent:", err);
-        setError("Failed to initialize payment form. Please try again.");
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    if (open) {
-      fetchSetupIntent();
-    }
-  }, [open]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!stripe || !elements || !setupIntent) {
-      return;
-    }
-
-    setIsSubmitting(true);
-    setError(null);
-
-    try {
-      const cardElement = elements.getElement(CardElement);
-      if (!cardElement) {
-        throw new Error("Card element not found");
-      }
-
-      // Confirm card setup with Stripe
-      const { error: stripeError, setupIntent: confirmedSetupIntent } = await stripe.confirmCardSetup(
-        setupIntent.clientSecret,
-        {
-          payment_method: {
-            card: cardElement,
-          },
-        },
-      );
-
-      if (stripeError) {
-        console.error("[PaymentMethodEditor] Stripe error:", stripeError);
-        setError(stripeError.message || "Failed to add payment method. Please check your card details.");
-        setIsSubmitting(false);
-        return;
-      }
-
-      // Set as default if checkbox is checked
-      if (setAsDefault && confirmedSetupIntent?.payment_method) {
-        await StripeCustomerService.setDefaultPaymentMethod({
-          paymentMethodId:
-            typeof confirmedSetupIntent.payment_method === "string"
-              ? confirmedSetupIntent.payment_method
-              : confirmedSetupIntent.payment_method.id,
-        });
-      }
+  const handleSuccess = () => {
+    onSuccess();
+    onOpenChange(false);
+  };
 
-      onSuccess();
-      onOpenChange(false);
-    } catch (err: any) {
-      console.error("[PaymentMethodEditor] Error:", err);
-      setError(err.message || "An unexpected error occurred. Please try again.");
-    } finally {
-      setIsSubmitting(false);
-    }
+  const handleCancel = () => {
+    onOpenChange(false);
   };
 
   return (
@@ -114,71 +34,11 @@ export function PaymentMethodEditor({ open, onOpenChange, onSuccess }: PaymentMe
             Add a new payment method to your account. Your card information is securely processed by Stripe.
           </DialogDescription>
         </DialogHeader>
-
-        {loading && (
-          <div className="flex items-center justify-center py-8">
-            <p className="text-muted-foreground">Loading payment form...</p>
-          </div>
-        )}
-
-        {!loading && setupIntent && (
-          <form onSubmit={handleSubmit} className="flex flex-col gap-y-4">
-            {/* Card Element */}
-            <div className="rounded-md border border-gray-300 p-3">
-              <CardElement
-                options={{
-                  style: {
-                    base: {
-                      fontSize: "16px",
-                      color: "#424770",
-                      "::placeholder": {
-                        color: "#aab7c4",
-                      },
-                    },
-                    invalid: {
-                      color: "#9e2146",
-                    },
-                  },
-                }}
-              />
-            </div>
-
-            {/* Set as Default Checkbox */}
-            <div className="flex items-center gap-x-2">
-              <Checkbox
-                id="setAsDefault"
-                checked={setAsDefault}
-                onCheckedChange={(checked) => setSetAsDefault(!!checked)}
-              />
-              <Label htmlFor="setAsDefault" className="text-sm font-normal">
-                Set as default payment method
-              </Label>
-            </div>
-
-            {/* Error Alert */}
-            {error && (
-              <Alert variant="destructive" className="bg-red-50 border-red-200">
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            )}
-
-            {/* Action Buttons */}
-            <div className="flex justify-end gap-x-2">
-              <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={!stripe || isSubmitting}>
-                {isSubmitting ? "Processing..." : "Add Card"}
-              </Button>
-            </div>
-          </form>
-        )}
-
-        {/* Error State */}
-        {!loading && !setupIntent && error && (
-          <Alert variant="destructive" className="bg-red-50 border-red-200">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
+        {open && (
+          <PaymentMethodForm
+            onSuccess={handleSuccess}
+            onCancel={handleCancel}
+          />
         )}
       </DialogContent>
     </Dialog>

package/src/features/billing/stripe-customer/components/forms/PaymentMethodForm.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Checkbox,
+  Label,
+} from "../../../../../shadcnui";
+import { StripeCustomerService } from "../../data";
+
+type PaymentMethodFormProps = {
+  onSuccess: () => void;
+  onCancel: () => void;
+  isLoading?: boolean;
+};
+
+export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: PaymentMethodFormProps) {
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const [setupIntent, setSetupIntent] = useState<{ clientSecret: string } | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [setAsDefault, setSetAsDefault] = useState<boolean>(true);
+
+  // Fetch setup intent on component mount
+  useEffect(() => {
+    const fetchSetupIntent = async () => {
+      setLoading(true);
+      try {
+        const intent = await StripeCustomerService.createSetupIntent();
+        setSetupIntent(intent);
+      } catch (err) {
+        console.error("[PaymentMethodForm] Failed to create setup intent:", err);
+        setError("Failed to initialize payment form. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSetupIntent();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!stripe || !elements || !setupIntent) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const cardElement = elements.getElement(CardElement);
+      if (!cardElement) {
+        throw new Error("Card element not found");
+      }
+
+      // Confirm card setup with Stripe
+      const { error: stripeError, setupIntent: confirmedSetupIntent } = await stripe.confirmCardSetup(
+        setupIntent.clientSecret,
+        {
+          payment_method: {
+            card: cardElement,
+          },
+        },
+      );
+
+      if (stripeError) {
+        console.error("[PaymentMethodForm] Stripe error:", stripeError);
+        setError(stripeError.message || "Failed to add payment method. Please check your card details.");
+        setIsSubmitting(false);
+        return;
+      }
+
+      // Set as default if checkbox is checked
+      if (setAsDefault && confirmedSetupIntent?.payment_method) {
+        await StripeCustomerService.setDefaultPaymentMethod({
+          paymentMethodId:
+            typeof confirmedSetupIntent.payment_method === "string"
+              ? confirmedSetupIntent.payment_method
+              : confirmedSetupIntent.payment_method.id,
+        });
+      }
+
+      onSuccess();
+    } catch (err: any) {
+      console.error("[PaymentMethodForm] Error:", err);
+      setError(err.message || "An unexpected error occurred. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <p className="text-muted-foreground">Loading payment form...</p>
+      </div>
+    );
+  }
+
+  if (!setupIntent && error) {
+    return (
+      <Alert variant="destructive" className="bg-red-50 border-red-200">
+        <AlertDescription>{error}</AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-y-4">
+      {/* Card Element */}
+      <div className="rounded-md border border-gray-300 p-3">
+        <CardElement
+          options={{
+            style: {
+              base: {
+                fontSize: "16px",
+                color: "#424770",
+                "::placeholder": {
+                  color: "#aab7c4",
+                },
+              },
+              invalid: {
+                color: "#9e2146",
+              },
+            },
+          }}
+        />
+      </div>
+
+      {/* Set as Default Checkbox */}
+      <div className="flex items-center gap-x-2">
+        <Checkbox
+          id="setAsDefault"
+          checked={setAsDefault}
+          onCheckedChange={(checked) => setSetAsDefault(!!checked)}
+        />
+        <Label htmlFor="setAsDefault" className="text-sm font-normal">
+          Set as default payment method
+        </Label>
+      </div>
+
+      {/* Error Alert */}
+      {error && (
+        <Alert variant="destructive" className="bg-red-50 border-red-200">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex justify-end gap-x-2">
+        <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting || isLoading}>
+          Cancel
+        </Button>
+        <Button type="submit" disabled={!stripe || isSubmitting || isLoading}>
+          {isSubmitting ? "Processing..." : "Add Card"}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/src/features/billing/stripe-customer/components/forms/index.ts

@@ -1 +1,2 @@
 export * from "./PaymentMethodEditor";
+export * from "./PaymentMethodForm";

package/src/features/billing/stripe-price/components/forms/PriceEditor.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AlertCircle, PlusIcon, XIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { v4 } from "uuid";
 import { z } from "zod";
@@ -85,6 +85,24 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
     },
   });
 
+  // Reset form when dialog opens to ensure fresh state
+  useEffect(() => {
+    if (open) {
+      form.reset({
+        unitAmount: price?.unitAmount ? price.unitAmount / 100 : 0,
+        currency: price?.currency || "usd",
+        interval: price?.priceType === "one_time" ? "one_time" : price?.recurring?.interval || "month",
+        intervalCount: price?.recurring?.intervalCount || 1,
+        usageType: price?.recurring?.usageType || "licensed",
+        nickname: price?.nickname || "",
+        active: price?.active ?? true,
+        description: price?.description || "",
+        features: price?.features || [],
+        token: price?.token?.toString() ?? "",
+      });
+    }
+  }, [open, price?.id]);
+
   const watchInterval = form.watch("interval");
   const isRecurring = watchInterval !== "one_time";
 

package/src/features/billing/stripe-product/components/forms/ProductEditor.tsx

@@ -23,7 +23,7 @@ export function ProductEditor({ product, open, onOpenChange, onSuccess }: Produc
 
   const formSchema = z.object({
     name: z.string().min(1, { message: "Product name is required" }),
-    description: z.string().optional(),
+    description: z.string().min(1, { message: "Description is required" }),
     active: z.boolean(),
   });
 
@@ -85,7 +85,7 @@ export function ProductEditor({ product, open, onOpenChange, onSuccess }: Produc
               form={form}
               id="description"
               name="Description"
-              placeholder="Enter product description (optional)"
+              placeholder="Enter product description"
               className="min-h-32"
             />