feat: integrate login/registration into PurchaseWizard

resources/js/pages/marketing/PaymentForm.tsx

@@ -1,109 +1,45 @@
 import React from 'react';
-import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
 import { useForm } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Loader2 } from 'lucide-react';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 
 interface PaymentFormProps {
   packageId: number;
+  packagePrice: number; // Add price as prop
   onSuccess?: () => void;
 }
 
-export default function PaymentForm({ packageId, onSuccess }: PaymentFormProps) {
-  const stripe = useStripe();
-  const elements = useElements();
+export default function PaymentForm({ packageId, packagePrice, onSuccess }: PaymentFormProps) {
   const { t } = useTranslation('marketing');
   const { data, setData, post, processing, errors, setError } = useForm({
     package_id: packageId,
-    payment_method_id: '',
+    payment: '', // For error messages
   });
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handlePaymentSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-
-    if (!stripe || !elements) {
-      return;
-    }
-
-    const cardElement = elements.getElement(CardElement);
-
-    if (!cardElement) {
-      return;
-    }
-
-    const { error, paymentMethod } = await stripe.createPaymentMethod({
-      type: 'card',
-      card: cardElement,
-    });
-
-    if (error) {
-      setError('payment', error.message || 'Payment failed');
-      return;
-    }
-
-    setData('payment_method_id', paymentMethod.id);
-
-    const { error: confirmError } = await stripe.confirmCardPayment('/api/purchase/payment-intent', {
-      payment_method: paymentMethod.id,
-    });
-
-    if (confirmError) {
-      setError('payment', confirmError.message || 'Payment confirmation failed');
-      return;
-    }
-
-    post('/api/purchase/complete', {
-      package_id: packageId,
-      preserveScroll: true,
-      onSuccess: () => {
-        if (onSuccess) {
-          onSuccess();
-        }
-      },
-      onError: (err) => {
-        setError('payment', err.payment || 'Payment error');
-      },
-    });
+    setError('payment', t('payment.coming_soon') || 'Zahlungssystem wird bald verfügbar sein. Kontaktieren Sie uns für weitere Details.');
   };
 
-  if (!stripe || !elements) {
-    return <div>Loading Stripe...</div>;
-  }
-
   return (
     <Card>
       <CardHeader>
         <CardTitle>{t('payment.title')}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <label htmlFor="card-element" className="text-sm font-medium">
-              {t('payment.card_details')}
-            </label>
-            <div className="p-3 border border-gray-300 rounded-md">
-              <CardElement
-                options={{
-                  style: {
-                    base: {
-                      fontSize: '16px',
-                      color: '#424770',
-                      '::placeholder': {
-                        color: '#aab7c4',
-                      },
-                    },
-                  },
-                }}
-              />
-            </div>
-            {errors.payment && <Alert variant="destructive"><AlertDescription>{errors.payment}</AlertDescription></Alert>}
+        <form onSubmit={handlePaymentSubmit} className="space-y-4">
+          <div className="text-center text-sm text-muted-foreground">
+            {t('payment.placeholder') || 'Das Zahlungssystem wird bald eingerichtet. Bitte kontaktieren Sie uns für den Kauf des Pakets.'}
           </div>
-          <Button type="submit" className="w-full" disabled={!stripe || processing}>
-            {processing ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
-            {t('payment.submit', { price: 'XX €' })} {/* Replace with actual price */}
+          <Alert>
+            <AlertDescription>
+              {t('payment.contact_us') || 'Kontaktieren Sie uns unter support@fotospiel.de für den Kauf.'}
+            </AlertDescription>
+          </Alert>
+          <Button type="submit" className="w-full" disabled={processing}>
+            {processing ? 'Wird verarbeitet...' : t('payment.contact') || 'Kontaktieren'}
           </Button>
         </form>
       </CardContent>