Changes

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

src/components/PlansSection.tsx

@@ -1,65 +1,50 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
-import { Loader2, CreditCard, FileText } from "lucide-react";
+import { Loader2, CheckCircle2 } from "lucide-react";
-import {
+import { supabase } from "@/integrations/supabase/client";
-  storefrontApiRequest,
+import { useAuth } from "@/hooks/useAuth";
-  CART_CREATE_MUTATION,
-  formatCheckoutUrl,
-} from "@/lib/shopify";
 import { toast } from "sonner";
+import { z } from "zod";
 
 const PRICE_PER_KG = 325;
 const KG_PER_EMPLOYEE = 0.3;
 
-const availablePlans = [
+const isStockholmPostalCode = (postalCode: string) => {
-  { kg: 3, handle: "liten-kakabonnemang-3-kg-vecka", name: "Liten" },
+  const cleaned = postalCode.replace(/\s/g, "");
-  { kg: 5, handle: "mellan-kakabonnemang-5-kg-vecka", name: "Mellan" },
+  if (!/^\d{5}$/.test(cleaned)) return false;
-  { kg: 10, handle: "stor-kakabonnemang-10-kg-vecka", name: "Stor" },
+  const num = parseInt(cleaned, 10);
-];
+  return num >= 10000 && num <= 19999;
-
-const pickPlan = (kg: number) => {
-  const match = availablePlans.find((p) => p.kg >= kg);
-  return match || availablePlans[availablePlans.length - 1];
 };
 
-const PRODUCT_BY_HANDLE_QUERY = `
+const formSchema = z.object({
-  query ProductByHandle($handle: String!) {
+  företag: z.string().trim().min(1, "Fyll i företagsnamn").max(100),
-    productByHandle(handle: $handle) {
+  epost: z.string().trim().email("Ange en giltig e-postadress").max(255),
-      id
+  telefon: z.string().trim().max(30).optional(),
-      title
+  adress: z.string().trim().max(200).optional(),
-      handle
+  postnummer: z
-      variants(first: 1) {
+    .string()
-        edges {
+    .trim()
-          node {
+    .min(1, "Fyll i postnummer")
-            id
+    .refine(isStockholmPostalCode, "Vi levererar endast inom Storstockholm (100 00 – 199 99)"),
-            availableForSale
+  stad: z.string().trim().max(100).optional(),
-          }
+  kommentarer: z.string().trim().max(1000).optional(),
-        }
+});
-      }
-      sellingPlanGroups(first: 5) {
-        edges {
-          node {
-            name
-            sellingPlans(first: 10) {
-              edges {
-                node {
-                  id
-                  name
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-type PaymentMethod = "card" | "invoice";
 
 const PlansSection = () => {
+  const { user } = useAuth();
   const [employees, setEmployees] = useState(10);
-  const [loadingMethod, setLoadingMethod] = useState<PaymentMethod | null>(null);
+  const [showForm, setShowForm] = useState(false);
-  const [showPaymentOptions, setShowPaymentOptions] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [form, setForm] = useState({
+    företag: "",
+    epost: "",
+    telefon: "",
+    adress: "",
+    postnummer: "",
+    stad: "",
+    kommentarer: "",
+  });
 
   const recommendedKg = useMemo(
     () => Math.max(1, Math.round(employees * KG_PER_EMPLOYEE)),
@@ -67,83 +52,67 @@ const PlansSection = () => {
   );
   const weeklyPrice = recommendedKg * PRICE_PER_KG;
 
-  const handleStart = async (method: PaymentMethod) => {
+  // Prefyll från profil om inloggad
-    const plan = pickPlan(recommendedKg);
+  useEffect(() => {
-    setLoadingMethod(method);
+    if (!user || !showForm) return;
+    (async () => {
+      const { data } = await supabase
+        .from("profiles")
+        .select("company_name, phone, street_address, postal_code, city")
+        .eq("user_id", user.id)
+        .maybeSingle();
+      setForm((prev) => ({
+        ...prev,
+        företag: prev.företag || data?.company_name || "",
+        epost: prev.epost || user.email || "",
+        telefon: prev.telefon || data?.phone || "",
+        adress: prev.adress || data?.street_address || "",
+        postnummer: prev.postnummer || data?.postal_code || "",
+        stad: prev.stad || data?.city || "",
+      }));
+    })();
+  }, [user, showForm]);
 
-    try {
+  const handleChange = (
-      const productData = await storefrontApiRequest(PRODUCT_BY_HANDLE_QUERY, {
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-        handle: plan.handle,
+  ) => {
-      });
+    const { name, value } = e.target;
-
+    setForm((p) => ({ ...p, [name]: value }));
-      const product = productData?.data?.productByHandle;
+    if (errors[name]) setErrors((p) => ({ ...p, [name]: "" }));
-      if (!product) {
-        toast.error(`Kunde inte hitta produkten "${plan.handle}" i Shopify.`);
-        return;
-      }
-
-      const variant = product.variants?.edges?.[0]?.node;
-      if (!variant?.id) {
-        toast.error("Ingen variant tillgänglig på produkten.");
-        return;
-      }
-
-      const sellingPlanId =
-        product.sellingPlanGroups?.edges?.[0]?.node?.sellingPlans?.edges?.[0]?.node?.id;
-
-      if (!sellingPlanId) {
-        toast.error(
-          "Ingen Appstle-abonnemangsplan hittades. Aktivera Storefront-behörigheten 'unauthenticated_read_selling_plans' och koppla en Appstle-plan till produkten.",
-          { duration: 10000 }
-        );
-        return;
-      }
-
-      const data = await storefrontApiRequest(CART_CREATE_MUTATION, {
-        input: {
-          lines: [
-            {
-              quantity: 1,
-              merchandiseId: variant.id,
-              sellingPlanId,
-            },
-          ],
-          attributes: [
-            { key: "Antal anställda", value: String(employees) },
-            { key: "Rekommenderad mängd", value: `${recommendedKg} kg/vecka` },
-            { key: "Veckopris (exkl. moms)", value: `${weeklyPrice} kr` },
-            {
-              key: "Önskad betalningsmetod",
-              value: method === "card" ? "Automatiskt kort varje månad" : "Månadsfaktura",
-            },
-          ],
-        },
-      });
-
-      const errors = data?.data?.cartCreate?.userErrors || [];
-      if (errors.length > 0) {
-        console.error("Cart creation failed:", errors);
-        toast.error("Kunde inte skapa checkout: " + errors[0].message);
-        return;
-      }
-
-      const checkoutUrl = data?.data?.cartCreate?.cart?.checkoutUrl;
-      if (!checkoutUrl) {
-        toast.error("Ingen checkout-länk mottagen");
-        return;
-      }
-
-      window.open(formatCheckoutUrl(checkoutUrl), "_blank");
-    } catch (e) {
-      console.error(e);
-      toast.error("Något gick fel vid checkout");
-    } finally {
-      setLoadingMethod(null);
-    }
   };
 
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const result = formSchema.safeParse(form);
+    if (!result.success) {
+      const fe: Record<string, string> = {};
+      result.error.errors.forEach((err) => {
+        if (err.path[0]) fe[err.path[0] as string] = err.message;
+      });
+      setErrors(fe);
+      return;
+    }
 
-  const isBusy = loadingMethod !== null;
+    setSubmitting(true);
+    try {
+      const { data, error } = await supabase.functions.invoke("submit-order", {
+        body: {
+          ...result.data,
+          employees,
+          kg_per_vecka: recommendedKg,
+          pris_per_vecka: weeklyPrice,
+        },
+      });
+      if (error) throw error;
+      if ((data as any)?.error) throw new Error((data as any).error);
+      setSubmitted(true);
+    } catch (err) {
+      console.error(err);
+      toast.error("Kunde inte skicka beställningen. Försök igen.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
 
   return (
     <section id="abonnemang" className="py-16 md:py-28 px-6 bg-background">
@@ -161,114 +130,220 @@ const PlansSection = () => {
 
         {/* 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">
-          {/* Employee count display */}
+          {submitted ? (
-          <div className="text-center mb-8">
+            <div className="text-center py-8 animate-fade-in">
-            <div
+              <CheckCircle2 className="w-16 h-16 text-primary mx-auto mb-4" />
-              key={employees}
+              <h3 className="font-display text-3xl md:text-4xl font-semibold mb-3">
-              className="font-display text-6xl md:text-8xl font-semibold text-primary tabular-nums animate-fade-in"
+                Tack för din beställning!
-            >
+              </h3>
-              {employees}
+              <p className="text-muted-foreground max-w-md mx-auto">
+                Vi har tagit emot din förfrågan för{" "}
+                <strong className="text-foreground">
+                  {recommendedKg} kg kakor per vecka
+                </strong>{" "}
+                och kontaktar dig inom kort för att bekräfta leverans.
+              </p>
             </div>
-            <div className="text-muted-foreground text-sm md:text-base mt-2 tracking-wide uppercase">
+          ) : !showForm ? (
-              {employees === 1 ? "anställd" : "anställda"}
+            <>
-            </div>
+              {/* Employee count */}
-          </div>
+              <div className="text-center mb-8">
-
+                <div
-          {/* Slider */}
+                  key={employees}
-          <div className="mb-10 md:mb-12">
+                  className="font-display text-6xl md:text-8xl font-semibold text-primary tabular-nums animate-fade-in"
-            <input
+                >
-              type="range"
+                  {employees}
-              min={1}
-              max={100}
-              step={1}
-              value={employees}
-              onChange={(e) => setEmployees(parseInt(e.target.value, 10))}
-              className="calculator-slider w-full"
-              aria-label="Antal anställda"
-            />
-            <div className="flex justify-between text-xs text-muted-foreground mt-3">
-              <span>1</span>
-              <span>100</span>
-            </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">
-                Rekommenderad mängd
-              </div>
-              <div className="font-display text-4xl md:text-5xl font-semibold text-foreground tabular-nums">
-                {recommendedKg} kg
-              </div>
-              <div className="text-muted-foreground text-sm mt-1">per vecka</div>
-            </div>
-
-            <div>
-              <div className="text-muted-foreground text-xs md:text-sm uppercase tracking-widest mb-2">
-                Pris per vecka
-              </div>
-              <div className="font-display text-3xl md:text-4xl font-semibold text-primary tabular-nums">
-                {weeklyPrice.toLocaleString("sv-SE")} kr
-              </div>
-              <div className="text-muted-foreground text-xs mt-1">exklusive moms</div>
-            </div>
-
-            {!showPaymentOptions ? (
-              <button
-                onClick={() => setShowPaymentOptions(true)}
-                disabled={isBusy}
-                className="btn-classic w-full py-4 text-base md:text-lg rounded-sm disabled:opacity-50 mt-2"
-              >
-                Starta abonnemang
-              </button>
-            ) : (
-              <div className="animate-fade-in space-y-3 pt-2">
-                <p className="text-muted-foreground text-sm">
-                  Välj betalningsmetod
-                </p>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                  <button
-                    onClick={() => handleStart("card")}
-                    disabled={isBusy}
-                    className="btn-classic py-4 px-4 text-base rounded-sm disabled:opacity-50 flex items-center justify-center gap-2"
-                  >
-                    {loadingMethod === "card" ? (
-                      <Loader2 className="w-5 h-5 animate-spin" />
-                    ) : (
-                      <>
-                        <CreditCard className="w-5 h-5" />
-                        <span>Automatiskt varje månad</span>
-                      </>
-                    )}
-                  </button>
-                  <button
-                    onClick={() => handleStart("invoice")}
-                    disabled={isBusy}
-                    className="py-4 px-4 text-base rounded-sm border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
-                  >
-                    {loadingMethod === "invoice" ? (
-                      <Loader2 className="w-5 h-5 animate-spin" />
-                    ) : (
-                      <>
-                        <FileText className="w-5 h-5" />
-                        <span>Månadsfaktura</span>
-                      </>
-                    )}
-                  </button>
                 </div>
+                <div className="text-muted-foreground text-sm md:text-base mt-2 tracking-wide uppercase">
+                  {employees === 1 ? "anställd" : "anställda"}
+                </div>
+              </div>
+
+              {/* Slider */}
+              <div className="mb-10 md:mb-12">
+                <input
+                  type="range"
+                  min={1}
+                  max={100}
+                  step={1}
+                  value={employees}
+                  onChange={(e) => setEmployees(parseInt(e.target.value, 10))}
+                  className="calculator-slider w-full"
+                  aria-label="Antal anställda"
+                />
+                <div className="flex justify-between text-xs text-muted-foreground mt-3">
+                  <span>1</span>
+                  <span>100</span>
+                </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">
+                    Rekommenderad mängd
+                  </div>
+                  <div className="font-display text-4xl md:text-5xl font-semibold text-foreground tabular-nums">
+                    {recommendedKg} kg
+                  </div>
+                  <div className="text-muted-foreground text-sm mt-1">per vecka</div>
+                </div>
+
+                <div>
+                  <div className="text-muted-foreground text-xs md:text-sm uppercase tracking-widest mb-2">
+                    Pris per vecka
+                  </div>
+                  <div className="font-display text-3xl md:text-4xl font-semibold text-primary tabular-nums">
+                    {weeklyPrice.toLocaleString("sv-SE")} kr
+                  </div>
+                  <div className="text-muted-foreground text-xs mt-1">exklusive moms</div>
+                </div>
+
                 <button
-                  onClick={() => setShowPaymentOptions(false)}
+                  onClick={() => setShowForm(true)}
-                  className="text-muted-foreground text-xs underline hover:text-foreground"
+                  className="btn-classic w-full py-4 text-base md:text-lg rounded-sm mt-2"
+                >
+                  Starta abonnemang
+                </button>
+              </div>
+            </>
+          ) : (
+            <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
+                </div>
+                <div className="font-display text-2xl md:text-3xl font-semibold">
+                  {recommendedKg} kg/vecka —{" "}
+                  <span className="text-primary">
+                    {weeklyPrice.toLocaleString("sv-SE")} kr
+                  </span>
+                </div>
+                <div className="text-muted-foreground text-xs">
+                  exklusive moms · {employees} {employees === 1 ? "anställd" : "anställda"}
+                </div>
+              </div>
+
+              <div>
+                <label className="block mb-1.5 text-sm font-semibold">
+                  Företagsnamn <span className="text-primary">*</span>
+                </label>
+                <input
+                  name="företag"
+                  value={form.företag}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
+                />
+                {errors.företag && (
+                  <p className="text-destructive text-xs mt-1">{errors.företag}</p>
+                )}
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block mb-1.5 text-sm font-semibold">
+                    E-post <span className="text-primary">*</span>
+                  </label>
+                  <input
+                    type="email"
+                    name="epost"
+                    value={form.epost}
+                    onChange={handleChange}
+                    className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
+                  />
+                  {errors.epost && (
+                    <p className="text-destructive text-xs mt-1">{errors.epost}</p>
+                  )}
+                </div>
+                <div>
+                  <label className="block mb-1.5 text-sm font-semibold">Telefon</label>
+                  <input
+                    type="tel"
+                    name="telefon"
+                    value={form.telefon}
+                    onChange={handleChange}
+                    className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block mb-1.5 text-sm font-semibold">Leveransadress</label>
+                <input
+                  name="adress"
+                  value={form.adress}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block mb-1.5 text-sm font-semibold">
+                    Postnummer <span className="text-primary">*</span>
+                  </label>
+                  <input
+                    name="postnummer"
+                    placeholder="t.ex. 114 32"
+                    value={form.postnummer}
+                    onChange={handleChange}
+                    className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
+                  />
+                  {errors.postnummer && (
+                    <p className="text-destructive text-xs mt-1">{errors.postnummer}</p>
+                  )}
+                </div>
+                <div>
+                  <label className="block mb-1.5 text-sm font-semibold">Stad</label>
+                  <input
+                    name="stad"
+                    value={form.stad}
+                    onChange={handleChange}
+                    className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block mb-1.5 text-sm font-semibold">Kommentarer</label>
+                <textarea
+                  name="kommentarer"
+                  value={form.kommentarer}
+                  onChange={handleChange}
+                  rows={3}
+                  className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
+                />
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-3 pt-2">
+                <button
+                  type="button"
+                  onClick={() => setShowForm(false)}
+                  disabled={submitting}
+                  className="sm:w-1/3 py-3 rounded-sm border border-border hover:bg-muted text-sm"
                 >
                   ← Tillbaka
                 </button>
-                <p className="text-muted-foreground text-xs">
+                <button
-                  Du slutför beställningen säkert hos Shopify.
+                  type="submit"
-                </p>
+                  disabled={submitting}
+                  className="btn-classic flex-1 py-3 rounded-sm disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {submitting ? (
+                    <>
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                      Skickar...
+                    </>
+                  ) : (
+                    "Skicka beställning"
+                  )}
+                </button>
               </div>
-            )}
+              <p className="text-center text-muted-foreground text-xs">
-          </div>
+                Vi kontaktar dig för att bekräfta leverans och betalning.
+              </p>
+            </form>
+          )}
         </div>
       </div>
     </section>

supabase/config.toml

@@ -8,3 +8,6 @@ verify_jwt = false
 
 [functions.send-contact-email]
 verify_jwt = false
+
+[functions.submit-order]
+verify_jwt = false

supabase/functions/submit-order/index.ts

@@ -0,0 +1,101 @@
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2.45.0";
+import { corsHeaders } from "npm:@supabase/supabase-js@2/cors";
+import { z } from "https://esm.sh/zod@3.23.8";
+
+const BodySchema = z.object({
+  företag: z.string().trim().min(1).max(100),
+  epost: z.string().trim().email().max(255),
+  telefon: z.string().trim().max(30).optional().default(""),
+  adress: z.string().trim().max(200).optional().default(""),
+  postnummer: z
+    .string()
+    .trim()
+    .regex(/^\s*\d{3}\s*\d{2}\s*$/, "Ogiltigt postnummer")
+    .refine((v) => {
+      const n = parseInt(v.replace(/\s/g, ""), 10);
+      return n >= 10000 && n <= 19999;
+    }, "Vi levererar endast inom Storstockholm (100 00 – 199 99)"),
+  stad: z.string().trim().max(100).optional().default(""),
+  kommentarer: z.string().trim().max(1000).optional().default(""),
+  employees: z.number().int().min(1).max(1000),
+  kg_per_vecka: z.number().min(1).max(500),
+  pris_per_vecka: z.number().min(0).max(1000000),
+});
+
+Deno.serve(async (req) => {
+  if (req.method === "OPTIONS") {
+    return new Response("ok", { headers: corsHeaders });
+  }
+
+  try {
+    const parsed = BodySchema.safeParse(await req.json());
+    if (!parsed.success) {
+      return new Response(
+        JSON.stringify({ error: parsed.error.flatten().fieldErrors }),
+        {
+          status: 400,
+          headers: { ...corsHeaders, "Content-Type": "application/json" },
+        }
+      );
+    }
+    const d = parsed.data;
+
+    const supabase = createClient(
+      Deno.env.get("SUPABASE_URL")!,
+      Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
+    );
+
+    const orderNumber = `ABO-${Date.now().toString(36).toUpperCase()}`;
+
+    const { data, error } = await supabase
+      .from("orders")
+      .insert({
+        order_number: orderNumber,
+        customer_email: d.epost,
+        customer_name: d.företag,
+        items: [
+          {
+            typ: "Kakabonnemang",
+            antal_anställda: d.employees,
+            kg_per_vecka: d.kg_per_vecka,
+            pris_per_vecka_exkl_moms: d.pris_per_vecka,
+            valuta: "SEK",
+            leverans: {
+              adress: d.adress,
+              postnummer: d.postnummer,
+              stad: d.stad,
+            },
+            telefon: d.telefon,
+            kommentarer: d.kommentarer,
+          },
+        ],
+        total_amount: d.pris_per_vecka,
+        currency: "SEK",
+        status: "pending",
+      })
+      .select("id, order_number")
+      .single();
+
+    if (error) {
+      console.error("Order insert failed:", error);
+      return new Response(
+        JSON.stringify({ error: "Kunde inte spara beställning", details: error.message }),
+        {
+          status: 500,
+          headers: { ...corsHeaders, "Content-Type": "application/json" },
+        }
+      );
+    }
+
+    return new Response(JSON.stringify({ ok: true, order: data }), {
+      status: 200,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  } catch (e) {
+    console.error("submit-order error:", e);
+    return new Response(JSON.stringify({ error: (e as Error).message }), {
+      status: 500,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  }
+});