{/* Drop indicator: thin bar above */} {dropPosition === "above" && (

)} {/* Drop indicator: thin bar below */} {dropPosition === "below" && (

)}

{draggable ? ( ) : ( )}

{defaultLabel}

{slug}

onPatch({ label: e.target.value })} />

onPatch({ icon: val ?? undefined })} size="sm" allowImageUpload allowIconSelection />

); }; /* -------------------------------------------------------------------------- */ /* Main page */ /* -------------------------------------------------------------------------- */ const WhiteLabel: React.FC = () => { const { showToast } = useToast(); const queryClient = useQueryClient(); const [form, setForm] = useState(DEFAULT_SETTINGS); const [activeSection, setActiveSection] = useState("brand"); const [draggingSlug, setDraggingSlug] = useState(null); /** * Where the dragged row would land if dropped right now. `position` is * derived from the mouse Y offset within the hovered row: * - `above` — insert just above the hovered row (same indent) * - `into` — make the hovered row a parent, dragged row becomes its * last child (only valid when hovering a top-level row) * - `below` — insert just below the hovered row (same indent) */ const [dropTarget, setDropTarget] = useState<{ key: string; position: "above" | "into" | "below"; } | null>(null); // Start with every parent expanded so users see / can manage children // without an extra interaction. Collapsing remains on a per-row click. const [expandedSubmenus, setExpandedSubmenus] = useState>( () => new Set(DEFAULT_MENU_ITEMS.filter((m) => m.submenu).map((m) => m.slug)), ); const { openMediaLibrary } = useWordPressMedia({ title: __("Select brand logo", "yatra"), buttonText: __("Use this image", "yatra"), multiple: false, library: { type: "image" }, }); const { data, isLoading } = useQuery({ queryKey: ["white-label-settings"], queryFn: async () => { const response = await apiClient.get("/white-label/settings"); return response as WhiteLabelResponse; }, }); useEffect(() => { if (data?.data) { setForm({ ...DEFAULT_SETTINGS, ...data.data, menu_overrides: data.data.menu_overrides ?? {}, menu_order: toOrderMap(data.data.menu_order), ui_chrome: data.data.ui_chrome ?? {}, theme_surfaces: data.data.theme_surfaces ?? {}, }); } }, [data]); const saveMutation = useMutation({ mutationFn: async (payload: WhiteLabelSettings) => { const response = await apiClient.put("/white-label/settings", payload); return response as WhiteLabelResponse; }, onSuccess: () => { showToast(__("White Label settings saved.", "yatra"), "success"); queryClient.invalidateQueries({ queryKey: ["white-label-settings"] }); }, onError: (error: any) => { const msg = error?.response?.data?.message || __("Failed to save settings.", "yatra"); showToast(msg, "error"); }, }); const meta = data?.meta; const isAgency = Boolean(meta?.is_agency_active); const isModuleEnabled = Boolean(meta?.is_module_enabled); const updateField = useCallback( ( key: K, value: WhiteLabelSettings[K], ) => setForm((prev) => ({ ...prev, [key]: value })), [], ); const updateMenuOverride = useCallback( (slug: string, patch: Partial) => { setForm((prev) => { const next = { ...(prev.menu_overrides ?? {}) }; const current = next[slug] ?? {}; const merged: MenuItemOverride = { ...current, ...patch }; if (merged.label === "") delete merged.label; if (merged.icon === "") delete merged.icon; if (merged.hidden === false) delete merged.hidden; if (Object.keys(merged).length === 0) { delete next[slug]; } else { next[slug] = merged; } return { ...prev, menu_overrides: next }; }); }, [], ); const toggleUiChrome = useCallback((key: keyof UiChromeFlags) => { setForm((prev) => { const next = { ...(prev.ui_chrome ?? {}) }; if (next[key]) { delete next[key]; } else { next[key] = true; } return { ...prev, ui_chrome: next }; }); }, []); const handlePickLogo = useCallback(() => { openMediaLibrary((attachment) => { if (attachment && !Array.isArray(attachment)) { updateField("logo_url", attachment.url); } }); }, [openMediaLibrary, updateField]); /** * Compute the ordered list of top-level slugs to display in the menu * customization tab. Honors any saved menu_order, then appends defaults * the user hasn't touched yet (so newly-added Yatra menus surface * automatically without requiring a settings rewrite). */ /** * Flat registry of every known menu atom (top-level + submenu), * each with its default parent. The effective tree is computed by * overlaying menu_overrides[key].parent and menu_order on this. */ interface MenuAtom { key: string; defaultParent: string; defaultLabel: string; defaultIconName: string; } const atoms = useMemo(() => { const list: MenuAtom[] = []; for (const item of DEFAULT_MENU_ITEMS) { list.push({ key: item.slug, defaultParent: "", defaultLabel: item.label, defaultIconName: item.iconName, }); if (item.submenu) { for (const sub of item.submenu) { list.push({ key: sub.key, defaultParent: item.slug, defaultLabel: sub.label, defaultIconName: sub.iconName, }); } } } return list; }, []); const atomMap = useMemo(() => new Map(atoms.map((a) => [a.key, a])), [atoms]); /** Effective parent for an atom (override.parent wins, else default). */ const effectiveParent = useCallback( (key: string): string => { const ov = form.menu_overrides?.[key]; if (ov && typeof ov.parent === "string") { if (ov.parent === "") return ""; if (atomMap.get(ov.parent)?.defaultParent === "") return ov.parent; } return atomMap.get(key)?.defaultParent ?? ""; }, [form.menu_overrides, atomMap], ); /** * Compute the ordered tree the table renders. Returns a flat list of * { atom, parent, depth } in render order. Reordering happens by * mutating form.menu_order[parent]; cross-parent moves go through * the Move-to dropdown which updates menu_overrides[key].parent. */ const renderRows = useMemo(() => { const orderMap = (form.menu_order ?? {}) as MenuOrderMap; const groups = new Map(); for (const atom of atoms) { const parent = effectiveParent(atom.key); if (parent === atom.key) continue; const list = groups.get(parent) ?? []; list.push(atom.key); groups.set(parent, list); } const orderGroup = (parent: string, group: string[]): string[] => { const saved = orderMap[parent] ?? []; if (saved.length === 0) return group; const set = new Set(group); const seen = new Set(); const ordered: string[] = []; for (const k of saved) { if (set.has(k) && !seen.has(k)) { ordered.push(k); seen.add(k); } } for (const k of group) if (!seen.has(k)) ordered.push(k); return ordered; }; type Row = { atom: MenuAtom; depth: number; parent: string }; const rows: Row[] = []; for (const topKey of orderGroup("", groups.get("") ?? [])) { const topAtom = atomMap.get(topKey); if (!topAtom) continue; rows.push({ atom: topAtom, depth: 0, parent: "" }); if (expandedSubmenus.has(topKey)) { for (const childKey of orderGroup(topKey, groups.get(topKey) ?? [])) { const childAtom = atomMap.get(childKey); if (childAtom) rows.push({ atom: childAtom, depth: 1, parent: topKey }); } } } return rows; }, [atoms, atomMap, effectiveParent, form.menu_order, expandedSubmenus]); /** Whether a top-level atom currently has any children rendered under it. */ const hasChildrenByParent = useMemo(() => { const map = new Map(); for (const atom of atoms) { const parent = effectiveParent(atom.key); if (parent === "") continue; map.set(parent, true); } return map; }, [atoms, effectiveParent]); const handleDragStart = useCallback((key: string, e: React.DragEvent) => { setDraggingSlug(key); if (e.dataTransfer) { e.dataTransfer.effectAllowed = "move"; } }, []); /** * Decide the drop zone based on cursor Y within the hovered row. * * Top-level rows (can accept children): * 0–25% → above * 25–75% → into (becomes last child of this row) * 75–100% → below * * Submenu rows (cannot have grandchildren): * 0–50% → above * 50–100% → below * * The above/below decision uses the hovered row's own parent group, so * a submenu row's "above" drops into its parent's children list — which * is the natural place for the dragged item even when it came from a * different parent (in that case the move also reparents). */ const handleRowDragOver = useCallback( (key: string, e: React.DragEvent) => { if (!draggingSlug || draggingSlug === key) return; e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = "move"; const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); const y = e.clientY - rect.top; const h = rect.height || 1; const ratio = Math.max(0, Math.min(1, y / h)); const isHoveredTopLevel = effectiveParent(key) === ""; // Don't allow dropping a parent INTO one of its own descendants — // that would create a cycle. We resolve to above/below in that case. const draggedAtom = atomMap.get(draggingSlug); const isDescendantOfDragged = draggedAtom && draggedAtom.defaultParent === "" && effectiveParent(key) === draggingSlug; let position: "above" | "into" | "below"; if (isHoveredTopLevel && !isDescendantOfDragged) { if (ratio < 0.25) position = "above"; else if (ratio > 0.75) position = "below"; else position = "into"; } else { position = ratio < 0.5 ? "above" : "below"; } setDropTarget((prev) => prev && prev.key === key && prev.position === position ? prev : { key, position }, ); }, [draggingSlug, effectiveParent, atomMap], ); const handleRowDragLeave = useCallback(() => { // Don't clear on every leave — sibling enter immediately overwrites. // We only clear on dragend / drop. This keeps the indicator stable. }, []); const handleDragEnd = useCallback(() => { setDraggingSlug(null); setDropTarget(null); }, []); /** * The single drop handler — replaces the old reorder-only handler AND * the Move-to dropdown. Reorders within the same parent and reparents * across parents in one interaction (WordPress menus-style). */ const handleRowDrop = useCallback( (targetKey: string, e: React.DragEvent) => { e.preventDefault(); const src = draggingSlug; const drop = dropTarget; setDraggingSlug(null); setDropTarget(null); if (!src || src === targetKey || !drop || drop.key !== targetKey) return; const srcAtom = atomMap.get(src); const targetAtom = atomMap.get(targetKey); if (!srcAtom || !targetAtom) return; // Compute the destination parent based on drop position. let newParent: string; if (drop.position === "into") { // Only top-level rows accept "into" — guard handled in dragOver // but recheck here so a stale dropTarget can't sneak through. if (targetAtom.defaultParent !== "") return; newParent = targetKey; } else { newParent = effectiveParent(targetKey); } // Block one-level-deeper nesting (no grandchildren). const parentAtom = atomMap.get(newParent); if (newParent !== "" && parentAtom && parentAtom.defaultParent !== "") { return; } // Block making an atom its own ancestor. if (newParent === src) return; // Block making a top-level parent a child of one of its own // descendants (cycle prevention). const parentEffective = newParent === "" ? "" : effectiveParent(newParent); if (parentEffective === src) return; setForm((prev) => { const overrides: MenuOverrides = { ...(prev.menu_overrides ?? {}) }; const orderMap = toOrderMap(prev.menu_order); // 1. Update src's parent override (clear if it matches default). { const ov: MenuItemOverride = { ...(overrides[src] ?? {}) }; if (newParent === srcAtom.defaultParent) { delete ov.parent; } else { ov.parent = newParent; } if (Object.keys(ov).length === 0) { delete overrides[src]; } else { overrides[src] = ov; } } // Helper: with the just-updated overrides, what's an atom's parent? const effectiveWithNew = (key: string): string => { const ov = overrides[key]; if (ov && typeof ov.parent === "string") { if (ov.parent === "") return ""; if (atomMap.get(ov.parent)?.defaultParent === "") return ov.parent; } return atomMap.get(key)?.defaultParent ?? ""; }; // 2. Strip src from every group it might appear in. for (const [p, list] of Object.entries(orderMap)) { orderMap[p] = list.filter((k) => k !== src); } // 3. Build the destination group's current effective list, then // insert src at the right index (above/below/into-append). const destGroup = atoms .filter((a) => a.key !== src && effectiveWithNew(a.key) === newParent) .map((a) => a.key); const existing = orderMap[newParent] ?? []; const seeded: string[] = []; const seen = new Set(); for (const k of existing) { if (destGroup.includes(k) && !seen.has(k)) { seeded.push(k); seen.add(k); } } for (const k of destGroup) { if (!seen.has(k)) seeded.push(k); } if (drop.position === "into") { seeded.push(src); } else { const targetIdx = seeded.indexOf(targetKey); if (targetIdx === -1) { seeded.push(src); } else { const insertIdx = drop.position === "above" ? targetIdx : targetIdx + 1; seeded.splice(insertIdx, 0, src); } } orderMap[newParent] = seeded; return { ...prev, menu_overrides: overrides, menu_order: orderMap, }; }); }, [draggingSlug, dropTarget, atomMap, effectiveParent, atoms], ); const toggleSubmenuExpanded = useCallback((slug: string) => { setExpandedSubmenus((prev) => { const next = new Set(prev); if (next.has(slug)) next.delete(slug); else next.add(slug); return next; }); }, []); /* ------------------------------- Renderers ------------------------------ */ if (isLoading) { return ; } if (!isAgency) { return (

); } const onSubmit = (e: React.FormEvent) => { e.preventDefault(); saveMutation.mutate(form); }; const renderBrand = () => ( {__("Brand identity", "yatra")} {__("Shown in the admin menu, plugin list, and PDFs.", "yatra")}

{__("Plugin name", "yatra")} updateField("plugin_name", e.target.value)} />

{__("Company / Author", "yatra")} updateField("company_name", e.target.value)} />

{__("Website URL", "yatra")} updateField("website_url", e.target.value)} />

{__("Support URL", "yatra")} updateField("support_url", e.target.value)} />

{__("Logo", "yatra")}

{form.logo_url ? (

${__("Brand$

) : (

)}

{form.logo_url && ( )}

updateField("logo_url", e.target.value)} />

{__( "Used for the admin menu icon and PDF header. Square PNG, 64×64 or larger recommended.", "yatra", )}

); const renderTheme = () => { const updateSurface = (key: keyof ThemeSurfaces, value: string) => { setForm((prev) => { const next = { ...(prev.theme_surfaces ?? {}) }; if (value === "") { delete next[key]; } else { next[key] = value; } return { ...prev, theme_surfaces: next }; }); }; const applyPreset = (surfaces: Required) => { setForm((prev) => ({ ...prev, theme_surfaces: { ...surfaces } })); }; const surfaceFields: Array<{ key: keyof ThemeSurfaces; label: string; fallback: string; }> = [ { key: "sidebar_bg", label: __("Sidebar background", "yatra"), fallback: "#ffffff", }, { key: "sidebar_text", label: __("Sidebar text", "yatra"), fallback: "#374151", }, { key: "topbar_bg", label: __("Top bar background", "yatra"), fallback: "#ffffff", }, { key: "topbar_text", label: __("Top bar text", "yatra"), fallback: "#111827", }, ]; const hasAnySurface = Object.values(form.theme_surfaces ?? {}).some( (v) => typeof v === "string" && v !== "", ); return (

{/* ------ Color Scheme (brand accent) ------------------------- */}

{__("Color scheme", "yatra")}

{__( "Brand accent color used for buttons, active menu items, and badges across the admin.", "yatra", )}

updateField("primary_color", e.target.value)} className="h-10 w-12 cursor-pointer rounded border border-gray-300 bg-white p-1 dark:border-gray-700 dark:bg-gray-800" aria-label={__("Pick brand accent color", "yatra")} /> updateField("primary_color", e.target.value)} className="max-w-[200px]" /> {form.primary_color && ( )}

{[ { label: "Yatra Blue", color: "" }, { label: "Emerald", color: "#10b981" }, { label: "Indigo", color: "#6366f1" }, { label: "Rose", color: "#f43f5e" }, { label: "Slate", color: "#475569" }, { label: "Amber", color: "#d97706" }, ].map((preset) => ( ))}

{__("Leave blank to keep the default Yatra blue.", "yatra")}

{/* ------ Theme (sidebar + topbar surfaces) ------------------- */}

{__("Theme", "yatra")}

{__( "Like a custom light/dark mode — pick a preset to repaint the sidebar and top bar in one click, or fine-tune the four colors below.", "yatra", )} {/* Preset row */}

{THEME_PRESETS.map((preset) => ( ))} {hasAnySurface && ( )}

{/* Per-color editors */}

{surfaceFields.map(({ key, label, fallback }) => { const value = (form.theme_surfaces ?? {})[key] ?? ""; return (

updateSurface(key, e.target.value)} className="h-9 w-10 cursor-pointer rounded border border-gray-300 bg-white p-1 dark:border-gray-600 dark:bg-gray-800" aria-label={label} />

{label}

updateSurface(key, e.target.value)} className="mt-1 max-w-full" />

{value && ( )}

); })}

{__( "Each color is independent — clear one to fall back to its Yatra default while keeping the others.", "yatra", )}

); }; const renderMenu = () => { const hasAnyOverrides = Object.keys(form.menu_order ?? {}).length > 0 || Object.values(form.menu_overrides ?? {}).some( (ov) => ov && ov.parent !== undefined, ); return ( {__("Sidebar menu", "yatra")} {__( "Drag items to reorder, nest, or promote — like the WordPress Menus screen. Drop on the top or bottom edge of a row to place above or below; drop on the middle of a top-level row to nest the item underneath. Nesting is one level deep.", "yatra", )}

{renderRows.map((row) => { const ov = form.menu_overrides?.[row.atom.key] ?? {}; const effectiveOwnParent = effectiveParent(row.atom.key); const isTopLevel = effectiveOwnParent === ""; const showsChildren = isTopLevel && hasChildrenByParent.has(row.atom.key); const expanded = expandedSubmenus.has(row.atom.key); const isDropTarget = dropTarget !== null && dropTarget.key === row.atom.key && draggingSlug !== row.atom.key; return (

0 ? { marginLeft: 32 } : undefined} >

0} draggable isDragging={draggingSlug === row.atom.key} dropPosition={ isDropTarget ? dropTarget!.position : null } onDragStart={(e) => handleDragStart(row.atom.key, e)} onDragOver={(e) => handleRowDragOver(row.atom.key, e)} onDragEnd={handleDragEnd} onDragLeave={handleRowDragLeave} onDrop={(e) => handleRowDrop(row.atom.key, e)} onPatch={(patch) => updateMenuOverride(row.atom.key, patch) } />

{showsChildren && ( )}

); })}

{hasAnyOverrides && (

)} ); }; const renderChrome = () => { const items: Array<{ key: keyof UiChromeFlags; label: string; description: string; }> = [ { key: "hideVersion", label: __("Hide version number", "yatra"), description: __( 'Removes the small "v3.0.4" tag shown next to the brand name in the sidebar header.', "yatra", ), }, { key: "hideBackToWp", label: __('Hide "Back to WordPress" link', "yatra"), description: __( "Removes the link from the top bar AND the sidebar footer so clients don't see the wp-admin escape hatch.", "yatra", ), }, { key: "hideJoinCommunity", label: __('Hide "Join Community" link', "yatra"), description: __( "Removes the Facebook community button from the top bar.", "yatra", ), }, ]; return ( {__("UI chrome", "yatra")} {__( "Hide or show specific pieces of admin chrome — useful when delivering the app to clients who shouldn't be reminded of the underlying platform.", "yatra", )} {items.map((item) => { const checked = !form.ui_chrome?.[item.key]; return ( toggleUiChrome(item.key)} aria-label={item.label} />

{item.label}

{item.description}

{checked ? ( <> {__("Visible", "yatra")} ) : ( <> {__("Hidden", "yatra")} )} ); })} ); }; const currentSection = SECTIONS.find((s) => s.id === activeSection) ?? SECTIONS[0]; return (

{!isModuleEnabled && (

{__("Module disabled", "yatra")}

{__( "Your Scale license is active, but the White Label module is not enabled yet. Enable it from the Modules page so branding overrides take effect.", "yatra", )}

{__("Go to Modules →", "yatra")}

)}

{/* Section sidebar */}

{SECTIONS.map((section) => { const Icon = section.icon; const active = section.id === activeSection; return ( ); })}

{currentSection.description}

{/* Section content */}

{activeSection === "brand" && renderBrand()} {activeSection === "theme" && renderTheme()} {activeSection === "menu" && renderMenu()} {activeSection === "chrome" && renderChrome()}

{__("Saves all sections at once.", "yatra")}

); }; export default WhiteLabel; ```