DomainRequestDetailModal.jsx

Go to the documentation of this file.

import { useState } from 'react';
import { apiFetch } from '../../../lib/api';
import { notifySuccess, notifyError } from '../../../utils/notifications';
 
export default function DomainRequestDetailModal({ request, onClose, onRequestProcessed }) {
    const [processing, setProcessing] = useState(false);
    const [approvalNotes, setApprovalNotes] = useState('');
    const [selectedRegistrar, setSelectedRegistrar] = useState('cloudflare-registrar');
 
    const handleApprove = async () => {
        const registrarNames = {
            cloudflare: 'Cloudflare (DNS-only)',
            'cloudflare-registrar': 'Cloudflare Registrar',
            enom: 'eNom',
            moniker: 'Moniker'
        };
 
        if (!confirm(`Approve domain registration for ${request.domain_name}? This will attempt registration via ${registrarNames[selectedRegistrar]}.`)) {
            return;
        }
 
        setProcessing(true);
        try {
            await apiFetch(`/domain-requests/${request.request_id}/approve`, {
                method: 'POST',
                body: JSON.stringify({ 
                    approval_notes: approvalNotes,
                    registrar: selectedRegistrar
                })
            });
 
            await notifySuccess(
                'Registration Approved',
                `Domain registration for ${request.domain_name} has been approved and is being processed`
            );
 
            onRequestProcessed();
        } catch (err) {
            console.error('Error approving request:', err);
            await notifyError('Approval Failed', err.message || 'Failed to approve registration request');
        } finally {
            setProcessing(false);
        }
    };
 
    const handleDeny = async () => {
        if (!approvalNotes.trim()) {
            await notifyError('Notes Required', 'Please provide a reason for denying this request');
            return;
        }
 
        if (!confirm(`Deny domain registration for ${request.domain_name}?`)) {
            return;
        }
 
        setProcessing(true);
        try {
            await apiFetch(`/domain-requests/${request.request_id}/deny`, {
                method: 'POST',
                body: JSON.stringify({ approval_notes: approvalNotes })
            });
 
            await notifySuccess(
                'Registration Denied',
                `Domain registration for ${request.domain_name} has been denied`
            );
 
            onRequestProcessed();
        } catch (err) {
            console.error('Error denying request:', err);
            await notifyError('Denial Failed', err.message || 'Failed to deny registration request');
        } finally {
            setProcessing(false);
        }
    };
 
    const formatContact = (contact) => {
        if (!contact) return null;
        return (
            <div style={{ fontSize: '0.9em', lineHeight: '1.6' }}>
                <div><strong>{contact.firstName} {contact.lastName}</strong></div>
                {contact.organization && <div>{contact.organization}</div>}
                <div>{contact.email}</div>
                <div>{contact.phone}</div>
                <div>{contact.address}</div>
                <div>{contact.city}, {contact.state} {contact.postalCode}</div>
                <div>{contact.country}</div>
            </div>
        );
    };
 
    const formatDate = (dateString) => {
        if (!dateString) return '-';
        return new Date(dateString).toLocaleString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    };
 
    const getStatusBadge = (status) => {
        const statusColors = {
            pending: { bg: '#fff3e0', text: '#e65100', label: 'Pending Review' },
            approved: { bg: '#e8f5e9', text: '#2e7d32', label: 'Approved' },
            denied: { bg: '#ffebee', text: '#c62828', label: 'Denied' },
            registered: { bg: '#e3f2fd', text: '#1565c0', label: 'Successfully Registered' },
            failed: { bg: '#fce4ec', text: '#ad1457', label: 'Registration Failed' }
        };
 
        const style = statusColors[status] || statusColors.pending;
 
        return (
            <span style={{
                padding: '6px 14px',
                borderRadius: '16px',
                fontSize: '13px',
                fontWeight: '500',
                background: style.bg,
                color: style.text
            }}>
                {style.label}
            </span>
        );
    };
 
    const isPending = request.status === 'pending';
 
    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content large-modal" onClick={(e) => e.stopPropagation()}>
                <div className="modal-header">
                    <div>
                        <h2>Domain Registration Request</h2>
                        <div style={{ marginTop: '8px' }}>{getStatusBadge(request.status)}</div>
                    </div>
                    <button className="modal-close" onClick={onClose}>
                        <span className="material-symbols-outlined">close</span>
                    </button>
                </div>
 
                <div className="modal-body">
                    {/* Domain Information */}
                    <section>
                        <h3>Domain Information</h3>
                        <div className="info-grid">
                            <div className="info-item">
                                <label>Domain:</label>
                                <strong style={{ fontSize: '1.1em' }}>{request.domain_name}</strong>
                            </div>
                            <div className="info-item">
                                <label>Registration Period:</label>
                                <span>{request.years} year{request.years !== 1 ? 's' : ''}</span>
                            </div>
                            <div className="info-item">
                                <label>Price:</label>
                                <span>
                                    {request.price ? `$${request.price} ${request.currency}` : 'Not specified'}
                                </span>
                            </div>
                            <div className="info-item">
                                <label>Customer:</label>
                                <span>{request.customer_name || '-'}</span>
                            </div>
                            <div className="info-item">
                                <label>Contract:</label>
                                <span>{request.contract_title || 'No contract'}</span>
                            </div>
                            <div className="info-item">
                                <label>Tenant:</label>
                                <span>{request.tenant_subdomain || '-'}</span>
                            </div>
                        </div>
 
                        {request.nameservers && request.nameservers.length > 0 && (
                            <div className="info-item" style={{ marginTop: '16px' }}>
                                <label>Nameservers:</label>
                                <ul style={{ marginTop: '4px', paddingLeft: '20px' }}>
                                    {request.nameservers.map((ns, idx) => (
                                        <li key={idx}>{ns}</li>
                                    ))}
                                </ul>
                            </div>
                        )}
                    </section>
 
                    {/* Request Details */}
                    <section>
                        <h3>Request Details</h3>
                        <div className="info-grid">
                            <div className="info-item">
                                <label>Requested By:</label>
                                <span>{request.requested_by_name || 'Unknown'}</span>
                            </div>
                            <div className="info-item">
                                <label>Requested At:</label>
                                <span>{formatDate(request.requested_at)}</span>
                            </div>
                            {request.reviewed_by_name && (
                                <>
                                    <div className="info-item">
                                        <label>Reviewed By:</label>
                                        <span>{request.reviewed_by_name}</span>
                                    </div>
                                    <div className="info-item">
                                        <label>Reviewed At:</label>
                                        <span>{formatDate(request.reviewed_at)}</span>
                                    </div>
                                </>
                            )}
                        </div>
                    </section>
 
                    {/* Contact Information */}
                    <section>
                        <h3>Registrant Contact</h3>
                        {formatContact(request.registrant_contact)}
                    </section>
 
                    {/* Review Notes */}
                    {request.approval_notes && (
                        <section>
                            <h3>Review Notes</h3>
                            <div style={{
                                padding: '12px',
                                background: 'var(--surface)',
                                border: '1px solid var(--border)',
                                borderRadius: '4px',
                                whiteSpace: 'pre-wrap'
                            }}>
                                {request.approval_notes}
                            </div>
                        </section>
                    )}
 
                    {/* Registration Error */}
                    {request.registration_error && (
                        <section>
                            <h3>Registration Error</h3>
                            <div style={{
                                padding: '12px',
                                background: '#ffebee',
                                border: '1px solid #ef5350',
                                borderRadius: '4px',
                                color: '#c62828',
                                whiteSpace: 'pre-wrap'
                            }}>
                                {request.registration_error}
                            </div>
                        </section>
                    )}
 
                    {/* Approval/Denial Section (only for pending requests) */}
                    {isPending && (
                        <section>
                            <h3>Admin Action</h3>
                            
                            <div className="form-group">
                                <label>Registrar:</label>
                                <select 
                                    value={selectedRegistrar} 
                                    onChange={(e) => setSelectedRegistrar(e.target.value)}
                                    style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid var(--border)' }}
                                >
                                    <option value="cloudflare-registrar">Cloudflare Registrar (Full domain registration at cost)</option>
                                    <option value="cloudflare">Cloudflare (DNS-only zone, no registration)</option>
                                    <option value="enom">eNom (Full domain registration + DNS)</option>
                                    <option value="moniker">Moniker (Full domain registration + DNS)</option>
                                </select>
                                <small style={{ display: 'block', marginTop: '6px', color: 'var(--text-secondary)' }}>
                                    {selectedRegistrar === 'cloudflare-registrar' && '✓ Registers domain at cost price via Cloudflare. No markup, transparent pricing.'}
                                    {selectedRegistrar === 'cloudflare' && '✓ Creates DNS zone only. Customer must already own domain or will register elsewhere.'}
                                    {selectedRegistrar === 'enom' && '⚠️ Registers domain at eNom and sets up DNS. Requires eNom API credentials.'}
                                    {selectedRegistrar === 'moniker' && '⚠️ Registers domain at Moniker and sets up DNS. Requires Moniker API credentials.'}
                                </small>
                            </div>
 
                            <div className="form-group">
                                <label>Notes (optional for approval, required for denial):</label>
                                <textarea
                                    value={approvalNotes}
                                    onChange={(e) => setApprovalNotes(e.target.value)}
                                    placeholder="Add notes about this request (e.g., 'Verified customer identity', 'Insufficient funds', etc.)"
                                    rows="4"
                                    style={{ width: '100%' }}
                                />
                            </div>
 
                            <div style={{
                                padding: '12px',
                                background: selectedRegistrar === 'cloudflare' ? '#e3f2fd' : (selectedRegistrar === 'cloudflare-registrar' ? '#e8f5e9' : '#fff3e0'),
                                border: `1px solid ${selectedRegistrar === 'cloudflare' ? '#2196f3' : (selectedRegistrar === 'cloudflare-registrar' ? '#4caf50' : '#ff9800')}`,
                                borderRadius: '4px',
                                marginTop: '12px'
                            }}>
                                <strong>{selectedRegistrar === 'cloudflare' || selectedRegistrar === 'cloudflare-registrar' ? 'ℹ️' : '⚠️'} Important:</strong>
                                <ul style={{ marginTop: '8px', paddingLeft: '20px', marginBottom: 0 }}>
                                    {selectedRegistrar === 'cloudflare-registrar' && (
                                        <>
                                            <li>Registers domain via Cloudflare Registrar at cost (no markup)</li>
                                            <li>Transparent pricing - you pay what Cloudflare pays</li>
                                            <li>Automatic DNS zone creation included</li>
                                            <li>Registration cannot be undone if successful</li>
                                        </>
                                    )}
                                    {selectedRegistrar === 'cloudflare' && (
                                        <>
                                            <li>Creates a free DNS zone in Cloudflare - no domain registration</li>
                                            <li>Customer must update nameservers at their registrar</li>
                                            <li>Domain will not resolve until nameservers are updated</li>
                                        </>
                                    )}
                                    {(selectedRegistrar === 'enom' || selectedRegistrar === 'moniker') && (
                                        <>
                                            <li>Approval will immediately attempt to register the domain via {selectedRegistrar === 'enom' ? 'eNom' : 'Moniker'} API</li>
                                            <li>Ensure sufficient credits are available in the {selectedRegistrar === 'enom' ? 'eNom' : 'Moniker'} account</li>
                                            <li>Registration cannot be undone if successful</li>
                                        </>
                                    )}
                                </ul>
                            </div>
                        </section>
                    )}
                </div>
 
                <div className="modal-footer">
                    {isPending ? (
                        <>
                            <button
                                type="button"
                                className="btn btn-secondary"
                                onClick={onClose}
                                disabled={processing}
                            >
                                Close
                            </button>
                            <div style={{ display: 'flex', gap: '8px' }}>
                                <button
                                    type="button"
                                    className="btn"
                                    onClick={handleDeny}
                                    disabled={processing}
                                    style={{ background: '#ef5350', color: 'white' }}
                                >
                                    {processing ? 'Processing...' : 'Deny Request'}
                                </button>
                                <button
                                    type="button"
                                    className="btn btn-primary"
                                    onClick={handleApprove}
                                    disabled={processing}
                                >
                                    {processing ? 'Processing...' : 'Approve & Register'}
                                </button>
                            </div>
                        </>
                    ) : (
                        <button
                            type="button"
                            className="btn btn-primary"
                            onClick={onClose}
                        >
                            Close
                        </button>
                    )}
                </div>
            </div>
        </div>
    );
}