@burdenoff/microfe-movethewheels 2026.1028.1 → 2026.1031.1

package/src/movethewheels/components/marketplace/MarketplaceDialogs.tsx

@@ -0,0 +1,633 @@
+/**
+ * Marketplace dialogs (BOFF-3988): add/edit a service provider, add/edit an
+ * offering, and make a provider the carrier of a shipment. Every write goes
+ * through `useMarketplaceActions`; the service validates and scopes it.
+ */
+import { useEffect, useState } from 'react';
+import {
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from '@burdenoff/fe-libs/ui';
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Textarea,
+} from '../ui';
+import { EntityCombobox } from '../EntityCombobox';
+import { FormError } from '../FormError';
+import {
+  AVAILABILITIES,
+  OFFERING_CATEGORIES,
+  PROVIDER_TYPES,
+  humanizeEnum,
+  useMarketplaceActions,
+  useShipmentOptions,
+  type Availability,
+  type OfferingCategory,
+  type OfferingInput,
+  type ProviderInput,
+  type ProviderType,
+  type ServiceOffering,
+  type ServiceProvider,
+} from '../../hooks/useMarketplace';
+
+interface DialogBaseProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called after a successful write with a short human-readable summary. */
+  onDone: (message: string) => void;
+}
+
+function errorMessage(error: unknown, fallback: string): string {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+
+function splitList(raw: string): string[] {
+  return raw
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+}
+
+function optionalNumber(raw: string): number | null | 'invalid' {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  const value = Number(trimmed);
+  return Number.isFinite(value) ? value : 'invalid';
+}
+
+function emptyToNull(raw: string): string | null {
+  const trimmed = raw.trim();
+  return trimmed ? trimmed : null;
+}
+
+// ─── Provider ────────────────────────────────────────────────────────────────
+
+export function ProviderDialog({
+  open,
+  onOpenChange,
+  onDone,
+  provider,
+}: DialogBaseProps & { provider: ServiceProvider | null }) {
+  const actions = useMarketplaceActions();
+  const [name, setName] = useState('');
+  const [type, setType] = useState<ProviderType>('CARRIER');
+  const [description, setDescription] = useState('');
+  const [rating, setRating] = useState('');
+  const [contactName, setContactName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [website, setWebsite] = useState('');
+  const [services, setServices] = useState('');
+  const [serviceAreas, setServiceAreas] = useState('');
+  const [isVerified, setIsVerified] = useState(false);
+  const [isActive, setIsActive] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(provider?.name ?? '');
+    setType(provider?.type ?? 'CARRIER');
+    setDescription(provider?.description ?? '');
+    setRating(provider?.rating != null ? String(provider.rating) : '');
+    setContactName(provider?.contact.contactName ?? '');
+    setEmail(provider?.contact.email ?? '');
+    setPhone(provider?.contact.phone ?? '');
+    setWebsite(provider?.contact.website ?? '');
+    setServices(provider?.services.join(', ') ?? '');
+    setServiceAreas(provider?.serviceAreas.join(', ') ?? '');
+    setIsVerified(provider?.isVerified ?? false);
+    setIsActive(provider?.isActive ?? true);
+    setError(null);
+  }, [open, provider]);
+
+  const submit = async () => {
+    if (!name.trim()) {
+      setError('Enter the provider name.');
+      return;
+    }
+    const parsedRating = optionalNumber(rating);
+    if (
+      parsedRating === 'invalid' ||
+      (parsedRating !== null && (parsedRating < 0 || parsedRating > 5))
+    ) {
+      setError('Rating must be a number from 0 to 5.');
+      return;
+    }
+    const contact = {
+      ...(contactName.trim() ? { contactName: contactName.trim() } : {}),
+      ...(email.trim() ? { email: email.trim() } : {}),
+      ...(phone.trim() ? { phone: phone.trim() } : {}),
+      ...(website.trim() ? { website: website.trim() } : {}),
+    };
+    const input: ProviderInput = {
+      name: name.trim(),
+      type,
+      description: emptyToNull(description),
+      rating: parsedRating,
+      contactInfo: Object.keys(contact).length > 0 ? contact : null,
+      services: splitList(services),
+      serviceAreas: splitList(serviceAreas),
+      isVerified,
+      isActive,
+    };
+    setSaving(true);
+    setError(null);
+    try {
+      if (provider) {
+        await actions.updateProvider(provider.id, input);
+        onDone(`Updated ${input.name}.`);
+      } else {
+        await actions.createProvider(input);
+        onDone(`Added ${input.name} to the marketplace.`);
+      }
+      onOpenChange(false);
+    } catch (saveError) {
+      setError(errorMessage(saveError, 'Could not save the provider.'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
+      <ResponsiveDialogContent className="sm:max-w-xl">
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>
+            {provider ? 'Edit provider' : 'Add a service provider'}
+          </ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            Carriers, 3PLs, warehouses and specialists you can call on when you need capacity.
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+        <form
+          className="grid gap-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submit();
+          }}
+        >
+          <FormError message={error} />
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-name">Name</Label>
+              <Input
+                id="mtw-provider-name"
+                value={name}
+                maxLength={255}
+                onChange={(event) => setName(event.target.value)}
+                required
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-type">Type</Label>
+              <Select value={type} onValueChange={(value) => setType(value as ProviderType)}>
+                <SelectTrigger id="mtw-provider-type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PROVIDER_TYPES.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {humanizeEnum(option)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="grid gap-1.5">
+            <Label htmlFor="mtw-provider-description">Description</Label>
+            <Textarea
+              id="mtw-provider-description"
+              value={description}
+              maxLength={2000}
+              rows={3}
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-services">Services (comma separated)</Label>
+              <Input
+                id="mtw-provider-services"
+                value={services}
+                placeholder="Reefer, Hazmat, Same day"
+                onChange={(event) => setServices(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-areas">Service areas (comma separated)</Label>
+              <Input
+                id="mtw-provider-areas"
+                value={serviceAreas}
+                placeholder="Mumbai, Pune, NH48 corridor"
+                onChange={(event) => setServiceAreas(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-contact">Contact person</Label>
+              <Input
+                id="mtw-provider-contact"
+                value={contactName}
+                onChange={(event) => setContactName(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-email">Email</Label>
+              <Input
+                id="mtw-provider-email"
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-phone">Phone</Label>
+              <Input
+                id="mtw-provider-phone"
+                value={phone}
+                onChange={(event) => setPhone(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-website">Website</Label>
+              <Input
+                id="mtw-provider-website"
+                value={website}
+                onChange={(event) => setWebsite(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-provider-rating">Your rating (0–5)</Label>
+              <Input
+                id="mtw-provider-rating"
+                inputMode="decimal"
+                value={rating}
+                onChange={(event) => setRating(event.target.value)}
+              />
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-6">
+            <label className="flex items-center gap-2 text-sm" htmlFor="mtw-provider-verified">
+              <Switch
+                id="mtw-provider-verified"
+                checked={isVerified}
+                onCheckedChange={setIsVerified}
+              />
+              Verified by your team
+            </label>
+            <label className="flex items-center gap-2 text-sm" htmlFor="mtw-provider-active">
+              <Switch id="mtw-provider-active" checked={isActive} onCheckedChange={setIsActive} />
+              Active
+            </label>
+          </div>
+          <ResponsiveDialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={saving}>
+              {saving ? 'Saving…' : provider ? 'Save changes' : 'Add provider'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </form>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+}
+
+// ─── Offering ────────────────────────────────────────────────────────────────
+
+export function OfferingDialog({
+  open,
+  onOpenChange,
+  onDone,
+  provider,
+  offering,
+}: DialogBaseProps & { provider: ServiceProvider | null; offering: ServiceOffering | null }) {
+  const actions = useMarketplaceActions();
+  const [name, setName] = useState('');
+  const [category, setCategory] = useState<OfferingCategory>('FULL_TRUCKLOAD');
+  const [description, setDescription] = useState('');
+  const [price, setPrice] = useState('');
+  const [currency, setCurrency] = useState('USD');
+  const [pricingUnit, setPricingUnit] = useState('');
+  const [transitDays, setTransitDays] = useState('');
+  const [availability, setAvailability] = useState<Availability>('AVAILABLE');
+  const [isActive, setIsActive] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(offering?.name ?? '');
+    setCategory(offering?.category ?? 'FULL_TRUCKLOAD');
+    setDescription(offering?.description ?? '');
+    setPrice(offering?.price != null ? String(offering.price) : '');
+    setCurrency(offering?.currency ?? 'USD');
+    setPricingUnit(offering?.pricingUnit ?? '');
+    setTransitDays(offering?.transitDays != null ? String(offering.transitDays) : '');
+    setAvailability(offering?.availability ?? 'AVAILABLE');
+    setIsActive(offering?.isActive ?? true);
+    setError(null);
+  }, [open, offering]);
+
+  const submit = async () => {
+    if (!provider) return;
+    if (!name.trim()) {
+      setError('Enter the offering name.');
+      return;
+    }
+    const parsedPrice = optionalNumber(price);
+    if (parsedPrice === 'invalid' || (parsedPrice !== null && parsedPrice < 0)) {
+      setError('Price must be zero or a positive number, or left blank for "on request".');
+      return;
+    }
+    const parsedTransit = optionalNumber(transitDays);
+    if (
+      parsedTransit === 'invalid' ||
+      (parsedTransit !== null && (!Number.isInteger(parsedTransit) || parsedTransit < 0))
+    ) {
+      setError('Transit days must be a whole number.');
+      return;
+    }
+    if (!/^[A-Za-z]{3}$/.test(currency.trim())) {
+      setError('Currency must be a three-letter code such as USD or INR.');
+      return;
+    }
+    const input: OfferingInput = {
+      name: name.trim(),
+      category,
+      description: emptyToNull(description),
+      price: parsedPrice,
+      currency: currency.trim().toUpperCase(),
+      pricingUnit: emptyToNull(pricingUnit),
+      transitDays: parsedTransit,
+      availability,
+      isActive,
+    };
+    setSaving(true);
+    setError(null);
+    try {
+      if (offering) {
+        await actions.updateOffering(offering.id, input);
+        onDone(`Updated ${input.name}.`);
+      } else {
+        await actions.createOffering(provider.id, input);
+        onDone(`Added ${input.name} to ${provider.name}.`);
+      }
+      onOpenChange(false);
+    } catch (saveError) {
+      setError(errorMessage(saveError, 'Could not save the offering.'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
+      <ResponsiveDialogContent className="sm:max-w-lg">
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>
+            {offering ? 'Edit offering' : 'Add an offering'}
+          </ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            {provider ? `A service ${provider.name} offers, with an indicative price.` : null}
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+        <form
+          className="grid gap-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submit();
+          }}
+        >
+          <FormError message={error} />
+          <div className="grid gap-1.5">
+            <Label htmlFor="mtw-offering-name">Name</Label>
+            <Input
+              id="mtw-offering-name"
+              value={name}
+              maxLength={255}
+              onChange={(event) => setName(event.target.value)}
+              required
+            />
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-offering-category">Category</Label>
+              <Select
+                value={category}
+                onValueChange={(value) => setCategory(value as OfferingCategory)}
+              >
+                <SelectTrigger id="mtw-offering-category">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {OFFERING_CATEGORIES.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {humanizeEnum(option)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-offering-availability">Availability</Label>
+              <Select
+                value={availability}
+                onValueChange={(value) => setAvailability(value as Availability)}
+              >
+                <SelectTrigger id="mtw-offering-availability">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {AVAILABILITIES.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {humanizeEnum(option)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-offering-price">Price (blank = on request)</Label>
+              <Input
+                id="mtw-offering-price"
+                inputMode="decimal"
+                value={price}
+                onChange={(event) => setPrice(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-offering-currency">Currency</Label>
+              <Input
+                id="mtw-offering-currency"
+                value={currency}
+                maxLength={3}
+                onChange={(event) => setCurrency(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-offering-unit">Priced per</Label>
+              <Input
+                id="mtw-offering-unit"
+                value={pricingUnit}
+                placeholder="load, km, pallet…"
+                maxLength={40}
+                onChange={(event) => setPricingUnit(event.target.value)}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="mtw-offering-transit">Transit days</Label>
+              <Input
+                id="mtw-offering-transit"
+                inputMode="numeric"
+                value={transitDays}
+                onChange={(event) => setTransitDays(event.target.value)}
+              />
+            </div>
+          </div>
+          <div className="grid gap-1.5">
+            <Label htmlFor="mtw-offering-description">Description</Label>
+            <Textarea
+              id="mtw-offering-description"
+              value={description}
+              maxLength={2000}
+              rows={2}
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </div>
+          <label className="flex items-center gap-2 text-sm" htmlFor="mtw-offering-active">
+            <Switch id="mtw-offering-active" checked={isActive} onCheckedChange={setIsActive} />
+            Active
+          </label>
+          <ResponsiveDialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={saving}>
+              {saving ? 'Saving…' : offering ? 'Save changes' : 'Add offering'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </form>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+}
+
+// ─── Assign to shipment ──────────────────────────────────────────────────────
+
+export function AssignShipmentDialog({
+  open,
+  onOpenChange,
+  onDone,
+  provider,
+}: DialogBaseProps & { provider: ServiceProvider | null }) {
+  const actions = useMarketplaceActions();
+  const [search, setSearch] = useState('');
+  const [shipmentId, setShipmentId] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { shipments, total, isLoading } = useShipmentOptions({ search, limit: 20 });
+
+  useEffect(() => {
+    if (!open) return;
+    setSearch('');
+    setShipmentId('');
+    setError(null);
+  }, [open]);
+
+  const selected = shipments.find((shipment) => shipment.id === shipmentId) ?? null;
+
+  const submit = async () => {
+    if (!provider) return;
+    if (!shipmentId) {
+      setError('Choose the shipment this provider will carry.');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const result = await actions.assignShipment(shipmentId, provider.id);
+      onDone(`${provider.name} is now the carrier for shipment ${result.shipmentNumber}.`);
+      onOpenChange(false);
+    } catch (saveError) {
+      setError(errorMessage(saveError, 'Could not assign the provider.'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
+      <ResponsiveDialogContent className="sm:max-w-md">
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Assign to a shipment</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            {provider
+              ? `Make ${provider.name} the carrier of a shipment.${
+                  provider.isVerified && provider.isActive
+                    ? ''
+                    : ' This provider is not verified or not active — check before you commit freight.'
+                }`
+              : null}
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+        <form
+          className="grid gap-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submit();
+          }}
+        >
+          <FormError message={error} />
+          <div className="grid gap-1.5">
+            <Label htmlFor="mtw-assign-shipment">Shipment</Label>
+            <EntityCombobox
+              id="mtw-assign-shipment"
+              value={shipmentId}
+              onChange={setShipmentId}
+              options={shipments}
+              loading={isLoading}
+              required
+              getId={(shipment) => shipment.id}
+              getLabel={(shipment) => shipment.shipmentNumber}
+              renderOption={(shipment) => (
+                <>
+                  {shipment.shipmentNumber}{' '}
+                  <span className="text-text-tertiary">({humanizeEnum(shipment.status)})</span>
+                </>
+              )}
+              selectedOption={selected}
+              placeholder="Search shipments"
+              searchPlaceholder="Search by shipment number…"
+              emptyText="No shipments found."
+              onSearchChange={setSearch}
+              totalCount={total}
+            />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={saving}>
+              {saving ? 'Assigning…' : 'Assign carrier'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </form>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+}