Checkout

// apps/consultant-portal/checkout/[order_id]/checkout-client.tsx

import { CheckoutLayout, CheckoutHeader, OrderSummarySidebar, MobileBottomBar } from "./components";
import { Stepper, StepperNav, StepperItem, StepperTrigger, StepperIndicator, StepperTitle, useCheckoutStepper } from "@workspace/checkout";

const steps = [
  { id: "items", title: "Carrinho", step: 1 },
  { id: "address", title: "Identificação", step: 2 },
  { id: "payment", title: "Pagamento", step: 3 },
];

<CheckoutLayout
  header={<CheckoutHeader consultant={consultant} isAuthenticated={true} />}
  stepper={
    <Stepper value={currentStep} onValueChange={handleStepChange} className="w-full max-w-md">
      <StepperNav className="gap-3">
        {steps.map((step) => (
          <StepperItem key={step.id} step={step.step} className="flex-1">
            <StepperTrigger className="flex grow flex-col items-start gap-2">
              <StepperIndicator className="h-1 w-full rounded-full" />
              <StepperTitle className="text-xs font-medium">{step.title}</StepperTitle>
            </StepperTrigger>
          </StepperItem>
        ))}
      </StepperNav>
    </Stepper>
  }
  mainContent={renderStepContent()}
  sidebar={<OrderSummarySidebar order={order} currentStep={currentStepId} />}
  mobileBottomBar={<MobileBottomBar order={order} ctaLabel="Continuar" />}
/>