@burdenoff/microfe-movethewheels 2026.1101.3 → 2026.1102.1

package/dist/components/CustomerDeliveryUpdatesFields.js

@@ -0,0 +1,57 @@
+import { Checkbox as e, Label as t } from "./ui.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/movethewheels/components/CustomerDeliveryUpdatesFields.tsx
+function i({ idPrefix: i, value: a, onChange: o, disabled: s }) {
+	return /* @__PURE__ */ r("fieldset", {
+		className: "space-y-3",
+		disabled: s,
+		"data-testid": `${i}-delivery-updates`,
+		children: [
+			/* @__PURE__ */ n("legend", {
+				className: "text-sm font-medium text-text-primary",
+				children: "Delivery updates"
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "flex items-start gap-2",
+				children: [/* @__PURE__ */ n(e, {
+					id: `${i}-notify-email`,
+					checked: a.notifyByEmail,
+					disabled: s,
+					onCheckedChange: (e) => o({
+						...a,
+						notifyByEmail: e === !0
+					})
+				}), /* @__PURE__ */ n(t, {
+					htmlFor: `${i}-notify-email`,
+					className: "text-sm font-normal leading-snug",
+					children: "Email this customer about their shipments"
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "flex items-start gap-2",
+				children: [/* @__PURE__ */ n(e, {
+					id: `${i}-notify-sms`,
+					checked: a.notifyBySms,
+					disabled: s,
+					onCheckedChange: (e) => o({
+						...a,
+						notifyBySms: e === !0
+					})
+				}), /* @__PURE__ */ n(t, {
+					htmlFor: `${i}-notify-sms`,
+					className: "text-sm font-normal leading-snug",
+					children: "Text this customer about their shipments (only with their consent; the phone number needs its country code, e.g. +91…)"
+				})]
+			}),
+			/* @__PURE__ */ n("p", {
+				className: "text-xs text-text-secondary",
+				children: "Sent only while customer delivery notifications are on in Settings."
+			})
+		]
+	});
+}
+function a(e) {
+	return e.notifyByEmail && e.notifyBySms ? "Email and SMS" : e.notifyByEmail ? "Email" : e.notifyBySms ? "SMS" : "Off";
+}
+//#endregion
+export { i as CustomerDeliveryUpdatesFields, a as deliveryUpdatesSummary };

package/dist/components/CustomerNotificationSettingsCard.js

@@ -0,0 +1,368 @@
+import { BellRing as e } from "../node_modules/lucide-react/dist/esm/icons/bell-ring.js";
+import { LoaderCircle as t } from "../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import { RefreshCw as n } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import { RotateCcw as ee } from "../node_modules/lucide-react/dist/esm/icons/rotate-ccw.js";
+import { Save as te } from "../node_modules/lucide-react/dist/esm/icons/save.js";
+import { useMoveTheWheels as ne } from "../providers/MoveTheWheelsProvider.js";
+import { executeGraphQL as r } from "../utils/graphqlClient.js";
+import { formatDateTime as i } from "../utils/formatters.js";
+import { Badge as a, Button as o, Card as re, CardContent as ie, CardDescription as ae, CardHeader as oe, CardTitle as se, Checkbox as s, Label as c, Skeleton as l, Switch as ce } from "./ui.js";
+import { FormError as u } from "./FormError.js";
+import { Notice as le, useNotice as ue } from "./Notice.js";
+import { CUSTOMER_NOTIFICATION_EVENTS as d, MTW_CUSTOMER_NOTIFICATIONS_QUERY as de, MTW_CUSTOMER_NOTIFICATION_PREVIEWS_QUERY as fe, MTW_CUSTOMER_NOTIFICATION_SETTINGS_QUERY as pe, STATUS_LABELS as me, UPDATE_MTW_CUSTOMER_NOTIFICATION_SETTINGS_MUTATION as he, changedNotificationSettings as ge, defaultNotificationSettings as _e, eventLabel as ve, notificationDraftError as ye, toggleEvent as be } from "../utils/customerNotifications.js";
+import { useCallback as xe, useEffect as f, useMemo as p, useRef as Se, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/movethewheels/components/CustomerNotificationSettingsCard.tsx
+var Ce = 10, _ = (e) => ({
+	enabled: e.enabled,
+	emailEnabled: e.emailEnabled,
+	smsEnabled: e.smsEnabled,
+	events: [...e.events]
+}), we = {
+	SENT: "default",
+	PENDING: "secondary",
+	SKIPPED: "outline",
+	FAILED: "destructive"
+};
+function v({ readOnly: v }) {
+	let { apiGatewayUrl: y, authToken: b, workspaceToken: x, workspaceId: S, tenantId: C, currentUser: w } = ne(), T = p(() => ({
+		apiGatewayUrl: y,
+		authToken: b,
+		workspaceToken: x,
+		workspaceId: S,
+		tenantId: C,
+		actorId: w?.id
+	}), [
+		y,
+		b,
+		x,
+		S,
+		C,
+		w?.id
+	]), [E, D] = m(() => _e(S ?? "")), [O, k] = m(() => _(E)), [A, j] = m(!1), [M, N] = m(null), [P, F] = m(!1), [Te, I] = m(null), { message: Ee, notify: De } = ue(), [L, Oe] = m([]), [R, ke] = m(0), [z, B] = m(null), [V, H] = m(!0), [U, Ae] = m([]), [W, je] = m("BOOKED"), [Me, Ne] = m(0), G = Se(0);
+	f(() => {
+		if (!T.workspaceId) return;
+		let e = !1;
+		return j(!1), r(T, pe).then((t) => {
+			e || (D(t.mtwCustomerNotificationSettings), k(_(t.mtwCustomerNotificationSettings)), N(null), j(!0));
+		}).catch((t) => {
+			e || N(t instanceof Error ? t.message : "Could not load the settings");
+		}), r(T, fe).then((t) => {
+			e || Ae(t.mtwCustomerNotificationPreviews);
+		}).catch(() => {}), () => {
+			e = !0;
+		};
+	}, [T, Me]);
+	let K = xe(async () => {
+		if (!T.workspaceId) {
+			H(!1);
+			return;
+		}
+		let e = ++G.current;
+		H(!0);
+		try {
+			let t = await r(T, de, { pagination: {
+				limit: Ce,
+				offset: 0
+			} });
+			if (e !== G.current) return;
+			Oe(t.mtwCustomerNotifications.items), ke(t.mtwCustomerNotifications.total), B(null);
+		} catch (t) {
+			if (e !== G.current) return;
+			B(t instanceof Error ? t.message : "Could not load notifications");
+		} finally {
+			e === G.current && H(!1);
+		}
+	}, [T]);
+	f(() => (K(), () => {
+		G.current += 1;
+	}), [K]);
+	let q = p(() => ge(E, O), [E, O]), J = ye(O), Y = Object.keys(q).length > 0, X = A && !v && !P && Y && !J, Z = v || P || !A, Q = (e) => {
+		I(null), k((t) => ({
+			...t,
+			...e
+		}));
+	}, Pe = async (e) => {
+		if (e.preventDefault(), X) {
+			F(!0), I(null);
+			try {
+				let e = (await r(T, he, { input: q }, "SINGLE_ATTEMPT")).updateMtwCustomerNotificationSettings;
+				D(e), k(_(e)), De(e.enabled ? "Customer notifications are on. Customers hear about shipment changes from now on." : "Customer notifications are off.");
+			} catch (e) {
+				I(e instanceof Error ? e.message : "Could not save the settings");
+			} finally {
+				F(!1);
+			}
+		}
+	}, $ = U.find((e) => e.event === W);
+	return /* @__PURE__ */ g(re, {
+		"data-testid": "mtw-customer-notifications",
+		children: [/* @__PURE__ */ g(oe, { children: [/* @__PURE__ */ g("div", {
+			className: "flex flex-wrap items-center justify-between gap-3",
+			children: [/* @__PURE__ */ g(se, {
+				className: "flex items-center gap-2 text-base",
+				children: [/* @__PURE__ */ h(e, { size: 18 }), " Customer delivery notifications"]
+			}), A && /* @__PURE__ */ h(a, {
+				variant: E.enabled ? "default" : "outline",
+				children: E.enabled ? "On" : "Off"
+			})]
+		}), /* @__PURE__ */ h(ae, { children: "Email or text your customers when their shipment is booked, picked up, out for delivery, delivered, running late or could not be delivered. Each customer can opt out on their customer record; SMS goes only to customers who agreed to texts." })] }), /* @__PURE__ */ g(ie, {
+			className: "space-y-6",
+			children: [
+				M && /* @__PURE__ */ g("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ h(u, { message: `Could not load the customer notification settings (${M}). They cannot be changed until they load.` }), /* @__PURE__ */ g(o, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						onClick: () => {
+							N(null), Ne((e) => e + 1);
+						},
+						children: [/* @__PURE__ */ h(n, {
+							size: 14,
+							className: "mr-2"
+						}), " Try again"]
+					})]
+				}),
+				/* @__PURE__ */ h(le, { message: Ee }),
+				A ? /* @__PURE__ */ g("form", {
+					className: "space-y-6",
+					onSubmit: (e) => void Pe(e),
+					"aria-label": "Customer notification settings",
+					children: [
+						v && /* @__PURE__ */ h("p", {
+							className: "rounded-lg border border-border-default bg-surface-secondary px-4 py-3 text-sm text-text-secondary",
+							children: "You can view these settings. Ask a workspace admin or the Logistics Director to change them."
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "flex items-start justify-between gap-4 rounded-lg border border-border-default px-4 py-3",
+							children: [/* @__PURE__ */ g("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ h(c, {
+									htmlFor: "mtw-customer-notify-enabled",
+									className: "text-sm font-medium",
+									children: "Notify customers about their shipments"
+								}), /* @__PURE__ */ g("p", {
+									className: "text-xs text-text-secondary",
+									children: ["Only changes made after you switch this on notify; customers are never mailed about shipments that already happened.", E.enabledAt && E.enabled ? ` On since ${i(E.enabledAt)}.` : ""]
+								})]
+							}), /* @__PURE__ */ h(ce, {
+								id: "mtw-customer-notify-enabled",
+								checked: O.enabled,
+								disabled: Z,
+								onCheckedChange: (e) => Q({ enabled: e })
+							})]
+						}),
+						/* @__PURE__ */ g("fieldset", {
+							className: "space-y-3",
+							disabled: Z,
+							children: [
+								/* @__PURE__ */ h("legend", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "Channels"
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "flex flex-wrap gap-6",
+									children: [/* @__PURE__ */ g("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ h(s, {
+											id: "mtw-customer-notify-email",
+											checked: O.emailEnabled,
+											disabled: Z,
+											onCheckedChange: (e) => Q({ emailEnabled: e === !0 })
+										}), /* @__PURE__ */ h(c, {
+											htmlFor: "mtw-customer-notify-email",
+											className: "text-sm font-normal",
+											children: "Email"
+										})]
+									}), /* @__PURE__ */ g("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ h(s, {
+											id: "mtw-customer-notify-sms",
+											checked: O.smsEnabled,
+											disabled: Z,
+											onCheckedChange: (e) => Q({ smsEnabled: e === !0 })
+										}), /* @__PURE__ */ h(c, {
+											htmlFor: "mtw-customer-notify-sms",
+											className: "text-sm font-normal",
+											children: "SMS (phone numbers with a country code, e.g. +91…)"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ h("p", {
+									className: "text-xs text-text-secondary",
+									children: "Texts are sent through the SMS channel configured for your organization. Without one, SMS sends are recorded as failed in the recent notifications below."
+								})
+							]
+						}),
+						/* @__PURE__ */ g("fieldset", {
+							className: "space-y-3",
+							disabled: Z,
+							children: [/* @__PURE__ */ h("legend", {
+								className: "text-sm font-semibold text-text-primary",
+								children: "Events"
+							}), /* @__PURE__ */ h("div", {
+								className: "grid grid-cols-1 gap-3 md:grid-cols-2",
+								children: d.map((e) => {
+									let t = `mtw-customer-notify-event-${e.value}`;
+									return /* @__PURE__ */ g("div", {
+										className: "flex items-start gap-2",
+										children: [/* @__PURE__ */ h(s, {
+											id: t,
+											checked: O.events.includes(e.value),
+											disabled: Z,
+											onCheckedChange: (t) => Q({ events: be(O.events, e.value, t === !0) })
+										}), /* @__PURE__ */ g(c, {
+											htmlFor: t,
+											className: "text-sm font-normal leading-snug",
+											children: [/* @__PURE__ */ h("span", {
+												className: "block font-medium text-text-primary",
+												children: e.label
+											}), /* @__PURE__ */ h("span", {
+												className: "block text-xs text-text-secondary",
+												children: e.description
+											})]
+										})]
+									}, e.value);
+								})
+							})]
+						}),
+						J && /* @__PURE__ */ h("p", {
+							className: "text-xs text-status-error-text",
+							children: J
+						}),
+						/* @__PURE__ */ h(u, { message: Te }),
+						/* @__PURE__ */ g("div", {
+							className: "flex flex-wrap items-center justify-end gap-3",
+							children: [/* @__PURE__ */ g(o, {
+								type: "button",
+								variant: "outline",
+								disabled: !Y || P,
+								onClick: () => {
+									I(null), k(_(E));
+								},
+								children: [/* @__PURE__ */ h(ee, {
+									size: 16,
+									className: "mr-2"
+								}), " Discard changes"]
+							}), /* @__PURE__ */ g(o, {
+								type: "submit",
+								disabled: !X,
+								children: [P ? /* @__PURE__ */ h(t, {
+									size: 16,
+									className: "mr-2 animate-spin"
+								}) : /* @__PURE__ */ h(te, {
+									size: 16,
+									className: "mr-2"
+								}), "Save notification settings"]
+							})]
+						})
+					]
+				}) : M ? null : /* @__PURE__ */ g("div", {
+					className: "space-y-3",
+					"aria-busy": "true",
+					children: [/* @__PURE__ */ h(l, { className: "h-8 w-full" }), /* @__PURE__ */ h(l, { className: "h-24 w-full" })]
+				}),
+				U.length > 0 && /* @__PURE__ */ g("div", {
+					className: "space-y-3 border-t border-border-default pt-4",
+					children: [/* @__PURE__ */ g("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ h("span", {
+							className: "text-sm font-semibold text-text-primary",
+							children: "Preview"
+						}), d.map((e) => /* @__PURE__ */ h(o, {
+							type: "button",
+							size: "sm",
+							variant: W === e.value ? "default" : "outline",
+							onClick: () => je(e.value),
+							children: e.label
+						}, e.value))]
+					}), $ && /* @__PURE__ */ g("div", {
+						className: "space-y-2 rounded-lg bg-surface-secondary px-4 py-3 text-sm",
+						"data-testid": "mtw-customer-notify-preview",
+						children: [
+							/* @__PURE__ */ h("p", {
+								className: "font-medium text-text-primary",
+								children: $.subject
+							}),
+							/* @__PURE__ */ h("p", {
+								className: "whitespace-pre-line text-text-secondary",
+								children: $.emailText
+							}),
+							/* @__PURE__ */ g("p", {
+								className: "text-xs text-text-tertiary",
+								children: ["SMS: ", $.smsText]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ g("div", {
+					className: "space-y-3 border-t border-border-default pt-4",
+					children: [
+						/* @__PURE__ */ g("div", {
+							className: "flex flex-wrap items-center justify-between gap-2",
+							children: [/* @__PURE__ */ g("span", {
+								className: "text-sm font-semibold text-text-primary",
+								children: ["Recent notifications", R > 0 ? ` (${R})` : ""]
+							}), /* @__PURE__ */ g(o, {
+								type: "button",
+								size: "sm",
+								variant: "outline",
+								disabled: V,
+								onClick: () => void K(),
+								children: [/* @__PURE__ */ h(n, {
+									size: 14,
+									className: "mr-2"
+								}), " Refresh"]
+							})]
+						}),
+						z && /* @__PURE__ */ h(u, { message: z }),
+						!z && L.length === 0 && !V && /* @__PURE__ */ h("p", {
+							className: "text-sm text-text-secondary",
+							children: "No customer notifications yet. They appear here as shipments change."
+						}),
+						L.length > 0 && /* @__PURE__ */ h("ul", {
+							className: "divide-y divide-border-default",
+							"data-testid": "mtw-customer-notify-recent",
+							children: L.map((e) => /* @__PURE__ */ g("li", {
+								className: "flex flex-wrap items-start justify-between gap-2 py-2",
+								children: [/* @__PURE__ */ g("div", {
+									className: "min-w-0",
+									children: [
+										/* @__PURE__ */ g("p", {
+											className: "text-sm font-medium text-text-primary",
+											children: [
+												ve(e.event),
+												" · ",
+												e.shipmentNumber ?? e.shipmentId
+											]
+										}),
+										/* @__PURE__ */ g("p", {
+											className: "text-xs text-text-secondary",
+											children: [
+												e.channel === "EMAIL" ? "Email" : "SMS",
+												e.recipient ? ` to ${e.recipient}` : "",
+												" ·",
+												" ",
+												i(e.sentAt ?? e.createdAt)
+											]
+										}),
+										e.lastError && e.status !== "SENT" && /* @__PURE__ */ h("p", {
+											className: "text-xs text-text-tertiary",
+											children: e.lastError
+										})
+									]
+								}), /* @__PURE__ */ h(a, {
+									variant: we[e.status],
+									children: me[e.status]
+								})]
+							}, e.id))
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { v as CustomerNotificationSettingsCard };