@aglyn/plugins-commerce 1.0.0-beta.230 → 1.0.0-beta.231

package/src/lib/components/console/order-detail-dialog.component.js

@@ -15,6 +15,7 @@
  * limitations under the License.
  */ 'use client';
 import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as CommerceModel from "../../model/index.js";
 import { escapeHtml } from "../../utils/escape-html.js";
@@ -30,9 +31,16 @@ import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Stack, TextField, Tooltip, Typography } from "@mui/material";
 import { doc, runTransaction, updateDoc } from "firebase/firestore";
 import { useParams } from "next/navigation";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFirestore, useUser } from "@aglyn/tenant-feature-instance";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot-context";
+import { consoleOrderZoneOrder, FulfillItemsPanel, FulfillmentList, toZoneFulfillment } from "./order-fulfillment-panel.component.js";
+import { ORDER_DETAIL_ZONE, ORDER_FULFILLMENT_ZONE } from "./order-zones.js";
+import { OrderInvoiceButton } from "./order-invoice.component.js";
+import { OrderReceiptResend } from "./order-receipt-resend.component.js";
+import { OrderReturns } from "./order-returns.component.js";
+import { PosReceiptActions } from "./pos-ops/pos-receipt-actions.component.js";
 const STATUS_COLOR = {
     pending: 'warning',
     paid: 'info',
@@ -56,20 +64,36 @@ const STATUS_COLOR = {
     settled: 'default'
 };
 const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
+/**
+ * A zone hosted in the dialog, drawn again only when what it is handed
+ * changes — the product editor's reasoning (AGL-3423): the shell's renderer
+ * is not memoized, and the dialog redraws on every keystroke in its fields.
+ */ const HostedZone = /*#__PURE__*/ memo(function HostedZone(props) {
+    const { renderer: Renderer } = props, zone = _object_without_properties_loose(props, [
+        "renderer"
+    ]);
+    return /*#__PURE__*/ _jsx(Renderer, _extends({}, zone));
+});
+/** A fresh key for one attempt at a write the route dedupes on. */ const newAttemptKey = ()=>{
+    var _ref;
+    var _globalThis_crypto_randomUUID, _globalThis_crypto;
+    return (_ref = (_globalThis_crypto = globalThis.crypto) == null ? void 0 : (_globalThis_crypto_randomUUID = _globalThis_crypto.randomUUID) == null ? void 0 : _globalThis_crypto_randomUUID.call(_globalThis_crypto)) != null ? _ref : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+};
 /**
  * Order detail (AGL-287): timeline, line items, totals, and the actions
  * the status machine allows — fulfill with tracking, refund, cancel, mark
  * delivered (each a server route that re-asks the transition under the
  * write), notes, printable packing slip.
  */ export function OrderDetailDialog(props) {
-    var _STATUS_COLOR_order_status, _order_lineItems, _order_timeline;
+    var _STATUS_COLOR_order_status, _order_lineItems, _order_extras, _order_timeline;
     var _restock_lines;
     const { hostId, order: rawOrder, onClose } = props;
     const firestore = useFirestore();
     const { data: user } = useUser();
     const { enqueueSnackbar } = useSnackbar();
     const { confirm } = useConfirmationContext();
-    const [tracking, setTracking] = useState(null);
+    const [fulfilling, setFulfilling] = useState(false);
+    const WidgetSlot = useConsoleWidgetSlot();
     const [note, setNote] = useState('');
     const [busy, setBusy] = useState(false);
     const order = rawOrder ? CommerceModel.liftLegacyOrder(rawOrder) : null;
@@ -124,7 +148,7 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
    * case because the route writes once: a repeat finds the order already in
    * the target status and returns `already` without appending a second copy
    * of the same fulfillment.
-   */ const transition = useCallback(async (to, extra, copy)=>{
+   */ const transition = useCallback(async (to, extra, copy, headers = {})=>{
         if (!orderId) return false;
         setBusy(true);
         try {
@@ -132,14 +156,15 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
             try {
                 response = await authorizedFetch(user, '/api/commerce/fulfill-order', {
                     method: 'POST',
-                    headers: {
+                    headers: _extends({
                         'Content-Type': 'application/json'
-                    },
+                    }, headers),
                     body: JSON.stringify(_extends({
                         hostId,
-                        orderId,
+                        orderId
+                    }, to ? {
                         to
-                    }, extra))
+                    } : {}, extra))
                 });
             } catch (error) {
                 console.error(error);
@@ -156,7 +181,7 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
                     // The transition guard refusing: the order moved on (refunded,
                     // cancelled) while this dialog was open. The route's message
                     // names the state that refused it, and nothing was written.
-                    enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : `This order can no longer be ${to}`, {
+                    enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : `This order can no longer be ${to != null ? to : 'changed'}`, {
                         variant: 'warning',
                         allowDuplicate: true
                     });
@@ -184,11 +209,11 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
                 }
                 return false;
             }
-            enqueueSnackbar((payload == null ? void 0 : payload.already) ? copy.already : copy.done, {
+            enqueueSnackbar((payload == null ? void 0 : payload.already) ? copy.already : (payload == null ? void 0 : payload.status) === 'partially_fulfilled' && copy.partial ? copy.partial : copy.done, {
                 variant: 'success',
                 persist: false
             });
-            return true;
+            return payload != null ? payload : {};
         } finally{
             setBusy(false);
         }
@@ -198,26 +223,125 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
         hostId,
         enqueueSnackbar
     ]);
-    const handleFulfill = useCallback(async ()=>{
-        if (!order || !tracking) return;
-        const done = await transition('fulfilled', _extends({}, tracking.carrier ? {
-            carrier: tracking.carrier
-        } : {}, tracking.number ? {
-            trackingNumber: tracking.number
-        } : {}), {
+    /**
+   * One key per shipment attempt (AGL-3611), the refund's shape: a partial
+   * shipment leaves the order open to more, so "already in the target
+   * status" cannot catch its retry — the key does. Retired on a definitive
+   * answer; kept across a network failure or a 5xx, the window it covers.
+   */ const fulfillKey = useRef('');
+    useEffect(()=>{
+        fulfillKey.current = '';
+    }, [
+        orderId
+    ]);
+    const fulfill = useCallback(async (submission, key)=>{
+        const payload = await transition('fulfilled', _extends({}, submission.lineItems ? {
+            lineItems: submission.lineItems
+        } : {}, submission.carrier ? {
+            carrier: submission.carrier
+        } : {}, submission.trackingNumber ? {
+            trackingNumber: submission.trackingNumber
+        } : {}, submission.trackingUrl ? {
+            trackingUrl: submission.trackingUrl
+        } : {}, submission.labelUrl ? {
+            labelUrl: submission.labelUrl
+        } : {}, submission.notify ? {} : {
+            notify: false
+        }), {
             done: 'Order fulfilled',
+            partial: 'Items fulfilled — the rest are still to ship',
             already: 'Order was already fulfilled',
             subject: 'the order was fulfilled',
             action: 'fulfillment'
+        }, {
+            'Idempotency-Key': key
         });
+        return payload;
+    }, [
+        transition
+    ]);
+    const handleFulfill = useCallback(async (submission)=>{
+        if (!order) return false;
+        if (!fulfillKey.current) fulfillKey.current = newAttemptKey();
+        const payload = await fulfill(submission, fulfillKey.current);
         // The refused or unknown case keeps the form open — there is nothing to
         // celebrate, and the tracking is not yet recorded anywhere.
-        if (done) setTracking(null);
+        if (payload) {
+            fulfillKey.current = '';
+            setFulfilling(false);
+        }
+        return Boolean(payload);
     }, [
         order,
-        tracking,
+        fulfill
+    ]);
+    const handleUpdateTracking = useCallback(async (fulfillmentId, next)=>Boolean(await transition(null, _extends({
+            action: 'update-tracking',
+            fulfillmentId
+        }, next), {
+            done: 'Tracking updated',
+            already: 'Tracking was already up to date',
+            subject: 'the tracking was updated',
+            action: 'tracking update'
+        })), [
         transition
     ]);
+    const handleCancelFulfillment = useCallback(async (fulfillmentId)=>{
+        const confirmed = await confirm({
+            title: 'Cancel this shipment?',
+            description: 'Its items go back to unfulfilled and can be shipped again. The buyer is not told.',
+            confirmationText: 'Cancel shipment',
+            confirmationButtonProps: {
+                color: 'error'
+            }
+        }).then(()=>true).catch(()=>false);
+        if (!confirmed) return;
+        await transition(null, {
+            action: 'cancel-fulfillment',
+            fulfillmentId
+        }, {
+            done: 'Shipment canceled',
+            already: 'Shipment was already canceled',
+            subject: 'the shipment was canceled',
+            action: 'shipment cancel'
+        });
+    }, [
+        confirm,
+        transition
+    ]);
+    /**
+   * A widget's shipment (the zones' `recordFulfillment`): the same route,
+   * keyed by the widget's own attempt key, and a throw with the route's words
+   * when it refuses, so the widget can tell the merchant why.
+   */ const recordFulfillment = useCallback(async (request)=>{
+        var _request_carrier, _request_trackingNumber;
+        const payload = await fulfill(_extends({}, request.lineItems ? {
+            lineItems: request.lineItems.map((entry)=>_extends({}, entry))
+        } : {}, {
+            carrier: String((_request_carrier = request.carrier) != null ? _request_carrier : ''),
+            trackingNumber: String((_request_trackingNumber = request.trackingNumber) != null ? _request_trackingNumber : '')
+        }, request.trackingUrl ? {
+            trackingUrl: request.trackingUrl
+        } : {}, request.labelUrl ? {
+            labelUrl: request.labelUrl
+        } : {}, {
+            notify: request.notify !== false
+        }), String(request.idempotencyKey || newAttemptKey()));
+        if (!payload || !payload.fulfillment || !order) {
+            throw new Error('The shipment was not recorded. Check the order and try again.');
+        }
+        setFulfilling(false);
+        return toZoneFulfillment(order, payload.fulfillment);
+    }, [
+        fulfill,
+        order
+    ]);
+    const zoneOrder = useMemo(()=>order && orderId ? consoleOrderZoneOrder(order, orderId) : null, // `rawOrder` is the snapshot; `order` is derived from it on each render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        rawOrder,
+        orderId
+    ]);
     const handleDelivered = useCallback(async ()=>{
         if (!order) return;
         await transition('delivered', {}, {
@@ -600,6 +724,7 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
     // the order's own withdrawal record rather than of a flag on the check, so a
     // prompt written before line indexes existed reads as the amount-only case
     // it was.
+    const fulfilledByLine = CommerceModel.orderLineFulfillmentStates(order).map((state)=>state.fulfilledQuantity);
     const restockLinesNamed = Boolean((restock == null ? void 0 : (_restock_lines = restock.lines) == null ? void 0 : _restock_lines.length) && restock.lines.every((line)=>line.lineIndex != null && CommerceModel.orderLineRefunded(order, line.lineIndex)));
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: true,
@@ -688,6 +813,11 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
                                     color: withdrawn ? 'text.secondary' : 'text.primary',
                                     children: `${line.quantity}× ${line.name}` + (line.variantLabel ? ` — ${line.variantLabel}` : '')
                                 }),
+                                fulfilledByLine[index] ? /*#__PURE__*/ _jsx(Chip, {
+                                    label: `${fulfilledByLine[index]} of ${line.quantity} fulfilled`,
+                                    size: "small",
+                                    variant: "outlined"
+                                }) : null,
                                 withdrawn ? /*#__PURE__*/ _jsx(Chip, {
                                     label: "refunded",
                                     size: "small",
@@ -729,6 +859,11 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
                                     'Shipping',
                                     totals.shippingCents
                                 ],
+                                // Optional lines the buyer took at checkout (AGL-3635), by name.
+                                ...((_order_extras = order.extras) != null ? _order_extras : []).map((extra)=>[
+                                        extra.label,
+                                        extra.amountCents
+                                    ]),
                                 [
                                     'Tax',
                                     totals.taxCents
@@ -866,42 +1001,40 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
                             })
                         ]
                     }),
-                    tracking ? /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        children: [
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "Carrier",
-                                value: tracking.carrier,
-                                onChange: (event)=>setTracking(_extends({}, tracking, {
-                                        carrier: event.target.value
-                                    })),
-                                size: "small",
-                                sx: {
-                                    width: 140
-                                },
-                                placeholder: "UPS"
-                            }),
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "Tracking number",
-                                value: tracking.number,
-                                onChange: (event)=>setTracking(_extends({}, tracking, {
-                                        number: event.target.value
-                                    })),
-                                size: "small",
-                                sx: {
-                                    flex: 1
-                                }
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                size: "small",
-                                variant: "contained",
-                                color: "primary",
-                                disabled: busy,
-                                onClick: handleFulfill,
-                                children: 'Fulfill'
-                            })
-                        ]
+                    /*#__PURE__*/ _jsx(FulfillmentList, {
+                        order: order,
+                        busy: busy,
+                        onUpdateTracking: handleUpdateTracking,
+                        onCancelFulfillment: handleCancelFulfillment
+                    }),
+                    fulfilling ? /*#__PURE__*/ _jsx(FulfillItemsPanel, {
+                        order: order,
+                        busy: busy,
+                        onSubmit: handleFulfill,
+                        onCancel: ()=>setFulfilling(false),
+                        renderZone: WidgetSlot && zoneOrder ? (selection, applyTracking)=>/*#__PURE__*/ _jsx(HostedZone, {
+                                renderer: WidgetSlot,
+                                slot: ORDER_FULFILLMENT_ZONE.id,
+                                hostId: hostId,
+                                orgId: undefined,
+                                order: zoneOrder,
+                                recordFulfillment: recordFulfillment,
+                                selection: selection,
+                                applyTracking: applyTracking
+                            }) : undefined
+                    }) : null,
+                    WidgetSlot && zoneOrder ? /*#__PURE__*/ _jsx(HostedZone, {
+                        renderer: WidgetSlot,
+                        slot: ORDER_DETAIL_ZONE.id,
+                        hostId: hostId,
+                        orgId: undefined,
+                        order: zoneOrder,
+                        recordFulfillment: recordFulfillment
+                    }) : null,
+                    orderId ? /*#__PURE__*/ _jsx(OrderReturns, {
+                        hostId: hostId,
+                        orderId: orderId,
+                        order: order
                     }) : null,
                     order.paymentLinkUrl && order.status === 'pending' ? /*#__PURE__*/ _jsx(Button, {
                         size: "small",
@@ -934,6 +1067,24 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
                         onClick: handlePackingSlip,
                         children: 'Packing slip'
                     }),
+                    orderId ? /*#__PURE__*/ _jsx(OrderInvoiceButton, {
+                        hostId: hostId,
+                        orderId: orderId,
+                        order: order
+                    }) : null,
+                    orderId ? /*#__PURE__*/ _jsx(OrderReceiptResend, {
+                        hostId: hostId,
+                        orderId: orderId,
+                        order: order
+                    }) : null,
+                    orderId && order.channel === 'pos' ? // The register's 80mm receipt, its gift receipt and a reprint on
+                    // the register's cloud printer (AGL-3609).
+                    /*#__PURE__*/ _jsx(PosReceiptActions, {
+                        hostId: hostId,
+                        orderId: orderId,
+                        order: order,
+                        cloudPrint: "reprint"
+                    }) : null,
                     can('cancelled') ? /*#__PURE__*/ _jsx(Button, {
                         color: "error",
                         disabled: busy,
@@ -960,13 +1111,10 @@ const usd = (cents)=>`$${((cents != null ? cents : 0) / 100).toFixed(2)}`;
                         onClick: ()=>handleRefund(),
                         children: 'Refund'
                     }) : null,
-                    (can('fulfilled') || can('partially_fulfilled')) && !tracking ? /*#__PURE__*/ _jsx(Button, {
+                    (can('fulfilled') || can('partially_fulfilled')) && !fulfilling ? /*#__PURE__*/ _jsx(Button, {
                         variant: "contained",
                         color: "primary",
-                        onClick: ()=>setTracking({
-                                carrier: '',
-                                number: ''
-                            }),
+                        onClick: ()=>setFulfilling(true),
                         children: 'Fulfill…'
                     }) : null,
                     can('delivered') ? /*#__PURE__*/ _jsx(Button, {