@dragonmastery/dragoncore-vue 0.0.3 → 0.0.4

package/dist/CustomerSupportTicketDetailPage-DQa_Zvfe.js

@@ -0,0 +1,703 @@
+import { t as BATCH_MODE } from "./useRpcAuth-Dp2sec-X.js";
+import "./useQueryCache-DqcDMsxb.js";
+import { t as useMutation } from "./useMutation-B4_S4Xoa.js";
+import { t as useQuery } from "./useQuery-B7ndu5_P.js";
+import { c as SupportTicketTypeBadge_default, i as SupportTicketApprovalBadge_default, l as SupportTicketPriorityBadge_default, n as TimelineItem_default, o as formatCustomerCreditValue, r as formatTicketDate, t as TimelineSystemEvent_default } from "./TimelineSystemEvent-B69B3eeL.js";
+import { t as extractRpcErrorMessage } from "./extractRpcErrorMessage-C_UbKgHL.js";
+import { t as formatTicketDisplayId } from "./displayIdFormatter-BoKcrgF5.js";
+import { a as SupportTicketAttachmentsCollapsible_default, i as parseRecordVersions, n as MetadataField_default, r as ActionBannerAlert_default, t as TimelineNoteInput_default } from "./TimelineNoteInput-BRsQ2QTz.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, openBlock, reactive, ref, renderList, resolveComponent, toDisplayString, unref, vModelSelect, vModelText, watch, withCtx, withDirectives } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { OPERATORS, RecordConst, supportTicketPriorityToNumber } from "@dragonmastery/dragoncore-shared";
+import { toast } from "vue3-toastify";
+
+//#region src/slices/support_ticket/customer/components/CustomerActionBanner.vue
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+	__name: "CustomerActionBanner",
+	props: { ticket: {} },
+	setup(__props) {
+		const props = __props;
+		const isArchived = computed(() => !!props.ticket.archived_at);
+		const isApproved = computed(() => {
+			const t = props.ticket;
+			return !!t.is_locked && !!t.locked_approval_at && t.status !== "CANCELLED";
+		});
+		const isRejected = computed(() => {
+			const t = props.ticket;
+			return !!t.is_locked && !!t.locked_approval_at && t.status === "CANCELLED";
+		});
+		const lockedDateFormatted = computed(() => {
+			const at = props.ticket.locked_approval_at;
+			if (!at) return "";
+			return formatTicketDate(at).formatted;
+		});
+		return (_ctx, _cache) => {
+			return isArchived.value ? (openBlock(), createBlock(ActionBannerAlert_default, {
+				key: 0,
+				variant: "neutral",
+				icon: "archive"
+			}, {
+				default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode(" This ticket is archived. Comments, edits, and attachments are locked for both customer and staff. ", -1)])]),
+				_: 1
+			})) : isApproved.value ? (openBlock(), createBlock(ActionBannerAlert_default, {
+				key: 1,
+				variant: "success",
+				icon: "lock"
+			}, {
+				default: withCtx(() => [createTextVNode(" This ticket was approved on " + toDisplayString(lockedDateFormatted.value) + ". ", 1)]),
+				_: 1
+			})) : isRejected.value ? (openBlock(), createBlock(ActionBannerAlert_default, {
+				key: 2,
+				variant: "error",
+				icon: "lock"
+			}, {
+				default: withCtx(() => [createTextVNode(" This ticket was rejected on " + toDisplayString(lockedDateFormatted.value) + ". ", 1)]),
+				_: 1
+			})) : createCommentVNode("v-if", true);
+		};
+	}
+});
+var CustomerActionBanner_default = _sfc_main$5;
+
+//#endregion
+//#region src/slices/support_ticket/customer/components/CustomerMetadataCard.vue
+const _hoisted_1$4 = { class: "border border-base-200 rounded-lg p-4 md:p-6" };
+const _hoisted_2$4 = { class: "grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3" };
+const _hoisted_3$3 = { class: "md:col-span-2" };
+const _hoisted_4$3 = {
+	key: 0,
+	class: "whitespace-pre-wrap text-sm"
+};
+const _hoisted_5$3 = {
+	key: 0,
+	class: "text-base-content/50"
+};
+const _hoisted_6$2 = { class: "text-base-content/50" };
+const _hoisted_7$2 = { class: "text-base-content/50" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+	__name: "CustomerMetadataCard",
+	props: { ticket: {} },
+	setup(__props) {
+		const props = __props;
+		const displayApprovalStatus = computed(() => {
+			const s = props.ticket.status;
+			if (s === "PENDING") return "PENDING";
+			if (s === "CANCELLED") return "REJECTED";
+			return "APPROVED";
+		});
+		const ticketDisplayId = computed(() => formatTicketDisplayId(props.ticket.display_id, props.ticket.display_id_prefix, props.ticket.id));
+		const createdFormatted = computed(() => {
+			const at = props.ticket.created_at;
+			return at ? formatTicketDate(at).formatted : "";
+		});
+		const createdRelative = computed(() => {
+			const at = props.ticket.created_at;
+			return at ? formatTicketDate(at).relative : "";
+		});
+		const showCredits = computed(() => {
+			return !!props.ticket.is_locked && !!props.ticket.locked_approval_at;
+		});
+		const creditDisplay = computed(() => formatCustomerCreditValue(props.ticket.credit_value));
+		const targetFormatted = computed(() => props.ticket.target_at ? formatTicketDate(props.ticket.target_at).formatted : "");
+		const targetRelative = computed(() => props.ticket.target_at ? formatTicketDate(props.ticket.target_at).relative : "");
+		const completedFormatted = computed(() => props.ticket.completed_at ? formatTicketDate(props.ticket.completed_at).formatted : "");
+		const completedRelative = computed(() => props.ticket.completed_at ? formatTicketDate(props.ticket.completed_at).relative : "");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [createElementVNode("div", _hoisted_2$4, [
+				createVNode(MetadataField_default, { label: "Status" }, {
+					default: withCtx(() => [createVNode(SupportTicketApprovalBadge_default, {
+						"approval-status": displayApprovalStatus.value,
+						size: "sm"
+					}, null, 8, ["approval-status"])]),
+					_: 1
+				}),
+				createVNode(MetadataField_default, { label: "Type" }, {
+					default: withCtx(() => [createVNode(SupportTicketTypeBadge_default, {
+						type: __props.ticket.type,
+						size: "sm"
+					}, null, 8, ["type"])]),
+					_: 1
+				}),
+				createVNode(MetadataField_default, { label: "Priority" }, {
+					default: withCtx(() => [createVNode(SupportTicketPriorityBadge_default, {
+						priority: __props.ticket.priority,
+						size: "sm"
+					}, null, 8, ["priority"])]),
+					_: 1
+				}),
+				createVNode(MetadataField_default, { label: "Requester" }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.ticket.created_by_display_name), 1)]),
+					_: 1
+				}),
+				createElementVNode("div", _hoisted_3$3, [createVNode(MetadataField_default, { label: "Description" }, {
+					empty: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "text-base-content/50 italic text-sm" }, "No description provided", -1)])]),
+					default: withCtx(() => [__props.ticket.description?.trim() ? (openBlock(), createElementBlock("p", _hoisted_4$3, toDisplayString(__props.ticket.description), 1)) : createCommentVNode("v-if", true)]),
+					_: 1
+				})]),
+				createVNode(MetadataField_default, {
+					label: "Ticket ID",
+					copyable: true
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(ticketDisplayId.value), 1)]),
+					_: 1
+				}),
+				createVNode(MetadataField_default, { label: "Created" }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(createdFormatted.value) + " ", 1), createdRelative.value ? (openBlock(), createElementBlock("span", _hoisted_5$3, "· " + toDisplayString(createdRelative.value), 1)) : createCommentVNode("v-if", true)]),
+					_: 1
+				}),
+				showCredits.value ? (openBlock(), createBlock(MetadataField_default, {
+					key: 0,
+					label: "Credits"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(creditDisplay.value), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true),
+				__props.ticket.target_at ? (openBlock(), createBlock(MetadataField_default, {
+					key: 1,
+					label: "Target"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(targetFormatted.value) + " ", 1), createElementVNode("span", _hoisted_6$2, "· " + toDisplayString(targetRelative.value), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true),
+				__props.ticket.completed_at ? (openBlock(), createBlock(MetadataField_default, {
+					key: 2,
+					label: "Completed"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(completedFormatted.value) + " ", 1), createElementVNode("span", _hoisted_7$2, "· " + toDisplayString(completedRelative.value), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true)
+			])]);
+		};
+	}
+});
+var CustomerMetadataCard_default = _sfc_main$4;
+
+//#endregion
+//#region src/slices/support_ticket/customer/components/CustomerSupportTicketSubscribeControl.vue
+const _hoisted_1$3 = {
+	key: 0,
+	class: "flex flex-wrap items-center gap-2"
+};
+const _hoisted_2$3 = { class: "text-sm text-base-content/70" };
+const _hoisted_3$2 = ["disabled"];
+const _hoisted_4$2 = {
+	key: 0,
+	class: "loading loading-spinner loading-xs"
+};
+const _hoisted_5$2 = { key: 1 };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+	__name: "CustomerSupportTicketSubscribeControl",
+	props: { ticket: {} },
+	setup(__props) {
+		const props = __props;
+		const isToggling = ref(false);
+		const subscriptionOverride = ref(null);
+		watch(() => props.ticket.id, () => {
+			subscriptionOverride.value = null;
+		});
+		const isSubscribed = computed(() => subscriptionOverride.value ?? props.ticket.my_subscription != null);
+		const { mutate: toggleSubscription } = useMutation((api, id) => api.supportTickets.toggleSubscription(id), { invalidate: /^support-tickets?:/ });
+		async function handleToggle() {
+			try {
+				isToggling.value = true;
+				const result = await toggleSubscription(props.ticket.id);
+				subscriptionOverride.value = result.subscribed;
+				toast.success(result.subscribed ? "You are now subscribed to this ticket" : "You have unsubscribed from this ticket");
+			} catch (e) {
+				toast.error(extractRpcErrorMessage(e, "Failed to update subscription"));
+			} finally {
+				isToggling.value = false;
+			}
+		}
+		return (_ctx, _cache) => {
+			return __props.ticket ? (openBlock(), createElementBlock("div", _hoisted_1$3, [createElementVNode("span", _hoisted_2$3, toDisplayString(isSubscribed.value ? "You will receive notifications for updates." : "Get notified when there are updates or new comments."), 1), createElementVNode("button", {
+				type: "button",
+				class: normalizeClass(isSubscribed.value ? "btn btn-sm btn-ghost" : "btn btn-sm btn-primary"),
+				disabled: isToggling.value,
+				onClick: handleToggle
+			}, [isToggling.value ? (openBlock(), createElementBlock("span", _hoisted_4$2)) : (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(isSubscribed.value ? "Unsubscribe" : "Subscribe"), 1))], 10, _hoisted_3$2)])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+var CustomerSupportTicketSubscribeControl_default = _sfc_main$3;
+
+//#endregion
+//#region src/slices/support_ticket/customer/components/CustomerMetadataCardEdit.vue
+const _hoisted_1$2 = { class: "border border-base-200 rounded-lg p-4 md:p-6" };
+const _hoisted_2$2 = { class: "grid grid-cols-1 md:grid-cols-2 gap-4" };
+const _hoisted_3$1 = { class: "form-control md:col-span-2" };
+const _hoisted_4$1 = ["disabled"];
+const _hoisted_5$1 = {
+	key: 0,
+	class: "label"
+};
+const _hoisted_6$1 = { class: "form-control md:col-span-2" };
+const _hoisted_7$1 = ["disabled"];
+const _hoisted_8$1 = { class: "form-control" };
+const _hoisted_9$1 = ["disabled"];
+const _hoisted_10$1 = { class: "form-control" };
+const _hoisted_11$1 = ["disabled"];
+const _hoisted_12$1 = { class: "flex justify-end gap-2 mt-4" };
+const _hoisted_13$1 = ["disabled"];
+const _hoisted_14$1 = ["disabled"];
+const _hoisted_15 = {
+	key: 0,
+	class: "loading loading-spinner loading-xs mr-2"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	__name: "CustomerMetadataCardEdit",
+	props: {
+		ticket: {},
+		saving: { type: Boolean }
+	},
+	emits: ["save", "cancel"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const formData = reactive({
+			title: props.ticket.title || "",
+			description: props.ticket.description || "",
+			type: props.ticket.type,
+			priority: supportTicketPriorityToNumber(props.ticket.priority)
+		});
+		const titleError = computed(() => {
+			return formData.title.trim() === "";
+		});
+		function handleSave() {
+			if (titleError.value) return;
+			emit("save", {
+				id: props.ticket.id,
+				title: formData.title.trim(),
+				description: formData.description || "",
+				type: formData.type,
+				priority: formData.priority
+			});
+		}
+		function handleCancel() {
+			emit("cancel");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [
+				createElementVNode("div", _hoisted_2$2, [
+					createCommentVNode(" Title - full width "),
+					createElementVNode("div", _hoisted_3$1, [
+						_cache[5] || (_cache[5] = createElementVNode("label", { class: "label" }, [createElementVNode("span", { class: "label-text font-medium" }, "Title")], -1)),
+						withDirectives(createElementVNode("input", {
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formData.title = $event),
+							type: "text",
+							class: normalizeClass(["input input-bordered w-full", { "input-error": titleError.value }]),
+							placeholder: "Enter ticket title",
+							disabled: __props.saving
+						}, null, 10, _hoisted_4$1), [[vModelText, formData.title]]),
+						titleError.value ? (openBlock(), createElementBlock("label", _hoisted_5$1, [..._cache[4] || (_cache[4] = [createElementVNode("span", { class: "label-text-alt text-error" }, "Title is required.", -1)])])) : createCommentVNode("v-if", true)
+					]),
+					createCommentVNode(" Description - full width "),
+					createElementVNode("div", _hoisted_6$1, [_cache[6] || (_cache[6] = createElementVNode("label", { class: "label" }, [createElementVNode("span", { class: "label-text font-medium" }, "Description")], -1)), withDirectives(createElementVNode("textarea", {
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => formData.description = $event),
+						class: "textarea textarea-bordered w-full",
+						rows: "6",
+						placeholder: "Describe the ticket in detail",
+						disabled: __props.saving
+					}, null, 8, _hoisted_7$1), [[vModelText, formData.description]])]),
+					createCommentVNode(" Type "),
+					createElementVNode("div", _hoisted_8$1, [_cache[8] || (_cache[8] = createElementVNode("label", { class: "label" }, [createElementVNode("span", { class: "label-text font-medium" }, "Type")], -1)), withDirectives(createElementVNode("select", {
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => formData.type = $event),
+						class: "select select-bordered w-full",
+						disabled: __props.saving
+					}, [..._cache[7] || (_cache[7] = [
+						createElementVNode("option", { value: "IMPROVEMENT" }, "Improvement", -1),
+						createElementVNode("option", { value: "BUG" }, "Bug", -1),
+						createElementVNode("option", { value: "FEATURE_REQUEST" }, "Feature Request", -1),
+						createElementVNode("option", { value: "OPERATIONAL" }, "Operational", -1)
+					])], 8, _hoisted_9$1), [[vModelSelect, formData.type]])]),
+					createCommentVNode(" Priority "),
+					createElementVNode("div", _hoisted_10$1, [_cache[10] || (_cache[10] = createElementVNode("label", { class: "label" }, [createElementVNode("span", { class: "label-text font-medium" }, "Priority")], -1)), withDirectives(createElementVNode("select", {
+						"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => formData.priority = $event),
+						class: "select select-bordered w-full",
+						disabled: __props.saving
+					}, [..._cache[9] || (_cache[9] = [
+						createElementVNode("option", { value: 1 }, "Low", -1),
+						createElementVNode("option", { value: 2 }, "Medium", -1),
+						createElementVNode("option", { value: 3 }, "High", -1),
+						createElementVNode("option", { value: 4 }, "Critical", -1)
+					])], 8, _hoisted_11$1), [[
+						vModelSelect,
+						formData.priority,
+						void 0,
+						{ number: true }
+					]])])
+				]),
+				createCommentVNode(" Action Buttons "),
+				createElementVNode("div", _hoisted_12$1, [createElementVNode("button", {
+					class: "btn btn-ghost",
+					onClick: handleCancel,
+					disabled: __props.saving
+				}, "Cancel", 8, _hoisted_13$1), createElementVNode("button", {
+					class: "btn btn-primary",
+					onClick: handleSave,
+					disabled: __props.saving
+				}, [__props.saving ? (openBlock(), createElementBlock("span", _hoisted_15)) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(__props.saving ? "Saving..." : "Save"), 1)], 8, _hoisted_14$1)])
+			]);
+		};
+	}
+});
+var CustomerMetadataCardEdit_default = _sfc_main$2;
+
+//#endregion
+//#region src/slices/support_ticket/customer/components/CustomerTimeline.vue
+const _hoisted_1$1 = { class: "flex flex-col gap-4 w-full" };
+const _hoisted_2$1 = {
+	key: 0,
+	class: "text-base-content/50 text-sm text-center py-8"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "CustomerTimeline",
+	props: {
+		ticket: {},
+		notes: {},
+		systemEvents: {},
+		commentsLocked: { type: Boolean },
+		onAddNote: { type: Function }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const noteInputRef = ref(null);
+		const mergedTimelineItems = computed(() => {
+			const items = [];
+			for (const note of props.notes ?? []) items.push({
+				type: "customer-note",
+				timestamp: note.createdAt,
+				id: `note-${note.createdAt}-${note.authorName}`,
+				data: note
+			});
+			for (const event of props.systemEvents ?? []) items.push({
+				type: "system-event",
+				timestamp: event.timestamp,
+				id: event.id,
+				data: event
+			});
+			items.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+			return items;
+		});
+		function resetInput() {
+			noteInputRef.value?.reset();
+		}
+		__expose({ resetInput });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				createVNode(TimelineNoteInput_default, {
+					ref_key: "noteInputRef",
+					ref: noteInputRef,
+					"show-type-toggle": false,
+					disabled: __props.commentsLocked ?? false,
+					"on-submit": __props.onAddNote
+				}, null, 8, ["disabled", "on-submit"]),
+				mergedTimelineItems.value.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_2$1, " No activity yet. ")) : createCommentVNode("v-if", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(mergedTimelineItems.value, (item) => {
+					return openBlock(), createElementBlock(Fragment, { key: item.id }, [item.type === "customer-note" ? (openBlock(), createBlock(TimelineItem_default, {
+						key: 0,
+						"author-name": item.data.authorName,
+						"created-at": item.data.createdAt,
+						variant: "customer"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(item.data.body ?? ""), 1)]),
+						_: 2
+					}, 1032, ["author-name", "created-at"])) : item.type === "system-event" ? (openBlock(), createBlock(TimelineSystemEvent_default, {
+						key: 1,
+						author: item.data.author,
+						message: item.data.message,
+						timestamp: item.data.timestamp,
+						"old-value": item.data.oldValue,
+						"new-value": item.data.newValue
+					}, null, 8, [
+						"author",
+						"message",
+						"timestamp",
+						"old-value",
+						"new-value"
+					])) : createCommentVNode("v-if", true)], 64);
+				}), 128))
+			]);
+		};
+	}
+});
+var CustomerTimeline_default = _sfc_main$1;
+
+//#endregion
+//#region src/slices/support_ticket/customer/CustomerSupportTicketDetailPage.vue
+const _hoisted_1 = {
+	key: 0,
+	class: "flex justify-center items-center p-8"
+};
+const _hoisted_2 = { class: "alert alert-error mb-4 max-w-4xl mx-auto px-4" };
+const _hoisted_3 = { class: "flex-1" };
+const _hoisted_4 = { class: "mt-2" };
+const _hoisted_5 = { class: "px-4 py-6 max-w-4xl mx-auto" };
+const _hoisted_6 = { class: "mb-6" };
+const _hoisted_7 = { class: "text-2xl font-bold text-base-content break-words leading-tight mt-2" };
+const _hoisted_8 = { class: "mb-6" };
+const _hoisted_9 = {
+	key: 0,
+	class: "flex gap-2 mb-6"
+};
+const _hoisted_10 = { class: "mb-6" };
+const _hoisted_11 = { class: "mb-8" };
+const _hoisted_12 = { class: "mb-8" };
+const _hoisted_13 = {
+	key: 1,
+	class: "alert alert-error mb-4"
+};
+const _hoisted_14 = {
+	key: 2,
+	class: "flex justify-center items-center py-8"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "CustomerSupportTicketDetailPage",
+	props: {
+		ticket: {},
+		isLoading: { type: Boolean },
+		error: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const route = useRoute();
+		const router = useRouter();
+		const support_ticket_id = route.params.id;
+		const isEditMode = computed(() => route.query.mode === "edit");
+		const isSaving = ref(false);
+		const refreshTicket = inject("refreshTicket");
+		const isLocked = computed(() => {
+			if (!props.ticket) return false;
+			return !!props.ticket.is_locked;
+		});
+		const isCommentsLocked = computed(() => {
+			if (!props.ticket) return false;
+			return !!props.ticket.archived_at;
+		});
+		const { data: timelineData, error: timelineError, refetch: refetchTimeline } = useQuery(async (api) => {
+			const [customerNotes, recordVersions] = await Promise.all([api.notes.getNotes({
+				record_id: {
+					operator: OPERATORS.EQUALS,
+					value: support_ticket_id
+				},
+				record_type: {
+					operator: OPERATORS.EQUALS,
+					value: "support_ticket"
+				},
+				is_internal: {
+					operator: OPERATORS.EQUALS,
+					value: false
+				},
+				first: 100,
+				sortBy: "created_at",
+				sortDirection: "asc"
+			}), api.recordVersions.listRecordVersionsCustomer(support_ticket_id, RecordConst.SUPPORT_TICKET, {
+				record_types: [RecordConst.SUPPORT_TICKET, RecordConst.SUPPORT_TICKET_ACTIVITY],
+				first: 100,
+				sortBy: "recorded_at",
+				sortDirection: "asc"
+			})]);
+			return {
+				customerNotes,
+				recordVersions
+			};
+		}, {
+			enabled: !!support_ticket_id && !!props.ticket,
+			batchMode: BATCH_MODE.batch,
+			trackedSegment: "customer-support-ticket-timeline"
+		});
+		const customerNotesForTimeline = computed(() => {
+			return (timelineData.value?.customerNotes?.items ?? []).map((n) => ({
+				authorName: n.created_by_display_name ?? n.created_by ?? "(unknown)",
+				createdAt: n.created_at,
+				body: n.body ?? ""
+			})).sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+		});
+		const allSystemEvents = computed(() => {
+			const data = timelineData.value?.recordVersions;
+			const versions = data?.items ?? [];
+			const userDisplayMap = data?.user_display_map;
+			return parseRecordVersions(versions, userDisplayMap ? new Map(Object.entries(userDisplayMap)) : void 0);
+		});
+		const filteredSystemEvents = computed(() => {
+			if (!props.ticket) return [];
+			const events = allSystemEvents.value;
+			const isPending = props.ticket.status === "PENDING" || !props.ticket.is_locked;
+			const STAFF_ONLY_FIELDS = new Set([
+				"dev_lifecycle",
+				"delivered_value",
+				"start_at"
+			]);
+			return events.filter((event) => {
+				if (event.fieldName) {
+					if (STAFF_ONLY_FIELDS.has(event.fieldName)) return false;
+					if (isPending && event.fieldName === "credit_value") return false;
+					return true;
+				}
+				const message = event.message.toLowerCase();
+				if (message.includes("dev lifecycle") || message.includes("moved") || message.includes("delivered value") || message.includes("start date")) return false;
+				if (isPending && (message.includes("credits") || message.includes("credit"))) return false;
+				return true;
+			});
+		});
+		const { mutate: createNote } = useMutation((api, input) => api.notes.createNote(input), { invalidate: /^notes?:/ });
+		const { mutate: updateTicket } = useMutation((api, input) => api.supportTickets.updateTicket(input), { invalidate: /^support-tickets?:/ });
+		async function handleAddNote(payload) {
+			try {
+				await createNote({
+					record_id: support_ticket_id,
+					record_type: "support_ticket",
+					body: payload.content,
+					tag: null,
+					is_internal: false
+				});
+				await refetchTimeline();
+				toast.success("Comment added");
+			} catch {
+				toast.error("Failed to add comment");
+				throw new Error("Failed to add comment");
+			}
+		}
+		function enterEditMode() {
+			router.push({
+				name: route.name || "CustomerViewSupportTicket",
+				params: route.params,
+				query: {
+					...route.query,
+					mode: "edit"
+				}
+			});
+		}
+		async function exitEditMode() {
+			await router.push({
+				name: route.name || "CustomerViewSupportTicket",
+				params: route.params,
+				query: {
+					...route.query,
+					mode: void 0
+				}
+			});
+		}
+		async function handleSave(payload) {
+			isSaving.value = true;
+			try {
+				await updateTicket(payload);
+				await exitEditMode();
+				await nextTick();
+				toast.success("Ticket updated successfully");
+				if (refreshTicket) await refreshTicket();
+			} catch (e) {
+				const errorMessage = e instanceof Error ? e.message : "Failed to update ticket";
+				toast.error(errorMessage);
+			} finally {
+				isSaving.value = false;
+			}
+		}
+		return (_ctx, _cache) => {
+			const _component_router_link = resolveComponent("router-link");
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" Loading State (only on initial load; refetch keeps content visible) "), __props.isLoading && !__props.ticket ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "loading loading-spinner loading-lg" }, null, -1)])])) : __props.error ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" Error State "), createElementVNode("div", _hoisted_2, [_cache[3] || (_cache[3] = createElementVNode("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				class: "stroke-current shrink-0 h-6 w-6",
+				fill: "none",
+				viewBox: "0 0 24 24"
+			}, [createElementVNode("path", {
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"stroke-width": "2",
+				d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+			})], -1)), createElementVNode("div", _hoisted_3, [createElementVNode("span", null, toDisplayString(__props.error.message || "An error occurred"), 1), createElementVNode("div", _hoisted_4, [createVNode(_component_router_link, {
+				to: { name: "CustomerSupportTicketList" },
+				class: "link link-primary"
+			}, {
+				default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Go back to ticket list ", -1)])]),
+				_: 1
+			})])])])], 2112)) : __props.ticket ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" Main Content "), createElementVNode("div", _hoisted_5, [
+				createCommentVNode(" Header "),
+				createElementVNode("div", _hoisted_6, [createElementVNode("h1", _hoisted_7, toDisplayString(__props.ticket.title), 1)]),
+				createCommentVNode(" Action Banner "),
+				createElementVNode("div", _hoisted_8, [createVNode(CustomerActionBanner_default, { ticket: __props.ticket }, null, 8, ["ticket"])]),
+				createCommentVNode(" Edit / Cancel "),
+				!isLocked.value && !isCommentsLocked.value ? (openBlock(), createElementBlock("div", _hoisted_9, [!isEditMode.value ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					onClick: enterEditMode,
+					class: "btn btn-sm"
+				}, [..._cache[4] || (_cache[4] = [createElementVNode("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					"stroke-width": "1.5",
+					stroke: "currentColor",
+					class: "w-4 h-4 mr-2"
+				}, [createElementVNode("path", {
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+				})], -1), createTextVNode(" Edit ", -1)])])) : (openBlock(), createElementBlock("button", {
+					key: 1,
+					onClick: exitEditMode,
+					class: "btn btn-sm"
+				}, [..._cache[5] || (_cache[5] = [createElementVNode("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					"stroke-width": "1.5",
+					stroke: "currentColor",
+					class: "w-4 h-4 mr-2"
+				}, [createElementVNode("path", {
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					d: "M6 18L18 6M6 6l12 12"
+				})], -1), createTextVNode(" Cancel ", -1)])]))])) : createCommentVNode("v-if", true),
+				createCommentVNode(" Subscribe / Unsubscribe "),
+				createElementVNode("div", _hoisted_10, [createVNode(CustomerSupportTicketSubscribeControl_default, { ticket: __props.ticket }, null, 8, ["ticket"])]),
+				createCommentVNode(" Metadata Card (Display or Edit) "),
+				createElementVNode("div", _hoisted_11, [!isEditMode.value ? (openBlock(), createBlock(CustomerMetadataCard_default, {
+					key: 0,
+					ticket: __props.ticket
+				}, null, 8, ["ticket"])) : (openBlock(), createBlock(CustomerMetadataCardEdit_default, {
+					key: 1,
+					ticket: __props.ticket,
+					saving: isSaving.value,
+					onSave: handleSave,
+					onCancel: exitEditMode
+				}, null, 8, ["ticket", "saving"]))]),
+				createCommentVNode(" Attachments (separate from timeline so adding a comment doesn't cause refetch) "),
+				createElementVNode("div", _hoisted_12, [createVNode(SupportTicketAttachmentsCollapsible_default, {
+					"record-id": __props.ticket.id,
+					locked: isCommentsLocked.value,
+					editable: !isCommentsLocked.value,
+					onUploaded: unref(refetchTimeline),
+					onDeleted: unref(refetchTimeline)
+				}, null, 8, [
+					"record-id",
+					"locked",
+					"editable",
+					"onUploaded",
+					"onDeleted"
+				])]),
+				createCommentVNode(" Timeline: stay mounted once we have data so adding a comment doesn't unmount/remount "),
+				createElementVNode("div", null, [unref(timelineData) != null ? (openBlock(), createBlock(CustomerTimeline_default, {
+					key: 0,
+					ticket: __props.ticket,
+					notes: customerNotesForTimeline.value,
+					"system-events": filteredSystemEvents.value,
+					"comments-locked": isCommentsLocked.value,
+					"on-add-note": handleAddNote
+				}, null, 8, [
+					"ticket",
+					"notes",
+					"system-events",
+					"comments-locked"
+				])) : unref(timelineError) ? (openBlock(), createElementBlock("div", _hoisted_13, [createElementVNode("span", null, toDisplayString(unref(timelineError)?.message ?? "Failed to load timeline"), 1), createElementVNode("button", {
+					class: "btn btn-sm btn-outline mt-2",
+					onClick: _cache[0] || (_cache[0] = (...args) => unref(refetchTimeline) && unref(refetchTimeline)(...args))
+				}, " Retry ")])) : (openBlock(), createElementBlock("div", _hoisted_14, [..._cache[6] || (_cache[6] = [createElementVNode("span", { class: "loading loading-spinner loading-lg" }, null, -1)])]))])
+			])], 2112)) : createCommentVNode("v-if", true)], 2112);
+		};
+	}
+});
+var CustomerSupportTicketDetailPage_default = _sfc_main;
+
+//#endregion
+export { CustomerSupportTicketDetailPage_default as default };
+//# sourceMappingURL=CustomerSupportTicketDetailPage-DQa_Zvfe.js.map