Changes

Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
2026-07-11 12:59:52 +00:00
parent 44ef2d5b2c
commit 71eec28ed1
1 changed files with 128 additions and 32 deletions
@@ -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", {
-        body: {
-          ...result.data,
+      const body = {
+        method,
        employees,
-          kg_per_vecka: recommendedKg,
-          pris_per_vecka: weeklyPrice,
-        },
-      });
+        kg_per_week: recommendedKg,
+        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>{" "}
-                och kontaktar dig inom kort för att bekräfta leverans.
+                </strong>
+                . 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>
          )}