Changes

Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>

src/components/PlansSection.tsx

@@ -1,12 +1,15 @@
 import { useState, useMemo, useEffect } from "react";
-import { Loader2, CheckCircle2 } from "lucide-react";
+import { Loader2, CheckCircle2, CreditCard, FileText } from "lucide-react";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { z } from "zod";
+import { StripeEmbeddedCheckout } from "@/components/StripeEmbeddedCheckout";
+import { getStripeEnvironment, hasPaymentsConfigured } from "@/lib/stripe";
 
 const PRICE_PER_KG = 325;
 const KG_PER_EMPLOYEE = 0.3;
+const WEEKS_PER_MONTH = 4;
 
 const isStockholmPostalCode = (postalCode: string) => {
   const cleaned = postalCode.replace(/\s/g, "");
@@ -29,13 +32,17 @@ const formSchema = z.object({
   kommentarer: z.string().trim().max(1000).optional(),
 });
 
+type Method = "card" | "invoice";
+
 const PlansSection = () => {
   const { user } = useAuth();
   const [employees, setEmployees] = useState(10);
   const [showForm, setShowForm] = useState(false);
+  const [method, setMethod] = useState<Method>("card");
   const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState<null | "card" | "invoice">(null);
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [clientSecret, setClientSecret] = useState<string | null>(null);
   const [form, setForm] = useState({
     företag: "",
     epost: "",
@@ -51,8 +58,8 @@ const PlansSection = () => {
     [employees]
   );
   const weeklyPrice = recommendedKg * PRICE_PER_KG;
+  const monthlyPrice = weeklyPrice * WEEKS_PER_MONTH;
 
-  // Prefyll från profil om inloggad
   useEffect(() => {
     if (!user || !showForm) return;
     (async () => {
@@ -93,31 +100,79 @@ const PlansSection = () => {
       return;
     }
 
+    if (!hasPaymentsConfigured()) {
+      toast.error("Betalningar är inte konfigurerade ännu.");
+      return;
+    }
+
     setSubmitting(true);
     try {
-      const { data, error } = await supabase.functions.invoke("submit-order", {
+      const body = {
-        body: {
+        method,
-          ...result.data,
         employees,
-          kg_per_vecka: recommendedKg,
+        kg_per_week: recommendedKg,
-          pris_per_vecka: weeklyPrice,
+        company: result.data.företag,
-        },
+        email: result.data.epost,
-      });
+        phone: result.data.telefon ?? "",
+        address: result.data.adress ?? "",
+        postal_code: result.data.postnummer,
+        city: result.data.stad ?? "",
+        comments: result.data.kommentarer ?? "",
+        return_url: `${window.location.origin}/?checkout=success&session_id={CHECKOUT_SESSION_ID}`,
+        environment: getStripeEnvironment(),
+      };
+
+      const { data, error } = await supabase.functions.invoke("create-checkout", { body });
       if (error) throw error;
       if ((data as any)?.error) throw new Error((data as any).error);
-      setSubmitted(true);
+
-    } catch (err) {
+      if (method === "card") {
+        if (!(data as any)?.clientSecret) throw new Error("Kunde inte skapa checkout-session");
+        setClientSecret((data as any).clientSecret);
+      } else {
+        setSubmitted("invoice");
+      }
+    } catch (err: any) {
       console.error(err);
-      toast.error("Kunde inte skicka beställningen. Försök igen.");
+      toast.error(err?.message || "Kunde inte starta abonnemang. Försök igen.");
     } finally {
       setSubmitting(false);
     }
   };
 
+  // Show embedded checkout after we get clientSecret
+  if (clientSecret) {
+    return (
+      <section id="abonnemang" className="py-16 md:py-28 px-6 bg-background">
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-8">
+            <div className="w-24 h-px bg-primary/40 mx-auto mb-6"></div>
+            <h2 className="font-display text-3xl md:text-5xl font-semibold mb-2">
+              Slutför betalning
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              {recommendedKg} kg/vecka · {monthlyPrice.toLocaleString("sv-SE")} kr/månad (exkl. moms)
+            </p>
+          </div>
+          <div className="bg-card border border-border rounded-sm p-4 md:p-6">
+            <StripeEmbeddedCheckout fetchClientSecret={async () => clientSecret} />
+          </div>
+          <div className="text-center mt-4">
+            <button
+              onClick={() => setClientSecret(null)}
+              className="text-sm text-muted-foreground underline hover:text-foreground"
+            >
+              ← Avbryt och gå tillbaka
+            </button>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section id="abonnemang" className="py-16 md:py-28 px-6 bg-background">
       <div className="max-w-3xl mx-auto">
-        {/* Header */}
         <div className="text-center mb-10 md:mb-14">
           <div className="w-24 h-px bg-primary/40 mx-auto mb-6"></div>
           <h2 className="font-display text-3xl md:text-5xl font-semibold mb-4">
@@ -128,25 +183,23 @@ const PlansSection = () => {
           </p>
         </div>
 
-        {/* Calculator card */}
         <div className="bg-card border border-border rounded-sm shadow-[0_10px_40px_-15px_rgba(0,0,0,0.15)] p-6 md:p-12">
-          {submitted ? (
+          {submitted === "invoice" ? (
             <div className="text-center py-8 animate-fade-in">
               <CheckCircle2 className="w-16 h-16 text-primary mx-auto mb-4" />
               <h3 className="font-display text-3xl md:text-4xl font-semibold mb-3">
-                Tack för din beställning!
+                Abonnemang startat!
               </h3>
               <p className="text-muted-foreground max-w-md mx-auto">
-                Vi har tagit emot din förfrågan för{" "}
+                Vi har skapat ditt abonnemang på{" "}
                 <strong className="text-foreground">
                   {recommendedKg} kg kakor per vecka
-                </strong>{" "}
+                </strong>
-                och kontaktar dig inom kort för att bekräfta leverans.
+                . Första fakturan skickas till <strong>{form.epost}</strong> inom kort.
               </p>
             </div>
           ) : !showForm ? (
             <>
-              {/* Employee count */}
               <div className="text-center mb-8">
                 <div
                   key={employees}
@@ -159,7 +212,6 @@ const PlansSection = () => {
                 </div>
               </div>
 
-              {/* Slider */}
               <div className="mb-10 md:mb-12">
                 <input
                   type="range"
@@ -177,7 +229,6 @@ const PlansSection = () => {
                 </div>
               </div>
 
-              {/* Result */}
               <div className="text-center border-t border-border pt-8 md:pt-10 space-y-6">
                 <div>
                   <div className="text-muted-foreground text-xs md:text-sm uppercase tracking-widest mb-2">
@@ -191,12 +242,14 @@ const PlansSection = () => {
 
                 <div>
                   <div className="text-muted-foreground text-xs md:text-sm uppercase tracking-widest mb-2">
-                    Pris per vecka
+                    Pris per månad
                   </div>
                   <div className="font-display text-3xl md:text-4xl font-semibold text-primary tabular-nums">
-                    {weeklyPrice.toLocaleString("sv-SE")} kr
+                    {monthlyPrice.toLocaleString("sv-SE")} kr
+                  </div>
+                  <div className="text-muted-foreground text-xs mt-1">
+                    exklusive moms · {weeklyPrice.toLocaleString("sv-SE")} kr/vecka
                   </div>
-                  <div className="text-muted-foreground text-xs mt-1">exklusive moms</div>
                 </div>
 
                 <button
@@ -211,12 +264,12 @@ const PlansSection = () => {
             <form onSubmit={handleSubmit} className="space-y-5 animate-fade-in">
               <div className="text-center mb-2">
                 <div className="text-muted-foreground text-xs uppercase tracking-widest mb-1">
-                  Din beställning
+                  Ditt abonnemang
                 </div>
                 <div className="font-display text-2xl md:text-3xl font-semibold">
                   {recommendedKg} kg/vecka —{" "}
                   <span className="text-primary">
-                    {weeklyPrice.toLocaleString("sv-SE")} kr
+                    {monthlyPrice.toLocaleString("sv-SE")} kr/mån
                   </span>
                 </div>
                 <div className="text-muted-foreground text-xs">
@@ -224,6 +277,47 @@ const PlansSection = () => {
                 </div>
               </div>
 
+              {/* Betalningsmetod */}
+              <div>
+                <label className="block mb-2 text-sm font-semibold">Betalningsmetod</label>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                  <button
+                    type="button"
+                    onClick={() => setMethod("card")}
+                    className={`flex items-center gap-3 p-4 rounded-sm border text-left transition-colors ${
+                      method === "card"
+                        ? "border-primary bg-primary/5"
+                        : "border-border hover:border-primary/50"
+                    }`}
+                  >
+                    <CreditCard className="w-5 h-5 text-primary" />
+                    <div>
+                      <div className="font-semibold text-sm">Kort</div>
+                      <div className="text-xs text-muted-foreground">
+                        Automatiskt varje månad
+                      </div>
+                    </div>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setMethod("invoice")}
+                    className={`flex items-center gap-3 p-4 rounded-sm border text-left transition-colors ${
+                      method === "invoice"
+                        ? "border-primary bg-primary/5"
+                        : "border-border hover:border-primary/50"
+                    }`}
+                  >
+                    <FileText className="w-5 h-5 text-primary" />
+                    <div>
+                      <div className="font-semibold text-sm">Faktura</div>
+                      <div className="text-xs text-muted-foreground">
+                        Månadsvis via e-post
+                      </div>
+                    </div>
+                  </button>
+                </div>
+              </div>
+
               <div>
                 <label className="block mb-1.5 text-sm font-semibold">
                   Företagsnamn <span className="text-primary">*</span>
@@ -332,15 +426,17 @@ const PlansSection = () => {
                   {submitting ? (
                     <>
                       <Loader2 className="w-4 h-4 animate-spin" />
-                      Skickar...
+                      {method === "card" ? "Öppnar betalning..." : "Startar abonnemang..."}
                     </>
+                  ) : method === "card" ? (
+                    "Fortsätt till betalning"
                   ) : (
-                    "Skicka beställning"
+                    "Starta abonnemang (faktura)"
                   )}
                 </button>
               </div>
               <p className="text-center text-muted-foreground text-xs">
-                Vi kontaktar dig för att bekräfta leverans och betalning.
+                Alla priser exklusive moms. Moms (25%) läggs på vid betalning.
               </p>
             </form>
           )}