@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
46 lines • 5.97 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { Avatar, Box, Button, Drawer, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mui/material";
import { ApiHelper, UserHelper } from "../../helpers";
export const SupportDrawer = (props) => {
const [open, setOpen] = useState(false);
const [supportContact, setSupportContact] = useState(null);
const [churchLogo, setChurchLogo] = useState(null);
const supportHref = "https://support.churchapps.org/";
let currentAppName = "";
currentAppName = props.appName.toLowerCase();
if (currentAppName === "b1admin")
currentAppName = "b1Admin";
const validateEmail = (email) => {
return email.match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
};
const handleChurchSupportClick = () => {
if (validateEmail(supportContact)) {
window.location.href = `mailto:${supportContact}`;
}
else {
window.open(`http://${supportContact}`, "_blank").focus();
}
};
const loadData = () => {
if (UserHelper?.currentUserChurch?.church?.id) {
ApiHelper.get("/settings/public/" + UserHelper.currentUserChurch.church.id, "MembershipApi").then((data) => {
const contactRes = data?.supportContact;
if (contactRes && contactRes !== "")
setSupportContact(contactRes);
const logoRes = data?.favicon_16x16;
if (logoRes && logoRes !== "")
setChurchLogo(logoRes);
});
}
};
useEffect(loadData, []);
return (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { color: "white !important", borderRadius: 2 }, onClick: () => setOpen(true), "aria-label": "Open support help", "data-testid": "support-help-button", children: _jsx(Icon, { sx: { fontSize: "26px !important" }, children: "help" }) }), _jsx(Drawer, { open: open, onClose: () => setOpen(false), anchor: "right", PaperProps: { sx: { width: { xs: "80%", sm: "40%", md: "30%", lg: "20%" } } }, children: _jsxs(Box, { sx: { paddingTop: 10, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: "98vh" }, children: [_jsxs(Box, { children: [supportContact ? (_jsx(Box, { sx: { display: "flex", justifyContent: "end", alignItems: "center" }, children: _jsxs(Box, { sx: { cursor: "pointer", display: "flex", justifyContent: "center", alignItems: "center", marginRight: 2, borderRadius: 2, padding: "7px", backgroundColor: "#e9e9e9" }, component: "div", onClick: () => handleChurchSupportClick(), children: [_jsx(Avatar, { variant: "rounded", src: churchLogo ? churchLogo : null, sx: { marginRight: 1, bgcolor: "#568bda", width: 25, height: 25 }, children: _jsx(Icon, { fontSize: "small", children: "church" }) }), _jsx(Typography, { sx: { color: "#568bda", fontSize: "13px" }, children: "Support" })] }) })) : null, _jsx(List, { children: _jsx(ListItem, { disablePadding: true, children: _jsxs(ListItemButton, { href: supportHref + currentAppName, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ListItemIcon, { sx: { minWidth: "38px" }, children: _jsx(Icon, { sx: { color: "#568bda" }, children: "article" }) }), _jsx(ListItemText, { sx: { color: "#568bda" }, children: "View Documentation" })] }) }) }), props?.relatedArticles?.length > 0 ? (_jsxs(Box, { sx: { marginTop: 2 }, children: [_jsx(Typography, { sx: { color: "#568bda", textDecoration: "underline", textUnderlineOffset: 10, textDecorationThickness: 2, marginLeft: 2 }, children: "Features Tour" }), _jsx(List, { sx: { marginTop: 1.5 }, children: props.relatedArticles.map((a) => {
const parts = a.split("/");
const lastPart = parts[parts.length - 1];
const result = lastPart.replace("-", " ");
return (_jsx(ListItem, { disablePadding: true, children: _jsxs(ListItemButton, { href: supportHref + a, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ListItemIcon, { sx: { minWidth: "35px" }, children: _jsx(Icon, { sx: { color: "#568bda" }, children: "play_circle" }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { color: "#568bda", textTransform: "capitalize" }, fontSize: "15px", children: result }) })] }) }));
}) })] })) : null] }), _jsxs(Box, { sx: { marginRight: 4, marginLeft: 4, marginTop: "auto" }, children: [_jsx("hr", { style: { color: "#568bda", borderColor: "#568bda", marginLeft: -13, marginRight: -13 } }), _jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", color: "#568bda", marginBottom: 1.5, marginTop: 1.5 }, children: [_jsx(Avatar, { src: "https://avatars.githubusercontent.com/u/74469593?s=200&v=4", variant: "rounded", sx: { width: 25, height: 25, marginRight: 1 }, children: "C" }), _jsx(Typography, { children: "ChurchApps" })] }), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 4, marginBottom: 1 }, children: [_jsx(Button, { variant: "contained", size: "small", startIcon: _jsx(Icon, { fontSize: "small", children: "mail" }), fullWidth: true, sx: { backgroundColor: "#568bda" }, href: "mailto:support@churchapps.org", children: "Support" }), _jsx(Button, { variant: "contained", size: "small", startIcon: _jsx(Icon, { fontSize: "small", children: "forum" }), fullWidth: true, sx: { backgroundColor: "#568bda" }, href: "https://github.com/orgs/ChurchApps/discussions", target: "_blank", rel: "noopener noreferrer", children: "Forum" })] })] })] }) })] }));
};
//# sourceMappingURL=SupportDrawer.js.map