Payment Process

// src/components/payment/PaymentSuccess.tsx:19-77
export function PaymentSuccess({ payment, onBack, onViewReceipt }: PaymentSuccessProps) {
  return (
    <Card className="max-w-md mx-auto">
      <CardHeader className="text-center space-y-4">
        <div className="mx-auto rounded-full bg-green-100 p-3">
          <CheckCircle2 className="h-12 w-12 text-green-600" />
        </div>
        <CardTitle>¡Pago Completado!</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-2 text-center">
          <p className="text-3xl font-bold">{formatCurrency(payment.amount, payment.currency)}</p>
          <p className="text-muted-foreground">{payment.description}</p>
          <p className="text-sm text-muted-foreground">
            ID de transacción: {payment.id}
          </p>
        </div>
        {/* Date, payment method, actions... */}
      </CardContent>
    </Card>
  );
}

// src/components/payment/PaymentPending.tsx:18-95
export function PaymentPending({ payment, onBack, onCheckStatus }: PaymentPendingProps) {
  return (
    <Card className="max-w-md mx-auto">
      <CardHeader className="text-center space-y-4">
        <div className="mx-auto rounded-full bg-amber-100 p-3">
          <Clock className="h-12 w-12 text-amber-600" />
        </div>
        <CardTitle>Pago en Proceso</CardTitle>
      </CardHeader>
      {/* Amount, status, check status button... */}
      <div className="rounded-md bg-amber-50 p-4">
        <div className="flex">
          <Clock className="h-5 w-5 text-amber-400" />
          <div className="ml-3">
            <h3 className="text-sm font-medium text-amber-800">
              Estamos procesando tu pago
            </h3>
            <p className="mt-2 text-sm text-amber-700">
              Recibirás una notificación por correo electrónico cuando el pago sea confirmado.
              Este proceso puede tardar unos minutos.
            </p>
          </div>
        </div>
      </div>
    </Card>
  );
}

// src/components/payment/PaymentFailure.tsx:26-37
const getErrorMessage = () => {
  if (payment?.status_detail === 'cc_rejected_bad_filled_security_code') {
    return 'El código de seguridad de la tarjeta es incorrecto.';
  } else if (payment?.status_detail === 'cc_rejected_insufficient_amount') {
    return 'Fondos insuficientes en la tarjeta.';
  } else if (payment?.status_detail === 'cc_rejected_bad_filled_date') {
    return 'La fecha de vencimiento es incorrecta.';
  } else if (payment?.status_detail === 'cc_rejected_other_reason') {
    return 'La tarjeta fue rechazada. Por favor, intenta con otro medio de pago.';
  }
  return 'El pago no pudo ser procesado. Por favor, inténtalo nuevamente.';
};

// src/pages/BookingPage.tsx:387-397
await logPaymentEvent({
  event_type: 'started',
  user_id: user?.id,
  appointment_id: data.booking_id,
  amount: totalPrice,
  metadata: {
    lawyer_id: lawyer.user_id,
    duration,
    source: 'BookingPage'
  }
});

// src/pages/BookingPage.tsx:484-496
const calculateLawyerFee = () => {
  if (!lawyer) return 0;
  switch (duration) {
    case 30: return Math.round(lawyer.hourly_rate_clp / 2);
    case 60: return lawyer.hourly_rate_clp;
    case 90: return Math.round(lawyer.hourly_rate_clp * 1.5);
    case 120: return lawyer.hourly_rate_clp * 2;
    default: return lawyer.hourly_rate_clp;
  }
};

const lawyerFee = calculateLawyerFee();
const serviceFee = Math.round(lawyerFee * 0.10); // 10% service fee
const totalPrice = lawyerFee + serviceFee;

// Currency formatting utility
export function formatCurrency(amount: number, currency: string = 'CLP'): string {
  return new Intl.NumberFormat('es-CL', {
    style: 'currency',
    currency,
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(amount);
}