DataScope26/WEB
0
1import React, { useState } from "react";2import "./CheckoutModal.css";3import { useCompanies } from "../hooks/useCompanies.jsx";4import { useNavigate } from 'react-router-dom';5 6const MESES = [7 "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",8 "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre",9];10 11const generarAnios = (cantidad = 12) => {12 const anioActual = new Date().getFullYear();13 return Array.from({ length: cantidad }, (_, i) => anioActual + i);14};15 16export default function CheckoutModal({ isOpen, onClose, onSubmit, tier }) {17 const { createCompany } = useCompanies()18 const [companyName, setCompanyName] = useState("")19 const navigate = useNavigate();20 21 const [isProcessing, setIsProcessing] = useState(false);22 const [message, setMessage] = useState(null);23 const [errorMessage, setErrorMessage] = useState(null);24 25 const [formData, setFormData] = useState({26 nombreEmpresa: "",27 duenoTarjeta: "",28 codigoSeguridad: "",29 numeroTarjeta: "",30 mesExpiracion: "Enero",31 anioExpiracion: generarAnios()[0],32 });33 34 if (!isOpen) return null;35 36 const handleChange = (campo) => (e) => {37 setFormData((prev) => ({ ...prev, [campo]: e.target.value }));38 };39 40 const handleSubmit = (e) => {41 e.preventDefault();42 onSubmit?.(formData);43 };44 45 const handleOverlayClick = (e) => {46 if (e.target === e.currentTarget) {47 onClose?.();48 }49 };50 51 const handleComplete = async () => {52 setErrorMessage(null);53 setMessage(null);54 if (!companyName || companyName.trim() === "") {55 setErrorMessage("Nombre de la empresa es obligatorio");56 return;57 }58 setIsProcessing(true);59 try {60 const result = await createCompany(tier, companyName);61 if (result) {62 setMessage("Empresa creada correctamente");63 // close and navigate after a short delay so user can read message64 setTimeout(() => {65 onClose?.();66 navigate('/');67 }, 1200);68 } else {69 setErrorMessage("No se pudo crear la empresa");70 }71 } catch (err) {72 const apiMessage = err?.response?.data?.message || err?.message || String(err);73 setErrorMessage(apiMessage);74 } finally {75 setIsProcessing(false);76 }77 };78 79 return (80 <div className="checkout-overlay" onClick={handleOverlayClick}>81 <div className="checkout-card" role="dialog" aria-modal="true" aria-labelledby="checkout-title">82 <h1 className="checkout-title" id="checkout-title">83 Finalizar Compra84 </h1>85 86 <form className="checkout-form" onSubmit={handleSubmit}>87 <div className="field-group">88 <label className="field-label" htmlFor="nombreEmpresa">89 NOMBRE DE LA EMPRESA90 </label>91 <input92 id="nombreEmpresa"93 type="text"94 className="field-input"95 placeholder="Nombre de la empresa"96 value={companyName}97 onChange={(e)=>{setCompanyName(e.target.value)}}98 />99 </div>100 101 <div className="field-row">102 <div className="field-group field-group--grow">103 <label className="field-label" htmlFor="duenoTarjeta">104 DUEÑO DE LA TARJETA105 </label>106 <input107 id="duenoTarjeta"108 type="text"109 className="field-input"110 placeholder="Nombre"111 value={formData.duenoTarjeta}112 onChange={handleChange("duenoTarjeta")}113 />114 </div>115 116 <div className="field-group">117 <label className="field-label" htmlFor="codigoSeguridad">118 CÓDIGO DE SEGURIDAD119 </label>120 <input121 id="codigoSeguridad"122 type="password"123 inputMode="numeric"124 maxLength={4}125 className="field-input field-input--cvv"126 placeholder="***"127 value={formData.codigoSeguridad}128 onChange={handleChange("codigoSeguridad")}129 />130 </div>131 </div>132 133 <div className="field-group">134 <label className="field-label" htmlFor="numeroTarjeta">135 NÚMERO DE TARJETA136 </label>137 <input138 id="numeroTarjeta"139 type="text"140 className="field-input"141 placeholder="XXXX-XXXX-XXXX"142 value={formData.numeroTarjeta}143 onChange={handleChange("numeroTarjeta")}144 />145 </div>146 147 <div className="field-row field-row--bottom">148 <div className="field-group">149 <label className="field-label">FECHA DE EXPIRACIÓN</label>150 <div className="select-row">151 <div className="select-wrapper">152 <select153 className="field-select"154 value={formData.mesExpiracion}155 onChange={handleChange("mesExpiracion")}156 >157 {MESES.map((mes) => (158 <option key={mes} value={mes}>159 {mes}160 </option>161 ))}162 </select>163 </div>164 <div className="select-wrapper">165 <select166 className="field-select"167 value={formData.anioExpiracion}168 onChange={handleChange("anioExpiracion")}169 >170 {generarAnios().map((anio) => (171 <option key={anio} value={anio}>172 {anio}173 </option>174 ))}175 </select>176 </div>177 </div>178 </div>179 180 <div className="card-logos">181 <span className="card-logo card-logo--visa">VISA</span>182 <span className="card-logo card-logo--mastercard">MasterCard</span>183 <span className="card-logo card-logo--amex">184 AMERICAN185 <br />186 EXPRESS187 </span>188 </div>189 </div>190 191 <div className="submit-row">192 <button193 type="button"194 className="submit-button"195 onClick={handleComplete}196 disabled={isProcessing}197 aria-busy={isProcessing}198 >199 {isProcessing ? (200 <>201 <span className="spinner" aria-hidden="true"></span>202 Procesando...203 </>204 ) : (205 'Terminar compra'206 )}207 </button>208 </div>209 210 <div className="message-row" aria-live="polite">211 {errorMessage && <div className="message message--error">{errorMessage}</div>}212 {message && <div className="message message--success">{message}</div>}213 </div>214 </form>215 </div>216 </div>217 );218}