@rovela-ai/sdk 0.4.1 → 0.4.2

package/dist/admin/components/ShippingSettings.js

@@ -0,0 +1,553 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { fetchAdminApi } from '../hooks/fetchAdminApi';
+import { Package, Plus, Edit2, Trash2, Globe, ChevronDown, ChevronUp, Plug, MapPin, Check, Truck, Box, RefreshCw, Key, Loader2, ExternalLink, } from 'lucide-react';
+import { DeleteConfirmDialog } from './DeleteConfirmDialog';
+import { AdminSelect } from './AdminSelect';
+import { AdminToast } from './AdminToast';
+import { useStoreSettingsOptional } from '../../core/StoreSettingsProvider';
+import { getCurrencySymbol, formatPrice } from '../../core/utils';
+import { COMMON_COUNTRIES, US_STATES } from '../../checkout/constants';
+const DEFAULT_FROM_ADDRESS = {
+    name: '',
+    company: '',
+    street1: '',
+    street2: '',
+    city: '',
+    state: '',
+    zip: '',
+    country: 'US',
+    phone: '',
+    email: '',
+};
+const DEFAULT_PARCEL = {
+    length: 10,
+    width: 8,
+    height: 4,
+    weight: 16,
+};
+// =============================================================================
+// Helper Components
+// =============================================================================
+function CountryTag({ code, onRemove, }) {
+    const country = COMMON_COUNTRIES.find((c) => c.code === code);
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md bg-[hsl(var(--admin-primary-light))] px-2 py-1 text-sm text-[hsl(var(--admin-primary))]", children: [country?.name || code, _jsx("button", { type: "button", onClick: onRemove, className: "ml-1 opacity-70 hover:opacity-100", children: "\u00D7" })] }));
+}
+// =============================================================================
+// Carrier Card Component (NEW)
+// =============================================================================
+function CarrierCard({ carrier, onEdit, onDelete, onAddZone, onEditZone, onDeleteZone, onAddRate, onEditRate, onDeleteRate, formatCurrency, }) {
+    const [isExpanded, setIsExpanded] = useState(true);
+    const zones = carrier.zones || [];
+    return (_jsxs("div", { className: "rounded-lg border border-[hsl(var(--admin-border))] overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between bg-[hsl(var(--admin-primary))]/10 px-4 py-3", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "flex items-center gap-3 text-left flex-1", children: [_jsx(Truck, { className: "h-5 w-5 text-[hsl(var(--admin-primary))]" }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold text-[hsl(var(--admin-foreground))]", children: carrier.name }), _jsxs("span", { className: "ml-2 text-sm text-[hsl(var(--admin-foreground-muted))]", children: ["(", carrier.code, ")"] }), carrier.description && (_jsx("p", { className: "text-sm text-[hsl(var(--admin-foreground-muted))]", children: carrier.description }))] }), isExpanded ? (_jsx(ChevronUp, { className: "h-4 w-4 text-[hsl(var(--admin-foreground-muted))]" })) : (_jsx(ChevronDown, { className: "h-4 w-4 text-[hsl(var(--admin-foreground-muted))]" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!carrier.isActive && (_jsx("span", { className: "admin-badge admin-badge-warning text-xs", children: "Inactive" })), _jsxs("span", { className: "text-xs text-[hsl(var(--admin-foreground-muted))]", children: [zones.length, " zone", zones.length !== 1 ? 's' : ''] }), _jsx("button", { type: "button", onClick: onEdit, className: "admin-btn admin-btn-ghost admin-btn-sm", title: "Edit carrier", children: _jsx(Edit2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: onDelete, className: "admin-btn admin-btn-ghost admin-btn-sm text-[hsl(var(--admin-error))]", title: "Delete carrier", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }), isExpanded && (_jsxs("div", { className: "bg-[hsl(var(--admin-card))]", children: [zones.length === 0 ? (_jsxs("div", { className: "px-4 py-6 text-center text-[hsl(var(--admin-foreground-muted))]", children: [_jsx(Package, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }), _jsx("p", { className: "text-sm", children: "No zones configured for this carrier" })] })) : (_jsx("div", { className: "divide-y divide-[hsl(var(--admin-border))]", children: zones.map((zone) => (_jsx(ZoneCard, { zone: zone, onEdit: () => onEditZone(zone), onDelete: () => onDeleteZone(zone), onAddRate: () => onAddRate(zone.id), onEditRate: (rate) => onEditRate(zone.id, rate), onDeleteRate: onDeleteRate, formatCurrency: formatCurrency }, zone.id))) })), _jsx("div", { className: "px-4 py-3 border-t border-[hsl(var(--admin-border))]", children: _jsxs("button", { type: "button", onClick: onAddZone, className: "flex items-center gap-2 text-sm text-[hsl(var(--admin-primary))] hover:text-[hsl(var(--admin-primary-hover))]", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add shipping zone"] }) })] }))] }));
+}
+// =============================================================================
+// Zone Card Component
+// =============================================================================
+function ZoneCard({ zone, onEdit, onDelete, onAddRate, onEditRate, onDeleteRate, formatCurrency, }) {
+    const [isExpanded, setIsExpanded] = useState(true);
+    return (_jsxs("div", { className: "bg-[hsl(var(--admin-background-subtle))]/30", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 pl-8", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "flex items-center gap-3 text-left flex-1", children: [_jsx(Package, { className: "h-4 w-4 text-[hsl(var(--admin-foreground-muted))]" }), _jsxs("div", { children: [_jsx("span", { className: "font-medium text-[hsl(var(--admin-foreground))]", children: zone.name }), _jsxs("span", { className: "ml-2 text-sm text-[hsl(var(--admin-foreground-muted))]", children: ["(", zone.countries.includes('*') ? 'All countries' : zone.countries.join(', '), ")"] })] }), isExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3 text-[hsl(var(--admin-foreground-muted))]" })) : (_jsx(ChevronDown, { className: "h-3 w-3 text-[hsl(var(--admin-foreground-muted))]" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!zone.isActive && (_jsx("span", { className: "admin-badge admin-badge-warning text-xs", children: "Inactive" })), _jsx("button", { type: "button", onClick: onEdit, className: "admin-btn admin-btn-ghost admin-btn-sm", title: "Edit zone", children: _jsx(Edit2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: onDelete, className: "admin-btn admin-btn-ghost admin-btn-sm text-[hsl(var(--admin-error))]", title: "Delete zone", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }), isExpanded && (_jsxs("div", { className: "bg-[hsl(var(--admin-card))]", children: [zone.rates.length === 0 ? (_jsx("div", { className: "px-4 py-4 pl-12 text-center text-[hsl(var(--admin-foreground-muted))] text-sm", children: "No shipping rates configured" })) : (_jsx("div", { className: "divide-y divide-[hsl(var(--admin-border))]", children: zone.rates.map((rate) => (_jsxs("div", { className: "flex items-center justify-between px-4 py-2 pl-12 hover:bg-[hsl(var(--admin-background-subtle))]/50 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-[hsl(var(--admin-foreground-muted))] text-xs", children: "\u2514\u2500" }), _jsxs("div", { children: [_jsx("span", { className: "text-sm font-medium text-[hsl(var(--admin-foreground))]", children: rate.name }), rate.description && (_jsx("span", { className: "ml-2 text-xs text-[hsl(var(--admin-foreground-muted))]", children: rate.description }))] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "font-medium text-sm text-[hsl(var(--admin-foreground))]", children: formatCurrency(rate.price) }), rate.estimatedDays && (_jsxs("span", { className: "text-xs text-[hsl(var(--admin-foreground-muted))]", children: [rate.estimatedDays, " days"] })), !rate.isActive && (_jsx("span", { className: "admin-badge admin-badge-warning text-xs", children: "Inactive" })), _jsx("button", { type: "button", onClick: () => onEditRate(rate), className: "admin-btn admin-btn-ghost admin-btn-sm", title: "Edit rate", children: _jsx(Edit2, { className: "h-3 w-3" }) }), _jsx("button", { type: "button", onClick: () => onDeleteRate(rate), className: "admin-btn admin-btn-ghost admin-btn-sm text-[hsl(var(--admin-error))]", title: "Delete rate", children: _jsx(Trash2, { className: "h-3 w-3" }) })] })] }, rate.id))) })), _jsx("div", { className: "px-4 py-2 pl-12 border-t border-[hsl(var(--admin-border))]", children: _jsxs("button", { type: "button", onClick: onAddRate, className: "flex items-center gap-2 text-xs text-[hsl(var(--admin-primary))] hover:text-[hsl(var(--admin-primary-hover))]", children: [_jsx(Plus, { className: "h-3 w-3" }), "Add rate"] }) })] }))] }));
+}
+// =============================================================================
+// Main Component
+// =============================================================================
+export function ShippingSettings({ className }) {
+    // ---------------------------------------------------------------------------
+    // State
+    // ---------------------------------------------------------------------------
+    const [isFetching, setIsFetching] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
+    const [toast, setToast] = useState(null);
+    // Toast helper
+    const showToast = useCallback((type, message) => {
+        setToast({ type, message });
+        if (type === 'success') {
+            setTimeout(() => setToast(null), 3000);
+        }
+    }, []);
+    // General settings
+    const [shippingEnabled, setShippingEnabled] = useState(true);
+    const [freeShippingThreshold, setFreeShippingThreshold] = useState('0');
+    const [shippingCountries, setShippingCountries] = useState(['US', 'CA']);
+    const [countryInput, setCountryInput] = useState('');
+    // Carriers (NEW - carrier-first architecture)
+    const [carriers, setCarriers] = useState([]);
+    // Shippo configuration
+    const [shippingMode, setShippingMode] = useState('manual');
+    const [shippoTestMode, setShippoTestMode] = useState(true);
+    const [shippoFromAddress, setShippoFromAddress] = useState(DEFAULT_FROM_ADDRESS);
+    const [shippoDefaultParcel, setShippoDefaultParcel] = useState(DEFAULT_PARCEL);
+    const [shippoKeyValid, setShippoKeyValid] = useState(null);
+    const [isValidatingShippo, setIsValidatingShippo] = useState(false);
+    // Shippo API key management
+    const [shippoApiKeyInput, setShippoApiKeyInput] = useState('');
+    const [isSavingApiKey, setIsSavingApiKey] = useState(false);
+    const [hasStoredKey, setHasStoredKey] = useState(false);
+    const [maskedKey, setMaskedKey] = useState(null);
+    const [isDeletingApiKey, setIsDeletingApiKey] = useState(false);
+    // Modals
+    const [showCarrierForm, setShowCarrierForm] = useState(false);
+    const [editingCarrier, setEditingCarrier] = useState(null);
+    const [showZoneForm, setShowZoneForm] = useState(false);
+    const [editingZone, setEditingZone] = useState(null);
+    const [showRateForm, setShowRateForm] = useState(false);
+    const [editingRate, setEditingRate] = useState(null);
+    // Delete confirmation dialog
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState(null);
+    // Currency settings
+    const storeSettings = useStoreSettingsOptional();
+    const currency = storeSettings?.currency ?? 'USD';
+    const locale = storeSettings?.locale ?? 'en-US';
+    const currencySymbol = getCurrencySymbol(currency, locale);
+    const formatCurrency = (price) => {
+        return formatPrice(price, { currency, locale });
+    };
+    // ---------------------------------------------------------------------------
+    // Data Fetching
+    // ---------------------------------------------------------------------------
+    const fetchData = useCallback(async () => {
+        // Fetch settings and carriers in parallel.
+        const [settingsRes, carriersRes] = await Promise.all([
+            fetchAdminApi('/api/admin/settings'),
+            fetchAdminApi('/api/admin/shipping/carriers'),
+        ]);
+        setIsFetching(false);
+        if (settingsRes.ok) {
+            const settings = settingsRes.data.settings || {};
+            setShippingEnabled(settings.shippingEnabled ?? true);
+            setFreeShippingThreshold(String(settings.freeShippingThreshold ?? 0));
+            setShippingCountries(settings.shippingCountries || ['US', 'CA']);
+            setShippingMode(settings.shippingMode || 'manual');
+            setShippoTestMode(settings.shippoTestMode ?? true);
+            if (settings.shippoFromAddress) {
+                setShippoFromAddress(settings.shippoFromAddress);
+            }
+            if (settings.shippoDefaultParcel) {
+                setShippoDefaultParcel(settings.shippoDefaultParcel);
+            }
+        }
+        else {
+            showToast('error', settingsRes.error);
+        }
+        if (carriersRes.ok) {
+            setCarriers(carriersRes.data.data || []);
+        }
+        else if (settingsRes.ok) {
+            // Only surface the carriers error if settings loaded OK — otherwise
+            // the settings error above is the more actionable message.
+            showToast('error', carriersRes.error);
+        }
+    }, [showToast]);
+    // Pattern C — populate state from async-loaded settings.
+    // Alternative is a data-fetching library (TanStack Query / SWR).
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        fetchData();
+    }, [fetchData]);
+    // ---------------------------------------------------------------------------
+    // Handlers
+    // ---------------------------------------------------------------------------
+    const handleSaveSettings = useCallback(async () => {
+        setToast(null);
+        setIsLoading(true);
+        const res = await fetchAdminApi('/api/admin/settings', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                shippingEnabled,
+                freeShippingThreshold: parseFloat(freeShippingThreshold) || 0,
+                shippingCountries,
+                // Shippo settings
+                shippingMode,
+                shippoTestMode,
+                shippoFromAddress,
+                shippoDefaultParcel,
+            }),
+        });
+        setIsLoading(false);
+        if (!res.ok) {
+            showToast('error', res.error);
+            return;
+        }
+        showToast('success', 'Settings saved successfully!');
+    }, [shippingEnabled, freeShippingThreshold, shippingCountries, shippingMode, shippoTestMode, shippoFromAddress, shippoDefaultParcel, showToast]);
+    const handleValidateShippoKey = useCallback(async () => {
+        setIsValidatingShippo(true);
+        setShippoKeyValid(null);
+        const res = await fetchAdminApi('/api/admin/shipping/shippo/validate', { method: 'POST' });
+        setIsValidatingShippo(false);
+        if (!res.ok) {
+            setShippoKeyValid(false);
+            setHasStoredKey(false);
+            setMaskedKey(null);
+            showToast('error', res.error);
+            return;
+        }
+        setShippoKeyValid(res.data.valid ?? false);
+        setHasStoredKey(res.data.hasStoredKey ?? false);
+        setMaskedKey(res.data.maskedKey ?? null);
+        if (!res.data.valid && res.data.error) {
+            showToast('error', res.data.error);
+        }
+    }, [showToast]);
+    // Auto-validate Shippo API key when mode is 'shippo' after initial load.
+    // Pattern C — async validation triggered by data arrival.
+    // Alternative is a data-fetching library handling derived async state.
+    useEffect(() => {
+        if (!isFetching && shippingMode === 'shippo' && shippoKeyValid === null) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            handleValidateShippoKey();
+        }
+    }, [isFetching, shippingMode, shippoKeyValid, handleValidateShippoKey]);
+    const handleSaveShippoApiKey = useCallback(async () => {
+        if (!shippoApiKeyInput.trim())
+            return;
+        setIsSavingApiKey(true);
+        setToast(null);
+        const res = await fetchAdminApi('/api/admin/shipping/shippo/api-key', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ apiKey: shippoApiKeyInput }),
+        });
+        setIsSavingApiKey(false);
+        if (!res.ok) {
+            showToast('error', res.error);
+            return;
+        }
+        setHasStoredKey(true);
+        setMaskedKey(res.data.maskedKey ?? null);
+        setShippoApiKeyInput('');
+        setShippoKeyValid(true);
+        showToast('success', 'API key saved and verified!');
+    }, [shippoApiKeyInput, showToast]);
+    const handleRemoveApiKey = useCallback(async () => {
+        setIsDeletingApiKey(true);
+        setToast(null);
+        const res = await fetchAdminApi('/api/admin/shipping/shippo/api-key', {
+            method: 'DELETE',
+        });
+        setIsDeletingApiKey(false);
+        if (!res.ok) {
+            showToast('error', res.error);
+            return;
+        }
+        setHasStoredKey(false);
+        setMaskedKey(null);
+        showToast('success', 'API key removed');
+        // Re-validate to check if env var exists
+        handleValidateShippoKey();
+    }, [handleValidateShippoKey, showToast]);
+    const handleAddCountry = useCallback(() => {
+        const code = countryInput.toUpperCase().trim();
+        if (code && code.length === 2 && !shippingCountries.includes(code)) {
+            setShippingCountries((prev) => [...prev, code]);
+            setCountryInput('');
+        }
+    }, [countryInput, shippingCountries]);
+    const handleRemoveCountry = useCallback((code) => {
+        setShippingCountries((prev) => prev.filter((c) => c !== code));
+    }, []);
+    // Toggle shipping enabled and save immediately
+    const handleToggleShippingEnabled = useCallback(async () => {
+        const newValue = !shippingEnabled;
+        setShippingEnabled(newValue);
+        const res = await fetchAdminApi('/api/admin/settings', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ shippingEnabled: newValue }),
+        });
+        if (!res.ok) {
+            // Revert on error
+            setShippingEnabled(!newValue);
+            showToast('error', res.error);
+            return;
+        }
+        showToast('success', newValue ? 'Shipping enabled' : 'Shipping disabled');
+    }, [shippingEnabled, showToast]);
+    // Carrier handlers - open delete dialog
+    const handleDeleteCarrierClick = useCallback((carrier) => {
+        setDeleteTarget({ type: 'carrier', id: carrier.id, name: carrier.name });
+        setDeleteError(null);
+    }, []);
+    const handleDeleteZoneClick = useCallback((zone) => {
+        setDeleteTarget({ type: 'zone', id: zone.id, name: zone.name });
+        setDeleteError(null);
+    }, []);
+    const handleDeleteRateClick = useCallback((rate) => {
+        setDeleteTarget({ type: 'rate', id: rate.id, name: rate.name });
+        setDeleteError(null);
+    }, []);
+    const handleDeleteConfirm = useCallback(async () => {
+        if (!deleteTarget)
+            return;
+        setIsDeleting(true);
+        setDeleteError(null);
+        let endpoint;
+        switch (deleteTarget.type) {
+            case 'carrier':
+                endpoint = `/api/admin/shipping/carriers/${deleteTarget.id}`;
+                break;
+            case 'zone':
+                endpoint = `/api/admin/shipping/zones/${deleteTarget.id}`;
+                break;
+            case 'rate':
+                endpoint = `/api/admin/shipping/rates/${deleteTarget.id}`;
+                break;
+        }
+        const res = await fetchAdminApi(endpoint, { method: 'DELETE' });
+        setIsDeleting(false);
+        if (!res.ok) {
+            setDeleteError(res.error);
+            return;
+        }
+        // Update local state or refresh data
+        if (deleteTarget.type === 'carrier') {
+            setCarriers((prev) => prev.filter((c) => c.id !== deleteTarget.id));
+        }
+        else {
+            // For zones and rates, refresh the full carrier list to reflect nested changes
+            await fetchData();
+        }
+        // Close dialog on success
+        setDeleteTarget(null);
+    }, [deleteTarget, fetchData]);
+    const handleDeleteCancel = useCallback(() => {
+        setDeleteTarget(null);
+        setDeleteError(null);
+    }, []);
+    // ---------------------------------------------------------------------------
+    // Loading State
+    // ---------------------------------------------------------------------------
+    if (isFetching) {
+        return (_jsxs("div", { className: `space-y-6 ${className || ''}`, children: [_jsxs("div", { className: "admin-card rounded-lg p-6", children: [_jsx("div", { className: "h-6 w-40 bg-[hsl(var(--admin-background-subtle))] rounded animate-pulse mb-4" }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "h-10 bg-[hsl(var(--admin-background-subtle))] rounded animate-pulse" }), _jsx("div", { className: "h-10 bg-[hsl(var(--admin-background-subtle))] rounded animate-pulse" }), _jsx("div", { className: "h-10 bg-[hsl(var(--admin-background-subtle))] rounded animate-pulse" })] })] }), _jsxs("div", { className: "admin-card rounded-lg p-6", children: [_jsx("div", { className: "h-6 w-32 bg-[hsl(var(--admin-background-subtle))] rounded animate-pulse mb-4" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-20 bg-[hsl(var(--admin-background-subtle))] rounded animate-pulse" }), _jsx("div", { className: "h-20 bg-[hsl(var(--admin-background-subtle))] rounded animate-pulse" })] })] })] }));
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    return (_jsxs("div", { className: `space-y-6 pb-20 ${className || ''}`, children: [_jsx(AdminToast, { toast: toast, onClose: () => setToast(null) }), _jsx("div", { className: "admin-card rounded-lg p-6", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-full bg-[hsl(var(--admin-primary))]/10 flex items-center justify-center", children: _jsx(Package, { className: "h-5 w-5 text-[hsl(var(--admin-primary))]" }) }), _jsxs("div", { children: [_jsx("h3", { className: "admin-card-title", children: "Enable Shipping" }), _jsx("p", { className: "admin-text-muted text-sm", children: "Turn off to hide shipping options at checkout" })] })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": shippingEnabled, onClick: handleToggleShippingEnabled, className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${shippingEnabled
+                                ? 'bg-[hsl(var(--admin-primary))]'
+                                : 'bg-[hsl(var(--admin-background-subtle))]'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${shippingEnabled ? 'translate-x-6' : 'translate-x-1'}` }) })] }) }), shippingEnabled && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "admin-card rounded-lg p-6", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx(Truck, { className: "h-5 w-5 text-[hsl(var(--admin-primary))]" }), _jsx("h3", { className: "admin-card-title", children: "Shipping Method" })] }), _jsx("p", { className: "admin-text-muted text-sm mb-4", children: "Choose how shipping rates are calculated at checkout." }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("button", { type: "button", onClick: () => setShippingMode('manual'), className: `p-4 rounded-lg border-2 text-left transition-colors ${shippingMode === 'manual'
+                                            ? 'border-[hsl(var(--admin-primary))] bg-[hsl(var(--admin-primary-light))]'
+                                            : 'border-[hsl(var(--admin-border))] hover:border-[hsl(var(--admin-primary))]'}`, children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Package, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium", children: "Manual Rates" })] }), _jsx("p", { className: "text-sm text-[hsl(var(--admin-foreground-muted))]", children: "Configure carriers, zones, and rates manually." })] }), _jsxs("button", { type: "button", onClick: () => setShippingMode('shippo'), className: `p-4 rounded-lg border-2 text-left transition-colors ${shippingMode === 'shippo'
+                                            ? 'border-[hsl(var(--admin-primary))] bg-[hsl(var(--admin-primary-light))]'
+                                            : 'border-[hsl(var(--admin-border))] hover:border-[hsl(var(--admin-primary))]'}`, children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Plug, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium", children: "Shippo (Carrier Rates)" })] }), _jsx("p", { className: "text-sm text-[hsl(var(--admin-foreground-muted))]", children: "Real-time rates from USPS, UPS, FedEx, and more." })] })] })] }), _jsxs("div", { className: "admin-card rounded-lg p-6", children: [_jsxs("div", { className: "flex items-center gap-2 mb-6", children: [_jsx(Globe, { className: "h-5 w-5 text-[hsl(var(--admin-primary))]" }), _jsx("h3", { className: "admin-card-title", children: "General Settings" })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "freeShippingThreshold", className: "admin-label", children: "Free Shipping Threshold" }), _jsx("p", { className: "admin-text-muted text-sm mb-2", children: "Orders above this amount qualify for free shipping (0 = disabled)" }), _jsxs("div", { className: "admin-input-with-addon w-full max-w-xs", children: [_jsx("span", { className: "admin-input-addon-left", children: currencySymbol }), _jsx("input", { type: "number", id: "freeShippingThreshold", value: freeShippingThreshold, onChange: (e) => setFreeShippingThreshold(e.target.value), min: "0", step: "0.01", className: "admin-input w-full pl-7", placeholder: "0.00" })] })] }), _jsxs("div", { children: [_jsxs("label", { className: "admin-label", children: [_jsx(MapPin, { className: "inline h-4 w-4 mr-1" }), "Shipping Countries"] }), _jsx("p", { className: "admin-text-muted text-sm mb-2", children: "Countries where you offer shipping" }), _jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: shippingCountries.map((code) => (_jsx(CountryTag, { code: code, onRemove: () => handleRemoveCountry(code) }, code))) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(AdminSelect, { value: countryInput, onChange: setCountryInput, placeholder: "Select a country...", options: COMMON_COUNTRIES.filter((c) => !shippingCountries.includes(c.code)).map((country) => ({
+                                                            value: country.code,
+                                                            label: `${country.name} (${country.code})`,
+                                                        })), className: "w-full max-w-xs" }), _jsx("button", { type: "button", onClick: handleAddCountry, disabled: !countryInput, className: "admin-btn admin-btn-secondary disabled:opacity-50", children: "Add" })] })] })] })] }), shippingMode === 'manual' && (_jsxs("div", { className: "admin-card rounded-lg p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "h-5 w-5 text-[hsl(var(--admin-primary))]" }), _jsx("h3", { className: "admin-card-title", children: "Shipping Carriers" })] }), _jsxs("button", { type: "button", onClick: () => {
+                                            setEditingCarrier(null);
+                                            setShowCarrierForm(true);
+                                        }, className: "admin-btn admin-btn-primary admin-btn-sm", children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), "Add Carrier"] })] }), _jsx("p", { className: "admin-text-muted text-sm mb-4", children: "Configure your shipping carriers, zones, and rates. Each carrier can have multiple zones, and each zone can have multiple rates." }), carriers.length === 0 ? (_jsxs("div", { className: "text-center py-8 text-[hsl(var(--admin-foreground-muted))]", children: [_jsx(Truck, { className: "h-12 w-12 mx-auto mb-3 opacity-50" }), _jsx("p", { className: "mb-2", children: "No shipping carriers configured" }), _jsx("p", { className: "text-sm", children: "Add your first carrier to start configuring shipping options" })] })) : (_jsx("div", { className: "space-y-4", children: carriers.map((carrier) => (_jsx(CarrierCard, { carrier: carrier, onEdit: () => {
+                                        setEditingCarrier(carrier);
+                                        setShowCarrierForm(true);
+                                    }, onDelete: () => handleDeleteCarrierClick(carrier), onAddZone: () => {
+                                        setEditingZone({ carrierId: carrier.id });
+                                        setShowZoneForm(true);
+                                    }, onEditZone: (zone) => {
+                                        setEditingZone({ carrierId: carrier.id, zone });
+                                        setShowZoneForm(true);
+                                    }, onDeleteZone: handleDeleteZoneClick, onAddRate: (zoneId) => {
+                                        setEditingRate({ zoneId });
+                                        setShowRateForm(true);
+                                    }, onEditRate: (zoneId, rate) => {
+                                        setEditingRate({ zoneId, rate });
+                                        setShowRateForm(true);
+                                    }, onDeleteRate: handleDeleteRateClick, formatCurrency: formatCurrency }, carrier.id))) }))] })), shippingMode === 'shippo' && (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "admin-card rounded-lg p-6", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx(Plug, { className: "h-5 w-5 text-[hsl(var(--admin-primary))]" }), _jsx("h3", { className: "admin-card-title", children: "Shippo Connection" })] }), _jsxs("div", { className: "p-4 rounded-lg border border-[hsl(var(--admin-border))] bg-[hsl(var(--admin-card))]", children: [shippoKeyValid === true && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-full bg-[hsl(var(--admin-success))]/20 flex items-center justify-center", children: _jsx(Check, { className: "h-5 w-5 text-[hsl(var(--admin-success))]" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-[hsl(var(--admin-foreground))]", children: "Connected" }), _jsx("p", { className: "text-sm text-[hsl(var(--admin-foreground-muted))]", children: hasStoredKey ? (_jsxs(_Fragment, { children: ["API key: ", _jsx("code", { className: "px-1 py-0.5 rounded bg-[hsl(var(--admin-background))] text-xs", children: maskedKey })] })) : ('Using environment variable') })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [hasStoredKey && (_jsx("button", { type: "button", onClick: handleRemoveApiKey, disabled: isDeletingApiKey, className: "admin-btn admin-btn-ghost admin-btn-sm text-[hsl(var(--admin-error))] hover:bg-[hsl(var(--admin-error))]/10", children: isDeletingApiKey ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : ('Remove Key') })), _jsx("button", { type: "button", onClick: handleValidateShippoKey, disabled: isValidatingShippo, className: "admin-btn admin-btn-secondary disabled:opacity-50", children: isValidatingShippo ? (_jsx(RefreshCw, { className: "h-4 w-4 animate-spin" })) : ('Re-verify') })] })] })), shippoKeyValid !== true && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-full bg-[hsl(var(--admin-warning))]/20 flex items-center justify-center", children: isValidatingShippo ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin text-[hsl(var(--admin-warning))]" })) : (_jsx(Key, { className: "h-5 w-5 text-[hsl(var(--admin-warning))]" })) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-[hsl(var(--admin-foreground))]", children: isValidatingShippo
+                                                                            ? 'Verifying...'
+                                                                            : hasStoredKey && shippoKeyValid === false
+                                                                                ? 'API Key Invalid'
+                                                                                : 'API Key Required' }), _jsx("p", { className: "text-sm text-[hsl(var(--admin-foreground-muted))]", children: isValidatingShippo
+                                                                            ? 'Checking your Shippo connection...'
+                                                                            : hasStoredKey && shippoKeyValid === false
+                                                                                ? `Current key (${maskedKey}) is invalid. Enter a new key.`
+                                                                                : 'Enter your Shippo API key to enable carrier rate shipping.' })] })] }), !isValidatingShippo && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "password", value: shippoApiKeyInput, onChange: (e) => setShippoApiKeyInput(e.target.value), placeholder: "shippo_live_...", className: "admin-input flex-1" }), _jsx("button", { type: "button", onClick: handleSaveShippoApiKey, disabled: isSavingApiKey || !shippoApiKeyInput.trim(), className: "admin-btn admin-btn-primary disabled:opacity-50", children: isSavingApiKey ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : ('Save & Verify') })] }), _jsxs("p", { className: "text-xs text-[hsl(var(--admin-foreground-muted))]", children: ["Get your API key from", ' ', _jsxs("a", { href: "https://apps.goshippo.com/settings/api", target: "_blank", rel: "noopener noreferrer", className: "text-[hsl(var(--admin-primary))] hover:underline inline-flex items-center gap-1", children: ["Shippo Dashboard", _jsx(ExternalLink, { className: "h-3 w-3" })] })] })] }))] }))] }), _jsxs("div", { className: "flex items-center justify-between mt-4 pt-4 border-t border-[hsl(var(--admin-border))]", children: [_jsxs("div", { children: [_jsx("label", { className: "admin-label", children: "Test Mode" }), _jsx("p", { className: "admin-text-muted text-sm", children: "Use Shippo test API for development (free API calls)" })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": shippoTestMode, onClick: () => setShippoTestMode(!shippoTestMode), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${shippoTestMode
+                                                    ? 'bg-[hsl(var(--admin-primary))]'
+                                                    : 'bg-[hsl(var(--admin-background-subtle))]'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${shippoTestMode ? 'translate-x-6' : 'translate-x-1'}` }) })] })] }), _jsxs("div", { className: "admin-card rounded-lg p-6", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx(MapPin, { className: "h-5 w-5 text-[hsl(var(--admin-primary))]" }), _jsx("h3", { className: "admin-card-title", children: "Ship-From Address" })] }), _jsx("p", { className: "admin-text-muted text-sm mb-4", children: "Your warehouse or fulfillment center address for shipping calculations." }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "shippo-name", className: "admin-label", children: "Name" }), _jsx("input", { type: "text", id: "shippo-name", value: shippoFromAddress.name, onChange: (e) => setShippoFromAddress((prev) => ({ ...prev, name: e.target.value })), className: "admin-input mt-1 w-full", placeholder: "John Smith" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "shippo-company", className: "admin-label", children: "Company (optional)" }), _jsx("input", { type: "text", id: "shippo-company", value: shippoFromAddress.company || '', onChange: (e) => setShippoFromAddress((prev) => ({ ...prev, company: e.target.value })), className: "admin-input mt-1 w-full", placeholder: "Acme Inc." })] }), _jsxs("div", { className: "md:col-span-2", children: [_jsx("label", { htmlFor: "shippo-street1", className: "admin-label", children: "Street Address" }), _jsx("input", { type: "text", id: "shippo-street1", value: shippoFromAddress.street1, onChange: (e) => setShippoFromAddress((prev) => ({ ...prev, street1: e.target.value })), className: "admin-input mt-1 w-full", placeholder: "123 Main St" })] }), _jsxs("div", { className: "md:col-span-2", children: [_jsx("label", { htmlFor: "shippo-street2", className: "admin-label", children: "Apt, Suite, etc. (optional)" }), _jsx("input", { type: "text", id: "shippo-street2", value: shippoFromAddress.street2 || '', onChange: (e) => setShippoFromAddress((prev) => ({ ...prev, street2: e.target.value })), className: "admin-input mt-1 w-full", placeholder: "Suite 100" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "shippo-city", className: "admin-label", children: "City" }), _jsx("input", { type: "text", id: "shippo-city", value: shippoFromAddress.city, onChange: (e) => setShippoFromAddress((prev) => ({ ...prev, city: e.target.value })), className: "admin-input mt-1 w-full", placeholder: "San Francisco" })] }), shippoFromAddress.country === 'US' && (_jsxs("div", { children: [_jsx("label", { htmlFor: "shippo-state", className: "admin-label", children: "State" }), _jsx(AdminSelect, { id: "shippo-state", value: shippoFromAddress.state, onChange: (value) => setShippoFromAddress((prev) => ({ ...prev, state: value })), placeholder: "Select state...", options: US_STATES.map((state) => ({
+                                                            value: state.code,
+                                                            label: state.name,
+                                                        })), className: "mt-1 w-full" })] })), _jsxs("div", { children: [_jsx("label", { htmlFor: "shippo-zip", className: "admin-label", children: "ZIP Code" }), _jsx("input", { type: "text", id: "shippo-zip", value: shippoFromAddress.zip, onChange: (e) => setShippoFromAddress((prev) => ({ ...prev, zip: e.target.value })), className: "admin-input mt-1 w-full", placeholder: "94102" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "shippo-country", className: "admin-label", children: "Country" }), _jsx(AdminSelect, { id: "shippo-country", value: shippoFromAddress.country, onChange: (value) => setShippoFromAddress((prev) => ({ ...prev, country: value })), options: COMMON_COUNTRIES.map((country) => ({
+                                                            value: country.code,
+                                                            label: country.name,
+                                                        })), className: "mt-1 w-full" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "shippo-phone", className: "admin-label", children: "Phone (optional)" }), _jsx("input", { type: "tel", id: "shippo-phone", value: shippoFromAddress.phone || '', onChange: (e) => setShippoFromAddress((prev) => ({ ...prev, phone: e.target.value })), className: "admin-input mt-1 w-full", placeholder: "+1 555 123 4567" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "shippo-email", className: "admin-label", children: "Email (optional)" }), _jsx("input", { type: "email", id: "shippo-email", value: shippoFromAddress.email || '', onChange: (e) => setShippoFromAddress((prev) => ({ ...prev, email: e.target.value })), className: "admin-input mt-1 w-full", placeholder: "shipping@example.com" })] })] })] }), _jsxs("div", { className: "admin-card rounded-lg p-6", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx(Box, { className: "h-5 w-5 text-[hsl(var(--admin-primary))]" }), _jsx("h3", { className: "admin-card-title", children: "Default Package Size" })] }), _jsx("p", { className: "admin-text-muted text-sm mb-4", children: "Default package dimensions for rate calculations. You can override these per order." }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "parcel-length", className: "admin-label", children: "Length (in)" }), _jsx("input", { type: "number", id: "parcel-length", value: shippoDefaultParcel.length, onChange: (e) => setShippoDefaultParcel((prev) => ({ ...prev, length: parseFloat(e.target.value) || 0 })), min: "0", step: "0.5", className: "admin-input mt-1 w-full" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "parcel-width", className: "admin-label", children: "Width (in)" }), _jsx("input", { type: "number", id: "parcel-width", value: shippoDefaultParcel.width, onChange: (e) => setShippoDefaultParcel((prev) => ({ ...prev, width: parseFloat(e.target.value) || 0 })), min: "0", step: "0.5", className: "admin-input mt-1 w-full" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "parcel-height", className: "admin-label", children: "Height (in)" }), _jsx("input", { type: "number", id: "parcel-height", value: shippoDefaultParcel.height, onChange: (e) => setShippoDefaultParcel((prev) => ({ ...prev, height: parseFloat(e.target.value) || 0 })), min: "0", step: "0.5", className: "admin-input mt-1 w-full" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "parcel-weight", className: "admin-label", children: "Weight (oz)" }), _jsx("input", { type: "number", id: "parcel-weight", value: shippoDefaultParcel.weight, onChange: (e) => setShippoDefaultParcel((prev) => ({ ...prev, weight: parseFloat(e.target.value) || 0 })), min: "0", step: "1", className: "admin-input mt-1 w-full" })] })] }), _jsx("p", { className: "admin-helper-text mt-2", children: "Typical small box: 10\u00D78\u00D74 in, 16 oz" })] })] }))] })), shippingEnabled && (_jsx("button", { type: "button", onClick: handleSaveSettings, disabled: isLoading, className: "fixed bottom-6 right-8 z-40 admin-btn admin-btn-primary shadow-lg disabled:opacity-50 flex items-center gap-2", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { children: "Saving..." })] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4" }), _jsx("span", { children: "Save" })] })) })), showCarrierForm && (_jsx(CarrierFormModal, { carrier: editingCarrier, onClose: () => {
+                    setShowCarrierForm(false);
+                    setEditingCarrier(null);
+                }, onSuccess: () => {
+                    setShowCarrierForm(false);
+                    setEditingCarrier(null);
+                    fetchData();
+                } })), showZoneForm && editingZone && (_jsx(ZoneFormModal, { carrierId: editingZone.carrierId, zone: editingZone.zone, onClose: () => {
+                    setShowZoneForm(false);
+                    setEditingZone(null);
+                }, onSuccess: () => {
+                    setShowZoneForm(false);
+                    setEditingZone(null);
+                    fetchData();
+                } })), showRateForm && editingRate && (_jsx(RateFormModal, { zoneId: editingRate.zoneId, rate: editingRate.rate, onClose: () => {
+                    setShowRateForm(false);
+                    setEditingRate(null);
+                }, onSuccess: () => {
+                    setShowRateForm(false);
+                    setEditingRate(null);
+                    fetchData();
+                }, currencySymbol: currencySymbol })), _jsx(DeleteConfirmDialog, { isOpen: !!deleteTarget, title: `Delete ${deleteTarget?.type === 'carrier' ? 'Carrier' : deleteTarget?.type === 'zone' ? 'Zone' : 'Rate'}`, itemName: deleteTarget?.name || '', itemType: deleteTarget?.type === 'carrier'
+                    ? 'carrier'
+                    : deleteTarget?.type === 'zone'
+                        ? 'zone'
+                        : 'rate', isDeleting: isDeleting, error: deleteError, onConfirm: handleDeleteConfirm, onCancel: handleDeleteCancel })] }));
+}
+// =============================================================================
+// Carrier Form Modal (NEW)
+// =============================================================================
+function CarrierFormModal({ carrier, onClose, onSuccess, }) {
+    const isEdit = !!carrier;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [name, setName] = useState(carrier?.name || '');
+    const [code, setCode] = useState(carrier?.code || '');
+    const [description, setDescription] = useState(carrier?.description || '');
+    const [isActive, setIsActive] = useState(carrier?.isActive ?? true);
+    // Auto-generate code from name
+    const handleNameChange = (value) => {
+        setName(value);
+        if (!isEdit && !code) {
+            // Auto-generate code from name (lowercase, replace spaces with hyphens)
+            const autoCode = value
+                .toLowerCase()
+                .replace(/[^a-z0-9\s-]/g, '')
+                .replace(/\s+/g, '-')
+                .substring(0, 50);
+            setCode(autoCode);
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        setIsLoading(true);
+        const url = isEdit
+            ? `/api/admin/shipping/carriers/${carrier.id}`
+            : '/api/admin/shipping/carriers';
+        const method = isEdit ? 'PUT' : 'POST';
+        const res = await fetchAdminApi(url, {
+            method,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                name,
+                code,
+                description: description || undefined,
+                isActive,
+            }),
+        });
+        setIsLoading(false);
+        if (!res.ok) {
+            setError(res.error);
+            return;
+        }
+        onSuccess();
+    };
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50", onClick: onClose }), _jsx("div", { className: "relative bg-[hsl(var(--admin-card))] rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "p-6", children: [_jsx("h3", { className: "admin-card-title mb-4", children: isEdit ? 'Edit Shipping Carrier' : 'Add Shipping Carrier' }), error && (_jsx("div", { className: "admin-alert admin-alert-error mb-4", children: _jsx("div", { className: "admin-alert-description", children: error }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "carrierName", className: "admin-label admin-label-required", children: "Carrier Name" }), _jsx("input", { type: "text", id: "carrierName", value: name, onChange: (e) => handleNameChange(e.target.value), className: "admin-input mt-1 w-full", placeholder: "e.g., USPS, UPS, FedEx", required: true })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "carrierCode", className: "admin-label admin-label-required", children: "Carrier Code" }), _jsx("input", { type: "text", id: "carrierCode", value: code, onChange: (e) => setCode(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')), className: "admin-input mt-1 w-full", placeholder: "e.g., usps, ups, fedex", required: true, maxLength: 50 }), _jsx("p", { className: "admin-helper-text mt-1", children: "Unique identifier (lowercase, letters, numbers, hyphens only)" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "carrierDescription", className: "admin-label", children: "Description" }), _jsx("input", { type: "text", id: "carrierDescription", value: description, onChange: (e) => setDescription(e.target.value), className: "admin-input mt-1 w-full", placeholder: "e.g., United States Postal Service", maxLength: 500 })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "admin-label", children: "Active" }), _jsx("button", { type: "button", role: "switch", "aria-checked": isActive, onClick: () => setIsActive(!isActive), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isActive
+                                                        ? 'bg-[hsl(var(--admin-primary))]'
+                                                        : 'bg-[hsl(var(--admin-background-subtle))]'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isActive ? 'translate-x-6' : 'translate-x-1'}` }) })] })] })] }), _jsxs("div", { className: "flex justify-end gap-3 p-6 border-t border-[hsl(var(--admin-border))]", children: [_jsx("button", { type: "button", onClick: onClose, className: "admin-btn admin-btn-secondary", children: "Cancel" }), _jsx("button", { type: "submit", disabled: isLoading || !name.trim() || !code.trim(), className: "admin-btn admin-btn-primary disabled:opacity-50", children: isLoading ? 'Saving...' : isEdit ? 'Update Carrier' : 'Create Carrier' })] })] }) })] }));
+}
+// =============================================================================
+// Zone Form Modal (UPDATED - requires carrierId)
+// =============================================================================
+function ZoneFormModal({ carrierId, zone, onClose, onSuccess, }) {
+    const isEdit = !!zone;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [name, setName] = useState(zone?.name || '');
+    const [countries, setCountries] = useState(zone?.countries || ['US']);
+    const [isActive, setIsActive] = useState(zone?.isActive ?? true);
+    const [countryInput, setCountryInput] = useState('');
+    const [isAllCountries, setIsAllCountries] = useState(zone?.countries?.includes('*') || false);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        setIsLoading(true);
+        const url = isEdit
+            ? `/api/admin/shipping/zones/${zone.id}`
+            : '/api/admin/shipping/zones';
+        const method = isEdit ? 'PUT' : 'POST';
+        const res = await fetchAdminApi(url, {
+            method,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                carrierId, // Required for carrier-first architecture
+                name,
+                countries: isAllCountries ? ['*'] : countries,
+                isActive,
+            }),
+        });
+        setIsLoading(false);
+        if (!res.ok) {
+            setError(res.error);
+            return;
+        }
+        onSuccess();
+    };
+    const handleAddCountry = () => {
+        const code = countryInput.toUpperCase().trim();
+        if (code && code.length === 2 && !countries.includes(code)) {
+            setCountries((prev) => [...prev, code]);
+            setCountryInput('');
+        }
+    };
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50", onClick: onClose }), _jsx("div", { className: "relative bg-[hsl(var(--admin-card))] rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "p-6", children: [_jsx("h3", { className: "admin-card-title mb-4", children: isEdit ? 'Edit Shipping Zone' : 'Add Shipping Zone' }), error && (_jsx("div", { className: "admin-alert admin-alert-error mb-4", children: _jsx("div", { className: "admin-alert-description", children: error }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "zoneName", className: "admin-label admin-label-required", children: "Zone Name" }), _jsx("input", { type: "text", id: "zoneName", value: name, onChange: (e) => setName(e.target.value), className: "admin-input mt-1 w-full", placeholder: "e.g., Domestic, International", required: true })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "admin-label", children: "All Countries" }), _jsx("p", { className: "admin-text-muted text-sm", children: "Apply to all countries not covered by other zones" })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": isAllCountries, onClick: () => setIsAllCountries(!isAllCountries), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isAllCountries
+                                                        ? 'bg-[hsl(var(--admin-primary))]'
+                                                        : 'bg-[hsl(var(--admin-background-subtle))]'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isAllCountries ? 'translate-x-6' : 'translate-x-1'}` }) })] }), !isAllCountries && (_jsxs("div", { children: [_jsx("label", { className: "admin-label", children: "Countries" }), _jsx("div", { className: "flex flex-wrap gap-2 mb-2 mt-1", children: countries.map((code) => (_jsx(CountryTag, { code: code, onRemove: () => setCountries((prev) => prev.filter((c) => c !== code)) }, code))) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(AdminSelect, { value: countryInput, onChange: setCountryInput, placeholder: "Select country...", options: COMMON_COUNTRIES.filter((c) => !countries.includes(c.code)).map((country) => ({
+                                                                value: country.code,
+                                                                label: country.name,
+                                                            })), className: "flex-1" }), _jsx("button", { type: "button", onClick: handleAddCountry, disabled: !countryInput, className: "admin-btn admin-btn-secondary disabled:opacity-50", children: "Add" })] })] })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "admin-label", children: "Active" }), _jsx("button", { type: "button", role: "switch", "aria-checked": isActive, onClick: () => setIsActive(!isActive), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isActive
+                                                        ? 'bg-[hsl(var(--admin-primary))]'
+                                                        : 'bg-[hsl(var(--admin-background-subtle))]'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isActive ? 'translate-x-6' : 'translate-x-1'}` }) })] })] })] }), _jsxs("div", { className: "flex justify-end gap-3 p-6 border-t border-[hsl(var(--admin-border))]", children: [_jsx("button", { type: "button", onClick: onClose, className: "admin-btn admin-btn-secondary", children: "Cancel" }), _jsx("button", { type: "submit", disabled: isLoading || !name.trim(), className: "admin-btn admin-btn-primary disabled:opacity-50", children: isLoading ? 'Saving...' : isEdit ? 'Update Zone' : 'Create Zone' })] })] }) })] }));
+}
+// =============================================================================
+// Rate Form Modal
+// =============================================================================
+function RateFormModal({ zoneId, rate, onClose, onSuccess, currencySymbol, }) {
+    const isEdit = !!rate;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [name, setName] = useState(rate?.name || '');
+    const [description, setDescription] = useState(rate?.description || '');
+    const [price, setPrice] = useState(String(rate?.price ?? ''));
+    const [estimatedDays, setEstimatedDays] = useState(rate?.estimatedDays || '');
+    const [minOrderAmount, setMinOrderAmount] = useState(rate?.minOrderAmount != null ? String(rate.minOrderAmount) : '');
+    const [maxOrderAmount, setMaxOrderAmount] = useState(rate?.maxOrderAmount != null ? String(rate.maxOrderAmount) : '');
+    const [isActive, setIsActive] = useState(rate?.isActive ?? true);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        setIsLoading(true);
+        const url = isEdit
+            ? `/api/admin/shipping/rates/${rate.id}`
+            : '/api/admin/shipping/rates';
+        const method = isEdit ? 'PUT' : 'POST';
+        const res = await fetchAdminApi(url, {
+            method,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                zoneId,
+                name,
+                description: description || undefined,
+                price: parseFloat(price) || 0,
+                estimatedDays: estimatedDays || undefined,
+                minOrderAmount: minOrderAmount ? parseFloat(minOrderAmount) : undefined,
+                maxOrderAmount: maxOrderAmount ? parseFloat(maxOrderAmount) : undefined,
+                isActive,
+            }),
+        });
+        setIsLoading(false);
+        if (!res.ok) {
+            setError(res.error);
+            return;
+        }
+        onSuccess();
+    };
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50", onClick: onClose }), _jsx("div", { className: "relative bg-[hsl(var(--admin-card))] rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "p-6", children: [_jsx("h3", { className: "admin-card-title mb-4", children: isEdit ? 'Edit Shipping Rate' : 'Add Shipping Rate' }), error && (_jsx("div", { className: "admin-alert admin-alert-error mb-4", children: _jsx("div", { className: "admin-alert-description", children: error }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "rateName", className: "admin-label admin-label-required", children: "Rate Name" }), _jsx("input", { type: "text", id: "rateName", value: name, onChange: (e) => setName(e.target.value), className: "admin-input mt-1 w-full", placeholder: "e.g., Standard Shipping", required: true })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "rateDescription", className: "admin-label", children: "Description" }), _jsx("input", { type: "text", id: "rateDescription", value: description, onChange: (e) => setDescription(e.target.value), className: "admin-input mt-1 w-full", placeholder: "e.g., Delivery in 5-7 business days" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "ratePrice", className: "admin-label admin-label-required", children: "Price" }), _jsxs("div", { className: "admin-input-with-addon mt-1", children: [_jsx("span", { className: "admin-input-addon-left", children: currencySymbol }), _jsx("input", { type: "number", id: "ratePrice", value: price, onChange: (e) => setPrice(e.target.value), min: "0", step: "0.01", className: "admin-input w-full pl-7", placeholder: "0.00", required: true })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "estimatedDays", className: "admin-label", children: "Estimated Delivery (days)" }), _jsx("input", { type: "text", id: "estimatedDays", value: estimatedDays, onChange: (e) => setEstimatedDays(e.target.value), className: "admin-input mt-1 w-full", placeholder: "e.g., 3-5" }), _jsx("p", { className: "admin-helper-text mt-1", children: "Format: single number (5) or range (3-5)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "minOrderAmount", className: "admin-label", children: "Min Order Amount" }), _jsxs("div", { className: "admin-input-with-addon mt-1", children: [_jsx("span", { className: "admin-input-addon-left", children: currencySymbol }), _jsx("input", { type: "number", id: "minOrderAmount", value: minOrderAmount, onChange: (e) => setMinOrderAmount(e.target.value), min: "0", step: "0.01", className: "admin-input w-full pl-7", placeholder: "0.00" })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "maxOrderAmount", className: "admin-label", children: "Max Order Amount" }), _jsxs("div", { className: "admin-input-with-addon mt-1", children: [_jsx("span", { className: "admin-input-addon-left", children: currencySymbol }), _jsx("input", { type: "number", id: "maxOrderAmount", value: maxOrderAmount, onChange: (e) => setMaxOrderAmount(e.target.value), min: "0", step: "0.01", className: "admin-input w-full pl-7", placeholder: "No limit" })] })] })] }), _jsx("p", { className: "admin-helper-text", children: "Leave empty for no restrictions" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "admin-label", children: "Active" }), _jsx("button", { type: "button", role: "switch", "aria-checked": isActive, onClick: () => setIsActive(!isActive), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isActive
+                                                        ? 'bg-[hsl(var(--admin-primary))]'
+                                                        : 'bg-[hsl(var(--admin-background-subtle))]'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isActive ? 'translate-x-6' : 'translate-x-1'}` }) })] })] })] }), _jsxs("div", { className: "flex justify-end gap-3 p-6 border-t border-[hsl(var(--admin-border))]", children: [_jsx("button", { type: "button", onClick: onClose, className: "admin-btn admin-btn-secondary", children: "Cancel" }), _jsx("button", { type: "submit", disabled: isLoading || !name.trim() || !price, className: "admin-btn admin-btn-primary disabled:opacity-50", children: isLoading ? 'Saving...' : isEdit ? 'Update Rate' : 'Create Rate' })] })] }) })] }));
+}
+//# sourceMappingURL=ShippingSettings.js.map