@base44/app-plugin-commerce 0.1.0

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

@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Loader2, Plus, Trash2, Undo2 } from "lucide-react";
+import { toast } from "sonner";
+import { base44 } from "../../lib/api";
+import useAsync from "../../hooks/useAsync";
+
+let tmpSeq = 0;
+const tmpId = () => `tmp_${++tmpSeq}`;
+
+const joinList = (arr) => (arr || []).join(", ");
+const splitList = (text) =>
+  text
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+
+const newRow = (taxClass, order) => ({
+  _tmpId: tmpId(),
+  _state: "new",
+  country: "",
+  state: "",
+  postcodes: [],
+  cities: [],
+  rate: 0,
+  name: "Tax",
+  priority: 1,
+  compound: false,
+  shipping: true,
+  tax_class: taxClass,
+  menu_order: order,
+});
+
+/**
+ * Editable tax-rate grid for one tax class ("Standard rates" table).
+ * Tracks new / modified / deleted rows locally; "Save changes" batches the
+ * TaxRate create/update/delete calls.
+ */
+export default function TaxRatesTable({ taxClass }) {
+  const { data, loading, refetch } = useAsync(
+    () => base44.entities["commerce.TaxRate"].filter({ tax_class: taxClass }, "menu_order", 500),
+    [taxClass]
+  );
+
+  const [rows, setRows] = useState([]);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setRows((data || []).map((r) => ({ ...r, _tmpId: r.id, _state: "clean" })));
+  }, [data]);
+
+  const setCell = (id, key, value) =>
+    setRows((rs) =>
+      rs.map((r) =>
+        r._tmpId === id
+          ? { ...r, [key]: value, _state: r._state === "new" ? "new" : "modified" }
+          : r
+      )
+    );
+
+  const removeRow = (id) =>
+    setRows((rs) =>
+      rs
+        .map((r) => {
+          if (r._tmpId !== id) return r;
+          if (r._state === "new") return null;
+          return { ...r, _state: r._state === "deleted" ? "modified" : "deleted" };
+        })
+        .filter(Boolean)
+    );
+
+  const insertRow = () => setRows((rs) => [...rs, newRow(taxClass, rs.length)]);
+
+  const dirty = rows.some((r) => r._state !== "clean");
+
+  const saveAll = async () => {
+    setSaving(true);
+    try {
+      for (const r of rows) {
+        const payload = {
+          country: (r.country || "").toUpperCase(),
+          state: (r.state || "").toUpperCase(),
+          postcodes: r.postcodes || [],
+          cities: r.cities || [],
+          rate: Number(r.rate) || 0,
+          name: r.name || "Tax",
+          priority: Number(r.priority) || 1,
+          compound: !!r.compound,
+          shipping: !!r.shipping,
+          tax_class: taxClass,
+          menu_order: rows.indexOf(r),
+        };
+        if (r._state === "new") await base44.entities["commerce.TaxRate"].create(payload);
+        else if (r._state === "modified") await base44.entities["commerce.TaxRate"].update(r.id, payload);
+        else if (r._state === "deleted") await base44.entities["commerce.TaxRate"].delete(r.id);
+      }
+      toast.success("Tax rates saved");
+      await refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to save tax rates");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cell = (r, key, props = {}) => (
+    <Input
+      className="h-8"
+      disabled={r._state === "deleted"}
+      value={r[key] ?? ""}
+      onChange={(e) => setCell(r._tmpId, key, e.target.value)}
+      {...props}
+    />
+  );
+
+  return (
+    <div className="space-y-3">
+      <div className="overflow-x-auto rounded-lg border bg-background">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="min-w-20">Country&nbsp;code</TableHead>
+              <TableHead className="min-w-20">State&nbsp;code</TableHead>
+              <TableHead className="min-w-32">Postcode / ZIP</TableHead>
+              <TableHead className="min-w-32">City</TableHead>
+              <TableHead className="min-w-24">Rate&nbsp;%</TableHead>
+              <TableHead className="min-w-28">Tax name</TableHead>
+              <TableHead className="w-20">Priority</TableHead>
+              <TableHead className="w-20 text-center">Compound</TableHead>
+              <TableHead className="w-20 text-center">Shipping</TableHead>
+              <TableHead className="w-12" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={10} className="py-8 text-center text-muted-foreground">
+                  <Loader2 className="mx-auto h-5 w-5 animate-spin" />
+                </TableCell>
+              </TableRow>
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={10} className="py-8 text-center text-sm text-muted-foreground">
+                  No rates for this class yet. Insert a row to get started. Empty country/state
+                  matches everywhere; postcodes support wildcards (90*) and ranges (1000...2000).
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((r) => (
+                <TableRow key={r._tmpId} className={r._state === "deleted" ? "opacity-50 line-through" : ""}>
+                  <TableCell>{cell(r, "country", { placeholder: "*", maxLength: 2 })}</TableCell>
+                  <TableCell>{cell(r, "state", { placeholder: "*" })}</TableCell>
+                  <TableCell>
+                    <Input
+                      className="h-8"
+                      placeholder="*"
+                      disabled={r._state === "deleted"}
+                      value={joinList(r.postcodes)}
+                      onChange={(e) => setCell(r._tmpId, "postcodes", splitList(e.target.value))}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Input
+                      className="h-8"
+                      placeholder="*"
+                      disabled={r._state === "deleted"}
+                      value={joinList(r.cities)}
+                      onChange={(e) => setCell(r._tmpId, "cities", splitList(e.target.value))}
+                    />
+                  </TableCell>
+                  <TableCell>{cell(r, "rate", { type: "number", step: "any" })}</TableCell>
+                  <TableCell>{cell(r, "name")}</TableCell>
+                  <TableCell>{cell(r, "priority", { type: "number", min: 1 })}</TableCell>
+                  <TableCell className="text-center">
+                    <Checkbox
+                      disabled={r._state === "deleted"}
+                      checked={!!r.compound}
+                      onCheckedChange={(v) => setCell(r._tmpId, "compound", !!v)}
+                    />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <Checkbox
+                      disabled={r._state === "deleted"}
+                      checked={!!r.shipping}
+                      onCheckedChange={(v) => setCell(r._tmpId, "shipping", !!v)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      title={r._state === "deleted" ? "Undo delete" : "Delete row"}
+                      onClick={() => removeRow(r._tmpId)}
+                    >
+                      {r._state === "deleted" ? (
+                        <Undo2 className="h-4 w-4" />
+                      ) : (
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      )}
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" onClick={insertRow}>
+          <Plus className="mr-1 h-4 w-4" />
+          Insert row
+        </Button>
+        <Button size="sm" onClick={saveAll} disabled={!dirty || saving}>
+          {saving && <Loader2 className="mr-1 h-4 w-4 animate-spin" />}
+          Save changes
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,281 @@
+import React, { useState } from "react";
+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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { base44 } from "../../lib/api";
+import useAsync from "../../hooks/useAsync";
+import ConfirmDialog from "../../components/ConfirmDialog";
+import { slugify } from "../../lib/product-utils";
+import useGroupForm from "./useGroupForm";
+import TaxRatesTable from "./TaxRatesTable";
+
+const DEFAULTS = {
+  prices_include_tax: false,
+  tax_based_on: "shipping",
+  shipping_tax_class: "inherit",
+  display_prices_shop: "excl",
+  display_prices_cart: "excl",
+};
+
+function TaxOptions({ classes }) {
+  const { form, setField, SaveButton } = useGroupForm("tax", DEFAULTS);
+
+  return (
+    <Card className="max-w-3xl">
+      <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+          <CardTitle>Tax options</CardTitle>
+          </div>
+          <SaveButton />
+        </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <Label>Prices entered with tax</Label>
+          <RadioGroup
+            value={form.prices_include_tax ? "yes" : "no"}
+            onValueChange={(v) => setField("prices_include_tax", v === "yes")}
+            className="gap-2"
+          >
+            <label className="flex items-center gap-2 text-sm">
+              <RadioGroupItem value="no" />
+              No, I will enter prices exclusive of tax
+            </label>
+            <label className="flex items-center gap-2 text-sm">
+              <RadioGroupItem value="yes" />
+              Yes, I will enter prices inclusive of tax
+            </label>
+          </RadioGroup>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label>Calculate tax based on</Label>
+            <Select value={form.tax_based_on} onValueChange={(v) => setField("tax_based_on", v)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="shipping">Customer shipping address</SelectItem>
+                <SelectItem value="billing">Customer billing address</SelectItem>
+                <SelectItem value="base">Shop base address</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Shipping tax class</Label>
+            <Select
+              value={form.shipping_tax_class}
+              onValueChange={(v) => setField("shipping_tax_class", v)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="inherit">Shipping tax class based on cart items</SelectItem>
+                {(classes || []).map((c) => (
+                  <SelectItem key={c.slug} value={c.slug}>
+                    {c.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Display prices in the shop</Label>
+            <Select
+              value={form.display_prices_shop}
+              onValueChange={(v) => setField("display_prices_shop", v)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="excl">Excluding tax</SelectItem>
+                <SelectItem value="incl">Including tax</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Display prices during cart and checkout</Label>
+            <Select
+              value={form.display_prices_cart}
+              onValueChange={(v) => setField("display_prices_cart", v)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="excl">Excluding tax</SelectItem>
+                <SelectItem value="incl">Including tax</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function TaxSettings() {
+  const { data: classes, loading, refetch } = useAsync(
+    () => base44.entities["commerce.TaxClass"].list("created_date", 100),
+    []
+  );
+  const [tab, setTab] = useState("options");
+  const [addOpen, setAddOpen] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+
+  const createClass = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    setCreating(true);
+    try {
+      const slug = slugify(name);
+      await base44.entities["commerce.TaxClass"].create({ slug, name });
+      toast.success(`Tax class "${name}" added`);
+      setAddOpen(false);
+      setNewName("");
+      await refetch();
+      setTab(slug);
+    } catch (err) {
+      toast.error(err.message || "Failed to add tax class");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const deleteClass = async () => {
+    setDeleting(true);
+    try {
+      await base44.entities["commerce.TaxClass"].delete(deleteTarget.id);
+      toast.success(`Tax class "${deleteTarget.name}" removed. Its tax rates were kept.`);
+      setDeleteTarget(null);
+      if (tab === deleteTarget.slug) setTab("options");
+      await refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to delete tax class");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const current = (classes || []).find((c) => c.slug === tab);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-1 text-sm">
+        <button
+          type="button"
+          onClick={() => setTab("options")}
+          className={`rounded-md px-3 py-1.5 ${
+            tab === "options" ? "bg-muted font-medium" : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          Tax options
+        </button>
+        <span className="text-muted-foreground">|</span>
+        {loading ? (
+          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+        ) : (
+          (classes || []).map((c) => (
+            <button
+              key={c.slug}
+              type="button"
+              onClick={() => setTab(c.slug)}
+              className={`rounded-md px-3 py-1.5 ${
+                tab === c.slug ? "bg-muted font-medium" : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {c.name} rates
+            </button>
+          ))
+        )}
+        <Button variant="ghost" size="sm" className="text-muted-foreground" onClick={() => setAddOpen(true)}>
+          <Plus className="mr-1 h-4 w-4" />
+          Add class
+        </Button>
+      </div>
+
+      {tab === "options" ? (
+        <TaxOptions classes={classes} />
+      ) : (
+        <div className="space-y-3">
+          {current && current.slug !== "standard" && (
+            <div className="flex justify-end">
+              <Button
+                variant="outline"
+                size="sm"
+                className="text-destructive"
+                onClick={() => setDeleteTarget(current)}
+              >
+                <Trash2 className="mr-1 h-4 w-4" />
+                Remove tax class
+              </Button>
+            </div>
+          )}
+          <TaxRatesTable taxClass={tab} />
+        </div>
+      )}
+
+      <Dialog open={addOpen} onOpenChange={setAddOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Add tax class</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-1.5">
+            <Label>Class name</Label>
+            <Input
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              placeholder="e.g. Reduced rate"
+              onKeyDown={(e) => e.key === "Enter" && createClass()}
+            />
+            {newName.trim() && (
+              <p className="text-xs text-muted-foreground">Slug: {slugify(newName)}</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setAddOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={createClass} disabled={creating || !newName.trim()}>
+              {creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Add class
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={(v) => !v && setDeleteTarget(null)}
+        title={`Remove tax class "${deleteTarget?.name}"?`}
+        description="Products assigned to this class fall back to Standard. Existing tax rates for the class are not deleted."
+        confirmLabel="Remove class"
+        onConfirm={deleteClass}
+        loading={deleting}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+import { useSettings } from "../../context/SettingsContext";
+
+/**
+ * Standard form state for a StoreSettings group page.
+ * Initializes from `settings[group]` spread over `defaults` (missing keys safe),
+ * tracks dirtiness, and persists through `useSettings().saveGroup`.
+ *
+ * Returns { form, setField(key, value), setForm(next), dirty, saving, save, SaveButton }.
+ * `SaveButton` goes in every CardHeader on the page — one Save at the bottom of a
+ * long settings page sits below the fold and gets missed.
+ */
+export default function useGroupForm(group, defaults) {
+  const { settings, saveGroup } = useSettings();
+
+  const initial = useMemo(
+    () => ({ ...defaults, ...(settings?.[group] || {}) }),
+    // eslint-disable-next-line -- deps intentionally partial
+    [settings, group]
+  );
+
+  const [form, setFormState] = useState(initial);
+  const [dirty, setDirty] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // Re-sync when settings refresh (e.g. after save).
+  useEffect(() => {
+    setFormState(initial);
+    setDirty(false);
+  }, [initial]);
+
+  const setField = (key, value) => {
+    setFormState((f) => ({ ...f, [key]: value }));
+    setDirty(true);
+  };
+
+  const setForm = (next) => {
+    setFormState(next);
+    setDirty(true);
+  };
+
+  const save = async (override) => {
+    setSaving(true);
+    try {
+      await saveGroup(group, override || form);
+      toast.success("Settings saved");
+      setDirty(false);
+    } catch (err) {
+      toast.error(err.message || "Failed to save settings");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Stable component identity (a fresh one each render would remount the button
+  // mid-click); current values are read through the ref on every parent render.
+  const live = useRef(null);
+  live.current = { dirty, saving, save };
+  const SaveButton = useMemo(
+    () => function SaveButton() {
+      const { dirty: d, saving: s, save: doSave } = live.current;
+      return (
+        <Button size="sm" onClick={() => doSave()} disabled={!d || s}>
+          {s && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Save changes
+        </Button>
+      );
+    },
+    []
+  );
+
+  return { form, setField, setForm, dirty, saving, save, SaveButton };
+}