From b11f0109383f41616a9dc714e9f1c7d221faf485 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Sat, 24 Jan 2026 09:50:06 +0100
Subject: [PATCH] refactor(checkout): wrap auth step buttons in shadcn tabs

---
 .../marketing/checkout/steps/AuthStep.tsx     | 149 +++++++++---------
 1 file changed, 77 insertions(+), 72 deletions(-)

diff --git a/resources/js/pages/marketing/checkout/steps/AuthStep.tsx b/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
index 340db59..2dd75b8 100644
--- a/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { usePage } from "@inertiajs/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 { Card, CardContent } from "@/components/ui/card";
 import { useCheckoutWizard } from "../WizardContext";
 import type { OAuthProfilePrefill } from '../types';
 import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
@@ -62,7 +64,6 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClea
   const [mode, setMode] = useState<'login' | 'register'>('register');
   const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
   const [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
-  const showOauthControls = mode === 'register';
   const authErrorTitle = facebookAuth?.error
     ? t('checkout.auth_step.facebook_error_title')
     : t('checkout.auth_step.google_error_title');
@@ -181,80 +182,84 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClea
 
   return (
     <div className="space-y-6">
-      <div className="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>
-          {showOauthControls && (
-            <div className="flex flex-1 flex-wrap items-center 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>
-              <Button
-                variant="outline"
-                onClick={handleFacebookLogin}
-                disabled={isRedirectingToFacebook}
-                className="flex items-center gap-2"
-              >
-                {isRedirectingToFacebook ? (
-                  <LoaderCircle className="h-4 w-4 animate-spin" />
-                ) : (
-                  <FacebookIcon className="h-4 w-4" />
-                )}
-                {t('checkout.auth_step.continue_with_facebook')}
-              </Button>
-            </div>
+      <Tabs value={mode} onValueChange={(v) => setMode(v as 'login' | 'register')} className="w-full">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="register">{t('checkout.auth_step.switch_to_register')}</TabsTrigger>
+          <TabsTrigger value="login">{t('checkout.auth_step.switch_to_login')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="register">
+          {(googleAuth?.error || facebookAuth?.error) && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertTitle>{authErrorTitle}</AlertTitle>
+              <AlertDescription>{facebookAuth?.error ?? googleAuth?.error}</AlertDescription>
+            </Alert>
           )}
-        </div>
-      </div>
 
-      {(googleAuth?.error || facebookAuth?.error) && (
-        <Alert variant="destructive">
-          <AlertTitle>{authErrorTitle}</AlertTitle>
-          <AlertDescription>{facebookAuth?.error ?? googleAuth?.error}</AlertDescription>
-        </Alert>
-      )}
+          <Card>
+            <CardContent className="space-y-6 pt-6">
+              <div className="space-y-3">
+                <div className="flex flex-col sm:flex-row gap-3">
+                  <Button
+                    variant="outline"
+                    onClick={handleGoogleLogin}
+                    disabled={isRedirectingToGoogle}
+                    className="flex w-full items-center justify-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>
+                  <Button
+                    variant="outline"
+                    onClick={handleFacebookLogin}
+                    disabled={isRedirectingToFacebook}
+                    className="flex w-full items-center justify-center gap-2"
+                  >
+                    {isRedirectingToFacebook ? (
+                      <LoaderCircle className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <FacebookIcon className="h-4 w-4" />
+                    )}
+                    {t('checkout.auth_step.continue_with_facebook')}
+                  </Button>
+                </div>
+                <div className="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+                  <span className="h-px flex-1 bg-border" aria-hidden="true" />
+                  {t("auth:login.oauth_divider", "oder")}
+                  <span className="h-px flex-1 bg-border" aria-hidden="true" />
+                </div>
+              </div>
 
-      <div className="rounded-lg border bg-card p-6 shadow-sm">
-        {mode === 'register' ? (
-          selectedPackage && (
-            <RegisterForm
-              packageId={selectedPackage.id}
-              privacyHtml={privacyHtml}
-              locale={locale}
-              onSuccess={handleRegisterSuccess}
-              prefill={prefill}
-              onClearPrefill={onClearPrefill}
-            />
-          )
-        ) : (
-          <LoginForm
-            locale={locale}
-            onSuccess={handleLoginSuccess}
-            packageId={selectedPackage?.id ?? null}
-          />
-        )}
-      </div>
+              {selectedPackage && (
+                <RegisterForm
+                  packageId={selectedPackage.id}
+                  privacyHtml={privacyHtml}
+                  locale={locale}
+                  onSuccess={handleRegisterSuccess}
+                  prefill={prefill}
+                  onClearPrefill={onClearPrefill}
+                />
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="login">
+          <Card>
+            <CardContent className="pt-6">
+              <LoginForm
+                locale={locale}
+                onSuccess={handleLoginSuccess}
+                packageId={selectedPackage?.id ?? null}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 };