first commit
This commit is contained in:
@@ -0,0 +1,224 @@
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import style from "./orgheader.module.css";
|
||||
import { MyOranizationsView } from "@core/Models/Company.model";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
import ResizeIcon from "@mui/icons-material/AspectRatio";
|
||||
import PaletteIcon from "@mui/icons-material/Palette";
|
||||
import { useMenuStore } from "@core/Store/Menu.Store";
|
||||
import {
|
||||
ORGANIZATION_HEADER_MODES,
|
||||
useOrganizationHeaderStore,
|
||||
} from "@store/OrganizationHeader.Store";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import classNames from "classnames";
|
||||
import { useNavigation } from "@core/app/hooks/goto";
|
||||
|
||||
import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import DialogContent from "@mui/material/DialogContent";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { getSlug } from "@core/app/helpers/Slug";
|
||||
import {
|
||||
FacebookShareButton,
|
||||
WhatsappShareButton,
|
||||
TwitterShareButton,
|
||||
EmailShareButton,
|
||||
TelegramShareButton,
|
||||
FacebookIcon,
|
||||
WhatsappIcon as WhatsAppShareIcon,
|
||||
TwitterIcon,
|
||||
EmailIcon,
|
||||
TelegramIcon
|
||||
} from "react-share";
|
||||
|
||||
export interface OrganizationHeaderParams {
|
||||
data: MyOranizationsView;
|
||||
}
|
||||
|
||||
export default function OrganizationHeader(props: OrganizationHeaderParams): React.ReactElement {
|
||||
const menu = useMenuStore();
|
||||
const organizationHeader = useOrganizationHeaderStore();
|
||||
const { goTo } = useNavigation();
|
||||
const [headerColor, setHeaderColor] = useState(props.data.headerColor);
|
||||
const [headerFontColor, setHeaderFontColor] = useState(props.data.headerFontColor);
|
||||
const [headerFontShadowColor, setHeaderFontShadowColor] = useState(
|
||||
props.data.headerFontShadowColor
|
||||
);
|
||||
const [showSharePopup, setShowSharePopup] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
menu.clear();
|
||||
|
||||
menu.add({
|
||||
text: "Perzonalizar",
|
||||
onClick: () => {
|
||||
goTo("/admin/org/profile/" + props.data.id + "/customize");
|
||||
},
|
||||
icon: <PaletteIcon />,
|
||||
});
|
||||
|
||||
menu.add({
|
||||
text: "Compartir",
|
||||
onClick: () => {
|
||||
setShowSharePopup(true);
|
||||
},
|
||||
icon: <ShareOutlinedIcon />,
|
||||
});
|
||||
|
||||
menu.divider();
|
||||
|
||||
menu.add({
|
||||
text: "Configuración Avanzada",
|
||||
onClick: () => {
|
||||
goTo("/admin/org/profile/" + props.data.id + "/advanced");
|
||||
},
|
||||
icon: <SettingsIcon />,
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setHeaderColor(organizationHeader.headerColor);
|
||||
setHeaderFontColor(organizationHeader.headerFontColor);
|
||||
setHeaderFontShadowColor(organizationHeader.headerFontShadowColor);
|
||||
}, [
|
||||
organizationHeader.headerColor,
|
||||
organizationHeader.headerFontColor,
|
||||
organizationHeader.headerFontShadowColor,
|
||||
]);
|
||||
|
||||
const getClassNames = () => {
|
||||
const classList: classNames.ArgumentArray = [];
|
||||
|
||||
classList.push(style.organizationHeader);
|
||||
|
||||
if (organizationHeader.state === ORGANIZATION_HEADER_MODES.LARGE) {
|
||||
classList.push(style.organizationHeaderLarge);
|
||||
} else if (organizationHeader.state === ORGANIZATION_HEADER_MODES.SMALL) {
|
||||
classList.push(style.organizationHeaderSmall);
|
||||
}
|
||||
|
||||
return classNames(classList);
|
||||
};
|
||||
|
||||
const getToggleClassNames = () => {
|
||||
const classList: classNames.ArgumentArray = [];
|
||||
|
||||
if (organizationHeader.state === ORGANIZATION_HEADER_MODES.LARGE) {
|
||||
classList.push(style.buttonTogleSizeLarge);
|
||||
} else if (organizationHeader.state === ORGANIZATION_HEADER_MODES.SMALL) {
|
||||
classList.push(style.buttonTogleSizeSmall);
|
||||
}
|
||||
|
||||
return classNames(classList);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={getClassNames()}
|
||||
style={{
|
||||
backgroundColor: headerColor || 'transparent',
|
||||
...(props.data.headerFile ? { backgroundImage: `url(${props.data.headerFile})` } : {}),
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h1
|
||||
style={{
|
||||
color: headerFontColor,
|
||||
textShadow: `1px 1px 2px ${headerFontShadowColor}`,
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
{props.data.name}
|
||||
</h1>
|
||||
<span
|
||||
style={{
|
||||
color: headerFontColor,
|
||||
textShadow: `2px 2px 2px ${headerFontShadowColor}`,
|
||||
}}
|
||||
>
|
||||
{props.data.description}
|
||||
</span>
|
||||
</div>
|
||||
<div> </div>
|
||||
</div>
|
||||
<div className={style.buttonMenu}>
|
||||
<IconButton
|
||||
aria-label="more"
|
||||
id="button-menu"
|
||||
aria-controls={menu.visible ? "tx-menu" : undefined}
|
||||
aria-expanded={menu.visible ? "true" : undefined}
|
||||
aria-haspopup="true"
|
||||
onClick={() => {
|
||||
menu.setAnchorEl(document.getElementById("button-menu")!);
|
||||
menu.show();
|
||||
}}
|
||||
sx={{
|
||||
color: headerFontColor,
|
||||
textShadow: `1px 1px 2px ${headerFontShadowColor}`,
|
||||
opacity: 0.8,
|
||||
}}
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className={getToggleClassNames()}>
|
||||
<IconButton
|
||||
aria-label="more"
|
||||
id="button-menu"
|
||||
aria-controls={menu.visible ? "tx-menu" : undefined}
|
||||
aria-expanded={menu.visible ? "true" : undefined}
|
||||
aria-haspopup="true"
|
||||
onClick={() => {
|
||||
organizationHeader.toggleState();
|
||||
}}
|
||||
sx={{
|
||||
color: headerFontColor,
|
||||
textShadow: `1px 1px 2px ${headerFontShadowColor}`,
|
||||
opacity: 0.8,
|
||||
}}
|
||||
>
|
||||
<ResizeIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
<Dialog open={showSharePopup} onClose={() => setShowSharePopup(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle sx={{ m: 0, p: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<span style={{ fontWeight: "bold" }}>Compartir Organización</span>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={() => setShowSharePopup(false)}
|
||||
sx={{ color: (theme) => theme.palette.grey[500] }}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<div style={{ textAlign: "center", marginBottom: "30px", fontSize: "16px", color: "var(--black-light)" }}>
|
||||
Compartí el perfil de <strong>{props.data.name}</strong> para que tus clientes puedan sacar turnos fácilmente.
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "center", flexDirection: "row", alignItems: "center", gap: "20px", paddingBottom: "20px" }}>
|
||||
<WhatsappShareButton title={"Reserva tu turno en " + props.data.name} separator=":: " url={window.location.origin + "/" + getSlug(props.data.name)}>
|
||||
<WhatsAppShareIcon size={54} round />
|
||||
</WhatsappShareButton>
|
||||
<FacebookShareButton title={"Reserva tu turno en " + props.data.name} url={window.location.origin + "/" + getSlug(props.data.name)}>
|
||||
<FacebookIcon size={54} round />
|
||||
</FacebookShareButton>
|
||||
<EmailShareButton title={"Reserva tu turno en " + props.data.name} separator=":: " url={window.location.origin + "/" + getSlug(props.data.name)}>
|
||||
<EmailIcon size={54} round />
|
||||
</EmailShareButton>
|
||||
<TelegramShareButton title={"Reserva tu turno en " + props.data.name} url={window.location.origin + "/" + getSlug(props.data.name)}>
|
||||
<TelegramIcon size={54} round />
|
||||
</TelegramShareButton>
|
||||
<TwitterShareButton title={"Reserva tu turno en " + props.data.name} url={window.location.origin + "/" + getSlug(props.data.name)}>
|
||||
<TwitterIcon size={54} round />
|
||||
</TwitterShareButton>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user