setDrawerRefund(r)}
emptyText="No refunds match this filter."
/>
{ setPageSize(c); setPage(1); }}
/>
{createOpen && (
setCreateOpen(false)}
onSubmit={(p) => {
_pushAudit({ action: "refund_request", entity_type: "refund", diff: { method: p.method, status: p.status } });
setRefunds(rs => [{
id: "rf_" + (9000 + rs.length),
ts: new Date().toISOString(),
country_id: p.country_id,
franchise_id: (SB2_COUNTRY_BY_ID[p.country_id] || {}).franchise_id || null,
order_id: p.order_id || null,
order_number: p.order_number || "—",
customer_name: p.customer_name || "—",
amount: p.amount,
method: p.method,
status: p.status,
reason_code: p.reason_tag_id || "customer_request",
reason_tag_id: p.reason_tag_id || null,
reason_remark: p.reason_remark || "",
issued_by: "you",
issued_by_role: role,
requested_by: "you",
approved_by: p.status === "succeeded" ? "you" : null,
recon_status: "unmatched",
provider_ref: null,
limit_at_time: null,
}, ...rs]);
setCreateOpen(false);
fireToast(p.status === "pending_approval"
? `Refund sent to ${(p.escalateTo || "approver").toUpperCase()} for approval.`
: "Refund issued.");
}}
/>
)}
{drawerRefund && (
setDrawerRefund(null)}
onAction={(action, refund) => {
setDrawerRefund(null);
setConfirmModal({ action, refund });
}}
onApproval={(action, refund, reason) => {
// ApprovalCard escalation actions — no ConfirmModal (the card owns its own
// reject-reason modal). Fire audit + toast directly.
_pushAudit({
action: action === "approve" ? "refund_approve"
: action === "reject" ? "refund_reject"
: "refund_withdraw",
entity_type: "refund",
entity_id: refund.id,
diff: action === "reject" ? { action, reason } : { action },
});
// Mutate status so the transition is visible. Withdraw has no enum target
// (refund states: pending_approval/approved/succeeded/failed/rejected — no
// draft/withdrawn) → the un-actioned request is removed. Flagged for Tricia
// in docs/specs/v2/06-status.md (open question OQ-STATUS-WITHDRAW).
setRefunds(rs => rs.flatMap(r => {
if (r.id !== refund.id) return [r];
if (action === "approve") return [{ ...r, status: "approved", approved_by: "you" }];
if (action === "reject") return [{ ...r, status: "rejected", reason_remark: reason || r.reason_remark }];
return []; // withdraw — remove the retracted request
}));
setDrawerRefund(null);
fireToast(
action === "approve" ? "Refund approved."
: action === "reject" ? "Refund rejected."
: "Refund request withdrawn."
);
}}
/>
)}
{confirmModal && (
{
const { action, refund } = confirmModal;
_pushAudit({
action: action === "approve" ? "refund_approve"
: action === "reject" ? "refund_reject"
: "refund_complete",
entity_type: "refund",
entity_id: refund.id,
diff: { action },
});
// "Issue refund" (action "approve" on an already-approved refund) settles it.
if (action === "approve") {
setRefunds(rs => rs.map(r => r.id === refund.id ? { ...r, status: "succeeded" } : r));
}
setConfirmModal(null);
}}
onCancel={() => setConfirmModal(null)}
/>
)}
);
}
// ── RefundDetailDrawer ────────────────────────────────────────────────────
function RefundDetailDrawer({ refund, role, onClose, onAction, onApproval }) {
const [remarks, addRemark, editRemark, deleteRemark] = _useRemarks("refund", refund.id, refund.refund_remarks || []);
const CURRENT_USER = "you";
const country = SB2_COUNTRY_BY_ID[refund.country_id] || {};
const viewerTier = role.toLowerCase();
// Limit + escalation check (viewer's own over-limit warning on this refund)
const limit = _refundLimitFor(refund.country_id, viewerTier);
const overLimit = refund.amount > limit;
const launchShape = country.launch_shape || "om_am_cm";
const escalateTo = overLimit ? _refundEscalationApprover(launchShape, viewerTier) : null;
// ── ESCALATION (ApprovalCard) ──────────────────────────────────────────
// Submitter tier = the tier of whoever requested the refund (issued_by_role).
// The escalation approver is the next tier up per launch_shape — NOT always GA.
const submitterTier = (refund.issued_by_role || "").toLowerCase();
const approverTier = submitterTier ? _refundEscalationApprover(launchShape, submitterTier) : null;
const isPending = refund.status === "pending_approval";
// Only escalated refunds get the card: pending, terminal-rejected, or a row whose
// requester ≠ approver (a real escalation, not a self-issued direct refund).
const isEscalated = isPending || refund.status === "rejected"
|| (refund.requested_by && refund.approved_by && refund.requested_by !== refund.approved_by);
const canApprove = isPending && viewerTier === approverTier;
const canWithdraw = isPending && viewerTier === submitterTier;
const approvalMessage = isPending
? `Awaiting ${approverTier ? approverTier.toUpperCase() : "higher-tier"} approval.`
: refund.status === "rejected"
? `Rejected: ${refund.reason_remark || "no reason given"}`
: "Approved";
// Header actions: ApprovalCard owns the pending_approval approve/reject. The header
// keeps only the within-limit direct "Issue refund" flow for already-approved refunds.
const canAct = ["GA", "CM", "AM"].includes(role) || (role === "OM" && !overLimit);
const isActionable = refund.status === "approved";
const drawerActions = (
{isActionable && canAct && (
onAction("approve", refund)}>
Issue refund
)}
Close
);
return (
{/* Escalation approval surface — appears for escalated refunds only */}
{isEscalated && (
onApproval("approve", refund)}
onReject={(reason) => onApproval("reject", refund, reason)}
onWithdraw={() => onApproval("withdraw", refund)}
/>
)}
{/* Ledger coordination note */}
On completion, loyalty points are reversed{country.country_id === "SG" ? " and wallet is credited" : ""}.
{/* Over-limit warning */}
{overLimit && (
This refund amount exceeds your limit. Approval from{" "}
{escalateTo ? escalateTo.toUpperCase() : "a higher tier"} is required.
)}
{/* Section 1 — General */}
},
]}/>
{/* Section 2 — Order */}
{refund.order_number || refund.order_id}
{
e.preventDefault();
e.stopPropagation();
// Navigate to orders list; page-orders auto-opens drawer on incomingId
const orderRoute = role === "GA" ? "ga-orders"
: role === "CM" ? "cm-orders"
: role === "AM" ? "am-orders"
: "om-orders-live";
_go(orderRoute, { id: refund.order_id });
}}
>
)
: "—",
},
{ label: "Order number", value: refund.order_number || "—" },
{ label: "Provider refund ref", value: refund.provider_ref || "—" },
]}/>
{/* Section 3 — Customer (sourced from the referenced order) */}
{/* Section 4 — Reason */}
{/* Section 5 — Authority */}
{/* Remarks — operator annotation thread (add/edit/delete-own), per Ops convention */}
);
}
// ── RefundConfirmModal ────────────────────────────────────────────────────
function RefundConfirmModal({ action, refund, role, onConfirm, onCancel }) {
const country = SB2_COUNTRY_BY_ID[refund.country_id] || {};
const viewerTier = role.toLowerCase();
const limit = _refundLimitFor(refund.country_id, viewerTier);
const overLimit = refund.amount > limit;
const launchShape = country.launch_shape || "om_am_cm";
const escalateTo = overLimit ? _refundEscalationApprover(launchShape, viewerTier) : null;
const actionLabel = action === "approve"
? (refund.status === "approved" ? "Issue Refund" : "Approve Refund")
: "Reject Refund";
const body = action === "reject"
? `Reject this ${_fmtRefundAmount(refund.amount, refund.country_id)} refund for order ${refund.order_number || refund.order_id || "—"}? This cannot be undone.`
: overLimit
? `This refund of ${_fmtRefundAmount(refund.amount, refund.country_id)} exceeds your tier limit. Approval from ${escalateTo ? escalateTo.toUpperCase() : "a higher tier"} is required before it can be issued.`
: `Approve and issue a ${_fmtRefundAmount(refund.amount, refund.country_id)} refund for order ${refund.order_number || refund.order_id || "—"}?`;
return (
);
}
// ── RefundCaptureForm (700px create DetailDrawer — TABLE 3) ───────────────
// Every refund references an existing order: search → auto-filled context →
// method · amount · reason · notes (all required). OM or over-limit → sent for approval.
// Hosted in the Ops create-drawer pattern (never a full page).
function RefundCaptureForm({ role, open, onCancel, onSubmit }) {
const viewerTier = role.toLowerCase();
// Orders this role may refund against (scope-limited)
const scopeCountries = _scopeCountries(role);
const orderPool = useMemo(() =>
SB4_ORDERS.filter(o => !scopeCountries || scopeCountries.has(o.country_id)),
[scopeCountries]);
const [orderQuery, setOrderQuery] = useState("");
const [selectedOrder, setSelectedOrder] = useState(null);
const [method, setMethod] = useState("gateway");
const [amountMode, setAmountMode] = useState("full"); // full | half | partial
const [amountVal, setAmountVal] = useState("");
const [reason, setReason] = useState({ reason_tag_id: "", reason_remark: "" });
const [errors, setErrors] = useState({});
const q = orderQuery.trim().toLowerCase();
const orderMatches = q
? orderPool.filter(o =>
(o.order_code && o.order_code.toLowerCase().includes(q)) ||
(o.customer && o.customer.name && o.customer.name.toLowerCase().includes(q))
).slice(0, 6)
: [];
const country_id = selectedOrder ? selectedOrder.country_id : null;
const limit = country_id ? _refundLimitFor(country_id, viewerTier) : Infinity;
const numericAmt = parseFloat(amountVal) || 0;
const overLimit = numericAmt > 0 && limit !== Infinity && numericAmt > limit;
const country = country_id ? (SB2_COUNTRY_BY_ID[country_id] || {}) : {};
const launchShape = country.launch_shape || "om_am_cm";
const needsApproval = role === "OM" || overLimit;
const escalateTo = needsApproval ? _refundEscalationApprover(launchShape, viewerTier) : null;
// Amount type: Full (= order total, default) · Half (= total/2) · Partial (manual).
// Editing the amount auto-selects the matching mode (Partial when ≠ full/half).
const orderTotal = selectedOrder && selectedOrder.totals ? Number(selectedOrder.totals.total) : 0;
const applyAmountMode = (m) => {
setAmountMode(m);
if (m === "full") setAmountVal(String(orderTotal));
else if (m === "half") setAmountVal(String(orderTotal / 2));
// partial: keep current value — user edits the input
};
const onAmountInput = (v) => {
setAmountVal(v);
const n = parseFloat(v);
if (!isNaN(n) && n === orderTotal) setAmountMode("full");
else if (!isNaN(n) && n === orderTotal / 2) setAmountMode("half");
else setAmountMode("partial");
};
const selectOrder = (o) => {
setSelectedOrder(o); setOrderQuery("");
setAmountMode("full");
setAmountVal(String(o.totals && o.totals.total != null ? o.totals.total : ""));
setErrors(e => ({ ...e, order: undefined }));
};
const validateAll = () => {
const e = {};
if (!selectedOrder) e.order = "Select an order";
if (!method) e.method = "Required";
if (!amountVal || numericAmt <= 0) e.amount = "Enter a valid amount";
if (!reason.reason_tag_id) e.reason_tag_id = "Select a reason tag";
if (!reason.reason_remark.trim()) e.reason_remark = "Notes required";
setErrors(e);
return Object.keys(e).length === 0;
};
const submit = () => {
if (!validateAll()) return;
onSubmit({
method,
status: needsApproval ? "pending_approval" : "succeeded",
escalateTo,
amount: numericAmt,
country_id,
order_id: selectedOrder ? selectedOrder.id : null,
order_number: selectedOrder ? (selectedOrder.order_code || selectedOrder.id) : null,
customer_name: selectedOrder && selectedOrder.customer ? selectedOrder.customer.name : null,
reason_tag_id: reason.reason_tag_id,
reason_remark: reason.reason_remark,
});
};
const drawerActions = (
CancelCapture refund
);
return (
{/* Order — search an existing order; customer + amount come from it */}
{!selectedOrder ? (
{q && (orderMatches.length ? (
{orderMatches.map(o => (
))}
) : (
No matching orders in your scope.
))}
) : (
<>
{ setSelectedOrder(null); setAmountVal(""); }}>Change order
)}
{/* Refund — method + amount */}
{overLimit && (
This amount exceeds your refund limit. Approval from{" "}
{escalateTo ? escalateTo.toUpperCase() : "a higher tier"} is required before it can be issued.
)}
{/* Reason */}