81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { useCheckoutWizard } from "../WizardContext";
|
|
|
|
interface PaymentStepProps {
|
|
stripePublishableKey: string;
|
|
}
|
|
|
|
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
|
|
const { selectedPackage, paymentProvider, setPaymentProvider, resetPaymentState, nextStep } = useCheckoutWizard();
|
|
|
|
useEffect(() => {
|
|
resetPaymentState();
|
|
}, [selectedPackage.id, resetPaymentState]);
|
|
|
|
const isFree = selectedPackage.price === 0;
|
|
|
|
if (isFree) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Alert>
|
|
<AlertTitle>Kostenloses Paket</AlertTitle>
|
|
<AlertDescription>
|
|
Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestaetigung.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<div className="flex justify-end">
|
|
<Button size="lg" onClick={nextStep}>
|
|
Paket aktivieren
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Tabs value={paymentProvider ?? 'stripe'} onValueChange={(value) => setPaymentProvider(value as 'stripe' | 'paypal')}>
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="stripe">Stripe</TabsTrigger>
|
|
<TabsTrigger value="paypal">PayPal</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="stripe" className="mt-4">
|
|
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
Karten- oder SEPA-Zahlung via Stripe Elements. Wir erzeugen beim Fortfahren einen Payment Intent.
|
|
</p>
|
|
<Alert variant="secondary">
|
|
<AlertTitle>Integration folgt</AlertTitle>
|
|
<AlertDescription>
|
|
Stripe Elements wird im naechsten Schritt integriert. Aktuell dient dieser Block als Platzhalter fuer UI und API Hooks.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<div className="flex justify-end">
|
|
<Button disabled>Stripe Zahlung starten</Button>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="paypal" className="mt-4">
|
|
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
PayPal Express Checkout mit Rueckleitung zur Bestaetigung. Wir hinterlegen Paket- und Tenant-Daten im Order-Metadata.
|
|
</p>
|
|
<Alert variant="secondary">
|
|
<AlertTitle>Integration folgt</AlertTitle>
|
|
<AlertDescription>
|
|
PayPal Buttons werden im Folge-PR angebunden. Dieser Platzhalter zeigt den spaeteren Container fuer die Buttons.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<div className="flex justify-end">
|
|
<Button disabled>PayPal Bestellung anlegen</Button>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
};
|