soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

checkout: buttons verbessert, paddle zahlungsschritt schicker gemacht, schritt 4 optimiert+schick gemacht. Dashboard: translations ergänzt. Startseite vom Event Admin optimiert.

Browse Source
This commit is contained in:
Codex Agent
2025-11-17 11:06:46 +01:00
parent 5290072ffe
commit 167734f87a
25 changed files with 1981 additions and 1002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
resources/js/pages/marketing/checkout/steps/AuthStep.tsx
View File

@@ -8,7 +8,9 @@ import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";
import { Trans, useTranslation } from 'react-i18next';
import toast from 'react-hot-toast';
import { LoaderCircle } from "lucide-react";
import { ChevronDown, LoaderCircle } from "lucide-react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { cn } from "@/lib/utils";
interface AuthStepProps {
privacyHtml: string;
@@ -43,6 +45,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
const { isAuthenticated, authUser, setAuthUser, nextStep, selectedPackage } = useCheckoutWizard();
const [mode, setMode] = useState<'login' | 'register'>('register');
const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
const [showGoogleHelper, setShowGoogleHelper] = useState(false);
useEffect(() => {
if (googleAuth?.status === 'signin') {
@@ -131,33 +134,54 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
return (
<div className="space-y-6">
<div className="flex flex-wrap items-center gap-2">
<Button
variant={mode === 'register' ? 'default' : 'outline'}
onClick={() => setMode('register')}
>
{t('checkout.auth_step.switch_to_register')}
</Button>
<Button
variant={mode === 'login' ? 'default' : 'outline'}
onClick={() => setMode('login')}
>
{t('checkout.auth_step.switch_to_login')}
</Button>
<Button
variant="outline"
onClick={handleGoogleLogin}
disabled={isRedirectingToGoogle}
className="flex items-center gap-2"
>
{isRedirectingToGoogle ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<GoogleIcon className="h-4 w-4" />
)}
{t('checkout.auth_step.continue_with_google')}
</Button>
</div>
<Collapsible open={showGoogleHelper} onOpenChange={setShowGoogleHelper} className="w-full space-y-2">
<div className="flex flex-wrap items-center gap-2">
<Button
variant={mode === 'register' ? 'default' : 'outline'}
onClick={() => setMode('register')}
>
{t('checkout.auth_step.switch_to_register')}
</Button>
<Button
variant={mode === 'login' ? 'default' : 'outline'}
onClick={() => setMode('login')}
>
{t('checkout.auth_step.switch_to_login')}
</Button>
<div className="flex flex-1 justify-start gap-2 sm:flex-none">
<Button
variant="outline"
onClick={handleGoogleLogin}
disabled={isRedirectingToGoogle}
className="flex items-center gap-2"
>
{isRedirectingToGoogle ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<GoogleIcon className="h-4 w-4" />
)}
{t('checkout.auth_step.continue_with_google')}
</Button>
<CollapsibleTrigger asChild>
<button
type="button"
className={cn(
"inline-flex items-center gap-1 rounded-full border border-muted-foreground/30 px-3 py-1 text-xs font-medium text-muted-foreground transition hover:border-muted-foreground/60 hover:text-foreground",
showGoogleHelper && "bg-muted/60 text-foreground"
)}
>
{t('checkout.auth_step.google_helper_badge')}
<ChevronDown className={cn("h-3 w-3 transition-transform", showGoogleHelper && "rotate-180")} />
</button>
</CollapsibleTrigger>
</div>
</div>
<CollapsibleContent>
<Alert className="border-dashed border-muted/60 bg-muted/20 text-xs sm:text-sm">
<AlertDescription>{t('checkout.auth_step.google_helper')}</AlertDescription>
</Alert>
</CollapsibleContent>
</Collapsible>
{googleAuth?.error && (
<Alert variant="destructive">