@base44/app-plugin-commerce 0.1.0

package/src/commerce/admin/components/MediaUploader.jsx

@@ -0,0 +1,116 @@
+import React, { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowDown, ArrowUp, ImagePlus, Loader2, X } from "lucide-react";
+import { toast } from "sonner";
+import { base44 } from "../lib/api";
+
+/** Upload a file via the Core integration; returns the public URL. */
+export async function uploadFile(file) {
+  const res = await base44.integrations.Core.UploadFile({ file });
+  return res?.file_url || res?.data?.file_url;
+}
+
+/**
+ * Image uploader.
+ *
+ * Single mode (multiple=false): value = {src, name, alt} | null
+ * Gallery mode (multiple=true): value = [{src, name, alt}], reorder via up/down
+ *
+ * Props: { value, onChange, multiple?, accept?, label? }
+ */
+export default function MediaUploader({
+  value,
+  onChange,
+  multiple = false,
+  accept = "image/*",
+  label = multiple ? "Add images" : "Set image",
+}) {
+  const inputRef = useRef(null);
+  const [uploading, setUploading] = useState(false);
+
+  const items = multiple ? value || [] : value ? [value] : [];
+
+  const handleFiles = async (files) => {
+    if (!files?.length) return;
+    setUploading(true);
+    try {
+      const uploaded = [];
+      for (const file of Array.from(files)) {
+        const src = await uploadFile(file);
+        if (src) uploaded.push({ src, name: file.name, alt: "" });
+      }
+      if (multiple) onChange([...(value || []), ...uploaded]);
+      else onChange(uploaded[0] || null);
+    } catch (err) {
+      toast.error(err.response?.data?.error || err.message || "Upload failed");
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  };
+
+  const removeAt = (i) => {
+    if (multiple) onChange(items.filter((_, idx) => idx !== i));
+    else onChange(null);
+  };
+
+  const move = (i, dir) => {
+    const next = [...items];
+    const j = i + dir;
+    if (j < 0 || j >= next.length) return;
+    [next[i], next[j]] = [next[j], next[i]];
+    onChange(next);
+  };
+
+  return (
+    <div className="space-y-2">
+      {items.length > 0 && (
+        <div className={multiple ? "grid grid-cols-3 gap-2" : ""}>
+          {items.map((img, i) => (
+            <div key={`${img.src}-${i}`} className="group relative overflow-hidden rounded-md border">
+              <img
+                src={img.src}
+                alt={img.alt || img.name || ""}
+                className={`w-full object-cover ${multiple ? "aspect-square" : "max-h-56"}`}
+              />
+              <div className="absolute inset-x-0 top-0 flex justify-end gap-0.5 bg-gradient-to-b from-black/50 to-transparent p-1 opacity-0 transition-opacity group-hover:opacity-100">
+                {multiple && (
+                  <>
+                    <Button type="button" size="icon" variant="secondary" className="h-6 w-6" onClick={() => move(i, -1)}>
+                      <ArrowUp className="h-3 w-3" />
+                    </Button>
+                    <Button type="button" size="icon" variant="secondary" className="h-6 w-6" onClick={() => move(i, 1)}>
+                      <ArrowDown className="h-3 w-3" />
+                    </Button>
+                  </>
+                )}
+                <Button type="button" size="icon" variant="destructive" className="h-6 w-6" onClick={() => removeAt(i)}>
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        className="hidden"
+        onChange={(e) => handleFiles(e.target.files)}
+      />
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={uploading}
+        onClick={() => inputRef.current?.click()}
+        className="w-full"
+      >
+        {uploading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <ImagePlus className="mr-2 h-4 w-4" />}
+        {label}
+      </Button>
+    </div>
+  );
+}

package/src/commerce/admin/components/MetaDataEditor.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Plus, X } from "lucide-react";
+
+/**
+ * Key/value editor for `meta_data` arrays.
+ * Props: { value: [{key, value}], onChange }
+ */
+export default function MetaDataEditor({ value = [], onChange }) {
+  const setRow = (i, field, v) => {
+    const next = value.map((row, idx) => (idx === i ? { ...row, [field]: v } : row));
+    onChange(next);
+  };
+
+  const removeRow = (i) => onChange(value.filter((_, idx) => idx !== i));
+  const addRow = () => onChange([...(value || []), { key: "", value: "" }]);
+
+  return (
+    <div className="space-y-2">
+      {(value || []).map((row, i) => (
+        <div key={i} className="flex items-center gap-2">
+          <Input
+            placeholder="Key"
+            value={row.key || ""}
+            onChange={(e) => setRow(i, "key", e.target.value)}
+            className="w-1/3"
+          />
+          <Input
+            placeholder="Value"
+            value={row.value || ""}
+            onChange={(e) => setRow(i, "value", e.target.value)}
+            className="flex-1"
+          />
+          <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={() => removeRow(i)}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+      <Button type="button" variant="outline" size="sm" onClick={addRow}>
+        <Plus className="mr-1 h-4 w-4" /> Add field
+      </Button>
+    </div>
+  );
+}

package/src/commerce/admin/components/MoneyInput.jsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import useMoney from "../hooks/useMoney";
+
+/**
+ * Numeric input with the store currency symbol.
+ * Props: { value: number|null, onChange(number|null), placeholder?, disabled?, className? }
+ */
+export default function MoneyInput({ value, onChange, placeholder = "0.00", disabled, className = "" }) {
+  const { symbol } = useMoney();
+  const [text, setText] = useState(value ?? value === 0 ? String(value) : "");
+
+  // Keep local text in sync when the outer value changes (e.g. after save).
+  useEffect(() => {
+    const asNum = text === "" ? null : Number(text);
+    if ((value ?? null) !== (isNaN(asNum) ? null : asNum)) {
+      setText(value === null || value === undefined ? "" : String(value));
+    }
+    // eslint-disable-next-line -- deps intentionally partial
+  }, [value]);
+
+  const handleChange = (e) => {
+    const raw = e.target.value;
+    setText(raw);
+    if (raw.trim() === "") {
+      onChange(null);
+      return;
+    }
+    const num = Number(raw);
+    if (!isNaN(num)) onChange(num);
+  };
+
+  return (
+    <div className={`relative ${className}`}>
+      <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-muted-foreground">
+        {symbol}
+      </span>
+      <Input
+        type="number"
+        step="any"
+        inputMode="decimal"
+        className="pl-9"
+        value={text}
+        onChange={handleChange}
+        placeholder={placeholder}
+        disabled={disabled}
+      />
+    </div>
+  );
+}

package/src/commerce/admin/components/PageHeader.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+/**
+ * Page title row.
+ * Props: { title, description?, actions? (node), backHref? }
+ */
+export default function PageHeader({ title, description, actions, backHref }) {
+  return (
+    <div className="mb-6 flex flex-wrap items-start justify-between gap-3">
+      <div className="flex items-start gap-2">
+        {backHref && (
+          <Button variant="ghost" size="icon" asChild className="mt-0.5 h-8 w-8">
+            <Link to={backHref}>
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+        )}
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+          {description && <p className="mt-0.5 text-sm text-muted-foreground">{description}</p>}
+        </div>
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

package/src/commerce/admin/components/RichTextarea.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Textarea } from "@/components/ui/textarea";
+
+/**
+ * Description editor. Persists plain text / HTML as-is.
+ * Deliberately a plain textarea to avoid a WYSIWYG dependency — swap in your
+ * editor of choice (e.g. TipTap) here if you need rich editing.
+ *
+ * Props: { value, onChange(string), rows?, placeholder? }
+ */
+export default function RichTextarea({ value, onChange, rows = 6, placeholder }) {
+  return (
+    <Textarea
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      rows={rows}
+      placeholder={placeholder}
+      className="font-mono text-sm"
+    />
+  );
+}

package/src/commerce/admin/components/SearchSelect.jsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Check, ChevronsUpDown, Loader2, X } from "lucide-react";
+import useDebounce from "../hooks/useDebounce";
+
+/**
+ * Async searchable picker (single or multi).
+ *
+ * Props:
+ * - search(q) → Promise<[{ value, label, meta? }]>
+ * - value: {value,label} | null   (single)  |  [{value,label}] (multiple)
+ * - onChange(next)
+ * - multiple?: boolean
+ * - placeholder?: string
+ * - disabled?, className?
+ */
+export default function SearchSelect({
+  search,
+  value,
+  onChange,
+  multiple = false,
+  placeholder = "Search…",
+  disabled = false,
+  className = "",
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const debouncedQuery = useDebounce(query, 300);
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    Promise.resolve(search(debouncedQuery))
+      .then((opts) => !cancelled && setOptions(opts || []))
+      .catch(() => !cancelled && setOptions([]))
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [open, debouncedQuery, search]);
+
+  const selectedValues = multiple ? (value || []).map((v) => v.value) : value ? [value.value] : [];
+
+  const pick = (opt) => {
+    if (multiple) {
+      const exists = (value || []).some((v) => v.value === opt.value);
+      onChange(exists ? (value || []).filter((v) => v.value !== opt.value) : [...(value || []), opt]);
+    } else {
+      onChange(value?.value === opt.value ? null : opt);
+      setOpen(false);
+    }
+  };
+
+  const removeChip = (v) => onChange((value || []).filter((x) => x.value !== v));
+
+  return (
+    <div className={className}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            disabled={disabled}
+            className="w-full justify-between font-normal"
+          >
+            <span className="truncate text-left">
+              {multiple
+                ? (value || []).length
+                  ? `${value.length} selected`
+                  : placeholder
+                : value?.label || placeholder}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
+          <Command shouldFilter={false}>
+            <CommandInput placeholder={placeholder} value={query} onValueChange={setQuery} />
+            <CommandList>
+              {loading ? (
+                <div className="flex items-center justify-center py-4">
+                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                </div>
+              ) : (
+                <>
+                  <CommandEmpty>No results.</CommandEmpty>
+                  <CommandGroup>
+                    {options.map((opt) => (
+                      <CommandItem key={opt.value} value={String(opt.value)} onSelect={() => pick(opt)}>
+                        <Check
+                          className={`mr-2 h-4 w-4 ${
+                            selectedValues.includes(opt.value) ? "opacity-100" : "opacity-0"
+                          }`}
+                        />
+                        <div className="min-w-0">
+                          <div className="truncate">{opt.label}</div>
+                          {opt.meta && (
+                            <div className="truncate text-xs text-muted-foreground">{opt.meta}</div>
+                          )}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {multiple && (value || []).length > 0 && (
+        <div className="mt-2 flex flex-wrap gap-1">
+          {value.map((v) => (
+            <Badge key={v.value} variant="secondary" className="gap-1 pr-1">
+              {v.label}
+              <button
+                type="button"
+                onClick={() => removeChip(v.value)}
+                className="rounded-full p-0.5 hover:bg-muted-foreground/20"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/commerce/admin/components/StatusBadge.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Badge } from "@/components/ui/badge";
+import { ORDER_STATUSES, statusMeta } from "../lib/constants";
+
+/**
+ * Colored status pill.
+ * Props: { status, map? } — `map` defaults to ORDER_STATUSES; pass
+ * REVIEW_STATUSES / WEBHOOK_STATUSES / STOCK_STATUSES for other domains.
+ */
+export default function StatusBadge({ status, map = ORDER_STATUSES, className = "" }) {
+  const meta = statusMeta(map, status);
+  return (
+    <Badge variant="outline" className={`${meta.color} ${className}`}>
+      {meta.label}
+    </Badge>
+  );
+}

package/src/commerce/admin/context/BasePathContext.jsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext } from "react";
+import { normalizeBasePath } from "../lib/paths";
+
+/**
+ * The URL prefix the admin app is mounted under (default `/admin`).
+ * All internal links are built from this, so the admin folder works no matter
+ * where the consumer mounts it: `<AdminApp basePath="/backoffice" />`.
+ */
+const BasePathContext = createContext("/admin");
+
+export function BasePathProvider({ value = "/admin", children }) {
+  // normalizeBasePath also tolerates the route *pattern* being passed in
+  // (`basePath="/admin/*"`), an easy copy/paste slip from the mount — every
+  // internal link would otherwise carry a literal "*" segment.
+  return <BasePathContext.Provider value={normalizeBasePath(value)}>{children}</BasePathContext.Provider>;
+}
+
+export function useBasePath() {
+  return useContext(BasePathContext);
+}
+
+/** Returns a builder: href("orders/123") → "/admin/orders/123"; href() → "/admin". */
+export function useAdminHref() {
+  const base = useBasePath();
+  return (path = "") => (path ? `${base}/${String(path).replace(/^\/+/, "")}` : base);
+}

package/src/commerce/admin/context/SettingsContext.jsx

@@ -0,0 +1,207 @@
+import React, { createContext, useContext, useEffect, useState, useCallback } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Label } from "@/components/ui/label";
+import { Loader2, Store } from "lucide-react";
+import { toast } from "sonner";
+import { base44, call } from "../lib/api";
+
+const SettingsCtx = createContext(null);
+
+export function useSettings() {
+  return useContext(SettingsCtx);
+}
+
+/**
+ * Loads all StoreSettings groups once and exposes:
+ *   { settings, recordIds, get(group, key, fallback), saveGroup(group, values), refresh, isSeeded, loading }
+ * When the store is not seeded (no `general` group), renders the first-run
+ * SetupScreen instead of children.
+ */
+export function SettingsProvider({ children }) {
+  const [state, setState] = useState({ loading: true, groups: {}, ids: {} });
+
+  const load = useCallback(async () => {
+    try {
+      const records = await base44.entities["commerce.StoreSettings"].list(undefined, 100);
+      const groups = {};
+      const ids = {};
+      (records || []).forEach((r) => {
+        groups[r.group_id] = r.values || {};
+        ids[r.group_id] = r.id;
+      });
+      setState({ loading: false, groups, ids });
+    } catch (err) {
+      setState({ loading: false, groups: {}, ids: {}, error: err });
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const get = useCallback(
+    (group, key, fallback) => {
+      const v = state.groups?.[group]?.[key];
+      return v === undefined || v === null ? fallback : v;
+    },
+    [state.groups]
+  );
+
+  const saveGroup = useCallback(
+    async (group, values) => {
+      const id = state.ids[group];
+      if (id) await base44.entities["commerce.StoreSettings"].update(id, { values });
+      else await base44.entities["commerce.StoreSettings"].create({ group_id: group, values });
+      await load();
+    },
+    [state.ids, load]
+  );
+
+  const isSeeded = !!state.groups.general;
+  const value = {
+    loading: state.loading,
+    settings: state.groups,
+    recordIds: state.ids,
+    get,
+    saveGroup,
+    refresh: load,
+    isSeeded,
+  };
+
+  if (state.loading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!isSeeded) {
+    return (
+      <SettingsCtx.Provider value={value}>
+        <SetupScreen onDone={load} />
+      </SettingsCtx.Provider>
+    );
+  }
+
+  return <SettingsCtx.Provider value={value}>{children}</SettingsCtx.Provider>;
+}
+
+/** The app's name as the browser knows it, ignoring the platform's placeholder title. */
+function appName() {
+  const title = (typeof document === "undefined" ? "" : document.title || "").trim();
+  return /^base44( app)?$/i.test(title) ? "" : title;
+}
+
+/** First-run screen: initialize store defaults via the commerce/seed-store function. */
+function SetupScreen({ onDone }) {
+  const [hasProducts, setHasProducts] = useState(null);
+  const [withSample, setWithSample] = useState(false);
+  // Nothing the backend can read carries the app's name (a function's env is
+  // only BASE44_APP_ID), so the store name has to come from here.
+  const [storeName, setStoreName] = useState(() => appName());
+  const [running, setRunning] = useState(false);
+  const [schemaErrors, setSchemaErrors] = useState(null);
+
+  useEffect(() => {
+    base44.entities["commerce.Product"].list(undefined, 1)
+      .then((rows) => setHasProducts((rows || []).length > 0))
+      .catch(() => setHasProducts(true)); // on error, hide the sample-data option
+  }, []);
+
+  const run = async () => {
+    setRunning(true);
+    setSchemaErrors(null);
+    try {
+      await call("seed-store", null, { with_sample_data: withSample, store_name: storeName.trim() }, { silent: true });
+      toast.success("Store defaults initialized");
+      onDone();
+    } catch (err) {
+      if (err.code === "schema_incompatible") {
+        setSchemaErrors(err.details?.errors || [{ entity: "unknown", error: err.message }]);
+      } else {
+        toast.error(err.message);
+      }
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted/30 p-4">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+            <Store className="h-5 w-5 text-primary" />
+          </div>
+          <CardTitle>Set up your store</CardTitle>
+          <CardDescription>
+            This looks like a fresh installation. Initialize the store with default
+            settings (currency, tax classes, payment methods, shipping zone and
+            email configuration) to start using the admin.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="store-name">Store name</Label>
+            <Input
+              id="store-name"
+              value={storeName}
+              placeholder="Your store's name"
+              onChange={(e) => setStoreName(e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground">
+              Shown to customers and used as the sender name on every transactional email.
+              Editable later in Settings → General.
+            </p>
+          </div>
+          {hasProducts === false && (
+            <div className="flex items-start gap-2 rounded-md border p-3">
+              <Checkbox
+                id="with-sample"
+                checked={withSample}
+                onCheckedChange={(v) => setWithSample(!!v)}
+              />
+              <div className="grid gap-1">
+                <Label htmlFor="with-sample" className="cursor-pointer">
+                  Include sample data
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Adds demo categories, products (simple, variable, downloadable,
+                  external, grouped) and coupons so you can explore the admin.
+                </p>
+              </div>
+            </div>
+          )}
+          {schemaErrors && (
+            <Alert variant="destructive">
+              <AlertTitle>Entity schemas are incompatible</AlertTitle>
+              <AlertDescription>
+                <p className="mb-2">
+                  The entity schemas in this app have been modified in a way that
+                  prevents seeding. Restore the template schemas or fix the fields
+                  below, then retry.
+                </p>
+                <ul className="list-disc space-y-1 pl-4 text-xs">
+                  {schemaErrors.map((e, i) => (
+                    <li key={i}>
+                      <span className="font-semibold">{e.entity}</span>: {e.error}
+                    </li>
+                  ))}
+                </ul>
+              </AlertDescription>
+            </Alert>
+          )}
+          <Button onClick={run} disabled={running || !storeName.trim()} className="w-full">
+            {running && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Initialize store defaults
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}