CustomerForm.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import '../styles/forms.css';
import './CustomerForm.css';
import { apiFetch } from '../lib/api';
import { notifySuccess, notifyError } from '../utils/notifications';
 
function CustomerForm() {
    const navigate = useNavigate();
    const { id } = useParams();
    const [selectedTenantId, setSelectedTenantId] = useState('');
    const [isRootTenant, setIsRootTenant] = useState(false);
    const [tenants, setTenants] = useState([]);
    const defaultForm = {
        name: '',
        contact_name: '',
        email: '',
        phone: '',
        address: '',
        city: '',
        state: '',
        postal_code: '',
        country: '',
        notes: '',
        status: 'active',
        billing_email: '',
        tenant_id: ''
    };
    const [form, setForm] = useState(defaultForm);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
 
    useEffect(() => {
        // Check if user is root tenant
        const token = localStorage.getItem('token');
        if (token) {
            try {
                const payload = token.split('.')[1];
                const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
                const userTenantId = decoded.tenant_id || decoded.tenantId || '';
                setIsRootTenant(userTenantId === '00000000-0000-0000-0000-000000000001');
            } catch (e) {
                console.error('Error decoding token:', e);
            }
        }
 
        async function fetchCustomer() {
            if (!id) return;
            setLoading(true);
            setError('');
            try {
                const res = await apiFetch(`/customers/${id}`, { method: 'GET', credentials: 'include' });
                if (!res.ok) throw new Error('Failed to load customer');
                const data = await res.json();
                const cust = data.customer || data || {};
                if (cust.tenant_id && !selectedTenantId) {
                    setSelectedTenantId(String(cust.tenant_id));
                }
                const normalized = Object.keys(defaultForm).reduce((acc, key) => {
                    acc[key] = cust[key] ?? defaultForm[key];
                    return acc;
                }, {});
                setForm(normalized);
            } catch (err) {
                console.error(err);
                setError(err.message || 'Failed to load customer');
            } finally {
                setLoading(false);
            }
        }
        fetchCustomer();
    }, [id]);
 
    useEffect(() => {
        // Fetch tenants list for root tenant
        if (isRootTenant) {
            (async () => {
                try {
                    const res = await apiFetch('/tenants', { method: 'GET' });
                    if (res.ok) {
                        const data = await res.json();
                        setTenants(data.tenants || []);
                    }
                } catch (err) {
                    console.error('Error fetching tenants:', err);
                }
            })();
        }
    }, [isRootTenant]);
 
    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');
 
        if (!form.name?.trim()) {
            setError('Company name is required');
            setLoading(false);
            return;
        }
 
        try {
            const res = await apiFetch(`/customers${id ? `/${id}` : ''}`, {
                method: id ? 'PUT' : 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify(form),
            });
 
            const data = await res.json();
 
            if (!res.ok) {
                const errorMsg = data.error || 'Failed to save customer';
                await notifyError('Save Failed', errorMsg);
                throw new Error(errorMsg);
            }
 
            await notifySuccess(id ? 'Customer Updated' : 'Customer Created', `Customer has been ${id ? 'updated' : 'created'} successfully`);
            navigate('/customers');
        } catch (err) {
            console.error(err);
            setError(err.message || 'Failed to save customer');
        } finally {
            setLoading(false);
        }
    };
 
    return (
        <MainLayout>
            <div className="page-content">
                <div className="page-header">
                    <h2>{id ? 'Edit Customer' : 'Create Customer'}</h2>
                </div>
 
                {error && <div className="error-message">{error}</div>}
 
 
                <form onSubmit={handleSubmit} className="form-container">
                    <div className="form-grid">
                        <div className="form-section">
                            <h3>Basic Information</h3>
 
                            {isRootTenant && (
                                <div className="form-row">
                                    <div className="form-field">
                                        <label>Tenant</label>
                                        <select
                                            value={form.tenant_id}
                                            onChange={(e) => setForm({ ...form, tenant_id: e.target.value })}
                                        >
                                            <option value="">Select Tenant</option>
                                            {tenants.map(tenant => (
                                                <option key={tenant.tenant_id} value={tenant.tenant_id}>
                                                    {tenant.name}
                                                </option>
                                            ))}
                                        </select>
                                        <span className="field-hint">Assign this customer to a specific tenant (Root only)</span>
                                    </div>
                                </div>
                            )}
 
                            <div className="form-row">
                                <div className="form-field">
                                    <label>Company Name<span className="required">*</span></label>
                                    <input
                                        type="text"
                                        value={form.name}
                                        onChange={(e) => setForm({ ...form, name: e.target.value })}
                                        required
                                    />
                                    <span className="field-hint">Required - The name of the company or organization</span>
                                </div>
                                <div className="form-field">
                                    <label>Status</label>
                                    <select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                    <span className="field-hint">Defaults to Active if not specified</span>
                                </div>
                            </div>
                        </div>
 
                        <div className="form-section">
                            <h3>Contact Information</h3>
                            <div className="form-row">
                                <div className="form-field">
                                    <label>Contact Name</label>
                                    <input
                                        type="text"
                                        value={form.contact_name}
                                        onChange={(e) => setForm({ ...form, contact_name: e.target.value })}
                                    />
                                    <span className="field-hint">Primary contact person's name</span>
                                </div>
                                <div className="form-field">
                                    <label>Email</label>
                                    <input
                                        type="email"
                                        value={form.email}
                                        onChange={(e) => setForm({ ...form, email: e.target.value })}
                                    />
                                </div>
                                <div className="form-field">
                                    <label>Phone</label>
                                    <input
                                        type="tel"
                                        value={form.phone}
                                        onChange={(e) => setForm({ ...form, phone: e.target.value })}
                                    />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="form-field">
                                    <label>Billing Email</label>
                                    <input
                                        type="email"
                                        value={form.billing_email}
                                        onChange={(e) => setForm({ ...form, billing_email: e.target.value })}
                                    />
                                    <span className="field-hint">Email address for invoices and billing communications</span>
                                </div>
                            </div>
                        </div>
 
                        <div className="form-section">
                            <h3>Address</h3>
                            <div className="form-row">
                                <div className="form-field">
                                    <label>Street Address</label>
                                    <input
                                        type="text"
                                        value={form.address}
                                        onChange={(e) => setForm({ ...form, address: e.target.value })}
                                    />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="form-field">
                                    <label>City</label>
                                    <input
                                        type="text"
                                        value={form.city}
                                        onChange={(e) => setForm({ ...form, city: e.target.value })}
                                    />
                                </div>
                                <div className="form-field">
                                    <label>State/Province</label>
                                    <input
                                        type="text"
                                        value={form.state}
                                        onChange={(e) => setForm({ ...form, state: e.target.value })}
                                    />
                                </div>
                                <div className="form-field">
                                    <label>Postal Code</label>
                                    <input
                                        type="text"
                                        value={form.postal_code}
                                        onChange={(e) => setForm({ ...form, postal_code: e.target.value })}
                                    />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="form-field">
                                    <label>Country</label>
                                    <input
                                        type="text"
                                        value={form.country}
                                        onChange={(e) => setForm({ ...form, country: e.target.value })}
                                    />
                                </div>
                            </div>
                        </div>
 
                        <div className="form-section">
                            <h3>Additional Information</h3>
                            <div className="form-field">
                                <label>Notes</label>
                                <textarea
                                    value={form.notes}
                                    onChange={(e) => setForm({ ...form, notes: e.target.value })}
                                    rows={4}
                                />
                                <span className="field-hint">Any additional notes or comments about the customer</span>
                            </div>
                        </div>
                    </div>
 
                    <div className="form-actions">
                        <button type="submit" disabled={loading} className="btn">
                            {loading ? 'Saving...' : (<><span className="material-symbols-outlined">save</span> Save</>)}
                        </button>
                        <button type="button" className="btn" onClick={() => navigate('/customers')}>
                            <span className="material-symbols-outlined">close</span> Cancel
                        </button>
                    </div>
                </form>
            </div>
        </MainLayout>
    );
}
 
export default CustomerForm;