codex has reworked checkout, but frontend doesnt work
This commit is contained in:
Codex Agent
89
resources/js/pages/marketing/checkout/CheckoutWizard.tsx
Normal file
89
resources/js/pages/marketing/checkout/CheckoutWizard.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { Steps } from "@/components/ui/Steps";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { CheckoutWizardProvider, useCheckoutWizard } from "./WizardContext";
|
||||
import type { CheckoutPackage, CheckoutStepId } from "./types";
|
||||
import { PackageStep } from "./steps/PackageStep";
|
||||
import { AuthStep } from "./steps/AuthStep";
|
||||
import { PaymentStep } from "./steps/PaymentStep";
|
||||
import { ConfirmationStep } from "./steps/ConfirmationStep";
|
||||
|
||||
interface CheckoutWizardProps {
|
||||
initialPackage: CheckoutPackage;
|
||||
packageOptions: CheckoutPackage[];
|
||||
stripePublishableKey: string;
|
||||
privacyHtml: string;
|
||||
initialAuthUser?: {
|
||||
id: number;
|
||||
email: string;
|
||||
name?: string;
|
||||
pending_purchase?: boolean;
|
||||
} | null;
|
||||
initialStep?: CheckoutStepId;
|
||||
}
|
||||
|
||||
const stepConfig: { id: CheckoutStepId; title: string; description: string }[] = [
|
||||
{ id: "package", title: "Paket", description: "Auswahl und Vergleich" },
|
||||
{ id: "auth", title: "Konto", description: "Login oder Registrierung" },
|
||||
{ id: "payment", title: "Zahlung", description: "Stripe oder PayPal" },
|
||||
{ id: "confirmation", title: "Fertig", description: "Zugang aktiv" },
|
||||
];
|
||||
|
||||
const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
|
||||
const { currentStep, nextStep, previousStep } = useCheckoutWizard();
|
||||
|
||||
const currentIndex = useMemo(() => stepConfig.findIndex((step) => step.id === currentStep), [currentStep]);
|
||||
const progress = useMemo(() => {
|
||||
if (currentIndex < 0) {
|
||||
return 0;
|
||||
}
|
||||
return (currentIndex / (stepConfig.length - 1)) * 100;
|
||||
}, [currentIndex]);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Progress value={progress} />
|
||||
<Steps steps={stepConfig} currentStep={currentIndex >= 0 ? currentIndex : 0} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{currentStep === "package" && <PackageStep />}
|
||||
{currentStep === "auth" && <AuthStep privacyHtml={privacyHtml} />}
|
||||
{currentStep === "payment" && <PaymentStep stripePublishableKey={stripePublishableKey} />}
|
||||
{currentStep === "confirmation" && <ConfirmationStep />}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="ghost" onClick={previousStep} disabled={currentIndex <= 0}>
|
||||
Zurueck
|
||||
</Button>
|
||||
<Button onClick={nextStep} disabled={currentIndex >= stepConfig.length - 1}>
|
||||
Weiter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
|
||||
initialPackage,
|
||||
packageOptions,
|
||||
stripePublishableKey,
|
||||
privacyHtml,
|
||||
initialAuthUser,
|
||||
initialStep,
|
||||
}) => {
|
||||
return (
|
||||
<CheckoutWizardProvider
|
||||
initialPackage={initialPackage}
|
||||
packageOptions={packageOptions}
|
||||
initialStep={initialStep}
|
||||
initialAuthUser={initialAuthUser ?? undefined}
|
||||
initialIsAuthenticated={Boolean(initialAuthUser)}
|
||||
>
|
||||
<WizardBody stripePublishableKey={stripePublishableKey} privacyHtml={privacyHtml} />
|
||||
</CheckoutWizardProvider>
|
||||
);
|
||||
};
|
||||
110
resources/js/pages/marketing/checkout/WizardContext.tsx
Normal file
110
resources/js/pages/marketing/checkout/WizardContext.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
|
||||
import type { CheckoutPackage, CheckoutStepId, CheckoutWizardContextValue, CheckoutWizardState } from "./types";
|
||||
|
||||
interface CheckoutWizardProviderProps {
|
||||
initialPackage: CheckoutPackage;
|
||||
packageOptions: CheckoutPackage[];
|
||||
initialStep?: CheckoutStepId;
|
||||
initialAuthUser?: CheckoutWizardState['authUser'];
|
||||
initialIsAuthenticated?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const CheckoutWizardContext = createContext<CheckoutWizardContextValue | undefined>(undefined);
|
||||
|
||||
export const CheckoutWizardProvider: React.FC<CheckoutWizardProviderProps> = ({
|
||||
initialPackage,
|
||||
packageOptions,
|
||||
initialStep = 'package',
|
||||
initialAuthUser = null,
|
||||
initialIsAuthenticated,
|
||||
children,
|
||||
}) => {
|
||||
const [state, setState] = useState<CheckoutWizardState>(() => ({
|
||||
currentStep: initialStep,
|
||||
selectedPackage: initialPackage,
|
||||
packageOptions,
|
||||
isAuthenticated: Boolean(initialIsAuthenticated || initialAuthUser),
|
||||
authUser: initialAuthUser ?? null,
|
||||
paymentProvider: undefined,
|
||||
isProcessing: false,
|
||||
}));
|
||||
|
||||
const setStep = useCallback((step: CheckoutStepId) => {
|
||||
setState((prev) => ({ ...prev, currentStep: step }));
|
||||
}, []);
|
||||
|
||||
const nextStep = useCallback(() => {
|
||||
setState((prev) => {
|
||||
const order: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
|
||||
const currentIndex = order.indexOf(prev.currentStep);
|
||||
const nextIndex = currentIndex === -1 ? 0 : Math.min(order.length - 1, currentIndex + 1);
|
||||
return { ...prev, currentStep: order[nextIndex] };
|
||||
});
|
||||
}, []);
|
||||
|
||||
const previousStep = useCallback(() => {
|
||||
setState((prev) => {
|
||||
const order: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
|
||||
const currentIndex = order.indexOf(prev.currentStep);
|
||||
const nextIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
|
||||
return { ...prev, currentStep: order[nextIndex] };
|
||||
});
|
||||
}, []);
|
||||
|
||||
const setSelectedPackage = useCallback((pkg: CheckoutPackage) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
selectedPackage: pkg,
|
||||
paymentProvider: undefined,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const markAuthenticated = useCallback<CheckoutWizardContextValue['markAuthenticated']>((user) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isAuthenticated: Boolean(user),
|
||||
authUser: user ?? null,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const setPaymentProvider = useCallback<CheckoutWizardContextValue['setPaymentProvider']>((provider) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
paymentProvider: provider,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const resetPaymentState = useCallback(() => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
paymentProvider: undefined,
|
||||
isProcessing: false,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const value = useMemo<CheckoutWizardContextValue>(() => ({
|
||||
...state,
|
||||
setStep,
|
||||
nextStep,
|
||||
previousStep,
|
||||
setSelectedPackage,
|
||||
markAuthenticated,
|
||||
setPaymentProvider,
|
||||
resetPaymentState,
|
||||
}), [state, setStep, nextStep, previousStep, setSelectedPackage, markAuthenticated, setPaymentProvider, resetPaymentState]);
|
||||
|
||||
return (
|
||||
<CheckoutWizardContext.Provider value={value}>
|
||||
{children}
|
||||
</CheckoutWizardContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useCheckoutWizard = () => {
|
||||
const context = useContext(CheckoutWizardContext);
|
||||
if (!context) {
|
||||
throw new Error('useCheckoutWizard must be used within CheckoutWizardProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
102
resources/js/pages/marketing/checkout/steps/AuthStep.tsx
Normal file
102
resources/js/pages/marketing/checkout/steps/AuthStep.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React, { useState } from "react";
|
||||
import { usePage } from "@inertiajs/react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { useCheckoutWizard } from "../WizardContext";
|
||||
import LoginForm, { AuthUserPayload } from "../../auth/LoginForm";
|
||||
import RegisterForm, { RegisterSuccessPayload } from "../../auth/RegisterForm";
|
||||
|
||||
interface AuthStepProps {
|
||||
privacyHtml: string;
|
||||
}
|
||||
|
||||
export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
|
||||
const page = usePage<{ locale?: string }>();
|
||||
const locale = page.props.locale ?? "de";
|
||||
const { isAuthenticated, authUser, markAuthenticated, nextStep, selectedPackage } = useCheckoutWizard();
|
||||
const [mode, setMode] = useState<'login' | 'register'>('register');
|
||||
|
||||
const handleLoginSuccess = (payload: AuthUserPayload | null) => {
|
||||
if (!payload) {
|
||||
return;
|
||||
}
|
||||
|
||||
markAuthenticated({
|
||||
id: payload.id ?? 0,
|
||||
email: payload.email ?? "",
|
||||
name: payload.name ?? undefined,
|
||||
pending_purchase: Boolean(payload.pending_purchase),
|
||||
});
|
||||
nextStep();
|
||||
};
|
||||
|
||||
const handleRegisterSuccess = (result: RegisterSuccessPayload) => {
|
||||
const nextUser = result?.user ?? null;
|
||||
if (nextUser) {
|
||||
markAuthenticated({
|
||||
id: nextUser.id ?? 0,
|
||||
email: nextUser.email ?? "",
|
||||
name: nextUser.name ?? undefined,
|
||||
pending_purchase: Boolean(result?.pending_purchase ?? nextUser.pending_purchase),
|
||||
});
|
||||
}
|
||||
|
||||
nextStep();
|
||||
};
|
||||
|
||||
if (isAuthenticated && authUser) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Alert>
|
||||
<AlertTitle>Bereits eingeloggt</AlertTitle>
|
||||
<AlertDescription>
|
||||
{authUser.email ? `Sie sind als ${authUser.email} angemeldet.` : "Sie sind bereits angemeldet."}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="flex justify-end">
|
||||
<Button size="lg" onClick={nextStep}>
|
||||
Weiter zur Zahlung
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
variant={mode === 'register' ? 'default' : 'outline'}
|
||||
onClick={() => setMode('register')}
|
||||
>
|
||||
Registrieren
|
||||
</Button>
|
||||
<Button
|
||||
variant={mode === 'login' ? 'default' : 'outline'}
|
||||
onClick={() => setMode('login')}
|
||||
>
|
||||
Anmelden
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Google Login folgt im Komfort-Delta.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-card p-6 shadow-sm">
|
||||
{mode === 'register' ? (
|
||||
<RegisterForm
|
||||
packageId={selectedPackage.id}
|
||||
privacyHtml={privacyHtml}
|
||||
locale={locale}
|
||||
onSuccess={handleRegisterSuccess}
|
||||
/>
|
||||
) : (
|
||||
<LoginForm
|
||||
locale={locale}
|
||||
onSuccess={handleLoginSuccess}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { useCheckoutWizard } from "../WizardContext";
|
||||
|
||||
interface ConfirmationStepProps {
|
||||
onViewProfile?: () => void;
|
||||
}
|
||||
|
||||
export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfile }) => {
|
||||
const { selectedPackage } = useCheckoutWizard();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Alert>
|
||||
<AlertTitle>Willkommen bei FotoSpiel</AlertTitle>
|
||||
<AlertDescription>
|
||||
{Ihr Paket "" ist aktiviert. Wir haben Ihnen eine Bestaetigung per E-Mail gesendet.}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="flex flex-wrap gap-3 justify-end">
|
||||
<Button variant="outline" onClick={onViewProfile}>
|
||||
Profil oeffnen
|
||||
</Button>
|
||||
<Button>Zum Admin-Bereich</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
118
resources/js/pages/marketing/checkout/steps/PackageStep.tsx
Normal file
118
resources/js/pages/marketing/checkout/steps/PackageStep.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { Check, Package as PackageIcon } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useCheckoutWizard } from "../WizardContext";
|
||||
import type { CheckoutPackage } from "../types";
|
||||
|
||||
const currencyFormatter = new Intl.NumberFormat("de-DE", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
minimumFractionDigits: 2,
|
||||
});
|
||||
|
||||
function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
|
||||
return (
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="flex items-center gap-3 text-2xl">
|
||||
<PackageIcon className="h-6 w-6 text-primary" />
|
||||
{pkg.name}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-base text-muted-foreground">
|
||||
{pkg.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-semibold">
|
||||
{pkg.price === 0 ? "Kostenlos" : currencyFormatter.format(pkg.price)}
|
||||
</span>
|
||||
<Badge variant="secondary" className="uppercase tracking-wider text-xs">
|
||||
{pkg.type === "reseller" ? "Reseller" : "Endkunde"}
|
||||
</Badge>
|
||||
</div>
|
||||
{Array.isArray(pkg.features) && pkg.features.length > 0 && (
|
||||
<ul className="space-y-3">
|
||||
{pkg.features.map((feature, index) => (
|
||||
<li key={index} className="flex items-start gap-3 text-sm text-muted-foreground">
|
||||
<Check className="mt-0.5 h-4 w-4 text-primary" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isActive: boolean; onSelect: () => void }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSelect}
|
||||
className={`w-full rounded-md border bg-background p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${
|
||||
isActive ? "border-primary shadow-sm" : "border-border hover:border-primary/40"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between text-sm font-medium">
|
||||
<span>{pkg.name}</span>
|
||||
<span className="text-muted-foreground">
|
||||
{pkg.price === 0 ? "Kostenlos" : currencyFormatter.format(pkg.price)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{pkg.description}</p>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export const PackageStep: React.FC = () => {
|
||||
const { selectedPackage, packageOptions, setSelectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
|
||||
|
||||
const comparablePackages = useMemo(() => {
|
||||
return packageOptions.filter((pkg) => pkg.type === selectedPackage.type);
|
||||
}, [packageOptions, selectedPackage.type]);
|
||||
|
||||
const handlePackageChange = (pkg: CheckoutPackage) => {
|
||||
if (pkg.id === selectedPackage.id) {
|
||||
return;
|
||||
}
|
||||
setSelectedPackage(pkg);
|
||||
resetPaymentState();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-8 lg:grid-cols-[2fr_1fr]">
|
||||
<div className="space-y-6">
|
||||
<PackageSummary pkg={selectedPackage} />
|
||||
<div className="flex justify-end">
|
||||
<Button size="lg" onClick={nextStep}>
|
||||
Weiter zum Konto
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<aside className="space-y-4">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Alternative Pakete
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{comparablePackages.map((pkg) => (
|
||||
<PackageOption
|
||||
key={pkg.id}
|
||||
pkg={pkg}
|
||||
isActive={pkg.id === selectedPackage.id}
|
||||
onSelect={() => handlePackageChange(pkg)}
|
||||
/>
|
||||
))}
|
||||
{comparablePackages.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Keine weiteren Pakete in dieser Kategorie verfuegbar.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
80
resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
Normal file
80
resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
39
resources/js/pages/marketing/checkout/types.ts
Normal file
39
resources/js/pages/marketing/checkout/types.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
export type CheckoutStepId = 'package' | 'auth' | 'payment' | 'confirmation';
|
||||
|
||||
export interface CheckoutPackage {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
price: number;
|
||||
currency?: string;
|
||||
type: 'endcustomer' | 'reseller';
|
||||
features: string[];
|
||||
limits?: Record<string, unknown>;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface CheckoutWizardState {
|
||||
currentStep: CheckoutStepId;
|
||||
selectedPackage: CheckoutPackage;
|
||||
packageOptions: CheckoutPackage[];
|
||||
isAuthenticated: boolean;
|
||||
authUser?: {
|
||||
id: number;
|
||||
email: string;
|
||||
name?: string;
|
||||
pending_purchase?: boolean;
|
||||
} | null;
|
||||
paymentProvider?: 'stripe' | 'paypal';
|
||||
isProcessing?: boolean;
|
||||
}
|
||||
|
||||
export interface CheckoutWizardContextValue extends CheckoutWizardState {
|
||||
setStep: (step: CheckoutStepId) => void;
|
||||
nextStep: () => void;
|
||||
previousStep: () => void;
|
||||
setSelectedPackage: (pkg: CheckoutPackage) => void;
|
||||
markAuthenticated: (user: CheckoutWizardState['authUser']) => void;
|
||||
setPaymentProvider: (provider: CheckoutWizardState['paymentProvider']) => void;
|
||||
resetPaymentState: () => void;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user