@aglyn/plugins-commerce 1.0.0-beta.285 → 1.0.0-beta.287

package/src/lib/components/console/pos/pos-hardware-buyer.component.js

@@ -0,0 +1,629 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, List, ListItem, ListItemText, Radio, RadioGroup, Stack, TextField, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import { formatPosHardwareCents } from "../../../model/pos-hardware.js";
+import { PosHardwareRequestError } from "./pos-hardware-api.js";
+import { PosHardwareSaleTerms } from "./pos-hardware-sale-terms.component.js";
+import { posHardwareAttach, posHardwareFindBuyer, posHardwareRegisterAtBooth, posHardwareSaleStatus, posHardwareSerials, posHardwareToAttach } from "./pos-hardware-sale-api.js";
+/** No store chosen yet: nothing to register a reader to here. */ const NO_STORE = {
+    chosen: false,
+    needsAddress: false
+};
+/** The address form's start, as the POS devices card starts it. */ const EMPTY_ADDRESS = {
+    line1: '',
+    city: '',
+    state: '',
+    postalCode: '',
+    country: 'US'
+};
+function newKey() {
+    return `attach-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+/** The ways one workspace can take the hardware: each store, or the store chosen at setup. */ function workspaceOptions(uid, workspace, who) {
+    const plan = workspace.posPlan ? null : 'No point of sale plan yet: they add it when they set the reader up';
+    return [
+        ...workspace.stores.map((store)=>({
+                key: `${uid}:${workspace.orgId}:${store.hostId}`,
+                label: `${who} · ${workspace.name} · ${store.name}`,
+                detail: [
+                    plan,
+                    store.hasLocation ? null : 'No card reader location on this store yet: you can enter its address here'
+                ].filter(Boolean).join('. ') || null,
+                choice: {
+                    uid,
+                    orgId: workspace.orgId,
+                    hostId: store.hostId
+                },
+                needsAddress: !store.hasLocation
+            })),
+        {
+            key: `${uid}:${workspace.orgId}:`,
+            label: `${who} · ${workspace.name} · choose the store at setup`,
+            detail: plan,
+            choice: {
+                uid,
+                orgId: workspace.orgId
+            }
+        }
+    ];
+}
+/** Every option an answer offers, people first. */ function optionsOf(found) {
+    const options = [];
+    for (const person of found.people){
+        const who = `${person.name || 'No name'} (${person.email})`;
+        if (!person.workspaces.length) {
+            options.push({
+                key: `${person.uid}::`,
+                label: `${who} · no workspace yet`,
+                detail: 'It joins the workspace they create.',
+                choice: {
+                    uid: person.uid
+                }
+            });
+        }
+        for (const workspace of person.workspaces)options.push(...workspaceOptions(person.uid, workspace, who));
+    }
+    for (const workspace of found.workspaces){
+        if (!workspace.owner) continue;
+        const who = `${workspace.owner.name || 'Owner'} (${workspace.owner.email})`;
+        for (const option of workspaceOptions(workspace.owner.uid, workspace, who)){
+            if (!options.some((held)=>held.key === option.key)) options.push(option);
+        }
+    }
+    return options;
+}
+/**
+ * Finding the buyer and saying whose the card reader is (AGL-4038): by an
+ * exact email, a person's name or a workspace's name. Shows the least that
+ * picks the right person — a name, their whole email address, each workspace
+ * and its stores, and what each still needs — and, for an address with no
+ * account, offers to sell anyway and invite them.
+ */ function AttachDialog(props) {
+    const { user, hostId, target, onClose, onAttached, notify } = props;
+    const [query, setQuery] = useState('');
+    const [found, setFound] = useState(null);
+    const [searched, setSearched] = useState('');
+    const [chosen, setChosen] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [attemptKey] = useState(newKey);
+    const options = found ? optionsOf(found) : [];
+    const search = async (event)=>{
+        event == null ? void 0 : event.preventDefault();
+        const text = query.trim();
+        if (text.length < 2) return;
+        setBusy(true);
+        try {
+            setFound(await posHardwareFindBuyer(user, hostId, text));
+            setSearched(text);
+            setChosen('');
+        } catch (caught) {
+            notify(caught instanceof PosHardwareRequestError ? caught.message : 'The lookup did not answer', 'warning');
+        } finally{
+            setBusy(false);
+        }
+    };
+    const attach = async (choice, needsAddress = false)=>{
+        setBusy(true);
+        try {
+            const answer = await posHardwareAttach(user, attemptKey, _extends({
+                hostId,
+                buyer: choice
+            }, 'registerOrderId' in target ? {
+                registerOrderId: target.registerOrderId
+            } : {
+                orderId: target.orderId
+            }));
+            onAttached(answer.outcome === 'waiting' ? 'Buyer attached. The card reader joins their workspace as soon as the sale is paid.' : answer.outcome === 'attached' ? 'Card reader attached to the buyer’s workspace.' : 'email' in choice ? 'Invitation sent. The card reader joins their workspace when they sign up.' : 'Attached to their account. It joins the workspace they create.', {
+                chosen: 'hostId' in choice && Boolean(choice.hostId),
+                needsAddress
+            });
+        } catch (caught) {
+            notify(caught instanceof PosHardwareRequestError ? caught.message : 'The card reader could not be attached', 'warning');
+        } finally{
+            setBusy(false);
+        }
+    };
+    const option = options.find((candidate)=>candidate.key === chosen);
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: true,
+        onClose: onClose,
+        maxWidth: "sm",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: 'Who is the card reader for?'
+            }),
+            /*#__PURE__*/ _jsxs(DialogContent, {
+                sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2
+                },
+                children: [
+                    'row' in target ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: `${target.row.lines.map((line)=>`${line.quantity} × ${line.name}`).join(', ')} · ${formatPosHardwareCents(target.row.totalCents)}`
+                    }) : null,
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        component: "form",
+                        direction: "row",
+                        spacing: 1,
+                        onSubmit: search,
+                        sx: {
+                            mt: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Email, name or workspace",
+                                size: "small",
+                                value: query,
+                                onChange: (event)=>setQuery(event.target.value),
+                                sx: {
+                                    flex: 1
+                                },
+                                autoFocus: true
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                variant: "outlined",
+                                disabled: busy || query.trim().length < 2,
+                                children: 'Search'
+                            })
+                        ]
+                    }),
+                    (found == null ? void 0 : found.noAccount) ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        action: /*#__PURE__*/ _jsx(Button, {
+                            disabled: busy,
+                            onClick: ()=>void attach({
+                                    email: searched
+                                }),
+                            children: 'Invite them'
+                        }),
+                        children: `No account uses ${searched}. Sell anyway: we email them an invitation, and the card reader joins their workspace when they sign up.`
+                    }) : null,
+                    found && !found.noAccount && !options.length ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Nobody matches. Try their exact email address.'
+                    }) : null,
+                    options.length ? /*#__PURE__*/ _jsx(RadioGroup, {
+                        value: chosen,
+                        onChange: (event)=>setChosen(event.target.value),
+                        "aria-label": "Buyer",
+                        children: options.map((candidate)=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                value: candidate.key,
+                                control: /*#__PURE__*/ _jsx(Radio, {
+                                    size: "small"
+                                }),
+                                label: /*#__PURE__*/ _jsxs(Stack, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            children: candidate.label
+                                        }),
+                                        candidate.detail ? /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            children: candidate.detail
+                                        }) : null
+                                    ]
+                                })
+                            }, candidate.key))
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Every lookup is recorded. Ask the buyer before you search for them.'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: onClose,
+                        children: 'Cancel'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        disabled: busy || !option,
+                        onClick: ()=>option && void attach(option.choice, Boolean(option.needsAddress)),
+                        children: 'Attach'
+                    })
+                ]
+            })
+        ]
+    });
+}
+/**
+ * The To attach list (AGL-4038): card readers sold here that nobody has said
+ * whose they are yet — at the kiosk, while the register was offline, or to a
+ * buyer with no account or no workspace yet — newest first.
+ */ function ToAttachDialog(props) {
+    const { user, hostId, onClose, onPick, notify } = props;
+    const [rows, setRows] = useState(null);
+    useEffect(()=>{
+        let live = true;
+        posHardwareToAttach(user, hostId).then((answer)=>live && setRows(answer.orders)).catch((caught)=>{
+            if (!live) return;
+            setRows([]);
+            notify(caught instanceof PosHardwareRequestError ? caught.message : 'The list could not be read', 'warning');
+        });
+        return ()=>{
+            live = false;
+        };
+    }, [
+        user,
+        hostId,
+        notify
+    ]);
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: true,
+        onClose: onClose,
+        maxWidth: "sm",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: 'Card reader sales to attach'
+            }),
+            /*#__PURE__*/ _jsxs(DialogContent, {
+                children: [
+                    rows && !rows.length ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Every card reader sold here is attached to its buyer.'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(List, {
+                        dense: true,
+                        children: (rows != null ? rows : []).map((row)=>{
+                            var _row_contactEmail;
+                            return /*#__PURE__*/ _jsx(ListItem, {
+                                secondaryAction: /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    onClick: ()=>onPick(row),
+                                    children: 'Attach'
+                                }),
+                                children: /*#__PURE__*/ _jsx(ListItemText, {
+                                    primary: `${row.lines.map((line)=>`${line.quantity} × ${line.name}`).join(', ')} · ${formatPosHardwareCents(row.totalCents)}`,
+                                    secondary: [
+                                        row.registerNumber ? `Sale #${row.registerNumber}` : row.number,
+                                        new Date(row.createdAtMs).toLocaleString(),
+                                        row.kiosk ? 'at the kiosk' : null,
+                                        row.offline ? 'rung offline' : null,
+                                        row.invited ? `invited ${(_row_contactEmail = row.contactEmail) != null ? _row_contactEmail : ''}`.trim() : row.contactEmail,
+                                        row.awaitingWorkspace ? 'has an account, no workspace yet' : null
+                                    ].filter(Boolean).join(' · ')
+                                })
+                            }, row.id);
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DialogActions, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    onClick: onClose,
+                    children: 'Close'
+                })
+            })
+        ]
+    });
+}
+/**
+ * The sale's readers onto the buyer's store (AGL-4038): their serial numbers,
+ * scanned or typed, so each sets itself up when the buyer adds it; and, with
+ * the buyer there and their store chosen, registering it to that store now
+ * by the code it shows.
+ */ function SaleReaders(props) {
+    const { user, hostId, saleOrderId, store, notify } = props;
+    const [serials, setSerials] = useState('');
+    const [code, setCode] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [attemptKey, setAttemptKey] = useState(newKey);
+    // The buyer's store address (AGL-4038), asked for when their store has no
+    // card reader location yet: from the lookup, or when the route says so.
+    const [askAddress, setAskAddress] = useState(store.needsAddress);
+    const [address, setAddress] = useState(EMPTY_ADDRESS);
+    useEffect(()=>setAskAddress(store.needsAddress), [
+        store.needsAddress
+    ]);
+    const addressComplete = Boolean(address.line1.trim() && address.city.trim() && address.postalCode.trim()) && /^[A-Z]{2}$/.test(address.country);
+    const run = async (work)=>{
+        setBusy(true);
+        try {
+            notify(await work(), 'success');
+        } catch (caught) {
+            if (caught instanceof PosHardwareRequestError && caught.reason === 'needs-address') {
+                setAskAddress(true);
+                // A new attempt: the request with the address is a different one.
+                setAttemptKey(newKey());
+            }
+            notify(caught instanceof PosHardwareRequestError ? caught.message : 'That did not work. Try again.', 'warning');
+        } finally{
+            setBusy(false);
+        }
+    };
+    const list = serials.split(/[\s,;]+/).map((serial)=>serial.trim()).filter(Boolean);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'flex-start'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Reader serial numbers",
+                        helperText: "Scan or type each reader's serial. It sets itself up when the buyer adds it.",
+                        value: serials,
+                        onChange: (event)=>setSerials(event.target.value),
+                        sx: {
+                            flex: 1
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: busy || !list.length,
+                        onClick: ()=>void run(async ()=>{
+                                await posHardwareSerials(user, {
+                                    hostId,
+                                    registerOrderId: saleOrderId,
+                                    serials: list
+                                });
+                                return list.length === 1 ? 'Serial number saved' : 'Serial numbers saved';
+                            }),
+                        children: 'Save'
+                    })
+                ]
+            }),
+            store.chosen && askAddress ? /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'grid',
+                    gap: 1,
+                    gridTemplateColumns: {
+                        xs: '1fr',
+                        sm: '1fr 1fr'
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        sx: {
+                            gridColumn: '1 / -1'
+                        },
+                        children: 'Their store has no address for card readers yet. Enter it with the buyer to register the reader now: ' + 'Stripe sets the reader up for this country. Or leave it, and they add it on their POS devices card.'
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Street",
+                        required: true,
+                        value: address.line1,
+                        onChange: (event)=>setAddress(_extends({}, address, {
+                                line1: event.target.value
+                            })),
+                        sx: {
+                            gridColumn: '1 / -1'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "City",
+                        required: true,
+                        value: address.city,
+                        onChange: (event)=>setAddress(_extends({}, address, {
+                                city: event.target.value
+                            }))
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "State",
+                        value: address.state,
+                        onChange: (event)=>setAddress(_extends({}, address, {
+                                state: event.target.value
+                            }))
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Postal code",
+                        required: true,
+                        value: address.postalCode,
+                        onChange: (event)=>setAddress(_extends({}, address, {
+                                postalCode: event.target.value
+                            }))
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Country",
+                        required: true,
+                        helperText: "Two letters, like US",
+                        value: address.country,
+                        onChange: (event)=>setAddress(_extends({}, address, {
+                                country: event.target.value.toUpperCase().slice(0, 2)
+                            }))
+                    })
+                ]
+            }) : null,
+            store.chosen ? /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'flex-start'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Code on the reader",
+                        helperText: "Register it to the buyer's store now, while they are here.",
+                        value: code,
+                        onChange: (event)=>setCode(event.target.value),
+                        sx: {
+                            flex: 1
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: busy || code.trim().length < 3 || askAddress && !addressComplete,
+                        onClick: ()=>void run(async ()=>{
+                                const answer = await posHardwareRegisterAtBooth(user, attemptKey, _extends({
+                                    hostId,
+                                    registerOrderId: saleOrderId,
+                                    registrationCode: code.trim()
+                                }, askAddress ? {
+                                    address
+                                } : {}));
+                                setCode('');
+                                setAttemptKey(newKey());
+                                if (answer.storeAddressSaved) setAskAddress(false);
+                                return answer.storeAddressSaved ? 'Reader registered to their store, and the store’s address saved' : 'Reader registered to their store';
+                            }),
+                        children: 'Register'
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+/**
+ * Selling a card reader at the platform's own store's register (AGL-4038):
+ * on a sale that has one, the buyer is attached here, and every reader sold
+ * without one waits on the To attach list. Draws nothing on any store but
+ * the platform's own hardware seller. Loaded on its own, by the register.
+ */ function PosHardwareBuyer(props) {
+    var _ref, _ref1;
+    const { user, hostId, saleOrderId, notify } = props;
+    const [seller, setSeller] = useState(false);
+    const [dialog, setDialog] = useState(null);
+    const [attached, setAttached] = useState(null);
+    useEffect(()=>{
+        let live = true;
+        posHardwareSaleStatus(user, hostId).then((status)=>live && setSeller(status.seller)).catch(()=>undefined);
+        return ()=>{
+            live = false;
+        };
+    }, [
+        user,
+        hostId
+    ]);
+    if (!seller) return null;
+    const attachedHere = attached && attached.orderId === saleOrderId ? attached : null;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        sx: {
+            mt: 1
+        },
+        children: [
+            saleOrderId ? /*#__PURE__*/ _jsx(Alert, {
+                severity: attachedHere ? 'success' : 'info',
+                action: /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    onClick: ()=>setDialog({
+                            kind: 'sale'
+                        }),
+                    children: attachedHere ? 'Change' : 'Attach buyer'
+                }),
+                children: (_ref = attachedHere == null ? void 0 : attachedHere.message) != null ? _ref : 'This sale has a card reader. Attach it to the buyer’s workspace.'
+            }) : null,
+            saleOrderId ? // The terms of sale, accepted before paying (AGL-4038, Terms 4.28).
+            /*#__PURE__*/ _jsx(PosHardwareSaleTerms, {
+                user: user,
+                hostId: hostId,
+                saleOrderId: saleOrderId,
+                notify: notify
+            }) : null,
+            saleOrderId ? /*#__PURE__*/ _jsx(SaleReaders, {
+                user: user,
+                hostId: hostId,
+                saleOrderId: saleOrderId,
+                store: (_ref1 = attachedHere == null ? void 0 : attachedHere.store) != null ? _ref1 : NO_STORE,
+                notify: notify
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Chip, {
+                        size: "small",
+                        variant: "outlined",
+                        label: "Card reader sales"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>setDialog({
+                                kind: 'list'
+                            }),
+                        children: 'To attach'
+                    })
+                ]
+            }),
+            (dialog == null ? void 0 : dialog.kind) === 'list' ? /*#__PURE__*/ _jsx(ToAttachDialog, {
+                user: user,
+                hostId: hostId,
+                notify: notify,
+                onClose: ()=>setDialog(null),
+                onPick: (row)=>setDialog({
+                        kind: 'entry',
+                        row
+                    })
+            }) : null,
+            (dialog == null ? void 0 : dialog.kind) === 'sale' && saleOrderId ? /*#__PURE__*/ _jsx(AttachDialog, {
+                user: user,
+                hostId: hostId,
+                target: {
+                    registerOrderId: saleOrderId
+                },
+                notify: notify,
+                onClose: ()=>setDialog(null),
+                onAttached: (message, store)=>{
+                    setAttached({
+                        orderId: saleOrderId,
+                        message,
+                        store
+                    });
+                    setDialog(null);
+                    notify(message, 'success');
+                }
+            }) : null,
+            (dialog == null ? void 0 : dialog.kind) === 'entry' ? /*#__PURE__*/ _jsx(AttachDialog, {
+                user: user,
+                hostId: hostId,
+                target: {
+                    orderId: dialog.row.id,
+                    row: dialog.row
+                },
+                notify: notify,
+                onClose: ()=>setDialog(null),
+                onAttached: (message)=>{
+                    setDialog({
+                        kind: 'list'
+                    });
+                    notify(message, 'success');
+                }
+            }) : null
+        ]
+    });
+}
+export default PosHardwareBuyer;
+
+//# sourceMappingURL=pos-hardware-buyer.component.js.map