feat: replacement

src/components/customer/MagicLinkForm.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+
+export function MagicLinkForm({ locale }: { locale: 'sv' | 'en' }) {
+  const t = useTranslations('customer.request');
+  const [email, setEmail] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email.trim()) return;
+    setSubmitting(true);
+    try {
+      await fetch('/api/customer/magic-link', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: email.trim(), locale }),
+      });
+    } finally {
+      setSubmitting(false);
+      setSubmitted(true);
+    }
+  }
+
+  if (submitted) {
+    return (
+      <div className="rounded-lg bg-emerald-50 p-4 text-sm text-emerald-900">
+        <div className="font-semibold">{t('successTitle')}</div>
+        <p className="mt-1 text-emerald-800">
+          {t('successBody', { email })}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-3">
+      <label className="block">
+        <span className="text-sm font-medium text-ink-900">{t('email')}</span>
+        <input
+          type="email"
+          required
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={t('emailPlaceholder')}
+          className="mt-1 w-full rounded-md border border-ink-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
+        />
+      </label>
+      <button
+        type="submit"
+        disabled={submitting}
+        className="btn-primary w-full sm:w-auto"
+      >
+        {submitting ? t('submitting') : t('submit')}
+      </button>
+    </form>
+  );
+}