gpt-engineer-app[bot]
01695609bb
Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
454 lines
18 KiB
TypeScript
454 lines
18 KiB
TypeScript
import { useState, useMemo, useEffect } from "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, "");
|
||
if (!/^\d{5}$/.test(cleaned)) return false;
|
||
const num = parseInt(cleaned, 10);
|
||
return num >= 10000 && num <= 19999;
|
||
};
|
||
|
||
const stockholmDeliveryMessage = "Vi levererar endast till företag inom Storstockholm.";
|
||
|
||
const formSchema = z.object({
|
||
företag: z.string().trim().min(1, "Fyll i företagsnamn").max(100),
|
||
epost: z.string().trim().email("Ange en giltig e-postadress").max(255),
|
||
telefon: z.string().trim().max(30).optional(),
|
||
adress: z.string().trim().max(200).optional(),
|
||
postnummer: z
|
||
.string()
|
||
.trim()
|
||
.min(1, "Fyll i postnummer")
|
||
.refine(isStockholmPostalCode, "Vi levererar endast inom Storstockholm (100 00 – 199 99)"),
|
||
stad: z.string().trim().max(100).optional(),
|
||
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<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: "",
|
||
telefon: "",
|
||
adress: "",
|
||
postnummer: "",
|
||
stad: "",
|
||
kommentarer: "",
|
||
});
|
||
|
||
const recommendedKg = useMemo(
|
||
() => Math.max(1, Math.round(employees * KG_PER_EMPLOYEE)),
|
||
[employees]
|
||
);
|
||
const weeklyPrice = recommendedKg * PRICE_PER_KG;
|
||
const monthlyPrice = weeklyPrice * WEEKS_PER_MONTH;
|
||
|
||
useEffect(() => {
|
||
if (!user || !showForm) return;
|
||
(async () => {
|
||
const { data } = await supabase
|
||
.from("profiles")
|
||
.select("company_name, phone, street_address, postal_code")
|
||
.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 || "",
|
||
}));
|
||
})();
|
||
}, [user, showForm]);
|
||
|
||
const handleChange = (
|
||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||
) => {
|
||
const { name, value } = e.target;
|
||
setForm((p) => ({ ...p, [name]: value }));
|
||
if (errors[name]) setErrors((p) => ({ ...p, [name]: "" }));
|
||
if (name === "postnummer" && errors.postnummer) {
|
||
setErrors((p) => ({ ...p, postnummer: "" }));
|
||
}
|
||
};
|
||
|
||
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;
|
||
}
|
||
|
||
if (!hasPaymentsConfigured()) {
|
||
toast.error("Betalningar är inte konfigurerade ännu.");
|
||
return;
|
||
}
|
||
|
||
setSubmitting(true);
|
||
try {
|
||
const body = {
|
||
method,
|
||
employees,
|
||
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: "Storstockholm",
|
||
comments: result.data.kommentarer ?? "",
|
||
return_url: `${window.location.origin}/order-confirmation?session_id={CHECKOUT_SESSION_ID}&method=card&kg=${recommendedKg}&email=${encodeURIComponent(result.data.epost)}`,
|
||
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);
|
||
|
||
if (method === "card") {
|
||
if (!(data as any)?.clientSecret) throw new Error("Kunde inte skapa checkout-session");
|
||
setClientSecret((data as any).clientSecret);
|
||
} else {
|
||
window.location.href = `/order-confirmation?method=invoice&kg=${recommendedKg}&email=${encodeURIComponent(result.data.epost)}`;
|
||
return;
|
||
}
|
||
} catch (err: any) {
|
||
console.error(err);
|
||
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">
|
||
<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">
|
||
Hur många anställda har ni?
|
||
</h2>
|
||
<p className="text-muted-foreground text-base md:text-lg max-w-xl mx-auto">
|
||
Vi rekommenderar automatiskt rätt mängd kakor utifrån antalet medarbetare.
|
||
</p>
|
||
</div>
|
||
|
||
<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 === "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">
|
||
Abonnemang startat!
|
||
</h3>
|
||
<p className="text-muted-foreground max-w-md mx-auto">
|
||
Vi har skapat ditt abonnemang på{" "}
|
||
<strong className="text-foreground">
|
||
{recommendedKg} kg kakor per vecka
|
||
</strong>
|
||
. Första fakturan skickas till <strong>{form.epost}</strong> inom kort.
|
||
</p>
|
||
</div>
|
||
) : !showForm ? (
|
||
<>
|
||
<div className="text-center mb-8">
|
||
<div
|
||
key={employees}
|
||
className="font-display text-6xl md:text-8xl font-semibold text-primary tabular-nums animate-fade-in"
|
||
>
|
||
{employees}
|
||
</div>
|
||
<div className="text-muted-foreground text-sm md:text-base mt-2 tracking-wide uppercase">
|
||
{employees === 1 ? "anställd" : "anställda"}
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<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 månad
|
||
</div>
|
||
<div className="font-display text-3xl md:text-4xl font-semibold text-primary tabular-nums">
|
||
{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>
|
||
|
||
<button
|
||
onClick={() => setShowForm(true)}
|
||
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">
|
||
Ditt abonnemang
|
||
</div>
|
||
<div className="font-display text-2xl md:text-3xl font-semibold">
|
||
{recommendedKg} kg/vecka —{" "}
|
||
<span className="text-primary">
|
||
{monthlyPrice.toLocaleString("sv-SE")} kr/mån
|
||
</span>
|
||
</div>
|
||
<div className="text-muted-foreground text-xs">
|
||
exklusive moms · {employees} {employees === 1 ? "anställd" : "anställda"}
|
||
</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 className="border border-primary/30 bg-primary/5 px-4 py-3 rounded-sm text-sm text-foreground">
|
||
{stockholmDeliveryMessage} Ange postnummer 100 00–199 99 för att gå vidare.
|
||
</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>
|
||
<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}
|
||
aria-invalid={!!errors.postnummer}
|
||
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>
|
||
)}
|
||
<p className="text-muted-foreground text-xs mt-1">
|
||
Beställningen kan endast fortsätta för postnummer inom Storstockholm.
|
||
</p>
|
||
</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>
|
||
<button
|
||
type="submit"
|
||
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" />
|
||
{method === "card" ? "Öppnar betalning..." : "Startar abonnemang..."}
|
||
</>
|
||
) : method === "card" ? (
|
||
"Fortsätt till betalning"
|
||
) : (
|
||
"Starta abonnemang (faktura)"
|
||
)}
|
||
</button>
|
||
</div>
|
||
<p className="text-center text-muted-foreground text-xs">
|
||
Alla priser exklusive moms. Moms (25%) läggs på vid betalning.
|
||
</p>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default PlansSection;
|