Resend OTP

// Resend OTP with countdown and error handling
class OTPResendManager {
  constructor(apiKey, apiSecret) {
    this.auth = 'Basic ' + btoa(apiKey + ':' + apiSecret);
    this.baseUrl = 'https://api.sendexa.co/v1';
    this.cooldownTimer = null;
  }
  
  // phone is always required by the API; id is optional and only narrows
  // which pending OTP for that phone gets resent.
  async resendOTP(phone, id, options = {}) {
    try {
      const response = await fetch(`${this.baseUrl}/otp/resend`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': this.auth
        },
        body: JSON.stringify({ phone, id })
      });

      const data = await response.json();

      if (!response.ok) {
        // data.error is a flat string code — no nested details object,
        // no retryAfter. The 30s cooldown is a fixed, known constant.
        if (data.error === 'RESEND_COOLDOWN') {
          this.startCooldown(30, () => {
            if (options.onCooldownEnd) options.onCooldownEnd();
          });

          return {
            success: false,
            cooldown: true,
            message: data.message
          };
        }

        return {
          success: false,
          error: data.error || 'UNKNOWN_ERROR',
          message: data.message
        };
      }

      // Success - new OTP created
      return {
        success: true,
        otpId: data.data.id,
        expiresAt: data.data.expiry.expiresAt,
        data: data.data
      };

    } catch (error) {
      return {
        success: false,
        error: 'NETWORK_ERROR',
        message: error.message
      };
    }
  }

  startCooldown(seconds, onEnd) {
    if (this.cooldownTimer) {
      clearInterval(this.cooldownTimer);
    }
    
    let remaining = seconds;
    this.cooldownTimer = setInterval(() => {
      remaining--;
      
      if (remaining <= 0) {
        clearInterval(this.cooldownTimer);
        if (onEnd) onEnd();
      }
      
      // Dispatch event for UI updates
      window.dispatchEvent(new CustomEvent('otpCooldown', {
        detail: { remaining }
      }));
    }, 1000);
  }
}

// Usage with React component
function ResendButton({ phone, onResend }) {
  const [cooldown, setCooldown] = useState(0);
  const [loading, setLoading] = useState(false);
  const manager = useRef(new OTPResendManager('api_key', 'api_secret'));
  
  useEffect(() => {
    const handleCooldown = (e) => {
      setCooldown(e.detail.remaining);
    };
    
    window.addEventListener('otpCooldown', handleCooldown);
    return () => window.removeEventListener('otpCooldown', handleCooldown);
  }, []);
  
  const handleResend = async () => {
    setLoading(true);
    
    const result = await manager.current.resendOTP(phone, undefined, {
      onCooldownEnd: () => {
        setCooldown(0);
      }
    });
    
    setLoading(false);
    
    if (result.success) {
      onResend?.(result.otpId);
      toast.success('New code sent!');
    } else if (result.cooldown) {
      toast.info(result.message);
    } else {
      toast.error(result.message);
    }
  };
  
  return (
    <button
      onClick={handleResend}
      disabled={loading || cooldown > 0}
      className="text-blue-600 disabled:opacity-50"
    >
      {loading ? 'Sending...' : 
       cooldown > 0 ? `Resend in ${cooldown}s` : 
       'Resend Code'}
    </button>
  );
}