@base44/app-plugin-commerce 0.1.6 → 0.1.7

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

@@ -1,231 +0,0 @@
-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

@@ -1,280 +0,0 @@
-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>
-              </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>
-  );
-}