refactor(checkout): wrap auth step buttons in shadcn tabs

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,27 +182,29 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClea
 
   return (
     <div className="space-y-6">
-      <div className="space-y-2">
+      <Tabs value={mode} onValueChange={(v) => setMode(v as 'login' | 'register')} className="w-full">
-        <div className="flex flex-wrap items-center gap-2">
+        <TabsList className="grid w-full grid-cols-2">
-          <Button
+          <TabsTrigger value="register">{t('checkout.auth_step.switch_to_register')}</TabsTrigger>
-            variant={mode === 'register' ? 'default' : 'outline'}
+          <TabsTrigger value="login">{t('checkout.auth_step.switch_to_login')}</TabsTrigger>
-            onClick={() => setMode('register')}
+        </TabsList>
-          >
+
-            {t('checkout.auth_step.switch_to_register')}
+        <TabsContent value="register">
-          </Button>
+          {(googleAuth?.error || facebookAuth?.error) && (
-          <Button
+            <Alert variant="destructive" className="mb-4">
-            variant={mode === 'login' ? 'default' : 'outline'}
+              <AlertTitle>{authErrorTitle}</AlertTitle>
-            onClick={() => setMode('login')}
+              <AlertDescription>{facebookAuth?.error ?? googleAuth?.error}</AlertDescription>
-          >
+            </Alert>
-            {t('checkout.auth_step.switch_to_login')}
+          )}
-          </Button>
+
-          {showOauthControls && (
+          <Card>
-            <div className="flex flex-1 flex-wrap items-center gap-2 sm:flex-none">
+            <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 items-center gap-2"
+                    className="flex w-full items-center justify-center gap-2"
                   >
                     {isRedirectingToGoogle ? (
                       <LoaderCircle className="h-4 w-4 animate-spin" />
@@ -214,7 +217,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClea
                     variant="outline"
                     onClick={handleFacebookLogin}
                     disabled={isRedirectingToFacebook}
-                className="flex items-center gap-2"
+                    className="flex w-full items-center justify-center gap-2"
                   >
                     {isRedirectingToFacebook ? (
                       <LoaderCircle className="h-4 w-4 animate-spin" />
@@ -224,20 +227,14 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClea
                     {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>
 
-      {(googleAuth?.error || facebookAuth?.error) && (
+              {selectedPackage && (
-        <Alert variant="destructive">
-          <AlertTitle>{authErrorTitle}</AlertTitle>
-          <AlertDescription>{facebookAuth?.error ?? googleAuth?.error}</AlertDescription>
-        </Alert>
-      )}
-
-      <div className="rounded-lg border bg-card p-6 shadow-sm">
-        {mode === 'register' ? (
-          selectedPackage && (
                 <RegisterForm
                   packageId={selectedPackage.id}
                   privacyHtml={privacyHtml}
@@ -246,15 +243,23 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClea
                   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>
-      </div>
+          </Card>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 };