@base44/app-plugin-commerce 0.1.0

package/src/commerce/admin/pages/settings/ProductsSettings.jsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { WEIGHT_UNITS, DIMENSION_UNITS } from "../../lib/constants";
+import useGroupForm from "./useGroupForm";
+
+const DEFAULTS = {
+  weight_unit: "kg",
+  dimension_unit: "cm",
+  enable_reviews: true,
+  review_rating_required: true,
+  only_verified_reviews: false,
+  auto_approve_reviews: false,
+};
+
+function SwitchRow({ label, hint, checked, onChange }) {
+  return (
+    <div className="flex items-start justify-between gap-4">
+      <div>
+        <Label>{label}</Label>
+        {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+      </div>
+      <Switch checked={!!checked} onCheckedChange={onChange} />
+    </div>
+  );
+}
+
+export default function ProductsSettings() {
+  const { form, setField, SaveButton } = useGroupForm("products", DEFAULTS);
+
+  return (
+    <div className="max-w-3xl space-y-4">
+      <Card>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+            <CardTitle>Measurements</CardTitle>
+            <CardDescription>Units used for product weight and dimensions.</CardDescription>
+          </div>
+          <SaveButton />
+        </CardHeader>
+        <CardContent className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label>Weight unit</Label>
+            <Select value={form.weight_unit} onValueChange={(v) => setField("weight_unit", v)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {WEIGHT_UNITS.map((u) => (
+                  <SelectItem key={u} value={u}>
+                    {u}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Dimensions unit</Label>
+            <Select value={form.dimension_unit} onValueChange={(v) => setField("dimension_unit", v)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {DIMENSION_UNITS.map((u) => (
+                  <SelectItem key={u} value={u}>
+                    {u}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+            <CardTitle>Reviews</CardTitle>
+          </div>
+          <SaveButton />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <SwitchRow
+            label="Enable product reviews"
+            checked={form.enable_reviews}
+            onChange={(v) => setField("enable_reviews", v)}
+          />
+          <SwitchRow
+            label="Star rating required"
+            hint="Reviews submitted without a rating are rejected."
+            checked={form.review_rating_required}
+            onChange={(v) => setField("review_rating_required", v)}
+          />
+          <SwitchRow
+            label="Reviews can only be left by verified owners"
+            hint="Requires a completed order containing the product for the reviewer's email."
+            checked={form.only_verified_reviews}
+            onChange={(v) => setField("only_verified_reviews", v)}
+          />
+          <SwitchRow
+            label="Auto-approve reviews"
+            hint="When off, new reviews are held for moderation."
+            checked={form.auto_approve_reviews}
+            onChange={(v) => setField("auto_approve_reviews", v)}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/commerce/admin/pages/settings/SettingsLayout.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { useSettings } from "../../context/SettingsContext";
+import { useAdminHref } from "../../context/BasePathContext";
+import PageHeader from "../../components/PageHeader";
+
+const TABS = [
+  { seg: "general", label: "General" },
+  { seg: "products", label: "Products" },
+  { seg: "inventory", label: "Inventory" },
+  { seg: "tax", label: "Tax" },
+  { seg: "shipping", label: "Shipping" },
+  { seg: "payments", label: "Payments" },
+  { seg: "emails", label: "Emails" },
+];
+
+/** Layout route for /settings/*: horizontal group tabs + nested page via <Outlet/>. */
+export default function SettingsLayout() {
+  const { get } = useSettings();
+  const href = useAdminHref();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // Current group segment: ".../settings/<seg>[/...]" (zone editor keeps "shipping" active).
+  const afterSettings = location.pathname.split("/settings/")[1] || "general";
+  const current = afterSettings.split("/")[0] || "general";
+
+  const enableTaxes = get("general", "enable_taxes", true);
+  const tabs = TABS.filter((t) => t.seg !== "tax" || enableTaxes);
+
+  return (
+    <div className="space-y-4">
+      <PageHeader title="Settings" description="Configure how your store works." />
+      <div className="flex flex-wrap gap-1 border-b">
+        {tabs.map((t) => (
+          <button
+            key={t.seg}
+            type="button"
+            onClick={() => navigate(href(`settings/${t.seg}`))}
+            className={`-mb-px border-b-2 px-3 py-2 text-sm font-medium transition-colors ${
+              current === t.seg
+                ? "border-primary text-foreground"
+                : "border-transparent text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+      <Outlet />
+    </div>
+  );
+}

package/src/commerce/admin/pages/settings/ShippingSettings.jsx

@@ -0,0 +1,304 @@
+import React, { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Loader2, Plus, Truck } from "lucide-react";
+import { toast } from "sonner";
+import DataTable from "../../components/DataTable";
+import ConfirmDialog from "../../components/ConfirmDialog";
+import { base44 } from "../../lib/api";
+import useAsync from "../../hooks/useAsync";
+import { useAdminHref } from "../../context/BasePathContext";
+import { slugify } from "../../lib/product-utils";
+import { countryName } from "../../lib/geo-data";
+import { CONTINENTS } from "../../lib/geo-data";
+
+/** Human summary of a zone's embedded locations array. */
+function regionsSummary(locations) {
+  const locs = locations || [];
+  if (locs.length === 0) return "Everywhere not covered by other zones";
+  const names = [];
+  let postcodes = 0;
+  for (const l of locs) {
+    if (l.type === "postcode") postcodes += 1;
+    else if (l.type === "continent")
+      names.push(CONTINENTS.find((c) => c.code === l.code)?.name || l.code);
+    else if (l.type === "country") names.push(countryName(l.code));
+    else if (l.type === "state") names.push(l.code);
+  }
+  const parts = [];
+  if (names.length) parts.push(names.slice(0, 4).join(", ") + (names.length > 4 ? `, +${names.length - 4}` : ""));
+  if (postcodes) parts.push(`${postcodes} postcode${postcodes > 1 ? "s" : ""}`);
+  return parts.join(" · ") || "—";
+}
+
+function ZonesTab() {
+  const navigate = useNavigate();
+  const href = useAdminHref();
+  const zones = useAsync(() => base44.entities["commerce.ShippingZone"].list("order", 200), []);
+  const methods = useAsync(() => base44.entities["commerce.ShippingZoneMethod"].list(undefined, 500), []);
+  const [creating, setCreating] = useState(false);
+  const [toDelete, setToDelete] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+
+  const methodsByZone = useMemo(() => {
+    const map = {};
+    (methods.data || []).forEach((m) => {
+      (map[m.zone_id] = map[m.zone_id] || []).push(m);
+    });
+    return map;
+  }, [methods.data]);
+
+  // Sort by order, but push empty-location (rest-of-world) zones to the end.
+  const rows = useMemo(() => {
+    return [...(zones.data || [])].sort((a, b) => {
+      const ae = (a.locations || []).length === 0;
+      const be = (b.locations || []).length === 0;
+      if (ae !== be) return ae ? 1 : -1;
+      return (a.order ?? 0) - (b.order ?? 0);
+    });
+  }, [zones.data]);
+
+  const addZone = async () => {
+    setCreating(true);
+    try {
+      const maxOrder = (zones.data || [])
+        .filter((z) => (z.locations || []).length > 0)
+        .reduce((m, z) => Math.max(m, z.order ?? 0), 0);
+      const zone = await base44.entities["commerce.ShippingZone"].create({
+        name: "New zone",
+        order: maxOrder + 1,
+        locations: [],
+      });
+      navigate(href(`settings/shipping/zones/${zone.id}`));
+    } catch (err) {
+      toast.error(err.message || "Failed to create zone");
+      setCreating(false);
+    }
+  };
+
+  const removeZone = async () => {
+    setDeleting(true);
+    try {
+      // Methods first: a ShippingZoneMethod outlives its zone otherwise, and
+      // nothing else reaps them.
+      for (const m of methodsByZone[toDelete.id] || []) {
+        await base44.entities["commerce.ShippingZoneMethod"].delete(m.id);
+      }
+      await base44.entities["commerce.ShippingZone"].delete(toDelete.id);
+      toast.success("Shipping zone deleted");
+      setToDelete(null);
+      zones.refetch();
+      methods.refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to delete zone");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const columns = [
+    {
+      key: "name",
+      label: "Zone name",
+      render: (z) => <span className="font-medium">{z.name}</span>,
+    },
+    { key: "regions", label: "Region(s)", render: (z) => regionsSummary(z.locations) },
+    {
+      key: "methods",
+      label: "Shipping method(s)",
+      render: (z) => {
+        const ms = methodsByZone[z.id] || [];
+        if (!ms.length) return <span className="text-muted-foreground">No methods</span>;
+        return (
+          <div className="flex flex-wrap gap-1">
+            {ms.map((m) => (
+              <Badge key={m.id} variant={m.enabled ? "secondary" : "outline"} className="font-normal">
+                {m.title || m.method_id}
+              </Badge>
+            ))}
+          </div>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-end">
+        <Button onClick={addZone} disabled={creating}>
+          {creating ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Plus className="mr-2 h-4 w-4" />}
+          Add shipping zone
+        </Button>
+      </div>
+      <DataTable
+        columns={columns}
+        rows={rows}
+        loading={zones.loading || methods.loading}
+        onRowClick={(z) => navigate(href(`settings/shipping/zones/${z.id}`))}
+        rowActions={(z) => [
+          { label: "Edit", onClick: () => navigate(href(`settings/shipping/zones/${z.id}`)) },
+          { label: "Delete", destructive: true, onClick: () => setToDelete(z) },
+        ]}
+        empty={{ icon: Truck, title: "No shipping zones", description: "Create a zone to offer shipping methods to your customers." }}
+      />
+
+      <ConfirmDialog
+        open={!!toDelete}
+        onOpenChange={(o) => !o && setToDelete(null)}
+        title={`Delete ${toDelete?.name || "shipping zone"}?`}
+        description={
+          (toDelete?.locations || []).length === 0
+            ? "This is the catch-all zone. Customers outside your other zones will have no shipping methods until you add another catch-all."
+            : "The zone and its shipping methods are deleted. Existing orders keep the shipping they were charged."
+        }
+        confirmLabel="Delete"
+        loading={deleting}
+        onConfirm={removeZone}
+      />
+    </div>
+  );
+}
+
+function ClassesTab() {
+  const classes = useAsync(() => base44.entities["commerce.ShippingClass"].list("name", 200), []);
+  const blank = { id: null, name: "", slug: "", description: "" };
+  const [form, setForm] = useState(blank);
+  const [slugTouched, setSlugTouched] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [toDelete, setToDelete] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+
+  const setName = (name) =>
+    setForm((f) => ({ ...f, name, slug: slugTouched ? f.slug : slugify(name) }));
+
+  const reset = () => {
+    setForm(blank);
+    setSlugTouched(false);
+  };
+
+  const save = async () => {
+    if (!form.name.trim()) {
+      toast.error("Name is required");
+      return;
+    }
+    setSaving(true);
+    try {
+      const payload = { name: form.name, slug: form.slug || slugify(form.name), description: form.description };
+      if (form.id) await base44.entities["commerce.ShippingClass"].update(form.id, payload);
+      else await base44.entities["commerce.ShippingClass"].create(payload);
+      toast.success("Shipping class saved");
+      reset();
+      classes.refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async () => {
+    setDeleting(true);
+    try {
+      await base44.entities["commerce.ShippingClass"].delete(toDelete.id);
+      toast.success("Shipping class deleted");
+      if (form.id === toDelete.id) reset();
+      setToDelete(null);
+      classes.refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to delete");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const columns = [
+    { key: "name", label: "Name", render: (c) => <span className="font-medium">{c.name}</span> },
+    { key: "slug", label: "Slug", render: (c) => <code className="text-xs">{c.slug}</code> },
+    { key: "description", label: "Description", render: (c) => c.description || "—" },
+  ];
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[320px_1fr]">
+      <Card className="h-fit">
+        <CardHeader>
+          <CardTitle>{form.id ? "Edit shipping class" : "Add shipping class"}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="space-y-1.5">
+            <Label>Name</Label>
+            <Input value={form.name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Slug</Label>
+            <Input
+              value={form.slug}
+              onChange={(e) => {
+                setSlugTouched(true);
+                setForm((f) => ({ ...f, slug: e.target.value }));
+              }}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Description</Label>
+            <Textarea rows={3} value={form.description} onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))} />
+          </div>
+          <div className="flex gap-2">
+            <Button onClick={save} disabled={saving}>
+              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {form.id ? "Update" : "Add"}
+            </Button>
+            {form.id && (
+              <Button variant="ghost" onClick={reset}>
+                Cancel
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <DataTable
+        columns={columns}
+        rows={classes.data || []}
+        loading={classes.loading}
+        rowActions={(c) => [
+          { label: "Edit", onClick: () => setForm({ id: c.id, name: c.name, slug: c.slug || "", description: c.description || "" }) },
+          { label: "Delete", destructive: true, onClick: () => setToDelete(c) },
+        ]}
+        empty={{ title: "No shipping classes", description: "Shipping classes group products with similar shipping costs." }}
+      />
+
+      <ConfirmDialog
+        open={!!toDelete}
+        onOpenChange={(o) => !o && setToDelete(null)}
+        title="Delete shipping class?"
+        description="Products in this class will not be deleted, but will lose their class assignment."
+        confirmLabel="Delete"
+        loading={deleting}
+        onConfirm={remove}
+      />
+    </div>
+  );
+}
+
+export default function ShippingSettings() {
+  return (
+    <Tabs defaultValue="zones" className="space-y-4">
+      <TabsList>
+        <TabsTrigger value="zones">Shipping zones</TabsTrigger>
+        <TabsTrigger value="classes">Shipping classes</TabsTrigger>
+      </TabsList>
+      <TabsContent value="zones">
+        <ZonesTab />
+      </TabsContent>
+      <TabsContent value="classes">
+        <ClassesTab />
+      </TabsContent>
+    </Tabs>
+  );
+}