DataScope26/WEB

1import React, { useState } from 'react';2import './StepBilling.css';3import ButtonPrimary from './ButtonPrimary';4import { Loader } from 'lucide-react';5import ButtonSecondary from './ButtonSecondary';6import { ArrowLeft } from 'lucide-react';7 8 9export default function StepBilling({ data, updateData, onSubmit, onBack, errors = {} }) {10  const [isLoading, setIsLoading] = useState(false);11  const isFormValid = data.cardNumber && data.expiry && data.cvc;12  const MAX_LENGTH = 50;13 14  const handleSubmit = async () => {15    if (!onSubmit) return;16    try {17      setIsLoading(true);18      await onSubmit();19    } finally {20      setIsLoading(false);21    }22  };23 24  return (25    <div className="billing-content">26      <div className="billing-header">27        <ButtonSecondary className="step-back-button" onClick={onBack} aria-label="Volver atrás">28          <ArrowLeft size={20} />29        </ButtonSecondary>30        <div className="billing-subtitle">Paso 3 de 3</div>31        <h2 className="billing-title">Datos de Pago</h2>32      </div>33 34      <div className="billing-form">35        <div className="billing-input-group">36          <label>Número de Tarjeta</label>37          <input 38            type="text" 39            placeholder="0000 0000 0000 0000" 40            value={data.cardNumber}41            onChange={(e) => updateData({ cardNumber: e.target.value })}42            maxLength={MAX_LENGTH}43            disabled={isLoading}44          />45        </div>46        <div className="billing-row">47          <div className="billing-input-group flex-1">48            <label>Vencimiento (MM/AA)</label>49            <input 50              type="text" 51              placeholder="12/26" 52              value={data.expiry}53              onChange={(e) => updateData({ expiry: e.target.value })}54              maxLength={MAX_LENGTH}55              disabled={isLoading}56            />57          </div>58          <div className="billing-input-group flex-1">59            <label>CVC</label>60            <input 61              type="password" 62              placeholder="***" 63              value={data.cvc}64              onChange={(e) => updateData({ cvc: e.target.value })}65              maxLength={3}66              disabled={isLoading}67            />68          </div>69        </div>70        <div className="billing-input-group">71          <label>Nombre en la Tarjeta</label>72          <input 73            type="text" 74            placeholder="Juan Pérez" 75            value={data.cardName}76            onChange={(e) => updateData({ cardName: e.target.value })}77            maxLength={MAX_LENGTH}78            disabled={isLoading}79          />80        </div>81      </div>82 83      <div className="billing-actions">84        {isLoading ? (85          <ButtonPrimary className="btn-submit" style={{ cursor: 'default' }}>86            <Loader size={18} className="loader-icon-animation" />87          </ButtonPrimary>88        ) : (89          <ButtonPrimary90            className="btn-submit"91            onClick={handleSubmit}92            disabled={!isFormValid}93            style={{ opacity: isFormValid ? 1 : 0.5, cursor: isFormValid ? 'pointer' : 'not-allowed' }}94          >95            Finalizar y Crear Empresa96          </ButtonPrimary>97        )}98      </div>99    </div>100  );101}