From 06aac5b12636324c4d655de9eda99ad7a506eae0 Mon Sep 17 00:00:00 2001 From: Horacio Daniel Ros Date: Mon, 14 Sep 2026 13:01:36 -0300 Subject: [PATCH] fix: popup centrado con estilo Confirm (botones sin iconos, titulo 'Personalizar') MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Dialog centrado (no bottom-sheet) con ThemeProvider - Botones Cancelar/Guardar en texto plano (sin iconos), mismo patrón que Confirm.tsx - Recibe valores actuales por props para no depender de store global - Titulo dice 'Personalizar' solamente - Cierre se hace con icono X en el title bar --- .../app/landing/org/[oid]/HeaderEditPopup.tsx | 166 ++++++++---------- txclient/src/app/landing/org/[oid]/page.tsx | 6 +- 2 files changed, 83 insertions(+), 89 deletions(-) diff --git a/txclient/src/app/landing/org/[oid]/HeaderEditPopup.tsx b/txclient/src/app/landing/org/[oid]/HeaderEditPopup.tsx index dafd3f3..2384e38 100644 --- a/txclient/src/app/landing/org/[oid]/HeaderEditPopup.tsx +++ b/txclient/src/app/landing/org/[oid]/HeaderEditPopup.tsx @@ -1,8 +1,10 @@ "use client"; import { useState, useEffect } from "react"; -import { Grid2, IconButton, Dialog, DialogContent, DialogTitle, Box, Divider } from "@mui/material"; +import { Grid2, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; -import SaveIcon from "@mui/icons-material/Save"; +import turnosXpressTheme from "@core/app/theme/turnosXpress"; +import Button from "@mui/material/Button"; +import { ThemeProvider } from "@emotion/react"; import { PopoverPicker } from "@components/ColorPicker/ColorPicker"; import ImagePicker from "@components/ImagePicker/ImagePicker"; import { useAlert } from "@core/Store/Alert.Store"; @@ -15,32 +17,33 @@ interface HeaderEditPopupProps { open: boolean; onClose: () => void; companyId: string; + headerColor: string; + headerFontColor: string; + headerFontShadowColor: string; + headerImage: string; onSaved: () => void; } export default function HeaderEditPopup(props: HeaderEditPopupProps) { - const { open, onClose, companyId, onSaved } = props; + const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved } = props; const alert = useAlert(); const SessionInfo = useSessionStore(); const organizationHeader = useOrganizationHeaderStore(); - const [headerImage, setHeaderImage] = useState(""); - const [headerColor, setHeaderColor] = useState(""); - const [headerFontColor, setHeaderFontColor] = useState(""); - const [headerFontShadowColor, setHeaderFontShadowColor] = useState(""); + const [headerColorState, setHeaderColorState] = useState(""); + const [headerFontColorState, setHeaderFontColorState] = useState(""); + const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState(""); const [loading, setLoading] = useState(false); - // Load current values from store when opening + // Sync local state when values change externally useEffect(() => { - if (!open) return; - - // Get current values from the organization header store - const current = useOrganizationHeaderStore.getState(); - setHeaderColor(current.headerColor || ""); - setHeaderFontColor(current.headerFontColor || ""); - setHeaderFontShadowColor(current.headerFontShadowColor || ""); - setHeaderImage(""); - }, [open]); + if (open) { + setHeaderColorState(headerColor || ""); + setHeaderFontColorState(headerFontColor || ""); + setHeaderFontShadowColorState(headerFontShadowColor || ""); + setLoading(false); + } + }, [open, headerColor, headerFontColor, headerFontShadowColor]); const handleSaveColors = async () => { setLoading(true); @@ -48,18 +51,17 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) { try { const updData: UpdateCompanyParams = { id: companyId, - headerColor: headerColor, - headerFontColor: headerFontColor, - headerFontShadowColor: headerFontShadowColor, + headerColor: headerColorState, + headerFontColor: headerFontColorState, + headerFontShadowColor: headerFontShadowColorState, sessionUser: SessionInfo.userId, }; await updateOrganizationsById(updData); - // Update the header store so colors apply immediately - organizationHeader.setHeaderColor(headerColor); - organizationHeader.setHeaderFontColor(headerFontColor); - organizationHeader.setHeaderFontShadowColor(headerFontShadowColor); + organizationHeader.setHeaderColor(headerColorState); + organizationHeader.setHeaderFontColor(headerFontColorState); + organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState); alert.showSuccess("Colores actualizados"); } catch (error) { @@ -70,7 +72,7 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) { } }; - const handleSaveImage = async (e: React.ChangeEvent) => { + const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; @@ -82,111 +84,99 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) { formData.append("sessionUser", SessionInfo.userId); formData.append("file", file); - await uploadHeaderImage(formData); - alert.showSuccess("Imagen actualizada"); - onSaved(); + uploadHeaderImage(formData).then(() => { + alert.showSuccess("Imagen actualizada"); + onSaved(); + }).catch((error) => { + const formatted = error instanceof Error ? error.message : "Error al guardar la imagen"; + alert.showError(formatted || "Error al guardar la imagen"); + }).finally(() => { + setLoading(false); + }); } catch (error) { const formatted = error instanceof Error ? error.message : "Error al guardar la imagen"; alert.showError(formatted || "Error al guardar la imagen"); - } finally { setLoading(false); } }; return ( - - - Personalizar header - theme.palette.grey[500] }}> - - - + + + + Personalizar + + + + - - {/* Colores */} - - Colores - + + {/* Colores */} + { - setHeaderColor(color); + setHeaderColorState(color); }} /> { - setHeaderFontColor(color); + setHeaderFontColorState(color); }} /> { - setHeaderFontShadowColor(color); + setHeaderFontShadowColorState(color); }} /> - - - - {/* Imagen */} - - Imagen de cabecera + {/* Imagen */} - + - - - {/* Botón guardar */} - - - - - + + + Guardar + + + + ); } diff --git a/txclient/src/app/landing/org/[oid]/page.tsx b/txclient/src/app/landing/org/[oid]/page.tsx index eff0b20..247d32d 100644 --- a/txclient/src/app/landing/org/[oid]/page.tsx +++ b/txclient/src/app/landing/org/[oid]/page.tsx @@ -591,11 +591,15 @@ export default function OrganizationPublicProfile() { return ( <> - {isOrgAdmin && oid && ( + {isOrgAdmin && oid && orgData && ( setShowEditPopup(false)} companyId={oid} + headerColor={orgData.headerColor} + headerFontColor={orgData.headerFontColor} + headerFontShadowColor={orgData.headerFontShadowColor} + headerImage={orgData.headerFile} onSaved={() => { setShowEditPopup(false); }}