@burdenoff/microfe-tours 2026.510.112

package/dist/tours/pages/TourBuilderPage.js

@@ -0,0 +1,363 @@
+import { useToursContext as e } from "../providers/ToursProvider.js";
+import { useTourLifecycle as t } from "../hooks/useTourLifecycle.js";
+import { useToursPermissionAccess as n } from "../hooks/useToursPermissionAccess.js";
+import { TOUR_PERMISSIONS as r } from "../../constants/permissions.js";
+import { useToursI18n as i } from "../i18n.js";
+import { useTourBuilder as a } from "../hooks/useTourBuilder.js";
+import { useEffect as o, useRef as s, useState as c } from "react";
+import { PermissionGate as l } from "@burdenoff/fe-libs/shared/components";
+import { ArrowLeft as u, BarChart3 as d, Calendar as f, Eye as p, LayoutTemplate as m, ListOrdered as h, Save as g } from "lucide-react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useNavigate as b, useParams as x } from "react-router-dom";
+//#region src/tours/pages/TourBuilderPage.tsx
+function S() {
+	let { tr: S } = i(), { tourId: C } = x(), w = b(), { basePath: T = "/" } = e(), { hasPermission: E } = n(), D = !C || C === "new", O = E(r.TOUR_CREATE), k = E(r.TOUR_UPDATE), A = E(r.TOUR_TEMPLATE_CREATE), j = D ? O : k, { tour: M, loadTour: N, createTour: P, updateTour: F, saving: I, validationErrors: L, error: R } = a(C), { saveAsTemplate: z } = t(), [B, V] = c({
+		name: "",
+		description: "",
+		productId: "",
+		moduleId: "",
+		pageId: "",
+		isActive: !0,
+		status: "DRAFT",
+		triggerType: "MANUAL",
+		priority: 50,
+		displayOrder: 1,
+		startDate: "",
+		endDate: ""
+	}), H = s(!1);
+	o(() => {
+		C && C !== "new" && (H.current = !1, N(C));
+	}, [C, N]), o(() => {
+		M && !H.current && (V(M), H.current = !0);
+	}, [M]);
+	let U = async (e) => {
+		e.preventDefault();
+		try {
+			C && C !== "new" ? await F(C, B) : await P(B);
+		} catch (e) {
+			console.error("Failed to save tour:", e);
+		}
+	}, W = () => {
+		w(`${T}/list`);
+	}, G = (e) => {
+		if (!e) return "";
+		let t = new Date(e);
+		return Number.isNaN(t.getTime()) ? "" : (/* @__PURE__ */ new Date(t.getTime() - t.getTimezoneOffset() * 6e4)).toISOString().slice(0, 16);
+	};
+	return /* @__PURE__ */ y("div", {
+		className: "space-y-4 sm:space-y-6 p-3 sm:p-6 max-w-4xl mx-auto",
+		children: [/* @__PURE__ */ y("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ v("button", {
+				onClick: W,
+				className: "p-2 hover:bg-accent rounded-md",
+				"aria-label": S("tourBuilder.goBack"),
+				children: /* @__PURE__ */ v(u, { size: 20 })
+			}), /* @__PURE__ */ y("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ v("h1", {
+					className: "text-xl sm:text-2xl font-bold text-foreground",
+					children: S(C && C !== "new" ? "tourBuilder.titleEdit" : "tourBuilder.titleCreate")
+				}), /* @__PURE__ */ v("p", {
+					className: "text-sm text-muted-foreground",
+					children: S("tourBuilder.subtitle")
+				})]
+			})]
+		}), /* @__PURE__ */ y("form", {
+			onSubmit: U,
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ y("div", {
+					className: "border border-border rounded-md p-4 sm:p-6 bg-card",
+					children: [/* @__PURE__ */ v("h2", {
+						className: "text-lg font-semibold mb-4",
+						children: S("tourBuilder.sectionBasicInfo")
+					}), /* @__PURE__ */ y("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								className: "block text-sm font-medium mb-2",
+								htmlFor: "tour-name",
+								children: S("tourBuilder.labelName")
+							}), /* @__PURE__ */ v("input", {
+								id: "tour-name",
+								type: "text",
+								value: B.name || "",
+								onChange: (e) => V({
+									...B,
+									name: e.target.value
+								}),
+								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+								required: !0
+							})] }),
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								className: "block text-sm font-medium mb-2",
+								htmlFor: "tour-description",
+								children: S("tourBuilder.labelDescription")
+							}), /* @__PURE__ */ v("textarea", {
+								id: "tour-description",
+								value: B.description || "",
+								onChange: (e) => V({
+									...B,
+									description: e.target.value
+								}),
+								rows: 3,
+								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground"
+							})] }),
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								className: "block text-sm font-medium mb-2",
+								htmlFor: "product-id",
+								children: S("tourBuilder.labelProductId")
+							}), /* @__PURE__ */ v("input", {
+								id: "product-id",
+								type: "text",
+								value: B.productId || "",
+								onChange: (e) => V({
+									...B,
+									productId: e.target.value
+								}),
+								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+								required: !0
+							})] }),
+							/* @__PURE__ */ y("div", {
+								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+								children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									className: "block text-sm font-medium mb-2",
+									htmlFor: "module-id",
+									children: "Module ID"
+								}), /* @__PURE__ */ v("input", {
+									id: "module-id",
+									type: "text",
+									value: B.moduleId || "",
+									onChange: (e) => V({
+										...B,
+										moduleId: e.target.value || void 0
+									}),
+									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+									placeholder: "vibecontrols"
+								})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									className: "block text-sm font-medium mb-2",
+									htmlFor: "page-id",
+									children: "Page ID"
+								}), /* @__PURE__ */ v("input", {
+									id: "page-id",
+									type: "text",
+									value: B.pageId || "",
+									onChange: (e) => V({
+										...B,
+										pageId: e.target.value || void 0
+									}),
+									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+									placeholder: "agents"
+								})] })]
+							}),
+							/* @__PURE__ */ y("label", {
+								className: "flex items-center gap-3 cursor-pointer",
+								children: [/* @__PURE__ */ v("input", {
+									type: "checkbox",
+									checked: B.isActive ?? !0,
+									onChange: (e) => V({
+										...B,
+										isActive: e.target.checked
+									}),
+									className: "w-4 h-4 rounded"
+								}), /* @__PURE__ */ v("span", {
+									className: "text-sm font-medium",
+									children: "Active"
+								})]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "border border-border rounded-md p-4 sm:p-6 bg-card",
+					children: [/* @__PURE__ */ v("h2", {
+						className: "text-lg font-semibold mb-4",
+						children: S("tourBuilder.sectionTriggerSettings")
+					}), /* @__PURE__ */ y("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								className: "block text-sm font-medium mb-2",
+								htmlFor: "trigger-type",
+								children: S("tourBuilder.labelTriggerType")
+							}), /* @__PURE__ */ y("select", {
+								id: "trigger-type",
+								value: B.triggerType || "MANUAL",
+								onChange: (e) => V({
+									...B,
+									triggerType: e.target.value
+								}),
+								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+								children: [
+									/* @__PURE__ */ v("option", {
+										value: "MANUAL",
+										children: S("tourBuilder.triggerManual")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "AUTO_FIRST_VISIT",
+										children: S("tourBuilder.triggerAutoFirstVisit")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "AUTO_ALWAYS",
+										children: S("tourBuilder.triggerAutoAlways")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "ON_EVENT",
+										children: S("tourBuilder.triggerOnEvent")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "SCHEDULED",
+										children: S("tourBuilder.triggerScheduled")
+									})
+								]
+							})] }),
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								className: "block text-sm font-medium mb-2",
+								htmlFor: "priority",
+								children: S("tourBuilder.labelPriority")
+							}), /* @__PURE__ */ v("input", {
+								id: "priority",
+								type: "number",
+								min: "1",
+								max: "100",
+								value: B.priority || 50,
+								onChange: (e) => V({
+									...B,
+									priority: parseInt(e.target.value)
+								}),
+								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground"
+							})] }),
+							/* @__PURE__ */ y("div", {
+								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+								children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									className: "block text-sm font-medium mb-2",
+									htmlFor: "tour-start-date",
+									children: "Start Date"
+								}), /* @__PURE__ */ v("input", {
+									id: "tour-start-date",
+									type: "datetime-local",
+									value: G(B.startDate),
+									onChange: (e) => V({
+										...B,
+										startDate: e.target.value ? new Date(e.target.value).toISOString() : void 0
+									}),
+									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground"
+								})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									className: "block text-sm font-medium mb-2",
+									htmlFor: "tour-end-date",
+									children: "End Date"
+								}), /* @__PURE__ */ v("input", {
+									id: "tour-end-date",
+									type: "datetime-local",
+									value: G(B.endDate),
+									onChange: (e) => V({
+										...B,
+										endDate: e.target.value ? new Date(e.target.value).toISOString() : void 0
+									}),
+									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground"
+								})] })]
+							})
+						]
+					})]
+				}),
+				R && /* @__PURE__ */ y("div", {
+					className: "border border-destructive rounded-md p-4 bg-destructive/10",
+					children: [/* @__PURE__ */ v("h3", {
+						className: "font-semibold text-destructive mb-2",
+						children: S("tourBuilder.errorTitle")
+					}), /* @__PURE__ */ v("p", {
+						className: "text-sm text-destructive",
+						children: R.message
+					})]
+				}),
+				L.length > 0 && /* @__PURE__ */ y("div", {
+					className: "border border-destructive rounded-md p-4 bg-destructive/10",
+					children: [/* @__PURE__ */ v("h3", {
+						className: "font-semibold text-destructive mb-2",
+						children: S("tourBuilder.validationErrorsTitle")
+					}), /* @__PURE__ */ v("ul", {
+						className: "list-disc list-inside space-y-1",
+						children: L.map((e, t) => /* @__PURE__ */ v("li", {
+							className: "text-sm text-destructive",
+							children: e.message
+						}, t))
+					})]
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "flex flex-wrap gap-3",
+					children: [/* @__PURE__ */ v(l, {
+						permission: D ? r.TOUR_CREATE : r.TOUR_UPDATE,
+						children: /* @__PURE__ */ y("button", {
+							type: "submit",
+							disabled: I || !j,
+							className: "flex-1 min-w-[200px] px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center justify-center gap-2",
+							children: [/* @__PURE__ */ v(g, { size: 20 }), S(I ? "tourBuilder.saving" : C && C !== "new" ? "tourBuilder.updateTour" : "tourBuilder.createAndAddSteps")]
+						})
+					}), C && C !== "new" && /* @__PURE__ */ y(_, { children: [
+						/* @__PURE__ */ y("button", {
+							type: "button",
+							onClick: () => w(`${T}/${C}/steps`),
+							className: "px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ v(h, { size: 20 }),
+								S("tourBuilder.editSteps"),
+								M?.steps && M.steps.length > 0 && /* @__PURE__ */ v("span", {
+									className: "ml-1 px-2 py-0.5 text-xs bg-primary/20 rounded-full",
+									children: M.steps.length
+								})
+							]
+						}),
+						/* @__PURE__ */ y("button", {
+							type: "button",
+							onClick: () => w(`${T}/${C}/preview`),
+							className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2",
+							children: [/* @__PURE__ */ v(p, { size: 20 }), S("tourBuilder.preview")]
+						}),
+						/* @__PURE__ */ y("button", {
+							type: "button",
+							onClick: () => w(`${T}/${C}/analytics`),
+							className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2",
+							children: [/* @__PURE__ */ v(d, { size: 20 }), S("tourBuilder.analytics")]
+						}),
+						/* @__PURE__ */ y("button", {
+							type: "button",
+							onClick: () => w(`${T}/${C}/schedule`),
+							className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2",
+							children: [/* @__PURE__ */ v(f, { size: 20 }), "Schedule"]
+						}),
+						/* @__PURE__ */ v(l, {
+							permission: r.TOUR_TEMPLATE_CREATE,
+							children: /* @__PURE__ */ y("button", {
+								type: "button",
+								onClick: async () => {
+									if (!C || C === "new") return;
+									let e = `${B.name || M?.name || "Tour"} Template`, t = window.prompt("Template name", e);
+									if (!t) return;
+									let n = window.prompt("Template category (ONBOARDING, FEATURE_ANNOUNCEMENT, HELP, CUSTOM)", "ONBOARDING") || "ONBOARDING";
+									try {
+										await z(C, {
+											name: t,
+											description: B.description,
+											category: n,
+											isPublic: !1
+										}), w(`${T}/templates`);
+									} catch (e) {
+										console.error("Failed to save template:", e);
+									}
+								},
+								disabled: !A,
+								className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2 disabled:opacity-50",
+								children: [/* @__PURE__ */ v(m, { size: 20 }), "Save as Template"]
+							})
+						})
+					] })]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { S as TourBuilderPage };
+
+//# sourceMappingURL=TourBuilderPage.js.map

package/dist/tours/pages/TourBuilderPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourBuilderPage.js","names":[],"sources":["../../../src/tours/pages/TourBuilderPage.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport {\n  Save,\n  ArrowLeft,\n  Eye,\n  ListOrdered,\n  BarChart3,\n  Calendar,\n  LayoutTemplate,\n} from 'lucide-react';\nimport { PermissionGate } from '@burdenoff/fe-libs/shared/components';\nimport { useTourBuilder } from '../hooks/useTourBuilder';\nimport { useTourLifecycle } from '../hooks/useTourLifecycle';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport type { Tour, TourTriggerType } from '../types';\nimport { useToursI18n } from '../i18n';\n\n/**\n * Tour builder page\n * Create or edit tour metadata\n */\nexport function TourBuilderPage() {\n  const { tr } = useToursI18n();\n  const { tourId } = useParams();\n  const navigate = useNavigate();\n  const { basePath = '/' } = useToursContext();\n  const { hasPermission } = useToursPermissionAccess();\n  const isNew = !tourId || tourId === 'new';\n  const canCreate = hasPermission(TOUR_PERMISSIONS.TOUR_CREATE);\n  const canUpdate = hasPermission(TOUR_PERMISSIONS.TOUR_UPDATE);\n  const canCreateTemplate = hasPermission(TOUR_PERMISSIONS.TOUR_TEMPLATE_CREATE);\n  const canSave = isNew ? canCreate : canUpdate;\n\n  const { tour, loadTour, createTour, updateTour, saving, validationErrors, error } =\n    useTourBuilder(tourId);\n  const { saveAsTemplate } = useTourLifecycle();\n\n  const defaultFormData = {\n    name: '',\n    description: '',\n    productId: '',\n    moduleId: '',\n    pageId: '',\n    isActive: true,\n    status: 'DRAFT' as const,\n    triggerType: 'MANUAL' as const,\n    priority: 50,\n    displayOrder: 1,\n    startDate: '',\n    endDate: '',\n  };\n\n  const [formData, setFormData] = useState<Partial<Tour>>(defaultFormData);\n\n  const formInitializedRef = useRef(false);\n\n  useEffect(() => {\n    if (tourId && tourId !== 'new') {\n      formInitializedRef.current = false;\n      loadTour(tourId);\n    }\n  }, [tourId, loadTour]);\n\n  useEffect(() => {\n    if (tour && !formInitializedRef.current) {\n      setFormData(tour);\n      formInitializedRef.current = true;\n    }\n  }, [tour]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    try {\n      if (tourId && tourId !== 'new') {\n        await updateTour(tourId, formData);\n      } else {\n        await createTour(formData);\n      }\n    } catch (error) {\n      console.error('Failed to save tour:', error);\n    }\n  };\n\n  const handleBack = () => {\n    navigate(`${basePath}/list`);\n  };\n\n  const formatDateTimeLocal = (value?: string) => {\n    if (!value) return '';\n\n    const date = new Date(value);\n    if (Number.isNaN(date.getTime())) {\n      return '';\n    }\n\n    return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 16);\n  };\n\n  const handleSaveTemplate = async () => {\n    if (!tourId || tourId === 'new') return;\n\n    const defaultName = `${formData.name || tour?.name || 'Tour'} Template`;\n    const name = window.prompt('Template name', defaultName);\n    if (!name) return;\n\n    const category =\n      window.prompt(\n        'Template category (ONBOARDING, FEATURE_ANNOUNCEMENT, HELP, CUSTOM)',\n        'ONBOARDING'\n      ) || 'ONBOARDING';\n\n    try {\n      await saveAsTemplate(tourId, {\n        name,\n        description: formData.description,\n        category,\n        isPublic: false,\n      });\n      navigate(`${basePath}/templates`);\n    } catch (saveTemplateError) {\n      console.error('Failed to save template:', saveTemplateError);\n    }\n  };\n\n  return (\n    <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6 max-w-4xl mx-auto\">\n      {/* Header */}\n      <div className=\"flex items-center gap-4\">\n        <button\n          onClick={handleBack}\n          className=\"p-2 hover:bg-accent rounded-md\"\n          aria-label={tr('tourBuilder.goBack')}\n        >\n          <ArrowLeft size={20} />\n        </button>\n        <div className=\"flex-1\">\n          <h1 className=\"text-xl sm:text-2xl font-bold text-foreground\">\n            {tourId && tourId !== 'new'\n              ? tr('tourBuilder.titleEdit')\n              : tr('tourBuilder.titleCreate')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground\">{tr('tourBuilder.subtitle')}</p>\n        </div>\n      </div>\n\n      {/* Form */}\n      <form onSubmit={handleSubmit} className=\"space-y-6\">\n        {/* Basic Info */}\n        <div className=\"border border-border rounded-md p-4 sm:p-6 bg-card\">\n          <h2 className=\"text-lg font-semibold mb-4\">{tr('tourBuilder.sectionBasicInfo')}</h2>\n\n          <div className=\"space-y-4\">\n            {/* Name */}\n            <div>\n              <label className=\"block text-sm font-medium mb-2\" htmlFor=\"tour-name\">\n                {tr('tourBuilder.labelName')}\n              </label>\n              <input\n                id=\"tour-name\"\n                type=\"text\"\n                value={formData.name || ''}\n                onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n                className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n                required\n              />\n            </div>\n\n            {/* Description */}\n            <div>\n              <label className=\"block text-sm font-medium mb-2\" htmlFor=\"tour-description\">\n                {tr('tourBuilder.labelDescription')}\n              </label>\n              <textarea\n                id=\"tour-description\"\n                value={formData.description || ''}\n                onChange={(e) => setFormData({ ...formData, description: e.target.value })}\n                rows={3}\n                className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n              />\n            </div>\n\n            {/* Product ID */}\n            <div>\n              <label className=\"block text-sm font-medium mb-2\" htmlFor=\"product-id\">\n                {tr('tourBuilder.labelProductId')}\n              </label>\n              <input\n                id=\"product-id\"\n                type=\"text\"\n                value={formData.productId || ''}\n                onChange={(e) => setFormData({ ...formData, productId: e.target.value })}\n                className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n                required\n              />\n            </div>\n\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              <div>\n                <label className=\"block text-sm font-medium mb-2\" htmlFor=\"module-id\">\n                  Module ID\n                </label>\n                <input\n                  id=\"module-id\"\n                  type=\"text\"\n                  value={formData.moduleId || ''}\n                  onChange={(e) =>\n                    setFormData({ ...formData, moduleId: e.target.value || undefined })\n                  }\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n                  placeholder=\"vibecontrols\"\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium mb-2\" htmlFor=\"page-id\">\n                  Page ID\n                </label>\n                <input\n                  id=\"page-id\"\n                  type=\"text\"\n                  value={formData.pageId || ''}\n                  onChange={(e) =>\n                    setFormData({ ...formData, pageId: e.target.value || undefined })\n                  }\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n                  placeholder=\"agents\"\n                />\n              </div>\n            </div>\n\n            <label className=\"flex items-center gap-3 cursor-pointer\">\n              <input\n                type=\"checkbox\"\n                checked={formData.isActive ?? true}\n                onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}\n                className=\"w-4 h-4 rounded\"\n              />\n              <span className=\"text-sm font-medium\">Active</span>\n            </label>\n          </div>\n        </div>\n\n        {/* Trigger Settings */}\n        <div className=\"border border-border rounded-md p-4 sm:p-6 bg-card\">\n          <h2 className=\"text-lg font-semibold mb-4\">{tr('tourBuilder.sectionTriggerSettings')}</h2>\n\n          <div className=\"space-y-4\">\n            {/* Trigger Type */}\n            <div>\n              <label className=\"block text-sm font-medium mb-2\" htmlFor=\"trigger-type\">\n                {tr('tourBuilder.labelTriggerType')}\n              </label>\n              <select\n                id=\"trigger-type\"\n                value={formData.triggerType || 'MANUAL'}\n                onChange={(e) =>\n                  setFormData({ ...formData, triggerType: e.target.value as TourTriggerType })\n                }\n                className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n              >\n                <option value=\"MANUAL\">{tr('tourBuilder.triggerManual')}</option>\n                <option value=\"AUTO_FIRST_VISIT\">{tr('tourBuilder.triggerAutoFirstVisit')}</option>\n                <option value=\"AUTO_ALWAYS\">{tr('tourBuilder.triggerAutoAlways')}</option>\n                <option value=\"ON_EVENT\">{tr('tourBuilder.triggerOnEvent')}</option>\n                <option value=\"SCHEDULED\">{tr('tourBuilder.triggerScheduled')}</option>\n              </select>\n            </div>\n\n            {/* Priority */}\n            <div>\n              <label className=\"block text-sm font-medium mb-2\" htmlFor=\"priority\">\n                {tr('tourBuilder.labelPriority')}\n              </label>\n              <input\n                id=\"priority\"\n                type=\"number\"\n                min=\"1\"\n                max=\"100\"\n                value={formData.priority || 50}\n                onChange={(e) => setFormData({ ...formData, priority: parseInt(e.target.value) })}\n                className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n              />\n            </div>\n\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              <div>\n                <label className=\"block text-sm font-medium mb-2\" htmlFor=\"tour-start-date\">\n                  Start Date\n                </label>\n                <input\n                  id=\"tour-start-date\"\n                  type=\"datetime-local\"\n                  value={formatDateTimeLocal(formData.startDate)}\n                  onChange={(e) =>\n                    setFormData({\n                      ...formData,\n                      startDate: e.target.value\n                        ? new Date(e.target.value).toISOString()\n                        : undefined,\n                    })\n                  }\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium mb-2\" htmlFor=\"tour-end-date\">\n                  End Date\n                </label>\n                <input\n                  id=\"tour-end-date\"\n                  type=\"datetime-local\"\n                  value={formatDateTimeLocal(formData.endDate)}\n                  onChange={(e) =>\n                    setFormData({\n                      ...formData,\n                      endDate: e.target.value ? new Date(e.target.value).toISOString() : undefined,\n                    })\n                  }\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* API Error */}\n        {error && (\n          <div className=\"border border-destructive rounded-md p-4 bg-destructive/10\">\n            <h3 className=\"font-semibold text-destructive mb-2\">{tr('tourBuilder.errorTitle')}</h3>\n            <p className=\"text-sm text-destructive\">{error.message}</p>\n          </div>\n        )}\n\n        {/* Validation Errors */}\n        {validationErrors.length > 0 && (\n          <div className=\"border border-destructive rounded-md p-4 bg-destructive/10\">\n            <h3 className=\"font-semibold text-destructive mb-2\">\n              {tr('tourBuilder.validationErrorsTitle')}\n            </h3>\n            <ul className=\"list-disc list-inside space-y-1\">\n              {validationErrors.map((err, index) => (\n                <li key={index} className=\"text-sm text-destructive\">\n                  {err.message}\n                </li>\n              ))}\n            </ul>\n          </div>\n        )}\n\n        {/* Actions */}\n        <div className=\"flex flex-wrap gap-3\">\n          <PermissionGate\n            permission={isNew ? TOUR_PERMISSIONS.TOUR_CREATE : TOUR_PERMISSIONS.TOUR_UPDATE}\n          >\n            <button\n              type=\"submit\"\n              disabled={saving || !canSave}\n              className=\"flex-1 min-w-[200px] px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center justify-center gap-2\"\n            >\n              <Save size={20} />\n              {saving\n                ? tr('tourBuilder.saving')\n                : tourId && tourId !== 'new'\n                  ? tr('tourBuilder.updateTour')\n                  : tr('tourBuilder.createAndAddSteps')}\n            </button>\n          </PermissionGate>\n          {tourId && tourId !== 'new' && (\n            <>\n              <button\n                type=\"button\"\n                onClick={() => navigate(`${basePath}/${tourId}/steps`)}\n                className=\"px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 flex items-center gap-2\"\n              >\n                <ListOrdered size={20} />\n                {tr('tourBuilder.editSteps')}\n                {tour?.steps && tour.steps.length > 0 && (\n                  <span className=\"ml-1 px-2 py-0.5 text-xs bg-primary/20 rounded-full\">\n                    {tour.steps.length}\n                  </span>\n                )}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => navigate(`${basePath}/${tourId}/preview`)}\n                className=\"px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2\"\n              >\n                <Eye size={20} />\n                {tr('tourBuilder.preview')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => navigate(`${basePath}/${tourId}/analytics`)}\n                className=\"px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2\"\n              >\n                <BarChart3 size={20} />\n                {tr('tourBuilder.analytics')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => navigate(`${basePath}/${tourId}/schedule`)}\n                className=\"px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2\"\n              >\n                <Calendar size={20} />\n                Schedule\n              </button>\n              <PermissionGate permission={TOUR_PERMISSIONS.TOUR_TEMPLATE_CREATE}>\n                <button\n                  type=\"button\"\n                  onClick={handleSaveTemplate}\n                  disabled={!canCreateTemplate}\n                  className=\"px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2 disabled:opacity-50\"\n                >\n                  <LayoutTemplate size={20} />\n                  Save as Template\n                </button>\n              </PermissionGate>\n            </>\n          )}\n        </div>\n      </form>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/TourPreviewPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tour preview page
+ * Preview tour with device simulation and validation
+ */
+export declare function TourPreviewPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TourPreviewPage.d.ts.map

package/dist/tours/pages/TourPreviewPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourPreviewPage.d.ts","sourceRoot":"","sources":["../../../src/tours/pages/TourPreviewPage.tsx"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,wBAAgB,eAAe,4CA8P9B"}

package/dist/tours/pages/TourPreviewPage.js

@@ -0,0 +1,239 @@
+import { useToursContext as e } from "../providers/ToursProvider.js";
+import { useToursPermissionAccess as t } from "../hooks/useToursPermissionAccess.js";
+import { useToursStore as n } from "../store/toursStore.js";
+import { TOUR_PERMISSIONS as r } from "../../constants/permissions.js";
+import { useToursI18n as i } from "../i18n.js";
+import { useTourBuilder as a } from "../hooks/useTourBuilder.js";
+import { useTourPreview as o } from "../hooks/useTourPreview.js";
+import { useEffect as s } from "react";
+import { AlertCircle as c, ArrowLeft as l, CheckCircle as u, ChevronLeft as d, ChevronRight as f, Monitor as p, Smartphone as m, Tablet as h, X as g } from "lucide-react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useNavigate as y, useParams as b } from "react-router-dom";
+//#region src/tours/pages/TourPreviewPage.tsx
+function x() {
+	let { tr: x } = i(), { tourId: S } = b(), C = y(), { basePath: w = "/" } = e(), { hasPermission: T } = t(), E = T(r.TOUR_READ), { tour: D, loadTour: O } = a(S), { devicePreview: k } = n(), { isPreviewActive: A, currentStepIndex: j, currentStep: M, totalSteps: N, canGoNext: P, canGoPrevious: F, validationResults: I, startPreview: L, stopPreview: R, nextStep: z, previousStep: B, changeDevice: V, validateForPreview: H } = o(D || void 0);
+	if (s(() => {
+		S && O(S);
+	}, [S, O]), s(() => {
+		D && H();
+	}, [
+		D,
+		k,
+		H
+	]), !E) return /* @__PURE__ */ _("div", {
+		className: "flex items-center justify-center h-screen bg-muted",
+		children: /* @__PURE__ */ v("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ _("h2", {
+				className: "text-lg font-semibold text-foreground mb-2",
+				children: x("tourPreview.accessDeniedTitle")
+			}), /* @__PURE__ */ _("p", {
+				className: "text-sm text-muted-foreground",
+				children: x("tourPreview.accessDeniedMessage")
+			})]
+		})
+	});
+	if (!D) return /* @__PURE__ */ _("div", {
+		className: "flex items-center justify-center h-screen bg-muted",
+		children: /* @__PURE__ */ _("p", {
+			className: "text-muted-foreground",
+			children: x("tourPreview.loading")
+		})
+	});
+	let U = () => {
+		C(`${w}/${S}/edit`);
+	}, W = {
+		mobile: /* @__PURE__ */ _(m, { size: 20 }),
+		tablet: /* @__PURE__ */ _(h, { size: 20 }),
+		desktop: /* @__PURE__ */ _(p, { size: 20 })
+	};
+	return /* @__PURE__ */ v("div", {
+		className: "flex flex-col h-screen bg-muted",
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "border-b border-border bg-background p-4 flex items-center gap-4",
+				children: [
+					/* @__PURE__ */ _("button", {
+						onClick: U,
+						className: "p-2 hover:bg-accent rounded-md",
+						children: /* @__PURE__ */ _(l, { size: 20 })
+					}),
+					/* @__PURE__ */ v("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ v("h1", {
+							className: "text-lg font-semibold",
+							children: [
+								D?.name,
+								" - ",
+								x("tourPreview.previewSuffix")
+							]
+						}), A && /* @__PURE__ */ v("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								x("tourPreview.stepOf"),
+								" ",
+								j + 1,
+								" ",
+								x("tourPreview.stepOfConnector"),
+								" ",
+								N
+							]
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "flex gap-2 border border-border rounded-md overflow-hidden",
+						children: [
+							"mobile",
+							"tablet",
+							"desktop"
+						].map((e) => /* @__PURE__ */ _("button", {
+							onClick: () => V(e),
+							className: `px-3 py-2 ${k === e ? "bg-primary text-primary-foreground" : "bg-background hover:bg-accent"}`,
+							title: x(e === "mobile" ? "tourPreview.deviceMobile" : e === "tablet" ? "tourPreview.deviceTablet" : "tourPreview.deviceDesktop"),
+							"aria-label": x(e === "mobile" ? "tourPreview.deviceMobile" : e === "tablet" ? "tourPreview.deviceTablet" : "tourPreview.deviceDesktop"),
+							children: W[e]
+						}, e))
+					}),
+					A ? /* @__PURE__ */ v("button", {
+						onClick: R,
+						className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2",
+						children: [/* @__PURE__ */ _(g, { size: 20 }), x("tourPreview.stopPreview")]
+					}) : /* @__PURE__ */ _("button", {
+						onClick: L,
+						disabled: !I?.valid,
+						className: "px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50",
+						children: x("tourPreview.startPreview")
+					})
+				]
+			}),
+			I && !I.valid && /* @__PURE__ */ _("div", {
+				className: "bg-destructive/10 border-b border-destructive px-6 py-3",
+				children: /* @__PURE__ */ v("div", {
+					className: "flex items-start gap-3",
+					children: [/* @__PURE__ */ _(c, {
+						className: "text-destructive flex-shrink-0 mt-0.5",
+						size: 20
+					}), /* @__PURE__ */ v("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ _("h3", {
+							className: "font-semibold text-destructive mb-1",
+							children: x("tourPreview.validationErrorsTitle")
+						}), /* @__PURE__ */ _("ul", {
+							className: "list-disc list-inside space-y-1",
+							children: I.errors.map((e, t) => /* @__PURE__ */ _("li", {
+								className: "text-sm text-destructive",
+								children: e
+							}, t))
+						})]
+					})]
+				})
+			}),
+			I && I.warnings.length > 0 && /* @__PURE__ */ _("div", {
+				className: "bg-warning/10 border-b border-warning px-6 py-3",
+				children: /* @__PURE__ */ v("div", {
+					className: "flex items-start gap-3",
+					children: [/* @__PURE__ */ _(c, {
+						className: "text-warning flex-shrink-0 mt-0.5",
+						size: 20
+					}), /* @__PURE__ */ v("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ _("h3", {
+							className: "font-semibold text-warning mb-1",
+							children: x("tourPreview.warningsTitle")
+						}), /* @__PURE__ */ _("ul", {
+							className: "list-disc list-inside space-y-1",
+							children: I.warnings.map((e, t) => /* @__PURE__ */ _("li", {
+								className: "text-sm text-warning",
+								children: e
+							}, t))
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex-1 flex items-center justify-center p-6 overflow-auto",
+				children: /* @__PURE__ */ _("div", {
+					className: `bg-background border-2 rounded-lg shadow-xl overflow-hidden ${k === "mobile" ? "w-[375px] h-[667px]" : k === "tablet" ? "w-[768px] h-[1024px]" : "w-full max-w-[1920px] h-full max-h-[1080px]"}`,
+					children: A && M ? /* @__PURE__ */ _("div", {
+						className: "h-full flex flex-col items-center justify-center p-8",
+						children: /* @__PURE__ */ v("div", {
+							className: "max-w-md border border-border rounded-lg shadow-lg bg-card p-6",
+							children: [
+								/* @__PURE__ */ _("h3", {
+									className: "text-lg font-semibold mb-3",
+									children: M.title
+								}),
+								/* @__PURE__ */ _("p", {
+									className: "text-sm text-muted-foreground mb-4 whitespace-pre-wrap",
+									children: M.content
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ _("button", {
+										onClick: B,
+										disabled: !F,
+										className: "px-3 py-1 border border-border rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed",
+										children: /* @__PURE__ */ _(d, { size: 16 })
+									}), /* @__PURE__ */ _("button", {
+										onClick: z,
+										disabled: !P,
+										className: "flex-1 px-3 py-1 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
+										children: x(P ? "tourPreview.next" : "tourPreview.finish")
+									})]
+								})
+							]
+						})
+					}) : /* @__PURE__ */ _("div", {
+						className: "h-full flex items-center justify-center text-muted-foreground",
+						children: /* @__PURE__ */ v("div", {
+							className: "text-center",
+							children: [
+								/* @__PURE__ */ _(u, {
+									className: "mx-auto mb-4",
+									size: 48
+								}),
+								/* @__PURE__ */ _("p", {
+									className: "mb-2",
+									children: x("tourPreview.readyTitle")
+								}),
+								/* @__PURE__ */ _("p", {
+									className: "text-sm",
+									children: x("tourPreview.readyHint")
+								})
+							]
+						})
+					})
+				})
+			}),
+			A && /* @__PURE__ */ v("div", {
+				className: "border-t border-border bg-background p-4 flex items-center justify-center gap-4",
+				children: [
+					/* @__PURE__ */ v("button", {
+						onClick: B,
+						disabled: !F,
+						className: "px-4 py-2 border border-border rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
+						children: [/* @__PURE__ */ _(d, { size: 20 }), x("tourPreview.previous")]
+					}),
+					/* @__PURE__ */ v("div", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							j + 1,
+							" / ",
+							N
+						]
+					}),
+					/* @__PURE__ */ v("button", {
+						onClick: z,
+						disabled: !P,
+						className: "px-4 py-2 border border-border rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
+						children: [x("tourPreview.nextFooter"), /* @__PURE__ */ _(f, { size: 20 })]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { x as TourPreviewPage };
+
+//# sourceMappingURL=TourPreviewPage.js.map