DataScope26/WEB

1import { useEffect } from "react";2import { CheckCircle } from "lucide-react";3import { useWaitlistConfirmation } from "../hooks/useWaitlistConfirmation.js";4import "./WaitlistConfirmation.css";5 6export default function WaitlistConfirmation() {7  const { token, isLoading, error, isSuccess, message, confirm } = useWaitlistConfirmation();8 9  useEffect(() => {10    if (token) {11      confirm();12    }13  }, [token, confirm]);14 15  const stateClass = isSuccess16    ? "waitlist-confirmation-card waitlist-confirmation-card--success"17    : error18      ? "waitlist-confirmation-card waitlist-confirmation-card--error"19      : "waitlist-confirmation-card";20 21  return (22    <div className="waitlist-confirmation-page">23      <div className={stateClass}>24        {(isLoading || isSuccess || error || !token) && (25          <div className="waitlist-confirmation-icon">26            {isSuccess ? (27              <CheckCircle size={42} strokeWidth={2.5} />28            ) : (29              <CheckCircle size={42} strokeWidth={2.5} style={{ opacity: error || !token ? 0.55 : 0.9 }} />30            )}31          </div>32        )}33 34        {isLoading && (35          <>36            <h2>Confirmando tu acceso...</h2>37            <p>Estamos validando tu inscripción en la lista de espera.</p>38          </>39        )}40 41        {!token && !isLoading && (42          <>43            <h2>Enlace inválido</h2>44            <p>Falta el token de confirmación en la URL.</p>45          </>46        )}47 48        {error && !isLoading && (49          <>50            <h2>No se pudo confirmar</h2>51            <p>{error}</p>52          </>53        )}54 55        {isSuccess && !isLoading && (56          <>57            <h2>¡Confirmado!</h2>58            <p>{message}</p>59          </>60        )}61      </div>62    </div>63  );64}65