codex has reworked checkout, but frontend doesnt work

resources/js/pages/auth/RegisterForm.tsx

@@ -1,23 +1,33 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useForm, usePage } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import toast from 'react-hot-toast';
 import { LoaderCircle, User, Mail, Phone, Lock, MapPin } from 'lucide-react';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 
-interface RegisterFormProps {
-  packageId?: number;
-  onSuccess?: (userData: any) => void;
-  privacyHtml: string;
+declare const route: (name: string, params?: Record<string, unknown>) => string;
+
+export interface RegisterSuccessPayload {
+  user: any | null;
+  redirect?: string | null;
+  pending_purchase?: boolean;
 }
 
-export default function RegisterForm({ packageId, onSuccess, privacyHtml }: RegisterFormProps) {
+interface RegisterFormProps {
+  packageId?: number;
+  onSuccess?: (payload: RegisterSuccessPayload) => void;
+  privacyHtml: string;
+  locale?: string;
+}
+
+export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale }: RegisterFormProps) {
   const [privacyOpen, setPrivacyOpen] = useState(false);
   const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
   const { t } = useTranslation(['auth', 'common']);
-  const { props } = usePage<{ errors: Record<string, string> }>();
+  const page = usePage<{ errors: Record<string, string>; locale?: string; auth?: { user?: any | null } }>();
+  const resolvedLocale = locale ?? page.props.locale ?? 'de';
 
-  const { data, setData, post, processing, errors, clearErrors, reset } = useForm({
+  const { data, setData, errors, clearErrors, reset, setError } = useForm({
     username: '',
     email: '',
     password: '',
@@ -36,18 +46,76 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
     }
   }, [errors, hasTriedSubmit]);
 
-  const submit = (e: React.FormEvent) => {
-    e.preventDefault();
+  const registerEndpoint = useMemo(() => {
+    if (typeof route === 'function') {
+      try {
+        return route('checkout.register');
+      } catch (error) {
+        // ignore ziggy errors and fall back
+      }
+    }
+
+    return `/${resolvedLocale}/register`;
+  }, [resolvedLocale]);
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
     setHasTriedSubmit(true);
-    post('/register', {
-      preserveScroll: true,
-      onSuccess: (page) => {
-        if (onSuccess) {
-          onSuccess((page as any).props.auth.user);
-        }
+    setIsSubmitting(true);
+    clearErrors();
+
+    const body = {
+      ...data,
+      locale: resolvedLocale,
+      package_id: data.package_id ?? packageId ?? null,
+    };
+
+    try {
+      const response = await fetch(registerEndpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+          'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '',
+        },
+        credentials: 'same-origin',
+        body: JSON.stringify(body),
+      });
+
+      if (response.ok) {
+        const json = await response.json();
+        toast.success(t('register.success_toast', 'Registrierung erfolgreich'));
+        onSuccess?.({
+          user: json?.user ?? null,
+          redirect: json?.redirect ?? null,
+          pending_purchase: json?.pending_purchase ?? json?.user?.pending_purchase ?? false,
+        });
         reset();
-      },
-    });
+        setHasTriedSubmit(false);
+        return;
+      }
+
+      if (response.status === 422) {
+        const json = await response.json();
+        const fieldErrors = json?.errors ?? {};
+        Object.entries(fieldErrors).forEach(([key, message]) => {
+          if (Array.isArray(message) && message.length > 0) {
+            setError(key, message[0] as string);
+          } else if (typeof message === 'string') {
+            setError(key, message);
+          }
+        });
+        toast.error(t('register.validation_failed', 'Bitte pruefen Sie Ihre Eingaben.'));
+        return;
+      }
+
+      toast.error(t('register.unexpected_error', 'Registrierung nicht moeglich.'));
+    } catch (error) {
+      console.error('Register request failed', error);
+      toast.error(t('register.unexpected_error', 'Registrierung nicht moeglich.'));
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   useEffect(() => {
@@ -323,10 +391,10 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
       <button
         type="button"
         onClick={submit}
-        disabled={processing}
+        disabled={isSubmitting}
         className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#FFB6C1] hover:bg-[#FF69B4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FFB6C1] transition duration-300 disabled:opacity-50"
       >
-        {processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
+        {isSubmitting && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
         {t('register.submit')}
       </button>
 
@@ -341,4 +409,12 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
       </Dialog>
     </div>
   );
-}
+}
+
+
+
+
+
+
+
+