@base44/app-plugin-commerce 0.1.6 → 0.1.7

package/src/commerce/admin/pages/products/components/PublishBox.jsx

@@ -3,20 +3,14 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { Loader2, Save, Trash2 } from "lucide-react";
 
 import ConfirmDialog from "../../../components/ConfirmDialog";
-import { PRODUCT_STATUSES, CATALOG_VISIBILITIES } from "../../../lib/constants";
 
 /**
- * Product editor "Publish" sidebar box.
+ * Product editor "Publish" sidebar box. One Visible toggle drives `status`
+ * (publish/draft) — there is no separate catalog visibility.
  * Props: { product, up, onSave, onDelete (null hides delete), saving, dirty }
  */
 export default function PublishBox({ product, up, onSave, onDelete, saving, dirty }) {
@@ -33,37 +27,22 @@ export default function PublishBox({ product, up, onSave, onDelete, saving, dirt
     }
   };
 
+  const visible = product.status === "publish";
+
   return (
     <Card>
       <CardHeader className="pb-2">
         <CardTitle className="text-base">Publish</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
-        <div className="space-y-1.5">
-          <Label>Status</Label>
-          <Select value={product.status || "draft"} onValueChange={(v) => up({ status: v })}>
-            <SelectTrigger><SelectValue /></SelectTrigger>
-            <SelectContent>
-              {PRODUCT_STATUSES.map((s) => (
-                <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        <div className="space-y-1.5">
-          <Label>Catalog visibility</Label>
-          <Select
-            value={product.catalog_visibility || "visible"}
-            onValueChange={(v) => up({ catalog_visibility: v })}
-          >
-            <SelectTrigger><SelectValue /></SelectTrigger>
-            <SelectContent>
-              {CATALOG_VISIBILITIES.map((v) => (
-                <SelectItem key={v.value} value={v.value}>{v.label}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <Label>Visible</Label>
+            <p className="text-xs text-muted-foreground">
+              {visible ? "Shown in the store" : "Hidden — saved as a draft"}
+            </p>
+          </div>
+          <Switch checked={visible} onCheckedChange={(v) => up({ status: v ? "publish" : "draft" })} />
         </div>
 
         <label className="flex cursor-pointer items-center gap-2 text-sm">

package/src/commerce/admin/pages/products/components/TaxonomyPanel.jsx

@@ -23,13 +23,13 @@ const NO_PARENT = "__none__";
 
 /**
  * Product editor sidebar panel: categories (hierarchical checkboxes + quick-add)
- * and tags (multi-select + create-on-enter).
+ * and ribbons (multi-select + create-on-enter).
  *
- * Props: { product, up, refs } where refs = { categories, tags, refreshCategories, refreshTags }
+ * Props: { product, up, refs } where refs = { categories, ribbons, refreshCategories, refreshRibbons }
  */
 export default function TaxonomyPanel({ product, up, refs }) {
   const categories = refs?.categories || [];
-  const tags = refs?.tags || [];
+  const ribbons = refs?.ribbons || [];
 
   return (
     <>
@@ -39,11 +39,11 @@ export default function TaxonomyPanel({ product, up, refs }) {
         onChange={(ids) => up({ category_ids: ids })}
         refresh={refs?.refreshCategories}
       />
-      <TagsCard
-        tags={tags}
-        selected={product.tag_ids || []}
-        onChange={(ids) => up({ tag_ids: ids })}
-        refresh={refs?.refreshTags}
+      <RibbonsCard
+        ribbons={ribbons}
+        selected={product.ribbon_ids || []}
+        onChange={(ids) => up({ ribbon_ids: ids })}
+        refresh={refs?.refreshRibbons}
       />
     </>
   );
@@ -162,46 +162,46 @@ function CategoriesCard({ categories, selected, onChange, refresh }) {
   );
 }
 
-function TagsCard({ tags, selected, onChange, refresh }) {
-  const [newTag, setNewTag] = useState("");
+function RibbonsCard({ ribbons, selected, onChange, refresh }) {
+  const [newRibbon, setNewRibbon] = useState("");
   const [saving, setSaving] = useState(false);
 
   const value = useMemo(
     () =>
       selected
         .map((id) => {
-          const t = tags.find((x) => x.id === id);
+          const t = ribbons.find((x) => x.id === id);
           return t ? { value: t.id, label: t.name } : null;
         })
         .filter(Boolean),
-    [selected, tags]
+    [selected, ribbons]
   );
 
   const search = async (q) =>
-    tags
+    ribbons
       .filter((t) => !q || (t.name || "").toLowerCase().includes(q.toLowerCase()))
       .slice(0, 30)
       .map((t) => ({ value: t.id, label: t.name }));
 
-  const createTag = async () => {
-    const label = newTag.trim();
+  const createRibbon = async () => {
+    const label = newRibbon.trim();
     if (!label) return;
-    // Reuse an existing tag with the same name if present.
-    const existing = tags.find((t) => (t.name || "").toLowerCase() === label.toLowerCase());
+    // Reuse an existing ribbon with the same name if present.
+    const existing = ribbons.find((t) => (t.name || "").toLowerCase() === label.toLowerCase());
     if (existing) {
       if (!selected.includes(existing.id)) onChange([...selected, existing.id]);
-      setNewTag("");
+      setNewRibbon("");
       return;
     }
     setSaving(true);
     try {
-      const created = await base44.entities["commerce.ProductTag"].create({ name: label, count: 0 });
-      toast.success("Tag created");
-      setNewTag("");
+      const created = await base44.entities["commerce.ProductRibbon"].create({ name: label, count: 0 });
+      toast.success("Ribbon created");
+      setNewRibbon("");
       await refresh?.();
       if (created?.id) onChange([...selected, created.id]);
     } catch (e) {
-      toast.error(e.message || "Failed to create tag");
+      toast.error(e.message || "Failed to create ribbon");
     } finally {
       setSaving(false);
     }
@@ -210,30 +210,30 @@ function TagsCard({ tags, selected, onChange, refresh }) {
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-base">Tags</CardTitle>
+        <CardTitle className="text-base">Ribbons</CardTitle>
       </CardHeader>
       <CardContent className="space-y-2">
         <SearchSelect
           multiple
-          placeholder="Select tags"
+          placeholder="Select ribbons"
           value={value}
           onChange={(next) => onChange(next.map((o) => o.value))}
           search={search}
         />
         <div className="flex gap-2">
           <Input
-            value={newTag}
-            onChange={(e) => setNewTag(e.target.value)}
+            value={newRibbon}
+            onChange={(e) => setNewRibbon(e.target.value)}
             onKeyDown={(e) => {
               if (e.key === "Enter") {
                 e.preventDefault();
-                createTag();
+                createRibbon();
               }
             }}
-            placeholder="Add new tag"
+            placeholder="Add new ribbon"
             className="h-8 text-sm"
           />
-          <Button size="sm" variant="outline" onClick={createTag} disabled={saving || !newTag.trim()}>
+          <Button size="sm" variant="outline" onClick={createRibbon} disabled={saving || !newRibbon.trim()}>
             {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : "Add"}
           </Button>
         </div>

package/src/commerce/admin/pages/products/components/tabs/PriceInventoryTab.jsx

@@ -24,7 +24,6 @@ import AttributesSection from "../AttributesSection";
 import { comboKey, generateVariationCombos, variationLabel } from "../../../../lib/product-utils";
 import { BACKORDER_OPTIONS, STOCK_STATUSES, TAX_STATUSES } from "../../../../lib/constants";
 
-const NONE = "__none__";
 const ANY = "__any__";
 const num = (v) => (v === "" ? null : Number(v));
 const toDateInput = (iso) => (iso ? String(iso).slice(0, 10) : "");
@@ -43,7 +42,7 @@ const COPY_GROUPS = [
   {
     key: "shipping",
     label: "Shipping",
-    fields: ["weight", "dimensions", "shipping_class_id", "virtual", "downloadable"],
+    fields: ["weight", "dimensions", "virtual", "downloadable"],
   },
 ];
 
@@ -60,14 +59,12 @@ const NEW_VARIATION = {
   download_limit: -1,
   download_expiry: -1,
   tax_status: "parent",
-  tax_class: "",
   manage_stock: "parent",
   stock_quantity: null,
   stock_status: "instock",
   backorders: "no",
   weight: null,
   dimensions: { length: null, width: null, height: null },
-  shipping_class_id: "",
   image: null,
   menu_order: 0,
   description: "",
@@ -161,10 +158,10 @@ const Section = ({ label, children, className = "" }) => (
 );
 
 /**
- * Weight, dimensions and shipping class live per purchasable thing, not per
- * product — a large mug weighs more than a small one.
+ * Weight and dimensions live per purchasable thing, not per product — a large
+ * mug weighs more than a small one.
  */
-function ShippingFields({ values, set, units, classes, inheritLabel }) {
+function ShippingFields({ values, set, units }) {
   const dims = values.dimensions || {};
   return (
     <>
@@ -192,21 +189,6 @@ function ShippingFields({ values, set, units, classes, inheritLabel }) {
           ))}
         </div>
       </div>
-      <div className="space-y-1.5">
-        <Label className="text-xs">Shipping class</Label>
-        <Select
-          value={values.shipping_class_id || NONE}
-          onValueChange={(v) => set({ shipping_class_id: v === NONE ? "" : v })}
-        >
-          <SelectTrigger><SelectValue /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value={NONE}>{inheritLabel}</SelectItem>
-            {classes.map((c) => (
-              <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
     </>
   );
 }
@@ -346,13 +328,7 @@ function DefaultRow({ product, up, money, units, refs }) {
 
         {!product.virtual && (
           <Section label="Shipping">
-            <ShippingFields
-              values={product}
-              set={up}
-              units={units}
-              classes={refs.shippingClasses || []}
-              inheritLabel="No shipping class"
-            />
+            <ShippingFields values={product} set={up} units={units} />
           </Section>
         )}
       </div>
@@ -438,13 +414,7 @@ function VariantRow({ variation, onChange, refs, money, units, virtual }) {
 
           {!virtual && (
             <Section label="Shipping">
-              <ShippingFields
-                values={variation}
-                set={set}
-                units={units}
-                classes={refs.shippingClasses || []}
-                inheritLabel="Same as product"
-              />
+              <ShippingFields values={variation} set={set} units={units} />
             </Section>
           )}
 
@@ -491,11 +461,12 @@ function VariantRow({ variation, onChange, refs, money, units, virtual }) {
 export default function PriceInventoryTab({ product, up, refs, variations, setVariations }) {
   const money = useMoney();
   const settings = useSettings();
-  const weightUnit = settings?.get("products", "weight_unit", "kg");
-  const dimensionUnit = settings?.get("products", "dimension_unit", "cm");
+  const weightUnit = settings?.get("general", "weight_unit", "kg");
+  const dimensionUnit = settings?.get("general", "dimension_unit", "cm");
   const [copyFrom, setCopyFrom] = useState("0");
   const [copyGroups, setCopyGroups] = useState(["price"]);
-  const taxClasses = refs.taxClasses || [];
+  // Tax groups are named per Shipping & Tax Location; a product picks by name.
+  const taxGroups = refs.taxGroups?.length ? refs.taxGroups : ["Products"];
   const units = { weightUnit, dimensionUnit };
 
   const hasAttributes = (product.attributes || []).length > 0;
@@ -547,7 +518,6 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
           backorders: product.backorders,
           weight: product.weight,
           dimensions: { ...(product.dimensions || {}) },
-          shipping_class_id: product.shipping_class_id,
         };
 
     const added = [...wanted.entries()]
@@ -603,12 +573,12 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
           </Select>
         </div>
         <div className="space-y-1.5">
-          <Label>Tax class</Label>
-          <Select value={product.tax_class || "standard"} onValueChange={(v) => up({ tax_class: v })}>
+          <Label>Tax group</Label>
+          <Select value={product.tax_group || "Products"} onValueChange={(v) => up({ tax_group: v })}>
             <SelectTrigger><SelectValue /></SelectTrigger>
             <SelectContent>
-              {(taxClasses.length ? taxClasses : [{ slug: "standard", name: "Standard" }]).map((c) => (
-                <SelectItem key={c.slug} value={c.slug}>{c.name}</SelectItem>
+              {taxGroups.map((g) => (
+                <SelectItem key={g} value={g}>{g}</SelectItem>
               ))}
             </SelectContent>
           </Select>

package/src/commerce/admin/pages/reports/Reports.jsx

@@ -327,7 +327,7 @@ const TOTALS_ACTIONS = [
   "coupons-totals",
   "reviews-totals",
   "categories-totals",
-  "tags-totals",
+  "ribbons-totals",
   "attributes-totals",
 ];
 
@@ -381,7 +381,7 @@ function TotalsTab() {
         rows={normalizeTotals(d["reviews-totals"], REVIEW_STATUSES)}
       />
       <TotalsCard title="Categories" loading={loading} rows={normalizeTotals(d["categories-totals"])} />
-      <TotalsCard title="Tags" loading={loading} rows={normalizeTotals(d["tags-totals"])} />
+      <TotalsCard title="Ribbons" loading={loading} rows={normalizeTotals(d["ribbons-totals"])} />
       <TotalsCard title="Attributes" loading={loading} rows={normalizeTotals(d["attributes-totals"])} />
     </div>
   );

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

@@ -63,6 +63,21 @@ export default function EmailsSettings() {
       text.split(",").map((s) => s.trim()).filter(Boolean)
     );
 
+  // What the Recipient column shows for an admin-targeted row: the per-type
+  // override, then the configured admin recipients, then the resolved admin users.
+  const adminRecipient = (e) =>
+    typeCfg(e.id).recipient ||
+    recipientsText ||
+    effective?.recipients.join(", ") ||
+    "Admin";
+
+  // One list for every email; a delimiter row splits the admin-targeted
+  // emails from the ones the customer receives.
+  const GROUPS = [
+    { label: "Sent to the store admin", types: EMAIL_TYPES.filter((e) => e.recipient === "admin") },
+    { label: "Sent to the customer", types: EMAIL_TYPES.filter((e) => e.recipient === "customer") },
+  ];
+
   const active = activeId ? EMAIL_TYPES.find((e) => e.id === activeId) : null;
 
   return (
@@ -117,7 +132,10 @@ export default function EmailsSettings() {
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
               <CardTitle>Email notifications</CardTitle>
-              <CardDescription>Enable, disable and customize each transactional email.</CardDescription>
+              <CardDescription>
+                Enable, disable and customize each transactional email, including the
+                low-stock and out-of-stock alerts.
+              </CardDescription>
           </div>
           <SaveButton />
         </CardHeader>
@@ -132,47 +150,58 @@ export default function EmailsSettings() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {EMAIL_TYPES.map((e) => {
-                const managed = !!e.managed_by_auth;
-                return (
-                  <TableRow key={e.id}>
-                    <TableCell>
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium">{e.label}</span>
-                        {e.manual && <Badge variant="outline" className="font-normal">Manual</Badge>}
-                        {managed && (
-                          <Badge variant="secondary" className="font-normal text-muted-foreground">
-                            Handled by Base44 auth
-                          </Badge>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-sm text-muted-foreground">
-                      {managed
-                        ? "—"
-                        : e.recipient === "admin"
-                        ? typeCfg(e.id).recipient || recipientsText ||
-                          effective?.recipients.join(", ") || "Admin"
-                        : "Customer"}
-                    </TableCell>
-                    <TableCell>
-                      {managed ? (
-                        <span className="text-xs text-muted-foreground">—</span>
-                      ) : (
-                        <Switch checked={isEnabled(e.id)} onCheckedChange={(v) => setTypeField(e.id, "enabled", !!v)} />
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      {!managed && (
-                        <Button variant="ghost" size="sm" onClick={() => setActiveId(e.id)}>
-                          <Settings2 className="mr-2 h-4 w-4" />
-                          Manage
-                        </Button>
-                      )}
+              {GROUPS.map((group) => (
+                <React.Fragment key={group.label}>
+                  <TableRow className="hover:bg-transparent">
+                    <TableCell
+                      colSpan={4}
+                      className="bg-muted/50 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+                    >
+                      {group.label}
                     </TableCell>
                   </TableRow>
-                );
-              })}
+                  {group.types.map((e) => {
+                    const managed = !!e.managed_by_auth;
+                    return (
+                      <TableRow key={e.id}>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">{e.label}</span>
+                            {e.manual && <Badge variant="outline" className="font-normal">Manual</Badge>}
+                            {managed && (
+                              <Badge variant="secondary" className="font-normal text-muted-foreground">
+                                Handled by Base44 auth
+                              </Badge>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">
+                          {managed
+                            ? "—"
+                            : e.recipient === "admin"
+                            ? adminRecipient(e)
+                            : "Customer"}
+                        </TableCell>
+                        <TableCell>
+                          {managed ? (
+                            <span className="text-xs text-muted-foreground">—</span>
+                          ) : (
+                            <Switch checked={isEnabled(e.id)} onCheckedChange={(v) => setTypeField(e.id, "enabled", !!v)} />
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          {!managed && (
+                            <Button variant="ghost" size="sm" onClick={() => setActiveId(e.id)}>
+                              <Settings2 className="mr-2 h-4 w-4" />
+                              Manage
+                            </Button>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </React.Fragment>
+              ))}
             </TableBody>
           </Table>
         </CardContent>
@@ -198,34 +227,38 @@ export default function EmailsSettings() {
                   </p>
                 </div>
               )}
-              <div className="space-y-1.5">
-                <Label>Subject</Label>
-                <Input
-                  placeholder="Leave blank for the default"
-                  value={typeCfg(active.id).subject || ""}
-                  onChange={(e) => setTypeField(active.id, "subject", e.target.value)}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label>Email heading</Label>
-                <Input
-                  placeholder="Leave blank for the default"
-                  value={typeCfg(active.id).heading || ""}
-                  onChange={(e) => setTypeField(active.id, "heading", e.target.value)}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label>Additional content</Label>
-                <Textarea
-                  rows={3}
-                  placeholder="Text appended below the email body."
-                  value={typeCfg(active.id).additional_content || ""}
-                  onChange={(e) => setTypeField(active.id, "additional_content", e.target.value)}
-                />
-              </div>
-              <p className="text-xs text-muted-foreground">
-                Placeholders: {"{order_number}"}, {"{customer_name}"}, {"{store_name}"}, {"{order_total}"}.
-              </p>
+              {!active.stock && (
+                <>
+                  <div className="space-y-1.5">
+                    <Label>Subject</Label>
+                    <Input
+                      placeholder="Leave blank for the default"
+                      value={typeCfg(active.id).subject || ""}
+                      onChange={(e) => setTypeField(active.id, "subject", e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>Email heading</Label>
+                    <Input
+                      placeholder="Leave blank for the default"
+                      value={typeCfg(active.id).heading || ""}
+                      onChange={(e) => setTypeField(active.id, "heading", e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>Additional content</Label>
+                    <Textarea
+                      rows={3}
+                      placeholder="Text appended below the email body."
+                      value={typeCfg(active.id).additional_content || ""}
+                      onChange={(e) => setTypeField(active.id, "additional_content", e.target.value)}
+                    />
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    Placeholders: {"{order_number}"}, {"{customer_name}"}, {"{store_name}"}, {"{order_total}"}.
+                  </p>
+                </>
+              )}
             </div>
             <DialogFooter>
               <Button onClick={() => setActiveId(null)}>Done</Button>