@base44/app-plugin-commerce 0.1.5 → 0.1.7

package/src/commerce/admin/pages/coupons/CouponEditor.jsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
@@ -29,6 +30,7 @@ import ConfirmDialog from "../../components/ConfirmDialog";
 
 const EMPTY = {
   code: "",
+  enabled: true,
   discount_type: "fixed_cart",
   amount: null,
   description: "",
@@ -48,12 +50,6 @@ const EMPTY = {
   limit_usage_to_x_items: null,
 };
 
-const TABS = [
-  { id: "general", label: "General" },
-  { id: "restriction", label: "Usage restriction" },
-  { id: "limits", label: "Usage limits" },
-];
-
 const randomCode = () =>
   Array.from(crypto.getRandomValues(new Uint8Array(8)))
     .map((b) => "abcdefghijklmnopqrstuvwxyz0123456789"[b % 36])
@@ -132,7 +128,6 @@ export default function CouponEditor() {
   const [saving, setSaving] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
-  const [tab, setTab] = useState("general");
 
   // Selected options with labels for the pickers.
   const [productOpts, setProductOpts] = useState({ include: [], exclude: [] });
@@ -284,95 +279,80 @@ export default function CouponEditor() {
             </CardContent>
           </Card>
 
-          {/* Coupon data: vertical tabs */}
+          {/* Coupon data: stacked cards, like the product editor's sections */}
           <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="text-base">Coupon data</CardTitle>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">General</CardTitle>
             </CardHeader>
-            <CardContent className="p-0">
-              <div className="flex min-h-72 flex-col sm:flex-row">
-                <div className="flex shrink-0 flex-row gap-1 border-b p-2 sm:w-44 sm:flex-col sm:border-b-0 sm:border-r">
-                  {TABS.map((t) => (
-                    <Button
-                      key={t.id}
-                      variant={tab === t.id ? "secondary" : "ghost"}
-                      size="sm"
-                      className="justify-start"
-                      onClick={() => setTab(t.id)}
-                    >
-                      {t.label}
-                    </Button>
-                  ))}
-                </div>
-
-                <div className="flex-1 space-y-4 p-4">
-                  {tab === "general" && (
-                    <>
-                      <div className="grid gap-1.5 sm:max-w-sm">
-                        <Label>Discount type</Label>
-                        <Select value={coupon.discount_type} onValueChange={set("discount_type")}>
-                          <SelectTrigger>
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {COUPON_TYPES.map((t) => (
-                              <SelectItem key={t.value} value={t.value}>
-                                {t.label}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </div>
-                      <div className="grid gap-1.5 sm:max-w-sm">
-                        <Label>Coupon amount {isPercent ? "(%)" : ""}</Label>
-                        {isPercent ? (
-                          <div className="relative">
-                            <Input
-                              type="number"
-                              min="0"
-                              max="100"
-                              step="any"
-                              value={coupon.amount ?? ""}
-                              onChange={(e) =>
-                                set("amount")(e.target.value === "" ? null : Number(e.target.value))
-                              }
-                              className="pr-8"
-                            />
-                            <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm text-muted-foreground">
-                              %
-                            </span>
-                          </div>
-                        ) : (
-                          <MoneyInput value={coupon.amount} onChange={set("amount")} />
-                        )}
-                      </div>
-                      <label className="flex items-start gap-2 text-sm">
-                        <Checkbox
-                          checked={!!coupon.free_shipping}
-                          onCheckedChange={(v) => set("free_shipping")(!!v)}
-                          className="mt-0.5"
-                        />
-                        <span>
-                          Allow free shipping
-                          <span className="block text-xs text-muted-foreground">
-                            Grants access to free-shipping methods that require a coupon.
-                          </span>
-                        </span>
-                      </label>
-                      <div className="grid gap-1.5 sm:max-w-sm">
-                        <Label>Coupon expiry date</Label>
-                        <Input
-                          type="date"
-                          value={coupon.date_expires ? coupon.date_expires.slice(0, 10) : ""}
-                          onChange={(e) => set("date_expires")(e.target.value || null)}
-                        />
-                      </div>
-                    </>
-                  )}
+            <CardContent className="space-y-4">
+              <div className="grid gap-1.5 sm:max-w-sm">
+                <Label>Discount type</Label>
+                <Select value={coupon.discount_type} onValueChange={set("discount_type")}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {COUPON_TYPES.map((t) => (
+                      <SelectItem key={t.value} value={t.value}>
+                        {t.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="grid gap-1.5 sm:max-w-sm">
+                <Label>Coupon amount {isPercent ? "(%)" : ""}</Label>
+                {isPercent ? (
+                  <div className="relative">
+                    <Input
+                      type="number"
+                      min="0"
+                      max="100"
+                      step="any"
+                      value={coupon.amount ?? ""}
+                      onChange={(e) =>
+                        set("amount")(e.target.value === "" ? null : Number(e.target.value))
+                      }
+                      className="pr-8"
+                    />
+                    <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm text-muted-foreground">
+                      %
+                    </span>
+                  </div>
+                ) : (
+                  <MoneyInput value={coupon.amount} onChange={set("amount")} />
+                )}
+              </div>
+              <label className="flex items-start gap-2 text-sm">
+                <Checkbox
+                  checked={!!coupon.free_shipping}
+                  onCheckedChange={(v) => set("free_shipping")(!!v)}
+                  className="mt-0.5"
+                />
+                <span>
+                  Allow free shipping
+                  <span className="block text-xs text-muted-foreground">
+                    Grants access to free-shipping methods that require a coupon.
+                  </span>
+                </span>
+              </label>
+              <div className="grid gap-1.5 sm:max-w-sm">
+                <Label>Coupon expiry date</Label>
+                <Input
+                  type="date"
+                  value={coupon.date_expires ? coupon.date_expires.slice(0, 10) : ""}
+                  onChange={(e) => set("date_expires")(e.target.value || null)}
+                />
+              </div>
+            </CardContent>
+          </Card>
 
-                  {tab === "restriction" && (
-                    <>
-                      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">Usage restriction</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                         <div className="grid gap-1.5">
                           <Label>Minimum spend ({money.code})</Label>
                           <MoneyInput
@@ -467,54 +447,53 @@ export default function CouponEditor() {
                           />
                         </div>
                       </div>
-                      <div className="grid gap-1.5">
-                        <Label>Allowed emails</Label>
-                        <EmailChips
-                          value={coupon.email_restrictions || []}
-                          onChange={set("email_restrictions")}
-                        />
-                        <p className="text-xs text-muted-foreground">
-                          Only these billing emails can use the coupon. Wildcards like{" "}
-                          <code>*@example.com</code> are allowed.
-                        </p>
-                      </div>
-                    </>
-                  )}
+              <div className="grid gap-1.5">
+                <Label>Allowed emails</Label>
+                <EmailChips
+                  value={coupon.email_restrictions || []}
+                  onChange={set("email_restrictions")}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Only these billing emails can use the coupon. Wildcards like{" "}
+                  <code>*@example.com</code> are allowed.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
 
-                  {tab === "limits" && (
-                    <div className="max-w-sm space-y-4">
-                      <div className="grid gap-1.5">
-                        <Label>Usage limit per coupon</Label>
-                        <NumberField value={coupon.usage_limit} onChange={set("usage_limit")} />
-                        <p className="text-xs text-muted-foreground">
-                          How many times the coupon can be used in total.
-                        </p>
-                      </div>
-                      <div className="grid gap-1.5">
-                        <Label>Limit usage to X items</Label>
-                        <NumberField
-                          value={coupon.limit_usage_to_x_items}
-                          onChange={set("limit_usage_to_x_items")}
-                          placeholder="Apply to all qualifying items"
-                        />
-                        <p className="text-xs text-muted-foreground">
-                          Maximum number of individual items the coupon applies to (product
-                          discounts).
-                        </p>
-                      </div>
-                      <div className="grid gap-1.5">
-                        <Label>Usage limit per user</Label>
-                        <NumberField
-                          value={coupon.usage_limit_per_user}
-                          onChange={set("usage_limit_per_user")}
-                        />
-                        <p className="text-xs text-muted-foreground">
-                          How many times a single customer (by billing email) can use it.
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                </div>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">Usage limits</CardTitle>
+            </CardHeader>
+            <CardContent className="max-w-sm space-y-4">
+              <div className="grid gap-1.5">
+                <Label>Usage limit per coupon</Label>
+                <NumberField value={coupon.usage_limit} onChange={set("usage_limit")} />
+                <p className="text-xs text-muted-foreground">
+                  How many times the coupon can be used in total.
+                </p>
+              </div>
+              <div className="grid gap-1.5">
+                <Label>Limit usage to X items</Label>
+                <NumberField
+                  value={coupon.limit_usage_to_x_items}
+                  onChange={set("limit_usage_to_x_items")}
+                  placeholder="Apply to all qualifying items"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Maximum number of individual items the coupon applies to (product
+                  discounts).
+                </p>
+              </div>
+              <div className="grid gap-1.5">
+                <Label>Usage limit per user</Label>
+                <NumberField
+                  value={coupon.usage_limit_per_user}
+                  onChange={set("usage_limit_per_user")}
+                />
+                <p className="text-xs text-muted-foreground">
+                  How many times a single customer (by billing email) can use it.
+                </p>
               </div>
             </CardContent>
           </Card>
@@ -527,6 +506,18 @@ export default function CouponEditor() {
               <CardTitle className="text-base">Publish</CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
+              <label className="flex items-center justify-between text-sm font-medium">
+                Enabled
+                <Switch
+                  checked={coupon.enabled !== false}
+                  onCheckedChange={(v) => set("enabled")(!!v)}
+                />
+              </label>
+              {coupon.enabled === false && (
+                <p className="text-xs text-muted-foreground">
+                  Disabled — customers can't apply this coupon, and carts holding it drop it.
+                </p>
+              )}
               {!isNew && (
                 <p className="text-sm text-muted-foreground">
                   Used: <span className="font-medium text-foreground">{coupon.usage_count ?? 0}</span>{" "}

package/src/commerce/admin/pages/coupons/CouponsList.jsx

@@ -73,13 +73,20 @@ export default function CouponsList() {
       label: "Code",
       sortable: !debouncedQuery,
       render: (c) => (
-        <Link
-          to={href(`coupons/${c.id}`)}
-          className="inline-block rounded bg-muted px-2 py-0.5 font-mono text-xs font-semibold uppercase tracking-wide hover:bg-muted/70"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {c.code}
-        </Link>
+        <span className="inline-flex items-center gap-2">
+          <Link
+            to={href(`coupons/${c.id}`)}
+            className="inline-block rounded bg-muted px-2 py-0.5 font-mono text-xs font-semibold uppercase tracking-wide hover:bg-muted/70"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {c.code}
+          </Link>
+          {c.enabled === false && (
+            <span className="rounded border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+              Disabled
+            </span>
+          )}
+        </span>
       ),
     },
     {

package/src/commerce/admin/pages/orders/OrderEditor.jsx

@@ -410,7 +410,7 @@ export default function OrderEditor() {
       sku: variation?.sku || product.sku || "",
       quantity,
       price,
-      tax_class: variation?.tax_class || product.tax_class || "standard",
+      tax_group: product.tax_group || "Products",
       subtotal: price * quantity,
       subtotal_tax: 0,
       total: price * quantity,
@@ -797,7 +797,7 @@ export default function OrderEditor() {
           patchDraft({
             fee_lines: [
               ...(draft.fee_lines || []),
-              { line_id: uid(), name, total: amount, total_tax: 0, tax_status: "taxable", tax_class: "standard" },
+              { line_id: uid(), name, total: amount, total_tax: 0, tax_status: "taxable", tax_group: "Products" },
             ],
           })
         }
@@ -812,7 +812,7 @@ export default function OrderEditor() {
           patchDraft({
             shipping_lines: [
               ...(draft.shipping_lines || []),
-              { line_id: uid(), method_id: "flat_rate", instance_id: "", method_title: name, total: amount, total_tax: 0, taxes: [] },
+              { line_id: uid(), method_id: "rate", instance_id: "", method_title: name, total: amount, total_tax: 0, taxes: [] },
             ],
           })
         }

package/src/commerce/admin/pages/orders/components/PaymentPanel.jsx

@@ -8,38 +8,35 @@ import { toast } from "sonner";
 
 import { call } from "../../../lib/api";
 import useMoney from "../../../hooks/useMoney";
-import usePaymentProvider from "../../../hooks/usePaymentProvider";
 import { formatDateTime } from "../../../lib/format";
 
+/** The one gateway slug that pays online (see shared/commerce/payments.ts). */
+const CARD_SLUG = "card";
+
 /**
  * Payment state for an order, plus the two things an operator wants when an
  * order is unpaid: a **payment link** to send the customer, and a way to
  * **re-check** whether the money arrived.
  *
- * Both come from `commerce/payments`, which is provider-neutral — this panel
- * never names a payment provider. When none is connected the actions are
- * disabled with a "No payment provider connected" tooltip rather than being
- * hidden, so the operator can see the capability exists and what unlocks it.
+ * Both come from `commerce/payments`. When the store has no card payment
+ * provider implemented, the backend answers with a clear error — the buttons
+ * stay available so the operator learns what unlocks them.
  *
  * Props: { order, onChanged }
  */
 export default function PaymentPanel({ order, onChanged }) {
   const { format } = useMoney();
-  const provider = usePaymentProvider();
   const [working, setWorking] = useState(""); // link | verify
   const [link, setLink] = useState("");
   const [copied, setCopied] = useState(false);
 
   const paid = Boolean(order.date_paid) || ["processing", "completed", "refunded"].includes(order.status);
-  const known = !provider.loading && Boolean(provider.gatewaySlug);
-  const isOnline = known && order.payment_method === provider.gatewaySlug;
-  // With a provider connected, an unpaid order can always be collected online —
-  // whatever its current method is. An admin order starts with no method at all,
-  // and "just send them a card link" is a normal thing to want for a manual one;
-  // the backend records the switch on the order.
-  const canAct = provider.connected && !paid;
-  const willSwitchMethod = canAct && known && !isOnline;
-  const disabledReason = !provider.connected ? "No payment provider connected" : undefined;
+  const isCard = order.payment_method === CARD_SLUG;
+  // An unpaid order can always be collected by card, whatever its current
+  // method — an admin order starts with no method at all, and "just send them
+  // a card link" is a normal thing to want for a manual one; the backend
+  // records the switch on the order.
+  const willSwitchMethod = !paid && !isCard;
 
   const createLink = async () => {
     setWorking("link");
@@ -117,22 +114,21 @@ export default function PaymentPanel({ order, onChanged }) {
           )}
         </dl>
 
-        {known && !isOnline && !paid && !provider.connected && (
+        {!paid && !isCard && (
           <p className="text-xs text-muted-foreground">
             {order.payment_method
               ? `This order is set to be paid outside the store (${order.payment_method_title || order.payment_method}), so mark it paid by moving it to Processing once the money arrives.`
-              : "No payment method is set on this order. Take payment outside the store and move it to Processing, or connect a payment provider to send the customer a payment link."}
+              : "No payment method is set on this order. Take payment outside the store and move it to Processing, or send the customer a payment link."}
           </p>
         )}
 
-        {!paid && (provider.connected || isOnline) && (
+        {!paid && (
           <>
             <div className="flex flex-wrap gap-2">
               <Button
                 variant="outline"
                 size="sm"
-                disabled={!canAct || Boolean(working) || provider.loading}
-                title={disabledReason}
+                disabled={Boolean(working)}
                 onClick={createLink}
               >
                 {working === "link" ? (
@@ -145,8 +141,7 @@ export default function PaymentPanel({ order, onChanged }) {
               <Button
                 variant="outline"
                 size="sm"
-                disabled={!canAct || Boolean(working) || provider.loading}
-                title={disabledReason}
+                disabled={Boolean(working)}
                 onClick={checkPayment}
               >
                 {working === "verify" ? (
@@ -158,12 +153,6 @@ export default function PaymentPanel({ order, onChanged }) {
               </Button>
             </div>
 
-            {!provider.connected && !provider.loading && (
-              <p className="text-xs text-muted-foreground">
-                No payment provider is connected, so this order can't be paid online yet.
-              </p>
-            )}
-
             {willSwitchMethod && !link && (
               <p className="text-xs text-muted-foreground">
                 {order.payment_method

package/src/commerce/admin/pages/orders/components/RefundPanel.jsx

@@ -16,7 +16,6 @@ import { toast } from "sonner";
 
 import { call } from "../../../lib/api";
 import useMoney from "../../../hooks/useMoney";
-import usePaymentProvider from "../../../hooks/usePaymentProvider";
 import { formatDate } from "../../../lib/format";
 import { refundableQty, refundableAmount, round2 } from "../../../lib/order-utils";
 
@@ -33,15 +32,12 @@ export default function RefundPanel({ order, refunds, onDone }) {
   const [restock, setRestock] = useState(true);
   const [viaGateway, setViaGateway] = useState(false);
   const [busy, setBusy] = useState(false);
-  const provider = usePaymentProvider();
 
   const maxRefund = refundableAmount(order);
   // Refunding through the provider is only possible when the order was actually
-  // paid online and a provider is connected — otherwise the money was taken
-  // outside the store and has to go back the same way.
-  const canRefundOnline = Boolean(
-    provider.connected && order.payment_method === provider.gatewaySlug && order.transaction_id,
-  );
+  // paid by card and a payment reference is on record — otherwise the money was
+  // taken outside the store and has to go back the same way.
+  const canRefundOnline = Boolean(order.payment_method === "card" && order.transaction_id);
 
   const unitNet = (line) => (line.quantity ? (line.total || 0) / line.quantity : 0);
 
@@ -182,15 +178,13 @@ export default function RefundPanel({ order, refunds, onDone }) {
           <Checkbox checked={restock} onCheckedChange={(v) => setRestock(Boolean(v))} />
           Restock refunded items
         </label>
-        {order.payment_method === provider.gatewaySlug && (
+        {order.payment_method === "card" && (
           <label
             className={`flex items-center gap-2 text-sm ${canRefundOnline ? "" : "text-muted-foreground"}`}
             title={
               canRefundOnline
                 ? undefined
-                : provider.connected
-                  ? "This order has no online payment on record to refund"
-                  : "No payment provider connected"
+                : "This order has no card payment on record to refund"
             }
           >
             <Checkbox