@burdenoff/microfe-movethewheels 2026.918.1 → 2026.920.2

package/src/movethewheels/pages/ShippingRatesPage.tsx

@@ -0,0 +1,301 @@
+/**
+ * Shipping Rates Page
+ *
+ * Compare live courier rates between two pincodes across the platform's
+ * carriers (Shiprocket first). Nothing to set up: the carrier accounts belong
+ * to the platform. Read-only — comparing never books a shipment or spends
+ * carrier credit.
+ */
+
+import { useState, type FormEvent } from 'react';
+import { Scale } from 'lucide-react';
+
+import { FormError } from '../components/FormError';
+import { PageLayout } from '../components/PageLayout';
+import { ShippingQuoteResults } from '../components/ShippingQuoteResults';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Switch,
+} from '../components/ui';
+import { useTr } from '../hooks';
+import {
+  useShippingQuotes,
+  type ShippingQuoteInput,
+  type ShippingQuoteResult,
+} from '../hooks/useShippingCarriers';
+
+const POSTCODE = /^[1-9]\d{5}$/;
+
+const optionalNumber = (value: string): number | undefined => {
+  const parsed = Number(value);
+  return value.trim() !== '' && Number.isFinite(parsed) ? parsed : undefined;
+};
+
+export default function ShippingRatesPage() {
+  const tr = useTr();
+  const fetchQuotes = useShippingQuotes();
+
+  const [pickup, setPickup] = useState('');
+  const [delivery, setDelivery] = useState('');
+  const [weight, setWeight] = useState('');
+  const [length, setLength] = useState('');
+  const [width, setWidth] = useState('');
+  const [height, setHeight] = useState('');
+  const [cod, setCod] = useState(false);
+  const [distance, setDistance] = useState('');
+  const [costPerKm, setCostPerKm] = useState('');
+  const [fixedCost, setFixedCost] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<ShippingQuoteResult | null>(null);
+
+  const handleCompare = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    const weightKg = optionalNumber(weight);
+    if (!POSTCODE.test(pickup) || !POSTCODE.test(delivery)) {
+      setError(
+        tr(
+          'movethewheels.shipping.form.postcodeError',
+          'Enter valid 6-digit pickup and delivery postcodes'
+        )
+      );
+      return;
+    }
+    if (weightKg === undefined || weightKg <= 0) {
+      setError(tr('movethewheels.shipping.form.weightError', 'Enter the package weight in kg'));
+      return;
+    }
+    const dims = [optionalNumber(length), optionalNumber(width), optionalNumber(height)];
+    const given = dims.filter((d) => d !== undefined).length;
+    if (given !== 0 && given !== 3) {
+      setError(
+        tr(
+          'movethewheels.shipping.form.dimensionsError',
+          'Enter length, width and height together, or leave all three empty'
+        )
+      );
+      return;
+    }
+
+    const fleetDistance = optionalNumber(distance);
+    const fleetCostPerKm = optionalNumber(costPerKm);
+    const fleetFixed = optionalNumber(fixedCost);
+    const fleetGiven = fleetDistance !== undefined || fleetCostPerKm !== undefined;
+    if (
+      fleetGiven &&
+      (!fleetDistance || fleetDistance <= 0 || !fleetCostPerKm || fleetCostPerKm <= 0)
+    ) {
+      setError(
+        tr(
+          'movethewheels.shipping.form.ownFleetError',
+          'To compare with your own vehicle, enter both the distance and your cost per km'
+        )
+      );
+      return;
+    }
+    if (fleetFixed !== undefined && fleetFixed < 0) {
+      setError(tr('movethewheels.shipping.form.fixedCostError', 'Fixed cost cannot be negative'));
+      return;
+    }
+
+    const input: ShippingQuoteInput = {
+      pickupPostcode: pickup,
+      deliveryPostcode: delivery,
+      weightKg,
+      cod,
+      ...(fleetGiven && fleetDistance && fleetCostPerKm
+        ? {
+            ownFleet: {
+              distanceKm: fleetDistance,
+              costPerKm: fleetCostPerKm,
+              ...(fleetFixed ? { fixedCost: fleetFixed } : {}),
+            },
+          }
+        : {}),
+      ...(given === 3 ? { lengthCm: dims[0], widthCm: dims[1], heightCm: dims[2] } : {}),
+    };
+
+    setIsLoading(true);
+    try {
+      setResult(await fetchQuotes(input));
+    } catch (e: unknown) {
+      setResult(null);
+      setError(
+        e instanceof Error
+          ? e.message
+          : tr('movethewheels.shipping.form.failed', 'Could not fetch rates')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title={tr('movethewheels.shipping.title', 'Compare Rates')}
+      subtitle={tr(
+        'movethewheels.shipping.subtitle',
+        'Enter a pickup and a delivery pincode to see every courier available for that route, with price and delivery time.'
+      )}
+      icon={<Scale size={24} />}
+    >
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>{tr('movethewheels.shipping.form.title', 'Shipment details')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={(event) => void handleCompare(event)} className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-3">
+                <div className="space-y-1">
+                  <Label htmlFor="rate-pickup">
+                    {tr('movethewheels.shipping.form.pickup', 'Pickup postcode')}
+                  </Label>
+                  <Input
+                    id="rate-pickup"
+                    inputMode="numeric"
+                    maxLength={6}
+                    value={pickup}
+                    onChange={(e) => setPickup(e.target.value.trim())}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-delivery">
+                    {tr('movethewheels.shipping.form.delivery', 'Delivery postcode')}
+                  </Label>
+                  <Input
+                    id="rate-delivery"
+                    inputMode="numeric"
+                    maxLength={6}
+                    value={delivery}
+                    onChange={(e) => setDelivery(e.target.value.trim())}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-weight">
+                    {tr('movethewheels.shipping.form.weight', 'Weight (kg)')}
+                  </Label>
+                  <Input
+                    id="rate-weight"
+                    inputMode="decimal"
+                    value={weight}
+                    onChange={(e) => setWeight(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3">
+                <div className="space-y-1">
+                  <Label htmlFor="rate-length">
+                    {tr('movethewheels.shipping.form.length', 'Length (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-length"
+                    inputMode="decimal"
+                    value={length}
+                    onChange={(e) => setLength(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-width">
+                    {tr('movethewheels.shipping.form.width', 'Width (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-width"
+                    inputMode="decimal"
+                    value={width}
+                    onChange={(e) => setWidth(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-height">
+                    {tr('movethewheels.shipping.form.height', 'Height (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-height"
+                    inputMode="decimal"
+                    value={height}
+                    onChange={(e) => setHeight(e.target.value)}
+                  />
+                </div>
+              </div>
+              <fieldset className="space-y-3 rounded-lg border p-4">
+                <legend className="px-1 text-sm font-medium">
+                  {tr(
+                    'movethewheels.shipping.form.ownFleetTitle',
+                    'Compare with your own vehicle (optional)'
+                  )}
+                </legend>
+                <p className="text-sm text-text-secondary">
+                  {tr(
+                    'movethewheels.shipping.form.ownFleetHelp',
+                    'Enter the road distance and what it costs you to run a vehicle per km, and we will show it next to the courier prices.'
+                  )}
+                </p>
+                <div className="grid gap-3 sm:grid-cols-3">
+                  <div className="space-y-1">
+                    <Label htmlFor="rate-distance">
+                      {tr('movethewheels.shipping.form.distance', 'Distance (km)')}
+                    </Label>
+                    <Input
+                      id="rate-distance"
+                      inputMode="decimal"
+                      value={distance}
+                      onChange={(e) => setDistance(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label htmlFor="rate-cost-per-km">
+                      {tr('movethewheels.shipping.form.costPerKm', 'Your cost per km (₹)')}
+                    </Label>
+                    <Input
+                      id="rate-cost-per-km"
+                      inputMode="decimal"
+                      value={costPerKm}
+                      onChange={(e) => setCostPerKm(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label htmlFor="rate-fixed-cost">
+                      {tr(
+                        'movethewheels.shipping.form.fixedCost',
+                        'Fixed cost per trip (₹, optional)'
+                      )}
+                    </Label>
+                    <Input
+                      id="rate-fixed-cost"
+                      inputMode="decimal"
+                      value={fixedCost}
+                      onChange={(e) => setFixedCost(e.target.value)}
+                    />
+                  </div>
+                </div>
+              </fieldset>
+              <div className="flex items-center gap-2">
+                <Switch id="rate-cod" checked={cod} onCheckedChange={setCod} />
+                <Label htmlFor="rate-cod">
+                  {tr('movethewheels.shipping.form.cod', 'Cash on delivery')}
+                </Label>
+              </div>
+              <FormError message={error} />
+              <Button type="submit" disabled={isLoading}>
+                {isLoading
+                  ? tr('movethewheels.shipping.form.comparing', 'Comparing…')
+                  : tr('movethewheels.shipping.form.compare', 'Compare rates')}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+
+        {result && <ShippingQuoteResults result={result} t={tr} />}
+      </div>
+    </PageLayout>
+  );
+}