feat: permitir a admins personalizar header desde landing pública

- Nuevo endpoint POST /companies/check-admin para verificar rol de admin - Componente HeaderEditPopup con color pickers e image picker - Botón flotante de editar sobre el header cuando el usuario es admin - Popup tipo drawer inferior con formulario de personalización - Reutiliza APIs existentes: companies/update y companies/upload-header
2026-09-14 12:34:59 -03:00
parent ad44e775e2
commit 80d9f5d428
9 changed files with 322 additions and 1 deletions
@@ -0,0 +1,192 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Grid2, IconButton, Dialog, DialogContent, DialogTitle, Box, Divider } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import SaveIcon from "@mui/icons-material/Save";
+import { PopoverPicker } from "@components/ColorPicker/ColorPicker";
+import ImagePicker from "@components/ImagePicker/ImagePicker";
+import { useAlert } from "@core/Store/Alert.Store";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { useOrganizationHeaderStore } from "@core/Store/OrganizationHeader.Store";
+import { updateOrganizationsById, uploadHeaderImage } from "./Org.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+
+interface HeaderEditPopupProps {
+    open: boolean;
+    onClose: () => void;
+    companyId: string;
+    onSaved: () => void;
+}
+
+export default function HeaderEditPopup(props: HeaderEditPopupProps) {
+    const { open, onClose, companyId, 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 [loading, setLoading] = useState(false);
+
+    // Load current values from store when opening
+    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]);
+
+    const handleSaveColors = async () => {
+        setLoading(true);
+
+        try {
+            const updData: UpdateCompanyParams = {
+                id: companyId,
+                headerColor: headerColor,
+                headerFontColor: headerFontColor,
+                headerFontShadowColor: headerFontShadowColor,
+                sessionUser: SessionInfo.userId,
+            };
+
+            await updateOrganizationsById(updData);
+
+            // Update the header store so colors apply immediately
+            organizationHeader.setHeaderColor(headerColor);
+            organizationHeader.setHeaderFontColor(headerFontColor);
+            organizationHeader.setHeaderFontShadowColor(headerFontShadowColor);
+
+            alert.showSuccess("Colores actualizados");
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar los colores";
+            alert.showError(formatted || "Error al guardar los colores");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSaveImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setLoading(true);
+
+        try {
+            const formData = new FormData();
+            formData.append("companyId", companyId);
+            formData.append("sessionUser", SessionInfo.userId);
+            formData.append("file", file);
+
+            await uploadHeaderImage(formData);
+            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);
+        }
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="sm"
+            fullWidth
+            PaperProps={{
+                sx: {
+                    borderRadius: "16px 16px 0 0",
+                    borderTop: "none",
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    maxHeight: "85vh",
+                    overflow: "auto",
+                },
+            }}
+        >
+            <DialogTitle sx={{ m: 0, p: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                <span style={{ fontWeight: "bold" }}>Personalizar header</span>
+                <IconButton onClick={onClose} sx={{ color: (theme) => theme.palette.grey[500] }}>
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+
+            <DialogContent dividers sx={{ p: 3 }}>
+                {/* Colores */}
+                <Box mb={3}>
+                    <Box fontWeight="bold" mb={1.5}>Colores</Box>
+                    <Grid2 container spacing={2}>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fondo"
+                                color={headerColor}
+                                onChange={(color: string) => {
+                                    setHeaderColor(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fuente"
+                                color={headerFontColor}
+                                onChange={(color: string) => {
+                                    setHeaderFontColor(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Sombra"
+                                color={headerFontShadowColor}
+                                onChange={(color: string) => {
+                                    setHeaderFontShadowColor(color);
+                                }}
+                            />
+                        </Grid2>
+                    </Grid2>
+                </Box>
+
+                <Divider sx={{ my: 2 }} />
+
+                {/* Imagen */}
+                <Box mb={3}>
+                    <Box fontWeight="bold" mb={1.5}>Imagen de cabecera</Box>
+                    <ImagePicker
+                        src={headerImage}
+                        alt="Cabecera"
+                        style={{ width: "100%", height: "120px", borderRadius: "8px" }}
+                        readOnly={false}
+                        onChange={handleSaveImage}
+                        imageSizeSrc="/org-header-size.webp"
+                        mbLimit={5}
+                    />
+                </Box>
+
+                <Divider sx={{ my: 2 }} />
+
+                {/* Botón guardar */}
+                <Box display="flex" justifyContent="flex-end" gap={2}>
+                    <IconButton color="inherit" onClick={onClose} disabled={loading}>
+                        <CloseIcon />
+                    </IconButton>
+                    <IconButton
+                        color="primary"
+                        onClick={handleSaveColors}
+                        disabled={loading}
+                        sx={{ fontWeight: "bold" }}
+                    >
+                        <SaveIcon />
+                    </IconButton>
+                </Box>
+            </DialogContent>
+        </Dialog>
+    );
+}
@@ -0,0 +1,13 @@
+import ApiRequest from "@services/Api.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+import { ApiVoidResult } from "@models/Api.VoidResult.type";
+
+export const updateOrganizationsById = async (
+    data: UpdateCompanyParams
+): Promise<ApiVoidResult> => {
+    return ApiRequest.post<ApiVoidResult>("companies/update", data);
+};
+
+export const uploadHeaderImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("companies/upload-header", data);
+};
@@ -45,7 +45,9 @@ export default async function OrganizationPublicProfile({ params, children }: Pr
            <div className="homeCentered">
                {orgData.id && (
                    <>
-                        <OrganizationHeader organization={orgData} />
+                        <div style={{ position: "relative" }} id="header-wrapper">
+                            <OrganizationHeader organization={orgData} />
+                        </div>
                        <OrganizationDataConnector orgData={orgData} />
                        <div>{children}</div>
                    </>
@@ -61,6 +61,9 @@ import { useConfirmStore } from "@core/Store/Confirm.Store";
 import ReviewsCarousel from "@core/app/components/ReviewsCarousel/ReviewsCarousel";
 import OrganizationProfessionals from "@core/app/components/OrganizationProfessionals/OrganizationProfessionals";
 import { RatingTargetType } from "@core/Models/Ratings.model";
+import HeaderEditPopup from "./HeaderEditPopup";
+import { checkOrgAdmin } from "./post.service";
+import { IconButton as MuiIconButton } from "@mui/material";

 enum VIEW {
    POSTS = "posts",
@@ -96,6 +99,47 @@ export default function OrganizationPublicProfile() {
    const [posts, setPosts] = useState<IPost[]>([]);
    const [authorizedUsers, setAuthorizedUsers] = useState<string[]>([]);
    const [currentPage, setCurrentPage] = useState<number>(1);
+    const [isOrgAdmin, setIsOrgAdmin] = useState<boolean>(false);
+    const [showEditPopup, setShowEditPopup] = useState<boolean>(false);
+
+    // Append edit button to header wrapper when admin
+    useEffect(() => {
+        if (!isOrgAdmin) return;
+
+        const wrapper = document.getElementById("header-wrapper");
+        if (!wrapper) return;
+
+        const btn = document.createElement("div");
+        btn.id = "edit-header-btn";
+        btn.innerHTML = `
+            <button style="
+                position: absolute;
+                top: 12px;
+                right: 12px;
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                background: rgba(0,0,0,0.45);
+                color: white;
+                border: none;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 100;
+                transition: background 0.2s;
+            " onmouseover="this.style.background='rgba(0,0,0,0.7)'" onmouseout="this.style.background='rgba(0,0,0,0.45)'">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            </button>
+        `;
+        btn.querySelector("button")!.addEventListener("click", () => setShowEditPopup(true));
+        wrapper.appendChild(btn);
+
+        return () => {
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+        };
+    }, [isOrgAdmin]);

    const SessionInfo = useSessionStore();
    const eventHandler = useEventHandlerStore();
@@ -139,6 +183,22 @@ export default function OrganizationPublicProfile() {
        });
    }, [SessionInfo, authorizedUsers]);

+    // Check if the logged-in user is admin of this organization
+    useEffect(() => {
+        if (!SessionInfo.userId || !oid) {
+            setIsOrgAdmin(false);
+            return;
+        }
+
+        checkOrgAdmin(oid, SessionInfo.userId)
+            .then((isAdmin) => {
+                setIsOrgAdmin(isAdmin);
+            })
+            .catch(() => {
+                setIsOrgAdmin(false);
+            });
+    }, [SessionInfo.userId, oid]);
+
    useEffect(() => {
        if (!OrganizationData.orgData) return;
        if (!oid) return; //if (!OrganizationData.orgData.id) return;
@@ -531,6 +591,16 @@ export default function OrganizationPublicProfile() {
    return (
        <>
            <HeaderConfProvider />
+            {isOrgAdmin && oid && (
+                <HeaderEditPopup
+                    open={showEditPopup}
+                    onClose={() => setShowEditPopup(false)}
+                    companyId={oid}
+                    onSaved={() => {
+                        setShowEditPopup(false);
+                    }}
+                />
+            )}
            {orgData && (
                <div className={style.organizationContent}>
                    {showEditor && (
@@ -65,3 +65,7 @@ export const toggleFixedPost = async (data: FixCompanyPostParams): Promise<void>
 export const moveFixedPost = async (data: MoveCompanyFixedPostParams): Promise<void> => {
    return ApiRequest.post<void>("companies/move-fixed-post", data);
 };
+
+export const checkOrgAdmin = async (companyId: string, sessionUser: string): Promise<boolean> => {
+    return ApiRequest.post<boolean>("companies/check-admin", { companyId, sessionUser });
+};