@base44/app-plugin-commerce 0.1.6 → 0.1.8

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

@@ -9,16 +9,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { CURRENCIES, CURRENCY_POSITIONS } from "../../lib/constants";
+import { CURRENCIES, WEIGHT_UNITS, DIMENSION_UNITS } from "../../lib/constants";
 import useGroupForm from "./useGroupForm";
 
 const DEFAULTS = {
   order_received_path: "/order-received",
   currency: "USD",
-  currency_position: "left",
-  thousand_sep: ",",
-  decimal_sep: ".",
-  num_decimals: 2,
+  weight_unit: "kg",
+  dimension_unit: "cm",
 };
 
 export default function GeneralSettings() {
@@ -53,13 +51,16 @@ export default function GeneralSettings() {
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
-            <CardTitle>Currency options</CardTitle>
-            <CardDescription>Affects how prices are displayed in the admin and by storefront APIs.</CardDescription>
+            <CardTitle>Currency</CardTitle>
+            <CardDescription>
+              The store's currency. Prices are formatted per the viewer's locale
+              (Intl) — there is nothing else to configure.
+            </CardDescription>
           </div>
           <SaveButton />
         </CardHeader>
-        <CardContent className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-1.5">
+        <CardContent>
+          <div className="max-w-xs space-y-1.5">
             <Label>Currency</Label>
             <Select value={form.currency} onValueChange={(v) => setField("currency", v)}>
               <SelectTrigger>
@@ -74,46 +75,47 @@ export default function GeneralSettings() {
               </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>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>Currency position</Label>
-            <Select value={form.currency_position} onValueChange={(v) => setField("currency_position", v)}>
+            <Label>Weight unit</Label>
+            <Select value={form.weight_unit} onValueChange={(v) => setField("weight_unit", v)}>
               <SelectTrigger>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                {CURRENCY_POSITIONS.map((p) => (
-                  <SelectItem key={p.value} value={p.value}>
-                    {p.label}
+                {WEIGHT_UNITS.map((u) => (
+                  <SelectItem key={u} value={u}>
+                    {u}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
           </div>
           <div className="space-y-1.5">
-            <Label>Thousand separator</Label>
-            <Input
-              value={form.thousand_sep ?? ","}
-              maxLength={1}
-              onChange={(e) => setField("thousand_sep", e.target.value)}
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Label>Decimal separator</Label>
-            <Input
-              value={form.decimal_sep ?? "."}
-              maxLength={1}
-              onChange={(e) => setField("decimal_sep", e.target.value)}
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Label>Number of decimals</Label>
-            <Input
-              type="number"
-              min={0}
-              max={4}
-              value={form.num_decimals ?? 2}
-              onChange={(e) => setField("num_decimals", e.target.value === "" ? 2 : Number(e.target.value))}
-            />
+            <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>

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

@@ -10,9 +10,6 @@ const DEFAULTS = {
   hold_stock_minutes: 60,
   low_stock_threshold: 2,
   out_of_stock_threshold: 0,
-  notify_low_stock: true,
-  notify_out_of_stock: true,
-  notification_recipient: "",
   hide_out_of_stock: false,
 };
 
@@ -54,7 +51,7 @@ export default function InventorySettings() {
             <p className="text-xs text-muted-foreground">
               Hold stock for unpaid orders for this many minutes. When the limit is reached, the
               pending order is cancelled and its stock released. Release runs opportunistically —
-              see skills/commerce/references/scheduled-work.md.
+              see .agents/skills/commerce/references/scheduled-work.md.
             </p>
           </div>
 
@@ -82,43 +79,6 @@ export default function InventorySettings() {
         </CardContent>
       </Card>
 
-      <Card>
-        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
-          <div className="space-y-1.5">
-            <CardTitle>Notifications</CardTitle>
-          </div>
-          <SaveButton />
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-start justify-between gap-4">
-            <Label className={off ? "opacity-50" : ""}>Enable low stock notifications</Label>
-            <Switch
-              disabled={off}
-              checked={!!form.notify_low_stock}
-              onCheckedChange={(v) => setField("notify_low_stock", v)}
-            />
-          </div>
-          <div className="flex items-start justify-between gap-4">
-            <Label className={off ? "opacity-50" : ""}>Enable out of stock notifications</Label>
-            <Switch
-              disabled={off}
-              checked={!!form.notify_out_of_stock}
-              onCheckedChange={(v) => setField("notify_out_of_stock", v)}
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Label className={off ? "opacity-50" : ""}>Notification recipient</Label>
-            <Input
-              type="email"
-              placeholder="Defaults to the admin recipients in Emails settings"
-              disabled={off}
-              value={form.notification_recipient || ""}
-              onChange={(e) => setField("notification_recipient", e.target.value)}
-            />
-          </div>
-        </CardContent>
-      </Card>
-
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">

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

@@ -0,0 +1,377 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, Plus, Save, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { base44 } from "../../lib/api";
+import { useAdminHref } from "../../context/BasePathContext";
+import PageHeader from "../../components/PageHeader";
+import CountrySelect from "../../components/CountrySelect";
+import MoneyInput from "../../components/MoneyInput";
+import useMoney from "../../hooks/useMoney";
+import { CONTINENTS } from "../../lib/geo-data";
+
+const NEW_LOCATION = {
+  name: "",
+  order: 0,
+  regions: [],
+  shipping_rates: [],
+  tax_groups: [{ name: "Products", rates: [] }],
+  shipping_tax: null,
+};
+
+const num = (v) => (v === "" ? null : Number(v));
+
+/**
+ * One Shipping & Tax Location: the regions it covers, the shipping rates
+ * offered there, the tax groups (default group "Products" — products pick a
+ * group by name) and the tax on shipping (% or a fixed amount).
+ */
+export default function LocationEditor() {
+  const { locationId } = useParams();
+  const isNew = locationId === "new";
+  const navigate = useNavigate();
+  const href = useAdminHref();
+  const money = useMoney();
+
+  const [location, setLocation] = useState(null);
+  const [saving, setSaving] = useState(false);
+
+  const load = useCallback(async () => {
+    if (isNew) {
+      setLocation({ ...NEW_LOCATION, tax_groups: [{ name: "Products", rates: [] }] });
+      return;
+    }
+    const rec = await base44.entities["commerce.ShippingTaxLocation"].get(locationId);
+    setLocation({
+      ...NEW_LOCATION,
+      ...rec,
+      tax_groups: (rec.tax_groups || []).length ? rec.tax_groups : [{ name: "Products", rates: [] }],
+    });
+  }, [locationId, isNew]);
+
+  useEffect(() => {
+    load().catch((e) => toast.error(e.message || "Failed to load location"));
+  }, [load]);
+
+  const up = (patch) => setLocation((l) => ({ ...l, ...patch }));
+
+  const save = async () => {
+    if (!location.name?.trim()) {
+      toast.error("Location name is required");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id: _id, created_date: _cd, updated_date: _ud, created_by: _cb, ...fields } = location;
+      const payload = {
+        ...fields,
+        name: location.name.trim(),
+        // the default group always exists — a product's tax_group falls back to it
+        tax_groups: location.tax_groups.some((g) => g.name.toLowerCase() === "products")
+          ? location.tax_groups
+          : [{ name: "Products", rates: [] }, ...location.tax_groups],
+      };
+      if (isNew) await base44.entities["commerce.ShippingTaxLocation"].create(payload);
+      else await base44.entities["commerce.ShippingTaxLocation"].update(locationId, payload);
+      toast.success(isNew ? "Location created" : "Location saved");
+      navigate(href("settings/shipping-tax"));
+    } catch (e) {
+      toast.error(e.message || "Failed to save location");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!location) return null;
+
+  const regions = location.regions || [];
+  const rates = location.shipping_rates || [];
+  const groups = location.tax_groups || [];
+  const shippingTax = location.shipping_tax;
+
+  const setRegion = (i, patch) => up({ regions: regions.map((r, j) => (j === i ? { ...r, ...patch } : r)) });
+  const setRate = (i, patch) => up({ shipping_rates: rates.map((r, j) => (j === i ? { ...r, ...patch } : r)) });
+  const setGroup = (i, patch) => up({ tax_groups: groups.map((g, j) => (j === i ? { ...g, ...patch } : g)) });
+
+  return (
+    <div className="max-w-3xl space-y-4">
+      <PageHeader
+        title={isNew ? "Add location" : location.name || "Edit location"}
+        description="Manage where you sell, and the shipping and tax charged there."
+        backHref={href("settings/shipping-tax")}
+        actions={
+          <Button onClick={save} disabled={saving}>
+            {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
+            Save
+          </Button>
+        }
+      />
+
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">Location</CardTitle>
+          <CardDescription>
+            Leave the regions empty to make this the fallback that catches every address no other
+            location covers.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {/* Every row in this editor shares one column system —
+              [1fr | 130px | 130px | 40px icon] — so inputs align across cards. */}
+          <div className="grid grid-cols-[1fr_130px_130px_40px] items-center gap-2">
+            <div className="col-span-2 space-y-1.5">
+              <Label>Name</Label>
+              <Input value={location.name} onChange={(e) => up({ name: e.target.value })} placeholder="e.g. Israel" />
+            </div>
+            <div className="space-y-1.5">
+              <Label>Match order</Label>
+              <Input type="number" value={location.order ?? 0} onChange={(e) => up({ order: Number(e.target.value) || 0 })} />
+            </div>
+            <div />
+          </div>
+
+          <div className="space-y-2">
+            <Label className="block">Regions</Label>
+            {regions.map((region, i) => (
+              <div key={i} className="grid grid-cols-[130px_1fr_40px] items-center gap-2">
+                <Select value={region.type || "country"} onValueChange={(v) => setRegion(i, { type: v, code: "" })}>
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="country">Country</SelectItem>
+                    <SelectItem value="continent">Continent</SelectItem>
+                    <SelectItem value="state">State</SelectItem>
+                  </SelectContent>
+                </Select>
+                {region.type === "continent" ? (
+                  <Select value={region.code || ""} onValueChange={(v) => setRegion(i, { code: v })}>
+                    <SelectTrigger><SelectValue placeholder="Select continent…" /></SelectTrigger>
+                    <SelectContent>
+                      {CONTINENTS.map((c) => (
+                        <SelectItem key={c.code} value={c.code}>{c.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : region.type === "state" ? (
+                  <Input
+                    placeholder="COUNTRY:STATE — e.g. US:CA"
+                    value={region.code || ""}
+                    onChange={(e) => setRegion(i, { code: e.target.value.toUpperCase() })}
+                  />
+                ) : (
+                  <CountrySelect value={region.code || ""} onChange={(code) => setRegion(i, { code })} />
+                )}
+                <Button type="button" variant="ghost" size="icon" onClick={() => up({ regions: regions.filter((_, j) => j !== i) })}>
+                  <Trash2 className="h-4 w-4 text-muted-foreground" />
+                </Button>
+              </div>
+            ))}
+            <Button type="button" variant="outline" size="sm" onClick={() => up({ regions: [...regions, { type: "country", code: "" }] })}>
+              <Plus className="mr-2 h-4 w-4" />
+              Add region
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">Shipping rates</CardTitle>
+          <CardDescription>
+            Every rate is a delivery option at checkout. A "Free over" amount makes the rate free once
+            the (discounted) items subtotal reaches it. No rates means nothing ships here.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          {rates.length > 0 && (
+            <div className="grid grid-cols-[1fr_130px_130px_40px] items-center gap-2 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              <span>Delivery option</span>
+              <span>Cost</span>
+              <span>Free over</span>
+              <span />
+            </div>
+          )}
+          {rates.map((rate, i) => (
+            <div key={rate.id || i} className="grid grid-cols-[1fr_130px_130px_40px] items-center gap-2">
+              <Input
+                placeholder="e.g. Standard delivery"
+                value={rate.name || ""}
+                onChange={(e) => setRate(i, { name: e.target.value })}
+              />
+              <MoneyInput value={rate.cost} onChange={(v) => setRate(i, { cost: v ?? 0 })} placeholder="Cost" />
+              <Input
+                type="number"
+                min={0}
+                placeholder="Never"
+                title="Items subtotal (after discounts) at which this rate becomes free"
+                value={rate.free_over ?? ""}
+                onChange={(e) => setRate(i, { free_over: num(e.target.value) })}
+              />
+              <Button type="button" variant="ghost" size="icon" onClick={() => up({ shipping_rates: rates.filter((_, j) => j !== i) })}>
+                <Trash2 className="h-4 w-4 text-muted-foreground" />
+              </Button>
+            </div>
+          ))}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => up({ shipping_rates: [...rates, { id: crypto.randomUUID(), name: "", cost: 0, free_over: null }] })}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            Add rate
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">Tax</CardTitle>
+          <CardDescription>
+            Tax groups bundle percentage rates — a group's tax is the sum of its rates. Products
+            charge the <strong>Products</strong> group unless their own Tax group names another;
+            add groups for goods taxed differently. Tax on shipping is set separately below.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {groups.map((group, i) => {
+            const isDefault = group.name.toLowerCase() === "products";
+            const groupRates = group.rates || [];
+            return (
+              <div key={i} className="rounded-lg border">
+                <div className="flex items-center justify-between gap-2 border-b bg-muted/40 px-3 py-2">
+                  <div className="flex flex-1 items-center gap-2">
+                    <Input
+                      className="h-8 max-w-xs bg-background font-medium"
+                      value={group.name}
+                      placeholder="Group name"
+                      disabled={isDefault}
+                      onChange={(e) => setGroup(i, { name: e.target.value })}
+                    />
+                    <span className="text-xs text-muted-foreground">
+                      {isDefault ? "Default group — products without a Tax group charge this" : "Tax group"}
+                    </span>
+                  </div>
+                  {!isDefault && (
+                    <Button type="button" variant="ghost" size="icon" className="h-8 w-8" onClick={() => up({ tax_groups: groups.filter((_, j) => j !== i) })}>
+                      <Trash2 className="h-4 w-4 text-muted-foreground" />
+                    </Button>
+                  )}
+                </div>
+                <div className="space-y-2 p-3">
+                  {!groupRates.length && (
+                    <p className="text-xs text-muted-foreground">
+                      No rates — {isDefault ? "products" : `${group.name.trim() || "these"} items`} are not taxed at this location.
+                    </p>
+                  )}
+                  {groupRates.map((r, j) => (
+                    <div key={j} className="grid grid-cols-[1fr_130px_40px] items-center gap-2">
+                      <Input
+                        placeholder="Rate name — e.g. Sales tax, VAT"
+                        value={r.name || ""}
+                        onChange={(e) => setGroup(i, { rates: groupRates.map((x, k) => (k === j ? { ...x, name: e.target.value } : x)) })}
+                      />
+                      <div className="relative">
+                        <Input
+                          type="number"
+                          min={0}
+                          max={100}
+                          value={r.rate ?? ""}
+                          onChange={(e) => setGroup(i, { rates: groupRates.map((x, k) => (k === j ? { ...x, rate: num(e.target.value) ?? 0 } : x)) })}
+                        />
+                        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">%</span>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setGroup(i, { rates: groupRates.filter((_, k) => k !== j) })}
+                      >
+                        <Trash2 className="h-4 w-4 text-muted-foreground" />
+                      </Button>
+                    </div>
+                  ))}
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setGroup(i, { rates: [...groupRates, { name: "", rate: 0 }] })}
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Add rate
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => up({ tax_groups: [...groups, { name: "", rates: [{ name: "", rate: 0 }] }] })}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            Add tax group
+          </Button>
+
+          <div className="rounded-lg border">
+            <div className="border-b bg-muted/40 px-3 py-2">
+              <p className="text-sm font-medium">Tax on shipping</p>
+            </div>
+            <div className="grid grid-cols-[1fr_130px_130px_40px] items-center gap-2 p-3">
+              <p className="text-xs text-muted-foreground">
+                Applied to the shipping cost at this location — separate from the product groups above.
+              </p>
+              <Select
+                value={shippingTax?.type || "none"}
+                onValueChange={(v) => up({ shipping_tax: v === "none" ? null : { type: v, value: shippingTax?.value ?? 0 } })}
+              >
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">Not taxed</SelectItem>
+                  <SelectItem value="percent">Rate %</SelectItem>
+                  <SelectItem value="fixed">Exact amount</SelectItem>
+                </SelectContent>
+              </Select>
+              {shippingTax ? (
+                shippingTax.type === "fixed" ? (
+                  <MoneyInput value={shippingTax.value} onChange={(v) => up({ shipping_tax: { ...shippingTax, value: v ?? 0 } })} />
+                ) : (
+                  <div className="relative">
+                    <Input
+                      type="number"
+                      min={0}
+                      max={100}
+                      value={shippingTax.value ?? ""}
+                      onChange={(e) => up({ shipping_tax: { ...shippingTax, value: num(e.target.value) ?? 0 } })}
+                    />
+                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">%</span>
+                  </div>
+                )
+              ) : (
+                <div />
+              )}
+              <div />
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            Example: {money.format(100)} in the Products group at 18% charges {money.format(18)} tax.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}