]+src=["']([^"']+)["']/i);
if (imgMatch && imgMatch[1]) {
return imgMatch[1].replace(/s=\d+/, `s=${size}`);
}
return `https://www.gravatar.com/avatar/00000000000000000000000000000000?s=${size}&d=identicon&r=pg`;
}
function getGravatarUrl(size) {
var _a;
const avatarHtml = ((_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.currentUserAvatar) || "";
return extractGravatarUrl(avatarHtml, size);
}
const Layout = ({ children }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
const [darkMode, setDarkMode] = reactExports.useState(() => {
const saved = localStorage.getItem("yatra-dark-mode");
return saved === "true";
});
reactExports.useEffect(() => {
const root2 = document.documentElement;
if (darkMode) {
root2.classList.add("dark");
localStorage.setItem("yatra-dark-mode", "true");
} else {
root2.classList.remove("dark");
localStorage.setItem("yatra-dark-mode", "false");
}
}, [darkMode]);
const [isModulesPanelOpen, setIsModulesPanelOpen] = reactExports.useState(false);
const [isUserDropdownOpen, setIsUserDropdownOpen] = reactExports.useState(false);
const modulesPanelRef = reactExports.useRef(null);
const userDropdownRef = reactExports.useRef(null);
const [licenseStatus, setLicenseStatus] = reactExports.useState(
((_a = window.yatraAdmin) == null ? void 0 : _a.licenseStatus) || null
);
const { showToast } = useToast();
const flushRewriteRulesMutation = useMutation({
mutationFn: async () => postFlushRewriteRules(),
onSuccess: () => {
showToast(__("Rewrite rules flushed successfully", "yatra"), "success");
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to flush rewrite rules", "yatra"),
"error"
);
}
});
const { data: modulesData, isLoading: isLoadingModules } = useModulesQuery({
enabled: isModulesPanelOpen
});
const toggleModuleMutation = useToggleModule();
const safeModulesData = Array.isArray(modulesData) ? modulesData : [];
const modulesPreview = reactExports.useMemo(
() => safeModulesData.slice(0, 3),
[safeModulesData]
);
const handleQuickToggle = (module, enabled) => {
toggleModuleMutation.mutate({
slug: module.slug,
enabled,
name: module.name
});
};
const [urlKey, setUrlKey] = reactExports.useState(0);
const [navRefreshKey, setNavRefreshKey] = reactExports.useState(0);
const handleMenuNavClick = reactExports.useCallback(
(e, subpage, tab) => {
if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey || e.button !== 0) {
return;
}
e.preventDefault();
navigateMenu(subpage, tab);
},
[]
);
reactExports.useEffect(() => {
const handleClickOutside = (event) => {
if (modulesPanelRef.current && !modulesPanelRef.current.contains(event.target)) {
setIsModulesPanelOpen(false);
}
if (userDropdownRef.current && !userDropdownRef.current.contains(event.target)) {
setIsUserDropdownOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
reactExports.useEffect(() => {
const handleLocationChange = () => {
setUrlKey((prev) => prev + 1);
};
window.addEventListener("popstate", handleLocationChange);
const interval = setInterval(() => {
const currentSearch = window.location.search;
if (currentSearch !== window.__lastSearch) {
window.__lastSearch = currentSearch;
handleLocationChange();
}
}, 100);
return () => {
window.removeEventListener("popstate", handleLocationChange);
clearInterval(interval);
};
}, []);
reactExports.useEffect(() => {
const handleModuleUpdate = () => {
setNavRefreshKey((prev) => prev + 1);
setUrlKey((prev) => prev + 1);
};
const handleForceRefresh = () => {
setNavRefreshKey((prev) => prev + 1);
setUrlKey((prev) => prev + 1);
};
const handleLicenseStatusUpdate = (event) => {
var _a2;
const newStatus = (_a2 = event.detail) == null ? void 0 : _a2.status;
if (newStatus) {
setLicenseStatus(newStatus);
}
};
window.addEventListener("yatra-modules-updated", handleModuleUpdate);
window.addEventListener("yatra-force-nav-refresh", handleForceRefresh);
window.addEventListener(
"yatra-license-status-updated",
handleLicenseStatusUpdate
);
return () => {
window.removeEventListener("yatra-modules-updated", handleModuleUpdate);
window.removeEventListener("yatra-force-nav-refresh", handleForceRefresh);
window.removeEventListener(
"yatra-license-status-updated",
handleLicenseStatusUpdate
);
};
}, []);
reactExports.useEffect(() => {
if (!isModulesPanelOpen) return;
const handleClickOutside = (event) => {
if (modulesPanelRef.current && !modulesPanelRef.current.contains(event.target)) {
setIsModulesPanelOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [isModulesPanelOpen]);
const currentSubpage = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("subpage") || "dashboard";
}, [urlKey]);
const currentTab = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("tab") || "all";
}, [urlKey]);
const currentAction = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action");
}, [urlKey]);
const isTripFormPage = reactExports.useMemo(() => {
return currentSubpage === "trips" && (currentTab === "all" || !currentTab) && (currentAction === "create" || currentAction === "edit");
}, [currentSubpage, currentTab, currentAction, urlKey]);
const [expandedMenus, setExpandedMenus] = reactExports.useState(() => {
const params = new URLSearchParams(window.location.search);
const subpage = params.get("subpage") || "dashboard";
const menus = [];
if (subpage === "trips") {
menus.push("trips");
}
if (subpage === "itinerary") {
menus.push("itinerary");
}
return menus;
});
reactExports.useEffect(() => {
const menusToExpand = [];
if (currentSubpage === "trips") {
menusToExpand.push("trips");
}
if (currentSubpage === "itinerary") {
menusToExpand.push("itinerary");
}
setExpandedMenus((prev) => {
const newMenus = [.../* @__PURE__ */ new Set([...prev, ...menusToExpand])];
if (newMenus.length !== prev.length || !newMenus.every((m) => prev.includes(m))) {
return newMenus;
}
return prev;
});
}, [currentSubpage, urlKey]);
const baseUrl = reactExports.useMemo(() => {
var _a2;
return ((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) ? `${window.yatraAdmin.siteUrl}/wp-admin/admin.php?page=yatra` : "/wp-admin/admin.php?page=yatra";
}, []);
const menuItems = reactExports.useMemo(
// Every menu label is wrapped in __() with a literal string so
// gettext extraction (scripts/extract-js-pot.mjs) picks them up
// and Loco / Poedit / wp i18n can translate them. Previously most
// were raw English literals — translations existed in the .po but
// never reached the UI because there was no translation lookup at
// render time. Wrapping is the WordPress-canonical way; the
// pre_load_script_translations filter then delivers the locale
// data to wp.i18n on every admin page load.
() => {
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
return [
{
subpage: "dashboard",
label: __("Dashboard", "yatra"),
icon: LayoutDashboard,
cap: "yatra_access_admin"
},
{
subpage: "trips",
label: __("Trips", "yatra"),
icon: MapPin,
cap: "yatra_view_trips",
submenu: [
{ tab: "all", label: __("All Trips", "yatra"), icon: List },
{
tab: "activities",
label: __("Activities", "yatra"),
icon: Activity
},
{
tab: "destinations",
label: __("Destinations", "yatra"),
icon: Route
},
{
tab: "categories",
label: __("Categories", "yatra"),
icon: FolderTree
},
{
tab: "difficulty-levels",
label: __("Difficulty Levels", "yatra"),
icon: TrendingUp
},
// Availability - FREE feature, always show
{
tab: "availability",
label: __("Availability", "yatra"),
icon: CalendarDays
},
// Attributes - FREE feature, always show
{ tab: "attributes", label: __("Attributes", "yatra"), icon: Tag },
// Additional Services - show only if Pro plugin is active and module is enabled
...isProPluginActive() && isModuleActive("additional_services") ? [
{
tab: "additional-services",
label: __("Additional Services", "yatra"),
icon: Package,
isPremium: true
}
] : [],
// Trip Consent - show only if Pro plugin is active and module is enabled
...isProPluginActive() && isModuleActive("trip_consent") ? [
{
tab: "trip-consent",
label: __("Trip Consent", "yatra"),
icon: FileSignature,
isPremium: true
}
] : []
]
},
{
subpage: "traveler-categories",
label: __("Traveler Categories", "yatra"),
icon: CircleUser,
cap: "yatra_manage_trip_taxonomies"
},
{
subpage: "itinerary",
label: __("Itinerary", "yatra"),
icon: FileText,
cap: "yatra_edit_trips",
submenu: [
{ tab: "item-types", label: __("Item Types", "yatra"), icon: Tag },
{ tab: "items", label: __("Items", "yatra"), icon: Route },
{
tab: "itinerary",
label: __("Itinerary", "yatra"),
icon: FileText
}
]
},
// Departures - FREE feature, always show
{
subpage: "departures",
label: __("Departures", "yatra"),
icon: Calendar$1,
cap: "yatra_view_departures"
},
{
subpage: "discounts",
label: __("Discounts", "yatra"),
icon: BadgePercent,
cap: "yatra_manage_discounts"
},
{
subpage: "payments",
label: __("Payments", "yatra"),
icon: CreditCard,
cap: "yatra_view_financial_reports"
},
{
subpage: "bookings",
label: __("Bookings", "yatra"),
icon: Calendar$1,
cap: "yatra_view_bookings"
},
{
subpage: "customers",
label: __("Customers", "yatra"),
icon: CircleUser,
cap: "yatra_view_customers"
},
{
subpage: "travelers",
label: __("Travelers", "yatra"),
icon: Plane,
cap: "yatra_view_customers"
},
{
subpage: "enquiries",
label: __("Enquiries", "yatra"),
icon: MessageSquare,
cap: "yatra_view_enquiries"
},
{
subpage: "reviews",
label: __("Reviews", "yatra"),
icon: Star,
cap: "yatra_view_reviews"
},
{
subpage: "reports",
label: __("Reports", "yatra"),
icon: BarChart3,
cap: "yatra_view_operational_reports"
},
// Email — SMTP & transactional for all; Pro adds automation tabs on the same screen
{
subpage: "email-automation",
label: __("Email", "yatra"),
icon: Mail,
isPremium: false,
cap: "yatra_manage_emails"
},
// Abandoned Booking Recovery - show only if Pro plugin is active and module is enabled
...isProPluginActive() && isModuleActive("abandoned_booking_recovery") ? [
{
subpage: "abandoned-recovery",
label: __("Abandoned Recovery", "yatra"),
icon: RotateCcw,
isPremium: true,
cap: "yatra_manage_email_automation"
}
] : [],
// Dynamic Pricing - show only if Pro plugin is active and module is enabled
...isProPluginActive() && isModuleActive("dynamic_pricing") ? [
{
subpage: "dynamic-pricing",
label: __("Dynamic Pricing", "yatra"),
icon: TrendingUp,
isPremium: true,
cap: "yatra_edit_trips"
}
] : [],
{
subpage: "modules",
label: __("Modules", "yatra"),
icon: Puzzle,
cap: "yatra_manage_modules"
},
// White Label — only when the Agency-tier module is actually enabled.
// (Agency license alone is not enough; the module toggle must be on,
// otherwise users would see a link to a disabled feature. To get
// here for the first time, an Agency admin enables the module from
// Yatra → Modules.) The `whiteLabelEnabled` flag from
// AdminAssetsProvider already implies Agency-active.
// White Label — needs Agency-tier license AND module toggle on.
// Mirrors the AI Assistant gate below so both menus appear /
// disappear instantly when their module toggles, while staying
// license-safe if the client-side `whiteLabelEnabled` flag is
// ever stale or over-eager. AdminAssetsProvider seeds both
// `isAgency` and `whiteLabelEnabled`; useModules.ts updates the
// latter on toggle and fires `yatra-modules-updated` which bumps
// navRefreshKey → this memo recomputes → menu appears.
...((_a2 = window.yatraAdmin) == null ? void 0 : _a2.isAgency) && ((_b2 = window.yatraAdmin) == null ? void 0 : _b2.whiteLabelEnabled) ? [
{
subpage: "white-label",
label: __("White Label", "yatra"),
icon: Crown,
isPremium: true,
cap: "yatra_manage_white_label"
}
] : [],
// AI Assistant — only when BOTH the license tier qualifies
// (Growth or Agency) AND the module toggle is on. Operators who
// disable the module shouldn't keep seeing the menu item — it
// would lead to a settings page they've explicitly opted out of.
// The toggle handler in useModules.ts updates
// window.yatraAdmin.aiAssistantEnabled and fires
// `yatra-modules-updated`, which bumps navRefreshKey so this
// memo recomputes immediately without a page reload.
...((_c2 = window.yatraAdmin) == null ? void 0 : _c2.isAiEligible) && ((_d2 = window.yatraAdmin) == null ? void 0 : _d2.aiAssistantEnabled) ? [
{
subpage: "ai-assistant",
label: __("AI Assistant", "yatra"),
icon: Sparkles,
isPremium: true,
cap: "yatra_manage_ai"
}
] : [],
// WhatsApp Notifications — Growth/Agency module. Same gate
// pattern as AI Assistant: needs the AI-eligibility flag (which
// is the Growth-or-Agency tier check) AND the module toggle on.
// useModules.ts updates `whatsappEnabled` on toggle + fires
// `yatra-modules-updated` so this menu appears instantly without
// a page reload.
...((_e2 = window.yatraAdmin) == null ? void 0 : _e2.isAiEligible) && ((_f2 = window.yatraAdmin) == null ? void 0 : _f2.whatsappEnabled) ? [
{
subpage: "whatsapp",
label: __("WhatsApp", "yatra"),
icon: MessageCircle,
isPremium: true,
cap: "yatra_manage_whatsapp"
}
] : [],
// Channel Manager — Agency-tier OTA distribution hub. Same gate
// pattern as White Label: needs the Agency license AND the module
// toggle on. useModules.ts updates `channelManagerEnabled` on
// toggle + fires `yatra-modules-updated` so this menu appears
// instantly without a page reload.
...((_g2 = window.yatraAdmin) == null ? void 0 : _g2.isAgency) && ((_h2 = window.yatraAdmin) == null ? void 0 : _h2.channelManagerEnabled) ? [
{
subpage: "channel-manager",
label: __("Channel Manager", "yatra"),
icon: Network,
isPremium: true,
cap: "yatra_manage_channel_manager"
}
] : [],
// Webhooks — Agency-tier outbound integration hub. Same gate
// as Channel Manager / White Label: Agency license + module on.
...((_i2 = window.yatraAdmin) == null ? void 0 : _i2.isAgency) && ((_j2 = window.yatraAdmin) == null ? void 0 : _j2.webhooksEnabled) ? [
{
subpage: "webhooks",
label: __("Webhooks", "yatra"),
icon: Webhook,
isPremium: true,
cap: "yatra_manage_webhooks"
}
] : [],
// Team & Access — Agency-tier granular roles + capability-level
// access + audit log. Gate matches Webhooks: Agency license +
// module on. The page itself is also cap-gated server-side; the
// sidebar entry is just UX.
...((_k2 = window.yatraAdmin) == null ? void 0 : _k2.isAgency) && ((_l2 = window.yatraAdmin) == null ? void 0 : _l2.teamEnabled) ? [
{
subpage: "team",
label: __("Team & Access", "yatra"),
icon: Users,
isPremium: true,
cap: "yatra_manage_team"
}
] : [],
{
subpage: "license",
label: __("License", "yatra"),
icon: Key,
cap: "yatra_manage_settings"
},
{
subpage: "settings",
label: __("Settings", "yatra"),
icon: Settings$1,
cap: "yatra_manage_settings"
}
].filter((item) => !item.cap || canCap(item.cap));
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[navRefreshKey]
);
const brandedMenuItems = reactExports.useMemo(() => {
const overrides = readMenuOverrides();
const orderMap = readMenuOrder();
const atoms = [];
const atomByKey = /* @__PURE__ */ new Map();
const apply2 = (key2, defaultParent, base, fallbackLabel) => {
const ov = overrides[key2];
if (ov == null ? void 0 : ov.hidden) return null;
const labelOverride = (ov == null ? void 0 : ov.label) && typeof ov.label === "string" && ov.label.trim() !== "" ? ov.label : null;
const atom = {
key: key2,
defaultParent,
label: labelOverride ?? fallbackLabel,
iconOverride: ov == null ? void 0 : ov.icon,
icon: base.icon,
subpage: base.subpage ?? defaultParent ?? key2,
tab: base.tab,
isPremium: base.isPremium
};
atoms.push(atom);
atomByKey.set(key2, atom);
return atom;
};
for (const item of menuItems) {
apply2(item.subpage, "", item, item.label);
if (item.submenu) {
for (const sub of item.submenu) {
apply2(
`${item.subpage}.${sub.tab}`,
item.subpage,
{ icon: sub.icon, subpage: item.subpage, tab: sub.tab },
sub.label
);
}
}
}
const effectiveParent = (atom) => {
var _a2;
const ov = overrides[atom.key];
if (ov && typeof ov.parent === "string") {
if (ov.parent === "") return "";
if (((_a2 = atomByKey.get(ov.parent)) == null ? void 0 : _a2.defaultParent) === "") return ov.parent;
}
return atom.defaultParent;
};
const groups = /* @__PURE__ */ new Map();
for (const atom of atoms) {
const parent = effectiveParent(atom);
if (parent === atom.key) continue;
const list = groups.get(parent) ?? [];
list.push(atom);
groups.set(parent, list);
}
const orderGroup = (parent, group) => {
const saved = orderMap[parent] ?? [];
if (saved.length === 0) return group;
const byKey = new Map(group.map((a2) => [a2.key, a2]));
const seen2 = /* @__PURE__ */ new Set();
const ordered = [];
for (const k2 of saved) {
const atom = byKey.get(k2);
if (atom && !seen2.has(k2)) {
ordered.push(atom);
seen2.add(k2);
}
}
for (const atom of group) {
if (!seen2.has(atom.key)) ordered.push(atom);
}
return ordered;
};
const topLevel = orderGroup("", groups.get("") ?? []);
return topLevel.map((atom) => {
const childAtoms = orderGroup(atom.key, groups.get(atom.key) ?? []);
return {
subpage: atom.subpage,
label: atom.label,
icon: atom.icon,
iconOverride: atom.iconOverride,
isPremium: atom.isPremium,
submenu: childAtoms.length ? childAtoms.map((child) => ({
// Submenu rendering supports both legacy intra-parent items
// (matching parent's subpage) and promoted/demoted items
// that point at their own subpage.
tab: child.defaultParent === atom.subpage ? child.tab : void 0,
label: child.label,
icon: child.icon,
iconOverride: child.iconOverride,
// Promoted top-level items now-as-children get an absolute href.
href: child.defaultParent === atom.subpage ? void 0 : `${baseUrl}&subpage=${child.subpage}${child.tab ? `&tab=${child.tab}` : ""}`,
subpage: child.subpage,
tab_orig: child.tab
})) : void 0
};
});
}, [menuItems, baseUrl]);
const uiChrome = reactExports.useMemo(() => readUiChrome(), []);
const isActive = (subpage, tab) => {
if (tab) {
return currentSubpage === subpage && currentTab === tab;
}
if (currentSubpage === subpage) {
const menuItem = menuItems.find((item) => item.subpage === subpage);
if (menuItem == null ? void 0 : menuItem.submenu) {
return menuItem.submenu.some((sub) => sub.tab === currentTab);
}
return true;
}
return false;
};
const isMenuExpanded = (subpage) => {
return expandedMenus.includes(subpage);
};
const toggleMenu = (subpage) => {
setExpandedMenus(
(prev) => prev.includes(subpage) ? prev.filter((m) => m !== subpage) : [...prev, subpage]
);
};
const getUrl = (subpage, tab) => {
if (subpage === "dashboard") {
return baseUrl;
}
if (tab) {
return `${baseUrl}&subpage=${subpage}&tab=${tab}`;
}
return `${baseUrl}&subpage=${subpage}`;
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `min-h-screen ${darkMode ? "dark bg-gray-900" : "bg-gray-50"}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-screen overflow-hidden", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("aside", { className: "w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-16 px-6 flex items-center justify-center border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
(() => {
var _a2, _b2;
const brandName2 = ((_a2 = window.yatraAdmin) == null ? void 0 : _a2.brandName) || "Yatra";
const brandInitial = brandName2.charAt(0).toUpperCase() || "Y";
return ((_b2 = window.yatraAdmin) == null ? void 0 : _b2.brandLogoUrl) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: window.yatraAdmin.brandLogoUrl,
alt: brandName2,
width: 32,
height: 32,
className: "w-8 h-8 rounded-lg object-contain shrink-0 bg-blue-600 p-1 border border-blue-700 dark:border-blue-500"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-lg", children: brandInitial }) });
})(),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xl font-bold text-gray-900 dark:text-white", children: ((_b = window.yatraAdmin) == null ? void 0 : _b.brandName) || "Yatra" }),
!uiChrome.hideVersion && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-[10px] text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
"v",
((_c = window.yatraAdmin) == null ? void 0 : _c.version) || "1.0.0"
] }),
((_d = window.yatraAdmin) == null ? void 0 : _d.proVersion) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "px-1.5 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded font-medium", children: [
"Pro v",
(_e = window.yatraAdmin) == null ? void 0 : _e.proVersion
] })
] })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("nav", { className: "flex-1 p-4 space-y-1 overflow-y-auto", children: brandedMenuItems.map((item) => {
const Icon = item.icon;
const hasSubmenu = item.submenu && item.submenu.length > 0;
const isExpanded = hasSubmenu && isMenuExpanded(item.subpage);
const active = isActive(item.subpage);
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: hasSubmenu ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => toggleMenu(item.subpage),
className: `w-full flex items-center justify-between gap-3 px-4 py-3 rounded-lg text-sm transition-colors ${active ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
MenuIcon,
{
icon: item.iconOverride,
fallback: Icon,
className: "w-5 h-5"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: item.label })
] }),
isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4" })
]
}
),
isExpanded && item.submenu && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-4 mt-1 space-y-1", children: item.submenu.map((subItem) => {
const navSubpage = subItem.subpage ?? item.subpage;
const navTab = subItem.tab ?? subItem.tab_orig;
const subActive = navTab ? isActive(navSubpage, navTab) : isActive(navSubpage);
const SubIcon = subItem.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: getUrl(navSubpage, navTab),
onClick: (e) => handleMenuNavClick(e, navSubpage, navTab),
className: `flex items-center gap-3 px-4 py-2 rounded-lg transition-colors relative ${subActive ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
SubIcon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
MenuIcon,
{
icon: subItem.iconOverride,
fallback: SubIcon,
className: "w-4 h-4"
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: subItem.label })
] }),
subItem.isPremium && !isProPluginActive() && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 right-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crown, { className: "w-2.5 h-2.5" }) }) })
]
},
`${navSubpage}.${navTab ?? ""}`
);
}) })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: getUrl(item.subpage),
onClick: (e) => handleMenuNavClick(e, item.subpage),
className: `flex items-center gap-3 px-4 py-3 rounded-lg text-sm transition-colors relative ${active ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
MenuIcon,
{
icon: item.iconOverride,
fallback: Icon,
className: "w-5 h-5"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: item.label })
] }),
item.isPremium && !isProPluginActive() && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 right-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crown, { className: "w-2.5 h-2.5" }) }) }),
item.subpage === "license" && isProPluginActive() && licenseStatus && /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: licenseStatus === "active" ? "success" : licenseStatus === "expired" ? "error" : licenseStatus === "invalid" ? "error" : "error",
className: "text-[10px] px-2 py-0.5",
children: licenseStatus === "active" ? "Active" : licenseStatus === "expired" ? "Expired" : licenseStatus === "invalid" ? "Invalid" : "Inactive"
}
)
]
}
) }, item.subpage);
}) }),
!isProPluginActive() && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shrink-0 px-4 pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: "https://wpyatra.com/pricing/",
target: "_blank",
rel: "noopener noreferrer",
className: "group flex flex-col gap-0.5 rounded-lg border border-amber-200/90 dark:border-amber-800/40 bg-amber-50/60 dark:bg-amber-950/25 px-3 py-2.5 text-left transition-colors hover:bg-amber-50 dark:hover:bg-amber-950/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-semibold text-amber-900 dark:text-amber-200", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Crown,
{
className: "w-3.5 h-3.5 shrink-0 text-amber-600 dark:text-amber-400",
"aria-hidden": true
}
),
__("Upgrade to Pro", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[11px] leading-snug text-amber-800/75 dark:text-amber-300/70", children: __("Premium features & integrations — view plans.", "yatra") })
]
}
) }),
!uiChrome.hideBackToWp && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: ((_f = window.yatraAdmin) == null ? void 0 : _f.siteUrl) ? `${window.yatraAdmin.siteUrl}/wp-admin/` : "/wp-admin/",
className: "flex items-center justify-between gap-2 px-3 py-2 rounded-lg text-xs font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-3 h-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: __("Back to WordPress", "yatra") })
] })
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: `flex-1 flex flex-col ${isTripFormPage ? "overflow-hidden" : "overflow-y-auto"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("header", { className: "h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between w-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 flex-wrap min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-2xl font-semibold text-gray-900 dark:text-white", children: (() => {
if (isTripFormPage) {
return currentAction === "create" ? "Create Trip" : "Edit Trip";
}
const activeItem = brandedMenuItems.find(
(item) => isActive(item.subpage)
);
if ((activeItem == null ? void 0 : activeItem.submenu) && currentTab) {
const activeSubItem = activeItem.submenu.find(
(sub) => sub.tab === currentTab
);
return (activeSubItem == null ? void 0 : activeSubItem.label) || activeItem.label;
}
return (activeItem == null ? void 0 : activeItem.label) || "Dashboard";
})() }),
!isProPluginActive() && /* @__PURE__ */ jsxRuntimeExports.jsx(
Tooltip$1,
{
side: "bottom",
content: __(
"Spin up a free Pro trial site in one click — no credit card required.",
"yatra"
),
children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: "https://try.wpyatra.com/try-yatra-pro/",
target: "_blank",
rel: "noopener noreferrer",
className: "inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-900 ring-1 ring-amber-200 hover:bg-amber-100 hover:ring-amber-300 dark:bg-amber-950/40 dark:text-amber-100 dark:ring-amber-800 dark:hover:bg-amber-900/50 transition-colors",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Gift, { className: "h-3.5 w-3.5" }),
__("Try Yatra Pro for free", "yatra")
]
}
)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
!uiChrome.hideBackToWp && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: ((_g = window.yatraAdmin) == null ? void 0 : _g.siteUrl) ? `${window.yatraAdmin.siteUrl}/wp-admin/` : "/wp-admin/",
target: "_blank",
rel: "noopener noreferrer",
className: "inline-flex items-center gap-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back to WordPress", "yatra")
]
}
),
!uiChrome.hideJoinCommunity && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: "https://www.facebook.com/groups/yatrawordpressplugin",
target: "_blank",
rel: "noopener noreferrer",
className: "inline-flex items-center gap-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "w-4 h-4 shrink-0", "aria-hidden": true }),
__("Join Community", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
size: "icon",
onClick: () => flushRewriteRulesMutation.mutate(),
disabled: flushRewriteRulesMutation.isPending,
className: "h-9 w-9 shrink-0 border-gray-300 dark:border-gray-600",
title: flushRewriteRulesMutation.isPending ? __("Flushing...", "yatra") : __("Flush permalink", "yatra"),
"aria-label": flushRewriteRulesMutation.isPending ? __("Flushing rewrite rules", "yatra") : __("Flush permalink", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
RotateCcw,
{
className: `h-4 w-4 ${flushRewriteRulesMutation.isPending ? "animate-spin" : ""}`,
"aria-hidden": true
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: currentSubpage === "tools" ? "default" : "outline",
onClick: () => {
navigateMenu("tools");
},
className: `flex items-center gap-2 ${currentSubpage === "tools" ? "bg-blue-600 hover:bg-blue-700 text-white border-blue-600" : ""}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "w-4 h-4" }),
__("Tools", "yatra")
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => setIsModulesPanelOpen((prev) => !prev),
className: `p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 ${isModulesPanelOpen ? "bg-gray-100 dark:bg-gray-700" : ""}`,
"aria-label": __("Toggle modules panel", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Puzzle, { className: "w-5 h-5" })
}
),
isModulesPanelOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
ref: modulesPanelRef,
className: "absolute right-0 top-12 z-50 w-80",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "shadow-xl border border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Modules", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: __(
"Quickly enable or disable feature packs.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
size: "sm",
variant: "ghost",
onClick: () => {
setIsModulesPanelOpen(false);
navigateMenu("modules");
},
children: __("Open", "yatra")
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
isLoadingModules && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Loading modules…", "yatra")
] }),
!isLoadingModules && modulesPreview.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("No modules found.", "yatra") }),
!isLoadingModules && modulesPreview.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: modulesPreview.map((module) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between border border-gray-100 dark:border-gray-800 rounded-lg p-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm font-medium text-gray-900 dark:text-white flex items-center gap-2", children: [
module.name,
module.is_core && /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "outline",
className: "text-[10px]",
children: __("Core", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: module.enabled ? __("Enabled", "yatra") : __("Disabled", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => handleQuickToggle(
module,
!module.enabled
),
disabled: module.is_core || toggleModuleMutation.isPending,
className: `relative inline-flex h-6 w-11 items-center rounded-full transition ${module.enabled ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"} ${module.is_core ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`,
"aria-pressed": module.enabled,
"aria-label": module.enabled ? __("Disable module", "yatra") : __("Enable module", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-block h-5 w-5 transform rounded-full bg-white transition ${module.enabled ? "translate-x-5" : "translate-x-1"}`
}
)
}
)
]
},
module.slug
)) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
size: "sm",
className: "w-full",
onClick: () => {
setIsModulesPanelOpen(false);
navigateMenu("modules");
},
children: __("Manage all modules", "yatra")
}
) })
] })
] })
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => {
setDarkMode(!darkMode);
},
className: "p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400",
"aria-label": darkMode ? "Switch to light mode" : "Switch to dark mode",
children: darkMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(Sun, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Moon, { className: "w-5 h-5" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => setIsUserDropdownOpen((prev) => !prev),
className: "flex items-center gap-3 pl-4 border-l border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 p-2 transition-colors",
"aria-label": __("User menu", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: getGravatarUrl(32),
alt: __("User avatar", "yatra"),
className: "w-full h-full object-cover",
onError: (e) => {
e.currentTarget.style.display = "none";
e.currentTarget.parentElement.innerHTML = '/gi, "\n\n").replace(/<[^>]+>/g, "").trim() : "",
payloadKey: "description"
},
{
id: "short_description",
label: "Short description",
task: "trip-short-description",
decode: (t) => t.trim(),
preview: (v) => String(v ?? ""),
payloadKey: "short_description"
},
{
id: "trip_details",
label: "Trip details (logistics)",
task: "trip-details",
decode: (t) => plainTextToHtml(t),
preview: (v) => typeof v === "string" ? v.replace(/<\/p>\s*
/gi, "\n\n").replace(/<[^>]+>/g, "").trim() : "",
payloadKey: "trip_details"
},
{
id: "what_makes_special",
label: "What makes this trip special",
task: "what-makes-special",
decode: (t) => plainTextToHtml(t),
preview: (v) => typeof v === "string" ? v.replace(/<\/p>\s*
/gi, "\n\n").replace(/<[^>]+>/g, "").trim() : "",
payloadKey: "what_makes_special"
},
{
id: "trip_story",
label: "Trip story",
task: "trip-story",
decode: (t) => plainTextToHtml(t),
preview: (v) => typeof v === "string" ? v.replace(/<\/p>\s*
/gi, "\n\n").replace(/<[^>]+>/g, "").trim() : "",
payloadKey: "trip_story"
},
{
id: "starting_location",
label: "Starting location",
task: "starting-location",
decode: (t) => t.trim(),
preview: (v) => String(v ?? ""),
payloadKey: "starting_location"
},
{
id: "ending_location",
label: "Ending location",
task: "ending-location",
decode: (t) => t.trim(),
preview: (v) => String(v ?? ""),
payloadKey: "ending_location"
},
{
id: "accommodation_type",
label: "Accommodation tier",
task: "accommodation-type",
decode: (t) => t.trim(),
preview: (v) => String(v ?? ""),
payloadKey: "accommodation_type"
},
{
id: "highlights",
label: "Highlights",
task: "trip-highlights",
decode: (t) => t.split(/\r?\n/).map((l) => l.replace(/^[\s\-\*•·●]+/, "").trim()).filter((l) => l !== ""),
preview: (v) => Array.isArray(v) ? v.map((s2) => `• ${s2}`).join("\n") : "",
payloadKey: "highlights"
},
{
id: "included_items",
label: "What's included",
task: "trip-included-items",
decode: (t) => decodeAmenityList(t),
preview: (v) => Array.isArray(v) ? v.map((i) => `• ${i.title}`).join("\n") : "",
payloadKey: "included_items"
},
{
id: "excluded_items",
label: "What's excluded",
task: "trip-excluded-items",
decode: (t) => decodeAmenityList(t),
preview: (v) => Array.isArray(v) ? v.map((i) => `• ${i.title}`).join("\n") : "",
payloadKey: "excluded_items"
},
{
id: "cancellation_policy",
label: "Cancellation policy",
task: "trip-cancellation-policy",
decode: (t) => t.trim(),
preview: (v) => String(v ?? ""),
payloadKey: "cancellation_policy"
},
{
id: "faqs",
label: "FAQ",
task: "trip-faq",
decode: (t) => decodeFaq(t),
preview: (v) => Array.isArray(v) ? v.map((f) => `Q: ${f.question}
A: ${f.answer}`).join("\n\n") : "",
// Stored as a relationship row on the trip — same key as the
// backend agent uses, so no mapping is needed.
payloadKey: "faqs"
},
{
id: "itinerary",
label: "Day-by-day itinerary",
task: "trip-itinerary",
decode: (t) => parseItineraryText(t),
preview: (v) => Array.isArray(v) ? v.map((d) => `Day ${d.day}: ${d.day_title || ""}
${d.description}`).join("\n\n") : "",
payloadKey: null
},
{
id: "meta_title",
label: "SEO meta title",
task: "seo-meta-title",
decode: (t) => t.trim().slice(0, 60),
preview: (v) => String(v ?? ""),
payloadKey: "meta_title"
},
{
id: "meta_description",
label: "SEO meta description",
task: "seo-meta-description",
decode: (t) => t.trim().slice(0, 160),
preview: (v) => String(v ?? ""),
payloadKey: "meta_description"
}
];
const SEASONS = [
"spring",
"summer",
"monsoon",
"autumn",
"winter",
"year-round"
];
const CreateTripWithAiWizard = ({
open,
onClose
}) => {
const [phase, setPhase] = reactExports.useState("setup");
const [setup, setSetup] = reactExports.useState(DEFAULT_SETUP);
const [sections, setSections] = reactExports.useState(
() => initialSectionState()
);
const [createError, setCreateError] = reactExports.useState(null);
reactExports.useEffect(() => {
if (open) {
setPhase("setup");
setSetup(DEFAULT_SETUP);
setSections(initialSectionState());
setCreateError(null);
}
}, [open]);
reactExports.useEffect(() => {
setSetup((prev) => ({ ...prev, slug: slugify(prev.name) }));
}, [setup.name]);
reactExports.useMemo(
() => ({
name: setup.name.trim(),
destinations: [setup.destinations.trim()],
categories: [],
activities: setup.activities ? setup.activities.split(",").map((s2) => s2.trim()).filter(Boolean) : [],
difficulty_level: setup.difficulty_level_label,
duration_days: setup.trip_type === "single_day" ? "1" : setup.duration_days,
duration_nights: setup.trip_type === "single_day" ? "0" : setup.duration_nights,
best_season: setup.best_season,
accommodation_type: "",
transportation_included: "",
starting_location: "",
ending_location: "",
price: setup.price,
description: "",
short_description: "",
included_items: [],
excluded_items: [],
age_min: "",
age_max: ""
}),
[setup]
);
if (!open) return null;
if (!isAiReady()) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { isOpen: open, onClose, size: "md", hideHeader: true, hideFooter: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 text-amber-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: __("AI Assistant not configured", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-gray-600 dark:text-gray-300", children: __(
"Add an OpenAI or Anthropic key under Yatra → AI Assistant first.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "admin.php?page=yatra&subpage=ai-assistant", children: __("Open AI settings", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: onClose, children: __("Cancel", "yatra") })
] })
] })
] }) }) });
}
const setupValid = setup.name.trim() !== "" && setup.destinations.trim() !== "";
const coerceAgentSection = (id, content) => {
if (id === "description" && typeof content === "string") {
return plainTextToHtml(content);
}
return content;
};
const buildPreview = (id, decoded) => {
const spec = SECTIONS.find((s2) => s2.id === id);
return spec ? spec.preview(decoded) : "";
};
const startGeneration = async () => {
setPhase("generating");
setSections(() => {
const next = initialSectionState();
for (const s2 of SECTIONS) {
next[s2.id] = { ...next[s2.id], status: "running" };
}
return next;
});
try {
const res = await aiApi.wizardCreateTrip({
name: setup.name,
destinations: setup.destinations,
trip_type: setup.trip_type,
duration_days: setup.duration_days,
duration_nights: setup.duration_nights,
difficulty_level: setup.difficulty_level_label,
best_season: setup.best_season,
audience: setup.audience,
activities: setup.activities,
extra_context: setup.extra_context
});
const agentSections = res.sections || {};
setSections((prev) => {
const next = { ...prev };
for (const s2 of SECTIONS) {
const raw = agentSections[s2.id];
if (raw === void 0 || raw === null) {
next[s2.id] = {
...next[s2.id],
status: "failed",
error: "Agent didn't write this section",
retryContext: ""
};
continue;
}
const decoded = coerceAgentSection(s2.id, raw);
next[s2.id] = {
status: "done",
decoded,
preview: buildPreview(s2.id, decoded),
retryContext: ""
};
}
return next;
});
setPhase("review");
} catch (e) {
const msg = extractError$1(e);
setSections((prev) => {
const next = { ...prev };
for (const s2 of SECTIONS) {
next[s2.id] = {
...next[s2.id],
status: "failed",
error: msg,
retryContext: ""
};
}
return next;
});
setPhase("review");
}
};
const runSection = async (id, guidance = "") => {
setSections((prev) => ({
...prev,
[id]: {
...prev[id],
status: "running",
error: void 0,
clarificationMessage: void 0,
clarificationQuestions: void 0
}
}));
const existing = {};
for (const s2 of SECTIONS) {
if (s2.id === id) continue;
const st = sections[s2.id];
if (st.status === "done" && st.decoded !== void 0) {
let value = st.decoded;
if (s2.id === "description" && typeof value === "string") {
value = value.replace(/<\/p>\s*
/gi, "\n\n").replace(/<[^>]+>/g, "").trim();
}
existing[s2.id] = value;
}
}
try {
const res = await aiApi.wizardRegenSection(
id,
{
name: setup.name,
destinations: setup.destinations,
trip_type: setup.trip_type,
duration_days: setup.duration_days,
duration_nights: setup.duration_nights,
difficulty_level: setup.difficulty_level_label,
best_season: setup.best_season,
audience: setup.audience,
activities: setup.activities,
extra_context: setup.extra_context
},
existing,
guidance
);
if (res.content === null || res.content === void 0) {
setSections((prev) => ({
...prev,
[id]: {
...prev[id],
status: "failed",
error: "Agent returned no content for this section."
}
}));
return;
}
const decoded = coerceAgentSection(id, res.content);
setSections((prev) => ({
...prev,
[id]: {
status: "done",
decoded,
preview: buildPreview(id, decoded),
retryContext: ""
}
}));
} catch (e) {
setSections((prev) => ({
...prev,
[id]: {
...prev[id],
status: "failed",
error: extractError$1(e)
}
}));
}
};
const retrySection = (id) => {
const ctx = sections[id].retryContext.trim();
if (ctx === "") return;
setSetup((prev) => ({
...prev,
extra_context: [prev.extra_context.trim(), ctx].filter((s2) => s2 !== "").join("\n\n")
}));
void runSection(id, ctx);
};
const sectionsDone = Object.values(sections).filter(
(s2) => s2.status === "done"
).length;
const sectionsTotal = SECTIONS.length;
const sectionsFailed = Object.values(sections).filter(
(s2) => s2.status === "failed"
).length;
const sectionsNeedContext = Object.values(sections).filter(
(s2) => s2.status === "needs_context"
).length;
const createTrip = async () => {
var _a;
setPhase("creating");
setCreateError(null);
const tripUpdate = {};
for (const spec of SECTIONS) {
if (!spec.payloadKey) continue;
const st = sections[spec.id];
if (st.status === "done" && st.decoded !== void 0) {
tripUpdate[spec.payloadKey] = st.decoded;
}
}
try {
const createPayload = {
title: setup.name.trim(),
slug: setup.slug.trim() || slugify(setup.name),
status: "draft",
trip_type: setup.trip_type
};
const createResp = await apiClient.post("/trips", createPayload);
const tripId = ((_a = createResp == null ? void 0 : createResp.data) == null ? void 0 : _a.id) ?? (createResp == null ? void 0 : createResp.id);
if (!tripId) {
throw new Error("Trip created but no ID returned.");
}
const patchPayload = {
...tripUpdate,
duration_days: setup.trip_type === "single_day" ? 1 : Number(setup.duration_days),
duration_nights: setup.trip_type === "single_day" ? 0 : Number(setup.duration_nights)
};
if (setup.best_season) {
patchPayload.best_season = setup.best_season;
}
const difficultyId = parseInt(setup.difficulty_level_id, 10);
if (Number.isFinite(difficultyId) && difficultyId > 0) {
patchPayload.difficulty_level = difficultyId;
}
const priceNum = parseFloat(setup.price);
if (Number.isFinite(priceNum) && priceNum >= 0) {
patchPayload.original_price = priceNum;
}
const salePriceNum = parseFloat(setup.sale_price);
if (Number.isFinite(salePriceNum) && salePriceNum > 0 && (!Number.isFinite(priceNum) || salePriceNum < priceNum)) {
patchPayload.sale_price = salePriceNum;
}
await apiClient.put(`/trips/${tripId}`, patchPayload);
const itinerarySt = sections.itinerary;
let itineraryWarning = "";
if (itinerarySt.status === "done" && Array.isArray(itinerarySt.decoded)) {
const days = itinerarySt.decoded.map((d) => ({
day: d.day,
day_title: d.day_title,
description: d.description,
// Preserve activities the trip-creation agent generated so
// each day's schedule entries persist to the day_entry
// table alongside the day row. Without this the trip page
// would render day overviews but no per-block schedule.
activities: Array.isArray(d.activities) ? d.activities : []
}));
if (days.length > 0) {
try {
await aiApi.applyItinerary(tripId, days, true);
} catch (e) {
itineraryWarning = extractError$1(e);
console.warn("Itinerary apply failed:", e);
}
}
} else if (itinerarySt.status === "needs_context" || itinerarySt.status === "failed") {
itineraryWarning = __(
"Itinerary section didn't complete — you can build it from the Itinerary page after the wizard finishes.",
"yatra"
);
}
if (itineraryWarning) {
console.warn("Wizard itinerary warning:", itineraryWarning);
}
setPhase("done");
setTimeout(() => {
var _a2;
const base = ((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || "";
window.location.href = `${base}/wp-admin/admin.php?page=yatra&subpage=trips&action=edit&id=${tripId}`;
}, 900);
} catch (e) {
setCreateError(extractError$1(e));
setPhase("error");
}
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: open,
onClose: () => {
if (phase !== "creating") onClose();
},
size: "xl",
hideHeader: true,
hideFooter: true,
bodyClassName: "",
bodyScrollClassName: "",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-[85vh] max-h-[85vh] min-h-[480px] w-full flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-gradient-to-br from-blue-600 to-blue-700 p-1.5 text-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-4 w-4" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-white", children: __("Create trip with AI", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: phaseLabel(phase) })
] })
] }),
phase !== "creating" && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: onClose,
className: "rounded text-gray-400 hover:text-gray-600",
"aria-label": __("Close", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-5 w-5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-gray-100 px-6 py-2 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Steps, { phase }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
phase === "setup" && /* @__PURE__ */ jsxRuntimeExports.jsx(
SetupStep,
{
setup,
onChange: (patch) => setSetup((prev) => ({ ...prev, ...patch }))
}
),
phase === "generating" && /* @__PURE__ */ jsxRuntimeExports.jsx(
GeneratingStep,
{
sections,
done: sectionsDone,
total: sectionsTotal
}
),
phase === "review" && /* @__PURE__ */ jsxRuntimeExports.jsx(
ReviewStep,
{
sections,
onRetryContextChange: (id, v) => setSections((prev) => ({
...prev,
[id]: { ...prev[id], retryContext: v }
})),
onRetry: (id) => retrySection(id),
onRerun: (id) => void runSection(id)
}
),
phase === "creating" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-8 w-8 animate-spin text-blue-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: __("Saving your AI-generated trip…", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: __(
"Creating the draft, applying content, building itinerary days.",
"yatra"
) })
] }),
phase === "done" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-full bg-green-100 p-3 dark:bg-green-900/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-6 w-6 text-green-600" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-base font-semibold text-gray-900 dark:text-white", children: __("Trip created.", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("Redirecting to the trip editor…", "yatra") })
] }),
phase === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-500/40 dark:bg-red-900/20 dark:text-red-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "mr-1 inline h-4 w-4" }),
createError || __("Something went wrong.", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: __(
"Your generated content is still here — you can retry, or go back to review and edit it.",
"yatra"
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between border-t border-gray-200 px-6 py-3 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
phase === "generating" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
sectionsDone,
"/",
sectionsTotal,
" ",
__("ready", "yatra"),
sectionsNeedContext > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-2 text-amber-600 dark:text-amber-300", children: [
sectionsNeedContext,
" ",
__("need more info", "yatra")
] }),
sectionsFailed > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-2 text-red-500", children: [
sectionsFailed,
" ",
__("failed", "yatra")
] })
] }),
phase === "review" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
sectionsDone,
"/",
sectionsTotal,
" ",
__("sections accepted", "yatra"),
sectionsNeedContext > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-2 text-amber-600 dark:text-amber-300", children: [
sectionsNeedContext,
" ",
__("waiting for input", "yatra")
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
phase === "setup" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: onClose, children: __("Cancel", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: startGeneration, disabled: !setupValid, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Wand2, { className: "mr-2 h-4 w-4" }),
__("Generate with AI", "yatra")
] })
] }),
phase === "generating" && /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "outline", disabled: true, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
__("Working…", "yatra")
] }),
phase === "review" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "outline", onClick: () => setPhase("setup"), children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
__("Back", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: createTrip,
disabled: sectionsDone === 0,
title: sectionsDone === 0 ? __(
"At least one section needs to succeed before you can create the trip.",
"yatra"
) : "",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "mr-2 h-4 w-4" }),
__("Create trip", "yatra")
]
}
)
] }),
phase === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "outline", onClick: () => setPhase("review"), children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
__("Back to review", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: createTrip, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
__("Retry create", "yatra")
] })
] })
] })
] })
] })
}
);
};
const Steps = ({ phase }) => {
const order = ["setup", "generating", "review", "creating"];
const activeIdx = phase === "done" ? order.length : phase === "error" ? order.indexOf("creating") : order.indexOf(phase);
return /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: "flex items-center gap-1 text-[11px]", children: order.map((p, i) => {
const active = i === activeIdx;
const past = i < activeIdx || phase === "done";
return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold ${past ? "bg-green-500 text-white" : active ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400"}`,
children: past ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-3 w-3" }) : i + 1
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `${active ? "font-medium text-blue-700 dark:text-blue-300" : "text-gray-500 dark:text-gray-400"}`,
children: p === "setup" ? __("Setup", "yatra") : p === "generating" ? __("Generate", "yatra") : p === "review" ? __("Review", "yatra") : __("Save", "yatra")
}
),
i < order.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 text-gray-300 dark:text-gray-600" })
] }, p);
}) });
};
const SetupStep = ({ setup, onChange }) => {
var _a;
const { data: difficultyData } = useQuery({
queryKey: ["wizard-difficulty-levels"],
queryFn: async () => {
try {
const resp = await apiClient.get("/difficulty-levels", {
params: { per_page: 100 }
});
const list = Array.isArray(resp == null ? void 0 : resp.data) ? resp.data : [];
return list.filter((d) => d && d.id && d.name).map((d) => ({ id: Number(d.id), name: String(d.name) }));
} catch {
return [];
}
},
staleTime: 5 * 60 * 1e3
});
const difficulties = difficultyData || [];
const currency = ((_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.currency) || "USD";
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-300", children: __(
"Tell AI about the trip — the more specific, the better the draft. You'll edit everything afterwards.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Trip name", "yatra"), required: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: setup.name,
placeholder: __("e.g. 7-Day Dhaka Cultural Tour", "yatra"),
onChange: (e) => onChange({ name: e.target.value })
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Destination(s)", "yatra"), required: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: setup.destinations,
placeholder: __("e.g. Dhaka, Bangladesh", "yatra"),
onChange: (e) => onChange({ destinations: e.target.value })
}
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Type", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: setup.trip_type,
onChange: (e) => onChange({
trip_type: e.target.value
}),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "multi_day", children: __("Multi-day", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "single_day", children: __("Single day", "yatra") })
]
}
) }),
setup.trip_type === "multi_day" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Days", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: 1,
max: 60,
value: setup.duration_days,
onChange: (e) => onChange({ duration_days: e.target.value })
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Nights", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: 0,
max: 60,
value: setup.duration_nights,
onChange: (e) => onChange({ duration_nights: e.target.value })
}
) })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", {})
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Difficulty", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: setup.difficulty_level_id,
onChange: (e) => {
const id = e.target.value;
const match2 = difficulties.find((d) => String(d.id) === id);
onChange({
difficulty_level_id: id,
difficulty_level_label: match2 ? match2.name : ""
});
},
disabled: difficulties.length === 0,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: difficulties.length === 0 ? __("(no difficulty levels configured)", "yatra") : __("(skip — operator picks later)", "yatra") }),
difficulties.map((d) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: String(d.id), children: d.name }, d.id))
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Best season", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: setup.best_season,
onChange: (e) => onChange({ best_season: e.target.value }),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: __("(any)", "yatra") }),
SEASONS.map((s2) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: s2, children: s2.charAt(0).toUpperCase() + s2.slice(1) }, s2))
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Audience", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: setup.audience,
placeholder: __("couples, families, solo…", "yatra"),
onChange: (e) => onChange({ audience: e.target.value })
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Field$1, { label: __("Price per person", "yatra"), hint: `(${currency})`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: 0,
step: "0.01",
value: setup.price,
placeholder: __("e.g. 1499", "yatra"),
onChange: (e) => onChange({ price: e.target.value })
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field$1,
{
label: __("Sale price (optional)", "yatra"),
hint: `(${currency})`,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: 0,
step: "0.01",
value: setup.sale_price,
placeholder: __("e.g. 1299", "yatra"),
onChange: (e) => onChange({ sale_price: e.target.value })
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", {})
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field$1,
{
label: __("Key activities", "yatra"),
hint: __("(comma-separated)", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: setup.activities,
placeholder: __(
"food tours, rickshaw rides, mosque visits, river cruise",
"yatra"
),
onChange: (e) => onChange({ activities: e.target.value })
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field$1,
{
label: __("Anything else AI should know", "yatra"),
hint: __("(optional but recommended)", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
rows: 2,
className: "w-full rounded-md border border-gray-300 bg-white p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-gray-600 dark:bg-gray-800",
value: setup.extra_context,
placeholder: __(
"Mid-range hotels, halal-friendly meals, max group size 10…",
"yatra"
),
onChange: (e) => onChange({ extra_context: e.target.value })
}
)
}
)
] });
};
const GeneratingStep = ({ sections, done, total }) => {
const pct = total === 0 ? 0 : Math.round(done / total * 100);
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md bg-blue-50 p-3 dark:bg-blue-900/20", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-blue-900 dark:text-blue-200", children: __("AI is drafting your trip…", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-700 dark:text-blue-300", children: [
pct,
"%"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-blue-200 dark:bg-blue-900/40", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "h-full bg-blue-600 transition-all dark:bg-blue-400",
style: { width: `${pct}%` }
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: SECTIONS.map((s2) => /* @__PURE__ */ jsxRuntimeExports.jsx(SectionStatusRow, { spec: s2, state: sections[s2.id] }, s2.id)) })
] });
};
const ReviewStep = ({ sections, onRetryContextChange, onRetry, onRerun }) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-300", children: __(
"Review each section below. You can re-run any individual section, or fill in details for sections AI needs more info on.",
"yatra"
) }),
SECTIONS.map((spec) => /* @__PURE__ */ jsxRuntimeExports.jsx(
ReviewRow,
{
spec,
state: sections[spec.id],
onRetryContextChange: (v) => onRetryContextChange(spec.id, v),
onRetry: () => onRetry(spec.id),
onRerun: () => onRerun(spec.id)
},
spec.id
))
] });
};
const SectionStatusRow = ({ spec, state }) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-100 px-3 py-1.5 text-xs dark:border-gray-800", children: [
state.status === "idle" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "○" }),
state.status === "running" && /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-blue-500" }),
state.status === "done" && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-green-500" }),
state.status === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "h-3.5 w-3.5 text-red-500" }),
state.status === "needs_context" && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpCircle, { className: "h-3.5 w-3.5 text-amber-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700 dark:text-gray-200", children: spec.label })
] });
};
const ReviewRow = ({ spec, state, onRetryContextChange, onRetry, onRerun }) => {
const [open, setOpen] = reactExports.useState(true);
const sectionSummary = summarize(spec.id, state);
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => setOpen((v) => !v),
className: "flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-800/60",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
state.status === "done" && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle2, { className: "h-4 w-4 text-green-500" }),
state.status === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "h-4 w-4 text-red-500" }),
state.status === "needs_context" && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpCircle, { className: "h-4 w-4 text-amber-500" }),
state.status === "running" && /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-4 w-4 animate-spin text-blue-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: spec.label }),
sectionSummary && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
"· ",
sectionSummary
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: (e) => {
e.stopPropagation();
onRerun();
},
className: "rounded border border-gray-200 px-2 py-0.5 text-[11px] text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700",
title: __("Re-run this section", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "inline h-3 w-3" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ChevronRight,
{
className: `h-4 w-4 text-gray-400 transition-transform ${open ? "rotate-90" : ""}`
}
)
] })
]
}
),
open && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-gray-200 p-3 dark:border-gray-700", children: [
state.status === "done" && state.preview && /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap rounded bg-gray-50 p-2 text-xs text-gray-800 dark:bg-gray-900 dark:text-gray-200", children: state.preview }),
state.status === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded bg-red-50 p-2 text-xs text-red-700 dark:bg-red-900/30 dark:text-red-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "mr-1 inline h-3 w-3" }),
state.error
] }),
state.status === "needs_context" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-amber-200 bg-amber-50/60 p-2 text-xs text-amber-900 dark:border-amber-500/40 dark:bg-amber-900/20 dark:text-amber-200", children: [
state.clarificationMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1", children: state.clarificationMessage }),
state.clarificationQuestions && state.clarificationQuestions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "list-disc space-y-0.5 pl-4", children: state.clarificationQuestions.map((q, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: q }, i)) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
rows: 3,
className: "w-full rounded-md border border-amber-200 bg-white p-2 text-xs focus:outline-none focus:ring-2 focus:ring-amber-400 dark:border-amber-500/40 dark:bg-gray-800",
placeholder: __(
"Type the answers — these get added to the prompt and only this section regenerates.",
"yatra"
),
value: state.retryContext,
onChange: (e) => onRetryContextChange(e.target.value)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
size: "sm",
onClick: onRetry,
disabled: state.retryContext.trim() === "",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Wand2, { className: "mr-2 h-3 w-3" }),
__("Try again with this", "yatra")
]
}
) })
] })
] })
] });
};
const Field$1 = ({ label, hint, required, children }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "mb-1 flex items-center gap-1 text-xs font-medium text-gray-700 dark:text-gray-200", children: [
label,
required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" }),
hint && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-[10px] font-normal text-gray-400", children: hint })
] }),
children
] });
function summarize(id, state) {
if (state.status !== "done") return "";
const d = state.decoded;
if (id === "itinerary" && Array.isArray(d)) {
return `${d.length} ${d.length === 1 ? "day" : "days"} drafted`;
}
if (id === "highlights" && Array.isArray(d)) {
return `${d.length} ${d.length === 1 ? "highlight" : "highlights"}`;
}
if ((id === "included_items" || id === "excluded_items") && Array.isArray(d)) {
return `${d.length} ${d.length === 1 ? "item" : "items"}`;
}
if (id === "faqs" && Array.isArray(d)) {
return `${d.length} Q&A`;
}
if (typeof d === "string") {
const len = d.replace(/<[^>]+>/g, "").length;
return `${len} ${len === 1 ? "char" : "chars"}`;
}
return "";
}
function initialSectionState() {
const out = {};
for (const s2 of SECTIONS) {
out[s2.id] = { status: "idle", retryContext: "" };
}
return out;
}
function phaseLabel(phase) {
switch (phase) {
case "setup":
return __("Step 1 of 4 — tell AI about the trip", "yatra");
case "generating":
return __("Step 2 of 4 — drafting", "yatra");
case "review":
return __("Step 3 of 4 — review", "yatra");
case "creating":
return __("Step 4 of 4 — saving", "yatra");
case "done":
return __("Done", "yatra");
case "error":
return __("Error", "yatra");
}
}
function slugify(s2) {
return s2.toLowerCase().trim().replace(/[^\p{L}\p{N}-]+/gu, "-").replace(/^-+|-+$/g, "").slice(0, 80);
}
function plainTextToHtml(text) {
if (!text) return "";
const escape = (s2) => s2.replace(/&/g, "&").replace(//g, ">");
const paragraphs = text.replace(/\r\n?/g, "\n").split(/\n{2,}/).map((p) => p.trim()).filter((p) => p !== "");
return paragraphs.map((p) => `
${escape(p).replace(/\n/g, "
`).join("");
}
function decodeAmenityList(text) {
return text.split(/\r?\n/).map((line) => line.replace(/^[\s\-\*••]+/, "").trim()).filter((line) => line !== "" && !/^Day\s+\d+/i.test(line)).map((title2) => ({ title: title2, description: "" }));
}
function decodeFaq(text) {
const out = [];
const blocks = text.replace(/\r\n?/g, "\n").split(/\n{2,}/);
for (const block of blocks) {
const qMatch = block.match(/^\s*Q[:\.\-]\s*(.+)/im);
const aMatch = block.match(/A[:\.\-]\s*([\s\S]+)/im);
if (qMatch) {
out.push({
question: qMatch[1].trim(),
answer: aMatch ? aMatch[1].trim() : ""
});
}
}
return out;
}
function extractError$1(e) {
var _a;
if (!e) return "Request failed.";
const data = ((_a = e == null ? void 0 : e.response) == null ? void 0 : _a.data) ?? (e == null ? void 0 : e.data) ?? null;
if (data && typeof data === "object" && typeof data.message === "string") {
return data.message;
}
return (e == null ? void 0 : e.message) || "Request failed.";
}
const PageHeader = ({
description,
actions,
actionCapability,
actionRequirePro = false
}) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: description }) }),
actions && /* @__PURE__ */ jsxRuntimeExports.jsx(
ConditionalRender,
{
capability: actionCapability,
requirePro: actionRequirePro,
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-3", children: actions })
}
)
] });
};
const HelpText = ({
text,
variant = "info",
className = ""
}) => {
const Icon = variant === "help" ? HelpCircle : Info;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: `flex items-start gap-1.5 text-[11px] text-gray-400 dark:text-gray-500 ${className}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-3 h-3 mt-0.5 flex-shrink-0 opacity-60" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "opacity-80", children: text })
]
}
);
};
const getErrorContext = (error) => {
if (!error) {
return { details: "" };
}
const requestInfo = error == null ? void 0 : error.requestInfo;
const maybeResponse = error == null ? void 0 : error.response;
const serialize = (value) => {
if (value == null) {
return "";
}
if (typeof value === "string") {
return value;
}
try {
return JSON.stringify(value, null, 2);
} catch {
return String(value);
}
};
if ((maybeResponse == null ? void 0 : maybeResponse.data) !== void 0 && (maybeResponse == null ? void 0 : maybeResponse.data) !== null) {
return {
details: serialize(maybeResponse.data),
requestInfo
};
}
if (typeof error === "string") {
return {
details: error,
requestInfo
};
}
if (error instanceof Error) {
return {
details: error.stack || error.message || "",
requestInfo
};
}
return {
details: serialize(error),
requestInfo
};
};
function isWordPressPlainPermalink() {
var _a;
if (typeof window === "undefined") {
return false;
}
const ps = (_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.permalinkStructure;
return ps === "plain";
}
function getYatraSiteUrlFromWindow() {
var _a;
if (typeof window === "undefined") {
return "";
}
return ((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || "";
}
function resolveYatraPermalinkBases(fromSettings) {
const ya = typeof window !== "undefined" ? window.yatraAdmin : void 0;
const s2 = fromSettings;
return {
trip_base: (s2 == null ? void 0 : s2.trip_base) ?? (ya == null ? void 0 : ya.tripBase) ?? "trip",
destination_base: (s2 == null ? void 0 : s2.destination_base) ?? "destination",
activity_base: (s2 == null ? void 0 : s2.activity_base) ?? "activity",
trip_category_base: (s2 == null ? void 0 : s2.trip_category_base) ?? "trip-category"
};
}
function buildTripPlainUrl(baseSite, tripBase, slug) {
const base = baseSite.replace(/\/$/, "");
const q = new URLSearchParams();
q.set(tripBase, slug);
return `${base}/?${q.toString()}`;
}
function buildTaxonomyPlainUrl(baseSite, archiveBase, slug) {
const base = baseSite.replace(/\/$/, "");
const key2 = (archiveBase || "").trim() || "destination";
const q = new URLSearchParams();
q.set(key2, slug);
return `${base}/?${q.toString()}`;
}
function buildYatraSinglePublicUrls(params) {
const baseSite = (params.siteUrl ?? getYatraSiteUrlFromWindow()).replace(
/\/$/,
""
);
const bases = resolveYatraPermalinkBases(params.bases);
const slug = (params.slug || "").trim();
switch (params.entity) {
case "trip":
return {
plainUrl: buildTripPlainUrl(baseSite, bases.trip_base, slug),
prettyUrl: `${baseSite}/${bases.trip_base}/${slug}`
};
case "destination":
return {
plainUrl: buildTaxonomyPlainUrl(baseSite, bases.destination_base, slug),
prettyUrl: `${baseSite}/${bases.destination_base}/${slug}`
};
case "activity":
return {
plainUrl: buildTaxonomyPlainUrl(baseSite, bases.activity_base, slug),
prettyUrl: `${baseSite}/${bases.activity_base}/${slug}`
};
case "category":
return {
plainUrl: buildTaxonomyPlainUrl(
baseSite,
bases.trip_category_base,
slug
),
prettyUrl: `${baseSite}/${bases.trip_category_base}/${slug}`
};
}
}
function buildYatraSinglePreviewUrl(params) {
const { plainUrl, prettyUrl } = buildYatraSinglePublicUrls(params);
return isWordPressPlainPermalink() ? plainUrl : prettyUrl;
}
function buildYatraListingPublicUrl(baseSegment, siteUrl) {
const seg = (baseSegment || "trip").trim();
const raw = siteUrl !== void 0 ? siteUrl : getYatraSiteUrlFromWindow();
const siteBase = raw.replace(/\/$/, "");
if (isWordPressPlainPermalink()) {
if (!siteBase) {
return `/?yatra_page=${encodeURIComponent(seg)}`;
}
return `${siteBase}/?yatra_page=${encodeURIComponent(seg)}`;
}
if (!siteBase) {
return `/${seg}/`;
}
return `${siteBase}/${seg}/`;
}
function buildYatraAccountViewUrl(siteUrl, customerAccountPath) {
const raw = (customerAccountPath || "").trim().replace(/^\/+/, "");
const parts = raw.split("/").filter((p) => p.length > 0);
const segment = parts.length > 0 ? parts[parts.length - 1] : "my-account";
const slug = (segment || "my-account").trim();
return buildYatraListingPublicUrl(slug, siteUrl || void 0);
}
const generateSlug = (text) => {
if (!text) return "";
return text.toLowerCase().trim().replace(/[\s_]+/g, "-").replace(/[^\p{L}\p{N}-]+/gu, "").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
};
const Pagination = ({
currentPage,
totalPages,
totalItems,
itemsPerPage,
onPageChange,
itemName = "items"
}) => {
const generatePageNumbers = () => {
const pages = [];
const maxVisiblePages = 5;
let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
if (endPage - startPage + 1 < maxVisiblePages) {
startPage = Math.max(1, endPage - maxVisiblePages + 1);
}
if (startPage > 1) {
pages.push(
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: 1 === currentPage ? "default" : "outline",
size: "sm",
onClick: () => onPageChange(1),
className: "h-8 w-8 p-0",
children: "1"
},
1
)
);
if (startPage > 2) {
pages.push(
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 text-gray-500", children: "..." }, "ellipsis1")
);
}
}
for (let i = startPage; i <= endPage; i++) {
pages.push(
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: i === currentPage ? "default" : "outline",
size: "sm",
onClick: () => onPageChange(i),
className: "h-8 w-8 p-0",
children: i
},
i
)
);
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) {
pages.push(
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 text-gray-500", children: "..." }, "ellipsis2")
);
}
pages.push(
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: totalPages === currentPage ? "default" : "outline",
size: "sm",
onClick: () => onPageChange(totalPages),
className: "h-8 w-8 p-0",
children: totalPages
},
totalPages
)
);
}
return pages;
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
__("Showing", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: (currentPage - 1) * itemsPerPage + 1 }),
" ",
"-",
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: Math.min(currentPage * itemsPerPage, totalItems) }),
" ",
__("of", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: totalItems }),
" ",
itemName
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
size: "sm",
onClick: () => onPageChange(Math.max(1, currentPage - 1)),
disabled: currentPage === 1,
className: "h-8 px-3",
children: __("Previous", "yatra")
}
),
generatePageNumbers(),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
size: "sm",
onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)),
disabled: currentPage >= totalPages,
className: "h-8 px-3",
children: __("Next", "yatra")
}
)
] })
] });
};
const Table$1 = reactExports.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"table",
{
ref,
className: `w-full caption-bottom text-sm ${className}`,
...props
}
) }));
Table$1.displayName = "Table";
const TableHeader = reactExports.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { ref, className: `[&_tr]:border-b ${className}`, ...props }));
TableHeader.displayName = "TableHeader";
const TableBody = reactExports.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"tbody",
{
ref,
className: `[&_tr:last-child]:border-0 ${className}`,
...props
}
));
TableBody.displayName = "TableBody";
const TableRow = reactExports.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"tr",
{
ref,
className: `border-b transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50 data-[state=selected]:bg-gray-100 dark:data-[state=selected]:bg-gray-800 ${className}`,
...props
}
));
TableRow.displayName = "TableRow";
const TableHead = reactExports.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"th",
{
ref,
className: `h-12 px-4 text-left align-middle text-sm font-medium text-gray-500 dark:text-gray-400 [&:has([role=checkbox])]:pr-0 ${className}`,
...props
}
));
TableHead.displayName = "TableHead";
const TableCell = reactExports.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"td",
{
ref,
className: `p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`,
...props
}
));
TableCell.displayName = "TableCell";
const Table = ({
data,
columns,
actions = [],
isLoading = false,
isError = false,
errorText = __("Error loading data", "yatra"),
emptyText = __("No items found", "yatra"),
emptyDescription = __("Get started by creating your first item.", "yatra"),
onCreateClick,
onSort,
getSortIcon,
selectedItemIds = [],
onSelectItem,
onSelectAll,
isAllSelected = false,
getItemId = (item) => item.id,
getItemStatus = (item) => item.status,
statusFilter = "",
capability = "yatra_view_trips",
skeletonRows = 5,
errorDescription = __(
"Something went wrong while loading this data. Please try again in a moment.",
"yatra"
),
onRetry,
errorDetails,
errorRequestInfo,
// Hierarchical props
isHierarchical = false,
expandedIds = /* @__PURE__ */ new Set(),
onToggleExpand,
getChildren,
renderRowContent
}) => {
const [openDropdownId, setOpenDropdownId] = reactExports.useState(
null
);
const [dropdownPosition, setDropdownPosition] = reactExports.useState(null);
const [copied, setCopied] = reactExports.useState(false);
const handleRetry = () => {
if (onRetry) {
onRetry();
return;
}
if (typeof window !== "undefined") {
window.location.reload();
}
};
React.useEffect(() => {
const handleClickOutside = (event) => {
const target2 = event.target;
if (target2.closest("[data-dropdown-trigger]") || target2.closest("[data-dropdown-content]")) {
return;
}
setOpenDropdownId(null);
};
if (openDropdownId !== null) {
document.addEventListener("click", handleClickOutside);
return () => document.removeEventListener("click", handleClickOutside);
}
}, [openDropdownId]);
const getVisibleActions = (item) => actions.filter((a2) => !a2.condition || a2.condition(item));
const openActionsMenu = (e, item) => {
e.preventDefault();
e.stopPropagation();
const itemId = getItemId(item);
const rect = e.currentTarget.getBoundingClientRect();
const visibleActions = getVisibleActions(item);
const dropdownHeight = visibleActions.length * 40 + 16;
const spaceBelow = window.innerHeight - rect.bottom;
const spaceAbove = rect.top;
const shouldPositionAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
setDropdownPosition({
top: shouldPositionAbove ? Math.max(8, rect.top - dropdownHeight) : rect.bottom,
right: window.innerWidth - rect.right
});
setOpenDropdownId(openDropdownId === itemId ? null : itemId);
};
const renderActionsDropdown = (item) => {
const itemId = getItemId(item);
if (openDropdownId !== itemId || !dropdownPosition) return null;
return reactDomExports.createPortal(
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed min-w-[180px] w-max bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-md py-1",
style: {
top: `${dropdownPosition.top}px`,
right: `${dropdownPosition.right}px`,
zIndex: 999999
},
"data-dropdown-content": true,
onClick: (e) => e.stopPropagation(),
children: getVisibleActions(item).map((action) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
action.onClick(item);
setOpenDropdownId(null);
},
className: `w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-3 transition-colors cursor-pointer whitespace-nowrap ${action.variant === "destructive" ? "text-red-600 dark:text-red-400" : action.variant === "outline" ? "text-blue-600 dark:text-blue-400" : "text-gray-700 dark:text-gray-300"}`,
children: [
action.icon,
action.label
]
},
action.key
))
}
),
document.body
);
};
const renderSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(Table$1, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
isHierarchical && /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "w-12" }),
onSelectItem && onSelectAll && /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "w-12" }),
columns.filter((col) => col.visible !== false).map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: column.width, children: column.label }, column.key)),
actions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "text-right w-[100px]", children: __("Actions", "yatra") })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { children: [...Array(skeletonRows)].map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
isHierarchical && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 bg-gray-100 dark:bg-gray-800 rounded animate-pulse" }) }),
onSelectItem && onSelectAll && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 bg-gray-100 dark:bg-gray-800 rounded animate-pulse" }) }),
columns.filter((col) => col.visible !== false).map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-100 dark:bg-gray-800 rounded animate-pulse" }) }, `${column.key}-${index}`)),
actions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-end gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-4 bg-gray-100 dark:bg-gray-800 rounded animate-pulse" }) }) })
] }, `skeleton-${index}`)) })
] });
const composedErrorText = reactExports.useMemo(() => {
const parts = [];
if (errorRequestInfo) {
if (errorRequestInfo.method) {
parts.push(`Request Method: ${errorRequestInfo.method}`);
}
if (errorRequestInfo.url) {
parts.push(`Request URL: ${errorRequestInfo.url}`);
}
if (errorRequestInfo.payload) {
parts.push(`Request Payload:
${errorRequestInfo.payload}`);
}
}
if (errorDetails) {
parts.push(`Response:
${errorDetails}`);
}
return parts.join("\n\n").trim();
}, [errorRequestInfo, errorDetails]);
const renderError = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex flex-col items-center justify-center text-center py-14 px-6 my-4 min-h-[360px]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-4 rounded-2xl border-2 border-dashed border-red-200/60 dark:border-red-900/50 bg-gradient-to-br from-red-50 via-orange-50/60 to-white dark:from-red-900/40 dark:via-orange-900/10 dark:to-gray-900 shadow-sm" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative z-10 max-w-lg mx-auto space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center justify-center w-24 h-24 rounded-2xl bg-gradient-to-br from-red-100 via-rose-50 to-orange-100 dark:from-red-900/50 dark:via-rose-800/30 dark:to-orange-900/40 ring-8 ring-red-100/70 dark:ring-red-900/30 shadow-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-12 h-12 text-red-500 dark:text-red-300",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "1.5",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M12 9v4m0 4h.01M10.29 3.86L2.82 17a2 2 0 001.71 3h14.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
}
)
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: errorText }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-base text-gray-600 dark:text-gray-400 leading-relaxed", children: errorDescription })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: handleRetry, className: "w-full sm:w-auto px-6", children: __("Try again", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => {
if (typeof window !== "undefined") {
window.open(
"https://wordpress.org/support/plugin/yatra",
"_blank"
);
}
},
className: "w-full sm:w-auto px-6 text-gray-700 dark:text-gray-200 border-gray-200 dark:border-gray-700",
children: __("Visit support center", "yatra")
}
)
] }),
(errorDetails || errorRequestInfo) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full text-left rounded-2xl border border-red-100/80 dark:border-red-900/40 bg-white/90 dark:bg-gray-900/70 shadow-inner space-y-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-red-50 dark:border-red-900/30", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: __("Technical details", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
size: "sm",
variant: "ghost",
className: "flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900",
onClick: () => {
if (!(navigator == null ? void 0 : navigator.clipboard) || !composedErrorText) {
return;
}
navigator.clipboard.writeText(composedErrorText).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2e3);
}).catch(() => {
});
},
children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-4 h-4" }),
__("Copied", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-4 h-4" }),
__("Copy details", "yatra")
] })
}
)
] }),
errorRequestInfo && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 border-b border-red-50 dark:border-red-900/20 space-y-2 text-sm text-left text-gray-700 dark:text-gray-200", children: [
errorRequestInfo.method && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: __("Method:", "yatra") }),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: errorRequestInfo.method })
] }),
errorRequestInfo.url && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "break-all", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: __("URL:", "yatra") }),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: errorRequestInfo.url })
] }),
errorRequestInfo.payload && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium block mb-1", children: __("Payload:", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "max-h-40 overflow-auto px-3 py-2 rounded bg-red-50/60 dark:bg-red-900/30 text-xs font-mono text-gray-800 dark:text-gray-100 whitespace-pre-wrap", children: errorRequestInfo.payload })
] })
] }),
errorDetails && /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "max-h-56 overflow-auto px-4 py-3 text-xs leading-relaxed font-mono text-gray-700 dark:text-gray-200 whitespace-pre-wrap", children: errorDetails })
] })
] })
] });
const renderEmpty = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex flex-col items-center justify-center text-center py-12 px-6 my-4 min-h-[350px]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-4 bg-gradient-to-br from-gray-50/80 via-blue-50/30 to-white dark:from-gray-900/80 dark:via-blue-900/20 dark:to-gray-800/80 rounded-2xl border-2 border-dashed border-gray-300/50 dark:border-gray-600/50 shadow-sm" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative z-10 max-w-lg mx-auto space-y-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center justify-center w-24 h-24 rounded-2xl bg-gradient-to-br from-blue-100 via-blue-50 to-indigo-100 dark:from-blue-900/40 dark:via-blue-800/20 dark:to-indigo-900/40 ring-8 ring-blue-100/60 dark:ring-blue-900/30 shadow-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"svg",
{
className: "w-12 h-12 text-blue-600 dark:text-blue-400",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M7 7h10v10H7zM5 3h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M9 9h6M9 12h6M9 15h4"
}
)
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: emptyText }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-base text-gray-600 dark:text-gray-400 leading-relaxed max-w-md mx-auto", children: emptyDescription })
] }),
onCreateClick && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: onCreateClick,
className: "inline-flex items-center gap-3 px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white text-base font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transform hover:scale-[1.02]",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-4 h-4",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
strokeWidth: "2",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M12 4v16m8-8H4"
}
)
}
),
__("Create New", "yatra")
]
}
) })
] })
] });
const renderHierarchicalRow = (item, index, isChild = false) => {
const itemId = getItemId(item);
const itemStatus = getItemStatus(item);
const isTrash = itemStatus === "trash" || statusFilter === "trash";
const children = getChildren ? getChildren(item) : [];
const hasChildren = children.length > 0;
const isExpanded = expandedIds.has(itemId);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
TableRow,
{
className: `${isTrash ? "bg-red-50/30 dark:bg-red-900/10 opacity-75 hover:bg-red-50/50 dark:hover:bg-red-900/20" : ""} ${isChild ? "bg-gray-50 dark:bg-gray-900/50" : ""}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "w-12", children: hasChildren && onToggleExpand && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => onToggleExpand(itemId),
className: "p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded",
children: isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4" })
}
) }),
onSelectItem && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
className: "rounded border-gray-300 dark:border-gray-600",
checked: selectedItemIds.includes(itemId),
onChange: (e) => onSelectItem(itemId, e.target.checked),
"aria-label": __("Select item", "yatra")
}
) }),
renderRowContent ? renderRowContent(item, index, isChild).map(
(cellContent, cellIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
TableCell,
{
className: isTrash ? "text-gray-400 dark:text-gray-600" : "",
children: cellContent
},
`cell-${itemId}-${cellIndex}`
)
) : columns.filter((col) => col.visible !== false).map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
TableCell,
{
className: isTrash ? "text-gray-400 dark:text-gray-600" : "",
children: column.render ? column.render(item, index) : item[column.key]
},
`${column.key}-${itemId}`
)),
actions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative inline-block", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "icon",
onClick: (e) => openActionsMenu(e, item),
className: "h-8 w-8 hover:bg-gray-100 dark:hover:bg-gray-700",
"aria-label": __("More actions", "yatra"),
"data-dropdown-trigger": true,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreVertical, { className: "w-4 h-4" })
}
),
renderActionsDropdown(item)
] }) })
]
}
),
hasChildren && isExpanded && children.map(
(child, childIndex) => renderHierarchicalRow(child, childIndex, true)
)
] }, itemId);
};
const renderFlatRow = (item, index) => {
const itemId = getItemId(item);
const itemStatus = getItemStatus(item);
const isTrash = itemStatus === "trash" || statusFilter === "trash";
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
TableRow,
{
className: isTrash ? "bg-red-50/30 dark:bg-red-900/10 opacity-75 hover:bg-red-50/50 dark:hover:bg-red-900/20" : "",
children: [
onSelectItem && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
className: "rounded border-gray-300 dark:border-gray-600",
checked: selectedItemIds.includes(itemId),
onChange: (e) => onSelectItem(itemId, e.target.checked),
"aria-label": __("Select item", "yatra")
}
) }),
columns.filter((col) => col.visible !== false).map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
TableCell,
{
className: isTrash ? "text-gray-400 dark:text-gray-600" : "",
children: column.render ? column.render(item, index) : item[column.key]
},
`${column.key}-${itemId}`
)),
actions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative inline-block", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "icon",
onClick: (e) => openActionsMenu(e, item),
className: "h-8 w-8 hover:bg-gray-100 dark:hover:bg-gray-700",
"aria-label": __("More actions", "yatra"),
"data-dropdown-trigger": true,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreVertical, { className: "w-4 h-4" })
}
),
renderActionsDropdown(item)
] }) })
]
},
itemId
);
};
const renderTable = () => {
if (isLoading) return renderSkeleton();
if (isError) return renderError();
if (data.length === 0) return renderEmpty();
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Table$1, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
isHierarchical && /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "w-12" }),
onSelectItem && onSelectAll && /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "w-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
className: "rounded border-gray-300 dark:border-gray-600",
checked: isAllSelected,
onChange: (e) => onSelectAll(e.target.checked),
"aria-label": __("Select all items", "yatra")
}
) }),
columns.filter((col) => col.visible !== false).map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: column.width, children: column.sortable && onSort ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => onSort(column.key),
className: "flex items-center hover:text-gray-900 dark:hover:text-white transition-colors",
children: [
column.label,
getSortIcon && getSortIcon(column.key)
]
}
) : column.label }, column.key)),
actions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "text-right w-[100px]", children: __("Actions", "yatra") })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { children: data.map(
(item, index) => isHierarchical ? renderHierarchicalRow(item, index) : renderFlatRow(item, index)
) })
] });
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability, children: renderTable() });
};
const ConfirmationDialog = ({
isOpen,
onClose,
onConfirm,
title: title2,
message: message2,
description,
confirmText,
cancelText,
variant = "danger",
isLoading = false,
icon,
secondaryAction
}) => {
const displayMessage = description || message2 || "";
const getVariantStyles = () => {
switch (variant) {
case "danger":
return "text-red-600 dark:text-red-400";
case "warning":
return "text-yellow-600 dark:text-yellow-400";
case "info":
return "text-blue-600 dark:text-blue-400";
default:
return "text-gray-600 dark:text-gray-400";
}
};
const getButtonVariant = () => {
switch (variant) {
case "danger":
return "destructive";
case "warning":
return "default";
case "info":
return "default";
default:
return "default";
}
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen,
onClose,
title: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 mt-0.5 ${getVariantStyles()}`, children: icon || /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-6 h-6" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title2 || __("Confirm Action", "yatra") })
] }),
hideHeader: false,
hideFooter: false,
size: "sm",
panelClassName: "yatra-confirmation-ui yatra-model-ui",
bodyClassName: "px-6 py-5",
footer: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 justify-end pt-2 flex-wrap", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: onClose, disabled: isLoading, children: cancelText || __("Cancel", "yatra") }),
secondaryAction && /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: secondaryAction.variant || "outline",
onClick: secondaryAction.onClick,
disabled: isLoading,
children: secondaryAction.label
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: getButtonVariant(),
onClick: onConfirm,
disabled: isLoading,
className: "min-w-[100px]",
children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }),
__("Deleting...", "yatra")
] }) : confirmText || __("Confirm", "yatra")
}
)
] }),
children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed", children: displayMessage })
}
);
};
const BulkActionToolbar = ({
selectedIds,
bulkAction,
setBulkAction,
onApply,
onClearSelection,
statusFilter,
setStatusFilter,
statusOptions,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn,
bulkMutationPending,
totalItems,
bulkActionOptions
}) => {
const [confirmDialog, setConfirmDialog] = reactExports.useState({
isOpen: false,
action: "",
count: 0
});
const handleApplyClick = () => {
if (!bulkAction || selectedIds.length === 0) {
onApply();
return;
}
setConfirmDialog({
isOpen: true,
action: bulkAction,
count: selectedIds.length
});
};
const handleConfirm = () => {
setConfirmDialog({ isOpen: false, action: "", count: 0 });
onApply();
setBulkAction("");
};
const handleCancel = () => {
setConfirmDialog({ isOpen: false, action: "", count: 0 });
};
React.useEffect(() => {
const handleClickOutside = (event) => {
const target2 = event.target;
if (target2.closest("[data-columns-trigger]") || target2.closest("[data-columns-content]")) {
return;
}
setShowColumnsDropdown(false);
};
if (showColumnsDropdown) {
document.addEventListener("click", handleClickOutside);
return () => document.removeEventListener("click", handleClickOutside);
}
}, [showColumnsDropdown, setShowColumnsDropdown]);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-3 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 flex-nowrap", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: bulkAction,
onChange: (e) => setBulkAction(e.target.value),
className: "min-w-[140px]",
disabled: totalItems === 0,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: __("Bulk actions", "yatra") }),
bulkActionOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value))
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: handleApplyClick,
disabled: bulkMutationPending || selectedIds.length === 0,
className: "h-11 px-4 flex-shrink-0",
children: __("Apply", "yatra")
}
),
selectedIds.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 bg-blue-50 dark:bg-blue-900/20 px-2 py-1 rounded border border-blue-200 dark:border-blue-800 whitespace-nowrap", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-xs", children: `${__("Selected:", "yatra")} ${selectedIds.length}` }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
className: "text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium",
onClick: onClearSelection,
children: __("Clear", "yatra")
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
statusOptions.map((filter2) => {
const isActive = statusFilter === filter2.key;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
className: `px-3 py-2.5 text-sm font-medium rounded border transition-all duration-200 ${isActive ? "bg-gray-900 text-white border-gray-900 shadow-sm" : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-400 dark:border-gray-500"}`,
onClick: () => {
setStatusFilter(filter2.key);
onClearSelection();
setBulkAction("");
},
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-2", children: [
filter2.label,
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `px-1.5 py-0.5 text-xs rounded-full font-medium ${isActive ? "bg-white text-gray-900" : "bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400"}`,
children: filter2.count ?? 0
}
)
] })
},
filter2.key
);
}),
columnOptions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative ml-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
setShowColumnsDropdown(!showColumnsDropdown);
},
className: "h-10 px-3 flex items-center gap-2",
"data-columns-trigger": true,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Columns, { className: "w-4 h-4" }),
__("Columns", "yatra")
]
}
),
showColumnsDropdown && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "absolute right-0 top-11 z-[9999] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg py-2",
style: { width: "240px", minWidth: "240px" },
"data-columns-content": true,
onClick: (e) => e.stopPropagation(),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-2.5 text-sm font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700", children: __("Show Columns", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-1", children: columnOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: "flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer whitespace-nowrap",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: option.visible,
onChange: () => onToggleColumn(option.key),
className: "rounded border-gray-300 dark:border-gray-600 h-4 w-4 mr-3 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300 ml-2", children: option.label })
]
},
option.key
)) })
]
}
)
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: confirmDialog.isOpen,
onClose: handleCancel,
onConfirm: handleConfirm,
title: (() => {
switch (confirmDialog.action) {
case "delete":
return __("Delete Permanently", "yatra");
case "mark_trash":
case "trash":
return __("Move to Trash", "yatra");
case "mark_publish":
case "publish":
return __("Publish Items", "yatra");
case "mark_draft":
case "draft":
return __("Make Draft", "yatra");
case "mark_archived":
return __("Archive Items", "yatra");
case "restore":
return __("Restore Items", "yatra");
default:
return __("Confirm Bulk Action", "yatra");
}
})(),
message: (() => {
const count = confirmDialog.count;
switch (confirmDialog.action) {
case "delete":
return __(
"Are you sure you want to permanently delete {count} item(s)? This action cannot be undone.",
"yatra"
).replace("{count}", count.toString());
case "mark_trash":
case "trash":
return __(
"Are you sure you want to move {count} item(s) to trash?",
"yatra"
).replace("{count}", count.toString());
case "mark_publish":
case "publish":
return __(
"Are you sure you want to publish {count} item(s)?",
"yatra"
).replace("{count}", count.toString());
case "mark_draft":
case "draft":
return __(
"Are you sure you want to make {count} item(s) draft?",
"yatra"
).replace("{count}", count.toString());
case "mark_archived":
return __(
"Are you sure you want to archive {count} item(s)?",
"yatra"
).replace("{count}", count.toString());
case "restore":
return __(
"Are you sure you want to restore {count} item(s)?",
"yatra"
).replace("{count}", count.toString());
default:
return __(
"Are you sure you want to perform this action on {count} item(s)?",
"yatra"
).replace("{count}", count.toString());
}
})(),
confirmText: (() => {
switch (confirmDialog.action) {
case "delete":
return __("Delete Permanently", "yatra");
case "mark_trash":
case "trash":
return __("Move to Trash", "yatra");
case "mark_publish":
case "publish":
return __("Publish", "yatra");
case "mark_draft":
case "draft":
return __("Make Draft", "yatra");
case "mark_archived":
return __("Archive", "yatra");
case "restore":
return __("Restore", "yatra");
default:
return __("Confirm", "yatra");
}
})(),
cancelText: __("Cancel", "yatra"),
variant: confirmDialog.action === "delete" ? "danger" : "warning",
isLoading: bulkMutationPending
}
)
] });
};
const Trips = () => {
var _a, _b, _c, _d, _e;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("id");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [isCreateModalOpen, setIsCreateModalOpen] = reactExports.useState(false);
const [isAiWizardOpen, setIsAiWizardOpen] = reactExports.useState(false);
const [newTripTitle, setNewTripTitle] = reactExports.useState("");
const [createTripError, setCreateTripError] = reactExports.useState(null);
const [newTripSlug, setNewTripSlug] = reactExports.useState("");
const [isSlugManuallyEdited, setIsSlugManuallyEdited] = reactExports.useState(false);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = reactExports.useState(false);
const [tripToDelete, setTripToDelete] = reactExports.useState(null);
const queryClient2 = useQueryClient();
const { can, isPro } = usePermissions();
const { showToast } = useToast();
const { navigate } = useNavigate();
const { data: statsData } = useQuery({
queryKey: ["trips-stats"],
queryFn: async () => {
try {
const response = await apiClient.get("/trips/stats");
return response;
} catch (error2) {
return {
all: 0,
published: 0,
draft: 0,
review: 0,
approved: 0,
archived: 0,
trash: 0
};
}
},
enabled: can("yatra_view_trips")
});
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["trips", queryParams],
queryFn: async () => {
const response = await apiClient.get("/trips", { params: queryParams });
return response;
},
enabled: can("yatra_view_trips"),
staleTime: 0,
// Force fresh data
gcTime: 0
// Don't cache (new name for cacheTime)
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/trips/${id}/permanent-delete`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["trips"] });
queryClient2.invalidateQueries({ queryKey: ["trips-stats"] });
setIsDeleteDialogOpen(false);
setTripToDelete(null);
showToast(__("Trip deleted permanently.", "yatra"), "success");
},
onError: () => {
showToast(
__("Failed to delete trip. Please try again.", "yatra"),
"error"
);
}
});
const createTripMutation = useMutation({
mutationFn: async ({ title: title2, slug }) => {
const trimmedTitle = title2.trim();
const trimmedSlug = slug.trim();
const payload = {
title: trimmedTitle,
slug: trimmedSlug,
status: "draft",
trip_type: "multi_day"
};
const response = await apiClient.post("/trips", payload);
return (response == null ? void 0 : response.data) || response;
},
onSuccess: (data2) => {
showToast(
__("Trip created as draft. Redirecting to builder...", "yatra"),
"success"
);
queryClient2.invalidateQueries({ queryKey: ["trips"] });
queryClient2.invalidateQueries({ queryKey: ["trips-stats"] });
setIsCreateModalOpen(false);
setNewTripTitle("");
setNewTripSlug("");
setIsSlugManuallyEdited(false);
setCreateTripError(null);
if (data2 == null ? void 0 : data2.id) {
setTimeout(() => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&action=edit&id=${data2.id}`;
}, 600);
}
},
onError: (error2) => {
var _a2, _b2;
const message2 = ((_b2 = (_a2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.message) || (error2 == null ? void 0 : error2.message) || __("Failed to create trip. Please try again.", "yatra");
setCreateTripError(message2);
showToast(message2, "error");
}
});
const r2 = data;
const trips = Array.isArray(r2 == null ? void 0 : r2.data) ? r2.data : Array.isArray((_a = r2 == null ? void 0 : r2.data) == null ? void 0 : _a.data) ? r2.data.data : [];
const total = Number(((_b = r2 == null ? void 0 : r2.meta) == null ? void 0 : _b.total) ?? (r2 == null ? void 0 : r2.total) ?? 0);
const itemsPerPage = Number(((_c = r2 == null ? void 0 : r2.meta) == null ? void 0 : _c.per_page) ?? (r2 == null ? void 0 : r2.per_page) ?? 10) || 10;
const totalPages = Math.ceil(total / itemsPerPage);
const errorContext = getErrorContext(error);
const { data: difficultyLevelsData } = useQuery({
queryKey: ["difficulty-levels-lookup"],
queryFn: async () => {
try {
const response = await apiClient.get("/difficulty-levels", {
params: { per_page: 100 }
});
return response.data || [];
} catch (error2) {
console.error("Failed to load difficulty levels", error2);
return [];
}
},
staleTime: 5 * 60 * 1e3
// 5 minutes
});
const difficultyLevels = reactExports.useMemo(() => {
return (difficultyLevelsData || []).reduce(
(acc, level) => {
if (level && level.id && level.name) {
acc[level.id.toString()] = level.name;
}
return acc;
},
{}
);
}, [difficultyLevelsData]);
const formatLabel = (value) => {
if (!value) return "";
if (value && /^\d+$/.test(value) && difficultyLevels[value]) {
return difficultyLevels[value];
}
return "";
};
const summarizeDestinations = (trip) => {
const names = (trip.destinations || []).map((dest) => dest.name).filter(Boolean);
if (!names.length) return null;
const summary = names.slice(0, 2).join(", ");
const remaining = names.length - 2;
return remaining > 0 ? `${summary} +${remaining}` : summary;
};
const summarizeActivities = (trip) => {
const names = (trip.activity_types || []).map((act) => act.name).filter(Boolean);
if (!names.length) return null;
const summary = names.slice(0, 2).join(", ");
const remaining = names.length - 2;
return remaining > 0 ? `${summary} +${remaining}` : summary;
};
const summarizeCategories = (trip) => {
const names = (trip.trip_category || []).map((cat) => cat.name).filter(Boolean);
if (!names.length) return null;
const summary = names.slice(0, 2).join(", ");
const remaining = names.length - 2;
return remaining > 0 ? `${summary} +${remaining}` : summary;
};
const summarizeTravelers = (trip) => {
const { min_travelers, max_travelers } = trip;
if (min_travelers && max_travelers) {
return `${min_travelers}-${max_travelers} ${__("pax", "yatra")}`;
}
if (min_travelers) {
return `${__("Min", "yatra")} ${min_travelers} ${__("pax", "yatra")}`;
}
if (max_travelers) {
return `${__("Up to", "yatra")} ${max_travelers} ${__("pax", "yatra")}`;
}
return null;
};
const handleNewTripTitleChange = (value) => {
setNewTripTitle(value);
if (!isSlugManuallyEdited) {
setNewTripSlug(generateSlug(value));
}
};
const handleNewTripSlugChange = (value) => {
if (!isSlugManuallyEdited) {
setIsSlugManuallyEdited(true);
}
const sanitized = value.toLowerCase().replace(/[^\p{L}\p{N}-]/gu, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
setNewTripSlug(sanitized);
};
const enableSlugEditing = () => {
if (!isSlugManuallyEdited) {
if (!newTripSlug.trim()) {
setNewTripSlug(generateSlug(newTripTitle || "new-trip"));
}
setIsSlugManuallyEdited(true);
}
};
const formatDate2 = (dateString) => {
return new Date(dateString).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric"
});
};
const formatPrice = (trip) => {
const currencyCode = defaultCurrency;
if (trip.pricing_type === "traveler_based") {
let minPrice = null;
let maxPrice = null;
if (Array.isArray(trip.price_types) && trip.price_types.length > 0) {
const pricesFromTypes = trip.price_types.map(
(pt) => pt.sale_price || pt.discounted_price || pt.original_price || 0
).filter((val) => typeof val === "number" && val > 0);
if (pricesFromTypes.length > 0) {
minPrice = Math.min(...pricesFromTypes);
maxPrice = Math.max(...pricesFromTypes);
}
} else {
if (typeof trip.traveler_min_price === "number" && trip.traveler_min_price > 0) {
minPrice = trip.traveler_min_price;
}
if (typeof trip.traveler_max_price === "number" && trip.traveler_max_price > 0) {
maxPrice = trip.traveler_max_price;
}
}
if (minPrice !== null && maxPrice !== null) {
if (minPrice === maxPrice) {
return `${formatYatraMoney(minPrice, currencyCode, { zeroAsUnknown: false })}
`;
}
return `${formatYatraMoney(minPrice, currencyCode, { zeroAsUnknown: false })} - ${formatYatraMoney(maxPrice, currencyCode, { zeroAsUnknown: false })}`;
}
}
const price = trip.sale_price || trip.discounted_price || trip.original_price || 0;
if (!price) {
return "-";
}
return formatYatraMoney(Number(price), currencyCode, {
zeroAsUnknown: false
});
};
const getStatusBadge = (status) => {
const statusMap = {
publish: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Published", "yatra")
},
draft: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Draft", "yatra")
},
archived: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Archived", "yatra")
},
review: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __("Review", "yatra")
},
approved: {
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400",
label: __("Approved", "yatra")
},
trash: {
className: "bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
label: __("Trash", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const getTripTypeBadge = (tripType) => {
if (!tripType) return null;
const typeMap = {
single_day: {
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400",
label: __("Single Day", "yatra")
},
multi_day: {
className: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-400",
label: __("Multi-Day", "yatra")
},
flexible: {
className: "bg-teal-100 text-teal-700 dark:bg-teal-900/20 dark:text-teal-400",
label: __("Flexible", "yatra")
}
};
const typeInfo = typeMap[tripType] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: tripType
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: `text-xs ${typeInfo.className}`, children: typeInfo.label });
};
const handleEdit = (trip) => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&action=edit&id=${trip.id}`;
};
const handleDelete = (trip) => {
setTripToDelete(trip);
setIsDeleteDialogOpen(true);
};
const { data: settings2 } = useQuery({
queryKey: ["settings"],
queryFn: async () => {
try {
const response = await fetchSettings();
return response;
} catch (error2) {
return null;
}
},
enabled: can("yatra_access_admin"),
staleTime: 5 * 60 * 1e3
// Cache for 5 minutes
});
const defaultCurrency = ((_d = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _d.currency) || (settings2 == null ? void 0 : settings2.default_currency) || "USD";
const handleView = async (trip) => {
const tripSlug = trip.slug || "";
const { plainUrl, prettyUrl } = buildYatraSinglePublicUrls({
entity: "trip",
slug: tripSlug,
bases: settings2
});
if (isWordPressPlainPermalink()) {
if (!tripSlug) {
showToast(__("Trip slug is missing", "yatra"), "error");
return;
}
window.open(plainUrl, "_blank", "noopener,noreferrer");
return;
}
let apiPermalink = (trip == null ? void 0 : trip.permalink) || (trip == null ? void 0 : trip.url);
if (!apiPermalink && trip.id) {
try {
const detail = await apiClient.get(`/trips/${trip.id}`);
apiPermalink = (detail == null ? void 0 : detail.permalink) || (detail == null ? void 0 : detail.url) || apiPermalink;
} catch (e) {
}
}
if (apiPermalink) {
window.open(apiPermalink, "_blank", "noopener,noreferrer");
return;
}
if (!tripSlug) {
showToast(__("Trip slug is missing", "yatra"), "error");
return;
}
window.open(prettyUrl, "_blank", "noopener,noreferrer");
};
const handleCreateTrip = () => {
setIsCreateModalOpen(true);
setCreateTripError(null);
setNewTripTitle("");
setNewTripSlug("");
setIsSlugManuallyEdited(false);
};
const handleCreateTripConfirm = () => {
const title2 = newTripTitle.trim();
if (!title2) {
setCreateTripError(__("Trip title is required", "yatra"));
return;
}
const slugBase = isSlugManuallyEdited ? newTripSlug : generateSlug(title2);
const slug = slugBase.trim();
if (!slug) {
setCreateTripError(__("Trip slug is required", "yatra"));
return;
}
if (!/^[\p{L}\p{N}-]+$/u.test(slug)) {
setCreateTripError(
__("Slug can only contain letters, numbers, and hyphens", "yatra")
);
return;
}
setNewTripSlug(slug);
createTripMutation.mutate({ title: title2, slug });
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("id");
setSortOrder("desc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("asc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "id" || sortOrder !== "desc";
const updateTripStatus = async (trip, status) => {
await apiClient.put(`/trips/${trip.id}`, {
status,
title: trip.title,
slug: trip.slug
});
queryClient2.invalidateQueries({ queryKey: ["trips"] });
queryClient2.invalidateQueries({ queryKey: ["trips-stats"] });
};
const [visibleColumns, setVisibleColumns] = reactExports.useState(
() => {
const defaults2 = {
trip: true,
price: true,
status: true,
trip_type: true,
duration: false,
availability: true,
// Availability status (has dates, seats)
capacity: false,
// Min/Max travelers
countries: false,
difficulty: false,
attributes: false,
// Custom attributes count
// Control chips inside Trip column
destinations: true,
activities: true,
categories: true,
bookings: true,
created: true,
modified: false
// Last modified date
};
if (typeof window === "undefined") {
return defaults2;
}
const stored = window.localStorage.getItem("yatra-trips-visible-columns");
if (stored) {
try {
const parsed = JSON.parse(stored);
return { ...defaults2, ...parsed };
} catch {
return defaults2;
}
}
return defaults2;
}
);
const toggleColumn = (columnKey) => {
const updated = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(updated);
if (typeof window !== "undefined") {
window.localStorage.setItem(
"yatra-trips-visible-columns",
JSON.stringify(updated)
);
}
};
const columnOptions = [
{ key: "trip", label: __("Trip", "yatra"), visible: visibleColumns.trip },
{
key: "price",
label: __("Price", "yatra"),
visible: visibleColumns.price
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "trip_type",
label: __("Trip Type", "yatra"),
visible: visibleColumns.trip_type
},
{
key: "duration",
label: __("Duration", "yatra"),
visible: visibleColumns.duration
},
{
key: "countries",
label: __("Countries", "yatra"),
visible: visibleColumns.countries
},
{
key: "difficulty",
label: __("Difficulty", "yatra"),
visible: visibleColumns.difficulty
},
{
key: "availability",
label: __("Availability", "yatra"),
visible: visibleColumns.availability
},
{
key: "capacity",
label: __("Capacity", "yatra"),
visible: visibleColumns.capacity
},
{
key: "attributes",
label: __("Attributes", "yatra"),
visible: visibleColumns.attributes
},
// These control which chips are shown inside the Trip column
{
key: "destinations",
label: __("Destinations (chips)", "yatra"),
visible: visibleColumns.destinations
},
{
key: "activities",
label: __("Activities (chips)", "yatra"),
visible: visibleColumns.activities
},
{
key: "categories",
label: __("Categories (chips)", "yatra"),
visible: visibleColumns.categories
},
...isPro ? [
{
key: "bookings",
label: __("Bookings", "yatra"),
visible: visibleColumns.bookings
}
] : [],
{
key: "created",
label: __("Created", "yatra"),
visible: visibleColumns.created
},
{
key: "modified",
label: __("Modified", "yatra"),
visible: visibleColumns.modified
}
];
const isAllSelected = trips.length > 0 && selectedIds.length === trips.length;
const handleSelectItem = (id, checked) => {
setSelectedIds(
(prev) => checked ? [...prev, id] : prev.filter((existingId) => existingId !== id)
);
};
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(trips.map((trip) => trip.id));
} else {
setSelectedIds([]);
}
};
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: statsData.all ?? 0,
publish: statsData.published ?? 0,
draft: statsData.draft ?? 0,
review: statsData.review ?? 0,
approved: statsData.approved ?? 0,
archived: statsData.archived ?? 0,
trash: statsData.trash ?? 0
};
}
return {
all: 0,
publish: 0,
draft: 0,
review: 0,
approved: 0,
archived: 0,
trash: 0
};
}, [statsData]);
const statusOptions = [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all },
{
key: "publish",
label: __("Published", "yatra"),
count: statusCounts.publish
},
{ key: "draft", label: __("Draft", "yatra"), count: statusCounts.draft },
{ key: "review", label: __("Review", "yatra"), count: statusCounts.review },
{
key: "approved",
label: __("Approved", "yatra"),
count: statusCounts.approved
},
{
key: "archived",
label: __("Archived", "yatra"),
count: statusCounts.archived
},
{ key: "trash", label: __("Trash", "yatra"), count: statusCounts.trash }
];
const bulkActionOptions = reactExports.useMemo(() => {
if (statusFilter === "trash") {
return [
{ value: "mark_draft", label: __("Restore to Draft", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}
return [
{ value: "mark_publish", label: __("Mark as Published", "yatra") },
{ value: "mark_draft", label: __("Mark as Draft", "yatra") },
{ value: "mark_archived", label: __("Archive", "yatra") },
{ value: "mark_trash", label: __("Move to Trash", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}, [statusFilter]);
const handleBulkApply = async () => {
if (!bulkAction || selectedIds.length === 0) return;
try {
if (bulkAction === "delete") {
await Promise.all(
selectedIds.map(
(id) => apiClient.delete(`/trips/${id}/permanent-delete`)
)
);
showToast(__("Trips deleted permanently", "yatra"), "success");
} else if (bulkAction.startsWith("mark_")) {
const status = bulkAction.replace("mark_", "");
const selectedTrips = trips.filter(
(trip) => selectedIds.includes(trip.id)
);
await Promise.all(
selectedTrips.map((trip) => updateTripStatus(trip, status))
);
showToast(__("Trip status updated successfully", "yatra"), "success");
}
queryClient2.invalidateQueries({ queryKey: ["trips"] });
queryClient2.invalidateQueries({ queryKey: ["trips-stats"] });
setSelectedIds([]);
setBulkAction("");
} catch (error2) {
showToast(__("Bulk action failed", "yatra"), "error");
}
};
const columns = reactExports.useMemo(() => {
const cols = [];
cols.push({
key: "title",
label: __("Trip", "yatra"),
sortable: true,
visible: visibleColumns.trip,
width: "w-[300px]",
render: (trip) => {
var _a2, _b2;
const editUrl = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&action=edit&id=${trip.id}`;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
trip.featured_image_url ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: trip.featured_image_url,
alt: trip.title,
className: "w-12 h-12 object-cover rounded flex-shrink-0"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: `${((_b2 = window.yatraAdmin) == null ? void 0 : _b2.siteUrl) || ""}/wp-content/plugins/yatra/assets/images/trip-placeholder.svg`,
alt: trip.title,
className: "w-12 h-12 object-cover rounded flex-shrink-0"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: editUrl,
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
handleEdit(trip);
},
className: "font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline-offset-2 hover:underline truncate",
children: trip.title
}
),
can("yatra_view_trips") && trip.status !== "trash" && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: (e) => {
e.stopPropagation();
handleView(trip);
},
className: "ml-1 inline-flex items-center justify-center rounded-full p-1 text-gray-400 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800",
title: __("View trip in new tab", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3.5 h-3.5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate", children: [
trip.slug,
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-1 text-[11px] text-gray-400 dark:text-gray-500", children: [
"(ID: ",
trip.id,
")"
] })
] }),
(() => {
const destinationLabel = summarizeDestinations(trip);
const durationLabel = trip.duration_days ? `${trip.duration_days}${__("d", "yatra")}${trip.duration_nights ? ` / ${trip.duration_nights}${__("n", "yatra")}` : ""}` : null;
const travelerLabel = summarizeTravelers(trip);
const categoryLabel = summarizeCategories(trip);
const activityLabel = summarizeActivities(trip);
const difficultyLabel = formatLabel(trip.difficulty_level);
const chips = [
destinationLabel && visibleColumns.destinations && {
key: "dest",
label: destinationLabel,
icon: Route
},
durationLabel && {
key: "duration",
label: durationLabel,
icon: Calendar$1
},
travelerLabel && {
key: "traveler",
label: travelerLabel,
icon: Users
},
activityLabel && visibleColumns.activities && {
key: "activity",
label: activityLabel,
icon: Activity
},
categoryLabel && visibleColumns.categories && {
key: "category",
label: categoryLabel,
icon: FolderTree
},
difficultyLabel && {
key: "difficulty",
label: difficultyLabel,
icon: TrendingUp
}
].filter(Boolean);
if (!chips.length) return null;
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2 mt-1", children: chips.map(({ key: key2, label, icon: Icon }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"span",
{
className: "inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 px-2 py-0.5 text-[11px]",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-3 h-3" }),
label
]
},
`${trip.id}-${key2}`
)) });
})()
] }),
trip.featured_priority && trip.featured_priority !== "none" && isPro && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "text-xs bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400", children: trip.featured_priority === "featured" ? __("Featured", "yatra") : trip.featured_priority === "new" ? __("New", "yatra") : trip.featured_priority === "limited" ? __("Limited", "yatra") : trip.featured_priority === "bestseller" ? __("Bestseller", "yatra") : trip.featured_priority })
] });
}
});
cols.push({
key: "price",
label: __("Price", "yatra"),
sortable: true,
visible: visibleColumns.price,
render: (trip) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: formatPrice(trip) })
});
cols.push({
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (trip) => getStatusBadge(trip.status)
});
cols.push({
key: "trip_type",
label: __("Trip Type", "yatra"),
sortable: true,
visible: visibleColumns.trip_type,
render: (trip) => getTripTypeBadge(trip.trip_type)
});
cols.push({
key: "duration",
label: __("Duration", "yatra"),
sortable: false,
visible: visibleColumns.duration,
render: (trip) => {
if (!trip.duration_days && !trip.duration_nights) return null;
const days = trip.duration_days ? `${trip.duration_days} ${__("days", "yatra")}` : "";
const nights = trip.duration_nights ? `${trip.duration_nights} ${__("nights", "yatra")}` : "";
const label = [days, nights].filter(Boolean).join(" / ");
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: label });
}
});
cols.push({
key: "countries",
label: __("Countries", "yatra"),
sortable: false,
visible: visibleColumns.countries,
render: (trip) => {
const list = (trip.countries || []).filter(Boolean);
if (!list.length) return null;
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: list.join(", ") });
}
});
cols.push({
key: "difficulty",
label: __("Difficulty", "yatra"),
sortable: false,
visible: visibleColumns.difficulty,
render: (trip) => {
const difficultyValue = trip.difficulty_level;
if (!difficultyValue || difficultyValue === "0" || Number(difficultyValue) === 0)
return null;
const difficultyText = formatLabel(String(difficultyValue));
if (!difficultyText) return null;
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: difficultyText });
}
});
cols.push({
key: "availability",
label: __("Availability", "yatra"),
sortable: false,
visible: visibleColumns.availability,
render: (trip) => {
const dates = trip.availability_dates || [];
if (!dates.length) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: __("No dates", "yatra") });
}
const availableCount = dates.filter(
(d) => d.status === "available"
).length;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-gray-700 dark:text-gray-300", children: [
dates.length,
" ",
__("dates", "yatra")
] }),
availableCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-green-600 dark:text-green-400", children: [
availableCount,
" ",
__("available", "yatra")
] })
] });
}
});
cols.push({
key: "capacity",
label: __("Capacity", "yatra"),
sortable: false,
visible: visibleColumns.capacity,
render: (trip) => {
if (!trip.min_travelers && !trip.max_travelers) return null;
const min2 = trip.min_travelers || 0;
const max2 = trip.max_travelers || 0;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: [
min2,
"-",
max2,
" ",
__("travelers", "yatra")
] });
}
});
cols.push({
key: "attributes",
label: __("Attributes", "yatra"),
sortable: false,
visible: visibleColumns.attributes,
render: (trip) => {
const attrCount = trip.attributes ? Object.keys(trip.attributes).length : 0;
if (!attrCount) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: __("None", "yatra") });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { className: "text-xs bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400", children: [
attrCount,
" ",
__("attributes", "yatra")
] });
}
});
if (isPro) {
cols.push({
key: "bookings",
label: __("Bookings", "yatra"),
sortable: false,
visible: visibleColumns.bookings,
render: (trip) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: trip.bookings_count || 0 })
});
}
cols.push({
key: "date",
label: __("Created", "yatra"),
sortable: true,
visible: visibleColumns.created,
render: (trip) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: formatDate2(trip.created_at) })
});
cols.push({
key: "modified",
label: __("Modified", "yatra"),
sortable: true,
visible: visibleColumns.modified,
render: (trip) => {
if (!trip.updated_at) return null;
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: formatDate2(trip.updated_at) });
}
});
return cols;
}, [
isPro,
visibleColumns,
summarizeDestinations,
summarizeTravelers,
summarizeCategories,
formatLabel,
formatPrice,
getStatusBadge,
getTripTypeBadge
]);
const navigateToAvailability = (trip) => {
navigate({
subpage: "trips",
tab: "availability",
trip_id: trip.id.toString()
});
};
const navigateToRecurringRules = (trip) => {
navigate({
subpage: "trips",
tab: "availability",
trip_id: trip.id.toString(),
tab_mode: "recurring"
});
};
const tableActions = reactExports.useMemo(() => {
const actions = [];
if (can("yatra_view_trips")) {
actions.push({
key: "view",
label: __("View (frontend)", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-4 h-4" }),
onClick: (trip) => handleView(trip),
condition: (trip) => trip.status !== "trash"
// Hide for trash trips
});
}
actions.push({
key: "view-availability",
label: __("View Availability", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-4 h-4" }),
onClick: (trip) => navigateToAvailability(trip)
});
actions.push({
key: "view-recurring",
label: __("View Recurring Rules", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4" }),
onClick: (trip) => navigateToRecurringRules(trip)
});
if (can("yatra_edit_trips")) {
actions.push({
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (trip) => handleEdit(trip)
});
actions.push({
key: "duplicate",
label: __("Duplicate", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-4 h-4" }),
onClick: async (trip) => {
try {
await apiClient.post(`/trips/${trip.id}/duplicate`);
showToast(__("Trip duplicated as draft.", "yatra"), "success");
queryClient2.invalidateQueries({ queryKey: ["trips"] });
} catch (error2) {
console.error("Failed to duplicate trip", error2);
showToast(__("Failed to duplicate trip.", "yatra"), "error");
}
}
});
actions.push({
key: "publish",
label: __("Mark as Published", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: async (trip) => {
await updateTripStatus(trip, "publish");
showToast(__("Trip marked as published.", "yatra"), "success");
queryClient2.invalidateQueries({ queryKey: ["trips"] });
},
condition: (trip) => trip.status !== "publish" && trip.status !== "trash"
});
actions.push({
key: "draft",
label: __("Mark as Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (trip) => {
await updateTripStatus(trip, "draft");
showToast(__("Trip marked as draft.", "yatra"), "success");
queryClient2.invalidateQueries({ queryKey: ["trips"] });
},
condition: (trip) => trip.status !== "draft" && trip.status !== "trash"
});
actions.push({
key: "archive",
label: __("Archive", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Archive, { className: "w-4 h-4" }),
onClick: async (trip) => {
await updateTripStatus(trip, "archived");
showToast(__("Trip archived.", "yatra"), "success");
queryClient2.invalidateQueries({ queryKey: ["trips"] });
},
condition: (trip) => trip.status !== "archived" && trip.status !== "trash"
});
actions.push({
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: async (trip) => {
await updateTripStatus(trip, "trash");
showToast(__("Trip moved to trash.", "yatra"), "success");
queryClient2.invalidateQueries({ queryKey: ["trips"] });
},
condition: (trip) => trip.status !== "trash"
});
actions.push({
key: "restore",
label: __("Restore to Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: async (trip) => {
await updateTripStatus(trip, "draft");
showToast(__("Trip restored to draft.", "yatra"), "success");
queryClient2.invalidateQueries({ queryKey: ["trips"] });
},
condition: (trip) => trip.status === "trash"
});
}
if (can("yatra_delete_trips")) {
actions.push({
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (trip) => handleDelete(trip),
variant: "destructive",
condition: () => true
// Show for all trips
});
}
return actions;
}, [can, queryClient2, showToast]);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("All Trips", "yatra"),
description: __(
"Manage your travel packages and tours. Create, edit, and organize all your trips in one place.",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
window.WP_DEBUG && /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: () => {
refetch();
},
variant: "outline",
className: "text-xs",
children: __("Refresh Data", "yatra")
}
),
isAiEligible() && isAiModuleEnabled() && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
onClick: () => setIsAiWizardOpen(true),
className: "inline-flex items-center gap-2 whitespace-nowrap bg-gradient-to-r from-blue-600 to-blue-700 text-white border-0 hover:from-blue-700 hover:to-blue-800",
title: __(
"Have AI draft an entire trip — details, itinerary, SEO — from a few setup questions.",
"yatra"
),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-4 w-4 shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: __("Add Trip with AI", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateTrip,
className: "inline-flex items-center gap-2 whitespace-nowrap",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4 shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: __("Add New Trip", "yatra") })
]
}
)
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Use the search box to find trips by name. Use filters to show only published, draft, or other status trips. Click column headers to sort.",
"yatra"
)
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row gap-3 items-stretch lg:items-center w-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search by trip name...", "yatra"),
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
className: "pl-10 w-full",
title: __("Type to search for trips by name", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-auto lg:min-w-[160px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: statusFilter,
onChange: (e) => setStatusFilter(e.target.value),
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Published", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "review", children: __("Review", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "approved", children: __("Approved", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "archived", children: __("Archived", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-auto lg:min-w-[140px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: sortBy2,
onChange: (e) => setSortBy(e.target.value),
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "title", children: __("Title", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "price", children: __("Price", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "date", children: __("Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "status", children: __("Status", "yatra") })
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-auto lg:flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => setSortOrder(sortOrder === "asc" ? "desc" : "asc"),
className: "px-4 flex items-center gap-2 w-full lg:w-auto",
title: sortOrder === "asc" ? __("Ascending", "yatra") : __("Descending", "yatra"),
children: [
sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm whitespace-nowrap", children: sortOrder === "asc" ? __("Asc", "yatra") : __("Desc", "yatra") })
]
}
) }),
hasFilters && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-auto lg:flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleResetFilters,
className: "flex items-center gap-2 w-full lg:w-auto",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: __("Reset", "yatra") })
]
}
) })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(ConditionalRender, { capability: "yatra_view_trips", children: [
!error && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter,
statusOptions,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: false,
totalItems: total,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: trips,
columns,
actions: tableActions,
isLoading,
isError: !!error,
errorText: __("Error Loading Trips", "yatra"),
errorDescription: __(
"We couldn’t connect to the trips service. Please refresh or try again shortly.",
"We couldn’t connect to the trips service. Please refresh or try again shortly."
),
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["trips"] }),
errorDetails: errorContext.details,
errorRequestInfo: errorContext.requestInfo,
emptyText: searchTerm || statusFilter !== "all" ? __("No trips match your search", "yatra") : __("No trips yet", "yatra"),
emptyDescription: searchTerm || statusFilter !== "all" ? __(
"Try adjusting your search or filters to see more results.",
"yatra"
) : __(
"Get started by creating your first travel package. Click the button above to add a new trip.",
"yatra"
),
onCreateClick: !searchTerm && statusFilter === "all" ? handleCreateTrip : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: handleSelectItem,
onSelectAll: handleSelectAll,
isAllSelected,
getItemId: (trip) => trip.id
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage,
onPageChange: setPage,
itemName: __("trips", "yatra")
}
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: isCreateModalOpen,
onClose: () => {
if (!createTripMutation.isPending) {
setIsCreateModalOpen(false);
setCreateTripError(null);
}
},
title: __("Create New Trip", "yatra"),
description: __(
"Give your trip a name and URL. We'll create a draft and take you to the trip builder.",
"yatra"
),
size: "lg",
footer: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => {
if (!createTripMutation.isPending) {
setIsCreateModalOpen(false);
setCreateTripError(null);
}
},
disabled: createTripMutation.isPending,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateTripConfirm,
className: "flex items-center gap-2",
disabled: createTripMutation.isPending,
children: [
createTripMutation.isPending && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }),
createTripMutation.isPending ? __("Creating…", "yatra") : __("Create & Continue", "yatra")
]
}
)
] }),
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-1", children: [
__("Trip Title", "yatra"),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: newTripTitle,
onChange: (e) => handleNewTripTitleChange(e.target.value),
placeholder: __("e.g., Bali Beach Retreat", "yatra"),
disabled: createTripMutation.isPending,
className: "text-base"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: __(
"A catchy title that describes your trip. Recommended: 50-60 characters for best SEO results.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-1", children: [
__("Trip URL", "yatra"),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] font-normal text-gray-400", children: __("(URL friendly)", "yatra") })
] }),
!isSlugManuallyEdited && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: enableSlugEditing,
className: "text-xs text-blue-600 dark:text-blue-400 hover:underline",
children: __("Customize URL", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: newTripSlug,
onChange: (e) => handleNewTripSlugChange(e.target.value),
placeholder: __("bali-beach-retreat", "yatra"),
disabled: createTripMutation.isPending,
readOnly: !isSlugManuallyEdited,
className: `font-mono text-sm ${!isSlugManuallyEdited ? "bg-gray-100 dark:bg-gray-800 cursor-not-allowed" : ""}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: isSlugManuallyEdited ? __(
"Editing slug manually. Keep it short, lowercase, and hyphen-separated.",
"yatra"
) : __(
'Auto-generated from the title. Click "Customize URL" if you need a custom slug.',
"yatra"
) }),
(newTripSlug || newTripTitle) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400 mb-1", children: __("Preview:", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-900 dark:text-white font-mono break-all", children: [
((_e = window.yatraAdmin) == null ? void 0 : _e.siteUrl) || "https://example.com",
"/trips/",
newTripSlug || generateSlug(newTripTitle)
] })
] })
] }),
createTripError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: createTripError }) })
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
CreateTripWithAiWizard,
{
open: isAiWizardOpen,
onClose: () => setIsAiWizardOpen(false)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: isDeleteDialogOpen && !!tripToDelete,
onClose: () => {
if (!deleteMutation.isPending) {
setIsDeleteDialogOpen(false);
setTripToDelete(null);
}
},
onConfirm: () => {
if (tripToDelete && !deleteMutation.isPending) {
deleteMutation.mutate(tripToDelete.id);
}
},
title: __("Delete Trip Permanently", "yatra"),
message: tripToDelete ? __(
'Are you sure you want to permanently delete "{title}"? This cannot be undone and will remove all associated bookings.',
"yatra"
).replace("{title}", tripToDelete.title) : "",
confirmText: __("Delete Permanently", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
)
] });
};
const SearchFilterToolbar = ({
searchTerm,
onSearchChange,
statusFilter,
onStatusChange,
statusOptions,
sortBy: sortBy2,
onSortByChange,
sortOrder,
onSortOrderChange,
sortOptions,
onResetFilters,
hasFilters,
placeholder = "Search..."
}) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row gap-2 items-stretch lg:items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative min-w-0 w-full lg:flex-[3]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder,
value: searchTerm,
onChange: (e) => onSearchChange(e.target.value),
className: "pl-10 w-full"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Select,
{
value: statusFilter,
onChange: (e) => onStatusChange(e.target.value),
className: "w-full lg:w-48 lg:flex-none",
children: statusOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value))
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Select,
{
value: sortBy2,
onChange: (e) => onSortByChange(e.target.value),
className: "w-full lg:w-48 lg:flex-none",
children: sortOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs("option", { value: option.value, children: [
option.label,
sortBy2 === option.value && (sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }))
] }, option.value))
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => onSortOrderChange(sortOrder === "asc" ? "desc" : "asc"),
className: "h-11 px-4 flex items-center gap-1.5 flex-shrink-0",
title: sortOrder === "asc" ? __("Ascending", "yatra") : __("Descending", "yatra"),
children: [
sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: sortOrder === "asc" ? __("Asc", "yatra") : __("Desc", "yatra") })
]
}
),
hasFilters && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: onResetFilters,
className: "h-11 flex items-center gap-2 flex-shrink-0",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }),
__("Reset", "yatra")
]
}
)
] });
};
const getDefaultBulkStatusOptions = (statusFilter) => {
const options2 = [];
switch (statusFilter) {
case "publish":
options2.push({ value: "trash", label: __("Move to Trash", "yatra") });
options2.push({ value: "draft", label: __("Make Draft", "yatra") });
break;
case "draft":
options2.push({ value: "publish", label: __("Make Published", "yatra") });
options2.push({ value: "trash", label: __("Move to Trash", "yatra") });
break;
case "trash":
options2.push({ value: "publish", label: __("Make Published", "yatra") });
options2.push({ value: "draft", label: __("Make Draft", "yatra") });
options2.push({
value: "delete",
label: __("Delete Permanently", "yatra")
});
break;
case "all":
default:
options2.push({ value: "publish", label: __("Make Published", "yatra") });
options2.push({ value: "draft", label: __("Make Draft", "yatra") });
options2.push({ value: "trash", label: __("Move to Trash", "yatra") });
break;
}
return options2;
};
const Activities = () => {
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("id");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [permanentDeleteConfirm, setPermanentDeleteConfirm] = reactExports.useState({
isOpen: false,
activity: null
});
const [individualActionConfirm, setIndividualActionConfirm] = reactExports.useState({
isOpen: false,
action: "",
activity: null
});
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [openDropdown, setOpenDropdown] = reactExports.useState(
null
);
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
const defaultColumns = {
name: true,
description: true,
trips: true,
status: true,
seo_title: false,
seo_description: false,
seo_keywords: false,
created_at: false,
updated_at: false,
created_by_name: false,
updated_by_name: false
};
const saved = localStorage.getItem("yatra-activities-columns-v2");
return saved ? { ...defaultColumns, ...JSON.parse(saved) } : defaultColumns;
});
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
reactExports.useMemo(
() => [
{
Header: __("Name", "yatra"),
accessor: "name",
Cell: ({ row }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-gray-900", children: row.original.name }) })
},
{
Header: __("Description", "yatra"),
accessor: "description",
Cell: ({ row }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: row.original.description })
},
{
Header: __("Trips", "yatra"),
accessor: "trip_count",
Cell: ({ row }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: row.original.trip_count || 0 })
},
{
Header: __("Status", "yatra"),
accessor: "status",
Cell: ({ row }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: row.original.status })
},
{
Header: __("SEO Title", "yatra"),
accessor: "metadata.seo_title",
Cell: ({ row }) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: ((_a = row.original.metadata) == null ? void 0 : _a.seo_title) || "" });
}
},
{
Header: __("SEO Description", "yatra"),
accessor: "metadata.seo_description",
Cell: ({ row }) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: ((_a = row.original.metadata) == null ? void 0 : _a.seo_description) || "" });
}
},
{
Header: __("SEO Keywords", "yatra"),
accessor: "metadata.seo_keywords",
Cell: ({ row }) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: ((_a = row.original.metadata) == null ? void 0 : _a.seo_keywords) || "" });
}
},
{
Header: __("Created At", "yatra"),
accessor: "created_at",
Cell: ({ row }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: row.original.created_at })
},
{
Header: __("Updated At", "yatra"),
accessor: "updated_at",
Cell: ({ row }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: row.original.updated_at })
},
{
Header: __("Created By", "yatra"),
accessor: "created_by_name",
Cell: ({ row }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: row.original.created_by_name || "" })
},
{
Header: __("Updated By", "yatra"),
accessor: "updated_by_name",
Cell: ({ row }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: row.original.updated_by_name || "" })
}
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[visibleColumns]
);
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
localStorage.setItem(
"yatra-activities-columns-v2",
JSON.stringify(newVisibleColumns)
);
};
reactExports.useEffect(() => {
const handleClickOutside = (event) => {
const target2 = event.target;
if (target2.closest("[data-dropdown-trigger]") || target2.closest("[data-dropdown-content]") || target2.closest("[data-columns-trigger]") || target2.closest("[data-columns-content]")) {
return;
}
setOpenDropdown(null);
setShowColumnsDropdown(false);
};
if (openDropdown !== null || showColumnsDropdown) {
document.addEventListener("click", handleClickOutside);
return () => document.removeEventListener("click", handleClickOutside);
}
}, [openDropdown, showColumnsDropdown]);
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const { data: statsData } = useQuery({
queryKey: ["activities-stats"],
queryFn: async () => {
try {
const response = await apiClient.get("/activities/stats");
return response;
} catch (error2) {
return { all: 0, publish: 0, draft: 0, trash: 0 };
}
},
enabled: can("yatra_view_trips")
});
const { data, isLoading, error } = useQuery({
queryKey: ["activities", queryParams],
queryFn: async () => {
try {
const response = await apiClient.get("/activities", {
params: queryParams
});
return response;
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to load activities", "yatra"),
"error"
);
throw error2;
}
},
enabled: can("yatra_view_trips")
});
const { data: settings2 } = useQuery({
queryKey: ["settings"],
queryFn: async () => {
try {
const response = await fetchSettings();
return response;
} catch (error2) {
return null;
}
},
enabled: can("yatra_access_admin"),
staleTime: 5 * 60 * 1e3
// Cache for 5 minutes
});
const activities = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 10);
const errorContext = getErrorContext(error);
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: statsData.all ?? 0,
publish: statsData.publish ?? 0,
draft: statsData.draft ?? 0,
trash: statsData.trash ?? 0
};
}
return {
all: 0,
publish: 0,
draft: 0,
trash: 0
};
}, [statsData]);
const bulkMutation = useMutation({
mutationFn: async ({
action,
ids
}) => {
return await apiClient.post("/activities/bulk", { action, ids });
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["activities"] });
queryClient2.invalidateQueries({ queryKey: ["activities-stats"] });
showToast(__("Bulk action completed successfully", "yatra"), "success");
setSelectedIds([]);
setBulkAction("");
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to perform bulk action", "yatra"),
"error"
);
}
});
const handleEdit = (activity2) => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=activities&action=edit&id=${activity2.id}`;
};
const handleView = async (activity2) => {
const activitySlug = activity2.slug || "";
const { plainUrl, prettyUrl } = buildYatraSinglePublicUrls({
entity: "activity",
slug: activitySlug,
bases: settings2
});
if (isWordPressPlainPermalink()) {
if (!activitySlug) {
showToast(__("Activity slug is missing", "yatra"), "error");
return;
}
window.open(plainUrl, "_blank", "noopener,noreferrer");
return;
}
let apiPermalink = (activity2 == null ? void 0 : activity2.permalink) || (activity2 == null ? void 0 : activity2.url);
if (!apiPermalink && activity2.id) {
try {
const detail = await apiClient.get(`/activities/${activity2.id}`);
apiPermalink = (detail == null ? void 0 : detail.permalink) || (detail == null ? void 0 : detail.url) || apiPermalink;
} catch (e) {
}
}
if (apiPermalink) {
window.open(apiPermalink, "_blank", "noopener,noreferrer");
return;
}
if (!activitySlug) {
showToast(__("Activity slug is missing", "yatra"), "error");
return;
}
window.open(prettyUrl, "_blank", "noopener,noreferrer");
};
const handlePermanentDelete = (activity2) => {
setPermanentDeleteConfirm({ isOpen: true, activity: activity2 });
};
const confirmPermanentDelete = () => {
if (permanentDeleteConfirm.activity) {
bulkMutation.mutate({
action: "delete",
ids: [permanentDeleteConfirm.activity.id]
});
setPermanentDeleteConfirm({ isOpen: false, activity: null });
}
};
const confirmIndividualAction = () => {
if (individualActionConfirm.activity) {
const action = individualActionConfirm.action === "restore" ? "restore" : "trash";
bulkMutation.mutate({
action,
ids: [individualActionConfirm.activity.id]
});
setIndividualActionConfirm({ isOpen: false, action: "", activity: null });
}
};
const handleCreateActivity = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=activities&action=create`;
};
reactExports.useEffect(() => {
setSelectedIds(
(prev) => prev.filter(
(id) => activities.some((activity2) => activity2.id === id)
)
);
}, [activities]);
const handleBulkApply = () => {
if (!bulkAction) {
showToast(__("Select a bulk action first.", "yatra"), "warning");
return;
}
if (selectedIds.length === 0) {
showToast(__("Select at least one activity.", "yatra"), "warning");
return;
}
bulkMutation.mutate({ action: bulkAction, ids: selectedIds });
};
const viewFilters = [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all ?? 0 },
{
key: "publish",
label: __("Published", "yatra"),
count: statusCounts.publish ?? 0
},
{
key: "draft",
label: __("Draft", "yatra"),
count: statusCounts.draft ?? 0
},
{
key: "trash",
label: __("Trash", "yatra"),
count: statusCounts.trash ?? 0
}
];
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("name");
setSortOrder("asc");
setPage(1);
setSelectedIds([]);
setBulkAction("");
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder(field === "id" ? "desc" : "asc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "id" || sortOrder !== "desc";
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: permanentDeleteConfirm.isOpen,
onClose: () => setPermanentDeleteConfirm({ isOpen: false, activity: null }),
onConfirm: confirmPermanentDelete,
title: __("Delete Activity Permanently", "yatra"),
message: permanentDeleteConfirm.activity ? __(
'Are you sure you want to permanently delete "{name}"? This action cannot be undone.',
"yatra"
).replace("{name}", permanentDeleteConfirm.activity.name) : __(
"Are you sure you want to permanently delete this activity? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete Permanently", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: bulkMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: individualActionConfirm.isOpen,
onClose: () => setIndividualActionConfirm({
isOpen: false,
action: "",
activity: null
}),
onConfirm: confirmIndividualAction,
title: individualActionConfirm.action === "trash" ? __("Move to Trash", "yatra") : __("Restore Activity", "yatra"),
message: individualActionConfirm.activity ? individualActionConfirm.action === "trash" ? __(
'Are you sure you want to move "{name}" to trash?',
"yatra"
).replace("{name}", individualActionConfirm.activity.name) : __(
'Are you sure you want to restore "{name}"?',
"yatra"
).replace("{name}", individualActionConfirm.activity.name) : individualActionConfirm.action === "trash" ? __(
"Are you sure you want to move this activity to trash?",
"yatra"
) : __("Are you sure you want to restore this activity?", "yatra"),
confirmText: individualActionConfirm.action === "trash" ? __("Move to Trash", "yatra") : __("Restore", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "warning",
isLoading: bulkMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Activities", "yatra"),
description: __(
"Manage your travel activities and experiences",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateActivity,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Activity", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ value: "all", label: __("All Status", "yatra") },
{ value: "publish", label: __("Published", "yatra") },
{ value: "draft", label: __("Draft", "yatra") },
{ value: "trash", label: __("Trash", "yatra") }
],
sortBy: sortBy2,
onSortByChange: setSortBy,
sortOrder,
onSortOrderChange: setSortOrder,
sortOptions: [
{ value: "name", label: __("Name", "yatra") },
{ value: "status", label: __("Status", "yatra") },
{ value: "created_at", label: __("Created At", "yatra") },
{ value: "updated_at", label: __("Updated At", "yatra") }
],
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search activities...", "yatra")
}
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
!error && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: viewFilters,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "name",
label: __("Activity", "yatra"),
visible: visibleColumns.name
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description
},
{
key: "trips",
label: __("Trips", "yatra"),
visible: visibleColumns.trips
},
{
key: "seo_title",
label: __("SEO Title", "yatra"),
visible: visibleColumns.seo_title
},
{
key: "seo_description",
label: __("SEO Description", "yatra"),
visible: visibleColumns.seo_description
},
{
key: "seo_keywords",
label: __("SEO Keywords", "yatra"),
visible: visibleColumns.seo_keywords
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "created_at",
label: __("Created Date", "yatra"),
visible: visibleColumns.created_at
},
{
key: "updated_at",
label: __("Updated Date", "yatra"),
visible: visibleColumns.updated_at
},
{
key: "created_by_name",
label: __("Created By", "yatra"),
visible: visibleColumns.created_by_name
},
{
key: "updated_by_name",
label: __("Updated By", "yatra"),
visible: visibleColumns.updated_by_name
}
],
onToggleColumn: toggleColumn,
bulkMutationPending: bulkMutation.isPending,
totalItems: activities.length,
bulkActionOptions: getDefaultBulkStatusOptions(statusFilter)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: activities,
columns: [
{
key: "name",
label: __("Activity", "yatra"),
sortable: true,
visible: visibleColumns.name,
render: (activity2) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0", children: activity2.icon ? activity2.icon.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: activity2.icon.value,
alt: activity2.name,
className: "w-full h-full object-cover rounded-lg"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: activity2.icon.value,
provider: activity2.icon.provider ?? "yatra",
className: "w-5 h-5 text-blue-600 dark:text-blue-400"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 flex items-center justify-center text-xs font-semibold", children: activity2.name.charAt(0).toUpperCase() }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=activities&action=edit&id=${activity2.id}`,
className: "font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors cursor-pointer",
children: activity2.name
}
),
can("yatra_view_trips") && activity2.status !== "trash" && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: (e) => {
e.stopPropagation();
handleView(activity2);
},
className: "ml-1 inline-flex items-center justify-center rounded-full p-1 text-gray-400 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800",
title: __(
"View activity in new tab",
"yatra"
),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3.5 h-3.5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: activity2.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[11px] text-gray-400 dark:text-gray-500", children: [
"(",
__("ID:", "yatra"),
" ",
activity2.id,
")"
] })
] })
] })
] });
}
},
{
key: "trips",
label: __("Trips", "yatra"),
sortable: false,
visible: visibleColumns.trips,
render: (activity2) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: typeof activity2.trip_count === "number" ? activity2.trip_count : 0 })
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description,
render: (activity2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `block max-w-[300px] truncate ${activity2.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"}`,
title: activity2.description || "",
children: activity2.description || __("No description", "yatra")
}
)
},
{
key: "seo_title",
label: __("SEO Title", "yatra"),
visible: visibleColumns.seo_title,
render: (activity2) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: activity2.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: ((_a = activity2.metadata) == null ? void 0 : _a.seo_title) || __("Not set", "yatra")
}
);
}
},
{
key: "seo_description",
label: __("SEO Description", "yatra"),
visible: visibleColumns.seo_description,
render: (activity2) => {
var _a, _b;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: activity2.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
title: ((_a = activity2.metadata) == null ? void 0 : _a.seo_description) || "",
children: ((_b = activity2.metadata) == null ? void 0 : _b.seo_description) ? activity2.metadata.seo_description.length > 50 ? activity2.metadata.seo_description.substring(
0,
50
) + "..." : activity2.metadata.seo_description : __("Not set", "yatra")
}
);
}
},
{
key: "seo_keywords",
label: __("SEO Keywords", "yatra"),
visible: visibleColumns.seo_keywords,
render: (activity2) => {
var _a, _b;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: activity2.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
title: ((_a = activity2.metadata) == null ? void 0 : _a.seo_keywords) || "",
children: ((_b = activity2.metadata) == null ? void 0 : _b.seo_keywords) ? activity2.metadata.seo_keywords.length > 30 ? activity2.metadata.seo_keywords.substring(0, 30) + "..." : activity2.metadata.seo_keywords : __("Not set", "yatra")
}
);
}
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (activity2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${activity2.status === "trash" || statusFilter === "trash" ? "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" : activity2.status === "publish" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"}`,
children: activity2.status === "trash" || statusFilter === "trash" ? __("Trash", "yatra") : activity2.status === "publish" ? __("Published", "yatra") : __("Draft", "yatra")
}
)
},
{
key: "created_at",
label: __("Created Date", "yatra"),
sortable: true,
visible: visibleColumns.created_at,
render: (activity2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: activity2.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: new Date(activity2.created_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
}
)
}
)
},
{
key: "updated_at",
label: __("Updated Date", "yatra"),
sortable: true,
visible: visibleColumns.updated_at,
render: (activity2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: activity2.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: new Date(activity2.updated_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
}
)
}
)
},
{
key: "created_by_name",
label: __("Created By", "yatra"),
visible: visibleColumns.created_by_name,
render: (activity2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: activity2.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: activity2.created_by_name || __("Unknown", "yatra")
}
)
},
{
key: "updated_by_name",
label: __("Updated By", "yatra"),
visible: visibleColumns.updated_by_name,
render: (activity2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: activity2.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: activity2.updated_by_name || __("Unknown", "yatra")
}
)
}
],
actions: [
{
key: "view",
label: __("View", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (activity2) => {
var _a;
const activityUrl = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/activity/${activity2.slug}`;
window.open(activityUrl, "_blank");
},
condition: () => true
// Always show view action
},
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: handleEdit,
condition: () => can("yatra_edit_trips")
},
{
key: "restore",
label: __("Restore", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4" }),
onClick: (activity2) => {
bulkMutation.mutate({
action: "restore",
ids: [activity2.id]
});
},
condition: (activity2) => (activity2.status === "trash" || statusFilter === "trash") && can("yatra_edit_trips")
},
{
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (activity2) => {
bulkMutation.mutate({
action: "trash",
ids: [activity2.id]
});
},
condition: (activity2) => activity2.status !== "trash" && statusFilter !== "trash" && can("yatra_edit_trips")
},
{
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: handlePermanentDelete,
condition: (activity2) => (activity2.status === "trash" || statusFilter === "trash") && can("yatra_delete_trips"),
variant: "destructive"
}
],
isLoading,
isError: !!error,
errorText: __("Error loading activities", "yatra"),
errorDescription: __(
"We couldn’t connect to the activities service. Please refresh or try again shortly.",
"We couldn’t connect to the activities service. Please refresh or try again shortly."
),
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["activities"] }),
errorDetails: errorContext.details,
errorRequestInfo: errorContext.requestInfo,
emptyText: __("No activities found", "yatra"),
emptyDescription: hasFilters ? __(
"Try adjusting your filters to see more results.",
"yatra"
) : __(
"Get started by creating your first activity.",
"yatra"
),
onCreateClick: can("yatra_edit_trips") ? handleCreateActivity : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(
selectedIds.filter((selectedId) => selectedId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(activities.map((a2) => a2.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: activities.length > 0 && selectedIds.length === activities.length,
getItemId: (activity2) => activity2.id,
getItemStatus: (activity2) => activity2.status,
statusFilter,
skeletonRows: 5
},
`activities-table-${JSON.stringify(visibleColumns)}`
) }) })
] }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: (newPage) => setPage(newPage),
itemName: __("activities", "yatra")
}
) })
] });
};
function prepareWordPressMediaFrameOpen() {
var _a;
const active = document.activeElement;
if (active instanceof HTMLElement) {
active.blur();
}
(_a = document.getElementById("wpwrap")) == null ? void 0 : _a.removeAttribute("aria-hidden");
}
const useWordPressMedia = (options = {}) => {
const {
title = "Select or Upload Image",
buttonText = "Use this image",
multiple = false,
library = { type: "image" }
} = options;
const openMediaLibrary = reactExports.useCallback(
(callback) => {
const getWpMedia = () => {
if (typeof window.yatraWpMedia === "function") {
return window.yatraWpMedia;
}
try {
const wpMedia2 = new Function(
'return (typeof wp !== "undefined" && typeof wp.media === "function") ? wp.media : null'
)();
if (wpMedia2) {
return wpMedia2;
}
} catch (e) {
}
try {
if (typeof window.wp === "object" && window.wp !== null && typeof window.wp.media === "function") {
return window.wp.media;
}
} catch (e) {
}
try {
const wpMedia = eval(
'(typeof wp !== "undefined" && typeof wp.media === "function") ? wp.media : null'
);
if (wpMedia) {
return wpMedia;
}
} catch (e) {
}
return null;
};
const ensureMediaLibrary = (retries = 50, delay = 100) => {
return new Promise((resolve, reject) => {
const checkMedia = () => {
const wpMedia2 = getWpMedia();
if (wpMedia2 && typeof wpMedia2 === "function") {
resolve(wpMedia2);
return;
}
if (retries > 0) {
retries--;
setTimeout(checkMedia, delay);
} else {
reject(
new Error(
__(
"WordPress media library is not available. Please refresh the page.",
"yatra"
)
)
);
}
};
if (typeof window.jQuery !== "undefined") {
window.jQuery(document).ready(() => {
setTimeout(checkMedia, 500);
});
} else if (document.readyState === "complete" || document.readyState === "interactive") {
setTimeout(checkMedia, 500);
} else {
document.addEventListener("DOMContentLoaded", () => {
setTimeout(checkMedia, 500);
});
setTimeout(checkMedia, 1e3);
}
});
};
ensureMediaLibrary().then((wpMedia2) => {
const frame = wpMedia2({
title,
button: {
text: buttonText
},
multiple,
library
});
if (!frame) {
throw new Error(__("Failed to create media frame.", "yatra"));
}
frame.on("select", () => {
const selection = frame.state().get("selection");
const attachments = selection.toJSON();
if (multiple) {
const formattedAttachments = attachments.map(
(attachment) => ({
id: attachment.id,
url: attachment.url,
alt: attachment.alt || "",
title: attachment.title || "",
caption: attachment.caption || "",
description: attachment.description || "",
sizes: attachment.sizes || {}
})
);
callback(formattedAttachments);
} else {
const attachment = attachments[0];
if (attachment) {
const formattedAttachment = {
id: attachment.id,
url: attachment.url,
alt: attachment.alt || "",
title: attachment.title || "",
caption: attachment.caption || "",
description: attachment.description || "",
sizes: attachment.sizes || {}
};
callback(formattedAttachment);
}
}
});
prepareWordPressMediaFrameOpen();
frame.open();
}).catch((error) => {
console.error("Error opening WordPress media library:", error);
alert(
error.message || __(
"WordPress media library is not available. Please refresh the page.",
"yatra"
)
);
});
},
[title, buttonText, multiple, library]
);
return { openMediaLibrary };
};
const categoryLabels = {
activity: "Activities",
travel: "Travel",
food: "Food & Dining",
accommodation: "Accommodation",
transport: "Transportation",
general: "General",
media: "Media"
};
const IconPicker = ({
value,
onChange,
label,
helpText,
error,
required = false,
allowImageUpload = true,
allowIconSelection = true,
size = "md",
className = ""
}) => {
const [isOpen, setIsOpen] = reactExports.useState(false);
const [activeTab, setActiveTab] = reactExports.useState("icons");
const [iconLibrary, setIconLibrary] = reactExports.useState("yatra");
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [selectedCategory, setSelectedCategory] = reactExports.useState("all");
const yatraIconOptions = reactExports.useMemo(() => getIconOptions(), []);
const [imagePreview, setImagePreview] = reactExports.useState(
(value == null ? void 0 : value.type) === "image" ? value.value.startsWith("http") ? value.value : null : null
);
reactExports.useEffect(() => {
var _a;
if ((value == null ? void 0 : value.type) === "image") {
if (value.value.startsWith("http://") || value.value.startsWith("https://")) {
setImagePreview(value.value);
} else if (/^\d+$/.test(value.value) && ((_a = window.yatraAdmin) == null ? void 0 : _a.apiUrl)) {
const apiUrl = window.yatraAdmin.apiUrl.replace("/yatra/v1", "");
fetch(`${apiUrl}/wp/v2/media/${value.value}`).then((res) => res.json()).then((data) => {
if (data && data.source_url) {
setImagePreview(data.source_url);
}
}).catch(() => {
});
}
} else {
setImagePreview(null);
}
}, [value]);
const { openMediaLibrary: openMediaLibrary2 } = useWordPressMedia({
title: __("Select or Upload Image", "yatra"),
buttonText: __("Use this image", "yatra"),
multiple: false,
library: { type: "image" }
});
const sizeClasses2 = {
sm: "w-8 h-8",
md: "w-12 h-12",
lg: "w-16 h-16"
};
const iconSizeClasses = {
sm: "w-4 h-4",
md: "w-6 h-6",
lg: "w-8 h-8"
};
const filteredYatraIcons = reactExports.useMemo(() => {
const q = searchTerm.toLowerCase();
return yatraIconOptions.filter((icon) => {
const matchesSearch = icon.label.toLowerCase().includes(q) || icon.name.toLowerCase().includes(q);
const matchesCategory = selectedCategory === "all" || icon.category === selectedCategory;
return matchesSearch && matchesCategory;
});
}, [yatraIconOptions, searchTerm, selectedCategory]);
const faSourceList = iconLibrary === "fa-regular" ? FA_FREE_REGULAR_PICKER : FA_FREE_SOLID_PICKER;
const filteredFaIcons = reactExports.useMemo(() => {
const q = searchTerm.toLowerCase();
return faSourceList.filter(
(row) => row.label.toLowerCase().includes(q) || row.name.toLowerCase().includes(q)
);
}, [faSourceList, searchTerm]);
const categories = reactExports.useMemo(
() => [
"all",
...Array.from(new Set(yatraIconOptions.map((icon) => icon.category)))
],
[yatraIconOptions]
);
const selectYatraIcon = (name) => {
onChange({ type: "icon", value: name, provider: "yatra" });
setIsOpen(false);
setSearchTerm("");
};
const selectFaIcon = (name, style) => {
onChange({ type: "icon", value: name, provider: style });
setIsOpen(false);
setSearchTerm("");
};
const handleWordPressMediaSelect = reactExports.useCallback(() => {
openMediaLibrary2((attachment) => {
if (attachment && !Array.isArray(attachment)) {
const attachmentId = String(attachment.id);
setImagePreview(attachment.url);
onChange({ type: "image", value: attachmentId });
setIsOpen(false);
}
});
}, [openMediaLibrary2, onChange]);
const handleRemoveImage = () => {
setImagePreview(null);
onChange(null);
};
const handleImageUrlChange = (url) => {
if (url.trim()) {
setImagePreview(url);
onChange({ type: "image", value: url.trim() });
} else {
handleRemoveImage();
}
};
const selectionSummary = () => {
if (!value) {
return __("Select Icon or Upload Image", "yatra");
}
if (value.type === "image") {
return __("Custom Image", "yatra");
}
const p = value.provider ?? "yatra";
if (p === "fa-solid") {
return `${__("Font Awesome Solid", "yatra")}: ${value.value}`;
}
if (p === "fa-regular") {
return `${__("Font Awesome Regular", "yatra")}: ${value.value}`;
}
const meta = yatraIconOptions.find((o) => o.name === value.value);
return `${__("Yatra", "yatra")}: ${(meta == null ? void 0 : meta.label) || value.value}`;
};
const renderIconPreview = () => {
if (!value || value.type !== "icon") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { className: `${iconSizeClasses[size]} text-gray-400` });
}
const p = value.provider ?? "yatra";
if (p === "fa-solid" || p === "fa-regular") {
const prefix2 = p === "fa-regular" ? "fa-regular" : "fa-solid";
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"i",
{
className: `${prefix2} fa-${value.value} ${iconSizeClasses[size]} text-gray-700 dark:text-gray-300 inline-flex items-center justify-center`,
"aria-hidden": "true"
}
);
}
const opt = yatraIconOptions.find((o) => o.name === value.value);
if (opt == null ? void 0 : opt.svg) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center justify-center ${iconSizeClasses[size]} text-gray-700 dark:text-gray-300 [&>svg]:w-full [&>svg]:h-full`,
dangerouslySetInnerHTML: { __html: opt.svg }
}
);
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { className: `${iconSizeClasses[size]} text-gray-400` });
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `space-y-2 ${className}`, children: [
label && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
label,
" ",
required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
helpText && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: helpText }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `${sizeClasses2[size]} rounded-lg border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center bg-gray-50 dark:bg-gray-800 overflow-hidden`,
children: (value == null ? void 0 : value.type) === "image" && imagePreview ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: imagePreview,
alt: __("Selected", "yatra"),
className: "w-full h-full object-cover"
}
) : renderIconPreview()
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: () => setIsOpen(!isOpen),
className: "w-full justify-start",
children: selectionSummary()
}
) }),
value && /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "ghost",
size: "icon",
onClick: () => {
onChange(null);
setImagePreview(null);
},
className: "text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" })
}
)
] }),
error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Modal,
{
isOpen,
onClose: () => setIsOpen(false),
title: __("Select Icon or Upload Image", "yatra"),
size: "xl",
showCloseButton: true,
customZIndex: 99999,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex border-b border-gray-200 dark:border-gray-700", children: [
allowIconSelection && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => setActiveTab("icons"),
className: `flex-1 px-4 py-3 text-sm font-medium transition-colors ${activeTab === "icons" ? "border-b-2 border-blue-600 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-4 h-4 inline mr-2" }),
__("Icons", "yatra")
]
}
),
allowImageUpload && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => setActiveTab("upload"),
className: `flex-1 px-4 py-3 text-sm font-medium transition-colors ${activeTab === "upload" ? "border-b-2 border-blue-600 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 inline mr-2" }),
__("Upload Image", "yatra")
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 max-h-[60vh] overflow-y-auto", children: [
activeTab === "icons" && allowIconSelection && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-2 border-b border-gray-100 dark:border-gray-800 pb-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: iconLibrary === "yatra" ? "info" : "outline",
className: "cursor-pointer",
onClick: () => setIconLibrary("yatra"),
children: __("Yatra library", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: iconLibrary === "fa-solid" ? "info" : "outline",
className: "cursor-pointer",
onClick: () => setIconLibrary("fa-solid"),
children: __("Font Awesome Solid", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: iconLibrary === "fa-regular" ? "info" : "outline",
className: "cursor-pointer",
onClick: () => setIconLibrary("fa-regular"),
children: __("Font Awesome Regular", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search icons...", "yatra"),
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
className: "pl-9"
}
)
] }),
(iconLibrary === "fa-solid" || iconLibrary === "fa-regular") && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: __(
"Tip: use search to filter the full Font Awesome Free library (1000+ solid, 150+ regular).",
"yatra"
) }),
iconLibrary === "yatra" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: categories.map((category) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: selectedCategory === category ? "info" : "outline",
className: "cursor-pointer",
onClick: () => setSelectedCategory(category),
children: category === "all" ? __("All", "yatra") : categoryLabels[category] || category
},
category
)) }),
iconLibrary === "yatra" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 gap-3", children: filteredYatraIcons.map((icon) => {
const isSelected = (value == null ? void 0 : value.type) === "icon" && (value.provider ?? "yatra") === "yatra" && value.value === icon.name;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => selectYatraIcon(icon.name),
className: `relative p-3 rounded-lg border-2 transition-all hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 ${isSelected ? "border-blue-600 bg-blue-50 dark:bg-blue-900/20" : "border-gray-200 dark:border-gray-700"}`,
title: icon.label,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "w-6 h-6 mx-auto text-gray-700 dark:text-gray-300 flex items-center justify-center [&>svg]:w-6 [&>svg]:h-6",
dangerouslySetInnerHTML: { __html: icon.svg }
}
),
isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-1 right-1 bg-blue-600 rounded-full p-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-3 h-3 text-white" }) })
]
},
icon.name
);
}) }),
(iconLibrary === "fa-solid" || iconLibrary === "fa-regular") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 gap-3", children: filteredFaIcons.map((row) => {
const isSelected = (value == null ? void 0 : value.type) === "icon" && value.provider === row.style && value.value === row.name;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => selectFaIcon(row.name, row.style),
className: `relative p-3 rounded-lg border-2 transition-all hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 ${isSelected ? "border-blue-600 bg-blue-50 dark:bg-blue-900/20" : "border-gray-200 dark:border-gray-700"}`,
title: row.label,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"i",
{
className: `${row.style} fa-${row.name} w-6 h-6 mx-auto text-gray-700 dark:text-gray-300 inline-flex items-center justify-center`,
"aria-hidden": "true"
}
),
isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-1 right-1 bg-blue-600 rounded-full p-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-3 h-3 text-white" }) })
]
},
`${row.style}-${row.name}`
);
}) }),
iconLibrary === "yatra" && filteredYatraIcons.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: __("No icons found", "yatra") }),
(iconLibrary === "fa-solid" || iconLibrary === "fa-regular") && filteredFaIcons.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: __("No icons found", "yatra") })
] }),
activeTab === "upload" && allowImageUpload && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6 p-2", children: imagePreview ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative group", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative overflow-hidden rounded-xl border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: imagePreview,
alt: __("Preview", "yatra"),
className: "w-full h-64 object-contain"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
size: "sm",
onClick: handleWordPressMediaSelect,
className: "bg-white/90 hover:bg-white text-gray-900 border-white",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 mr-2" }),
__("Change Image", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "destructive",
size: "sm",
onClick: handleRemoveImage,
className: "bg-red-500/90 hover:bg-red-600",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 mr-2" }),
__("Remove", "yatra")
]
}
)
] })
] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
onClick: handleWordPressMediaSelect,
className: "group cursor-pointer border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 rounded-xl p-12 text-center transition-all duration-200 hover:bg-blue-50/50 dark:hover:bg-blue-900/10",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center group-hover:scale-110 transition-transform", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-8 h-8 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-base font-semibold text-gray-900 dark:text-white", children: __("Upload Image", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Click to open WordPress Media Library", "yatra") })
] })
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full border-t border-gray-200 dark:border-gray-700" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-white dark:bg-gray-900 px-3 text-gray-500 dark:text-gray-400", children: __("Or", "yatra") }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: __("Enter Image URL", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "url",
placeholder: __("https://example.com/image.png", "yatra"),
value: (value == null ? void 0 : value.type) === "image" ? value.value : "",
onChange: (e) => handleImageUrlChange(e.target.value),
className: "h-11"
}
)
] })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4 flex justify-end gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: () => setIsOpen(false),
children: __("Close", "yatra")
}
) })
]
}
)
] });
};
const RichTextEditor = ({
value,
onChange,
label,
placeholder,
helperText,
disabled = false,
minHeight = 280,
maxHeight = 600
}) => {
const modules = reactExports.useMemo(
() => ({
toolbar: [
[{ header: [1, 2, 3, false] }],
["bold", "italic", "underline", "strike"],
[{ list: "ordered" }, { list: "bullet" }],
[{ align: [] }],
["link"],
["clean"]
]
}),
[]
);
const formats = [
"header",
"bold",
"italic",
"underline",
"strike",
"list",
"bullet",
"align",
"link"
];
const handleChange = (content) => {
const normalized = content === "
" ? "" : content;
onChange(normalized);
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
label && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: label }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `yatra-quill-editor ${disabled ? "opacity-60 cursor-not-allowed" : ""}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
ReactQuill,
{
theme: "snow",
value: value || "",
onChange: handleChange,
modules,
formats,
placeholder,
readOnly: disabled,
style: {
minHeight: `${minHeight}px`,
maxHeight: `${maxHeight}px`
}
}
)
}
),
helperText && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: helperText })
] });
};
function restRoot() {
var _a;
const raw = ((_a = window.yatraAdmin) == null ? void 0 : _a.restUrl) || "/wp-json/";
return raw.endsWith("/") ? raw : `${raw}/`;
}
function parsePageTitle(payload) {
var _a;
if (!payload || typeof payload !== "object") {
return "";
}
const p = payload;
if (typeof ((_a = p.title) == null ? void 0 : _a.rendered) === "string") {
return p.title.rendered.replace(/<[^>]+>/g, "").trim();
}
return "";
}
function parseLandingPageIdFromMetadata(metadata) {
const raw = metadata == null ? void 0 : metadata.landing_page_id;
if (raw == null || raw === "") {
return null;
}
const n = typeof raw === "number" ? raw : parseInt(String(raw).trim(), 10);
return Number.isFinite(n) && n > 0 ? n : null;
}
async function fetchPublishedPagePermalink(pageId) {
var _a;
if (!pageId) {
return null;
}
const nonce = ((_a = window.yatraAdmin) == null ? void 0 : _a.nonce) || "";
const url = `${restRoot()}wp/v2/pages/${pageId}?context=embed`;
const res = await fetch(url, {
credentials: "same-origin",
headers: {
"X-WP-Nonce": nonce,
Accept: "application/json"
}
});
if (!res.ok) {
return null;
}
const data = await res.json();
if (typeof (data == null ? void 0 : data.link) !== "string" || data.link === "") {
return null;
}
return data.link;
}
async function fetchPublishedPagesFirstPage() {
var _a;
const nonce = ((_a = window.yatraAdmin) == null ? void 0 : _a.nonce) || "";
const params = new URLSearchParams({
per_page: "100",
orderby: "title",
order: "asc",
status: "publish",
context: "embed"
});
const res = await fetch(`${restRoot()}wp/v2/pages?${params}`, {
credentials: "same-origin",
headers: {
"X-WP-Nonce": nonce,
Accept: "application/json"
}
});
if (!res.ok) {
return { items: [], total: null };
}
const data = await res.json();
const items = Array.isArray(data) ? data : [];
const totalRaw = res.headers.get("X-WP-Total");
const total = totalRaw !== null && totalRaw !== "" ? parseInt(totalRaw, 10) : null;
return { items, total: Number.isFinite(total) ? total : null };
}
async function fetchSinglePublishedPage(pageId) {
var _a;
const nonce = ((_a = window.yatraAdmin) == null ? void 0 : _a.nonce) || "";
const res = await fetch(`${restRoot()}wp/v2/pages/${pageId}?context=embed`, {
credentials: "same-origin",
headers: {
"X-WP-Nonce": nonce,
Accept: "application/json"
}
});
if (!res.ok) {
return null;
}
const data = await res.json();
if (!data || typeof data.id !== "number") {
return null;
}
return data;
}
function sortPagesByTitle(list) {
return [...list].sort((a2, b) => {
const ta = parsePageTitle(a2).toLowerCase();
const tb = parsePageTitle(b).toLowerCase();
return ta.localeCompare(tb);
});
}
function mergePageUnique(list, extra) {
const id = Number(extra.id);
if (!Number.isFinite(id) || id <= 0) {
return list;
}
if (list.some((p) => Number(p.id) === id)) {
return list;
}
return sortPagesByTitle([...list, extra]);
}
function ClassificationLandingPageField({
value,
onChange,
selectId = "yatra-classification-landing-page"
}) {
var _a;
const moduleOn = Boolean(
typeof window !== "undefined" && ((_a = window.yatraAdmin) == null ? void 0 : _a.customLandingPagesModuleEnabled)
);
const [pages, setPages] = reactExports.useState([]);
const [loading, setLoading] = reactExports.useState(true);
const [loadError, setLoadError] = reactExports.useState(false);
const [totalPublished, setTotalPublished] = reactExports.useState(null);
reactExports.useEffect(() => {
if (!moduleOn) {
return;
}
let cancelled = false;
void (async () => {
setLoading(true);
setLoadError(false);
try {
const { items, total } = await fetchPublishedPagesFirstPage();
if (cancelled) {
return;
}
setPages(sortPagesByTitle(items));
setTotalPublished(total);
} catch {
if (!cancelled) {
setLoadError(true);
setPages([]);
}
} finally {
if (!cancelled) {
setLoading(false);
}
}
})();
return () => {
cancelled = true;
};
}, [moduleOn]);
reactExports.useEffect(() => {
if (!moduleOn || !value) {
return;
}
if (pages.some((p) => Number(p.id) === value)) {
return;
}
let cancelled = false;
void (async () => {
const one2 = await fetchSinglePublishedPage(value);
if (cancelled || !one2) {
return;
}
setPages((prev) => mergePageUnique(prev, one2));
})();
return () => {
cancelled = true;
};
}, [moduleOn, value, pages]);
const selectValue = reactExports.useMemo(
() => value && value > 0 ? String(value) : "",
[value]
);
if (!moduleOn) {
return null;
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Custom landing page", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: __(
"Public catalog links and redirects use this WordPress page URL instead of the default Yatra taxonomy path.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: selectId,
className: "block text-sm font-medium text-gray-700 dark:text-gray-300",
children: __("WordPress page", "yatra")
}
),
loading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 py-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Loading pages…", "yatra")
] }) : loadError ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: __(
"Could not load pages. Check that you are logged in and try again.",
"yatra"
) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: selectId,
className: "w-full h-10",
value: selectValue,
onChange: (e) => {
const v = e.target.value;
if (v === "") {
onChange(null);
return;
}
const n = parseInt(v, 10);
onChange(Number.isFinite(n) && n > 0 ? n : null);
},
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: __("— Default Yatra URL (no custom page) —", "yatra") }),
pages.map((p) => {
const id = Number(p.id);
const label = parsePageTitle(p) || __("(no title)", "yatra");
return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: String(id), children: label }, id);
})
]
}
),
totalPublished !== null && totalPublished > 100 && !loading && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: sprintf(
// translators: %d: total number of published pages on the site.
__(
"Showing the first 100 published pages (of %d). Change the selection in WordPress → Pages if yours is not listed.",
"yatra"
),
totalPublished
) })
] })
] })
] });
}
const ActivityForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
icon: null,
status: "publish",
seo_title: "",
seo_description: "",
seo_keywords: "",
landing_page_id: null
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const [isSlugEditable, setIsSlugEditable] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const activityId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const isEditMode = action === "edit" && activityId !== null;
const { data: activityData, isLoading: isLoadingActivity } = useQuery({
queryKey: ["activity", activityId],
queryFn: async () => {
if (!activityId) return null;
try {
const response = await apiClient.get(`/activities/${activityId}`);
return response;
} catch (error) {
showToast(
(error == null ? void 0 : error.message) || __("Failed to load activity", "yatra"),
"error"
);
throw error;
}
},
enabled: isEditMode && can("yatra_view_trips")
});
const { data: settings2 } = useQuery({
queryKey: ["settings"],
queryFn: async () => {
try {
const response = await fetchSettings();
return (response == null ? void 0 : response.data) || response;
} catch (error) {
return {};
}
}
});
reactExports.useEffect(() => {
var _a, _b, _c;
if (activityData && isEditMode) {
setFormData({
name: activityData.name || "",
slug: activityData.slug || "",
description: activityData.description || "",
icon: activityData.icon || null,
status: activityData.status || "draft",
seo_title: ((_a = activityData.metadata) == null ? void 0 : _a.seo_title) || "",
seo_description: ((_b = activityData.metadata) == null ? void 0 : _b.seo_description) || "",
seo_keywords: ((_c = activityData.metadata) == null ? void 0 : _c.seo_keywords) || "",
landing_page_id: parseLandingPageIdFromMetadata(
activityData.metadata
)
});
}
}, [activityData, isEditMode]);
const handleNameChange = (value) => {
if (!isEditMode && !isSlugEditable) {
const newSlug = generateSlug(value);
setFormData((prev) => ({
...prev,
name: value,
slug: newSlug
}));
} else {
setFormData((prev) => ({
...prev,
name: value
}));
}
if (errors.name) {
setErrors((prev) => ({ ...prev, name: "" }));
}
};
const handleSlugChange = (value) => {
if (isSlugEditable) {
setFormData((prev) => ({ ...prev, slug: value }));
if (errors.slug) {
setErrors((prev) => ({ ...prev, slug: "" }));
}
}
};
const handleToggleSlugEdit = () => {
if (isSlugEditable) {
const newSlug = generateSlug(formData.name);
setFormData((prev) => ({ ...prev, slug: newSlug }));
}
setIsSlugEditable(!isSlugEditable);
};
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = __("Name is required", "yatra");
}
if (!formData.slug.trim()) {
newErrors.slug = __("Slug is required", "yatra");
} else if (!/^[\p{L}\p{N}-]+$/u.test(formData.slug)) {
newErrors.slug = __(
"Slug can only contain letters, numbers, and hyphens",
"yatra"
);
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
name: data.name.trim(),
slug: data.slug.trim(),
description: data.description.trim(),
icon: data.icon,
status: data.status,
seo_title: data.seo_title.trim(),
seo_description: data.seo_description.trim(),
seo_keywords: data.seo_keywords.trim(),
landing_page_id: data.landing_page_id ?? null
};
if (isEditMode && isSlugEditable) {
payload.preserve_slug = true;
}
if (isEditMode && activityId) {
return await apiClient.put(`/activities/${activityId}`, payload);
} else {
return await apiClient.post("/activities", payload);
}
},
onSuccess: (response) => {
var _a;
queryClient2.invalidateQueries({ queryKey: ["activities"] });
queryClient2.invalidateQueries({ queryKey: ["activity", activityId] });
showToast(
isEditMode ? __("Activity updated successfully", "yatra") : __("Activity created successfully", "yatra"),
"success"
);
if (!isEditMode && (response == null ? void 0 : response.id)) {
const editUrl = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=activities&action=edit&id=${response.id}`;
setTimeout(() => {
window.location.href = editUrl;
}, 800);
} else {
setIsSubmitting(false);
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the activity", "yatra");
showToast(errorMessage, "error");
setIsSubmitting(false);
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
showToast(__("Please fix the form errors", "yatra"), "warning");
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=activities`;
};
if (isEditMode && isLoadingActivity) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) })
] })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Activity", "yatra") : __("Add New Activity", "yatra"),
description: isEditMode ? __("Update activity information", "yatra") : __("Create a new travel activity", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
),
formData.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: async () => {
var _a;
if (formData.landing_page_id && ((_a = window.yatraAdmin) == null ? void 0 : _a.customLandingPagesModuleEnabled)) {
const link2 = await fetchPublishedPagePermalink(
formData.landing_page_id
);
if (link2) {
window.open(link2, "_blank", "noopener,noreferrer");
return;
}
}
const targetUrl = buildYatraSinglePreviewUrl({
entity: "activity",
slug: formData.slug || "",
bases: settings2
});
window.open(targetUrl, "_blank", "noopener,noreferrer");
},
className: "flex items-center gap-2",
title: __("Preview activity in new tab", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
__("Preview", "yatra")
]
}
)
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Basic Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "name",
type: "text",
value: formData.name,
onChange: (e) => handleNameChange(e.target.value),
placeholder: __("Enter activity name", "yatra"),
className: errors.name ? "border-red-500" : "",
required: true
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "slug",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Slug", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "slug",
type: "text",
value: formData.slug,
onChange: (e) => handleSlugChange(e.target.value),
placeholder: __("activity-slug", "yatra"),
className: `pr-10 ${errors.slug ? "border-red-500" : ""} ${!isSlugEditable ? "bg-gray-50 dark:bg-gray-800 cursor-not-allowed" : ""}`,
disabled: !isSlugEditable,
required: true
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: handleToggleSlugEdit,
className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors rounded",
"aria-label": isSlugEditable ? __("Cancel editing slug", "yatra") : __("Edit slug", "yatra"),
children: isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-4 h-4" })
}
)
] }),
errors.slug && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: isSlugEditable ? __(
"Manually editing slug. Click X to cancel and regenerate from name.",
"yatra"
) : __(
"Auto-generated from name. Click edit icon to customize.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
RichTextEditor,
{
label: __("Description", "yatra"),
value: formData.description || "",
onChange: (value) => handleFieldChange("description", value),
placeholder: __(
"Write a rich description (supports formatting, lists, links...)",
"yatra"
),
helperText: __(
"Use formatting, bullet lists, and links to create a compelling description. HTML is supported.",
"yatra"
),
minHeight: 360,
maxHeight: 720
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ClassificationLandingPageField,
{
selectId: "yatra-activity-landing-page",
value: formData.landing_page_id,
onChange: (id) => setFormData((prev) => ({ ...prev, landing_page_id: id }))
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("SEO Settings", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_title",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Title", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "seo_title",
type: "text",
value: formData.seo_title,
onChange: (e) => handleFieldChange("seo_title", e.target.value),
placeholder: __(
"e.g., {name} Activities | Your Travel Agency",
"yatra"
),
className: "w-full"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Custom title for search engines. Use {name} as placeholder.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_description",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Description", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "seo_description",
value: formData.seo_description,
onChange: (e) => handleFieldChange("seo_description", e.target.value),
placeholder: __(
"e.g., Discover amazing {name} activities and experiences. Book your adventure today!",
"yatra"
),
rows: 3,
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Description for search engines (150-160 characters). Use {name} as placeholder.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_keywords",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Keywords", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "seo_keywords",
type: "text",
value: formData.seo_keywords,
onChange: (e) => handleFieldChange("seo_keywords", e.target.value),
placeholder: __(
"e.g., activities, adventure, {name}, travel, experiences",
"yatra"
),
className: "w-full"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Comma-separated keywords. Use {name} as placeholder.",
"yatra"
) })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Activity Icon or Image", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconPicker,
{
value: formData.icon,
onChange: (value) => handleFieldChange("icon", value),
label: __("Select Icon or Upload Image", "yatra"),
helpText: __(
"Choose a library icon or upload a custom image to visually represent this activity.",
"yatra"
),
allowImageUpload: true,
allowIconSelection: true,
size: "md"
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Activity", "yatra") : __("Create Itinerary Activity", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] }) }) }) })
] })
] }) }) })
] });
};
const Destinations = () => {
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [sortBy2, setSortBy] = reactExports.useState("id");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
const defaultColumns = {
name: true,
description: true,
trips: true,
status: true,
seo_title: false,
seo_description: false,
seo_keywords: false,
created_at: false,
updated_at: false,
created_by_name: false,
updated_by_name: false
};
const saved = localStorage.getItem("yatra_destinations_visible_columns_v2");
return saved ? { ...defaultColumns, ...JSON.parse(saved) } : defaultColumns;
});
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
destination: null
});
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
reactExports.useEffect(() => {
const handleClickOutside = (event) => {
const target2 = event.target;
if (!target2.closest("[data-columns-trigger]") && !target2.closest("[data-columns-content]")) {
setShowColumnsDropdown(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const { data: statsData } = useQuery({
queryKey: ["destinations-stats"],
queryFn: async () => {
try {
const response = await apiClient.get("/destinations/stats");
return response;
} catch (error2) {
return { all: 0, publish: 0, draft: 0, trash: 0 };
}
},
enabled: can("yatra_view_trips")
});
const { data, isLoading, error } = useQuery({
queryKey: ["destinations", queryParams],
queryFn: async () => {
try {
const response = await apiClient.get("/destinations", {
params: queryParams
});
return response;
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to load destinations", "yatra"),
"error"
);
throw error2;
}
},
enabled: can("yatra_view_trips")
});
const { data: settings2 } = useQuery({
queryKey: ["settings"],
queryFn: async () => {
try {
const response = await fetchSettings();
return response;
} catch (error2) {
return null;
}
},
enabled: can("yatra_access_admin"),
staleTime: 5 * 60 * 1e3
// Cache for 5 minutes
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/destinations/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["destinations"] });
queryClient2.invalidateQueries({ queryKey: ["destinations-stats"] });
showToast(__("Destination deleted successfully", "yatra"), "success");
setDeleteConfirm({ isOpen: false, destination: null });
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete destination", "yatra"),
"error"
);
}
});
const destinations = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 10);
const errorContext = getErrorContext(error);
const handleEdit = (destination) => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=destinations&action=edit&id=${destination.id}`;
};
const handleView = async (destination) => {
const destinationSlug = destination.slug || "";
const { plainUrl, prettyUrl } = buildYatraSinglePublicUrls({
entity: "destination",
slug: destinationSlug,
bases: settings2
});
if (isWordPressPlainPermalink()) {
if (!destinationSlug) {
showToast(__("Destination slug is missing", "yatra"), "error");
return;
}
window.open(plainUrl, "_blank", "noopener,noreferrer");
return;
}
let apiPermalink = (destination == null ? void 0 : destination.permalink) || (destination == null ? void 0 : destination.url);
if (!apiPermalink && destination.id) {
try {
const detail = await apiClient.get(`/destinations/${destination.id}`);
apiPermalink = (detail == null ? void 0 : detail.permalink) || (detail == null ? void 0 : detail.url) || apiPermalink;
} catch (e) {
}
}
if (apiPermalink) {
window.open(apiPermalink, "_blank", "noopener,noreferrer");
return;
}
if (!destinationSlug) {
showToast(__("Destination slug is missing", "yatra"), "error");
return;
}
window.open(prettyUrl, "_blank", "noopener,noreferrer");
};
const handleDelete = (destination) => {
setDeleteConfirm({ isOpen: true, destination });
};
const confirmDelete = () => {
if (deleteConfirm.destination) {
deleteMutation.mutate(deleteConfirm.destination.id);
}
};
const handleCreateDestination = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=destinations&action=create`;
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("id");
setSortOrder("desc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder(field === "id" ? "desc" : "asc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
localStorage.setItem(
"yatra_destinations_visible_columns_v2",
JSON.stringify(newVisibleColumns)
);
};
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: statsData.all ?? 0,
publish: statsData.publish ?? 0,
draft: statsData.draft ?? 0,
trash: statsData.trash ?? 0
};
}
return {
all: 0,
publish: 0,
draft: 0,
trash: 0
};
}, [statsData]);
const bulkMutation = useMutation({
mutationFn: async ({
action,
ids
}) => {
return await apiClient.post("/destinations/bulk", { action, ids });
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["destinations"] });
queryClient2.invalidateQueries({ queryKey: ["destinations-stats"] });
showToast(__("Bulk action completed successfully", "yatra"), "success");
setSelectedIds([]);
setBulkAction("");
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to perform bulk action", "yatra"),
"error"
);
}
});
const handleBulkApply = () => {
if (!bulkAction) {
showToast(__("Select a bulk action first.", "yatra"), "warning");
return;
}
if (selectedIds.length === 0) {
showToast(__("Select at least one destination.", "yatra"), "warning");
return;
}
bulkMutation.mutate({ action: bulkAction, ids: selectedIds });
};
const viewFilters = [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all ?? 0 },
{
key: "publish",
label: __("Published", "yatra"),
count: statusCounts.publish ?? 0
},
{
key: "draft",
label: __("Draft", "yatra"),
count: statusCounts.draft ?? 0
},
{
key: "trash",
label: __("Trash", "yatra"),
count: statusCounts.trash ?? 0
}
];
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "id" || sortOrder !== "desc";
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, destination: null }),
onConfirm: confirmDelete,
title: __("Delete Destination", "yatra"),
message: deleteConfirm.destination ? __(
'Are you sure you want to delete "{name}"? This action cannot be undone.',
"yatra"
).replace("{name}", deleteConfirm.destination.name) : __(
"Are you sure you want to delete this destination? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Destinations", "yatra"),
description: __("Manage your travel destinations", "yatra"),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateDestination,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Destination", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ value: "all", label: __("All Status", "yatra") },
{ value: "publish", label: __("Published", "yatra") },
{ value: "draft", label: __("Draft", "yatra") },
{ value: "trash", label: __("Trash", "yatra") }
],
sortBy: sortBy2,
onSortByChange: setSortBy,
sortOrder,
onSortOrderChange: setSortOrder,
sortOptions: [
{ value: "name", label: __("Name", "yatra") },
{ value: "status", label: __("Status", "yatra") },
{ value: "created_at", label: __("Created At", "yatra") },
{ value: "updated_at", label: __("Updated At", "yatra") }
],
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search destinations...", "yatra")
}
) }) }),
!error && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: viewFilters,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "name",
label: __("Destination", "yatra"),
visible: visibleColumns.name
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description
},
{
key: "trips",
label: __("Trips", "yatra"),
visible: visibleColumns.trips
},
{
key: "seo_title",
label: __("SEO Title", "yatra"),
visible: visibleColumns.seo_title
},
{
key: "seo_description",
label: __("SEO Description", "yatra"),
visible: visibleColumns.seo_description
},
{
key: "seo_keywords",
label: __("SEO Keywords", "yatra"),
visible: visibleColumns.seo_keywords
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "created_at",
label: __("Created Date", "yatra"),
visible: visibleColumns.created_at
},
{
key: "updated_at",
label: __("Updated Date", "yatra"),
visible: visibleColumns.updated_at
},
{
key: "created_by_name",
label: __("Created By", "yatra"),
visible: visibleColumns.created_by_name
},
{
key: "updated_by_name",
label: __("Updated By", "yatra"),
visible: visibleColumns.updated_by_name
}
],
onToggleColumn: toggleColumn,
bulkMutationPending: bulkMutation.isPending,
totalItems: destinations.length,
bulkActionOptions: getDefaultBulkStatusOptions(statusFilter)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: destinations,
columns: reactExports.useMemo(
() => [
{
key: "name",
label: __("Destination", "yatra"),
sortable: true,
visible: visibleColumns.name,
render: (destination) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0", children: destination.icon ? destination.icon.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: destination.icon.value,
alt: destination.name,
className: "w-full h-full object-cover rounded-lg"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: destination.icon.value,
provider: destination.icon.provider ?? "yatra",
className: "w-5 h-5 text-blue-600 dark:text-blue-400"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 flex items-center justify-center text-xs font-semibold", children: destination.name.charAt(0).toUpperCase() }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=destinations&action=edit&id=${destination.id}`,
className: "font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors cursor-pointer",
children: destination.name
}
),
can("yatra_view_trips") && destination.status !== "trash" && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: (e) => {
e.stopPropagation();
handleView(destination);
},
className: "ml-1 inline-flex items-center justify-center rounded-full p-1 text-gray-400 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800",
title: __(
"View destination in new tab",
"yatra"
),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3.5 h-3.5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: destination.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[11px] text-gray-400 dark:text-gray-500", children: [
"(",
__("ID:", "yatra"),
" ",
destination.id,
")"
] })
] })
] })
] });
}
},
{
key: "trips",
label: __("Trips", "yatra"),
sortable: false,
visible: visibleColumns.trips,
render: (destination) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: typeof destination.trip_count === "number" ? destination.trip_count : 0 })
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description,
render: (destination) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `block max-w-[300px] truncate ${destination.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"}`,
title: destination.description || "",
children: destination.description || __("No description", "yatra")
}
)
},
{
key: "seo_title",
label: __("SEO Title", "yatra"),
visible: visibleColumns.seo_title,
render: (destination) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: destination.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: ((_a = destination.metadata) == null ? void 0 : _a.seo_title) || __("Not set", "yatra")
}
);
}
},
{
key: "seo_description",
label: __("SEO Description", "yatra"),
visible: visibleColumns.seo_description,
render: (destination) => {
var _a, _b;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: destination.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
title: ((_a = destination.metadata) == null ? void 0 : _a.seo_description) || "",
children: ((_b = destination.metadata) == null ? void 0 : _b.seo_description) ? destination.metadata.seo_description.length > 50 ? destination.metadata.seo_description.substring(
0,
50
) + "..." : destination.metadata.seo_description : __("Not set", "yatra")
}
);
}
},
{
key: "seo_keywords",
label: __("SEO Keywords", "yatra"),
visible: visibleColumns.seo_keywords,
render: (destination) => {
var _a, _b;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: destination.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
title: ((_a = destination.metadata) == null ? void 0 : _a.seo_keywords) || "",
children: ((_b = destination.metadata) == null ? void 0 : _b.seo_keywords) ? destination.metadata.seo_keywords.length > 30 ? destination.metadata.seo_keywords.substring(
0,
30
) + "..." : destination.metadata.seo_keywords : __("Not set", "yatra")
}
);
}
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (destination) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${destination.status === "trash" || statusFilter === "trash" ? "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" : destination.status === "publish" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"}`,
children: destination.status === "trash" || statusFilter === "trash" ? __("Trash", "yatra") : destination.status === "publish" ? __("Published", "yatra") : __("Draft", "yatra")
}
)
},
{
key: "created_at",
label: __("Created Date", "yatra"),
sortable: true,
visible: visibleColumns.created_at,
render: (destination) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: destination.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: new Date(destination.created_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
}
)
}
)
},
{
key: "updated_at",
label: __("Updated Date", "yatra"),
sortable: true,
visible: visibleColumns.updated_at,
render: (destination) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: destination.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: new Date(destination.updated_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
}
)
}
)
},
{
key: "created_by_name",
label: __("Created By", "yatra"),
visible: visibleColumns.created_by_name,
render: (destination) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: destination.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: destination.created_by_name || __("Unknown", "yatra")
}
)
},
{
key: "updated_by_name",
label: __("Updated By", "yatra"),
visible: visibleColumns.updated_by_name,
render: (destination) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: destination.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: destination.updated_by_name || __("Unknown", "yatra")
}
)
}
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[visibleColumns]
),
actions: [
{
key: "view",
label: __("View", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (destination) => {
var _a;
const destinationUrl = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/destination/${destination.slug}`;
window.open(destinationUrl, "_blank");
},
condition: () => true
// Always show view action
},
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: handleEdit,
condition: () => can("yatra_edit_trips")
},
{
key: "restore",
label: __("Restore", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4" }),
onClick: (destination) => {
bulkMutation.mutate({
action: "restore",
ids: [destination.id]
});
},
condition: (destination) => (destination.status === "trash" || statusFilter === "trash") && can("yatra_edit_trips")
},
{
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (destination) => {
bulkMutation.mutate({
action: "trash",
ids: [destination.id]
});
},
condition: (destination) => destination.status !== "trash" && statusFilter !== "trash" && can("yatra_edit_trips")
},
{
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: handleDelete,
condition: (destination) => (destination.status === "trash" || statusFilter === "trash") && can("yatra_delete_trips"),
variant: "destructive"
}
],
isLoading,
isError: !!error,
errorText: __("Error loading destinations", "yatra"),
errorDescription: __(
"We couldn’t connect to the destinations service. Please refresh or try again shortly.",
"yatra"
),
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["destinations"] }),
errorDetails: errorContext.details,
errorRequestInfo: errorContext.requestInfo,
emptyText: __("No destinations found", "yatra"),
emptyDescription: hasFilters ? __(
"Try adjusting your filters to see more results.",
"yatra"
) : __(
"Get started by creating your first destination.",
"yatra"
),
onCreateClick: can("yatra_edit_trips") ? handleCreateDestination : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(
selectedIds.filter((selectedId) => selectedId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(destinations.map((d) => d.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: destinations.length > 0 && selectedIds.length === destinations.length,
getItemId: (destination) => destination.id,
getItemStatus: (destination) => destination.status,
statusFilter,
skeletonRows: 5
},
`destinations-table-${JSON.stringify(visibleColumns)}`
) }) }) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: (newPage) => setPage(newPage),
itemName: __("destinations", "yatra")
}
) })
] });
};
const DestinationForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
icon: null,
status: "publish",
seo_title: "",
seo_description: "",
seo_keywords: "",
landing_page_id: null
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const [isSlugEditable, setIsSlugEditable] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const destinationId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const isEditMode = action === "edit" && destinationId !== null;
const { data: destinationData, isLoading: isLoadingDestination } = useQuery({
queryKey: ["destination", destinationId],
queryFn: async () => {
if (!destinationId) return null;
try {
const response = await apiClient.get(`/destinations/${destinationId}`);
return response;
} catch (error) {
showToast(
(error == null ? void 0 : error.message) || __("Failed to load destination", "yatra"),
"error"
);
throw error;
}
},
enabled: isEditMode && can("yatra_view_trips")
});
const { data: settings2 } = useQuery({
queryKey: ["settings"],
queryFn: async () => {
try {
const response = await fetchSettings();
return (response == null ? void 0 : response.data) || response;
} catch (error) {
return {};
}
}
});
reactExports.useEffect(() => {
var _a, _b, _c;
if (destinationData && isEditMode) {
setFormData({
name: destinationData.name || "",
slug: destinationData.slug || "",
description: destinationData.description || "",
icon: destinationData.icon || null,
status: destinationData.status || "draft",
seo_title: ((_a = destinationData.metadata) == null ? void 0 : _a.seo_title) || "",
seo_description: ((_b = destinationData.metadata) == null ? void 0 : _b.seo_description) || "",
seo_keywords: ((_c = destinationData.metadata) == null ? void 0 : _c.seo_keywords) || "",
landing_page_id: parseLandingPageIdFromMetadata(
destinationData.metadata
)
});
}
}, [destinationData, isEditMode]);
const handleNameChange = (value) => {
if (!isEditMode && !isSlugEditable) {
const newSlug = generateSlug(value);
setFormData((prev) => ({
...prev,
name: value,
slug: newSlug
}));
} else {
setFormData((prev) => ({
...prev,
name: value
}));
}
if (errors.name) {
setErrors((prev) => ({ ...prev, name: "" }));
}
};
const handleSlugChange = (value) => {
if (isSlugEditable) {
setFormData((prev) => ({ ...prev, slug: value }));
if (errors.slug) {
setErrors((prev) => ({ ...prev, slug: "" }));
}
}
};
const handleToggleSlugEdit = () => {
if (isSlugEditable) {
const newSlug = generateSlug(formData.name);
setFormData((prev) => ({ ...prev, slug: newSlug }));
}
setIsSlugEditable(!isSlugEditable);
};
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = __("Name is required", "yatra");
}
if (!formData.slug.trim()) {
newErrors.slug = __("Slug is required", "yatra");
} else if (!/^[\p{L}\p{N}-]+$/u.test(formData.slug)) {
newErrors.slug = __(
"Slug can only contain letters, numbers, and hyphens",
"yatra"
);
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
name: data.name.trim(),
slug: data.slug.trim(),
description: data.description.trim(),
icon: data.icon,
status: data.status,
seo_title: data.seo_title.trim(),
seo_description: data.seo_description.trim(),
seo_keywords: data.seo_keywords.trim(),
landing_page_id: data.landing_page_id ?? null
};
if (isEditMode && isSlugEditable) {
payload.preserve_slug = true;
}
if (isEditMode && destinationId) {
return await apiClient.put(`/destinations/${destinationId}`, payload);
} else {
return await apiClient.post("/destinations", payload);
}
},
onSuccess: (response) => {
var _a, _b;
queryClient2.invalidateQueries({ queryKey: ["destinations"] });
queryClient2.invalidateQueries({
queryKey: ["destination", destinationId]
});
showToast(
isEditMode ? __("Destination updated successfully", "yatra") : __("Destination created successfully", "yatra"),
"success"
);
setIsSubmitting(false);
if (!isEditMode) {
const newId = response == null ? void 0 : response.id;
if (newId) {
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=destinations&action=edit&id=${newId}`;
} else {
window.location.href = `${((_b = window.yatraAdmin) == null ? void 0 : _b.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=destinations`;
}
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the destination", "yatra");
showToast(errorMessage, "error");
setIsSubmitting(false);
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
showToast(__("Please fix the form errors", "yatra"), "warning");
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=destinations`;
};
if (isEditMode && isLoadingDestination) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) })
] })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Destination", "yatra") : __("Add New Destination", "yatra"),
description: isEditMode ? __("Update destination information", "yatra") : __("Create a new travel destination", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
),
formData.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: async () => {
var _a;
if (formData.landing_page_id && ((_a = window.yatraAdmin) == null ? void 0 : _a.customLandingPagesModuleEnabled)) {
const link2 = await fetchPublishedPagePermalink(
formData.landing_page_id
);
if (link2) {
window.open(link2, "_blank", "noopener,noreferrer");
return;
}
}
const targetUrl = buildYatraSinglePreviewUrl({
entity: "destination",
slug: formData.slug || "",
bases: settings2
});
window.open(targetUrl, "_blank", "noopener,noreferrer");
},
className: "flex items-center gap-2",
title: __("Preview destination in new tab", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
__("Preview", "yatra")
]
}
)
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Basic Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "name",
type: "text",
value: formData.name,
onChange: (e) => handleNameChange(e.target.value),
placeholder: __("Enter destination name", "yatra"),
className: errors.name ? "border-red-500" : "",
required: true
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "slug",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Slug", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "slug",
type: "text",
value: formData.slug,
onChange: (e) => handleSlugChange(e.target.value),
placeholder: __("destination-slug", "yatra"),
className: `pr-10 ${errors.slug ? "border-red-500" : ""} ${!isSlugEditable ? "bg-gray-50 dark:bg-gray-800 cursor-not-allowed" : ""}`,
disabled: !isSlugEditable,
required: true
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: handleToggleSlugEdit,
className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors rounded",
"aria-label": isSlugEditable ? __("Cancel editing slug", "yatra") : __("Edit slug", "yatra"),
children: isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-4 h-4" })
}
)
] }),
errors.slug && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: isSlugEditable ? __(
"Manually editing slug. Click X to cancel and regenerate from name.",
"yatra"
) : __(
"Auto-generated from name. Click edit icon to customize.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
RichTextEditor,
{
label: __("Description", "yatra"),
value: formData.description || "",
onChange: (value) => handleFieldChange("description", value),
placeholder: __(
"Write a rich description (supports formatting, lists, links...)",
"yatra"
),
helperText: __(
"Use formatting, bullet lists, and links to create a compelling description. HTML is supported.",
"yatra"
),
minHeight: 360,
maxHeight: 720
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ClassificationLandingPageField,
{
selectId: "yatra-destination-landing-page",
value: formData.landing_page_id,
onChange: (id) => setFormData((prev) => ({ ...prev, landing_page_id: id }))
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
className: "w-full h-10",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("SEO Settings", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_title",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Title", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "seo_title",
type: "text",
value: formData.seo_title,
onChange: (e) => handleFieldChange("seo_title", e.target.value),
placeholder: __(
"e.g., {name} Destinations | Your Travel Agency",
"yatra"
),
className: "w-full"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Custom title for search engines. Use {name} as placeholder.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_description",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Description", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "seo_description",
value: formData.seo_description,
onChange: (e) => handleFieldChange("seo_description", e.target.value),
placeholder: __(
"e.g., Discover amazing destinations in {name}. Plan your perfect trip today!",
"yatra"
),
rows: 3,
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Description for search engines (150-160 characters). Use {name} as placeholder.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_keywords",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Keywords", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "seo_keywords",
type: "text",
value: formData.seo_keywords,
onChange: (e) => handleFieldChange("seo_keywords", e.target.value),
placeholder: __(
"e.g., destinations, travel, {name}, tourism, trips",
"yatra"
),
className: "w-full"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Comma-separated keywords. Use {name} as placeholder.",
"yatra"
) })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Destination Icon or Image", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconPicker,
{
value: formData.icon,
onChange: (value) => handleFieldChange("icon", value),
label: __("Select Icon or Upload Image", "yatra"),
helpText: __(
"Choose a library icon or upload a custom image to visually represent this destination.",
"yatra"
),
allowImageUpload: true,
allowIconSelection: true,
size: "md"
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Destination", "yatra") : __("Create Destination", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] }) }) }) })
] })
] }) }) })
] });
};
const Categories = () => {
const { can } = usePermissions();
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [parentFilter, setParentFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("name");
const [sortOrder, setSortOrder] = reactExports.useState("asc");
const [page, setPage] = reactExports.useState(1);
const [expandedCategories, setExpandedCategories] = reactExports.useState(
/* @__PURE__ */ new Set()
);
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
category: null
});
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
const defaultColumns = {
name: true,
description: true,
trips: true,
status: true,
seo_title: false,
seo_description: false,
seo_keywords: false,
created_at: true
};
const saved = localStorage.getItem("yatra_categories_columns_v2");
return saved ? { ...defaultColumns, ...JSON.parse(saved) } : defaultColumns;
});
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 50,
// Get more items to handle hierarchical display
orderby: sortBy2,
order: sortOrder,
hierarchical: true
// Request hierarchical data
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
if (parentFilter === "top-level") {
params.parent_id = null;
}
return params;
}, [searchTerm, statusFilter, parentFilter, sortBy2, sortOrder, page]);
const { data, isLoading, error } = useQuery({
queryKey: ["trip-categories", queryParams],
queryFn: async () => {
try {
const response = await apiClient.get("/trip-categories", {
params: queryParams
});
return response;
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to load categories", "yatra"),
"error"
);
throw error2;
}
},
enabled: can("yatra_view_trips")
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/trip-categories/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["trip-categories"] });
showToast(__("Category deleted successfully", "yatra"), "success");
setDeleteConfirm({ isOpen: false, category: null });
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete category", "yatra"),
"error"
);
}
});
const categories = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 50);
const errorContext = getErrorContext(error);
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
localStorage.setItem(
"yatra_categories_columns_v2",
JSON.stringify(newVisibleColumns)
);
};
const statusCounts = reactExports.useMemo(() => {
const counts = {
all: 0,
publish: 0,
draft: 0,
trash: 0
};
const countCategory = (cat) => {
counts.all++;
if (cat.status === "publish") counts.publish++;
else if (cat.status === "draft") counts.draft++;
else if (cat.status === "trash") counts.trash++;
};
categories.forEach((cat) => {
countCategory(cat);
if (cat.subcategories && Array.isArray(cat.subcategories)) {
cat.subcategories.forEach((sub) => {
countCategory(sub);
});
}
});
return counts;
}, [categories]);
const bulkMutation = useMutation({
mutationFn: async ({
action,
ids
}) => {
if (action === "delete") {
await Promise.all(
ids.map((id) => apiClient.delete(`/trip-categories/${id}`))
);
} else {
await Promise.all(
ids.map(async (id) => {
try {
const categoryResponse = await apiClient.get(
`/trip-categories/${id}`
);
const category = categoryResponse;
if (!category || !category.name) {
return;
}
await apiClient.put(`/trip-categories/${id}`, {
name: category.name,
slug: category.slug,
description: category.description,
icon: category.icon,
parent_id: category.parent_id,
status: action
});
} catch {
throw new Error("bulk_item_failed");
}
})
);
}
},
onSuccess: (_data, variables) => {
queryClient2.invalidateQueries({ queryKey: ["trip-categories"] });
const msgMap = {
delete: __("Selected categories deleted successfully", "yatra"),
trash: __("Selected categories moved to trash", "yatra"),
draft: __("Selected categories marked as draft", "yatra"),
publish: __("Selected categories published", "yatra")
};
showToast(
msgMap[variables.action] || __("Bulk action completed", "yatra"),
"success"
);
setSelectedIds([]);
setBulkAction("");
},
onError: (error2, variables) => {
const msgMapError = {
delete: __("Failed to delete selected categories", "yatra"),
trash: __("Failed to move categories to trash", "yatra"),
draft: __("Failed to mark categories as draft", "yatra"),
publish: __("Failed to publish categories", "yatra")
};
showToast(
(error2 == null ? void 0 : error2.message) || msgMapError[variables.action] || __("Bulk action failed", "yatra"),
"error"
);
}
});
const handleBulkApply = () => {
if (!bulkAction) {
showToast(__("Select a bulk action first.", "yatra"), "warning");
return;
}
if (selectedIds.length === 0) {
showToast(__("Select at least one category.", "yatra"), "warning");
return;
}
bulkMutation.mutate({ action: bulkAction, ids: selectedIds });
};
const processedCategories = reactExports.useMemo(() => {
if (!Array.isArray(categories) || categories.length === 0) {
return [];
}
const normalized = categories.map((cat) => ({
...cat,
subcategories: Array.isArray(cat.subcategories) ? cat.subcategories : []
}));
const term = searchTerm.trim().toLowerCase();
const matchesSearch = (cat) => {
var _a, _b, _c;
if (!term) return true;
const name = ((_a = cat.name) == null ? void 0 : _a.toLowerCase()) || "";
const slug = ((_b = cat.slug) == null ? void 0 : _b.toLowerCase()) || "";
const desc = ((_c = cat.description) == null ? void 0 : _c.toLowerCase()) || "";
return name.includes(term) || slug.includes(term) || desc.includes(term);
};
const filterByStatusAndSearch = (items) => {
return items.map((cat) => {
const filteredSubcategories = cat.subcategories ? cat.subcategories.filter((sub) => {
const statusOk = statusFilter === "all" || sub.status === statusFilter;
const searchOk = matchesSearch(sub);
return statusOk && searchOk;
}) : [];
return {
...cat,
subcategories: filteredSubcategories
};
}).filter((cat) => {
if (statusFilter === "all" && !term) return true;
const statusOk = statusFilter === "all" || cat.status === statusFilter;
const searchOk = matchesSearch(cat);
const hasMatchingChildren = cat.subcategories && cat.subcategories.length > 0;
return statusOk && searchOk || hasMatchingChildren;
});
};
const filtered = filterByStatusAndSearch(normalized);
if (parentFilter === "subcategories") {
const onlySubs = filtered.flatMap(
(cat) => (cat.subcategories || []).map((sub) => ({
...sub,
parent_name: cat.name,
__subOnly: true,
subcategories: []
}))
);
return onlySubs;
}
if (parentFilter === "top-level") {
return filtered.map((cat) => ({
...cat,
subcategories: []
// Don't show subcategories when filtering for top-level only
}));
}
return filtered;
}, [categories, parentFilter, statusFilter, searchTerm]);
const { data: settings2 } = useQuery({
queryKey: ["settings"],
queryFn: async () => {
try {
const response = await fetchSettings();
return response;
} catch (error2) {
return null;
}
},
enabled: can("yatra_access_admin"),
staleTime: 5 * 60 * 1e3
// Cache for 5 minutes
});
reactExports.useEffect(() => {
if (expandedCategories.size > 0) return;
const initialExpanded = /* @__PURE__ */ new Set();
processedCategories.forEach((cat) => {
if (!cat.__subOnly && cat.subcategories && cat.subcategories.length > 0) {
initialExpanded.add(cat.id);
}
});
if (initialExpanded.size > 0) {
setExpandedCategories(initialExpanded);
}
}, [processedCategories, expandedCategories.size]);
const formatDate2 = (dateString) => {
if (!dateString) return __("N/A", "yatra");
try {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "2-digit"
});
} catch (e) {
return dateString;
}
};
const getStatusBadge = (status) => {
const statusMap = {
publish: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Publish", "yatra")
},
draft: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Draft", "yatra")
},
trash: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Trash", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const renderIcon = (icon) => {
if (!icon) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "—" }) });
}
if (icon.type === "image") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: icon.value,
alt: "",
className: "w-8 h-8 rounded object-cover",
onError: (e) => {
const target2 = e.target;
target2.style.display = "none";
if (target2.parentElement) {
target2.parentElement.innerHTML = '—
';
}
}
}
);
}
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: icon.value,
provider: icon.provider ?? "yatra",
className: "w-5 h-5 text-gray-600 dark:text-gray-400"
}
) });
};
const toggleExpand = (categoryId) => {
const id = typeof categoryId === "string" ? parseInt(categoryId, 10) : categoryId;
setExpandedCategories((prev) => {
const newSet = new Set(prev);
if (newSet.has(id)) {
newSet.delete(id);
} else {
newSet.add(id);
}
return newSet;
});
};
const handleEdit = (category) => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=categories&action=edit&id=${category.id}`;
};
const handleView = async (category) => {
const categorySlug = category.slug || "";
const { plainUrl, prettyUrl } = buildYatraSinglePublicUrls({
entity: "category",
slug: categorySlug,
bases: settings2
});
if (isWordPressPlainPermalink()) {
if (!categorySlug) {
showToast(__("Category slug is missing", "yatra"), "error");
return;
}
window.open(plainUrl, "_blank", "noopener,noreferrer");
return;
}
let apiPermalink = (category == null ? void 0 : category.permalink) || (category == null ? void 0 : category.url);
if (!apiPermalink && category.id) {
try {
const detail = await apiClient.get(`/trip-categories/${category.id}`);
apiPermalink = (detail == null ? void 0 : detail.permalink) || (detail == null ? void 0 : detail.url) || apiPermalink;
} catch (e) {
}
}
if (apiPermalink) {
window.open(apiPermalink, "_blank", "noopener,noreferrer");
return;
}
if (!categorySlug) {
showToast(__("Category slug is missing", "yatra"), "error");
return;
}
window.open(prettyUrl, "_blank", "noopener,noreferrer");
};
const confirmDelete = () => {
if (deleteConfirm.category) {
deleteMutation.mutate(deleteConfirm.category.id);
}
};
const handleCreateCategory = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=categories&action=create`;
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setParentFilter("all");
setSortBy("name");
setSortOrder("asc");
setPage(1);
};
const hasFilters = searchTerm || statusFilter !== "all" || parentFilter !== "all" || sortBy2 !== "name" || sortOrder !== "asc";
const columns = reactExports.useMemo(
() => [
{
key: "name",
label: __("Name", "yatra"),
sortable: true,
visible: visibleColumns.name,
render: (category) => {
var _a;
const editUrl = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=categories&action=edit&id=${category.id}`;
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-start gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: editUrl,
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
handleEdit(category);
},
className: "font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline-offset-2 hover:underline truncate",
children: category.name
}
),
can("yatra_view_trips") && category.status !== "trash" && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: (e) => {
e.stopPropagation();
handleView(category);
},
className: "ml-1 inline-flex items-center justify-center rounded-full p-1 text-gray-400 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800",
title: __("View category in new tab", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3.5 h-3.5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate", children: [
category.slug,
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-1 text-[11px] text-gray-400 dark:text-gray-500", children: [
"(ID: ",
category.id,
")"
] })
] })
] }) });
}
},
{
key: "trips",
label: __("Trips", "yatra"),
visible: visibleColumns.trips,
render: (category) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: typeof category.trip_count === "number" ? category.trip_count : 0 })
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description,
render: (category) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `block max-w-[300px] truncate ${category.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"}`,
title: category.description || "",
children: category.description || __("No description", "yatra")
}
)
},
{
key: "seo_title",
label: __("SEO Title", "yatra"),
visible: visibleColumns.seo_title,
render: (category) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: category.status === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: ((_a = category.metadata) == null ? void 0 : _a.seo_title) || __("Not set", "yatra")
}
);
}
},
{
key: "seo_description",
label: __("SEO Description", "yatra"),
visible: visibleColumns.seo_description,
render: (category) => {
var _a, _b;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: category.status === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
title: ((_a = category.metadata) == null ? void 0 : _a.seo_description) || "",
children: ((_b = category.metadata) == null ? void 0 : _b.seo_description) ? category.metadata.seo_description.length > 50 ? category.metadata.seo_description.substring(0, 50) + "..." : category.metadata.seo_description : __("Not set", "yatra")
}
);
}
},
{
key: "seo_keywords",
label: __("SEO Keywords", "yatra"),
visible: visibleColumns.seo_keywords,
render: (category) => {
var _a, _b;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: category.status === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
title: ((_a = category.metadata) == null ? void 0 : _a.seo_keywords) || "",
children: ((_b = category.metadata) == null ? void 0 : _b.seo_keywords) ? category.metadata.seo_keywords.length > 30 ? category.metadata.seo_keywords.substring(0, 30) + "..." : category.metadata.seo_keywords : __("Not set", "yatra")
}
);
}
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (category) => {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${category.status === "publish" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300" : category.status === "draft" ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300" : "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300"}`,
children: category.status === "publish" ? __("Published", "yatra") : category.status === "draft" ? __("Draft", "yatra") : category.status === "trash" ? __("Trash", "yatra") : category.status
}
);
}
},
{
key: "created_at",
label: __("Created", "yatra"),
sortable: true,
visible: visibleColumns.created_at
}
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[visibleColumns]
);
const statusMutation = useMutation({
mutationFn: async ({ id, status }) => {
const categoryResponse = await apiClient.get(`/trip-categories/${id}`);
const category = categoryResponse;
return apiClient.put(`/trip-categories/${id}`, {
name: category.name,
slug: category.slug,
description: category.description,
icon: category.icon,
parent_id: category.parent_id,
status
});
},
onSuccess: (_data, variables) => {
queryClient2.invalidateQueries({ queryKey: ["trip-categories"] });
const msgMap = {
trash: __("Category moved to trash", "yatra"),
draft: __("Category marked as draft", "yatra"),
publish: __("Category published", "yatra")
};
const msg = msgMap[variables.status] || __("Category updated successfully", "yatra");
showToast(msg, "success");
},
onError: (error2, variables) => {
const msgMapError = {
trash: __("Failed to move category to trash", "yatra"),
draft: __("Failed to mark category as draft", "yatra"),
publish: __("Failed to publish category", "yatra")
};
const fallback = msgMapError[variables.status] || __("Failed to update category", "yatra");
showToast((error2 == null ? void 0 : error2.message) || fallback, "error");
}
});
const actions = [
{
key: "view",
label: __("View (frontend)", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-4 h-4" }),
onClick: (category) => {
var _a;
const categoryUrl = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/trip-category/${category.slug}`;
window.open(categoryUrl, "_blank");
},
condition: (category) => category.status !== "trash"
// Hide for trash categories
},
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (category) => handleEdit(category),
condition: () => can("yatra_edit_trips")
},
{
key: "publish",
label: __("Make Published", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (category) => statusMutation.mutate({ id: category.id, status: "publish" }),
condition: (category) => can("yatra_edit_trips") && category.status !== "publish"
},
{
key: "draft",
label: __("Make Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (category) => statusMutation.mutate({ id: category.id, status: "draft" }),
condition: (category) => can("yatra_edit_trips") && category.status !== "draft"
},
{
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (category) => statusMutation.mutate({ id: category.id, status: "trash" }),
variant: "destructive",
condition: (category) => can("yatra_edit_trips") && category.status !== "trash"
},
{
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (category) => setDeleteConfirm({ isOpen: true, category }),
variant: "destructive",
condition: (category) => can("yatra_edit_trips") && category.status === "trash"
}
];
const renderRowContent = (category, _index, isChild = false) => {
const visibleColumns2 = columns.filter((col) => col.visible !== false);
return visibleColumns2.map((column) => {
var _a;
switch (column.key) {
case "name":
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
renderIcon(category.icon),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-medium text-gray-900 dark:text-white flex items-center gap-1", children: [
isChild && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400 mr-1", children: "└─" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=categories&action=edit&id=${category.id}`,
className: "font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors cursor-pointer",
children: category.name
}
),
can("yatra_view_trips") && category.status !== "trash" && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: (e) => {
e.stopPropagation();
handleView(category);
},
className: "ml-1 inline-flex items-center justify-center rounded-full p-1 text-gray-400 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800",
title: __("View category in new tab", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3.5 h-3.5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: category.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[11px] text-gray-400 dark:text-gray-500", children: [
"(",
__("ID:", "yatra"),
" ",
category.id,
")"
] })
] }),
category.parent_name && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
__("Parent:", "yatra"),
" ",
category.parent_name
] })
] })
] });
case "trips":
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: typeof category.trip_count === "number" ? category.trip_count : 0 });
case "description":
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-xs truncate text-sm text-gray-600 dark:text-gray-400", children: category.description || "—" });
case "status":
return getStatusBadge(category.status);
case "created_at":
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: formatDate2(category.created_at) });
case "seo_title":
case "seo_description":
case "seo_keywords":
return column.render ? column.render(category) : null;
default:
return column.render ? column.render(category) : category[column.key];
}
});
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, category: null }),
onConfirm: confirmDelete,
title: __("Delete Category", "yatra"),
message: deleteConfirm.category ? __(
'Are you sure you want to delete "{name}"? This action cannot be undone.',
"yatra"
).replace("{name}", deleteConfirm.category.name) : __(
"Are you sure you want to delete this category? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete Permanently", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Categories", "yatra"),
description: __("Manage trip categories and subcategories", "yatra"),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateCategory,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Category", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 w-full lg:flex-[4]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions: [
{ value: "all", label: __("All Status", "yatra") },
{ value: "publish", label: __("Publish", "yatra") },
{ value: "draft", label: __("Draft", "yatra") },
{ value: "trash", label: __("Trash", "yatra") }
],
sortBy: sortBy2,
onSortByChange: (value) => {
setSortBy(value);
setSortOrder("asc");
setPage(1);
},
sortOrder,
onSortOrderChange: (order) => {
setSortOrder(order);
setPage(1);
},
sortOptions: [
{ value: "name", label: __("Name", "yatra") },
{ value: "status", label: __("Status", "yatra") },
{ value: "created_at", label: __("Created", "yatra") }
],
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search categories", "yatra")
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-48 xl:w-56 lg:flex-none", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: parentFilter,
onChange: (e) => setParentFilter(
e.target.value
),
className: "w-full text-sm truncate",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Categories", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "top-level", children: __("Top Level Only", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "subcategories", children: __("Subcategories Only", "yatra") })
]
}
) })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all },
{
key: "publish",
label: __("Published", "yatra"),
count: statusCounts.publish
},
{
key: "draft",
label: __("Draft", "yatra"),
count: statusCounts.draft
},
{
key: "trash",
label: __("Trash", "yatra"),
count: statusCounts.trash
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "name",
label: __("Category", "yatra"),
visible: visibleColumns.name
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description
},
{
key: "trips",
label: __("Trips", "yatra"),
visible: visibleColumns.trips
},
{
key: "seo_title",
label: __("SEO Title", "yatra"),
visible: visibleColumns.seo_title
},
{
key: "seo_description",
label: __("SEO Description", "yatra"),
visible: visibleColumns.seo_description
},
{
key: "seo_keywords",
label: __("SEO Keywords", "yatra"),
visible: visibleColumns.seo_keywords
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "created_at",
label: __("Created Date", "yatra"),
visible: visibleColumns.created_at
}
],
onToggleColumn: toggleColumn,
bulkMutationPending: bulkMutation.isPending,
totalItems: processedCategories.length,
bulkActionOptions: getDefaultBulkStatusOptions(statusFilter)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-0", children: [
null,
/* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: processedCategories,
columns,
actions,
isLoading,
isError: !!error,
errorText: __("Error loading categories", "yatra"),
errorDescription: __(
"We couldn’t connect to the categories service. Please refresh or try again shortly.",
"We couldn’t connect to the categories service. Please refresh or try again shortly."
),
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["trip-categories"] }),
errorDetails: errorContext.details,
errorRequestInfo: errorContext.requestInfo,
emptyText: __("No categories found", "yatra"),
emptyDescription: __(
"Organize trips into categories to help travelers find the perfect fit.",
"Organize trips into categories to help travelers find the perfect fit."
),
onCreateClick: handleCreateCategory,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(
selectedIds.filter((selectedId) => selectedId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(
processedCategories.map((cat) => cat.id)
);
} else {
setSelectedIds([]);
}
},
isAllSelected: processedCategories.length > 0 && selectedIds.length === processedCategories.length,
getItemId: (category) => category.id,
getItemStatus: (category) => category.status,
statusFilter,
skeletonRows: 5,
capability: "yatra_view_trips",
isHierarchical: true,
expandedIds: expandedCategories,
onToggleExpand: toggleExpand,
getChildren: (category) => category.subcategories || [],
renderRowContent
},
`categories-table-${JSON.stringify(visibleColumns)}`
)
] }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: (newPage) => setPage(newPage),
itemName: __("categories", "yatra")
}
) })
] });
};
function parseTripCategoryIsFeatured(raw) {
if (raw === true || raw === 1) {
return true;
}
if (raw === false || raw === 0 || raw === null || raw === void 0) {
return false;
}
if (typeof raw === "string") {
const t = raw.trim();
return t === "1" || t.toLowerCase() === "true";
}
return Number(raw) === 1;
}
const CategoryForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
icon: null,
parent_id: "",
status: "publish",
is_featured: false,
seo_title: "",
seo_description: "",
seo_keywords: "",
landing_page_id: null
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const [isSlugEditable, setIsSlugEditable] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const categoryId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0", 10) : null;
}, []);
const isEditMode = action === "edit" && categoryId !== null;
const { data: categoryData, isLoading: isLoadingCategory } = useQuery({
queryKey: ["trip-category", categoryId],
queryFn: async () => {
if (!categoryId) return null;
try {
const response = await apiClient.get(`/trip-categories/${categoryId}`);
return response;
} catch (error) {
showToast(
(error == null ? void 0 : error.message) || __("Failed to load category", "yatra"),
"error"
);
throw error;
}
},
enabled: isEditMode && can("yatra_view_trips")
});
const { data: parentCategoriesData } = useQuery({
queryKey: ["trip-categories", "parent-options"],
queryFn: async () => {
try {
const response = await apiClient.get("/trip-categories", {
params: {
per_page: 100,
parent_id: null,
hierarchical: false,
orderby: "name",
order: "ASC"
}
});
const payload = (response == null ? void 0 : response.data) || response;
if (!payload) {
return [];
}
if (Array.isArray(payload)) {
return payload;
}
return payload.data || [];
} catch (error) {
return [];
}
},
enabled: can("yatra_view_trips")
});
const { data: settings2 } = useQuery({
queryKey: ["settings"],
queryFn: async () => {
try {
const response = await fetchSettings();
return (response == null ? void 0 : response.data) || response;
} catch (error) {
return {};
}
}
});
const parentOptions = reactExports.useMemo(() => {
if (!parentCategoriesData || !Array.isArray(parentCategoriesData)) {
return [];
}
return parentCategoriesData.filter((cat) => {
if (!cat || typeof cat !== "object") return false;
if (cat.parent_id) return false;
if (isEditMode && categoryId && cat.id === categoryId) return false;
return true;
});
}, [parentCategoriesData, isEditMode, categoryId]);
reactExports.useEffect(() => {
var _a, _b, _c;
if (categoryData && isEditMode) {
setFormData({
name: categoryData.name || "",
slug: categoryData.slug || "",
description: categoryData.description || "",
icon: categoryData.icon || null,
parent_id: categoryData.parent_id ?? "",
status: categoryData.status || "publish",
is_featured: parseTripCategoryIsFeatured(
categoryData.is_featured
),
seo_title: ((_a = categoryData.metadata) == null ? void 0 : _a.seo_title) || "",
seo_description: ((_b = categoryData.metadata) == null ? void 0 : _b.seo_description) || "",
seo_keywords: ((_c = categoryData.metadata) == null ? void 0 : _c.seo_keywords) || "",
landing_page_id: parseLandingPageIdFromMetadata(
categoryData.metadata
)
});
}
}, [categoryData, isEditMode]);
const handleNameChange = (value) => {
if (!isEditMode && !isSlugEditable) {
const newSlug = generateSlug(value);
setFormData((prev) => ({
...prev,
name: value,
slug: newSlug
}));
} else {
setFormData((prev) => ({ ...prev, name: value }));
}
if (errors.name) {
setErrors((prev) => ({ ...prev, name: "" }));
}
};
const handleSlugChange = (value) => {
if (isSlugEditable) {
setFormData((prev) => ({ ...prev, slug: value }));
if (errors.slug) {
setErrors((prev) => ({ ...prev, slug: "" }));
}
}
};
const handleToggleSlugEdit = () => {
if (isSlugEditable) {
const newSlug = generateSlug(formData.name);
setFormData((prev) => ({ ...prev, slug: newSlug }));
}
setIsSlugEditable(!isSlugEditable);
};
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = __("Name is required", "yatra");
}
if (!formData.slug.trim()) {
newErrors.slug = __("Slug is required", "yatra");
} else if (!/^[\p{L}\p{N}-]+$/u.test(formData.slug)) {
newErrors.slug = __(
"Slug can only contain letters, numbers, and hyphens",
"yatra"
);
}
if (formData.parent_id && categoryId && Number(formData.parent_id) === categoryId) {
newErrors.parent_id = __("Category cannot be its own parent", "yatra");
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
name: data.name.trim(),
slug: data.slug.trim(),
description: data.description.trim(),
icon: data.icon,
parent_id: data.parent_id === "" ? null : Number(data.parent_id),
status: data.status,
is_featured: data.is_featured ? 1 : 0,
seo_title: data.seo_title.trim(),
seo_description: data.seo_description.trim(),
seo_keywords: data.seo_keywords.trim(),
landing_page_id: data.landing_page_id ?? null
};
if (isEditMode && isSlugEditable) {
payload.preserve_slug = true;
}
if (isEditMode && categoryId) {
return await apiClient.put(`/trip-categories/${categoryId}`, payload);
}
return await apiClient.post("/trip-categories", payload);
},
onSuccess: (response) => {
var _a, _b;
queryClient2.invalidateQueries({ queryKey: ["trip-categories"] });
queryClient2.invalidateQueries({
queryKey: ["trip-category", categoryId]
});
showToast(
isEditMode ? __("Category updated successfully", "yatra") : __("Category created successfully", "yatra"),
"success"
);
setIsSubmitting(false);
if (!isEditMode) {
const newId = response == null ? void 0 : response.id;
if (newId) {
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=categories&action=edit&id=${newId}`;
} else {
window.location.href = `${((_b = window.yatraAdmin) == null ? void 0 : _b.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=categories`;
}
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the category", "yatra");
showToast(errorMessage, "error");
setIsSubmitting(false);
}
});
const handleSubmit = (e) => {
e.preventDefault();
if (!validateForm()) {
showToast(__("Please fix the form errors", "yatra"), "warning");
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=categories`;
};
if (isEditMode && isLoadingCategory) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) })
] })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Category", "yatra") : __("Add New Category", "yatra"),
description: isEditMode ? __("Update category information", "yatra") : __("Create a new trip category", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
),
formData.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: async () => {
var _a;
if (formData.landing_page_id && ((_a = window.yatraAdmin) == null ? void 0 : _a.customLandingPagesModuleEnabled)) {
const link2 = await fetchPublishedPagePermalink(
formData.landing_page_id
);
if (link2) {
window.open(link2, "_blank", "noopener,noreferrer");
return;
}
}
const targetUrl = buildYatraSinglePreviewUrl({
entity: "category",
slug: formData.slug || "",
bases: settings2
});
window.open(targetUrl, "_blank", "noopener,noreferrer");
},
className: "flex items-center gap-2",
title: __("Preview category in new tab", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
__("Preview", "yatra")
]
}
)
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Basic Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "name",
type: "text",
value: formData.name,
onChange: (e) => handleNameChange(e.target.value),
placeholder: __("Enter category name", "yatra"),
className: errors.name ? "border-red-500" : "",
required: true
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "slug",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Slug", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "slug",
type: "text",
value: formData.slug,
onChange: (e) => handleSlugChange(e.target.value),
placeholder: __("category-slug", "yatra"),
className: `pr-10 ${errors.slug ? "border-red-500" : ""} ${!isSlugEditable ? "bg-gray-50 dark:bg-gray-800 cursor-not-allowed" : ""}`,
disabled: !isSlugEditable,
required: true
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: handleToggleSlugEdit,
className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors rounded",
"aria-label": isSlugEditable ? __("Cancel editing slug", "yatra") : __("Edit slug", "yatra"),
children: isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-4 h-4" })
}
)
] }),
errors.slug && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: isSlugEditable ? __(
"Manually editing slug. Click X to cancel and regenerate from name.",
"yatra"
) : __(
"Auto-generated from name. Click edit icon to customize.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
RichTextEditor,
{
label: __("Description", "yatra"),
value: formData.description || "",
onChange: (value) => handleFieldChange("description", value),
placeholder: __("Enter category description...", "yatra"),
helperText: __(
"Describe what this category is for and what types of trips it contains.",
"yatra"
),
minHeight: 120,
maxHeight: 360
}
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ClassificationLandingPageField,
{
selectId: "yatra-category-landing-page",
value: formData.landing_page_id,
onChange: (id) => setFormData((prev) => ({ ...prev, landing_page_id: id }))
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Hierarchy", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "parent_id",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Parent Category", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "parent_id",
value: formData.parent_id === "" ? "" : String(formData.parent_id),
onChange: (e) => handleFieldChange(
"parent_id",
e.target.value === "" ? "" : Number(e.target.value)
),
className: "w-full h-10",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: __("None (Top Level)", "yatra") }),
parentOptions.map((cat) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: cat.id, children: cat.name }, cat.id))
]
}
),
errors.parent_id && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.parent_id }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: __(
"Assign a parent category to create subcategories.",
"yatra"
) })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
className: "w-full h-10",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Visibility", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-start gap-3 cursor-pointer", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
className: "mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500",
checked: formData.is_featured,
onChange: (e) => handleFieldChange("is_featured", e.target.checked)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-sm font-medium text-gray-900 dark:text-gray-100", children: __("Featured category", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: __(
"Shows a “Featured” badge on Trip Category blocks and the [yatra_trip_category] shortcode cards.",
"yatra"
) })
] })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("SEO Settings", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_title",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Title", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "seo_title",
type: "text",
value: formData.seo_title,
onChange: (e) => handleFieldChange("seo_title", e.target.value),
placeholder: __(
"e.g., {name} Trip Categories | Your Travel Agency",
"yatra"
),
className: "w-full"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Custom title for search engines. Use {name} as placeholder.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_description",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Description", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "seo_description",
value: formData.seo_description,
onChange: (e) => handleFieldChange("seo_description", e.target.value),
placeholder: __(
"e.g., Browse {name} trip categories and find your perfect adventure. Book now!",
"yatra"
),
rows: 3,
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Description for search engines (150-160 characters). Use {name} as placeholder.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "seo_keywords",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
children: __("Meta Keywords", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "seo_keywords",
type: "text",
value: formData.seo_keywords,
onChange: (e) => handleFieldChange("seo_keywords", e.target.value),
placeholder: __(
"e.g., categories, trips, {name}, travel, adventure",
"yatra"
),
className: "w-full"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Comma-separated keywords. Use {name} as placeholder.",
"yatra"
) })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Category Icon or Image", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconPicker,
{
value: formData.icon,
onChange: (value) => handleFieldChange("icon", value),
label: __("Select Icon or Upload Image", "yatra"),
helpText: __(
"Choose a library icon or upload a custom image for this category.",
"yatra"
),
allowImageUpload: true,
allowIconSelection: true,
size: "md"
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Category", "yatra") : __("Create Category", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] }) }) }) })
] })
] }) }) })
] });
};
const DifficultyLevels = () => {
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("sorting");
const [sortOrder, setSortOrder] = reactExports.useState("asc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
const defaultColumns = {
sorting: true,
name: true,
description: true,
trips: true,
status: true,
created_at: false
};
const saved = localStorage.getItem("yatra_difficulty_levels_columns");
return saved ? { ...defaultColumns, ...JSON.parse(saved) } : defaultColumns;
});
const { can } = usePermissions();
const { showToast } = useToast();
const queryClient2 = useQueryClient();
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
level: null
});
const columns = [
{
key: "sorting",
label: __("Order", "yatra"),
sortable: true,
width: "100px",
visible: visibleColumns.sorting,
render: (level) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: level.sorting })
},
{
key: "name",
label: __("Name", "yatra"),
sortable: true,
visible: visibleColumns.name,
render: (level) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
renderIcon(level.icon),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=difficulty-levels&action=edit&id=${level.id}`,
className: "font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors cursor-pointer",
children: level.name
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: level.slug || "—" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[11px] text-gray-400 dark:text-gray-500", children: [
"(",
__("ID:", "yatra"),
" ",
level.id,
")"
] })
] })
] })
] });
}
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description,
render: (level) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-xs truncate text-sm text-gray-600 dark:text-gray-400", children: level.description || "—" })
},
{
key: "trips",
label: __("Trips", "yatra"),
visible: visibleColumns.trips,
render: (level) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: typeof level.trip_count === "number" ? level.trip_count : 0 })
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (level) => getStatusBadge(level.status)
},
{
key: "created_at",
label: __("Created", "yatra"),
sortable: true,
visible: visibleColumns.created_at,
render: (level) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: formatDate2(level.created_at) })
}
];
const actions = [
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (level) => handleEdit(level),
condition: () => can("yatra_edit_trips")
},
{
key: "publish",
label: __("Make Published", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (level) => statusMutation.mutate({ id: level.id, status: "publish" }),
condition: (level) => can("yatra_edit_trips") && level.status !== "publish"
},
{
key: "draft",
label: __("Make Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (level) => statusMutation.mutate({ id: level.id, status: "draft" }),
condition: (level) => can("yatra_edit_trips") && level.status !== "draft"
},
{
key: "delete",
label: __("Delete", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (level) => setDeleteConfirm({ isOpen: true, level }),
variant: "destructive",
condition: (level) => can("yatra_edit_trips") && level.status === "trash"
},
{
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (level) => statusMutation.mutate({ id: level.id, status: "trash" }),
variant: "destructive",
condition: (level) => can("yatra_edit_trips") && level.status !== "trash"
}
];
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 20,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const { data: statsData } = useQuery({
queryKey: ["difficulty-levels-stats"],
queryFn: async () => {
try {
const response = await apiClient.get("/difficulty-levels/stats");
return response;
} catch (error2) {
return { all: 0, publish: 0, draft: 0, trash: 0 };
}
},
enabled: can("yatra_view_trips")
});
const { data, isLoading, error } = useQuery({
queryKey: ["difficulty-levels", queryParams],
queryFn: async () => {
try {
const response = await apiClient.get("/difficulty-levels", {
params: queryParams
});
return response;
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to load difficulty levels", "yatra"),
"error"
);
throw error2;
}
},
enabled: can("yatra_view_trips")
});
const deleteMutation = useMutation({
mutationFn: async (id) => apiClient.delete(`/difficulty-levels/${id}`),
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["difficulty-levels"] });
queryClient2.invalidateQueries({ queryKey: ["difficulty-levels-stats"] });
showToast(
__("Difficulty level deleted successfully", "yatra"),
"success"
);
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete difficulty level", "yatra"),
"error"
);
}
});
const statusMutation = useMutation({
mutationFn: async ({ id, status }) => {
const levelResponse = await apiClient.get(`/difficulty-levels/${id}`);
const level = levelResponse;
return apiClient.put(`/difficulty-levels/${id}`, {
name: level.name,
slug: level.slug,
description: level.description,
icon: level.icon,
sorting: level.sorting,
status
});
},
onSuccess: (_data, variables) => {
queryClient2.invalidateQueries({ queryKey: ["difficulty-levels"] });
queryClient2.invalidateQueries({ queryKey: ["difficulty-levels-stats"] });
const msgMap = {
trash: __("Difficulty level moved to trash", "yatra"),
draft: __("Difficulty level marked as draft", "yatra"),
publish: __("Difficulty level published", "yatra")
};
const msg = msgMap[variables.status] || __("Difficulty level updated successfully", "yatra");
showToast(msg, "success");
},
onError: (error2, variables) => {
const msgMapError = {
trash: __("Failed to move difficulty level to trash", "yatra"),
draft: __("Failed to mark difficulty level as draft", "yatra"),
publish: __("Failed to publish difficulty level", "yatra")
};
const fallback = msgMapError[variables.status] || __("Failed to update difficulty level", "yatra");
showToast((error2 == null ? void 0 : error2.message) || fallback, "error");
}
});
const levels = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 20);
const errorContext = getErrorContext(error);
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: statsData.all ?? 0,
publish: statsData.publish ?? 0,
draft: statsData.draft ?? 0,
trash: statsData.trash ?? 0
};
}
return {
all: 0,
publish: 0,
draft: 0,
trash: 0
};
}, [statsData]);
const formatDate2 = (dateString) => {
if (!dateString) return __("N/A", "yatra");
try {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "2-digit"
});
} catch {
return dateString;
}
};
const getStatusBadge = (status) => {
const map2 = {
publish: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Publish", "yatra")
},
draft: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Draft", "yatra")
},
trash: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Trash", "yatra")
}
};
const info2 = map2[status] || map2.draft;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${info2.className}`,
children: info2.label
}
);
};
const renderIcon = (icon) => {
if (!icon) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "—" }) });
}
if (icon.type === "image") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: icon.value,
alt: "",
className: "w-8 h-8 rounded object-cover",
onError: (e) => {
const target2 = e.target;
target2.style.display = "none";
if (target2.parentElement) {
target2.parentElement.innerHTML = '—
';
}
}
}
);
}
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: icon.value,
provider: icon.provider ?? "yatra",
className: "w-5 h-5 text-gray-600 dark:text-gray-400"
}
) });
};
const handleEdit = (level) => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=difficulty-levels&action=edit&id=${level.id}`;
};
const handleCreate = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=difficulty-levels&action=create`;
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("asc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) return null;
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "ml-1 w-3.5 h-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "ml-1 w-3.5 h-3.5" });
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("sorting");
setSortOrder("asc");
setPage(1);
};
const hasFilters = !!searchTerm || statusFilter !== "all" || sortBy2 !== "sorting" || sortOrder !== "asc";
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
localStorage.setItem(
"yatra_difficulty_levels_columns",
JSON.stringify(newVisibleColumns)
);
};
const handleBulkApply = () => {
if (!bulkAction) {
showToast(__("Select a bulk action first.", "yatra"), "warning");
return;
}
if (selectedIds.length === 0) {
showToast(
__("Select at least one difficulty level.", "yatra"),
"warning"
);
return;
}
const performBulk = async () => {
try {
if (bulkAction === "delete") {
await Promise.all(
selectedIds.map(
(id) => apiClient.delete(`/difficulty-levels/${id}`)
)
);
showToast(
__("Selected difficulty levels deleted successfully", "yatra"),
"success"
);
} else if (bulkAction === "trash" || bulkAction === "draft" || bulkAction === "publish") {
const status = bulkAction === "trash" ? "trash" : bulkAction === "draft" ? "draft" : "publish";
await Promise.all(
selectedIds.map(async (id) => {
try {
const levelResponse = await apiClient.get(
`/difficulty-levels/${id}`
);
const level = levelResponse;
if (!level || !level.name) {
return;
}
await apiClient.put(`/difficulty-levels/${id}`, {
name: level.name,
slug: level.slug,
description: level.description,
icon: level.icon,
sorting: level.sorting,
status
});
} catch {
throw new Error("bulk_item_failed");
}
})
);
const msgMap = {
trash: __("Selected difficulty levels moved to trash", "yatra"),
draft: __("Selected difficulty levels marked as draft", "yatra"),
publish: __("Selected difficulty levels published", "yatra")
};
showToast(msgMap[bulkAction], "success");
}
queryClient2.invalidateQueries({ queryKey: ["difficulty-levels"] });
queryClient2.invalidateQueries({
queryKey: ["difficulty-levels-stats"]
});
setSelectedIds([]);
setBulkAction("");
} catch (error2) {
const msgMapError = {
delete: __("Failed to delete selected difficulty levels", "yatra"),
trash: __(
"Failed to move selected difficulty levels to trash",
"yatra"
),
draft: __(
"Failed to mark selected difficulty levels as draft",
"yatra"
),
publish: __("Failed to publish selected difficulty levels", "yatra")
};
showToast((error2 == null ? void 0 : error2.message) || msgMapError[bulkAction], "error");
}
};
void performBulk();
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, level: null }),
onConfirm: () => {
if (deleteConfirm.level) {
deleteMutation.mutate(deleteConfirm.level.id);
setDeleteConfirm({ isOpen: false, level: null });
}
},
title: __("Delete Difficulty Level", "yatra"),
message: deleteConfirm.level ? __(
'Are you sure you want to delete "{name}"? This action cannot be undone.',
"yatra"
).replace("{name}", deleteConfirm.level.name) : __(
"Are you sure you want to delete this difficulty level? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Difficulty Levels", "yatra"),
description: __(
"Manage trip difficulty levels and their ordering",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: handleCreate, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
__("Add New", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions: [
{ value: "all", label: __("All Status", "yatra") },
{ value: "publish", label: __("Published", "yatra") },
{ value: "draft", label: __("Draft", "yatra") }
],
sortBy: sortBy2,
onSortByChange: (value) => {
setSortBy(value);
setSortOrder("asc");
setPage(1);
},
sortOrder,
onSortOrderChange: (order) => {
setSortOrder(order);
setPage(1);
},
sortOptions: [
{ value: "sorting", label: __("Order", "yatra") },
{ value: "name", label: __("Name", "yatra") },
{ value: "created_at", label: __("Created", "yatra") }
],
onResetFilters: handleResetFilters,
hasFilters,
placeholder: __("Search difficulty levels", "yatra")
}
) }) }),
!error && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all },
{
key: "publish",
label: __("Published", "yatra"),
count: statusCounts.publish
},
{
key: "draft",
label: __("Draft", "yatra"),
count: statusCounts.draft
},
{
key: "trash",
label: __("Trash", "yatra"),
count: statusCounts.trash
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "sorting",
label: __("Order", "yatra"),
visible: visibleColumns.sorting
},
{
key: "name",
label: __("Name", "yatra"),
visible: visibleColumns.name
},
{
key: "slug",
label: __("Slug", "yatra"),
visible: visibleColumns.slug
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "created_at",
label: __("Created", "yatra"),
visible: visibleColumns.created_at
}
],
onToggleColumn: toggleColumn,
bulkMutationPending: false,
totalItems: levels.length,
bulkActionOptions: getDefaultBulkStatusOptions(statusFilter)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: levels,
columns,
actions,
isLoading,
isError: !!error,
errorText: __("Failed to load difficulty levels", "yatra"),
errorDescription: __(
"We couldn’t connect to the difficulty levels service. Please refresh or try again shortly.",
"We couldn’t connect to the difficulty levels service. Please refresh or try again shortly."
),
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["difficulty-levels"] }),
errorDetails: errorContext.details,
errorRequestInfo: errorContext.requestInfo,
emptyText: __("No difficulty levels found", "yatra"),
emptyDescription: __(
"Get started by creating your first difficulty level to categorize trips by their physical challenge level.",
"Get started by creating your first difficulty level to categorize trips by their physical challenge level."
),
onCreateClick: handleCreate,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(
selectedIds.filter((selectedId) => selectedId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(
levels.map((level) => level.id)
);
} else {
setSelectedIds([]);
}
},
isAllSelected: levels.length > 0 && selectedIds.length === levels.length,
getItemId: (level) => level.id,
getItemStatus: (level) => level.status,
statusFilter,
skeletonRows: 5,
capability: "yatra_edit_trips"
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: (newPage) => setPage(newPage),
itemName: __("difficulty levels", "yatra")
}
) })
] });
};
const DifficultyLevelForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
icon: null,
sorting: "",
status: "publish"
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const [isSlugEditable, setIsSlugEditable] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const levelId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0", 10) : null;
}, []);
const isEditMode = action === "edit" && levelId !== null;
const { data: levelData, isLoading: isLoadingLevel } = useQuery({
queryKey: ["difficulty-level", levelId],
queryFn: async () => {
if (!levelId) return null;
try {
const response = await apiClient.get(`/difficulty-levels/${levelId}`);
return response;
} catch (error) {
showToast(
(error == null ? void 0 : error.message) || __("Failed to load difficulty level", "yatra"),
"error"
);
throw error;
}
},
enabled: isEditMode && can("yatra_view_trips")
});
reactExports.useEffect(() => {
if (levelData && isEditMode) {
setFormData({
name: levelData.name || "",
slug: levelData.slug || "",
description: levelData.description || "",
icon: levelData.icon || null,
sorting: typeof levelData.sorting === "number" ? levelData.sorting : "",
status: levelData.status || "publish"
});
}
}, [levelData, isEditMode]);
const handleNameChange = (value) => {
if (!isEditMode && !isSlugEditable) {
const newSlug = generateSlug(value);
setFormData((prev) => ({
...prev,
name: value,
slug: newSlug
}));
} else {
setFormData((prev) => ({ ...prev, name: value }));
}
if (errors.name) {
setErrors((prev) => ({ ...prev, name: "" }));
}
};
const handleSlugChange = (value) => {
if (isSlugEditable) {
setFormData((prev) => ({ ...prev, slug: value }));
if (errors.slug) {
setErrors((prev) => ({ ...prev, slug: "" }));
}
}
};
const handleToggleSlugEdit = () => {
if (isSlugEditable) {
const newSlug = generateSlug(formData.name);
setFormData((prev) => ({ ...prev, slug: newSlug }));
}
setIsSlugEditable(!isSlugEditable);
};
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = __("Name is required", "yatra");
}
if (!formData.slug.trim()) {
newErrors.slug = __("Slug is required", "yatra");
} else if (!/^[\p{L}\p{N}-]+$/u.test(formData.slug)) {
newErrors.slug = __(
"Slug can only contain letters, numbers, and hyphens",
"yatra"
);
}
if (formData.sorting !== "" && Number(formData.sorting) < 0) {
newErrors.sorting = __("Order must be a positive number", "yatra");
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
name: data.name.trim(),
slug: data.slug.trim(),
description: data.description,
icon: data.icon,
sorting: data.sorting === "" ? null : Number(data.sorting),
status: data.status
};
if (isEditMode && isSlugEditable) {
payload.preserve_slug = true;
}
if (isEditMode && levelId) {
return await apiClient.put(`/difficulty-levels/${levelId}`, payload);
}
return await apiClient.post("/difficulty-levels", payload);
},
onSuccess: (response) => {
var _a, _b;
queryClient2.invalidateQueries({ queryKey: ["difficulty-levels"] });
queryClient2.invalidateQueries({
queryKey: ["difficulty-level", levelId]
});
showToast(
isEditMode ? __("Difficulty level updated successfully", "yatra") : __("Difficulty level created successfully", "yatra"),
"success"
);
setIsSubmitting(false);
if (!isEditMode) {
const newId = response == null ? void 0 : response.id;
if (newId) {
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=difficulty-levels&action=edit&id=${newId}`;
} else {
window.location.href = `${((_b = window.yatraAdmin) == null ? void 0 : _b.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=difficulty-levels`;
}
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the difficulty level", "yatra");
showToast(errorMessage, "error");
setIsSubmitting(false);
}
});
const handleSubmit = (e) => {
e.preventDefault();
if (!validateForm()) {
showToast(__("Please fix the form errors", "yatra"), "warning");
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=difficulty-levels`;
};
if (isEditMode && isLoadingLevel) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
[1, 2, 3].map((_, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }, idx)),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-32 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: [1, 2, 3].map((_, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) }, idx)) })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Difficulty Level", "yatra") : __("Add Difficulty Level", "yatra"),
description: isEditMode ? __("Update difficulty level information", "yatra") : __("Create a new trip difficulty level", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Basic Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "name",
type: "text",
value: formData.name,
onChange: (e) => handleNameChange(e.target.value),
placeholder: __("Enter difficulty level name", "yatra"),
className: errors.name ? "border-red-500" : "",
required: true
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "slug",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Slug", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "slug",
type: "text",
value: formData.slug,
onChange: (e) => handleSlugChange(e.target.value),
placeholder: __("difficulty-slug", "yatra"),
className: `pr-10 ${errors.slug ? "border-red-500" : ""} ${!isSlugEditable ? "bg-gray-50 dark:bg-gray-800 cursor-not-allowed" : ""}`,
disabled: !isSlugEditable,
required: true
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: handleToggleSlugEdit,
className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors rounded",
"aria-label": isSlugEditable ? __("Cancel editing slug", "yatra") : __("Edit slug", "yatra"),
children: isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-4 h-4" })
}
)
] }),
errors.slug && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: isSlugEditable ? __(
"Manually editing slug. Click X to cancel and regenerate from name.",
"yatra"
) : __(
"Auto-generated from name. Click edit icon to customize.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
RichTextEditor,
{
label: __("Description", "yatra"),
value: formData.description || "",
onChange: (value) => handleFieldChange("description", value),
placeholder: __(
"Describe this difficulty level (supports formatting, lists, links...)",
"yatra"
),
helperText: __(
"Use formatting, bullet lists, and links to explain this difficulty level. HTML is supported.",
"yatra"
),
minHeight: 260,
maxHeight: 600
}
)
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Ordering & Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "sorting",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Display Order", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "sorting",
type: "number",
min: 0,
value: formData.sorting,
onChange: (e) => handleFieldChange(
"sorting",
e.target.value === "" ? "" : Number(e.target.value)
),
placeholder: __("Auto", "yatra"),
className: errors.sorting ? "border-red-500" : ""
}
),
errors.sorting && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.sorting }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: __(
"Lower numbers appear first. Leave blank to auto-assign.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Difficulty Level Icon or Image", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconPicker,
{
value: formData.icon,
onChange: (value) => handleFieldChange("icon", value),
label: __("Select Icon or Upload Image", "yatra"),
helpText: __(
"Choose a library icon or upload a custom image for this difficulty level.",
"yatra"
),
allowImageUpload: true,
allowIconSelection: true,
size: "md"
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Difficulty Level", "yatra") : __("Create Difficulty Level", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] }) }) }) })
] })
] }) }) })
] });
};
function getDateFormat() {
var _a, _b;
return ((_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.date_format) || ((_b = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _b.dateFormat) || "Y-m-d";
}
function getTimeFormat() {
var _a, _b;
return ((_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.time_format) || ((_b = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _b.timeFormat) || "H:i";
}
function formatDate$1(dateString, includeTime = false) {
if (!dateString) return "-";
try {
const date2 = typeof dateString === "string" ? new Date(dateString) : dateString;
if (isNaN(date2.getTime())) {
return String(dateString);
}
const phpDateFormat = getDateFormat();
const phpTimeFormat = getTimeFormat();
const formattedDate = formatDatePart(date2, phpDateFormat);
if (includeTime) {
const formattedTime = formatTimePart(date2, phpTimeFormat);
return `${formattedDate} ${formattedTime}`;
}
return formattedDate;
} catch (e) {
return String(dateString);
}
}
function formatDatePart(date2, phpFormat) {
const year = date2.getFullYear();
const month = date2.getMonth();
const day = date2.getDate();
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
const monthShort = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
const pad2 = (n) => n.toString().padStart(2, "0");
const dayNames2 = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
const dayShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const dayOfWeek = date2.getDay();
switch (phpFormat) {
case "Y-m-d":
return `${year}-${pad2(month + 1)}-${pad2(day)}`;
case "Y/m/d":
return `${year}/${pad2(month + 1)}/${pad2(day)}`;
case "m/d/Y":
return `${pad2(month + 1)}/${pad2(day)}/${year}`;
case "d/m/Y":
return `${pad2(day)}/${pad2(month + 1)}/${year}`;
case "d-m-Y":
return `${pad2(day)}-${pad2(month + 1)}-${year}`;
case "d.m.Y":
return `${pad2(day)}.${pad2(month + 1)}.${year}`;
case "M d, Y":
return `${monthShort[month]} ${pad2(day)}, ${year}`;
case "F d, Y":
return `${monthNames[month]} ${pad2(day)}, ${year}`;
case "d M Y":
return `${pad2(day)} ${monthShort[month]} ${year}`;
case "d F Y":
return `${pad2(day)} ${monthNames[month]} ${year}`;
case "M j, Y":
return `${monthShort[month]} ${day}, ${year}`;
case "F j, Y":
return `${monthNames[month]} ${day}, ${year}`;
case "j M Y":
return `${day} ${monthShort[month]} ${year}`;
case "j F Y":
return `${day} ${monthNames[month]} ${year}`;
case "Y M j":
return `${year} ${monthShort[month]} ${day}`;
case "Y F j":
return `${year} ${monthNames[month]} ${day}`;
case "l, F j, Y":
return `${dayNames2[dayOfWeek]}, ${monthNames[month]} ${day}, ${year}`;
case "D, M j, Y":
return `${dayShort[dayOfWeek]}, ${monthShort[month]} ${day}, ${year}`;
default:
return `${year}-${pad2(month + 1)}-${pad2(day)}`;
}
}
function formatTimePart(date2, phpFormat) {
const hours = date2.getHours();
const minutes = date2.getMinutes();
const seconds = date2.getSeconds();
const pad2 = (n) => n.toString().padStart(2, "0");
const hours12 = hours % 12 || 12;
const ampm = hours >= 12 ? "PM" : "AM";
switch (phpFormat) {
case "H:i":
return `${pad2(hours)}:${pad2(minutes)}`;
case "h:i A":
return `${pad2(hours12)}:${pad2(minutes)} ${ampm}`;
case "h:i a":
return `${pad2(hours12)}:${pad2(minutes)} ${ampm.toLowerCase()}`;
case "H:i:s":
return `${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}`;
case "h:i:s A":
return `${pad2(hours12)}:${pad2(minutes)}:${pad2(seconds)} ${ampm}`;
default:
return `${pad2(hours)}:${pad2(minutes)}`;
}
}
function formatDateForInput(dateString) {
if (!dateString) return "";
try {
const date2 = typeof dateString === "string" ? new Date(dateString) : dateString;
if (isNaN(date2.getTime())) {
return "";
}
const year = date2.getFullYear();
const month = (date2.getMonth() + 1).toString().padStart(2, "0");
const day = date2.getDate().toString().padStart(2, "0");
return `${year}-${month}-${day}`;
} catch (e) {
return "";
}
}
const Bookings = () => {
var _a, _b, _c;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [paymentFilter, setPaymentFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("booking_date");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [isBulkPending, setIsBulkPending] = reactExports.useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = reactExports.useState(false);
const [bookingToDelete, setBookingToDelete] = reactExports.useState(null);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
if (typeof window === "undefined") {
return {
booking_number: true,
customer: true,
trip: true,
travelers: true,
booking_date: true,
travel_date: true,
amount: true,
payment_status: true,
booking_status: true
};
}
const saved = window.localStorage.getItem("yatra-bookings-visible-columns");
return saved ? JSON.parse(saved) : {
booking_number: true,
customer: true,
trip: true,
travelers: true,
booking_date: true,
travel_date: true,
amount: true,
payment_status: true,
booking_status: true
};
});
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const defaultCurrency = ((_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.currency) || ((_b = window == null ? void 0 : window.yatraBookingData) == null ? void 0 : _b.currency) || "USD";
const translations = ((_c = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _c.translations) || {};
const statsEnabled = can("yatra_view_bookings") !== false;
const __2 = (text) => translations[text] || text;
const BOOKINGS_PER_PAGE = 10;
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: BOOKINGS_PER_PAGE,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
if (paymentFilter !== "all") {
params.payment_status = paymentFilter;
}
return params;
}, [searchTerm, statusFilter, paymentFilter, sortBy2, sortOrder, page]);
const canViewBookings = can("yatra_view_bookings") !== false;
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["bookings", queryParams],
queryFn: async () => {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("simulate_error") === "true") {
throw new Error(
"Simulated API error for testing error UI functionality"
);
}
const params = new URLSearchParams();
params.append("page", String(queryParams.page));
params.append("per_page", String(queryParams.per_page));
if (queryParams.search) {
params.append("search", queryParams.search);
}
if (queryParams.status) {
params.append("status", queryParams.status);
}
if (queryParams.payment_status) {
params.append("payment_status", queryParams.payment_status);
}
return await apiService.getBookings({
page: queryParams.page,
per_page: queryParams.per_page,
search: queryParams.search,
status: queryParams.status,
payment_status: queryParams.payment_status
});
},
enabled: canViewBookings
});
const { data: statsRaw } = useQuery({
queryKey: ["bookings-stats"],
queryFn: async () => {
return await apiService.getBookingsStats();
},
enabled: statsEnabled
});
const statsData = statsRaw ?? {};
const totalBookings = (statsData == null ? void 0 : statsData.all) ?? 0;
const confirmedCount = (statsData == null ? void 0 : statsData.confirmed) ?? 0;
const pendingCount = (statsData == null ? void 0 : statsData.pending) ?? 0;
const cancelledCount = (statsData == null ? void 0 : statsData.cancelled) ?? 0;
const completedCount = (statsData == null ? void 0 : statsData.completed) ?? 0;
const deleteMutation = useMutation({
mutationFn: async (id) => {
await apiService.deleteBooking(id);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
queryClient2.invalidateQueries({ queryKey: ["bookings-stats"] });
showToast(__2("Booking deleted successfully"), "success");
},
onError: (error2) => {
showToast((error2 == null ? void 0 : error2.message) || __2("Failed to delete booking"), "error");
}
});
const bookings = (data == null ? void 0 : data.data) || [];
const listMeta = (data == null ? void 0 : data.meta) ?? {};
const total = Number(listMeta.total ?? (data == null ? void 0 : data.total) ?? 0);
const perPage = Number(listMeta.per_page ?? (data == null ? void 0 : data.per_page) ?? BOOKINGS_PER_PAGE) || BOOKINGS_PER_PAGE;
const totalPages = Math.max(
1,
Number(listMeta.total_pages) || (total > 0 ? Math.ceil(total / perPage) : 1)
);
const errorContext = getErrorContext(error);
const apiErrorMessage = (data == null ? void 0 : data.error) || (data == null ? void 0 : data.message);
const derivedErrorDetails = errorContext.details || (apiErrorMessage ? String(apiErrorMessage) : void 0) || (error ? String((error == null ? void 0 : error.message) || error) : void 0);
const isBookingsError = !!error || !!apiErrorMessage;
const formatDate2 = (dateString) => {
return formatDate$1(dateString);
};
const formatPrice = (price, currencyCode = defaultCurrency) => formatYatraMoney(Number(price) || 0, currencyCode, {
zeroAsUnknown: false
});
const getBookingStatusBadge = (status) => {
const statusMap = {
confirmed: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __2("Confirmed")
},
pending: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __2("Pending")
},
// Guest-checkout holding state: row exists but the customer hasn't
// clicked the email-verification link yet, so the booking-created
// fan-out (admin notify + customer confirmation) is deferred.
// Visually amber-on-amber so it reads as "waiting on something
// outside our control" — distinct from the regular yellow "pending"
// (which means waiting on the operator).
pending_verification: {
className: "bg-amber-100 text-amber-800 dark:bg-amber-900/20 dark:text-amber-300 border border-amber-200 dark:border-amber-800",
label: __2("Awaiting email verification")
},
cancelled: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __2("Cancelled")
},
completed: {
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400",
label: __2("Completed")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const getPaymentStatusBadge = (status) => {
const statusMap = {
paid: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __2("Paid")
},
pending: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __2("Pending")
},
partial: {
className: "bg-orange-100 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400",
label: __2("Partial")
},
refunded: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __2("Refunded")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const handleEdit = (booking) => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=bookings&action=edit&id=${booking.id}`;
};
const handleDelete = (booking) => {
setBookingToDelete(booking);
setDeleteDialogOpen(true);
};
const confirmDelete = () => {
if (bookingToDelete) {
deleteMutation.mutate(bookingToDelete.id);
setDeleteDialogOpen(false);
setBookingToDelete(null);
}
};
const cancelDelete = () => {
setDeleteDialogOpen(false);
setBookingToDelete(null);
};
const handleView = (booking) => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=bookings&action=view&id=${booking.id}`;
};
const handleCreateBooking = () => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=bookings&action=create`;
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setPaymentFilter("all");
setSortBy("booking_date");
setSortOrder("desc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("desc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || paymentFilter !== "all" || sortBy2 !== "booking_date" || sortOrder !== "desc";
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
if (typeof window !== "undefined") {
window.localStorage.setItem(
"yatra-bookings-visible-columns",
JSON.stringify(newVisibleColumns)
);
}
};
const handleSelectItem = (id, checked) => {
setSelectedIds(
(prev) => checked ? [...prev, id] : prev.filter((selectedId) => selectedId !== id)
);
};
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(bookings.map((booking) => booking.id));
} else {
setSelectedIds([]);
}
};
const isAllSelected = bookings.length > 0 && selectedIds.length === bookings.length;
const updateStatusForIds = async (ids, newStatus) => {
await apiService.bulkUpdateStatus("bookings", ids, newStatus);
};
const handleBulkApply = async () => {
if (!bulkAction || selectedIds.length === 0) {
return;
}
try {
setIsBulkPending(true);
if (bulkAction === "delete") {
await apiService.bulkDelete("bookings", selectedIds);
showToast(__2("Selected bookings deleted successfully"), "success");
} else {
await updateStatusForIds(selectedIds, bulkAction);
showToast(__2("Bulk booking status updated successfully"), "success");
}
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
queryClient2.invalidateQueries({ queryKey: ["bookings-stats"] });
setSelectedIds([]);
setBulkAction("");
} catch (error2) {
showToast(
__2("Error: ") + ((error2 == null ? void 0 : error2.message) || __2("Failed to perform bulk action on bookings")),
"error"
);
} finally {
setIsBulkPending(false);
}
};
const allBulkActionOptions = [
{ value: "confirmed", label: __2("Mark as Confirmed") },
{ value: "pending", label: __2("Mark as Pending") },
{ value: "cancelled", label: __2("Mark as Cancelled") },
{ value: "completed", label: __2("Mark as Completed") },
{ value: "delete", label: __2("Delete permanently") }
];
const getBulkActionOptionsForStatus = (view) => {
switch (view) {
case "confirmed":
return allBulkActionOptions.filter(
(opt) => ["pending", "cancelled", "completed", "delete"].includes(opt.value)
);
case "pending":
return allBulkActionOptions.filter(
(opt) => ["confirmed", "cancelled", "completed", "delete"].includes(opt.value)
);
case "cancelled":
return allBulkActionOptions.filter(
(opt) => ["pending", "confirmed", "delete"].includes(opt.value)
);
case "completed":
return allBulkActionOptions.filter(
(opt) => ["confirmed", "cancelled", "delete"].includes(opt.value)
);
default:
return allBulkActionOptions;
}
};
const bulkActionOptions = getBulkActionOptionsForStatus(statusFilter);
const statusOptions = [
{
value: "all",
label: __2("All Status"),
count: (statsData == null ? void 0 : statsData.all) ?? totalBookings
},
{ value: "confirmed", label: __2("Confirmed"), count: confirmedCount },
{ value: "pending", label: __2("Pending"), count: pendingCount },
{ value: "cancelled", label: __2("Cancelled"), count: cancelledCount },
{ value: "completed", label: __2("Completed"), count: completedCount }
];
const sortOptions = [
{ value: "booking_date", label: __2("Booking Date") },
{ value: "travel_date", label: __2("Travel Date") },
{ value: "booking_number", label: __2("Booking Number") },
{ value: "customer_name", label: __2("Customer") },
{ value: "trip_title", label: __2("Trip") },
{ value: "total_amount", label: __2("Amount") },
{ value: "booking_status", label: __2("Status") }
];
const columnOptions = [
{
key: "booking_number",
label: __2("Booking #"),
visible: visibleColumns.booking_number
},
{
key: "customer",
label: __2("Customer"),
visible: visibleColumns.customer
},
{ key: "trip", label: __2("Trip"), visible: visibleColumns.trip },
{
key: "travelers",
label: __2("Travelers"),
visible: visibleColumns.travelers
},
{
key: "booking_date",
label: __2("Booking Date"),
visible: visibleColumns.booking_date
},
{
key: "travel_date",
label: __2("Travel Date"),
visible: visibleColumns.travel_date
},
{ key: "amount", label: __2("Amount"), visible: visibleColumns.amount },
{
key: "payment_status",
label: __2("Payment"),
visible: visibleColumns.payment_status
},
{
key: "booking_status",
label: __2("Status"),
visible: visibleColumns.booking_status
}
];
const columns = [
{
key: "booking_number",
label: __2("Booking #"),
sortable: true,
visible: visibleColumns.booking_number,
width: "w-[140px]",
render: (booking) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => handleView(booking),
className: "text-sm font-mono font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline",
children: booking.booking_number
}
)
},
{
key: "customer",
label: __2("Customer"),
sortable: true,
visible: visibleColumns.customer,
render: (booking) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: booking.customer_name || __2("Guest") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground", children: booking.customer_email })
] })
},
{
key: "trip",
label: __2("Trip"),
sortable: true,
visible: visibleColumns.trip,
render: (booking) => {
var _a2;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&action=edit&id=${booking.trip_id}`,
className: "font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300",
children: booking.trip_title
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-[11px] text-gray-400 dark:text-gray-500", children: booking.trip_id ? `(ID: ${booking.trip_id})` : "" })
] });
}
},
{
key: "travelers",
label: __2("Travelers"),
sortable: true,
visible: visibleColumns.travelers,
render: (booking) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: booking.travelers ?? booking.travelers_count ?? 0 })
},
{
key: "booking_date",
label: __2("Booking Date"),
sortable: true,
visible: visibleColumns.booking_date,
render: (booking) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatDate2(booking.booking_date) })
},
{
key: "travel_date",
label: __2("Travel Date"),
sortable: true,
visible: visibleColumns.travel_date,
render: (booking) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatDate2(booking.travel_date) })
},
{
key: "amount",
label: __2("Amount"),
sortable: true,
visible: visibleColumns.amount,
render: (booking) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold", children: formatPrice(booking.total_amount, booking.currency) }),
booking.amount_paid ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground", children: [
__2("Paid: "),
formatPrice(booking.amount_paid, booking.currency)
] }) : null
] })
},
{
key: "payment_status",
label: __2("Payment"),
sortable: true,
visible: visibleColumns.payment_status,
render: (booking) => getPaymentStatusBadge(booking.payment_status)
},
{
key: "booking_status",
label: __2("Status"),
sortable: true,
visible: visibleColumns.booking_status,
render: (booking) => getBookingStatusBadge(booking.booking_status)
}
];
const actions = [
{
key: "view",
label: __2("View"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (booking) => handleView(booking),
condition: () => can("yatra_view_bookings")
},
{
key: "edit",
label: __2("Edit"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (booking) => handleEdit(booking),
condition: () => can("yatra_edit_bookings")
},
{
key: "mark_confirmed",
label: __2("Mark as Confirmed"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (booking) => {
setIsBulkPending(true);
try {
await updateStatusForIds([booking.id], "confirmed");
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
queryClient2.invalidateQueries({ queryKey: ["bookings-stats"] });
showToast(__2("Booking status updated"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __2("Failed to update booking status"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (booking) => can("yatra_edit_bookings") && booking.booking_status !== "confirmed"
},
{
key: "mark_pending",
label: __2("Mark as Pending"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: async (booking) => {
setIsBulkPending(true);
try {
await updateStatusForIds([booking.id], "pending");
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
queryClient2.invalidateQueries({ queryKey: ["bookings-stats"] });
showToast(__2("Booking status updated"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __2("Failed to update booking status"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (booking) => can("yatra_edit_bookings") && booking.booking_status !== "pending"
},
{
key: "mark_cancelled",
label: __2("Mark as Cancelled"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (booking) => {
setIsBulkPending(true);
try {
await updateStatusForIds([booking.id], "cancelled");
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
queryClient2.invalidateQueries({ queryKey: ["bookings-stats"] });
showToast(__2("Booking status updated"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __2("Failed to update booking status"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (booking) => can("yatra_edit_bookings") && booking.booking_status !== "cancelled"
},
{
key: "mark_completed",
label: __2("Mark as Completed"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (booking) => {
setIsBulkPending(true);
try {
await updateStatusForIds([booking.id], "completed");
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
queryClient2.invalidateQueries({ queryKey: ["bookings-stats"] });
showToast(__2("Booking status updated"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __2("Failed to update booking status"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (booking) => can("yatra_edit_bookings") && booking.booking_status !== "completed"
},
{
key: "delete",
label: __2("Delete"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (booking) => handleDelete(booking),
variant: "destructive",
condition: () => can("yatra_delete_bookings")
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __2("Bookings"),
description: __2("Manage customer bookings and reservations"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateBooking,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__2("Create Booking")
]
}
) })
}
),
statsData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground", children: __2("Total Bookings") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-semibold", children: totalBookings })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground", children: __2("Confirmed") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-semibold", children: confirmedCount })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground", children: __2("Pending") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-semibold", children: pendingCount })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground", children: __2("Cancelled") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-semibold", children: cancelledCount })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row gap-3 items-stretch lg:items-center w-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions,
sortBy: sortBy2,
onSortByChange: (field) => {
setSortBy(field);
setPage(1);
},
sortOrder,
onSortOrderChange: (order) => {
setSortOrder(order);
setPage(1);
},
sortOptions,
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __2("Search bookings...")
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-auto lg:min-w-[160px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: paymentFilter,
onChange: (e) => {
setPaymentFilter(e.target.value);
setPage(1);
},
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __2("All Payments") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "paid", children: __2("Paid") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "pending", children: __2("Pending") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "partial", children: __2("Partial") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "refunded", children: __2("Refunded") })
]
}
) })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_bookings", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions: [
{
key: "all",
label: __2("All"),
count: (statsData == null ? void 0 : statsData.all) ?? totalBookings
},
{
key: "confirmed",
label: __2("Confirmed"),
count: confirmedCount
},
{ key: "pending", label: __2("Pending"), count: pendingCount },
{
key: "cancelled",
label: __2("Cancelled"),
count: cancelledCount
},
{
key: "completed",
label: __2("Completed"),
count: completedCount
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: isBulkPending,
totalItems: total,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: bookings,
columns,
actions,
isLoading,
isError: isBookingsError,
errorText: __2("Error loading bookings"),
errorDescription: __2(
"We couldn't connect to the bookings service. Please refresh or try again shortly."
),
errorDetails: derivedErrorDetails,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => refetch(),
emptyText: __2("No bookings found"),
emptyDescription: hasFilters ? __2("Try adjusting your filters to see more results.") : __2("Get started by creating your first booking."),
onCreateClick: can("yatra_edit_bookings") ? handleCreateBooking : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: handleSelectItem,
onSelectAll: handleSelectAll,
isAllSelected,
getItemId: (booking) => booking.id,
skeletonRows: 5,
capability: "yatra_view_bookings"
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: perPage,
onPageChange: (newPage) => setPage(newPage),
itemName: __2("bookings")
}
) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteDialogOpen,
onClose: cancelDelete,
onConfirm: confirmDelete,
title: __2("Delete Booking"),
description: bookingToDelete ? __2(
`Are you sure you want to delete booking "${bookingToDelete.booking_number}"? This action cannot be undone.`
) : __2("Are you sure you want to delete this booking?"),
confirmText: __2("Delete"),
cancelText: __2("Cancel"),
variant: "danger",
isLoading: deleteMutation.isPending,
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-6 h-6 text-red-500" })
}
)
] });
};
const Customers = () => {
var _a, _b;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [loyaltyFilter, setLoyaltyFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("created_at");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [isBulkPending, setIsBulkPending] = reactExports.useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = reactExports.useState(false);
const [customerToDelete, setCustomerToDelete] = reactExports.useState(
null
);
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const { can, isPro } = usePermissions();
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const translations = ((_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.translations) || {};
const __2 = (text) => translations[text] || text;
const baseAdminUrl = ((_b = window.yatraAdmin) == null ? void 0 : _b.adminUrl) || "";
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
if (typeof window === "undefined") {
return {
customer: true,
location: true,
total_bookings: true,
total_spent: true,
loyalty: true,
status: true,
created_at: true
};
}
const saved = window.localStorage.getItem(
"yatra-customers-visible-columns"
);
return saved ? JSON.parse(saved) : {
customer: true,
location: true,
total_bookings: true,
total_spent: true,
loyalty: true,
status: true,
created_at: true
};
});
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
if (loyaltyFilter !== "all") {
params.loyalty_tier = loyaltyFilter;
}
return params;
}, [searchTerm, statusFilter, loyaltyFilter, sortBy2, sortOrder, page]);
const { data, isLoading, error } = useQuery({
queryKey: ["customers", queryParams],
queryFn: async () => {
const paramsObj = {};
Object.entries(queryParams).forEach(([key2, value]) => {
if (value !== void 0 && value !== null && value !== "") {
paramsObj[key2] = value;
}
});
return await apiService.getCustomers(paramsObj);
},
enabled: can("yatra_view_customers")
});
const { data: statsRaw } = useQuery({
queryKey: ["customers-stats"],
queryFn: async () => {
return await apiService.getCustomerStats();
},
enabled: can("yatra_view_customers")
});
const statsData = statsRaw ?? {};
const deleteMutation = useMutation({
mutationFn: async (id) => {
await apiService.deleteCustomer(id);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["customers"] });
setDeleteDialogOpen(false);
setCustomerToDelete(null);
showToast(__2("Customer deleted successfully"), "success");
},
onError: (error2) => {
showToast((error2 == null ? void 0 : error2.message) || __2("Failed to delete customer"), "error");
}
});
const customers = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = (data == null ? void 0 : data.pages) || Math.ceil(total / 10);
const errorContext = getErrorContext(error);
const formatDate2 = (dateString) => {
return formatDate$1(dateString);
};
const formatPrice = (price, currencyCode = "USD") => formatYatraMoney(Number(price) || 0, currencyCode, {
zeroAsUnknown: false
});
const getStatusBadge = (status) => {
const statusMap = {
active: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __2("Active")
},
inactive: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __2("Inactive")
},
blocked: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __2("Blocked")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const getLoyaltyBadge = (tier) => {
const tierMap = {
bronze: {
className: "bg-amber-100 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400",
icon: "🥉"
},
silver: {
className: "bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300",
icon: "🥈"
},
gold: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
icon: "🥇"
},
platinum: {
className: "bg-purple-100 text-purple-700 dark:bg-purple-900/20 dark:text-purple-400",
icon: "💎"
}
};
const tierInfo = tierMap[tier] || tierMap["bronze"];
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"span",
{
className: `inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium ${tierInfo.className}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: tierInfo.icon }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "capitalize", children: tier })
]
}
);
};
const handleEdit = (customer) => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=customers&action=edit&id=${customer.id}`;
};
const handleDelete = (customer) => {
setCustomerToDelete(customer);
setDeleteDialogOpen(true);
};
const confirmDelete = () => {
if (customerToDelete) {
deleteMutation.mutate(customerToDelete.id);
}
};
const handleView = (customer) => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=customers&action=view&id=${customer.id}`;
};
const handleCreateCustomer = () => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=customers&action=create`;
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setLoyaltyFilter("all");
setSortBy("created_at");
setSortOrder("desc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("desc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || loyaltyFilter !== "all" || sortBy2 !== "created_at" || sortOrder !== "desc";
const toggleColumn = (key2) => {
const next = {
...visibleColumns,
[key2]: !visibleColumns[key2]
};
setVisibleColumns(next);
if (typeof window !== "undefined") {
window.localStorage.setItem(
"yatra-customers-visible-columns",
JSON.stringify(next)
);
}
};
const handleSelectItem = (id, checked) => {
setSelectedIds(
(prev) => checked ? [...prev, id] : prev.filter((v) => v !== id)
);
};
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(customers.map((customer) => customer.id));
} else {
setSelectedIds([]);
}
};
const isAllSelected = customers.length > 0 && selectedIds.length === customers.length;
const updateStatusForIds = async (ids, newStatus) => {
await Promise.all(
ids.map(async (id) => {
await apiService.updateCustomerStatus(id, newStatus);
})
);
};
const handleBulkApply = async () => {
if (!bulkAction || selectedIds.length === 0) {
return;
}
try {
setIsBulkPending(true);
if (bulkAction === "delete") {
await Promise.all(
selectedIds.map((id) => apiService.deleteCustomer(id))
);
showToast(__2("Selected customers deleted successfully"), "success");
} else {
await updateStatusForIds(selectedIds, bulkAction);
showToast(__2("Customer statuses updated successfully"), "success");
}
queryClient2.invalidateQueries({ queryKey: ["customers"] });
setSelectedIds([]);
setBulkAction("");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __2("Failed to perform bulk action on customers"),
"error"
);
} finally {
setIsBulkPending(false);
}
};
const allBulkActionOptions = [
{ value: "active", label: __2("Mark as Active") },
{ value: "inactive", label: __2("Mark as Inactive") },
{ value: "blocked", label: __2("Mark as Blocked") },
{ value: "delete", label: __2("Delete permanently") }
];
const getBulkActionOptionsForStatus = (view) => {
switch (view) {
case "active":
return allBulkActionOptions.filter(
(opt) => ["inactive", "blocked", "delete"].includes(opt.value)
);
case "inactive":
return allBulkActionOptions.filter(
(opt) => ["active", "blocked", "delete"].includes(opt.value)
);
case "blocked":
return allBulkActionOptions.filter(
(opt) => ["active", "inactive", "delete"].includes(opt.value)
);
default:
return allBulkActionOptions;
}
};
const bulkActionOptions = getBulkActionOptionsForStatus(statusFilter);
const statusOptions = [
{ value: "all", label: __2("All Status") },
{ value: "active", label: __2("Active") },
{ value: "inactive", label: __2("Inactive") },
{ value: "blocked", label: __2("Blocked") }
];
const sortOptions = [
{ value: "created_at", label: __2("Registration Date") },
{ value: "name", label: __2("Name") },
{ value: "email", label: __2("Email") },
{ value: "country", label: __2("Country") },
{ value: "total_bookings", label: __2("Bookings") },
{ value: "total_spent", label: __2("Total Spent") },
{ value: "status", label: __2("Status") }
];
const columnOptions = [
{
key: "customer",
label: __2("Customer"),
visible: visibleColumns.customer
},
{
key: "location",
label: __2("Location"),
visible: visibleColumns.location
},
{
key: "total_bookings",
label: __2("Bookings"),
visible: visibleColumns.total_bookings
},
{
key: "total_spent",
label: __2("Total Spent"),
visible: visibleColumns.total_spent
},
{ key: "loyalty", label: __2("Loyalty"), visible: visibleColumns.loyalty },
{ key: "status", label: __2("Status"), visible: visibleColumns.status },
{
key: "created_at",
label: __2("Registered"),
visible: visibleColumns.created_at
}
];
const columns = [
{
key: "customer",
label: __2("Customer"),
sortable: true,
visible: visibleColumns.customer,
render: (customer) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${baseAdminUrl}?page=yatra&subpage=customers&action=view&id=${customer.id}`,
className: "hover:underline underline-offset-2 text-blue-600 dark:text-blue-400",
children: customer.name || `${customer.first_name} ${customer.last_name}`
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: customer.email }),
customer.phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { className: "w-3 h-3" }),
customer.phone
] })
] })
},
{
key: "location",
label: __2("Location"),
sortable: true,
visible: visibleColumns.location,
render: (customer) => customer.country ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-3.5 h-3.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
customer.city ? `${customer.city}, ` : "",
customer.country
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "-" })
},
isPro && {
key: "total_bookings",
label: __2("Bookings"),
sortable: true,
visible: visibleColumns.total_bookings,
render: (customer) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: customer.total_bookings })
},
isPro && {
key: "total_spent",
label: __2("Total Spent"),
sortable: true,
visible: visibleColumns.total_spent,
render: (customer) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: formatPrice(customer.total_spent) })
},
{
key: "loyalty",
label: __2("Loyalty"),
sortable: false,
visible: visibleColumns.loyalty,
render: (customer) => getLoyaltyBadge(customer.loyalty_tier || "bronze")
},
{
key: "status",
label: __2("Status"),
sortable: true,
visible: visibleColumns.status,
render: (customer) => getStatusBadge(customer.status)
},
{
key: "created_at",
label: __2("Registered"),
sortable: true,
visible: visibleColumns.created_at,
render: (customer) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: formatDate2(customer.created_at) })
}
].filter(Boolean);
const actions = [
{
key: "view",
label: __2("View"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (customer) => handleView(customer)
},
{
key: "edit",
label: __2("Edit"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (customer) => handleEdit(customer),
condition: () => can("yatra_edit_customers")
},
{
key: "mark_active",
label: __2("Mark as Active"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-4 h-4" }),
onClick: async (customer) => {
await updateStatusForIds([customer.id], "active");
queryClient2.invalidateQueries({ queryKey: ["customers"] });
},
condition: (customer) => can("yatra_edit_customers") && customer.status !== "active"
},
{
key: "mark_inactive",
label: __2("Mark as Inactive"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PauseCircle, { className: "w-4 h-4" }),
onClick: async (customer) => {
await updateStatusForIds([customer.id], "inactive");
queryClient2.invalidateQueries({ queryKey: ["customers"] });
},
condition: (customer) => can("yatra_edit_customers") && customer.status !== "inactive"
},
{
key: "mark_blocked",
label: __2("Mark as Blocked"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldX, { className: "w-4 h-4" }),
onClick: async (customer) => {
await updateStatusForIds([customer.id], "blocked");
queryClient2.invalidateQueries({ queryKey: ["customers"] });
},
condition: (customer) => can("yatra_edit_customers") && customer.status !== "blocked"
},
{
key: "delete",
label: __2("Delete"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (customer) => handleDelete(customer),
variant: "destructive",
condition: () => can("yatra_delete_customers")
}
];
const renderSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(Table$1, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "w-[250px]", children: __2("Customer") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __2("Location") }),
isPro && /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __2("Bookings") }),
isPro && /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __2("Total Spent") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __2("Loyalty") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __2("Status") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __2("Registered") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "text-right w-[100px]", children: __2("Actions") })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-40" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-24" }) }),
isPro && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-8" }) }),
isPro && /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-16" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-16 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-14 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-8 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-8 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-8 rounded" })
] }) })
] }, i)) })
] });
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __2("Customers"),
description: __2("Manage your customer database"),
actionCapability: "yatra_edit_customers",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateCustomer,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__2("Add New Customer")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_customers", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: isPro ? "lg:col-span-8" : "lg:col-span-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions,
sortBy: sortBy2,
onSortByChange: (field) => {
setSortBy(field);
setPage(1);
},
sortOrder,
onSortOrderChange: (order) => {
setSortOrder(order);
setPage(1);
},
sortOptions,
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __2("Search customers...")
}
) }),
isPro && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: loyaltyFilter,
onChange: (e) => {
setLoyaltyFilter(e.target.value);
setPage(1);
},
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __2("All Tiers") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "bronze", children: __2("Bronze") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "silver", children: __2("Silver") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "gold", children: __2("Gold") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "platinum", children: __2("Platinum") })
]
}
) })
] }) }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_customers", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions: [
{ key: "all", label: __2("All"), count: (statsData == null ? void 0 : statsData.all) ?? 0 },
{
key: "active",
label: __2("Active"),
count: (statsData == null ? void 0 : statsData.active) ?? 0
},
{
key: "inactive",
label: __2("Inactive"),
count: (statsData == null ? void 0 : statsData.inactive) ?? 0
},
{
key: "blocked",
label: __2("Blocked"),
count: (statsData == null ? void 0 : statsData.blocked) ?? 0
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: isBulkPending,
totalItems: total,
bulkActionOptions
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(ConditionalRender, { capability: "yatra_view_customers", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: isLoading ? renderSkeleton() : /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: customers,
columns,
actions,
isLoading,
isError: !!error,
errorText: __2("Error loading customers"),
errorDetails: errorContext.details,
errorRequestInfo: errorContext.requestInfo,
errorDescription: __2(
"We couldn’t connect to the customers service. Please refresh or try again shortly."
),
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["customers"] }),
emptyText: __2("No customers found"),
emptyDescription: hasFilters ? __2("Try adjusting your filters to see more results.") : __2("Customers will appear here when bookings are made"),
onCreateClick: can("yatra_edit_customers") ? handleCreateCustomer : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: handleSelectItem,
onSelectAll: handleSelectAll,
isAllSelected,
getItemId: (customer) => customer.id,
skeletonRows: 5,
capability: "yatra_view_customers"
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: (newPage) => setPage(newPage),
itemName: __2("customers")
}
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteDialogOpen,
onClose: () => setDeleteDialogOpen(false),
onConfirm: confirmDelete,
title: __2("Delete Customer"),
description: customerToDelete ? __2(
"Are you sure you want to delete this customer? This action cannot be undone."
) + ` (${customerToDelete.name || customerToDelete.email})` : __2(
"Are you sure you want to delete this customer? This action cannot be undone."
),
confirmText: __2("Delete"),
cancelText: __2("Cancel"),
variant: "danger",
isLoading: deleteMutation.isPending
}
)
] });
};
const millisecondsInWeek = 6048e5;
const millisecondsInDay = 864e5;
const millisecondsInMinute = 6e4;
const millisecondsInHour = 36e5;
const millisecondsInSecond = 1e3;
const constructFromSymbol = Symbol.for("constructDateFrom");
function constructFrom(date2, value) {
if (typeof date2 === "function") return date2(value);
if (date2 && typeof date2 === "object" && constructFromSymbol in date2)
return date2[constructFromSymbol](value);
if (date2 instanceof Date) return new date2.constructor(value);
return new Date(value);
}
function toDate(argument, context) {
return constructFrom(context || argument, argument);
}
function addDays(date2, amount, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
if (isNaN(amount)) return constructFrom((options2 == null ? void 0 : options2.in) || date2, NaN);
if (!amount) return _date;
_date.setDate(_date.getDate() + amount);
return _date;
}
function addMonths(date2, amount, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
if (isNaN(amount)) return constructFrom(date2, NaN);
if (!amount) {
return _date;
}
const dayOfMonth = _date.getDate();
const endOfDesiredMonth = constructFrom(date2, _date.getTime());
endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0);
const daysInMonth = endOfDesiredMonth.getDate();
if (dayOfMonth >= daysInMonth) {
return endOfDesiredMonth;
} else {
_date.setFullYear(
endOfDesiredMonth.getFullYear(),
endOfDesiredMonth.getMonth(),
dayOfMonth
);
return _date;
}
}
let defaultOptions = {};
function getDefaultOptions$1() {
return defaultOptions;
}
function startOfWeek(date2, options2) {
var _a, _b, _c, _d;
const defaultOptions2 = getDefaultOptions$1();
const weekStartsOn = (options2 == null ? void 0 : options2.weekStartsOn) ?? ((_b = (_a = options2 == null ? void 0 : options2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.weekStartsOn) ?? defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const day = _date.getDay();
const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
_date.setDate(_date.getDate() - diff);
_date.setHours(0, 0, 0, 0);
return _date;
}
function startOfISOWeek(date2, options2) {
return startOfWeek(date2, { ...options2, weekStartsOn: 1 });
}
function getISOWeekYear(date2, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const year = _date.getFullYear();
const fourthOfJanuaryOfNextYear = constructFrom(_date, 0);
fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0);
const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear);
const fourthOfJanuaryOfThisYear = constructFrom(_date, 0);
fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4);
fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0);
const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear);
if (_date.getTime() >= startOfNextYear.getTime()) {
return year + 1;
} else if (_date.getTime() >= startOfThisYear.getTime()) {
return year;
} else {
return year - 1;
}
}
function getTimezoneOffsetInMilliseconds(date2) {
const _date = toDate(date2);
const utcDate2 = new Date(
Date.UTC(
_date.getFullYear(),
_date.getMonth(),
_date.getDate(),
_date.getHours(),
_date.getMinutes(),
_date.getSeconds(),
_date.getMilliseconds()
)
);
utcDate2.setUTCFullYear(_date.getFullYear());
return +date2 - +utcDate2;
}
function normalizeDates(context, ...dates) {
const normalize2 = constructFrom.bind(
null,
dates.find((date2) => typeof date2 === "object")
);
return dates.map(normalize2);
}
function startOfDay(date2, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
_date.setHours(0, 0, 0, 0);
return _date;
}
function differenceInCalendarDays(laterDate, earlierDate, options2) {
const [laterDate_, earlierDate_] = normalizeDates(
options2 == null ? void 0 : options2.in,
laterDate,
earlierDate
);
const laterStartOfDay = startOfDay(laterDate_);
const earlierStartOfDay = startOfDay(earlierDate_);
const laterTimestamp = +laterStartOfDay - getTimezoneOffsetInMilliseconds(laterStartOfDay);
const earlierTimestamp = +earlierStartOfDay - getTimezoneOffsetInMilliseconds(earlierStartOfDay);
return Math.round((laterTimestamp - earlierTimestamp) / millisecondsInDay);
}
function startOfISOWeekYear(date2, options2) {
const year = getISOWeekYear(date2, options2);
const fourthOfJanuary = constructFrom(date2, 0);
fourthOfJanuary.setFullYear(year, 0, 4);
fourthOfJanuary.setHours(0, 0, 0, 0);
return startOfISOWeek(fourthOfJanuary);
}
function constructNow(date2) {
return constructFrom(date2, Date.now());
}
function isSameDay(laterDate, earlierDate, options2) {
const [dateLeft_, dateRight_] = normalizeDates(
options2 == null ? void 0 : options2.in,
laterDate,
earlierDate
);
return +startOfDay(dateLeft_) === +startOfDay(dateRight_);
}
function isDate(value) {
return value instanceof Date || typeof value === "object" && Object.prototype.toString.call(value) === "[object Date]";
}
function isValid(date2) {
return !(!isDate(date2) && typeof date2 !== "number" || isNaN(+toDate(date2)));
}
function endOfMonth(date2, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const month = _date.getMonth();
_date.setFullYear(_date.getFullYear(), month + 1, 0);
_date.setHours(23, 59, 59, 999);
return _date;
}
function normalizeInterval(context, interval) {
const [start, end] = normalizeDates(context, interval.start, interval.end);
return { start, end };
}
function eachDayOfInterval(interval, options2) {
const { start, end } = normalizeInterval(options2 == null ? void 0 : options2.in, interval);
let reversed = +start > +end;
const endTime = reversed ? +start : +end;
const date2 = reversed ? end : start;
date2.setHours(0, 0, 0, 0);
let step = 1;
const dates = [];
while (+date2 <= endTime) {
dates.push(constructFrom(start, date2));
date2.setDate(date2.getDate() + step);
date2.setHours(0, 0, 0, 0);
}
return reversed ? dates.reverse() : dates;
}
function startOfMonth(date2, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
_date.setDate(1);
_date.setHours(0, 0, 0, 0);
return _date;
}
function startOfYear(date2, options2) {
const date_ = toDate(date2, options2 == null ? void 0 : options2.in);
date_.setFullYear(date_.getFullYear(), 0, 1);
date_.setHours(0, 0, 0, 0);
return date_;
}
function endOfWeek(date2, options2) {
var _a, _b, _c, _d;
const defaultOptions2 = getDefaultOptions$1();
const weekStartsOn = (options2 == null ? void 0 : options2.weekStartsOn) ?? ((_b = (_a = options2 == null ? void 0 : options2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.weekStartsOn) ?? defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const day = _date.getDay();
const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);
_date.setDate(_date.getDate() + diff);
_date.setHours(23, 59, 59, 999);
return _date;
}
const formatDistanceLocale = {
lessThanXSeconds: {
one: "less than a second",
other: "less than {{count}} seconds"
},
xSeconds: {
one: "1 second",
other: "{{count}} seconds"
},
halfAMinute: "half a minute",
lessThanXMinutes: {
one: "less than a minute",
other: "less than {{count}} minutes"
},
xMinutes: {
one: "1 minute",
other: "{{count}} minutes"
},
aboutXHours: {
one: "about 1 hour",
other: "about {{count}} hours"
},
xHours: {
one: "1 hour",
other: "{{count}} hours"
},
xDays: {
one: "1 day",
other: "{{count}} days"
},
aboutXWeeks: {
one: "about 1 week",
other: "about {{count}} weeks"
},
xWeeks: {
one: "1 week",
other: "{{count}} weeks"
},
aboutXMonths: {
one: "about 1 month",
other: "about {{count}} months"
},
xMonths: {
one: "1 month",
other: "{{count}} months"
},
aboutXYears: {
one: "about 1 year",
other: "about {{count}} years"
},
xYears: {
one: "1 year",
other: "{{count}} years"
},
overXYears: {
one: "over 1 year",
other: "over {{count}} years"
},
almostXYears: {
one: "almost 1 year",
other: "almost {{count}} years"
}
};
const formatDistance = (token, count, options2) => {
let result;
const tokenValue = formatDistanceLocale[token];
if (typeof tokenValue === "string") {
result = tokenValue;
} else if (count === 1) {
result = tokenValue.one;
} else {
result = tokenValue.other.replace("{{count}}", count.toString());
}
if (options2 == null ? void 0 : options2.addSuffix) {
if (options2.comparison && options2.comparison > 0) {
return "in " + result;
} else {
return result + " ago";
}
}
return result;
};
function buildFormatLongFn(args) {
return (options2 = {}) => {
const width = options2.width ? String(options2.width) : args.defaultWidth;
const format2 = args.formats[width] || args.formats[args.defaultWidth];
return format2;
};
}
const dateFormats = {
full: "EEEE, MMMM do, y",
long: "MMMM do, y",
medium: "MMM d, y",
short: "MM/dd/yyyy"
};
const timeFormats = {
full: "h:mm:ss a zzzz",
long: "h:mm:ss a z",
medium: "h:mm:ss a",
short: "h:mm a"
};
const dateTimeFormats = {
full: "{{date}} 'at' {{time}}",
long: "{{date}} 'at' {{time}}",
medium: "{{date}}, {{time}}",
short: "{{date}}, {{time}}"
};
const formatLong = {
date: buildFormatLongFn({
formats: dateFormats,
defaultWidth: "full"
}),
time: buildFormatLongFn({
formats: timeFormats,
defaultWidth: "full"
}),
dateTime: buildFormatLongFn({
formats: dateTimeFormats,
defaultWidth: "full"
})
};
const formatRelativeLocale = {
lastWeek: "'last' eeee 'at' p",
yesterday: "'yesterday at' p",
today: "'today at' p",
tomorrow: "'tomorrow at' p",
nextWeek: "eeee 'at' p",
other: "P"
};
const formatRelative = (token, _date, _baseDate, _options) => formatRelativeLocale[token];
function buildLocalizeFn(args) {
return (value, options2) => {
const context = (options2 == null ? void 0 : options2.context) ? String(options2.context) : "standalone";
let valuesArray;
if (context === "formatting" && args.formattingValues) {
const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
const width = (options2 == null ? void 0 : options2.width) ? String(options2.width) : defaultWidth;
valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
} else {
const defaultWidth = args.defaultWidth;
const width = (options2 == null ? void 0 : options2.width) ? String(options2.width) : args.defaultWidth;
valuesArray = args.values[width] || args.values[defaultWidth];
}
const index = args.argumentCallback ? args.argumentCallback(value) : value;
return valuesArray[index];
};
}
const eraValues = {
narrow: ["B", "A"],
abbreviated: ["BC", "AD"],
wide: ["Before Christ", "Anno Domini"]
};
const quarterValues = {
narrow: ["1", "2", "3", "4"],
abbreviated: ["Q1", "Q2", "Q3", "Q4"],
wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"]
};
const monthValues = {
narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
abbreviated: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
wide: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
]
};
const dayValues = {
narrow: ["S", "M", "T", "W", "T", "F", "S"],
short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
wide: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
]
};
const dayPeriodValues = {
narrow: {
am: "a",
pm: "p",
midnight: "mi",
noon: "n",
morning: "morning",
afternoon: "afternoon",
evening: "evening",
night: "night"
},
abbreviated: {
am: "AM",
pm: "PM",
midnight: "midnight",
noon: "noon",
morning: "morning",
afternoon: "afternoon",
evening: "evening",
night: "night"
},
wide: {
am: "a.m.",
pm: "p.m.",
midnight: "midnight",
noon: "noon",
morning: "morning",
afternoon: "afternoon",
evening: "evening",
night: "night"
}
};
const formattingDayPeriodValues = {
narrow: {
am: "a",
pm: "p",
midnight: "mi",
noon: "n",
morning: "in the morning",
afternoon: "in the afternoon",
evening: "in the evening",
night: "at night"
},
abbreviated: {
am: "AM",
pm: "PM",
midnight: "midnight",
noon: "noon",
morning: "in the morning",
afternoon: "in the afternoon",
evening: "in the evening",
night: "at night"
},
wide: {
am: "a.m.",
pm: "p.m.",
midnight: "midnight",
noon: "noon",
morning: "in the morning",
afternoon: "in the afternoon",
evening: "in the evening",
night: "at night"
}
};
const ordinalNumber = (dirtyNumber, _options) => {
const number2 = Number(dirtyNumber);
const rem100 = number2 % 100;
if (rem100 > 20 || rem100 < 10) {
switch (rem100 % 10) {
case 1:
return number2 + "st";
case 2:
return number2 + "nd";
case 3:
return number2 + "rd";
}
}
return number2 + "th";
};
const localize = {
ordinalNumber,
era: buildLocalizeFn({
values: eraValues,
defaultWidth: "wide"
}),
quarter: buildLocalizeFn({
values: quarterValues,
defaultWidth: "wide",
argumentCallback: (quarter) => quarter - 1
}),
month: buildLocalizeFn({
values: monthValues,
defaultWidth: "wide"
}),
day: buildLocalizeFn({
values: dayValues,
defaultWidth: "wide"
}),
dayPeriod: buildLocalizeFn({
values: dayPeriodValues,
defaultWidth: "wide",
formattingValues: formattingDayPeriodValues,
defaultFormattingWidth: "wide"
})
};
function buildMatchFn(args) {
return (string2, options2 = {}) => {
const width = options2.width;
const matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
const matchResult = string2.match(matchPattern);
if (!matchResult) {
return null;
}
const matchedString = matchResult[0];
const parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
const key2 = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) : (
// [TODO] -- I challenge you to fix the type
findKey(parsePatterns, (pattern) => pattern.test(matchedString))
);
let value;
value = args.valueCallback ? args.valueCallback(key2) : key2;
value = options2.valueCallback ? (
// [TODO] -- I challenge you to fix the type
options2.valueCallback(value)
) : value;
const rest = string2.slice(matchedString.length);
return { value, rest };
};
}
function findKey(object2, predicate) {
for (const key2 in object2) {
if (Object.prototype.hasOwnProperty.call(object2, key2) && predicate(object2[key2])) {
return key2;
}
}
return void 0;
}
function findIndex(array2, predicate) {
for (let key2 = 0; key2 < array2.length; key2++) {
if (predicate(array2[key2])) {
return key2;
}
}
return void 0;
}
function buildMatchPatternFn(args) {
return (string2, options2 = {}) => {
const matchResult = string2.match(args.matchPattern);
if (!matchResult) return null;
const matchedString = matchResult[0];
const parseResult = string2.match(args.parsePattern);
if (!parseResult) return null;
let value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
value = options2.valueCallback ? options2.valueCallback(value) : value;
const rest = string2.slice(matchedString.length);
return { value, rest };
};
}
const matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
const parseOrdinalNumberPattern = /\d+/i;
const matchEraPatterns = {
narrow: /^(b|a)/i,
abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
wide: /^(before christ|before common era|anno domini|common era)/i
};
const parseEraPatterns = {
any: [/^b/i, /^(a|c)/i]
};
const matchQuarterPatterns = {
narrow: /^[1234]/i,
abbreviated: /^q[1234]/i,
wide: /^[1234](th|st|nd|rd)? quarter/i
};
const parseQuarterPatterns = {
any: [/1/i, /2/i, /3/i, /4/i]
};
const matchMonthPatterns = {
narrow: /^[jfmasond]/i,
abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
};
const parseMonthPatterns = {
narrow: [
/^j/i,
/^f/i,
/^m/i,
/^a/i,
/^m/i,
/^j/i,
/^j/i,
/^a/i,
/^s/i,
/^o/i,
/^n/i,
/^d/i
],
any: [
/^ja/i,
/^f/i,
/^mar/i,
/^ap/i,
/^may/i,
/^jun/i,
/^jul/i,
/^au/i,
/^s/i,
/^o/i,
/^n/i,
/^d/i
]
};
const matchDayPatterns = {
narrow: /^[smtwf]/i,
short: /^(su|mo|tu|we|th|fr|sa)/i,
abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
};
const parseDayPatterns = {
narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
};
const matchDayPeriodPatterns = {
narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
};
const parseDayPeriodPatterns = {
any: {
am: /^a/i,
pm: /^p/i,
midnight: /^mi/i,
noon: /^no/i,
morning: /morning/i,
afternoon: /afternoon/i,
evening: /evening/i,
night: /night/i
}
};
const match = {
ordinalNumber: buildMatchPatternFn({
matchPattern: matchOrdinalNumberPattern,
parsePattern: parseOrdinalNumberPattern,
valueCallback: (value) => parseInt(value, 10)
}),
era: buildMatchFn({
matchPatterns: matchEraPatterns,
defaultMatchWidth: "wide",
parsePatterns: parseEraPatterns,
defaultParseWidth: "any"
}),
quarter: buildMatchFn({
matchPatterns: matchQuarterPatterns,
defaultMatchWidth: "wide",
parsePatterns: parseQuarterPatterns,
defaultParseWidth: "any",
valueCallback: (index) => index + 1
}),
month: buildMatchFn({
matchPatterns: matchMonthPatterns,
defaultMatchWidth: "wide",
parsePatterns: parseMonthPatterns,
defaultParseWidth: "any"
}),
day: buildMatchFn({
matchPatterns: matchDayPatterns,
defaultMatchWidth: "wide",
parsePatterns: parseDayPatterns,
defaultParseWidth: "any"
}),
dayPeriod: buildMatchFn({
matchPatterns: matchDayPeriodPatterns,
defaultMatchWidth: "any",
parsePatterns: parseDayPeriodPatterns,
defaultParseWidth: "any"
})
};
const enUS = {
code: "en-US",
formatDistance,
formatLong,
formatRelative,
localize,
match,
options: {
weekStartsOn: 0,
firstWeekContainsDate: 1
}
};
function getDayOfYear(date2, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const diff = differenceInCalendarDays(_date, startOfYear(_date));
const dayOfYear = diff + 1;
return dayOfYear;
}
function getISOWeek(date2, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date);
return Math.round(diff / millisecondsInWeek) + 1;
}
function getWeekYear(date2, options2) {
var _a, _b, _c, _d;
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const year = _date.getFullYear();
const defaultOptions2 = getDefaultOptions$1();
const firstWeekContainsDate = (options2 == null ? void 0 : options2.firstWeekContainsDate) ?? ((_b = (_a = options2 == null ? void 0 : options2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.firstWeekContainsDate) ?? defaultOptions2.firstWeekContainsDate ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.firstWeekContainsDate) ?? 1;
const firstWeekOfNextYear = constructFrom((options2 == null ? void 0 : options2.in) || date2, 0);
firstWeekOfNextYear.setFullYear(year + 1, 0, firstWeekContainsDate);
firstWeekOfNextYear.setHours(0, 0, 0, 0);
const startOfNextYear = startOfWeek(firstWeekOfNextYear, options2);
const firstWeekOfThisYear = constructFrom((options2 == null ? void 0 : options2.in) || date2, 0);
firstWeekOfThisYear.setFullYear(year, 0, firstWeekContainsDate);
firstWeekOfThisYear.setHours(0, 0, 0, 0);
const startOfThisYear = startOfWeek(firstWeekOfThisYear, options2);
if (+_date >= +startOfNextYear) {
return year + 1;
} else if (+_date >= +startOfThisYear) {
return year;
} else {
return year - 1;
}
}
function startOfWeekYear(date2, options2) {
var _a, _b, _c, _d;
const defaultOptions2 = getDefaultOptions$1();
const firstWeekContainsDate = (options2 == null ? void 0 : options2.firstWeekContainsDate) ?? ((_b = (_a = options2 == null ? void 0 : options2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.firstWeekContainsDate) ?? defaultOptions2.firstWeekContainsDate ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.firstWeekContainsDate) ?? 1;
const year = getWeekYear(date2, options2);
const firstWeek = constructFrom((options2 == null ? void 0 : options2.in) || date2, 0);
firstWeek.setFullYear(year, 0, firstWeekContainsDate);
firstWeek.setHours(0, 0, 0, 0);
const _date = startOfWeek(firstWeek, options2);
return _date;
}
function getWeek(date2, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const diff = +startOfWeek(_date, options2) - +startOfWeekYear(_date, options2);
return Math.round(diff / millisecondsInWeek) + 1;
}
function addLeadingZeros(number2, targetLength) {
const sign2 = number2 < 0 ? "-" : "";
const output = Math.abs(number2).toString().padStart(targetLength, "0");
return sign2 + output;
}
const lightFormatters = {
// Year
y(date2, token) {
const signedYear = date2.getFullYear();
const year = signedYear > 0 ? signedYear : 1 - signedYear;
return addLeadingZeros(token === "yy" ? year % 100 : year, token.length);
},
// Month
M(date2, token) {
const month = date2.getMonth();
return token === "M" ? String(month + 1) : addLeadingZeros(month + 1, 2);
},
// Day of the month
d(date2, token) {
return addLeadingZeros(date2.getDate(), token.length);
},
// AM or PM
a(date2, token) {
const dayPeriodEnumValue = date2.getHours() / 12 >= 1 ? "pm" : "am";
switch (token) {
case "a":
case "aa":
return dayPeriodEnumValue.toUpperCase();
case "aaa":
return dayPeriodEnumValue;
case "aaaaa":
return dayPeriodEnumValue[0];
case "aaaa":
default:
return dayPeriodEnumValue === "am" ? "a.m." : "p.m.";
}
},
// Hour [1-12]
h(date2, token) {
return addLeadingZeros(date2.getHours() % 12 || 12, token.length);
},
// Hour [0-23]
H(date2, token) {
return addLeadingZeros(date2.getHours(), token.length);
},
// Minute
m(date2, token) {
return addLeadingZeros(date2.getMinutes(), token.length);
},
// Second
s(date2, token) {
return addLeadingZeros(date2.getSeconds(), token.length);
},
// Fraction of second
S(date2, token) {
const numberOfDigits = token.length;
const milliseconds = date2.getMilliseconds();
const fractionalSeconds = Math.trunc(
milliseconds * Math.pow(10, numberOfDigits - 3)
);
return addLeadingZeros(fractionalSeconds, token.length);
}
};
const dayPeriodEnum = {
midnight: "midnight",
noon: "noon",
morning: "morning",
afternoon: "afternoon",
evening: "evening",
night: "night"
};
const formatters = {
// Era
G: function(date2, token, localize2) {
const era = date2.getFullYear() > 0 ? 1 : 0;
switch (token) {
case "G":
case "GG":
case "GGG":
return localize2.era(era, { width: "abbreviated" });
case "GGGGG":
return localize2.era(era, { width: "narrow" });
case "GGGG":
default:
return localize2.era(era, { width: "wide" });
}
},
// Year
y: function(date2, token, localize2) {
if (token === "yo") {
const signedYear = date2.getFullYear();
const year = signedYear > 0 ? signedYear : 1 - signedYear;
return localize2.ordinalNumber(year, { unit: "year" });
}
return lightFormatters.y(date2, token);
},
// Local week-numbering year
Y: function(date2, token, localize2, options2) {
const signedWeekYear = getWeekYear(date2, options2);
const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
if (token === "YY") {
const twoDigitYear = weekYear % 100;
return addLeadingZeros(twoDigitYear, 2);
}
if (token === "Yo") {
return localize2.ordinalNumber(weekYear, { unit: "year" });
}
return addLeadingZeros(weekYear, token.length);
},
// ISO week-numbering year
R: function(date2, token) {
const isoWeekYear = getISOWeekYear(date2);
return addLeadingZeros(isoWeekYear, token.length);
},
// Extended year. This is a single number designating the year of this calendar system.
// The main difference between `y` and `u` localizers are B.C. years:
// | Year | `y` | `u` |
// |------|-----|-----|
// | AC 1 | 1 | 1 |
// | BC 1 | 1 | 0 |
// | BC 2 | 2 | -1 |
// Also `yy` always returns the last two digits of a year,
// while `uu` pads single digit years to 2 characters and returns other years unchanged.
u: function(date2, token) {
const year = date2.getFullYear();
return addLeadingZeros(year, token.length);
},
// Quarter
Q: function(date2, token, localize2) {
const quarter = Math.ceil((date2.getMonth() + 1) / 3);
switch (token) {
case "Q":
return String(quarter);
case "QQ":
return addLeadingZeros(quarter, 2);
case "Qo":
return localize2.ordinalNumber(quarter, { unit: "quarter" });
case "QQQ":
return localize2.quarter(quarter, {
width: "abbreviated",
context: "formatting"
});
case "QQQQQ":
return localize2.quarter(quarter, {
width: "narrow",
context: "formatting"
});
case "QQQQ":
default:
return localize2.quarter(quarter, {
width: "wide",
context: "formatting"
});
}
},
// Stand-alone quarter
q: function(date2, token, localize2) {
const quarter = Math.ceil((date2.getMonth() + 1) / 3);
switch (token) {
case "q":
return String(quarter);
case "qq":
return addLeadingZeros(quarter, 2);
case "qo":
return localize2.ordinalNumber(quarter, { unit: "quarter" });
case "qqq":
return localize2.quarter(quarter, {
width: "abbreviated",
context: "standalone"
});
case "qqqqq":
return localize2.quarter(quarter, {
width: "narrow",
context: "standalone"
});
case "qqqq":
default:
return localize2.quarter(quarter, {
width: "wide",
context: "standalone"
});
}
},
// Month
M: function(date2, token, localize2) {
const month = date2.getMonth();
switch (token) {
case "M":
case "MM":
return lightFormatters.M(date2, token);
case "Mo":
return localize2.ordinalNumber(month + 1, { unit: "month" });
case "MMM":
return localize2.month(month, {
width: "abbreviated",
context: "formatting"
});
case "MMMMM":
return localize2.month(month, {
width: "narrow",
context: "formatting"
});
case "MMMM":
default:
return localize2.month(month, { width: "wide", context: "formatting" });
}
},
// Stand-alone month
L: function(date2, token, localize2) {
const month = date2.getMonth();
switch (token) {
case "L":
return String(month + 1);
case "LL":
return addLeadingZeros(month + 1, 2);
case "Lo":
return localize2.ordinalNumber(month + 1, { unit: "month" });
case "LLL":
return localize2.month(month, {
width: "abbreviated",
context: "standalone"
});
case "LLLLL":
return localize2.month(month, {
width: "narrow",
context: "standalone"
});
case "LLLL":
default:
return localize2.month(month, { width: "wide", context: "standalone" });
}
},
// Local week of year
w: function(date2, token, localize2, options2) {
const week = getWeek(date2, options2);
if (token === "wo") {
return localize2.ordinalNumber(week, { unit: "week" });
}
return addLeadingZeros(week, token.length);
},
// ISO week of year
I: function(date2, token, localize2) {
const isoWeek = getISOWeek(date2);
if (token === "Io") {
return localize2.ordinalNumber(isoWeek, { unit: "week" });
}
return addLeadingZeros(isoWeek, token.length);
},
// Day of the month
d: function(date2, token, localize2) {
if (token === "do") {
return localize2.ordinalNumber(date2.getDate(), { unit: "date" });
}
return lightFormatters.d(date2, token);
},
// Day of year
D: function(date2, token, localize2) {
const dayOfYear = getDayOfYear(date2);
if (token === "Do") {
return localize2.ordinalNumber(dayOfYear, { unit: "dayOfYear" });
}
return addLeadingZeros(dayOfYear, token.length);
},
// Day of week
E: function(date2, token, localize2) {
const dayOfWeek = date2.getDay();
switch (token) {
case "E":
case "EE":
case "EEE":
return localize2.day(dayOfWeek, {
width: "abbreviated",
context: "formatting"
});
case "EEEEE":
return localize2.day(dayOfWeek, {
width: "narrow",
context: "formatting"
});
case "EEEEEE":
return localize2.day(dayOfWeek, {
width: "short",
context: "formatting"
});
case "EEEE":
default:
return localize2.day(dayOfWeek, {
width: "wide",
context: "formatting"
});
}
},
// Local day of week
e: function(date2, token, localize2, options2) {
const dayOfWeek = date2.getDay();
const localDayOfWeek = (dayOfWeek - options2.weekStartsOn + 8) % 7 || 7;
switch (token) {
case "e":
return String(localDayOfWeek);
case "ee":
return addLeadingZeros(localDayOfWeek, 2);
case "eo":
return localize2.ordinalNumber(localDayOfWeek, { unit: "day" });
case "eee":
return localize2.day(dayOfWeek, {
width: "abbreviated",
context: "formatting"
});
case "eeeee":
return localize2.day(dayOfWeek, {
width: "narrow",
context: "formatting"
});
case "eeeeee":
return localize2.day(dayOfWeek, {
width: "short",
context: "formatting"
});
case "eeee":
default:
return localize2.day(dayOfWeek, {
width: "wide",
context: "formatting"
});
}
},
// Stand-alone local day of week
c: function(date2, token, localize2, options2) {
const dayOfWeek = date2.getDay();
const localDayOfWeek = (dayOfWeek - options2.weekStartsOn + 8) % 7 || 7;
switch (token) {
case "c":
return String(localDayOfWeek);
case "cc":
return addLeadingZeros(localDayOfWeek, token.length);
case "co":
return localize2.ordinalNumber(localDayOfWeek, { unit: "day" });
case "ccc":
return localize2.day(dayOfWeek, {
width: "abbreviated",
context: "standalone"
});
case "ccccc":
return localize2.day(dayOfWeek, {
width: "narrow",
context: "standalone"
});
case "cccccc":
return localize2.day(dayOfWeek, {
width: "short",
context: "standalone"
});
case "cccc":
default:
return localize2.day(dayOfWeek, {
width: "wide",
context: "standalone"
});
}
},
// ISO day of week
i: function(date2, token, localize2) {
const dayOfWeek = date2.getDay();
const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
switch (token) {
case "i":
return String(isoDayOfWeek);
case "ii":
return addLeadingZeros(isoDayOfWeek, token.length);
case "io":
return localize2.ordinalNumber(isoDayOfWeek, { unit: "day" });
case "iii":
return localize2.day(dayOfWeek, {
width: "abbreviated",
context: "formatting"
});
case "iiiii":
return localize2.day(dayOfWeek, {
width: "narrow",
context: "formatting"
});
case "iiiiii":
return localize2.day(dayOfWeek, {
width: "short",
context: "formatting"
});
case "iiii":
default:
return localize2.day(dayOfWeek, {
width: "wide",
context: "formatting"
});
}
},
// AM or PM
a: function(date2, token, localize2) {
const hours = date2.getHours();
const dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am";
switch (token) {
case "a":
case "aa":
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "abbreviated",
context: "formatting"
});
case "aaa":
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "abbreviated",
context: "formatting"
}).toLowerCase();
case "aaaaa":
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "narrow",
context: "formatting"
});
case "aaaa":
default:
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "wide",
context: "formatting"
});
}
},
// AM, PM, midnight, noon
b: function(date2, token, localize2) {
const hours = date2.getHours();
let dayPeriodEnumValue;
if (hours === 12) {
dayPeriodEnumValue = dayPeriodEnum.noon;
} else if (hours === 0) {
dayPeriodEnumValue = dayPeriodEnum.midnight;
} else {
dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am";
}
switch (token) {
case "b":
case "bb":
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "abbreviated",
context: "formatting"
});
case "bbb":
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "abbreviated",
context: "formatting"
}).toLowerCase();
case "bbbbb":
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "narrow",
context: "formatting"
});
case "bbbb":
default:
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "wide",
context: "formatting"
});
}
},
// in the morning, in the afternoon, in the evening, at night
B: function(date2, token, localize2) {
const hours = date2.getHours();
let dayPeriodEnumValue;
if (hours >= 17) {
dayPeriodEnumValue = dayPeriodEnum.evening;
} else if (hours >= 12) {
dayPeriodEnumValue = dayPeriodEnum.afternoon;
} else if (hours >= 4) {
dayPeriodEnumValue = dayPeriodEnum.morning;
} else {
dayPeriodEnumValue = dayPeriodEnum.night;
}
switch (token) {
case "B":
case "BB":
case "BBB":
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "abbreviated",
context: "formatting"
});
case "BBBBB":
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "narrow",
context: "formatting"
});
case "BBBB":
default:
return localize2.dayPeriod(dayPeriodEnumValue, {
width: "wide",
context: "formatting"
});
}
},
// Hour [1-12]
h: function(date2, token, localize2) {
if (token === "ho") {
let hours = date2.getHours() % 12;
if (hours === 0) hours = 12;
return localize2.ordinalNumber(hours, { unit: "hour" });
}
return lightFormatters.h(date2, token);
},
// Hour [0-23]
H: function(date2, token, localize2) {
if (token === "Ho") {
return localize2.ordinalNumber(date2.getHours(), { unit: "hour" });
}
return lightFormatters.H(date2, token);
},
// Hour [0-11]
K: function(date2, token, localize2) {
const hours = date2.getHours() % 12;
if (token === "Ko") {
return localize2.ordinalNumber(hours, { unit: "hour" });
}
return addLeadingZeros(hours, token.length);
},
// Hour [1-24]
k: function(date2, token, localize2) {
let hours = date2.getHours();
if (hours === 0) hours = 24;
if (token === "ko") {
return localize2.ordinalNumber(hours, { unit: "hour" });
}
return addLeadingZeros(hours, token.length);
},
// Minute
m: function(date2, token, localize2) {
if (token === "mo") {
return localize2.ordinalNumber(date2.getMinutes(), { unit: "minute" });
}
return lightFormatters.m(date2, token);
},
// Second
s: function(date2, token, localize2) {
if (token === "so") {
return localize2.ordinalNumber(date2.getSeconds(), { unit: "second" });
}
return lightFormatters.s(date2, token);
},
// Fraction of second
S: function(date2, token) {
return lightFormatters.S(date2, token);
},
// Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
X: function(date2, token, _localize) {
const timezoneOffset = date2.getTimezoneOffset();
if (timezoneOffset === 0) {
return "Z";
}
switch (token) {
case "X":
return formatTimezoneWithOptionalMinutes(timezoneOffset);
case "XXXX":
case "XX":
return formatTimezone(timezoneOffset);
case "XXXXX":
case "XXX":
default:
return formatTimezone(timezoneOffset, ":");
}
},
// Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
x: function(date2, token, _localize) {
const timezoneOffset = date2.getTimezoneOffset();
switch (token) {
case "x":
return formatTimezoneWithOptionalMinutes(timezoneOffset);
case "xxxx":
case "xx":
return formatTimezone(timezoneOffset);
case "xxxxx":
case "xxx":
default:
return formatTimezone(timezoneOffset, ":");
}
},
// Timezone (GMT)
O: function(date2, token, _localize) {
const timezoneOffset = date2.getTimezoneOffset();
switch (token) {
case "O":
case "OO":
case "OOO":
return "GMT" + formatTimezoneShort(timezoneOffset, ":");
case "OOOO":
default:
return "GMT" + formatTimezone(timezoneOffset, ":");
}
},
// Timezone (specific non-location)
z: function(date2, token, _localize) {
const timezoneOffset = date2.getTimezoneOffset();
switch (token) {
case "z":
case "zz":
case "zzz":
return "GMT" + formatTimezoneShort(timezoneOffset, ":");
case "zzzz":
default:
return "GMT" + formatTimezone(timezoneOffset, ":");
}
},
// Seconds timestamp
t: function(date2, token, _localize) {
const timestamp = Math.trunc(+date2 / 1e3);
return addLeadingZeros(timestamp, token.length);
},
// Milliseconds timestamp
T: function(date2, token, _localize) {
return addLeadingZeros(+date2, token.length);
}
};
function formatTimezoneShort(offset, delimiter = "") {
const sign2 = offset > 0 ? "-" : "+";
const absOffset = Math.abs(offset);
const hours = Math.trunc(absOffset / 60);
const minutes = absOffset % 60;
if (minutes === 0) {
return sign2 + String(hours);
}
return sign2 + String(hours) + delimiter + addLeadingZeros(minutes, 2);
}
function formatTimezoneWithOptionalMinutes(offset, delimiter) {
if (offset % 60 === 0) {
const sign2 = offset > 0 ? "-" : "+";
return sign2 + addLeadingZeros(Math.abs(offset) / 60, 2);
}
return formatTimezone(offset, delimiter);
}
function formatTimezone(offset, delimiter = "") {
const sign2 = offset > 0 ? "-" : "+";
const absOffset = Math.abs(offset);
const hours = addLeadingZeros(Math.trunc(absOffset / 60), 2);
const minutes = addLeadingZeros(absOffset % 60, 2);
return sign2 + hours + delimiter + minutes;
}
const dateLongFormatter = (pattern, formatLong2) => {
switch (pattern) {
case "P":
return formatLong2.date({ width: "short" });
case "PP":
return formatLong2.date({ width: "medium" });
case "PPP":
return formatLong2.date({ width: "long" });
case "PPPP":
default:
return formatLong2.date({ width: "full" });
}
};
const timeLongFormatter = (pattern, formatLong2) => {
switch (pattern) {
case "p":
return formatLong2.time({ width: "short" });
case "pp":
return formatLong2.time({ width: "medium" });
case "ppp":
return formatLong2.time({ width: "long" });
case "pppp":
default:
return formatLong2.time({ width: "full" });
}
};
const dateTimeLongFormatter = (pattern, formatLong2) => {
const matchResult = pattern.match(/(P+)(p+)?/) || [];
const datePattern = matchResult[1];
const timePattern = matchResult[2];
if (!timePattern) {
return dateLongFormatter(pattern, formatLong2);
}
let dateTimeFormat;
switch (datePattern) {
case "P":
dateTimeFormat = formatLong2.dateTime({ width: "short" });
break;
case "PP":
dateTimeFormat = formatLong2.dateTime({ width: "medium" });
break;
case "PPP":
dateTimeFormat = formatLong2.dateTime({ width: "long" });
break;
case "PPPP":
default:
dateTimeFormat = formatLong2.dateTime({ width: "full" });
break;
}
return dateTimeFormat.replace("{{date}}", dateLongFormatter(datePattern, formatLong2)).replace("{{time}}", timeLongFormatter(timePattern, formatLong2));
};
const longFormatters = {
p: timeLongFormatter,
P: dateTimeLongFormatter
};
const dayOfYearTokenRE = /^D+$/;
const weekYearTokenRE = /^Y+$/;
const throwTokens = ["D", "DD", "YY", "YYYY"];
function isProtectedDayOfYearToken(token) {
return dayOfYearTokenRE.test(token);
}
function isProtectedWeekYearToken(token) {
return weekYearTokenRE.test(token);
}
function warnOrThrowProtectedError(token, format2, input) {
const _message = message(token, format2, input);
console.warn(_message);
if (throwTokens.includes(token)) throw new RangeError(_message);
}
function message(token, format2, input) {
const subject = token[0] === "Y" ? "years" : "days of the month";
return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format2}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
}
const formattingTokensRegExp$1 = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
const longFormattingTokensRegExp$1 = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
const escapedStringRegExp$1 = /^'([^]*?)'?$/;
const doubleQuoteRegExp$1 = /''/g;
const unescapedLatinCharacterRegExp$1 = /[a-zA-Z]/;
function format(date2, formatStr, options2) {
var _a, _b, _c, _d;
const defaultOptions2 = getDefaultOptions$1();
const locale2 = defaultOptions2.locale ?? enUS;
const firstWeekContainsDate = defaultOptions2.firstWeekContainsDate ?? ((_b = (_a = defaultOptions2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.firstWeekContainsDate) ?? 1;
const weekStartsOn = defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
const originalDate = toDate(date2, options2 == null ? void 0 : options2.in);
if (!isValid(originalDate)) {
throw new RangeError("Invalid time value");
}
let parts = formatStr.match(longFormattingTokensRegExp$1).map((substring) => {
const firstCharacter = substring[0];
if (firstCharacter === "p" || firstCharacter === "P") {
const longFormatter = longFormatters[firstCharacter];
return longFormatter(substring, locale2.formatLong);
}
return substring;
}).join("").match(formattingTokensRegExp$1).map((substring) => {
if (substring === "''") {
return { isToken: false, value: "'" };
}
const firstCharacter = substring[0];
if (firstCharacter === "'") {
return { isToken: false, value: cleanEscapedString$1(substring) };
}
if (formatters[firstCharacter]) {
return { isToken: true, value: substring };
}
if (firstCharacter.match(unescapedLatinCharacterRegExp$1)) {
throw new RangeError(
"Format string contains an unescaped latin alphabet character `" + firstCharacter + "`"
);
}
return { isToken: false, value: substring };
});
if (locale2.localize.preprocessor) {
parts = locale2.localize.preprocessor(originalDate, parts);
}
const formatterOptions = {
firstWeekContainsDate,
weekStartsOn,
locale: locale2
};
return parts.map((part) => {
if (!part.isToken) return part.value;
const token = part.value;
if (isProtectedWeekYearToken(token) || isProtectedDayOfYearToken(token)) {
warnOrThrowProtectedError(token, formatStr, String(date2));
}
const formatter = formatters[token[0]];
return formatter(originalDate, token, locale2.localize, formatterOptions);
}).join("");
}
function cleanEscapedString$1(input) {
const matched = input.match(escapedStringRegExp$1);
if (!matched) {
return input;
}
return matched[1].replace(doubleQuoteRegExp$1, "'");
}
function getDefaultOptions() {
return Object.assign({}, getDefaultOptions$1());
}
function getISODay(date2, options2) {
const day = toDate(date2, options2 == null ? void 0 : options2.in).getDay();
return day === 0 ? 7 : day;
}
function transpose(date2, constructor) {
const date_ = isConstructor(constructor) ? new constructor(0) : constructFrom(constructor, 0);
date_.setFullYear(date2.getFullYear(), date2.getMonth(), date2.getDate());
date_.setHours(
date2.getHours(),
date2.getMinutes(),
date2.getSeconds(),
date2.getMilliseconds()
);
return date_;
}
function isConstructor(constructor) {
var _a;
return typeof constructor === "function" && ((_a = constructor.prototype) == null ? void 0 : _a.constructor) === constructor;
}
const TIMEZONE_UNIT_PRIORITY = 10;
class Setter {
constructor() {
__publicField(this, "subPriority", 0);
}
validate(_utcDate, _options) {
return true;
}
}
class ValueSetter extends Setter {
constructor(value, validateValue, setValue, priority, subPriority) {
super();
this.value = value;
this.validateValue = validateValue;
this.setValue = setValue;
this.priority = priority;
if (subPriority) {
this.subPriority = subPriority;
}
}
validate(date2, options2) {
return this.validateValue(date2, this.value, options2);
}
set(date2, flags, options2) {
return this.setValue(date2, flags, this.value, options2);
}
}
class DateTimezoneSetter extends Setter {
constructor(context, reference) {
super();
__publicField(this, "priority", TIMEZONE_UNIT_PRIORITY);
__publicField(this, "subPriority", -1);
this.context = context || ((date2) => constructFrom(reference, date2));
}
set(date2, flags) {
if (flags.timestampIsSet) return date2;
return constructFrom(date2, transpose(date2, this.context));
}
}
class Parser {
run(dateString, token, match2, options2) {
const result = this.parse(dateString, token, match2, options2);
if (!result) {
return null;
}
return {
setter: new ValueSetter(
result.value,
this.validate,
this.set,
this.priority,
this.subPriority
),
rest: result.rest
};
}
validate(_utcDate, _value, _options) {
return true;
}
}
class EraParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 140);
__publicField(this, "incompatibleTokens", ["R", "u", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "G":
case "GG":
case "GGG":
return match2.era(dateString, { width: "abbreviated" }) || match2.era(dateString, { width: "narrow" });
case "GGGGG":
return match2.era(dateString, { width: "narrow" });
case "GGGG":
default:
return match2.era(dateString, { width: "wide" }) || match2.era(dateString, { width: "abbreviated" }) || match2.era(dateString, { width: "narrow" });
}
}
set(date2, flags, value) {
flags.era = value;
date2.setFullYear(value, 0, 1);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
const numericPatterns = {
month: /^(1[0-2]|0?\d)/,
// 0 to 12
date: /^(3[0-1]|[0-2]?\d)/,
// 0 to 31
dayOfYear: /^(36[0-6]|3[0-5]\d|[0-2]?\d?\d)/,
// 0 to 366
week: /^(5[0-3]|[0-4]?\d)/,
// 0 to 53
hour23h: /^(2[0-3]|[0-1]?\d)/,
// 0 to 23
hour24h: /^(2[0-4]|[0-1]?\d)/,
// 0 to 24
hour11h: /^(1[0-1]|0?\d)/,
// 0 to 11
hour12h: /^(1[0-2]|0?\d)/,
// 0 to 12
minute: /^[0-5]?\d/,
// 0 to 59
second: /^[0-5]?\d/,
// 0 to 59
singleDigit: /^\d/,
// 0 to 9
twoDigits: /^\d{1,2}/,
// 0 to 99
threeDigits: /^\d{1,3}/,
// 0 to 999
fourDigits: /^\d{1,4}/,
// 0 to 9999
anyDigitsSigned: /^-?\d+/,
singleDigitSigned: /^-?\d/,
// 0 to 9, -0 to -9
twoDigitsSigned: /^-?\d{1,2}/,
// 0 to 99, -0 to -99
threeDigitsSigned: /^-?\d{1,3}/,
// 0 to 999, -0 to -999
fourDigitsSigned: /^-?\d{1,4}/
// 0 to 9999, -0 to -9999
};
const timezonePatterns = {
basicOptionalMinutes: /^([+-])(\d{2})(\d{2})?|Z/,
basic: /^([+-])(\d{2})(\d{2})|Z/,
basicOptionalSeconds: /^([+-])(\d{2})(\d{2})((\d{2}))?|Z/,
extended: /^([+-])(\d{2}):(\d{2})|Z/,
extendedOptionalSeconds: /^([+-])(\d{2}):(\d{2})(:(\d{2}))?|Z/
};
function mapValue(parseFnResult, mapFn) {
if (!parseFnResult) {
return parseFnResult;
}
return {
value: mapFn(parseFnResult.value),
rest: parseFnResult.rest
};
}
function parseNumericPattern(pattern, dateString) {
const matchResult = dateString.match(pattern);
if (!matchResult) {
return null;
}
return {
value: parseInt(matchResult[0], 10),
rest: dateString.slice(matchResult[0].length)
};
}
function parseTimezonePattern(pattern, dateString) {
const matchResult = dateString.match(pattern);
if (!matchResult) {
return null;
}
if (matchResult[0] === "Z") {
return {
value: 0,
rest: dateString.slice(1)
};
}
const sign2 = matchResult[1] === "+" ? 1 : -1;
const hours = matchResult[2] ? parseInt(matchResult[2], 10) : 0;
const minutes = matchResult[3] ? parseInt(matchResult[3], 10) : 0;
const seconds = matchResult[5] ? parseInt(matchResult[5], 10) : 0;
return {
value: sign2 * (hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * millisecondsInSecond),
rest: dateString.slice(matchResult[0].length)
};
}
function parseAnyDigitsSigned(dateString) {
return parseNumericPattern(numericPatterns.anyDigitsSigned, dateString);
}
function parseNDigits(n, dateString) {
switch (n) {
case 1:
return parseNumericPattern(numericPatterns.singleDigit, dateString);
case 2:
return parseNumericPattern(numericPatterns.twoDigits, dateString);
case 3:
return parseNumericPattern(numericPatterns.threeDigits, dateString);
case 4:
return parseNumericPattern(numericPatterns.fourDigits, dateString);
default:
return parseNumericPattern(new RegExp("^\\d{1," + n + "}"), dateString);
}
}
function parseNDigitsSigned(n, dateString) {
switch (n) {
case 1:
return parseNumericPattern(numericPatterns.singleDigitSigned, dateString);
case 2:
return parseNumericPattern(numericPatterns.twoDigitsSigned, dateString);
case 3:
return parseNumericPattern(numericPatterns.threeDigitsSigned, dateString);
case 4:
return parseNumericPattern(numericPatterns.fourDigitsSigned, dateString);
default:
return parseNumericPattern(new RegExp("^-?\\d{1," + n + "}"), dateString);
}
}
function dayPeriodEnumToHours(dayPeriod) {
switch (dayPeriod) {
case "morning":
return 4;
case "evening":
return 17;
case "pm":
case "noon":
case "afternoon":
return 12;
case "am":
case "midnight":
case "night":
default:
return 0;
}
}
function normalizeTwoDigitYear(twoDigitYear, currentYear) {
const isCommonEra = currentYear > 0;
const absCurrentYear = isCommonEra ? currentYear : 1 - currentYear;
let result;
if (absCurrentYear <= 50) {
result = twoDigitYear || 100;
} else {
const rangeEnd = absCurrentYear + 50;
const rangeEndCentury = Math.trunc(rangeEnd / 100) * 100;
const isPreviousCentury = twoDigitYear >= rangeEnd % 100;
result = twoDigitYear + rangeEndCentury - (isPreviousCentury ? 100 : 0);
}
return isCommonEra ? result : 1 - result;
}
function isLeapYearIndex$1(year) {
return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
}
class YearParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 130);
__publicField(this, "incompatibleTokens", ["Y", "R", "u", "w", "I", "i", "e", "c", "t", "T"]);
}
parse(dateString, token, match2) {
const valueCallback = (year) => ({
year,
isTwoDigitYear: token === "yy"
});
switch (token) {
case "y":
return mapValue(parseNDigits(4, dateString), valueCallback);
case "yo":
return mapValue(
match2.ordinalNumber(dateString, {
unit: "year"
}),
valueCallback
);
default:
return mapValue(parseNDigits(token.length, dateString), valueCallback);
}
}
validate(_date, value) {
return value.isTwoDigitYear || value.year > 0;
}
set(date2, flags, value) {
const currentYear = date2.getFullYear();
if (value.isTwoDigitYear) {
const normalizedTwoDigitYear = normalizeTwoDigitYear(
value.year,
currentYear
);
date2.setFullYear(normalizedTwoDigitYear, 0, 1);
date2.setHours(0, 0, 0, 0);
return date2;
}
const year = !("era" in flags) || flags.era === 1 ? value.year : 1 - value.year;
date2.setFullYear(year, 0, 1);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class LocalWeekYearParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 130);
__publicField(this, "incompatibleTokens", [
"y",
"R",
"u",
"Q",
"q",
"M",
"L",
"I",
"d",
"D",
"i",
"t",
"T"
]);
}
parse(dateString, token, match2) {
const valueCallback = (year) => ({
year,
isTwoDigitYear: token === "YY"
});
switch (token) {
case "Y":
return mapValue(parseNDigits(4, dateString), valueCallback);
case "Yo":
return mapValue(
match2.ordinalNumber(dateString, {
unit: "year"
}),
valueCallback
);
default:
return mapValue(parseNDigits(token.length, dateString), valueCallback);
}
}
validate(_date, value) {
return value.isTwoDigitYear || value.year > 0;
}
set(date2, flags, value, options2) {
const currentYear = getWeekYear(date2, options2);
if (value.isTwoDigitYear) {
const normalizedTwoDigitYear = normalizeTwoDigitYear(
value.year,
currentYear
);
date2.setFullYear(
normalizedTwoDigitYear,
0,
options2.firstWeekContainsDate
);
date2.setHours(0, 0, 0, 0);
return startOfWeek(date2, options2);
}
const year = !("era" in flags) || flags.era === 1 ? value.year : 1 - value.year;
date2.setFullYear(year, 0, options2.firstWeekContainsDate);
date2.setHours(0, 0, 0, 0);
return startOfWeek(date2, options2);
}
}
class ISOWeekYearParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 130);
__publicField(this, "incompatibleTokens", [
"G",
"y",
"Y",
"u",
"Q",
"q",
"M",
"L",
"w",
"d",
"D",
"e",
"c",
"t",
"T"
]);
}
parse(dateString, token) {
if (token === "R") {
return parseNDigitsSigned(4, dateString);
}
return parseNDigitsSigned(token.length, dateString);
}
set(date2, _flags, value) {
const firstWeekOfYear = constructFrom(date2, 0);
firstWeekOfYear.setFullYear(value, 0, 4);
firstWeekOfYear.setHours(0, 0, 0, 0);
return startOfISOWeek(firstWeekOfYear);
}
}
class ExtendedYearParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 130);
__publicField(this, "incompatibleTokens", ["G", "y", "Y", "R", "w", "I", "i", "e", "c", "t", "T"]);
}
parse(dateString, token) {
if (token === "u") {
return parseNDigitsSigned(4, dateString);
}
return parseNDigitsSigned(token.length, dateString);
}
set(date2, _flags, value) {
date2.setFullYear(value, 0, 1);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class QuarterParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 120);
__publicField(this, "incompatibleTokens", [
"Y",
"R",
"q",
"M",
"L",
"w",
"I",
"d",
"D",
"i",
"e",
"c",
"t",
"T"
]);
}
parse(dateString, token, match2) {
switch (token) {
case "Q":
case "QQ":
return parseNDigits(token.length, dateString);
case "Qo":
return match2.ordinalNumber(dateString, { unit: "quarter" });
case "QQQ":
return match2.quarter(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.quarter(dateString, {
width: "narrow",
context: "formatting"
});
case "QQQQQ":
return match2.quarter(dateString, {
width: "narrow",
context: "formatting"
});
case "QQQQ":
default:
return match2.quarter(dateString, {
width: "wide",
context: "formatting"
}) || match2.quarter(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.quarter(dateString, {
width: "narrow",
context: "formatting"
});
}
}
validate(_date, value) {
return value >= 1 && value <= 4;
}
set(date2, _flags, value) {
date2.setMonth((value - 1) * 3, 1);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class StandAloneQuarterParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 120);
__publicField(this, "incompatibleTokens", [
"Y",
"R",
"Q",
"M",
"L",
"w",
"I",
"d",
"D",
"i",
"e",
"c",
"t",
"T"
]);
}
parse(dateString, token, match2) {
switch (token) {
case "q":
case "qq":
return parseNDigits(token.length, dateString);
case "qo":
return match2.ordinalNumber(dateString, { unit: "quarter" });
case "qqq":
return match2.quarter(dateString, {
width: "abbreviated",
context: "standalone"
}) || match2.quarter(dateString, {
width: "narrow",
context: "standalone"
});
case "qqqqq":
return match2.quarter(dateString, {
width: "narrow",
context: "standalone"
});
case "qqqq":
default:
return match2.quarter(dateString, {
width: "wide",
context: "standalone"
}) || match2.quarter(dateString, {
width: "abbreviated",
context: "standalone"
}) || match2.quarter(dateString, {
width: "narrow",
context: "standalone"
});
}
}
validate(_date, value) {
return value >= 1 && value <= 4;
}
set(date2, _flags, value) {
date2.setMonth((value - 1) * 3, 1);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class MonthParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "incompatibleTokens", [
"Y",
"R",
"q",
"Q",
"L",
"w",
"I",
"D",
"i",
"e",
"c",
"t",
"T"
]);
__publicField(this, "priority", 110);
}
parse(dateString, token, match2) {
const valueCallback = (value) => value - 1;
switch (token) {
case "M":
return mapValue(
parseNumericPattern(numericPatterns.month, dateString),
valueCallback
);
case "MM":
return mapValue(parseNDigits(2, dateString), valueCallback);
case "Mo":
return mapValue(
match2.ordinalNumber(dateString, {
unit: "month"
}),
valueCallback
);
case "MMM":
return match2.month(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.month(dateString, { width: "narrow", context: "formatting" });
case "MMMMM":
return match2.month(dateString, {
width: "narrow",
context: "formatting"
});
case "MMMM":
default:
return match2.month(dateString, { width: "wide", context: "formatting" }) || match2.month(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.month(dateString, { width: "narrow", context: "formatting" });
}
}
validate(_date, value) {
return value >= 0 && value <= 11;
}
set(date2, _flags, value) {
date2.setMonth(value, 1);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class StandAloneMonthParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 110);
__publicField(this, "incompatibleTokens", [
"Y",
"R",
"q",
"Q",
"M",
"w",
"I",
"D",
"i",
"e",
"c",
"t",
"T"
]);
}
parse(dateString, token, match2) {
const valueCallback = (value) => value - 1;
switch (token) {
case "L":
return mapValue(
parseNumericPattern(numericPatterns.month, dateString),
valueCallback
);
case "LL":
return mapValue(parseNDigits(2, dateString), valueCallback);
case "Lo":
return mapValue(
match2.ordinalNumber(dateString, {
unit: "month"
}),
valueCallback
);
case "LLL":
return match2.month(dateString, {
width: "abbreviated",
context: "standalone"
}) || match2.month(dateString, { width: "narrow", context: "standalone" });
case "LLLLL":
return match2.month(dateString, {
width: "narrow",
context: "standalone"
});
case "LLLL":
default:
return match2.month(dateString, { width: "wide", context: "standalone" }) || match2.month(dateString, {
width: "abbreviated",
context: "standalone"
}) || match2.month(dateString, { width: "narrow", context: "standalone" });
}
}
validate(_date, value) {
return value >= 0 && value <= 11;
}
set(date2, _flags, value) {
date2.setMonth(value, 1);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
function setWeek(date2, week, options2) {
const date_ = toDate(date2, options2 == null ? void 0 : options2.in);
const diff = getWeek(date_, options2) - week;
date_.setDate(date_.getDate() - diff * 7);
return toDate(date_, options2 == null ? void 0 : options2.in);
}
class LocalWeekParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 100);
__publicField(this, "incompatibleTokens", [
"y",
"R",
"u",
"q",
"Q",
"M",
"L",
"I",
"d",
"D",
"i",
"t",
"T"
]);
}
parse(dateString, token, match2) {
switch (token) {
case "w":
return parseNumericPattern(numericPatterns.week, dateString);
case "wo":
return match2.ordinalNumber(dateString, { unit: "week" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(_date, value) {
return value >= 1 && value <= 53;
}
set(date2, _flags, value, options2) {
return startOfWeek(setWeek(date2, value, options2), options2);
}
}
function setISOWeek(date2, week, options2) {
const _date = toDate(date2, options2 == null ? void 0 : options2.in);
const diff = getISOWeek(_date, options2) - week;
_date.setDate(_date.getDate() - diff * 7);
return _date;
}
class ISOWeekParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 100);
__publicField(this, "incompatibleTokens", [
"y",
"Y",
"u",
"q",
"Q",
"M",
"L",
"w",
"d",
"D",
"e",
"c",
"t",
"T"
]);
}
parse(dateString, token, match2) {
switch (token) {
case "I":
return parseNumericPattern(numericPatterns.week, dateString);
case "Io":
return match2.ordinalNumber(dateString, { unit: "week" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(_date, value) {
return value >= 1 && value <= 53;
}
set(date2, _flags, value) {
return startOfISOWeek(setISOWeek(date2, value));
}
}
const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const DAYS_IN_MONTH_LEAP_YEAR = [
31,
29,
31,
30,
31,
30,
31,
31,
30,
31,
30,
31
];
class DateParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 90);
__publicField(this, "subPriority", 1);
__publicField(this, "incompatibleTokens", [
"Y",
"R",
"q",
"Q",
"w",
"I",
"D",
"i",
"e",
"c",
"t",
"T"
]);
}
parse(dateString, token, match2) {
switch (token) {
case "d":
return parseNumericPattern(numericPatterns.date, dateString);
case "do":
return match2.ordinalNumber(dateString, { unit: "date" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(date2, value) {
const year = date2.getFullYear();
const isLeapYear = isLeapYearIndex$1(year);
const month = date2.getMonth();
if (isLeapYear) {
return value >= 1 && value <= DAYS_IN_MONTH_LEAP_YEAR[month];
} else {
return value >= 1 && value <= DAYS_IN_MONTH[month];
}
}
set(date2, _flags, value) {
date2.setDate(value);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class DayOfYearParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 90);
__publicField(this, "subpriority", 1);
__publicField(this, "incompatibleTokens", [
"Y",
"R",
"q",
"Q",
"M",
"L",
"w",
"I",
"d",
"E",
"i",
"e",
"c",
"t",
"T"
]);
}
parse(dateString, token, match2) {
switch (token) {
case "D":
case "DD":
return parseNumericPattern(numericPatterns.dayOfYear, dateString);
case "Do":
return match2.ordinalNumber(dateString, { unit: "date" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(date2, value) {
const year = date2.getFullYear();
const isLeapYear = isLeapYearIndex$1(year);
if (isLeapYear) {
return value >= 1 && value <= 366;
} else {
return value >= 1 && value <= 365;
}
}
set(date2, _flags, value) {
date2.setMonth(0, value);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
function setDay(date2, day, options2) {
var _a, _b, _c, _d;
const defaultOptions2 = getDefaultOptions$1();
const weekStartsOn = (options2 == null ? void 0 : options2.weekStartsOn) ?? ((_b = (_a = options2 == null ? void 0 : options2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.weekStartsOn) ?? defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
const date_ = toDate(date2, options2 == null ? void 0 : options2.in);
const currentDay = date_.getDay();
const remainder = day % 7;
const dayIndex = (remainder + 7) % 7;
const delta = 7 - weekStartsOn;
const diff = day < 0 || day > 6 ? day - (currentDay + delta) % 7 : (dayIndex + delta) % 7 - (currentDay + delta) % 7;
return addDays(date_, diff, options2);
}
class DayParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 90);
__publicField(this, "incompatibleTokens", ["D", "i", "e", "c", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "E":
case "EE":
case "EEE":
return match2.day(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.day(dateString, { width: "short", context: "formatting" }) || match2.day(dateString, { width: "narrow", context: "formatting" });
case "EEEEE":
return match2.day(dateString, {
width: "narrow",
context: "formatting"
});
case "EEEEEE":
return match2.day(dateString, { width: "short", context: "formatting" }) || match2.day(dateString, { width: "narrow", context: "formatting" });
case "EEEE":
default:
return match2.day(dateString, { width: "wide", context: "formatting" }) || match2.day(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.day(dateString, { width: "short", context: "formatting" }) || match2.day(dateString, { width: "narrow", context: "formatting" });
}
}
validate(_date, value) {
return value >= 0 && value <= 6;
}
set(date2, _flags, value, options2) {
date2 = setDay(date2, value, options2);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class LocalDayParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 90);
__publicField(this, "incompatibleTokens", [
"y",
"R",
"u",
"q",
"Q",
"M",
"L",
"I",
"d",
"D",
"E",
"i",
"c",
"t",
"T"
]);
}
parse(dateString, token, match2, options2) {
const valueCallback = (value) => {
const wholeWeekDays = Math.floor((value - 1) / 7) * 7;
return (value + options2.weekStartsOn + 6) % 7 + wholeWeekDays;
};
switch (token) {
case "e":
case "ee":
return mapValue(parseNDigits(token.length, dateString), valueCallback);
case "eo":
return mapValue(
match2.ordinalNumber(dateString, {
unit: "day"
}),
valueCallback
);
case "eee":
return match2.day(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.day(dateString, { width: "short", context: "formatting" }) || match2.day(dateString, { width: "narrow", context: "formatting" });
case "eeeee":
return match2.day(dateString, {
width: "narrow",
context: "formatting"
});
case "eeeeee":
return match2.day(dateString, { width: "short", context: "formatting" }) || match2.day(dateString, { width: "narrow", context: "formatting" });
case "eeee":
default:
return match2.day(dateString, { width: "wide", context: "formatting" }) || match2.day(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.day(dateString, { width: "short", context: "formatting" }) || match2.day(dateString, { width: "narrow", context: "formatting" });
}
}
validate(_date, value) {
return value >= 0 && value <= 6;
}
set(date2, _flags, value, options2) {
date2 = setDay(date2, value, options2);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class StandAloneLocalDayParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 90);
__publicField(this, "incompatibleTokens", [
"y",
"R",
"u",
"q",
"Q",
"M",
"L",
"I",
"d",
"D",
"E",
"i",
"e",
"t",
"T"
]);
}
parse(dateString, token, match2, options2) {
const valueCallback = (value) => {
const wholeWeekDays = Math.floor((value - 1) / 7) * 7;
return (value + options2.weekStartsOn + 6) % 7 + wholeWeekDays;
};
switch (token) {
case "c":
case "cc":
return mapValue(parseNDigits(token.length, dateString), valueCallback);
case "co":
return mapValue(
match2.ordinalNumber(dateString, {
unit: "day"
}),
valueCallback
);
case "ccc":
return match2.day(dateString, {
width: "abbreviated",
context: "standalone"
}) || match2.day(dateString, { width: "short", context: "standalone" }) || match2.day(dateString, { width: "narrow", context: "standalone" });
case "ccccc":
return match2.day(dateString, {
width: "narrow",
context: "standalone"
});
case "cccccc":
return match2.day(dateString, { width: "short", context: "standalone" }) || match2.day(dateString, { width: "narrow", context: "standalone" });
case "cccc":
default:
return match2.day(dateString, { width: "wide", context: "standalone" }) || match2.day(dateString, {
width: "abbreviated",
context: "standalone"
}) || match2.day(dateString, { width: "short", context: "standalone" }) || match2.day(dateString, { width: "narrow", context: "standalone" });
}
}
validate(_date, value) {
return value >= 0 && value <= 6;
}
set(date2, _flags, value, options2) {
date2 = setDay(date2, value, options2);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
function setISODay(date2, day, options2) {
const date_ = toDate(date2, options2 == null ? void 0 : options2.in);
const currentDay = getISODay(date_, options2);
const diff = day - currentDay;
return addDays(date_, diff, options2);
}
class ISODayParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 90);
__publicField(this, "incompatibleTokens", [
"y",
"Y",
"u",
"q",
"Q",
"M",
"L",
"w",
"d",
"D",
"E",
"e",
"c",
"t",
"T"
]);
}
parse(dateString, token, match2) {
const valueCallback = (value) => {
if (value === 0) {
return 7;
}
return value;
};
switch (token) {
case "i":
case "ii":
return parseNDigits(token.length, dateString);
case "io":
return match2.ordinalNumber(dateString, { unit: "day" });
case "iii":
return mapValue(
match2.day(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.day(dateString, {
width: "short",
context: "formatting"
}) || match2.day(dateString, {
width: "narrow",
context: "formatting"
}),
valueCallback
);
case "iiiii":
return mapValue(
match2.day(dateString, {
width: "narrow",
context: "formatting"
}),
valueCallback
);
case "iiiiii":
return mapValue(
match2.day(dateString, {
width: "short",
context: "formatting"
}) || match2.day(dateString, {
width: "narrow",
context: "formatting"
}),
valueCallback
);
case "iiii":
default:
return mapValue(
match2.day(dateString, {
width: "wide",
context: "formatting"
}) || match2.day(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.day(dateString, {
width: "short",
context: "formatting"
}) || match2.day(dateString, {
width: "narrow",
context: "formatting"
}),
valueCallback
);
}
}
validate(_date, value) {
return value >= 1 && value <= 7;
}
set(date2, _flags, value) {
date2 = setISODay(date2, value);
date2.setHours(0, 0, 0, 0);
return date2;
}
}
class AMPMParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 80);
__publicField(this, "incompatibleTokens", ["b", "B", "H", "k", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "a":
case "aa":
case "aaa":
return match2.dayPeriod(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
case "aaaaa":
return match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
case "aaaa":
default:
return match2.dayPeriod(dateString, {
width: "wide",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
}
}
set(date2, _flags, value) {
date2.setHours(dayPeriodEnumToHours(value), 0, 0, 0);
return date2;
}
}
class AMPMMidnightParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 80);
__publicField(this, "incompatibleTokens", ["a", "B", "H", "k", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "b":
case "bb":
case "bbb":
return match2.dayPeriod(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
case "bbbbb":
return match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
case "bbbb":
default:
return match2.dayPeriod(dateString, {
width: "wide",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
}
}
set(date2, _flags, value) {
date2.setHours(dayPeriodEnumToHours(value), 0, 0, 0);
return date2;
}
}
class DayPeriodParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 80);
__publicField(this, "incompatibleTokens", ["a", "b", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "B":
case "BB":
case "BBB":
return match2.dayPeriod(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
case "BBBBB":
return match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
case "BBBB":
default:
return match2.dayPeriod(dateString, {
width: "wide",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "abbreviated",
context: "formatting"
}) || match2.dayPeriod(dateString, {
width: "narrow",
context: "formatting"
});
}
}
set(date2, _flags, value) {
date2.setHours(dayPeriodEnumToHours(value), 0, 0, 0);
return date2;
}
}
class Hour1to12Parser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 70);
__publicField(this, "incompatibleTokens", ["H", "K", "k", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "h":
return parseNumericPattern(numericPatterns.hour12h, dateString);
case "ho":
return match2.ordinalNumber(dateString, { unit: "hour" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(_date, value) {
return value >= 1 && value <= 12;
}
set(date2, _flags, value) {
const isPM = date2.getHours() >= 12;
if (isPM && value < 12) {
date2.setHours(value + 12, 0, 0, 0);
} else if (!isPM && value === 12) {
date2.setHours(0, 0, 0, 0);
} else {
date2.setHours(value, 0, 0, 0);
}
return date2;
}
}
class Hour0to23Parser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 70);
__publicField(this, "incompatibleTokens", ["a", "b", "h", "K", "k", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "H":
return parseNumericPattern(numericPatterns.hour23h, dateString);
case "Ho":
return match2.ordinalNumber(dateString, { unit: "hour" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(_date, value) {
return value >= 0 && value <= 23;
}
set(date2, _flags, value) {
date2.setHours(value, 0, 0, 0);
return date2;
}
}
class Hour0To11Parser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 70);
__publicField(this, "incompatibleTokens", ["h", "H", "k", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "K":
return parseNumericPattern(numericPatterns.hour11h, dateString);
case "Ko":
return match2.ordinalNumber(dateString, { unit: "hour" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(_date, value) {
return value >= 0 && value <= 11;
}
set(date2, _flags, value) {
const isPM = date2.getHours() >= 12;
if (isPM && value < 12) {
date2.setHours(value + 12, 0, 0, 0);
} else {
date2.setHours(value, 0, 0, 0);
}
return date2;
}
}
class Hour1To24Parser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 70);
__publicField(this, "incompatibleTokens", ["a", "b", "h", "H", "K", "t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "k":
return parseNumericPattern(numericPatterns.hour24h, dateString);
case "ko":
return match2.ordinalNumber(dateString, { unit: "hour" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(_date, value) {
return value >= 1 && value <= 24;
}
set(date2, _flags, value) {
const hours = value <= 24 ? value % 24 : value;
date2.setHours(hours, 0, 0, 0);
return date2;
}
}
class MinuteParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 60);
__publicField(this, "incompatibleTokens", ["t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "m":
return parseNumericPattern(numericPatterns.minute, dateString);
case "mo":
return match2.ordinalNumber(dateString, { unit: "minute" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(_date, value) {
return value >= 0 && value <= 59;
}
set(date2, _flags, value) {
date2.setMinutes(value, 0, 0);
return date2;
}
}
class SecondParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 50);
__publicField(this, "incompatibleTokens", ["t", "T"]);
}
parse(dateString, token, match2) {
switch (token) {
case "s":
return parseNumericPattern(numericPatterns.second, dateString);
case "so":
return match2.ordinalNumber(dateString, { unit: "second" });
default:
return parseNDigits(token.length, dateString);
}
}
validate(_date, value) {
return value >= 0 && value <= 59;
}
set(date2, _flags, value) {
date2.setSeconds(value, 0);
return date2;
}
}
class FractionOfSecondParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 30);
__publicField(this, "incompatibleTokens", ["t", "T"]);
}
parse(dateString, token) {
const valueCallback = (value) => Math.trunc(value * Math.pow(10, -token.length + 3));
return mapValue(parseNDigits(token.length, dateString), valueCallback);
}
set(date2, _flags, value) {
date2.setMilliseconds(value);
return date2;
}
}
class ISOTimezoneWithZParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 10);
__publicField(this, "incompatibleTokens", ["t", "T", "x"]);
}
parse(dateString, token) {
switch (token) {
case "X":
return parseTimezonePattern(
timezonePatterns.basicOptionalMinutes,
dateString
);
case "XX":
return parseTimezonePattern(timezonePatterns.basic, dateString);
case "XXXX":
return parseTimezonePattern(
timezonePatterns.basicOptionalSeconds,
dateString
);
case "XXXXX":
return parseTimezonePattern(
timezonePatterns.extendedOptionalSeconds,
dateString
);
case "XXX":
default:
return parseTimezonePattern(timezonePatterns.extended, dateString);
}
}
set(date2, flags, value) {
if (flags.timestampIsSet) return date2;
return constructFrom(
date2,
date2.getTime() - getTimezoneOffsetInMilliseconds(date2) - value
);
}
}
class ISOTimezoneParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 10);
__publicField(this, "incompatibleTokens", ["t", "T", "X"]);
}
parse(dateString, token) {
switch (token) {
case "x":
return parseTimezonePattern(
timezonePatterns.basicOptionalMinutes,
dateString
);
case "xx":
return parseTimezonePattern(timezonePatterns.basic, dateString);
case "xxxx":
return parseTimezonePattern(
timezonePatterns.basicOptionalSeconds,
dateString
);
case "xxxxx":
return parseTimezonePattern(
timezonePatterns.extendedOptionalSeconds,
dateString
);
case "xxx":
default:
return parseTimezonePattern(timezonePatterns.extended, dateString);
}
}
set(date2, flags, value) {
if (flags.timestampIsSet) return date2;
return constructFrom(
date2,
date2.getTime() - getTimezoneOffsetInMilliseconds(date2) - value
);
}
}
class TimestampSecondsParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 40);
__publicField(this, "incompatibleTokens", "*");
}
parse(dateString) {
return parseAnyDigitsSigned(dateString);
}
set(date2, _flags, value) {
return [constructFrom(date2, value * 1e3), { timestampIsSet: true }];
}
}
class TimestampMillisecondsParser extends Parser {
constructor() {
super(...arguments);
__publicField(this, "priority", 20);
__publicField(this, "incompatibleTokens", "*");
}
parse(dateString) {
return parseAnyDigitsSigned(dateString);
}
set(date2, _flags, value) {
return [constructFrom(date2, value), { timestampIsSet: true }];
}
}
const parsers = {
G: new EraParser(),
y: new YearParser(),
Y: new LocalWeekYearParser(),
R: new ISOWeekYearParser(),
u: new ExtendedYearParser(),
Q: new QuarterParser(),
q: new StandAloneQuarterParser(),
M: new MonthParser(),
L: new StandAloneMonthParser(),
w: new LocalWeekParser(),
I: new ISOWeekParser(),
d: new DateParser(),
D: new DayOfYearParser(),
E: new DayParser(),
e: new LocalDayParser(),
c: new StandAloneLocalDayParser(),
i: new ISODayParser(),
a: new AMPMParser(),
b: new AMPMMidnightParser(),
B: new DayPeriodParser(),
h: new Hour1to12Parser(),
H: new Hour0to23Parser(),
K: new Hour0To11Parser(),
k: new Hour1To24Parser(),
m: new MinuteParser(),
s: new SecondParser(),
S: new FractionOfSecondParser(),
X: new ISOTimezoneWithZParser(),
x: new ISOTimezoneParser(),
t: new TimestampSecondsParser(),
T: new TimestampMillisecondsParser()
};
const formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
const longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
const escapedStringRegExp = /^'([^]*?)'?$/;
const doubleQuoteRegExp = /''/g;
const notWhitespaceRegExp = /\S/;
const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
function parse(dateStr, formatStr, referenceDate, options2) {
var _a, _b, _c, _d;
const invalidDate = () => constructFrom(referenceDate, NaN);
const defaultOptions2 = getDefaultOptions();
const locale2 = defaultOptions2.locale ?? enUS;
const firstWeekContainsDate = defaultOptions2.firstWeekContainsDate ?? ((_b = (_a = defaultOptions2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.firstWeekContainsDate) ?? 1;
const weekStartsOn = defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
const subFnOptions = {
firstWeekContainsDate,
weekStartsOn,
locale: locale2
};
const setters = [new DateTimezoneSetter(options2 == null ? void 0 : options2.in, referenceDate)];
const tokens = formatStr.match(longFormattingTokensRegExp).map((substring) => {
const firstCharacter = substring[0];
if (firstCharacter in longFormatters) {
const longFormatter = longFormatters[firstCharacter];
return longFormatter(substring, locale2.formatLong);
}
return substring;
}).join("").match(formattingTokensRegExp);
const usedTokens = [];
for (let token of tokens) {
if (isProtectedWeekYearToken(token)) {
warnOrThrowProtectedError(token, formatStr, dateStr);
}
if (isProtectedDayOfYearToken(token)) {
warnOrThrowProtectedError(token, formatStr, dateStr);
}
const firstCharacter = token[0];
const parser = parsers[firstCharacter];
if (parser) {
const { incompatibleTokens } = parser;
if (Array.isArray(incompatibleTokens)) {
const incompatibleToken = usedTokens.find(
(usedToken) => incompatibleTokens.includes(usedToken.token) || usedToken.token === firstCharacter
);
if (incompatibleToken) {
throw new RangeError(
`The format string mustn't contain \`${incompatibleToken.fullToken}\` and \`${token}\` at the same time`
);
}
} else if (parser.incompatibleTokens === "*" && usedTokens.length > 0) {
throw new RangeError(
`The format string mustn't contain \`${token}\` and any other token at the same time`
);
}
usedTokens.push({ token: firstCharacter, fullToken: token });
const parseResult = parser.run(
dateStr,
token,
locale2.match,
subFnOptions
);
if (!parseResult) {
return invalidDate();
}
setters.push(parseResult.setter);
dateStr = parseResult.rest;
} else {
if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
throw new RangeError(
"Format string contains an unescaped latin alphabet character `" + firstCharacter + "`"
);
}
if (token === "''") {
token = "'";
} else if (firstCharacter === "'") {
token = cleanEscapedString(token);
}
if (dateStr.indexOf(token) === 0) {
dateStr = dateStr.slice(token.length);
} else {
return invalidDate();
}
}
}
if (dateStr.length > 0 && notWhitespaceRegExp.test(dateStr)) {
return invalidDate();
}
const uniquePrioritySetters = setters.map((setter) => setter.priority).sort((a2, b) => b - a2).filter((priority, index, array2) => array2.indexOf(priority) === index).map(
(priority) => setters.filter((setter) => setter.priority === priority).sort((a2, b) => b.subPriority - a2.subPriority)
).map((setterArray) => setterArray[0]);
let date2 = toDate(referenceDate, options2 == null ? void 0 : options2.in);
if (isNaN(+date2)) return invalidDate();
const flags = {};
for (const setter of uniquePrioritySetters) {
if (!setter.validate(date2, subFnOptions)) {
return invalidDate();
}
const result = setter.set(date2, flags, subFnOptions);
if (Array.isArray(result)) {
date2 = result[0];
Object.assign(flags, result[1]);
} else {
date2 = result;
}
}
return date2;
}
function cleanEscapedString(input) {
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
}
function isSameMonth(laterDate, earlierDate, options2) {
const [laterDate_, earlierDate_] = normalizeDates(
options2 == null ? void 0 : options2.in,
laterDate,
earlierDate
);
return laterDate_.getFullYear() === earlierDate_.getFullYear() && laterDate_.getMonth() === earlierDate_.getMonth();
}
function isToday(date2, options2) {
return isSameDay(
constructFrom(date2, date2),
constructNow(date2)
);
}
function isWithinInterval(date2, interval, options2) {
const time2 = +toDate(date2, options2 == null ? void 0 : options2.in);
const [startTime, endTime] = [
+toDate(interval.start, options2 == null ? void 0 : options2.in),
+toDate(interval.end, options2 == null ? void 0 : options2.in)
].sort((a2, b) => a2 - b);
return time2 >= startTime && time2 <= endTime;
}
function parseISO(argument, options2) {
const invalidDate = () => constructFrom(options2 == null ? void 0 : options2.in, NaN);
const additionalDigits = 2;
const dateStrings = splitDateString(argument);
let date2;
if (dateStrings.date) {
const parseYearResult = parseYear(dateStrings.date, additionalDigits);
date2 = parseDate(parseYearResult.restDateString, parseYearResult.year);
}
if (!date2 || isNaN(+date2)) return invalidDate();
const timestamp = +date2;
let time2 = 0;
let offset;
if (dateStrings.time) {
time2 = parseTime(dateStrings.time);
if (isNaN(time2)) return invalidDate();
}
if (dateStrings.timezone) {
offset = parseTimezone(dateStrings.timezone);
if (isNaN(offset)) return invalidDate();
} else {
const tmpDate = new Date(timestamp + time2);
const result = toDate(0, options2 == null ? void 0 : options2.in);
result.setFullYear(
tmpDate.getUTCFullYear(),
tmpDate.getUTCMonth(),
tmpDate.getUTCDate()
);
result.setHours(
tmpDate.getUTCHours(),
tmpDate.getUTCMinutes(),
tmpDate.getUTCSeconds(),
tmpDate.getUTCMilliseconds()
);
return result;
}
return toDate(timestamp + time2 + offset, options2 == null ? void 0 : options2.in);
}
const patterns = {
dateTimeDelimiter: /[T ]/,
timeZoneDelimiter: /[Z ]/i,
timezone: /([Z+-].*)$/
};
const dateRegex = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
const timeRegex = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
const timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
function splitDateString(dateString) {
const dateStrings = {};
const array2 = dateString.split(patterns.dateTimeDelimiter);
let timeString;
if (array2.length > 2) {
return dateStrings;
}
if (/:/.test(array2[0])) {
timeString = array2[0];
} else {
dateStrings.date = array2[0];
timeString = array2[1];
if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
timeString = dateString.substr(
dateStrings.date.length,
dateString.length
);
}
}
if (timeString) {
const token = patterns.timezone.exec(timeString);
if (token) {
dateStrings.time = timeString.replace(token[1], "");
dateStrings.timezone = token[1];
} else {
dateStrings.time = timeString;
}
}
return dateStrings;
}
function parseYear(dateString, additionalDigits) {
const regex = new RegExp(
"^(?:(\\d{4}|[+-]\\d{" + (4 + additionalDigits) + "})|(\\d{2}|[+-]\\d{" + (2 + additionalDigits) + "})$)"
);
const captures = dateString.match(regex);
if (!captures) return { year: NaN, restDateString: "" };
const year = captures[1] ? parseInt(captures[1]) : null;
const century = captures[2] ? parseInt(captures[2]) : null;
return {
year: century === null ? year : century * 100,
restDateString: dateString.slice((captures[1] || captures[2]).length)
};
}
function parseDate(dateString, year) {
if (year === null) return /* @__PURE__ */ new Date(NaN);
const captures = dateString.match(dateRegex);
if (!captures) return /* @__PURE__ */ new Date(NaN);
const isWeekDate = !!captures[4];
const dayOfYear = parseDateUnit(captures[1]);
const month = parseDateUnit(captures[2]) - 1;
const day = parseDateUnit(captures[3]);
const week = parseDateUnit(captures[4]);
const dayOfWeek = parseDateUnit(captures[5]) - 1;
if (isWeekDate) {
if (!validateWeekDate(year, week, dayOfWeek)) {
return /* @__PURE__ */ new Date(NaN);
}
return dayOfISOWeekYear(year, week, dayOfWeek);
} else {
const date2 = /* @__PURE__ */ new Date(0);
if (!validateDate(year, month, day) || !validateDayOfYearDate(year, dayOfYear)) {
return /* @__PURE__ */ new Date(NaN);
}
date2.setUTCFullYear(year, month, Math.max(dayOfYear, day));
return date2;
}
}
function parseDateUnit(value) {
return value ? parseInt(value) : 1;
}
function parseTime(timeString) {
const captures = timeString.match(timeRegex);
if (!captures) return NaN;
const hours = parseTimeUnit(captures[1]);
const minutes = parseTimeUnit(captures[2]);
const seconds = parseTimeUnit(captures[3]);
if (!validateTime(hours, minutes, seconds)) {
return NaN;
}
return hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1e3;
}
function parseTimeUnit(value) {
return value && parseFloat(value.replace(",", ".")) || 0;
}
function parseTimezone(timezoneString) {
if (timezoneString === "Z") return 0;
const captures = timezoneString.match(timezoneRegex);
if (!captures) return 0;
const sign2 = captures[1] === "+" ? -1 : 1;
const hours = parseInt(captures[2]);
const minutes = captures[3] && parseInt(captures[3]) || 0;
if (!validateTimezone(hours, minutes)) {
return NaN;
}
return sign2 * (hours * millisecondsInHour + minutes * millisecondsInMinute);
}
function dayOfISOWeekYear(isoWeekYear, week, day) {
const date2 = /* @__PURE__ */ new Date(0);
date2.setUTCFullYear(isoWeekYear, 0, 4);
const fourthOfJanuaryDay = date2.getUTCDay() || 7;
const diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
date2.setUTCDate(date2.getUTCDate() + diff);
return date2;
}
const daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function isLeapYearIndex(year) {
return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
}
function validateDate(year, month, date2) {
return month >= 0 && month <= 11 && date2 >= 1 && date2 <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28));
}
function validateDayOfYearDate(year, dayOfYear) {
return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
}
function validateWeekDate(_year, week, day) {
return week >= 1 && week <= 53 && day >= 0 && day <= 6;
}
function validateTime(hours, minutes, seconds) {
if (hours === 24) {
return minutes === 0 && seconds === 0;
}
return seconds >= 0 && seconds < 60 && minutes >= 0 && minutes < 60 && hours >= 0 && hours < 25;
}
function validateTimezone(_hours, minutes) {
return minutes >= 0 && minutes <= 59;
}
function subMonths(date2, amount, options2) {
return addMonths(date2, -1, options2);
}
const Calendar = ({
selected,
onSelect,
disabled,
minDate,
maxDate,
className = ""
}) => {
const [currentMonth, setCurrentMonth] = reactExports.useState(/* @__PURE__ */ new Date());
const monthStart = startOfMonth(currentMonth);
const monthEnd = endOfMonth(currentMonth);
const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });
const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
const isDateDisabled = (date2) => {
if (disabled && disabled(date2)) return true;
if (minDate && date2 < minDate) return true;
if (maxDate && date2 > maxDate) return true;
return false;
};
const handleDateClick = (date2) => {
if (isDateDisabled(date2)) return;
onSelect == null ? void 0 : onSelect(date2);
};
const previousMonth = () => {
setCurrentMonth(subMonths(currentMonth));
};
const nextMonth = () => {
setCurrentMonth(addMonths(currentMonth, 1));
};
const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-3 ${className}`, children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: previousMonth,
className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "w-4 h-4" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: format(currentMonth, "MMMM yyyy") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: nextMonth,
className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: weekDays.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-2",
children: day
},
day
)) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, dayIdx) => {
const isCurrentMonth = isSameMonth(day, currentMonth);
const isSelected = selected && isSameDay(day, selected);
const isTodayDate = isToday(day);
const isDisabled = isDateDisabled(day);
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => handleDateClick(day),
disabled: isDisabled,
className: `
h-9 w-9 text-sm rounded-md transition-colors
${isCurrentMonth ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-600"}
${isSelected ? "bg-blue-600 text-white hover:bg-blue-700" : isTodayDate ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-semibold" : "hover:bg-gray-100 dark:hover:bg-gray-700"}
${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
`,
children: format(day, "d")
},
dayIdx
);
}) })
] });
};
const PopoverContext = reactExports.createContext({
open: false,
setOpen: () => {
},
triggerRef: { current: null }
});
const Popover = ({
children,
open: controlledOpen,
onOpenChange
}) => {
const [internalOpen, setInternalOpen] = reactExports.useState(false);
const triggerRef = reactExports.useRef(null);
const open = controlledOpen !== void 0 ? controlledOpen : internalOpen;
const setOpen = reactExports.useCallback(
(newOpen) => {
if (controlledOpen === void 0) {
setInternalOpen(newOpen);
}
onOpenChange == null ? void 0 : onOpenChange(newOpen);
},
[controlledOpen, onOpenChange]
);
return /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative", children }) });
};
const PopoverTrigger = ({ children, asChild }) => {
const { open, setOpen, triggerRef } = reactExports.useContext(PopoverContext);
if (asChild && reactExports.isValidElement(children)) {
return reactExports.cloneElement(children, {
ref: (node) => {
triggerRef.current = node;
if (typeof children.ref === "function") {
children.ref(node);
}
},
onClick: () => setOpen(!open)
});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
ref: (node) => {
triggerRef.current = node;
},
onClick: () => setOpen(!open),
className: "cursor-pointer",
children
}
);
};
const PopoverContent = ({ children, className = "", align = "start", side = "bottom" }) => {
const { open, setOpen, triggerRef } = reactExports.useContext(PopoverContext);
const contentRef = reactExports.useRef(null);
const [position, setPosition] = reactExports.useState(null);
reactExports.useEffect(() => {
if (!open || !triggerRef.current) {
setPosition(null);
return;
}
const calculatePosition = () => {
if (!triggerRef.current) return;
const triggerRect = triggerRef.current.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const scrollX = window.scrollX;
const scrollY = window.scrollY;
const estimatedWidth = 320;
const estimatedHeight = 300;
let top = 0;
let left = 0;
if (side === "bottom") {
top = triggerRect.bottom + scrollY + 8;
if (top + estimatedHeight > scrollY + viewportHeight) {
top = triggerRect.top + scrollY - estimatedHeight - 8;
}
} else if (side === "top") {
top = triggerRect.top + scrollY - estimatedHeight - 8;
if (top < scrollY) {
top = triggerRect.bottom + scrollY + 8;
}
} else if (side === "right") {
top = triggerRect.top + scrollY;
left = triggerRect.right + scrollX + 8;
if (left + estimatedWidth > scrollX + viewportWidth) {
left = triggerRect.left + scrollX - estimatedWidth - 8;
}
} else if (side === "left") {
top = triggerRect.top + scrollY;
left = triggerRect.left + scrollX - estimatedWidth - 8;
if (left < scrollX) {
left = triggerRect.right + scrollX + 8;
}
}
if (side === "top" || side === "bottom") {
if (align === "start") {
left = triggerRect.left + scrollX;
} else if (align === "center") {
left = triggerRect.left + scrollX + triggerRect.width / 2 - estimatedWidth / 2;
} else if (align === "end") {
left = triggerRect.right + scrollX - estimatedWidth;
}
if (left < scrollX) {
left = scrollX + 8;
} else if (left + estimatedWidth > scrollX + viewportWidth) {
left = scrollX + viewportWidth - estimatedWidth - 8;
}
}
if (top < scrollY) {
top = scrollY + 8;
} else if (top + estimatedHeight > scrollY + viewportHeight) {
top = scrollY + viewportHeight - estimatedHeight - 8;
}
setPosition({ top, left });
requestAnimationFrame(() => {
if (!contentRef.current || !triggerRef.current) return;
const contentRect = contentRef.current.getBoundingClientRect();
const currentTop = top;
const currentLeft = left;
let refinedTop = currentTop;
let refinedLeft = currentLeft;
if (refinedTop + contentRect.height > scrollY + viewportHeight) {
refinedTop = scrollY + viewportHeight - contentRect.height - 8;
}
if (refinedTop < scrollY) {
refinedTop = scrollY + 8;
}
if (refinedLeft + contentRect.width > scrollX + viewportWidth) {
refinedLeft = scrollX + viewportWidth - contentRect.width - 8;
}
if (refinedLeft < scrollX) {
refinedLeft = scrollX + 8;
}
if (refinedTop !== currentTop || refinedLeft !== currentLeft) {
setPosition({ top: refinedTop, left: refinedLeft });
}
});
};
calculatePosition();
const handleResize = () => calculatePosition();
const handleScroll = () => calculatePosition();
window.addEventListener("resize", handleResize);
window.addEventListener("scroll", handleScroll, true);
return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("scroll", handleScroll, true);
};
}, [open, align, side]);
reactExports.useEffect(() => {
if (!open) return;
const handleClickOutside = (event) => {
if (contentRef.current && !contentRef.current.contains(event.target)) {
if (triggerRef.current && triggerRef.current.contains(event.target)) {
return;
}
setOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [open, setOpen]);
if (!open) return null;
const initialPosition = position || { top: 0, left: 0 };
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
ref: contentRef,
className: `fixed z-[9999] w-72 rounded-md border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800 ${className}`,
style: {
top: `${initialPosition.top}px`,
left: `${initialPosition.left}px`,
visibility: position ? "visible" : "hidden"
},
children
}
);
};
const DatePicker = ({
value,
onChange,
placeholder = "Select date",
disabled = false,
minDate,
maxDate,
className = "",
error = false
}) => {
const [open, setOpen] = reactExports.useState(false);
let selectedDate = void 0;
if (value && value.trim()) {
try {
const parsed = parse(value, "yyyy-MM-dd", /* @__PURE__ */ new Date());
if (!isNaN(parsed.getTime())) {
selectedDate = parsed;
}
} catch (e) {
selectedDate = void 0;
}
}
const handleSelect = (date2) => {
if (date2) {
onChange == null ? void 0 : onChange(format(date2, "yyyy-MM-dd"));
setOpen(false);
}
};
let displayValue = "";
if (selectedDate && !isNaN(selectedDate.getTime())) {
try {
displayValue = format(selectedDate, "MMM dd, yyyy");
} catch (e) {
displayValue = "";
}
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open, onOpenChange: setOpen, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
disabled,
className: `w-full justify-start text-left font-normal ${error ? "border-red-500" : ""} ${!displayValue ? "text-gray-500" : ""} ${className}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
displayValue || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: placeholder })
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Calendar,
{
selected: selectedDate,
onSelect: handleSelect,
minDate,
maxDate
}
) })
] });
};
const CustomerForm = () => {
var _a;
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const baseAdminUrl = ((_a = window.yatraAdmin) == null ? void 0 : _a.adminUrl) || "";
const [formData, setFormData] = reactExports.useState({
first_name: "",
last_name: "",
email: "",
phone: "",
secondary_phone: "",
country: "",
city: "",
state: "",
address: "",
postal_code: "",
nationality: "",
date_of_birth: "",
gender: "",
emergency_name: "",
emergency_phone: "",
emergency_relationship: "",
dietary_requirements: "",
medical_conditions: "",
special_needs: "",
newsletter_optin: false,
marketing_optin: false,
status: "active",
notes: "",
loyalty_tier: "bronze",
loyalty_points: 0
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const customerId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const isEditMode = action === "edit" && customerId !== null;
const { data: customerData, isLoading: isLoadingCustomer } = useQuery({
queryKey: ["customer", customerId],
queryFn: async () => {
if (!customerId) return null;
const response = await apiService.getCustomer(customerId);
const data = (response == null ? void 0 : response.data) ?? response;
const emergency = data.emergency_contact || {};
return {
first_name: data.first_name || "",
last_name: data.last_name || "",
email: data.email || "",
phone: data.phone || "",
secondary_phone: data.secondary_phone || "",
country: data.country || "",
city: data.city || "",
state: data.state || "",
address: data.address || "",
postal_code: data.postal_code || "",
nationality: data.nationality || "",
date_of_birth: data.date_of_birth || "",
gender: data.gender || "",
emergency_name: data.emergency_name || emergency.name || "",
emergency_phone: data.emergency_phone || emergency.phone || "",
emergency_relationship: data.emergency_relationship || emergency.relationship || "",
dietary_requirements: data.dietary_requirements || "",
medical_conditions: data.medical_conditions || "",
special_needs: data.special_needs || "",
newsletter_optin: Boolean(data.newsletter_optin),
marketing_optin: Boolean(data.marketing_optin),
status: data.status || "active",
notes: data.notes || "",
loyalty_tier: data.loyalty_tier || "bronze",
loyalty_points: typeof data.loyalty_points === "number" ? data.loyalty_points : parseInt(data.loyalty_points || "0", 10) || 0
};
},
enabled: isEditMode
});
reactExports.useEffect(() => {
if (customerData && isEditMode) {
setFormData(customerData);
}
}, [customerData, isEditMode]);
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.first_name.trim()) {
newErrors.first_name = __("First name is required", "yatra");
}
if (!formData.email.trim()) {
newErrors.email = __("Email is required", "yatra");
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = __("Invalid email address", "yatra");
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = { ...data };
if (isEditMode && customerId) {
return await apiService.updateCustomer(customerId, payload);
} else {
throw new Error(
"Creating customers directly is not supported. Customers are created when bookings are made."
);
}
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["customers"] });
queryClient2.invalidateQueries({ queryKey: ["customer", customerId] });
setIsSubmitting(false);
showToast(__("Customer updated successfully", "yatra"), "success");
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the customer", "yatra");
setErrors({ submit: errorMessage });
setIsSubmitting(false);
showToast(errorMessage, "error");
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=customers`;
};
const renderSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-40" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-24" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full" })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-20" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full" }) })
] }) })
] });
if (isEditMode && isLoadingCustomer) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Edit Customer", "yatra"),
description: __("Loading...", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
renderSkeleton()
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Customer", "yatra") : __("Add New Customer", "yatra"),
description: isEditMode ? __("Update customer information", "yatra") : __("Create a new customer profile", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_customers", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Personal Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "first_name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("First Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "first_name",
type: "text",
value: formData.first_name,
onChange: (e) => handleFieldChange("first_name", e.target.value),
placeholder: __("Enter first name", "yatra"),
className: errors.first_name ? "border-red-500" : "",
required: true
}
),
errors.first_name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.first_name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "last_name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Last Name", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "last_name",
type: "text",
value: formData.last_name,
onChange: (e) => handleFieldChange("last_name", e.target.value),
placeholder: __("Enter last name", "yatra")
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "email",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Email Address", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "email",
type: "email",
value: formData.email,
onChange: (e) => handleFieldChange("email", e.target.value),
placeholder: __("customer@example.com", "yatra"),
className: errors.email ? "border-red-500" : "",
required: true,
disabled: isEditMode
}
),
errors.email && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.email })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "phone",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Phone Number", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "phone",
type: "tel",
value: formData.phone,
onChange: (e) => handleFieldChange("phone", e.target.value),
placeholder: __("+1234567890", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "secondary_phone",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Secondary Phone", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "secondary_phone",
type: "tel",
value: formData.secondary_phone,
onChange: (e) => handleFieldChange("secondary_phone", e.target.value),
placeholder: __("+1234567890", "yatra")
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "date_of_birth",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Date of Birth", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
DatePicker,
{
value: formData.date_of_birth,
onChange: (value) => handleFieldChange("date_of_birth", value),
placeholder: __("Select date of birth", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "gender",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Gender", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "gender",
value: formData.gender,
onChange: (e) => handleFieldChange("gender", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: __("Select gender", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "male", children: __("Male", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "female", children: __("Female", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "other", children: __("Other", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "prefer_not_to_say", children: __("Prefer not to say", "yatra") })
]
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "nationality",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Nationality", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "nationality",
type: "text",
value: formData.nationality,
onChange: (e) => handleFieldChange("nationality", e.target.value),
placeholder: __("Enter nationality", "yatra")
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Address Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "address",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Street Address", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "address",
type: "text",
value: formData.address,
onChange: (e) => handleFieldChange("address", e.target.value),
placeholder: __("Enter street address", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "city",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("City", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "city",
type: "text",
value: formData.city,
onChange: (e) => handleFieldChange("city", e.target.value),
placeholder: __("Enter city", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "state",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("State/Province", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "state",
type: "text",
value: formData.state,
onChange: (e) => handleFieldChange("state", e.target.value),
placeholder: __("Enter state", "yatra")
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "country",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Country", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "country",
type: "text",
value: formData.country,
onChange: (e) => handleFieldChange("country", e.target.value),
placeholder: __("Enter country", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "postal_code",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Postal Code", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "postal_code",
type: "text",
value: formData.postal_code,
onChange: (e) => handleFieldChange("postal_code", e.target.value),
placeholder: __("Enter postal code", "yatra")
}
)
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Emergency Contact", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "emergency_name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Contact Name", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "emergency_name",
type: "text",
value: formData.emergency_name,
onChange: (e) => handleFieldChange("emergency_name", e.target.value),
placeholder: __("Full name", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "emergency_phone",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Contact Phone", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "emergency_phone",
type: "tel",
value: formData.emergency_phone,
onChange: (e) => handleFieldChange("emergency_phone", e.target.value),
placeholder: __("+1234567890", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "emergency_relationship",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Relationship", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "emergency_relationship",
type: "text",
value: formData.emergency_relationship,
onChange: (e) => handleFieldChange(
"emergency_relationship",
e.target.value
),
placeholder: __("e.g., Spouse, Parent", "yatra")
}
)
] })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Special Requirements", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "dietary_requirements",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Dietary Requirements", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "dietary_requirements",
type: "text",
value: formData.dietary_requirements,
onChange: (e) => handleFieldChange(
"dietary_requirements",
e.target.value
),
placeholder: __("e.g., Vegetarian, Gluten-free", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "medical_conditions",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Medical Conditions", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "medical_conditions",
value: formData.medical_conditions,
onChange: (e) => handleFieldChange("medical_conditions", e.target.value),
placeholder: __(
"Any relevant medical conditions",
"yatra"
),
rows: 2,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "special_needs",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Special Needs", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "special_needs",
value: formData.special_needs,
onChange: (e) => handleFieldChange("special_needs", e.target.value),
placeholder: __(
"Any special accommodations needed",
"yatra"
),
rows: 2,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none"
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Internal Notes", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "notes",
value: formData.notes,
onChange: (e) => handleFieldChange("notes", e.target.value),
placeholder: __(
"Enter any internal notes about this customer (not visible to customer)",
"yatra"
),
rows: 4,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none"
}
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Customer Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "active", children: __("Active", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "inactive", children: __("Inactive", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "blocked", children: __("Blocked", "yatra") })
]
}
)
] }) })
] }),
isEditMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Loyalty", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "loyalty_tier",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Loyalty Tier", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "loyalty_tier",
value: formData.loyalty_tier,
onChange: (e) => handleFieldChange("loyalty_tier", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "bronze", children: __("🥉 Bronze", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "silver", children: __("🥈 Silver", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "gold", children: __("🥇 Gold", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "platinum", children: __("💎 Platinum", "yatra") })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "loyalty_points",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Loyalty Points", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "loyalty_points",
type: "number",
min: 0,
value: formData.loyalty_points,
onChange: (e) => handleFieldChange(
"loyalty_points",
parseInt(e.target.value) || 0
)
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Preferences", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: formData.newsletter_optin,
onChange: (e) => handleFieldChange("newsletter_optin", e.target.checked),
className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: __("Subscribe to newsletter", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: formData.marketing_optin,
onChange: (e) => handleFieldChange("marketing_optin", e.target.checked),
className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: __("Receive marketing emails", "yatra") })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
errors.submit && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 text-sm text-red-500 bg-red-50 dark:bg-red-900/20 rounded-md", children: errors.submit }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Customer", "yatra") : __("Create Customer", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] })
] }) }) })
] })
] }) }) })
] });
};
const CustomerSummaryCard = ({ customerId }) => {
var _a, _b, _c, _d;
const [includeSensitive, setIncludeSensitive] = reactExports.useState(false);
const [summary, setSummary] = reactExports.useState(null);
const mutation = useMutation({
mutationFn: () => aiApi.getCustomerSummary(customerId, includeSensitive),
onSuccess: (resp) => {
var _a2;
setSummary(String(((_a2 = resp.data) == null ? void 0 : _a2.text) ?? "").trim());
}
});
if (!isAiEligible() || !isAiModuleEnabled()) {
return null;
}
const ready = isAiReady();
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-4 w-4 text-blue-600 dark:text-blue-300" }),
__("AI Customer Summary", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: __(
"A 3-line operator-facing snapshot — status, last trip, anything notable for ops.",
"yatra"
) })
] }),
!summary && /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
size: "sm",
onClick: () => mutation.mutate(),
disabled: mutation.isPending || !ready,
className: "bg-blue-600 text-white hover:bg-blue-700",
children: mutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "mr-2 h-3.5 w-3.5 animate-spin" }),
__("Generating…", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "mr-1.5 h-3.5 w-3.5" }),
__("Generate summary", "yatra")
] })
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
!ready && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-amber-200 bg-amber-50/40 p-3 text-xs text-amber-800 dark:border-amber-500/40 dark:bg-amber-900/20 dark:text-amber-200", children: __(
"Configure an AI provider key under Yatra → AI Assistant to enable this.",
"yatra"
) }),
!summary && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex cursor-pointer items-start gap-2 rounded-md border border-gray-200 p-2.5 text-xs hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800/60", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: includeSensitive,
onChange: (e) => setIncludeSensitive(e.target.checked),
className: "mt-0.5"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 font-medium text-gray-900 dark:text-white", children: [
includeSensitive ? /* @__PURE__ */ jsxRuntimeExports.jsx(Shield, { className: "h-3.5 w-3.5 text-amber-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldOff, { className: "h-3.5 w-3.5 text-gray-400" }),
__(
"Include sensitive fields (medical, dietary, notes)",
"yatra"
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 text-gray-500 dark:text-gray-400", children: __(
"Off by default. When on, the customer's health and preference details flow to the AI for this generation only.",
"yatra"
) })
] })
] }),
mutation.isError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-3 text-xs text-red-700 dark:border-red-500/40 dark:bg-red-900/20 dark:text-red-300", children: ((_c = (_b = (_a = mutation.error) == null ? void 0 : _a.response) == null ? void 0 : _b.data) == null ? void 0 : _c.message) || ((_d = mutation.error) == null ? void 0 : _d.message) || __("AI request failed.", "yatra") }),
summary && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "whitespace-pre-wrap text-sm leading-relaxed text-gray-900 dark:text-white", children: summary }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "ghost",
size: "sm",
onClick: () => {
setSummary(null);
},
className: "text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "mr-1.5 h-3 w-3" }),
__("Regenerate", "yatra")
]
}
) })
] })
] })
] });
};
const ViewCustomer = () => {
var _a;
const { can, isPro } = usePermissions();
const baseAdminUrl = ((_a = window.yatraAdmin) == null ? void 0 : _a.adminUrl) || "";
const customerId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const {
data: customer,
isLoading,
error
} = useQuery({
queryKey: ["customer", customerId],
queryFn: async () => {
if (!customerId) throw new Error("No customer ID");
const response = await apiService.getCustomer(customerId);
const data = (response == null ? void 0 : response.data) ?? response;
const emergency = data.emergency_contact || {};
return {
...data,
emergency_name: data.emergency_name ?? emergency.name ?? null,
emergency_phone: data.emergency_phone ?? emergency.phone ?? null,
emergency_relationship: data.emergency_relationship ?? emergency.relationship ?? null
};
},
enabled: !!customerId && can("yatra_view_customers")
});
const { data: bookings, isLoading: isLoadingBookings } = useQuery({
queryKey: ["customer-bookings", customerId],
queryFn: async () => {
if (!customerId) return [];
const json = await apiService.getCustomerBookings(customerId);
if (Array.isArray(json)) {
return json;
}
if (json && Array.isArray(json.data)) {
return json.data;
}
return [];
},
enabled: !!customerId && can("yatra_view_bookings")
});
const formatDate2 = (dateString) => {
return formatDate$1(dateString);
};
const formatShortDate = (dateString) => {
return formatDate$1(dateString);
};
const formatPrice = (price, currencyCode = "USD") => formatYatraMoney(Number(price) || 0, currencyCode, {
zeroAsUnknown: false
});
const getStatusBadge = (status) => {
const statusMap = {
active: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Active", "yatra")
},
inactive: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Inactive", "yatra")
},
blocked: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Blocked", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-3 py-1 rounded-md text-sm font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const getBookingStatusBadge = (status) => {
const statusMap = {
confirmed: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Confirmed", "yatra")
},
completed: {
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400",
label: __("Completed", "yatra")
},
pending: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __("Pending", "yatra")
},
cancelled: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Cancelled", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const getLoyaltyBadge = (tier) => {
const tierMap = {
bronze: {
className: "bg-amber-100 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400",
icon: "🥉"
},
silver: {
className: "bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300",
icon: "🥈"
},
gold: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
icon: "🥇"
},
platinum: {
className: "bg-purple-100 text-purple-700 dark:bg-purple-900/20 dark:text-purple-400",
icon: "💎"
}
};
const tierInfo = tierMap[tier] || tierMap["bronze"];
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"span",
{
className: `inline-flex items-center gap-1 px-3 py-1 rounded-md text-sm font-medium ${tierInfo.className}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: tierInfo.icon }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "capitalize", children: tier })
]
}
);
};
const handleBack = () => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=customers`;
};
const handleEdit = () => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=customers&action=edit&id=${customerId}`;
};
const handleViewBooking = (bookingId) => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=bookings&action=view&id=${bookingId}`;
};
const renderSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-40" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-16 rounded" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-48" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-36" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-28" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-64" })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-24" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-12" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-20" })
] })
] })
] }) })
] });
if (isLoading) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Customer Details", "yatra"),
description: __("Loading...", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
renderSkeleton()
] });
}
if (error || !customer) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Customer Not Found", "yatra"),
description: __(
"The customer you are looking for does not exist",
"yatra"
),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back to Customers", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-8 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-12 h-12 mx-auto mb-3 text-red-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500", children: __("Error loading customer or customer not found", "yatra") })
] }) })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Customer Details", "yatra"),
description: __("View complete customer information", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_customers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: handleEdit, className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
__("Edit Customer", "yatra")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_customers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
(customer == null ? void 0 : customer.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(CustomerSummaryCard, { customerId: customer.id }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Customer Overview", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
getStatusBadge(customer.status),
getLoyaltyBadge(customer.loyalty_tier || "bronze")
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(User, { className: "w-3 h-3" }),
__("Full Name", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${baseAdminUrl}?page=yatra&subpage=customers&action=view&id=${customer.id}`,
className: "hover:underline text-primary-600 dark:text-primary-400",
children: customer.name || `${customer.first_name} ${customer.last_name}`
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-3 h-3" }),
__("Email Address", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.email })
] }),
customer.phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { className: "w-3 h-3" }),
__("Phone Number", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-900 dark:text-white", children: [
customer.phone,
customer.secondary_phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500 ml-2", children: [
"/ ",
customer.secondary_phone
] })
] })
] })
] }),
customer.address && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-3 h-3" }),
__("Address", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-900 dark:text-white", children: [
customer.address,
customer.city && `, ${customer.city}`,
customer.state && `, ${customer.state}`,
customer.postal_code && ` ${customer.postal_code}`
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
customer.country && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "w-3 h-3" }),
__("Country", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.country })
] }),
customer.nationality && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Nationality", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.nationality })
] }),
customer.date_of_birth && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Date of Birth", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: formatShortDate(customer.date_of_birth) })
] })
] })
] })
] }),
customer.emergency_name && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4 text-red-500" }),
__("Emergency Contact", "yatra")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Name", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.emergency_name })
] }),
customer.emergency_phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Phone", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.emergency_phone })
] }),
customer.emergency_relationship && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Relationship", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.emergency_relationship })
] })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Booking History", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: isLoadingBookings ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 space-y-2", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-24" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-40" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-16" })
] }, i)) }) : !bookings || bookings.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-8 text-center text-gray-500 dark:text-gray-400", children: __("No bookings yet", "yatra") }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Table$1, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Reference", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Trip", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Travel Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Amount", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "text-right", children: __("Actions", "yatra") })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { children: bookings.map((booking) => /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "font-medium text-gray-900 dark:text-white", children: booking.reference }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "text-gray-900 dark:text-white", children: booking.trip_title }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "text-gray-500 dark:text-gray-400 text-sm", children: formatShortDate(booking.travel_date) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "font-medium", children: formatPrice(
booking.total_amount,
booking.currency
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: getBookingStatusBadge(booking.status) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => handleViewBooking(booking.id),
className: "h-8",
children: __("View", "yatra")
}
) })
] }, booking.id)) })
] }) })
] }),
customer.notes && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { className: "w-4 h-4" }),
__("Internal Notes", "yatra")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap", children: customer.notes }) })
] }),
(customer.dietary_requirements || customer.medical_conditions || customer.special_needs) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Special Requirements", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
customer.dietary_requirements && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Dietary Requirements", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.dietary_requirements })
] }),
customer.medical_conditions && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Medical Conditions", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.medical_conditions })
] }),
customer.special_needs && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Special Needs", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: customer.special_needs })
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
isPro && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Statistics", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-3 h-3" }),
__("Total Bookings", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-semibold text-gray-900 dark:text-white", children: customer.total_bookings || 0 })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(DollarSign, { className: "w-3 h-3" }),
__("Total Spent", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-semibold text-gray-900 dark:text-white", children: formatPrice(customer.total_spent || 0) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-3 h-3" }),
__("Total Travelers", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-semibold text-gray-900 dark:text-white", children: customer.total_travelers || 0 })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Award, { className: "w-4 h-4" }),
__("Loyalty", "yatra")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Current Tier", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: getLoyaltyBadge(customer.loyalty_tier || "bronze") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Points", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: customer.loyalty_points || 0 })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Timeline", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-3 h-3" }),
__("Registered", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: formatDate2(customer.created_at) })
] }),
customer.last_booking_date && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Last Booking", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: formatShortDate(customer.last_booking_date) })
] }),
customer.last_travel_date && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Last Travel", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: formatShortDate(customer.last_travel_date) })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Preferences", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Newsletter", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: customer.newsletter_optin ? "text-green-600" : "text-gray-400",
children: customer.newsletter_optin ? __("Subscribed", "yatra") : __("Not subscribed", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Marketing", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: customer.marketing_optin ? "text-green-600" : "text-gray-400",
children: customer.marketing_optin ? __("Opted in", "yatra") : __("Opted out", "yatra")
}
)
] })
] })
] })
] })
] }) })
] });
};
const Reviews = () => {
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [ratingFilter, setRatingFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("created_at");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
review: null
});
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
if (typeof window === "undefined") {
return {
trip: true,
customer: true,
rating: true,
review: true,
status: true,
date: true
};
}
const saved = window.localStorage.getItem("yatra-reviews-visible-columns");
return saved ? JSON.parse(saved) : {
trip: true,
customer: true,
rating: true,
review: true,
status: true,
date: true
};
});
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
if (ratingFilter !== "all") {
params.rating = ratingFilter;
}
return params;
}, [searchTerm, statusFilter, ratingFilter, sortBy2, sortOrder, page]);
const { data, isLoading, error } = useQuery({
queryKey: ["reviews", queryParams],
queryFn: async () => {
const response = await apiClient.get("/reviews", { params: queryParams });
const reviews2 = ((response == null ? void 0 : response.data) || []).map((item) => ({
id: item.id,
trip_id: item.trip_id,
trip_title: item.trip_title || "Unknown Trip",
trip_slug: item.trip_slug || "",
customer_name: item.customer_name || item.author_name || "Anonymous",
customer_email: item.customer_email || item.author_email || "",
rating: item.rating,
title: item.title || "",
comment: item.comment || item.content || "",
status: item.status || "pending",
verified: item.verified || false,
created_at: item.created_at || ""
}));
return {
data: reviews2,
total: (response == null ? void 0 : response.total) || 0,
page: (response == null ? void 0 : response.page) || page,
per_page: (response == null ? void 0 : response.per_page) || 10
};
},
enabled: can("yatra_view_reviews")
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/reviews/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["reviews"] });
}
});
const reviews = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 10);
const errorContext = getErrorContext(error);
const formatDate2 = (dateString) => {
return formatDate$1(dateString);
};
const renderStars = (rating) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5", children: [
[1, 2, 3, 4, 5].map((star2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Star,
{
className: `w-4 h-4 ${star2 <= rating ? "fill-yellow-400 text-yellow-400" : "fill-gray-300 text-gray-300 dark:fill-gray-600 dark:text-gray-600"}`
},
star2
)),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-sm text-gray-600 dark:text-gray-400", children: rating })
] });
};
const getStatusBadge = (status) => {
const statusMap = {
approved: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Approved", "yatra")
},
pending: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __("Pending", "yatra")
},
spam: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Spam", "yatra")
},
trash: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Trash", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const handleEdit = (review) => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=reviews&action=edit&id=${review.id}`;
};
const handleDelete = (review) => {
setDeleteConfirm({ isOpen: true, review });
};
const confirmDelete = () => {
if (deleteConfirm.review) {
deleteMutation.mutate(deleteConfirm.review.id);
setDeleteConfirm({ isOpen: false, review: null });
}
};
const handleView = (review) => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=reviews&action=view&id=${review.id}`;
};
const handleCreateReview = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=reviews&action=create`;
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setRatingFilter("all");
setSortBy("created_at");
setSortOrder("desc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("desc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || ratingFilter !== "all" || sortBy2 !== "created_at" || sortOrder !== "desc";
const bulkActionOptions = reactExports.useMemo(() => {
if (statusFilter === "trash") {
return [{ value: "delete", label: __("Delete Permanently", "yatra") }];
}
if (statusFilter === "spam") {
return [
{ value: "mark_trash", label: __("Move to Trash", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}
return [
{ value: "mark_approved", label: __("Mark as Approved", "yatra") },
{ value: "mark_pending", label: __("Mark as Pending", "yatra") },
{ value: "mark_spam", label: __("Mark as Spam", "yatra") },
{ value: "mark_trash", label: __("Move to Trash", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}, [statusFilter]);
const handleBulkApply = () => {
if (!bulkAction || selectedIds.length === 0) {
return;
}
const run = async () => {
try {
await apiService.bulkReviewsAction(bulkAction, selectedIds);
queryClient2.invalidateQueries({ queryKey: ["reviews"] });
} catch (error2) {
console.error("Bulk review action error", error2);
} finally {
setSelectedIds([]);
setBulkAction("");
}
};
void run();
};
const toggleColumn = (columnKey) => {
const newVisible = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisible);
if (typeof window !== "undefined") {
window.localStorage.setItem(
"yatra-reviews-visible-columns",
JSON.stringify(newVisible)
);
}
};
const columnOptions = [
{ key: "trip", label: __("Trip", "yatra"), visible: visibleColumns.trip },
{
key: "customer",
label: __("Customer", "yatra"),
visible: visibleColumns.customer
},
{
key: "rating",
label: __("Rating", "yatra"),
visible: visibleColumns.rating
},
{
key: "review",
label: __("Review", "yatra"),
visible: visibleColumns.review
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{ key: "date", label: __("Date", "yatra"), visible: visibleColumns.date }
];
const handleApprove = async (review) => {
await apiService.updateReviewStatus(review.id, "approved");
queryClient2.invalidateQueries({ queryKey: ["reviews"] });
};
const handleMarkPending = async (review) => {
await apiService.updateReviewStatus(review.id, "pending");
queryClient2.invalidateQueries({ queryKey: ["reviews"] });
};
const handleMarkSpam = async (review) => {
await apiService.updateReviewStatus(review.id, "spam");
queryClient2.invalidateQueries({ queryKey: ["reviews"] });
};
const handleMarkTrash = async (review) => {
await apiService.updateReviewStatus(review.id, "trash");
queryClient2.invalidateQueries({ queryKey: ["reviews"] });
};
const actions = [
{
key: "view",
label: __("View", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (review) => handleView(review),
condition: () => can("yatra_view_reviews")
},
{
key: "approve",
label: __("Approve", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Star, { className: "w-4 h-4" }),
onClick: (review) => handleApprove(review),
condition: (review) => can("yatra_edit_reviews") && review.status !== "approved"
},
{
key: "mark_pending",
label: __("Mark as Pending", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (review) => handleMarkPending(review),
condition: (review) => can("yatra_edit_reviews") && review.status !== "pending"
},
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (review) => handleEdit(review),
condition: () => can("yatra_edit_reviews")
},
{
key: "mark_spam",
label: __("Mark as Spam", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (review) => handleMarkSpam(review),
condition: (review) => can("yatra_edit_reviews") && review.status !== "spam"
},
{
key: "mark_trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (review) => handleMarkTrash(review),
condition: (review) => can("yatra_edit_reviews") && review.status !== "trash"
},
{
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (review) => handleDelete(review),
variant: "destructive",
condition: () => can("yatra_delete_reviews")
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, review: null }),
onConfirm: confirmDelete,
title: __("Delete Review", "yatra"),
message: deleteConfirm.review ? __(
'Are you sure you want to delete this review by "{name}"? This action cannot be undone.',
"yatra"
).replace("{name}", deleteConfirm.review.customer_name) : __(
"Are you sure you want to delete this review? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Reviews", "yatra"),
description: __("Manage customer reviews and ratings", "yatra"),
actionCapability: "yatra_edit_reviews",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateReview,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Review", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row gap-2 items-stretch lg:items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative min-w-0 w-full lg:w-12 lg:flex-[2]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search reviews...", "yatra"),
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
className: "pl-10 w-full"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: statusFilter,
onChange: (e) => setStatusFilter(e.target.value),
className: "w-full lg:flex-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "approved", children: __("Approved", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "pending", children: __("Pending", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "spam", children: __("Spam", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: ratingFilter,
onChange: (e) => setRatingFilter(e.target.value),
className: "w-full lg:flex-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Ratings", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "5", children: __("5 Stars", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "4", children: __("4 Stars", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "3", children: __("3 Stars", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "2", children: __("2 Stars", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "1", children: __("1 Star", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: sortBy2,
onChange: (e) => setSortBy(e.target.value),
className: "w-full lg:flex-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "created_at", children: __("Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trip_title", children: __("Trip", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "customer_name", children: __("Customer", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "rating", children: __("Rating", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "status", children: __("Status", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => setSortOrder(sortOrder === "asc" ? "desc" : "asc"),
className: "h-11 px-4 flex items-center gap-1.5 flex-shrink-0",
title: sortOrder === "asc" ? __("Ascending", "yatra") : __("Descending", "yatra"),
children: [
sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: sortOrder === "asc" ? __("Asc", "yatra") : __("Desc", "yatra") })
]
}
),
hasFilters && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleResetFilters,
className: "flex items-center gap-2 h-11 flex-shrink-0",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }),
__("Reset", "yatra")
]
}
)
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ key: "all", label: __("All", "yatra"), count: total },
{
key: "approved",
label: __("Approved", "yatra"),
count: reviews.filter((r2) => r2.status === "approved").length
},
{
key: "pending",
label: __("Pending", "yatra"),
count: reviews.filter((r2) => r2.status === "pending").length
},
{
key: "spam",
label: __("Spam", "yatra"),
count: reviews.filter((r2) => r2.status === "spam").length
},
{
key: "trash",
label: __("Trash", "yatra"),
count: reviews.filter((r2) => r2.status === "trash").length
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: deleteMutation.isPending,
totalItems: reviews.length,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: reviews,
columns: [
visibleColumns.trip && {
key: "trip",
label: __("Trip", "yatra"),
render: (review) => {
var _a;
return review.trip_id ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&action=edit&id=${review.trip_id}`,
className: "font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline",
children: review.trip_title
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-500 dark:text-gray-400", children: review.trip_title });
}
},
visibleColumns.customer && {
key: "customer",
label: __("Customer", "yatra"),
render: (review) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: review.customer_name }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: review.customer_email }),
review.verified && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400 mt-1", children: __("Verified", "yatra") })
] })
},
visibleColumns.rating && {
key: "rating",
label: __("Rating", "yatra"),
render: (review) => renderStars(review.rating)
},
visibleColumns.review && {
key: "review",
label: __("Review", "yatra"),
render: (review) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white mb-1", children: review.title }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 line-clamp-2", children: review.content })
] })
},
visibleColumns.status && {
key: "status",
label: __("Status", "yatra"),
render: (review) => getStatusBadge(review.status)
},
visibleColumns.date && {
key: "date",
label: __("Date", "yatra"),
render: (review) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: formatDate2(review.created_at) })
}
].filter(Boolean),
actions,
isLoading,
isError: !!error,
errorText: __("Error loading reviews", "yatra"),
errorDescription: __(
"We couldn’t connect to the reviews service. Please refresh or try again shortly.",
"We couldn’t connect to the reviews service. Please refresh or try again shortly."
),
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["reviews"] }),
errorDetails: errorContext.details,
errorRequestInfo: errorContext.requestInfo,
emptyText: __("No reviews found", "yatra"),
emptyDescription: __(
"When customers submit reviews, they will appear here.",
"yatra"
),
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds(
(prev) => prev.includes(id) ? prev : [...prev, id]
);
} else {
setSelectedIds(
(prev) => prev.filter((existingId) => existingId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(reviews.map((r2) => r2.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: reviews.length > 0 && selectedIds.length === reviews.length,
getItemId: (review) => review.id,
capability: "yatra_view_reviews",
skeletonRows: 5
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: setPage,
itemName: __("Review", "yatra")
}
)
] });
};
const ReviewForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const [formData, setFormData] = reactExports.useState({
trip_id: "",
customer_name: "",
customer_email: "",
rating: "5",
title: "",
comment: "",
status: "pending",
verified: false
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const reviewId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const isEditMode = action === "edit" && reviewId !== null;
const { data: tripsData } = useQuery({
queryKey: ["trips-list"],
queryFn: async () => {
const response = await apiClient.get("/trips", {
params: {
per_page: 100,
status: "all"
// Get all trips including drafts
}
});
const trips2 = ((response == null ? void 0 : response.data) || []).map((trip) => ({
id: trip.id,
title: trip.title || "Untitled Trip"
}));
return { data: trips2 };
},
enabled: can("yatra_view_trips")
});
const { data: reviewData, isLoading: isLoadingReview } = useQuery({
queryKey: ["review", reviewId],
queryFn: async () => {
if (!reviewId) return null;
const response = await apiClient.get(`/reviews/${reviewId}`);
const review = (response == null ? void 0 : response.data) || response;
return {
id: review.id,
trip_id: review.trip_id,
customer_name: review.customer_name || review.author_name || "",
customer_email: review.customer_email || review.author_email || "",
rating: review.rating,
title: review.title || "",
comment: review.comment || review.content || "",
status: review.status || "pending",
verified: review.verified || false
};
},
enabled: isEditMode && can("yatra_view_reviews")
});
reactExports.useEffect(() => {
var _a, _b;
if (reviewData && isEditMode) {
setFormData({
trip_id: ((_a = reviewData.trip_id) == null ? void 0 : _a.toString()) || "",
customer_name: reviewData.customer_name || "",
customer_email: reviewData.customer_email || "",
rating: ((_b = reviewData.rating) == null ? void 0 : _b.toString()) || "5",
title: reviewData.title || "",
comment: reviewData.comment || "",
status: reviewData.status || "pending",
verified: reviewData.verified || false
});
}
}, [reviewData, isEditMode]);
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const renderStarRating = (rating) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
[1, 2, 3, 4, 5].map((star2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => handleFieldChange("rating", star2.toString()),
className: "focus:outline-none",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Star,
{
className: `w-6 h-6 transition-colors ${star2 <= rating ? "fill-yellow-400 text-yellow-400" : "fill-gray-300 text-gray-300 dark:fill-gray-600 dark:text-gray-600 hover:fill-yellow-200 hover:text-yellow-200"}`
}
)
},
star2
)),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-2 text-sm text-gray-600 dark:text-gray-400", children: [
rating,
" ",
__("stars", "yatra")
] })
] });
};
const validateForm = () => {
const newErrors = {};
if (!formData.trip_id) {
newErrors.trip_id = __("Trip is required", "yatra");
}
if (!formData.customer_name.trim()) {
newErrors.customer_name = __("Customer name is required", "yatra");
}
if (!formData.customer_email.trim()) {
newErrors.customer_email = __("Email is required", "yatra");
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.customer_email)) {
newErrors.customer_email = __("Invalid email address", "yatra");
}
if (!formData.rating || parseInt(formData.rating) < 1 || parseInt(formData.rating) > 5) {
newErrors.rating = __("Rating must be between 1 and 5", "yatra");
}
if (!formData.title.trim()) {
newErrors.title = __("Review title is required", "yatra");
}
if (!formData.comment.trim()) {
newErrors.comment = __("Review comment is required", "yatra");
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
trip_id: parseInt(data.trip_id),
customer_name: data.customer_name.trim(),
customer_email: data.customer_email.trim(),
rating: parseInt(data.rating),
title: data.title.trim(),
comment: data.comment.trim(),
status: data.status,
verified: data.verified
};
if (isEditMode && reviewId) {
return await apiClient.put(`/reviews/${reviewId}`, payload);
} else {
return await apiClient.post("/reviews", payload);
}
},
onSuccess: () => {
var _a;
queryClient2.invalidateQueries({ queryKey: ["reviews"] });
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=reviews`;
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the review", "yatra");
setErrors({ submit: errorMessage });
setIsSubmitting(false);
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=reviews`;
};
if (isEditMode && isLoadingReview) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-6 h-6 animate-spin text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 text-gray-600 dark:text-gray-400", children: __("Loading review...", "yatra") })
] });
}
const trips = (tripsData == null ? void 0 : tripsData.data) || [];
const currentRating = parseInt(formData.rating);
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Review", "yatra") : __("Add New Review", "yatra"),
description: isEditMode ? __("Update review information", "yatra") : __("Create a new customer review", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_reviews", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Review Details", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "trip_id",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Trip", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "trip_id",
value: formData.trip_id,
onChange: (e) => handleFieldChange("trip_id", e.target.value),
className: errors.trip_id ? "border-red-500" : "",
required: true,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: __("Select a trip", "yatra") }),
trips.map((trip) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: trip.id, children: trip.title }, trip.id))
]
}
),
errors.trip_id && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.trip_id })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: [
__("Rating", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
renderStarRating(currentRating),
errors.rating && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.rating })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "title",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Review Title", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "title",
type: "text",
value: formData.title,
onChange: (e) => handleFieldChange("title", e.target.value),
placeholder: __("Enter review title", "yatra"),
className: errors.title ? "border-red-500" : "",
required: true
}
),
errors.title && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.title })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "comment",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Review Comment", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "comment",
value: formData.comment,
onChange: (e) => handleFieldChange("comment", e.target.value),
placeholder: __("Enter review comment", "yatra"),
rows: 6,
className: `flex w-full rounded-md border ${errors.comment ? "border-red-500" : "border-gray-300"} bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none`,
required: true
}
),
errors.comment && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.comment })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Customer Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "customer_name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Customer Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "customer_name",
type: "text",
value: formData.customer_name,
onChange: (e) => handleFieldChange("customer_name", e.target.value),
placeholder: __("Enter customer name", "yatra"),
className: errors.customer_name ? "border-red-500" : "",
required: true
}
),
errors.customer_name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.customer_name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "customer_email",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Customer Email", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "customer_email",
type: "email",
value: formData.customer_email,
onChange: (e) => handleFieldChange("customer_email", e.target.value),
placeholder: __("customer@example.com", "yatra"),
className: errors.customer_email ? "border-red-500" : "",
required: true
}
),
errors.customer_email && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.customer_email })
] })
] }) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Review Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "pending", children: __("Pending", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "approved", children: __("Approved", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "spam", children: __("Spam", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
id: "verified",
checked: formData.verified,
onChange: (e) => handleFieldChange("verified", e.target.checked),
className: "w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "verified",
className: "text-sm font-medium text-gray-700 dark:text-gray-300",
children: __("Verified Purchase", "yatra")
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
errors.submit && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 text-sm text-red-500 bg-red-50 dark:bg-red-900/20 rounded-md", children: errors.submit }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Review", "yatra") : __("Create Review", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] })
] }) }) })
] })
] }) }) })
] });
};
const ViewReview = () => {
var _a;
const { can } = usePermissions();
const reviewId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const {
data: review,
isLoading,
error
} = useQuery({
queryKey: ["review", reviewId],
queryFn: async () => {
if (!reviewId) return null;
const response = await apiClient.get(`/reviews/${reviewId}`);
const data = (response == null ? void 0 : response.data) || response;
return {
id: data.id,
trip_id: data.trip_id,
trip_title: data.trip_title || "Unknown Trip",
trip_slug: data.trip_slug || "",
customer_name: data.customer_name || data.author_name || "Anonymous",
customer_email: data.customer_email || data.author_email || "",
customer_location: data.customer_location || data.author_location || "",
rating: data.rating,
title: data.title || "",
content: data.content || "",
status: data.status || "pending",
verified: data.verified || false,
created_at: data.created_at || "",
updated_at: data.updated_at || ""
};
},
enabled: !!reviewId && can("yatra_view_reviews")
});
const formatDate2 = (dateString) => {
return new Date(dateString).toLocaleDateString("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
});
};
const renderStars = (rating) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
[1, 2, 3, 4, 5].map((star2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Star,
{
className: `w-6 h-6 ${star2 <= rating ? "fill-yellow-400 text-yellow-400" : "fill-gray-300 text-gray-300 dark:fill-gray-600 dark:text-gray-600"}`
},
star2
)),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-2 text-lg font-semibold text-gray-900 dark:text-white", children: [
rating,
" ",
__("out of 5", "yatra")
] })
] });
};
const getStatusBadge = (status) => {
const statusMap = {
approved: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Approved", "yatra")
},
pending: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __("Pending", "yatra")
},
spam: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Spam", "yatra")
},
trash: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Trash", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-3 py-1 rounded-md text-sm font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const handleBack = () => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=reviews`;
};
const handleEdit = () => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=reviews&action=edit&id=${reviewId}`;
};
if (isLoading) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Review Details", "yatra"),
description: __("View complete review information", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-1", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"
},
i
)) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-full bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-full bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-3/4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-1" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-1" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-1" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-36 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) })
] })
] })
] })
] });
}
if (error || !review) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Review Not Found", "yatra"),
description: __(
"The review you are looking for does not exist",
"yatra"
),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back to Reviews", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-8 text-center text-red-500", children: __("Error loading review or review not found", "yatra") }) })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Review Details", "yatra"),
description: __("View complete review information", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_reviews", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: handleEdit, className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
__("Edit Review", "yatra")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_reviews", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Review Overview", "yatra") }),
getStatusBadge(review.status)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Trip", "yatra") }),
review.trip_id ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&action=edit&id=${review.trip_id}`,
className: "text-lg font-semibold text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline",
children: review.trip_title
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: review.trip_title })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2", children: __("Rating", "yatra") }),
renderStars(review.rating)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Review Title", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: review.title })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2", children: __("Review Comment", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap leading-relaxed", children: review.content })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Customer Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Customer Name", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: review.customer_name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-3 h-3" }),
__("Email Address", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: review.customer_email || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: __("Not provided", "yatra") }) })
] }),
review.customer_location && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-3 h-3" }),
__("Location", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: review.customer_location })
] }),
review.verified && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400", children: __("Verified Purchase", "yatra") }) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Timeline", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-3 h-3" }),
__("Created", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: formatDate2(review.created_at) })
] }),
review.updated_at && review.updated_at !== review.created_at && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1", children: __("Last Updated", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: formatDate2(review.updated_at) })
] })
] })
] })
] })
] }) })
] });
};
const MIGRATION_NOTICE_KEY = "yatra_migration_notice_dismissed_at";
const Tools = () => {
var _a, _b, _c;
const [activeTab, setActiveTab] = reactExports.useState("export-import");
const [isExporting, setIsExporting] = reactExports.useState(false);
const [isImporting, setIsImporting] = reactExports.useState(false);
const [selectedExportData, setSelectedExportData] = reactExports.useState([
"trips",
"destinations",
"activities",
"bookings",
"customers"
]);
const [selectedImportData, setSelectedImportData] = reactExports.useState([]);
const [isDragOver, setIsDragOver] = reactExports.useState(false);
const [showExportModal, setShowExportModal] = reactExports.useState(false);
const [showImportModal, setShowImportModal] = reactExports.useState(false);
const [showDeleteModal, setShowDeleteModal] = reactExports.useState(false);
const [showClearLogsModal, setShowClearLogsModal] = reactExports.useState(false);
const [pendingImportFile, setPendingImportFile] = reactExports.useState(null);
const [systemStatus, setSystemStatus] = reactExports.useState(null);
const [logs, setLogs] = reactExports.useState({});
const [selectedLogType, setSelectedLogType] = reactExports.useState("error");
const [isLoadingStatus, setIsLoadingStatus] = reactExports.useState(false);
const [isLoadingLogs, setIsLoadingLogs] = reactExports.useState(false);
const [isLoadingJobs, setIsLoadingJobs] = reactExports.useState(false);
const [allJobs, setAllJobs] = reactExports.useState([]);
const [isClearingCache, setIsClearingCache] = reactExports.useState(false);
const [showCacheModal, setShowCacheModal] = reactExports.useState(false);
const [cacheData, setCacheData] = reactExports.useState([]);
const [isLoadingCache, setIsLoadingCache] = reactExports.useState(false);
const [cronJobs, setCronJobs] = reactExports.useState([]);
const [cronInfo, setCronInfo] = reactExports.useState(null);
const [isLoadingCronJobs, setIsLoadingCronJobs] = reactExports.useState(false);
const [runningCronJob, setRunningCronJob] = reactExports.useState(null);
const [migrationStatus, setMigrationStatus] = reactExports.useState(null);
const [isLoadingMigration, setIsLoadingMigration] = reactExports.useState(false);
const [migrationProgress, setMigrationProgress] = reactExports.useState(null);
const [isMigrating, setIsMigrating] = reactExports.useState(false);
const [isStartingMigration, setIsStartingMigration] = reactExports.useState(false);
const migrationPollingRef = reactExports.useRef(
null
);
const [showMigrationConfirm, setShowMigrationConfirm] = reactExports.useState(false);
const [showMigrationCompleteNotice, setShowMigrationCompleteNotice] = reactExports.useState(true);
const [isImportingSampleData, setIsImportingSampleData] = reactExports.useState(false);
const [sampleDataStatus, setSampleDataStatus] = reactExports.useState(null);
const [sampleDataJob, setSampleDataJob] = reactExports.useState(null);
const { showToast } = useToast();
reactExports.useEffect(() => {
const allowed = /* @__PURE__ */ new Set([
"export-import",
"jobs",
"system-status",
"logs",
"migration"
]);
try {
const params = new URLSearchParams(window.location.search);
const t = params.get("tools_tab");
if (t && allowed.has(t)) {
setActiveTab(t);
}
} catch {
}
}, []);
const formatBytes = (bytes) => {
if (bytes === 0) return "0 Bytes";
const k2 = 1024;
const sizes = ["Bytes", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(k2));
return parseFloat((bytes / Math.pow(k2, i)).toFixed(2)) + " " + sizes[i];
};
reactExports.useEffect(() => {
if (!(migrationProgress == null ? void 0 : migrationProgress.started_at) || !(migrationProgress == null ? void 0 : migrationProgress.all_complete)) {
setShowMigrationCompleteNotice(false);
if (typeof window !== "undefined") {
window.localStorage.removeItem(MIGRATION_NOTICE_KEY);
}
return;
}
if (typeof window === "undefined") {
setShowMigrationCompleteNotice(true);
return;
}
const dismissedAt = window.localStorage.getItem(MIGRATION_NOTICE_KEY);
if (dismissedAt && dismissedAt === migrationProgress.started_at) {
setShowMigrationCompleteNotice(false);
} else {
setShowMigrationCompleteNotice(true);
}
}, [migrationProgress == null ? void 0 : migrationProgress.started_at, migrationProgress == null ? void 0 : migrationProgress.all_complete]);
reactExports.useEffect(() => {
const loadSampleDataStatus = async () => {
try {
const status = await apiService.getSampleDataStatus();
setSampleDataStatus(status);
} catch (error) {
console.error("Failed to load sample data status:", error);
}
};
loadSampleDataStatus();
}, []);
const [exportJob, setExportJob] = reactExports.useState(null);
const [importJob, setImportJob] = reactExports.useState(null);
const pollingIntervalRef = reactExports.useRef(
null
);
const logTypes = [
{ key: "error", label: "Error Logs", icon: XCircle },
{ key: "payment", label: "Payment Logs", icon: CheckCircle },
{ key: "booking", label: "Booking Logs", icon: FileText },
{ key: "system", label: "System Logs", icon: Server }
];
const dataTypes = [
{
key: "all",
label: "All Yatra data",
description: "Complete backup: all tables, settings, itinerary, payments, and Pro data (if present)",
icon: Database
},
{
key: "trips",
label: "Trips",
description: "All trip packages, itineraries, and details",
icon: MapPin
},
{
key: "destinations",
label: "Destinations",
description: "Travel destinations and locations",
icon: Globe
},
{
key: "activities",
label: "Activities",
description: "Trip activities and experiences",
icon: Activity
},
{
key: "categories",
label: "Trip Categories",
description: "Trip categorization and taxonomy",
icon: Folder
},
{
key: "difficulty_levels",
label: "Difficulty Levels",
description: "Trip difficulty classifications",
icon: Mountain
},
{
key: "bookings",
label: "Bookings",
description: "Customer bookings and reservations",
icon: Calendar$1
},
{
key: "customers",
label: "Customers",
description: "Customer profiles and CRM data",
icon: Users
},
{
key: "travelers",
label: "Travelers",
description: "Individual traveler information",
icon: UserCheck
},
{
key: "payments",
label: "Payments",
description: "Payment transactions and history",
icon: CreditCard
},
{
key: "reviews",
label: "Reviews",
description: "Trip reviews and ratings",
icon: Star
},
{
key: "enquiries",
label: "Enquiries",
description: "Customer enquiries and leads",
icon: MessageSquare
},
{
key: "discounts",
label: "Discounts",
description: "Discount codes and promotions",
icon: Tag
},
{
key: "availability",
label: "Availability",
description: "Trip availability and schedules",
icon: BarChart3
},
{
key: "itinerary",
label: "Itinerary Items",
description: "Itinerary items and types",
icon: List
},
{
key: "settings",
label: "Settings",
description: "Plugin configuration and settings",
icon: Settings$1
}
];
const loadSystemStatus = async () => {
setIsLoadingStatus(true);
try {
const data = await apiService.getSystemStatus();
setSystemStatus(data);
} catch (error) {
console.error("Failed to load system status:", error);
} finally {
setIsLoadingStatus(false);
}
};
const loadActiveJobs = async () => {
try {
const jobs = await apiService.getActiveJobs();
if (Array.isArray(jobs) && jobs.length > 0) {
const exportJobData = jobs.find((j) => j.type === "export");
const importJobData = jobs.find((j) => j.type === "import");
if (exportJobData) {
setExportJob(exportJobData);
if (exportJobData.status === "pending" || exportJobData.status === "running") {
setIsExporting(true);
pollJobStatus(exportJobData.id, "export");
}
}
if (importJobData) {
setImportJob(importJobData);
if (importJobData.status === "pending" || importJobData.status === "running") {
setIsImporting(true);
pollJobStatus(importJobData.id, "import");
}
}
}
} catch (error) {
console.error("Failed to load active jobs:", error);
}
};
reactExports.useEffect(() => {
loadActiveJobs();
if (activeTab === "system-status") {
loadSystemStatus();
}
}, [activeTab]);
const loadLogs = async (type, page = 1) => {
setIsLoadingLogs(true);
try {
const data = await apiService.getLogs(type, page);
if (data.logs && Array.isArray(data.logs)) {
const logsData = data;
setLogs((prev) => ({ ...prev, [type]: logsData }));
}
} catch (error) {
console.error("Failed to load logs:", error);
} finally {
setIsLoadingLogs(false);
}
};
const selectableDataTypes = dataTypes.filter((dt) => dt.key !== "all");
const handleExportDataToggle = (dataType) => {
if (dataType === "all") {
setSelectedExportData((prev) => prev.includes("all") ? [] : ["all"]);
return;
}
setSelectedExportData((prev) => {
const withoutAll = prev.filter((t) => t !== "all");
return withoutAll.includes(dataType) ? withoutAll.filter((t) => t !== dataType) : [...withoutAll, dataType];
});
};
const handleExportSelectAll = () => {
const keys2 = selectableDataTypes.map((dt) => dt.key);
const allRegularSelected = keys2.length > 0 && keys2.every((k2) => selectedExportData.includes(k2)) && !selectedExportData.includes("all");
const onlyAll = selectedExportData.length === 1 && selectedExportData.includes("all");
if (allRegularSelected || onlyAll) {
setSelectedExportData([]);
} else {
setSelectedExportData(keys2);
}
};
const handleImportDataToggle = (dataType) => {
if (dataType === "all") {
setSelectedImportData((prev) => prev.includes("all") ? [] : ["all"]);
return;
}
setSelectedImportData((prev) => {
const withoutAll = prev.filter((t) => t !== "all");
return withoutAll.includes(dataType) ? withoutAll.filter((t) => t !== dataType) : [...withoutAll, dataType];
});
};
const handleImportSelectAll = () => {
const keys2 = selectableDataTypes.map((dt) => dt.key);
const allRegularSelected = keys2.length > 0 && keys2.every((k2) => selectedImportData.includes(k2)) && !selectedImportData.includes("all");
const onlyAll = selectedImportData.length === 1 && selectedImportData.includes("all");
if (allRegularSelected || onlyAll) {
setSelectedImportData([]);
} else {
setSelectedImportData(keys2);
}
};
const handleExportClick = () => {
setShowExportModal(true);
};
const handleExport = async () => {
if (selectedExportData.length === 0) {
alert("Please select at least one data type to export.");
return;
}
setIsExporting(true);
setShowExportModal(false);
try {
const data = await apiService.createExportJob({
data_types: selectedExportData
});
const jobId = data.job_id;
pollJobStatus(jobId, "export");
} catch (error) {
console.error("Export error:", error);
alert("Export failed. Please try again.");
setIsExporting(false);
}
};
const stopPolling = () => {
if (pollingIntervalRef.current) {
clearInterval(pollingIntervalRef.current);
pollingIntervalRef.current = null;
}
};
const pollJobStatus = (jobId, type) => {
const endpoint = type === "export" ? "export-job" : "import-job";
const poll = async () => {
try {
const jobData = await apiService.performJobAction(
endpoint,
jobId
);
if (jobData) {
if (type === "export") {
setExportJob(jobData);
} else {
setImportJob(jobData);
}
if (jobData.status === "completed" || jobData.status === "failed") {
stopPolling();
if (type === "export") {
setIsExporting(false);
} else {
setIsImporting(false);
}
if (jobData.status === "failed") {
alert(
`${type === "export" ? "Export" : "Import"} failed: ${jobData.error || "Unknown error"}`
);
}
}
}
} catch (error) {
console.error("Failed to poll job status:", error);
}
};
stopPolling();
poll();
pollingIntervalRef.current = setInterval(poll, 2e3);
};
const handleDownloadExport = async () => {
if (!exportJob || exportJob.status !== "completed") return;
try {
const blob = await apiService.downloadExportJobBlob(exportJob.id);
const url = window.URL.createObjectURL(blob);
const a2 = document.createElement("a");
a2.style.display = "none";
a2.href = url;
a2.download = `yatra-export-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.json`;
document.body.appendChild(a2);
a2.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a2);
await apiService.deleteExportJob(exportJob.id);
setExportJob(null);
} catch (error) {
console.error("Download error:", error);
alert("Download failed. Please try again.");
}
};
const handleDeleteClick = () => {
if (!exportJob) return;
setShowDeleteModal(true);
};
const handleCancelDelete = () => {
setShowDeleteModal(false);
};
const handleConfirmDelete = async () => {
if (!exportJob) return;
setShowDeleteModal(false);
try {
await apiService.deleteExportJob(exportJob.id);
setExportJob(null);
} catch (error) {
console.error("Delete error:", error);
alert("Failed to delete export file.");
}
};
reactExports.useEffect(() => {
if (activeTab === "logs") {
loadLogs(selectedLogType);
}
}, [activeTab, selectedLogType]);
const processFile = async (file) => {
if (selectedImportData.length === 0) {
alert("Please select at least one data type to import.");
return;
}
setIsImporting(true);
try {
const formData = new FormData();
formData.append("file", file);
formData.append("data_types", JSON.stringify(selectedImportData));
const data = await apiService.createImportJob(formData);
const jobId = data.job_id;
pollJobStatus(jobId, "import");
setSelectedImportData([]);
} catch (error) {
console.error("Import error:", error);
alert("Import failed. Please check the file format and try again.");
setIsImporting(false);
}
};
const handleImport = async (event) => {
var _a2;
const file = (_a2 = event.target.files) == null ? void 0 : _a2[0];
if (!file) return;
setPendingImportFile(file);
setShowImportModal(true);
event.target.value = "";
};
const handleDragOver = (e) => {
e.preventDefault();
setIsDragOver(true);
};
const handleDragLeave = (e) => {
e.preventDefault();
setIsDragOver(false);
};
const handleDrop = async (e) => {
e.preventDefault();
setIsDragOver(false);
const files = Array.from(e.dataTransfer.files);
const jsonFile = files.find(
(file) => file.type === "application/json" || file.name.endsWith(".json")
);
if (!jsonFile) {
alert("Please drop a valid JSON file.");
return;
}
setPendingImportFile(jsonFile);
setShowImportModal(true);
};
const handleImportConfirm = async () => {
if (!pendingImportFile) return;
setShowImportModal(false);
await processFile(pendingImportFile);
setPendingImportFile(null);
setSelectedImportData([]);
};
const handleClearLogs = () => {
setShowClearLogsModal(true);
};
const confirmClearLogs = async () => {
try {
const data = await apiService.clearLogs(selectedLogType);
if (data.success) {
showToast(data.message || "Logs cleared successfully", "success");
setLogs((prev) => ({
...prev,
[selectedLogType]: {
logs: [],
total: 0,
page: 1,
per_page: 50,
pages: 0
}
}));
} else {
showToast(data.message || "Failed to clear logs", "error");
}
} catch (error) {
console.error("Failed to clear logs:", error);
showToast("Failed to clear logs. Please try again.", "error");
}
};
const copyLogToClipboard = async (log2) => {
const logText = `[${log2.timestamp}] ${log2.level.toUpperCase()}: ${log2.message}${log2.context ? "\nContext: " + JSON.stringify(log2.context, null, 2) : ""}`;
try {
await navigator.clipboard.writeText(logText);
} catch (error) {
console.error("Failed to copy log:", error);
const textArea = document.createElement("textarea");
textArea.value = logText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
}
};
const copyAllLogsToClipboard = async () => {
const currentLogs = logs[selectedLogType];
if (!(currentLogs == null ? void 0 : currentLogs.logs) || currentLogs.logs.length === 0) return;
const allLogsText = currentLogs.logs.map(
(log2) => `[${log2.timestamp}] ${log2.level.toUpperCase()}: ${log2.message}${log2.context ? "\nContext: " + JSON.stringify(log2.context, null, 2) : ""}`
).join("\n\n");
try {
await navigator.clipboard.writeText(allLogsText);
} catch (error) {
console.error("Failed to copy all logs:", error);
const textArea = document.createElement("textarea");
textArea.value = allLogsText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
}
};
const handleImportSampleData = async () => {
setIsImportingSampleData(true);
setSampleDataJob({ progress: 0 });
try {
const response = await apiService.importSampleData({
data_types: [],
// Not used anymore - imports all data types
overwrite: false
});
if (response.success) {
setSampleDataJob({ ...response.data, progress: 100 });
const data = response.data || {};
const message2 = `Successfully imported: ${data.trips || 0} trips, ${data.classifications || 0} classifications, ${data.items || 0} items, ${data.trip_classifications || 0} trip assignments, ${data.discounts || 0} discounts, ${data.availability_dates || 0} availability dates, ${data.availability_rules || 0} rules, ${data.itinerary_days || 0} itinerary days, ${data.itinerary_entries || 0} itinerary entries`;
showToast(message2, "success");
const statusResponse = await apiService.getSampleDataStatus();
setSampleDataStatus(statusResponse);
} else {
throw new Error(response.message || __("Import failed"));
}
} catch (error) {
console.error("Sample data import error:", error);
showToast(
error.message || __("Failed to import sample data. Please try again."),
"error"
);
} finally {
setIsImportingSampleData(false);
setTimeout(() => setSampleDataJob(null), 3e3);
}
};
const getStatusBadge = (status) => {
switch (status) {
case "pass":
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "success", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-3 h-3 mr-1" }),
"Pass"
] });
case "warning":
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "warning", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-3 h-3 mr-1" }),
"Warning"
] });
case "fail":
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "error", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-3 h-3 mr-1" }),
"Fail"
] });
default:
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", children: "Unknown" });
}
};
const getLogLevelBadge = (level) => {
switch (level.toLowerCase()) {
case "error":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "error", children: "Error" });
case "warning":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "warning", children: "Warning" });
case "info":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "info", children: "Info" });
default:
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", children: level });
}
};
const loadAllJobs = async () => {
setIsLoadingJobs(true);
try {
const data = await apiService.getAllJobs();
setAllJobs(Array.isArray(data) ? data : []);
} catch (error) {
console.error("Failed to load jobs:", error);
} finally {
setIsLoadingJobs(false);
}
};
const loadCronJobs = async () => {
setIsLoadingCronJobs(true);
try {
const data = await apiService.getCronJobs();
setCronJobs((data == null ? void 0 : data.cron_jobs) || []);
setCronInfo({
wp_cron_disabled: (data == null ? void 0 : data.wp_cron_disabled) || false,
alternate_cron: (data == null ? void 0 : data.alternate_cron) || false
});
} catch (error) {
console.error("Failed to load cron jobs:", error);
} finally {
setIsLoadingCronJobs(false);
}
};
const handleRunCronJob = async (hook) => {
setRunningCronJob(hook);
try {
const data = await apiService.runCronJob(hook);
if (data.success) {
showToast(
data.message || `Cron job "${hook}" executed successfully`,
"success"
);
loadCronJobs();
} else {
showToast(data.message || "Failed to run cron job", "error");
}
} catch (error) {
console.error("Failed to run cron job:", error);
showToast("Failed to run cron job", "error");
} finally {
setRunningCronJob(null);
}
};
const loadCacheData = async () => {
setIsLoadingCache(true);
try {
const data = await apiService.getCacheView();
if (data.success && data.data) {
setCacheData(data.data.cache_data || []);
showToast(data.message || "Cache data loaded successfully", "success");
} else {
showToast(data.message || "Failed to load cache data", "error");
}
} catch (error) {
console.error("Failed to load cache data:", error);
showToast("Failed to load cache data", "error");
} finally {
setIsLoadingCache(false);
}
};
const clearCacheItem = async (key2, type) => {
try {
const data = await apiService.clearCacheItem(key2, type);
if (data.success) {
setCacheData((prev) => prev.filter((item) => item.key !== key2));
showToast(
data.message || `Cache item "${key2}" cleared successfully`,
"success"
);
} else {
showToast(data.message || "Failed to clear cache item", "error");
}
} catch (error) {
console.error("Failed to clear cache item:", error);
showToast("Failed to clear cache item", "error");
}
};
const clearAllCache = async () => {
setIsClearingCache(true);
try {
const data = await apiService.clearCache();
if (window.yatraQueryClient && typeof window.yatraQueryClient.invalidateQueries === "function") {
window.yatraQueryClient.invalidateQueries();
}
if (data.success) {
showToast(
"All caches cleared successfully! Please refresh the page to see the changes.",
"success"
);
} else {
let errorMessage = "Failed to clear caches";
if (data.message && !data.message.includes("success")) {
errorMessage += ": " + data.message;
}
showToast(errorMessage, "error");
}
} catch (error) {
console.error("Failed to clear caches:", error);
showToast("Failed to clear caches. Please try again.", "error");
} finally {
setIsClearingCache(false);
}
};
const loadMigrationStatus = async () => {
setIsLoadingMigration(true);
try {
const data = await apiService.getMigrationStatus();
setMigrationStatus(data);
} catch (error) {
console.error("Failed to load migration status:", error);
showToast("Failed to load migration status", "error");
} finally {
setIsLoadingMigration(false);
}
};
const loadMigrationProgress = async () => {
try {
const data = await apiService.getMigrationProgress();
setMigrationProgress(data);
if (data.any_running && !data.all_complete) {
setIsMigrating(true);
if (!migrationPollingRef.current) {
migrationPollingRef.current = setInterval(
loadMigrationProgress,
3e3
);
}
} else if (data.all_complete && data.started_at) {
setIsMigrating(false);
stopMigrationPolling();
}
} catch (error) {
console.error("Failed to load migration progress:", error);
}
};
const startMigrationPolling = () => {
if (migrationPollingRef.current) {
clearInterval(migrationPollingRef.current);
}
loadMigrationProgress();
migrationPollingRef.current = setInterval(loadMigrationProgress, 1e3);
};
const stopMigrationPolling = () => {
if (migrationPollingRef.current) {
clearInterval(migrationPollingRef.current);
migrationPollingRef.current = null;
}
};
const handleMigrateAll = async (force = false) => {
setIsMigrating(true);
setIsStartingMigration(true);
try {
const data = await apiService.runMigrationAll({ force });
if (data.success) {
showToast(
"Migration started for all data types. Processing in background...",
"success"
);
if (Array.isArray(data.warnings) && data.warnings.length > 0) {
showToast(String(data.warnings[0]), "warning");
}
await loadMigrationProgress();
startMigrationPolling();
setIsStartingMigration(false);
} else {
showToast(data.error || data.message || "Migration failed", "error");
setIsMigrating(false);
setIsStartingMigration(false);
}
} catch (error) {
console.error("Migration error:", error);
showToast("Migration failed. Please try again.", "error");
setIsMigrating(false);
setIsStartingMigration(false);
}
};
const handleCancelMigration = async () => {
if (!confirm(
"Are you sure you want to cancel the migration? This will stop all ongoing migrations."
)) {
return;
}
try {
const data = await apiService.cancelMigration();
if (data.success) {
showToast("Migration cancelled successfully", "success");
setIsMigrating(false);
stopMigrationPolling();
loadMigrationStatus();
} else {
showToast(data.error || "Failed to cancel migration", "error");
}
} catch (error) {
console.error("Cancel migration error:", error);
showToast("Failed to cancel migration", "error");
}
};
reactExports.useEffect(() => {
if (activeTab === "system-status") {
loadSystemStatus();
} else if (activeTab === "logs") {
loadLogs(selectedLogType);
} else if (activeTab === "jobs") {
loadAllJobs();
loadCronJobs();
} else if (activeTab === "migration") {
loadMigrationStatus();
loadMigrationProgress();
}
return () => {
if (activeTab === "migration") {
stopMigrationPolling();
}
};
}, [activeTab, selectedLogType]);
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: "Tools" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Export/Import data, check system status, and view logs" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: () => window.open("/wp-admin/admin.php?page=yatra-setup", "_blank"),
variant: "outline",
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Settings$1, { className: "w-4 h-4" }),
"Setup Wizard"
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: clearAllCache,
variant: "outline",
className: "flex items-center gap-2",
disabled: isClearingCache,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
RefreshCw,
{
className: `w-4 h-4 ${isClearingCache ? "animate-spin" : ""}`
}
),
isClearingCache ? "Clearing..." : "Clear Cache"
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: () => {
setShowCacheModal(true);
loadCacheData();
},
variant: "outline",
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
"View Cache"
]
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-1 mb-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "flex space-x-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setActiveTab("export-import"),
className: `flex-1 py-3 px-6 rounded-md font-medium text-sm flex items-center justify-center gap-3 transition-all duration-200 ${activeTab === "export-import" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700/50"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-5 h-5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export/Import" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setActiveTab("jobs"),
className: `flex-1 py-3 px-6 rounded-md font-medium text-sm flex items-center justify-center gap-3 transition-all duration-200 ${activeTab === "jobs" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700/50"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "w-5 h-5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Jobs" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setActiveTab("system-status"),
className: `flex-1 py-3 px-6 rounded-md font-medium text-sm flex items-center justify-center gap-3 transition-all duration-200 ${activeTab === "system-status" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700/50"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Server, { className: "w-5 h-5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "System Status" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setActiveTab("logs"),
className: `flex-1 py-3 px-6 rounded-md font-medium text-sm flex items-center justify-center gap-3 transition-all duration-200 ${activeTab === "logs" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700/50"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { className: "w-5 h-5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Logs" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setActiveTab("migration"),
className: `flex-1 py-3 px-6 rounded-md font-medium text-sm flex items-center justify-center gap-3 transition-all duration-200 ${activeTab === "migration" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700/50"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "w-5 h-5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Migration" })
]
}
)
] }) }),
activeTab === "export-import" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-6 h-6 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Export Data" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Download your data" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-6 leading-relaxed", children: "Export your Yatra data for backup or migration purposes. Click the button below to select which data types to export." }),
exportJob && (exportJob.status === "pending" || exportJob.status === "running") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-400", children: exportJob.status === "pending" ? "Queued..." : "Exporting..." }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-blue-600 dark:text-blue-400", children: [
exportJob.progress,
"%"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-blue-200 dark:bg-blue-800 rounded-full h-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300",
style: { width: `${exportJob.progress}%` }
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-blue-600 dark:text-blue-400 mt-2", children: [
exportJob.processed_records,
" /",
" ",
exportJob.total_records,
" records processed"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Processing in background. You can close this page and come back later." })
] }),
exportJob && exportJob.status === "completed" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-5 h-5 text-green-600 dark:text-green-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-green-700 dark:text-green-400", children: "Export completed successfully!" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleDownloadExport,
className: "flex-1",
variant: "outline",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-4 h-4 mr-2" }),
"Download"
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: handleDeleteClick,
variant: "outline",
className: "text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-4 h-4" })
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: handleExportClick,
disabled: isExporting || !!(exportJob && (exportJob.status === "pending" || exportJob.status === "running")),
className: "w-full py-3",
size: "lg",
children: isExporting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-5 h-5 mr-3 animate-spin" }),
"Starting export..."
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-5 h-5 mr-3" }),
"Select Data Types to Export"
] })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-green-50 dark:bg-green-900/20 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-6 h-6 text-green-600 dark:text-green-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Import Data" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Restore from backup" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-6 leading-relaxed", children: "Import Yatra data from a previously exported JSON file. Drop your file below or click to browse." }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
onDragOver: handleDragOver,
onDragLeave: handleDragLeave,
onDrop: handleDrop,
className: `relative border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200 ${isDragOver ? "border-green-400 bg-green-50 dark:bg-green-900/20" : "border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 hover:border-green-400 hover:bg-green-50 dark:hover:bg-green-900/20"} ${isImporting ? "pointer-events-none opacity-50" : ""}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "file",
accept: ".json",
onChange: handleImport,
disabled: isImporting,
className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `p-4 rounded-full ${isDragOver ? "bg-green-100 dark:bg-green-900/30" : "bg-gray-100 dark:bg-gray-700"}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Upload,
{
className: `w-8 h-8 ${isDragOver ? "text-green-600 dark:text-green-400" : "text-gray-400 dark:text-gray-500"}`
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: isDragOver ? "Drop your JSON file here" : "Drop JSON file or click to browse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Supports JSON files exported from Yatra" })
] })
] })
]
}
),
importJob && (importJob.status === "pending" || importJob.status === "running") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-green-700 dark:text-green-400", children: importJob.status === "pending" ? "Queued..." : "Importing..." }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-green-600 dark:text-green-400", children: [
importJob.progress,
"%"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-green-200 dark:bg-green-800 rounded-full h-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "bg-green-600 dark:bg-green-400 h-2 rounded-full transition-all duration-300",
style: { width: `${importJob.progress}%` }
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-green-600 dark:text-green-400 mt-2", children: [
importJob.processed_records,
" /",
" ",
importJob.total_records,
" records processed"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Processing in background. You can close this page and come back later." })
] }),
importJob && importJob.status === "completed" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-5 h-5 text-green-600 dark:text-green-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-green-700 dark:text-green-400", children: "Import completed successfully!" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: async () => {
if (!importJob) return;
try {
await apiService.deleteImportJob(importJob.id);
} catch (e) {
console.error("Error deleting import job:", e);
}
setImportJob(null);
},
className: "ml-auto text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-4 h-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-green-700 dark:text-green-400 mb-2", children: [
"Total: ",
/* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: importJob.processed_records }),
" ",
"records imported"
] }),
importJob.import_stats && Object.keys(importJob.import_stats).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 border-t border-green-200 dark:border-green-800 pt-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-green-700 dark:text-green-400 mb-2", children: "Import Details:" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-1", children: Object.entries(importJob.import_stats).map(
([dataType, stats]) => {
const dataTypeObj = dataTypes.find(
(dt) => dt.key === dataType
);
const Icon = (dataTypeObj == null ? void 0 : dataTypeObj.icon) || FileText;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between text-xs",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-3 h-3 text-green-600 dark:text-green-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "capitalize", children: [
dataType.replace("_", " "),
":"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-green-700 dark:text-green-400", children: stats.imported }),
stats.failed > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-red-600 dark:text-red-400 ml-1", children: [
"(",
stats.failed,
" failed)"
] })
] })
]
},
dataType
);
}
) })
] })
] }),
importJob && importJob.status === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-5 h-5 text-red-600 dark:text-red-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: [
"Import failed: ",
importJob.error || "Unknown error"
] })
] }) }),
isImporting && !importJob && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-3 text-sm text-gray-600 dark:text-gray-400 bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg mt-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-5 h-5 animate-spin" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Starting import..." })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "p-6 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-5 h-5 text-yellow-600 dark:text-yellow-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold text-yellow-800 dark:text-yellow-200 mb-2", children: "Important Notice" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-yellow-700 dark:text-yellow-300 leading-relaxed", children: "Importing data will create new records. Existing data will not be overwritten. Always backup your database before importing data to prevent any potential data loss." })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "w-6 h-6 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Import Sample Data" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Quick setup with demo content" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-6 leading-relaxed", children: "Quickly populate your Yatra site with sample trips, categories, destinations, and more. Perfect for testing and demonstration purposes." }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4 mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-semibold text-blue-900 dark:text-blue-100 mb-2 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4" }),
"The following data will be imported automatically:"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-blue-800 dark:text-blue-200", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "11 Sample Trips (multi-day & single-day)" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "8 Categories" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "10 Activities" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "10 Destinations" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mountain, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "6 Difficulty Levels" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Settings$1, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "8 Attributes" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "6 Itinerary Item Types" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "8 Traveler Categories" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "8 Discount Codes" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "21 Availability Dates" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "9 Availability Rules" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "31 Itinerary Days" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "25 Itinerary Entries" })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: handleImportSampleData,
disabled: isImportingSampleData,
className: "flex-1",
size: "lg",
children: isImportingSampleData ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-5 h-5 mr-2 animate-spin" }),
"Importing..."
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-5 h-5 mr-2" }),
"Import Sample Data"
] })
}
) })
] })
] }),
activeTab === "system-status" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: isLoadingStatus ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [...Array(4)].map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-32" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: [...Array(4)].map((_2, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex justify-between items-center",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-24" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-16" })
]
},
i
)) })
] }) }, index)) }) : systemStatus ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold mb-4 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Server, { className: "w-5 h-5" }),
"PHP Information"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Version:" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: systemStatus.php.version })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Memory Limit:" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: systemStatus.php.memory_limit })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Max Execution Time:" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium", children: [
systemStatus.php.max_execution_time,
"s"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Upload Max Size:" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: systemStatus.php.upload_max_filesize })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", children: "WordPress Information" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Version:" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: systemStatus.wordpress.version })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Multisite:" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: systemStatus.wordpress.multisite ? "Yes" : "No" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Debug Mode:" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: systemStatus.wordpress.debug_mode ? "Enabled" : "Disabled" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", children: "Requirements Check" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: Object.entries(systemStatus.requirements).map(
([key2, req]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium capitalize", children: key2.replace("_", " ") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
"Required: ",
req.required,
" | Current: ",
req.current
] })
] }),
getStatusBadge(req.status)
]
},
key2
)
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", children: "PHP Extensions" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3", children: Object.entries(systemStatus.extensions).map(
([ext, loaded]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: ext }),
loaded ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "success", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-3 h-3 mr-1" }),
"Loaded"
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "error", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-3 h-3 mr-1" }),
"Missing"
] })
]
},
ext
)
) })
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-12 h-12 text-red-500 mx-auto mb-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Failed to load system status" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: loadSystemStatus, className: "mt-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4 mr-2" }),
"Retry"
] })
] }) }) }),
activeTab === "jobs" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "overflow-hidden", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "w-5 h-5 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-white", children: "Export & Import Jobs" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
allJobs.length,
" job",
allJobs.length !== 1 ? "s" : "",
" in history"
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
size: "sm",
onClick: loadAllJobs,
disabled: isLoadingJobs,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
RefreshCw,
{
className: `w-4 h-4 ${isLoadingJobs ? "animate-spin" : ""}`
}
)
}
)
] }),
isLoadingJobs ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 space-y-3", children: [...Array(3)].map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between py-3 animate-pulse",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-32 h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-48 h-3 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-6 bg-gray-200 dark:bg-gray-700 rounded" })
]
},
index
)) }) : allJobs.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: allJobs.map((job) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `p-2 rounded-lg flex-shrink-0 ${job.type === "export" ? "bg-blue-100 dark:bg-blue-900/30" : "bg-green-100 dark:bg-green-900/30"}`,
children: job.type === "export" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 text-green-600 dark:text-green-400" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-sm text-gray-900 dark:text-white", children: [
job.type === "export" ? "Export" : "Import",
" #",
job.id.slice(-6)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"span",
{
className: `inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${job.status === "completed" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : job.status === "running" ? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400" : job.status === "pending" ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400" : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"}`,
children: [
job.status === "running" && /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-3 h-3 mr-1 animate-spin" }),
job.status.charAt(0).toUpperCase() + job.status.slice(1)
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mt-1 text-xs text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: new Date(job.created_at).toLocaleDateString() }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "•" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
job.processed_records || 0,
"/",
job.total_records || 0,
" records"
] }),
job.status === "running" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "•" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400", children: [
job.progress,
"%"
] })
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
job.status === "running" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-24 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "h-full bg-blue-500 rounded-full transition-all",
style: { width: `${job.progress}%` }
}
) }),
job.type === "export" && job.status === "completed" && job.file_url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: job.file_url,
download: true,
className: "text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-3 h-3" }),
"Download"
]
}
)
] })
] }),
job.error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 ml-11 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded text-xs text-red-700 dark:text-red-400", children: job.error })
]
},
job.id
)) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-8 px-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No export/import jobs yet" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "overflow-hidden", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-white", children: "Scheduled Tasks" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
cronJobs.length,
" active cron job",
cronJobs.length !== 1 ? "s" : ""
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
size: "sm",
onClick: loadCronJobs,
disabled: isLoadingCronJobs,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
RefreshCw,
{
className: `w-4 h-4 ${isLoadingCronJobs ? "animate-spin" : ""}`
}
)
}
)
] }),
(cronInfo == null ? void 0 : cronInfo.wp_cron_disabled) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3 bg-amber-50 dark:bg-amber-900/20 border-b border-amber-200 dark:border-amber-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-amber-800 dark:text-amber-400", children: "WP-Cron is disabled. A server-side cron is required." })
] }) }),
isLoadingCronJobs ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 space-y-3", children: [...Array(3)].map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between py-3 animate-pulse",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-48 h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-32 h-3 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-8 bg-gray-200 dark:bg-gray-700 rounded" })
]
},
index
)) }) : cronJobs.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: cronJobs.map((cron, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: `flex items-center justify-between px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors ${cron.is_overdue ? "bg-red-50/50 dark:bg-red-900/10" : ""}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `w-2 h-2 rounded-full flex-shrink-0 ${cron.is_overdue ? "bg-red-500" : "bg-green-500"}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-sm text-gray-900 dark:text-white truncate", children: cron.hook.replace("yatra_", "").replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded", children: cron.schedule || "once" }),
cron.is_overdue && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400", children: "Overdue" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mt-1 text-xs text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"span",
{
className: "flex items-center gap-1 cursor-help",
title: cron.next_run_formatted,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-3 h-3" }),
cron.next_run_relative
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "•" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden sm:flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-3 h-3" }),
cron.schedule_label
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 text-xs text-gray-400 dark:text-gray-500 font-mono", children: cron.hook })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => handleRunCronJob(cron.hook),
disabled: runningCronJob === cron.hook,
className: "ml-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20",
children: runningCronJob === cron.hook ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium", children: "Run" })
}
)
]
},
`${cron.hook}-${index}`
)) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-8 px-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No scheduled tasks" })
] })
] })
] }),
activeTab === "migration" && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-purple-100 dark:bg-purple-900/20 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "w-5 h-5 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Data Migration" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Migrate from Yatra 2.x to 3.0" })
] })
] }),
(migrationStatus == null ? void 0 : migrationStatus.has_old_data) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
(isMigrating || isStartingMigration) && !(migrationProgress == null ? void 0 : migrationProgress.all_complete) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "hidden sm:flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300 mr-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4 animate-spin text-purple-600 dark:text-purple-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Migration running" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: () => {
loadMigrationStatus();
if (isMigrating) loadMigrationProgress();
},
disabled: (isMigrating || isStartingMigration) && !(migrationProgress == null ? void 0 : migrationProgress.all_complete),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
RefreshCw,
{
className: `w-4 h-4 mr-2 ${isMigrating && !(migrationProgress == null ? void 0 : migrationProgress.all_complete) ? "animate-spin" : ""}`
}
),
"Refresh"
]
}
),
isMigrating && !(migrationProgress == null ? void 0 : migrationProgress.all_complete) && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "destructive",
size: "sm",
onClick: handleCancelMigration,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-4 h-4 mr-2" }),
"Cancel"
]
}
),
!isMigrating && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: () => setShowMigrationConfirm(true),
className: "bg-purple-600 hover:bg-purple-700",
size: "sm",
disabled: isStartingMigration,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "w-4 h-4 mr-2" }),
(migrationProgress == null ? void 0 : migrationProgress.all_complete) && (migrationProgress == null ? void 0 : migrationProgress.started_at) ? "Migrate Again" : "Start Migration"
]
}
)
] })
] }),
(migrationStatus == null ? void 0 : migrationStatus.has_old_data) && (() => {
const pm = (migrationProgress == null ? void 0 : migrationProgress.pro_migration) ?? (migrationStatus == null ? void 0 : migrationStatus.pro_migration);
if (!pm || pm.ready) {
return null;
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 p-4 rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 flex gap-3 items-start", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-5 h-5 text-amber-600 dark:text-amber-400 shrink-0 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-medium text-amber-900 dark:text-amber-200", children: __(
"Yatra Pro 3.0+ required for full migration",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-amber-800 dark:text-amber-300/90 mt-1", children: pm.warning_message }),
pm.multiple_pro_plugins && Array.isArray(pm.active_pro_plugins) && pm.active_pro_plugins.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "text-xs text-amber-800 dark:text-amber-300/80 mt-2 list-disc pl-5 space-y-0.5", children: pm.active_pro_plugins.map(
(p) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
p.file,
p.version != null && p.version !== "" ? ` (${p.version})` : ""
] }, p.file)
) })
] })
] });
})(),
isLoadingMigration ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "h-32 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"
},
i
)) })
] }) : (migrationStatus == null ? void 0 : migrationStatus.has_old_data) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
(migrationProgress == null ? void 0 : migrationProgress.all_complete) && (migrationProgress == null ? void 0 : migrationProgress.started_at) && Object.keys(migrationProgress.progress || {}).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-800 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-5 h-5 text-green-600 dark:text-green-400 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-medium text-green-900 dark:text-green-300", children: "Migration Completed Successfully!" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-green-700 dark:text-green-400 mt-1", children: "All data has been migrated from Yatra 2.x to 3.0" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => {
setIsMigrating(false);
setMigrationProgress(null);
},
className: "text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" })
}
)
] }) }),
(isMigrating || isStartingMigration) && (!migrationProgress || !migrationProgress.started_at || Object.keys(migrationProgress.progress || {}).length === 0) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-blue-900 dark:text-blue-300", children: "Starting migration…" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-blue-700 dark:text-blue-400", children: "Initializing background tasks and loading progress." })
] })
] }) }),
migrationProgress && !migrationProgress.all_complete && migrationProgress.started_at && Object.keys(migrationProgress.progress || {}).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-blue-900 dark:text-blue-300", children: "Migration in Progress" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => {
setIsMigrating(false);
setMigrationProgress(null);
},
className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-sm mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: "Overall Progress" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [
(() => {
const total = Object.values(
migrationProgress.progress || {}
).reduce(
(sum, p) => sum + (p.total || 0),
0
);
const processed = Object.values(
migrationProgress.progress || {}
).reduce(
(sum, p) => sum + (p.migrated || 0) + (p.skipped || 0) + (p.failed || 0),
0
);
return total > 0 ? Math.round(processed / total * 100) : 0;
})(),
"%"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-blue-200 dark:bg-blue-800 rounded-full h-3 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "h-full bg-blue-600 dark:bg-blue-400 transition-all duration-500",
style: {
width: `${(() => {
const total = Object.values(
migrationProgress.progress || {}
).reduce(
(sum, p) => sum + (p.total || 0),
0
);
const processed = Object.values(
migrationProgress.progress || {}
).reduce(
(sum, p) => sum + (p.migrated || 0) + (p.skipped || 0) + (p.failed || 0),
0
);
return total > 0 ? Math.round(processed / total * 100) : 0;
})()}%`
}
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Progress by Data Type" }),
Object.entries(migrationProgress.progress || {}).map(
([key2, progress]) => {
var _a2;
const dataInfo = (_a2 = migrationStatus == null ? void 0 : migrationStatus.old_data) == null ? void 0 : _a2[key2];
if (!dataInfo || progress.total === 0) return null;
const percentage = progress.total > 0 ? Math.round(
((progress.migrated || 0) + (progress.skipped || 0) + (progress.failed || 0)) / progress.total * 100
) : 0;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
progress.status === "running" ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4 text-blue-600 dark:text-blue-400 animate-spin" }) : progress.status === "completed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-green-600 dark:text-green-400" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded-full border-2 border-gray-300 dark:border-gray-600" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: dataInfo.label })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
(progress.migrated || 0) + (progress.skipped || 0) + (progress.failed || 0),
"/",
progress.total
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `h-full transition-all duration-300 ${progress.status === "completed" ? "bg-green-500" : progress.status === "running" ? "bg-blue-500" : "bg-gray-400"}`,
style: { width: `${percentage}%` }
}
) }),
(progress.migrated || 0) + (progress.skipped || 0) + (progress.failed || 0) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 text-xs", children: [
progress.migrated > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
"✓ ",
progress.migrated,
" migrated"
] }),
progress.skipped > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-yellow-600 dark:text-yellow-400", children: [
"⊘ ",
progress.skipped,
" skipped"
] }),
progress.failed > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-red-600 dark:text-red-400", children: [
"✗ ",
progress.failed,
" failed"
] })
] })
]
},
key2
);
}
)
] })
] }),
(migrationProgress == null ? void 0 : migrationProgress.all_complete) && (migrationProgress == null ? void 0 : migrationProgress.started_at) && Object.keys(migrationProgress.progress || {}).length > 0 && (() => {
const totalMigrated = Object.values(
migrationProgress.progress || {}
).reduce(
(sum, p) => sum + (p.migrated || 0),
0
);
const totalSkipped = Object.values(
migrationProgress.progress || {}
).reduce(
(sum, p) => sum + (p.skipped || 0),
0
);
const totalFailed = Object.values(
migrationProgress.progress || {}
).reduce((sum, p) => sum + (p.failed || 0), 0);
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-medium text-gray-900 dark:text-white", children: "Migration Summary" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
"✓ ",
totalMigrated,
" migrated"
] }),
totalSkipped > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-yellow-600 dark:text-yellow-400", children: [
"⊘ ",
totalSkipped,
" skipped"
] }),
totalFailed > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-red-600 dark:text-red-400", children: [
"✗ ",
totalFailed,
" failed"
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: Object.entries(migrationProgress.progress || {}).map(
([key2, progress]) => {
var _a2;
const dataInfo = (_a2 = migrationStatus == null ? void 0 : migrationStatus.old_data) == null ? void 0 : _a2[key2];
if (!dataInfo) return null;
const totalProcessed = (progress.migrated || 0) + (progress.skipped || 0) + (progress.failed || 0);
if (totalProcessed === 0) return null;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-700 last:border-0",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: dataInfo.label }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 text-xs", children: [
progress.migrated > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
"✓ ",
progress.migrated
] }),
progress.skipped > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-yellow-600 dark:text-yellow-400", children: [
"⊘ ",
progress.skipped
] }),
progress.failed > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-red-600 dark:text-red-400", children: [
"✗ ",
progress.failed
] })
] })
]
},
key2
);
}
) })
] });
})(),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: Object.entries(migrationStatus.old_data || {}).map(
([key2, data]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-medium text-gray-900 dark:text-white", children: data.label }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: data.description }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500 mt-2", children: data.table })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-purple-100 dark:bg-purple-900/20 text-purple-700 dark:text-purple-400", children: data.count })
] })
},
key2
)
) })
] }) : (
// No Data State
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-12 h-12 text-green-500 mx-auto mb-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-medium text-gray-900 dark:text-white mb-1", children: "No Migration Needed" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Your database is up to date" })
] })
)
] }),
activeTab === "logs" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: logTypes.map((type) => {
const Icon = type.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: selectedLogType === type.key ? "default" : "outline",
onClick: () => setSelectedLogType(type.key),
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-4 h-4" }),
type.label
]
},
type.key
);
}) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold capitalize", children: [
selectedLogType,
" Logs"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: () => loadLogs(selectedLogType),
disabled: isLoadingLogs,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
RefreshCw,
{
className: `w-4 h-4 ${isLoadingLogs ? "animate-spin" : ""}`
}
),
"Refresh"
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: copyAllLogsToClipboard,
disabled: !((_a = logs[selectedLogType]) == null ? void 0 : _a.logs) || logs[selectedLogType].logs.length === 0,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-4 h-4" }),
"Copy All"
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "destructive",
size: "sm",
onClick: () => handleClearLogs(),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 mr-2" }),
"Clear Logs"
]
}
)
] })
] }),
isLoadingLogs ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: [...Array(3)].map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "border rounded-lg p-4 bg-gray-50 dark:bg-gray-800 animate-pulse",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-start justify-between mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-5 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-32 h-4 bg-gray-200 dark:bg-gray-700 rounded" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-3/4 h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-1/2 h-3 bg-gray-200 dark:bg-gray-700 rounded" })
]
},
index
)) }) : ((_c = (_b = logs[selectedLogType]) == null ? void 0 : _b.logs) == null ? void 0 : _c.length) > 0 ? logs[selectedLogType].logs.map((log2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "border rounded-lg p-4 bg-gray-50 dark:bg-gray-800",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
getLogLevelBadge(log2.level),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: new Date(log2.timestamp).toLocaleString() })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => copyLogToClipboard(log2),
className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1 h-6 w-6",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium mb-2", children: log2.message }),
log2.context && Object.keys(log2.context).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: "text-xs", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "cursor-pointer text-gray-600 dark:text-gray-400", children: "View Context" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-700 rounded text-xs overflow-auto", children: JSON.stringify(log2.context, null, 2) })
] })
]
},
log2.id
)) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-12 h-12 mx-auto mb-2 opacity-50" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "No logs found for this type" })
] })
] })
] }),
showExportModal && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed top-0 left-0 right-0 bottom-0 backdrop-blur-sm bg-white/30 dark:bg-black/30 z-50",
style: { margin: 0, padding: 0 },
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-2xl max-h-[85vh] overflow-hidden mx-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Select Data Types to Export" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => setShowExportModal(false),
className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-5 h-5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 overflow-y-auto max-h-[60vh]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 pb-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3 p-3 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg cursor-pointer transition-colors", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: selectableDataTypes.length > 0 && selectableDataTypes.every(
(dt) => selectedExportData.includes(dt.key)
) && !selectedExportData.includes("all"),
onChange: handleExportSelectAll,
className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-semibold text-blue-700 dark:text-blue-400", children: selectableDataTypes.length > 0 && selectableDataTypes.every(
(dt) => selectedExportData.includes(dt.key)
) && !selectedExportData.includes("all") ? "Deselect All" : "Select All" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
"(",
selectableDataTypes.length,
" individual types)"
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-1", children: dataTypes.map((dataType) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: "flex items-start gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-lg cursor-pointer transition-colors",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: selectedExportData.includes(dataType.key),
onChange: () => handleExportDataToggle(dataType.key),
className: "mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(dataType.icon, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: dataType.label })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: dataType.description })
] })
]
},
dataType.key
)) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
selectedExportData.length,
" data types selected"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => setShowExportModal(false),
children: "Cancel"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleExport,
disabled: selectedExportData.length === 0,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-4 h-4 mr-2" }),
"Export Selected Data"
]
}
)
] })
] })
] })
}
),
showDeleteModal && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed top-0 left-0 right-0 bottom-0 backdrop-blur-sm bg-white/30 dark:bg-black/30 z-50",
style: { margin: 0, padding: 0 },
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-md overflow-hidden mx-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Confirm Deletion" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: handleCancelDelete,
className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-5 h-5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-red-100 dark:bg-red-900/30 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-6 h-6 text-red-600 dark:text-red-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-lg font-medium text-gray-900 dark:text-white mb-1", children: "Delete Export File?" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "This action cannot be undone. The export file will be permanently deleted from the server." })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-end p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: handleCancelDelete, children: "Cancel" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleConfirmDelete,
className: "bg-red-600 hover:bg-red-700 text-white",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 mr-2" }),
"Delete File"
]
}
)
] }) })
] })
}
),
showClearLogsModal && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed top-0 left-0 right-0 bottom-0 backdrop-blur-sm bg-white/30 dark:bg-black/30 z-50",
style: { margin: 0, padding: 0 },
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-md overflow-hidden mx-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Clear Logs" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => setShowClearLogsModal(false),
className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-5 h-5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-orange-100 dark:bg-orange-900/30 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-6 h-6 text-orange-600 dark:text-orange-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "text-lg font-medium text-gray-900 dark:text-white mb-1", children: [
"Clear ",
selectedLogType,
" logs?"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
"This action cannot be undone. All ",
selectedLogType,
" logs will be permanently deleted from the server."
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-end p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => setShowClearLogsModal(false),
children: "Cancel"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: confirmClearLogs,
className: "bg-orange-600 hover:bg-orange-700 text-white",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 mr-2" }),
"Clear Logs"
]
}
)
] }) })
] })
}
),
showImportModal && pendingImportFile && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed top-0 left-0 right-0 bottom-0 backdrop-blur-sm bg-white/30 dark:bg-black/30 z-50",
style: { margin: 0, padding: 0 },
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-2xl max-h-[85vh] overflow-hidden mx-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Select Data Types to Import" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: [
"File: ",
pendingImportFile.name
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => {
setShowImportModal(false);
setPendingImportFile(null);
},
className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-5 h-5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 overflow-y-auto max-h-[60vh]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 pb-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3 p-3 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg cursor-pointer transition-colors", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: selectableDataTypes.length > 0 && selectableDataTypes.every(
(dt) => selectedImportData.includes(dt.key)
) && !selectedImportData.includes("all"),
onChange: handleImportSelectAll,
className: "rounded border-gray-300 text-green-600 focus:ring-green-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-semibold text-green-700 dark:text-green-400", children: selectableDataTypes.length > 0 && selectableDataTypes.every(
(dt) => selectedImportData.includes(dt.key)
) && !selectedImportData.includes("all") ? "Deselect All" : "Select All" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
"(",
selectableDataTypes.length,
" individual types)"
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-1", children: dataTypes.map((dataType) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: "flex items-start gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-lg cursor-pointer transition-colors",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: selectedImportData.includes(dataType.key),
onChange: () => handleImportDataToggle(dataType.key),
className: "mt-1 rounded border-gray-300 text-green-600 focus:ring-green-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(dataType.icon, { className: "w-4 h-4 text-green-600 dark:text-green-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: dataType.label })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: dataType.description })
] })
]
},
dataType.key
)) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
selectedImportData.length,
" data types selected"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => {
setShowImportModal(false);
setPendingImportFile(null);
},
children: "Cancel"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleImportConfirm,
disabled: selectedImportData.length === 0,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 mr-2" }),
"Import Selected Data"
]
}
)
] })
] })
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: showMigrationConfirm,
onClose: () => setShowMigrationConfirm(false),
title: __("Migrate All Data"),
description: __(
"This process runs in the background and may take several minutes. Please back up your database before proceeding."
),
size: "md",
footer: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 w-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => setShowMigrationConfirm(false),
className: "w-full sm:w-auto",
children: __("Cancel")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row gap-3 w-full sm:w-auto", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "destructive",
onClick: () => {
setShowMigrationConfirm(false);
handleMigrateAll(true);
},
className: "w-full sm:w-auto",
children: __("Re-migrate All")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: () => {
setShowMigrationConfirm(false);
handleMigrateAll(false);
},
className: "w-full sm:w-auto",
children: __("Start Migration")
}
)
] })
] }),
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 text-sm text-gray-600 dark:text-gray-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: __(
"All legacy data types will be migrated to the new Yatra 3.0 database structure. The migration runs asynchronously via WordPress cron."
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-5 h-5 text-yellow-600 dark:text-yellow-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-yellow-800 dark:text-yellow-200", children: __("Important") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm", children: __(
"Keep this tab open to monitor progress. Use “Re-migrate All” only if you need to reprocess items that were already migrated."
) })
] })
] }),
(migrationStatus == null ? void 0 : migrationStatus.pro_migration) && !migrationStatus.pro_migration.ready && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-300 dark:border-amber-800 rounded-md flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-5 h-5 text-amber-600 dark:text-amber-400 shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-amber-900 dark:text-amber-200", children: __("Yatra Pro", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-amber-800 dark:text-amber-300/90", children: migrationStatus.pro_migration.warning_message })
] })
] })
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: showCacheModal,
onClose: () => setShowCacheModal(false),
title: "View Cache Data",
size: "lg",
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: isLoadingCache ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center py-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-6 h-6 animate-spin mr-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Loading cache data..." })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
cacheData.length,
" cache items found"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: loadCacheData,
disabled: isLoadingCache,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
RefreshCw,
{
className: `w-4 h-4 mr-1 ${isLoadingCache ? "animate-spin" : ""}`
}
),
"Refresh"
]
}
)
] }),
cacheData.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "w-12 h-12 mx-auto mb-4 opacity-50" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "No cache data found" })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-white", children: "Cache Key" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-white", children: "Type" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-white", children: "Size" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-white", children: "Created" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-white", children: "Expires" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-white", children: "Actions" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: cacheData.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"tr",
{
className: "border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("td", { className: "p-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "max-w-md truncate font-mono text-xs font-semibold",
title: item.key,
children: item.key
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-600 dark:text-gray-300 mt-2 max-h-32 overflow-auto bg-gray-50 dark:bg-gray-900 p-2 rounded border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs", children: item.value }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: item.type === "transient" ? "default" : "outline",
children: item.type
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: formatBytes(item.size) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400 text-xs", children: item.created_at }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400 text-xs", children: item.expires_at }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: () => clearCacheItem(item.key, item.type),
className: "text-red-600 hover:text-red-700 border-red-200 hover:bg-red-50",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-3 h-3 mr-1" }),
"Clear"
]
}
) })
]
},
index
)) })
] }) })
] }) })
}
)
] })
] });
};
const ItemTypes = () => {
var _a;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("id");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [bulkMutationPending, setBulkMutationPending] = reactExports.useState(false);
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
itemType: null
});
const [statusActionConfirm, setStatusActionConfirm] = reactExports.useState({
isOpen: false,
itemType: null,
action: null
});
const updateItemTypeStatus = async (itemType, status) => {
await apiClient.put(`/item-types/${itemType.id}`, {
// Required for validation
name: itemType.name,
// Preserve current slug and other fields so a status change doesn't mutate core data
slug: itemType.slug,
description: itemType.description,
color: itemType.color,
status,
preserve_slug: true
});
};
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const baseAdminUrl = ((_a = window.yatraAdmin) == null ? void 0 : _a.adminUrl) || "";
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const { data: statsData } = useQuery({
queryKey: ["item-types-stats"],
queryFn: async () => {
try {
const response = await apiClient.get("/item-types/stats");
return response;
} catch (error2) {
return { all: 0, publish: 0, draft: 0, trash: 0 };
}
},
enabled: can("yatra_view_trips")
});
const { data, isLoading, error } = useQuery({
queryKey: ["item-types", queryParams],
queryFn: async () => {
try {
const response = await apiClient.get("/item-types", {
params: queryParams
});
return response;
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to load item types", "yatra"),
"error"
);
throw error2;
}
},
enabled: can("yatra_view_trips")
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/item-types/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["item-types"] });
queryClient2.invalidateQueries({ queryKey: ["item-types-stats"] });
showToast(__("Item type deleted successfully", "yatra"), "success");
setDeleteConfirm({ isOpen: false, itemType: null });
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete item type", "yatra"),
"error"
);
}
});
const itemTypes = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 10);
const errorContext = getErrorContext(error);
const apiErrorMessage = (data == null ? void 0 : data.error) || (data == null ? void 0 : data.message);
const derivedErrorDetails = errorContext.details || (apiErrorMessage ? String(apiErrorMessage) : void 0) || (error ? String((error == null ? void 0 : error.message) || error) : void 0);
const isItemTypesError = !!error || !!apiErrorMessage;
const formatDate2 = (dateString) => {
if (!dateString) return __("N/A", "yatra");
try {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "2-digit"
});
} catch (e) {
return dateString;
}
};
const getStatusBadge = (status) => {
const statusMap = {
publish: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Publish", "yatra")
},
draft: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Draft", "yatra")
},
trash: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Trash", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const formatUser = (userId, userName) => {
if (userName) {
return userName;
}
return `User #${userId}`;
};
const renderIcon = (icon) => {
if (!icon) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "—" }) });
}
if (typeof icon === "object" && icon !== null) {
const iconValue = icon;
if (iconValue.type === "image") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: iconValue.value,
alt: "",
className: "w-10 h-10 rounded-lg object-cover",
onError: (e) => {
const target2 = e.target;
target2.style.display = "none";
if (target2.parentElement) {
target2.parentElement.innerHTML = '—
';
}
}
}
);
} else {
const raw = iconValue.provider;
const provider = raw === "fa-solid" || raw === "fa-regular" ? raw : "yatra";
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: iconValue.value,
provider,
className: "w-5 h-5 text-gray-700 dark:text-gray-300"
}
) });
}
}
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: icon,
className: "w-5 h-5 text-gray-700 dark:text-gray-300"
}
) });
};
const handleCreate = () => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=itinerary&tab=item-types&action=create`;
};
const handleEdit = (itemType) => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=itinerary&tab=item-types&action=edit&id=${itemType.id}`;
};
const handleDelete = (itemType) => {
setDeleteConfirm({ isOpen: true, itemType });
};
const confirmDelete = () => {
if (deleteConfirm.itemType) {
deleteMutation.mutate(deleteConfirm.itemType.id);
}
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("name");
setSortOrder("asc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("asc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "name" || sortOrder !== "asc";
const [visibleColumns, setVisibleColumns] = reactExports.useState(
{
type: true,
description: true,
status: true,
items: true,
date: true,
author: true
}
);
const toggleColumn = (columnKey) => {
setVisibleColumns((prev) => ({
...prev,
[columnKey]: !prev[columnKey]
}));
};
const columnOptions = [
{ key: "type", label: __("Type", "yatra"), visible: visibleColumns.type },
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "items",
label: __("Items", "yatra"),
visible: visibleColumns.items
},
{ key: "date", label: __("Date", "yatra"), visible: visibleColumns.date },
{
key: "author",
label: __("Author", "yatra"),
visible: visibleColumns.author
}
];
const isAllSelected = itemTypes.length > 0 && selectedIds.length === itemTypes.length;
const handleSelectItem = (id, checked) => {
setSelectedIds(
(prev) => checked ? [...prev, id] : prev.filter((existingId) => existingId !== id)
);
};
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(itemTypes.map((itemType) => itemType.id));
} else {
setSelectedIds([]);
}
};
const handleClearSelection = () => {
setSelectedIds([]);
};
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: statsData.all ?? 0,
publish: statsData.publish ?? 0,
draft: statsData.draft ?? 0,
trash: statsData.trash ?? 0
};
}
return {
all: 0,
publish: 0,
draft: 0,
trash: 0
};
}, [statsData]);
const statusOptions = [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all },
{ key: "draft", label: __("Draft", "yatra"), count: statusCounts.draft },
{
key: "publish",
label: __("Publish", "yatra"),
count: statusCounts.publish
},
{ key: "trash", label: __("Trash", "yatra"), count: statusCounts.trash }
];
const bulkActionOptions = reactExports.useMemo(() => {
if (statusFilter === "trash") {
return [
{ value: "restore", label: __("Restore to Draft", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}
return [
{ value: "publish", label: __("Mark as Published", "yatra") },
{ value: "draft", label: __("Mark as Draft", "yatra") },
{ value: "trash", label: __("Move to Trash", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}, [statusFilter]);
const handleBulkApply = async () => {
if (!bulkAction || selectedIds.length === 0) {
showToast(
__("Please select item types and a bulk action first.", "yatra"),
"error"
);
return;
}
try {
setBulkMutationPending(true);
const selectedItemTypes = itemTypes.filter(
(itemType) => selectedIds.includes(itemType.id)
);
if (bulkAction === "delete") {
await Promise.all(
selectedIds.map((id) => apiClient.delete(`/item-types/${id}`))
);
showToast(__("Item types deleted successfully", "yatra"), "success");
} else if (bulkAction === "publish") {
await Promise.all(
selectedItemTypes.map(
(itemType) => updateItemTypeStatus(itemType, "publish")
)
);
showToast(__("Item types marked as published", "yatra"), "success");
} else if (bulkAction === "draft") {
const targetStatus = "draft";
await Promise.all(
selectedItemTypes.map(
(itemType) => updateItemTypeStatus(itemType, targetStatus)
)
);
showToast(
statusFilter === "trash" ? __("Item types restored to draft", "yatra") : __("Item types marked as draft", "yatra"),
"success"
);
} else if (bulkAction === "trash") {
await Promise.all(
selectedItemTypes.map(
(itemType) => updateItemTypeStatus(itemType, "trash")
)
);
showToast(__("Item types moved to trash", "yatra"), "success");
} else if (bulkAction === "restore") {
await Promise.all(
selectedItemTypes.map(
(itemType) => updateItemTypeStatus(itemType, "draft")
)
);
showToast(__("Item types restored to draft", "yatra"), "success");
}
await queryClient2.invalidateQueries({ queryKey: ["item-types"] });
await queryClient2.invalidateQueries({ queryKey: ["item-types-stats"] });
setSelectedIds([]);
setBulkAction("");
} catch (error2) {
showToast(__("Bulk action failed", "yatra"), "error");
} finally {
setBulkMutationPending(false);
}
};
const columns = [
{
key: "type",
label: __("Type", "yatra"),
sortable: true,
width: "w-[200px]",
visible: visibleColumns.type,
render: (itemType) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
renderIcon(itemType.icon),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${baseAdminUrl}?page=yatra&subpage=itinerary&tab=item-types&action=edit&id=${itemType.id}`,
className: "hover:underline underline-offset-2 text-blue-600 dark:text-blue-400",
children: itemType.name
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: itemType.slug })
] })
] })
},
{
key: "description",
label: __("Description", "yatra"),
sortable: false,
width: "w-[200px]",
render: (itemType) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 text-sm line-clamp-2", children: itemType.description || __("No description", "yatra") })
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
width: "w-[100px]",
visible: visibleColumns.status,
render: (itemType) => getStatusBadge(itemType.status)
},
{
key: "items",
label: __("Items", "yatra"),
sortable: false,
width: "w-[100px]",
visible: visibleColumns.items,
render: (itemType) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "font-medium", children: itemType.items_count ?? 0 }) })
},
{
key: "date",
label: __("Date", "yatra"),
sortable: true,
width: "w-[150px]",
visible: visibleColumns.date,
render: (itemType) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-gray-500 dark:text-gray-400 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: formatDate2(itemType.created_at) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-400 dark:text-gray-500 mt-0.5", children: [
__("Updated", "yatra"),
": ",
formatDate2(itemType.updated_at)
] })
] })
},
{
key: "author",
label: __("Author", "yatra"),
sortable: false,
width: "w-[150px]",
visible: visibleColumns.author,
render: (itemType) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: formatUser(itemType.created_by, itemType.created_by_name) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-400 dark:text-gray-500 mt-0.5", children: [
__("Updated by", "yatra"),
":",
" ",
formatUser(itemType.updated_by, itemType.updated_by_name)
] })
] })
}
];
const tableActions = reactExports.useMemo(() => {
const actions = [];
if (can("yatra_edit_trips")) {
actions.push({
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (itemType) => handleEdit(itemType)
});
actions.push({
key: "publish",
label: __("Mark as Published", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: (itemType) => {
setStatusActionConfirm({ isOpen: true, itemType, action: "publish" });
},
condition: (itemType) => itemType.status !== "publish" && itemType.status !== "trash"
});
actions.push({
key: "draft",
label: __("Mark as Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: (itemType) => {
setStatusActionConfirm({ isOpen: true, itemType, action: "draft" });
},
condition: (itemType) => itemType.status !== "draft" && itemType.status !== "trash"
});
actions.push({
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (itemType) => {
setStatusActionConfirm({ isOpen: true, itemType, action: "trash" });
},
condition: (itemType) => itemType.status !== "trash"
});
actions.push({
key: "restore",
label: __("Restore to Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: (itemType) => {
setStatusActionConfirm({ isOpen: true, itemType, action: "restore" });
},
condition: (itemType) => itemType.status === "trash"
});
}
if (can("yatra_delete_trips")) {
actions.push({
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (itemType) => handleDelete(itemType),
variant: "destructive",
condition: (itemType) => itemType.status === "trash"
});
}
return actions;
}, [can, queryClient2, showToast]);
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, itemType: null }),
onConfirm: confirmDelete,
title: __("Delete Item Type", "yatra"),
message: deleteConfirm.itemType ? __(
'Are you sure you want to delete "{name}"? This action cannot be undone.',
"yatra"
).replace("{name}", deleteConfirm.itemType.name) : __(
"Are you sure you want to delete this item type? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: statusActionConfirm.isOpen,
onClose: () => setStatusActionConfirm({
isOpen: false,
itemType: null,
action: null
}),
onConfirm: async () => {
const { itemType, action } = statusActionConfirm;
if (!itemType || !action) {
return;
}
const targetStatus = action === "restore" ? "draft" : action;
await updateItemTypeStatus(
itemType,
targetStatus
);
const successMessage = action === "publish" ? __("Item type marked as published.", "yatra") : action === "draft" || action === "restore" ? __("Item type marked as draft.", "yatra") : __("Item type moved to trash.", "yatra");
showToast(successMessage, "success");
queryClient2.invalidateQueries({ queryKey: ["item-types"] });
queryClient2.invalidateQueries({ queryKey: ["item-types-stats"] });
setStatusActionConfirm({
isOpen: false,
itemType: null,
action: null
});
},
title: (() => {
switch (statusActionConfirm.action) {
case "publish":
return __("Publish Item Type", "yatra");
case "draft":
return __("Mark as Draft", "yatra");
case "trash":
return __("Move to Trash", "yatra");
case "restore":
return __("Restore Item Type", "yatra");
default:
return __("Confirm Action", "yatra");
}
})(),
message: (() => {
var _a2;
const name = ((_a2 = statusActionConfirm.itemType) == null ? void 0 : _a2.name) || "";
switch (statusActionConfirm.action) {
case "publish":
return __(
'Are you sure you want to publish "{name}"?',
"yatra"
).replace("{name}", name);
case "draft":
return __(
'Are you sure you want to mark "{name}" as draft?',
"yatra"
).replace("{name}", name);
case "trash":
return __(
'Are you sure you want to move "{name}" to trash?',
"yatra"
).replace("{name}", name);
case "restore":
return __(
'Are you sure you want to restore "{name}" to draft?',
"yatra"
).replace("{name}", name);
default:
return __(
"Are you sure you want to perform this action?",
"yatra"
);
}
})(),
confirmText: (() => {
switch (statusActionConfirm.action) {
case "publish":
return __("Publish", "yatra");
case "draft":
case "restore":
return __("Mark as Draft", "yatra");
case "trash":
return __("Move to Trash", "yatra");
default:
return __("Confirm", "yatra");
}
})(),
cancelText: __("Cancel", "yatra"),
variant: "warning",
isLoading: false
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Item Types", "yatra"),
description: __(
"Manage categories for itinerary items like Activity, Meal, Accommodation, etc.",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: handleCreate, className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Type", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col md:flex-row gap-2 items-stretch md:items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search item types...", "yatra"),
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
className: "pl-9"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: statusFilter,
onChange: (e) => setStatusFilter(e.target.value),
className: "w-full md:w-40",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Published", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: sortBy2,
onChange: (e) => setSortBy(e.target.value),
className: "w-full md:w-40",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "name", children: __("Name", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "status", children: __("Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "created_at", children: __("Created At", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "updated_at", children: __("Updated At", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => setSortOrder(sortOrder === "asc" ? "desc" : "asc"),
className: "px-3 flex items-center gap-1.5",
title: sortOrder === "asc" ? __("Ascending", "yatra") : __("Descending", "yatra"),
children: [
sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: sortOrder === "asc" ? __("Asc", "yatra") : __("Desc", "yatra") })
]
}
),
hasFilters && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleResetFilters,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }),
__("Reset", "yatra")
]
}
)
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
!isItemTypesError && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: handleClearSelection,
statusFilter,
setStatusFilter,
statusOptions,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending,
totalItems: total,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: itemTypes,
columns,
actions: tableActions,
isLoading,
isError: isItemTypesError,
errorText: __("Error loading item types", "yatra"),
errorDescription: __(
"We couldn’t connect to the item types service. Please refresh or try again shortly.",
"We couldn’t connect to the item types service. Please refresh or try again shortly."
),
errorDetails: derivedErrorDetails,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["item-types"] }),
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: handleSelectItem,
onSelectAll: handleSelectAll,
isAllSelected,
getItemId: (itemType) => itemType.id,
getItemStatus: (itemType) => itemType.status,
statusFilter,
capability: "yatra_view_trips"
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: setPage,
itemName: __("item types", "yatra")
}
) })
] }) })
] });
};
const ItemTypeForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
icon: null,
color: "blue",
status: "publish"
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const [isSlugEditable, setIsSlugEditable] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const typeId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const isEditMode = action === "edit" && typeId !== null;
const { data: typeData, isLoading: isLoadingType } = useQuery({
queryKey: ["item-type", typeId],
queryFn: async () => {
if (!typeId) return null;
try {
const response = await apiClient.get(`/item-types/${typeId}`);
return response;
} catch (error) {
showToast(
(error == null ? void 0 : error.message) || __("Failed to load item type", "yatra"),
"error"
);
throw error;
}
},
enabled: isEditMode && can("yatra_view_trips")
});
reactExports.useEffect(() => {
if (typeData && isEditMode) {
let iconValue = null;
if (typeData.icon) {
if (typeof typeData.icon === "string") {
iconValue = { type: "icon", value: typeData.icon };
} else if (typeof typeData.icon === "object" && typeData.icon !== null) {
iconValue = typeData.icon;
}
}
setFormData({
name: typeData.name || "",
slug: typeData.slug || "",
description: typeData.description || "",
icon: iconValue,
color: typeData.color || "blue",
status: typeData.status || "publish"
});
}
}, [typeData, isEditMode]);
const handleNameChange = (value) => {
if (!isEditMode && !isSlugEditable) {
const newSlug = generateSlug(value);
setFormData((prev) => ({
...prev,
name: value,
slug: newSlug
}));
} else {
setFormData((prev) => ({
...prev,
name: value
}));
}
if (errors.name) {
setErrors((prev) => ({ ...prev, name: "" }));
}
};
const handleSlugChange = (value) => {
if (isSlugEditable) {
setFormData((prev) => ({ ...prev, slug: value }));
if (errors.slug) {
setErrors((prev) => ({ ...prev, slug: "" }));
}
}
};
const handleToggleSlugEdit = () => {
if (isSlugEditable) {
const newSlug = generateSlug(formData.name);
setFormData((prev) => ({ ...prev, slug: newSlug }));
}
setIsSlugEditable(!isSlugEditable);
};
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = __("Name is required", "yatra");
}
if (!formData.slug.trim()) {
newErrors.slug = __("Slug is required", "yatra");
} else if (!/^[\p{L}\p{N}-]+$/u.test(formData.slug)) {
newErrors.slug = __(
"Slug can only contain letters, numbers, and hyphens",
"yatra"
);
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
name: data.name.trim(),
slug: data.slug.trim(),
description: data.description.trim(),
icon: data.icon,
color: data.color,
status: data.status
};
if (isEditMode && isSlugEditable) {
payload.preserve_slug = true;
}
if (isEditMode && typeId) {
return await apiClient.put(`/item-types/${typeId}`, payload);
} else {
return await apiClient.post("/item-types", payload);
}
},
onSuccess: (response) => {
queryClient2.invalidateQueries({ queryKey: ["item-types"] });
queryClient2.invalidateQueries({ queryKey: ["item-type", typeId] });
showToast(
isEditMode ? __("Item type updated successfully", "yatra") : __("Item type created successfully", "yatra"),
"success"
);
if (isEditMode) {
setIsSubmitting(false);
} else {
setTimeout(() => {
var _a;
const newId = (response == null ? void 0 : response.id) || typeId;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=itinerary&tab=item-types&action=edit&id=${newId}`;
}, 1e3);
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the item type", "yatra");
showToast(errorMessage, "error");
setIsSubmitting(false);
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
showToast(__("Please fix the form errors", "yatra"), "warning");
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=itinerary&tab=item-types`;
};
const colorOptions = [
{ value: "blue", label: __("Blue", "yatra") },
{ value: "green", label: __("Green", "yatra") },
{ value: "purple", label: __("Purple", "yatra") },
{ value: "orange", label: __("Orange", "yatra") },
{ value: "red", label: __("Red", "yatra") },
{ value: "yellow", label: __("Yellow", "yatra") },
{ value: "gray", label: __("Gray", "yatra") }
];
if (isEditMode && isLoadingType) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-4 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] }) }) })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Item Type", "yatra") : __("Add New Item Type", "yatra"),
description: isEditMode ? __("Update item type information", "yatra") : __(
"Create a new category for organizing itinerary items",
"yatra"
),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Basic Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Type Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "name",
type: "text",
value: formData.name,
onChange: (e) => handleNameChange(e.target.value),
placeholder: __("e.g., Activity", "yatra"),
className: errors.name ? "border-red-500" : "",
required: true
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400", children: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "slug",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Slug", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "slug",
type: "text",
value: formData.slug,
onChange: (e) => handleSlugChange(e.target.value),
placeholder: __("item-type-slug", "yatra"),
className: `pr-10 ${errors.slug ? "border-red-500" : ""} ${!isSlugEditable ? "bg-gray-50 dark:bg-gray-800 cursor-not-allowed" : ""}`,
disabled: !isSlugEditable,
required: true
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: handleToggleSlugEdit,
className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors rounded",
"aria-label": isSlugEditable ? __("Cancel editing slug", "yatra") : __("Edit slug", "yatra"),
children: isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-4 h-4" })
}
)
] }),
errors.slug && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: isSlugEditable ? __(
"Manually editing slug. Click X to cancel and regenerate from name.",
"yatra"
) : __(
"Auto-generated from name. Click edit icon to customize.",
"yatra"
) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "description",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Description", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "description",
value: formData.description,
onChange: (e) => handleFieldChange("description", e.target.value),
placeholder: __(
"Describe what this item type is used for...",
"yatra"
),
rows: 4,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none"
}
)
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Appearance", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconPicker,
{
value: formData.icon,
onChange: (value) => handleFieldChange("icon", value),
label: __("Icon", "yatra"),
helpText: __(
"Choose an icon to represent this item type visually. Icons help users quickly identify different types. You can also upload a custom image.",
"yatra"
),
allowImageUpload: true,
allowIconSelection: true,
size: "md"
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "color",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Color", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Select,
{
id: "color",
value: formData.color,
onChange: (e) => handleFieldChange("color", e.target.value),
children: colorOptions.map((color2) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: color2.value, children: color2.label }, color2.value))
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Item Type Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Type", "yatra") : __("Create Type", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] }) }) }) })
] })
] }) }) })
] });
};
const Items = () => {
var _a;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [typeFilter, setTypeFilter] = reactExports.useState("all");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("id");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [bulkMutationPending, setBulkMutationPending] = reactExports.useState(false);
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
item: null
});
const [statusActionConfirm, setStatusActionConfirm] = reactExports.useState({
isOpen: false,
item: null,
action: null
});
const updateItemStatus = async (item, status) => {
await apiClient.put(`/items/${item.id}`, {
// Required for validation
name: item.name,
type_id: item.type_id,
// Preserve current slug and description so status change is safe
slug: item.slug,
description: item.description,
status,
preserve_slug: true
});
};
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const baseAdminUrl = ((_a = window.yatraAdmin) == null ? void 0 : _a.adminUrl) || "";
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (typeFilter !== "all") {
params.type_id = typeFilter;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
return params;
}, [searchTerm, typeFilter, statusFilter, sortBy2, sortOrder, page]);
const { data: statsData } = useQuery({
queryKey: ["items-stats"],
queryFn: async () => {
try {
const response = await apiClient.get("/items/stats");
return response;
} catch (error2) {
return { all: 0, publish: 0, draft: 0, trash: 0 };
}
},
enabled: can("yatra_view_trips")
});
const [availableTypes, setAvailableTypes] = reactExports.useState([]);
const { data, isLoading, error } = useQuery({
queryKey: ["items", queryParams],
queryFn: async () => {
try {
const response = await apiClient.get("/items", { params: queryParams });
return response;
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to load items", "yatra"),
"error"
);
throw error2;
}
},
enabled: can("yatra_view_trips")
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/items/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["items"] });
queryClient2.invalidateQueries({ queryKey: ["items-stats"] });
showToast(__("Item deleted successfully", "yatra"), "success");
setDeleteConfirm({ isOpen: false, item: null });
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete item", "yatra"),
"error"
);
}
});
const items = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 10);
const errorContext = getErrorContext(error);
const apiErrorMessage = (data == null ? void 0 : data.error) || (data == null ? void 0 : data.message);
const derivedErrorDetails = errorContext.details || (apiErrorMessage ? String(apiErrorMessage) : void 0) || (error ? String((error == null ? void 0 : error.message) || error) : void 0);
const isItemsError = !!error || !!apiErrorMessage;
reactExports.useEffect(() => {
var _a2;
if ((_a2 = data == null ? void 0 : data.meta) == null ? void 0 : _a2.available_types) {
setAvailableTypes(data.meta.available_types);
}
}, [data]);
const types = availableTypes;
const formatDate2 = (dateString) => {
if (!dateString) return __("N/A", "yatra");
try {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "2-digit"
});
} catch (e) {
return dateString;
}
};
const getStatusBadge = (status) => {
const statusMap = {
publish: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Publish", "yatra")
},
draft: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Draft", "yatra")
},
trash: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Trash", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const formatUser = (userId, userName) => {
if (userName) {
return userName;
}
return `User #${userId}`;
};
const handleCreate = () => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=itinerary&tab=items&action=create`;
};
const handleEdit = (item) => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=itinerary&tab=items&action=edit&id=${item.id}`;
};
const handleDelete = (item) => {
setDeleteConfirm({ isOpen: true, item });
};
const confirmDelete = () => {
if (deleteConfirm.item) {
deleteMutation.mutate(deleteConfirm.item.id);
}
};
const handleResetFilters = () => {
setSearchTerm("");
setTypeFilter("all");
setStatusFilter("all");
setSortBy("name");
setSortOrder("asc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("asc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || typeFilter !== "all" || statusFilter !== "all" || sortBy2 !== "name" || sortOrder !== "asc";
const [visibleColumns, setVisibleColumns] = reactExports.useState(
{
item: true,
type: true,
description: true,
status: true,
usage: true,
date: true,
author: true
}
);
const toggleColumn = (columnKey) => {
setVisibleColumns((prev) => ({
...prev,
[columnKey]: !prev[columnKey]
}));
};
const columnOptions = [
{ key: "item", label: __("Item", "yatra"), visible: visibleColumns.item },
{ key: "type", label: __("Type", "yatra"), visible: visibleColumns.type },
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "usage",
label: __("Usage", "yatra"),
visible: visibleColumns.usage
},
{ key: "date", label: __("Date", "yatra"), visible: visibleColumns.date },
{
key: "author",
label: __("Author", "yatra"),
visible: visibleColumns.author
}
];
const isAllSelected = items.length > 0 && selectedIds.length === items.length;
const handleSelectItem = (id, checked) => {
setSelectedIds(
(prev) => checked ? [...prev, id] : prev.filter((existingId) => existingId !== id)
);
};
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(items.map((item) => item.id));
} else {
setSelectedIds([]);
}
};
const handleClearSelection = () => {
setSelectedIds([]);
};
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: statsData.all ?? 0,
publish: statsData.publish ?? 0,
draft: statsData.draft ?? 0,
trash: statsData.trash ?? 0
};
}
return {
all: 0,
publish: 0,
draft: 0,
trash: 0
};
}, [statsData]);
const statusOptions = [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all },
{ key: "draft", label: __("Draft", "yatra"), count: statusCounts.draft },
{
key: "publish",
label: __("Publish", "yatra"),
count: statusCounts.publish
},
{ key: "trash", label: __("Trash", "yatra"), count: statusCounts.trash }
];
const bulkActionOptions = reactExports.useMemo(() => {
if (statusFilter === "trash") {
return [
{ value: "restore", label: __("Restore to Draft", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}
return [
{ value: "publish", label: __("Mark as Published", "yatra") },
{ value: "draft", label: __("Mark as Draft", "yatra") },
{ value: "trash", label: __("Move to Trash", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}, [statusFilter]);
const handleBulkApply = async () => {
if (!bulkAction || selectedIds.length === 0) {
showToast(
__("Please select items and a bulk action first.", "yatra"),
"error"
);
return;
}
try {
setBulkMutationPending(true);
const selectedItems = items.filter(
(item) => selectedIds.includes(item.id)
);
if (bulkAction === "delete") {
await Promise.all(
selectedIds.map((id) => apiClient.delete(`/items/${id}`))
);
showToast(__("Items deleted successfully", "yatra"), "success");
} else if (bulkAction === "publish") {
await Promise.all(
selectedItems.map((item) => updateItemStatus(item, "publish"))
);
showToast(__("Items marked as published", "yatra"), "success");
} else if (bulkAction === "draft") {
const targetStatus = "draft";
await Promise.all(
selectedItems.map(
(item) => updateItemStatus(item, targetStatus)
)
);
showToast(
statusFilter === "trash" ? __("Items restored to draft", "yatra") : __("Items marked as draft", "yatra"),
"success"
);
} else if (bulkAction === "trash") {
await Promise.all(
selectedItems.map((item) => updateItemStatus(item, "trash"))
);
showToast(__("Items moved to trash", "yatra"), "success");
} else if (bulkAction === "restore") {
await Promise.all(
selectedItems.map((item) => updateItemStatus(item, "draft"))
);
showToast(__("Items restored to draft", "yatra"), "success");
}
await queryClient2.invalidateQueries({ queryKey: ["items"] });
await queryClient2.invalidateQueries({ queryKey: ["items-stats"] });
setSelectedIds([]);
setBulkAction("");
} catch (error2) {
showToast(__("Bulk action failed", "yatra"), "error");
} finally {
setBulkMutationPending(false);
}
};
const columns = [
{
key: "item",
label: __("Item", "yatra"),
sortable: true,
width: "w-[200px]",
visible: visibleColumns.item,
render: (item) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${baseAdminUrl}?page=yatra&subpage=itinerary&tab=items&action=edit&id=${item.id}`,
className: "hover:underline underline-offset-2 text-blue-600 dark:text-blue-400",
children: item.name
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: item.slug })
] })
},
{
key: "type",
label: __("Type", "yatra"),
sortable: true,
width: "w-[150px]",
visible: visibleColumns.type,
render: (item) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
item.type_icon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded-md bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: item.type_icon,
provider: item.type_icon_provider ?? "yatra",
className: "w-4 h-4 text-gray-700 dark:text-gray-300"
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: item.type_name || __("Unknown", "yatra") })
] })
},
{
key: "description",
label: __("Description", "yatra"),
sortable: false,
width: "w-[200px]",
visible: visibleColumns.description,
render: (item) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 text-sm line-clamp-2", children: item.description || __("No description", "yatra") })
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
width: "w-[100px]",
visible: visibleColumns.status,
render: (item) => getStatusBadge(item.status)
},
{
key: "usage",
label: __("Usage", "yatra"),
sortable: false,
width: "w-[100px]",
visible: visibleColumns.usage,
render: (item) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "font-medium", children: item.usage_count ?? 0 }) })
},
{
key: "date",
label: __("Date", "yatra"),
sortable: true,
width: "w-[150px]",
visible: visibleColumns.date,
render: (item) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-gray-500 dark:text-gray-400 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: formatDate2(item.created_at) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-400 dark:text-gray-500 mt-0.5", children: [
__("Updated", "yatra"),
": ",
formatDate2(item.updated_at)
] })
] })
},
{
key: "author",
label: __("Author", "yatra"),
sortable: false,
width: "w-[150px]",
visible: visibleColumns.author,
render: (item) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: formatUser(item.created_by, item.created_by_name) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-400 dark:text-gray-500 mt-0.5", children: [
__("Updated by", "yatra"),
":",
" ",
formatUser(item.updated_by, item.updated_by_name)
] })
] })
}
];
const tableActions = reactExports.useMemo(() => {
const actions = [];
if (can("yatra_edit_trips")) {
actions.push({
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (item) => handleEdit(item)
});
actions.push({
key: "publish",
label: __("Mark as Published", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: (item) => {
setStatusActionConfirm({ isOpen: true, item, action: "publish" });
},
condition: (item) => item.status !== "publish" && item.status !== "trash"
});
actions.push({
key: "draft",
label: __("Mark as Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: (item) => {
setStatusActionConfirm({ isOpen: true, item, action: "draft" });
},
condition: (item) => item.status !== "draft" && item.status !== "trash"
});
actions.push({
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (item) => {
setStatusActionConfirm({ isOpen: true, item, action: "trash" });
},
condition: (item) => item.status !== "trash"
});
actions.push({
key: "restore",
label: __("Restore to Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: (item) => {
setStatusActionConfirm({ isOpen: true, item, action: "restore" });
},
condition: (item) => item.status === "trash"
});
}
if (can("yatra_delete_trips")) {
actions.push({
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (item) => handleDelete(item),
variant: "destructive",
condition: (item) => item.status === "trash"
});
}
return actions;
}, [can, queryClient2, showToast]);
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, item: null }),
onConfirm: confirmDelete,
title: __("Delete Item", "yatra"),
message: deleteConfirm.item ? __(
'Are you sure you want to delete "{name}"? This action cannot be undone.',
"yatra"
).replace("{name}", deleteConfirm.item.name) : __(
"Are you sure you want to delete this item? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: statusActionConfirm.isOpen,
onClose: () => setStatusActionConfirm({ isOpen: false, item: null, action: null }),
onConfirm: async () => {
const { item, action } = statusActionConfirm;
if (!item || !action) {
return;
}
const targetStatus = action === "restore" ? "draft" : action;
await updateItemStatus(
item,
targetStatus
);
const successMessage = action === "publish" ? __("Item marked as published.", "yatra") : action === "draft" || action === "restore" ? __("Item marked as draft.", "yatra") : __("Item moved to trash.", "yatra");
showToast(successMessage, "success");
queryClient2.invalidateQueries({ queryKey: ["items"] });
queryClient2.invalidateQueries({ queryKey: ["items-stats"] });
setStatusActionConfirm({ isOpen: false, item: null, action: null });
},
title: (() => {
switch (statusActionConfirm.action) {
case "publish":
return __("Publish Item", "yatra");
case "draft":
return __("Mark as Draft", "yatra");
case "trash":
return __("Move to Trash", "yatra");
case "restore":
return __("Restore Item", "yatra");
default:
return __("Confirm Action", "yatra");
}
})(),
message: (() => {
var _a2;
const name = ((_a2 = statusActionConfirm.item) == null ? void 0 : _a2.name) || "";
switch (statusActionConfirm.action) {
case "publish":
return __(
'Are you sure you want to publish "{name}"?',
"yatra"
).replace("{name}", name);
case "draft":
return __(
'Are you sure you want to mark "{name}" as draft?',
"yatra"
).replace("{name}", name);
case "trash":
return __(
'Are you sure you want to move "{name}" to trash?',
"yatra"
).replace("{name}", name);
case "restore":
return __(
'Are you sure you want to restore "{name}" to draft?',
"yatra"
).replace("{name}", name);
default:
return __(
"Are you sure you want to perform this action?",
"yatra"
);
}
})(),
confirmText: (() => {
switch (statusActionConfirm.action) {
case "publish":
return __("Publish", "yatra");
case "draft":
case "restore":
return __("Mark as Draft", "yatra");
case "trash":
return __("Move to Trash", "yatra");
default:
return __("Confirm", "yatra");
}
})(),
cancelText: __("Cancel", "yatra"),
variant: "warning",
isLoading: false
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Items", "yatra"),
description: __(
"Manage specific items (subtypes) under item types. Examples: Hiking (under Activity), Lunch (under Meal), Bus (under Transportation).",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: handleCreate, className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Item", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col md:flex-row gap-2 items-stretch md:items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search items...", "yatra"),
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
className: "pl-9"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: typeFilter,
onChange: (e) => setTypeFilter(e.target.value),
className: "w-full md:w-48",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Types", "yatra") }),
types.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: type.id, children: type.name }, type.id))
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: statusFilter,
onChange: (e) => setStatusFilter(e.target.value),
className: "w-full md:w-40",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: sortBy2,
onChange: (e) => setSortBy(e.target.value),
className: "w-full md:w-40",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "name", children: __("Name", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "type_id", children: __("Type", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "status", children: __("Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "created_at", children: __("Created At", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "updated_at", children: __("Updated At", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => setSortOrder(sortOrder === "asc" ? "desc" : "asc"),
className: "px-3 flex items-center gap-1.5",
title: sortOrder === "asc" ? __("Ascending", "yatra") : __("Descending", "yatra"),
children: [
sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: sortOrder === "asc" ? __("Asc", "yatra") : __("Desc", "yatra") })
]
}
),
hasFilters && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleResetFilters,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }),
__("Reset", "yatra")
]
}
)
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
!isItemsError && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: handleClearSelection,
statusFilter,
setStatusFilter,
statusOptions,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending,
totalItems: total,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: items,
columns,
actions: tableActions,
isLoading,
isError: isItemsError,
errorText: __("Error loading items", "yatra"),
errorDescription: __(
"We couldn't connect to the items service. Please refresh or try again shortly.",
"We couldn't connect to the items service. Please refresh or try again shortly."
),
errorDetails: derivedErrorDetails,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["items"] }),
emptyText: __("No items found", "yatra"),
emptyDescription: hasFilters ? __(
"Try adjusting your filters to see more results.",
"yatra"
) : __("Get started by creating your first item.", "yatra"),
onCreateClick: can("yatra_edit_trips") ? handleCreate : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: handleSelectItem,
onSelectAll: handleSelectAll,
isAllSelected,
getItemId: (item) => item.id,
getItemStatus: (item) => item.status,
statusFilter,
capability: "yatra_view_trips"
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: setPage,
itemName: __("items", "yatra")
}
) })
] }) })
] });
};
const SearchableSelect = ({
value,
onChange,
options: options2,
placeholder = __("Select an option...", "yatra"),
searchPlaceholder = __("Search...", "yatra"),
className = "",
error = false,
disabled = false,
showValueId = true
}) => {
const [isOpen, setIsOpen] = reactExports.useState(false);
const [searchTerm, setSearchTerm] = reactExports.useState("");
const containerRef = reactExports.useRef(null);
const searchInputRef = reactExports.useRef(null);
const [menuRect, setMenuRect] = reactExports.useState(null);
const filteredOptions = options2.filter(
(option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) || option.value.toLowerCase().includes(searchTerm.toLowerCase())
);
const selectedOption = options2.find((opt) => opt.value === value);
reactExports.useEffect(() => {
const handleClickOutside = (event) => {
const target2 = event.target;
if (containerRef.current && containerRef.current.contains(target2)) {
return;
}
const portalRoot = document.getElementById(
"yatra-searchable-select-portal"
);
if (portalRoot && portalRoot.contains(target2)) {
return;
}
setIsOpen(false);
setSearchTerm("");
};
if (isOpen) {
document.addEventListener("mousedown", handleClickOutside);
setTimeout(() => {
var _a;
(_a = searchInputRef.current) == null ? void 0 : _a.focus();
}, 100);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [isOpen]);
reactExports.useLayoutEffect(() => {
if (!isOpen) {
setMenuRect(null);
return;
}
const measure = () => {
const el = containerRef.current;
if (!el) return;
const rect = el.getBoundingClientRect();
setMenuRect({
top: rect.bottom + 4,
left: rect.left,
width: rect.width
});
};
measure();
window.addEventListener("scroll", measure, true);
window.addEventListener("resize", measure);
return () => {
window.removeEventListener("scroll", measure, true);
window.removeEventListener("resize", measure);
};
}, [isOpen]);
const handleSelect = (optionValue) => {
onChange(optionValue);
setIsOpen(false);
setSearchTerm("");
};
const handleClear = (e) => {
e.stopPropagation();
onChange("");
setSearchTerm("");
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
ref: containerRef,
className: `relative ${className}`,
style: { zIndex: isOpen ? 9999 : "auto" },
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `flex h-11 w-full rounded-md border-2 ${error ? "border-red-500" : "border-gray-300 dark:border-gray-600"} bg-white dark:bg-gray-800 px-4 py-2.5 text-base ring-offset-white focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:ring-offset-gray-900 dark:focus-within:ring-blue-400 transition-colors`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
onClick: () => !disabled && setIsOpen(!isOpen),
className: `flex-1 flex items-center justify-between text-left ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: selectedOption ? "text-gray-900 dark:text-white" : "text-gray-500 dark:text-gray-400",
children: selectedOption ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between w-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: selectedOption.label }),
showValueId && selectedOption.value && selectedOption.value !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400 ml-2 font-medium", children: [
"ID: ",
selectedOption.value
] })
] }) : placeholder
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
value && !disabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: handleClear,
className: "p-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded",
"aria-label": __("Clear selection", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 text-gray-400" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ChevronDown,
{
className: `w-4 h-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
}
)
] })
]
}
)
}
),
isOpen && menuRect && reactDomExports.createPortal(
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
id: "yatra-searchable-select-portal",
style: {
position: "fixed",
top: menuRect.top,
left: menuRect.left,
width: menuRect.width,
zIndex: 999999
},
className: "bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-60 overflow-visible",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
ref: searchInputRef,
type: "text",
placeholder: searchPlaceholder,
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
className: "pl-8 h-8",
onClick: (e) => e.stopPropagation()
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-48 overflow-y-auto overflow-x-visible", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 dark:text-gray-400 text-center", children: __("No options found", "yatra") }) : filteredOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => handleSelect(option.value),
className: `w-full px-3 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${value === option.value ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400" : "text-gray-900 dark:text-white"}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: option.label }),
showValueId && option.value && option.value !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400 ml-2 font-medium", children: [
"ID: ",
option.value
] })
] })
},
option.value
)) })
]
}
),
document.body
)
]
}
);
};
const ItemForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
type_id: "",
status: "publish"
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const [isSlugEditable, setIsSlugEditable] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const itemId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const isEditMode = action === "edit" && itemId !== null;
const { data: typesData } = useQuery({
queryKey: ["item-types-published"],
queryFn: async () => {
try {
const response = await apiClient.get("/item-types", {
params: {
per_page: 100,
status: "publish"
// Only get published item types
}
});
return response.data || [];
} catch (error) {
showToast(
(error == null ? void 0 : error.message) || __("Failed to load item types", "yatra"),
"error"
);
return [];
}
},
enabled: can("yatra_view_trips")
});
const { data: itemData, isLoading: isLoadingItem } = useQuery({
queryKey: ["item", itemId],
queryFn: async () => {
if (!itemId) return null;
try {
const response = await apiClient.get(`/items/${itemId}`);
return response;
} catch (error) {
showToast(
(error == null ? void 0 : error.message) || __("Failed to load item", "yatra"),
"error"
);
throw error;
}
},
enabled: isEditMode && can("yatra_view_trips")
});
reactExports.useEffect(() => {
var _a;
if (itemData && isEditMode) {
setFormData({
name: itemData.name || "",
slug: itemData.slug || "",
description: itemData.description || "",
type_id: ((_a = itemData.type_id) == null ? void 0 : _a.toString()) || "",
status: itemData.status || "publish"
});
}
}, [itemData, isEditMode]);
const handleNameChange = (value) => {
if (!isEditMode && !isSlugEditable) {
const newSlug = generateSlug(value);
setFormData((prev) => ({
...prev,
name: value,
slug: newSlug
}));
} else {
setFormData((prev) => ({
...prev,
name: value
}));
}
if (errors.name) {
setErrors((prev) => ({ ...prev, name: "" }));
}
};
const handleSlugChange = (value) => {
if (isSlugEditable) {
setFormData((prev) => ({ ...prev, slug: value }));
if (errors.slug) {
setErrors((prev) => ({ ...prev, slug: "" }));
}
}
};
const handleToggleSlugEdit = () => {
if (isSlugEditable) {
const newSlug = generateSlug(formData.name);
setFormData((prev) => ({ ...prev, slug: newSlug }));
}
setIsSlugEditable(!isSlugEditable);
};
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = __("Name is required", "yatra");
}
if (!formData.slug.trim()) {
newErrors.slug = __("Slug is required", "yatra");
} else if (!/^[\p{L}\p{N}-]+$/u.test(formData.slug)) {
newErrors.slug = __(
"Slug can only contain letters, numbers, and hyphens",
"yatra"
);
}
if (!formData.type_id) {
newErrors.type_id = __("Item type is required", "yatra");
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
name: data.name.trim(),
slug: data.slug.trim(),
description: data.description.trim(),
type_id: parseInt(data.type_id),
status: data.status
};
if (isEditMode && isSlugEditable) {
payload.preserve_slug = true;
}
if (isEditMode && itemId) {
return await apiClient.put(`/items/${itemId}`, payload);
} else {
return await apiClient.post("/items", payload);
}
},
onSuccess: (response) => {
queryClient2.invalidateQueries({ queryKey: ["items"] });
queryClient2.invalidateQueries({ queryKey: ["item", itemId] });
showToast(
isEditMode ? __("Item updated successfully", "yatra") : __("Item created successfully", "yatra"),
"success"
);
if (response == null ? void 0 : response.redirect) {
setTimeout(() => {
window.location.href = response.redirect_to;
}, 1e3);
} else if (response == null ? void 0 : response.stay_on_page) {
setIsSubmitting(false);
} else {
setTimeout(() => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=itinerary&tab=items`;
}, 1e3);
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the item", "yatra");
showToast(errorMessage, "error");
setIsSubmitting(false);
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
showToast(__("Please fix the form errors", "yatra"), "warning");
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=itinerary&tab=items`;
};
if (isEditMode && isLoadingItem) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-6 h-6 animate-spin text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 text-gray-600 dark:text-gray-400", children: __("Loading...", "yatra") })
] });
}
const types = typesData || [];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Item", "yatra") : __("Add New Item", "yatra"),
description: isEditMode ? __("Update item information", "yatra") : __(
"Create a specific item under an item type. Examples: Hiking (under Activity), Lunch (under Meal).",
"yatra"
),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Basic Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "type_id",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Item Type", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
SearchableSelect,
{
value: formData.type_id,
onChange: (value) => handleFieldChange("type_id", value),
options: types.map((type) => ({
value: type.id.toString(),
label: type.name,
icon: type.icon
})),
placeholder: __("Select a type...", "yatra"),
searchPlaceholder: __("Search item types...", "yatra"),
className: errors.type_id ? "border-red-500" : "",
error: !!errors.type_id
}
),
errors.type_id && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.type_id })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Item Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "name",
type: "text",
value: formData.name,
onChange: (e) => handleNameChange(e.target.value),
placeholder: __("e.g., Hiking", "yatra"),
className: errors.name ? "border-red-500" : "",
required: true
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "slug",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Slug", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "slug",
type: "text",
value: formData.slug,
onChange: (e) => handleSlugChange(e.target.value),
placeholder: __("item-slug", "yatra"),
className: `pr-10 ${errors.slug ? "border-red-500" : ""} ${!isSlugEditable ? "bg-gray-50 dark:bg-gray-800 cursor-not-allowed" : ""}`,
disabled: !isSlugEditable,
required: true
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: handleToggleSlugEdit,
className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors rounded",
"aria-label": isSlugEditable ? __("Cancel editing slug", "yatra") : __("Edit slug", "yatra"),
children: isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-4 h-4" })
}
)
] }),
errors.slug && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: isSlugEditable ? __(
"Manually editing slug. Click X to cancel and regenerate from name.",
"yatra"
) : __(
"Auto-generated from name. Click edit icon to customize.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "description",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Description", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "description",
value: formData.description,
onChange: (e) => handleFieldChange("description", e.target.value),
placeholder: __("Describe this item...", "yatra"),
rows: 4,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none"
}
)
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Item Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Item", "yatra") : __("Create Item", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] }) }) }) })
] })
] }) }) })
] });
};
const Alert = ({
variant = "info",
title: title2,
children,
onClose,
className = ""
}) => {
const variantClasses = {
success: "bg-green-50 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800",
error: "bg-red-50 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800",
warning: "bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-800",
info: "bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800"
};
const icons = {
success: CheckCircle,
error: XCircle,
warning: AlertCircle,
info: Info
};
const Icon = icons[variant];
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `rounded-md border p-4 ${variantClasses[variant]} ${className}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-5 h-5 flex-shrink-0 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-medium mb-1", children: title2 }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm", children })
] }),
onClose && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: onClose,
className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity",
"aria-label": __("Close", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" })
}
)
] })
}
);
};
const TimePicker = ({
value,
onChange,
placeholder = "Select time",
disabled = false,
className = "",
error = false
}) => {
const [open, setOpen] = reactExports.useState(false);
const [hours, setHours] = reactExports.useState("");
const [minutes, setMinutes] = reactExports.useState("");
const [ampm, setAmpm] = reactExports.useState("AM");
reactExports.useEffect(() => {
if (value) {
const [h, m] = value.split(":");
const hour = parseInt(h);
if (hour === 0) {
setHours("12");
setAmpm("AM");
} else if (hour < 12) {
setHours(hour.toString());
setAmpm("AM");
} else if (hour === 12) {
setHours("12");
setAmpm("PM");
} else {
setHours((hour - 12).toString());
setAmpm("PM");
}
setMinutes(m || "00");
}
}, [value]);
const handleTimeSelect = (h, m, a2) => {
let hour24 = parseInt(h);
if (a2 === "PM" && hour24 !== 12) {
hour24 += 12;
} else if (a2 === "AM" && hour24 === 12) {
hour24 = 0;
}
const timeString = `${hour24.toString().padStart(2, "0")}:${m.padStart(2, "0")}`;
onChange == null ? void 0 : onChange(timeString);
setOpen(false);
};
const formatDisplayTime = () => {
if (!value) return "";
const [h, m] = value.split(":");
const hour = parseInt(h);
if (hour === 0) return `12:${m} AM`;
if (hour < 12) return `${hour}:${m} AM`;
if (hour === 12) return `12:${m} PM`;
return `${hour - 12}:${m} PM`;
};
const hourOptions = Array.from({ length: 12 }, (_, i) => (i + 1).toString());
const minuteOptions = Array.from(
{ length: 60 },
(_, i) => i.toString().padStart(2, "0")
);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open, onOpenChange: setOpen, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
disabled,
className: `w-full justify-start text-left font-normal ${error ? "border-red-500" : ""} ${!value ? "text-gray-500" : ""} ${className}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "mr-2 h-4 w-4" }),
formatDisplayTime() || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: placeholder })
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(PopoverContent, { className: "w-auto p-4", align: "start", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "Hour" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-3 gap-1 max-h-48 overflow-y-auto", children: hourOptions.map((h) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
setHours(h);
if (hours && minutes) {
handleTimeSelect(h, minutes, ampm);
}
},
className: `px-3 py-2 text-sm rounded-md transition-colors ${hours === h ? "bg-blue-600 text-white" : "hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: h
},
h
)) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "Minute" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-3 gap-1 max-h-48 overflow-y-auto", children: minuteOptions.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
setMinutes(m);
if (hours && m) {
handleTimeSelect(hours, m, ampm);
}
},
className: `px-3 py-2 text-sm rounded-md transition-colors ${minutes === m ? "bg-blue-600 text-white" : "hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: m
},
m
)) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "AM/PM" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
setAmpm("AM");
if (hours && minutes) {
handleTimeSelect(hours, minutes, "AM");
}
},
className: `px-4 py-2 text-sm rounded-md transition-colors ${ampm === "AM" ? "bg-blue-600 text-white" : "hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: "AM"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
setAmpm("PM");
if (hours && minutes) {
handleTimeSelect(hours, minutes, "PM");
}
},
className: `px-4 py-2 text-sm rounded-md transition-colors ${ampm === "PM" ? "bg-blue-600 text-white" : "hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: "PM"
}
)
] })
] })
] }),
hours && minutes && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 pt-4 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: () => handleTimeSelect(hours, minutes, ampm),
className: "w-full",
size: "sm",
children: "Set Time"
}
) })
] })
] });
};
const MediaUpload = ({
items = [],
onChange,
maxItems = 10,
acceptTypes = "both",
title: title2 = __("Media Gallery", "yatra"),
description = __("Add images and videos to showcase this activity", "yatra"),
className = ""
}) => {
const getMediaType = (acceptTypes2) => {
switch (acceptTypes2) {
case "images":
return "image";
case "videos":
return "video";
default:
return "image,video";
}
};
const getMediaTitle = (acceptTypes2) => {
switch (acceptTypes2) {
case "images":
return __("Photo Gallery", "yatra");
case "videos":
return __("Video Gallery", "yatra");
default:
return title2;
}
};
const getMediaDescription = (acceptTypes2) => {
switch (acceptTypes2) {
case "images":
return __("Upload images to showcase this activity", "yatra");
case "videos":
return __("Add videos to showcase this activity", "yatra");
default:
return description;
}
};
const handleMediaAdd = () => {
if (items.length >= maxItems) {
alert(
sprintf(
// translators: %d: maximum number of media items allowed.
__("Maximum %d media items allowed", "yatra"),
Number(maxItems) || 0
)
);
return;
}
if (window.wp && window.wp.media) {
const mediaUploader = window.wp.media({
title: __("Select Media", "yatra"),
button: { text: __("Add Media", "yatra") },
multiple: true,
// Allow multiple selection
library: { type: getMediaType(acceptTypes) }
});
mediaUploader.on("select", () => {
const selection = mediaUploader.state().get("selection");
const newItems = [];
selection.each((attachment) => {
var _a, _b;
const mediaType = attachment.get("type");
const mediaItem = {
id: attachment.get("id").toString(),
attachment_id: attachment.get("id"),
url: attachment.get("url"),
type: mediaType,
alt_text: attachment.get("alt") || "",
caption: attachment.get("caption") || ""
};
if (mediaType === "image") {
const sizes = attachment.get("sizes");
mediaItem.thumbnail_url = ((_a = sizes == null ? void 0 : sizes.medium) == null ? void 0 : _a.url) || ((_b = sizes == null ? void 0 : sizes.thumbnail) == null ? void 0 : _b.url) || attachment.get("url");
}
newItems.push(mediaItem);
});
if (newItems.length > 0) {
onChange([...items, ...newItems]);
}
});
prepareWordPressMediaFrameOpen();
mediaUploader.open();
} else {
const input = document.createElement("input");
input.type = "file";
input.multiple = true;
input.accept = acceptTypes === "videos" ? "video/*" : acceptTypes === "images" ? "image/*" : "image/*,video/*";
input.onchange = (e) => {
const files = Array.from(e.target.files || []);
const newItems = files.slice(0, maxItems - items.length).map((file, index) => ({
id: `temp_${Date.now()}_${index}`,
attachment_id: 0,
// Temporary files don't have attachment IDs
url: URL.createObjectURL(file),
type: file.type.startsWith("video/") ? "video" : "image",
alt_text: file.name,
caption: file.name
}));
onChange([...items, ...newItems]);
};
input.click();
}
};
const handleMediaRemove = (index) => {
onChange(items.filter((_, i) => i !== index));
};
const isImage = (item) => item.type === "image";
return /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: getMediaTitle(acceptTypes) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: getMediaDescription(acceptTypes) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
items.length,
"/",
maxItems
] })
] }),
items.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: items.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center overflow-hidden", children: isImage(item) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: item.thumbnail_url || item.url,
alt: item.alt_text || // translators: %d: media item sequence number (1-based).
sprintf(__("Media %d", "yatra"), index + 1),
className: "w-full h-full object-cover",
onError: (e) => {
console.error("Image load error:", e, "Item:", item);
e.target.style.display = "none";
const parent = e.target.parentElement;
if (parent) {
parent.innerHTML = '🖼️
' + __("Image not available", "yatra") + "
OpenStreetMap contributors',
maxZoom: 19
}).addTo(map2);
const pending = pendingSelectionRef.current;
if (pending) {
pendingSelectionRef.current = null;
map2.setView([pending.lat, pending.lng], pending.zoom);
addMarker(
map2,
pending.lat,
pending.lng,
pending.name ? { name: pending.name } : void 0
);
} else if (((_c = v.latitude) == null ? void 0 : _c.trim()) && ((_d = v.longitude) == null ? void 0 : _d.trim())) {
addMarker(map2, lat, lng);
}
map2.on("click", function(e) {
const { lat: lat2, lng: lng2 } = e.latlng;
addMarker(map2, lat2, lng2);
reverseGeocode(lat2, lng2);
});
mapInstanceRef.current = map2;
setMapLoading(false);
setMapReady(true);
};
const addMarker = (map2, lat, lng, extra) => {
const L = window.L;
if (markerRef.current) {
map2.removeLayer(markerRef.current);
}
const customIcon = L.divIcon({
html: '',
iconSize: [30, 30],
iconAnchor: [15, 30],
className: "yatra-custom-marker"
});
const marker = L.marker([lat, lng], {
icon: customIcon,
draggable: true
}).addTo(map2);
markerRef.current = marker;
marker.on("dragend", function(e) {
const position = e.target.getLatLng();
const newLat = position.lat;
const newLng = position.lng;
const newLocation2 = {
...valueRef.current,
latitude: newLat.toString(),
longitude: newLng.toString()
};
onChange(newLocation2);
valueRef.current = newLocation2;
reverseGeocode(newLat, newLng);
});
const newLocation = {
...valueRef.current,
...extra,
latitude: lat.toString(),
longitude: lng.toString()
};
onChange(newLocation);
valueRef.current = newLocation;
};
const reverseGeocode = async (lat, lng) => {
var _a, _b;
try {
const formData = new FormData();
formData.append("action", "yatra_reverse_geocode");
formData.append("lat", lat.toString());
formData.append("lng", lng.toString());
formData.append(
"nonce",
((_a = window.yatraAdmin) == null ? void 0 : _a.geocodingNonce) || ""
);
const response = await fetch(
((_b = window.yatraAdmin) == null ? void 0 : _b.ajaxUrl) || "/wp-admin/admin-ajax.php",
{
method: "POST",
body: formData
}
);
if (response.ok) {
const result = await response.json();
if (result.success && result.data.result) {
const data = result.data.result;
const locationName2 = data.display_name || `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
const newLocation2 = {
...valueRef.current,
name: locationName2,
latitude: lat.toString(),
longitude: lng.toString()
};
onChange(newLocation2);
valueRef.current = newLocation2;
return;
}
}
} catch (error) {
console.error("Error reverse geocoding:", error);
}
const locationName = `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
const newLocation = {
...valueRef.current,
name: locationName,
latitude: lat.toString(),
longitude: lng.toString()
};
onChange(newLocation);
valueRef.current = newLocation;
};
const searchTimeoutRef = reactExports.useRef();
const searchLocations = async (query) => {
var _a, _b;
if (!query.trim() || query.length < 2) {
setSearchResults([]);
return;
}
setSearchLoading(true);
try {
const formData = new FormData();
formData.append("action", "yatra_search_locations");
formData.append("query", query);
formData.append("limit", searchLimit.toString());
formData.append(
"nonce",
((_a = window.yatraAdmin) == null ? void 0 : _a.geocodingNonce) || ""
);
const response = await fetch(
((_b = window.yatraAdmin) == null ? void 0 : _b.ajaxUrl) || "/wp-admin/admin-ajax.php",
{
method: "POST",
body: formData
}
);
if (response.ok) {
const result = await response.json();
if (result.success) {
setSearchResults(result.data.results);
} else {
console.error("Search error:", result.data.message);
setSearchResults([]);
}
}
} catch (error) {
console.error("Error searching locations:", error);
setSearchResults([]);
} finally {
setSearchLoading(false);
}
};
const handleSearchChange = (e) => {
const query = e.target.value;
setSearchQuery(query);
if (searchTimeoutRef.current) {
clearTimeout(searchTimeoutRef.current);
}
searchTimeoutRef.current = setTimeout(() => {
searchLocations(query);
}, 300);
};
const selectLocation = (location) => {
const lat = parseFloat(location.lat);
const lng = parseFloat(location.lon);
const displayName = location.display_name || "";
const newLocation = {
name: displayName,
latitude: lat.toString(),
longitude: lng.toString()
};
onChange(newLocation);
valueRef.current = newLocation;
onLocationSelect == null ? void 0 : onLocationSelect(newLocation);
const detailZoom = 14;
if (mapInstanceRef.current) {
mapInstanceRef.current.setView([lat, lng], detailZoom);
addMarker(mapInstanceRef.current, lat, lng, { name: displayName });
} else {
pendingSelectionRef.current = {
lat,
lng,
zoom: detailZoom,
name: displayName
};
}
setSearchQuery("");
setSearchResults([]);
};
const clearLocation = () => {
pendingSelectionRef.current = null;
const emptyLocation = { name: "", latitude: "", longitude: "" };
onChange(emptyLocation);
valueRef.current = emptyLocation;
onLocationClear == null ? void 0 : onLocationClear();
if (markerRef.current && mapInstanceRef.current) {
mapInstanceRef.current.removeLayer(markerRef.current);
markerRef.current = null;
}
};
const toggleMap = () => {
const newState = !showMap;
setShowMap(newState);
onMapToggle == null ? void 0 : onMapToggle(newState);
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `space-y-3 ${className}`, children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-xs font-normal text-gray-500 dark:text-gray-400", children: [
label,
required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
showMapButton && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: toggleMap,
className: "flex items-center gap-1 px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded hover:bg-blue-100 transition-colors",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-3 h-3" }),
showMap ? translate("Hide Map") : translate("Show Map")
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "text",
value: searchQuery || value.name,
onChange: (e) => {
const query = e.target.value;
setSearchQuery(query);
handleSearchChange({
target: { value: query }
});
onChange({ ...value, name: query });
},
placeholder: "Type location here...",
className: `w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white ${inputClassName}`
}
),
searchLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 animate-spin text-gray-400" }) : searchQuery || value.name ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
clearLocation();
setSearchQuery("");
},
className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" })
}
) : null
] }),
searchResults.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-64 overflow-y-auto",
style: { zIndex: 9999 },
children: searchResults.map((result, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => selectLocation(result),
className: "w-full text-left px-4 py-3 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors border-b border-gray-100 dark:border-gray-700 last:border-b-0 group",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-4 h-4 text-blue-500 group-hover:text-blue-600" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white text-sm truncate", children: result.display_name.split(",")[0] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5", children: result.display_name.split(",").slice(1).join(",").trim() })
] })
] })
},
index
))
}
)
] }),
!showManualCoordinateFields && (value.latitude || value.longitude) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "w-4 h-4 text-gray-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
translate("Coordinates:"),
" ",
value.latitude || "0",
",",
" ",
value.longitude || "0"
] })
] }),
showMap && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-gray-300 rounded-lg overflow-hidden", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
mapLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-6 h-6 animate-spin text-blue-500" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
ref: mapRef,
style: { height: mapHeight, width: "100%" },
className: `bg-gray-100 ${mapClassName}`
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-gray-50 dark:bg-gray-800 text-xs text-gray-600 dark:text-gray-400", children: translate(
"Click on the map to set the location, or drag the marker to adjust coordinates."
) })
] }),
showManualCoordinateFields && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 pt-2 border-t border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
translate("GPS Coordinates"),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs font-normal text-gray-500 dark:text-gray-400 ml-1", children: [
"(",
translate("Manual override"),
")"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
if (!navigator.geolocation) {
alert(
translate("Geolocation is not supported by your browser")
);
return;
}
navigator.geolocation.getCurrentPosition(
(position) => {
onChange({
...value,
latitude: position.coords.latitude.toString(),
longitude: position.coords.longitude.toString()
});
},
(error) => {
let message2 = translate("Unable to get your location");
if (error.code === 1 && error.message.includes("secure origins")) {
message2 = translate(
"Location access requires HTTPS. This feature will work on your live HTTPS site."
);
}
alert(message2);
}
);
},
className: "text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 px-3 py-1.5 rounded-lg hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors",
children: translate("Use Current Location")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: translate("Latitude") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "text",
inputMode: "decimal",
value: value.latitude,
onChange: (e) => onChange({ ...value, latitude: e.target.value }),
placeholder: translate("e.g. -8.3405"),
className: `w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white ${inputClassName}`
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: translate("Longitude") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "text",
inputMode: "decimal",
value: value.longitude,
onChange: (e) => onChange({ ...value, longitude: e.target.value }),
placeholder: translate("e.g. 115.0920"),
className: `w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white ${inputClassName}`
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: translate(
"Manual coordinate entry. These will be auto-filled when you select a location from the map above."
) })
] }),
helpText && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: helpText })
] });
};
const ItineraryEntryFields = ({
entry,
errors = {},
itemTypes,
items,
newIncludedItem = "",
newExcludedItem = "",
onFieldChange,
onIncludedItemChange,
onExcludedItemChange,
onAddIncludedItem,
onAddExcludedItem,
onRemoveIncludedItem,
onRemoveExcludedItem,
calculateDuration,
size = "default",
showCardWrapper = false,
onRefreshData
}) => {
var _a;
const [localGallery, setLocalGallery] = React.useState([]);
const [localVideoUrl, setLocalVideoUrl] = React.useState("");
React.useEffect(() => {
if (entry.gallery && Array.isArray(entry.gallery)) {
setLocalGallery(entry.gallery);
} else {
setLocalGallery([]);
}
}, [entry.gallery]);
React.useEffect(() => {
if (entry.video_url !== void 0 && entry.video_url !== null) {
setLocalVideoUrl(entry.video_url);
} else {
setLocalVideoUrl("");
}
}, [entry.video_url]);
const [isItemTypeModalOpen, setIsItemTypeModalOpen] = reactExports.useState(false);
const [isItemModalOpen, setIsItemModalOpen] = reactExports.useState(false);
const isCompact = size === "compact";
const textSize = isCompact ? "text-xs" : "text-sm";
const labelSize = isCompact ? "text-xs" : "text-sm";
const autoDuration = calculateDuration ? calculateDuration(
entry.start_time || "",
entry.end_time || "",
entry.time_type || "exact"
) : "";
const globalCurrency = ((_a = window.yatraAdmin) == null ? void 0 : _a.currency) || "USD";
const currencySymbol = getCurrencySymbol(globalCurrency) || "";
const renderField = (content2) => {
if (showCardWrapper) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: content2 }) });
}
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: content2 });
};
const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
!isCompact && /* @__PURE__ */ jsxRuntimeExports.jsx(
"h5",
{
className: `${labelSize} font-semibold text-gray-900 dark:text-white`,
children: __("Basic Information", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: [
__("Item Type", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Select the type of item (Activity, Meal, Accommodation, etc.).",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: entry.item_type_id && Number(entry.item_type_id) !== 0 ? entry.item_type_id : "",
onChange: (e) => {
onFieldChange("item_type_id", e.target.value);
onFieldChange("item_id", "");
},
className: `${errors.item_type_id ? "border-red-500" : ""} ${textSize} text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 flex-1`,
style: {
color: "rgb(17, 24, 39)",
backgroundColor: "rgb(255, 255, 255)"
},
required: true,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: __("Select a type...", "yatra") }),
itemTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: String(type.id), children: type.name }, type.id))
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
size: "sm",
onClick: () => setIsItemTypeModalOpen(true),
className: "flex items-center gap-1 whitespace-nowrap",
title: __("Add new item type", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
isCompact ? "" : __("Add Type", "yatra")
]
}
)
] }),
errors.item_type_id && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"p",
{
className: `mt-1.5 ${textSize} text-red-600 dark:text-red-400 flex items-center gap-1`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.item_type_id
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: [
__("Item", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Select the specific item (Hiking, Lunch, Bus, etc.).",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: entry.item_id && Number(entry.item_id) !== 0 ? entry.item_id : "",
onChange: (e) => onFieldChange("item_id", e.target.value),
disabled: !entry.item_type_id || items.filter((item) => {
const itemTypeId = entry.item_type_id ? String(entry.item_type_id) : "";
const itemTypeIdNum = item.type_id || item.item_type_id;
return String(itemTypeIdNum) === itemTypeId;
}).length === 0,
className: `${errors.item_id ? "border-red-500" : ""} ${textSize} text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 flex-1`,
style: {
color: "rgb(17, 24, 39)",
backgroundColor: "rgb(255, 255, 255)"
},
required: true,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: !entry.item_type_id ? __("Select type first...", "yatra") : items.filter((item) => {
const itemTypeId = entry.item_type_id ? String(entry.item_type_id) : "";
const itemTypeIdNum = item.type_id || item.item_type_id;
return String(itemTypeIdNum) === itemTypeId;
}).length === 0 ? __("No items available", "yatra") : __("Select an item...", "yatra") }),
items.filter((item) => {
if (!entry.item_type_id) return false;
const itemTypeId = String(entry.item_type_id);
const itemTypeIdNum = item.type_id || item.item_type_id;
return String(itemTypeIdNum) === itemTypeId;
}).map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: String(item.id), children: item.name }, item.id))
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
size: "sm",
onClick: () => setIsItemModalOpen(true),
disabled: !entry.item_type_id,
className: "flex items-center gap-1 whitespace-nowrap",
title: __("Add new item", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
isCompact ? "" : __("Add Item", "yatra")
]
}
)
] }),
errors.item_id && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"p",
{
className: `mt-1.5 ${textSize} text-red-600 dark:text-red-400 flex items-center gap-1`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.item_id
]
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: [
__("Itinerary Activity Title", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
'A descriptive title for this itinerary activity. Examples: "Arrival in Kathmandu", "Trek to Base Camp".',
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: entry.title || "",
onChange: (e) => onFieldChange("title", e.target.value),
placeholder: __("e.g., Arrival in Kathmandu", "yatra"),
className: `${errors.title ? "border-red-500" : ""} ${textSize}`,
required: true
}
),
errors.title && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"p",
{
className: `mt-1.5 ${textSize} text-red-600 dark:text-red-400 flex items-center gap-1`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.title
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Description", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Detailed description of what happens during this itinerary entry.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: entry.description || "",
onChange: (e) => onFieldChange("description", e.target.value),
placeholder: __(
"Describe what happens during this entry...",
"yatra"
),
rows: isCompact ? 2 : 4,
className: `flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 ${textSize} ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none`
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: `space-y-3 ${!isCompact ? "pt-3 border-t border-gray-200 dark:border-gray-700" : ""}`,
children: [
!isCompact && /* @__PURE__ */ jsxRuntimeExports.jsx(
"h5",
{
className: `${labelSize} font-semibold text-gray-900 dark:text-white`,
children: __("Location & Time", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Activity Location", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Where does this activity take place? You can search for a location or enter coordinates manually.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
LocationPicker,
{
value: {
name: entry.location || "",
latitude: entry.location_latitude || "",
longitude: entry.location_longitude || ""
},
onChange: (locationData) => {
onFieldChange("location", locationData.name);
onFieldChange("location_latitude", locationData.latitude);
onFieldChange("location_longitude", locationData.longitude);
},
label: "",
placeholder: __("Search for location...", "yatra"),
helpText: "",
required: false,
defaultMapCenter: entry.location_latitude && entry.location_longitude ? [
parseFloat(entry.location_latitude),
parseFloat(entry.location_longitude)
] : [20, 0],
defaultZoom: entry.location_latitude && entry.location_longitude ? 13 : 2,
mapHeight: "300px",
showMapButton: false,
searchLimit: 8,
__,
className: "",
mapClassName: "rounded-lg"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-blue-600 dark:text-blue-400", children: "2" }) }),
__("GPS Coordinates", "yatra"),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
"(",
__("Manual override", "yatra"),
")"
] })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
onFieldChange(
"location_latitude",
position.coords.latitude.toString()
);
onFieldChange(
"location_longitude",
position.coords.longitude.toString()
);
onFieldChange(
"location",
`${position.coords.latitude.toFixed(6)}, ${position.coords.longitude.toFixed(6)}`
);
},
(error) => {
let message2 = __(
"Unable to get your location",
"yatra"
);
let showHttpsNotice = false;
switch (error.code) {
case 1:
if (error.message.includes("secure origins")) {
message2 = __(
"Location access requires HTTPS. This feature will work on your live HTTPS site.",
"yatra"
);
showHttpsNotice = true;
} else {
message2 = __(
"Location access denied. Please allow location access in your browser.",
"yatra"
);
}
break;
case 2:
message2 = __(
"Location information is unavailable. Please try again.",
"yatra"
);
break;
case 3:
message2 = __(
"Location request timed out. Please try again.",
"yatra"
);
break;
}
if (showHttpsNotice) {
alert(
message2 + "\n\n" + __(
"For local development, you can:\n1. Use a browser extension that allows geolocation on HTTP\n2. Set up a local HTTPS certificate\n3. Test on your live HTTPS site",
"yatra"
)
);
} else {
alert(message2);
}
}
);
} else {
alert(
__(
"Geolocation is not supported by your browser",
"yatra"
)
);
}
},
className: "text-xs bg-green-100 text-green-700 px-3 py-1.5 rounded-lg hover:bg-green-200 transition-colors flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-3 h-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
fillRule: "evenodd",
d: "M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z",
clipRule: "evenodd"
}
) }) }),
__("Use Current Location", "yatra")
]
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: `text-xs font-medium text-gray-600 dark:text-gray-400 flex items-center gap-1`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-blue-400 rounded-full" }),
__("Latitude", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: entry.location_latitude || "",
onChange: (e) => onFieldChange("location_latitude", e.target.value),
placeholder: __("e.g., -8.3405", "yatra"),
className: `w-full text-sm`
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: `text-xs font-medium text-gray-600 dark:text-gray-400 flex items-center gap-1`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-blue-400 rounded-full" }),
__("Longitude", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: entry.location_longitude || "",
onChange: (e) => onFieldChange("location_longitude", e.target.value),
placeholder: __("e.g., 115.0920", "yatra"),
className: `w-full text-sm`
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs text-gray-500 dark:text-gray-400`, children: __(
"Manual coordinate entry. These will be auto-filled when you select a location from the map above.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Time Type", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("How should the time be displayed?", "yatra"),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: entry.time_type || "exact",
onChange: (e) => onFieldChange("time_type", e.target.value),
className: textSize,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "exact", children: __("Exact Time", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "duration", children: __("Duration Only", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "flexible", children: __("Flexible", "yatra") })
]
}
)
] }),
entry.time_type === "exact" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Start Time", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("When does this activity start?", "yatra"),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
TimePicker,
{
value: entry.start_time || "",
onChange: (value) => {
onFieldChange("start_time", value);
if (calculateDuration && entry.end_time) {
const newDuration = calculateDuration(
value,
entry.end_time,
entry.time_type || "exact"
);
if (newDuration && !entry.duration) {
onFieldChange("duration", newDuration);
}
}
},
placeholder: "08:00",
className: "w-full",
error: !!(errors == null ? void 0 : errors.start_time)
}
),
errors.start_time && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"p",
{
className: `mt-1.5 ${textSize} text-red-600 dark:text-red-400 flex items-center gap-1`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.start_time
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("End Time", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("When does this activity end?", "yatra"),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
TimePicker,
{
value: entry.end_time || "",
onChange: (value) => {
onFieldChange("end_time", value);
if (calculateDuration && entry.start_time) {
const newDuration = calculateDuration(
entry.start_time,
value,
entry.time_type || "exact"
);
if (newDuration && !entry.duration) {
onFieldChange("duration", newDuration);
}
}
},
placeholder: "17:00",
className: "w-full",
error: !!(errors == null ? void 0 : errors.end_time)
}
),
errors.end_time && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"p",
{
className: `mt-1.5 ${textSize} text-red-600 dark:text-red-400 flex items-center gap-1`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.end_time
]
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Duration", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
'How long does this activity take? (e.g., "3 hours", "1 hour 30 minutes"). Leave empty to auto-calculate from times.',
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: entry.duration || "",
onChange: (e) => onFieldChange("duration", e.target.value),
placeholder: autoDuration || __("e.g., 3 hours", "yatra"),
className: `pl-9 ${textSize}`
}
)
] }),
autoDuration && entry.time_type === "exact" && !entry.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"p",
{
className: `mt-1.5 ${isCompact ? "text-xs" : "text-xs"} text-gray-500 dark:text-gray-400`,
children: [
__("Auto-calculated:", "yatra"),
" ",
autoDuration
]
}
)
] })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: `space-y-3 ${!isCompact ? "pt-3 border-t border-gray-200 dark:border-gray-700" : ""}`,
children: [
!isCompact && /* @__PURE__ */ jsxRuntimeExports.jsx(
"h5",
{
className: `${labelSize} font-semibold text-gray-900 dark:text-white`,
children: __("Cost and Additional Information", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Cost", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Optional cost for this activity. Leave empty if included in trip price.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm", children: currencySymbol }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: "0",
step: "0.01",
value: entry.cost || "",
onChange: (e) => onFieldChange("cost", e.target.value),
placeholder: "0.00",
className: `pl-8 ${textSize}`
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: entry.cost_per_person !== false,
onChange: (e) => onFieldChange("cost_per_person", e.target.checked),
className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `${textSize} text-gray-700 dark:text-gray-300`, children: __("Cost per person", "yatra") })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Notes / Instructions", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Additional notes or special instructions for this activity.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: entry.notes || "",
onChange: (e) => onFieldChange("notes", e.target.value),
placeholder: __(
"e.g., Please arrive 15 minutes early, Bring comfortable shoes...",
"yatra"
),
rows: isCompact ? 2 : 3,
className: `flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 ${textSize} ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none`
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-2`,
children: __("Included Items", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("Items or services included in this activity.", "yatra"),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: newIncludedItem,
onChange: (e) => onIncludedItemChange == null ? void 0 : onIncludedItemChange(e.target.value),
onKeyPress: (e) => {
if (e.key === "Enter") {
e.preventDefault();
onAddIncludedItem == null ? void 0 : onAddIncludedItem();
}
},
placeholder: __("Add included item...", "yatra"),
className: `flex-1 ${textSize}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
size: "icon",
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
if (newIncludedItem.trim()) {
onAddIncludedItem == null ? void 0 : onAddIncludedItem();
}
},
disabled: !newIncludedItem.trim(),
className: `flex-shrink-0 ${isCompact ? "h-9 w-9" : ""}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: (entry.included_items || []).map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
Badge,
{
variant: "info",
className: `flex items-center gap-1.5 ${textSize}`,
children: [
item,
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => onRemoveIncludedItem == null ? void 0 : onRemoveIncludedItem(index),
className: "ml-1 hover:text-red-600",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-3 h-3" })
}
)
]
},
index
)) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-2`,
children: __("Excluded Items", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Items or services NOT included in this activity.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: newExcludedItem,
onChange: (e) => onExcludedItemChange == null ? void 0 : onExcludedItemChange(e.target.value),
onKeyPress: (e) => {
if (e.key === "Enter") {
e.preventDefault();
onAddExcludedItem == null ? void 0 : onAddExcludedItem();
}
},
placeholder: __("Add excluded item...", "yatra"),
className: `flex-1 ${textSize}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
size: "icon",
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
if (newExcludedItem.trim()) {
onAddExcludedItem == null ? void 0 : onAddExcludedItem();
}
},
disabled: !newExcludedItem.trim(),
className: `flex-shrink-0 ${isCompact ? "h-9 w-9" : ""}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: (entry.excluded_items || []).map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
Badge,
{
variant: "default",
className: `flex items-center gap-1.5 ${textSize} border border-gray-300 dark:border-gray-600`,
children: [
item,
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => onRemoveExcludedItem == null ? void 0 : onRemoveExcludedItem(index),
className: "ml-1 hover:text-red-600",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-3 h-3" })
}
)
]
},
index
)) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Photo Gallery", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("Add photos to showcase this activity", "yatra"),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
MediaUpload,
{
items: localGallery,
onChange: (mediaItems) => {
setLocalGallery(mediaItems);
onFieldChange("gallery", mediaItems);
},
maxItems: 6,
acceptTypes: "images",
title: __("Activity Photos", "yatra"),
description: __(
"Upload photos to showcase this activity",
"yatra"
),
className: "w-full"
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
className: `block ${labelSize} font-medium text-gray-700 dark:text-gray-300 mb-1.5`,
children: __("Video URL", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Add a video URL to showcase this activity (YouTube, Vimeo, etc.)",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "text",
value: localVideoUrl,
onChange: (e) => {
setLocalVideoUrl(e.target.value);
onFieldChange("video_url", e.target.value);
},
placeholder: __("https://youtube.com/watch?v=...", "yatra"),
className: `flex h-11 w-full rounded-md border-2 border-gray-300 bg-white px-4 py-2.5 text-base font-normal text-gray-900 ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:ring-offset-gray-900 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 transition-colors ${textSize}`
}
),
errors.video_url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"p",
{
className: `mt-1.5 ${textSize} text-red-600 dark:text-red-400 flex items-center gap-1`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.video_url
]
}
)
] }) })
] })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: isItemTypeModalOpen,
onClose: () => setIsItemTypeModalOpen(false),
title: __("Add New Item Type", "yatra"),
description: __(
"Create a new category for organizing itinerary items",
"yatra"
),
size: "xl",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
ItemTypeFormContent,
{
onSuccess: (newItemType) => {
var _a2;
setIsItemTypeModalOpen(false);
const itemTypeId = ((_a2 = newItemType == null ? void 0 : newItemType.data) == null ? void 0 : _a2.id) || (newItemType == null ? void 0 : newItemType.id);
if (itemTypeId) {
onFieldChange("item_type_id", itemTypeId.toString());
}
onFieldChange("item_id", "");
onRefreshData == null ? void 0 : onRefreshData();
},
onCancel: () => setIsItemTypeModalOpen(false)
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: isItemModalOpen,
onClose: () => setIsItemModalOpen(false),
title: __("Add New Item", "yatra"),
description: __(
"Create a new item for the selected item type",
"yatra"
),
size: "xl",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
ItemFormContent,
{
selectedTypeId: entry.item_type_id,
onSuccess: (newItem) => {
var _a2;
setIsItemModalOpen(false);
const itemId = ((_a2 = newItem == null ? void 0 : newItem.data) == null ? void 0 : _a2.id) || (newItem == null ? void 0 : newItem.id);
if (itemId) {
onFieldChange("item_id", itemId.toString());
}
onRefreshData == null ? void 0 : onRefreshData();
},
onCancel: () => setIsItemModalOpen(false)
}
)
}
)
] });
return renderField(content);
};
const ItemTypeFormContent = ({
onSuccess,
onCancel
}) => {
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
icon: null,
color: "blue",
status: "publish"
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const handleNameChange = (value) => {
const slug = value.toLowerCase().replace(/[^\p{L}\p{N}-]+/gu, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
setFormData((prev) => ({
...prev,
name: value,
slug
}));
if (errors.name) {
setErrors((prev) => ({ ...prev, name: "" }));
}
};
const handleSubmit = async (e) => {
var _a;
e.preventDefault();
setIsSubmitting(true);
try {
const response = await fetch("/wp-json/yatra/v1/item-types", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": ((_a = window.wpApiSettings) == null ? void 0 : _a.nonce) || ""
},
body: JSON.stringify(formData)
});
if (response.ok) {
const newItemType = await response.json();
onSuccess(newItemType);
} else {
const errorData = await response.json();
setErrors(
errorData.errors || { general: "Failed to create item type" }
);
}
} catch (error) {
setErrors({ general: "An error occurred while creating the item type" });
} finally {
setIsSubmitting(false);
}
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: [
__("Type Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: formData.name,
onChange: (e) => handleNameChange(e.target.value),
placeholder: __("e.g., Activity, Meal, Accommodation", "yatra"),
className: errors.name ? "border-red-500" : "",
required: true
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: errors.name }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: __(
"Slug will be auto-generated. You can edit icon, color, and other options later in Item Types page",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: __("Description", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: formData.description,
onChange: (e) => setFormData({ ...formData, description: e.target.value }),
placeholder: __("Brief description of this item type...", "yatra"),
rows: 3,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:text-white resize-none"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: onCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? __("Creating...", "yatra") : __("Create Item Type", "yatra") })
] })
] });
};
const ItemFormContent = ({
selectedTypeId,
onSuccess,
onCancel
}) => {
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
type_id: "",
status: "publish"
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
reactExports.useEffect(() => {
setFormData((prev) => ({
...prev,
type_id: selectedTypeId || ""
}));
}, [selectedTypeId]);
if (!selectedTypeId) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-12 h-12 text-yellow-500 mx-auto" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: __("Item Type Required", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: __(
"Please select an Item Type first before creating an Item.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", onClick: onCancel, children: __("Close", "yatra") })
] });
}
const handleNameChange = (value) => {
const slug = value.toLowerCase().replace(/[^\p{L}\p{N}-]+/gu, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
setFormData((prev) => ({
...prev,
name: value,
slug
}));
if (errors.name) {
setErrors((prev) => ({ ...prev, name: "" }));
}
};
const handleSubmit = async (e) => {
var _a;
e.preventDefault();
setIsSubmitting(true);
try {
const response = await fetch("/wp-json/yatra/v1/items", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": ((_a = window.wpApiSettings) == null ? void 0 : _a.nonce) || ""
},
body: JSON.stringify(formData)
});
if (response.ok) {
const newItem = await response.json();
onSuccess(newItem);
} else {
const errorData = await response.json();
setErrors(errorData.errors || { general: "Failed to create item" });
}
} catch (error) {
setErrors({ general: "An error occurred while creating the item" });
} finally {
setIsSubmitting(false);
}
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: [
__("Item Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: formData.name,
onChange: (e) => handleNameChange(e.target.value),
placeholder: __("e.g., Hiking, Lunch, Hotel", "yatra"),
className: errors.name ? "border-red-500" : "",
required: true
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: errors.name }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: __(
"Slug will be auto-generated. You can edit additional details later in Items page",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: __("Description", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: formData.description,
onChange: (e) => setFormData({ ...formData, description: e.target.value }),
placeholder: __("Brief description of this item...", "yatra"),
rows: 3,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:text-white resize-none"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: onCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? __("Creating...", "yatra") : __("Create Item", "yatra") })
] })
] });
};
const useItineraryFormData = ({
entryId,
isEditMode,
isEditDayMode,
isAddDayMode,
tripIdParam,
dayParam,
formDataItemTypeId,
formDataTripId
}) => {
const { can } = usePermissions();
const { data: tripsData, isLoading: isLoadingTrips } = useQuery({
queryKey: ["trips-simple"],
queryFn: async () => {
var _a;
try {
const response = await apiClient.get("/trips", {
params: {
per_page: 100,
status: "all"
}
});
const trips = ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.data) || (response == null ? void 0 : response.data) || response || [];
return Array.isArray(trips) ? trips : [];
} catch (error) {
console.error("Failed to load trips:", error);
return [];
}
},
enabled: can("yatra_view_trips")
});
const { data: typesData } = useQuery({
queryKey: ["item-types-published"],
queryFn: async () => {
var _a;
try {
const response = await apiClient.get("/item-types", {
params: {
per_page: 100,
status: "publish"
}
});
const types = ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.data) || (response == null ? void 0 : response.data) || response || [];
return Array.isArray(types) ? types : [];
} catch (error) {
console.error("Failed to load item types:", error);
return [];
}
},
enabled: can("yatra_view_trips"),
staleTime: 5 * 60 * 1e3,
gcTime: 10 * 60 * 1e3
});
const itemsQueryKey = reactExports.useMemo(
() => isAddDayMode ? ["items-all-published"] : ["items-by-type", formDataItemTypeId],
[isAddDayMode, formDataItemTypeId]
);
const { data: itemsData } = useQuery({
queryKey: itemsQueryKey,
queryFn: async () => {
var _a, _b;
try {
if (isAddDayMode) {
const response2 = await apiClient.get("/items", {
params: {
per_page: 1e3,
status: "publish"
}
});
const items2 = ((_a = response2 == null ? void 0 : response2.data) == null ? void 0 : _a.data) || (response2 == null ? void 0 : response2.data) || response2 || [];
return Array.isArray(items2) ? items2 : [];
}
if (!formDataItemTypeId) return [];
const response = await apiClient.get("/items", {
params: {
per_page: 1e3,
type_id: formDataItemTypeId,
status: "publish"
}
});
const items = ((_b = response == null ? void 0 : response.data) == null ? void 0 : _b.data) || (response == null ? void 0 : response.data) || response || [];
return Array.isArray(items) ? items : [];
} catch (error) {
console.error("Failed to load items:", error);
return [];
}
},
enabled: can("yatra_view_trips"),
staleTime: 5 * 60 * 1e3,
gcTime: 10 * 60 * 1e3
});
const { data: entryData, isLoading: isLoadingEntryData } = useQuery({
queryKey: ["itinerary-entry", entryId, isEditDayMode ? "day" : "activity"],
queryFn: async () => {
var _a;
if (!entryId) return null;
try {
const mode = isEditDayMode ? "day" : "activity";
const endpoint = API_ENDPOINTS.ITINERARY_GET(entryId, mode);
const response = await apiClient.get(endpoint);
const result = ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.data) || (response == null ? void 0 : response.data) || response;
return result;
} catch (error) {
console.error("Failed to load itinerary entry:", error);
return null;
}
},
enabled: isEditMode && !!entryId && can("yatra_view_trips")
});
const entryDayId = reactExports.useMemo(() => entryData == null ? void 0 : entryData.day_id, [entryData == null ? void 0 : entryData.day_id]);
const isActivityEntry = reactExports.useMemo(() => {
return entryData && entryData.item_type_id !== null && entryData.item_type_id !== void 0 && entryData.item_type_id !== 0 && entryData.item_id !== null && entryData.item_id !== void 0 && entryData.item_id !== 0;
}, [entryData]);
const { data: dayEntryData } = useQuery({
queryKey: ["day-entry-by-day-id", entryDayId],
queryFn: async () => {
var _a, _b, _c;
if (!entryDayId || !isEditDayMode) return null;
try {
const response = await apiClient.get(
`/itinerary/day-entry-by-day-id/${entryDayId}`
);
const dayEntryId = ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.day_entry_id) || (response == null ? void 0 : response.day_entry_id) || ((_b = response == null ? void 0 : response.data) == null ? void 0 : _b.id) || (response == null ? void 0 : response.id) || null;
if (dayEntryId) {
const entryResponse = await apiClient.get(`/itinerary/${dayEntryId}`);
return ((_c = entryResponse == null ? void 0 : entryResponse.data) == null ? void 0 : _c.data) || (entryResponse == null ? void 0 : entryResponse.data) || entryResponse;
}
return null;
} catch (error) {
console.error("Failed to load day entry:", error);
return null;
}
},
enabled: isEditDayMode && !!entryDayId && isActivityEntry && can("yatra_view_trips")
});
const effectiveEntryData = reactExports.useMemo(() => {
if (isEditDayMode && isActivityEntry && dayEntryData) {
return dayEntryData;
}
return entryData;
}, [isEditDayMode, isActivityEntry, dayEntryData, entryData]);
const entryTripId = reactExports.useMemo(
() => effectiveEntryData == null ? void 0 : effectiveEntryData.trip_id,
[effectiveEntryData == null ? void 0 : effectiveEntryData.trip_id]
);
const entryDay = reactExports.useMemo(
() => effectiveEntryData == null ? void 0 : effectiveEntryData.day,
[effectiveEntryData == null ? void 0 : effectiveEntryData.day]
);
const { data: dayTripData } = useQuery({
queryKey: ["trip-for-day-edit", entryTripId, entryDay],
queryFn: async () => {
if (!entryTripId || !isEditDayMode) return null;
try {
const response = await apiClient.get(`/trips/${entryTripId}`);
return (response == null ? void 0 : response.data) || response;
} catch (error) {
console.error("Failed to load trip data for day edit:", error);
return null;
}
},
enabled: isEditDayMode && !!entryTripId && !!entryDay && can("yatra_view_trips")
});
const effectiveTripIdForQuery = tripIdParam || formDataTripId || "";
const tripDataQueryKey = reactExports.useMemo(
() => ["trip-for-day", effectiveTripIdForQuery, dayParam || ""],
[effectiveTripIdForQuery, dayParam]
);
const { data: tripDataForDay } = useQuery({
queryKey: tripDataQueryKey,
queryFn: async () => {
if (!effectiveTripIdForQuery) return null;
try {
const response = await apiClient.get(
`/trips/${effectiveTripIdForQuery}`
);
return (response == null ? void 0 : response.data) || response;
} catch (error) {
console.error("Failed to fetch trip data:", error);
return null;
}
},
enabled: !isEditDayMode && !!effectiveTripIdForQuery && can("yatra_view_trips")
});
const effectiveTripData = isEditDayMode ? dayTripData : tripDataForDay;
return {
tripsData: tripsData || [],
isLoadingTrips,
typesData: typesData || [],
itemsData: itemsData || [],
entryData: effectiveEntryData,
isLoadingEntry: isLoadingEntryData,
dayTripData,
tripDataForDay,
effectiveTripData,
entryTripId,
entryDay
};
};
const useItineraryFormValidation = () => {
const validateForm = (formData, isAddDayMode, activityForms) => {
const newErrors = {};
if (!formData.trip_id) {
newErrors.trip_id = __("Trip is required", "yatra");
}
if (!formData.day || parseInt(formData.day) < 1) {
newErrors.day = __("Day must be at least 1", "yatra");
}
if (isAddDayMode) {
activityForms.forEach((activityForm, index) => {
var _a;
if (!activityForm.data.item_type_id) {
newErrors[`activity_${activityForm.id}_item_type_id`] = __("Item type is required for Activity", "yatra") + ` ${index + 1}`;
}
if (!activityForm.data.item_id) {
newErrors[`activity_${activityForm.id}_item_id`] = __("Item is required for Activity", "yatra") + ` ${index + 1}`;
}
if (!((_a = activityForm.data.title) == null ? void 0 : _a.trim())) {
newErrors[`activity_${activityForm.id}_title`] = __("Title is required for Activity", "yatra") + ` ${index + 1}`;
}
});
return {
isValid: Object.keys(newErrors).length === 0,
errors: newErrors
};
}
if (!formData.item_type_id) {
newErrors.item_type_id = __("Item type is required", "yatra");
}
if (!formData.item_id) {
newErrors.item_id = __("Item is required", "yatra");
}
if (!formData.title.trim()) {
newErrors.title = __("Title is required", "yatra");
}
if (formData.time_type === "exact" && formData.start_time && formData.end_time) {
const [startHour, startMin] = formData.start_time.split(":").map(Number);
const [endHour, endMin] = formData.end_time.split(":").map(Number);
const startMinutes = startHour * 60 + startMin;
const endMinutes = endHour * 60 + endMin;
if (endMinutes <= startMinutes && endMinutes < startMinutes + 60) {
newErrors.end_time = __("End time must be after start time", "yatra");
}
}
return { isValid: Object.keys(newErrors).length === 0, errors: newErrors };
};
return { validateForm };
};
const useItineraryFormSave = ({
isAddDayMode,
isEditMode,
entryId,
activityForms,
formData,
calculateDuration,
entryData,
dayTripData,
tripsData
}) => {
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const saveMutation = useMutation({
mutationFn: async (data) => {
var _a, _b, _c, _d;
if (isAddDayMode) {
const tripId = parseInt(data.trip_id);
const day = parseInt(data.day);
const dayTitle = ((_a = data.day_title) == null ? void 0 : _a.trim()) || null;
if (isEditMode && entryId) {
const dayPayload = {
trip_id: tripId,
day,
day_title: dayTitle,
day_description: ((_b = data.day_description) == null ? void 0 : _b.trim()) || null,
title: dayTitle || `Day ${day}`,
// Backend requires title field
item_type_id: null,
item_id: null,
status: data.status || "draft"
};
let dayEntryId = null;
if (entryData && (entryData.item_type_id === null || entryData.item_type_id === void 0) && (entryData.item_id === null || entryData.item_id === void 0)) {
dayEntryId = entryData.id ? parseInt(entryData.id.toString()) : null;
}
if (!dayEntryId && entryData && entryData.day_id) {
try {
const dayEntryResponse = await apiClient.get(
`/itinerary/day-entry-by-day-id/${entryData.day_id}`
);
const dayEntryData = (dayEntryResponse == null ? void 0 : dayEntryResponse.data) || dayEntryResponse;
if (dayEntryData && dayEntryData.day_entry_id) {
dayEntryId = parseInt(dayEntryData.day_entry_id.toString());
}
} catch (error) {
}
}
if (!dayEntryId && entryData && entryData.day_id && dayTripData) {
const itineraryDays = dayTripData.itinerary_days || [];
for (const dayData of itineraryDays) {
if (dayData.id === entryData.day_id || dayData.day_id === entryData.day_id) {
if (dayData.entries) {
const dayEntry = dayData.entries.find(
(e) => (e.item_type_id === null || e.item_type_id === void 0) && (e.item_id === null || e.item_id === void 0)
);
if (dayEntry && dayEntry.id) {
dayEntryId = parseInt(dayEntry.id.toString());
break;
}
}
}
}
}
const originalDay = (entryData == null ? void 0 : entryData.day) ? parseInt(entryData.day.toString()) : null;
if (!dayEntryId && dayTripData && originalDay) {
const itineraryDays = dayTripData.itinerary_days || [];
const dayData = itineraryDays.find(
(d) => (d.day_number || d.day) === originalDay
);
if (dayData && dayData.entries) {
const dayEntry = dayData.entries.find(
(e) => (e.item_type_id === null || e.item_type_id === void 0) && (e.item_id === null || e.item_id === void 0)
);
if (dayEntry && dayEntry.id) {
dayEntryId = parseInt(dayEntry.id.toString());
}
}
}
if (!dayEntryId) {
throw new Error(
"Day entry not found. The day entry should exist when editing. Please refresh the page and try again, or contact support if the issue persists."
);
}
const endpoint = API_ENDPOINTS.ITINERARY_GET(dayEntryId, "day");
const dayResponse = await apiClient.put(endpoint, dayPayload);
const orderById = new Map(
activityForms.map((af, idx) => [af.id, idx])
);
const buildActivityPayload = (activityData, order) => {
const timeType2 = activityData.time_type || "exact";
const startTime2 = timeType2 === "exact" && activityData.start_time ? activityData.start_time : null;
const endTime2 = timeType2 === "exact" && activityData.end_time ? activityData.end_time : null;
return {
trip_id: tripId,
day,
day_title: dayTitle,
item_type_id: parseInt(activityData.item_type_id),
item_id: parseInt(activityData.item_id),
title: activityData.title.trim(),
description: (activityData.description || "").trim(),
location: (activityData.location || "").trim(),
// Latitude / longitude were saved by the form but never sent in the
// payload before — saving silently dropped them. Send as floats; let
// the repo coerce empty strings to null.
location_latitude: activityData.location_latitude !== void 0 && activityData.location_latitude !== "" ? parseFloat(activityData.location_latitude) : null,
location_longitude: activityData.location_longitude !== void 0 && activityData.location_longitude !== "" ? parseFloat(activityData.location_longitude) : null,
duration: (activityData.duration || "").trim() || (startTime2 && endTime2 ? calculateDuration(startTime2, endTime2, timeType2) : null),
start_time: startTime2,
end_time: endTime2,
time_type: timeType2,
cost: activityData.cost ? parseFloat(activityData.cost) : null,
cost_per_person: activityData.cost_per_person === true,
notes: (activityData.notes || "").trim(),
included_items: Array.isArray(activityData.included_items) ? activityData.included_items : [],
excluded_items: Array.isArray(activityData.excluded_items) ? activityData.excluded_items : [],
gallery: activityData.gallery || [],
video_url: activityData.video_url || "",
status: activityData.status || "draft",
order: Math.max(0, order)
};
};
const validatedRows = activityForms.map((af, index) => {
var _a2;
const activityData = af.data;
if (!activityData.item_type_id || !activityData.item_id || !((_a2 = activityData.title) == null ? void 0 : _a2.trim())) {
throw new Error(
`Activity ${index + 1} is missing required fields (item type, item, or title)`
);
}
const order = orderById.get(af.id) ?? index;
const payload2 = buildActivityPayload(activityData, order);
if (af.entryId) {
payload2.id = typeof af.entryId === "string" ? parseInt(af.entryId, 10) : af.entryId;
}
return payload2;
});
const bulkEndpoint = API_ENDPOINTS.ITINERARY_DAY_ACTIVITIES_BULK(dayEntryId);
try {
const bulkResponse = await apiClient.put(bulkEndpoint, {
trip_id: tripId,
activities: validatedRows
});
const bulkData = (bulkResponse == null ? void 0 : bulkResponse.data) || bulkResponse || {};
if (bulkData.failed && bulkData.failed > 0) {
const firstError = (bulkData.results || []).find(
(r2) => r2 && r2.ok === false
);
throw new Error(
`${bulkData.failed} activit${bulkData.failed === 1 ? "y" : "ies"} failed to save${(firstError == null ? void 0 : firstError.error) ? `: ${firstError.error}` : ""}`
);
}
} catch (error) {
throw new Error(
`Failed to save activities: ${(error == null ? void 0 : error.message) || "Unknown error"}`
);
}
return dayResponse.data || dayResponse;
}
const validActivities = activityForms.filter((af) => {
var _a2;
const activityData = af.data;
return activityData.item_type_id && activityData.item_id && ((_a2 = activityData.title) == null ? void 0 : _a2.trim());
});
if (validActivities.length === 0) {
const payload2 = {
trip_id: tripId,
day,
day_title: dayTitle,
day_description: ((_c = data.day_description) == null ? void 0 : _c.trim()) || null,
item_type_id: null,
item_id: null,
title: dayTitle || `Day ${day}`,
description: "",
location: null,
duration: null,
start_time: null,
end_time: null,
time_type: "exact",
cost: null,
cost_per_person: false,
notes: null,
included_items: [],
excluded_items: [],
status: data.status || "draft"
};
const response = await apiClient.post("/itinerary", payload2);
return response.data || response;
}
const responses = [];
for (let index = 0; index < validActivities.length; index++) {
const activityForm = validActivities[index];
const activityData = activityForm.data;
const timeType2 = activityData.time_type || "exact";
const startTime2 = timeType2 === "exact" && activityData.start_time ? activityData.start_time : null;
const endTime2 = timeType2 === "exact" && activityData.end_time ? activityData.end_time : null;
const payload2 = {
trip_id: tripId,
day,
day_title: dayTitle,
item_type_id: parseInt(activityData.item_type_id),
item_id: parseInt(activityData.item_id),
title: activityData.title.trim(),
description: (activityData.description || "").trim(),
location: (activityData.location || "").trim(),
location_latitude: activityData.location_latitude ? parseFloat(activityData.location_latitude) : null,
location_longitude: activityData.location_longitude ? parseFloat(activityData.location_longitude) : null,
duration: (activityData.duration || "").trim() || (startTime2 && endTime2 ? calculateDuration(startTime2, endTime2, timeType2) : null),
start_time: startTime2,
end_time: endTime2,
time_type: timeType2,
cost: activityData.cost ? parseFloat(activityData.cost) : null,
cost_per_person: activityData.cost_per_person === true,
notes: (activityData.notes || "").trim(),
included_items: Array.isArray(activityData.included_items) ? activityData.included_items : [],
excluded_items: Array.isArray(activityData.excluded_items) ? activityData.excluded_items : [],
gallery: activityData.gallery || [],
video_url: activityData.video_url || "",
status: activityData.status || "draft"
};
try {
const response = await apiClient.post("/itinerary", payload2);
responses.push(response.data || response);
} catch (error) {
throw new Error(
`Failed to save activity ${index + 1}: ${(error == null ? void 0 : error.message) || "Unknown error"}`
);
}
}
return responses[0] || responses;
}
const timeType = data.time_type || "exact";
const startTime = timeType === "exact" && data.start_time ? data.start_time : null;
const endTime = timeType === "exact" && data.end_time ? data.end_time : null;
const payload = {
trip_id: parseInt(data.trip_id),
day: parseInt(data.day),
day_title: ((_d = data.day_title) == null ? void 0 : _d.trim()) || null,
item_type_id: parseInt(data.item_type_id),
item_id: parseInt(data.item_id),
title: data.title.trim(),
description: data.description.trim(),
location: data.location.trim(),
location_latitude: data.location_latitude ? parseFloat(data.location_latitude) : null,
location_longitude: data.location_longitude ? parseFloat(data.location_longitude) : null,
duration: data.duration.trim() || (startTime && endTime ? calculateDuration(startTime, endTime, timeType) : null),
start_time: startTime,
end_time: endTime,
time_type: timeType,
cost: data.cost ? parseFloat(data.cost) : null,
cost_per_person: data.cost_per_person,
notes: data.notes.trim(),
included_items: data.included_items,
excluded_items: data.excluded_items,
gallery: data.gallery || [],
video_url: data.video_url || "",
status: data.status || "draft"
// Ensure status is always included
};
if (isEditMode && entryId) {
const updatePayload = {
...payload,
status: data.status || "draft"
// Explicitly include status for updates
};
const endpoint = API_ENDPOINTS.ITINERARY_GET(entryId, "activity");
const response = await apiClient.put(endpoint, updatePayload);
return response.data || response;
} else {
const response = await apiClient.post("/itinerary", payload);
return response.data || response;
}
},
onSuccess: () => {
if (isAddDayMode) {
const validActivitiesCount = activityForms.filter((af) => {
var _a;
const activityData = af.data;
return activityData.item_type_id && activityData.item_id && ((_a = activityData.title) == null ? void 0 : _a.trim());
}).length;
const selectedTrip = tripsData == null ? void 0 : tripsData.find(
(t) => t.id.toString() === formData.trip_id
);
const isSingleDay = (selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day";
if (isEditMode) {
if (validActivitiesCount === 0) {
const message2 = isSingleDay ? __("Entry updated successfully!", "yatra") : __("Day updated successfully!", "yatra");
showToast(message2, "success");
} else {
const message2 = isSingleDay ? __(
"Entry and activities updated successfully!",
"yatra"
).replace(
"activities",
`${validActivitiesCount} ${validActivitiesCount === 1 ? "activity" : "activities"}`
) : __("Day and activities updated successfully!", "yatra").replace(
"activities",
`${validActivitiesCount} ${validActivitiesCount === 1 ? "activity" : "activities"}`
);
showToast(message2, "success");
}
} else {
if (validActivitiesCount === 0) {
const message2 = isSingleDay ? __("Entry created successfully!", "yatra") : __("Day created successfully!", "yatra");
showToast(message2, "success");
} else {
const message2 = isSingleDay ? __(
"Entry and activities created successfully!",
"yatra"
).replace(
"activities",
`${validActivitiesCount} ${validActivitiesCount === 1 ? "activity" : "activities"}`
) : __("Day and activities created successfully!", "yatra").replace(
"activities",
`${validActivitiesCount} ${validActivitiesCount === 1 ? "activity" : "activities"}`
);
showToast(message2, "success");
}
}
queryClient2.invalidateQueries({ queryKey: ["itinerary"] });
queryClient2.invalidateQueries({ queryKey: ["itinerary-entries"] });
queryClient2.invalidateQueries({ queryKey: ["trips"] });
queryClient2.invalidateQueries({ queryKey: ["trips-simple"] });
if (formData.trip_id) {
queryClient2.invalidateQueries({
queryKey: ["trips", parseInt(formData.trip_id)]
});
queryClient2.invalidateQueries({
queryKey: ["trip", parseInt(formData.trip_id)]
});
}
if (!isEditMode) {
const day = parseInt(formData.day);
const tripId = formData.trip_id;
setTimeout(() => {
var _a;
const params = new URLSearchParams({
trip_id: tripId,
day: day.toString()
});
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=itinerary&tab=itinerary&${params.toString()}`;
}, 1500);
}
return;
}
showToast(
isEditMode ? __("Itinerary entry updated successfully!", "yatra") : __("Itinerary entry created successfully!", "yatra"),
"success"
);
queryClient2.invalidateQueries({ queryKey: ["itinerary"] });
queryClient2.invalidateQueries({ queryKey: ["itinerary-entries"] });
queryClient2.invalidateQueries({ queryKey: ["trips"] });
queryClient2.invalidateQueries({ queryKey: ["trips-simple"] });
if (formData.trip_id) {
queryClient2.invalidateQueries({
queryKey: ["trips", parseInt(formData.trip_id)]
});
queryClient2.invalidateQueries({
queryKey: ["trip", parseInt(formData.trip_id)]
});
queryClient2.refetchQueries({
queryKey: ["trips", parseInt(formData.trip_id)]
});
}
queryClient2.refetchQueries({ queryKey: ["trips"] });
queryClient2.refetchQueries({ queryKey: ["trips-simple"] });
if (!isEditMode) {
setTimeout(() => {
var _a;
const tripIdParam = formData.trip_id ? `&trip_id=${formData.trip_id}` : "";
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=itinerary&tab=itinerary${tripIdParam}`;
}, 1e3);
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving", "yatra");
showToast(errorMessage, "error");
},
onSettled: () => {
}
});
return { saveMutation };
};
const DayFormFields = ({
formData,
errors,
tripsData,
isLoadingTrips,
isEditMode = false,
isSingleDayTrip = false,
onFieldChange
}) => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Day Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "trip_id",
className: "flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Trip", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" }),
isEditMode && /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
title: __(
"This field cannot be changed in edit mode",
"yatra"
),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "w-4 h-4 text-gray-400" })
}
)
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: isEditMode ? __(
"The trip cannot be changed when editing a day.",
"yatra"
) : __("Select the trip this day belongs to.", "yatra"),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
SearchableSelect,
{
value: formData.trip_id,
onChange: (value) => onFieldChange("trip_id", value),
options: [
{ value: "", label: __("-- Select a Trip --", "yatra") },
...(Array.isArray(tripsData) ? tripsData : []).map(
(trip) => ({
value: trip.id.toString(),
label: `${trip.title || trip.name || ""}${trip.trip_type === "single_day" ? " (Single Day)" : trip.trip_type === "multi_day" ? " (Multi-Day)" : ""}`
})
) || []
],
placeholder: __("Search or select a trip...", "yatra"),
searchPlaceholder: __("Search by trip name or ID...", "yatra"),
className: errors.trip_id ? "border-red-500" : "",
error: !!errors.trip_id,
required: true,
disabled: isLoadingTrips || isEditMode
}
),
isEditMode && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "w-4 h-4 text-gray-400" }) })
] }),
errors.trip_id && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.trip_id
] })
] }),
!isSingleDayTrip && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "day",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Day Number", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("Which day number is this in the itinerary?", "yatra"),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "day",
type: "number",
min: "1",
value: formData.day,
onChange: (e) => onFieldChange("day", e.target.value),
className: errors.day ? "border-red-500" : "",
required: true
}
),
errors.day && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.day
] })
] }),
isSingleDayTrip && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "day",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Entry Number", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Entry number for ordering entries in this single-day trip.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "day",
type: "number",
min: "1",
value: formData.day,
onChange: (e) => onFieldChange("day", e.target.value),
className: errors.day ? "border-red-500" : "",
required: true
}
),
errors.day && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.day
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "day_title",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Day Title (Optional)", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
'A descriptive title for this day (e.g., "Arrival & Welcome to Paradise").',
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "day_title",
type: "text",
value: formData.day_title,
onChange: (e) => onFieldChange("day_title", e.target.value),
placeholder: __("e.g., Arrival & Welcome to Paradise", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "day_description",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Day Description (Optional)", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"A detailed description of what happens on this day, activities, highlights, etc.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "day_description",
value: formData.day_description,
onChange: (e) => onFieldChange("day_description", e.target.value),
placeholder: __(
"Describe the activities, highlights, and details for this day...",
"yatra"
),
rows: 4,
className: `w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${errors.day_description ? "border-red-500" : ""}`
}
),
errors.day_description && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.day_description
] })
] })
] })
] });
};
const ActivityAccordion = ({
activityForms,
errors,
itemTypes,
items,
activityIncludedItems,
activityExcludedItems,
onToggleExpand,
onRemoveActivity,
onAddActivity,
onReorderActivities,
onFieldChange,
onIncludedItemChange,
onExcludedItemChange,
onAddIncludedItem,
onAddExcludedItem,
onRemoveIncludedItem,
onRemoveExcludedItem,
calculateDuration,
onRefreshData
}) => {
const reorderEnabled = typeof onReorderActivities === "function";
const [draggingIndex, setDraggingIndex] = reactExports.useState(null);
const [dragOverIndex, setDragOverIndex] = reactExports.useState(null);
const handleDragStart = (index) => (e) => {
if (!reorderEnabled) return;
setDraggingIndex(index);
e.dataTransfer.effectAllowed = "move";
try {
e.dataTransfer.setData("text/plain", String(index));
} catch {
}
};
const handleDragOver = (index) => (e) => {
if (!reorderEnabled || draggingIndex === null) return;
e.preventDefault();
e.dataTransfer.dropEffect = "move";
if (dragOverIndex !== index) {
setDragOverIndex(index);
}
};
const handleDrop = (index) => (e) => {
if (!reorderEnabled || draggingIndex === null) return;
e.preventDefault();
if (draggingIndex !== index) {
onReorderActivities == null ? void 0 : onReorderActivities(draggingIndex, index);
}
setDraggingIndex(null);
setDragOverIndex(null);
};
const handleDragEnd = () => {
setDraggingIndex(null);
setDragOverIndex(null);
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
activityForms.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: activityForms.map((activityForm, index) => {
const isDragging = draggingIndex === index;
const isDropTarget = dragOverIndex === index && draggingIndex !== index;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
Card,
{
className: `mt-3 transition-shadow ${isDragging ? "opacity-60" : ""} ${isDropTarget ? "ring-2 ring-blue-400 dark:ring-blue-500" : ""}`,
draggable: reorderEnabled,
onDragStart: handleDragStart(index),
onDragOver: handleDragOver(index),
onDrop: handleDrop(index),
onDragEnd: handleDragEnd,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "text-base flex items-center gap-2 min-w-0 flex-1", children: [
reorderEnabled && // The drag-handle shows the row is draggable AND gives
// keyboard / mouse users an obvious target. The whole
// card is the drop zone; this is just the affordance.
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "cursor-grab active:cursor-grabbing text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 shrink-0",
title: __("Drag to reorder this activity", "yatra"),
"aria-label": __(
"Drag to reorder this activity",
"yatra"
),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(GripVertical, { className: "w-4 h-4" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "truncate",
title: (activityForm.data.title || "").trim(),
children: (activityForm.data.title || "").trim() || `${__("Activity", "yatra")} #${index + 1}`
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "ghost",
size: "icon",
onClick: () => onToggleExpand(activityForm.id),
className: "h-8 w-8",
children: activityForm.isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "ghost",
size: "icon",
onClick: () => onRemoveActivity(activityForm.id),
className: "h-8 w-8 text-red-600 hover:text-red-700 dark:text-red-400",
title: __("Remove Activity", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" })
}
)
] })
] }) }),
activityForm.isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
ItineraryEntryFields,
{
entry: {
item_type_id: activityForm.data.item_type_id || "",
item_id: activityForm.data.item_id || "",
title: activityForm.data.title || "",
description: activityForm.data.description || "",
location: activityForm.data.location || "",
location_latitude: activityForm.data.location_latitude || "",
location_longitude: activityForm.data.location_longitude || "",
duration: activityForm.data.duration || "",
start_time: activityForm.data.start_time || "",
end_time: activityForm.data.end_time || "",
time_type: activityForm.data.time_type || "exact",
cost: activityForm.data.cost || "",
cost_per_person: activityForm.data.cost_per_person !== false,
notes: activityForm.data.notes || "",
included_items: activityForm.data.included_items || [],
excluded_items: activityForm.data.excluded_items || []
},
errors,
itemTypes,
items,
newIncludedItem: activityIncludedItems[activityForm.id] || "",
newExcludedItem: activityExcludedItems[activityForm.id] || "",
onFieldChange: (field, value) => onFieldChange(activityForm.id, field, value),
onIncludedItemChange: (value) => onIncludedItemChange(activityForm.id, value),
onExcludedItemChange: (value) => onExcludedItemChange(activityForm.id, value),
onAddIncludedItem: () => onAddIncludedItem(activityForm.id),
onAddExcludedItem: () => onAddExcludedItem(activityForm.id),
onRemoveIncludedItem: (idx) => onRemoveIncludedItem(activityForm.id, idx),
onRemoveExcludedItem: (idx) => onRemoveExcludedItem(activityForm.id, idx),
calculateDuration,
size: "default",
showCardWrapper: false,
onRefreshData
}
) })
]
},
activityForm.id
);
}) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
onClick: onAddActivity,
className: "w-full flex items-center justify-center gap-2 border-dashed",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add Activity", "yatra")
]
}
) })
] });
};
const DayConflictDialog = ({
isOpen,
conflictDayNumber,
suggestedDayNumber,
existingDayNumbers,
isUpdateMode = false,
onClose,
onConfirm
}) => {
let message2 = "";
let title2 = "";
let confirmText = "";
if (isUpdateMode && conflictDayNumber !== null) {
title2 = __("Replace Existing Day?", "yatra");
message2 = __("Day", "yatra") + ` ${conflictDayNumber} ` + __(
"already exists for this trip. Do you want to replace it with the current day's data?",
"yatra"
);
confirmText = __("Yes, Replace Day", "yatra") + ` ${conflictDayNumber}`;
} else if (!isUpdateMode && conflictDayNumber !== null && suggestedDayNumber !== null && existingDayNumbers.length > 0) {
title2 = __("Day Number Already Exists", "yatra");
const existingDaysList = existingDayNumbers.join(", ");
message2 = __("Day", "yatra") + ` ${existingDaysList} ` + __("already exists for this trip. Do you want to use day", "yatra") + ` ${suggestedDayNumber} ` + __("instead?", "yatra");
confirmText = __("Use Day", "yatra") + ` ${suggestedDayNumber}`;
} else {
title2 = __("Day Number Already Exists", "yatra");
message2 = __("This day number already exists.", "yatra");
confirmText = __("OK", "yatra");
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen,
onClose,
onConfirm,
title: title2,
message: message2,
confirmText,
cancelText: __("Cancel", "yatra"),
variant: "warning"
}
);
};
const ItineraryFormSkeleton = () => {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "animate-pulse", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-6" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/3" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded w-1/2" })
] }) }) })
] })
] })
] });
};
const ItineraryForm = () => {
var _a;
const queryClient2 = useQueryClient();
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const entryId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const tripIdParam = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("trip_id");
}, []);
const dayParam = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("day");
}, []);
const typeIdParam = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("type_id");
}, []);
const itemParam = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("item");
}, []);
const modeParam = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("mode") || "activity";
}, []);
const isEditMode = action === "edit" && entryId !== null;
const isAddDayMode = modeParam === "day";
const isEditDayMode = isEditMode && modeParam === "day";
const [formData, setFormData] = reactExports.useState({
trip_id: "",
day: "",
day_title: "",
day_description: "",
item_type_id: "",
item_id: "",
title: "",
description: "",
location: "",
location_latitude: "",
location_longitude: "",
duration: "",
start_time: "",
end_time: "",
time_type: "exact",
cost: "",
cost_per_person: true,
notes: "",
included_items: [],
excluded_items: [],
gallery: [],
video_url: "",
status: "publish"
});
const [errors, setErrors] = reactExports.useState({});
const [newIncludedItem, setNewIncludedItem] = reactExports.useState("");
const [newExcludedItem, setNewExcludedItem] = reactExports.useState("");
const [activityForms, setActivityForms] = reactExports.useState([]);
const [activityIncludedItems, setActivityIncludedItems] = reactExports.useState({});
const [activityExcludedItems, setActivityExcludedItems] = reactExports.useState({});
const [showDayConflictDialog, setShowDayConflictDialog] = reactExports.useState(false);
const [conflictDayNumber, setConflictDayNumber] = reactExports.useState(
null
);
const [suggestedDayNumber, setSuggestedDayNumber] = reactExports.useState(
null
);
const [originalDayNumber, setOriginalDayNumber] = reactExports.useState(
null
);
const dayManuallyEditedRef = reactExports.useRef(false);
const lastTripIdRef = reactExports.useRef(null);
const loadedDayActivitiesRef = reactExports.useRef(null);
const initializedEntryIdRef = reactExports.useRef(null);
const {
tripsData,
isLoadingTrips,
typesData,
itemsData,
entryData,
isLoadingEntry,
dayTripData,
effectiveTripData,
entryTripId,
entryDay
} = useItineraryFormData({
entryId,
isEditMode,
isEditDayMode,
isAddDayMode,
tripIdParam,
dayParam,
formDataItemTypeId: formData.item_type_id || "",
formDataTripId: formData.trip_id
});
const refreshData = () => {
queryClient2.invalidateQueries({ queryKey: ["item-types-published"] });
queryClient2.invalidateQueries({ queryKey: ["items-all-published"] });
queryClient2.invalidateQueries({ queryKey: ["items-by-type"] });
};
reactExports.useEffect(() => {
if (itemParam && itemsData && itemsData.length > 0) {
const item = itemsData.find(
(i) => i.name.toLowerCase() === itemParam.toLowerCase()
);
if (item) {
setFormData((prev) => ({ ...prev, item_id: item.id.toString() }));
}
}
}, [itemParam, itemsData]);
const { validateForm } = useItineraryFormValidation();
const calculateDuration = (startTime, endTime, timeType) => {
const st = startTime || formData.start_time;
const et = endTime || formData.end_time;
const tt = timeType || formData.time_type;
if (st && et && tt === "exact") {
const [startHour, startMin] = st.split(":").map(Number);
const [endHour, endMin] = et.split(":").map(Number);
const startMinutes = startHour * 60 + startMin;
const endMinutes = endHour * 60 + endMin;
let diffMinutes = endMinutes - startMinutes;
if (diffMinutes < 0) diffMinutes += 24 * 60;
const hours = Math.floor(diffMinutes / 60);
const minutes = diffMinutes % 60;
if (hours > 0 && minutes > 0) {
return `${hours} hour${hours > 1 ? "s" : ""} ${minutes} minute${minutes > 1 ? "s" : ""}`;
} else if (hours > 0) {
return `${hours} hour${hours > 1 ? "s" : ""}`;
} else {
return `${minutes} minute${minutes > 1 ? "s" : ""}`;
}
}
return "";
};
const { saveMutation } = useItineraryFormSave({
isAddDayMode,
isEditMode,
entryId,
activityForms,
formData,
calculateDuration,
entryData,
dayTripData,
tripsData
});
reactExports.useEffect(() => {
if (entryId !== initializedEntryIdRef.current) {
initializedEntryIdRef.current = null;
loadedDayActivitiesRef.current = null;
isLoadingInitialDataRef.current = false;
}
}, [entryId]);
reactExports.useEffect(() => {
if (tripIdParam) {
setFormData((prev) => ({ ...prev, trip_id: tripIdParam }));
lastTripIdRef.current = tripIdParam;
}
if (dayParam) {
setFormData((prev) => ({ ...prev, day: dayParam }));
dayManuallyEditedRef.current = true;
}
if (typeIdParam) {
setFormData((prev) => ({ ...prev, item_type_id: typeIdParam }));
}
}, [tripIdParam, dayParam, typeIdParam]);
reactExports.useEffect(() => {
if (itemParam && itemsData && itemsData.length > 0) {
const item = itemsData.find(
(i) => i.name.toLowerCase() === itemParam.toLowerCase()
);
if (item) {
setFormData((prev) => ({ ...prev, item_id: item.id.toString() }));
}
}
}, [itemParam, itemsData]);
reactExports.useEffect(() => {
var _a2, _b, _c, _d;
if (!entryData || !isEditMode || isLoadingInitialDataRef.current) return;
if (!entryData || !entryData.id) {
return;
}
if (isEditDayMode) {
const isActivityEntry = entryData.item_type_id !== null && entryData.item_type_id !== void 0 && entryData.item_type_id !== 0 && entryData.item_id !== null && entryData.item_id !== void 0 && entryData.item_id !== 0;
if (isActivityEntry) {
if (initializedEntryIdRef.current === entryData.id) return;
return;
}
}
if (initializedEntryIdRef.current === entryData.id) return;
isLoadingInitialDataRef.current = true;
initializedEntryIdRef.current = entryData.id;
if (!isEditDayMode) {
setFormData({
trip_id: ((_a2 = entryData.trip_id) == null ? void 0 : _a2.toString()) || "",
day: ((_b = entryData.day) == null ? void 0 : _b.toString()) || "",
day_title: entryData.day_title || "",
day_description: entryData.day_description || "",
item_type_id: ((_c = entryData.item_type_id) == null ? void 0 : _c.toString()) || "",
item_id: ((_d = entryData.item_id) == null ? void 0 : _d.toString()) || "",
title: entryData.title || "",
description: entryData.description || "",
location: entryData.location || "",
location_latitude: entryData.location_latitude || "",
location_longitude: entryData.location_longitude || "",
duration: entryData.duration || "",
// Don't fake an "08:00" default for entries that were saved without a
// time — empty inputs let the user see "no time set" via the picker
// placeholder, and prevents the next save from baking the fake default
// back into the row.
start_time: entryData.start_time || "",
end_time: entryData.end_time || "",
time_type: entryData.time_type || "exact",
cost: entryData.cost || "",
cost_per_person: entryData.cost_per_person !== false,
notes: entryData.notes || "",
included_items: entryData.included_items || [],
excluded_items: entryData.excluded_items || [],
gallery: entryData.gallery || [],
video_url: entryData.video_url || "",
status: entryData.status || "publish"
});
} else if (isEditDayMode) {
const dayNumber = entryData.day ? parseInt(entryData.day.toString()) : null;
setOriginalDayNumber(dayNumber);
setFormData((prev) => {
var _a3, _b2;
return {
...prev,
trip_id: ((_a3 = entryData.trip_id) == null ? void 0 : _a3.toString()) || tripIdParam || prev.trip_id,
day: ((_b2 = entryData.day) == null ? void 0 : _b2.toString()) || dayParam || prev.day,
day_title: entryData.day_title || prev.day_title,
day_description: entryData.day_description || prev.day_description,
gallery: entryData.gallery || prev.gallery,
video_url: entryData.video_url || prev.video_url,
status: entryData.status || prev.status
};
});
}
setTimeout(() => {
isLoadingInitialDataRef.current = false;
}, 100);
}, [
entryId,
isEditMode,
isEditDayMode,
entryData,
tripIdParam,
dayParam,
dayTripData
]);
reactExports.useEffect(() => {
if (!isEditDayMode) return;
if (!entryTripId || !entryDay) return;
if (!dayTripData) return;
const dayKey = `${entryTripId}-${entryDay}`;
if (loadedDayActivitiesRef.current === dayKey) return;
loadedDayActivitiesRef.current = dayKey;
const dayNumber = typeof entryDay === "string" ? parseInt(entryDay) : entryDay;
if (isNaN(dayNumber)) return;
const itineraryDays = dayTripData.itinerary_days || [];
const dayData = itineraryDays.find(
(d) => (d.day_number || d.day) === dayNumber
);
if (!dayData || !dayData.entries) return;
const activities = dayData.entries.filter((e) => e.item_type_id && e.item_id).slice().sort((a2, b) => {
const ao = Number(a2.order ?? 0);
const bo = Number(b.order ?? 0);
if (ao !== bo) return ao - bo;
return Number(a2.id ?? 0) - Number(b.id ?? 0);
}).map((entry, index) => {
var _a2, _b;
return {
id: `activity-${entry.id || index}`,
entryId: entry.id ? parseInt(entry.id.toString()) : null,
// Store actual entry ID for updates
data: {
item_type_id: ((_a2 = entry.item_type_id) == null ? void 0 : _a2.toString()) || "",
item_id: ((_b = entry.item_id) == null ? void 0 : _b.toString()) || "",
title: entry.title || "",
description: entry.description || "",
location: entry.location || "",
// The form has lat/lng inputs and the DB column accepts them — without
// mapping here, opening an existing activity in edit mode would show
// empty coordinate fields and silently overwrite saved values.
location_latitude: entry.location_latitude != null ? entry.location_latitude.toString() : "",
location_longitude: entry.location_longitude != null ? entry.location_longitude.toString() : "",
duration: entry.duration || "",
start_time: entry.start_time || "",
end_time: entry.end_time || "",
time_type: entry.time_type || "exact",
cost: entry.cost || "",
cost_per_person: entry.cost_per_person !== false,
notes: entry.notes || "",
included_items: entry.included_items || [],
excluded_items: entry.excluded_items || [],
// Gallery + video_url are saved by buildActivityPayload but were never
// re-loaded — admin would lose them after a single re-save.
gallery: Array.isArray(entry.gallery) ? entry.gallery : [],
video_url: entry.video_url || "",
status: entry.status || "publish"
},
isExpanded: index === 0
};
});
setActivityForms(activities);
const includedItems = {};
const excludedItems = {};
activities.forEach((activity2) => {
includedItems[activity2.id] = "";
excludedItems[activity2.id] = "";
});
setActivityIncludedItems(includedItems);
setActivityExcludedItems(excludedItems);
}, [isEditDayMode, entryTripId, entryDay, dayTripData]);
const isLoadingInitialDataRef = reactExports.useRef(false);
reactExports.useEffect(() => {
if (isLoadingInitialDataRef.current) return;
if (formData.item_type_id && formData.item_id) ;
}, [formData.item_type_id]);
const dayTitle = reactExports.useMemo(() => {
if (!effectiveTripData || !dayParam) return null;
const itineraryDays = effectiveTripData.itinerary_days || [];
const dayNumber = parseInt(dayParam);
const day = itineraryDays.find(
(d) => (d.day_number || d.day) === dayNumber
);
return (day == null ? void 0 : day.title) || (day == null ? void 0 : day.day_title) || null;
}, [effectiveTripData, dayParam]);
const selectedTripType = reactExports.useMemo(() => {
if (!formData.trip_id) return null;
const trip = tripsData == null ? void 0 : tripsData.find(
(t) => t.id.toString() === formData.trip_id
);
return (trip == null ? void 0 : trip.trip_type) || null;
}, [formData.trip_id, tripsData]);
const isSingleDayTrip = selectedTripType === "single_day";
const submitButtonLabel = reactExports.useMemo(() => {
if (isEditMode) {
if (isAddDayMode) {
return isSingleDayTrip ? __("Update Entry", "yatra") : __("Update Day", "yatra");
}
return __("Update Itinerary Activity", "yatra");
}
if (isAddDayMode) {
return isSingleDayTrip ? __("Create Entry", "yatra") : __("Create Day", "yatra");
}
return __("Create Itinerary Activity", "yatra");
}, [isEditMode, isAddDayMode, isSingleDayTrip]);
const existingDayNumbers = reactExports.useMemo(() => {
if (!effectiveTripData || !isAddDayMode) return [];
const itineraryDays = effectiveTripData.itinerary_days || [];
const days = itineraryDays.map((d) => d.day_number || d.day).filter(
(day) => day !== null && day !== void 0 && !isNaN(Number(day))
).map((day) => Number(day)).sort((a2, b) => a2 - b);
return days;
}, [effectiveTripData, isAddDayMode]);
const nextAvailableDayNumber = reactExports.useMemo(() => {
if (existingDayNumbers.length === 0) return 1;
return Math.max(...existingDayNumbers) + 1;
}, [existingDayNumbers]);
const currentTripId = formData.trip_id || "";
const tripIdChanged = lastTripIdRef.current !== currentTripId;
reactExports.useEffect(() => {
if (!isAddDayMode || isEditMode) return;
if (currentTripId) {
if (tripIdChanged) {
lastTripIdRef.current = currentTripId;
dayManuallyEditedRef.current = false;
}
if (isSingleDayTrip) {
if (!formData.day || formData.day === "") {
const currentDay = parseInt(formData.day) || 0;
const shouldUpdate = !formData.day || formData.day === "" || existingDayNumbers.includes(currentDay);
if (shouldUpdate && nextAvailableDayNumber) {
setFormData((prev) => ({
...prev,
day: nextAvailableDayNumber.toString()
}));
} else if (!formData.day || formData.day === "") {
setFormData((prev) => ({ ...prev, day: "1" }));
}
}
}
if (effectiveTripData !== void 0 && effectiveTripData !== null) {
if (!dayManuallyEditedRef.current) {
const currentDay = parseInt(formData.day) || 0;
const shouldUpdate = !formData.day || formData.day === "" || existingDayNumbers.includes(currentDay);
if (shouldUpdate && nextAvailableDayNumber) {
setFormData((prev) => ({
...prev,
day: nextAvailableDayNumber.toString()
}));
}
}
}
} else {
setFormData((prev) => ({ ...prev, day: "" }));
dayManuallyEditedRef.current = false;
lastTripIdRef.current = null;
}
}, [
isAddDayMode,
isEditMode,
currentTripId,
effectiveTripData,
nextAvailableDayNumber,
existingDayNumbers.length,
formData.day,
isSingleDayTrip
]);
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
if (field === "day" && isAddDayMode) {
dayManuallyEditedRef.current = true;
}
if (field === "trip_id" && isAddDayMode) {
setFormData((prev) => ({ ...prev, day: "" }));
dayManuallyEditedRef.current = false;
lastTripIdRef.current = value;
}
};
const handleAddIncludedItem = () => {
if (newIncludedItem.trim()) {
setFormData((prev) => ({
...prev,
included_items: [...prev.included_items, newIncludedItem.trim()]
}));
setNewIncludedItem("");
}
};
const handleRemoveIncludedItem = (index) => {
setFormData((prev) => ({
...prev,
included_items: prev.included_items.filter((_, i) => i !== index)
}));
};
const handleAddExcludedItem = () => {
if (newExcludedItem.trim()) {
setFormData((prev) => ({
...prev,
excluded_items: [...prev.excluded_items, newExcludedItem.trim()]
}));
setNewExcludedItem("");
}
};
const handleRemoveExcludedItem = (index) => {
setFormData((prev) => ({
...prev,
excluded_items: prev.excluded_items.filter((_, i) => i !== index)
}));
};
const handleSubmit = async (e) => {
e.preventDefault();
if (isAddDayMode && formData.trip_id && formData.day) {
const dayNumber = parseInt(formData.day);
if (!isNaN(dayNumber)) {
if (isEditMode && originalDayNumber !== null) {
if (dayNumber === originalDayNumber) ;
else if (existingDayNumbers.includes(dayNumber)) {
setConflictDayNumber(dayNumber);
setSuggestedDayNumber(null);
setShowDayConflictDialog(true);
return;
}
} else if (!isEditMode && existingDayNumbers.includes(dayNumber)) {
setConflictDayNumber(dayNumber);
setSuggestedDayNumber(nextAvailableDayNumber);
setShowDayConflictDialog(true);
return;
}
}
}
const { isValid: isValid2, errors: validationErrors } = validateForm(
formData,
isAddDayMode,
activityForms
);
if (!isValid2) {
setErrors(validationErrors);
return;
}
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=itinerary&tab=itinerary`;
};
const handleToggleExpand = (activityId) => {
setActivityForms(
(prev) => prev.map(
(af) => af.id === activityId ? { ...af, isExpanded: !af.isExpanded } : af
)
);
};
const handleReorderActivities = (fromIndex, toIndex) => {
if (fromIndex === toIndex) return;
setActivityForms((prev) => {
if (fromIndex < 0 || toIndex < 0 || fromIndex >= prev.length || toIndex >= prev.length) {
return prev;
}
const next = prev.slice();
const [moved] = next.splice(fromIndex, 1);
next.splice(toIndex, 0, moved);
return next;
});
};
const handleRemoveActivity = (activityId) => {
setActivityForms((prev) => prev.filter((af) => af.id !== activityId));
setActivityIncludedItems((prev) => {
const updated = { ...prev };
delete updated[activityId];
return updated;
});
setActivityExcludedItems((prev) => {
const updated = { ...prev };
delete updated[activityId];
return updated;
});
};
const handleAddActivity = () => {
const newActivityId = `activity_${Date.now()}`;
setActivityForms((prev) => [
...prev,
{
id: newActivityId,
data: {
item_type_id: "",
item_id: "",
title: "",
description: "",
location: "",
duration: "",
start_time: "",
end_time: "",
time_type: "exact",
cost: "",
cost_per_person: true,
notes: "",
included_items: [],
excluded_items: []
},
isExpanded: true
}
]);
};
const handleActivityFieldChange = (activityId, field, value) => {
setActivityForms(
(prev) => prev.map(
(af) => af.id === activityId ? { ...af, data: { ...af.data, [field]: value } } : af
)
);
};
const handleActivityIncludedItemChange = (activityId, value) => {
setActivityIncludedItems((prev) => ({ ...prev, [activityId]: value }));
};
const handleActivityExcludedItemChange = (activityId, value) => {
setActivityExcludedItems((prev) => ({ ...prev, [activityId]: value }));
};
const handleActivityAddIncludedItem = (activityId) => {
var _a2;
const item = (_a2 = activityIncludedItems[activityId]) == null ? void 0 : _a2.trim();
if (item) {
setActivityForms(
(prev) => prev.map(
(af) => af.id === activityId ? {
...af,
data: {
...af.data,
included_items: [...af.data.included_items || [], item]
}
} : af
)
);
setActivityIncludedItems((prev) => ({ ...prev, [activityId]: "" }));
}
};
const handleActivityAddExcludedItem = (activityId) => {
var _a2;
const item = (_a2 = activityExcludedItems[activityId]) == null ? void 0 : _a2.trim();
if (item) {
setActivityForms(
(prev) => prev.map(
(af) => af.id === activityId ? {
...af,
data: {
...af.data,
excluded_items: [...af.data.excluded_items || [], item]
}
} : af
)
);
setActivityExcludedItems((prev) => ({ ...prev, [activityId]: "" }));
}
};
const handleActivityRemoveIncludedItem = (activityId, index) => {
setActivityForms(
(prev) => prev.map(
(af) => af.id === activityId ? {
...af,
data: {
...af.data,
included_items: (af.data.included_items || []).filter(
(_, i) => i !== index
)
}
} : af
)
);
};
const handleActivityRemoveExcludedItem = (activityId, index) => {
setActivityForms(
(prev) => prev.map(
(af) => af.id === activityId ? {
...af,
data: {
...af.data,
excluded_items: (af.data.excluded_items || []).filter(
(_, i) => i !== index
)
}
} : af
)
);
};
const handleDayConflictConfirm = () => {
if (suggestedDayNumber !== null) {
const updatedFormData = {
...formData,
day: suggestedDayNumber.toString()
};
setShowDayConflictDialog(false);
setConflictDayNumber(null);
setSuggestedDayNumber(null);
setFormData(updatedFormData);
const { isValid: isValid2, errors: validationErrors } = validateForm(
updatedFormData,
isAddDayMode,
activityForms
);
if (isValid2) {
setErrors({});
saveMutation.mutate(updatedFormData);
} else {
setErrors(validationErrors);
}
} else {
setShowDayConflictDialog(false);
setConflictDayNumber(null);
setSuggestedDayNumber(null);
}
};
if (isEditMode && isLoadingEntry) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ItineraryFormSkeleton, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Itinerary Entry", "yatra") : isAddDayMode ? isSingleDayTrip ? __("Add New Entry", "yatra") : __("Add New Day", "yatra") : __("Add New Activity", "yatra"),
description: isEditMode ? __("Update itinerary entry information", "yatra") : isAddDayMode ? isSingleDayTrip ? __(
"Create a new entry for your single-day trip itinerary.",
"yatra"
) : __(
"Create a new day entry for your trip itinerary. This will be the first activity of the new day.",
"yatra"
) : __(
"Add a new activity, meal, or accommodation to this day of the trip itinerary.",
"yatra"
),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
isAddDayMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
DayFormFields,
{
formData: {
trip_id: formData.trip_id,
day: formData.day,
day_title: formData.day_title || "",
day_description: formData.day_description || ""
},
errors,
tripsData,
isLoadingTrips,
isEditMode: isEditMode && isAddDayMode,
isSingleDayTrip,
onFieldChange: handleFieldChange
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ActivityAccordion,
{
activityForms,
errors,
itemTypes: typesData,
items: itemsData,
activityIncludedItems,
activityExcludedItems,
onToggleExpand: handleToggleExpand,
onRemoveActivity: handleRemoveActivity,
onAddActivity: handleAddActivity,
onReorderActivities: handleReorderActivities,
onFieldChange: handleActivityFieldChange,
onIncludedItemChange: handleActivityIncludedItemChange,
onExcludedItemChange: handleActivityExcludedItemChange,
onAddIncludedItem: handleActivityAddIncludedItem,
onAddExcludedItem: handleActivityAddExcludedItem,
onRemoveIncludedItem: handleActivityRemoveIncludedItem,
onRemoveExcludedItem: handleActivityRemoveExcludedItem,
calculateDuration,
onRefreshData: refreshData
}
)
] }),
!isAddDayMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
tripIdParam && dayParam && /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Trip:", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 font-medium", children: ((_a = tripsData == null ? void 0 : tripsData.find(
(t) => t.id.toString() === tripIdParam
)) == null ? void 0 : _a.title) || tripIdParam })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Day:", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 font-medium", children: dayParam })
] }),
dayTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Day Title:", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 font-medium", children: dayTitle })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ItineraryEntryFields,
{
entry: {
item_type_id: formData.item_type_id,
item_id: formData.item_id,
title: formData.title,
description: formData.description,
location: formData.location,
location_latitude: formData.location_latitude,
location_longitude: formData.location_longitude,
duration: formData.duration,
start_time: formData.start_time,
end_time: formData.end_time,
time_type: formData.time_type,
cost: formData.cost,
cost_per_person: formData.cost_per_person,
notes: formData.notes,
included_items: formData.included_items,
excluded_items: formData.excluded_items,
gallery: formData.gallery,
video_url: formData.video_url
},
errors,
itemTypes: typesData,
items: itemsData,
newIncludedItem,
newExcludedItem,
onFieldChange: (field, value) => handleFieldChange(field, value),
onIncludedItemChange: setNewIncludedItem,
onExcludedItemChange: setNewExcludedItem,
onAddIncludedItem: handleAddIncludedItem,
onAddExcludedItem: handleAddExcludedItem,
onRemoveIncludedItem: handleRemoveIncludedItem,
onRemoveExcludedItem: handleRemoveExcludedItem,
calculateDuration,
size: "default",
showCardWrapper: true,
onRefreshData: refreshData
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky top-6 space-y-3 z-10 h-fit", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Entry Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Published entries are visible in trip schedules. Draft entries are saved but not visible. Trashed entries are deleted.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
errors.submit && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { variant: "error", title: __("Error", "yatra"), children: errors.submit }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: saveMutation.isPending,
className: "flex-1 flex items-center justify-center gap-2",
children: saveMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
submitButtonLabel
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: saveMutation.isPending,
children: __("Cancel", "yatra")
}
)
] })
] }) }) })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
DayConflictDialog,
{
isOpen: showDayConflictDialog,
conflictDayNumber,
suggestedDayNumber,
existingDayNumbers,
isUpdateMode: isEditMode && isAddDayMode,
onClose: () => {
setShowDayConflictDialog(false);
setConflictDayNumber(null);
setSuggestedDayNumber(null);
},
onConfirm: handleDayConflictConfirm
}
)
] });
};
const MODULE_FEATURES = {
white_label: [
"Rebrand the plugin: name, logo, author, support URL",
"Replace Yatra/MantraBrain references on plugin list + PDFs",
"Custom admin menu labels, icons, ordering",
"Custom brand color applied across the admin UI"
],
"white-label": [
"Rebrand the plugin: name, logo, author, support URL",
"Replace Yatra/MantraBrain references on plugin list + PDFs",
"Custom admin menu labels, icons, ordering",
"Custom brand color applied across the admin UI"
],
ai_assistant: [
"Inline AI generation on trip descriptions, FAQs, SEO meta",
"Multi-step agents for full trip + itinerary creation",
"AI public chat widget on every single-trip page",
"Bring your own OpenAI / Anthropic key — no per-call markup"
],
"ai-assistant": [
"Inline AI generation on trip descriptions, FAQs, SEO meta",
"Multi-step agents for full trip + itinerary creation",
"AI public chat widget on every single-trip page",
"Bring your own OpenAI / Anthropic key — no per-call markup"
]
};
const TIER_DEFAULT_FEATURES = {
agency: [
"Unlocks every premium module — Scale-tier and below",
"Full white-label rebranding capability",
"Priority support with faster response times",
"All future Scale-tier features included"
],
growth: [
"Advanced operator-productivity features",
"AI assistant for content + itinerary generation",
"Priority support included",
"All future Growth-tier features included"
],
personal: [
"Premium booking-system extensions",
"Email automation + abandoned-recovery workflows",
"Dynamic pricing + advanced discount tools",
"All future Starter-tier features included"
]
};
const PremiumUpgradeDialog = ({
open,
onClose,
moduleName,
moduleSlug,
purchaseUrl,
moduleDescription,
requiredPlan
}) => {
if (!open) return null;
const planLabel = requiredPlan === "agency" ? __("Scale plan", "yatra") : requiredPlan === "growth" ? __("Growth plan", "yatra") : requiredPlan === "personal" ? __("Starter plan", "yatra") : null;
const planCtaLabel = requiredPlan === "agency" ? __("Upgrade to Scale", "yatra") : requiredPlan === "growth" ? __("Upgrade to Growth", "yatra") : requiredPlan === "personal" ? __("Upgrade to Starter", "yatra") : __("Upgrade to Pro", "yatra");
const planFooterCopy = requiredPlan === "agency" ? __(
"This feature is exclusive to the Scale plan. Upgrade to unlock it.",
"yatra"
) : requiredPlan === "growth" ? __(
"This feature unlocks on the Growth plan (or Scale). Upgrade to enable it.",
"yatra"
) : requiredPlan === "personal" ? __(
"This feature is included on every Pro plan. Upgrade to unlock it.",
"yatra"
) : __("Upgrade to Yatra Pro and unlock this feature today", "yatra");
const features = moduleSlug && MODULE_FEATURES[moduleSlug] || requiredPlan && TIER_DEFAULT_FEATURES[requiredPlan] || [
__("Advanced analytics and reporting", "yatra"),
__("Automated workflows and notifications", "yatra"),
__("Enhanced customer management tools", "yatra"),
__("Priority support and updates", "yatra")
];
return reactDomExports.createPortal(
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed top-0 left-0 right-0 bottom-0 m-0 bg-black/60 backdrop-blur-sm flex items-center justify-center px-4 pb-4",
style: {
zIndex: 999999,
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0
},
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full max-w-5xl", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute -inset-0.5 bg-gradient-to-r from-orange-500/20 via-orange-400/20 to-orange-500/20 rounded-2xl blur-2xl" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "relative w-full shadow-2xl border border-orange-300/80 dark:border-orange-700/50 bg-white dark:bg-slate-900 overflow-hidden max-h-[90vh] flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-500 via-orange-400 to-orange-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "relative pb-4 pt-6 border-b border-gray-200 dark:border-gray-800 flex-shrink-0 bg-gradient-to-b from-orange-50/30 to-transparent dark:from-orange-950/20", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crown, { className: "w-6 h-6 text-white" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-xl font-bold text-gray-900 dark:text-white", children: moduleName || __("Premium Feature", "yatra") }),
planLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium text-white shadow-sm " + (requiredPlan === "agency" ? "bg-gradient-to-r from-purple-600 to-indigo-500" : requiredPlan === "growth" ? "bg-gradient-to-r from-emerald-500 to-teal-500" : "bg-gradient-to-r from-blue-500 to-blue-600"),
children: planLabel
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { className: "text-gray-600 dark:text-gray-400 mt-1", children: moduleDescription || __(
"This feature requires Yatra Pro to unlock powerful premium capabilities.",
"yatra"
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: onClose,
className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" })
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "flex-1 overflow-hidden pt-6 px-6 pb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 h-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col overflow-y-auto pr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-4 h-4 text-orange-500" }),
__("What This Module Does", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 leading-relaxed", children: moduleDescription || __(
"This premium module adds advanced functionality to your Yatra booking system, helping you grow your business and streamline operations.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-4 h-4 text-orange-500" }),
__("Key Features", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-2 text-sm text-gray-600 dark:text-gray-400", children: features.map((line, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle2, { className: "w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: line })
] }, i)) })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Play, { className: "w-4 h-4 text-orange-500" }),
__("See It In Action", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-300 dark:border-gray-600", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Play, { className: "w-12 h-12 text-gray-400 mx-auto mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Click to watch demo video", "yatra") })
] }) })
] }) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-gray-200 dark:border-gray-800 p-6 bg-gray-50 dark:bg-gray-900/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center sm:text-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: planFooterCopy }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
className: "bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white px-6 py-2 font-medium shadow-lg hover:shadow-xl transition-all duration-200 group",
onClick: () => window.open(
purchaseUrl || "https://wpyatra.com/pricing",
"_blank"
),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-4 h-4 mr-2 group-hover:rotate-12 transition-transform" }),
planCtaLabel,
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "w-4 h-4 group-hover:translate-x-1 transition-transform" })
]
}
)
] }) })
] })
] })
}
),
document.body
);
};
const Discounts = () => {
var _a, _b, _c;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [typeFilter, setTypeFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("created_at");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({ isOpen: false, discount: null });
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [isBulkPending, setIsBulkPending] = reactExports.useState(false);
const [showDiscountTypeModal, setShowDiscountTypeModal] = reactExports.useState(false);
const [premiumDialog, setPremiumDialog] = reactExports.useState({ open: false, type: null });
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
if (typeof window === "undefined") {
return {
code: true,
type: true,
discount: true,
usage: true,
expiry_date: true,
status: true
};
}
const saved = window.localStorage.getItem(
"yatra-discounts-visible-columns"
);
return saved ? JSON.parse(saved) : {
code: true,
type: true,
discount: true,
usage: true,
expiry_date: true,
status: true
};
});
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const invalidateDiscountQueries = () => {
queryClient2.invalidateQueries({ queryKey: ["discounts"] });
queryClient2.invalidateQueries({ queryKey: ["discounts-stats"] });
};
const baseAdminUrl = ((_a = window.yatraAdmin) == null ? void 0 : _a.adminUrl) || "";
const adminCurrency = ((_b = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _b.currency) || "USD";
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
if (typeFilter !== "all") {
params.type = typeFilter;
}
return params;
}, [searchTerm, statusFilter, typeFilter, sortBy2, sortOrder, page]);
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["discounts", queryParams],
queryFn: async () => {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("simulate_error") === "true") {
throw new Error(
"Simulated API error for testing error UI functionality"
);
}
const response = await apiClient.get("/discounts", {
params: queryParams
});
return response;
},
enabled: can("yatra_manage_discounts")
});
const { data: discountStats } = useQuery({
queryKey: ["discounts-stats"],
queryFn: async () => {
try {
return await apiClient.get("/discounts/stats");
} catch {
return {
all: 0,
publish: 0,
draft: 0,
trash: 0,
expired: 0
};
}
},
enabled: can("yatra_manage_discounts")
});
const discountStatusCounts = reactExports.useMemo(() => {
const d = discountStats;
if (!d) {
return { all: 0, publish: 0, draft: 0, trash: 0, expired: 0 };
}
return {
all: Number(d.all ?? 0),
publish: Number(d.publish ?? 0),
draft: Number(d.draft ?? 0),
trash: Number(d.trash ?? 0),
expired: Number(d.expired ?? 0)
};
}, [discountStats]);
const bulkToolbarStatusOptions = reactExports.useMemo(
() => [
{
key: "all",
label: __("All", "yatra"),
count: discountStatusCounts.all
},
{
key: "publish",
label: __("Publish", "yatra"),
count: discountStatusCounts.publish
},
{
key: "draft",
label: __("Draft", "yatra"),
count: discountStatusCounts.draft
},
{
key: "trash",
label: __("Trash", "yatra"),
count: discountStatusCounts.trash
},
{
key: "expired",
label: __("Expired", "yatra"),
count: discountStatusCounts.expired
}
],
[discountStatusCounts]
);
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/discounts/${id}`);
},
onSuccess: () => {
invalidateDiscountQueries();
showToast(__("Discount deleted successfully", "yatra"), "success");
setDeleteConfirm({ isOpen: false, discount: null });
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete discount", "yatra"),
"error"
);
}
});
const discounts = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const itemsPerPage = 10;
const totalPages = Math.ceil(total / itemsPerPage);
const errorContext = getErrorContext(error);
const apiErrorMessage = (data == null ? void 0 : data.error) || (data == null ? void 0 : data.message);
const derivedErrorDetails = errorContext.details || (apiErrorMessage ? String(apiErrorMessage) : void 0) || (error ? String((error == null ? void 0 : error.message) || error) : void 0);
const isDiscountsError = !!error || !!apiErrorMessage;
const formatDate2 = (dateString) => {
if (!dateString) return __("N/A", "yatra");
try {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "2-digit"
});
} catch (e) {
return __("Invalid date", "yatra");
}
};
const confirmDelete = () => {
if (deleteConfirm.discount) {
deleteMutation.mutate(deleteConfirm.discount.id);
}
};
const getStatusBadge = (status) => {
const statusMap = {
publish: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Publish", "yatra")
},
active: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Publish", "yatra")
},
draft: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Draft", "yatra")
},
trash: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Trash", "yatra")
},
expired: {
className: "bg-orange-100 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400",
label: __("Expired", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const handleEdit = (discount) => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=discounts&action=edit&id=${discount.id}`;
};
const handleDelete = (discount) => {
setDeleteConfirm({ isOpen: true, discount });
};
const handleDuplicate = (discount) => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=discounts&action=create&duplicate=${discount.id}`;
};
const handleCreateDiscount = () => {
setShowDiscountTypeModal(true);
};
const isAdvancedDiscountEnabled = !!((_c = window.yatraAdmin) == null ? void 0 : _c.advancedDiscountEnabled);
const handleSelectDiscountType = (type) => {
if ((type === "group" || type === "both") && !isAdvancedDiscountEnabled) {
setPremiumDialog({ open: true, type });
return;
}
setShowDiscountTypeModal(false);
window.location.href = `${baseAdminUrl}?page=yatra&subpage=discounts&action=create&discount_mode=${type}`;
};
const getPremiumDialogContent = () => {
if (premiumDialog.type === "group") {
return {
name: __("Group Discount", "yatra"),
description: __(
"Create powerful group discounts that automatically apply when customers book for multiple travelers. Set tiered pricing based on group size, offer category-specific discounts, and boost your group bookings without requiring promo codes.",
"yatra"
),
purchaseUrl: "https://wpyatra.com/pricing?module=advanced-discount"
};
}
return {
name: __("Promo + Group Discount", "yatra"),
description: __(
"Combine the power of promo codes with automatic group discounts. Customers get a base discount with their promo code, plus additional savings when booking for groups. Perfect for maximizing conversions and encouraging larger bookings.",
"yatra"
),
purchaseUrl: "https://wpyatra.com/pricing?module=advanced-discount"
};
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setTypeFilter("all");
setSortBy("created_at");
setSortOrder("desc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("desc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || typeFilter !== "all" || sortBy2 !== "created_at" || sortOrder !== "desc";
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
if (typeof window !== "undefined") {
window.localStorage.setItem(
"yatra-discounts-visible-columns",
JSON.stringify(newVisibleColumns)
);
}
};
const handleSelectItem = (id, checked) => {
setSelectedIds(
(prev) => checked ? [...prev, id] : prev.filter((selectedId) => selectedId !== id)
);
};
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(discounts.map((discount) => discount.id));
} else {
setSelectedIds([]);
}
};
const isAllSelected = discounts.length > 0 && selectedIds.length === discounts.length;
const updateStatusForIds = async (ids, newStatus) => {
await Promise.all(
ids.map((id) => {
const discount = discounts.find((item) => item.id === id);
if (!discount) {
return Promise.resolve();
}
const payload = {
...discount,
status: newStatus
};
return apiClient.put(`/discounts/${id}`, payload);
})
);
};
const handleBulkApply = async () => {
if (!bulkAction || selectedIds.length === 0) {
return;
}
try {
setIsBulkPending(true);
if (bulkAction === "delete") {
await Promise.all(
selectedIds.map((id) => apiClient.delete(`/discounts/${id}`))
);
showToast(
__("Selected discounts deleted successfully", "yatra"),
"success"
);
} else {
const newStatus = bulkAction;
await updateStatusForIds(selectedIds, newStatus);
showToast(__("Bulk status updated successfully", "yatra"), "success");
}
invalidateDiscountQueries();
setSelectedIds([]);
setBulkAction("");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to perform bulk action on discounts", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
};
const allBulkActionOptions = [
{ value: "publish", label: __("Mark as Publish", "yatra") },
{ value: "draft", label: __("Mark as Draft", "yatra") },
{ value: "trash", label: __("Move to Trash", "yatra") },
{ value: "expired", label: __("Mark as Expired", "yatra") },
{ value: "delete", label: __("Delete permanently", "yatra") }
];
const getBulkActionOptionsForStatus = (view) => {
switch (view) {
case "publish":
return allBulkActionOptions.filter(
(opt) => ["draft", "trash", "expired", "delete"].includes(opt.value)
);
case "draft":
return allBulkActionOptions.filter(
(opt) => ["publish", "trash", "expired", "delete"].includes(opt.value)
);
case "trash":
return allBulkActionOptions.filter(
(opt) => ["publish", "draft", "delete"].includes(opt.value)
);
case "expired":
return allBulkActionOptions.filter(
(opt) => ["publish", "draft", "trash", "delete"].includes(opt.value)
);
default:
return allBulkActionOptions;
}
};
const bulkActionOptions = getBulkActionOptionsForStatus(statusFilter);
const copyPromoCodeToClipboard = async (code) => {
const text = code.trim();
if (!text) {
return;
}
try {
await navigator.clipboard.writeText(text);
showToast(__("Coupon code copied to clipboard", "yatra"), "success");
} catch {
try {
const ta = document.createElement("textarea");
ta.value = text;
ta.setAttribute("readonly", "");
ta.style.position = "fixed";
ta.style.left = "-9999px";
document.body.appendChild(ta);
ta.select();
document.execCommand("copy");
document.body.removeChild(ta);
showToast(__("Coupon code copied to clipboard", "yatra"), "success");
} catch {
showToast(__("Could not copy to clipboard", "yatra"), "error");
}
}
};
const statusOptions = [
{ value: "all", label: __("All Status", "yatra") },
{ value: "publish", label: __("Publish", "yatra") },
{ value: "draft", label: __("Draft", "yatra") },
{ value: "trash", label: __("Trash", "yatra") },
{ value: "expired", label: __("Expired", "yatra") }
];
const sortOptions = [
{ value: "created_at", label: __("Created Date", "yatra") },
{ value: "code", label: __("Code", "yatra") },
{ value: "type", label: __("Type", "yatra") },
{ value: "amount", label: __("Amount", "yatra") },
{ value: "usage_count", label: __("Usage", "yatra") },
{ value: "expiry_date", label: __("Expiry Date", "yatra") },
{ value: "status", label: __("Status", "yatra") }
];
const columnOptions = [
{
key: "code",
label: __("Coupon Code", "yatra"),
visible: visibleColumns.code
},
{
key: "type",
label: __("Type", "yatra"),
visible: visibleColumns.type
},
{
key: "discount",
label: __("Discount", "yatra"),
visible: visibleColumns.discount
},
{
key: "usage",
label: __("Usage", "yatra"),
visible: visibleColumns.usage
},
{
key: "expiry_date",
label: __("Expiry Date", "yatra"),
visible: visibleColumns.expiry_date
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
}
];
const columns = [
{
key: "code",
label: __("Name / Code", "yatra"),
sortable: true,
visible: visibleColumns.code,
width: "w-[280px]",
render: (discount) => {
var _a2;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2 mb-1 flex-wrap", children: discount.discount_mode === "group" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
Badge,
{
variant: "success",
className: "text-xs flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-3 h-3" }),
__("Group Only", "yatra")
]
}
) : discount.discount_mode === "promo" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "info", className: "text-xs flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "w-3 h-3" }),
__("Promo Code", "yatra")
] }) : discount.is_group_discount ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
Badge,
{
variant: "warning",
className: "text-xs flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "w-3 h-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-3 h-3" }),
__("Promo + Group", "yatra")
]
}
) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "info", className: "text-xs flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "w-3 h-3" }),
__("Promo Code", "yatra")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 mt-1 flex-wrap", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${baseAdminUrl}?page=yatra&subpage=discounts&action=edit&id=${discount.id}`,
className: "font-medium font-mono text-sm text-blue-600 dark:text-blue-400 hover:underline underline-offset-2",
children: discount.code
}
),
discount.discount_mode !== "group" && ((_a2 = discount.code) == null ? void 0 : _a2.trim()) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
className: "inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-white text-gray-800 shadow-sm transition-colors hover:border-gray-400 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-400 dark:hover:bg-gray-700",
title: __("Copy coupon code", "yatra"),
"aria-label": __("Copy coupon code", "yatra"),
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
void copyPromoCodeToClipboard(discount.code);
},
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
ClipboardCopy,
{
className: "pointer-events-none h-4 w-4",
strokeWidth: 2.25,
"aria-hidden": true
}
)
}
) : null
] }),
discount.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: discount.description })
] });
}
},
{
key: "type",
label: __("Discount", "yatra"),
sortable: true,
visible: visibleColumns.type,
render: (discount) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
discount.discount_mode !== "group" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: discount.type === "percentage" ? `${discount.amount}%` : formatYatraMoney(
Number(discount.amount) || 0,
adminCurrency,
{
zeroAsUnknown: false
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500", children: __("off", "yatra") })
] }),
discount.is_group_discount && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: discount.group_discount_mode === "category_based" && discount.category_discounts && discount.category_discounts.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: discount.category_discounts.map((cat, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-700 dark:text-gray-300", children: [
cat.traveler_category_label,
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-green-600 dark:text-green-400", children: cat.ranges && cat.ranges.length > 0 ? cat.ranges.map((range3, rIdx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
rIdx > 0 && ", ",
range3.min_group_size,
range3.max_group_size ? `-${range3.max_group_size}` : "+",
":",
range3.discount_type === "percentage" ? `${range3.discount_amount}%` : formatYatraMoney(
Number(range3.discount_amount) || 0,
adminCurrency,
{ zeroAsUnknown: false }
)
] }, rIdx)) : "-" })
] }, idx)) }) : discount.group_discount_ranges && discount.group_discount_ranges.length > 0 ? (
/* Total-based group discount ranges */
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-0.5", children: discount.group_discount_ranges.map((range3, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "text-xs text-green-600 dark:text-green-400 flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-3 h-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
range3.min_group_size,
range3.max_group_size ? `-${range3.max_group_size}` : "+",
" ",
__("pax", "yatra"),
":",
range3.discount_type === "percentage" ? ` ${range3.discount_amount}%` : ` ${formatYatraMoney(
Number(range3.discount_amount) || 0,
adminCurrency,
{ zeroAsUnknown: false }
)}`,
" ",
__("off", "yatra")
] })
]
},
idx
)) })
) : (
/* Fallback for legacy data */
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-green-600 dark:text-green-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-3 h-3" }),
discount.min_group_size ? `${discount.min_group_size}+ ${__("travelers", "yatra")}: ${discount.group_discount_type === "percentage" ? `${discount.group_discount_amount}%` : formatYatraMoney(Number(discount.group_discount_amount) || 0, adminCurrency, { zeroAsUnknown: false })}` : __("Group pricing", "yatra")
] })
) })
] })
},
{
key: "usage",
label: __("Usage", "yatra"),
sortable: true,
visible: visibleColumns.usage,
render: (discount) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "outline", className: "font-medium", children: [
discount.usage_count,
" /",
" ",
discount.usage_limit === 0 ? "∞" : discount.usage_limit
] }) })
},
{
key: "expiry_date",
label: __("Expiry Date", "yatra"),
sortable: true,
visible: visibleColumns.expiry_date,
render: (discount) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: discount.expiry_date ? formatDate2(discount.expiry_date) : __("No expiry", "yatra") })
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (discount) => getStatusBadge(discount.status)
}
];
const actions = [
{
key: "duplicate",
label: __("Duplicate", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-4 h-4" }),
onClick: (discount) => handleDuplicate(discount)
},
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (discount) => handleEdit(discount)
},
{
key: "mark_publish",
label: __("Mark as Publish", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: async (discount) => {
setIsBulkPending(true);
try {
await updateStatusForIds([discount.id], "publish");
invalidateDiscountQueries();
showToast(__("Discount status updated", "yatra"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to update discount status", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (discount) => discount.status !== "publish"
},
{
key: "mark_draft",
label: __("Mark as Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (discount) => {
setIsBulkPending(true);
try {
await updateStatusForIds([discount.id], "draft");
invalidateDiscountQueries();
showToast(__("Discount status updated", "yatra"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to update discount status", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (discount) => discount.status !== "draft"
},
{
key: "move_trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: async (discount) => {
setIsBulkPending(true);
try {
await updateStatusForIds([discount.id], "trash");
invalidateDiscountQueries();
showToast(__("Discount moved to trash", "yatra"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to move discount to trash", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (discount) => discount.status !== "trash"
},
{
key: "mark_expired",
label: __("Mark as Expired", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (discount) => {
setIsBulkPending(true);
try {
await updateStatusForIds([discount.id], "expired");
invalidateDiscountQueries();
showToast(__("Discount status updated", "yatra"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to update discount status", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (discount) => discount.status !== "expired"
},
{
key: "delete",
label: __("Delete", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (discount) => handleDelete(discount),
variant: "destructive"
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: showDiscountTypeModal,
onClose: () => setShowDiscountTypeModal(false),
title: __("What type of discount do you want to create?", "yatra"),
description: __(
"Choose the discount type that best fits your needs",
"yatra"
),
size: "lg",
footer: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => setShowDiscountTypeModal(false),
children: __("Cancel", "yatra")
}
) }),
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => handleSelectDiscountType("promo"),
className: "flex flex-col items-center p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all group text-left",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-14 h-14 bg-blue-100 dark:bg-blue-900/50 rounded-full flex items-center justify-center mb-4 group-hover:bg-blue-200 dark:group-hover:bg-blue-800 transition-colors", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "w-7 h-7 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-900 dark:text-white mb-2", children: __("Promo Code", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-center", children: __(
"Customer enters a code to get a percentage or fixed discount",
"yatra"
) })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => handleSelectDiscountType("group"),
className: "relative flex flex-col items-center p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition-all group text-left",
children: [
!isAdvancedDiscountEnabled && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "absolute top-2 right-2 z-10 flex items-center gap-1 px-2 py-1 text-[10px] font-semibold rounded-full shadow-md",
style: {
background: "linear-gradient(to right, #f59e0b, #f97316)",
color: "#ffffff",
border: "1px solid #fbbf24"
},
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "w-3 h-3", style: { color: "#ffffff" } }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#ffffff" }, children: __("Pro", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-14 h-14 bg-green-100 dark:bg-green-900/50 rounded-full flex items-center justify-center mb-4 group-hover:bg-green-200 dark:group-hover:bg-green-800 transition-colors", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-7 h-7 text-green-600 dark:text-green-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-900 dark:text-white mb-2", children: __("Group Discount", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-center", children: __(
"Auto-applies when booking multiple travelers. No code needed.",
"yatra"
) })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => handleSelectDiscountType("both"),
className: "relative flex flex-col items-center p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all group text-left",
children: [
!isAdvancedDiscountEnabled && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "absolute top-2 right-2 z-10 flex items-center gap-1 px-2 py-1 text-[10px] font-semibold rounded-full shadow-md",
style: {
background: "linear-gradient(to right, #f59e0b, #f97316)",
color: "#ffffff",
border: "1px solid #fbbf24"
},
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "w-3 h-3", style: { color: "#ffffff" } }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#ffffff" }, children: __("Pro", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-14 h-14 bg-purple-100 dark:bg-purple-900/50 rounded-full flex items-center justify-center mb-4 group-hover:bg-purple-200 dark:group-hover:bg-purple-800 transition-colors", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex -space-x-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "w-5 h-5 text-purple-600 dark:text-purple-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-5 h-5 text-purple-600 dark:text-purple-400" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-900 dark:text-white mb-2", children: __("Promo + Group", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-center", children: __(
"Promo code gives base discount + extra savings for groups",
"yatra"
) })
]
}
)
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, discount: null }),
onConfirm: confirmDelete,
title: __("Delete Discount", "yatra"),
message: deleteConfirm.discount ? __(
'Are you sure you want to delete discount code "{code}"? This action cannot be undone.',
"yatra"
).replace("{code}", deleteConfirm.discount.code) : __(
"Are you sure you want to delete this discount? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PremiumUpgradeDialog,
{
open: premiumDialog.open,
onClose: () => setPremiumDialog({ open: false, type: null }),
moduleName: getPremiumDialogContent().name,
moduleDescription: getPremiumDialogContent().description,
purchaseUrl: getPremiumDialogContent().purchaseUrl
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Discounts", "yatra"),
description: __(
"Create and manage discount coupons for your trips",
"yatra"
),
actionCapability: "yatra_manage_discounts",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateDiscount,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Create Discount", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions,
sortBy: sortBy2,
onSortByChange: (field) => {
setSortBy(field);
setPage(1);
},
sortOrder,
onSortOrderChange: (order) => {
setSortOrder(order);
setPage(1);
},
sortOptions,
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search by code...", "yatra")
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-auto flex lg:justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: typeFilter,
onChange: (e) => {
setTypeFilter(e.target.value);
setPage(1);
},
className: "w-full lg:w-48 max-w-xs",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Types", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "percentage", children: __("Percentage", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "fixed", children: __("Fixed Amount", "yatra") })
]
}
) })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_manage_discounts", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions: bulkToolbarStatusOptions,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: isBulkPending,
totalItems: total,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: discounts,
columns,
actions,
isLoading,
isError: isDiscountsError,
errorText: __("Error loading discounts", "yatra"),
errorDescription: __(
"We couldn't connect to the discounts service. Please refresh or try again shortly.",
"We couldn't connect to the discounts service. Please refresh or try again shortly."
),
errorDetails: derivedErrorDetails,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => refetch(),
emptyText: __("No discounts found", "yatra"),
emptyDescription: hasFilters ? __(
"Try adjusting your filters to see more results.",
"yatra"
) : __(
"Get started by creating your first discount coupon.",
"yatra"
),
onCreateClick: can("yatra_manage_discounts") ? handleCreateDiscount : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: handleSelectItem,
onSelectAll: handleSelectAll,
isAllSelected,
getItemId: (discount) => discount.id,
skeletonRows: 5,
capability: "yatra_manage_discounts"
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage,
onPageChange: (newPage) => setPage(newPage),
itemName: __("coupons", "yatra")
}
) })
] }) })
] });
};
function getAdminRestConfig() {
var _a, _b;
const w = window;
const raw = ((_a = w == null ? void 0 : w.yatraAdmin) == null ? void 0 : _a.restUrl) || "/wp-json";
const base = raw.endsWith("/") ? raw.slice(0, -1) : raw;
const nonce = ((_b = w == null ? void 0 : w.yatraAdmin) == null ? void 0 : _b.nonce) || "";
return { base, nonce };
}
function buildInvoiceUrl(base, paymentId) {
const suffix = `/yatra/v1/payment/${paymentId}/invoice`;
const origin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
let u;
try {
u = new URL(base, origin);
} catch {
return `${base.replace(/\/$/, "")}${suffix}?download=1`;
}
if (u.searchParams.has("rest_route")) {
const route2 = (u.searchParams.get("rest_route") || "").replace(/\/$/, "");
u.searchParams.set("rest_route", `${route2}${suffix}`);
u.searchParams.set("download", "1");
return u.toString();
}
u.pathname = (u.pathname || "").replace(/\/$/, "") + suffix;
u.searchParams.set("download", "1");
return u.toString();
}
async function readError(res) {
let msg = res.statusText || "Request failed";
try {
const j = await res.json();
if ((j == null ? void 0 : j.message) && typeof j.message === "string") {
msg = j.message;
}
} catch {
const t = await res.text().catch(() => "");
if (t && t.length < 300) {
msg = t;
}
}
return msg;
}
async function downloadAdminInvoice(paymentId) {
if (!paymentId || paymentId <= 0) {
throw new Error("Invalid payment ID");
}
const { base, nonce } = getAdminRestConfig();
if (!nonce) {
throw new Error("Missing REST nonce; please reload the page.");
}
const url = buildInvoiceUrl(base, paymentId);
const res = await fetch(url, {
method: "GET",
credentials: "include",
headers: {
"X-WP-Nonce": nonce,
Accept: "application/pdf, application/octet-stream, */*"
}
});
if (!res.ok) {
throw new Error(await readError(res));
}
const blob = await res.blob();
const dispo = res.headers.get("Content-Disposition");
let filename = `invoice-${paymentId}.pdf`;
if (dispo) {
const m = /filename\*?=(?:UTF-8'')?["']?([^";\n]+)/i.exec(dispo);
if (m == null ? void 0 : m[1]) {
try {
filename = decodeURIComponent(m[1].replace(/['"]/g, "").trim());
} catch {
filename = m[1].replace(/['"]/g, "").trim();
}
}
}
const objectUrl = URL.createObjectURL(blob);
const link2 = document.createElement("a");
link2.href = objectUrl;
link2.download = filename;
document.body.appendChild(link2);
link2.click();
document.body.removeChild(link2);
URL.revokeObjectURL(objectUrl);
}
const Payments = () => {
var _a, _b;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [methodFilter, setMethodFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("payment_date");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [isBulkPending, setIsBulkPending] = reactExports.useState(false);
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
payment: null
});
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
if (typeof window === "undefined") {
return {
payment: true,
customer: true,
booking: true,
amount: true,
method: true,
status: true,
date: true
};
}
const saved = window.localStorage.getItem("yatra-payments-visible-columns");
return saved ? JSON.parse(saved) : {
payment: true,
customer: true,
booking: true,
amount: true,
method: true,
status: true,
date: true
};
});
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const defaultCurrency = ((_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.currency) || ((_b = window == null ? void 0 : window.yatraBookingData) == null ? void 0 : _b.currency) || "USD";
const PAYMENTS_PER_PAGE = 10;
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: PAYMENTS_PER_PAGE,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.payment_status = statusFilter;
}
if (methodFilter !== "all") {
params.payment_method = methodFilter;
}
return params;
}, [searchTerm, statusFilter, methodFilter, sortBy2, sortOrder, page]);
const { data, isLoading, error } = useQuery({
queryKey: ["payments", queryParams],
queryFn: async () => {
const paramsObj = {
page: queryParams.page,
per_page: queryParams.per_page
};
if (queryParams.search) {
paramsObj.search = queryParams.search;
}
if (queryParams.payment_status) {
paramsObj.status = queryParams.payment_status;
}
if (queryParams.payment_method) {
paramsObj.gateway = queryParams.payment_method;
}
return await apiService.getPayments(paramsObj);
},
enabled: can("yatra_view_bookings")
});
const { data: paymentStatsRaw } = useQuery({
queryKey: ["payments-stats"],
queryFn: () => apiService.getPaymentsStats(),
enabled: can("yatra_view_bookings")
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
await apiService.deletePayment(id);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["payments"] });
queryClient2.invalidateQueries({ queryKey: ["payments-stats"] });
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
showToast(__("Payment deleted successfully", "yatra"), "success");
setDeleteConfirm({ isOpen: false, payment: null });
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete payment", "yatra"),
"error"
);
}
});
const payments = (data == null ? void 0 : data.data) || [];
const listMeta = data == null ? void 0 : data.meta;
const total = Number((listMeta == null ? void 0 : listMeta.total) ?? (data == null ? void 0 : data.total) ?? 0);
const perPage = Number(
(listMeta == null ? void 0 : listMeta.per_page) ?? (data == null ? void 0 : data.per_page) ?? PAYMENTS_PER_PAGE
) || PAYMENTS_PER_PAGE;
const totalPages = Math.max(
1,
Number((listMeta == null ? void 0 : listMeta.total_pages) ?? (data == null ? void 0 : data.total_pages)) || (total > 0 ? Math.ceil(total / perPage) : 1)
);
const payCounts = paymentStatsRaw ?? {};
const countFor = (key2) => Number(payCounts[key2] ?? 0);
const errorContext = getErrorContext(error);
const formatDate2 = (dateString) => {
return formatDate$1(dateString);
};
const formatPrice = (price, currencyCode = defaultCurrency) => formatYatraMoney(Number(price) || 0, currencyCode, {
zeroAsUnknown: false
});
const getStatusBadge = (status) => {
const statusMap = {
completed: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Completed", "yatra")
},
pending: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __("Pending", "yatra")
},
partial: {
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400",
label: __("Partial", "yatra")
},
failed: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Failed", "yatra")
},
refunded: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Refunded", "yatra")
},
cancelled: {
className: "bg-orange-100 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400",
label: __("Cancelled", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const handleEdit = (payment) => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=payments&action=edit&id=${payment.id}`;
};
const handleDelete = (payment) => {
setDeleteConfirm({ isOpen: true, payment });
};
const confirmDelete = () => {
if (deleteConfirm.payment) {
deleteMutation.mutate(deleteConfirm.payment.id);
}
};
const handleView = (payment) => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=payments&action=view&id=${payment.id}`;
};
const handleCreatePayment = () => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=payments&action=create`;
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setMethodFilter("all");
setSortBy("payment_date");
setSortOrder("desc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("desc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || methodFilter !== "all" || sortBy2 !== "payment_date" || sortOrder !== "desc";
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
if (typeof window !== "undefined") {
window.localStorage.setItem(
"yatra-payments-visible-columns",
JSON.stringify(newVisibleColumns)
);
}
};
const handleSelectItem = (id, checked) => {
setSelectedIds(
(prev) => checked ? [...prev, id] : prev.filter((selectedId) => selectedId !== id)
);
};
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(payments.map((payment) => payment.id));
} else {
setSelectedIds([]);
}
};
const isAllSelected = payments.length > 0 && selectedIds.length === payments.length;
const updateStatusForIds = async (ids, newStatus) => {
await Promise.all(
ids.map(async (id) => {
await apiService.updatePaymentStatus(id, newStatus);
})
);
};
const handleBulkApply = async () => {
if (!bulkAction || selectedIds.length === 0) {
return;
}
try {
setIsBulkPending(true);
if (bulkAction === "delete") {
await apiService.bulkPaymentsAction("delete", selectedIds);
showToast(
__("Selected payments deleted successfully", "yatra"),
"success"
);
} else {
const newStatus = bulkAction;
await updateStatusForIds(selectedIds, newStatus);
showToast(__("Bulk status updated successfully", "yatra"), "success");
}
queryClient2.invalidateQueries({ queryKey: ["payments"] });
queryClient2.invalidateQueries({ queryKey: ["payments-stats"] });
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
setSelectedIds([]);
setBulkAction("");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to perform bulk action on payments", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
};
const allBulkActionOptions = [
{ value: "completed", label: __("Mark as Completed", "yatra") },
{ value: "failed", label: __("Mark as Failed", "yatra") },
{ value: "refunded", label: __("Mark as Refunded", "yatra") },
{ value: "cancelled", label: __("Mark as Cancelled", "yatra") },
{ value: "delete", label: __("Delete permanently", "yatra") }
];
const getBulkActionOptionsForStatus = (view) => {
switch (view) {
case "completed":
return allBulkActionOptions.filter(
(opt) => ["failed", "refunded", "cancelled", "delete"].includes(opt.value)
);
case "pending":
return allBulkActionOptions.filter(
(opt) => ["completed", "failed", "cancelled", "delete"].includes(opt.value)
);
case "partial":
return allBulkActionOptions.filter(
(opt) => ["completed", "cancelled", "delete"].includes(opt.value)
);
case "failed":
return allBulkActionOptions.filter(
(opt) => ["completed", "cancelled", "delete"].includes(opt.value)
);
case "refunded":
return allBulkActionOptions.filter(
(opt) => ["completed", "cancelled", "delete"].includes(opt.value)
);
case "cancelled":
return allBulkActionOptions.filter(
(opt) => ["completed", "delete"].includes(opt.value)
);
default:
return allBulkActionOptions;
}
};
const bulkActionOptions = getBulkActionOptionsForStatus(statusFilter);
const statusOptions = [
{ value: "all", label: __("All Status", "yatra") },
{ value: "completed", label: __("Completed", "yatra") },
{ value: "pending", label: __("Pending", "yatra") },
{ value: "partial", label: __("Partial", "yatra") },
{ value: "failed", label: __("Failed", "yatra") },
{ value: "refunded", label: __("Refunded", "yatra") },
{ value: "cancelled", label: __("Cancelled", "yatra") }
];
const sortOptions = [
{ value: "payment_date", label: __("Payment Date", "yatra") },
{ value: "payment_number", label: __("Payment Number", "yatra") },
{ value: "customer_name", label: __("Customer", "yatra") },
{ value: "amount", label: __("Amount", "yatra") },
{ value: "payment_method", label: __("Payment Method", "yatra") },
{ value: "payment_status", label: __("Status", "yatra") }
];
const columnOptions = [
{
key: "payment",
label: __("Payment", "yatra"),
visible: visibleColumns.payment
},
{
key: "customer",
label: __("Customer", "yatra"),
visible: visibleColumns.customer
},
{
key: "booking",
label: __("Booking", "yatra"),
visible: visibleColumns.booking
},
{
key: "amount",
label: __("Amount", "yatra"),
visible: visibleColumns.amount
},
{
key: "method",
label: __("Method", "yatra"),
visible: visibleColumns.method
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{ key: "date", label: __("Date", "yatra"), visible: visibleColumns.date }
];
const columns = [
{
key: "payment",
label: __("Payment", "yatra"),
sortable: true,
visible: visibleColumns.payment,
width: "w-[220px]",
render: (payment) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => handleView(payment),
className: "flex items-center gap-2 mb-1 group cursor-pointer",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CreditCard, { className: "w-4 h-4 text-blue-500 dark:text-blue-400 group-hover:text-blue-600 dark:group-hover:text-blue-300" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-blue-600 dark:text-blue-400 font-mono text-sm group-hover:text-blue-700 dark:group-hover:text-blue-300 group-hover:underline", children: payment.payment_number })
]
}
),
payment.transaction_id && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: [
__("TXN", "yatra"),
": ",
payment.transaction_id
] })
] })
},
{
key: "customer",
label: __("Customer", "yatra"),
sortable: true,
visible: visibleColumns.customer,
render: (payment) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: payment.customer_name }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: payment.customer_email })
] })
},
{
key: "booking",
label: __("Booking", "yatra"),
sortable: false,
visible: visibleColumns.booking,
render: (payment) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: payment.booking_number }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: payment.trip_title })
] })
},
{
key: "amount",
label: __("Amount", "yatra"),
sortable: true,
visible: visibleColumns.amount,
render: (payment) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-gray-900 dark:text-white", children: formatPrice(payment.amount, payment.currency || defaultCurrency) })
},
{
key: "method",
label: __("Method", "yatra"),
sortable: true,
visible: visibleColumns.method,
render: (payment) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: payment.payment_method })
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (payment) => getStatusBadge(payment.payment_status)
},
{
key: "date",
label: __("Date", "yatra"),
sortable: true,
visible: visibleColumns.date,
render: (payment) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: formatDate2(payment.payment_date) })
}
];
const actions = [
{
key: "view",
label: __("View", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (payment) => handleView(payment)
},
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (payment) => handleEdit(payment)
},
{
key: "download_invoice",
label: __("Download Invoice", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-4 h-4" }),
onClick: async (payment) => {
try {
await downloadAdminInvoice(payment.id);
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to download invoice", "yatra"),
"error"
);
}
},
condition: (payment) => ["completed", "paid"].includes(
String(payment.payment_status).toLowerCase()
)
},
{
key: "mark_completed",
label: __("Mark as Completed", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }),
onClick: async (payment) => {
setIsBulkPending(true);
try {
await updateStatusForIds([payment.id], "completed");
queryClient2.invalidateQueries({ queryKey: ["payments"] });
queryClient2.invalidateQueries({ queryKey: ["payments-stats"] });
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
showToast(__("Payment status updated", "yatra"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to update payment status", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (payment) => can("yatra_edit_bookings") && payment.payment_status !== "completed"
},
{
key: "mark_failed",
label: __("Mark as Failed", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (payment) => {
setIsBulkPending(true);
try {
await updateStatusForIds([payment.id], "failed");
queryClient2.invalidateQueries({ queryKey: ["payments"] });
queryClient2.invalidateQueries({ queryKey: ["payments-stats"] });
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
showToast(__("Payment status updated", "yatra"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to update payment status", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (payment) => can("yatra_edit_bookings") && payment.payment_status !== "failed"
},
{
key: "mark_refunded",
label: __("Mark as Refunded", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (payment) => {
setIsBulkPending(true);
try {
await updateStatusForIds([payment.id], "refunded");
queryClient2.invalidateQueries({ queryKey: ["payments"] });
queryClient2.invalidateQueries({ queryKey: ["payments-stats"] });
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
showToast(__("Payment status updated", "yatra"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to update payment status", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
// Refund cap matches the backend gate on PaymentController's
// update + delete endpoints. Previously this checked
// `yatra_edit_bookings`, which let Sales Agent / Front Desk
// see the Refund button — they'd then 403 on click. Accountant
// role holds `yatra_refund_bookings` without `yatra_edit_bookings`,
// so this is also what makes the button visible for them.
condition: (payment) => can("yatra_refund_bookings") && payment.payment_status !== "refunded"
},
{
key: "mark_cancelled",
label: __("Mark as Cancelled", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
onClick: async (payment) => {
setIsBulkPending(true);
try {
await updateStatusForIds([payment.id], "cancelled");
queryClient2.invalidateQueries({ queryKey: ["payments"] });
queryClient2.invalidateQueries({ queryKey: ["payments-stats"] });
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
showToast(__("Payment status updated", "yatra"), "success");
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to update payment status", "yatra"),
"error"
);
} finally {
setIsBulkPending(false);
}
},
condition: (payment) => can("yatra_edit_bookings") && payment.payment_status !== "cancelled"
},
{
key: "delete",
label: __("Delete", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (payment) => handleDelete(payment),
variant: "destructive"
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, payment: null }),
onConfirm: confirmDelete,
title: __("Delete Payment", "yatra"),
message: deleteConfirm.payment ? __(
'Are you sure you want to delete payment "{number}"? This action cannot be undone.',
"yatra"
).replace("{number}", deleteConfirm.payment.payment_number) : __(
"Are you sure you want to delete this payment? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Payments", "yatra"),
description: __("Manage payment records for bookings", "yatra"),
actionCapability: "yatra_edit_bookings",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreatePayment,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Payment", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions,
sortBy: sortBy2,
onSortByChange: (field) => {
setSortBy(field);
setPage(1);
},
sortOrder,
onSortOrderChange: (order) => {
setSortOrder(order);
setPage(1);
},
sortOptions,
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search payments...", "yatra")
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-auto flex lg:justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: methodFilter,
onChange: (e) => {
setMethodFilter(e.target.value);
setPage(1);
},
className: "w-full lg:w-48 max-w-xs",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Methods", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Credit Card", children: __("Credit Card", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "PayPal", children: __("PayPal", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Bank Transfer", children: __("Bank Transfer", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Cash", children: __("Cash", "yatra") })
]
}
) })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_bookings", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
!error && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions: [
{
key: "all",
label: __("All", "yatra"),
count: countFor("all")
},
{
key: "completed",
label: __("Completed", "yatra"),
count: countFor("completed")
},
{
key: "pending",
label: __("Pending", "yatra"),
count: countFor("pending")
},
{
key: "partial",
label: __("Partial", "yatra"),
count: countFor("partial")
},
{
key: "failed",
label: __("Failed", "yatra"),
count: countFor("failed")
},
{
key: "refunded",
label: __("Refunded", "yatra"),
count: countFor("refunded")
},
{
key: "cancelled",
label: __("Cancelled", "yatra"),
count: countFor("cancelled")
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: isBulkPending,
totalItems: total,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: payments,
columns,
actions,
isLoading,
isError: !!error,
errorText: __("Error loading payments", "yatra"),
errorDescription: __(
"We couldn’t connect to the payments service. Please refresh or try again in a moment.",
"We couldn’t connect to the payments service. Please refresh or try again in a moment."
),
onRetry: () => {
queryClient2.invalidateQueries({ queryKey: ["payments"] });
queryClient2.invalidateQueries({
queryKey: ["payments-stats"]
});
},
errorDetails: errorContext.details,
errorRequestInfo: errorContext.requestInfo,
emptyText: __("No payments found", "yatra"),
emptyDescription: hasFilters ? __(
"Try adjusting your filters to see more results.",
"yatra"
) : __(
"Get started by recording your first payment.",
"yatra"
),
onCreateClick: can("yatra_edit_bookings") ? handleCreatePayment : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: handleSelectItem,
onSelectAll: handleSelectAll,
isAllSelected,
getItemId: (payment) => payment.id,
skeletonRows: 5,
capability: "yatra_view_bookings"
}
) }) }),
!error && total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: perPage,
onPageChange: (newPage) => setPage(newPage),
itemName: __("payments", "yatra")
}
) })
] }) })
] });
};
const formatBookingLabel = (b) => {
var _a;
const code = b.booking_number || b.reference || `#${b.id}`;
const customer = (_a = b.customer_name) == null ? void 0 : _a.trim();
return customer ? `${code} — ${customer}` : code;
};
const formatBookingMeta = (b) => {
const parts = [];
if (b.trip_title) parts.push(b.trip_title);
if (b.customer_email) parts.push(b.customer_email);
return parts.join(" · ");
};
const BookingPicker = ({
value,
onChange,
placeholder = __("Select a booking…", "yatra"),
searchPlaceholder = __("Search by booking code, name, or email…", "yatra"),
className = "",
error = false,
disabled = false,
perPage = 20,
debounceMs = 300,
maxHeight = 320
}) => {
const [isOpen, setIsOpen] = reactExports.useState(false);
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [debouncedTerm, setDebouncedTerm] = reactExports.useState("");
const [results, setResults] = reactExports.useState([]);
const [isLoading, setIsLoading] = reactExports.useState(false);
const [loadError, setLoadError] = reactExports.useState("");
const [selected, setSelected] = reactExports.useState(null);
const containerRef = reactExports.useRef(null);
const searchInputRef = reactExports.useRef(null);
const requestIdRef = reactExports.useRef(0);
reactExports.useEffect(() => {
const timer2 = setTimeout(() => {
setDebouncedTerm(searchTerm.trim());
}, debounceMs);
return () => clearTimeout(timer2);
}, [searchTerm, debounceMs]);
reactExports.useEffect(() => {
if (!isOpen) return;
const reqId = ++requestIdRef.current;
setIsLoading(true);
setLoadError("");
apiService.getBookings({ search: debouncedTerm, per_page: perPage, page: 1 }).then((response) => {
var _a;
if (reqId !== requestIdRef.current) return;
const list = Array.isArray(response == null ? void 0 : response.data) ? response.data : Array.isArray((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.data) ? response.data.data : [];
setResults(list);
}).catch((err) => {
if (reqId !== requestIdRef.current) return;
setLoadError((err == null ? void 0 : err.message) || __("Failed to load bookings.", "yatra"));
setResults([]);
}).finally(() => {
if (reqId === requestIdRef.current) {
setIsLoading(false);
}
});
}, [isOpen, debouncedTerm, perPage]);
reactExports.useEffect(() => {
if (!value) {
setSelected(null);
return;
}
if (selected && String(selected.id) === String(value)) {
return;
}
let cancelled = false;
apiService.getBooking(value).then((response) => {
if (cancelled) return;
const data = (response == null ? void 0 : response.data) ?? response;
if (data && typeof data === "object" && data.id) {
setSelected(data);
}
}).catch(() => {
});
return () => {
cancelled = true;
};
}, [value]);
reactExports.useEffect(() => {
if (!isOpen) return;
const handler = (event) => {
if (containerRef.current && !containerRef.current.contains(event.target)) {
setIsOpen(false);
setSearchTerm("");
}
};
document.addEventListener("mousedown", handler);
const focusTimer = setTimeout(() => {
var _a;
return (_a = searchInputRef.current) == null ? void 0 : _a.focus();
}, 80);
return () => {
document.removeEventListener("mousedown", handler);
clearTimeout(focusTimer);
};
}, [isOpen]);
const handleToggle = () => {
if (disabled) return;
setIsOpen((prev) => !prev);
};
const handleSelect = (booking) => {
setSelected(booking);
setIsOpen(false);
setSearchTerm("");
onChange(String(booking.id), booking);
};
const handleClear = (e) => {
e.stopPropagation();
setSelected(null);
onChange("", null);
};
const closedLabel = reactExports.useMemo(() => {
if (selected) return formatBookingLabel(selected);
if (value) return `#${value}`;
return "";
}, [selected, value]);
const closedMeta = reactExports.useMemo(
() => selected ? formatBookingMeta(selected) : "",
[selected]
);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
ref: containerRef,
className: `relative ${className}`,
style: { zIndex: isOpen ? 9999 : "auto" },
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `flex min-h-[2.75rem] w-full rounded-md border-2 ${error ? "border-red-500" : "border-gray-300 dark:border-gray-600"} bg-white dark:bg-gray-800 px-4 py-2 text-base ring-offset-white focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:ring-offset-gray-900 dark:focus-within:ring-blue-400 transition-colors`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: handleToggle,
disabled,
className: `flex-1 flex items-center justify-between text-left ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
"aria-haspopup": "listbox",
"aria-expanded": isOpen,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: closedLabel ? "text-gray-900 dark:text-white" : "text-gray-500 dark:text-gray-400",
children: closedLabel ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: closedLabel }),
closedMeta && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: closedMeta })
] }) : placeholder
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 ml-2", children: [
value && !disabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
role: "button",
tabIndex: -1,
onClick: handleClear,
className: "p-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded",
"aria-label": __("Clear selection", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 text-gray-400" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ChevronDown,
{
className: `w-4 h-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
}
)
] })
]
}
)
}
),
isOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "absolute z-[9999] w-full mt-1 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-md shadow-lg overflow-hidden",
style: { maxHeight },
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
ref: searchInputRef,
type: "text",
placeholder: searchPlaceholder,
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
className: "pl-8 h-8",
onClick: (e) => e.stopPropagation()
}
),
isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "absolute right-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 animate-spin" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "overflow-y-auto",
style: { maxHeight: maxHeight - 56 },
children: loadError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-3 text-sm text-red-600 dark:text-red-400", children: loadError }) : isLoading && results.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-4 text-sm text-gray-500 dark:text-gray-400 text-center", children: __("Loading bookings…", "yatra") }) : results.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-4 text-sm text-gray-500 dark:text-gray-400 text-center", children: debouncedTerm ? __("No bookings match this search.", "yatra") : __("No bookings found.", "yatra") }) : results.map((booking) => {
const isActive = String(booking.id) === String(value);
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => handleSelect(booking),
className: `w-full px-3 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${isActive ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400" : "text-gray-900 dark:text-white"}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium truncate", children: formatBookingLabel(booking) }),
formatBookingMeta(booking) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: formatBookingMeta(booking) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap", children: [
"ID: ",
booking.id
] })
] })
},
booking.id
);
})
}
)
]
}
)
]
}
);
};
const PaymentForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const [formData, setFormData] = reactExports.useState({
booking_id: "",
amount: "",
payment_method: "Credit Card",
payment_status: "pending",
payment_date: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
transaction_id: "",
notes: ""
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const paymentId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const isEditMode = action === "edit" && paymentId !== null;
const { data: paymentData, isLoading: isLoadingPayment } = useQuery({
queryKey: ["payment", paymentId],
queryFn: async () => {
if (!paymentId) return null;
const result = await apiService.getPayment(paymentId);
if (!result) {
throw new Error("Failed to fetch payment");
}
if (!result.success) {
throw new Error(result.message || "Payment not found");
}
const data = result.data;
const processedAt = data.processed_at;
const processedDate = typeof processedAt === "string" && processedAt.includes(" ") ? processedAt.split(" ")[0] : (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
return {
id: data.id,
booking_id: data.booking_id,
amount: data.amount,
payment_method: data.gateway,
payment_status: data.status,
payment_date: processedDate,
transaction_id: data.transaction_id ?? "",
notes: data.notes ?? ""
};
},
enabled: isEditMode && can("yatra_view_bookings")
});
reactExports.useEffect(() => {
if (paymentData && isEditMode) {
setFormData({
booking_id: String(paymentData.booking_id ?? ""),
amount: String(paymentData.amount ?? ""),
payment_method: String(paymentData.payment_method || "Credit Card"),
payment_status: String(paymentData.payment_status || "pending") || "pending",
payment_date: String(
paymentData.payment_date || (/* @__PURE__ */ new Date()).toISOString().split("T")[0]
),
transaction_id: String(paymentData.transaction_id ?? ""),
notes: String(paymentData.notes ?? "")
});
}
}, [paymentData, isEditMode]);
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.booking_id.trim()) {
newErrors.booking_id = __("Booking is required", "yatra");
} else {
const bookingId = parseInt(formData.booking_id);
if (isNaN(bookingId) || bookingId <= 0) {
newErrors.booking_id = __("Valid booking ID is required", "yatra");
}
}
if (!formData.amount.trim()) {
newErrors.amount = __("Payment amount is required", "yatra");
} else {
const amount = parseFloat(formData.amount);
if (isNaN(amount) || amount <= 0) {
newErrors.amount = __(
"Payment amount must be a positive number",
"yatra"
);
}
}
if (!formData.payment_method.trim()) {
newErrors.payment_method = __("Payment method is required", "yatra");
}
if (!formData.payment_date.trim()) {
newErrors.payment_date = __("Payment date is required", "yatra");
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
booking_id: parseInt(data.booking_id),
amount: parseFloat(data.amount),
gateway: data.payment_method,
status: data.payment_status,
processed_at: data.payment_date,
transaction_id: data.transaction_id.trim() || null,
notes: data.notes.trim() || null
};
return isEditMode && paymentId ? await apiService.updatePayment(paymentId, payload) : await apiService.createPayment(payload);
},
onSuccess: () => {
var _a;
queryClient2.invalidateQueries({ queryKey: ["payments"] });
queryClient2.invalidateQueries({ queryKey: ["bookings"] });
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=payments`;
},
onError: (error) => {
console.error("Error saving payment:", error);
setErrors({
submit: error.message || __("Failed to save payment", "yatra")
});
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
try {
await saveMutation.mutateAsync(formData);
} catch (error) {
} finally {
setIsSubmitting(false);
}
};
const handleBack = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=payments`;
};
if (isLoadingPayment) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-6 h-6 animate-spin text-gray-400" }) });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Payment", "yatra") : __("Add New Payment", "yatra"),
description: isEditMode ? __("Update payment details", "yatra") : __("Record a new payment for a booking", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_bookings", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Payment Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "booking_id",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Booking", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Search by booking code (e.g. YTR-123), customer name, or email. Results load from your existing bookings as you type.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
BookingPicker,
{
value: formData.booking_id,
onChange: (id) => handleFieldChange("booking_id", id),
error: Boolean(errors.booking_id),
disabled: isEditMode,
placeholder: __("Select a booking…", "yatra"),
searchPlaceholder: __(
"Search by booking code, name, or email…",
"yatra"
)
}
),
errors.booking_id && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.booking_id
] }),
isEditMode && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: __(
"The booking linked to a payment cannot be changed after creation.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "amount",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Payment Amount", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("Enter the payment amount received.", "yatra"),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm", children: "$" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "amount",
type: "number",
min: "0",
step: "0.01",
value: formData.amount,
onChange: (e) => handleFieldChange("amount", e.target.value),
placeholder: __("e.g., 2500.00", "yatra"),
className: `pl-7 ${errors.amount ? "border-red-500" : ""}`,
required: true
}
)
] }),
errors.amount && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.amount
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "payment_method",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Payment Method", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Select the payment method used for this transaction.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "payment_method",
value: formData.payment_method,
onChange: (e) => handleFieldChange("payment_method", e.target.value),
className: errors.payment_method ? "border-red-500" : "",
required: true,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Credit Card", children: __("Credit Card", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Debit Card", children: __("Debit Card", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "PayPal", children: __("PayPal", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Bank Transfer", children: __("Bank Transfer", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Cash", children: __("Cash", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Check", children: __("Check", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "Other", children: __("Other", "yatra") })
]
}
),
errors.payment_method && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.payment_method
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "payment_date",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Payment Date", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Date when the payment was received.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
DatePicker,
{
value: formData.payment_date,
onChange: (value) => handleFieldChange("payment_date", value),
placeholder: __("Select payment date", "yatra"),
maxDate: /* @__PURE__ */ new Date(),
error: Boolean(errors.payment_date)
}
),
errors.payment_date && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.payment_date
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "transaction_id",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Transaction ID", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Optional transaction ID or reference number from the payment gateway.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "transaction_id",
type: "text",
value: formData.transaction_id,
onChange: (e) => handleFieldChange("transaction_id", e.target.value),
placeholder: __("e.g., TXN123456789", "yatra"),
className: errors.transaction_id ? "border-red-500" : ""
}
),
errors.transaction_id && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-4 h-4" }),
errors.transaction_id
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "notes",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Notes", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Optional notes about this payment for internal reference.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "notes",
value: formData.notes,
onChange: (e) => handleFieldChange("notes", e.target.value),
placeholder: __(
"e.g., Full payment received, Partial payment - balance pending",
"yatra"
),
rows: 3,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none"
}
)
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Payment Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: formData.payment_status,
onChange: (e) => handleFieldChange(
"payment_status",
e.target.value
),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "pending", children: __("Pending", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "completed", children: __("Completed", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "partial", children: __("Partial", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "failed", children: __("Failed", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "refunded", children: __("Refunded", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
formData.payment_status === "completed" && __("Payment has been successfully processed.", "yatra"),
formData.payment_status === "pending" && __("Payment is pending confirmation.", "yatra"),
formData.payment_status === "partial" && __(
"Partial payment recorded. Balance may be pending.",
"yatra"
),
formData.payment_status === "failed" && __(
"Payment processing failed. Please check the details.",
"yatra"
),
formData.payment_status === "refunded" && __("Payment has been refunded to the customer.", "yatra")
] })
] })
] }) })
] }),
errors.submit && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { variant: "error", className: "mt-3", children: errors.submit }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-3 mt-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleBack,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex items-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Payment", "yatra") : __("Record Payment", "yatra")
] })
}
)
] })
] }) })
] });
};
function paymentStr(v, fallback = "") {
if (v == null || v === "") return fallback;
return String(v);
}
function paymentNum(v) {
if (typeof v === "number" && !Number.isNaN(v)) return v;
const n = typeof v === "string" ? parseFloat(v) : NaN;
return Number.isNaN(n) ? 0 : n;
}
const ViewPayment = () => {
const { can } = usePermissions();
const { showToast } = useToast();
const [isDownloadingInvoice, setIsDownloadingInvoice] = React.useState(false);
const paymentId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const {
data: payment,
isLoading,
error
} = useQuery({
queryKey: ["payment", paymentId],
queryFn: async () => {
if (!paymentId) return null;
const result = await apiService.getPayment(paymentId);
if (!result) {
throw new Error("Failed to fetch payment");
}
if (!result.success) {
throw new Error(result.message || "Payment not found");
}
const data = result.data;
const idNum = paymentNum(data.id);
const bookingId = paymentNum(data.booking_id);
const ref = paymentStr(data.booking_reference);
const row = {
id: idNum,
payment_number: `PAY-${String(idNum).padStart(6, "0")}`,
booking_id: bookingId,
booking_number: ref || `#${bookingId}`,
customer_name: paymentStr(data.customer_name, "N/A"),
customer_email: paymentStr(data.customer_email),
customer_phone: paymentStr(data.customer_phone),
trip_id: paymentNum(data.trip_id),
trip_title: paymentStr(data.trip_title),
amount: paymentNum(data.amount),
payment_method: paymentStr(data.gateway),
payment_status: paymentStr(data.status, "pending"),
transaction_id: paymentStr(data.transaction_id),
payment_date: paymentStr(data.processed_at || data.created_at),
notes: paymentStr(data.notes),
created_at: paymentStr(data.created_at),
updated_at: paymentStr(data.updated_at)
};
return row;
},
enabled: !!paymentId && can("yatra_view_bookings")
});
const formatDate2 = (dateString) => {
return new Date(dateString).toLocaleDateString("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
});
};
const formatPrice = (price, currencyCode = "USD") => formatYatraMoney(Number(price) || 0, currencyCode, {
zeroAsUnknown: false
});
const getPaymentStatusBadge = (status) => {
const statusMap = {
completed: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Completed", "yatra")
},
pending: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __("Pending", "yatra")
},
partial: {
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400",
label: __("Partial", "yatra")
},
failed: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Failed", "yatra")
},
refunded: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Refunded", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-3 py-1 rounded-md text-sm font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const handleBack = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=payments`;
};
const handleEdit = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=payments&action=edit&id=${paymentId}`;
};
const handleViewBooking = () => {
var _a;
if (payment == null ? void 0 : payment.booking_id) {
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=bookings&action=view&id=${payment.booking_id}`;
}
};
const handleDownloadInvoice = async () => {
if (!paymentId) return;
setIsDownloadingInvoice(true);
try {
await downloadAdminInvoice(paymentId);
} catch (e) {
showToast(
(e == null ? void 0 : e.message) || __("Failed to download invoice", "yatra"),
"error"
);
} finally {
setIsDownloadingInvoice(false);
}
};
const canDownloadInvoice = !!payment && ["completed", "paid"].includes(
String(payment.payment_status).toLowerCase()
);
if (isLoading) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Payment Details", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-40" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-12 w-full" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-12 w-full" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-12 w-full" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-12 w-full" })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-32" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-12 w-full" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-12 w-full" })
] }) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-24" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-full" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-3/4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-1/2" })
] })
] }) })
] })
] });
}
if (error || !payment) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Payment Not Found", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back to Payments", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-8 text-center text-red-500", children: __(
"Payment not found or you do not have permission to view it.",
"yatra"
) }) })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Payment Details", "yatra"),
description: __("View complete payment information", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
),
canDownloadInvoice && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleDownloadInvoice,
disabled: isDownloadingInvoice,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-4 h-4" }),
isDownloadingInvoice ? __("Downloading…", "yatra") : __("Download Invoice", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_bookings", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: handleEdit, className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
__("Edit Payment", "yatra")
] }) })
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_bookings", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Payment Information", "yatra") }),
getPaymentStatusBadge(payment.payment_status)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Payment Number", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm font-mono font-semibold text-gray-900 dark:text-white", children: payment.payment_number })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Payment Amount", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-lg font-semibold text-gray-900 dark:text-white", children: formatPrice(payment.amount) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Payment Method", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CreditCard, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: payment.payment_method })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Payment Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: formatDate2(payment.payment_date) })
] })
] }),
payment.transaction_id && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Transaction ID", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm font-mono text-gray-900 dark:text-white", children: payment.transaction_id })
] })
] }),
payment.notes && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pt-4 border-t border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2 block", children: __("Notes", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap", children: payment.notes })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Related Booking", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "ghost",
size: "sm",
onClick: handleViewBooking,
className: "flex items-center gap-1.5 text-sm",
children: [
__("View Booking", "yatra"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3.5 h-3.5" })
]
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Booking Number", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm font-mono font-semibold text-gray-900 dark:text-white", children: payment.booking_number })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Trip", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm font-medium text-gray-900 dark:text-white", children: payment.trip_title })
] })
] }) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Customer", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: payment.customer_name }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: payment.customer_email })
] }),
payment.customer_phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: payment.customer_phone })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Timeline", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Created", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-gray-900 dark:text-white", children: formatDate2(payment.created_at) })
] }),
payment.updated_at && payment.updated_at !== payment.created_at && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Last Updated", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-gray-900 dark:text-white", children: formatDate2(payment.updated_at) })
] })
] })
] })
] })
] }) })
] });
};
const TravelerCategories = () => {
var _a;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("id");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
category: null
});
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const baseAdminUrl = ((_a = window.yatraAdmin) == null ? void 0 : _a.adminUrl) || "";
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const { data: statsData } = useQuery({
queryKey: ["traveler-categories-stats"],
queryFn: async () => {
try {
const response = await apiClient.get("/traveler-categories/stats");
return response;
} catch (error2) {
return { all: 0, publish: 0, draft: 0, trash: 0 };
}
},
enabled: can("yatra_view_trips")
});
const { data, isLoading, error } = useQuery({
queryKey: ["traveler-categories", queryParams],
queryFn: async () => {
try {
const response = await apiClient.get("/traveler-categories", {
params: queryParams
});
return response;
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to load traveler categories", "yatra"),
"error"
);
throw error2;
}
},
enabled: can("yatra_view_trips")
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/traveler-categories/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["traveler-categories"] });
queryClient2.invalidateQueries({
queryKey: ["traveler-categories-stats"]
});
showToast(
__("Traveler category deleted successfully", "yatra"),
"success"
);
setDeleteConfirm({ isOpen: false, category: null });
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete traveler category", "yatra"),
"error"
);
}
});
const categories = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 10);
const errorContext = getErrorContext(error);
const apiErrorMessage = (data == null ? void 0 : data.error) || (data == null ? void 0 : data.message);
const isCategoriesError = !!error || !!apiErrorMessage;
const formatDate2 = (dateString) => {
if (!dateString) return __("N/A", "yatra");
try {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "2-digit"
});
} catch (e) {
return dateString;
}
};
const getStatusBadge = (status) => {
const statusMap = {
publish: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Publish", "yatra")
},
draft: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Draft", "yatra")
},
trash: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Trash", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${statusInfo.className}`,
children: statusInfo.label
}
);
};
const formatUser = (userId, userName) => {
if (userName) {
return userName;
}
return `User #${userId}`;
};
const formatAgeRange = (ageMin, ageMax) => {
if (ageMin !== null && ageMin !== void 0 && ageMax !== null && ageMax !== void 0) {
return `${ageMin}-${ageMax} ${__("years old", "yatra")}`;
} else if (ageMin !== null && ageMin !== void 0) {
return `${ageMin}+ ${__("years old", "yatra")}`;
} else if (ageMax !== null && ageMax !== void 0) {
return `${__("Under", "yatra")} ${ageMax} ${__("years old", "yatra")}`;
}
return __("No age restriction", "yatra");
};
const formatPricing = (category) => {
const mode = category.pricing_mode || "per_person";
if (mode === "per_group") {
const hasMin = category.min_pax !== null && category.min_pax !== void 0;
const hasMax = category.max_pax !== null && category.max_pax !== void 0;
if (hasMin && hasMax) {
return `${__("Per group", "yatra")} (${category.min_pax}-${category.max_pax})`;
}
if (hasMin) {
return `${__("Per group", "yatra")} (${__("From", "yatra")} ${category.min_pax})`;
}
if (hasMax) {
return `${__("Per group", "yatra")} (${__("Up to", "yatra")} ${category.max_pax})`;
}
return __("Per group", "yatra");
}
return __("Per person", "yatra");
};
const renderIcon = (icon) => {
if (!icon) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "—" }) });
}
if (icon.type === "image") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: icon.value,
alt: "",
className: "w-8 h-8 rounded object-cover",
onError: (e) => {
const target2 = e.target;
target2.style.display = "none";
if (target2.parentElement) {
target2.parentElement.innerHTML = '—
';
}
}
}
);
}
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: icon.value,
provider: icon.provider ?? "yatra",
className: "w-5 h-5 text-gray-600 dark:text-gray-400"
}
) });
};
const handleEdit = (category) => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=traveler-categories&action=edit&id=${category.id}`;
};
const handleDelete = (category) => {
setDeleteConfirm({ isOpen: true, category });
};
const confirmDelete = () => {
if (deleteConfirm.category) {
deleteMutation.mutate(deleteConfirm.category.id);
}
};
const handleCreateCategory = () => {
window.location.href = `${baseAdminUrl}?page=yatra&subpage=traveler-categories&action=create`;
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("label");
setSortOrder("asc");
setPage(1);
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("asc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "id" || sortOrder !== "desc";
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState({
category: true,
description: true,
age_range: true,
pricing: true,
status: true,
dates: true,
author: true
});
const toggleColumnVisibility = (key2) => {
setVisibleColumns((prev) => ({
...prev,
[key2]: !prev[key2]
}));
};
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: statsData.all ?? 0,
publish: statsData.publish ?? 0,
draft: statsData.draft ?? 0,
trash: statsData.trash ?? 0
};
}
return {
all: 0,
publish: 0,
draft: 0,
trash: 0
};
}, [statsData]);
const bulkMutation = useMutation({
mutationFn: async ({
action,
ids
}) => {
if (action === "delete") {
await Promise.all(
ids.map((id) => apiClient.delete(`/traveler-categories/${id}`))
);
} else {
await Promise.all(
ids.map(async (id) => {
try {
const response = await apiClient.get(
`/traveler-categories/${id}`
);
const category = response;
if (!category || !category.label) {
return;
}
await apiClient.put(`/traveler-categories/${id}`, {
label: category.label,
slug: category.slug,
description: category.description,
age_min: category.age_min,
age_max: category.age_max,
icon: category.icon,
pricing_mode: category.pricing_mode || "per_person",
min_pax: category.min_pax ?? null,
max_pax: category.max_pax ?? null,
status: action
});
} catch {
throw new Error("bulk_item_failed");
}
})
);
}
},
onSuccess: (_data, variables) => {
queryClient2.invalidateQueries({ queryKey: ["traveler-categories"] });
queryClient2.invalidateQueries({
queryKey: ["traveler-categories-stats"]
});
const msgMap = {
delete: __(
"Selected traveler categories deleted successfully",
"yatra"
),
trash: __("Selected traveler categories moved to trash", "yatra"),
draft: __("Selected traveler categories marked as draft", "yatra"),
publish: __("Selected traveler categories published", "yatra")
};
showToast(
msgMap[variables.action] || __("Bulk action completed", "yatra"),
"success"
);
setSelectedIds([]);
setBulkAction("");
},
onError: (error2, variables) => {
const msgMapError = {
delete: __("Failed to delete selected traveler categories", "yatra"),
trash: __("Failed to move traveler categories to trash", "yatra"),
draft: __("Failed to mark traveler categories as draft", "yatra"),
publish: __("Failed to publish traveler categories", "yatra")
};
showToast(
(error2 == null ? void 0 : error2.message) || msgMapError[variables.action] || __("Bulk action failed", "yatra"),
"error"
);
}
});
const handleBulkApply = () => {
if (!bulkAction) {
showToast(__("Select a bulk action first.", "yatra"), "warning");
return;
}
if (selectedIds.length === 0) {
showToast(
__("Select at least one traveler category.", "yatra"),
"warning"
);
return;
}
bulkMutation.mutate({ action: bulkAction, ids: selectedIds });
};
const columns = [
{
key: "category",
label: __("Category", "yatra"),
sortable: true,
visible: visibleColumns.category,
render: (category) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
renderIcon(category.icon),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${baseAdminUrl}?page=yatra&subpage=traveler-categories&action=edit&id=${category.id}`,
className: "font-medium text-gray-900 dark:text-white text-blue-600 dark:text-blue-400 hover:underline underline-offset-2",
children: category.label
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: category.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-400 dark:text-gray-500", children: [
"(ID: ",
category.id,
")"
] })
] })
] })
] })
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description,
render: (category) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 dark:text-gray-400 text-sm line-clamp-2", children: category.description || __("No description", "yatra") })
},
{
key: "age_range",
label: __("Age Range", "yatra"),
visible: visibleColumns.age_range,
render: (category) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: formatAgeRange(category.age_min, category.age_max) })
},
{
key: "pricing",
label: __("Pricing", "yatra"),
visible: visibleColumns.pricing,
render: (category) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: formatPricing(category) })
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (category) => getStatusBadge(category.status)
},
{
key: "dates",
label: __("Date", "yatra"),
sortable: true,
visible: visibleColumns.dates,
render: (category) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-gray-500 dark:text-gray-400 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: formatDate2(category.created_at) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-400 dark:text-gray-500 mt-0.5", children: [
__("Updated", "yatra"),
": ",
formatDate2(category.updated_at)
] })
] })
},
{
key: "author",
label: __("Author", "yatra"),
visible: visibleColumns.author,
render: (category) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: formatUser(category.created_by, category.created_by_name) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-400 dark:text-gray-500 mt-0.5", children: [
__("Updated by", "yatra"),
":",
" ",
formatUser(category.updated_by, category.updated_by_name)
] })
] })
}
];
const actions = [
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (category) => handleEdit(category),
condition: () => can("yatra_edit_trips")
},
{
key: "publish",
label: __("Make Published", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (category) => bulkMutation.mutate({ action: "publish", ids: [category.id] }),
condition: (category) => can("yatra_edit_trips") && category.status !== "publish"
},
{
key: "draft",
label: __("Make Draft", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (category) => bulkMutation.mutate({ action: "draft", ids: [category.id] }),
condition: (category) => can("yatra_edit_trips") && category.status !== "draft"
},
{
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (category) => bulkMutation.mutate({ action: "trash", ids: [category.id] }),
variant: "destructive",
condition: (category) => can("yatra_edit_trips") && category.status !== "trash"
},
{
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (category) => handleDelete(category),
variant: "destructive",
condition: (category) => can("yatra_delete_trips") && category.status === "trash"
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, category: null }),
onConfirm: confirmDelete,
title: __("Delete Traveler Category", "yatra"),
message: deleteConfirm.category ? __(
'Are you sure you want to delete "{label}"? This action cannot be undone.',
"yatra"
).replace("{label}", deleteConfirm.category.label) : __(
"Are you sure you want to delete this traveler category? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Traveler Categories", "yatra"),
description: __(
"Manage pricing categories for different types of travelers",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateCategory,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Category", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions: [
{ value: "all", label: __("All Status", "yatra") },
{ value: "publish", label: __("Publish", "yatra") },
{ value: "draft", label: __("Draft", "yatra") },
{ value: "trash", label: __("Trash", "yatra") }
],
sortBy: sortBy2,
onSortByChange: (value) => {
setSortBy(value);
setSortOrder("asc");
setPage(1);
},
sortOrder,
onSortOrderChange: (order) => {
setSortOrder(order);
setPage(1);
},
sortOptions: [
{ value: "id", label: __("ID", "yatra") },
{ value: "label", label: __("Label", "yatra") },
{ value: "status", label: __("Status", "yatra") },
{ value: "created_at", label: __("Created At", "yatra") },
{ value: "updated_at", label: __("Updated At", "yatra") }
],
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search categories...", "yatra")
}
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(ConditionalRender, { capability: "yatra_view_trips", children: [
!isCategoriesError && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{
key: "all",
label: __("All", "yatra"),
count: statusCounts.all
},
{
key: "publish",
label: __("Published", "yatra"),
count: statusCounts.publish
},
{
key: "draft",
label: __("Draft", "yatra"),
count: statusCounts.draft
},
{
key: "trash",
label: __("Trash", "yatra"),
count: statusCounts.trash
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "category",
label: __("Category", "yatra"),
visible: visibleColumns.category
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description
},
{
key: "age_range",
label: __("Age Range", "yatra"),
visible: visibleColumns.age_range
},
{
key: "pricing",
label: __("Pricing", "yatra"),
visible: visibleColumns.pricing
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "dates",
label: __("Date", "yatra"),
visible: visibleColumns.dates
},
{
key: "author",
label: __("Author", "yatra"),
visible: visibleColumns.author
}
],
onToggleColumn: (key2) => toggleColumnVisibility(key2),
bulkMutationPending: bulkMutation.isPending,
totalItems: categories.length,
bulkActionOptions: getDefaultBulkStatusOptions(statusFilter).filter(
(opt) => opt.value !== "delete" || can("yatra_delete_trips")
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: categories,
columns,
actions,
isLoading,
isError: isCategoriesError,
errorText: __("Error loading traveler categories", "yatra"),
errorDescription: __(
"We couldn’t connect to the traveler categories service. Please refresh or try again shortly.",
"We couldn’t connect to the traveler categories service. Please refresh or try again shortly."
),
errorDetails: errorContext.details || apiErrorMessage,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => queryClient2.invalidateQueries({
queryKey: ["traveler-categories"]
}),
emptyText: __("No traveler categories found", "yatra"),
emptyDescription: hasFilters ? __(
"Try adjusting your filters to see more results.",
"yatra"
) : __(
"Get started by creating your first traveler category.",
"yatra"
),
onCreateClick: can("yatra_edit_trips") ? handleCreateCategory : void 0,
onSort: handleSort,
getSortIcon,
capability: "yatra_view_trips",
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds((prev) => Array.from(/* @__PURE__ */ new Set([...prev, id])));
} else {
setSelectedIds(
(prev) => prev.filter((existingId) => existingId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(
categories.map((cat) => cat.id)
);
} else {
setSelectedIds([]);
}
},
isAllSelected: categories.length > 0 && selectedIds.length === categories.length,
getItemId: (cat) => cat.id,
getItemStatus: (cat) => cat.status,
statusFilter
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: (newPage) => setPage(newPage),
itemName: __("categories", "yatra")
}
) })
] })
] });
};
const TravelerCategoryForm = () => {
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
label: "",
slug: "",
description: "",
age_min: "",
age_max: "",
icon: null,
status: "publish",
pricing_mode: "per_person",
min_pax: "",
max_pax: ""
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const [isSlugEditable, setIsSlugEditable] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const categoryId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const isEditMode = action === "edit" && categoryId !== null;
const { data: categoryData, isLoading: isLoadingCategory } = useQuery({
queryKey: ["traveler-category", categoryId],
queryFn: async () => {
if (!categoryId) return null;
try {
const response = await apiClient.get(
`/traveler-categories/${categoryId}`
);
return response;
} catch (error) {
showToast(
(error == null ? void 0 : error.message) || __("Failed to load traveler category", "yatra"),
"error"
);
throw error;
}
},
enabled: isEditMode && can("yatra_view_trips")
});
reactExports.useEffect(() => {
var _a, _b;
if (categoryData && isEditMode) {
setFormData({
label: categoryData.label || "",
slug: categoryData.slug || "",
description: categoryData.description || "",
age_min: ((_a = categoryData.age_min) == null ? void 0 : _a.toString()) || "",
age_max: ((_b = categoryData.age_max) == null ? void 0 : _b.toString()) || "",
icon: categoryData.icon || null,
status: categoryData.status || "draft",
pricing_mode: categoryData.pricing_mode || "per_person",
min_pax: categoryData.min_pax !== void 0 && categoryData.min_pax !== null ? categoryData.min_pax.toString() : "",
max_pax: categoryData.max_pax !== void 0 && categoryData.max_pax !== null ? categoryData.max_pax.toString() : ""
});
}
}, [categoryData, isEditMode]);
const handleLabelChange = (value) => {
if (!isEditMode && !isSlugEditable) {
const newSlug = generateSlug(value);
setFormData((prev) => ({
...prev,
label: value,
slug: newSlug
}));
} else {
setFormData((prev) => ({
...prev,
label: value
}));
}
if (errors.label) {
setErrors((prev) => ({ ...prev, label: "" }));
}
};
const handleSlugChange = (value) => {
if (isSlugEditable) {
setFormData((prev) => ({ ...prev, slug: value }));
if (errors.slug) {
setErrors((prev) => ({ ...prev, slug: "" }));
}
}
};
const handleToggleSlugEdit = () => {
if (isSlugEditable) {
const newSlug = generateSlug(formData.label);
setFormData((prev) => ({ ...prev, slug: newSlug }));
}
setIsSlugEditable(!isSlugEditable);
};
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.label.trim()) {
newErrors.label = __("Label is required", "yatra");
}
if (!formData.slug.trim()) {
newErrors.slug = __("Slug is required", "yatra");
} else if (!/^[\p{L}\p{N}-]+$/u.test(formData.slug)) {
newErrors.slug = __(
"Slug can only contain letters, numbers, and hyphens",
"yatra"
);
}
if (!formData.description.trim()) {
newErrors.description = __("Description is required", "yatra");
}
if (formData.age_min && isNaN(parseInt(formData.age_min))) {
newErrors.age_min = __("Minimum age must be a valid number", "yatra");
}
if (formData.age_max && isNaN(parseInt(formData.age_max))) {
newErrors.age_max = __("Maximum age must be a valid number", "yatra");
}
if (formData.age_min && formData.age_max && parseInt(formData.age_min) >= parseInt(formData.age_max)) {
newErrors.age_max = __(
"Maximum age must be greater than minimum age",
"yatra"
);
}
if (formData.pricing_mode === "per_group") {
if (formData.min_pax && isNaN(parseInt(formData.min_pax))) {
newErrors.min_pax = __(
"Minimum group size must be a valid number",
"yatra"
);
}
if (formData.max_pax && isNaN(parseInt(formData.max_pax))) {
newErrors.max_pax = __(
"Maximum group size must be a valid number",
"yatra"
);
}
if (formData.min_pax && formData.max_pax && !isNaN(parseInt(formData.min_pax)) && !isNaN(parseInt(formData.max_pax)) && parseInt(formData.min_pax) > parseInt(formData.max_pax)) {
newErrors.max_pax = __(
"Maximum group size should be greater than or equal to minimum group size",
"yatra"
);
}
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const saveMutation = useMutation({
mutationFn: async (data) => {
const payload = {
label: data.label.trim(),
slug: data.slug.trim(),
description: data.description.trim(),
icon: data.icon,
status: data.status
};
if (data.age_min && data.age_min.trim() !== "") {
payload.age_min = parseInt(data.age_min);
} else {
payload.age_min = null;
}
if (data.age_max && data.age_max.trim() !== "") {
payload.age_max = parseInt(data.age_max);
} else {
payload.age_max = null;
}
payload.pricing_mode = data.pricing_mode || "per_person";
if (data.pricing_mode === "per_group") {
if (data.min_pax && data.min_pax.trim() !== "") {
payload.min_pax = parseInt(data.min_pax);
} else {
payload.min_pax = null;
}
if (data.max_pax && data.max_pax.trim() !== "") {
payload.max_pax = parseInt(data.max_pax);
} else {
payload.max_pax = null;
}
} else {
payload.min_pax = null;
payload.max_pax = null;
}
if (isEditMode && isSlugEditable) {
payload.preserve_slug = true;
}
if (isEditMode && categoryId) {
return await apiClient.put(
`/traveler-categories/${categoryId}`,
payload
);
} else {
return await apiClient.post("/traveler-categories", payload);
}
},
onSuccess: (response) => {
var _a;
queryClient2.invalidateQueries({ queryKey: ["traveler-categories"] });
queryClient2.invalidateQueries({
queryKey: ["traveler-category", categoryId]
});
showToast(
isEditMode ? __("Traveler category updated successfully", "yatra") : __("Traveler category created successfully", "yatra"),
"success"
);
if (!isEditMode) {
const newId = (response == null ? void 0 : response.id) || ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.id);
if (newId) {
setTimeout(() => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=traveler-categories&action=edit&id=${newId}`;
}, 800);
}
} else {
setIsSubmitting(false);
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the traveler category", "yatra");
showToast(errorMessage, "error");
setIsSubmitting(false);
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
showToast(__("Please fix the form errors", "yatra"), "warning");
return;
}
setIsSubmitting(true);
setErrors({});
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=traveler-categories`;
};
if (isEditMode && isLoadingCategory) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Edit Category", "yatra"),
description: __("Update traveler category information", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "w-24 h-9 rounded-md" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-48" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
[1, 2, 3].map((section) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-10 w-full" })
] }, section)),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-24 w-full" })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: [1, 2, 3].map((card) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-36" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-40 w-full" }) })
] }, card)) })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Category", "yatra") : __("Add Category", "yatra"),
description: isEditMode ? __("Update traveler category information", "yatra") : __("Create a new traveler category for pricing", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Category Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "label",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Category Label", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"The name of this traveler category (e.g., Adult, Child, Senior, Student)",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "label",
type: "text",
value: formData.label,
onChange: (e) => handleLabelChange(e.target.value),
placeholder: __("e.g., Adult", "yatra"),
className: errors.label ? "border-red-500" : "",
required: true
}
),
errors.label && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4" }),
errors.label
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "slug",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Slug", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "slug",
type: "text",
value: formData.slug,
onChange: (e) => handleSlugChange(e.target.value),
placeholder: __("category-slug", "yatra"),
className: `pr-10 ${errors.slug ? "border-red-500" : ""} ${!isSlugEditable ? "bg-gray-50 dark:bg-gray-800 cursor-not-allowed" : ""}`,
disabled: !isSlugEditable,
required: true
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: handleToggleSlugEdit,
className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors rounded",
"aria-label": isSlugEditable ? __("Cancel editing slug", "yatra") : __("Edit slug", "yatra"),
children: isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-4 h-4" })
}
)
] }),
errors.slug && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: isSlugEditable ? __(
"You are manually editing the slug. Click X to cancel and regenerate from label.",
"yatra"
) : __(
"This slug is auto-generated from the label. Click the edit icon to customize.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "description",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Description", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"A brief description of this category and who it applies to",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "description",
value: formData.description,
onChange: (e) => handleFieldChange("description", e.target.value),
placeholder: __(
"e.g., Standard adult pricing for travelers aged 18 and above",
"yatra"
),
rows: 3,
className: `flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none ${errors.description ? "border-red-500" : ""}`,
required: true
}
),
errors.description && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4" }),
errors.description
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: __("Age Range", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Specify the age range for this category (e.g., 0-4 for Infant, 5-17 for Child, 18+ for Adult). Leave empty if no age restriction.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "age_min",
className: "block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5",
children: __("Minimum Age", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "age_min",
type: "number",
min: "0",
value: formData.age_min,
onChange: (e) => handleFieldChange("age_min", e.target.value),
placeholder: __("e.g., 0, 5, 18", "yatra"),
className: errors.age_min ? "border-red-500" : ""
}
),
errors.age_min && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4" }),
errors.age_min
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "age_max",
className: "block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5",
children: __("Maximum Age", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "age_max",
type: "number",
min: "0",
value: formData.age_max,
onChange: (e) => handleFieldChange("age_max", e.target.value),
placeholder: __(
"e.g., 4, 17, leave empty for 18+",
"yatra"
),
className: errors.age_max ? "border-red-500" : ""
}
),
errors.age_max && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4" }),
errors.age_max
] })
] })
] }),
formData.age_min && formData.age_max && parseInt(formData.age_min) >= parseInt(formData.age_max) && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-yellow-600 dark:text-yellow-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4" }),
__(
"Minimum age should be less than maximum age",
"yatra"
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: __("Pricing Mode", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Choose how this traveler category is priced. Per person charges per traveler, while per group uses a flat price for a group booking.",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "pricing_mode",
value: formData.pricing_mode,
onChange: (e) => handleFieldChange(
"pricing_mode",
e.target.value
),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "per_person", children: __("Per person", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "per_group", children: __("Per group", "yatra") })
]
}
),
formData.pricing_mode === "per_group" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Optional group size limits for this category. These are used to validate bookings when this category is priced per group.",
"yatra"
),
className: "mb-1"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "min_pax",
className: "block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5",
children: __("Minimum Group Size", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "min_pax",
type: "number",
min: "1",
value: formData.min_pax,
onChange: (e) => handleFieldChange("min_pax", e.target.value),
placeholder: __("e.g., 10", "yatra"),
className: errors.min_pax ? "border-red-500" : ""
}
),
errors.min_pax && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4" }),
errors.min_pax
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "max_pax",
className: "block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5",
children: __("Maximum Group Size", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "max_pax",
type: "number",
min: "1",
value: formData.max_pax,
onChange: (e) => handleFieldChange("max_pax", e.target.value),
placeholder: __("e.g., 6 (optional)", "yatra"),
className: errors.max_pax ? "border-red-500" : ""
}
),
errors.max_pax && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1.5 text-sm text-red-600 dark:text-red-400 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4" }),
errors.max_pax
] })
] })
] })
] })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Category Icon or Image", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconPicker,
{
value: formData.icon,
onChange: (value) => handleFieldChange("icon", value),
label: void 0,
helpText: __(
"Select an icon from the library or upload a custom image for this category.",
"yatra"
),
allowImageUpload: true,
allowIconSelection: true,
size: "md"
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Draft categories will not be available when creating trips",
"yatra"
),
className: "mb-2"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange(
"status",
e.target.value
),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra"),
"..."
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Category", "yatra") : __("Create Category", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] }) }) }) })
] })
] }) }) })
] });
};
const AvailabilityCalendar = ({
dates,
tripType = "multi_day",
currency = "USD",
onDateClick
}) => {
const { navigate } = useNavigate();
const [currentMonth, setCurrentMonth] = reactExports.useState(/* @__PURE__ */ new Date());
const datesByDate = reactExports.useMemo(() => {
const grouped = {};
dates.forEach((date2) => {
const key2 = date2.departure_date;
if (!grouped[key2]) {
grouped[key2] = [];
}
grouped[key2].push(date2);
});
return grouped;
}, [dates]);
const getDateAvailability = (date2) => {
const dateKey = format(date2, "yyyy-MM-dd");
return datesByDate[dateKey] || [];
};
const getDateColorClass = (dateAvailabilities) => {
if (dateAvailabilities.length === 0) {
return "bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700";
}
if (dateAvailabilities.some((d) => d.is_blocked)) {
return "bg-red-100 dark:bg-red-900/20 border-red-300 dark:border-red-800";
}
if (dateAvailabilities.every(
(d) => d.available_seats === 0 || d.status === "sold_out"
)) {
return "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600";
}
const hasLowAvailability = dateAvailabilities.some((d) => {
const threshold2 = d.alert_threshold || 5;
return d.available_seats > 0 && d.available_seats <= threshold2;
});
if (hasLowAvailability) {
return "bg-yellow-100 dark:bg-yellow-900/20 border-yellow-300 dark:border-yellow-800";
}
if (dateAvailabilities.some((d) => d.status === "limited")) {
return "bg-orange-100 dark:bg-orange-900/20 border-orange-300 dark:border-orange-800";
}
return "bg-green-100 dark:bg-green-900/20 border-green-300 dark:border-green-800";
};
const monthStart = startOfMonth(currentMonth);
const monthEnd = endOfMonth(currentMonth);
const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });
const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
const previousMonth = () => {
setCurrentMonth(subMonths(currentMonth));
};
const nextMonth = () => {
setCurrentMonth(addMonths(currentMonth, 1));
};
const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const formatTime = (timeString) => {
if (!timeString) return "";
const [hours, minutes] = timeString.split(":");
const hour = parseInt(hours);
const ampm = hour >= 12 ? "PM" : "AM";
return `${hour % 12 || 12}:${minutes} ${ampm}`;
};
const formatTimeForDisplay = (timeString) => {
if (!timeString) return "";
const time2 = /* @__PURE__ */ new Date(`1970-01-01T${timeString}`);
const timeStringFormatted = time2.toLocaleTimeString("en-US", {
hour12: false,
hour: "numeric",
minute: "2-digit"
});
return timeStringFormatted;
};
const getCurrencySymbol2 = (currency2) => {
const symbols = {
USD: "$",
EUR: "€",
GBP: "£",
INR: "₹"
};
return symbols[currency2] || currency2;
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
size: "sm",
onClick: previousMonth,
className: "h-8 w-8 p-0",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "w-4 h-4" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: format(currentMonth, "MMMM yyyy") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
size: "sm",
onClick: nextMonth,
className: "h-8 w-8 p-0",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: weekDays.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "p-2 text-center text-xs font-medium text-gray-700 dark:text-gray-300 border-r border-gray-200 dark:border-gray-700 last:border-r-0",
children: day
},
day
)) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7", children: days.map((day, dayIdx) => {
const isCurrentMonth = isSameMonth(day, currentMonth);
const isTodayDate = isToday(day);
const dateAvailabilities = getDateAvailability(day);
const colorClass = getDateColorClass(dateAvailabilities);
const hasMultipleSlots = dateAvailabilities.length > 1;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `
min-h-[80px] p-1 border-r border-b border-gray-200 dark:border-gray-700
${isCurrentMonth ? "" : "bg-gray-50 dark:bg-gray-900/50 opacity-50"}
${colorClass}
`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `
text-xs font-medium
${isTodayDate ? "bg-blue-600 text-white rounded-full w-5 h-5 flex items-center justify-center" : ""}
${isCurrentMonth ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-600"}
`,
children: isTodayDate ? format(day, "d") : format(day, "d")
}
),
hasMultipleSlots && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "text-xs bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400", children: dateAvailabilities.length })
] }),
isCurrentMonth && dateAvailabilities.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 space-y-1 relative", children: [
dateAvailabilities.slice(0, 2).map((availability) => {
const isBlocked = availability.is_blocked;
const isSoldOut = availability.available_seats === 0;
const isLow = availability.available_seats > 0 && availability.available_seats <= (availability.alert_threshold || 5);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
className: "w-full text-left p-1 rounded text-xs hover:bg-white/50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 mb-0.5", children: [
tripType === "single_day" && availability.departure_time && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium", children: formatTime(
availability.departure_time
) }),
isBlocked && /* @__PURE__ */ jsxRuntimeExports.jsx(Ban, { className: "w-3 h-3 text-red-600 dark:text-red-400" }),
isLow && !isBlocked && /* @__PURE__ */ jsxRuntimeExports.jsx(Bell, { className: "w-3 h-3 text-yellow-600 dark:text-yellow-400" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-3 h-3 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `text-xs font-semibold ${isSoldOut ? "text-red-600 dark:text-red-400" : isLow ? "text-yellow-600 dark:text-yellow-400" : "text-green-600 dark:text-green-400"}`,
children: availability.available_seats
}
),
availability.waitlist_count > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-blue-600 dark:text-blue-400", children: [
"+",
availability.waitlist_count
] })
] })
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PopoverContent,
{
className: "w-80 p-4 z-50",
align: "start",
side: "right",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold text-sm text-gray-900 dark:text-white", children: format(
parseISO(availability.departure_date),
"EEEE, MMMM d, yyyy"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => {
if (onDateClick) {
onDateClick(availability);
} else {
navigate({
subpage: "trips",
tab: "availability",
action: "edit",
id: availability.id
});
}
},
className: "h-7 w-7 p-0",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-3.5 h-3.5" })
}
)
] }),
tripType === "single_day" && availability.departure_time && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
__("Time", "yatra"),
":",
" ",
formatTimeForDisplay(
availability.departure_time
),
" ",
"-",
" ",
availability.arrival_time ? formatTimeForDisplay(
availability.arrival_time
) : ""
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-500 dark:text-gray-400 mb-1", children: __("Capacity", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-gray-900 dark:text-white", children: availability.total_seats })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-500 dark:text-gray-400 mb-1", children: __("Booked", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-orange-600 dark:text-orange-400", children: availability.booked_seats })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-500 dark:text-gray-400 mb-1", children: __("Available", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `font-semibold ${availability.available_seats === 0 ? "text-red-600 dark:text-red-400" : availability.available_seats <= (availability.alert_threshold || 5) ? "text-yellow-600 dark:text-yellow-400" : "text-green-600 dark:text-green-400"}`,
children: availability.available_seats
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-500 dark:text-gray-400 mb-1", children: __("Price", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-semibold text-gray-900 dark:text-white", children: [
getCurrencySymbol2(currency),
parseFloat(
availability.discounted_price || availability.original_price
).toLocaleString()
] })
] })
] }),
availability.waitlist_count > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
availability.waitlist_count,
" ",
__("people on waitlist", "yatra")
] })
] }),
availability.is_blocked && availability.block_reason && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs text-red-600 dark:text-red-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Ban, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
__("Blocked", "yatra"),
":",
" ",
availability.block_reason
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 pt-2 border-t border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: () => {
if (onDateClick) {
onDateClick(availability);
} else {
navigate({
subpage: "trips",
tab: "availability",
action: "edit",
id: availability.id
});
}
},
className: "flex-1 text-xs h-7",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-3 h-3 mr-1" }),
__("Edit", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: () => navigate({
subpage: "trips",
tab: "availability",
action: "view",
id: availability.id
}),
className: "flex-1 text-xs h-7",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-3 h-3 mr-1" }),
__("View", "yatra")
]
}
)
] })
] })
}
)
] }, availability.id);
}),
dateAvailabilities.length > 2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 text-center pt-1", children: [
"+",
dateAvailabilities.length - 2,
" ",
__("more", "yatra")
] })
] })
] })
},
dayIdx
);
}) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-xs", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded border-2 border-green-300 dark:border-green-800 bg-green-100 dark:bg-green-900/20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Available", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded border-2 border-yellow-300 dark:border-yellow-800 bg-yellow-100 dark:bg-yellow-900/20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Low Availability", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded border-2 border-orange-300 dark:border-orange-800 bg-orange-100 dark:bg-orange-900/20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Limited", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded border-2 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Sold Out", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded border-2 border-red-300 dark:border-red-800 bg-red-100 dark:bg-red-900/20" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Blocked", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded border-2 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Not Available", "yatra") })
] })
] })
] });
};
const dayNames = [
{ value: 0, label: "Sunday" },
{ value: 1, label: "Monday" },
{ value: 2, label: "Tuesday" },
{ value: 3, label: "Wednesday" },
{ value: 4, label: "Thursday" },
{ value: 5, label: "Friday" },
{ value: 6, label: "Saturday" }
];
const RecurringRules = ({
tripId,
tripName,
tripType = "multi_day",
pricingType = "regular",
onAddRule,
onEditRule
}) => {
var _a;
const isSingleDayTrip = tripType === "single_day";
const isTravelerBased = pricingType === "traveler_based";
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const adminCurrency = typeof window !== "undefined" && ((_a = window.yatraAdmin) == null ? void 0 : _a.currency) || "USD";
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState({
name: true,
pattern: true,
start_date: true,
end_date: true,
capacity: true,
generated: true,
price: true,
status: true
});
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
rule: null
});
const [duplicateConfirm, setDuplicateConfirm] = reactExports.useState({
isOpen: false,
rule: null
});
const formatRulePattern = (rule) => {
var _a2;
switch (rule.rule_type) {
case "weekly":
const days = (rule.days_of_week_array || []).map((d) => {
var _a3;
return (_a3 = dayNames.find((dn) => dn.value === d)) == null ? void 0 : _a3.label.slice(0, 3);
}).filter(Boolean).join(", ");
return `Every ${days}`;
case "monthly":
return `${rule.week_of_month || ""} ${((_a2 = dayNames.find((d) => d.value === rule.day_of_week)) == null ? void 0 : _a2.label) || ""} of month`;
case "interval":
return `Every ${rule.interval_days} days`;
default:
return "Unknown pattern";
}
};
const { data: countsData } = useQuery({
queryKey: ["recurring-availability", "counts", tripId],
queryFn: async () => {
const response = await apiClient.get("/recurring-availability/counts", {
params: {
trip_id: tripId
}
});
return response || { all: 0, active: 0, inactive: 0 };
},
enabled: !!tripId,
staleTime: 0,
gcTime: 0
});
const statusCounts = countsData || { all: 0, active: 0, inactive: 0 };
const { data: rulesData, isLoading } = useQuery({
queryKey: ["recurring-availability", tripId],
queryFn: async () => {
const response = await apiClient.get("/recurring-availability", {
params: {
trip_id: tripId
}
});
return {
rules: (response == null ? void 0 : response.data) || [],
total: (response == null ? void 0 : response.total) || 0
};
},
enabled: !!tripId,
staleTime: 0,
// Always fetch fresh data
gcTime: 0
// Don't cache the data (replaces cacheTime in newer versions)
});
const allRules = (rulesData == null ? void 0 : rulesData.rules) || [];
const rules = reactExports.useMemo(() => {
let filtered = allRules;
if (statusFilter !== "all") {
filtered = filtered.filter(
(r2) => r2.status === statusFilter
);
}
if (searchTerm) {
const search2 = searchTerm.toLowerCase();
filtered = filtered.filter(
(r2) => r2.name && r2.name.toLowerCase().includes(search2) || formatRulePattern(r2).toLowerCase().includes(search2)
);
}
return filtered;
}, [allRules, statusFilter, searchTerm]);
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/recurring-availability/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["recurring-availability"] });
showToast(__("Recurring rule deleted successfully", "yatra"), "success");
setDeleteConfirm({ isOpen: false, rule: null });
setSelectedIds([]);
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to delete rule", "yatra"),
"error"
);
}
});
const bulkDeleteMutation = useMutation({
mutationFn: async (ids) => {
await Promise.all(
ids.map((id) => apiClient.delete(`/recurring-availability/${id}`))
);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["recurring-availability"] });
showToast(__("Rules deleted successfully", "yatra"), "success");
setSelectedIds([]);
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to delete rules", "yatra"),
"error"
);
}
});
const duplicateMutation = useMutation({
mutationFn: async (id) => {
const response = await apiClient.post(
`/recurring-availability/${id}/duplicate`
);
return response;
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["recurring-availability"] });
showToast(__("Rule duplicated successfully", "yatra"), "success");
setDuplicateConfirm({ isOpen: false, rule: null });
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to duplicate rule", "yatra"),
"error"
);
}
});
const handleBulkApply = () => {
if (!bulkAction || selectedIds.length === 0) {
showToast(__("Please select rules and an action", "yatra"), "warning");
return;
}
switch (bulkAction) {
case "delete":
if (confirm(
__(
"Are you sure you want to delete {count} rule(s)?",
"yatra"
).replace("{count}", selectedIds.length.toString())
)) {
bulkDeleteMutation.mutate(selectedIds.map((id) => id.toString()));
}
break;
}
setBulkAction("");
};
const toggleColumn = (key2) => {
setVisibleColumns((prev) => ({
...prev,
[key2]: !prev[key2]
}));
};
const formatDate2 = (dateString) => {
if (!dateString) return "--";
try {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric"
});
} catch {
return dateString;
}
};
const getStatusBadge = (status) => {
const statusConfig = {
active: {
label: __("Active", "yatra"),
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-3 h-3" })
},
inactive: {
label: __("Inactive", "yatra"),
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-3 h-3" })
}
};
const config2 = statusConfig[status] || statusConfig.inactive;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { className: `${config2.className} flex items-center gap-1`, children: [
config2.icon,
config2.label
] });
};
const tableColumns = reactExports.useMemo(() => {
const cols = [];
if (visibleColumns.name) {
cols.push({
key: "name",
label: __("Rule Name", "yatra"),
visible: visibleColumns.name,
render: (rule) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => onEditRule(rule.id),
className: "text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-left hover:underline",
children: rule.name || formatRulePattern(rule)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: rule.rule_type === "weekly" ? __("Weekly", "yatra") : rule.rule_type === "monthly" ? __("Monthly", "yatra") : __("Interval", "yatra") })
] })
});
}
if (visibleColumns.pattern) {
cols.push({
key: "pattern",
label: __("Pattern", "yatra"),
visible: visibleColumns.pattern,
render: (rule) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm text-gray-700 dark:text-gray-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-3 h-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatRulePattern(rule) })
] })
});
}
if (visibleColumns.start_date) {
cols.push({
key: "start_date",
label: __("Start Date", "yatra"),
visible: visibleColumns.start_date,
render: (rule) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: formatDate2(rule.start_date) })
});
}
if (visibleColumns.end_date) {
cols.push({
key: "end_date",
label: __("End Date", "yatra"),
visible: visibleColumns.end_date,
render: (rule) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: rule.end_date ? formatDate2(rule.end_date) : __("Ongoing", "yatra") })
});
}
if (visibleColumns.capacity) {
cols.push({
key: "capacity",
label: __("Capacity", "yatra"),
visible: visibleColumns.capacity,
render: (rule) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: rule.seats_total || 0 }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("total", "yatra") })
] })
});
}
if (visibleColumns.generated) {
cols.push({
key: "generated",
label: __("Generated", "yatra"),
visible: visibleColumns.generated,
render: (rule) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-semibold text-blue-600 dark:text-blue-400", children: rule.generated_count || 0 }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("dates", "yatra") })
] })
});
}
if (visibleColumns.price) {
cols.push({
key: "price",
label: __("Price", "yatra"),
visible: visibleColumns.price,
render: (rule) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: rule.sale_price ? formatYatraMoney(Number(rule.sale_price) || 0, adminCurrency, {
zeroAsUnknown: false
}) : rule.original_price ? formatYatraMoney(
Number(rule.original_price) || 0,
adminCurrency,
{ zeroAsUnknown: false }
) : formatYatraMoney(0, adminCurrency, { zeroAsUnknown: false }) })
});
}
if (visibleColumns.status) {
cols.push({
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status,
render: (rule) => getStatusBadge(rule.status)
});
}
return cols;
}, [
visibleColumns,
formatRulePattern,
formatDate2,
getStatusBadge,
adminCurrency
]);
const toggleStatusMutation = useMutation({
mutationFn: async ({
id,
status
}) => {
return await apiClient.put(`/recurring-availability/${id}`, { status });
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["recurring-availability"] });
showToast(__("Rule status updated successfully", "yatra"), "success");
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to update rule status", "yatra"),
"error"
);
}
});
const tableActions = reactExports.useMemo(
() => [
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (rule) => onEditRule(rule.id)
},
{
key: "set-inactive",
label: __("Set Inactive", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-4 h-4" }),
onClick: (rule) => {
toggleStatusMutation.mutate({ id: rule.id, status: "inactive" });
},
condition: (rule) => rule.status === "active"
},
{
key: "set-active",
label: __("Set Active", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4" }),
onClick: (rule) => {
toggleStatusMutation.mutate({ id: rule.id, status: "active" });
},
condition: (rule) => rule.status === "inactive"
},
{
key: "duplicate",
label: __("Duplicate", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-4 h-4" }),
onClick: (rule) => setDuplicateConfirm({ isOpen: true, rule })
},
{
key: "delete",
label: __("Delete", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (rule) => setDeleteConfirm({ isOpen: true, rule }),
variant: "destructive"
}
],
[toggleStatusMutation, onEditRule]
);
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, rule: null }),
onConfirm: () => {
if (deleteConfirm.rule) {
deleteMutation.mutate(deleteConfirm.rule.id);
}
},
title: __("Delete Recurring Rule", "yatra"),
message: deleteConfirm.rule ? __(
'Are you sure you want to delete the rule "{name}"? This action cannot be undone.',
"yatra"
).replace(
"{name}",
deleteConfirm.rule.name || formatRulePattern(deleteConfirm.rule)
) : __(
"Are you sure you want to delete this rule? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: duplicateConfirm.isOpen,
onClose: () => setDuplicateConfirm({ isOpen: false, rule: null }),
onConfirm: () => {
if (duplicateConfirm.rule) {
duplicateMutation.mutate(duplicateConfirm.rule.id);
}
},
title: __("Duplicate Recurring Rule", "yatra"),
message: __(
"This will create a copy of this rule. You can edit it after creation.",
"yatra"
),
confirmText: __("Duplicate", "yatra"),
cancelText: __("Cancel", "yatra"),
isLoading: duplicateMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-white", children: __("Recurring Rules", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
className: isSingleDayTrip ? "bg-purple-100 text-purple-700 dark:bg-purple-900/20 dark:text-purple-400" : "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-400",
children: isSingleDayTrip ? __("Single-Day Trip", "yatra") : __("Multi-Day Trip", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
className: isTravelerBased ? "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400" : "bg-gray-100 text-gray-700 dark:bg-gray-900/20 dark:text-gray-400",
children: isTravelerBased ? __("Traveler-Based Pricing", "yatra") : __("Regular Pricing", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "outline", onClick: onAddRule, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
isSingleDayTrip ? __("Add Time Slots Rule", "yatra") : __("Add Recurring Rule", "yatra")
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: isSingleDayTrip ? __(
"Create recurring time slots for your single-day trip (supports multiple time slots per day)",
"yatra"
) : __(
"Automatically generate availability dates based on patterns",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Search", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
placeholder: __("Search rules...", "yatra"),
className: "pl-10"
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: statusFilter,
onChange: (e) => setStatusFilter(e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "active", children: __("Active", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "inactive", children: __("Inactive", "yatra") })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => {
setSearchTerm("");
setStatusFilter("all");
},
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 mr-2" }),
__("Clear Filters", "yatra")
]
}
) })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter,
statusOptions: [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all },
{
key: "active",
label: __("Active", "yatra"),
count: statusCounts.active
},
{
key: "inactive",
label: __("Inactive", "yatra"),
count: statusCounts.inactive
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "name",
label: __("Rule Name", "yatra"),
visible: visibleColumns.name
},
{
key: "pattern",
label: __("Pattern", "yatra"),
visible: visibleColumns.pattern
},
{
key: "start_date",
label: __("Start Date", "yatra"),
visible: visibleColumns.start_date
},
{
key: "end_date",
label: __("End Date", "yatra"),
visible: visibleColumns.end_date
},
{
key: "capacity",
label: __("Capacity", "yatra"),
visible: visibleColumns.capacity
},
{
key: "generated",
label: __("Generated", "yatra"),
visible: visibleColumns.generated
},
{
key: "price",
label: __("Price", "yatra"),
visible: visibleColumns.price
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
}
],
onToggleColumn: (columnKey) => toggleColumn(columnKey),
bulkMutationPending: bulkDeleteMutation.isPending,
totalItems: rules.length,
bulkActionOptions: [{ value: "delete", label: __("Delete", "yatra") }]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "pt-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: __("Recurring Rules", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mt-1", children: tripName && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
__("Managing availability for", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: tripName }),
rules.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-2", children: [
"(",
rules.length,
" ",
rules.length === 1 ? __("rule", "yatra") : __("rules", "yatra"),
")"
] })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: rules,
columns: tableColumns,
actions: tableActions,
isLoading,
isError: false,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(selectedIds.filter((sid) => sid !== id));
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(rules.map((r2) => r2.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: selectedIds.length === rules.length && rules.length > 0,
getItemId: (rule) => rule.id,
emptyText: __("No recurring rules found", "yatra"),
emptyDescription: __(
"Create your first recurring rule to get started",
"yatra"
),
onCreateClick: onAddRule,
skeletonRows: 5,
capability: "yatra_view_trips"
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "bg-blue-50 dark:bg-blue-900/10 border-blue-200 dark:border-blue-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h5", { className: "font-medium text-blue-900 dark:text-blue-200 mb-1", children: __("How Recurring Rules Work", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: "text-sm text-blue-800 dark:text-blue-300 space-y-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
"•",
" ",
__(
"Dates are generated automatically based on your patterns",
"yatra"
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
"•",
" ",
__(
"Specific dates (added manually) take priority over generated dates",
"yatra"
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
"•",
" ",
__(
"Use excluded dates to skip holidays or special occasions",
"yatra"
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
"•",
" ",
__(
"Bookings for generated dates create specific availability entries",
"yatra"
)
] })
] })
] })
] }) }) })
] });
};
function mapApiRowToTrip(trip) {
return {
id: Number(trip.id),
title: String(trip.title ?? ""),
slug: String(trip.slug ?? ""),
currency: String(trip.currency || "USD"),
starting_location: trip.starting_location,
ending_location: trip.ending_location,
trip_type: trip.trip_type || "multi_day"
};
}
function tripsFromAvailabilityQueryCached(raw) {
if (raw == null) {
return [];
}
if (Array.isArray(raw)) {
return raw;
}
if (typeof raw === "object") {
const o = raw;
if (Array.isArray(o.trips)) {
return o.trips;
}
let rows = [];
if (Array.isArray(o.data)) {
rows = o.data;
} else if (o.data && typeof o.data === "object" && Array.isArray(o.data.data)) {
rows = o.data.data;
}
return rows.map((t) => mapApiRowToTrip(t));
}
return [];
}
const Availability = () => {
const { navigate } = useNavigate();
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const [urlKey, setUrlKey] = reactExports.useState(0);
reactExports.useEffect(() => {
const handleLocationChange = () => {
setUrlKey((prev) => prev + 1);
};
window.addEventListener("popstate", handleLocationChange);
const interval = setInterval(() => {
const currentSearch = window.location.search;
if (currentSearch !== window.__lastAvailabilitySearch) {
window.__lastAvailabilitySearch = currentSearch;
handleLocationChange();
}
}, 100);
return () => {
window.removeEventListener("popstate", handleLocationChange);
clearInterval(interval);
};
}, []);
const tripIdFromUrl = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
const tripId = params.get("trip_id");
return tripId ? parseInt(tripId) : null;
}, [urlKey]);
const [selectedTripId, setSelectedTripId] = reactExports.useState(() => {
const storedTripId = localStorage.getItem("yatra_selected_trip_id");
if (storedTripId) {
const parsed = parseInt(storedTripId, 10);
if (!Number.isNaN(parsed)) {
return parsed;
}
}
return tripIdFromUrl;
});
reactExports.useEffect(() => {
if (tripIdFromUrl && tripIdFromUrl !== selectedTripId) {
setSelectedTripId(tripIdFromUrl);
localStorage.setItem("yatra_selected_trip_id", tripIdFromUrl.toString());
}
}, [tripIdFromUrl, selectedTripId]);
reactExports.useEffect(() => {
if (selectedTripId) {
localStorage.setItem("yatra_selected_trip_id", selectedTripId.toString());
} else {
localStorage.removeItem("yatra_selected_trip_id");
}
}, [selectedTripId]);
const [viewMode, setViewMode] = reactExports.useState("list");
const [tabMode, _setTabMode] = reactExports.useState(() => {
const params = new URLSearchParams(window.location.search);
const tabModeParam = params.get("tab_mode");
return tabModeParam === "recurring" ? "recurring" : "specific";
});
const setTabMode = (mode) => {
_setTabMode(mode);
const params = new URLSearchParams(window.location.search);
params.set("tab_mode", mode);
const newUrl = `${window.location.pathname}?${params.toString()}`;
window.history.replaceState({}, "", newUrl);
};
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [monthFilter, setMonthFilter] = reactExports.useState("all");
const [isSyncing, setIsSyncing] = reactExports.useState(false);
const [lastSyncTime, setLastSyncTime] = reactExports.useState(null);
const [showAlerts, setShowAlerts] = reactExports.useState(true);
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState({
departure: true,
arrival: true,
locations: true,
capacity: true,
booked: true,
available: true,
waitlist: true,
price: true,
status: true
// Always show status column
});
const toggleColumn = (key2) => {
setVisibleColumns((prev) => ({
...prev,
[key2]: !prev[key2]
}));
};
const { data: tripsData } = useQuery({
queryKey: ["trips", "availability-dropdown", "v2"],
queryFn: async () => {
const response = await apiClient.get("/trips", {
params: { per_page: 100, status: "publish" }
});
return tripsFromAvailabilityQueryCached(response);
}
});
const tripsList = reactExports.useMemo(
() => tripsFromAvailabilityQueryCached(tripsData),
[tripsData]
);
const {
data: availabilityData,
isLoading,
error: availabilityError
} = useQuery({
queryKey: ["availability", selectedTripId, monthFilter, page, searchTerm],
queryFn: async () => {
if (!selectedTripId) return { dates: [], total: 0 };
const response = await apiClient.get("/availability", {
params: {
trip_id: selectedTripId,
month: monthFilter !== "all" ? monthFilter : void 0,
search: searchTerm || void 0,
page,
per_page: 50
}
});
return {
dates: ((response == null ? void 0 : response.dates) || []).map((date2) => {
var _a, _b, _c, _d;
return {
id: date2.id.toString(),
trip_id: date2.trip_id,
departure_date: date2.departure_date,
departure_time: date2.departure_time,
arrival_date: date2.arrival_date || date2.departure_date,
arrival_time: date2.arrival_time,
total_seats: date2.total_seats || date2.seats_total || 0,
booked_seats: date2.booked_seats || (date2.total_seats || date2.seats_total) - (date2.available_seats || date2.seats_available || 0),
available_seats: date2.available_seats || date2.seats_available || 0,
waitlist_count: date2.waitlist_count || date2.seats_waitlist || 0,
seats_remaining: (date2.available_seats || date2.seats_available || 0) > 10 ? "10+" : (date2.available_seats || date2.seats_available || 0).toString(),
original_price: ((_a = date2.original_price) == null ? void 0 : _a.toString()) || "0",
discounted_price: ((_b = date2.discounted_price) == null ? void 0 : _b.toString()) || ((_c = date2.original_price) == null ? void 0 : _c.toString()) || "0",
discount_percentage: ((_d = date2.discount_percentage) == null ? void 0 : _d.toString()) || "0",
status: date2.status || "available",
is_blocked: date2.is_blocked || date2.status === "blocked",
block_reason: date2.block_reason,
alert_threshold: date2.alert_threshold || 5,
last_synced_at: date2.last_synced_at || date2.updated_at,
from_location: date2.from_location,
to_location: date2.to_location,
created_at: date2.created_at,
updated_at: date2.updated_at
};
}),
total: (response == null ? void 0 : response.total) || 0
};
},
enabled: !!selectedTripId
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await apiClient.delete(`/availability/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["availability"] });
showToast(
__("Availability date deleted successfully", "yatra"),
"success"
);
setDeleteConfirm({ isOpen: false, date: null });
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to delete availability date", "yatra"),
"error"
);
}
});
const formatDate2 = (dateString) => {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric"
});
};
const formatTime = (timeString) => {
if (!timeString) return "";
const [hours, minutes] = timeString.split(":");
const hour = parseInt(hours);
const ampm = hour >= 12 ? "PM" : "AM";
const displayHour = hour % 12 || 12;
return `${displayHour}:${minutes} ${ampm}`;
};
const getCurrencySymbol2 = (currency) => {
const symbols = {
USD: "$",
EUR: "€",
GBP: "£",
INR: "₹"
};
return symbols[currency] || currency;
};
const getStatusBadge = (status, isBlocked) => {
if (isBlocked) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "text-xs bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400", children: __("Blocked", "yatra") });
}
switch (status) {
case "available":
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "success",
className: "text-xs bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
children: __("Available", "yatra")
}
);
case "limited":
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "warning",
className: "text-xs bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
children: __("Limited", "yatra")
}
);
case "sold_out":
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "error",
className: "text-xs bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
children: __("Sold Out", "yatra")
}
);
case "closed":
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "outline",
className: "text-xs border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-400",
children: __("Closed", "yatra")
}
);
case "blocked":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "text-xs bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400", children: __("Blocked", "yatra") });
case "cancelled":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "text-xs bg-gray-100 text-gray-700 dark:bg-gray-900/20 dark:text-gray-400", children: __("Cancelled", "yatra") });
default:
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "outline",
className: "text-xs border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-400",
children: status || "Unknown"
}
);
}
};
const handleSync = async () => {
setIsSyncing(true);
try {
await queryClient2.invalidateQueries({ queryKey: ["availability"] });
setLastSyncTime(/* @__PURE__ */ new Date());
showToast(
__("Availability data synced successfully", "yatra"),
"success"
);
} catch (error) {
console.error("Sync failed:", error);
showToast(__("Failed to sync availability data", "yatra"), "error");
} finally {
setIsSyncing(false);
}
};
const selectedTrip = tripsList.find((t) => t.id === selectedTripId);
const availabilityErrorContext = availabilityError ? getErrorContext(availabilityError) : null;
const filteredDates = reactExports.useMemo(() => {
if (!(availabilityData == null ? void 0 : availabilityData.dates)) return [];
let filtered = [...availabilityData.dates];
if (searchTerm) {
const searchLower = searchTerm.toLowerCase();
filtered = filtered.filter(
(date2) => {
var _a, _b, _c, _d;
return date2.departure_date.includes(searchLower) || date2.arrival_date.includes(searchLower) || ((_a = date2.departure_time) == null ? void 0 : _a.toLowerCase().includes(searchLower)) || ((_b = date2.arrival_time) == null ? void 0 : _b.toLowerCase().includes(searchLower)) || ((_c = date2.from_location) == null ? void 0 : _c.toLowerCase().includes(searchLower)) || ((_d = date2.to_location) == null ? void 0 : _d.toLowerCase().includes(searchLower));
}
);
}
if (statusFilter !== "all") {
filtered = filtered.filter((date2) => date2.status === statusFilter);
}
if (monthFilter !== "all" && (selectedTrip == null ? void 0 : selectedTrip.trip_type) !== "single_day") {
const [year, month] = monthFilter.split("-");
filtered = filtered.filter((date2) => {
const dateObj = new Date(date2.departure_date);
return dateObj.getFullYear() === parseInt(year) && dateObj.getMonth() === parseInt(month) - 1;
});
}
return filtered;
}, [availabilityData, searchTerm, statusFilter, monthFilter, selectedTrip]);
const availableMonths = reactExports.useMemo(() => {
if (!(availabilityData == null ? void 0 : availabilityData.dates) || (selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day")
return [];
const months = /* @__PURE__ */ new Set();
availabilityData.dates.forEach((date2) => {
const dateObj = new Date(date2.departure_date);
const monthKey = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, "0")}`;
months.add(monthKey);
});
return Array.from(months).sort();
}, [availabilityData, selectedTrip]);
const inventoryAlerts = reactExports.useMemo(() => {
if (!filteredDates || filteredDates.length === 0) return [];
return filteredDates.filter((date2) => {
if (date2.is_blocked) return false;
const threshold2 = date2.alert_threshold || 5;
return date2.available_seats <= threshold2 && date2.available_seats > 0;
});
}, [filteredDates]);
const waitlistEntries = reactExports.useMemo(() => {
if (!filteredDates || filteredDates.length === 0) return [];
return filteredDates.filter((date2) => date2.waitlist_count > 0);
}, [filteredDates]);
const blockedDates = reactExports.useMemo(() => {
if (!filteredDates || filteredDates.length === 0) return [];
return filteredDates.filter((date2) => date2.is_blocked);
}, [filteredDates]);
const statusCounts = reactExports.useMemo(() => {
const counts = {
all: 0,
available: 0,
limited: 0,
sold_out: 0,
closed: 0,
blocked: 0
};
if (!(availabilityData == null ? void 0 : availabilityData.dates)) return counts;
availabilityData.dates.forEach((date2) => {
counts.all++;
if (date2.status === "available") counts.available++;
else if (date2.status === "limited") counts.limited++;
else if (date2.status === "sold_out") counts.sold_out++;
else if (date2.status === "closed") counts.closed++;
else if (date2.status === "blocked") counts.blocked++;
});
return counts;
}, [availabilityData]);
const bulkDeleteMutation = useMutation({
mutationFn: async (ids) => {
await Promise.all(
ids.map((id) => apiClient.delete(`/availability/${id}`))
);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["availability"] });
showToast(
__("Selected availability dates deleted successfully", "yatra"),
"success"
);
setSelectedIds([]);
setBulkAction("");
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to delete selected availability dates", "yatra"),
"error"
);
}
});
const handleBulkApply = () => {
if (!bulkAction) {
showToast(__("Select a bulk action first.", "yatra"), "warning");
return;
}
if (selectedIds.length === 0) {
showToast(
__("Select at least one availability date.", "yatra"),
"warning"
);
return;
}
if (bulkAction === "delete") {
bulkDeleteMutation.mutate(selectedIds);
} else {
showToast(
__("Unsupported bulk action for availability.", "yatra"),
"warning"
);
}
};
const bulkStatusOptions = [
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
const totalFiltered = filteredDates.length;
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
date: null
});
const [duplicateConfirm, setDuplicateConfirm] = reactExports.useState({
isOpen: false,
date: null
});
const [duplicateDepartureDate, setDuplicateDepartureDate] = reactExports.useState("");
const [duplicateDepartureTime, setDuplicateDepartureTime] = reactExports.useState("");
const duplicateMutation = useMutation({
mutationFn: async (payload) => {
return await apiClient.post(`/availability/${payload.id}/duplicate`, {
departure_date: payload.departure_date,
departure_time: payload.departure_time ?? null
});
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["availability"] });
showToast(
__("Availability date duplicated successfully", "yatra"),
"success"
);
setDuplicateConfirm({ isOpen: false, date: null });
setDuplicateDepartureDate("");
setDuplicateDepartureTime("");
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to duplicate availability date", "yatra"),
"error"
);
}
});
const tableColumns = reactExports.useMemo(() => {
const cols = [];
cols.push({
key: "departure",
label: (selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day" ? __("Departure Time", "yatra") : __("Departure", "yatra"),
visible: visibleColumns.departure,
render: (date2) => (selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium", children: formatDate2(date2.departure_date) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: date2.departure_time ? formatTime(date2.departure_time) : "" })
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: formatDate2(date2.departure_date) })
] })
});
cols.push({
key: "arrival",
label: (selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day" ? __("Arrival Time", "yatra") : __("Arrival", "yatra"),
visible: visibleColumns.arrival,
render: (date2) => (selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium", children: formatDate2(date2.arrival_date) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: date2.arrival_time ? formatTime(date2.arrival_time) : "" })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: formatDate2(date2.arrival_date) })
});
cols.push({
key: "locations",
label: __("From/To", "yatra"),
visible: visibleColumns.locations,
render: (date2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-3 h-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: date2.from_location || (selectedTrip == null ? void 0 : selectedTrip.starting_location) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "→" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: date2.to_location || (selectedTrip == null ? void 0 : selectedTrip.ending_location) })
] })
});
cols.push({
key: "capacity",
label: __("Capacity", "yatra"),
visible: visibleColumns.capacity,
render: (date2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: date2.total_seats || 0 }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("total", "yatra") })
] })
});
cols.push({
key: "booked",
label: __("Booked", "yatra"),
visible: visibleColumns.booked,
render: (date2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-orange-600 dark:text-orange-400", children: date2.booked_seats || 0 }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("booked", "yatra") })
] })
});
cols.push({
key: "available",
label: __("Available", "yatra"),
visible: visibleColumns.available,
render: (date2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `text-sm font-semibold ${date2.available_seats === 0 ? "text-red-600 dark:text-red-400" : date2.available_seats <= (date2.alert_threshold || 5) ? "text-yellow-600 dark:text-yellow-400" : "text-green-600 dark:text-green-400"}`,
children: date2.available_seats || 0
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("available", "yatra") }),
date2.available_seats <= (date2.alert_threshold || 5) && date2.available_seats > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Bell, { className: "w-3 h-3 text-yellow-500 mt-0.5" })
] })
});
cols.push({
key: "waitlist",
label: __("Waitlist", "yatra"),
visible: visibleColumns.waitlist,
render: (date2) => date2.waitlist_count > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400 text-xs", children: date2.waitlist_count }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __("people", "yatra") })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-400 dark:text-gray-500", children: "-" })
});
cols.push({
key: "price",
label: __("Price", "yatra"),
visible: visibleColumns.price,
render: (date2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: date2.discounted_price && parseFloat(date2.discounted_price) < parseFloat(date2.original_price) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm line-through text-gray-400", children: [
getCurrencySymbol2((selectedTrip == null ? void 0 : selectedTrip.currency) || "USD"),
parseFloat(date2.original_price).toLocaleString()
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: [
getCurrencySymbol2((selectedTrip == null ? void 0 : selectedTrip.currency) || "USD"),
parseFloat(date2.discounted_price).toLocaleString()
] }),
date2.discount_percentage && parseFloat(date2.discount_percentage) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "error", className: "text-xs", children: [
date2.discount_percentage,
"% ",
__("OFF", "yatra")
] })
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm font-semibold", children: [
getCurrencySymbol2((selectedTrip == null ? void 0 : selectedTrip.currency) || "USD"),
parseFloat(date2.original_price).toLocaleString()
] }) })
});
cols.push({
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status,
render: (date2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
getStatusBadge(date2.status, date2.is_blocked),
date2.is_blocked && date2.block_reason && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400 italic", children: date2.block_reason }),
date2.last_synced_at && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "w-3 h-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: new Date(date2.last_synced_at).toLocaleTimeString() })
] })
] })
});
return cols;
}, [
selectedTrip,
visibleColumns,
getCurrencySymbol2,
formatDate2,
formatTime,
getStatusBadge
]);
const tableActions = [
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (date2) => navigate({
subpage: "trips",
tab: "availability",
action: "edit",
id: date2.id,
trip_id: date2.trip_id
})
},
{
key: "duplicate",
label: __("Duplicate", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-4 h-4" }),
onClick: (date2) => {
setDuplicateConfirm({ isOpen: true, date: date2 });
setDuplicateDepartureDate(date2.departure_date || "");
setDuplicateDepartureTime(date2.departure_time || "");
}
},
{
key: "delete",
label: __("Delete", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (date2) => setDeleteConfirm({ isOpen: true, date: date2 }),
variant: "destructive"
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, date: null }),
onConfirm: () => {
if (deleteConfirm.date) {
deleteMutation.mutate(deleteConfirm.date.id);
}
},
title: __("Delete Availability Date", "yatra"),
message: deleteConfirm.date ? __(
"Are you sure you want to delete this availability date on {date}? This action cannot be undone.",
"yatra"
).replace("{date}", formatDate2(deleteConfirm.date.departure_date)) : __(
"Are you sure you want to delete this availability date? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
duplicateConfirm.isOpen && duplicateConfirm.date && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "fixed inset-0 z-50 flex items-center justify-center p-4",
style: { marginTop: "-32px" },
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "absolute inset-0 bg-black/50",
onClick: () => {
if (!duplicateMutation.isPending) {
setDuplicateConfirm({ isOpen: false, date: null });
}
}
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg overflow-hidden", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: __("Duplicate Availability Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: __(
"Select the new departure date. Arrival/return will be shifted automatically.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Departure Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
DatePicker,
{
value: duplicateDepartureDate,
onChange: (value) => setDuplicateDepartureDate(value),
placeholder: __("Select date", "yatra")
}
)
] }),
(selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Departure Time", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
TimePicker,
{
value: duplicateDepartureTime,
onChange: (value) => setDuplicateDepartureTime(value),
placeholder: __("Select departure time", "yatra")
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => setDuplicateConfirm({ isOpen: false, date: null }),
disabled: duplicateMutation.isPending,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: () => {
if (!duplicateConfirm.date) return;
if (!duplicateDepartureDate) {
showToast(
__("Please select a departure date", "yatra"),
"warning"
);
return;
}
duplicateMutation.mutate({
id: duplicateConfirm.date.id,
departure_date: duplicateDepartureDate,
departure_time: (selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day" ? duplicateDepartureTime || null : null
});
},
disabled: duplicateMutation.isPending,
children: duplicateMutation.isPending ? __("Duplicating...", "yatra") : __("Duplicate", "yatra")
}
)
] })
] })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Availability Management", "yatra"),
description: __(
"Manage departure dates and availability for your trips. Add dates for this month or plan ahead for the entire year.",
"yatra"
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900 rounded-lg border border-blue-200 dark:border-gray-700 p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-start justify-between gap-4 mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: __("Select Trip", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mt-1", children: __(
"Choose a trip to manage its availability dates and departure schedules",
"yatra"
) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [
__("Trip", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
SearchableSelect,
{
value: (selectedTripId == null ? void 0 : selectedTripId.toString()) || "",
onChange: (value) => {
const tripId = value ? parseInt(value) : null;
setSelectedTripId(tripId);
setPage(1);
},
options: [
{ value: "", label: __("-- Select a Trip --", "yatra") },
...tripsList.map((trip) => ({
value: trip.id.toString(),
label: `${trip.title}${trip.trip_type === "single_day" ? " (Single Day)" : trip.trip_type === "multi_day" ? " (Multi-Day)" : ""}`
}))
],
placeholder: __("Search or select a trip...", "yatra"),
searchPlaceholder: __("Search by trip name or ID...", "yatra"),
className: "w-full",
required: true
}
)
] }),
selectedTrip && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 pt-2 border-t border-blue-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedTrip.starting_location }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "→" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedTrip.ending_location })
] }),
selectedTrip.trip_type && /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
className: selectedTrip.trip_type === "single_day" ? "bg-purple-100 text-purple-700 dark:bg-purple-900/20 dark:text-purple-400" : "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-400",
children: selectedTrip.trip_type === "single_day" ? __("Single Day", "yatra") : __("Multi-Day", "yatra")
}
)
] }),
!selectedTripId && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 p-4 bg-white/60 dark:bg-gray-800/60 rounded-lg border border-blue-200/50 dark:border-gray-700/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertCircle, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white mb-1", children: __("Get Started", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: __(
"Select a trip from the dropdown above to view and manage its availability dates, pricing, and booking status.",
"yatra"
) })
] })
] }) })
] })
] }),
selectedTripId && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setTabMode("specific"),
className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${tabMode === "specific" ? "bg-blue-600 text-white" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, { className: "w-4 h-4 inline mr-2" }),
__("Specific Dates", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setTabMode("recurring"),
className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${tabMode === "recurring" ? "bg-blue-600 text-white" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4 inline mr-2" }),
__("Recurring Rules", "yatra")
]
}
)
] }) }) }),
tabMode === "recurring" && /* @__PURE__ */ jsxRuntimeExports.jsx(
RecurringRules,
{
tripId: selectedTripId,
tripName: selectedTrip == null ? void 0 : selectedTrip.title,
tripType: selectedTrip == null ? void 0 : selectedTrip.trip_type,
onAddRule: () => navigate({
subpage: "trips",
tab: "availability",
action: "create-rule",
trip_id: selectedTripId.toString()
}),
onEditRule: (id) => navigate({
subpage: "trips",
tab: "availability",
action: "edit-rule",
id: id.toString()
})
}
),
tabMode === "specific" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
selectedTripId && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: viewMode === "list" ? "default" : "ghost",
size: "sm",
onClick: () => setViewMode("list"),
className: "rounded-none border-0",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "w-4 h-4 mr-1" }),
__("List", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: viewMode === "calendar" ? "default" : "ghost",
size: "sm",
onClick: () => setViewMode("calendar"),
className: "rounded-none border-0",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-4 h-4 mr-1" }),
__("Calendar", "yatra")
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: handleSync,
disabled: isSyncing,
title: lastSyncTime ? `Last synced: ${lastSyncTime.toLocaleTimeString()}` : __("Sync availability", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
RefreshCw,
{
className: `w-4 h-4 mr-2 ${isSyncing ? "animate-spin" : ""}`
}
),
__("Sync", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: () => navigate({
subpage: "trips",
tab: "availability",
action: "create",
trip_id: selectedTripId.toString()
}),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
__("Add Availability Date", "yatra")
]
}
)
] }),
showAlerts && inventoryAlerts.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
Alert,
{
variant: "warning",
className: "border-yellow-300 bg-yellow-50 dark:bg-yellow-900/10",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between w-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Bell, { className: "w-5 h-5 text-yellow-600 dark:text-yellow-400 mt-0.5 flex-shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold text-yellow-900 dark:text-yellow-200", children: __("Inventory Alerts", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200", children: inventoryAlerts.length })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-yellow-800 dark:text-yellow-300 mb-2", children: __(
"The following dates have low availability (below threshold).",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-2", children: [
inventoryAlerts.slice(0, 5).map((alert2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: () => navigate({
subpage: "trips",
tab: "availability",
action: "edit",
id: alert2.id,
trip_id: alert2.trip_id
}),
className: "text-xs border-yellow-300 text-yellow-800 hover:bg-yellow-100 dark:border-yellow-700 dark:text-yellow-300",
children: [
formatDate2(alert2.departure_date),
alert2.departure_time && ` ${formatTime(alert2.departure_time)}`,
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-1 font-semibold", children: [
"(",
alert2.available_seats,
" ",
__("seats", "yatra"),
")"
] })
]
},
alert2.id
)),
inventoryAlerts.length > 5 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-yellow-700 dark:text-yellow-400 self-center", children: [
"+",
inventoryAlerts.length - 5,
" ",
__("more", "yatra")
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => setShowAlerts(false),
className: "text-yellow-600 hover:text-yellow-700 dark:text-yellow-400",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" })
}
)
] })
}
),
waitlistEntries.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-blue-200 bg-blue-50 dark:bg-blue-900/10 dark:border-blue-800", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Waitlist", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { className: "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200", children: [
waitlistEntries.reduce(
(sum, entry) => sum + entry.waitlist_count,
0
),
" ",
__("people", "yatra")
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => navigate({
subpage: "trips",
tab: "availability",
action: "waitlist",
trip_id: selectedTripId.toString()
}),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4 mr-1" }),
__("View All", "yatra")
]
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: waitlistEntries.slice(0, 3).map((entry) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between p-2 bg-white dark:bg-gray-800 rounded border border-blue-200 dark:border-blue-800",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: [
formatDate2(entry.departure_date),
entry.departure_time && ` ${formatTime(entry.departure_time)}`
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
entry.booked_seats,
"/",
entry.total_seats,
" ",
__("booked", "yatra")
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400", children: [
entry.waitlist_count,
" ",
__("on waitlist", "yatra")
] })
]
},
entry.id
)) }) })
] }),
blockedDates.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-red-200 bg-red-50 dark:bg-red-900/10 dark:border-red-800", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Ban, { className: "w-5 h-5 text-red-600 dark:text-red-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Blocked Dates", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-red-200 text-red-800 dark:bg-red-800 dark:text-red-200", children: blockedDates.length })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: blockedDates.slice(0, 3).map((entry) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex items-center justify-between p-2 bg-white dark:bg-gray-800 rounded border border-red-200 dark:border-red-800",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Ban, { className: "w-4 h-4 text-red-600 dark:text-red-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: [
formatDate2(entry.departure_date),
entry.departure_time && ` ${formatTime(entry.departure_time)}`
] }),
entry.block_reason && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
__("Reason", "yatra"),
": ",
entry.block_reason
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => navigate({
subpage: "trips",
tab: "availability",
action: "edit",
id: entry.id,
trip_id: entry.trip_id
}),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Settings$1, { className: "w-4 h-4" })
}
)
]
},
entry.id
)) }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: `grid grid-cols-1 ${(selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day" ? "md:grid-cols-3" : "md:grid-cols-4"} gap-4`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Search", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
placeholder: __(
"Search dates, locations...",
"yatra"
),
className: "pl-10"
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: statusFilter,
onChange: (e) => setStatusFilter(e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "available", children: __("Available", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "limited", children: __("Limited", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "sold_out", children: __("Sold Out", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "closed", children: __("Closed", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "blocked", children: __("Blocked", "yatra") })
]
}
)
] }),
(selectedTrip == null ? void 0 : selectedTrip.trip_type) !== "single_day" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Month", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: monthFilter,
onChange: (e) => setMonthFilter(e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Months", "yatra") }),
availableMonths.map((month) => {
const [year, monthNum] = month.split("-");
const date2 = new Date(
parseInt(year),
parseInt(monthNum) - 1
);
return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: month, children: date2.toLocaleDateString("en-US", {
year: "numeric",
month: "long"
}) }, month);
})
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => {
setSearchTerm("");
setStatusFilter("all");
setMonthFilter("all");
},
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 mr-2" }),
__("Clear Filters", "yatra")
]
}
) })
]
}
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter,
statusOptions: [
{
key: "all",
label: __("All", "yatra"),
count: statusCounts.all
},
{
key: "available",
label: __("Available", "yatra"),
count: statusCounts.available
},
{
key: "limited",
label: __("Limited", "yatra"),
count: statusCounts.limited
},
{
key: "sold_out",
label: __("Sold Out", "yatra"),
count: statusCounts.sold_out
},
{
key: "closed",
label: __("Closed", "yatra"),
count: statusCounts.closed
},
{
key: "blocked",
label: __("Blocked", "yatra"),
count: statusCounts.blocked
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "departure",
label: __("Departure", "yatra"),
visible: visibleColumns.departure
},
{
key: "arrival",
label: __("Arrival", "yatra"),
visible: visibleColumns.arrival
},
{
key: "locations",
label: __("From/To", "yatra"),
visible: visibleColumns.locations
},
{
key: "capacity",
label: __("Capacity", "yatra"),
visible: visibleColumns.capacity
},
{
key: "booked",
label: __("Booked", "yatra"),
visible: visibleColumns.booked
},
{
key: "available",
label: __("Available", "yatra"),
visible: visibleColumns.available
},
{
key: "waitlist",
label: __("Waitlist", "yatra"),
visible: visibleColumns.waitlist
},
{
key: "price",
label: __("Price", "yatra"),
visible: visibleColumns.price
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
}
],
onToggleColumn: (key2) => toggleColumn(key2),
bulkMutationPending: bulkDeleteMutation.isPending,
totalItems: totalFiltered,
bulkActionOptions: bulkStatusOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { children: __("Availability Dates", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: selectedTrip && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
__("Managing availability for", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: selectedTrip.title }),
filteredDates.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-2", children: [
"(",
filteredDates.length,
" ",
(selectedTrip == null ? void 0 : selectedTrip.trip_type) === "single_day" ? __("time slots", "yatra") : __("dates", "yatra"),
")"
] })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: viewMode === "calendar" ? filteredDates.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-12 text-center text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-10 h-10 mx-auto mb-3 text-gray-400 dark:text-gray-600" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium mb-1", children: __(
"No availability dates found for this trip.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: __(
"Try adjusting your filters or add a new availability date.",
"yatra"
) })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
AvailabilityCalendar,
{
dates: filteredDates,
tripType: selectedTrip == null ? void 0 : selectedTrip.trip_type,
currency: (selectedTrip == null ? void 0 : selectedTrip.currency) || "USD",
onDateClick: (date2) => {
navigate({
subpage: "trips",
tab: "availability",
action: "edit",
id: date2.id,
trip_id: date2.trip_id
});
}
}
) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: filteredDates,
columns: tableColumns,
actions: tableActions,
isLoading,
isError: !!availabilityError,
errorText: __("Error loading availability", "yatra"),
errorDescription: __(
"We couldn’t connect to the availability service. Please refresh or try again shortly.",
"We couldn’t connect to the availability service. Please refresh or try again shortly."
),
errorDetails: (availabilityErrorContext == null ? void 0 : availabilityErrorContext.details) || "",
errorRequestInfo: availabilityErrorContext == null ? void 0 : availabilityErrorContext.requestInfo,
onRetry: () => queryClient2.invalidateQueries({
queryKey: ["availability"]
}),
emptyText: __(
"No availability dates found for this trip.",
"yatra"
),
emptyDescription: __(
"Try adjusting your filters or add a new availability date.",
"yatra"
),
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds(
(prev) => Array.from(/* @__PURE__ */ new Set([...prev, id]))
);
} else {
setSelectedIds(
(prev) => prev.filter((existingId) => existingId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(filteredDates.map((d) => d.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: filteredDates.length > 0 && selectedIds.length === filteredDates.length,
getItemId: (date2) => date2.id,
getItemStatus: (date2) => date2.status,
statusFilter,
skeletonRows: 5,
capability: "yatra_view_trips"
}
) })
] })
] })
] })
] });
};
const DateRangePicker = ({
dateFrom,
dateTo,
onDateFromChange,
onDateToChange,
onClear,
placeholder = "Select date range",
disabled = false,
className = "",
error = false
}) => {
const [open, setOpen] = reactExports.useState(false);
const [currentMonth, setCurrentMonth] = reactExports.useState(/* @__PURE__ */ new Date());
const [hoverDate, setHoverDate] = reactExports.useState();
let fromDate = void 0;
let toDate2 = void 0;
if (dateFrom && dateFrom.trim()) {
try {
const parsed = parse(dateFrom, "yyyy-MM-dd", /* @__PURE__ */ new Date());
if (!isNaN(parsed.getTime())) {
fromDate = parsed;
}
} catch (e) {
fromDate = void 0;
}
}
if (dateTo && dateTo.trim()) {
try {
const parsed = parse(dateTo, "yyyy-MM-dd", /* @__PURE__ */ new Date());
if (!isNaN(parsed.getTime())) {
toDate2 = parsed;
}
} catch (e) {
toDate2 = void 0;
}
}
const handleSelect = (date2) => {
if (!fromDate || fromDate && toDate2) {
onDateFromChange == null ? void 0 : onDateFromChange(format(date2, "yyyy-MM-dd"));
onDateToChange == null ? void 0 : onDateToChange("");
setHoverDate(void 0);
} else if (fromDate && !toDate2) {
if (date2 < fromDate) {
onDateToChange == null ? void 0 : onDateToChange(format(fromDate, "yyyy-MM-dd"));
onDateFromChange == null ? void 0 : onDateFromChange(format(date2, "yyyy-MM-dd"));
} else {
onDateToChange == null ? void 0 : onDateToChange(format(date2, "yyyy-MM-dd"));
}
setHoverDate(void 0);
setOpen(false);
}
};
const handleClear = (e) => {
e.stopPropagation();
onClear == null ? void 0 : onClear();
setHoverDate(void 0);
};
const isInRange = (date2) => {
if (!fromDate) return false;
const endDate = toDate2 || hoverDate;
if (!endDate) return false;
const start = fromDate < endDate ? fromDate : endDate;
const end = fromDate < endDate ? endDate : fromDate;
try {
return isWithinInterval(date2, { start, end });
} catch {
return false;
}
};
const isRangeStart = (date2) => {
return fromDate && isSameDay(date2, fromDate);
};
const isRangeEnd = (date2) => {
const endDate = toDate2 || hoverDate;
return endDate && isSameDay(date2, endDate);
};
const getDaysForMonth = (monthDate) => {
const monthStart = startOfMonth(monthDate);
const monthEnd = endOfMonth(monthDate);
const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });
const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
return eachDayOfInterval({ start: calendarStart, end: calendarEnd });
};
const nextMonthDate = addMonths(currentMonth, 1);
const currentMonthDays = getDaysForMonth(currentMonth);
const nextMonthDays = getDaysForMonth(nextMonthDate);
const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
let displayValue = "";
if (fromDate && !isNaN(fromDate.getTime())) {
try {
displayValue = format(fromDate, "MMM dd, yyyy");
if (toDate2 && !isNaN(toDate2.getTime())) {
displayValue += " - " + format(toDate2, "MMM dd, yyyy");
}
} catch (e) {
displayValue = "";
}
}
const hasValue = dateFrom || dateTo;
const renderMonth = (monthDate, days) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[280px]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-center mb-4", children: format(monthDate, "MMMM yyyy") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: weekDays.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "text-center text-xs font-medium text-gray-500 dark:text-gray-400 p-2",
children: day
},
day
)) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, idx) => {
const isCurrentMonth = isSameMonth(day, monthDate);
const isSelected = isRangeStart(day) || isRangeEnd(day);
const inRange = isInRange(day);
const isTodayDate = isToday(day);
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => handleSelect(day),
onMouseEnter: () => fromDate && !toDate2 && setHoverDate(day),
onMouseLeave: () => setHoverDate(void 0),
className: `
p-2 text-sm rounded transition-colors relative w-9 h-9 flex items-center justify-center mx-auto
${!isCurrentMonth ? "text-gray-300 dark:text-gray-700 invisible" : ""}
${isSelected ? "bg-blue-600 text-white font-semibold hover:bg-blue-700 z-10" : ""}
${inRange && !isSelected ? "bg-blue-100 dark:bg-blue-900/20 text-blue-900 dark:text-blue-100 rounded-none" : ""}
${!isSelected && !inRange && isCurrentMonth ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
${isTodayDate && !isSelected ? "border border-blue-500" : ""}
${isRangeStart(day) && inRange ? "rounded-l-md" : ""}
${isRangeEnd(day) && inRange ? "rounded-r-md" : ""}
`,
disabled: !isCurrentMonth,
children: format(day, "d")
},
idx
);
}) })
] });
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open, onOpenChange: setOpen, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
disabled,
className: `w-full justify-start text-left font-normal ${error ? "border-red-500" : ""} ${!displayValue ? "text-gray-500" : ""} ${className}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
displayValue || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: placeholder }),
hasValue && !disabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
X,
{
className: "ml-auto h-4 w-4 opacity-50 hover:opacity-100",
onClick: handleClear
}
)
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4 px-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => setCurrentMonth(subMonths(currentMonth)),
className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "h-4 w-4" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => setCurrentMonth(addMonths(currentMonth, 1)),
className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-8", children: [
renderMonth(currentMonth, currentMonthDays),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-l border-gray-200 dark:border-gray-700 pl-8", children: renderMonth(nextMonthDate, nextMonthDays) })
] })
] }) })
] });
};
const formatDate = (dateString) => {
if (!dateString) return "--";
try {
const date2 = new Date(dateString);
return date2.toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric"
});
} catch {
return dateString;
}
};
const formatCurrency = (value) => {
var _a;
if (value === void 0 || value === null) {
return "--";
}
const currency = ((_a = window.yatraAdmin) == null ? void 0 : _a.currency) || "USD";
try {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency
}).format(value);
} catch {
return `${currency} ${value.toFixed(2)}`;
}
};
function normalizeTripsForDropdown(raw) {
if (Array.isArray(raw)) {
return raw;
}
if (raw && typeof raw === "object") {
const r2 = raw;
if (Array.isArray(r2.data)) {
return r2.data;
}
const inner = r2.data;
if (inner && typeof inner === "object" && Array.isArray(inner.data)) {
return inner.data;
}
}
return [];
}
const Departures = () => {
var _a, _b;
const [selectedTripId, setSelectedTripId] = reactExports.useState(() => {
try {
const saved = localStorage.getItem("yatra_selected_trip_id");
return saved ? parseInt(saved) : null;
} catch {
return null;
}
});
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sourceFilter, setSourceFilter] = reactExports.useState("all");
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [dateFrom, setDateFrom] = reactExports.useState("");
const [dateTo, setDateTo] = reactExports.useState("");
const [page, setPage] = reactExports.useState(1);
const [showColumnMenu, setShowColumnMenu] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
try {
const saved = localStorage.getItem("yatra_departures_visible_columns");
if (saved) {
return JSON.parse(saved);
}
} catch {
}
return {
trip: false,
date: true,
time: true,
capacity: true,
booked: true,
available: true,
revenue: true,
travelers: true,
bookings: true,
status: true,
source: false
};
});
const columnMenuRef = reactExports.useRef(null);
const [travelerModalDeparture, setTravelerModalDeparture] = reactExports.useState(null);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const queryClient2 = useQueryClient();
const { showToast } = useToast();
reactExports.useEffect(() => {
try {
localStorage.setItem(
"yatra_departures_visible_columns",
JSON.stringify(visibleColumns)
);
} catch (error2) {
console.error("Failed to save column visibility to localStorage:", error2);
}
}, [visibleColumns]);
reactExports.useEffect(() => {
const handleClickOutside = (event) => {
if (columnMenuRef.current && !columnMenuRef.current.contains(event.target)) {
setShowColumnMenu(false);
}
};
if (showColumnMenu) {
document.addEventListener("mousedown", handleClickOutside);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [showColumnMenu]);
const toggleColumn = (column) => {
setVisibleColumns((prev) => ({
...prev,
[column]: !prev[column]
}));
};
const columnOptions = Object.entries(visibleColumns).map(([key2, value]) => ({
key: key2,
label: key2.charAt(0).toUpperCase() + key2.slice(1),
visible: Boolean(value)
}));
reactExports.useEffect(() => {
try {
if (selectedTripId) {
localStorage.setItem(
"yatra_selected_trip_id",
selectedTripId.toString()
);
} else {
localStorage.removeItem("yatra_selected_trip_id");
}
} catch (error2) {
console.error("Failed to save trip selection to localStorage:", error2);
}
}, [selectedTripId]);
const { data: tripsData } = useQuery({
queryKey: ["trips", "departures-dropdown", "v1"],
queryFn: async () => {
const response = await apiClient.get("/trips", {
params: { per_page: 1e3 }
});
return normalizeTripsForDropdown(response);
}
});
const tripsList = reactExports.useMemo(
() => normalizeTripsForDropdown(tripsData),
[tripsData]
);
const {
data: departuresData,
isLoading,
error,
refetch
} = useQuery({
queryKey: [
"departures",
selectedTripId,
statusFilter,
sourceFilter,
searchTerm,
dateFrom,
dateTo,
page
],
queryFn: async () => {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("simulate_error") === "true") {
throw new Error(
"Simulated API error for testing error UI functionality"
);
}
const endpoint = selectedTripId ? `/trips/${selectedTripId}/departures` : "/departures";
const response = await apiClient.get(endpoint, {
params: {
status: statusFilter !== "all" ? statusFilter : void 0,
source: sourceFilter !== "all" ? sourceFilter : void 0,
search: searchTerm || void 0,
date_from: dateFrom && dateFrom.trim() !== "" ? dateFrom : void 0,
date_to: dateTo && dateTo.trim() !== "" ? dateTo : void 0,
include_past: dateFrom && dateFrom.trim() !== "" || dateTo && dateTo.trim() !== "" ? "true" : "false",
page,
per_page: 20
}
});
const result = {
data: (response == null ? void 0 : response.data) || [],
meta: (response == null ? void 0 : response.meta) || { total: 0 }
};
if (result.data.length > 0) ;
return result;
},
// Always enabled, whether trip is selected or not
enabled: true
});
const departures = (departuresData == null ? void 0 : departuresData.data) || [];
const errorContext = getErrorContext(error);
const apiErrorMessage = (departuresData == null ? void 0 : departuresData.error) || (departuresData == null ? void 0 : departuresData.message);
const derivedErrorDetails = errorContext.details || (apiErrorMessage ? String(apiErrorMessage) : void 0) || (error ? String((error == null ? void 0 : error.message) || error) : void 0);
const isDeparturesError = !!error || !!apiErrorMessage;
const totalItems = ((_a = departuresData == null ? void 0 : departuresData.meta) == null ? void 0 : _a.total) ?? 0;
const itemsPerPage = 20;
const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
const { data: departuresStatsData } = useQuery({
queryKey: [
"departures-stats",
selectedTripId,
sourceFilter,
searchTerm,
dateFrom,
dateTo
],
queryFn: async () => {
const endpoint = selectedTripId ? `/trips/${selectedTripId}/departures` : "/departures";
const response = await apiClient.get(endpoint, {
params: {
// NOTE: intentionally no status param here
source: sourceFilter !== "all" ? sourceFilter : void 0,
search: searchTerm || void 0,
date_from: dateFrom && dateFrom.trim() !== "" ? dateFrom : void 0,
date_to: dateTo && dateTo.trim() !== "" ? dateTo : void 0,
include_past: dateFrom && dateFrom.trim() !== "" || dateTo && dateTo.trim() !== "" ? "true" : "false",
page: 1,
per_page: 1e3
}
});
return (response == null ? void 0 : response.data) || [];
},
enabled: true
});
const statusCounts = reactExports.useMemo(() => {
const allDepartures = Array.isArray(departuresStatsData) ? departuresStatsData : [];
const counts = {
all: allDepartures.length,
upcoming: 0,
full: 0,
past: 0,
cancelled: 0,
trash: 0
};
allDepartures.forEach((departure) => {
if (departure.status === "upcoming") counts.upcoming += 1;
if (departure.status === "full") counts.full += 1;
if (departure.status === "past") counts.past += 1;
if (departure.status === "cancelled") counts.cancelled += 1;
if (departure.status === "trash") counts.trash += 1;
});
return counts;
}, [departuresStatsData]);
const statusOptions = [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all },
{
key: "upcoming",
label: __("Upcoming", "yatra"),
count: statusCounts.upcoming
},
{ key: "full", label: __("Full", "yatra"), count: statusCounts.full },
{ key: "past", label: __("Past", "yatra"), count: statusCounts.past },
{
key: "cancelled",
label: __("Cancelled", "yatra"),
count: statusCounts.cancelled
},
{ key: "trash", label: __("Trash", "yatra"), count: statusCounts.trash }
];
const bulkActionOptions = reactExports.useMemo(() => {
if (statusFilter === "trash") {
return [
{ value: "restore", label: __("Restore", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}
return [{ value: "trash", label: __("Move to Trash", "yatra") }];
}, [statusFilter]);
const handleBulkApply = async () => {
const ids = selectedIds;
if (!bulkAction || ids.length === 0) {
showToast(
__("Please select departures and a bulk action first.", "yatra"),
"error"
);
return;
}
if (!selectedTripId) {
showToast(__("Please select a trip first", "yatra"), "error");
return;
}
try {
if (bulkAction === "trash") {
await Promise.all(
ids.map(
(id) => apiClient.patch(`/trips/${selectedTripId}/departures/${id}`, {
status: "trash"
})
)
);
showToast(
__("Selected departures moved to trash.", "yatra"),
"success"
);
} else if (bulkAction === "restore") {
await Promise.all(
ids.map(
(id) => apiClient.patch(`/trips/${selectedTripId}/departures/${id}`, {
status: "upcoming"
})
)
);
showToast(__("Selected departures restored.", "yatra"), "success");
} else if (bulkAction === "delete") {
const eligibleIds = departures.filter(
(d) => ids.includes(d.id) && d.status === "trash" && d.source === "booking_created" && d.booked_count === 0
).map((d) => d.id);
if (eligibleIds.length === 0) {
showToast(
__(
"No selected departures can be deleted (must be in trash, booking-created with zero bookings).",
"No selected departures can be deleted (must be in trash, booking-created with zero bookings)."
),
"error"
);
return;
}
await Promise.all(
eligibleIds.map(
(id) => apiClient.delete(`/trips/${selectedTripId}/departures/${id}`)
)
);
showToast(
__("Selected departures deleted permanently.", "yatra"),
"success"
);
}
setSelectedIds([]);
setBulkAction("");
queryClient2.invalidateQueries({
queryKey: ["departures", selectedTripId]
});
queryClient2.invalidateQueries({
queryKey: ["departures-stats", selectedTripId]
});
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __(
"Failed to perform bulk action. Please try again.",
"Failed to perform bulk action. Please try again."
),
"error"
);
}
};
const tripIdForDeparture = reactExports.useCallback(
(departure) => {
if (departure.trip_id > 0) {
return departure.trip_id;
}
if (selectedTripId != null && selectedTripId > 0) {
return selectedTripId;
}
return null;
},
[selectedTripId]
);
const navigateToAdd = () => {
if (!selectedTripId) {
showToast(__("Please select a trip first", "yatra"), "error");
return;
}
window.location.href = `?page=yatra&subpage=departures&action=create&trip_id=${selectedTripId}`;
};
const navigateToEdit = reactExports.useCallback(
(departure) => {
const tid = tripIdForDeparture(departure);
if (!tid) {
showToast(
__(
"Cannot open edit: this departure has no trip id. Select a trip filter or refresh the list.",
"yatra"
),
"error"
);
return;
}
window.location.href = `?page=yatra&subpage=departures&action=edit&id=${departure.id}&trip_id=${tid}`;
},
[tripIdForDeparture, showToast]
);
const navigateToView = reactExports.useCallback(
(departure) => {
const tid = tripIdForDeparture(departure);
if (!tid) {
showToast(
__(
"Cannot open departure: missing trip id. Select a trip filter or refresh the list.",
"yatra"
),
"error"
);
return;
}
window.location.href = `?page=yatra&subpage=departures&action=view&id=${departure.id}&trip_id=${tid}`;
},
[tripIdForDeparture, showToast]
);
const deleteMutation = useMutation({
mutationFn: async ({ id, tripId: tid }) => {
await apiClient.delete(`/trips/${tid}/departures/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["departures"] });
queryClient2.invalidateQueries({ queryKey: ["departures-stats"] });
showToast(__("Departure deleted successfully", "yatra"), "success");
},
onError: (error2) => {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete departure", "yatra"),
"error"
);
}
});
const handleDelete = (departure) => {
const tid = tripIdForDeparture(departure);
if (!tid) {
showToast(
__("Cannot delete: missing trip id for this departure.", "yatra"),
"error"
);
return;
}
if (!confirm(__("Are you sure you want to delete this departure?", "yatra"))) {
return;
}
deleteMutation.mutate({ id: departure.id, tripId: tid });
};
const isAllSelected = departures.length > 0 && selectedIds.length === departures.length;
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(departures.map((d) => d.id));
} else {
setSelectedIds([]);
}
};
const handleSelectRow = (id, checked) => {
setSelectedIds(
(prev) => checked ? [...prev, id] : prev.filter((existingId) => existingId !== id)
);
};
const getStatusBadge = (status) => {
const statusMap = {
upcoming: {
label: __("Upcoming", "yatra"),
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
},
full: {
label: __("Full", "yatra"),
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400"
},
past: {
label: __("Past", "yatra"),
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400"
},
cancelled: {
label: __("Cancelled", "yatra"),
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400"
},
trash: {
label: __("Trash", "yatra"),
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400"
}
};
const statusInfo = statusMap[status] || statusMap.upcoming;
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: statusInfo.className, children: statusInfo.label });
};
const getSourceBadge = (source) => {
if (source === "manual") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400", children: __("Manual", "yatra") });
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400", children: __("Booking Created", "yatra") });
};
const clearDateFilters = () => {
setDateFrom("");
setDateTo("");
};
const openTravelerModal = (departure) => {
if (!departure.travelers || !departure.travelers.length) {
return;
}
setTravelerModalDeparture(departure);
};
const closeTravelerModal = () => setTravelerModalDeparture(null);
const departureColumns = React.useMemo(
() => [
{
key: "trip",
label: __("Trip", "yatra"),
visible: visibleColumns.trip,
render: (departure) => {
var _a2;
return ((_a2 = departure.trip) == null ? void 0 : _a2.title) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `?page=yatra&subpage=trips&action=edit&id=${departure.trip.id}`,
className: "text-blue-600 hover:text-blue-800 hover:underline",
title: __("View trip", "yatra"),
children: departure.trip.title
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "--" });
}
},
{
key: "date",
label: __("Date", "yatra"),
visible: visibleColumns.date,
render: (departure) => formatDate(departure.start_date || departure.date)
},
{
key: "time",
label: __("Time", "yatra"),
visible: visibleColumns.time,
render: (departure) => departure.time ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: departure.time }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "--" })
},
{
key: "capacity",
label: __("Capacity", "yatra"),
visible: visibleColumns.capacity,
render: (departure) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: __("Max Capacity", "yatra"), children: departure.max_capacity })
},
{
key: "booked",
label: __("Booked", "yatra"),
visible: visibleColumns.booked,
render: (departure) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: __("Booked Count", "yatra"), children: departure.booked_count })
},
{
key: "available",
label: __("Available", "yatra"),
visible: visibleColumns.available,
render: (departure) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: departure.available_capacity === 0 ? "text-red-600 font-semibold" : "",
title: __("Available Capacity", "yatra"),
children: departure.available_capacity
}
)
},
{
key: "revenue",
label: __("Revenue", "yatra"),
visible: visibleColumns.revenue,
render: (departure) => departure.total_revenue !== void 0 && departure.total_revenue > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-green-600", children: formatCurrency(departure.total_revenue) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "--" })
},
{
key: "travelers",
label: __("Travelers", "yatra"),
visible: visibleColumns.travelers,
render: (departure) => {
var _a2;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: () => openTravelerModal(departure),
disabled: !departure.travelers || departure.travelers.length === 0,
className: "px-3 py-1.5",
children: [
departure.travelers_count || ((_a2 = departure.travelers) == null ? void 0 : _a2.length) || 0,
" ",
__("Traveler(s)", "yatra")
]
}
);
}
},
{
key: "bookings",
label: __("Bookings", "yatra"),
visible: visibleColumns.bookings,
render: (departure) => departure.booking_ids && departure.booking_ids.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1", children: [
departure.booking_ids.slice(0, 3).map((bookingId) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: `?page=yatra&subpage=bookings&action=view&id=${bookingId}`,
className: "text-blue-600 hover:text-blue-800 hover:underline text-sm",
title: __("View booking", "yatra"),
children: [
"#",
bookingId
]
},
bookingId
)),
departure.booking_ids.length > 3 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500 text-sm", children: [
"+",
departure.booking_ids.length - 3
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "--" })
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status,
render: (departure) => getStatusBadge(departure.status)
},
{
key: "source",
label: __("Source", "yatra"),
visible: visibleColumns.source,
render: (departure) => getSourceBadge(departure.source)
}
],
[visibleColumns, openTravelerModal]
);
const handleMoveToTrash = async (departure) => {
const tid = tripIdForDeparture(departure);
if (!tid) {
showToast(
__(
"Cannot move to trash: missing trip id for this departure.",
"yatra"
),
"error"
);
return;
}
if (!window.confirm(
__("Are you sure you want to move this departure to trash?", "yatra")
)) {
return;
}
try {
await apiClient.patch(`/trips/${tid}/departures/${departure.id}`, {
status: "trash"
});
showToast(__("Departure moved to trash.", "yatra"), "success");
queryClient2.invalidateQueries({ queryKey: ["departures"] });
queryClient2.invalidateQueries({ queryKey: ["departures-stats"] });
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to move departure to trash", "yatra"),
"error"
);
}
};
const handleRestore = async (departure) => {
const tid = tripIdForDeparture(departure);
if (!tid) {
showToast(
__("Cannot restore: missing trip id for this departure.", "yatra"),
"error"
);
return;
}
if (!window.confirm(
__("Are you sure you want to restore this departure?", "yatra")
)) {
return;
}
try {
await apiClient.patch(`/trips/${tid}/departures/${departure.id}`, {
status: "upcoming"
});
showToast(__("Departure restored.", "yatra"), "success");
queryClient2.invalidateQueries({ queryKey: ["departures"] });
queryClient2.invalidateQueries({ queryKey: ["departures-stats"] });
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to restore departure", "yatra"),
"error"
);
}
};
const tableActions = React.useMemo(() => {
const actions = [
{
key: "view",
label: __("View", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (departure) => navigateToView(departure)
},
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (departure) => navigateToEdit(departure),
condition: (departure) => departure.status !== "trash"
}
];
if (statusFilter === "trash") {
actions.push({
key: "restore",
label: __("Restore", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4" }),
onClick: (departure) => handleRestore(departure)
});
actions.push({
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (departure) => handleDelete(departure)
});
} else {
actions.push({
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (departure) => handleMoveToTrash(departure),
variant: "destructive"
});
}
return actions;
}, [
statusFilter,
navigateToEdit,
navigateToView,
handleDelete,
handleRestore,
handleMoveToTrash
]);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Departures", "yatra"),
description: __("Manage trip departure dates and capacity", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: selectedTripId && /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: navigateToAdd, variant: "default", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
__("Add Departure", "yatra")
] }) })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900 rounded-lg border border-blue-200 dark:border-gray-700 p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-start justify-between gap-4 mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: __("Select Trip", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mt-1", children: __(
"Choose a trip to manage its departures and capacity",
"yatra"
) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [
__("Trip", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
SearchableSelect,
{
value: (selectedTripId == null ? void 0 : selectedTripId.toString()) || "",
onChange: (value) => {
const tripId = value ? parseInt(value) : null;
setSelectedTripId(tripId);
setPage(1);
},
options: [
{ value: "", label: __("-- Select a Trip --", "yatra") },
...tripsList.map((trip) => ({
value: trip.id.toString(),
label: `${trip.title}${trip.trip_type === "single_day" ? " (Single Day)" : trip.trip_type === "multi_day" ? " (Multi-Day)" : ""}`
}))
],
placeholder: __("Search or select a trip...", "yatra"),
searchPlaceholder: __("Search by trip name or ID...", "yatra"),
className: "w-full",
required: true
}
)
] }),
selectedTripId && (() => {
const selectedTripData = tripsList.find(
(trip) => trip.id === selectedTripId
);
return selectedTripData ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 pt-2 border-t border-blue-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedTripData.starting_location }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "→" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedTripData.ending_location })
] }),
selectedTripData.trip_type && /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
className: selectedTripData.trip_type === "single_day" ? "bg-purple-100 text-purple-700 dark:bg-purple-900/20 dark:text-purple-400" : "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-400",
children: selectedTripData.trip_type === "single_day" ? __("Single Day", "yatra") : __("Multi-Day", "yatra")
}
)
] }) : null;
})()
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-4 items-end flex-wrap", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-[200px]", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Search", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search by date or notes...", "yatra"),
value: searchTerm,
onChange: (e) => {
setSearchTerm(e.target.value);
setPage(1);
},
className: "pl-10"
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-48", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: statusFilter,
onChange: (e) => {
setStatusFilter(e.target.value);
setPage(1);
},
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "upcoming", children: __("Upcoming", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "full", children: __("Full", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "past", children: __("Past", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "cancelled", children: __("Cancelled", "yatra") })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-48", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Source", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: sourceFilter,
onChange: (e) => {
setSourceFilter(e.target.value);
setPage(1);
},
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Sources", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "manual", children: __("Manual", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "booking_created", children: __("Booking Created", "yatra") })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-80", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("Date Range", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
DateRangePicker,
{
dateFrom,
dateTo,
onDateFromChange: (dateStr) => {
setDateFrom(dateStr || "");
setPage(1);
},
onDateToChange: (dateStr) => {
setDateTo(dateStr || "");
setPage(1);
},
onClear: clearDateFilters,
placeholder: __("Select date range...", "yatra")
}
)
] })
] }) }) }) }),
!isDeparturesError && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (filter2) => {
setStatusFilter(filter2);
setPage(1);
},
statusOptions,
showColumnsDropdown: showColumnMenu,
setShowColumnsDropdown: setShowColumnMenu,
columnOptions,
onToggleColumn: (key2) => toggleColumn(key2),
bulkMutationPending: deleteMutation.isPending,
totalItems: departures.length,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: departures,
columns: departureColumns,
actions: tableActions,
isLoading,
isError: isDeparturesError,
errorText: __("Error loading departures", "yatra"),
errorDescription: __(
"We couldn't connect to the departures service. Please refresh or try again shortly.",
"yatra"
),
errorDetails: derivedErrorDetails,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => refetch(),
emptyText: __("No departures found", "yatra"),
emptyDescription: __(
"Get started by creating your first departure.",
"yatra"
),
onCreateClick: navigateToAdd,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => handleSelectRow(id, checked),
onSelectAll: handleSelectAll,
isAllSelected,
getItemId: (departure) => departure.id,
getItemStatus: (departure) => departure.status,
capability: "yatra_view_trips"
}
) }) }),
totalItems > 0 && departures.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems,
itemsPerPage,
onPageChange: (newPage) => setPage(newPage),
itemName: __("departures", "yatra")
}
) })
] }),
travelerModalDeparture && travelerModalDeparture.travelers && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full max-w-3xl rounded-lg bg-white p-6 shadow-xl dark:bg-gray-900", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 flex items-start justify-between gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-800 dark:text-gray-100", children: [
__("Travelers for", "yatra"),
" ",
((_b = travelerModalDeparture.trip) == null ? void 0 : _b.title) || __("Trip", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatDate(
travelerModalDeparture.start_date || travelerModalDeparture.date
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: closeTravelerModal, children: __("Close", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-[60vh] overflow-y-auto pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Table$1, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Traveler", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Lead", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Email", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Phone", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: __("Booking", "yatra") })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { children: travelerModalDeparture.travelers.map((traveler) => /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell, { className: "font-semibold text-gray-800 dark:text-gray-100", children: [
traveler.first_name || "—",
" ",
traveler.last_name || ""
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: traveler.is_lead ? /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300", children: __("Lead", "yatra") }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "—" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: traveler.email || "—" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: traveler.phone || "—" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `?page=yatra&subpage=bookings&action=view&id=${traveler.booking_id}`,
className: "text-blue-600 hover:underline",
children: traveler.booking_reference || `#${traveler.booking_id}`
}
) })
] }, traveler.id)) })
] }) })
] }) })
] });
};
const DepartureForm = () => {
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const urlParams = new URLSearchParams(window.location.search);
const tripId = urlParams.get("trip_id") ? parseInt(urlParams.get("trip_id")) : null;
const departureId = urlParams.get("id") || null;
const isEditMode = !!departureId;
const [formData, setFormData] = reactExports.useState({
date: "",
time: "",
max_capacity: "",
price_override: "",
notes: ""
});
const [errors, setErrors] = reactExports.useState({});
const { data: departureData, isLoading: isLoadingDeparture } = useQuery({
queryKey: ["departure", departureId],
queryFn: async () => {
if (!departureId || !tripId) return null;
const response = await apiClient.get(
`/trips/${tripId}/departures/${departureId}`
);
return (response == null ? void 0 : response.data) || response;
},
enabled: isEditMode && !!departureId && !!tripId
});
reactExports.useEffect(() => {
var _a, _b;
if (departureData) {
setFormData({
date: departureData.date || departureData.start_date || "",
time: departureData.time || "",
max_capacity: ((_a = departureData.max_capacity) == null ? void 0 : _a.toString()) || "",
price_override: ((_b = departureData.price_override) == null ? void 0 : _b.toString()) || "",
notes: departureData.notes || ""
});
}
}, [departureData]);
const saveMutation = useMutation({
mutationFn: async (data) => {
if (!tripId) throw new Error("Trip ID is required");
const payload = {
trip_id: tripId,
date: data.date,
max_capacity: parseInt(data.max_capacity),
source: "manual"
};
if (data.time) payload.time = data.time;
if (data.price_override)
payload.price_override = parseFloat(data.price_override);
if (data.notes) payload.notes = data.notes;
if (isEditMode && departureId) {
return await apiClient.put(
`/trips/${tripId}/departures/${departureId}`,
payload
);
} else {
return await apiClient.post(`/trips/${tripId}/departures`, payload);
}
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["departures", tripId] });
showToast(
isEditMode ? __("Departure updated successfully", "yatra") : __("Departure created successfully", "yatra"),
"success"
);
window.location.href = `?page=yatra&subpage=departures${tripId ? `&trip_id=${tripId}` : ""}`;
},
onError: (error) => {
showToast(
(error == null ? void 0 : error.message) || __("Failed to save departure", "yatra"),
"error"
);
}
});
const validateForm = () => {
const newErrors = {};
if (!formData.date) {
newErrors.date = __("Date is required", "yatra");
}
if (!formData.max_capacity) {
newErrors.max_capacity = __("Max capacity is required", "yatra");
} else if (parseInt(formData.max_capacity) < 1) {
newErrors.max_capacity = __("Max capacity must be at least 1", "yatra");
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e) => {
e.preventDefault();
if (validateForm()) {
saveMutation.mutate(formData);
}
};
const handleBack = () => {
window.location.href = `?page=yatra&subpage=departures${tripId ? `&trip_id=${tripId}` : ""}`;
};
if (isLoadingDeparture) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "animate-pulse", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-64 bg-gray-200 dark:bg-gray-700 rounded" })
] }) });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Departure", "yatra") : __("Add Departure", "yatra"),
description: __(
"Create or update a departure date for this trip",
"yatra"
),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", onClick: handleBack, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4 mr-2" }),
__("Back", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "pt-6 space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [
__("Departure Date", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
DatePicker,
{
value: formData.date,
onChange: (value) => setFormData({ ...formData, date: value }),
minDate: /* @__PURE__ */ new Date()
}
),
errors.date && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: errors.date }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("Select the departure date for this trip", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [
__("Departure Time", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-400", children: [
"(",
__("Optional", "yatra"),
")"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
TimePicker,
{
value: formData.time || "",
onChange: (value) => setFormData({ ...formData, time: value })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __("Optional departure time (e.g., 09:00 AM)", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [
__("Max Capacity", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: "1",
value: formData.max_capacity,
onChange: (e) => setFormData({ ...formData, max_capacity: e.target.value }),
placeholder: __("e.g., 20", "yatra")
}
),
errors.max_capacity && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: errors.max_capacity }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Maximum number of travelers for this departure",
"yatra"
)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [
__("Price Override", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-400", children: [
"(",
__("Optional", "yatra"),
")"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
step: "0.01",
min: "0",
value: formData.price_override || "",
onChange: (e) => setFormData({ ...formData, price_override: e.target.value }),
placeholder: __("e.g., 150.00", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Override the default trip price for this specific departure",
"yatra"
)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [
__("Notes", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-400", children: [
"(",
__("Optional", "yatra"),
")"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white",
rows: 4,
value: formData.notes || "",
onChange: (e) => setFormData({ ...formData, notes: e.target.value }),
placeholder: __(
"Additional notes about this departure...",
"yatra"
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
HelpText,
{
text: __(
"Internal notes about this departure (not visible to customers)",
"yatra"
)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", onClick: handleBack, children: __("Cancel", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: saveMutation.isPending, children: saveMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4 mr-2" }),
__("Save Departure", "yatra")
] }) })
] })
] }) }) })
] });
};
const SkeletonMetricCard = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2 w-16 mx-auto" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-20 mx-auto" })
] });
const SVGIcons = {
Truck: () => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 17a2 2 0 11-4 0 2 2 0 014 0zM21 17a2 2 0 11-4 0 2 2 0 014 0z"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"
}
)
]
}
),
Calendar: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
}
)
}
),
Users: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a4 4 0 11-8 0 4 4 0 018 0z"
}
)
}
),
DollarSign: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
}
)
}
),
Activity: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
}
)
}
),
BarChart: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
}
)
}
),
MapPin: () => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
}
)
]
}
),
FileText: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
}
)
}
),
Info: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
}
)
}
),
XCircle: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-6 h-6",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
}
)
}
)
};
const ViewDeparture = () => {
var _a, _b;
const [activeTab, setActiveTab] = reactExports.useState("overview");
const params = new URLSearchParams(window.location.search);
const idParam = params.get("id");
const tripIdParam = params.get("trip_id");
const id = idParam ? parseInt(idParam, 10) : NaN;
const tripId = tripIdParam ? parseInt(tripIdParam, 10) : NaN;
const {
data: departureData,
isLoading,
error
} = useQuery({
queryKey: ["departure-details", tripId, id],
enabled: Number.isFinite(id) && Number.isFinite(tripId),
queryFn: async () => {
if (!Number.isFinite(id) || !Number.isFinite(tripId)) {
throw new Error(__("Invalid departure or trip ID", "yatra"));
}
const response = await apiClient.get(`/trips/${tripId}/departures/${id}`);
const payload = (response == null ? void 0 : response.data) ?? response;
return payload && typeof payload === "object" ? payload : {};
}
});
const formatCurrency2 = (amount) => {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
}).format(amount);
};
const formatDate2 = (dateString) => {
return formatDate$1(dateString);
};
const formatTime = (timeString) => {
return (/* @__PURE__ */ new Date(`2000-01-01T${timeString}`)).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "2-digit",
hour12: true
});
};
if (!Number.isFinite(id) || !Number.isFinite(tripId)) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-xl font-bold text-red-800 dark:text-red-400 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.XCircle, {}),
__("Departure Not Found", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-600 dark:text-red-400 mt-2", children: __(
"Missing or invalid departure ID or trip ID in the URL.",
"yatra"
) })
] });
}
if (isLoading) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "animate-pulse", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-2/3 mb-6" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }) }) });
}
if (error) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-xl font-bold text-red-800 dark:text-red-400 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.XCircle, {}),
__("Error Loading Departure", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-600 dark:text-red-400 mt-2", children: (error == null ? void 0 : error.message) || __("Unable to load departure details.", "yatra") })
] });
}
const departure = departureData || {};
const trip = departure.trip || {};
const maxCapacity = departure.max_capacity || 0;
const bookedCount = departure.booked_count || 0;
const availableSpots = maxCapacity - bookedCount;
const occupancyRate = maxCapacity > 0 ? bookedCount / maxCapacity * 100 : 0;
const getStatusStyle = (status) => {
switch (status) {
case "confirmed":
return "bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 border-green-200 dark:border-green-800";
case "upcoming":
return "bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 border-blue-200 dark:border-blue-800";
case "full":
return "bg-orange-100 dark:bg-orange-900/20 text-orange-800 dark:text-orange-400 border-orange-200 dark:border-orange-800";
case "past":
return "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300 border-gray-200 dark:border-gray-700";
case "cancelled":
return "bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-400 border-red-200 dark:border-red-800";
default:
return "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300 border-gray-200 dark:border-gray-700";
}
};
const tabs = [
{ id: "overview", label: "Overview", icon: "BarChart" },
{ id: "bookings", label: "Bookings", icon: "Calendar" },
{ id: "travelers", label: "Travelers", icon: "Users" },
{ id: "financials", label: "Financials", icon: "DollarSign" },
{ id: "operations", label: "Operations", icon: "Activity" }
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Truck, {}),
trip.title || __("Departure Details", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardDescription, { children: [
departure.start_date && formatDate2(departure.start_date),
departure.time && ` ${__("at", "yatra")} ${formatTime(departure.time)}`
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: departure.status === "confirmed" ? "success" : departure.status === "cancelled" ? "error" : "default",
children: departure.status || __("upcoming", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "px-3 py-1 rounded-full text-sm font-medium bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-700", children: [
"ID: ",
departure.id
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonMetricCard, {}, i)) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center p-4 bg-blue-50 rounded-lg border border-blue-200", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl font-bold text-blue-600", children: bookedCount }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-blue-800 mt-1", children: __("Bookings", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center p-4 bg-green-50 rounded-lg border border-green-200", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl font-bold text-green-600", children: maxCapacity }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-green-800 mt-1", children: __("Total Capacity", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center p-4 bg-purple-50 rounded-lg border border-purple-200", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-3xl font-bold text-purple-600", children: [
occupancyRate.toFixed(1),
"%"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-purple-800 mt-1", children: __("Occupancy Rate", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center p-4 bg-orange-50 rounded-lg border border-orange-200", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl font-bold text-orange-600", children: formatCurrency2(departure.total_revenue || 0) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-orange-800 mt-1", children: __("Total Revenue", "yatra") })
] })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { className: "flex space-x-8 px-6", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setActiveTab(tab.id),
className: `py-4 px-3 border-b-2 font-medium text-sm transition-colors flex items-center justify-between min-w-[120px] ${activeTab === tab.id ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center", children: React.createElement(
SVGIcons[tab.icon]
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2", children: tab.label })
]
},
tab.id
)) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6", children: [
activeTab === "overview" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Calendar, {}),
__("Departure Information", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Start Date", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: departure.start_date ? formatDate2(departure.start_date) : "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("End Date", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: departure.end_date ? formatDate2(departure.end_date) : "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Departure Time", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: departure.time ? formatTime(departure.time) : "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Duration", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [
trip.duration_days || "--",
" days"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Source", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: departure.source || "Manual" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Users, {}),
__("Capacity Management", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: __("Occupancy", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [
occupancyRate.toFixed(1),
"%"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "bg-blue-600 h-3 rounded-full transition-all duration-300",
style: { width: `${Math.min(occupancyRate, 100)}%` }
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-4 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-blue-600 dark:text-blue-400", children: bookedCount }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: __("Booked", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-green-600 dark:text-green-400", children: availableSpots }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: __("Available", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-gray-600 dark:text-gray-400", children: maxCapacity }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: __("Total", "yatra") })
] })
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.MapPin, {}),
__("Trip Details", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Starting Location", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: trip.starting_location || "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Ending Location", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: trip.ending_location || "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Difficulty Level", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: trip.difficulty_level || "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Group Type", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: trip.group_type || "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Min Travelers", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: trip.min_travelers || "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Max Travelers", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: trip.max_travelers || "--" })
] }),
trip.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Duration", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "font-medium text-gray-900 dark:text-white", children: [
trip.duration,
" ",
__("days", "yatra")
] })
] }),
trip.created_at && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Trip Created", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: formatDate2(trip.created_at) })
] }),
trip.price && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [
__("Base Price", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: formatCurrency2(trip.price) })
] })
] })
] }),
departure.notes && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-yellow-800 dark:text-yellow-300 mb-2 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.FileText, {}),
__("Notes", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-yellow-700 dark:text-yellow-400 whitespace-pre-wrap", children: departure.notes })
] })
] }),
activeTab === "bookings" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Calendar, {}),
__("Linked Bookings", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
((_a = departure.booking_ids) == null ? void 0 : _a.length) || 0,
" ",
__("bookings", "yatra")
] })
] }),
departure.booking_ids && departure.booking_ids.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: departure.booking_ids.map((bookingId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-start", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-medium text-gray-900 dark:text-white", children: [
__("Booking", "yatra"),
" #",
bookingId
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mt-1", children: __("Click to view booking details", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 text-xs rounded", children: __("Active", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `?page=yatra&subpage=bookings&action=view&id=${bookingId}`,
className: "text-blue-600 hover:text-blue-800 text-sm font-medium",
children: "View →"
}
)
] })
] })
},
bookingId
)) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto mb-4 text-gray-400 dark:text-gray-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Calendar, {}) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mt-4", children: __("No Bookings Yet", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mt-2", children: __(
"This departure doesn't have any linked bookings.",
"yatra"
) })
] })
] }),
activeTab === "travelers" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Users, {}),
__("Travelers", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
((_b = departure.travelers) == null ? void 0 : _b.length) || 0,
" ",
__("travelers", "yatra")
] })
] }),
departure.travelers && departure.travelers.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: departure.travelers.map((traveler, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-start", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-medium text-gray-900 dark:text-white", children: [
traveler.first_name,
" ",
traveler.last_name,
traveler.is_lead && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 px-2 py-1 bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 text-xs rounded", children: __("Lead", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400 mt-1", children: [
traveler.email && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block", children: traveler.email }),
traveler.phone && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block", children: traveler.phone })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-right", children: traveler.booking_reference && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: `?page=yatra&subpage=bookings&action=view&id=${traveler.booking_id}`,
className: "text-blue-600 hover:text-blue-800 text-sm font-medium",
children: [
"Booking #",
traveler.booking_reference
]
}
) })
] })
},
traveler.id || index
)) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto mb-4 text-gray-400 dark:text-gray-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Users, {}) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mt-4", children: __("No Travelers Yet", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mt-2", children: __(
"No travelers have been assigned to this departure.",
"yatra"
) })
] })
] }),
activeTab === "financials" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.DollarSign, {}),
__("Financial Overview", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl font-bold text-green-600 dark:text-green-400", children: formatCurrency2(departure.total_revenue || 0) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-green-800 dark:text-green-300 mt-1", children: __("Total Revenue", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl font-bold text-blue-600 dark:text-blue-400", children: formatCurrency2(departure.collected_amount || 0) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-blue-800 dark:text-blue-300 mt-1", children: __("Collected", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-6 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl font-bold text-orange-600 dark:text-orange-400", children: formatCurrency2(
(departure.total_revenue || 0) - (departure.collected_amount || 0)
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-orange-800 dark:text-orange-300 mt-1", children: __("Pending", "yatra") })
] })
] }),
departure.price_override && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-medium text-yellow-800 dark:text-yellow-300 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Info, {}),
__("Price Override Active", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-yellow-700 dark:text-yellow-400 text-sm mt-1", children: [
__("This departure has a custom price of", "yatra"),
" ",
formatCurrency2(departure.price_override),
__("instead of the standard trip price.", "yatra")
] })
] })
] }),
activeTab === "operations" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Activity, {}),
__("Operational Details", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.BarChart, {}),
__("Status Information", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Current Status", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `px-2 py-1 rounded text-sm font-medium ${getStatusStyle(departure.status || "upcoming")}`,
children: departure.status || "upcoming"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Created", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: departure.created_at ? formatDate2(departure.created_at) : "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Last Updated", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: departure.updated_at ? formatDate2(departure.updated_at) : "--" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Source", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: departure.source || "Manual" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(SVGIcons.Activity, {}),
__("Performance Metrics", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Booking Efficiency", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [
occupancyRate.toFixed(1),
"%"
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Revenue per Seat", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: formatCurrency2(
(departure.total_revenue || 0) / Math.max(maxCapacity, 1)
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
__("Utilization Rate", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [
occupancyRate.toFixed(1),
"%"
] })
] })
] })
] })
] })
] })
] })
] })
] });
};
const EnquiryReplyAffordance = ({
enquiryId,
value,
onAccept,
onDraftingChange,
autoDraftOnMount = false,
className = ""
}) => {
const [menuOpen, setMenuOpen] = reactExports.useState(false);
const [isRunning, setIsRunning] = reactExports.useState(false);
const [error, setError] = reactExports.useState(null);
const [preview, setPreview] = reactExports.useState(null);
const [includeSensitive, setIncludeSensitive] = reactExports.useState(false);
const wrapperRef = reactExports.useRef(null);
const autoDraftedRef = reactExports.useRef(false);
const gateBlocks = !isAiEligible() || !isAiModuleEnabled();
const ready = isAiReady();
reactExports.useEffect(() => {
if (!menuOpen) return;
const onDoc = (e) => {
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
setMenuOpen(false);
}
};
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, [menuOpen]);
const runDraft = reactExports.useCallback(
async (variant) => {
if (!ready) {
setError(
__(
"Add an API key in Yatra → AI Assistant before drafting replies.",
"yatra"
)
);
return;
}
setMenuOpen(false);
setError(null);
setIsRunning(true);
onDraftingChange == null ? void 0 : onDraftingChange(true);
try {
const res = await aiApi.draftEnquiryReply(enquiryId, {
variant,
current_value: value,
include_sensitive: includeSensitive
});
setPreview({ text: res.text, variant });
} catch (e) {
setError(extractError(e));
} finally {
setIsRunning(false);
onDraftingChange == null ? void 0 : onDraftingChange(false);
}
},
[enquiryId, value, includeSensitive, ready, onDraftingChange]
);
reactExports.useEffect(() => {
if (!autoDraftOnMount || autoDraftedRef.current) return;
if (!ready) return;
if (value.trim() !== "") return;
if (enquiryId <= 0) return;
autoDraftedRef.current = true;
runDraft("fresh");
}, [autoDraftOnMount, ready, enquiryId]);
const accept = () => {
if (!preview) return;
onAccept(preview.text);
setPreview(null);
};
const tryAgain = () => {
if (!preview) return;
runDraft(preview.variant);
};
const hasValue = value.trim() !== "";
if (gateBlocks) {
return null;
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: wrapperRef, className: `relative inline-block ${className}`, children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => {
if (!ready) {
setError(
__("Add an API key in Yatra → AI Assistant first.", "yatra")
);
return;
}
if (preview) return;
setMenuOpen((v) => !v);
setError(null);
},
disabled: isRunning,
title: __("AI: draft a reply", "yatra"),
className: `inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors ${isRunning ? "border-blue-200 bg-blue-50 text-blue-500 dark:border-blue-500/40 dark:bg-blue-900/20 dark:text-blue-300" : "border-blue-300 bg-blue-50 text-blue-700 hover:border-blue-400 hover:bg-blue-100 dark:border-blue-500/40 dark:bg-blue-900/20 dark:text-blue-200 dark:hover:bg-blue-900/40"}`,
"aria-label": __("Draft reply with AI", "yatra"),
children: [
isRunning ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-3.5 w-3.5" }),
__("Draft reply", "yatra")
]
}
),
menuOpen && !preview && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "absolute right-0 z-30 mt-1 w-64 rounded-md border border-gray-200 bg-white p-1 text-sm shadow-lg dark:border-gray-700 dark:bg-gray-800",
role: "menu",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => runDraft("fresh"),
className: "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-gray-700 hover:bg-blue-50 dark:text-gray-200 dark:hover:bg-blue-900/30",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Wand2, { className: "h-4 w-4 text-blue-500" }),
hasValue ? __("Regenerate from scratch", "yatra") : __("Generate reply", "yatra")
]
}
),
hasValue && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => runDraft("warmer"),
className: "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-gray-700 hover:bg-blue-50 dark:text-gray-200 dark:hover:bg-blue-900/30",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Heart, { className: "h-4 w-4 text-blue-400" }),
__("Make warmer", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => runDraft("shorter"),
className: "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-gray-700 hover:bg-blue-50 dark:text-gray-200 dark:hover:bg-blue-900/30",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Scissors, { className: "h-4 w-4 text-blue-400" }),
__("Make shorter", "yatra")
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-1 border-t border-gray-100 dark:border-gray-700" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-start gap-2 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
className: "mt-0.5",
checked: includeSensitive,
onChange: (e) => setIncludeSensitive(e.target.checked)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
includeSensitive ? /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldOff, { className: "mr-1 inline h-3 w-3 text-amber-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Shield, { className: "mr-1 inline h-3 w-3 text-green-500" }),
__(
"Include dietary / medical / special-needs in prompt",
"yatra"
)
] })
] })
]
}
),
preview && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute right-0 z-30 mt-1 w-[480px] max-w-[90vw] rounded-md border border-blue-200 bg-white p-3 text-sm shadow-xl dark:border-blue-500/40 dark:bg-gray-800", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-medium text-blue-600 dark:text-blue-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-3.5 w-3.5" }),
preview.variant === "fresh" ? __("AI drafted this reply", "yatra") : preview.variant === "warmer" ? __("AI rewrote to be warmer", "yatra") : __("AI rewrote to be shorter", "yatra")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "max-h-72 overflow-y-auto whitespace-pre-wrap rounded border border-gray-100 bg-gray-50 p-2 text-xs text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200", children: preview.text || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: __("(empty response)", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-center justify-end gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: tryAgain,
className: "rounded border border-gray-200 px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700",
children: __("Try again", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => setPreview(null),
className: "inline-flex items-center gap-1 rounded border border-gray-200 px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }),
__("Discard", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: accept,
disabled: !preview.text,
className: "inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-700 disabled:opacity-50",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-3 w-3" }),
__("Use this reply", "yatra")
]
}
)
] })
] }),
error && !preview && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "absolute right-0 z-30 mt-1 w-72 rounded-md border border-red-200 bg-white p-2 text-xs text-red-700 shadow-lg dark:border-red-500/40 dark:bg-gray-800 dark:text-red-300",
role: "alert",
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: error }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => setError(null),
className: "text-red-400 hover:text-red-600",
"aria-label": __("Dismiss", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3.5 w-3.5" })
}
)
] })
}
)
] });
};
function extractError(e) {
var _a;
if (!e) return "AI request failed.";
const data = ((_a = e == null ? void 0 : e.response) == null ? void 0 : _a.data) ?? (e == null ? void 0 : e.data) ?? null;
if (data && typeof data === "object" && typeof data.message === "string") {
return data.message;
}
if (typeof (e == null ? void 0 : e.message) === "string") return e.message;
return String(e);
}
const Enquiries = () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("created_at");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [respondDialogOpen, setRespondDialogOpen] = reactExports.useState(false);
const [selectedEnquiry, setSelectedEnquiry] = reactExports.useState(null);
const [responseMessage, setResponseMessage] = reactExports.useState("");
const [deleteDialogOpen, setDeleteDialogOpen] = reactExports.useState(false);
const [enquiryToDelete, setEnquiryToDelete] = reactExports.useState(null);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [bulkConfirmOpen, setBulkConfirmOpen] = reactExports.useState(false);
const [bulkApplying, setBulkApplying] = reactExports.useState(false);
const [pendingBulkAction, setPendingBulkAction] = reactExports.useState(
null
);
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
if (typeof window === "undefined") {
return {
customer: true,
trip: true,
message: true,
travelers: true,
preferred_date: true,
status: true,
date: true
};
}
const saved = window.localStorage.getItem(
"yatra-enquiries-visible-columns"
);
return saved ? JSON.parse(saved) : {
customer: true,
trip: true,
message: true,
travelers: true,
preferred_date: true,
status: true,
date: true
};
});
const bulkActionOptions = reactExports.useMemo(() => {
if (statusFilter === "trash") {
return [{ value: "delete", label: __("Delete Permanently", "yatra") }];
}
if (statusFilter === "spam") {
return [
{ value: "mark_trash", label: __("Move to Trash", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}
return [
{ value: "mark_spam", label: __("Mark as Spam", "yatra") },
{ value: "mark_trash", label: __("Move to Trash", "yatra") },
{ value: "delete", label: __("Delete Permanently", "yatra") }
];
}, [statusFilter]);
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { navigate } = useNavigate();
const { showToast } = useToast();
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) {
params.search = searchTerm;
}
if (statusFilter !== "all") {
params.status = statusFilter;
}
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const { data: statsData } = useQuery({
queryKey: ["enquiries-stats"],
queryFn: async () => {
return await apiService.getEnquiriesStats();
},
enabled: can("yatra_view_enquiries")
});
const statusCounts = {
all: (statsData == null ? void 0 : statsData.total) || 0,
new: ((_b = (_a = statsData == null ? void 0 : statsData.by_status) == null ? void 0 : _a.new) == null ? void 0 : _b.count) || 0,
pending: ((_d = (_c = statsData == null ? void 0 : statsData.by_status) == null ? void 0 : _c.pending) == null ? void 0 : _d.count) || 0,
responded: ((_f = (_e = statsData == null ? void 0 : statsData.by_status) == null ? void 0 : _e.responded) == null ? void 0 : _f.count) || 0,
converted: ((_h = (_g = statsData == null ? void 0 : statsData.by_status) == null ? void 0 : _g.converted) == null ? void 0 : _h.count) || 0,
closed: ((_j = (_i = statsData == null ? void 0 : statsData.by_status) == null ? void 0 : _i.closed) == null ? void 0 : _j.count) || 0,
spam: ((_l = (_k = statsData == null ? void 0 : statsData.by_status) == null ? void 0 : _k.spam) == null ? void 0 : _l.count) || 0,
trash: ((_n = (_m = statsData == null ? void 0 : statsData.by_status) == null ? void 0 : _m.trash) == null ? void 0 : _n.count) || 0
};
const handleBulkApply = () => {
if (!bulkAction || selectedIds.length === 0) {
return;
}
setPendingBulkAction(bulkAction);
setBulkConfirmOpen(true);
};
const confirmBulkApply = async () => {
if (!pendingBulkAction || selectedIds.length === 0) {
setBulkConfirmOpen(false);
return;
}
setBulkApplying(true);
try {
if (["delete", "mark_spam", "mark_trash"].includes(pendingBulkAction)) {
await apiService.bulkEnquiriesAction(pendingBulkAction, selectedIds);
queryClient2.invalidateQueries({ queryKey: ["enquiries"] });
}
} catch (error2) {
console.error("Bulk enquiry action error", error2);
} finally {
setBulkApplying(false);
setBulkConfirmOpen(false);
setPendingBulkAction(null);
setSelectedIds([]);
setBulkAction("");
}
};
const toggleColumn = (columnKey) => {
const newVisible = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisible);
if (typeof window !== "undefined") {
window.localStorage.setItem(
"yatra-enquiries-visible-columns",
JSON.stringify(newVisible)
);
}
};
const columnOptions = [
{
key: "customer",
label: __("Customer", "yatra"),
visible: visibleColumns.customer
},
{ key: "trip", label: __("Trip", "yatra"), visible: visibleColumns.trip },
{
key: "message",
label: __("Message", "yatra"),
visible: visibleColumns.message
},
{
key: "travelers",
label: __("Travelers", "yatra"),
visible: visibleColumns.travelers
},
{
key: "preferred_date",
label: __("Preferred Date", "yatra"),
visible: visibleColumns.preferred_date
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{ key: "date", label: __("Date", "yatra"), visible: visibleColumns.date }
];
const actions = [
{
key: "view",
label: __("View", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (enquiry) => handleView(enquiry),
condition: () => can("yatra_view_enquiries")
},
{
key: "respond",
label: __("Respond", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4" }),
onClick: (enquiry) => handleRespond(enquiry),
// Respond cap matches the backend gate on EnquiryController's
// PUT /enquiries/{id} + POST /enquiries/{id}/respond endpoints.
// Front Desk role holds this cap without holding edit-bookings,
// so checking the wrong cap would have hidden the action from
// them while still showing 403-failing buttons to bookings-only
// roles.
condition: (enquiry) => can("yatra_respond_to_enquiries") && !["closed", "spam", "trash", "archived"].includes(enquiry.status)
},
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: (enquiry) => handleEdit(enquiry),
// Editing an enquiry status / notes goes through the same
// PUT endpoint that respond does, gated on respond cap.
condition: () => can("yatra_respond_to_enquiries")
},
{
key: "delete",
label: __("Delete", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (enquiry) => handleDelete(enquiry),
variant: "destructive",
// High-sensitivity cap, distinct from respond. Only Owner /
// Manager hold it by default.
condition: () => can("yatra_delete_enquiries")
}
];
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["enquiries", queryParams],
queryFn: async () => {
var _a2, _b2, _c2;
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("simulate_error") === "true") {
throw new Error(
"Simulated API error for testing error UI functionality"
);
}
const paramsObj = {};
Object.entries(queryParams).forEach(([key2, value]) => {
if (value !== void 0 && value !== null) {
paramsObj[key2] = value;
}
});
const response = await apiService.getEnquiries(paramsObj);
return {
data: response.data || [],
total: ((_a2 = response.meta) == null ? void 0 : _a2.total) || response.total || 0,
page: ((_b2 = response.meta) == null ? void 0 : _b2.page) || response.page || 1,
per_page: ((_c2 = response.meta) == null ? void 0 : _c2.per_page) || response.per_page || 10
};
},
enabled: can("yatra_view_enquiries")
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
await apiService.deleteEnquiry(id);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["enquiries"] });
setDeleteDialogOpen(false);
setEnquiryToDelete(null);
}
});
const respondMutation = useMutation({
mutationFn: async ({ id, message: message2 }) => {
return await apiService.respondToEnquiry(id, { response: message2 });
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["enquiries"] });
setRespondDialogOpen(false);
setSelectedEnquiry(null);
setResponseMessage("");
showToast(__("Response sent successfully.", "yatra"), "success");
}
});
const enquiriesResponse = data;
const enquiries = (enquiriesResponse == null ? void 0 : enquiriesResponse.data) || (enquiriesResponse == null ? void 0 : enquiriesResponse.enquiries) || [];
const total = ((_o = enquiriesResponse == null ? void 0 : enquiriesResponse.meta) == null ? void 0 : _o.total) ?? (enquiriesResponse == null ? void 0 : enquiriesResponse.total) ?? enquiries.length ?? 0;
const perPage = ((_p = enquiriesResponse == null ? void 0 : enquiriesResponse.meta) == null ? void 0 : _p.per_page) ?? 10;
const totalPages = Math.max(1, Math.ceil(total / perPage));
const errorContext = getErrorContext(error);
const apiErrorMessage = (data == null ? void 0 : data.error) || (data == null ? void 0 : data.message);
const derivedErrorDetails = errorContext.details || (apiErrorMessage ? String(apiErrorMessage) : void 0) || (error ? String((error == null ? void 0 : error.message) || error) : void 0);
const isEnquiriesError = !!error || !!apiErrorMessage;
const formatDate2 = (dateString) => {
return formatDate$1(dateString);
};
const getStatusBadge = (status) => {
const statusMap = {
new: {
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400",
label: __("New", "yatra")
},
pending: {
className: "bg-orange-100 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400",
label: __("Pending", "yatra")
},
responded: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __("Responded", "yatra")
},
converted: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Converted", "yatra")
},
closed: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Closed", "yatra")
},
spam: {
className: "bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400",
label: __("Spam", "yatra")
},
trash: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-900/40 dark:text-gray-300 line-through",
label: __("Trash", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: `text-xs ${statusInfo.className}`, children: statusInfo.label });
};
const handleView = (enquiry) => {
navigate({ subpage: "enquiries", action: "view", id: enquiry.id });
};
const handleEdit = (enquiry) => {
navigate({ subpage: "enquiries", action: "edit", id: enquiry.id });
};
const handleDelete = (enquiry) => {
setEnquiryToDelete(enquiry);
setDeleteDialogOpen(true);
};
const confirmDelete = () => {
if (enquiryToDelete) {
deleteMutation.mutate(enquiryToDelete.id);
}
};
const handleRespond = (enquiry) => {
setSelectedEnquiry(enquiry);
setResponseMessage("");
setRespondDialogOpen(true);
};
const sendResponse = () => {
if (selectedEnquiry && responseMessage.trim()) {
respondMutation.mutate({
id: selectedEnquiry.id,
message: responseMessage
});
}
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("desc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-3.5 h-3.5 ml-1 text-gray-400" });
}
return sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-3.5 h-3.5 ml-1 text-gray-600 dark:text-gray-300" });
};
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "created_at" || sortOrder !== "desc";
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("created_at");
setSortOrder("desc");
setPage(1);
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Enquiries", "yatra"),
description: __("Manage customer enquiries and inquiries", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col md:flex-row gap-2 items-stretch md:items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search enquiries...", "yatra"),
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
className: "pl-9"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: statusFilter,
onChange: (e) => setStatusFilter(e.target.value),
className: "w-full md:w-40",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Status", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "new", children: __("New", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "pending", children: __("Pending", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "responded", children: __("Responded", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "converted", children: __("Converted", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "closed", children: __("Closed", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "spam", children: __("Spam", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: sortBy2,
onChange: (e) => setSortBy(e.target.value),
className: "w-full md:w-40",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "created_at", children: __("Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "name", children: __("Name", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "email", children: __("Email", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trip_title", children: __("Trip", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "status", children: __("Status", "yatra") })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => setSortOrder(sortOrder === "asc" ? "desc" : "asc"),
className: "px-3 flex items-center gap-1.5",
title: sortOrder === "asc" ? __("Ascending", "yatra") : __("Descending", "yatra"),
children: [
sortOrder === "asc" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: sortOrder === "asc" ? __("Asc", "yatra") : __("Desc", "yatra") })
]
}
),
hasFilters && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleResetFilters,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }),
__("Reset", "yatra")
]
}
)
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all },
{ key: "new", label: __("New", "yatra"), count: statusCounts.new },
{
key: "pending",
label: __("Pending", "yatra"),
count: statusCounts.pending
},
{
key: "responded",
label: __("Responded", "yatra"),
count: statusCounts.responded
},
{
key: "converted",
label: __("Converted", "yatra"),
count: statusCounts.converted
},
{
key: "closed",
label: __("Closed", "yatra"),
count: statusCounts.closed
},
{ key: "spam", label: __("Spam", "yatra"), count: statusCounts.spam },
{
key: "trash",
label: __("Trash", "yatra"),
count: statusCounts.trash
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: deleteMutation.isPending,
totalItems: enquiries.length,
bulkActionOptions
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: enquiries,
columns: [
visibleColumns.customer && {
key: "customer",
label: __("Customer", "yatra"),
render: (enquiry) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white text-sm", children: enquiry.name }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 space-y-0.5", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-3 h-3" }),
enquiry.email
] }),
enquiry.phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { className: "w-3 h-3" }),
enquiry.phone
] })
] })
] })
},
visibleColumns.trip && {
key: "trip",
label: __("Trip", "yatra"),
render: (enquiry) => enquiry.trip_title ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-3.5 h-3.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: enquiry.trip_title })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-400 dark:text-gray-500 italic", children: __("General enquiry", "yatra") })
},
visibleColumns.message && {
key: "message",
label: __("Message", "yatra"),
render: (enquiry) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 line-clamp-2", children: enquiry.message })
] })
},
visibleColumns.travelers && {
key: "travelers",
label: __("Travelers", "yatra"),
render: (enquiry) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 text-sm", children: enquiry.travelers_count || "-" })
},
visibleColumns.preferred_date && {
key: "preferred_date",
label: __("Preferred Date", "yatra"),
render: (enquiry) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: enquiry.travel_date ? formatDate2(enquiry.travel_date) : "-" })
},
visibleColumns.status && {
key: "status",
label: __("Status", "yatra"),
render: (enquiry) => getStatusBadge(enquiry.status)
},
visibleColumns.date && {
key: "date",
label: __("Date", "yatra"),
render: (enquiry) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: formatDate2(enquiry.created_at) })
}
].filter(Boolean),
actions,
isLoading,
isError: isEnquiriesError,
errorText: __("Error loading enquiries"),
errorDescription: __(
"We couldn't connect to the enquiries service. Please refresh or try again shortly."
),
errorDetails: derivedErrorDetails,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => refetch(),
emptyText: __("No enquiries found"),
emptyDescription: hasFilters ? __(
"Try adjusting your search or filter criteria to find what you're looking for.",
"Try adjusting your search or filter criteria to find what you're looking for."
) : __(
"When customers submit enquiries, they will appear here.",
"yatra"
),
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds(
(prev) => prev.includes(id) ? prev : [...prev, id]
);
} else {
setSelectedIds(
(prev) => prev.filter((existingId) => existingId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(enquiries.map((e) => e.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: enquiries.length > 0 && selectedIds.length === enquiries.length,
getItemId: (enquiry) => enquiry.id,
capability: "yatra_view_enquiries",
skeletonRows: 5
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: perPage,
onPageChange: setPage,
itemName: __("enquiries", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: bulkConfirmOpen,
onClose: () => {
if (!bulkApplying) {
setBulkConfirmOpen(false);
setPendingBulkAction(null);
}
},
title: __("Apply Bulk Action", "yatra"),
description: pendingBulkAction ? __(
`Are you sure you want to apply "${pendingBulkAction}" to the selected enquiries?`,
`Are you sure you want to apply "${pendingBulkAction}" to the selected enquiries?`
) : void 0,
size: "sm",
panelClassName: "yatra-model-ui",
bodyClassName: "p-0",
footer: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 justify-end", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => {
setBulkConfirmOpen(false);
setPendingBulkAction(null);
},
disabled: bulkApplying,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: confirmBulkApply, disabled: bulkApplying, children: bulkApplying ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }),
__("Applying...", "yatra")
] }) : __("Apply", "yatra") })
] }),
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-hidden": "true" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: deleteDialogOpen,
onClose: () => {
if (!deleteMutation.isPending) {
setDeleteDialogOpen(false);
setEnquiryToDelete(null);
}
},
title: __("Delete Enquiry", "yatra"),
description: enquiryToDelete ? __(
`Are you sure you want to delete the enquiry from "${enquiryToDelete.name}"? This action cannot be undone.`,
`Are you sure you want to delete the enquiry from "${enquiryToDelete.name}"? This action cannot be undone.`
) : __("Are you sure you want to delete this enquiry?", "yatra"),
size: "sm",
panelClassName: "yatra-model-ui",
bodyClassName: "p-0",
footer: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 justify-end", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => {
setDeleteDialogOpen(false);
setEnquiryToDelete(null);
},
disabled: deleteMutation.isPending,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "destructive",
onClick: confirmDelete,
disabled: deleteMutation.isPending,
children: deleteMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }),
__("Deleting...", "yatra")
] }) : __("Delete", "yatra")
}
)
] }),
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {})
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: respondDialogOpen && !!selectedEnquiry,
onClose: () => {
if (!respondMutation.isPending) setRespondDialogOpen(false);
},
title: __("Respond to Enquiry", "yatra"),
description: selectedEnquiry ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
__("Send a response to", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: selectedEnquiry.name })
] }) : null,
size: "md",
panelClassName: "yatra-model-ui",
footer: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 justify-end", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => setRespondDialogOpen(false),
disabled: respondMutation.isPending,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: sendResponse,
disabled: respondMutation.isPending || !responseMessage.trim(),
children: respondMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }),
__("Sending...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4 mr-2" }),
__("Send Response", "yatra")
] })
}
)
] }),
children: selectedEnquiry && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-3 space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: selectedEnquiry.email })
] }),
selectedEnquiry.trip_title && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: selectedEnquiry.trip_title })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-2 mt-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("strong", { children: [
__("Original Message", "yatra"),
":"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-gray-600 dark:text-gray-400", children: selectedEnquiry.message })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1.5 flex items-center justify-between gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
__("Your Response", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
(selectedEnquiry == null ? void 0 : selectedEnquiry.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(
EnquiryReplyAffordance,
{
enquiryId: Number(selectedEnquiry.id),
value: responseMessage,
onAccept: (text) => setResponseMessage(text)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: responseMessage,
onChange: (e) => setResponseMessage(e.target.value),
placeholder: __("Type your response here...", "yatra"),
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none",
rows: 5,
disabled: respondMutation.isPending
}
)
] }),
respondMutation.isError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-600 dark:text-red-400", children: ((_q = respondMutation.error) == null ? void 0 : _q.message) || __("Failed to send response. Please try again.", "yatra") })
] })
}
)
] });
};
const ViewEnquiry = () => {
var _a;
const { can } = usePermissions();
const { navigate } = useNavigate();
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const [respondDialogOpen, setRespondDialogOpen] = reactExports.useState(false);
const [responseMessage, setResponseMessage] = reactExports.useState("");
const enquiryId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id") ? parseInt(params.get("id") || "0") : null;
}, []);
const {
data: enquiry,
isLoading,
error
} = useQuery({
queryKey: ["enquiry", enquiryId],
queryFn: async () => {
if (!enquiryId) return null;
const response = await apiService.getEnquiry(enquiryId);
return (response == null ? void 0 : response.data) ?? response;
},
enabled: !!enquiryId && can("yatra_view_enquiries")
});
const respondMutation = useMutation({
mutationFn: async ({ id, message: message2 }) => {
return await apiService.respondToEnquiry(id, { response: message2 });
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["enquiry", enquiryId] });
setRespondDialogOpen(false);
setResponseMessage("");
showToast(__("Response sent successfully.", "yatra"), "success");
}
});
const formatDate2 = (dateString) => {
return new Date(dateString).toLocaleDateString("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
});
};
const getStatusBadge = (status) => {
const statusMap = {
new: {
className: "bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400",
label: __("New", "yatra")
},
pending: {
className: "bg-orange-100 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400",
label: __("Pending", "yatra")
},
responded: {
className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400",
label: __("Responded", "yatra")
},
converted: {
className: "bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400",
label: __("Converted", "yatra")
},
closed: {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: __("Closed", "yatra")
}
};
const statusInfo = statusMap[status] || {
className: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400",
label: status
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: `text-sm ${statusInfo.className}`, children: statusInfo.label });
};
const handleBack = () => {
navigate({ subpage: "enquiries" });
};
const handleEdit = () => {
if (enquiryId) {
navigate({ subpage: "enquiries", action: "edit", id: enquiryId });
}
};
const handleViewTrip = () => {
if (enquiry == null ? void 0 : enquiry.trip_id) {
navigate({
subpage: "trips",
tab: "all",
action: "edit",
id: enquiry.trip_id
});
}
};
const handleRespond = () => {
setResponseMessage("");
setRespondDialogOpen(true);
};
const sendResponse = () => {
if (enquiryId && responseMessage.trim()) {
respondMutation.mutate({
id: enquiryId,
message: responseMessage
});
}
};
if (isLoading) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Enquiry Details", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-10 w-24" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-10 w-32" })
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-40" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-20 rounded-full" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16 mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-24 w-full rounded-lg" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-32 mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-16" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-36 mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-40" })
] })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-24" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-32" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-48" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-36" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-20" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-20 mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-40" })
] }) })
] })
] })
] })
] });
}
if (error || !enquiry) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Enquiry Not Found", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back to Enquiries", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-8 text-center text-red-500", children: __(
"Enquiry not found or you do not have permission to view it.",
"yatra"
) }) })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Enquiry Details", "yatra"),
description: __("View complete enquiry information", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_respond_to_enquiries", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
enquiry.status !== "responded" && enquiry.status !== "closed" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleRespond,
className: "flex items-center gap-2 text-blue-600 border-blue-300 hover:bg-blue-50 dark:text-blue-400 dark:border-blue-700 dark:hover:bg-blue-900/20",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4" }),
__("Send Response", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleEdit,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
__("Edit Enquiry", "yatra")
]
}
)
] }) })
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_enquiries", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Enquiry Information", "yatra") }),
getStatusBadge(enquiry.status)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2 block", children: __("Message", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap flex-1", children: enquiry.message })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
enquiry.travelers_count && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Number of Travelers", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: enquiry.travelers_count })
] })
] }),
enquiry.travel_date && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Preferred Travel Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: formatDate2(enquiry.travel_date) })
] })
] })
] }),
enquiry.response && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pt-4 border-t border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2 block", children: __("Response", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap", children: enquiry.response })
] })
] })
] }),
enquiry.trip_title && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Related Trip", "yatra") }),
enquiry.trip_id && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "ghost",
size: "sm",
onClick: handleViewTrip,
className: "flex items-center gap-1.5 text-sm",
children: [
__("View Trip", "yatra"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3.5 h-3.5" })
]
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Trip", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: enquiry.trip_title })
] })
] }) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Customer", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: enquiry.name }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: enquiry.email })
] }),
enquiry.phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: enquiry.phone })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Timeline", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Submitted", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-gray-900 dark:text-white", children: formatDate2(enquiry.created_at) })
] }),
enquiry.responded_at && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: __("Responded", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-gray-900 dark:text-white", children: formatDate2(enquiry.responded_at) })
] })
] })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: respondDialogOpen && !!enquiry,
onClose: () => {
if (!respondMutation.isPending) setRespondDialogOpen(false);
},
title: __("Respond to Enquiry", "yatra"),
description: enquiry ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
__("Send a response to", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: enquiry.name })
] }) : null,
size: "md",
footer: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 justify-end", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => setRespondDialogOpen(false),
disabled: respondMutation.isPending,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: sendResponse,
disabled: respondMutation.isPending || !responseMessage.trim(),
children: respondMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }),
__("Sending...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4 mr-2" }),
__("Send Response", "yatra")
] })
}
)
] }),
children: enquiry && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-3 space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: enquiry.email })
] }),
enquiry.trip_title && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: enquiry.trip_title })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-2 mt-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: __("Original Message:", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-gray-600 dark:text-gray-400", children: enquiry.message })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1.5 flex items-center justify-between gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
__("Your Response", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
enquiryId && /* @__PURE__ */ jsxRuntimeExports.jsx(
EnquiryReplyAffordance,
{
enquiryId: Number(enquiryId),
value: responseMessage,
onAccept: (text) => setResponseMessage(text)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: responseMessage,
onChange: (e) => setResponseMessage(e.target.value),
placeholder: __("Type your response here...", "yatra"),
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none",
rows: 5,
disabled: respondMutation.isPending
}
)
] }),
respondMutation.isError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-600 dark:text-red-400", children: ((_a = respondMutation.error) == null ? void 0 : _a.message) || __("Failed to send response. Please try again.", "yatra") })
] })
}
)
] });
};
const EnquiryForm = () => {
var _a, _b;
const { can } = usePermissions();
const { navigate } = useNavigate();
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
email: "",
phone: "",
trip_id: void 0,
message: "",
travelers_count: 1,
travel_date: "",
status: "new",
response_notes: ""
});
const [aiDrafting, setAiDrafting] = reactExports.useState(false);
const enquiryId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
const id = params.get("id");
return id ? parseInt(id) : null;
}, []);
const isEdit = !!enquiryId;
const { data: enquiry, isLoading: isLoadingEnquiry } = useQuery({
queryKey: ["enquiry", enquiryId],
queryFn: async () => {
if (!enquiryId) return null;
const response = await apiService.getEnquiry(enquiryId);
return (response == null ? void 0 : response.data) ?? response;
},
enabled: !!enquiryId && can("yatra_respond_to_enquiries")
});
const { data: tripsData } = useQuery({
queryKey: ["trips-select"],
queryFn: async () => {
return await apiService.getTrips({ per_page: 100 });
},
enabled: can("yatra_respond_to_enquiries")
});
const trips = Array.isArray(tripsData == null ? void 0 : tripsData.data) ? tripsData.data : Array.isArray(tripsData) ? tripsData : [];
reactExports.useEffect(() => {
if (enquiry) {
setFormData({
name: enquiry.name || "",
email: enquiry.email || "",
phone: enquiry.phone || "",
trip_id: enquiry.trip_id,
message: enquiry.message || "",
travelers_count: enquiry.travelers_count || 1,
travel_date: enquiry.travel_date || "",
status: enquiry.status || "new",
response_notes: enquiry.response_notes || ""
});
}
}, [enquiry]);
const saveMutation = useMutation({
mutationFn: async (data) => {
return isEdit ? await apiService.updateEnquiry(enquiryId, data) : await apiService.createEnquiry(data);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["enquiries"] });
queryClient2.invalidateQueries({ queryKey: ["enquiry", enquiryId] });
showToast(__("Enquiry saved successfully.", "yatra"), "success");
navigate({ subpage: "enquiries" });
}
});
const handleBack = () => {
navigate({ subpage: "enquiries" });
};
const handleSubmit = (e) => {
e.preventDefault();
saveMutation.mutate(formData);
};
const handleChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
if (isEdit && isLoadingEnquiry) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Edit Enquiry", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-10 w-24" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-10 w-32" })
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2 space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-40" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16 mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-11 w-full" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16 mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-11 w-full" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-20 mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-32 w-full" })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-24" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-11 w-full" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-11 w-full" })
] })
] }) })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEdit ? __("Edit Enquiry", "yatra") : __("Create Enquiry", "yatra"),
description: isEdit ? __("Update enquiry details", "yatra") : __("Add a new enquiry", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleBack,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleSubmit,
disabled: saveMutation.isPending,
className: "flex items-center gap-2",
children: [
saveMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
saveMutation.isPending ? __("Saving...", "yatra") : __("Save", "yatra")
]
}
)
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_respond_to_enquiries", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, children: [
saveMutation.isError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-600 dark:text-red-400", children: ((_a = saveMutation.error) == null ? void 0 : _a.message) || __("Failed to save enquiry. Please try again.", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Customer Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: [
__("Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: formData.name || "",
onChange: (e) => handleChange("name", e.target.value),
placeholder: __("Customer name", "yatra"),
required: true
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: [
__("Email", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "email",
value: formData.email || "",
onChange: (e) => handleChange("email", e.target.value),
placeholder: __("customer@example.com", "yatra"),
required: true
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: __("Phone", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "tel",
value: formData.phone || "",
onChange: (e) => handleChange("phone", e.target.value),
placeholder: __("Phone number", "yatra")
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Enquiry Details", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: [
__("Message", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: formData.message || "",
onChange: (e) => handleChange("message", e.target.value),
placeholder: __("Enquiry message...", "yatra"),
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none",
rows: 5,
required: true
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5", children: __("Number of Travelers", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: "1",
value: formData.travelers_count || "",
onChange: (e) => handleChange(
"travelers_count",
parseInt(e.target.value, 10) || 1
),
placeholder: "1"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Preferred Travel Date", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
DatePicker,
{
value: formData.travel_date || "",
onChange: (val) => handleChange("travel_date", val),
placeholder: __("Select date", "yatra")
}
)
] })
] })
] })
] }),
isEdit && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Response Notes", "yatra") }),
enquiryId && /* @__PURE__ */ jsxRuntimeExports.jsx(
EnquiryReplyAffordance,
{
enquiryId: Number(enquiryId),
value: formData.response_notes || "",
onAccept: (text) => handleChange("response_notes", text),
autoDraftOnMount: !(formData.response_notes || "").trim() && (formData.status === "new" || !formData.responded_at),
onDraftingChange: setAiDrafting
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
aiDrafting && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-purple-200 bg-purple-50/60 px-2 py-1 text-xs text-purple-700 dark:border-purple-500/40 dark:bg-purple-900/20 dark:text-purple-200", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-3.5 w-3.5 animate-pulse" }),
__(
"AI is drafting a reply based on this enquiry, the trip details, and the customer's history…",
"yatra"
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: formData.response_notes || "",
onChange: (e) => handleChange("response_notes", e.target.value),
placeholder: __(
"Internal notes about responses to this enquiry...",
"yatra"
),
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none",
rows: 6
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: formData.status || "new",
onChange: (e) => handleChange("status", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "new", children: __("New", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "pending", children: __("Pending", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "responded", children: __("Responded", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "converted", children: __("Converted", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "closed", children: __("Closed", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "spam", children: __("Spam", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Related Trip", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: ((_b = formData.trip_id) == null ? void 0 : _b.toString()) || "",
onChange: (e) => handleChange(
"trip_id",
e.target.value ? parseInt(e.target.value) : void 0
),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: __("No trip selected", "yatra") }),
trips.map((trip) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: trip.id.toString(), children: trip.title }, trip.id))
]
}
) })
] }),
isEdit && enquiry && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Created:", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-900 dark:text-white mt-0.5", children: new Date(enquiry.created_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "long",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
}
) })
] }),
enquiry.responded_at && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Responded:", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-900 dark:text-white mt-0.5", children: new Date(enquiry.responded_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "long",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
}
) })
] })
] })
] })
] })
] })
] }) })
] });
};
const Modules = () => {
var _a, _b, _c, _d, _e, _f, _g;
const { can } = usePermissions();
const canManageModules = can("yatra_edit_trips");
const { data: modules = [], isLoading, error } = useModulesQuery();
const toggleMutation = useToggleModule();
const bulkToggleMutation = useBulkToggleModules();
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [categoryFilter, setCategoryFilter] = reactExports.useState("all");
const [planFilter, setPlanFilter] = reactExports.useState("all");
const [sortOption, setSortOption] = reactExports.useState("name_asc");
const [selected, setSelected] = reactExports.useState(/* @__PURE__ */ new Set());
const categories = reactExports.useMemo(() => {
const set = /* @__PURE__ */ new Set();
modules.forEach((module) => {
if (module.category) {
set.add(module.category);
}
});
return Array.from(set).sort((a2, b) => a2.localeCompare(b));
}, [modules]);
const availablePlans = reactExports.useMemo(() => {
const set = /* @__PURE__ */ new Set();
modules.forEach((module) => {
set.add(module.plan ?? "free");
});
const order = ["free", "personal", "growth", "agency"];
return order.filter((tier) => set.has(tier));
}, [modules]);
const planLabels = {
free: __("Free", "yatra"),
personal: __("Starter", "yatra"),
growth: __("Growth", "yatra"),
agency: __("Scale", "yatra")
};
const filteredModules = reactExports.useMemo(() => {
let list = modules;
if (searchTerm.trim()) {
const term = searchTerm.toLowerCase();
list = list.filter(
(module) => {
var _a2, _b2;
return module.name.toLowerCase().includes(term) || (((_a2 = module.description) == null ? void 0 : _a2.toLowerCase().includes(term)) ?? false) || (((_b2 = module.tags) == null ? void 0 : _b2.some((tag2) => tag2.toLowerCase().includes(term))) ?? false);
}
);
}
if (categoryFilter !== "all") {
list = list.filter(
(module) => (module.category || __("General", "yatra")) === categoryFilter
);
}
if (planFilter !== "all") {
list = list.filter((module) => (module.plan ?? "free") === planFilter);
}
const sorted = [...list];
sorted.sort((a2, b) => {
switch (sortOption) {
case "name_desc":
return b.name.localeCompare(a2.name);
case "status_enabled":
return Number(b.enabled) - Number(a2.enabled);
case "status_disabled":
return Number(a2.enabled) - Number(b.enabled);
case "name_asc":
default:
return a2.name.localeCompare(b.name);
}
});
return sorted;
}, [modules, searchTerm, categoryFilter, planFilter, sortOption]);
const moduleMap = reactExports.useMemo(() => {
const map2 = /* @__PURE__ */ new Map();
modules.forEach((module) => {
map2.set(module.slug, module);
});
return map2;
}, [modules]);
const [premiumDialog, setPremiumDialog] = reactExports.useState({ open: false });
const handleToggle = (module) => {
if (module.is_core || !canManageModules) return;
if (module.is_premium && !module.enabled && !module.is_available) {
setPremiumDialog({ open: true, module });
return;
}
toggleMutation.mutate({
slug: module.slug,
enabled: !module.enabled,
name: module.name
});
};
const renderToggle = (module) => {
const isLockedPremium = module.is_premium && !module.enabled && !module.is_available;
const disabled = module.is_core || toggleMutation.isPending || !canManageModules;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: (event) => {
event.stopPropagation();
if (isLockedPremium) {
setPremiumDialog({ open: true, module });
return;
}
handleToggle(module);
},
disabled,
className: `relative inline-flex h-7 w-12 items-center rounded-full transition ${module.enabled ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"} ${isLockedPremium ? "ring-2 ring-amber-300 dark:ring-amber-500 cursor-pointer" : ""} ${disabled && !isLockedPremium ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`,
"aria-pressed": module.enabled,
"aria-label": module.enabled ? __("Disable module", "yatra") : __("Enable module", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-block h-5 w-5 transform rounded-full bg-white transition ${module.enabled ? "translate-x-5" : "translate-x-1"}`
}
)
}
);
};
const handleSelect = (slug) => {
const module = moduleMap.get(slug);
if ((module == null ? void 0 : module.is_premium) && !module.enabled && !module.is_available) {
setPremiumDialog({ open: true, module });
return;
}
setSelected((prev) => {
const next = new Set(prev);
if (next.has(slug)) {
next.delete(slug);
} else {
next.add(slug);
}
return next;
});
};
const handleSelectAllVisible = () => {
setSelected((prev) => {
const next = new Set(prev);
const allSelected = filteredModules.every(
(module) => next.has(module.slug)
);
if (allSelected) {
filteredModules.forEach((module) => next.delete(module.slug));
} else {
filteredModules.forEach((module) => next.add(module.slug));
}
return next;
});
};
const bulkUpdate = (enabled) => {
const items = Array.from(selected).map((slug) => moduleMap.get(slug)).filter((module) => !!module).filter(
(module) => !(module.is_premium && enabled && !module.is_available)
);
if (items.length === 0) {
if (selected.size > 0 && enabled) {
const premiumModules = Array.from(selected).map((slug) => moduleMap.get(slug)).filter((module) => (module == null ? void 0 : module.is_premium) && !(module == null ? void 0 : module.is_available));
if (premiumModules.length > 0) {
setPremiumDialog({ open: true, module: premiumModules[0] });
}
}
return;
}
const payload = items.map((module) => ({
slug: module.slug,
enabled,
name: module.name
}));
bulkToggleMutation.mutate(payload, {
onSuccess: () => setSelected(/* @__PURE__ */ new Set())
});
};
const isAllVisibleSelected = filteredModules.length > 0 && filteredModules.every((module) => selected.has(module.slug));
const selectedCount = selected.size;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Modules", "yatra"),
description: __(
"Manage feature modules and control which capabilities are active.",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => window.location.reload(),
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Puzzle, { className: "w-4 h-4" }),
__("Refresh Modules", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: isAllVisibleSelected ? "default" : "outline",
onClick: handleSelectAllVisible,
disabled: filteredModules.length === 0,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpDown, { className: "w-4 h-4" }),
isAllVisibleSelected ? __("Clear visible selection", "yatra") : __("Select visible", "yatra")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => bulkUpdate(true),
disabled: !canManageModules || selectedCount === 0 || bulkToggleMutation.isPending,
children: __("Enable Selected", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => bulkUpdate(false),
disabled: !canManageModules || selectedCount === 0 || bulkToggleMutation.isPending,
children: __("Disable Selected", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300 pl-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Filter, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: __("Showing {count} modules", "yatra").replace(
"{count}",
String(filteredModules.length)
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 flex-col gap-2 lg:flex-row lg:items-center lg:justify-end lg:gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full lg:max-w-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
placeholder: __("Search modules...", "yatra"),
className: "pl-9"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: categoryFilter,
onChange: (e) => setCategoryFilter(e.target.value),
className: "w-full lg:w-44",
"aria-label": __("Filter by category", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Categories", "yatra") }),
categories.map((category) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: category, children: category }, category))
]
}
),
availablePlans.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: planFilter,
onChange: (e) => setPlanFilter(e.target.value),
className: "w-full lg:w-44",
"aria-label": __("Filter by plan", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Plans", "yatra") }),
availablePlans.map((tier) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: tier, children: planLabels[tier] }, tier))
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: sortOption,
onChange: (e) => setSortOption(e.target.value),
className: "w-full lg:w-44",
"aria-label": __("Sort modules", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "name_asc", children: __("Name A → Z", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "name_desc", children: __("Name Z → A", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "status_enabled", children: __("Enabled first", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "status_disabled", children: __("Disabled first", "yatra") })
]
}
),
(searchTerm || categoryFilter !== "all" || planFilter !== "all" || sortOption !== "name_asc") && /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: () => {
setSearchTerm("");
setCategoryFilter("all");
setPlanFilter("all");
setSortOption("name_asc");
},
children: __("Reset", "yatra")
}
)
] })
] }) }) }),
isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "animate-pulse space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 h-10 rounded-md bg-gray-100 dark:bg-gray-800" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3 w-full lg:w-auto", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-40 rounded-md bg-gray-100 dark:bg-gray-800" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-40 rounded-md bg-gray-100 dark:bg-gray-800" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-24 rounded-md bg-gray-100 dark:bg-gray-800" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-3 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "border border-gray-200 dark:border-gray-800 rounded-xl p-4 space-y-3",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-5 rounded bg-gray-200 dark:bg-gray-700" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-32 rounded bg-gray-200 dark:bg-gray-700" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-full rounded bg-gray-100 dark:bg-gray-800" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 rounded bg-gray-50 dark:bg-gray-900" })
]
},
`module-skeleton-${idx}`
)) })
] }) }) }),
error && /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-6 text-red-600 dark:text-red-400", children: __("Failed to load modules", "yatra") }) }),
!isLoading && !error && modules.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-6 text-gray-500 dark:text-gray-400", children: __("No modules available yet.", "yatra") }) }),
!isLoading && !error && filteredModules.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-3 md:grid-cols-3", children: filteredModules.map((module) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
Card,
{
className: `border ${// Only show premium styling if module is premium AND not available (Pro not active)
module.is_premium && !module.is_available ? "border-amber-300 dark:border-amber-500/60 bg-amber-50/80 dark:bg-amber-500/10 relative overflow-hidden" : "border-gray-200 dark:border-gray-700"}`,
...module.is_premium && !module.is_available && canManageModules && !module.enabled ? {
role: "button",
tabIndex: 0,
onClick: () => setPremiumDialog({ open: true, module }),
onKeyDown: (event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
setPremiumDialog({ open: true, module });
}
}
} : {},
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3 flex-wrap", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
id: `module-select-${module.slug}`,
type: "checkbox",
className: "mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer",
checked: selected.has(module.slug),
onChange: () => handleSelect(module.slug)
}
),
module.enabled && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[11px] font-semibold text-green-700 uppercase tracking-wide [writing-mode:vertical-rl] [text-orientation:mixed] transform rotate-180 bg-green-100 dark:bg-green-900/40 px-1 py-1 rounded", children: __("Enabled", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "cursor-pointer select-none",
onClick: (event) => {
event.stopPropagation();
handleSelect(module.slug);
},
role: "button",
tabIndex: 0,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleSelect(module.slug);
}
},
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "text-lg flex items-center gap-2 flex-wrap", children: [
module.name,
module.is_core && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", children: __("Core", "yatra") }),
module.plan === "agency" && /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "outline",
className: "px-2 py-0.5 rounded-full bg-gradient-to-r from-purple-600 to-indigo-500 border-purple-700 text-white shadow-sm dark:from-purple-500 dark:to-indigo-400 dark:border-purple-400 dark:text-white",
children: __("Scale", "yatra")
}
),
module.plan === "growth" && /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "outline",
className: "px-2 py-0.5 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 border-emerald-600 text-white shadow-sm dark:from-emerald-500 dark:to-teal-400 dark:border-emerald-400 dark:text-white",
children: __("Growth", "yatra")
}
),
module.plan === "personal" && /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "outline",
className: "flex items-center gap-1 px-2 py-0.5 rounded-full bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-900/30 dark:border-blue-500/40 dark:text-blue-200",
children: __("Starter", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { className: "mt-1 text-sm line-clamp-3", children: module.description }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "inline-flex items-center px-2 py-0.5 mt-1 text-[11px] font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-blue-500 mr-1" }),
module.category || __("General", "yatra")
] })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: renderToggle(module) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "flex items-center justify-between text-xs text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: module.video_url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: module.video_url,
target: "_blank",
rel: "noreferrer",
className: "flex items-center gap-1 text-red-600 hover:text-red-500 dark:text-red-400 text-xs font-medium",
title: __("Watch video tutorial", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-3 h-3",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx("polygon", { points: "5 3 19 12 5 21 5 3" })
}
),
__("Video", "yatra")
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
module.slug === "dynamic_form_field" && module.enabled && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: `${window.location.origin}/wp-admin/admin.php?page=yatra&subpage=settings`,
className: "flex items-center gap-1 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 text-xs font-medium",
title: __("Settings", "yatra"),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"svg",
{
className: "w-3 h-3",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
viewBox: "0 0 24 24",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
]
}
),
__("Settings", "yatra")
]
}
),
module.docs_url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: module.docs_url,
target: "_blank",
rel: "noreferrer",
className: "flex items-center gap-1 text-blue-600 hover:text-blue-500 dark:text-blue-400 text-xs font-medium",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3 h-3" }),
__("Docs", "yatra")
]
}
)
] })
] })
]
},
module.slug
)) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PremiumUpgradeDialog,
{
open: premiumDialog.open,
moduleName: (_a = premiumDialog.module) == null ? void 0 : _a.name,
moduleSlug: (_b = premiumDialog.module) == null ? void 0 : _b.slug,
purchaseUrl: (_c = premiumDialog.module) == null ? void 0 : _c.purchase_url,
moduleDescription: (_d = premiumDialog.module) == null ? void 0 : _d.description,
requiredPlan: ((_e = premiumDialog.module) == null ? void 0 : _e.plan) === "agency" ? "agency" : ((_f = premiumDialog.module) == null ? void 0 : _f.plan) === "growth" ? "growth" : ((_g = premiumDialog.module) == null ? void 0 : _g.plan) === "personal" ? "personal" : void 0,
onClose: () => setPremiumDialog({ open: false })
}
)
] });
};
const FALLBACK_COUNTRIES = {
US: "United States",
GB: "United Kingdom",
CA: "Canada",
AU: "Australia",
IN: "India",
NP: "Nepal"
};
function getCountryMap() {
var _a;
const raw = (_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.countries;
if (raw && typeof raw === "object" && !Array.isArray(raw)) {
const map2 = raw;
if (Object.keys(map2).length > 0) return map2;
}
return FALLBACK_COUNTRIES;
}
function getCountryOptions() {
const map2 = getCountryMap();
return Object.entries(map2).map(([code, name]) => ({ code, name }));
}
function getCountryName(code) {
if (!code) return "";
const map2 = getCountryMap();
return map2[code.toUpperCase()] ?? code;
}
const EXCLUDED_DYNAMIC_FIELDS = [
"first_name",
"last_name",
"gender",
"nationality",
"phone",
"_traveller_id",
"_is_lead",
"_traveller_index",
"booking_id",
"booking_reference",
"trip_id",
"trip_title",
"travel_date",
"traveler_index",
"is_lead",
"id"
];
const Travelers = () => {
var _a, _b;
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
const [deleteDialogOpen, setDeleteDialogOpen] = reactExports.useState(false);
const [travelerToDelete, setTravelerToDelete] = reactExports.useState(
null
);
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [tripFilter, setTripFilter] = reactExports.useState("");
const [page, setPage] = reactExports.useState(1);
const perPage = 20;
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
if (typeof window === "undefined") {
return {
traveler_info: true,
trip: true,
travel_date: true,
booking_reference: true
};
}
const saved = window.localStorage.getItem(
"yatra-travelers-visible-columns"
);
return saved ? JSON.parse(saved) : {
traveler_info: true,
trip: true,
travel_date: true,
booking_reference: true
};
});
const { data: formConfigData } = useQuery({
queryKey: ["booking-form-config"],
queryFn: async () => {
var _a2;
const result = await apiService.getSettings("booking_form");
return result.success ? (_a2 = result.data) == null ? void 0 : _a2.booking_form_config : null;
}
});
const [availableTrips, setAvailableTrips] = reactExports.useState([]);
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["travelers", searchTerm, tripFilter, page],
queryFn: async () => {
var _a2, _b2;
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("simulate_error") === "true") {
throw new Error(
"Simulated API error for testing error UI functionality"
);
}
const paramsObj = {
page,
per_page: perPage
};
if (searchTerm) paramsObj.search = searchTerm;
if (tripFilter) paramsObj.trip_id = tripFilter;
const response = await apiService.getTravelers(paramsObj);
if (((_b2 = (_a2 = response.meta) == null ? void 0 : _a2.available_trips) == null ? void 0 : _b2.length) > 0) {
setAvailableTrips(response.meta.available_trips);
}
return response;
},
enabled: can("yatra_view_bookings")
});
const tripsData = reactExports.useMemo(() => ({ data: availableTrips }), [availableTrips]);
const dynamicColumns = reactExports.useMemo(() => {
var _a2;
const formConfig = formConfigData;
if (!((_a2 = formConfig == null ? void 0 : formConfig.traveler_form) == null ? void 0 : _a2.fields)) {
return [];
}
const enabledFields = formConfig.traveler_form.fields.filter(
(field) => field.enabled && !EXCLUDED_DYNAMIC_FIELDS.includes(field.id)
).sort((a2, b) => (a2.order || 0) - (b.order || 0));
return enabledFields.map((field) => ({
id: field.id,
label: field.label,
type: field.type
}));
}, [formConfigData]);
const travelers = (data == null ? void 0 : data.data) || [];
const totalTravelers = ((_a = data == null ? void 0 : data.meta) == null ? void 0 : _a.total) || 0;
const totalPages = Math.ceil(totalTravelers / perPage);
const errorContext = getErrorContext(error);
const apiErrorMessage = (data == null ? void 0 : data.error) || (data == null ? void 0 : data.message);
const derivedErrorDetails = errorContext.details || (apiErrorMessage ? String(apiErrorMessage) : void 0) || (error ? String((error == null ? void 0 : error.message) || error) : void 0);
const isTravelersError = !!error || !!apiErrorMessage;
const handleViewBooking = (bookingId) => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=bookings&action=view&id=${bookingId}`;
};
const formatDate2 = (dateString) => {
if (!dateString) return "-";
try {
return new Date(dateString).toLocaleDateString();
} catch {
return dateString;
}
};
const bulkMutation = useMutation({
mutationFn: async ({
action,
ids
}) => {
return await apiService.bulkTravelersAction(action, ids);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["travelers"] });
setSelectedIds([]);
setBulkAction("");
}
});
const handleBulkApply = () => {
if (!bulkAction || selectedIds.length === 0) {
return;
}
bulkMutation.mutate({ action: bulkAction, ids: selectedIds });
};
const handleDelete = (traveler) => {
setTravelerToDelete(traveler);
setDeleteDialogOpen(true);
};
const confirmDelete = async () => {
if (!travelerToDelete) return;
try {
await bulkMutation.mutateAsync({
action: "delete",
ids: [travelerToDelete.id]
});
showToast(__("Traveler deleted successfully", "yatra"), "success");
setDeleteDialogOpen(false);
setTravelerToDelete(null);
} catch (error2) {
showToast(
(error2 == null ? void 0 : error2.message) || __("Failed to delete traveler", "yatra"),
"error"
);
}
};
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
if (typeof window !== "undefined") {
window.localStorage.setItem(
"yatra-travelers-visible-columns",
JSON.stringify(newVisibleColumns)
);
}
};
const columnOptions = [
{
key: "traveler_info",
label: __("Traveler", "yatra"),
visible: visibleColumns.traveler_info
},
{ key: "trip", label: __("Trip", "yatra"), visible: visibleColumns.trip },
{
key: "travel_date",
label: __("Travel Date", "yatra"),
visible: visibleColumns.travel_date
},
{
key: "booking_reference",
label: __("Booking", "yatra"),
visible: visibleColumns.booking_reference
}
];
const actions = [
{
key: "view",
label: __("View Booking", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: (traveler) => handleViewBooking(traveler.booking_id)
},
{
key: "delete",
label: __("Delete", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (traveler) => handleDelete(traveler),
variant: "destructive",
condition: () => can("yatra_delete_bookings")
}
];
const formatCellValue = (value, fieldType) => {
if (value === void 0 || value === null || value === "") {
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "-" });
}
switch (fieldType) {
case "date":
return formatDate2(value);
case "email":
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-3 h-3 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate max-w-[150px]", children: value })
] });
case "tel":
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { className: "w-3 h-3 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: value })
] });
case "country":
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "w-3 h-3 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: getCountryName(value) })
] });
default:
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: String(value) });
}
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Travelers", "yatra"),
description: __("View all travelers from bookings", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search by name, email, phone...", "yatra"),
value: searchTerm,
onChange: (e) => {
setSearchTerm(e.target.value);
setPage(1);
},
className: "pl-10 w-full"
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: tripFilter,
onChange: (e) => {
setTripFilter(e.target.value);
setPage(1);
},
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Trips", "yatra") }),
(_b = tripsData == null ? void 0 : tripsData.data) == null ? void 0 : _b.map((trip) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: trip.id, children: trip.title }, trip.id))
]
}
) })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-4 flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Total Travelers", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-16" }) : totalTravelers })
] })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter: "all",
setStatusFilter: () => {
},
statusOptions: [
{ key: "all", label: __("All", "yatra"), count: totalTravelers }
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: bulkMutation.isPending,
totalItems: travelers.length,
bulkActionOptions: [{ value: "delete", label: __("Delete", "yatra") }]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: travelers,
isLoading,
isError: isTravelersError,
errorText: __("Error loading travelers", "yatra"),
errorDescription: __(
"We couldn't connect to the travelers service. Please refresh or try again shortly.",
"yatra"
),
errorDetails: derivedErrorDetails,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => refetch(),
skeletonRows: 5,
emptyText: searchTerm || tripFilter ? __("No travelers found matching your criteria", "yatra") : __("No travelers found", "yatra"),
emptyDescription: __(
"View and manage travelers collected from your bookings.",
"yatra"
),
capability: "yatra_view_bookings",
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds(
(prev) => prev.includes(id) ? prev : [...prev, id]
);
} else {
setSelectedIds(
(prev) => prev.filter((existingId) => existingId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(travelers.map((t) => t.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: travelers.length > 0 && selectedIds.length === travelers.length,
getItemId: (traveler) => traveler.id,
actions,
columns: [
visibleColumns.traveler_info && {
key: "traveler_info",
label: __("Traveler", "yatra"),
render: (traveler) => {
var _a2, _b2;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-9 h-9 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-sm font-medium text-gray-600 dark:text-gray-300", children: [
(((_a2 = traveler.first_name) == null ? void 0 : _a2[0]) || "?").toUpperCase(),
(((_b2 = traveler.last_name) == null ? void 0 : _b2[0]) || "").toUpperCase()
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-medium text-gray-900 dark:text-white flex items-center gap-2", children: [
[traveler.first_name, traveler.last_name].filter(Boolean).join(" ") || "N/A",
traveler.is_lead && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "info", className: "text-xs", children: __("Lead", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 space-y-0.5", children: [
traveler.phone && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { className: "w-3 h-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: traveler.phone })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
traveler.gender && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "capitalize", children: traveler.gender }),
traveler.nationality && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
traveler.gender && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "•" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: getCountryName(traveler.nationality) })
] })
] })
] })
] })
] });
}
},
...dynamicColumns.map((col) => ({
key: `dynamic_${col.id}`,
label: col.label,
render: (traveler) => formatCellValue(traveler[col.id], col.type)
})),
visibleColumns.trip && {
key: "trip",
label: __("Trip", "yatra"),
render: (traveler) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "max-w-[200px] truncate",
title: traveler.trip_title,
children: traveler.trip_title || `Trip #${traveler.trip_id}`
}
)
},
visibleColumns.travel_date && {
key: "travel_date",
label: __("Travel Date", "yatra"),
render: (traveler) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-3 h-3 text-gray-400" }),
formatDate2(traveler.travel_date)
] })
},
visibleColumns.booking_reference && {
key: "booking_reference",
label: __("Booking", "yatra"),
render: (traveler) => {
var _a2;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=bookings&action=view&id=${traveler.booking_id}`,
className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 font-mono text-sm",
children: traveler.booking_reference
}
);
}
}
].filter(Boolean)
}
) }) }),
totalTravelers > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: totalTravelers,
itemsPerPage: perPage,
onPageChange: setPage,
itemName: __("travelers", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteDialogOpen,
onClose: () => {
setDeleteDialogOpen(false);
setTravelerToDelete(null);
},
onConfirm: confirmDelete,
title: __("Delete Traveler", "yatra"),
message: travelerToDelete ? __(
`Are you sure you want to delete ${[travelerToDelete.first_name, travelerToDelete.last_name].filter(Boolean).join(" ")}? This action cannot be undone.`,
"yatra"
) : __("Are you sure you want to delete this traveler?", "yatra"),
confirmText: __("Delete", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: bulkMutation.isPending
}
)
] });
};
const Switch = ({
checked,
onCheckedChange,
disabled = false,
className = ""
}) => {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
role: "switch",
"aria-checked": checked,
disabled,
onClick: () => !disabled && onCheckedChange(!checked),
className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${checked ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-700"} ${className}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-block h-5 w-5 transform rounded-full bg-white shadow-lg transition-transform ${checked ? "translate-x-5" : "translate-x-0.5"}`
}
)
}
);
};
const GoogleCalendar = () => {
const [settings2, setSettings] = reactExports.useState(null);
const [loading, setLoading] = reactExports.useState(true);
const [connecting, setConnecting] = reactExports.useState(false);
const [syncing, setSyncing] = reactExports.useState(false);
const { showToast } = useToast();
const __2 = (text) => text;
reactExports.useEffect(() => {
fetchSettings2();
}, []);
const fetchSettings2 = async () => {
try {
const response = await apiService.getGoogleCalendarSettings();
setSettings(response.data);
} catch (error) {
console.error("Failed to fetch settings:", error);
} finally {
setLoading(false);
}
};
const handleConnect = async () => {
setConnecting(true);
try {
const data = await apiService.connectGoogleCalendar();
if (data.success && data.data.auth_url) {
window.location.href = data.data.auth_url;
} else {
showToast(data.message || __2("Failed to connect"), "error");
}
} catch (error) {
showToast(__2("Failed to connect to Google Calendar"), "error");
} finally {
setConnecting(false);
}
};
const handleDisconnect = async () => {
if (!confirm(__2("Are you sure you want to disconnect Google Calendar?"))) {
return;
}
try {
await apiService.disconnectGoogleCalendar();
showToast(__2("Disconnected successfully"), "success");
fetchSettings2();
} catch (error) {
showToast(__2("Failed to disconnect"), "error");
}
};
const handleSyncAll = async () => {
setSyncing(true);
try {
const data = await apiService.syncAllGoogleCalendar();
if (data.success) {
showToast(__2("Sync completed successfully"), "success");
fetchSettings2();
} else {
showToast(data.message || __2("Sync failed"), "error");
}
} catch (error) {
showToast(__2("Failed to sync bookings"), "error");
} finally {
setSyncing(false);
}
};
const handleSettingChange = async (key2, value) => {
try {
await apiService.updateGoogleCalendarSettings({ [key2]: value });
setSettings((prev) => prev ? { ...prev, [key2]: value } : null);
showToast(__2("Settings updated"), "success");
} catch (error) {
showToast(__2("Failed to update settings"), "error");
}
};
if (loading) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-8 h-8 animate-spin text-blue-600" }) });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6 p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-8 h-8 text-blue-600" }),
__2("Google Calendar Integration")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mt-2", children: __2(
"Automatically sync your bookings and departures to Google Calendar"
) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: __2("Connection Status") }),
(settings2 == null ? void 0 : settings2.connected) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { className: "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 mr-1" }),
__2("Connected")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { className: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-4 h-4 mr-1" }),
__2("Not Connected")
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: (settings2 == null ? void 0 : settings2.connected) ? __2("Your Google Calendar is connected and ready to sync") : __2("Connect your Google account to start syncing bookings") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-4", children: (settings2 == null ? void 0 : settings2.connected) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: settings2.calendar_name || __2("Primary Calendar") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400 mt-1", children: [
__2("Calendar ID"),
": ",
settings2.calendar_id
] }),
settings2.last_sync && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-500 mt-2", children: [
__2("Last synced"),
":",
" ",
new Date(settings2.last_sync).toLocaleString()
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: handleSyncAll,
disabled: syncing,
className: "flex-1",
children: syncing ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4 mr-2 animate-spin" }),
__2("Syncing...")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4 mr-2" }),
__2("Sync All Bookings")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: handleDisconnect,
className: "text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/10",
children: __2("Disconnect")
}
)
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: handleConnect,
disabled: connecting,
className: "w-full",
size: "lg",
children: connecting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-5 h-5 mr-2 animate-spin" }),
__2("Connecting...")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-5 h-5 mr-2" }),
__2("Connect Google Calendar")
] })
}
) })
] }),
(settings2 == null ? void 0 : settings2.connected) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Settings$1, { className: "w-5 h-5" }),
__2("Sync Settings")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: __2("Configure what gets synced to your Google Calendar") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "font-medium text-gray-900 dark:text-white", children: __2("Auto Sync") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: __2("Automatically sync new bookings and changes") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: settings2.auto_sync,
onCheckedChange: (checked) => handleSettingChange("auto_sync", checked)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "font-medium text-gray-900 dark:text-white", children: __2("Sync Bookings") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: __2("Create calendar events for new bookings") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: settings2.sync_bookings,
onCheckedChange: (checked) => handleSettingChange("sync_bookings", checked)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "font-medium text-gray-900 dark:text-white", children: __2("Sync Departures") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: __2("Create calendar events for departures") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: settings2.sync_departures,
onCheckedChange: (checked) => handleSettingChange("sync_departures", checked)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "font-medium text-gray-900 dark:text-white", children: __2("Send Invitations") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: __2("Send calendar invitations to customers") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: settings2.send_invitations,
onCheckedChange: (checked) => handleSettingChange("send_invitations", checked)
}
)
] })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { children: __2("Documentation") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: __2("Learn more about Google Calendar integration") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: "https://docs.yatra.com/modules/google-calendar",
target: "_blank",
rel: "noopener noreferrer",
className: "inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
children: [
__2("View Documentation"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-4 h-4" })
]
}
) })
] })
] });
};
const AdditionalServicesPremium = () => {
const features = [
{
icon: Package,
title: __("Service Management"),
description: __(
"Create and manage unlimited add-on services for your trips."
)
},
{
icon: DollarSign,
title: __("Flexible Pricing"),
description: __(
"Set pricing per person, per booking, or per day with multiple options."
)
},
{
icon: Users,
title: __("Trip Assignment"),
description: __(
"Assign services to specific trips or apply globally to all trips."
)
},
{
icon: Shield,
title: __("Booking Integration"),
description: __(
"Seamless integration with booking process and payment collection."
)
}
];
const stats = [
{
icon: TrendingUp,
value: "25%",
label: __("Revenue Increase")
},
{
icon: Users,
value: "89%",
label: __("Customer Satisfaction")
},
{
icon: Package,
value: "Unlimited",
label: __("Services")
},
{
icon: DollarSign,
value: "Flexible",
label: __("Pricing Options")
}
];
const popularServices = [
{
icon: FileText,
title: __("Travel Insurance"),
description: __("Comprehensive travel coverage for peace of mind."),
price: __("From $29/person")
},
{
icon: RotateCcw,
title: __("Airport Transfers"),
description: __("Hassle-free airport pickup and drop-off services."),
price: __("From $45/transfer")
},
{
icon: Package,
title: __("Equipment Rental"),
description: __("Quality gear and equipment for outdoor activities."),
price: __("From $15/day")
},
{
icon: Users,
title: __("Meal Packages"),
description: __(
"Delicious meal options for different dietary requirements."
),
price: __("From $25/day")
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-6 h-6 text-amber-600 dark:text-amber-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-amber-900 dark:text-amber-100", children: __("Premium Feature") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-amber-700 dark:text-amber-300 text-sm", children: __(
"Additional Services is a premium module. Upgrade to Yatra Pro to unlock all features."
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
className: "bg-amber-600 text-white hover:bg-amber-700 px-6 py-2 text-sm font-medium",
onClick: () => window.open(
"https://wpyatra.com/pricing?module=additional-services",
"_blank"
),
children: [
__("Upgrade to Pro"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "w-4 h-4 ml-2" })
]
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Package, { className: "w-8 h-8 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-2 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white", children: __("Additional Services") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center px-2 py-1 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white text-xs font-semibold shadow-md", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-3 h-3 mr-1" }),
__("PRO")
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto", children: __(
"Boost your revenue by offering optional add-ons like airport transfers, travel insurance, equipment rental, and meals during trip booking."
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6 mb-12", children: stats.map((stat, index) => {
const Icon = stat.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Card,
{
className: "border border-gray-200 dark:border-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-5 h-5 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: stat.value }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: stat.label })
] })
] }) })
},
index
);
}) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center", children: __("Powerful Features") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: features.map((feature, index) => {
const Icon = feature.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Card,
{
className: "border border-gray-200 dark:border-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-6 h-6 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: feature.title }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: feature.description })
] })
] }) })
},
index
);
}) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center", children: __("Popular Service Types") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", children: popularServices.map((service, index) => {
const Icon = service.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Card,
{
className: "border border-gray-200 dark:border-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-6 h-6 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: service.title }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-3", children: service.description }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-purple-600 dark:text-purple-400 font-semibold text-sm", children: service.price })
] }) })
},
index
);
}) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 border border-purple-200 dark:border-purple-800 rounded-xl p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col md:flex-row items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 md:mb-0 md:pr-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-6 h-6 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: __("Unlock Additional Services") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: __(
"Offer premium add-ons and boost your revenue with Yatra Pro."
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-green-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Airport transfers") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-green-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Travel insurance") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-green-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Equipment rental") })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
className: "bg-purple-600 text-white hover:bg-purple-700 px-8 py-3 text-sm font-medium mb-3",
onClick: () => window.open(
"https://wpyatra.com/pricing?module=additional-services",
"_blank"
),
children: [
__("Upgrade to Pro"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "w-4 h-4 ml-2" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("14-day money-back guarantee") })
] })
] }) })
] });
};
const isModuleAvailable$2 = () => {
const yatraAdmin = window == null ? void 0 : window.yatraAdmin;
return Boolean(yatraAdmin == null ? void 0 : yatraAdmin.isPro);
};
const AdditionalServices = () => {
const moduleAvailable = isModuleAvailable$2();
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("name");
const [sortOrder, setSortOrder] = reactExports.useState("asc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [permanentDeleteConfirm, setPermanentDeleteConfirm] = reactExports.useState({
isOpen: false,
service: null
});
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
const saved = localStorage.getItem("yatra-additional-services-columns");
return saved ? JSON.parse(saved) : {
name: true,
price: true,
price_type: true,
price_per: true,
trips: true,
status: true,
created_at: false,
updated_at: false
};
});
const { showToast } = useToast();
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
localStorage.setItem(
"yatra-additional-services-columns",
JSON.stringify(newVisibleColumns)
);
};
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) params.search = searchTerm;
if (statusFilter !== "all") params.status = statusFilter;
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const { data: statsData } = useQuery({
queryKey: ["additional-services-stats"],
queryFn: async () => {
try {
const response = await apiClient.get("/additional-services/stats");
return response;
} catch {
return { all: 0, publish: 0, draft: 0, trash: 0 };
}
},
enabled: isModuleAvailable$2()
});
const { data, isLoading, error } = useQuery({
queryKey: ["additional-services", queryParams],
queryFn: async () => {
const response = await apiClient.get("/additional-services", {
params: queryParams
});
return response;
},
enabled: isModuleAvailable$2()
});
const services = (data == null ? void 0 : data.data) || [];
const total = (data == null ? void 0 : data.total) || 0;
const totalPages = Math.ceil(total / 10);
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: statsData.all ?? 0,
publish: statsData.publish ?? 0,
draft: statsData.draft ?? 0,
trash: statsData.trash ?? 0
};
}
return { all: 0, publish: 0, draft: 0, trash: 0 };
}, [statsData]);
const bulkMutation = useMutation({
mutationFn: async ({
action,
ids
}) => {
return await apiClient.post("/additional-services/bulk", { action, ids });
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["additional-services"] });
queryClient2.invalidateQueries({
queryKey: ["additional-services-stats"]
});
showToast(__("Action completed successfully"), "success");
setSelectedIds([]);
setBulkAction("");
},
onError: () => {
showToast(__("Failed to perform action"), "error");
}
});
const navigateToForm = (action, id) => {
const params = new URLSearchParams(window.location.search);
params.set("subpage", "trips");
params.set("tab", "additional-services");
params.set("action", action);
if (id) params.set("id", id.toString());
window.history.pushState({}, "", `${window.location.pathname}?${params}`);
window.dispatchEvent(new PopStateEvent("popstate"));
};
const formatPrice = (price, priceType, pricePer) => {
var _a;
const currency = ((_a = window == null ? void 0 : window.yatraAdmin) == null ? void 0 : _a.currency) || "USD";
const numPrice = Number(price) || 0;
if (priceType === "percentage") return `${numPrice}%`;
const perLabel = { person: __("/person"), booking: __("/booking"), day: __("/day") }[pricePer] || "";
return `${formatYatraMoney(numPrice, currency, { zeroAsUnknown: false })}${perLabel}`;
};
const handleEdit = (service) => {
navigateToForm("edit", service.id);
};
const handlePermanentDelete = (service) => {
setPermanentDeleteConfirm({ isOpen: true, service });
};
const confirmPermanentDelete = () => {
if (permanentDeleteConfirm.service) {
bulkMutation.mutate({
action: "delete",
ids: [permanentDeleteConfirm.service.id]
});
setPermanentDeleteConfirm({ isOpen: false, service: null });
}
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("asc");
}
};
const getSortIcon = (field) => {
if (sortBy2 !== field) {
return null;
}
return sortOrder === "asc" ? "↑" : "↓";
};
const handleBulkApply = () => {
if (!bulkAction) {
showToast(__("Select a bulk action first."), "warning");
return;
}
if (selectedIds.length === 0) {
showToast(__("Select at least one service."), "warning");
return;
}
bulkMutation.mutate({ action: bulkAction, ids: selectedIds });
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("name");
setSortOrder("asc");
setPage(1);
setSelectedIds([]);
setBulkAction("");
};
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "name" || sortOrder !== "asc";
reactExports.useEffect(() => {
setSelectedIds(
(prev) => prev.filter((id) => services.some((s2) => s2.id === id))
);
}, [services]);
const viewFilters = [
{ key: "all", label: __("All"), count: statusCounts.all ?? 0 },
{
key: "publish",
label: __("Published"),
count: statusCounts.publish ?? 0
},
{ key: "draft", label: __("Draft"), count: statusCounts.draft ?? 0 },
{ key: "trash", label: __("Trash"), count: statusCounts.trash ?? 0 }
];
if (!moduleAvailable) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(AdditionalServicesPremium, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Additional Services", "yatra"),
description: __(
"Manage add-ons and extras that customers can select when booking",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: () => navigateToForm("create"),
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Service", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: permanentDeleteConfirm.isOpen,
onClose: () => setPermanentDeleteConfirm({ isOpen: false, service: null }),
onConfirm: confirmPermanentDelete,
title: __("Delete Service Permanently"),
message: permanentDeleteConfirm.service ? __(
'Are you sure you want to permanently delete "{name}"? This action cannot be undone.'
).replace("{name}", permanentDeleteConfirm.service.name) : __("Are you sure you want to permanently delete this service?"),
confirmText: __("Delete Permanently"),
cancelText: __("Cancel"),
variant: "danger",
isLoading: bulkMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ value: "all", label: __("All Status") },
{ value: "publish", label: __("Published") },
{ value: "draft", label: __("Draft") },
{ value: "trash", label: __("Trash") }
],
sortBy: sortBy2,
onSortByChange: setSortBy,
sortOrder,
onSortOrderChange: setSortOrder,
sortOptions: [
{ value: "name", label: __("Name") },
{ value: "price", label: __("Price") },
{ value: "price_type", label: __("Price Type") },
{ value: "price_per", label: __("Price Per") },
{ value: "status", label: __("Status") },
{ value: "created_at", label: __("Created At") },
{ value: "updated_at", label: __("Updated At") }
],
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search services...")
}
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_trips", children: error ? /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-8 text-center text-red-500", children: __("Error loading services") }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: viewFilters,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "name",
label: __("Service"),
visible: visibleColumns.name
},
{
key: "price",
label: __("Price"),
visible: visibleColumns.price
},
{
key: "price_type",
label: __("Price Type"),
visible: visibleColumns.price_type
},
{
key: "price_per",
label: __("Price Per"),
visible: visibleColumns.price_per
},
{
key: "trips",
label: __("Trips"),
visible: visibleColumns.trips
},
{
key: "status",
label: __("Status"),
visible: visibleColumns.status
},
{
key: "created_at",
label: __("Created Date"),
visible: visibleColumns.created_at
},
{
key: "updated_at",
label: __("Updated Date"),
visible: visibleColumns.updated_at
}
],
onToggleColumn: toggleColumn,
bulkMutationPending: bulkMutation.isPending,
totalItems: services.length,
bulkActionOptions: getDefaultBulkStatusOptions(statusFilter)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: services,
columns: [
{
key: "name",
label: __("Service"),
sortable: true,
visible: visibleColumns.name,
render: (service) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0", children: service.icon ? service.icon.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: service.icon.value,
alt: service.name,
className: "w-full h-full object-cover rounded-lg"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: service.icon.value,
provider: service.icon.provider ?? "yatra",
className: "w-5 h-5 text-purple-600 dark:text-purple-400"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx(Package, { className: "w-5 h-5 text-purple-600 dark:text-purple-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: "#",
onClick: (e) => {
e.preventDefault();
handleEdit(service);
},
className: "font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 hover:underline transition-colors cursor-pointer",
children: service.name
}
),
(service.is_required === true || service.is_required === 1 || service.is_required === "1") && /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "outline",
className: "text-xs bg-amber-100 text-amber-700 border-amber-300 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-700",
children: __("Required")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[11px] text-gray-400 dark:text-gray-500", children: [
"(",
__("ID:", "yatra"),
" ",
service.id,
")"
] }) })
] })
] })
},
{
key: "price",
label: __("Price"),
sortable: true,
visible: visibleColumns.price,
render: (service) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: service.status === "trash" ? "text-gray-400 dark:text-gray-600" : "font-medium text-gray-900 dark:text-white",
children: formatPrice(
service.price,
service.price_type,
service.price_per
)
}
)
},
{
key: "price_type",
label: __("Price Type"),
sortable: true,
visible: visibleColumns.price_type,
render: (service) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: service.status === "trash" ? "text-gray-400 dark:text-gray-600" : "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300",
children: service.price_type === "fixed" ? __("Fixed") : __("Percentage")
}
)
},
{
key: "price_per",
label: __("Price Per"),
sortable: true,
visible: visibleColumns.price_per,
render: (service) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: service.status === "trash" ? "text-gray-400 dark:text-gray-600" : "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
children: {
person: __("Person"),
booking: __("Booking"),
day: __("Day")
}[service.price_per] || service.price_per
}
)
},
{
key: "trips",
label: __("Trips"),
sortable: false,
visible: visibleColumns.trips,
render: (service) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: service.applicable_to === "all" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: __("All Trips") }) : service.trips && service.trips.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1", children: [
service.trips.slice(0, 2).map((trip) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 max-w-[120px] truncate",
title: trip.title,
children: trip.title
},
trip.id
)),
service.trips.length > 2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300", children: [
"+",
service.trips.length - 2,
" ",
__("more")
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400 dark:text-gray-600 text-xs", children: __("No trips assigned") }) })
},
{
key: "status",
label: __("Status"),
sortable: true,
visible: visibleColumns.status,
render: (service) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${service.status === "trash" ? "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" : service.status === "publish" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"}`,
children: service.status === "trash" ? __("Trash") : service.status === "publish" ? __("Published") : __("Draft")
}
)
},
{
key: "created_at",
label: __("Created Date"),
sortable: true,
visible: visibleColumns.created_at,
render: (service) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: service.status === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: new Date(service.created_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric"
}
)
}
)
},
{
key: "updated_at",
label: __("Updated Date"),
sortable: true,
visible: visibleColumns.updated_at,
render: (service) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: service.status === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: new Date(service.updated_at).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric"
}
)
}
)
}
],
actions: [
{
key: "edit",
label: __("Edit"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: handleEdit,
condition: () => can("yatra_edit_trips")
},
{
key: "publish",
label: __("Publish"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4" }),
onClick: (service) => {
bulkMutation.mutate({
action: "publish",
ids: [service.id]
});
},
condition: (service) => service.status !== "publish" && service.status !== "trash" && can("yatra_edit_trips")
},
{
key: "draft",
label: __("Set as Draft"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { className: "w-4 h-4" }),
onClick: (service) => {
bulkMutation.mutate({
action: "draft",
ids: [service.id]
});
},
condition: (service) => service.status !== "draft" && service.status !== "trash" && can("yatra_edit_trips")
},
{
key: "restore",
label: __("Restore"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4" }),
onClick: (service) => {
bulkMutation.mutate({
action: "restore",
ids: [service.id]
});
},
condition: (service) => (service.status === "trash" || statusFilter === "trash") && can("yatra_edit_trips")
},
{
key: "trash",
label: __("Move to Trash"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (service) => {
bulkMutation.mutate({
action: "trash",
ids: [service.id]
});
},
condition: (service) => service.status !== "trash" && statusFilter !== "trash" && can("yatra_edit_trips")
},
{
key: "delete",
label: __("Delete Permanently"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: handlePermanentDelete,
condition: (service) => (service.status === "trash" || statusFilter === "trash") && can("yatra_delete_trips"),
variant: "destructive"
}
],
isLoading,
isError: !!error,
errorText: __("Error loading services"),
emptyText: __("No services found"),
emptyDescription: hasFilters ? __("Try adjusting your filters to see more results.") : __("Get started by creating your first service."),
onCreateClick: can("yatra_edit_trips") ? () => navigateToForm("create") : void 0,
onSort: handleSort,
getSortIcon,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(
selectedIds.filter((selectedId) => selectedId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(
services.map((s2) => s2.id)
);
} else {
setSelectedIds([]);
}
},
isAllSelected: services.length > 0 && selectedIds.length === services.length,
getItemId: (service) => service.id,
getItemStatus: (service) => service.status,
statusFilter,
skeletonRows: 5
}
) }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: (newPage) => setPage(newPage),
itemName: __("services")
}
) })
] }) })
] });
};
const defaultService = {
name: "",
description: "",
price: 0,
price_type: "fixed",
price_per: "person",
icon: null,
status: "publish",
sort_order: 0,
applicable_to: "all",
trip_ids: [],
is_required: false
};
const isModuleAvailable$1 = () => {
const yatraAdmin = window == null ? void 0 : window.yatraAdmin;
return Boolean((yatraAdmin == null ? void 0 : yatraAdmin.isPro) && (yatraAdmin == null ? void 0 : yatraAdmin.additionalServicesEnabled));
};
const AdditionalServicesForm = () => {
const [formData, setFormData] = reactExports.useState(defaultService);
const [errors, setErrors] = reactExports.useState({});
const [showTripDropdown, setShowTripDropdown] = reactExports.useState(false);
const [tripSearchQuery, setTripSearchQuery] = reactExports.useState("");
const [debouncedTripSearch, setDebouncedTripSearch] = reactExports.useState("");
const { showToast } = useToast();
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const params = new URLSearchParams(window.location.search);
const serviceId = params.get("id");
const isEditMode = !!serviceId;
reactExports.useEffect(() => {
const timer2 = setTimeout(() => {
setDebouncedTripSearch(tripSearchQuery);
}, 300);
return () => clearTimeout(timer2);
}, [tripSearchQuery]);
const tripsQuery = useQuery({
queryKey: ["trips-for-service", debouncedTripSearch],
queryFn: async () => {
var _a;
try {
const params2 = {
per_page: 100
};
if (debouncedTripSearch.trim()) {
params2.search = debouncedTripSearch.trim();
}
const response = await apiClient.get("/trips", { params: params2 });
const trips = ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.data) || (response == null ? void 0 : response.data) || response || [];
return Array.isArray(trips) ? trips : [];
} catch (error) {
console.error("Failed to load trips:", error);
return [];
}
},
enabled: formData.applicable_to === "specific_trips",
staleTime: 5 * 60 * 1e3
});
const tripOptions = (tripsQuery.data || []).filter(
(t) => !!t && (typeof t.id === "number" || typeof t.id === "string")
).map((trip) => ({
value: Number(trip.id),
label: trip.title || trip.name || `Trip #${trip.id}`
}));
const { data: serviceData, isLoading: isLoadingService } = useQuery({
queryKey: ["additional-service", serviceId],
queryFn: async () => {
var _a;
const response = await apiClient.get(`/additional-services/${serviceId}`);
return ((_a = response.data) == null ? void 0 : _a.data) || response.data;
},
enabled: isEditMode && isModuleAvailable$1()
});
reactExports.useEffect(() => {
if (serviceData) {
let iconValue = null;
if (serviceData.icon) {
iconValue = serviceData.icon;
} else if (serviceData.image_url) {
iconValue = { type: "image", value: serviceData.image_url };
}
setFormData({
id: serviceData.id,
name: serviceData.name || "",
description: serviceData.description || "",
price: parseFloat(serviceData.price) || 0,
price_type: serviceData.price_type || "fixed",
price_per: serviceData.price_per || "person",
icon: iconValue,
status: serviceData.status || "draft",
sort_order: serviceData.sort_order || 0,
applicable_to: serviceData.applicable_to || "all",
trip_ids: serviceData.trip_ids || [],
is_required: serviceData.is_required === true || serviceData.is_required === 1 || serviceData.is_required === "1"
});
}
}, [serviceData]);
const saveMutation = useMutation({
mutationFn: async (data) => {
if (isEditMode) {
return apiClient.put(`/additional-services/${serviceId}`, data);
}
return apiClient.post("/additional-services", data);
},
onSuccess: () => {
showToast(
isEditMode ? __("Service updated successfully") : __("Service created successfully"),
"success"
);
queryClient2.invalidateQueries({ queryKey: ["additional-services"] });
if (!isEditMode) {
navigateBack();
}
},
onError: (error) => {
var _a, _b;
const message2 = ((_b = (_a = error == null ? void 0 : error.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message) || __("Failed to save service");
showToast(message2, "error");
}
});
const navigateBack = () => {
const params2 = new URLSearchParams(window.location.search);
params2.delete("action");
params2.delete("id");
params2.set("subpage", "trips");
params2.set("tab", "additional-services");
window.history.pushState({}, "", `${window.location.pathname}?${params2}`);
window.dispatchEvent(new PopStateEvent("popstate"));
};
const handleFieldChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prev) => {
const newErrors = { ...prev };
delete newErrors[field];
return newErrors;
});
}
};
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = __("Service name is required");
}
if (formData.price < 0) {
newErrors.price = __("Price cannot be negative");
}
if (formData.price_type === "percentage" && formData.price > 100) {
newErrors.price = __("Percentage cannot exceed 100%");
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e) => {
e.preventDefault();
if (!validateForm()) {
showToast(__("Please fix the errors before saving"), "error");
return;
}
saveMutation.mutate(formData);
};
const hasPermission = can("manage_options") || can("yatra_manage_settings") || can("yatra_edit_trips");
if (!hasPermission) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-12 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: __("You do not have permission to manage services.") }) }) });
}
if (!isModuleAvailable$1()) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-12 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Package, { className: "w-12 h-12 mx-auto text-gray-400 mb-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: __("Premium Feature") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400 mb-6", children: __(
"Additional Services is a premium feature. Upgrade to Yatra Pro to unlock."
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: () => window.open(
"https://wpyatra.com/pricing?module=additional-services",
"_blank"
),
children: __("Upgrade to Pro")
}
)
] }) });
}
if (isEditMode && isLoadingService) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-32 animate-pulse" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-20 animate-pulse" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 animate-pulse" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-20 animate-pulse" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-4 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-36 animate-pulse" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) })
] })
] })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
description: isEditMode ? __("Update the details of this additional service.") : __(
"Create a new additional service that customers can add to their bookings."
),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "outline", onClick: navigateBack, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4 mr-2" }),
__("Back to Services")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { children: __("Service Details") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [
__("Service Name"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: formData.name,
onChange: (e) => handleFieldChange("name", e.target.value),
placeholder: __("e.g., Airport Transfer, Travel Insurance"),
className: errors.name ? "border-red-500" : ""
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Description") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
value: formData.description,
onChange: (e) => handleFieldChange("description", e.target.value),
placeholder: __("Describe what this service includes..."),
rows: 4,
className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white"
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
id: "is_required",
checked: formData.is_required,
onChange: (e) => handleFieldChange("is_required", e.target.checked),
className: "mt-0.5 h-4 w-4 text-amber-600 focus:ring-amber-500 border-gray-300 rounded"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "is_required",
className: "text-sm font-medium text-gray-900 dark:text-white cursor-pointer",
children: __("Required Service")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: __(
"If enabled, customers must select this service when booking."
) })
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { children: __("Pricing") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Price") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: "0",
step: "0.01",
value: formData.price,
onChange: (e) => handleFieldChange(
"price",
parseFloat(e.target.value) || 0
),
className: errors.price ? "border-red-500" : ""
}
),
errors.price && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.price })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Price Type") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: formData.price_type,
onChange: (e) => handleFieldChange("price_type", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "fixed", children: __("Fixed Amount") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "percentage", children: __("Percentage of Trip Price") })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Price Per") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: formData.price_per,
onChange: (e) => handleFieldChange("price_per", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "person", children: __("Per Person") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "booking", children: __("Per Booking") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "day", children: __("Per Day") })
]
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: formData.price_type === "percentage" ? __(
"The price will be calculated as a percentage of the trip base price."
) : formData.price_per === "person" ? __(
"This price will be multiplied by the number of travelers."
) : formData.price_per === "day" ? __(
"This price will be multiplied by the trip duration in days."
) : __("This is a flat fee charged once per booking.") })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { children: __("Publish") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Status") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Published") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash") })
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Sort Order") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: "0",
value: formData.sort_order,
onChange: (e) => handleFieldChange(
"sort_order",
parseInt(e.target.value) || 0
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: __("Lower numbers appear first") })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { children: __("Applicable To") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: formData.applicable_to,
onChange: (e) => handleFieldChange(
"applicable_to",
e.target.value
),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Trips") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "specific_trips", children: __("Specific Trips") })
]
}
),
formData.applicable_to === "specific_trips" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 space-y-2 relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "border border-gray-300 dark:border-gray-600 rounded-lg p-2 cursor-pointer hover:border-gray-400 dark:hover:border-gray-500 bg-white dark:bg-gray-800",
onClick: () => setShowTripDropdown(!showTripDropdown),
children: formData.trip_ids.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
formData.trip_ids.slice(0, 3).map((tripId) => {
const trip = tripOptions.find(
(t) => t.value === tripId
);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"span",
{
className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 rounded",
children: [
(trip == null ? void 0 : trip.label) || `Trip #${tripId}`,
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: (e) => {
e.stopPropagation();
handleFieldChange(
"trip_ids",
formData.trip_ids.filter(
(id) => id !== tripId
)
);
},
className: "hover:text-blue-600 dark:hover:text-blue-200",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-3 h-3" })
}
)
]
},
tripId
);
}),
formData.trip_ids.length > 3 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center px-2 py-0.5 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded", children: [
"+",
formData.trip_ids.length - 3,
" ",
__("more")
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Click to select trips...") })
}
),
showTripDropdown && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "text",
placeholder: __("Search trips..."),
value: tripSearchQuery,
onChange: (e) => setTripSearchQuery(e.target.value),
className: "w-full text-sm",
onClick: (e) => e.stopPropagation()
}
),
tripsQuery.isFetching && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin text-gray-400" }) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-[200px] overflow-y-auto", children: tripsQuery.isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-5 h-5 animate-spin mx-auto mb-2" }),
__("Loading trips...")
] }) : tripOptions.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-700", children: tripOptions.map((trip) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
className: "flex items-center justify-between gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50",
onClick: (e) => e.stopPropagation(),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
checked: formData.trip_ids.includes(
trip.value
),
onChange: (e) => {
if (e.target.checked) {
handleFieldChange("trip_ids", [
...formData.trip_ids,
trip.value
]);
} else {
handleFieldChange(
"trip_ids",
formData.trip_ids.filter(
(id) => id !== trip.value
)
);
}
},
className: "rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: trip.label })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: [
"#",
trip.value
] })
]
},
trip.value
)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-gray-400", children: __("No trips found") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
size: "sm",
className: "w-full",
onClick: () => setShowTripDropdown(false),
children: __("Done")
}
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formData.applicable_to === "all" ? __("This service will be available for all trips.") : __(
"This service will only be available for the selected trips."
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { children: __("Service Icon or Image") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconPicker,
{
value: formData.icon,
onChange: (value) => handleFieldChange("icon", value),
label: __("Service Icon or Image"),
helpText: __(
"Select an icon from the library or upload a custom image for this service."
),
allowImageUpload: true,
allowIconSelection: true,
size: "md"
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
className: "w-full",
disabled: saveMutation.isPending,
children: saveMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }),
__("Saving...")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4 mr-2" }),
isEditMode ? __("Update Service") : __("Create Service")
] })
}
) }) })
] })
] }) })
] });
};
const TripConsentPremium = () => {
const features = [
{
icon: FileSignature,
title: __("Digital Signatures"),
description: __(
"Create legally binding consent forms with digital signature capabilities."
)
},
{
icon: Shield,
title: __("Legal Compliance"),
description: __(
"Ensure GDPR and privacy regulation compliance with proper consent management."
)
},
{
icon: ClipboardCheck,
title: __("Custom Forms"),
description: __(
"Build custom consent forms with conditional logic and required fields."
)
},
{
icon: Send,
title: __("Email Delivery"),
description: __(
"Automatically send consent forms to customers via email for electronic signing."
)
}
];
const stats = [
{
icon: CheckCircle,
value: "100%",
label: __("Legal Compliance")
},
{
icon: Users,
value: "15k",
label: __("Forms Signed")
},
{
icon: Clock,
value: "60s",
label: __("Average Sign Time")
},
{
icon: Shield,
value: "AES256",
label: __("Encryption")
}
];
const consentTypes = [
{
icon: FileSignature,
title: __("Liability Waivers"),
description: __(
"Protect your business with comprehensive liability waiver forms."
),
required: true
},
{
icon: PenTool,
title: __("Medical Declarations"),
description: __(
"Collect medical information and emergency contact details."
),
required: false
},
{
icon: Camera,
title: __("Photo Releases"),
description: __(
"Get permission to use customer photos for marketing purposes."
),
required: false
},
{
icon: Shield,
title: __("Privacy Policies"),
description: __(
"Ensure customers agree to your privacy and data handling policies."
),
required: true
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-6 h-6 text-amber-600 dark:text-amber-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-amber-900 dark:text-amber-100", children: __("Premium Feature") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-amber-700 dark:text-amber-300 text-sm", children: __(
"Trip Consent is a premium module. Upgrade to Yatra Pro to manage digital consent forms."
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
className: "bg-amber-600 text-white hover:bg-amber-700 px-6 py-2 text-sm font-medium",
onClick: () => window.open(
"https://wpyatra.com/pricing?module=trip-consent",
"_blank"
),
children: [
__("Upgrade to Pro"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "w-4 h-4 ml-2" })
]
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900 mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileSignature, { className: "w-8 h-8 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-2 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white", children: __("Trip Consent Forms") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center px-2 py-1 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white text-xs font-semibold shadow-md", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-3 h-3 mr-1" }),
__("PRO")
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto", children: __(
"Create legally compliant consent forms with digital signatures and automate the collection process with Yatra Pro."
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6 mb-12", children: stats.map((stat, index) => {
const Icon = stat.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Card,
{
className: "border border-gray-200 dark:border-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: stat.value }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: stat.label })
] })
] }) })
},
index
);
}) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center", children: __("Powerful Features") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: features.map((feature, index) => {
const Icon = feature.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Card,
{
className: "border border-gray-200 dark:border-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-6 h-6 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: feature.title }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: feature.description })
] })
] }) })
},
index
);
}) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center", children: __("Consent Form Types") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: consentTypes.map((consentType, index) => {
const Icon = consentType.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Card,
{
className: "border border-gray-200 dark:border-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold text-gray-900 dark:text-white mb-2", children: consentType.title }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-3", children: consentType.description }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: consentType.required ? __("Required") : __("Optional") })
] })
] }) })
},
index
);
}) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-xl p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col md:flex-row items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 md:mb-0 md:pr-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-6 h-6 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: __("Ensure Legal Compliance") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: __(
"Protect your business and customers with professional consent forms and digital signatures powered by Yatra Pro."
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-blue-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Digital signatures") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-blue-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Legal compliance") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-blue-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Automated delivery") })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
className: "bg-blue-600 text-white hover:bg-blue-700 px-8 py-3 text-sm font-medium mb-3",
onClick: () => window.open(
"https://wpyatra.com/pricing?module=trip-consent",
"_blank"
),
children: [
__("Upgrade to Pro"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "w-4 h-4 ml-2" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("14-day money-back guarantee") })
] })
] }) })
] });
};
const isModuleAvailable = () => {
const yatraAdmin = window == null ? void 0 : window.yatraAdmin;
return Boolean(yatraAdmin == null ? void 0 : yatraAdmin.isPro);
};
const ConsentFormsList = () => {
var _a;
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("name");
const [sortOrder, setSortOrder] = reactExports.useState("asc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [deleteConfirm, setDeleteConfirm] = reactExports.useState({
isOpen: false,
form: null
});
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
const saved = localStorage.getItem("yatra-consent-forms-columns");
return saved ? JSON.parse(saved) : {
id: true,
name: true,
status: true,
applicable_to: true,
signatures: true,
version: true
};
});
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
localStorage.setItem(
"yatra-consent-forms-columns",
JSON.stringify(newVisibleColumns)
);
};
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) params.search = searchTerm;
if (statusFilter !== "all") params.status = statusFilter;
return params;
}, [searchTerm, statusFilter, sortBy2, sortOrder, page]);
const {
data: formsData,
isLoading,
error
} = useQuery({
queryKey: ["consent-forms", queryParams],
queryFn: async () => {
const response = await apiClient.get("/consent-forms", {
params: queryParams
});
return response.data || response;
},
enabled: isModuleAvailable()
});
const forms = Array.isArray(formsData) ? formsData : (formsData == null ? void 0 : formsData.data) || [];
const total = Array.isArray(formsData) ? formsData.length : ((_a = formsData == null ? void 0 : formsData.meta) == null ? void 0 : _a.total) || 0;
const totalPages = Math.ceil(total / 10);
const deleteMutation = useMutation({
mutationFn: async (id) => {
await apiClient.delete(`/consent-forms/${id}`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["consent-forms"] });
showToast(__("Consent form deleted successfully"), "success");
setDeleteConfirm({ isOpen: false, form: null });
},
onError: () => {
showToast(__("Failed to delete consent form"), "error");
}
});
const duplicateMutation = useMutation({
mutationFn: async (id) => {
await apiClient.post(`/consent-forms/${id}/duplicate`);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["consent-forms"] });
showToast(__("Consent form duplicated successfully"), "success");
},
onError: () => {
showToast(__("Failed to duplicate consent form"), "error");
}
});
const bulkMutation = useMutation({
mutationFn: async ({
action,
ids
}) => {
return await apiClient.post("/consent-forms/bulk", { action, ids });
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["consent-forms"] });
showToast(__("Action completed successfully"), "success");
setSelectedIds([]);
setBulkAction("");
},
onError: () => {
showToast(__("Failed to perform action"), "error");
}
});
const navigateToForm = (action, id) => {
const params = new URLSearchParams(window.location.search);
params.set("subpage", "trips");
params.set("tab", "trip-consent");
params.set("action", action);
if (id) params.set("id", id.toString());
window.history.pushState({}, "", `${window.location.pathname}?${params}`);
window.dispatchEvent(new PopStateEvent("popstate"));
};
const handleEdit = (form) => navigateToForm("edit", form.id);
const handleBulkApply = () => {
if (!bulkAction || selectedIds.length === 0) return;
bulkMutation.mutate({ action: bulkAction, ids: selectedIds });
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("name");
setSortOrder("asc");
setPage(1);
};
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "name" || sortOrder !== "asc";
reactExports.useEffect(() => {
setSelectedIds(
(prev) => prev.filter((id) => forms.some((f) => f.id === id))
);
}, [forms]);
const statusCounts = reactExports.useMemo(() => {
const counts = {
all: total,
publish: 0,
draft: 0,
archived: 0,
trash: 0
};
forms.forEach((form) => {
if (counts[form.status] !== void 0) {
counts[form.status]++;
}
});
return counts;
}, [forms, total]);
const viewFilters = [
{ key: "all", label: __("All"), count: statusCounts.all },
{ key: "publish", label: __("Published"), count: statusCounts.publish },
{ key: "draft", label: __("Draft"), count: statusCounts.draft },
{ key: "archived", label: __("Archived"), count: statusCounts.archived },
{ key: "trash", label: __("Trash"), count: statusCounts.trash }
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteConfirm.isOpen,
onClose: () => setDeleteConfirm({ isOpen: false, form: null }),
onConfirm: () => deleteConfirm.form && deleteMutation.mutate(deleteConfirm.form.id),
title: __("Delete Consent Form"),
message: deleteConfirm.form ? __(
'Are you sure you want to delete "{name}"? Forms with signed consents will be archived instead.'
).replace("{name}", deleteConfirm.form.name) : __("Are you sure you want to delete this consent form?"),
confirmText: __("Delete"),
cancelText: __("Cancel"),
variant: "danger",
isLoading: deleteMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ value: "all", label: __("All Status") },
{ value: "publish", label: __("Published") },
{ value: "draft", label: __("Draft") },
{ value: "archived", label: __("Archived") },
{ value: "trash", label: __("Trash") }
],
sortBy: sortBy2,
onSortByChange: setSortBy,
sortOrder,
onSortOrderChange: setSortOrder,
sortOptions: [
{ value: "name", label: __("Name") },
{ value: "status", label: __("Status") },
{ value: "created_at", label: __("Created At") },
{ value: "updated_at", label: __("Updated At") }
],
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search consent forms...")
}
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_trips", children: error ? /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-8 text-center text-red-500", children: __("Error loading consent forms") }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: viewFilters,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{ key: "id", label: __("Form ID"), visible: visibleColumns.id },
{
key: "name",
label: __("Form Name"),
visible: visibleColumns.name
},
{
key: "status",
label: __("Status"),
visible: visibleColumns.status
},
{
key: "applicable_to",
label: __("Applies To"),
visible: visibleColumns.applicable_to
},
{
key: "signatures",
label: __("Signatures"),
visible: visibleColumns.signatures
},
{
key: "version",
label: __("Version"),
visible: visibleColumns.version
}
],
onToggleColumn: toggleColumn,
bulkMutationPending: bulkMutation.isPending,
totalItems: forms.length,
bulkActionOptions: getDefaultBulkStatusOptions(statusFilter)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-0 overflow-visible", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: forms,
columns: [
{
key: "id",
label: __("Form ID"),
sortable: true,
visible: visibleColumns.id,
render: (form) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm font-mono text-gray-500 dark:text-gray-400", children: [
"#",
form.id
] })
},
{
key: "name",
label: __("Form Name"),
sortable: true,
visible: visibleColumns.name,
render: (form) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileSignature, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: "#",
onClick: (e) => {
e.preventDefault();
handleEdit(form);
},
className: "font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors cursor-pointer",
children: form.name
}
),
form.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs", children: form.description })
] })
] })
},
{
key: "status",
label: __("Status"),
sortable: true,
visible: visibleColumns.status,
render: (form) => {
const statusColors = {
publish: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
draft: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
archived: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400",
trash: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: statusColors[form.status] || "", children: form.status.charAt(0).toUpperCase() + form.status.slice(1) });
}
},
{
key: "applicable_to",
label: __("Applies To"),
sortable: false,
visible: visibleColumns.applicable_to,
render: (form) => {
var _a2;
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: form.applicable_to === "all" ? __("All Trips") : `${((_a2 = form.trip_ids) == null ? void 0 : _a2.length) || 0} ${__("Trips")}` });
}
},
{
key: "signatures",
label: __("Signatures"),
sortable: false,
visible: visibleColumns.signatures,
render: (form) => {
const signedCount = form.signed_count || 0;
const pendingCount = form.pending_count || 0;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm text-blue-600 dark:text-blue-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: signedCount })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "w-4 h-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: pendingCount })
] })
] });
}
},
{
key: "version",
label: __("Version"),
sortable: false,
visible: visibleColumns.version,
render: (form) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
"v",
form.version
] })
}
],
actions: [
{
key: "edit",
label: __("Edit"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: handleEdit,
condition: (form) => form.status !== "trash"
},
{
key: "duplicate",
label: __("Duplicate"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-4 h-4" }),
onClick: (form) => duplicateMutation.mutate(form.id),
condition: (form) => form.status !== "trash"
},
{
key: "restore",
label: __("Restore"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4" }),
onClick: (form) => bulkMutation.mutate({
action: "restore",
ids: [form.id]
}),
condition: (form) => form.status === "trash"
},
{
key: "trash",
label: __("Move to Trash"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (form) => bulkMutation.mutate({
action: "trash",
ids: [form.id]
}),
condition: (form) => form.status !== "trash"
},
{
key: "delete",
label: __("Delete Permanently"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (form) => setDeleteConfirm({ isOpen: true, form }),
variant: "destructive",
condition: (form) => form.status === "trash"
}
],
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(selectedIds.filter((i) => i !== id));
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(forms.map((f) => f.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: forms.length > 0 && selectedIds.length === forms.length,
getItemId: (form) => form.id,
isLoading
}
),
total > 10 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
onPageChange: setPage,
totalItems: total,
itemsPerPage: 10,
itemName: __("forms")
}
) })
] }) })
] }) })
] });
};
const SignedConsentsList = () => {
var _a;
const [page, setPage] = reactExports.useState(1);
const [selectedConsent, setSelectedConsent] = reactExports.useState(
null
);
const [isModalOpen, setIsModalOpen] = reactExports.useState(false);
const [isDetailLoading, setIsDetailLoading] = reactExports.useState(false);
const [detailError, setDetailError] = reactExports.useState(null);
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [sortBy2, setSortBy] = reactExports.useState("signed_at");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const { showToast } = useToast();
reactExports.useEffect(() => {
}, [isModalOpen]);
reactExports.useEffect(() => {
}, [selectedConsent]);
const {
data: consentsData,
isLoading,
error
} = useQuery({
queryKey: [
"signed-consents",
page,
searchTerm,
sortBy2,
sortOrder,
statusFilter
],
queryFn: async () => {
const params = {
page,
per_page: 15,
sort_by: sortBy2,
sort_order: sortOrder
};
if (searchTerm) params.search = searchTerm;
if (statusFilter !== "all") params.status = statusFilter;
const response = await apiClient.get("/signed-consents", { params });
return response;
},
enabled: isModuleAvailable()
});
const consents = (consentsData == null ? void 0 : consentsData.data) || [];
const total = ((_a = consentsData == null ? void 0 : consentsData.meta) == null ? void 0 : _a.total) || 0;
const totalPages = Math.ceil(total / 15);
const formatDate2 = (dateString) => {
return new Date(dateString).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
});
};
const handleView = async (consent) => {
setIsModalOpen(true);
setIsDetailLoading(true);
setDetailError(null);
setSelectedConsent(null);
try {
const response = await apiClient.get(`/signed-consents/${consent.id}`);
let consentData = response;
if (response.data) {
consentData = response.data;
}
setSelectedConsent(consentData);
} catch (error2) {
console.error("Error fetching consent details:", error2);
setDetailError(__("Failed to load consent details"));
} finally {
setIsDetailLoading(false);
}
};
const handleCloseModal = () => {
setIsModalOpen(false);
setDetailError(null);
setSelectedConsent(null);
};
const handleDownloadPdf = async (consent) => {
var _a2;
try {
const data = await apiService.downloadSignedConsentPdf(consent.id);
if ((data == null ? void 0 : data.success) && ((_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.download_url)) {
window.open(data.data.download_url, "_blank");
} else {
showToast(
__("Failed to prepare PDF download. Please try again.", "yatra"),
"error"
);
}
} catch (err) {
console.error("PDF download error:", err);
showToast((err == null ? void 0 : err.message) || __("Failed to download PDF", "yatra"), "error");
}
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("signed_at");
setSortOrder("desc");
setPage(1);
};
const hasFilters = searchTerm || statusFilter !== "all" || sortBy2 !== "signed_at" || sortOrder !== "desc";
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: (value) => {
setSearchTerm(value);
setPage(1);
},
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
},
statusOptions: [
{ value: "all", label: __("All Status") },
{ value: "signed", label: __("Signed") },
{ value: "pending", label: __("Pending") }
],
sortBy: sortBy2,
onSortByChange: setSortBy,
sortOrder,
onSortOrderChange: setSortOrder,
sortOptions: [
{ value: "signed_at", label: __("Signed Date") },
{ value: "signer_name", label: __("Signer Name") },
{ value: "form_name", label: __("Form Name") }
],
onResetFilters: handleResetFilters,
hasFilters: !!hasFilters,
placeholder: __("Search by name or email...")
}
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: consents,
columns: [
{
key: "signer",
label: __("Signer"),
sortable: true,
visible: true,
render: (consent) => {
var _a2, _b;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => handleView(consent),
className: "flex items-center gap-3 w-full text-left group focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-300 font-semibold", children: ((_b = (_a2 = consent.signer_name) == null ? void 0 : _a2.charAt(0)) == null ? void 0 : _b.toUpperCase()) || "?" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: consent.signer_name }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-3 h-3" }),
consent.signer_email
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-blue-600 dark:text-blue-300 opacity-0 group-hover:opacity-100 transition-opacity", children: __("View details") })
] })
]
}
);
}
},
{
key: "form",
label: __("Form"),
sortable: true,
visible: true,
render: (consent) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900 dark:text-white", children: consent.form_name || sprintf(
// translators: %d: consent form ID, used as a fallback when the form has no name.
__("Form #%d", "yatra"),
consent.form_id
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500", children: [
"v",
consent.form_version
] })
] })
},
{
key: "booking",
label: __("Booking"),
sortable: false,
visible: true,
render: (consent) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: consent.booking_id > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
"#",
consent.booking_id,
consent.traveler_index > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-xs text-gray-400", children: sprintf(
// translators: %d: traveler sequence number within the booking.
__("(Traveler %d)", "yatra"),
consent.traveler_index
) })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 italic", children: __("Preview") }) })
},
{
key: "signed_at",
label: __("Signed At"),
sortable: true,
visible: true,
render: (consent) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Calendar$1, { className: "w-3 h-3" }),
formatDate2(consent.signed_at)
] })
},
{
key: "status",
label: __("Status"),
sortable: true,
visible: true,
render: (consent) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: consent.status === "signed" ? "success" : "default",
children: consent.status === "signed" ? __("Signed", "yatra") : consent.status === "expired" ? __("Expired", "yatra") : consent.status === "revoked" ? __("Revoked", "yatra") : consent.status === "pending" ? __("Pending", "yatra") : consent.status
}
)
}
],
actions: [
{
key: "view",
label: __("View Details"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: handleView
},
{
key: "download",
label: __("Download PDF"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-4 h-4" }),
onClick: handleDownloadPdf
}
],
isLoading,
isError: !!error,
errorText: __("Error loading signed consents"),
emptyText: __("No signed consents yet"),
emptyDescription: __(
"Signed consent forms will appear here once travelers submit them."
),
getItemId: (consent) => consent.id
}
) }) }),
total > 15 && /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
onPageChange: setPage,
totalItems: total,
itemsPerPage: 15,
itemName: __("consents")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: isModalOpen,
onClose: handleCloseModal,
title: __("Signed Consent Details"),
size: "xl",
loading: isDetailLoading,
error: detailError,
loadingSkeleton: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6 animate-pulse", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-32 bg-gray-300 dark:bg-gray-600 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-40 bg-gray-300 dark:bg-gray-600 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-36 bg-gray-300 dark:bg-gray-600 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-28 bg-gray-300 dark:bg-gray-600 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded mb-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between pb-2 border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-32 bg-gray-300 dark:bg-gray-600 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between pb-2 border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-28 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-24 bg-gray-300 dark:bg-gray-600 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-36 bg-gray-300 dark:bg-gray-600 rounded" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded mb-3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 w-48 bg-gray-200 dark:bg-gray-700 rounded mx-auto" }) })
] })
] }),
footer: selectedConsent && !detailError && !isDetailLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => handleDownloadPdf(selectedConsent),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "w-4 h-4 mr-2" }),
__("Download PDF")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: handleCloseModal, children: __("Close") })
] }) : void 0,
children: selectedConsent && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4 mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs text-gray-500 uppercase", children: __("Signer Name") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: selectedConsent.signer_name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs text-gray-500 uppercase", children: __("Email") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: selectedConsent.signer_email })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs text-gray-500 uppercase", children: __("Signed At") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: formatDate2(selectedConsent.signed_at) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs text-gray-500 uppercase", children: __("IP Address") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: selectedConsent.ip_address })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 uppercase", children: __("Form Responses") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-3", children: [
selectedConsent.form_data && Object.entries(selectedConsent.form_data).map(
([key2, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex justify-between border-b border-gray-200 dark:border-gray-700 pb-2 last:border-0 last:pb-0",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: key2 }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: typeof value === "boolean" ? value ? __("✓ Yes", "yatra") : __("✗ No", "yatra") : String(value) })
]
},
key2
)
),
(!selectedConsent.form_data || Object.keys(selectedConsent.form_data).length === 0) && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: __("No form data recorded") })
] })
] }),
selectedConsent.signature_data && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 uppercase", children: __("Signature") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white border border-gray-200 dark:border-gray-700 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: selectedConsent.signature_data,
alt: __("Signature", "yatra"),
className: "max-h-24 mx-auto"
}
) })
] }),
selectedConsent.initials_data && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 uppercase", children: __("Initials") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white border border-gray-200 dark:border-gray-700 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: selectedConsent.initials_data,
alt: __("Initials", "yatra"),
className: "max-h-16 mx-auto"
}
) })
] })
] })
}
)
] });
};
const TripConsent = () => {
const getSubtabFromUrl = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("subtab") || "forms";
}, []);
const [activeTab, setActiveTab] = reactExports.useState(
getSubtabFromUrl
);
const updateTabInUrl = (tab) => {
const params = new URLSearchParams(window.location.search);
params.set("subpage", "trips");
params.set("tab", "trip-consent");
params.set("subtab", tab);
params.delete("action");
params.delete("id");
window.history.pushState({}, "", `${window.location.pathname}?${params}`);
};
const handleTabChange = (tab) => {
setActiveTab(tab);
updateTabInUrl(tab);
};
reactExports.useEffect(() => {
const handleLocationChange = () => {
const newSubtab = getSubtabFromUrl;
if (newSubtab !== activeTab) {
setActiveTab(newSubtab);
}
};
window.addEventListener("popstate", handleLocationChange);
const interval = setInterval(() => {
const currentSearch = window.location.search;
if (currentSearch !== window.__lastSearch) {
window.__lastSearch = currentSearch;
handleLocationChange();
}
}, 100);
return () => {
window.removeEventListener("popstate", handleLocationChange);
clearInterval(interval);
};
}, [getSubtabFromUrl, activeTab]);
if (!isModuleAvailable()) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(TripConsentPremium, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Trip Consent Forms"),
description: __(
"Manage consent forms, waivers, and digital signatures for your trips."
),
actions: activeTab === "forms" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: () => {
const params = new URLSearchParams(window.location.search);
params.set("subpage", "trips");
params.set("tab", "trip-consent");
params.set("action", "create");
window.history.pushState(
{},
"",
`${window.location.pathname}?${params}`
);
window.dispatchEvent(new PopStateEvent("popstate"));
},
className: "bg-blue-600 hover:bg-blue-700",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
__("Create Form")
]
}
) : null
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "-mb-px flex space-x-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => handleTabChange("forms"),
className: `py-3 px-1 border-b-2 font-medium text-sm ${activeTab === "forms" ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"}`,
children: __("Consent Forms")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => handleTabChange("signed"),
className: `py-3 px-1 border-b-2 font-medium text-sm ${activeTab === "signed" ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"}`,
children: __("Signed Consents")
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: activeTab === "forms" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ConsentFormsList, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SignedConsentsList, {}) })
] });
};
async function fetchEmailTemplates() {
const raw = await apiClient.get(API_ENDPOINTS.EMAIL_TEMPLATES);
const unwrapped = unwrapApiPayload(raw);
return Array.isArray(unwrapped) ? unwrapped : [];
}
async function fetchEmailTemplate(id) {
return unwrapApiPayload(
await apiClient.get(API_ENDPOINTS.EMAIL_TEMPLATE_GET(id))
);
}
async function fetchEmailTemplateVariables(eventKey) {
const url = eventKey && eventKey.trim() !== "" ? `${API_ENDPOINTS.EMAIL_TEMPLATE_VARIABLES}?event_key=${encodeURIComponent(eventKey.trim())}` : API_ENDPOINTS.EMAIL_TEMPLATE_VARIABLES;
return unwrapApiPayload(await apiClient.get(url));
}
async function createEmailTemplate(data) {
return apiClient.post(API_ENDPOINTS.EMAIL_TEMPLATES, data);
}
async function updateEmailTemplate(id, data) {
return apiClient.put(API_ENDPOINTS.EMAIL_TEMPLATE_GET(id), data);
}
async function setEmailTemplateActive(id, is_active) {
return apiClient.put(API_ENDPOINTS.EMAIL_TEMPLATE_GET(id), { is_active });
}
async function deleteEmailTemplate(id) {
return apiClient.delete(API_ENDPOINTS.EMAIL_TEMPLATE_GET(id));
}
async function duplicateEmailTemplate(id) {
return apiClient.post(API_ENDPOINTS.EMAIL_TEMPLATE_DUPLICATE(id));
}
async function previewEmailTemplate(id) {
const response = await apiClient.post(
API_ENDPOINTS.EMAIL_TEMPLATE_PREVIEW(id),
{}
);
return unwrapApiPayload(response);
}
async function sendEmailTemplateTest(id, email) {
return apiClient.post(API_ENDPOINTS.EMAIL_TEMPLATE_TEST(id), { email });
}
async function fetchEmailSequences() {
const raw = await apiClient.get(API_ENDPOINTS.EMAIL_SEQUENCES);
const unwrapped = unwrapApiPayload(raw);
return Array.isArray(unwrapped) ? unwrapped : [];
}
async function fetchEmailSequence(id) {
return unwrapApiPayload(
await apiClient.get(API_ENDPOINTS.EMAIL_SEQUENCE_GET(id))
);
}
async function createEmailSequence(data) {
return apiClient.post(API_ENDPOINTS.EMAIL_SEQUENCES, data);
}
async function updateEmailSequence(id, data) {
return apiClient.put(API_ENDPOINTS.EMAIL_SEQUENCE_GET(id), data);
}
async function deleteEmailSequence(id) {
return apiClient.delete(API_ENDPOINTS.EMAIL_SEQUENCE_GET(id));
}
async function updateEmailSequenceStatus(id, status) {
return apiClient.put(API_ENDPOINTS.EMAIL_SEQUENCE_GET(id), { status });
}
async function fetchEmailLogs(params) {
const raw = await apiClient.get(API_ENDPOINTS.EMAIL_LOGS, { params });
if (raw !== null && typeof raw === "object") {
const r2 = raw;
if (r2.success === true && "data" in r2) {
const meta = r2.meta || {};
const items2 = Array.isArray(r2.data) ? r2.data : [];
return {
items: items2,
total: Number(meta.total) || items2.length,
per_page: Number(meta.per_page) || (params == null ? void 0 : params.per_page) || 20,
current_page: Number(meta.current_page) || (params == null ? void 0 : params.page) || 1
};
}
}
const fallback = unwrapApiPayload(raw);
const items = Array.isArray(fallback) ? fallback : [];
return {
items,
total: items.length,
per_page: (params == null ? void 0 : params.per_page) || 20,
current_page: (params == null ? void 0 : params.page) || 1
};
}
const Label = reactExports.forwardRef(
({ className = "", ...props }, ref) => {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
ref,
className: `text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-900 dark:text-white ${className}`,
...props
}
);
}
);
Label.displayName = "Label";
const EmailAutomationPremium = () => {
const features = [
{
icon: FileText,
title: __("Custom Email Templates"),
description: __(
"Edit and customize all system email templates with your branding."
)
},
{
icon: Clock,
title: __("Automated Sequences"),
description: __(
"Create drip campaigns and automated email sequences for different triggers."
)
},
{
icon: Send,
title: __("Smart Triggers"),
description: __(
"Set up automatic emails based on booking status, payments, and customer actions."
)
},
{
icon: BarChart$1,
title: __("Email Analytics"),
description: __(
"Track email delivery rates, open rates, and engagement metrics."
)
}
];
const stats = [
{
icon: BarChart$1,
value: "68%",
label: __("Higher Open Rates")
},
{
icon: Users,
value: "3.5x",
label: __("Booking Conversion")
},
{
icon: Zap,
value: "24/7",
label: __("Automation")
}
];
const emailTypes = [
{
icon: Bell,
title: __("Booking Confirmations"),
description: __("Instant booking confirmation emails with all details."),
trigger: __("On booking creation")
},
{
icon: CreditCard,
title: __("Payment Notifications"),
description: __("Payment received, failed, and refund notifications."),
trigger: __("On payment status change")
},
{
icon: Calendar$1,
title: __("Trip Reminders"),
description: __("Pre-trip reminders and departure notifications."),
trigger: __("Before trip date")
},
{
icon: Megaphone,
title: __("Marketing Emails"),
description: __("Promotional campaigns and newsletter broadcasts."),
trigger: __("Manual/automated")
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-6 h-6 text-amber-600 dark:text-amber-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-amber-900 dark:text-amber-100", children: __("Premium Feature") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-amber-700 dark:text-amber-300 text-sm", children: __(
"Email Automation is a premium module. Upgrade to Yatra Pro to unlock advanced email marketing."
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
className: "bg-amber-600 text-white hover:bg-amber-700 px-6 py-2 text-sm font-medium",
onClick: () => window.open(
"https://wpyatra.com/pricing?module=email-automation",
"_blank"
),
children: [
__("Upgrade to Pro"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "w-4 h-4 ml-2" })
]
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900 mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-8 h-8 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center space-x-2 mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white", children: __("Email Automation") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto", children: __(
"Create powerful email campaigns, automate customer communication, and track engagement with Yatra Pro."
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-12", children: stats.map((stat, index) => {
const Icon = stat.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "pt-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-6 h-6 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-1", children: stat.value }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: stat.label })
] }) }, index);
}) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center", children: __("Powerful Email Features") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", children: features.map((feature, index) => {
const Icon = feature.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Card,
{
className: "border border-gray-200 dark:border-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-6 h-6 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: feature.title }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: feature.description })
] }) })
},
index
);
}) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center", children: __("Automated Email Types") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: emailTypes.map((emailType, index) => {
const Icon = emailType.icon;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Card,
{
className: "border border-gray-200 dark:border-gray-700",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold text-gray-900 dark:text-white mb-2", children: emailType.title }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-3", children: emailType.description }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300", children: emailType.trigger })
] })
] }) })
},
index
);
}) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col md:flex-row items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 md:mb-0 md:pr-8", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "w-6 h-6 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: __("Unlock Email Automation") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: __(
"Transform your customer communication with intelligent email automation and drive more bookings with Yatra Pro."
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-green-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Custom email templates") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-green-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Automated sequences") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircle, { className: "w-4 h-4 text-green-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: __("Email analytics") })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
className: "bg-blue-600 text-white hover:bg-blue-700 px-8 py-3 text-sm font-medium mb-3",
onClick: () => window.open(
"https://wpyatra.com/pricing?module=email-automation",
"_blank"
),
children: [
__("Upgrade to Pro"),
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "w-4 h-4 ml-2" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("14-day money-back guarantee") })
] })
] }) })
] });
};
const EMAIL_KEYS = [
"admin_email",
"from_email",
"from_name",
"email_template_booking",
"email_template_confirmation",
"email_template_cancellation",
"email_template_reminder",
"email_template_admin_new_booking",
"email_template_admin_payment",
"email_template_admin_cancellation",
"email_template_trip_consent",
"email_template_customer_verification",
"smtp_enabled",
"smtp_host",
"smtp_port",
"smtp_username",
"smtp_password",
"smtp_encryption",
"email_tpl_booking_subject",
"email_tpl_booking_body",
"email_tpl_payment_subject",
"email_tpl_payment_body",
"email_tpl_cancellation_subject",
"email_tpl_cancellation_body",
"email_tpl_reminder_subject",
"email_tpl_reminder_body",
"email_tpl_admin_booking_subject",
"email_tpl_admin_booking_body",
"email_tpl_admin_payment_subject",
"email_tpl_admin_payment_body",
"email_tpl_admin_cancellation_subject",
"email_tpl_admin_cancellation_body",
"email_tpl_trip_consent_subject",
"email_tpl_trip_consent_body",
"email_tpl_customer_verification_subject",
"email_tpl_customer_verification_body",
"email_template_booking_completed",
"email_template_booking_expired_customer",
"email_template_admin_booking_expired",
"email_template_scheduled_payment_reminder",
"email_template_scheduled_payment_succeeded",
"email_template_scheduled_payment_failed",
"email_template_admin_scheduled_payment_failed",
"email_template_enquiry_received",
"email_template_enquiry_admin",
"email_template_enquiry_response",
"email_template_review_request",
"email_template_abandoned_booking_recovery_first",
"email_template_abandoned_booking_recovery_second",
"email_template_abandoned_booking_recovery_final",
"email_tpl_booking_completed_subject",
"email_tpl_booking_completed_body",
"email_tpl_booking_expired_customer_subject",
"email_tpl_booking_expired_customer_body",
"email_tpl_admin_booking_expired_subject",
"email_tpl_admin_booking_expired_body",
"email_tpl_scheduled_payment_reminder_subject",
"email_tpl_scheduled_payment_reminder_body",
"email_tpl_scheduled_payment_succeeded_subject",
"email_tpl_scheduled_payment_succeeded_body",
"email_tpl_scheduled_payment_failed_subject",
"email_tpl_scheduled_payment_failed_body",
"email_tpl_admin_scheduled_payment_failed_subject",
"email_tpl_admin_scheduled_payment_failed_body",
"email_tpl_enquiry_received_subject",
"email_tpl_enquiry_received_body",
"email_tpl_enquiry_admin_subject",
"email_tpl_enquiry_admin_body",
"email_tpl_enquiry_response_subject",
"email_tpl_enquiry_response_body",
"email_tpl_review_request_subject",
"email_tpl_review_request_body",
"email_tpl_abandoned_booking_recovery_first_subject",
"email_tpl_abandoned_booking_recovery_first_body",
"email_tpl_abandoned_booking_recovery_second_subject",
"email_tpl_abandoned_booking_recovery_second_body",
"email_tpl_abandoned_booking_recovery_final_subject",
"email_tpl_abandoned_booking_recovery_final_body"
];
const BOOL_KEYS = /* @__PURE__ */ new Set([
"email_template_booking",
"email_template_confirmation",
"email_template_cancellation",
"email_template_reminder",
"email_template_admin_new_booking",
"email_template_admin_payment",
"email_template_admin_cancellation",
"email_template_trip_consent",
"email_template_customer_verification",
"email_template_booking_completed",
"email_template_booking_expired_customer",
"email_template_admin_booking_expired",
"email_template_scheduled_payment_reminder",
"email_template_scheduled_payment_succeeded",
"email_template_scheduled_payment_failed",
"email_template_admin_scheduled_payment_failed",
"email_template_enquiry_received",
"email_template_enquiry_admin",
"email_template_enquiry_response",
"email_template_review_request",
"email_template_abandoned_booking_recovery_first",
"email_template_abandoned_booking_recovery_second",
"email_template_abandoned_booking_recovery_final",
"smtp_enabled"
]);
const EMAIL_SETTINGS_DEFAULTS = {
admin_email: "admin@yatra.com",
from_email: "noreply@yatra.com",
from_name: "Yatra Travel",
email_template_booking: true,
email_template_confirmation: true,
email_template_cancellation: true,
email_template_reminder: true,
email_template_admin_new_booking: true,
email_template_admin_payment: true,
email_template_admin_cancellation: true,
email_template_trip_consent: true,
email_template_customer_verification: true,
email_template_booking_completed: true,
email_template_booking_expired_customer: true,
email_template_admin_booking_expired: true,
email_template_scheduled_payment_reminder: true,
email_template_scheduled_payment_succeeded: true,
email_template_scheduled_payment_failed: true,
email_template_admin_scheduled_payment_failed: true,
email_template_enquiry_received: true,
email_template_enquiry_admin: true,
email_template_enquiry_response: true,
email_template_review_request: true,
email_template_abandoned_booking_recovery_first: true,
email_template_abandoned_booking_recovery_second: true,
email_template_abandoned_booking_recovery_final: true,
smtp_enabled: false,
smtp_host: "smtp.gmail.com",
smtp_port: 587,
smtp_username: "",
smtp_password: "",
smtp_encryption: "tls",
email_tpl_booking_subject: "",
email_tpl_booking_body: "",
email_tpl_payment_subject: "",
email_tpl_payment_body: "",
email_tpl_cancellation_subject: "",
email_tpl_cancellation_body: "",
email_tpl_reminder_subject: "",
email_tpl_reminder_body: "",
email_tpl_admin_booking_subject: "",
email_tpl_admin_booking_body: "",
email_tpl_admin_payment_subject: "",
email_tpl_admin_payment_body: "",
email_tpl_admin_cancellation_subject: "",
email_tpl_admin_cancellation_body: "",
email_tpl_trip_consent_subject: "",
email_tpl_trip_consent_body: "",
email_tpl_customer_verification_subject: "",
email_tpl_customer_verification_body: "",
email_tpl_booking_completed_subject: "",
email_tpl_booking_completed_body: "",
email_tpl_booking_expired_customer_subject: "",
email_tpl_booking_expired_customer_body: "",
email_tpl_admin_booking_expired_subject: "",
email_tpl_admin_booking_expired_body: "",
email_tpl_scheduled_payment_reminder_subject: "",
email_tpl_scheduled_payment_reminder_body: "",
email_tpl_scheduled_payment_succeeded_subject: "",
email_tpl_scheduled_payment_succeeded_body: "",
email_tpl_scheduled_payment_failed_subject: "",
email_tpl_scheduled_payment_failed_body: "",
email_tpl_admin_scheduled_payment_failed_subject: "",
email_tpl_admin_scheduled_payment_failed_body: "",
email_tpl_enquiry_received_subject: "",
email_tpl_enquiry_received_body: "",
email_tpl_enquiry_admin_subject: "",
email_tpl_enquiry_admin_body: "",
email_tpl_enquiry_response_subject: "",
email_tpl_enquiry_response_body: "",
email_tpl_review_request_subject: "",
email_tpl_review_request_body: "",
email_tpl_abandoned_booking_recovery_first_subject: "",
email_tpl_abandoned_booking_recovery_first_body: "",
email_tpl_abandoned_booking_recovery_second_subject: "",
email_tpl_abandoned_booking_recovery_second_body: "",
email_tpl_abandoned_booking_recovery_final_subject: "",
email_tpl_abandoned_booking_recovery_final_body: ""
};
function coerceEmailValues(raw) {
const out = { ...EMAIL_SETTINGS_DEFAULTS };
if (!raw) return out;
for (const key2 of EMAIL_KEYS) {
const v = raw[key2];
if (v === void 0 || v === null) continue;
if (key2 === "smtp_port") {
const n = typeof v === "number" ? v : parseInt(String(v), 10);
out.smtp_port = Number.isFinite(n) ? n : EMAIL_SETTINGS_DEFAULTS.smtp_port;
} else if (BOOL_KEYS.has(key2)) {
out[key2] = v === true || v === "true" || v === 1 || v === "1";
} else {
out[key2] = String(v);
}
}
return out;
}
function sliceEqual(a2, b) {
for (const key2 of EMAIL_KEYS) {
if (a2[key2] !== b[key2]) return false;
}
return true;
}
function applyEmailSlice(base, slice) {
const next = { ...base };
for (const key2 of EMAIL_KEYS) {
next[key2] = slice[key2];
}
return next;
}
function useEmailSettingsManager() {
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const { can } = usePermissions();
const { data: settings2, isLoading } = useQuery({
queryKey: ["settings"],
queryFn: async () => {
try {
return await fetchSettings();
} catch (error) {
const message2 = error instanceof Error ? error.message : __("Failed to load settings", "yatra");
showToast(message2, "error");
throw error;
}
},
// Was `manage_yatra` — that's not a registered Yatra cap, so the
// check returned false for everyone except admins-via-fallback,
// which silently broke the Email page on installs where the
// admin fallback wasn't yet wired (free, or Pro pre-Team). The
// canonical cap for the Email hub is `yatra_manage_emails`,
// registered in the Team module's CapabilityRegistry and held
// by Marketing role + Owner / Manager.
enabled: can("yatra_manage_emails")
});
const serverSlice = reactExports.useMemo(
() => coerceEmailValues(settings2),
[settings2]
);
const [localSlice, setLocalSlice] = reactExports.useState(
null
);
reactExports.useEffect(() => {
if (settings2) {
setLocalSlice(
(prev) => prev === null ? coerceEmailValues(settings2) : prev
);
}
}, [settings2]);
const ready = Boolean(settings2) && !isLoading;
const values = localSlice ?? serverSlice;
const isDirty = localSlice ? !sliceEqual(localSlice, serverSlice) : false;
const handleFieldChange = reactExports.useCallback(
(e) => {
const field = e.target.name || e.target.id;
if (!EMAIL_KEYS.includes(field)) return;
let value;
if (e.target.type === "checkbox") {
value = e.target.checked;
} else if (e.target.type === "number") {
const num = parseFloat(e.target.value);
value = Number.isFinite(num) ? num : 0;
} else {
value = e.target.value;
}
setLocalSlice((prev) => {
const base = prev ?? (settings2 ? coerceEmailValues(settings2) : { ...EMAIL_SETTINGS_DEFAULTS });
return { ...base, [field]: value };
});
},
[settings2]
);
const saveMutation = useMutation({
mutationFn: async () => {
if (!settings2 || !localSlice) {
throw new Error(__("Settings not loaded", "yatra"));
}
const payload = applyEmailSlice(
settings2,
localSlice
);
await saveSettings(payload);
return payload;
},
onSuccess: (saved) => {
queryClient2.setQueryData(["settings"], saved);
setLocalSlice(coerceEmailValues(saved));
showToast(__("Email settings saved", "yatra"), "success");
},
onError: (error) => {
const message2 = error instanceof Error ? error.message : __("Failed to save settings", "yatra");
showToast(message2, "error");
}
});
const save = reactExports.useCallback(() => {
saveMutation.mutate();
}, [saveMutation]);
return {
values,
handleFieldChange,
save,
isLoading,
ready,
isSaving: saveMutation.isPending,
canSave: ready && Boolean(localSlice) && isDirty && !saveMutation.isPending
};
}
const Field = React.memo(
({
id,
label,
description,
required = false,
children
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: id, className: "flex items-center gap-1.5", children: [
label,
required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
description && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-start gap-1.5", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-3.5 h-3.5 mt-0.5 flex-shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 leading-relaxed", children: description })
] }),
children
] })
);
Field.displayName = "Field";
const SectionDivider = ({ title: title2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 pt-4 mt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white mb-4", children: title2 }) });
const EmailDeliverySection = ({
values,
onFieldChange
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white mb-4", children: __("Email Configuration", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field,
{
id: "admin_email",
label: __("Admin Email", "yatra"),
description: __(
"Email address to receive admin notifications",
"yatra"
),
required: true,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "admin_email",
type: "email",
value: values.admin_email,
name: "admin_email",
onChange: onFieldChange,
placeholder: __("admin@example.com", "yatra")
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field,
{
id: "from_email",
label: __("From Email", "yatra"),
description: __(
"Email address used as sender for customer emails",
"yatra"
),
required: true,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "from_email",
type: "email",
value: values.from_email,
name: "from_email",
onChange: onFieldChange,
placeholder: __("noreply@example.com", "yatra")
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field,
{
id: "from_name",
label: __("From Name", "yatra"),
description: __(
"Name displayed as sender in customer emails",
"yatra"
),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "from_name",
value: values.from_name,
name: "from_name",
onChange: onFieldChange,
placeholder: __("Travel Agency Name", "yatra")
}
)
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(SectionDivider, { title: __("SMTP Settings (Optional)", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-md", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "checkbox",
id: "smtp_enabled",
checked: values.smtp_enabled,
name: "smtp_enabled",
onChange: onFieldChange,
className: "w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "smtp_enabled", className: "font-medium cursor-pointer", children: __("Enable SMTP", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: __(
"Use custom SMTP server instead of default WordPress mail",
"yatra"
) })
] })
] }),
values.smtp_enabled && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field,
{
id: "smtp_host",
label: __("SMTP Host", "yatra"),
description: __("SMTP server address", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "smtp_host",
value: values.smtp_host,
name: "smtp_host",
onChange: onFieldChange,
placeholder: "smtp.gmail.com"
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field,
{
id: "smtp_port",
label: __("SMTP Port", "yatra"),
description: __("SMTP server port (usually 587 or 465)", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "smtp_port",
type: "number",
value: values.smtp_port,
name: "smtp_port",
onChange: onFieldChange,
placeholder: "587"
}
)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field,
{
id: "smtp_encryption",
label: __("Encryption", "yatra"),
description: __("Connection encryption type", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "smtp_encryption",
value: values.smtp_encryption,
name: "smtp_encryption",
onChange: onFieldChange,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "tls", children: __("TLS", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "ssl", children: __("SSL", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "none", children: __("None", "yatra") })
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field,
{
id: "smtp_username",
label: __("SMTP Username", "yatra"),
description: __("Your SMTP account username", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "smtp_username",
value: values.smtp_username,
name: "smtp_username",
onChange: onFieldChange,
placeholder: __("your-email@gmail.com", "yatra")
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Field,
{
id: "smtp_password",
label: __("SMTP Password", "yatra"),
description: __(
"Your SMTP account password or app password",
"yatra"
),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "smtp_password",
type: "password",
value: values.smtp_password,
name: "smtp_password",
onChange: onFieldChange,
placeholder: __("Enter SMTP password", "yatra")
}
)
}
)
] })
] })
] });
const BRAND_PRO_NAME = brandName() + " Pro";
const BOOKING_RICH_MERGE_TAGS = "{{payment_gateway}}, {{payment_gateway_label}}, {{payment_schedule}}, {{payment_schedule_label}}, {{travelers_list}}, {{travelers_list_html}}, {{traveler_custom_fields_html}}, {{booking_custom_fields_html}}, {{special_requests}}, {{special_requests_html}}";
const CORE_FREE_TEMPLATE_KEYS = [
"booking_confirmation",
"payment_received",
"booking_cancelled",
"trip_reminder",
"trip_consent_request",
"customer_email_verification",
"booking_completed",
"booking_expired_customer",
"admin_booking_expired",
"scheduled_payment_reminder",
"scheduled_payment_succeeded",
"scheduled_payment_failed",
"admin_scheduled_payment_failed",
"enquiry_received",
"enquiry_admin",
"enquiry_response",
"review_request",
"abandoned_booking_recovery_first",
"abandoned_booking_recovery_second",
"abandoned_booking_recovery_final",
"admin_new_booking",
"admin_payment_received",
"admin_booking_cancelled"
];
function isCoreTemplateSlug(slug) {
return !!slug && CORE_FREE_TEMPLATE_KEYS.includes(slug);
}
const EMAIL_TEMPLATES_CATALOG = [
{
template_key: "booking_confirmation",
event_key: "booking.created",
name: __("Booking Confirmation", "yatra"),
description: __(
"Customer email for checkout, admin bookings, and confirmed status.",
"yatra"
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_booking",
settingsSubject: "email_tpl_booking_subject",
settingsBody: "email_tpl_booking_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{customer_first_name}}, {{booking_reference}}, {{booking_id}}, {{trip_name}}, {{travel_date}}, {{travelers_count}}, {{total_amount_formatted}}, {{amount_due_formatted}}, {{currency}}, {{intro_paragraph}}, {{details_html}}, {{footer_note}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "payment_received",
event_key: "payment.received",
name: __("Payment Received", "yatra"),
description: __("Sent when a payment is recorded for a booking.", "yatra"),
category: "payment",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_confirmation",
settingsSubject: "email_tpl_payment_subject",
settingsBody: "email_tpl_payment_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{customer_first_name}}, {{booking_reference}}, {{trip_name}}, {{travel_date}}, {{payment_amount_formatted}}, {{payment_method}}, {{transaction_id}}, {{total_amount_formatted}}, {{currency}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "booking_cancelled",
event_key: "booking.cancelled",
name: __("Booking Cancellation", "yatra"),
description: __("Sent when a booking is marked cancelled.", "yatra"),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_cancellation",
settingsSubject: "email_tpl_cancellation_subject",
settingsBody: "email_tpl_cancellation_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{customer_first_name}}, {{booking_reference}}, {{trip_name}}, {{travel_date}}, {{travelers_count}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "trip_reminder",
event_key: "reminder.trip",
name: __("Trip Reminder", "yatra"),
description: __(
"Scheduled reminder before departure (see Booking settings).",
"yatra"
),
category: "reminder",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_reminder",
settingsSubject: "email_tpl_reminder_subject",
settingsBody: "email_tpl_reminder_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{booking_reference}}, {{trip_name}}, {{travel_date}}, {{travelers_count}}, {{reminder_days}}, {{days_until_trip}}, {{amount_due_formatted}}, {{reminder_extra_html}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "trip_consent_request",
event_key: "consent.requested",
name: __("Trip consent request", "yatra"),
description: __(
"Sent when a traveler must sign a trip consent form (Trip Consent module).",
"yatra"
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
requiresModule: "trip_consent",
settingsFlag: "email_template_trip_consent",
settingsSubject: "email_tpl_trip_consent_subject",
settingsBody: "email_tpl_trip_consent_body",
mergeTags: "{{site_name}}, {{recipient_name}}, {{form_name}}, {{consent_link}}, {{trip_name}}, {{travel_date}}, {{booking_reference}}, {{expiry_notice_html}}, {{consent_test_notice_html}}"
},
{
template_key: "customer_email_verification",
event_key: "account.email_verification",
name: __("Customer email verification", "yatra"),
description: __(
"Sent when a customer registers (e.g. from checkout) and must verify their email before logging in.",
"yatra"
),
category: "account",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_customer_verification",
settingsSubject: "email_tpl_customer_verification_subject",
settingsBody: "email_tpl_customer_verification_body",
mergeTags: "{{site_name}}, {{site_url}}, {{customer_first_name}}, {{customer_name}}, {{verification_link}}, {{intro_paragraph}}, {{expiry_notice_html}}, {{footer_note}}"
},
{
template_key: "admin_new_booking",
event_key: "booking.created",
name: __("Admin: New Booking", "yatra"),
description: __(
"Sent to your admin email when a booking is created. Turn off here to stop this email.",
"yatra"
),
category: "booking",
recipient_type: "admin",
to_email: "{{admin_email}}",
isCoreFree: true,
settingsFlag: "email_template_admin_new_booking",
settingsSubject: "email_tpl_admin_booking_subject",
settingsBody: "email_tpl_admin_booking_body",
mergeTags: "{{site_name}}, {{site_url}}, {{admin_url}}, {{booking_reference}}, {{booking_id}}, {{customer_name}}, {{customer_email}}, {{customer_phone}}, {{trip_name}}, {{travel_date}}, {{travelers_count}}, {{total_amount_formatted}}, {{currency}}, {{booking_status}}, {{payment_status}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "admin_payment_received",
event_key: "payment.received",
name: __("Admin: Payment received", "yatra"),
description: __(
"Sent to your admin email when a payment is recorded. Customer receipt uses the Payment Received template.",
"yatra"
),
category: "payment",
recipient_type: "admin",
to_email: "{{admin_email}}",
isCoreFree: true,
settingsFlag: "email_template_admin_payment",
settingsSubject: "email_tpl_admin_payment_subject",
settingsBody: "email_tpl_admin_payment_body",
mergeTags: "{{site_name}}, {{admin_url}}, {{booking_reference}}, {{booking_id}}, {{customer_name}}, {{payment_amount_formatted}}, {{payment_method}}, {{transaction_id}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "admin_booking_cancelled",
event_key: "booking.cancelled",
name: __("Admin: Booking cancelled", "yatra"),
description: __(
"Sent to your admin email when a booking is cancelled. Customer notice uses the Booking Cancellation template.",
"yatra"
),
category: "booking",
recipient_type: "admin",
to_email: "{{admin_email}}",
isCoreFree: true,
settingsFlag: "email_template_admin_cancellation",
settingsSubject: "email_tpl_admin_cancellation_subject",
settingsBody: "email_tpl_admin_cancellation_body",
mergeTags: "{{site_name}}, {{admin_url}}, {{booking_reference}}, {{booking_id}}, {{customer_name}}, {{trip_name}}, {{travel_date}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "new_booking",
event_key: "booking.created",
name: __("New Booking Confirmation", "yatra"),
description: __(
"Pro automation alternative for the free Booking Confirmation template. Enable Email Automation to edit and send.",
"yatra"
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: false,
// Gate behind Email Automation so the free / Pro versions don't appear as
// a confusing duplicate in the customer's view (e.g. two "Payment Received"
// rows). isModuleGatedLocked() reads this and locks the row when the
// module isn't active.
requiresModule: "email_automation"
},
{
template_key: "booking_payment",
event_key: "payment.received",
name: __("Booking payment notice", "yatra"),
description: __(
"Pro automation alternative for the free Payment Received template. Enable Email Automation to edit and send.",
"yatra"
),
category: "payment",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: false,
requiresModule: "email_automation"
},
{
template_key: "booking_confirmed",
event_key: "booking.confirmed",
name: __("Booking Confirmed", "yatra"),
description: __(
"Pro automation template fired on booking confirmation. Enable Email Automation to edit and send.",
"yatra"
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: false,
requiresModule: "email_automation"
},
{
template_key: "booking_completed",
event_key: "booking.completed",
name: __("Trip completed", "yatra"),
description: __(
"Sent when a booking is marked completed (after travel).",
"yatra"
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_booking_completed",
settingsSubject: "email_tpl_booking_completed_subject",
settingsBody: "email_tpl_booking_completed_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{booking_reference}}, {{booking_id}}, {{trip_name}}, {{travel_date}}, {{trip_url}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "booking_expired_customer",
event_key: "booking.expired",
name: __("Booking expired (customer)", "yatra"),
description: __(
"Sent when a pending booking is auto-cancelled for non-payment.",
"yatra"
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_booking_expired_customer",
settingsSubject: "email_tpl_booking_expired_customer_subject",
settingsBody: "email_tpl_booking_expired_customer_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{booking_reference}}, {{trip_name}}, {{travel_date}}, {{trip_url}}, {{expiry_policy_note}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "admin_booking_expired",
event_key: "booking.expired",
name: __("Admin: Booking expired", "yatra"),
description: __(
"Admin notice when a booking is auto-cancelled for non-payment.",
"yatra"
),
category: "booking",
recipient_type: "admin",
to_email: "{{admin_email}}",
isCoreFree: true,
settingsFlag: "email_template_admin_booking_expired",
settingsSubject: "email_tpl_admin_booking_expired_subject",
settingsBody: "email_tpl_admin_booking_expired_body",
mergeTags: "{{site_name}}, {{admin_url}}, {{booking_reference}}, {{booking_id}}, {{customer_name}}, {{customer_email}}, {{trip_name}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "scheduled_payment_reminder",
event_key: "scheduled.payment.reminder",
name: __("Scheduled payment reminder", "yatra"),
description: __(
"Sent before an installment or gateway-scheduled charge when Scheduled payments is enabled in settings.",
"yatra"
),
category: "payment",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
requiresModule: "scheduled_payments",
settingsFlag: "email_template_scheduled_payment_reminder",
settingsSubject: "email_tpl_scheduled_payment_reminder_subject",
settingsBody: "email_tpl_scheduled_payment_reminder_body",
mergeTags: "{{site_name}}, {{customer_first_name}}, {{customer_name}}, {{booking_reference}}, {{booking_id}}, {{trip_name}}, {{trip_url}}, {{scheduled_amount_formatted}}, {{scheduled_date_formatted}}, {{payment_type_label}}, {{scheduled_payment_id}}, {{currency}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "scheduled_payment_succeeded",
event_key: "scheduled.payment.succeeded",
name: __("Scheduled payment succeeded", "yatra"),
description: __(
"Sent after a scheduled / installment charge succeeds.",
"yatra"
),
category: "payment",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
requiresModule: "scheduled_payments",
settingsFlag: "email_template_scheduled_payment_succeeded",
settingsSubject: "email_tpl_scheduled_payment_succeeded_subject",
settingsBody: "email_tpl_scheduled_payment_succeeded_body",
mergeTags: "{{site_name}}, {{customer_first_name}}, {{customer_name}}, {{booking_reference}}, {{booking_id}}, {{trip_name}}, {{scheduled_amount_formatted}}, {{payment_type_label}}, {{balance_after_formatted}}, {{scheduled_payment_id}}, {{currency}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "scheduled_payment_failed",
event_key: "scheduled.payment.failed",
name: __("Scheduled payment failed", "yatra"),
description: __(
"Sent when a scheduled charge fails (temporary or final).",
"yatra"
),
category: "payment",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
requiresModule: "scheduled_payments",
settingsFlag: "email_template_scheduled_payment_failed",
settingsSubject: "email_tpl_scheduled_payment_failed_subject",
settingsBody: "email_tpl_scheduled_payment_failed_body",
mergeTags: "{{site_name}}, {{customer_first_name}}, {{customer_name}}, {{booking_reference}}, {{booking_id}}, {{trip_name}}, {{scheduled_amount_formatted}}, {{scheduled_payment_id}}, {{failure_reason}}, {{failure_intro_html}}, {{failure_followup_html}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "admin_scheduled_payment_failed",
event_key: "scheduled.payment.failed",
name: __("Admin: Scheduled payment failed", "yatra"),
description: __(
"Admin notice when a scheduled payment permanently fails.",
"yatra"
),
category: "payment",
recipient_type: "admin",
to_email: "{{admin_email}}",
isCoreFree: true,
requiresModule: "scheduled_payments",
settingsFlag: "email_template_admin_scheduled_payment_failed",
settingsSubject: "email_tpl_admin_scheduled_payment_failed_subject",
settingsBody: "email_tpl_admin_scheduled_payment_failed_body",
mergeTags: "{{site_name}}, {{admin_url}}, {{booking_reference}}, {{booking_id}}, {{trip_name}}, {{customer_name}}, {{customer_email}}, {{scheduled_amount_formatted}}, {{scheduled_payment_id}}, {{failure_reason}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "payment_reminder",
event_key: "payment.reminder",
name: __("Payment Reminder", "yatra"),
description: __(
"Pro automation template. Enable Email Automation to edit and send.",
"yatra"
),
category: "payment",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: false
},
{
template_key: "enquiry_received",
event_key: "enquiry.created",
name: __("Enquiry Received", "yatra"),
description: __(
"Confirmation sent to the customer after they submit an enquiry.",
"yatra"
),
category: "enquiry",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_enquiry_received",
settingsSubject: "email_tpl_enquiry_received_subject",
settingsBody: "email_tpl_enquiry_received_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{customer_email}}, {{customer_phone}}, {{trip_name}}, {{trip_url}}, {{message}}"
},
{
template_key: "enquiry_admin",
event_key: "enquiry.created",
name: __("Admin: New Enquiry", "yatra"),
description: __(
"Sent to your admin email when a new enquiry is submitted.",
"yatra"
),
category: "enquiry",
recipient_type: "admin",
to_email: "{{admin_email}}",
isCoreFree: true,
settingsFlag: "email_template_enquiry_admin",
settingsSubject: "email_tpl_enquiry_admin_subject",
settingsBody: "email_tpl_enquiry_admin_body",
mergeTags: "{{site_name}}, {{admin_url}}, {{customer_name}}, {{customer_email}}, {{customer_phone}}, {{trip_name}}, {{message}}"
},
{
template_key: "enquiry_response",
event_key: "enquiry.responded",
name: __("Enquiry Response", "yatra"),
description: __(
"Sent to the customer when you reply to their enquiry.",
"yatra"
),
category: "enquiry",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_enquiry_response",
settingsSubject: "email_tpl_enquiry_response_subject",
settingsBody: "email_tpl_enquiry_response_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{customer_email}}, {{trip_name}}, {{trip_url}}, {{response}}, {{response_message}}, {{original_message}}"
},
{
template_key: "review_request",
event_key: "marketing.review_request",
name: __("Review Request", "yatra"),
description: __(
"Queued when a booking is marked completed, then sent after the delay in Review settings (if reviews are enabled).",
"yatra"
),
category: "marketing",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
settingsFlag: "email_template_review_request",
settingsSubject: "email_tpl_review_request_subject",
settingsBody: "email_tpl_review_request_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{trip_name}}, {{review_url}}, {{booking_reference}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "abandoned_booking_recovery_first",
event_key: "booking.abandoned_recovery",
name: __("Abandoned booking recovery (First)", "yatra"),
description: sprintf(
/* translators: %s: brand name (e.g. "Yatra Pro" or operator's white-labeled brand) */
__(
"First reminder sent by %s abandoned checkout recovery (module copy in {{recovery_intro_html}}).",
"yatra"
),
BRAND_PRO_NAME
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
requiresModule: "abandoned_booking_recovery",
settingsFlag: "email_template_abandoned_booking_recovery_first",
settingsSubject: "email_tpl_abandoned_booking_recovery_first_subject",
settingsBody: "email_tpl_abandoned_booking_recovery_first_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{trip_name}}, {{recovery_link}}, {{booking_reference}}, {{recovery_reminder_label}}, {{recovery_intro_html}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "abandoned_booking_recovery_second",
event_key: "booking.abandoned_recovery",
name: __("Abandoned booking recovery (Second)", "yatra"),
description: sprintf(
/* translators: %s: brand name */
__(
"Second reminder sent by %s abandoned checkout recovery (module copy in {{recovery_intro_html}}).",
"yatra"
),
BRAND_PRO_NAME
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
requiresModule: "abandoned_booking_recovery",
settingsFlag: "email_template_abandoned_booking_recovery_second",
settingsSubject: "email_tpl_abandoned_booking_recovery_second_subject",
settingsBody: "email_tpl_abandoned_booking_recovery_second_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{trip_name}}, {{recovery_link}}, {{booking_reference}}, {{recovery_reminder_label}}, {{recovery_intro_html}}, " + BOOKING_RICH_MERGE_TAGS
},
{
template_key: "abandoned_booking_recovery_final",
event_key: "booking.abandoned_recovery",
name: __("Abandoned booking recovery (Final)", "yatra"),
description: sprintf(
/* translators: %s: brand name */
__(
"Final reminder sent by %s abandoned checkout recovery (module copy in {{recovery_intro_html}}).",
"yatra"
),
BRAND_PRO_NAME
),
category: "booking",
recipient_type: "customer",
to_email: "{customer_email}",
isCoreFree: true,
requiresModule: "abandoned_booking_recovery",
settingsFlag: "email_template_abandoned_booking_recovery_final",
settingsSubject: "email_tpl_abandoned_booking_recovery_final_subject",
settingsBody: "email_tpl_abandoned_booking_recovery_final_body",
mergeTags: "{{site_name}}, {{customer_name}}, {{trip_name}}, {{recovery_link}}, {{booking_reference}}, {{recovery_reminder_label}}, {{recovery_intro_html}}, " + BOOKING_RICH_MERGE_TAGS
}
];
function getCatalogEntryByTemplateKey(key2) {
return EMAIL_TEMPLATES_CATALOG.find((e) => e.template_key === key2);
}
function getCoreTemplateDefinition(slug) {
const e = getCatalogEntryByTemplateKey(slug);
return (e == null ? void 0 : e.isCoreFree) ? e : void 0;
}
function buildLocalTemplateRows(values, options2) {
const pro = (options2 == null ? void 0 : options2.isProPluginActive) ?? false;
const moduleOk = (slug) => (options2 == null ? void 0 : options2.isModuleActive) ? options2.isModuleActive(slug) : false;
return EMAIL_TEMPLATES_CATALOG.map((entry) => {
const moduleGateOk = !entry.requiresModule || pro && moduleOk(entry.requiresModule);
const proCatalogLocked = !entry.isCoreFree;
const moduleContentLocked = Boolean(entry.requiresModule) && !moduleGateOk;
const is_locked = proCatalogLocked || moduleContentLocked;
const hasSettingsKeys = Boolean(
entry.settingsFlag && entry.settingsSubject && entry.settingsBody
);
const subject = entry.settingsSubject ? String(values[entry.settingsSubject] ?? "") : "";
const body = entry.settingsBody ? String(values[entry.settingsBody] ?? "") : "";
const isActive = entry.settingsFlag ? Boolean(values[entry.settingsFlag]) : false;
const id = entry.isCoreFree || hasSettingsKeys ? `core:${entry.template_key}` : `locked:${entry.template_key}`;
return {
id,
template_key: entry.template_key,
event_key: entry.event_key,
name: entry.name,
description: entry.description,
subject,
body,
category: entry.category,
recipient_type: entry.recipient_type,
to_email: entry.to_email,
is_active: hasSettingsKeys ? isActive : false,
is_system: true,
is_locked,
variables: []
};
});
}
const EmailPreviewModal = ({
open,
onClose,
subject,
body
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: open,
onClose,
title: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30",
"aria-hidden": true,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-5 w-5 text-blue-600 dark:text-blue-400" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: __("Email Preview", "yatra") })
] }),
description: __("Preview with sample data", "yatra"),
maxWidthClassName: "max-w-6xl w-[95vw]",
panelClassName: "yatra-model-ui flex flex-col max-h-[90vh]",
bodyClassName: "flex flex-1 min-h-0 flex-col px-0 py-0",
bodyScrollClassName: "flex min-h-0 flex-1 flex-col overflow-hidden",
footer: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: onClose, type: "button", children: __("Close", "yatra") }) }),
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 border-b border-gray-200 bg-white px-6 py-4 dark:border-gray-700 dark:bg-gray-900", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "h-4 w-4 text-gray-400", "aria-hidden": true }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400", children: __("Subject", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-base font-medium text-gray-900 dark:text-white", children: subject })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1 bg-gray-100 px-6 py-4 dark:bg-gray-950", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full min-h-[min(500px,50vh)] flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"iframe",
{
srcDoc: body,
className: "min-h-[min(500px,50vh)] w-full flex-1 border-0",
title: __("Email Preview", "yatra"),
sandbox: "allow-same-origin"
}
) }) })
] })
}
);
const EMAIL_TEMPLATE_VISIBLE_COLUMNS_DEFAULT = {
name: true,
event: true,
subject: true,
body_preview: true,
description: true,
category: true,
recipient_type: true,
is_active: true
};
function plainTextEmailPreview(html, maxLen = 100) {
if (!html) return "";
const plain = html.replace(//gi, " ").replace(//gi, " ").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
if (plain.length <= maxLen) return plain;
return `${plain.slice(0, maxLen)}…`;
}
function isModuleGatedLocked(template) {
const entry = getCatalogEntryByTemplateKey(template.template_key);
if (!(entry == null ? void 0 : entry.requiresModule)) {
return false;
}
return !isProPluginActive() || !isModuleActive(entry.requiresModule);
}
const getEffectiveRecipientType = (template) => {
const catalog = getCatalogEntryByTemplateKey(template.template_key);
if (catalog == null ? void 0 : catalog.recipient_type) {
return catalog.recipient_type;
}
const fromApi = template.recipient_type;
if (fromApi === "admin" || fromApi === "customer") {
return fromApi;
}
const toEmail = template.to_email || "";
if (toEmail.includes("{{admin_email}}")) {
return "admin";
}
if (toEmail.includes("{customer_email}") || toEmail.includes("{{customer_email}}")) {
return "customer";
}
return "customer";
};
const categoryIcons = {
booking: FileText,
payment: CreditCard,
enquiry: MessageSquare,
reminder: Bell,
marketing: Megaphone
};
const isApiTemplate = (t) => {
if (t.is_locked) {
return false;
}
if (typeof t.id === "number") {
return true;
}
return typeof t.id === "string" && /^[0-9]+$/.test(String(t.id).trim());
};
function toNumericTemplateId(id) {
if (id === void 0) {
return null;
}
if (typeof id === "number" && Number.isFinite(id)) {
return id;
}
if (typeof id === "string" && /^[0-9]+$/.test(id.trim())) {
return Number(id);
}
return null;
}
const EmailTemplatesList = ({
automationModuleActive,
settingsBridge
}) => {
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [categoryFilter, setCategoryFilter] = reactExports.useState("all");
const [recipientFilter, setRecipientFilter] = reactExports.useState("all");
const [eventFilter, setEventFilter] = reactExports.useState("all");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [currentPage, setCurrentPage] = reactExports.useState(1);
const itemsPerPage = 20;
const [previewOpen, setPreviewOpen] = reactExports.useState(false);
const [previewPayload, setPreviewPayload] = reactExports.useState(null);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
const saved = localStorage.getItem("yatra-email-templates-columns");
const parsed = saved ? JSON.parse(saved) : {};
return { ...EMAIL_TEMPLATE_VISIBLE_COLUMNS_DEFAULT, ...parsed };
});
const toggleColumn = (columnKey) => {
const newVisibleColumns = {
...visibleColumns,
[columnKey]: !visibleColumns[columnKey]
};
setVisibleColumns(newVisibleColumns);
localStorage.setItem(
"yatra-email-templates-columns",
JSON.stringify(newVisibleColumns)
);
};
const { data: templatesData, isLoading: apiLoading } = useQuery({
queryKey: ["email-templates"],
queryFn: () => fetchEmailTemplates(),
enabled: automationModuleActive
});
const apiTemplates = reactExports.useMemo(() => {
const raw = Array.isArray(templatesData) ? templatesData : [];
return raw.map((t) => ({
...t,
is_locked: false
}));
}, [templatesData]);
const localTemplates = reactExports.useMemo(() => {
if (automationModuleActive || !settingsBridge) return [];
return buildLocalTemplateRows(settingsBridge.values, {
isProPluginActive: isProPluginActive(),
isModuleActive
});
}, [automationModuleActive, settingsBridge]);
const templates = automationModuleActive ? apiTemplates : localTemplates;
const isLoading = automationModuleActive ? apiLoading : false;
const toggleMutation = useMutation({
mutationFn: async ({
id,
is_active
}) => {
return await setEmailTemplateActive(id, is_active);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["email-templates"] });
showToast(__("Template updated"), "success");
}
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await deleteEmailTemplate(id);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["email-templates"] });
showToast(__("Template deleted"), "success");
},
onError: (error) => {
showToast((error == null ? void 0 : error.message) || __("Failed to delete template"), "error");
}
});
const duplicateMutation = useMutation({
mutationFn: async (id) => {
return await duplicateEmailTemplate(id);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["email-templates"] });
showToast(__("Template duplicated successfully"), "success");
},
onError: (error) => {
showToast((error == null ? void 0 : error.message) || __("Failed to duplicate template"), "error");
}
});
const proPreviewMutation = useMutation({
mutationFn: (templateId) => previewEmailTemplate(templateId),
onSuccess: (data) => {
setPreviewPayload(data);
setPreviewOpen(true);
},
onError: () => {
showToast(__("Failed to load preview", "yatra"), "error");
}
});
const corePreviewMutation = useMutation({
mutationFn: (t) => previewCoreEmailTemplate({
template_key: t.template_key,
subject: t.subject || "",
body: t.body || ""
}),
onSuccess: (data) => {
setPreviewPayload(data);
setPreviewOpen(true);
},
onError: () => {
showToast(__("Failed to load preview", "yatra"), "error");
}
});
const bulkDeleteMutation = useMutation({
mutationFn: async (ids) => {
const customTemplateIds = ids.map((id) => toNumericTemplateId(id)).filter((id) => id !== null).filter((id) => {
const template = templates.find(
(t) => toNumericTemplateId(t.id) === id
);
return template && !template.is_system && isApiTemplate(template);
});
if (customTemplateIds.length === 0) {
throw new Error(
__(
"No custom templates selected. System templates cannot be deleted."
)
);
}
await Promise.all(customTemplateIds.map((id) => deleteEmailTemplate(id)));
return {
deleted: customTemplateIds.length,
skipped: ids.length - customTemplateIds.length
};
},
onSuccess: (data) => {
queryClient2.invalidateQueries({ queryKey: ["email-templates"] });
setSelectedIds([]);
setBulkAction("");
if (data.skipped > 0) {
showToast(
__(
`Deleted ${data.deleted} template(s). ${data.skipped} system template(s) were skipped.`
),
"success"
);
} else {
showToast(__(`Deleted ${data.deleted} template(s)`), "success");
}
},
onError: (error) => {
showToast((error == null ? void 0 : error.message) || __("Failed to delete templates"), "error");
}
});
const categories = reactExports.useMemo(
() => [...new Set(templates.map((t) => t.category))],
[templates]
);
const events = reactExports.useMemo(() => {
var _a;
if (automationModuleActive) {
return ((_a = window.yatraAdmin) == null ? void 0 : _a.emailEvents) || [];
}
return [...new Set(EMAIL_TEMPLATES_CATALOG.map((e) => e.event_key))].map(
(key2) => ({ key: key2, name: key2 })
);
}, [automationModuleActive]);
const filteredTemplates = reactExports.useMemo(() => {
return templates.filter((t) => {
const q = searchTerm.toLowerCase();
const bodyPlain = plainTextEmailPreview(t.body || "", 500).toLowerCase();
const matchesSearch = !searchTerm || t.name.toLowerCase().includes(q) || (t.description || "").toLowerCase().includes(q) || (t.subject || "").toLowerCase().includes(q) || bodyPlain.includes(q);
const matchesCategory = categoryFilter === "all" || t.category === categoryFilter;
const matchesRecipient = recipientFilter === "all" || getEffectiveRecipientType(t) === recipientFilter;
const matchesEvent = eventFilter === "all" || t.event_key === eventFilter;
const matchesStatus = statusFilter === "all" || statusFilter === "active" && t.is_active || statusFilter === "inactive" && !t.is_active;
return matchesSearch && matchesCategory && matchesRecipient && matchesEvent && matchesStatus;
});
}, [
templates,
searchTerm,
categoryFilter,
recipientFilter,
eventFilter,
statusFilter
]);
const totalFilteredItems = filteredTemplates.length;
const totalPages = Math.ceil(totalFilteredItems / itemsPerPage);
const paginatedTemplates = reactExports.useMemo(() => {
const startIndex = (currentPage - 1) * itemsPerPage;
return filteredTemplates.slice(startIndex, startIndex + itemsPerPage);
}, [filteredTemplates, currentPage, itemsPerPage]);
reactExports.useMemo(() => {
setCurrentPage(1);
}, [searchTerm, categoryFilter, recipientFilter, eventFilter, statusFilter]);
const handleLockedNavigate = reactExports.useCallback(() => {
if (isProPluginActive()) {
window.location.href = "admin.php?page=yatra&subpage=modules";
} else {
window.open(
"https://wpyatra.com/pricing?module=email-automation",
"_blank"
);
}
}, []);
const handleEdit = (template) => {
if (!template.is_locked) {
const proId = toNumericTemplateId(template.id);
if (automationModuleActive && proId !== null) {
window.location.href = `admin.php?page=yatra&subpage=email-automation&tab=templates&action=edit&id=${proId}`;
return;
}
window.location.href = `admin.php?page=yatra&subpage=email-automation&tab=templates&action=edit&core_template=${encodeURIComponent(template.template_key)}`;
return;
}
if (isModuleGatedLocked(template)) {
window.location.href = `admin.php?page=yatra&subpage=email-automation&tab=templates&action=edit&core_template=${encodeURIComponent(template.template_key)}`;
return;
}
handleLockedNavigate();
};
const handlePreview = (template) => {
if (template.is_locked && !isModuleGatedLocked(template)) {
return;
}
const numericId = toNumericTemplateId(template.id);
if (automationModuleActive && numericId !== null) {
proPreviewMutation.mutate(numericId);
} else {
corePreviewMutation.mutate(template);
}
};
const [deleteDialog, setDeleteDialog] = reactExports.useState({ isOpen: false, template: null });
const handleDelete = reactExports.useCallback((template) => {
setDeleteDialog({ isOpen: true, template });
}, []);
const confirmDelete = reactExports.useCallback(() => {
const t = deleteDialog.template;
if (!t) {
setDeleteDialog({ isOpen: false, template: null });
return;
}
const id = toNumericTemplateId(t.id);
if (id !== null) {
deleteMutation.mutate(id);
}
setDeleteDialog({ isOpen: false, template: null });
}, [deleteDialog.template, deleteMutation]);
const cancelDelete = reactExports.useCallback(() => {
setDeleteDialog({ isOpen: false, template: null });
}, []);
const handleDuplicate = (template) => {
const id = toNumericTemplateId(template.id);
if (id !== null) {
duplicateMutation.mutate(id);
}
};
const handleCreate = () => {
window.location.href = "admin.php?page=yatra&subpage=email-automation&tab=template&action=create";
};
const handleBulkAction = () => {
if (!bulkAction || selectedIds.length === 0) {
showToast(__("Please select templates and an action"), "error");
return;
}
if (bulkAction === "delete") {
bulkDeleteMutation.mutate(selectedIds);
}
};
const handleSelectAll = (checked) => {
if (checked) {
setSelectedIds(filteredTemplates.map((t) => t.id));
} else {
setSelectedIds([]);
}
};
const handleSelectOne = (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(selectedIds.filter((i) => i !== id));
}
};
const formatEventKey = (eventKey) => eventKey || "-";
const emitSettingsCheckbox = (flagKey, checked) => {
if (!settingsBridge) return;
settingsBridge.onFieldChange({
target: {
name: flagKey,
type: "checkbox",
checked
}
});
};
const columns = [
{
key: "name",
label: __("Template"),
visible: visibleColumns.name,
render: (template) => {
const CategoryIcon = categoryIcons[template.category] || Mail;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CategoryIcon, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
template.is_locked ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => handleEdit(template),
className: "text-left font-medium text-gray-600 dark:text-gray-300 hover:text-amber-700 dark:hover:text-amber-400",
children: [
template.name,
/* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "inline-block w-3.5 h-3.5 ml-1.5 -mt-0.5 opacity-70" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200", children: isModuleGatedLocked(template) ? __("View only", "yatra") : __("Pro", "yatra") })
]
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => handleEdit(template),
className: "font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline text-left",
children: template.name
}
),
template.is_system ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400", children: __("System") }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400", children: __("Custom") })
] })
] });
}
},
{
key: "event",
label: __("Event"),
visible: visibleColumns.event,
render: (template) => {
const eventInfo = events.find((e) => e.key === template.event_key);
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"span",
{
className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400 cursor-help",
title: (eventInfo == null ? void 0 : eventInfo.description) || "",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-3 h-3" }),
formatEventKey(template.event_key)
]
}
);
}
},
{
key: "subject",
label: __("Subject"),
visible: visibleColumns.subject,
render: (template) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "text-sm text-gray-800 dark:text-gray-200 font-mono line-clamp-2 max-w-xs",
title: template.subject || "",
children: (template.subject || "").trim() || "—"
}
)
},
{
key: "body_preview",
label: __("Body"),
visible: visibleColumns.body_preview,
render: (template) => {
const preview = plainTextEmailPreview(template.body || "");
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "text-sm text-gray-600 dark:text-gray-400 line-clamp-2 max-w-md",
title: preview,
children: preview || "—"
}
);
}
},
{
key: "description",
label: __("Description"),
visible: visibleColumns.description,
render: (template) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400 line-clamp-1", children: template.description || "-" })
},
{
key: "category",
label: __("Category"),
visible: visibleColumns.category,
render: (template) => {
const CategoryIcon = categoryIcons[template.category] || Mail;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CategoryIcon, { className: "w-3 h-3" }),
template.category.charAt(0).toUpperCase() + template.category.slice(1)
] });
}
},
{
key: "recipient_type",
label: __("Recipient"),
visible: visibleColumns.recipient_type,
render: (template) => {
const effectiveRecipient = getEffectiveRecipientType(template);
const toEmail = template.to_email || "";
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-1 rounded-full text-xs font-medium w-fit ${effectiveRecipient === "admin" ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
children: effectiveRecipient === "admin" ? __("Admin") : __("Customer")
}
),
toEmail && /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: "text-xs text-gray-500 dark:text-gray-400 truncate max-w-[150px]",
title: toEmail,
children: toEmail
}
)
] });
}
},
{
key: "is_active",
label: __("Status"),
visible: visibleColumns.is_active,
render: (template) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: template.is_active,
disabled: template.is_locked && !isModuleGatedLocked(template) || toggleMutation.isPending,
onCheckedChange: (checked) => {
if (template.is_locked && !isModuleGatedLocked(template)) return;
const proId = toNumericTemplateId(template.id);
if (automationModuleActive && proId !== null) {
toggleMutation.mutate({ id: proId, is_active: checked });
return;
}
const entry = EMAIL_TEMPLATES_CATALOG.find(
(e) => e.template_key === template.template_key
);
if (entry == null ? void 0 : entry.settingsFlag) {
emitSettingsCheckbox(entry.settingsFlag, checked);
}
}
}
)
}
];
const actions = [
{
key: "preview",
label: __("Preview", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
onClick: handlePreview,
condition: (template) => !template.is_locked || isModuleGatedLocked(template)
},
{
key: "edit",
label: __("Edit"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: handleEdit
},
{
key: "duplicate",
label: __("Duplicate"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-4 h-4" }),
onClick: handleDuplicate,
condition: (template) => automationModuleActive && isApiTemplate(template) && !template.is_system
},
{
key: "delete",
label: __("Delete"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: handleDelete,
condition: (template) => automationModuleActive && isApiTemplate(template) && !template.is_system,
variant: "destructive"
}
];
const columnOptions = [
{ key: "name", label: __("Template"), visible: visibleColumns.name },
{ key: "event", label: __("Event"), visible: visibleColumns.event },
{ key: "subject", label: __("Subject"), visible: visibleColumns.subject },
{
key: "body_preview",
label: __("Body"),
visible: visibleColumns.body_preview
},
{
key: "description",
label: __("Description"),
visible: visibleColumns.description
},
{
key: "category",
label: __("Category"),
visible: visibleColumns.category
},
{
key: "recipient_type",
label: __("Recipient"),
visible: visibleColumns.recipient_type
},
{
key: "is_active",
label: __("Status"),
visible: visibleColumns.is_active
}
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
!automationModuleActive && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: __(
"Templates backed by site settings can be edited here. Rows for Yatra Pro Email Automation or optional modules stay visible with their on/off state; open a View only row to inspect content, or enable Pro or the module to edit HTML and unlock automation.",
"yatra"
) }),
automationModuleActive && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreate,
className: "bg-blue-600 hover:bg-blue-700 text-white",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
__("Create Template")
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: searchTerm,
onChange: (e) => setSearchTerm(e.target.value),
placeholder: __("Search templates..."),
className: "pl-10 w-full"
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: categoryFilter,
onChange: (e) => setCategoryFilter(e.target.value),
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Categories") }),
categories.map((cat) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: cat, children: cat.charAt(0).toUpperCase() + cat.slice(1) }, cat))
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: recipientFilter,
onChange: (e) => setRecipientFilter(e.target.value),
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Recipients") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "customer", children: __("Customer") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "admin", children: __("Admin") })
]
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: eventFilter,
onChange: (e) => setEventFilter(e.target.value),
className: "w-full",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: __("All Events") }),
events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: event.key, children: event.name }, event.key))
]
}
) })
] }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkAction,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter,
statusOptions: [
{ key: "all", label: __("All"), count: templates.length },
{
key: "active",
label: __("Active"),
count: templates.filter((t) => t.is_active).length
},
{
key: "inactive",
label: __("Inactive"),
count: templates.filter((t) => !t.is_active).length
}
],
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions,
onToggleColumn: toggleColumn,
bulkMutationPending: bulkDeleteMutation.isPending,
totalItems: filteredTemplates.length,
bulkActionOptions: automationModuleActive ? [{ value: "delete", label: __("Delete") }] : []
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: paginatedTemplates,
columns,
actions,
isLoading,
emptyText: __("No templates found"),
emptyDescription: __(
"Create your first email template to get started."
),
onCreateClick: automationModuleActive ? handleCreate : void 0,
getItemId: (template) => template.id,
capability: "yatra_manage_emails",
skeletonRows: 5,
selectedItemIds: selectedIds,
onSelectItem: handleSelectOne,
onSelectAll: handleSelectAll,
isAllSelected: selectedIds.length > 0 && selectedIds.length === paginatedTemplates.length && paginatedTemplates.length > 0
}
) }) }),
totalFilteredItems > itemsPerPage && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage,
totalPages,
totalItems: totalFilteredItems,
itemsPerPage,
onPageChange: setCurrentPage,
itemName: __("templates")
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
EmailPreviewModal,
{
open: previewOpen && Boolean(previewPayload),
onClose: () => {
setPreviewOpen(false);
setPreviewPayload(null);
},
subject: (previewPayload == null ? void 0 : previewPayload.subject) ?? "",
body: (previewPayload == null ? void 0 : previewPayload.body) ?? ""
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: deleteDialog.isOpen,
onClose: cancelDelete,
onConfirm: confirmDelete,
title: __("Delete Template"),
message: deleteDialog.template ? __(
'Are you sure you want to delete "{name}"? This action cannot be undone.'
).replace("{name}", deleteDialog.template.name) : "",
confirmText: __("Delete"),
cancelText: __("Cancel"),
variant: "danger",
isLoading: deleteMutation.isPending
}
)
] });
};
const EmailSequencesList = () => {
var _a;
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const { data: sequencesData, isLoading } = useQuery({
queryKey: ["email-sequences"],
queryFn: () => fetchEmailSequences(),
enabled: isEmailAutomationModuleEnabled()
});
const deleteMutation = useMutation({
mutationFn: async (id) => {
return await deleteEmailSequence(id);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["email-sequences"] });
showToast(__("Sequence deleted"), "success");
}
});
const toggleStatusMutation = useMutation({
mutationFn: async ({ id, status }) => {
return await updateEmailSequenceStatus(id, status);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["email-sequences"] });
showToast(__("Sequence status updated"), "success");
}
});
const sequences = Array.isArray(sequencesData) ? sequencesData : [];
const navigateToCreate = () => {
window.location.href = "admin.php?page=yatra&subpage=email-automation&tab=sequence&action=create";
};
const navigateToEdit = (id) => {
window.location.href = `admin.php?page=yatra&subpage=email-automation&tab=sequence&action=edit&id=${id}`;
};
if (isLoading) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6 animate-pulse", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-36 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-64 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-36 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-48 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 w-16 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-72 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-32 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 w-16 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }) }) }, i)) })
] });
}
const getStatusBadge = (status) => {
switch (status) {
case "active":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400", children: __("Active") });
case "paused":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400", children: __("Paused") });
default:
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400", children: __("Draft") });
}
};
const emailEvents = ((_a = window.yatraAdmin) == null ? void 0 : _a.emailEvents) || [];
const getTriggerLabel = (triggerType) => {
const ev = emailEvents.find((e) => e.key === triggerType);
return (ev == null ? void 0 : ev.name) || triggerType;
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: __("Email Sequences") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Create automated email workflows triggered by events") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: navigateToCreate,
className: "bg-blue-600 hover:bg-blue-700 text-white",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
__("Create Sequence")
]
}
)
] }),
sequences.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-8 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: __("No Sequences Yet") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400 mb-4", children: __(
"Create your first automated email sequence to engage customers at the right time."
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: navigateToCreate,
className: "bg-blue-600 hover:bg-blue-700 text-white",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
__("Create Your First Sequence")
]
}
)
] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: sequences.map((sequence) => /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-900 dark:text-white", children: sequence.name }),
getStatusBadge(sequence.status)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: sequence.description || __("No description") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-3 h-3" }),
getTriggerLabel(sequence.trigger_type)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "w-3 h-3" }),
sequence.steps_count || 0,
" ",
__("steps")
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
sequence.status === "active" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => toggleStatusMutation.mutate({
id: sequence.id,
status: "paused"
}),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pause, { className: "w-4 h-4 text-yellow-500" })
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => toggleStatusMutation.mutate({
id: sequence.id,
status: "active"
}),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Play, { className: "w-4 h-4 text-green-500" })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
size: "sm",
onClick: () => navigateToEdit(sequence.id),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4 mr-1" }),
__("Edit")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: () => {
if (confirm(
__(
"Are you sure you want to delete this sequence?"
)
)) {
deleteMutation.mutate(sequence.id);
}
},
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 text-red-500" })
}
)
] })
] }) }) }, sequence.id)) })
] });
};
const EmailLogsList = () => {
const [page, setPage] = reactExports.useState(1);
const perPage = 20;
const [viewingLog, setViewingLog] = reactExports.useState(null);
const { data: logsData, isLoading } = useQuery({
queryKey: ["email-logs", page, perPage],
queryFn: () => fetchEmailLogs({ page, per_page: perPage }),
enabled: isEmailAutomationModuleEnabled()
});
const logs = (logsData == null ? void 0 : logsData.items) ?? [];
const totalItems = (logsData == null ? void 0 : logsData.total) ?? 0;
const totalPages = Math.max(1, Math.ceil(totalItems / perPage));
if (isLoading) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-28 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) }, i)) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-700", children: [1, 2, 3, 4, 5].map((row) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: [1, 2, 3, 4, 5].map((col) => /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) }, col)) }, row)) })
] }) }) })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "w-5 h-5 text-blue-500" }),
__("Email Logs")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-0", children: [
logs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-8 text-center text-gray-500 dark:text-gray-400", children: __("No emails sent yet") }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase", children: __("Recipient") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase", children: __("Subject") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase", children: __("Template") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase", children: __("Status") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase", children: __("Sent") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase", children: __("Actions") })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-700", children: logs.map((log2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"tr",
{
className: "hover:bg-gray-50 dark:hover:bg-gray-800/50",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("td", { className: "px-4 py-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: log2.recipient_name || "-" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: log2.recipient_email })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 dark:text-white max-w-xs truncate", children: log2.subject }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400", children: log2.template_key }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
className: log2.status === "sent" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : log2.status === "failed" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
children: log2.status
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400", children: log2.sent_at ? new Date(log2.sent_at).toLocaleString() : "—" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => setViewingLog(log2),
className: "text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 hover:underline",
children: __("View details", "yatra")
}
) })
]
},
log2.id
)) })
] }) }),
logs.length > 0 && totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-gray-200 px-4 py-3 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems,
itemsPerPage: perPage,
onPageChange: setPage,
itemName: __("entries", "yatra")
}
) })
] }),
viewingLog && /* @__PURE__ */ jsxRuntimeExports.jsx(
EmailLogDetailsModal,
{
log: viewingLog,
onClose: () => setViewingLog(null)
}
)
] });
};
const EmailLogDetailsModal = ({ log: log2, onClose }) => {
const [bodyView, setBodyView] = reactExports.useState("preview");
const [copied, setCopied] = reactExports.useState(false);
const copyRawToClipboard = async () => {
if (!log2.body) return;
try {
await navigator.clipboard.writeText(log2.body);
setCopied(true);
window.setTimeout(() => setCopied(false), 1500);
} catch {
}
};
const metadata = reactExports.useMemo(() => {
if (!log2.metadata) return null;
if (typeof log2.metadata === "object")
return log2.metadata;
try {
const parsed = JSON.parse(String(log2.metadata));
return typeof parsed === "object" && parsed !== null ? parsed : null;
} catch {
return null;
}
}, [log2.metadata]);
const statusClass = log2.status === "sent" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : log2.status === "failed" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400";
return /* @__PURE__ */ jsxRuntimeExports.jsx(
Modal,
{
isOpen: true,
onClose,
title: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-5 h-5 text-blue-500" }),
__("Email details", "yatra")
] }),
size: "full",
footer: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: onClose, children: __("Close", "yatra") }) }),
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-gray-200 dark:border-gray-700 p-3 space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: statusClass, children: log2.status }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: log2.sent_at ? new Date(log2.sent_at).toLocaleString() : "—" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(DetailRow, { label: __("Recipient", "yatra"), children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: log2.recipient_name || "—" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-500 dark:text-gray-400 break-all", children: log2.recipient_email })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(DetailRow, { label: __("Subject", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-900 dark:text-white break-words", children: log2.subject || "—" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(DetailRow, { label: __("Template", "yatra"), children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded", children: log2.template_key || "—" }),
log2.template_id ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500 ml-1", children: [
"(id ",
log2.template_id,
")"
] }) : null
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(DetailRow, { label: __("Sequence", "yatra"), children: log2.sequence_id ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-900 dark:text-white", children: [
"#",
log2.sequence_id
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400", children: __("Transactional (no sequence)", "yatra") }) }),
(log2.context_type || log2.context_id) && /* @__PURE__ */ jsxRuntimeExports.jsx(DetailRow, { label: __("Context", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-900 dark:text-white", children: [
log2.context_type || "—",
log2.context_id ? ` #${log2.context_id}` : ""
] }) })
] })
] }),
log2.status === "failed" && log2.error_message && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { variant: "error", title: __("Send failed", "yatra"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs whitespace-pre-wrap break-words font-mono", children: log2.error_message }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-1.5", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm font-medium", children: __("Message body", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
role: "tablist",
"aria-label": __("Body view", "yatra"),
className: "inline-flex rounded-md border border-gray-200 dark:border-gray-700 overflow-hidden text-xs",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
role: "tab",
"aria-selected": bodyView === "preview",
onClick: () => setBodyView("preview"),
className: `px-3 py-1 font-medium transition-colors ${bodyView === "preview" ? "bg-blue-600 text-white" : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"}`,
children: __("Preview", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
role: "tab",
"aria-selected": bodyView === "raw",
onClick: () => setBodyView("raw"),
className: `px-3 py-1 font-medium border-l border-gray-200 dark:border-gray-700 transition-colors ${bodyView === "raw" ? "bg-blue-600 text-white" : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"}`,
children: __("Raw HTML", "yatra")
}
)
]
}
),
bodyView === "raw" && log2.body && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: copyRawToClipboard,
className: "text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 hover:underline",
children: copied ? __("Copied!", "yatra") : __("Copy", "yatra")
}
),
bodyView === "preview" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 hidden sm:inline", children: __("Sandboxed — links not clickable", "yatra") })
] })
] }),
log2.body && log2.body.trim() !== "" ? bodyView === "preview" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"iframe",
{
title: __("Email body preview", "yatra"),
srcDoc: log2.body,
sandbox: "",
className: "w-full h-[480px] rounded-md border border-gray-200 dark:border-gray-700 bg-white"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "w-full h-[480px] text-xs bg-gray-50 dark:bg-gray-900/40 border border-gray-200 dark:border-gray-700 rounded-md p-3 overflow-auto whitespace-pre-wrap break-all font-mono text-gray-800 dark:text-gray-200", children: log2.body }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-400 italic rounded-md border border-dashed border-gray-200 dark:border-gray-700 p-4 text-center", children: __("(Body not recorded for this log entry.)", "yatra") })
] }),
metadata && Object.keys(metadata).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm font-medium block mb-1.5", children: __("Metadata", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs bg-gray-50 dark:bg-gray-900/40 border border-gray-200 dark:border-gray-700 rounded-md p-3 overflow-x-auto max-h-48 overflow-y-auto font-mono", children: JSON.stringify(metadata, null, 2) })
] })
] })
}
);
};
const DetailRow = ({
label,
children
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("dt", { className: "text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400 font-medium", children: label }),
/* @__PURE__ */ jsxRuntimeExports.jsx("dd", { className: "mt-0.5", children })
] });
function getInitialEmailHubTab() {
if (typeof window === "undefined") return "delivery";
const tab = new URLSearchParams(window.location.search).get("tab");
if (tab === "sequences" || tab === "sequence") return "sequences";
if (tab === "template" || tab === "templates") return "templates";
if (tab === "logs") return "logs";
if (tab === "delivery" || tab === "core") return "delivery";
return "delivery";
}
const EmailAutomationModulePrompt = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-6 dark:border-amber-800 dark:bg-amber-950/30", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Settings2, { className: "mt-0.5 h-6 w-6 shrink-0 text-amber-600 dark:text-amber-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-semibold text-amber-900 dark:text-amber-100", children: __("Enable the Email Automation module", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-amber-800/90 dark:text-amber-200/90", children: __(
"Yatra Pro is active. Turn on Email Automation under Modules to use custom templates, sequences, and send logs.",
"yatra"
) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
className: "shrink-0 border-amber-300 bg-white hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950 dark:hover:bg-amber-900",
onClick: () => {
window.location.href = "admin.php?page=yatra&subpage=modules";
},
children: __("Open Modules", "yatra")
}
)
] }) });
const EmailAutomation = () => {
const emailMgr = useEmailSettingsManager();
const [activeTab, setActiveTab] = reactExports.useState(() => {
const t = getInitialEmailHubTab();
if (!isProPluginActive() && (t === "sequences" || t === "logs")) {
return "delivery";
}
return t;
});
React.useEffect(() => {
if (typeof window === "undefined") return;
const url = new URL(window.location.href);
if (url.searchParams.get("tab") === activeTab) return;
url.searchParams.set("tab", activeTab);
window.history.replaceState({}, "", url.toString());
}, [activeTab]);
const switchTab = (next) => setActiveTab(next);
const showProAutomationExtras = isProPluginActive();
const automationReady = isEmailAutomationModuleEnabled();
const tabs = [
{
key: "delivery",
label: __("Delivery", "yatra"),
icon: Send
},
{
key: "templates",
label: __("Templates", "yatra"),
icon: FileText
},
...showProAutomationExtras ? [
{
key: "sequences",
label: __("Sequences", "yatra"),
icon: GitBranch
},
{
key: "logs",
label: __("Email logs", "yatra"),
icon: Mail
}
] : []
];
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
description: __(
"Delivery (addresses & SMTP), core templates for everyone, and optional Pro sequences and logs.",
"yatra"
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { className: "flex flex-wrap gap-1 px-4", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => switchTab(tab.key),
className: `flex items-center gap-2 px-4 py-3 border-b-2 font-medium text-sm transition-colors ${activeTab === tab.key ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"}`,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(tab.icon, { className: "w-4 h-4" }),
tab.label
]
},
tab.key
)) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6", children: [
activeTab === "delivery" && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !emailMgr.ready ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center py-16", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-10 w-10 animate-spin text-gray-400" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
EmailDeliverySection,
{
values: emailMgr.values,
onFieldChange: emailMgr.handleFieldChange
}
) }),
activeTab === "templates" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
automationReady && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-6 text-sm text-gray-600 dark:text-gray-400", children: __(
"Customer booking, payment, cancellation, and trip-reminder emails use the matching template when its body is filled; otherwise the free plugin defaults or settings HTML apply. Admin: New Booking sends when that template has a body (plain-text admin notices from checkout and notifications are skipped to avoid duplicates). Other booking.created templates send in addition to the customer email. Booking Confirmed uses the “Booking Confirmed” row when a booking moves to confirmed; Trip Completed uses its template instead of the generic completed email when the body is filled.",
"yatra"
) }),
!emailMgr.ready && !automationReady ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center py-16", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-10 w-10 animate-spin text-gray-400" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
EmailTemplatesList,
{
automationModuleActive: automationReady,
settingsBridge: automationReady ? void 0 : {
values: emailMgr.values,
onFieldChange: emailMgr.handleFieldChange
}
}
)
] }),
activeTab === "sequences" && (automationReady ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmailSequencesList, {}) : isProPluginActive() ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmailAutomationModulePrompt, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(EmailAutomationPremium, {})),
activeTab === "logs" && (automationReady ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmailLogsList, {}) : isProPluginActive() ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmailAutomationModulePrompt, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(EmailAutomationPremium, {}))
] }),
(activeTab === "delivery" || activeTab === "templates") && emailMgr.ready && /* @__PURE__ */ jsxRuntimeExports.jsx(CardFooter, { className: "flex justify-end border-t border-gray-100 pt-4 dark:border-gray-700/50", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
onClick: emailMgr.save,
disabled: !emailMgr.canSave,
className: "flex items-center gap-2",
children: emailMgr.isSaving ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
__("Saving…", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "h-4 w-4" }),
__("Save email settings", "yatra")
] })
}
) })
] })
] });
};
const TONE_PRESETS = [
{ id: "warm-professional", label: "Warm + professional" },
{ id: "friendly-casual", label: "Friendly + casual" },
{ id: "concise-formal", label: "Concise + formal" },
{ id: "excited-promotional", label: "Excited + promotional" }
];
const AiEmailTemplateModal = ({
open,
onClose,
templateKey,
templateName,
templateDescription,
recipientType = "customer",
mergeTags,
currentSubject,
currentBody,
onAccept
}) => {
const [tone, setTone] = reactExports.useState(TONE_PRESETS[0].id);
const [extraContext, setExtraContext] = reactExports.useState("");
const [isGenerating, setIsGenerating] = reactExports.useState(false);
const [error, setError] = reactExports.useState(null);
const [draft, setDraft] = reactExports.useState(
null
);
React.useEffect(() => {
if (open) {
setError(null);
setDraft(null);
setIsGenerating(false);
}
}, [open]);
if (!open) return null;
if (!isAiReady()) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { isOpen: open, onClose, size: "md", hideHeader: true, hideFooter: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: __("AI Assistant not configured", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-gray-600 dark:text-gray-300", children: __(
"Add an OpenAI or Anthropic key under Yatra → AI Assistant first.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "admin.php?page=yatra&subpage=ai-assistant", children: __("Open AI settings", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: onClose, children: __("Cancel", "yatra") })
] })
] }) });
}
const generate = async () => {
var _a, _b;
setIsGenerating(true);
setError(null);
try {
const result = await aiApi.generateEmailTemplate({
template_key: templateKey,
template_name: templateName,
template_description: templateDescription,
recipient_type: recipientType,
merge_tags: mergeTags,
current_subject: currentSubject,
current_body: currentBody,
tone: ((_a = TONE_PRESETS.find((t) => t.id === tone)) == null ? void 0 : _a.label) ?? tone,
extra_context: extraContext
});
setDraft({ subject: result.subject, body: result.body });
} catch (e) {
const data = ((_b = e == null ? void 0 : e.response) == null ? void 0 : _b.data) ?? (e == null ? void 0 : e.data) ?? null;
const msg = data && typeof data === "object" && typeof data.message === "string" ? data.message : (e == null ? void 0 : e.message) || __("AI generation failed.", "yatra");
setError(msg);
} finally {
setIsGenerating(false);
}
};
const accept = () => {
if (!draft) return;
onAccept({ subject: draft.subject, body: draft.body });
onClose();
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { isOpen: open, onClose, size: "xl", hideHeader: true, hideFooter: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-[90vh] min-h-[420px] min-w-[640px] max-w-[860px] flex-col", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-gradient-to-br from-blue-600 to-blue-700 p-1.5 text-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-4 w-4" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-white", children: __("Generate email with AI", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: templateName || templateKey })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: onClose,
className: "rounded text-gray-400 hover:text-gray-600",
"aria-label": __("Close", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-5 w-5" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-6 py-4 space-y-4", children: [
!draft && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-300", children: templateDescription || __(
"AI will write a fresh subject and body using only the merge tags this template supports.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-200", children: __("Tone", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: TONE_PRESETS.map((t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => setTone(t.id),
className: `rounded-md border px-2.5 py-1.5 text-xs ${tone === t.id ? "border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-900/30 dark:text-blue-200" : "border-gray-200 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"}`,
children: t.label
},
t.id
)) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-200", children: [
__("Anything else AI should know", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] font-normal text-gray-400", children: __("(optional)", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
rows: 3,
className: "w-full rounded-md border border-gray-300 bg-white p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-gray-600 dark:bg-gray-800",
placeholder: __(
"e.g. Mention our 24/7 support hotline. Keep total length under 120 words. Emphasize peace of mind.",
"yatra"
),
value: extraContext,
onChange: (e) => setExtraContext(e.target.value)
}
)
] }),
mergeTags.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/40", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400", children: __("Available merge tags", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
mergeTags.slice(0, 24).map((t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"code",
{
className: "rounded bg-white px-1.5 py-0.5 text-[10px] text-gray-700 dark:bg-gray-900 dark:text-gray-200",
children: `{{${t}}}`
},
t
)),
mergeTags.length > 24 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[10px] text-gray-500", children: [
"+",
mergeTags.length - 24,
" ",
__("more", "yatra")
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1.5 text-[11px] text-gray-500 dark:text-gray-400", children: __(
"AI will only use tags from this list; it won't invent new ones.",
"yatra"
) })
] })
] }),
error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-500/40 dark:bg-red-900/20 dark:text-red-300", children: error }),
draft && /* @__PURE__ */ jsxRuntimeExports.jsx(DraftEditor, { draft, onChange: (d) => setDraft(d) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-gray-200 px-6 py-3 dark:border-gray-700", children: [
!draft && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
variant: "outline",
onClick: onClose,
disabled: isGenerating,
children: __("Cancel", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: generate, disabled: isGenerating, children: isGenerating ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
__("Generating…", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
__("Generate", "yatra")
] }) })
] }),
draft && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setDraft(null), children: __("Discard, try again", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: accept, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "mr-2 h-4 w-4" }),
__("Use this", "yatra")
] })
] })
] })
] }) });
};
const DraftEditor = ({ draft, onChange }) => {
const [tab, setTab] = reactExports.useState("preview");
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-200", children: __("Subject", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "text",
className: "w-full rounded-md border border-gray-300 bg-white p-2 font-mono text-sm dark:border-gray-600 dark:bg-gray-800",
value: draft.subject,
onChange: (e) => onChange({ ...draft, subject: e.target.value })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-200", children: __("Body", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
role: "tablist",
className: "inline-flex overflow-hidden rounded-md border border-gray-200 dark:border-gray-700",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
role: "tab",
"aria-selected": tab === "preview",
onClick: () => setTab("preview"),
className: `px-2.5 py-1 text-[11px] font-medium ${tab === "preview" ? "bg-blue-600 text-white" : "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200"}`,
children: __("Preview", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
role: "tab",
"aria-selected": tab === "html",
onClick: () => setTab("html"),
className: `px-2.5 py-1 text-[11px] font-medium ${tab === "html" ? "bg-blue-600 text-white" : "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200"}`,
children: __("HTML", "yatra")
}
)
]
}
)
] }),
tab === "preview" ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmailPreview, { html: draft.body }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
rows: 14,
className: "w-full rounded-md border border-gray-300 bg-white p-2 font-mono text-xs dark:border-gray-600 dark:bg-gray-800",
value: draft.body,
onChange: (e) => onChange({ ...draft, body: e.target.value })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: __(
"Preview shows the rendered email; HTML tab lets you edit. Merge tags like {{customer_name}} stay as-is — they're replaced when the email actually sends.",
"yatra"
) })
] })
] });
};
const EmailPreview = ({ html }) => {
const doc = `
${html}
`;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"iframe",
{
title: "Email preview",
sandbox: "allow-same-origin",
srcDoc: doc,
className: "w-full rounded-md border border-gray-200 bg-white dark:border-gray-700",
style: { height: "420px" }
}
);
};
const EmailTemplateForm = () => {
var _a, _b, _c, _d;
const { id, isCreateMode, coreTemplateSlug, coreReadOnlyParam } = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
const templateId = params.get("id");
const action = params.get("action");
const core = params.get("core_template") || "";
return {
id: templateId,
isCreateMode: action === "create",
coreTemplateSlug: core,
coreReadOnlyParam: params.get("readonly") === "1"
};
}, []);
const isCoreSettingsEdit = isCoreTemplateSlug(coreTemplateSlug);
const coreDef = isCoreSettingsEdit ? getCoreTemplateDefinition(coreTemplateSlug) : void 0;
const catalogEntryForCore = reactExports.useMemo(
() => coreTemplateSlug ? getCatalogEntryByTemplateKey(coreTemplateSlug) : void 0,
[coreTemplateSlug]
);
const isCoreStrictViewOnly = isCoreSettingsEdit && Boolean(coreReadOnlyParam);
const isCoreModuleBodyLocked = reactExports.useMemo(() => {
if (!isCoreSettingsEdit || isCoreStrictViewOnly) {
return false;
}
const req = catalogEntryForCore == null ? void 0 : catalogEntryForCore.requiresModule;
if (!req) {
return false;
}
return !isProPluginActive() || !isModuleActive(req);
}, [isCoreSettingsEdit, isCoreStrictViewOnly, catalogEntryForCore]);
const isCoreBodyReadOnly = isCoreStrictViewOnly || isCoreModuleBodyLocked;
const isCoreViewMode = isCoreStrictViewOnly || isCoreModuleBodyLocked;
const goBack = () => {
window.location.href = `admin.php?page=yatra&subpage=email-automation&tab=templates`;
};
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
description: "",
from_name: "",
from_email: "",
to_email: "",
reply_to: "",
subject: "",
body: "",
event_key: "",
is_active: true
});
const [showPreview, setShowPreview] = reactExports.useState(false);
const [previewData, setPreviewData] = reactExports.useState(null);
const [testEmail, setTestEmail] = reactExports.useState("");
const [copiedVar, setCopiedVar] = reactExports.useState(null);
const [showEventDropdown, setShowEventDropdown] = reactExports.useState(false);
const [showAiModal, setShowAiModal] = reactExports.useState(false);
reactExports.useEffect(() => {
if (isCreateMode && !isEmailAutomationModuleEnabled()) {
window.location.href = "admin.php?page=yatra&subpage=email-automation&tab=templates";
}
}, [isCreateMode]);
reactExports.useEffect(() => {
const params = new URLSearchParams(window.location.search);
if (params.get("action") !== "edit") return;
const ct = params.get("core_template");
if (ct && !isCoreTemplateSlug(ct)) {
window.location.href = "admin.php?page=yatra&subpage=email-automation&tab=templates";
}
}, []);
const { data: settings2, isLoading: settingsLoading } = useQuery({
queryKey: ["settings"],
queryFn: () => fetchSettings(),
enabled: isCoreSettingsEdit
});
const { data: templateData, isLoading } = useQuery({
queryKey: ["email-template", id],
queryFn: () => fetchEmailTemplate(id),
enabled: Boolean(id) && !isCoreSettingsEdit
});
const { data: variablesData } = useQuery({
queryKey: ["email-variables", formData.event_key || ""],
queryFn: () => fetchEmailTemplateVariables(formData.event_key || ""),
enabled: !isCoreSettingsEdit && isEmailAutomationModuleEnabled()
});
const events = ((_a = window.yatraAdmin) == null ? void 0 : _a.emailEvents) || [];
reactExports.useEffect(() => {
if (!templateData || typeof templateData !== "object") return;
const t = templateData;
setFormData({
name: String(t.name ?? ""),
description: String(t.description ?? ""),
from_name: String(t.from_name ?? ""),
from_email: String(t.from_email ?? ""),
to_email: String(t.to_email ?? ""),
reply_to: String(t.reply_to ?? ""),
subject: String(t.subject ?? ""),
body: String(t.body ?? ""),
event_key: String(t.event_key ?? ""),
is_active: Boolean(t.is_active ?? true)
});
}, [templateData]);
reactExports.useEffect(() => {
if (!isCoreSettingsEdit || !settings2 || !coreDef) return;
const flag2 = coreDef.settingsFlag;
const subj = coreDef.settingsSubject;
const bodyKey = coreDef.settingsBody;
if (!flag2 || !subj || !bodyKey) return;
const s2 = settings2;
setFormData({
name: coreDef.name,
description: coreDef.description,
from_name: "",
from_email: "",
to_email: coreDef.to_email || "",
reply_to: "",
subject: String(s2[subj] ?? ""),
body: String(s2[bodyKey] ?? ""),
event_key: coreDef.event_key,
is_active: Boolean(s2[flag2])
});
}, [isCoreSettingsEdit, settings2, coreDef]);
const saveMutation = useMutation({
mutationFn: async (data) => {
if (isCreateMode) {
const response = await createEmailTemplate(data);
const r2 = response;
if (r2 && r2.success === false) {
throw new Error(r2.message || __("Failed to create template"));
}
return response;
}
return await updateEmailTemplate(id, data);
},
onSuccess: (response) => {
var _a2;
queryClient2.invalidateQueries({ queryKey: ["email-templates"] });
if (isCreateMode) {
showToast(__("Template created successfully"), "success");
const newId = (_a2 = response == null ? void 0 : response.data) == null ? void 0 : _a2.id;
if (newId) {
window.location.href = `admin.php?page=yatra&subpage=email-automation&tab=template&action=edit&id=${newId}`;
} else {
window.location.href = "admin.php?page=yatra&subpage=email-automation&tab=templates";
}
} else {
queryClient2.invalidateQueries({ queryKey: ["email-template", id] });
showToast(__("Template saved successfully"), "success");
}
},
onError: (error) => {
const message2 = (error == null ? void 0 : error.message) || (isCreateMode ? __("Failed to create template") : __("Failed to save template"));
showToast(message2, "error");
}
});
const saveCoreMutation = useMutation({
mutationFn: async () => {
if (isCoreStrictViewOnly) {
throw new Error(__("This template is view-only.", "yatra"));
}
if (!(coreDef == null ? void 0 : coreDef.settingsFlag) || !coreDef.settingsSubject || !coreDef.settingsBody) {
throw new Error(__("Invalid template", "yatra"));
}
if (!settings2) {
throw new Error(__("Settings not loaded", "yatra"));
}
const base = { ...settings2 };
if (isCoreModuleBodyLocked) {
base[coreDef.settingsFlag] = formData.is_active;
await saveSettings(base);
return base;
}
base[coreDef.settingsSubject] = formData.subject;
base[coreDef.settingsBody] = formData.body;
base[coreDef.settingsFlag] = formData.is_active;
await saveSettings(base);
return base;
},
onSuccess: (saved) => {
queryClient2.setQueryData(["settings"], saved);
showToast(__("Template saved", "yatra"), "success");
},
onError: (error) => {
const message2 = error instanceof Error ? error.message : __("Failed to save", "yatra");
showToast(message2, "error");
}
});
const previewMutation = useMutation({
mutationFn: async () => {
return previewEmailTemplate(id);
},
onSuccess: (data) => {
setPreviewData(data);
setShowPreview(true);
},
onError: () => {
showToast(__("Failed to load preview"), "error");
}
});
const corePreviewMutation = useMutation({
mutationFn: async () => {
if (!coreTemplateSlug) {
throw new Error(__("Invalid template", "yatra"));
}
return previewCoreEmailTemplate({
template_key: coreTemplateSlug,
subject: formData.subject,
body: formData.body
});
},
onSuccess: (data) => {
setPreviewData(data);
setShowPreview(true);
},
onError: (error) => {
const message2 = error instanceof Error ? error.message : __("Preview failed", "yatra");
showToast(message2, "error");
}
});
const testMutation = useMutation({
mutationFn: async (email) => {
return sendEmailTemplateTest(id, email);
},
onSuccess: () => {
showToast(__("Test email sent successfully"), "success");
setTestEmail("");
},
onError: () => {
showToast(__("Failed to send test email"), "error");
}
});
const handleSubmit = (e) => {
if (e) e.preventDefault();
if (isCoreSettingsEdit) {
if (isCoreStrictViewOnly) {
return;
}
saveCoreMutation.mutate();
return;
}
if (!formData.name.trim()) {
showToast(__("Template name is required"), "error");
return;
}
if (!formData.subject.trim()) {
showToast(__("Subject line is required"), "error");
return;
}
saveMutation.mutate(formData);
};
const copyVariable = (variable) => {
navigator.clipboard.writeText(`{{${variable}}}`);
setCopiedVar(variable);
setTimeout(() => setCopiedVar(null), 2e3);
};
const insertVariable = (variable) => {
if (isCoreBodyReadOnly) {
return;
}
const textarea = document.getElementById(
"email-body"
);
if (textarea) {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const text = formData.body;
const newText = text.substring(0, start) + `{{${variable}}}` + text.substring(end);
setFormData({ ...formData, body: newText });
}
};
const showEditSkeleton = !isCreateMode && (isCoreSettingsEdit ? settingsLoading : isLoading);
if (showEditSkeleton) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between animate-pulse", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-20 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 w-56 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-40 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-24 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-36 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-28 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-64 w-full bg-gray-200 dark:bg-gray-700 rounded" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-32 bg-gray-200 dark:bg-gray-700 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 flex-1 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded" })
] }) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-36 bg-gray-200 dark:bg-gray-700 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-full bg-gray-200 dark:bg-gray-700 rounded" }),
[1, 2, 3].map((group) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" }),
[1, 2, 3].map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "h-12 w-full bg-gray-200 dark:bg-gray-700 rounded"
},
item
))
] }, group))
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-28 bg-gray-200 dark:bg-gray-700 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-16 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" })
] }, i)) })
] })
] })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", onClick: () => goBack(), children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4 mr-2" }),
__("Back")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-6 h-6 text-blue-500" }),
isCreateMode ? __("Create Email Template") : isCoreViewMode ? __("View email template", "yatra") : __("Edit Email Template")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400 mt-1", children: isCreateMode ? __("Create a new custom email template") : isCoreSettingsEdit ? isCoreViewMode ? __(
"This template uses site settings. Enable Yatra Pro and the required module to edit subject and HTML body.",
"yatra"
) : __(
"Core customer email (saved with site settings). From address is set under Email → Delivery.",
"yatra"
) : String((templateData == null ? void 0 : templateData.name) ?? "") })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
!isCreateMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: () => isCoreSettingsEdit ? corePreviewMutation.mutate() : previewMutation.mutate(),
disabled: previewMutation.isPending || corePreviewMutation.isPending,
children: [
previewMutation.isPending || corePreviewMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4 mr-2" }),
__("Preview")
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleSubmit,
disabled: saveMutation.isPending || saveCoreMutation.isPending || isCoreStrictViewOnly,
className: "bg-blue-600 hover:bg-blue-700 text-white",
children: [
saveMutation.isPending || saveCoreMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4 mr-2" }),
isCreateMode ? __("Create Template") : __("Save Template")
]
}
)
] })
] }),
isCoreBodyReadOnly && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-5 h-5 flex-shrink-0 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: isCoreStrictViewOnly ? __(
"This link is view-only. Subject, body, and status cannot be changed from this screen.",
"yatra"
) : __(
"Subject and HTML body are read-only until the required module is active. You can still turn this email on or off below; values reflect your site settings.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: __("Template Details") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `text-sm ${formData.is_active ? "text-green-600 dark:text-green-400" : "text-gray-500"}`,
children: formData.is_active ? __("Active") : __("Inactive")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: formData.is_active,
disabled: isCoreStrictViewOnly,
onCheckedChange: (checked) => setFormData({ ...formData, is_active: checked })
}
)
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Template Name") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: formData.name,
onChange: (e) => setFormData({ ...formData, name: e.target.value }),
placeholder: __("Enter template name"),
readOnly: isCoreSettingsEdit,
className: isCoreSettingsEdit ? "bg-gray-50 dark:bg-gray-900/40" : ""
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Description") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: formData.description,
onChange: (e) => setFormData({ ...formData, description: e.target.value }),
placeholder: __(
"Brief description of when this email is sent"
),
readOnly: isCoreSettingsEdit,
className: isCoreSettingsEdit ? "bg-gray-50 dark:bg-gray-900/40" : ""
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Trigger Event") }),
Boolean(templateData == null ? void 0 : templateData.is_system) || isCoreSettingsEdit ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-4 h-4" }),
formData.event_key || "-"
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: __("System templates cannot change events") })
] }),
formData.event_key && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-indigo-800 dark:text-indigo-300", children: ((_b = events.find((e) => e.key === formData.event_key)) == null ? void 0 : _b.description) || "" }) })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => setShowEventDropdown(!showEventDropdown),
className: "w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-left flex items-center justify-between hover:border-gray-400 dark:hover:border-gray-500 transition-colors",
children: [
formData.event_key ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-4 h-4 text-blue-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: ((_c = events.find(
(e) => e.key === formData.event_key
)) == null ? void 0 : _c.name) || formData.event_key })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("No Event (Sequence Only)") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ChevronDown,
{
className: `w-4 h-4 text-gray-400 transition-transform ${showEventDropdown ? "rotate-180" : ""}`
}
)
]
}
),
showEventDropdown && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-80 overflow-y-auto", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 px-2", children: __(
"Select an event to trigger this email, or leave empty for sequence use"
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
setFormData({ ...formData, event_key: "" });
setShowEventDropdown(false);
},
className: `w-full px-3 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-b border-gray-100 dark:border-gray-700 ${!formData.event_key ? "bg-indigo-50 dark:bg-indigo-900/20" : ""}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Mail,
{
className: `w-4 h-4 mt-0.5 flex-shrink-0 ${!formData.event_key ? "text-blue-500" : "text-gray-400"}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `text-sm font-medium ${!formData.event_key ? "text-blue-800 dark:text-blue-400" : "text-gray-900 dark:text-white"}`,
children: __("No Event (Sequence Only)")
}
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: __(
"This template will only be used in email sequences"
) })
] }),
!formData.event_key && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-4 h-4 text-blue-500 flex-shrink-0" })
] })
}
),
events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
setFormData({
...formData,
event_key: event.key
});
setShowEventDropdown(false);
},
className: `w-full px-3 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-b border-gray-100 dark:border-gray-700 last:border-b-0 ${formData.event_key === event.key ? "bg-indigo-50 dark:bg-indigo-900/20" : ""}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Zap,
{
className: `w-4 h-4 mt-0.5 flex-shrink-0 ${formData.event_key === event.key ? "text-blue-500" : "text-gray-400"}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `text-sm font-medium ${formData.event_key === event.key ? "text-blue-800 dark:text-blue-400" : "text-gray-900 dark:text-white"}`,
children: event.name
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded", children: event.key })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2", children: event.description })
] }),
formData.event_key === event.key && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-4 h-4 text-blue-500 flex-shrink-0" })
] })
},
event.key
))
] })
] }),
showEventDropdown && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed inset-0 z-40",
onClick: () => setShowEventDropdown(false)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"This email will be triggered when the selected event occurs"
) })
] }),
!isCoreSettingsEdit && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("From Name") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: formData.from_name,
onChange: (e) => setFormData({
...formData,
from_name: e.target.value
}),
placeholder: __("e.g., Travel Agency Name")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __("Leave empty to use site default") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("From Email") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "email",
value: formData.from_email,
onChange: (e) => setFormData({
...formData,
from_email: e.target.value
}),
placeholder: __("e.g., noreply@yoursite.com")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __("Leave empty to use site default") })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("To Email") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "email",
value: formData.to_email,
onChange: (e) => setFormData({ ...formData, to_email: e.target.value }),
placeholder: __("e.g., {{customer_email}}")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Recipient email. Use variables or leave empty for default"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Reply-To Email") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "email",
value: formData.reply_to,
onChange: (e) => setFormData({ ...formData, reply_to: e.target.value }),
placeholder: __("e.g., support@yoursite.com")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __(
"Where replies will be sent. Leave empty to use From Email"
) })
] })
] })
] }),
isCoreSettingsEdit && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-600 p-3 bg-gray-50 dark:bg-gray-800/50", children: __(
"From / reply addresses are configured under Email → Delivery. Recipient uses the customer on the booking.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Subject Line") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: formData.subject,
onChange: (e) => setFormData({ ...formData, subject: e.target.value }),
placeholder: __("Email subject with {{variables}}"),
readOnly: isCoreBodyReadOnly,
className: `font-mono text-sm ${isCoreBodyReadOnly ? "bg-gray-50 dark:bg-gray-900/40" : ""}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: __("Use {{variable}} syntax to insert dynamic content") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: __("Email Body (HTML)") }),
!isCoreBodyReadOnly && isAiEligible() && isAiModuleEnabled() && /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
size: "sm",
onClick: () => setShowAiModal(true),
className: "border-blue-300 text-blue-700 hover:bg-blue-50 dark:border-blue-500/40 dark:text-blue-200 dark:hover:bg-blue-900/30",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "mr-1.5 h-3.5 w-3.5" }),
__("Generate with AI", "yatra")
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "email-body",
value: formData.body,
onChange: (e) => setFormData({ ...formData, body: e.target.value }),
rows: 20,
readOnly: isCoreBodyReadOnly,
className: `w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg font-mono text-sm ${isCoreBodyReadOnly ? "bg-gray-50 dark:bg-gray-900/40 text-gray-900 dark:text-white" : "bg-white dark:bg-gray-800 text-gray-900 dark:text-white"}`,
placeholder: __("HTML email content...")
}
)
] })
] })
] }),
!isCreateMode && !isCoreSettingsEdit && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-5 h-5 text-blue-500" }),
__("Send Test Email")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "email",
value: testEmail,
onChange: (e) => setTestEmail(e.target.value),
placeholder: __("Enter email address"),
className: "flex-1"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
onClick: () => testMutation.mutate(testEmail),
disabled: !testEmail || testMutation.isPending,
children: testMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-2", children: __(
"Send a test email with sample data to preview how it looks"
) })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Code, { className: "w-5 h-5 text-blue-500" }),
__("Available Variables")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
!isCoreSettingsEdit && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Click to copy, double-click to insert at cursor") }),
formData.event_key ? (
// Show the technical event KEY (dot-notation, monospace)
// as the primary label so it can't be confused with the
// template's display title — earlier versions showed
// the event's friendly name, which often matches what
// operators name their templates ("Customer email
// verification" appears as both the event name and a
// common template title) and made it unclear what the
// chip was scoped to. Friendly name still appears as
// the parenthesised clarifier.
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30 rounded px-2 py-1.5", children: [
__("Variables available for trigger event:", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "font-mono text-blue-800 dark:text-blue-200 bg-blue-100 dark:bg-blue-900/40 px-1 rounded", children: formData.event_key }),
(() => {
const match2 = events.find(
(e) => e.key === formData.event_key
);
return (match2 == null ? void 0 : match2.name) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600/80 dark:text-blue-400/80", children: [
" ",
"(",
match2.name,
")"
] }) : null;
})()
] })
) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 rounded px-2 py-1.5", children: __(
"Pick a trigger event below to see the variables that apply to that event. Showing the full catalog until then.",
"yatra"
) })
] }),
isCoreSettingsEdit && (coreDef == null ? void 0 : coreDef.mergeTags) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase", children: __("Merge tags", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: __(
"Click a tag to copy; paste into subject or HTML body.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-1", children: coreDef.mergeTags.split(",").map((raw) => {
const tag2 = raw.trim();
const inner = tag2.replace(/\{\{|\}\}/g, "").trim();
if (!inner) return null;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => copyVariable(inner),
className: "rounded border border-gray-200 dark:border-gray-600 px-2 py-1 text-xs font-mono text-blue-600 dark:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-800",
children: tag2
},
tag2
);
}) })
] }) : variablesData && Object.entries(variablesData).map(
([category, variables]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-2", children: category }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: variables.map((v) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => copyVariable(v.key),
onDoubleClick: () => insertVariable(v.key),
className: "w-full text-left px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs text-blue-600 dark:text-blue-400", children: `{{${v.key}}}` }),
copiedVar === v.key ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-3 h-3 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3 text-gray-400 opacity-0 group-hover:opacity-100" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: v.description })
]
},
v.key
)) })
] }, category)
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-5 h-5 text-gray-500" }),
isCreateMode ? __("New Template") : __("Template Info")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3 text-sm", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Event") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-3 h-3" }),
formData.event_key || "-"
] })
] }),
formData.event_key && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 italic", children: ((_d = events.find((e) => e.key === formData.event_key)) == null ? void 0 : _d.description) || "" })
] }),
isCreateMode ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Type") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-900 dark:text-white", children: __("Custom") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-blue-700 dark:text-blue-300", children: __(
"Custom templates can be edited and deleted. Select an event to trigger this email automatically."
) }) })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Key") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded", children: isCoreSettingsEdit ? coreDef == null ? void 0 : coreDef.template_key : String((templateData == null ? void 0 : templateData.template_key) ?? "") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Category") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400", children: isCoreSettingsEdit ? coreDef == null ? void 0 : coreDef.category : String((templateData == null ? void 0 : templateData.category) ?? "") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Recipient") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${(isCoreSettingsEdit ? coreDef == null ? void 0 : coreDef.recipient_type : String((templateData == null ? void 0 : templateData.recipient_type) ?? "")) === "admin" ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
children: (isCoreSettingsEdit ? coreDef == null ? void 0 : coreDef.recipient_type : String((templateData == null ? void 0 : templateData.recipient_type) ?? "")) === "admin" ? __("Admin") : __("Customer")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Type") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-900 dark:text-white", children: isCoreSettingsEdit || Boolean(templateData == null ? void 0 : templateData.is_system) ? __("System") : __("Custom") })
] })
] })
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
EmailPreviewModal,
{
open: showPreview && Boolean(previewData),
onClose: () => {
setShowPreview(false);
setPreviewData(null);
},
subject: (previewData == null ? void 0 : previewData.subject) ?? "",
body: (previewData == null ? void 0 : previewData.body) ?? ""
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
AiEmailTemplateModal,
{
open: showAiModal,
onClose: () => setShowAiModal(false),
templateKey: coreTemplateSlug || formData.event_key || "custom_template",
templateName: (coreDef == null ? void 0 : coreDef.name) || formData.name || formData.event_key,
templateDescription: (coreDef == null ? void 0 : coreDef.description) || formData.description,
recipientType: (catalogEntryForCore == null ? void 0 : catalogEntryForCore.recipient_type) || "customer",
mergeTags: (() => {
const raw = (catalogEntryForCore == null ? void 0 : catalogEntryForCore.mergeTags) ?? "";
if (!raw) {
return [
"site_name",
"site_url",
"customer_name",
"customer_email",
"booking_reference",
"trip_name",
"travel_date",
"total_amount",
"currency"
];
}
return raw.split(",").map(
(s2) => s2.trim().replace(/^\{\{|\}\}$/g, "").trim()
).filter(Boolean);
})(),
currentSubject: formData.subject,
currentBody: formData.body,
onAccept: ({ subject, body }) => setFormData({ ...formData, subject, body })
}
)
] });
};
const delayUnits = [
{ value: "minutes", label: __("Minutes") },
{ value: "hours", label: __("Hours") },
{ value: "days", label: __("Days") },
{ value: "weeks", label: __("Weeks") }
];
const EmailSequenceForm = () => {
var _a;
const id = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id");
}, []);
const isEditing = !!id;
const goBack = () => {
window.location.href = `admin.php?page=yatra&subpage=email-automation&tab=sequences`;
};
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
description: "",
trigger_type: "booking.created",
trigger_config: {},
status: "draft",
applicable_to: "all",
trip_ids: []
});
const [steps, setSteps] = reactExports.useState([
{
step_order: 0,
delay_value: 0,
delay_unit: "minutes",
template_id: null,
custom_subject: "",
custom_body: "",
conditions: [],
is_active: true
}
]);
const [openTemplateDropdown, setOpenTemplateDropdown] = reactExports.useState(null);
const events = ((_a = window.yatraAdmin) == null ? void 0 : _a.emailEvents) || [];
const { data: sequenceData, isLoading: isLoadingSequence } = useQuery({
queryKey: ["email-sequence", id],
queryFn: () => fetchEmailSequence(id),
enabled: isEditing
});
const { data: templatesData } = useQuery({
queryKey: ["email-templates"],
queryFn: () => fetchEmailTemplates()
});
const templates = Array.isArray(templatesData) ? templatesData : [];
const allTriggerEvents = reactExports.useMemo(() => {
return events.map((e) => ({
key: e.key,
name: e.name,
description: e.description,
category: e.category
}));
}, [events]);
const [openTriggerDropdown, setOpenTriggerDropdown] = reactExports.useState(false);
const sequenceTemplates = reactExports.useMemo(() => {
return templates.filter((t) => t.recipient_type !== "admin");
}, [templates]);
reactExports.useEffect(() => {
if (!sequenceData || typeof sequenceData !== "object") {
return;
}
const loaded = sequenceData;
setFormData({
name: loaded.name || "",
description: loaded.description || "",
trigger_type: loaded.trigger_type || "booking.created",
trigger_config: loaded.trigger_config || {},
status: loaded.status || "draft",
applicable_to: loaded.applicable_to || "all",
trip_ids: loaded.trip_ids || []
});
if (loaded.steps && loaded.steps.length > 0) {
setSteps(loaded.steps);
}
}, [sequenceData]);
const createMutation = useMutation({
mutationFn: async (data) => {
return await createEmailSequence(data);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["email-sequences"] });
showToast(__("Sequence created successfully"), "success");
goBack();
},
onError: () => {
showToast(__("Failed to create sequence"), "error");
}
});
const updateMutation = useMutation({
mutationFn: async (data) => {
return await updateEmailSequence(id, data);
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["email-sequences"] });
queryClient2.invalidateQueries({ queryKey: ["email-sequence", id] });
showToast(__("Sequence updated successfully"), "success");
},
onError: () => {
showToast(__("Failed to update sequence"), "error");
}
});
const handleSubmit = (e) => {
e.preventDefault();
const payload = {
...formData,
steps: steps.map((step, index) => ({
...step,
step_order: index
}))
};
if (isEditing) {
updateMutation.mutate(payload);
} else {
createMutation.mutate(payload);
}
};
const addStep = () => {
setSteps([
...steps,
{
step_order: steps.length,
delay_value: 1,
delay_unit: "days",
template_id: null,
custom_subject: "",
custom_body: "",
conditions: [],
is_active: true
}
]);
};
const removeStep = (index) => {
if (steps.length > 1) {
setSteps(steps.filter((_, i) => i !== index));
}
};
const updateStep = (index, field, value) => {
const newSteps = [...steps];
newSteps[index][field] = value;
setSteps(newSteps);
};
const selectedTrigger = allTriggerEvents.find(
(t) => t.key === formData.trigger_type
);
const isPending = createMutation.isPending || updateMutation.isPending;
if (isEditing && isLoadingSequence) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between animate-pulse", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-20 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-32 bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-40 bg-gray-200 dark:bg-gray-700 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-24 bg-gray-200 dark:bg-gray-700 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "h-24 bg-gray-200 dark:bg-gray-700 rounded-lg"
},
i
)) }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-32 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: [1, 2].map((i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded mb-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
] })
]
},
i
)) }) })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-36 bg-gray-200 dark:bg-gray-700 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-full bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-3/4 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-full bg-gray-200 dark:bg-gray-700 rounded" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-16 bg-gray-200 dark:bg-gray-700 rounded" })
] }, i)) })
] })
] })
] })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", onClick: goBack, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4 mr-2" }),
__("Back")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "w-6 h-6 text-blue-500" }),
isEditing ? __("Edit Sequence") : __("Create Sequence")
] }),
isEditing && formData.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400 mt-1", children: formData.name })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleSubmit,
disabled: isPending || !formData.name,
className: "bg-blue-600 hover:bg-blue-700 text-white",
children: [
isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4 mr-2" }),
isEditing ? __("Save Changes") : __("Create Sequence")
]
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: __("Sequence Details") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
value: formData.status,
onChange: (e) => setFormData({
...formData,
status: e.target.value
}),
className: "w-32",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "active", children: __("Active") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "paused", children: __("Paused") })
]
}
) })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [
__("Sequence Name"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: formData.name,
onChange: (e) => setFormData({ ...formData, name: e.target.value }),
placeholder: __("e.g., Post-Booking Welcome Series"),
required: true
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Description") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: formData.description,
onChange: (e) => setFormData({ ...formData, description: e.target.value }),
placeholder: __(
"Brief description of what this sequence does"
)
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-5 h-5 text-yellow-500" }),
__("Trigger")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: __("When should this sequence start?") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => setOpenTriggerDropdown(!openTriggerDropdown),
className: "w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-left flex items-center justify-between hover:border-gray-400 dark:hover:border-gray-500 transition-colors",
children: [
selectedTrigger ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-4 h-4 text-blue-500" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: selectedTrigger.name })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Select a trigger event...") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ChevronDown,
{
className: `w-4 h-4 text-gray-400 transition-transform ${openTriggerDropdown ? "rotate-180" : ""}`
}
)
]
}
),
openTriggerDropdown && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-80 overflow-y-auto", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 px-2", children: __("Select an event to trigger this sequence") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-1", children: allTriggerEvents.map((trigger) => {
const isSelected = formData.trigger_type === trigger.key;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
setFormData({
...formData,
trigger_type: trigger.key
});
setOpenTriggerDropdown(false);
},
className: `w-full px-3 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-b border-gray-100 dark:border-gray-700 last:border-b-0 ${isSelected ? "bg-blue-50 dark:bg-blue-900/20" : ""}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Zap,
{
className: `w-4 h-4 mt-0.5 flex-shrink-0 ${isSelected ? "text-blue-500" : "text-gray-400"}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `text-sm font-medium ${isSelected ? "text-blue-700 dark:text-blue-400" : "text-gray-900 dark:text-white"}`,
children: trigger.name
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded", children: trigger.key }),
isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-4 h-4 text-blue-500" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2", children: trigger.description })
] })
] })
},
trigger.key
);
}) })
] }),
openTriggerDropdown && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed inset-0 z-40",
onClick: () => setOpenTriggerDropdown(false)
}
)
] }),
(formData.trigger_type === "schedule.days_before_trip" || formData.trigger_type === "schedule.days_after_trip") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pt-4 border-t border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Number of Days") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: "1",
value: formData.trigger_config.days || 7,
onChange: (e) => setFormData({
...formData,
trigger_config: {
...formData.trigger_config,
days: parseInt(e.target.value)
}
}),
className: "w-32"
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "w-5 h-5 text-purple-500" }),
__("Sequence Steps")
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
size: "sm",
onClick: addStep,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-1" }),
__("Add Step")
]
}
)
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: steps.map((step, index) => {
var _a2, _b;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "border border-gray-200 dark:border-gray-700 rounded-lg",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(GripVertical, { className: "w-4 h-4 text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [
__("Step"),
" ",
index + 1
] }),
index === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400", children: __("First Email") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: step.is_active,
onCheckedChange: (checked) => updateStep(index, "is_active", checked)
}
),
steps.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "ghost",
size: "sm",
onClick: () => removeStep(index),
className: "text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" })
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: index === 0 ? __("Send after trigger") : __("Wait before sending") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
type: "number",
min: "0",
value: step.delay_value,
onChange: (e) => updateStep(
index,
"delay_value",
parseInt(e.target.value) || 0
),
className: "w-24"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Select,
{
value: step.delay_unit,
onChange: (e) => updateStep(index, "delay_unit", e.target.value),
className: "w-32",
children: delayUnits.map((unit2) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: unit2.value, children: unit2.label }, unit2.value))
}
),
index === 0 && step.delay_value === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
"(",
__("Immediately"),
")"
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: __("Email Template") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
type: "button",
onClick: () => setOpenTemplateDropdown(
openTemplateDropdown === index ? null : index
),
className: "w-full flex items-center justify-between px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-left hover:border-blue-400 dark:hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors",
children: [
step.template_id ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { className: "w-4 h-4 text-blue-500 flex-shrink-0" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-900 dark:text-white truncate", children: ((_a2 = sequenceTemplates.find(
(t) => t.id === step.template_id
)) == null ? void 0 : _a2.name) || ((_b = templates.find(
(t) => t.id === step.template_id
)) == null ? void 0 : _b.name) || __("Unknown Template") })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: __("Select a template...") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ChevronDown,
{
className: `w-4 h-4 text-gray-400 flex-shrink-0 transition-transform ${openTemplateDropdown === index ? "rotate-180" : ""}`
}
)
]
}
),
openTemplateDropdown === index && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-80 overflow-y-auto", children: sequenceTemplates.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 text-center text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium", children: __("No templates available") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs mt-1", children: __(
"Add customer email templates under Email → Templates first."
) })
] }) : sequenceTemplates.map((template) => {
const isSelected = step.template_id === template.id;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: () => {
updateStep(
index,
"template_id",
template.id
);
setOpenTemplateDropdown(null);
},
className: `w-full text-left p-3 border-b border-gray-100 dark:border-gray-700 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${isSelected ? "bg-blue-50 dark:bg-blue-900/20" : ""}`,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: template.name }),
isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-4 h-4 text-blue-500 flex-shrink-0" })
] }),
template.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2", children: template.description })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: "outline",
className: "text-xs flex-shrink-0",
children: template.category
}
)
] })
},
template.id
);
}) }),
openTemplateDropdown === index && /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed inset-0 z-40",
onClick: () => setOpenTemplateDropdown(null)
}
),
!step.template_id && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-1", children: __("Please select a template for this step") })
] })
] })
]
},
index
);
}) }),
steps.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "w-12 h-12 mx-auto mb-3 opacity-50" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: __("No steps added yet") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
size: "sm",
onClick: addStep,
className: "mt-3",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-1" }),
__("Add First Step")
]
}
)
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "w-5 h-5 text-gray-500" }),
__("How Sequences Work")
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3 text-sm text-gray-600 dark:text-gray-400", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: __(
"Email sequences are automated workflows that send emails based on triggers and timing."
) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("ol", { className: "list-decimal list-inside space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: __("Choose a trigger event (e.g., booking created)") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: __("Add steps with delays and email templates") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: __("Set the sequence to Active") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: __("Emails will be sent automatically!") })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { children: __("Status") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Current Status") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
className: formData.status === "active" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : formData.status === "paused" ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400" : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
children: formData.status === "active" ? __("Active") : formData.status === "paused" ? __("Paused") : __("Draft")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Steps") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: steps.length })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: __("Trigger") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: selectedTrigger == null ? void 0 : selectedTrigger.label })
] })
] })
] })
] })
] })
] });
};
const fieldTypeOptions = [
{ value: "text_field", label: "Text Field" },
{ value: "number", label: "Number" },
{ value: "email", label: "Email" },
{ value: "url", label: "URL" },
{ value: "textarea", label: "Textarea" },
{ value: "select", label: "Select Dropdown" },
{ value: "radio", label: "Radio Buttons" },
{ value: "checkbox", label: "Checkbox" },
{ value: "date", label: "Date" },
{ value: "time", label: "Time" },
{ value: "color", label: "Color" }
];
const Attributes = () => {
const [searchTerm, setSearchTerm] = reactExports.useState("");
const [statusFilter, setStatusFilter] = reactExports.useState("all");
const [sortBy2, setSortBy] = reactExports.useState("id");
const [sortOrder, setSortOrder] = reactExports.useState("desc");
const [page, setPage] = reactExports.useState(1);
const [selectedIds, setSelectedIds] = reactExports.useState([]);
const [bulkAction, setBulkAction] = reactExports.useState("");
const [showColumnsDropdown, setShowColumnsDropdown] = reactExports.useState(false);
const [visibleColumns, setVisibleColumns] = reactExports.useState(() => {
const saved = localStorage.getItem("yatra-attributes-columns");
return saved ? JSON.parse(saved) : {
name: true,
field_type: true,
required: true,
show_on_frontend: true,
show_in_filters: true,
searchable: true,
status: true,
created_at: false,
updated_at: false,
description: false,
display_order: false
};
});
const [permanentDeleteConfirm, setPermanentDeleteConfirm] = reactExports.useState({
isOpen: false,
attribute: null
});
const [individualActionConfirm, setIndividualActionConfirm] = reactExports.useState({
isOpen: false,
action: "",
attribute: null
});
const queryClient2 = useQueryClient();
const { can } = usePermissions();
const { showToast } = useToast();
reactExports.useEffect(() => {
const handler = (event) => {
const target2 = event.target;
if (target2.closest("[data-columns-trigger]") || target2.closest("[data-columns-content]"))
return;
setShowColumnsDropdown(false);
};
if (showColumnsDropdown) {
document.addEventListener("click", handler);
return () => document.removeEventListener("click", handler);
}
}, [showColumnsDropdown]);
const queryParams = reactExports.useMemo(() => {
const params = {
page,
per_page: 10,
orderby: sortBy2,
order: sortOrder
};
if (searchTerm) params.search = searchTerm;
if (statusFilter !== "all") params.status = statusFilter;
return params;
}, [page, sortBy2, sortOrder, searchTerm, statusFilter]);
const { data: statsData } = useQuery({
queryKey: ["attributes-stats", searchTerm, statusFilter, page],
queryFn: async () => {
try {
const response = await apiClient.get("/attributes/stats");
return response || { all: 0, publish: 0, draft: 0, trash: 0 };
} catch {
return { all: 0, publish: 0, draft: 0, trash: 0 };
}
},
enabled: can("yatra_view_trips"),
staleTime: 0,
gcTime: 0,
refetchOnMount: "always"
});
const {
data: attributesData,
isLoading,
error
} = useQuery({
queryKey: ["attributes", searchTerm, statusFilter, sortBy2, sortOrder, page],
queryFn: async () => {
const response = await apiClient.get("/attributes", {
params: queryParams
});
return response;
},
enabled: can("yatra_view_trips")
});
const attributes = (attributesData == null ? void 0 : attributesData.data) || [];
const total = (attributesData == null ? void 0 : attributesData.total) || 0;
const totalPages = Math.ceil(total / 10);
const errorContext = getErrorContext(error);
const apiErrorMessage = (attributesData == null ? void 0 : attributesData.error) || (attributesData == null ? void 0 : attributesData.message);
const isAttributesError = !!error || !!apiErrorMessage;
const statusCounts = reactExports.useMemo(() => {
if (statsData) {
return {
all: (statsData == null ? void 0 : statsData.all) ?? 0,
publish: (statsData == null ? void 0 : statsData.publish) ?? 0,
draft: (statsData == null ? void 0 : statsData.draft) ?? 0,
trash: (statsData == null ? void 0 : statsData.trash) ?? 0
};
}
return { all: 0, publish: 0, draft: 0, trash: 0 };
}, [statsData]);
const bulkMutation = useMutation({
mutationFn: async ({
action,
ids
}) => {
return await apiClient.post("/attributes/bulk", { action, ids });
},
onSuccess: () => {
queryClient2.invalidateQueries({ queryKey: ["attributes"] });
queryClient2.invalidateQueries({ queryKey: ["attributes-stats"] });
showToast(__("Bulk action completed successfully", "yatra"), "success");
setSelectedIds([]);
setBulkAction("");
},
onError: (err) => {
showToast(
(err == null ? void 0 : err.message) || __("Failed to perform bulk action", "yatra"),
"error"
);
}
});
const handleEdit = (attribute) => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=attributes&action=edit&id=${attribute.id}`;
};
const handleCreateAttribute = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=attributes&action=create`;
};
const handleBulkApply = () => {
if (!bulkAction) {
showToast(__("Select a bulk action first.", "yatra"), "warning");
return;
}
if (selectedIds.length === 0) {
showToast(__("Select at least one attribute.", "yatra"), "warning");
return;
}
bulkMutation.mutate({ action: bulkAction, ids: selectedIds });
};
const handleResetFilters = () => {
setSearchTerm("");
setStatusFilter("all");
setSortBy("id");
setSortOrder("desc");
setPage(1);
setSelectedIds([]);
setBulkAction("");
};
const handleSort = (field) => {
if (sortBy2 === field) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("asc");
}
};
reactExports.useEffect(() => {
setSelectedIds(
(prev) => prev.filter((id) => attributes.some((a2) => a2.id === id))
);
}, [attributes]);
const attributeColumns = reactExports.useMemo(() => {
const formatBoolean = (value) => value === true || value === "1" || value === 1;
return [
{
key: "name",
label: __("Attribute", "yatra"),
sortable: true,
visible: visibleColumns.name,
render: (attribute) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0", children: attribute.icon ? attribute.icon.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
"img",
{
src: attribute.icon.value,
alt: attribute.name,
className: "w-6 h-6 object-cover rounded"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx(
IconSelector,
{
iconName: attribute.icon.value,
provider: attribute.icon.provider ?? "yatra",
size: 16,
className: "text-purple-600 dark:text-purple-400"
}
) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 text-purple-600 dark:text-purple-400 flex items-center justify-center text-xs font-semibold", children: attribute.name.charAt(0).toUpperCase() }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=attributes&action=edit&id=${attribute.id}`,
className: "font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors cursor-pointer",
children: attribute.name
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: attribute.slug }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[11px] text-gray-400 dark:text-gray-500", children: [
"(",
__("ID:", "yatra"),
" ",
attribute.id,
")"
] })
] })
] })
] });
}
},
{
key: "field_type",
label: __("Field Type", "yatra"),
sortable: true,
visible: visibleColumns.field_type,
render: (attribute) => {
var _a;
return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", children: ((_a = fieldTypeOptions.find((opt) => opt.value === attribute.field_type)) == null ? void 0 : _a.label) || attribute.field_type });
}
},
{
key: "required",
label: __("Required", "yatra"),
sortable: true,
visible: visibleColumns.required,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: formatBoolean(attribute.required) ? "default" : "outline",
children: formatBoolean(attribute.required) ? "Yes" : "No"
}
)
},
{
key: "show_on_frontend",
label: __("Frontend", "yatra"),
sortable: true,
visible: visibleColumns.show_on_frontend,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: formatBoolean(attribute.show_on_frontend) ? "default" : "outline",
children: formatBoolean(attribute.show_on_frontend) ? "Yes" : "No"
}
)
},
{
key: "show_in_filters",
label: __("Filters", "yatra"),
sortable: true,
visible: visibleColumns.show_in_filters,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: formatBoolean(attribute.show_in_filters) ? "default" : "outline",
children: formatBoolean(attribute.show_in_filters) ? "Yes" : "No"
}
)
},
{
key: "searchable",
label: __("Searchable", "yatra"),
sortable: true,
visible: visibleColumns.searchable,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
Badge,
{
variant: formatBoolean(attribute.searchable) ? "default" : "outline",
children: formatBoolean(attribute.searchable) ? "Yes" : "No"
}
)
},
{
key: "status",
label: __("Status", "yatra"),
sortable: true,
visible: visibleColumns.status,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${attribute.status === "trash" || statusFilter === "trash" ? "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" : attribute.status === "publish" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"}`,
children: attribute.status === "trash" || statusFilter === "trash" ? __("Trash", "yatra") : attribute.status === "publish" ? __("Published", "yatra") : __("Draft", "yatra")
}
)
},
{
key: "created_at",
label: __("Created Date", "yatra"),
sortable: true,
visible: visibleColumns.created_at,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: attribute.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: new Date(attribute.created_at).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
})
}
)
},
{
key: "updated_at",
label: __("Updated Date", "yatra"),
sortable: true,
visible: visibleColumns.updated_at,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: attribute.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: new Date(attribute.updated_at).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit"
})
}
)
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: attribute.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: attribute.description || __("No description", "yatra")
}
)
},
{
key: "display_order",
label: __("Order", "yatra"),
sortable: true,
visible: visibleColumns.display_order,
render: (attribute) => /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: attribute.status === "trash" || statusFilter === "trash" ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400",
children: attribute.display_order
}
)
}
];
}, [visibleColumns, statusFilter]);
const hasFilters = !!(searchTerm || statusFilter !== "all" || sortBy2 !== "id" || sortOrder !== "desc");
const toggleColumn = (columnKey) => {
const next = { ...visibleColumns, [columnKey]: !visibleColumns[columnKey] };
setVisibleColumns(next);
localStorage.setItem("yatra-attributes-columns", JSON.stringify(next));
};
const viewFilters = [
{ key: "all", label: __("All", "yatra"), count: statusCounts.all ?? 0 },
{
key: "publish",
label: __("Published", "yatra"),
count: statusCounts.publish ?? 0
},
{
key: "draft",
label: __("Draft", "yatra"),
count: statusCounts.draft ?? 0
},
{
key: "trash",
label: __("Trash", "yatra"),
count: statusCounts.trash ?? 0
}
];
const handlePermanentDelete = (attribute) => {
setPermanentDeleteConfirm({ isOpen: true, attribute });
};
const confirmPermanentDelete = () => {
if (permanentDeleteConfirm.attribute) {
bulkMutation.mutate({
action: "delete",
ids: [permanentDeleteConfirm.attribute.id]
});
setPermanentDeleteConfirm({ isOpen: false, attribute: null });
}
};
const confirmIndividualAction = () => {
if (individualActionConfirm.attribute) {
const action = individualActionConfirm.action === "restore" ? "restore" : "trash";
bulkMutation.mutate({
action,
ids: [individualActionConfirm.attribute.id]
});
setIndividualActionConfirm({
isOpen: false,
action: "",
attribute: null
});
}
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: permanentDeleteConfirm.isOpen,
onClose: () => setPermanentDeleteConfirm({ isOpen: false, attribute: null }),
onConfirm: confirmPermanentDelete,
title: __("Delete Attribute Permanently", "yatra"),
message: permanentDeleteConfirm.attribute ? __(
'Are you sure you want to permanently delete "{name}"? This action cannot be undone.',
"yatra"
).replace("{name}", permanentDeleteConfirm.attribute.name) : __(
"Are you sure you want to permanently delete this attribute? This action cannot be undone.",
"yatra"
),
confirmText: __("Delete Permanently", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "danger",
isLoading: bulkMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
ConfirmationDialog,
{
isOpen: individualActionConfirm.isOpen,
onClose: () => setIndividualActionConfirm({
isOpen: false,
action: "",
attribute: null
}),
onConfirm: confirmIndividualAction,
title: individualActionConfirm.action === "trash" ? __("Move to Trash", "yatra") : __("Restore Attribute", "yatra"),
message: individualActionConfirm.attribute ? individualActionConfirm.action === "trash" ? __(
'Are you sure you want to move "{name}" to trash?',
"yatra"
).replace("{name}", individualActionConfirm.attribute.name) : __(
'Are you sure you want to restore "{name}"?',
"yatra"
).replace("{name}", individualActionConfirm.attribute.name) : individualActionConfirm.action === "trash" ? __(
"Are you sure you want to move this attribute to trash?",
"yatra"
) : __("Are you sure you want to restore this attribute?", "yatra"),
confirmText: individualActionConfirm.action === "trash" ? __("Move to Trash", "yatra") : __("Restore", "yatra"),
cancelText: __("Cancel", "yatra"),
variant: "warning",
isLoading: bulkMutation.isPending
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Attributes", "yatra"),
description: __(
"Manage your travel attributes and their properties",
"yatra"
),
actionCapability: "yatra_edit_trips",
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
onClick: handleCreateAttribute,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
__("Add New Attribute", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
SearchFilterToolbar,
{
searchTerm,
onSearchChange: setSearchTerm,
statusFilter,
onStatusChange: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: [
{ value: "all", label: __("All Status", "yatra") },
{ value: "publish", label: __("Published", "yatra") },
{ value: "draft", label: __("Draft", "yatra") },
{ value: "trash", label: __("Trash", "yatra") }
],
sortBy: sortBy2,
onSortByChange: setSortBy,
sortOrder,
onSortOrderChange: setSortOrder,
sortOptions: [
{ value: "id", label: __("ID", "yatra") },
{ value: "name", label: __("Name", "yatra") },
{ value: "field_type", label: __("Field Type", "yatra") },
{ value: "status", label: __("Status", "yatra") },
{ value: "created_at", label: __("Created At", "yatra") },
{ value: "updated_at", label: __("Updated At", "yatra") }
],
onResetFilters: handleResetFilters,
hasFilters,
placeholder: __("Search attributes...", "yatra")
}
) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_view_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
!isAttributesError && /* @__PURE__ */ jsxRuntimeExports.jsx(
BulkActionToolbar,
{
selectedIds,
bulkAction,
setBulkAction,
onApply: handleBulkApply,
onClearSelection: () => setSelectedIds([]),
statusFilter,
setStatusFilter: (value) => {
setStatusFilter(value);
setPage(1);
setSelectedIds([]);
setBulkAction("");
},
statusOptions: viewFilters,
showColumnsDropdown,
setShowColumnsDropdown,
columnOptions: [
{
key: "name",
label: __("Attribute", "yatra"),
visible: visibleColumns.name
},
{
key: "field_type",
label: __("Field Type", "yatra"),
visible: visibleColumns.field_type
},
{
key: "required",
label: __("Required", "yatra"),
visible: visibleColumns.required
},
{
key: "show_on_frontend",
label: __("Frontend", "yatra"),
visible: visibleColumns.show_on_frontend
},
{
key: "show_in_filters",
label: __("Filters", "yatra"),
visible: visibleColumns.show_in_filters
},
{
key: "searchable",
label: __("Searchable", "yatra"),
visible: visibleColumns.searchable
},
{
key: "status",
label: __("Status", "yatra"),
visible: visibleColumns.status
},
{
key: "created_at",
label: __("Created", "yatra"),
visible: visibleColumns.created_at
},
{
key: "updated_at",
label: __("Updated", "yatra"),
visible: visibleColumns.updated_at
},
{
key: "description",
label: __("Description", "yatra"),
visible: visibleColumns.description
},
{
key: "display_order",
label: __("Display Order", "yatra"),
visible: visibleColumns.display_order
}
],
onToggleColumn: toggleColumn,
bulkMutationPending: bulkMutation.isPending,
totalItems: total,
bulkActionOptions: getDefaultBulkStatusOptions(statusFilter)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 overflow-visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Table,
{
data: attributes,
columns: attributeColumns,
actions: [
{
key: "edit",
label: __("Edit", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PenSquare, { className: "w-4 h-4" }),
onClick: handleEdit,
condition: () => can("yatra_view_trips")
},
{
key: "restore",
label: __("Restore", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4" }),
onClick: (attribute) => bulkMutation.mutate({
action: "restore",
ids: [attribute.id]
}),
condition: (attribute) => (attribute.status === "trash" || statusFilter === "trash") && can("yatra_view_trips")
},
{
key: "trash",
label: __("Move to Trash", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: (attribute) => bulkMutation.mutate({
action: "trash",
ids: [attribute.id]
}),
condition: (attribute) => attribute.status !== "trash" && statusFilter !== "trash" && can("yatra_view_trips")
},
{
key: "delete",
label: __("Delete Permanently", "yatra"),
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" }),
onClick: handlePermanentDelete,
condition: (attribute) => (attribute.status === "trash" || statusFilter === "trash") && can("yatra_view_trips"),
variant: "destructive"
}
],
isLoading,
isError: isAttributesError,
errorText: __("Failed to load attributes", "yatra"),
errorDescription: __(
"We couldn’t connect to the attributes service. Please refresh or try again shortly.",
"We couldn’t connect to the attributes service. Please refresh or try again shortly."
),
errorDetails: errorContext.details || apiErrorMessage,
errorRequestInfo: errorContext.requestInfo,
onRetry: () => queryClient2.invalidateQueries({ queryKey: ["attributes"] }),
emptyText: __("No attributes found", "yatra"),
emptyDescription: hasFilters ? __(
"Try adjusting your filters to see more results.",
"yatra"
) : __(
"Get started by creating your first attribute.",
"yatra"
),
onCreateClick: can("yatra_view_trips") ? handleCreateAttribute : void 0,
onSort: handleSort,
selectedItemIds: selectedIds,
onSelectItem: (id, checked) => {
if (checked) {
setSelectedIds([...selectedIds, id]);
} else {
setSelectedIds(
selectedIds.filter((selectedId) => selectedId !== id)
);
}
},
onSelectAll: (checked) => {
if (checked) {
setSelectedIds(attributes.map((a2) => a2.id));
} else {
setSelectedIds([]);
}
},
isAllSelected: attributes.length > 0 && selectedIds.length === attributes.length,
getItemId: (attribute) => attribute.id,
getItemStatus: (attribute) => attribute.status,
statusFilter,
skeletonRows: 5,
capability: "yatra_view_trips"
}
) }) })
] }) }),
total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
Pagination,
{
currentPage: page,
totalPages,
totalItems: total,
itemsPerPage: 10,
onPageChange: (newPage) => setPage(newPage),
itemName: __("attributes", "yatra")
}
) })
] });
};
function parseFieldOptionRows(raw) {
if (Array.isArray(raw)) {
return raw.map((o) => ({
label: String((o == null ? void 0 : o.label) ?? ""),
value: String((o == null ? void 0 : o.value) ?? "")
}));
}
if (typeof raw === "string" && raw.trim()) {
try {
const p = JSON.parse(raw);
if (Array.isArray(p)) {
return p.map((o) => ({
label: String((o == null ? void 0 : o.label) ?? ""),
value: String((o == null ? void 0 : o.value) ?? "")
}));
}
} catch {
return [];
}
}
return [];
}
function unwrapAttributePayload(raw) {
if (raw == null || typeof raw !== "object") {
return {};
}
const o = raw;
if ("id" in o) {
return o;
}
const inner = o.data;
if (inner && typeof inner === "object" && !Array.isArray(inner) && "id" in inner) {
return inner;
}
return {};
}
function iconFromAttributeApiRaw(raw) {
if (raw == null || raw === "") {
return null;
}
let ic = raw;
if (typeof ic === "string") {
const t = ic.trim();
if (t.startsWith("{")) {
try {
ic = JSON.parse(t);
} catch {
return t ? { type: "icon", value: t, provider: "yatra" } : null;
}
} else if (t !== "") {
return { type: "icon", value: t, provider: "yatra" };
} else {
return null;
}
}
if (typeof ic !== "object" || ic === null || Array.isArray(ic)) {
return null;
}
const io = ic;
const val = io.value !== void 0 && io.value !== null ? String(io.value) : "";
if (io.type === "image") {
if (!val) {
return null;
}
return { type: "image", value: val };
}
if (val === "") {
return null;
}
const p = io.provider;
const provider = p === "fa-solid" || p === "fa-regular" || p === "yatra" ? p : "yatra";
return { type: "icon", value: val, provider };
}
function normalizeAttributeStatusForForm(raw) {
const s2 = typeof raw === "string" ? raw.trim().toLowerCase() : "";
if (s2 === "publish" || s2 === "draft" || s2 === "trash") {
return s2;
}
return "publish";
}
const AttributeForm = () => {
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const [formData, setFormData] = reactExports.useState({
name: "",
slug: "",
description: "",
icon: null,
field_type: "text_field",
field_option_rows: [],
default_value: "",
placeholder: "",
required: false,
validation_rules: "",
display_order: 0,
show_on_frontend: true,
show_in_filters: false,
filter_type: "dropdown",
searchable: false,
status: "publish"
});
const [errors, setErrors] = reactExports.useState({});
const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
const [isSlugEditable, setIsSlugEditable] = reactExports.useState(false);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action") || "create";
}, []);
const attributeId = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("id");
}, []);
const isEditMode = action === "edit" && attributeId;
const fieldTypeOptions2 = [
{ value: "text_field", label: "Text Field" },
{ value: "textarea", label: "Textarea" },
{ value: "number", label: "Number" },
{ value: "email", label: "Email" },
{ value: "url", label: "URL" },
{ value: "date", label: "Date" },
{ value: "time", label: "Time" },
{ value: "color", label: "Color" },
{ value: "select", label: "Select Dropdown" },
{ value: "radio", label: "Radio Buttons" },
{ value: "checkbox", label: "Checkbox" },
{ value: "file", label: "File Upload" }
];
const handleFieldChange = (field, value) => {
if (field === "field_type") {
setFormData((prev) => {
const nextNeeds = value === "select" || value === "radio" || value === "checkbox";
const wasNeeds = prev.field_type === "select" || prev.field_type === "radio" || prev.field_type === "checkbox";
let rows = prev.field_option_rows;
if (nextNeeds && !wasNeeds && rows.length === 0) {
rows = [{ label: "", value: "" }];
}
return { ...prev, field_type: value, field_option_rows: rows };
});
if (errors.field_type) {
setErrors((prev) => ({ ...prev, field_type: "" }));
}
if (errors.field_options) {
setErrors((prev) => ({ ...prev, field_options: "" }));
}
return;
}
setFormData((prev) => ({ ...prev, [field]: value }));
if (field === "name" && !isEditMode && !isSlugEditable) {
setFormData((prev) => ({
...prev,
name: value,
slug: generateSlug(value)
}));
}
if (errors[field]) {
setErrors((prev) => ({ ...prev, [field]: "" }));
}
};
const updateOptionRow = (index, key2, val) => {
setFormData((prev) => {
const next = [...prev.field_option_rows];
next[index] = { ...next[index], [key2]: val };
return { ...prev, field_option_rows: next };
});
if (errors.field_options) {
setErrors((prev) => ({ ...prev, field_options: "" }));
}
};
const addOptionRow = () => {
setFormData((prev) => ({
...prev,
field_option_rows: [...prev.field_option_rows, { label: "", value: "" }]
}));
};
const removeOptionRow = (index) => {
setFormData((prev) => ({
...prev,
field_option_rows: prev.field_option_rows.filter((_, i) => i !== index)
}));
};
const generateUniqueSlug = async (baseSlug) => {
try {
const response = await apiClient.get(
`/attributes/check-slug?slug=${encodeURIComponent(baseSlug)}${isEditMode && attributeId ? `&exclude_id=${attributeId}` : ""}`
);
if (response.data.exists && response.data.suggested_slug) {
return response.data.suggested_slug;
}
return baseSlug;
} catch (error) {
let slug = baseSlug;
let counter = 1;
while (counter <= 100) {
const testSlug = counter === 1 ? baseSlug : `${baseSlug}-${counter}`;
{
return testSlug;
}
}
return slug;
}
};
const toggleSlugEdit = () => {
if (isSlugEditable) {
const newSlug = generateSlug(formData.name);
setFormData((prev) => ({ ...prev, slug: newSlug }));
}
setIsSlugEditable(!isSlugEditable);
};
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = __("Name is required", "yatra");
}
if (!formData.field_type) {
newErrors.field_type = __("Field type is required", "yatra");
}
if (formData.field_type === "select" || formData.field_type === "radio" || formData.field_type === "checkbox") {
const built = formData.field_option_rows.map((r2) => {
const label = r2.label.trim();
const value = r2.value.trim() || (label ? generateSlug(label) : "");
return { label, value };
}).filter((r2) => r2.label !== "" && r2.value !== "");
if (built.length === 0) {
newErrors.field_options = __(
"Add at least one option with a label (value can be left blank to auto-generate from the label).",
"yatra"
);
}
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const {
data: attribute,
isLoading: isLoadingAttribute,
error: attributeError
} = useQuery({
queryKey: ["attribute", attributeId],
queryFn: async () => {
if (!attributeId) return null;
const response = await apiClient.get(`/attributes/${attributeId}`);
return response;
},
enabled: Boolean(isEditMode),
retry: 2,
retryDelay: 1e3
});
const fetchDirectDatabaseValues = async (attributeId2) => {
var _a;
try {
const data = await ajaxService.post("yatra_get_attribute_direct", {
attribute_id: attributeId2,
nonce: ((_a = window.yatraAdmin) == null ? void 0 : _a.nonce) || ""
});
if ((data == null ? void 0 : data.success) && (data == null ? void 0 : data.data)) {
return data.data;
}
} catch (error) {
console.warn("Direct database query failed", { error, attributeId: attributeId2 });
}
return null;
};
reactExports.useEffect(() => {
if (!attribute || !attributeId) {
return;
}
const fromRest = unwrapAttributePayload(attribute);
fetchDirectDatabaseValues(Number(attributeId) || 0).then((directData) => {
const direct = directData && typeof directData === "object" ? directData : {};
const finalAttribute = { ...fromRest, ...direct };
const convertedData = {
name: String(finalAttribute.name ?? ""),
slug: String(finalAttribute.slug ?? ""),
description: String(finalAttribute.description ?? ""),
icon: iconFromAttributeApiRaw(finalAttribute.icon),
field_type: String(finalAttribute.field_type ?? "text_field"),
field_option_rows: (() => {
const rows = parseFieldOptionRows(finalAttribute.field_options);
return rows.length > 0 ? rows : ["select", "radio", "checkbox"].includes(
String(finalAttribute.field_type ?? "")
) ? [{ label: "", value: "" }] : [];
})(),
default_value: String(finalAttribute.default_value ?? ""),
placeholder: String(finalAttribute.placeholder ?? ""),
required: finalAttribute.required === "1" || finalAttribute.required === 1 || finalAttribute.required === true,
validation_rules: String(finalAttribute.validation_rules ?? ""),
display_order: Number(finalAttribute.display_order) || 0,
show_on_frontend: finalAttribute.show_on_frontend === "1" || finalAttribute.show_on_frontend === 1 || finalAttribute.show_on_frontend === true,
show_in_filters: finalAttribute.show_in_filters === "1" || finalAttribute.show_in_filters === 1 || finalAttribute.show_in_filters === true,
filter_type: String(finalAttribute.filter_type ?? "dropdown"),
searchable: finalAttribute.searchable === "1" || finalAttribute.searchable === 1 || finalAttribute.searchable === true,
status: normalizeAttributeStatusForForm(finalAttribute.status)
};
setFormData(convertedData);
});
}, [attribute, attributeId]);
reactExports.useEffect(() => {
if (attributeError) {
showToast(__("Failed to load attribute data", "yatra"), "error");
}
}, [attributeError, showToast]);
const saveMutation = useMutation({
mutationFn: async (data) => {
let slug = data.slug.trim();
if (!isEditMode) {
slug = await generateUniqueSlug(slug);
}
const needsOptionRows = data.field_type === "select" || data.field_type === "radio" || data.field_type === "checkbox";
const fieldOptionsPayload = needsOptionRows ? data.field_option_rows.map((r2) => {
const label = r2.label.trim();
const value = r2.value.trim() || (label ? generateSlug(label) : "");
return { label, value };
}).filter((r2) => r2.label !== "" && r2.value !== "") : [];
const payload = {
name: data.name.trim(),
slug,
description: data.description.trim(),
icon: data.icon,
field_type: data.field_type,
default_value: data.default_value.trim(),
placeholder: data.placeholder.trim(),
required: Boolean(data.required),
validation_rules: data.validation_rules.trim(),
display_order: Number(data.display_order),
show_on_frontend: Boolean(data.show_on_frontend),
show_in_filters: Boolean(data.show_in_filters),
filter_type: data.filter_type,
searchable: Boolean(data.searchable),
status: normalizeAttributeStatusForForm(data.status)
};
if (needsOptionRows) {
payload.field_options = fieldOptionsPayload;
}
if (isEditMode && isSlugEditable) {
payload.preserve_slug = true;
}
try {
if (isEditMode && attributeId) {
const response = await apiClient.put(
`/attributes/${attributeId}`,
payload
);
return response;
} else {
const response = await apiClient.post("/attributes", payload);
return response;
}
} catch (error) {
throw error;
}
},
onSuccess: (response) => {
var _a, _b, _c;
setIsSubmitting(false);
queryClient2.invalidateQueries({ queryKey: ["attributes"] });
queryClient2.invalidateQueries({ queryKey: ["attributes-stats"] });
if (attributeId) {
queryClient2.invalidateQueries({ queryKey: ["attribute", attributeId] });
}
showToast(
isEditMode ? __("Attribute updated successfully", "yatra") : __("Attribute created successfully", "yatra"),
"success"
);
if (!isEditMode) {
const newId = ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.id) || (response == null ? void 0 : response.id) || ((_c = (_b = response == null ? void 0 : response.data) == null ? void 0 : _b.data) == null ? void 0 : _c.id);
if (newId) {
setTimeout(() => {
var _a2;
window.location.href = `${((_a2 = window.yatraAdmin) == null ? void 0 : _a2.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=attributes&action=edit&id=${newId}`;
}, 1e3);
} else {
console.error(
"AttributeForm - Could not extract ID from response for redirect"
);
}
}
},
onError: (error) => {
const errorMessage = (error == null ? void 0 : error.message) || __("An error occurred while saving the attribute", "yatra");
showToast(errorMessage, "error");
setIsSubmitting(false);
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
saveMutation.mutate(formData);
};
const handleCancel = () => {
var _a;
window.location.href = `${((_a = window.yatraAdmin) == null ? void 0 : _a.siteUrl) || ""}/wp-admin/admin.php?page=yatra&subpage=trips&tab=attributes`;
};
if (isLoadingAttribute) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded w-48 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-12 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2 animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] })
] }) })
] })
] })
] });
}
if (attributeError && isEditMode) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: __("Error Loading Attribute", "yatra"),
description: __(
"Unable to load attribute data. Please try again.",
"yatra"
),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-6 text-center", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-red-500 mb-4", children: __(
"Failed to load attribute data. The attribute may not exist or there might be a server error.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => window.location.reload(), children: __("Try Again", "yatra") })
] }) })
] });
}
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
PageHeader,
{
title: isEditMode ? __("Edit Attribute", "yatra") : __("Add New Attribute", "yatra"),
description: isEditMode ? __("Update attribute information", "yatra") : __("Create a new trip attribute", "yatra"),
actions: /* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
variant: "outline",
onClick: handleCancel,
className: "flex items-center gap-2",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "w-4 h-4" }),
__("Back", "yatra")
]
}
)
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(ConditionalRender, { capability: "yatra_edit_trips", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Basic Information", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "name",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Name", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "name",
value: formData.name,
onChange: (e) => handleFieldChange("name", e.target.value),
placeholder: __("Enter attribute name", "yatra"),
className: errors.name ? "border-red-500" : ""
}
),
errors.name && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.name })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "slug",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Slug", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "slug",
value: formData.slug,
onChange: (e) => handleFieldChange("slug", e.target.value),
placeholder: __("attribute-slug", "yatra"),
disabled: !isSlugEditable,
className: `flex-1 ${errors.slug ? "border-red-500" : ""}`
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
size: "sm",
onClick: toggleSlugEdit,
className: "px-3 py-2",
children: isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-4 h-4" })
}
)
] }),
isSlugEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: __(
"Click the save icon to preserve your custom slug.",
"yatra"
) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: __(
"Auto-generated from name. Click edit icon to customize.",
"yatra"
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "description",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Description", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"textarea",
{
id: "description",
value: formData.description,
onChange: (e) => handleFieldChange("description", e.target.value),
placeholder: __("Enter attribute description", "yatra"),
rows: 6,
className: "flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400 resize-none"
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Field Configuration", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"label",
{
htmlFor: "field_type",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: [
__("Field Type", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Select,
{
id: "field_type",
value: formData.field_type,
onChange: (e) => handleFieldChange("field_type", e.target.value),
className: errors.field_type ? "border-red-500" : "",
children: fieldTypeOptions2.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value))
}
),
errors.field_type && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.field_type })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "display_order",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Display Order", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "display_order",
type: "number",
value: formData.display_order,
onChange: (e) => handleFieldChange(
"display_order",
parseInt(e.target.value) || 0
),
placeholder: "0"
}
)
] })
] }),
(formData.field_type === "select" || formData.field_type === "radio" || formData.field_type === "checkbox") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
__("Field Options", "yatra"),
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Button,
{
type: "button",
variant: "outline",
size: "sm",
className: "gap-1 h-8",
onClick: addOptionRow,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-3.5 h-3.5" }),
__("Add option", "yatra")
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-2", children: __(
"Each row is one choice. Leave value empty to auto-generate a slug from the label.",
"yatra"
) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: `space-y-2 rounded-md border p-3 ${errors.field_options ? "border-red-500" : "border-gray-200 dark:border-gray-600"}`,
children: (formData.field_option_rows.length > 0 ? formData.field_option_rows : [{ label: "", value: "" }]).map((row, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
className: "flex flex-col sm:flex-row gap-2 sm:items-end",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs text-gray-500 dark:text-gray-400 block mb-1", children: __("Label", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: row.label,
onChange: (e) => {
if (formData.field_option_rows.length === 0) {
setFormData((prev) => ({
...prev,
field_option_rows: [
{
label: e.target.value,
value: ""
}
]
}));
} else {
updateOptionRow(
index,
"label",
e.target.value
);
}
},
placeholder: __("Display name", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs text-gray-500 dark:text-gray-400 block mb-1", children: __("Value", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
value: row.value,
onChange: (e) => {
if (formData.field_option_rows.length === 0) {
setFormData((prev) => ({
...prev,
field_option_rows: [
{
label: "",
value: e.target.value
}
]
}));
} else {
updateOptionRow(
index,
"value",
e.target.value
);
}
},
placeholder: __(
"Stored value (optional)",
"yatra"
)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "ghost",
size: "sm",
className: "text-red-600 hover:text-red-700 shrink-0",
onClick: () => removeOptionRow(index),
disabled: formData.field_option_rows.length <= 1,
"aria-label": __("Remove option", "yatra"),
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" })
}
)
]
},
index
))
}
),
errors.field_options && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.field_options })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "default_value",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Default Value", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "default_value",
value: formData.default_value,
onChange: (e) => handleFieldChange("default_value", e.target.value),
placeholder: __("Default value for the field", "yatra")
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "placeholder",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Placeholder", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Input,
{
id: "placeholder",
value: formData.placeholder,
onChange: (e) => handleFieldChange("placeholder", e.target.value),
placeholder: __(
"Placeholder text for input field",
"yatra"
)
}
)
] })
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Status", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "status",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
children: __("Status", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
Select,
{
id: "status",
value: formData.status,
onChange: (e) => handleFieldChange("status", e.target.value),
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "draft", children: __("Draft", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "publish", children: __("Publish", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "trash", children: __("Trash", "yatra") })
]
}
)
] }) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Field Options", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "show_on_frontend",
className: "text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer",
children: __("Show on Frontend", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: formData.show_on_frontend,
onCheckedChange: (checked) => handleFieldChange("show_on_frontend", checked)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "show_in_filters",
className: "text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer",
children: __("Show in Filters", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: formData.show_in_filters,
onCheckedChange: (checked) => handleFieldChange("show_in_filters", checked)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "searchable",
className: "text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer",
children: __("Searchable", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: formData.searchable,
onCheckedChange: (checked) => handleFieldChange("searchable", checked)
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "required",
className: "text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer",
children: __("Required Field", "yatra")
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Switch,
{
checked: formData.required,
onCheckedChange: (checked) => handleFieldChange("required", checked)
}
)
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base", children: __("Attribute Icon", "yatra") }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
IconPicker,
{
value: formData.icon,
onChange: (value) => handleFieldChange("icon", value),
label: __("Icon or Image", "yatra"),
helpText: __(
"Select an icon from the library or upload a custom image for this attribute.",
"yatra"
),
allowImageUpload: true,
allowIconSelection: true,
size: "md"
}
) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "submit",
disabled: isSubmitting,
className: "flex-1 flex items-center justify-center gap-2",
children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
__("Saving...", "yatra")
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-4 h-4" }),
isEditMode ? __("Update Attribute", "yatra") : __("Create Attribute", "yatra")
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
Button,
{
type: "button",
variant: "outline",
onClick: handleCancel,
disabled: isSubmitting,
children: __("Cancel", "yatra")
}
)
] }) }) }) })
] })
] }) }) })
] });
};
const License = () => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const [licenseKey, setLicenseKey] = reactExports.useState("");
const [showKey, setShowKey] = reactExports.useState(false);
const [debugMode, setDebugMode] = reactExports.useState(false);
const [debugData, setDebugData] = reactExports.useState(null);
const [showDeactivateConfirm, setShowDeactivateConfirm] = reactExports.useState(false);
const queryClient2 = useQueryClient();
const { showToast } = useToast();
const yatraAdmin = window == null ? void 0 : window.yatraAdmin;
const isPro = (yatraAdmin == null ? void 0 : yatraAdmin.isPro) || false;
const { data: licenseData, isLoading } = useQuery({
queryKey: ["license"],
queryFn: async () => {
const response = await apiClient.get("/license");
return response;
}
});
reactExports.useEffect(() => {
var _a2;
if ((_a2 = licenseData == null ? void 0 : licenseData.license_info) == null ? void 0 : _a2.key) {
setLicenseKey(licenseData.license_info.key);
}
}, [licenseData]);
const activateMutation = useMutation({
mutationFn: async (key2) => {
try {
const response = await apiClient.post("/license/activate", {
license_key: key2
});
return response;
} catch (error) {
console.error("License activation error:", error);
throw error;
}
},
onSuccess: (data) => {
const debugInfo = {
type: "activate",
request: { license_key: licenseKey },
response: data,
timestamp: (/* @__PURE__ */ new Date()).toISOString()
};
setDebugData(debugInfo);
if ((data == null ? void 0 : data.status) === "valid") {
showToast(data.notice || "License activated successfully!", "success");
queryClient2.invalidateQueries({ queryKey: ["license"] });
window.dispatchEvent(
new CustomEvent("yatra-license-status-updated", {
detail: { status: "active" }
})
);
} else {
showToast((data == null ? void 0 : data.notice) || "License activation failed.", "error");
}
},
onError: (error) => {
var _a2, _b2, _c2, _d2;
const errorMsg = ((_b2 = (_a2 = error.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.message) || "Failed to activate license. Please try again.";
showToast(errorMsg, "error");
setDebugData({
type: "activate",
request: { license_key: licenseKey },
response: (_c2 = error.response) == null ? void 0 : _c2.data,
error: ((_d2 = error.response) == null ? void 0 : _d2.data) || error.message,
timestamp: (/* @__PURE__ */ new Date()).toISOString()
});
}
});
const deactivateMutation = useMutation({
mutationFn: async () => {
const response = await apiClient.post("/license/deactivate");
return response.data;
},
onSuccess: (data) => {
setDebugData({
type: "deactivate",
request: {},
response: data,
timestamp: (/* @__PURE__ */ new Date()).toISOString()
});
setLicenseKey("");
showToast((data == null ? void 0 : data.notice) || "License deactivated successfully!", "success");
queryClient2.invalidateQueries({ queryKey: ["license"] });
window.dispatchEvent(
new CustomEvent("yatra-license-status-updated", {
detail: { status: "inactive" }
})
);
},
onError: (error) => {
var _a2, _b2, _c2, _d2;
const errorMsg = ((_b2 = (_a2 = error.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.message) || "Failed to deactivate license. Please try again.";
showToast(errorMsg, "error");
setDebugData({
type: "deactivate",
request: {},
response: (_c2 = error.response) == null ? void 0 : _c2.data,
error: ((_d2 = error.response) == null ? void 0 : _d2.data) || error.message,
timestamp: (/* @__PURE__ */ new Date()).toISOString()
});
}
});
const saveMutation = useMutation({
mutationFn: async (key2) => {
const response = await apiClient.post("/license/save", {
license_key: key2
});
return response;
},
onSuccess: (data) => {
showToast((data == null ? void 0 : data.notice) || "License key saved successfully!", "success");
queryClient2.invalidateQueries({ queryKey: ["license"] });
},
onError: (error) => {
var _a2, _b2;
const errorMsg = ((_b2 = (_a2 = error.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.message) || "Failed to save license key.";
showToast(errorMsg, "error");
}
});
const checkMutation = useMutation({
mutationFn: async () => {
const response = await apiClient.post("/license/check");
return response;
},
onSuccess: (data) => {
var _a2;
setDebugData({
type: "check",
request: {},
response: data,
timestamp: (/* @__PURE__ */ new Date()).toISOString()
});
showToast((data == null ? void 0 : data.notice) || "License status updated.", "success");
queryClient2.invalidateQueries({ queryKey: ["license"] });
if ((_a2 = data == null ? void 0 : data.license_info) == null ? void 0 : _a2.status) {
window.dispatchEvent(
new CustomEvent("yatra-license-status-updated", {
detail: { status: data.license_info.status }
})
);
}
},
onError: (error) => {
var _a2, _b2, _c2, _d2;
const errorMsg = ((_b2 = (_a2 = error.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.message) || "Failed to check license status.";
showToast(errorMsg, "error");
setDebugData({
type: "check",
request: {},
response: (_c2 = error.response) == null ? void 0 : _c2.data,
error: ((_d2 = error.response) == null ? void 0 : _d2.data) || error.message,
timestamp: (/* @__PURE__ */ new Date()).toISOString()
});
}
});
const handleActivate = (e) => {
e.preventDefault();
if (!licenseKey.trim()) {
showToast("Please enter a license key.", "error");
return;
}
activateMutation.mutate(licenseKey);
};
const handleDeactivate = () => {
setShowDeactivateConfirm(true);
};
const confirmDeactivate = () => {
setShowDeactivateConfirm(false);
deactivateMutation.mutate();
};
const handleCheckStatus = () => {
checkMutation.mutate();
};
const maskLicenseKey = (key2) => {
if (!key2 || key2.length < 8) return key2;
return key2.substring(0, 4) + "••••••••••••" + key2.substring(key2.length - 4);
};
const getStatusBadge = (status) => {
const statusConfig = {
active: {
bg: "bg-green-100 dark:bg-green-900/20",
text: "text-green-800 dark:text-green-400",
label: "Active"
},
valid: {
bg: "bg-green-100 dark:bg-green-900/20",
text: "text-green-800 dark:text-green-400",
label: "Active"
},
inactive: {
bg: "bg-gray-100 dark:bg-gray-800",
text: "text-gray-800 dark:text-gray-300",
label: "Inactive"
},
expired: {
bg: "bg-red-100 dark:bg-red-900/20",
text: "text-red-800 dark:text-red-400",
label: "Expired"
},
disabled: {
bg: "bg-red-100 dark:bg-red-900/20",
text: "text-red-800 dark:text-red-400",
label: "Disabled"
},
invalid: {
bg: "bg-yellow-100 dark:bg-yellow-900/20",
text: "text-yellow-800 dark:text-yellow-400",
label: "Invalid"
}
};
const config2 = statusConfig[status] || statusConfig.inactive;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${config2.bg} ${config2.text}`,
children: config2.label
}
);
};
const SkeletonLoader = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-4xl mx-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-gray-200 dark:border-gray-700 px-6 py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-6 space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-4" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-full bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-3/4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10 w-full bg-gray-200 dark:bg-gray-700 rounded animate-pulse mt-4" })
] })
] }) })
] }) });
if (isLoading) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoader, {});
}
if (!isPro) {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-4xl mx-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-gray-200 dark:border-gray-700 px-6 py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-6 h-6 text-gray-600 dark:text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-2xl font-semibold text-gray-900 dark:text-white", children: __("License", "yatra") })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-12", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-8 h-8 text-blue-600 dark:text-blue-400" }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-2", children: "Yatra Free Version" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-6 max-w-md mx-auto", children: "You're using the free version of Yatra. No license is required for the free version." }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-lg p-6 mb-6 max-w-2xl mx-auto", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-3", children: "Upgrade to Yatra Pro" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: "Unlock premium features with Yatra Pro:" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: "text-left space-y-2 mb-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: "Dynamic Pricing & Revenue Management" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: __("Advanced Booking Management", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: __("Premium Payment Gateways", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "flex items-start gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: "Priority Support & Updates" })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: "https://wpyatra.com/pricing",
target: "_blank",
rel: "noopener noreferrer",
className: "inline-flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors",
children: [
"Upgrade to Pro",
/* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-4 h-4" })
]
}
)
] })
] }) })
] }) });
}
const licenseInfo = licenseData == null ? void 0 : licenseData.license_info;
const isActive = (licenseInfo == null ? void 0 : licenseInfo.status) === "active" || (licenseInfo == null ? void 0 : licenseInfo.status) === "valid";
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-gray-200 dark:border-gray-700 px-6 py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-6 h-6 text-gray-600 dark:text-gray-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-2xl font-semibold text-gray-900 dark:text-white", children: __("License Management", "yatra") })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
(licenseInfo == null ? void 0 : licenseInfo.status) && getStatusBadge(licenseInfo.status),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => setDebugMode(!debugMode),
className: `flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${debugMode ? "bg-purple-100 dark:bg-purple-900/20 text-purple-700 dark:text-purple-400" : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
title: "Toggle debug mode to see API requests and responses",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-4 h-4" }),
"Debug"
]
}
)
] })
] }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-6", children: [
!isActive && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4", children: "Activate Your License" }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleActivate, className: "space-y-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"label",
{
htmlFor: "license-key",
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2",
children: "License Key"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"input",
{
type: "text",
id: "license-key",
value: licenseKey,
onChange: (e) => setLicenseKey(e.target.value),
placeholder: "Enter your license key",
className: "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent",
disabled: activateMutation.isPending
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "button",
onClick: (e) => {
e.preventDefault();
if (!licenseKey.trim()) {
showToast("Please enter a license key.", "error");
return;
}
saveMutation.mutate(licenseKey);
},
disabled: activateMutation.isPending || saveMutation.isPending,
className: "inline-flex items-center justify-center gap-2 px-6 py-2.5 bg-gray-900 hover:bg-black dark:bg-gray-800 dark:hover:bg-gray-900 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border border-gray-800 dark:border-gray-700",
children: saveMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }),
"Saving..."
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-4 h-4" }),
"Save"
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
type: "submit",
disabled: activateMutation.isPending,
className: "inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-500 text-white font-medium rounded-lg transition-colors shadow-sm",
children: activateMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }),
"Activating..."
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-4 h-4" }),
"Save & Activate"
] })
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-4 text-sm text-gray-600 dark:text-gray-400", children: [
"Don't have a license key?",
" ",
/* @__PURE__ */ jsxRuntimeExports.jsx(
"a",
{
href: "https://store.mantrabrain.com/account/",
target: "_blank",
rel: "noopener noreferrer",
className: "text-blue-600 dark:text-blue-400 hover:underline",
children: "Get it from your account"
}
)
] })
] }),
isActive && licenseInfo && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: __("License Key", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => setShowKey(!showKey),
className: "text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1",
children: showKey ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "w-4 h-4" }),
"Hide"
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-4 h-4" }),
"Show"
] })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded px-4 py-3 text-gray-900 dark:text-white", children: showKey ? licenseInfo.key : maskLicenseKey(licenseInfo.key) })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
((_a = licenseInfo.plan) == null ? void 0 : _a.name) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: __("Plan", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: licenseInfo.plan.name }),
licenseInfo.plan.is_agency && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold bg-gradient-to-r from-purple-600 to-indigo-500 text-white", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Crown, { className: "w-3 h-3" }),
__("Scale", "yatra")
] }),
licenseInfo.plan.is_growth && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-600 text-white", children: __("Growth", "yatra") }),
licenseInfo.plan.is_lifetime && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold bg-gradient-to-r from-amber-500 to-orange-500 text-white", children: __("Lifetime", "yatra") })
] }),
licenseInfo.plan.matched_by === "label" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-[11px] text-gray-500 dark:text-gray-400", children: __(
"Detected from plan label (the original price ID was re-numbered on the store).",
"yatra"
) }),
licenseInfo.plan.matched_by === "fallback" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-[11px] text-amber-600 dark:text-amber-400", children: __(
"Could not match price ID or label — defaulted to Starter. Contact support if your subscription is Growth or Scale.",
"yatra"
) })
] }),
((_b = licenseInfo.server_response) == null ? void 0 : _b.customer_name) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: __("Licensed To", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: licenseInfo.server_response.customer_name })
] }),
((_c = licenseInfo.server_response) == null ? void 0 : _c.customer_email) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: __("Email", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: licenseInfo.server_response.customer_email })
] }),
((_d = licenseInfo.server_response) == null ? void 0 : _d.expires) && licenseInfo.server_response.expires !== "lifetime" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: __("Expires", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: (() => {
try {
const date2 = new Date(
licenseInfo.server_response.expires
);
return isNaN(date2.getTime()) ? licenseInfo.server_response.expires : date2.toLocaleDateString(void 0, {
year: "numeric",
month: "long",
day: "numeric"
});
} catch {
return licenseInfo.server_response.expires;
}
})() })
] }),
((_e = licenseInfo.server_response) == null ? void 0 : _e.expires) === "lifetime" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: __("Expires", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-green-600 dark:text-green-400", children: __("Lifetime License", "yatra") })
] }),
((_f = licenseInfo.server_response) == null ? void 0 : _f.site_count) !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: __("Active Sites", "yatra") }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-medium text-gray-900 dark:text-white", children: [
licenseInfo.server_response.site_count,
" /",
" ",
licenseInfo.server_response.license_limit || "∞"
] })
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: handleCheckStatus,
disabled: checkMutation.isPending,
className: "px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium rounded-lg transition-colors flex items-center gap-2",
children: checkMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900 dark:border-white" }),
"Checking..."
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4" }),
"Check Status"
] })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: handleDeactivate,
disabled: deactivateMutation.isPending,
className: "px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors flex items-center gap-2",
children: deactivateMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }),
"Deactivating..."
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-4 h-4" }),
"Deactivate License"
] })
}
)
] })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white mb-2", children: "Need Help?" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-3", children: "If you're having trouble with your license, please contact our support team." }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: "https://store.mantrabrain.com/account/",
target: "_blank",
rel: "noopener noreferrer",
className: "text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1",
children: [
"Manage License",
/* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3 h-3" })
]
}
),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"a",
{
href: "https://mantrabrain.com/contact/",
target: "_blank",
rel: "noopener noreferrer",
className: "text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1",
children: [
"Contact Support",
/* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3 h-3" })
]
}
)
] })
] }),
debugMode && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-purple-50 dark:bg-purple-900/10 border border-purple-200 dark:border-purple-800 rounded-lg p-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-sm font-semibold text-purple-900 dark:text-purple-300 flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-4 h-4" }),
"Debug Information"
] }),
debugData && /* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => setDebugData(null),
className: "text-xs text-purple-600 dark:text-purple-400 hover:underline",
children: __("Clear", "yatra")
}
)
] }),
debugData ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs font-semibold text-purple-700 dark:text-purple-300 uppercase", children: [
"Operation: ",
debugData.type
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-3 text-xs text-gray-500 dark:text-gray-400", children: debugData.timestamp })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-3 h-3 text-blue-600 dark:text-blue-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-semibold text-blue-700 dark:text-blue-300", children: "Full Response Body:" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => {
var _a2;
const text = JSON.stringify(
debugData.response,
null,
2
);
if ((_a2 = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : _a2.writeText) {
navigator.clipboard.writeText(text);
showToast(
"Response copied to clipboard!",
"success"
);
} else {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand("copy");
showToast(
"Response copied to clipboard!",
"success"
);
} catch (err) {
showToast("Failed to copy to clipboard", "error");
}
document.body.removeChild(textArea);
}
},
className: "text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-3 h-3",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
}
)
}
),
"Copy"
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-white dark:bg-gray-900 border border-blue-200 dark:border-blue-800 rounded p-3 text-xs overflow-x-auto max-h-96 overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-gray-800 dark:text-gray-200", children: JSON.stringify(debugData.response, null, 2) }) })
] }),
((_g = debugData.response) == null ? void 0 : _g.edd_api_request) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-3 h-3 text-purple-600 dark:text-purple-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-semibold text-purple-700 dark:text-purple-300", children: "EDD API Request (to store.mantrabrain.com):" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => {
var _a2;
const text = JSON.stringify(
debugData.response.edd_api_request,
null,
2
);
if ((_a2 = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : _a2.writeText) {
navigator.clipboard.writeText(text);
showToast(
"Request copied to clipboard!",
"success"
);
} else {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand("copy");
showToast(
"Request copied to clipboard!",
"success"
);
} catch (err) {
showToast(
"Failed to copy to clipboard",
"error"
);
}
document.body.removeChild(textArea);
}
},
className: "text-xs text-purple-600 dark:text-purple-400 hover:underline flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-3 h-3",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
}
)
}
),
"Copy"
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-white dark:bg-gray-900 border border-purple-200 dark:border-purple-800 rounded p-3 text-xs overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-gray-800 dark:text-gray-200", children: JSON.stringify(
debugData.response.edd_api_request,
null,
2
) }) })
] }),
((_h = debugData.response) == null ? void 0 : _h.edd_api_response) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-3 h-3 text-green-600 dark:text-green-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-semibold text-green-700 dark:text-green-300", children: "EDD API Response (from store.mantrabrain.com):" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => {
var _a2;
const text = JSON.stringify(
debugData.response.edd_api_response,
null,
2
);
if ((_a2 = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : _a2.writeText) {
navigator.clipboard.writeText(text);
showToast(
"Response copied to clipboard!",
"success"
);
} else {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand("copy");
showToast(
"Response copied to clipboard!",
"success"
);
} catch (err) {
showToast(
"Failed to copy to clipboard",
"error"
);
}
document.body.removeChild(textArea);
}
},
className: "text-xs text-green-600 dark:text-green-400 hover:underline flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-3 h-3",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
}
)
}
),
"Copy"
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-white dark:bg-gray-900 border border-green-200 dark:border-green-800 rounded p-3 text-xs overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-gray-800 dark:text-gray-200", children: JSON.stringify(
debugData.response.edd_api_response,
null,
2
) }) })
] }),
debugData.error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-3 h-3 text-red-600 dark:text-red-400" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-semibold text-red-700 dark:text-red-300", children: "Error Data:" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => {
var _a2;
const text = JSON.stringify(
debugData.error,
null,
2
);
if ((_a2 = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : _a2.writeText) {
navigator.clipboard.writeText(text);
showToast(
"Error copied to clipboard!",
"success"
);
} else {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand("copy");
showToast(
"Error copied to clipboard!",
"success"
);
} catch (err) {
showToast(
"Failed to copy to clipboard",
"error"
);
}
document.body.removeChild(textArea);
}
},
className: "text-xs text-red-600 dark:text-red-400 hover:underline flex items-center gap-1",
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
className: "w-3 h-3",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
}
)
}
),
"Copy"
]
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-white dark:bg-gray-900 border border-red-200 dark:border-red-800 rounded p-3 text-xs overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-gray-800 dark:text-gray-200", children: JSON.stringify(debugData.error, null, 2) }) })
] })
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-purple-600 dark:text-purple-400", children: "Perform a license operation (activate, deactivate, or check status) to see debug information here." })
] })
] })
] }),
showDeactivateConfirm && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm px-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(XCircle, { className: "w-6 h-6 text-red-600 dark:text-red-400" }) }) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: "Deactivate License" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "Are you sure you want to deactivate this license? You will lose support and updates for Yatra Pro." }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: () => setShowDeactivateConfirm(false),
className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors",
children: "Cancel"
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: confirmDeactivate,
disabled: deactivateMutation.isPending,
className: "px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 disabled:bg-gray-400 rounded-lg transition-colors flex items-center gap-2",
children: deactivateMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }),
"Deactivating..."
] }) : "Deactivate"
}
)
] })
] })
] }) }) })
] });
};
const TripForm = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/TripForm-tFMoMuMs.js"), true ? __vite__mapDeps([0,1,2,3,4,5,6]) : void 0, import.meta.url));
const Settings = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/Settings-DZPiAnb3.js"), true ? __vite__mapDeps([7,1,2,3,4,6]) : void 0, import.meta.url));
const Team = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/Team-CFV2Lcc6.js"), true ? __vite__mapDeps([8,1,2,3,4]) : void 0, import.meta.url));
const Reports = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/Reports-sGU73NQH.js"), true ? __vite__mapDeps([9,1,2,3,4]) : void 0, import.meta.url));
const DiscountForm = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/DiscountForm-CWIQB0xy.js"), true ? __vite__mapDeps([10,1,2,3,4,11]) : void 0, import.meta.url));
const Itinerary = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/Itinerary-Ap1hthK0.js"), true ? __vite__mapDeps([12,1,2,3,4,5]) : void 0, import.meta.url));
const RecurringRuleForm = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/RecurringRuleForm-qprdlB53.js"), true ? __vite__mapDeps([13,1,2,3,4]) : void 0, import.meta.url));
const Whatsapp = reactExports.lazy(() => __vitePreload(() => import("./Whatsapp.js"), true ? __vite__mapDeps([14,1,2,3,4,15]) : void 0, import.meta.url));
const ChannelManager = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/ChannelManager-BumsBhiQ.js"), true ? __vite__mapDeps([16,1,2,3,4,15]) : void 0, import.meta.url));
const Webhooks = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/Webhooks-BmhRcymQ.js"), true ? __vite__mapDeps([17,1,2,3,4,15]) : void 0, import.meta.url));
const TripConsentForm = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/TripConsentForm-DeH_xgzl.js"), true ? __vite__mapDeps([18,1,2,11,3,4]) : void 0, import.meta.url));
const BookingForm = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/BookingForm-DFFoFfQO.js"), true ? __vite__mapDeps([19,1,2,3,4]) : void 0, import.meta.url));
const ViewBooking = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/ViewBooking-D0U0ZXpB.js"), true ? __vite__mapDeps([20,1,2,3,4]) : void 0, import.meta.url));
const AvailabilityForm = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/AvailabilityForm-BPWy1f1h.js"), true ? __vite__mapDeps([21,1,2,3,4]) : void 0, import.meta.url));
const DynamicPricing = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/DynamicPricing-DTdy3svi.js"), true ? __vite__mapDeps([22,1,2,23,3,4,24]) : void 0, import.meta.url));
const DynamicPricingRuleForm = reactExports.lazy(
() => __vitePreload(() => import("../../../dist/js/DynamicPricingRuleForm-wUY86s8E.js"), true ? __vite__mapDeps([25,1,2,23,3,4]) : void 0, import.meta.url)
);
const AiAssistant = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/AiAssistant-2YNozU84.js"), true ? __vite__mapDeps([26,1,2,3,4,15]) : void 0, import.meta.url));
const AbandonedRecovery = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/AbandonedRecovery-BXWfwama.js"), true ? __vite__mapDeps([27,1,2,24,3,4]) : void 0, import.meta.url));
const WhiteLabel = reactExports.lazy(() => __vitePreload(() => import("../../../dist/js/WhiteLabel-DoUclAt1.js"), true ? __vite__mapDeps([28,1,2,3,4,15]) : void 0, import.meta.url));
const PageLoadingFallback = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-1/3" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-2/3" })
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-12 w-full" }),
/* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-64 w-full" })
] });
const App = () => {
const [urlKey, setUrlKey] = reactExports.useState(0);
reactExports.useEffect(() => {
const handleLocationChange = () => {
setUrlKey((prev) => prev + 1);
};
window.addEventListener("popstate", handleLocationChange);
const interval = setInterval(() => {
const currentSearch = window.location.search;
if (currentSearch !== window.__lastSearch) {
window.__lastSearch = currentSearch;
handleLocationChange();
}
}, 100);
return () => {
window.removeEventListener("popstate", handleLocationChange);
clearInterval(interval);
};
}, []);
const subpage = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("subpage") || "dashboard";
}, [urlKey]);
const tab = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("tab") || "all";
}, [urlKey]);
const action = reactExports.useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("action");
}, [urlKey, subpage]);
const renderPage = () => {
switch (subpage.toLowerCase()) {
case "trips":
switch (tab.toLowerCase()) {
case "activities":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Activities, {});
case "destinations":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(DestinationForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Destinations, {});
case "categories":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(CategoryForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Categories, {});
case "difficulty-levels":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(DifficultyLevelForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(DifficultyLevels, {});
case "availability":
if (action === "create-rule" || action === "edit-rule") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(RecurringRuleForm, {});
}
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(AvailabilityForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Availability, {});
case "additional-services":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(AdditionalServicesForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(AdditionalServices, {});
case "trip-consent":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(TripConsentForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(TripConsent, {});
case "attributes":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(AttributeForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Attributes, {});
case "all":
default:
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(TripForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Trips, {});
}
case "bookings":
if (action === "view") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewBooking, {});
}
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(BookingForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Bookings, {});
case "customers":
if (action === "view") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewCustomer, {});
}
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(CustomerForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Customers, {});
case "travelers":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Travelers, {});
case "enquiries":
if (action === "view") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewEnquiry, {});
}
if (action === "edit" || action === "new") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(EnquiryForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Enquiries, {});
case "reviews":
if (action === "view") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewReview, {});
}
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ReviewForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Reviews, {});
case "email-automation":
if (action === "create" && tab === "template") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(EmailTemplateForm, {});
}
if (action === "edit" && tab === "template") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(EmailTemplateForm, {});
}
if (action === "create" && tab === "sequence") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(EmailSequenceForm, {});
}
if (action === "edit" && tab === "sequence") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(EmailSequenceForm, {});
}
if (action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(EmailTemplateForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(EmailAutomation, {});
case "itinerary":
switch (tab.toLowerCase()) {
case "item-types":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ItemTypeForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(ItemTypes, {});
case "items":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ItemForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Items, {});
case "itinerary":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ItineraryForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Itinerary, {});
default:
return /* @__PURE__ */ jsxRuntimeExports.jsx(ItemTypes, {});
}
case "departures":
if (action === "view") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewDeparture, {});
}
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(DepartureForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Departures, {});
case "discounts":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(DiscountForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Discounts, {});
case "payments":
if (action === "view") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewPayment, {});
}
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(PaymentForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(Payments, {});
case "traveler-categories":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(TravelerCategoryForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(TravelerCategories, {});
case "reports":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Reports, {});
case "tools":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Tools, {});
case "settings":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, {});
case "modules":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Modules, {});
case "google-calendar":
return /* @__PURE__ */ jsxRuntimeExports.jsx(GoogleCalendar, {});
case "additional-services":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(AdditionalServicesForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(AdditionalServices, {});
case "trip-consent":
if (action === "create" || action === "edit") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(TripConsentForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(TripConsent, {});
case "abandoned-recovery":
return /* @__PURE__ */ jsxRuntimeExports.jsx(AbandonedRecovery, { tab });
case "dynamic-pricing":
if (action === "create-pricing-rule" || action === "edit-pricing-rule") {
return /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicPricingRuleForm, {});
}
return /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicPricing, {});
case "license":
return /* @__PURE__ */ jsxRuntimeExports.jsx(License, {});
case "white-label":
return /* @__PURE__ */ jsxRuntimeExports.jsx(WhiteLabel, {});
case "ai-assistant":
return /* @__PURE__ */ jsxRuntimeExports.jsx(AiAssistant, {});
case "whatsapp":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Whatsapp, {});
case "channel-manager":
return /* @__PURE__ */ jsxRuntimeExports.jsx(ChannelManager, {});
case "webhooks":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Webhooks, {});
case "team":
return /* @__PURE__ */ jsxRuntimeExports.jsx(Team, {});
case "dashboard":
default:
return /* @__PURE__ */ jsxRuntimeExports.jsx(Dashboard, {});
}
};
return /* @__PURE__ */ jsxRuntimeExports.jsx(Layout, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(PageLoadingFallback, {}), children: renderPage() }) });
};
let queryClient;
try {
queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 1,
staleTime: 5 * 60 * 1e3
// 5 minutes
}
}
});
} catch (error) {
console.error("Error initializing QueryClient:", error);
queryClient = new QueryClient();
}
const rootElement = document.getElementById("yatra-app-root");
if (rootElement) {
try {
const root2 = client.createRoot(rootElement);
root2.render(
/* @__PURE__ */ jsxRuntimeExports.jsx(React.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToastProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) }) }) })
);
} catch (error) {
console.error("Error rendering React app:", error);
rootElement.innerHTML = 'Error loading Yatra Admin Please refresh the page or contact support.