@churchapps/apphelper 0.4.50 → 0.5.0

package/src/components/header/SiteHeader.tsx

@@ -1,207 +1,207 @@
-import React from "react";
-import { AppBar, Link, styled, Toolbar } from "@mui/material";
-import { UserMenu } from "../wrapper/UserMenu";
-import { PersonHelper } from "../../helpers/PersonHelper";
-import { PrimaryMenu } from "./PrimaryMenu";
-import { SecondaryMenu } from "./SecondaryMenu";
-import { SecondaryMenuAlt } from "./SecondaryMenuAlt";
-import { SupportDrawer } from "./SupportDrawer";
-import { UserContextInterface } from "@churchapps/helpers";
-import { NotificationService } from "../../helpers/NotificationService";
-
-type Props = {
-  primaryMenuLabel: string;
-  primaryMenuItems:{ url: string, icon:string, label: string }[];
-  secondaryMenuLabel: string;
-  secondaryMenuItems:{ url: string, label: string }[];
-  context: UserContextInterface;
-  appName: string;
-  onNavigate: (url: string) => void;
-}
-
-export const SiteHeader = React.memo((props:Props) => {
-  // Initialize NotificationService without subscribing to count changes to prevent re-renders
-  React.useEffect(() => {
-    const initializeNotifications = async () => {
-      if (props.context?.person?.id && props.context?.userChurch?.church?.id) {
-        const service = NotificationService.getInstance();
-        await service.initialize(props.context);
-      }
-    };
-    
-    initializeNotifications();
-  }, [props.context?.person?.id, props.context?.userChurch?.church?.id]);
-  
-  const refresh = React.useCallback(async () => {
-    // Direct access to NotificationService for refresh functionality
-    await NotificationService.getInstance().refresh();
-  }, []);
-  
-  // Memoize userName to prevent recreation
-  const userName = React.useMemo(() => {
-    if (props.context?.user) {
-      return `${props.context.user.firstName} ${props.context.user.lastName}`;
-    }
-    return '';
-  }, [props.context?.user?.firstName, props.context?.user?.lastName]);
-  
-  // Memoize profilePicture URL
-  const profilePicture = React.useMemo(() => {
-    return PersonHelper.getPhotoUrl(props.context?.person);
-  }, [props.context?.person]);
-  
-  // Create a stable context object to prevent UserMenu recreation
-  const stableContext = React.useMemo(() => {
-    console.log('SiteHeader - Creating stableContext');
-    console.log('SiteHeader - props.context:', props.context);
-    console.log('SiteHeader - props.context.userChurches:', props.context?.userChurches);
-    
-    if (!props.context) return undefined;
-    
-    return {
-      user: props.context.user,
-      person: props.context.person,
-      userChurch: props.context.userChurch,
-      userChurches: props.context.userChurches,
-      setUser: props.context.setUser,
-      setPerson: props.context.setPerson,
-      setUserChurch: props.context.setUserChurch,
-      setUserChurches: props.context.setUserChurches
-    };
-  }, [
-    props.context?.user?.id,
-    props.context?.user?.firstName,
-    props.context?.user?.lastName,
-    props.context?.person?.id,
-    props.context?.userChurch?.church?.id,
-    props.context?.userChurches,
-    props.context?.setUser,
-    props.context?.setPerson,
-    props.context?.setUserChurch,
-    props.context?.setUserChurches
-  ]);
-
-  const CustomAppBar = styled(AppBar)(
-    ({ theme }) => ({
-      zIndex: theme.zIndex.drawer + 1,
-      backgroundColor: "var(--c1, #1565C0)",
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      }),
-      "& .MuiIcon-root": { color: "#FFFFFF" }
-    })
-  );
-
-  const getRelatedArticles = () => {
-    let result: any [] = [];
-    if (props.appName === "CHUMS") {
-      if (props.primaryMenuLabel === "People") {
-        if (props.secondaryMenuLabel === "People") result = ["chums/adding-people", "chums/advanced-search", "chums/assigning-roles"];
-        else if (props.secondaryMenuLabel === "Groups") result = ["chums/group-roster", "chums/groups", "chums/group-calendar"];
-        else if (props.secondaryMenuLabel === "Attendance") result = ["chums/attendance", "chums/checkin"];
-      }
-      else if (props.primaryMenuLabel === "Donations") {
-        if (props.secondaryMenuLabel === "Summary") result = ["chums/donation-report"];
-        else if (props.secondaryMenuLabel === "Batches" || props.secondaryMenuLabel === "Funds") result = ["chums/giving", "chums/manual-input"];
-      }
-      else if (props.primaryMenuLabel === "Serving") {
-        if (props.secondaryMenuLabel === "Plans") result = ["chums/plans"];
-        else if (props.secondaryMenuLabel === "Tasks") result = ["chums/tasks", "chums/automations"];
-      }
-      else if (props.primaryMenuLabel === "Settings") {
-        if (props.secondaryMenuLabel === "Settings") result = ["chums/assigning-roles", "chums/exporting-data", "chums/import-csv", "chums/import-from-breeze"];
-        else if (props.secondaryMenuLabel === "Forms") result = ["chums/forms"];
-      }
-    } else if (props.appName === "B1") {
-      if (props.primaryMenuLabel === "Mobile App") result = ["b1/admin/portal", "b1/mobile/setup"];
-      else if (props.primaryMenuLabel === "Website") result = ["b1/admin/portal", "b1/admin/website-elements", "b1/admin/website-setup"];
-      else if (props.primaryMenuLabel === "Sermons") result = ["b1/admin/sermons", "b1/admin/stream-setup"];
-      else if (props.primaryMenuLabel === "Calendars") result = ["b1/portal/calendars"];
-    }
-    return result;
-  }
-
-  /*<Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>*/
-  return (<>
-    <div id="site-header" style={{
-      '--c1': '#1565C0',
-      '--c1d1': '#1358AD', 
-      '--c1d2': '#114A99',
-      '--c1l2': '#568BDA',
-      backgroundColor:"var(--c1)", 
-      color: "#FFF"
-    } as React.CSSProperties}>
-      <CustomAppBar id="site-app-bar" position="absolute">
-        <Toolbar id="site-toolbar" sx={{ pr: "24px", backgroundColor: "var(--c1)", minHeight: "64px !important" }}>
-          <PrimaryMenu label={props.primaryMenuLabel} menuItems={props.primaryMenuItems} onNavigate={props.onNavigate} />
-          <SecondaryMenu label={props.secondaryMenuLabel} menuItems={props.secondaryMenuItems} onNavigate={props.onNavigate} />
-          <div id="secondary-menu-container" style={{ flex: 1 }}>
-            <SecondaryMenuAlt label={props.secondaryMenuLabel} menuItems={props.secondaryMenuItems} onNavigate={props.onNavigate} />
-          </div>
-          {props.context?.user?.id && (
-            <UserMenu 
-              key="user-menu-stable" 
-              profilePicture={profilePicture} 
-              userName={userName} 
-              context={stableContext} 
-              appName={props.appName} 
-              loadCounts={refresh} 
-              notificationCounts={{notificationCount: 0, pmCount: 0}} 
-              onNavigate={props.onNavigate} 
-            />
-          )}
-          {!props.context?.user?.id && <Link id="login-link" href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
-          <SupportDrawer appName={props.appName} relatedArticles={getRelatedArticles()} />
-        </Toolbar>
-      </CustomAppBar>
-      <div id="app-bar-spacer" style={{ height: '64px' }}></div>
-    </div>
-  </>
-  );
-}, (prevProps, nextProps) => {
-  // Custom comparison to prevent unnecessary re-renders
-  
-  // Check if essential props have changed
-  if (prevProps.primaryMenuLabel !== nextProps.primaryMenuLabel ||
-      prevProps.secondaryMenuLabel !== nextProps.secondaryMenuLabel ||
-      prevProps.appName !== nextProps.appName) {
-    return false;
-  }
-  
-  // Check if menu items arrays have changed (shallow comparison)
-  if (prevProps.primaryMenuItems?.length !== nextProps.primaryMenuItems?.length ||
-      prevProps.secondaryMenuItems?.length !== nextProps.secondaryMenuItems?.length) {
-    return false;
-  }
-  
-  // Check if user context has actually changed (deep comparison of essential parts)
-  const prevUser = prevProps.context?.user;
-  const nextUser = nextProps.context?.user;
-  
-  if (prevUser?.id !== nextUser?.id ||
-      prevUser?.firstName !== nextUser?.firstName ||
-      prevUser?.lastName !== nextUser?.lastName) {
-    return false;
-  }
-  
-  // Check if person context has changed
-  if (prevProps.context?.person?.id !== nextProps.context?.person?.id) {
-    return false;
-  }
-  
-  // Check if church context has changed
-  if (prevProps.context?.userChurch?.church?.id !== nextProps.context?.userChurch?.church?.id) {
-    return false;
-  }
-  
-  // Check if onNavigate function reference has changed
-  if (prevProps.onNavigate !== nextProps.onNavigate) {
-    return false;
-  }
-  
-  // All essential props are the same, skip re-render
-  return true;
-});
-
-SiteHeader.displayName = 'SiteHeader';
+import React from "react";
+import { AppBar, Link, styled, Toolbar } from "@mui/material";
+import { UserMenu } from "../wrapper/UserMenu";
+import { PersonHelper } from "../../helpers/PersonHelper";
+import { PrimaryMenu } from "./PrimaryMenu";
+import { SecondaryMenu } from "./SecondaryMenu";
+import { SecondaryMenuAlt } from "./SecondaryMenuAlt";
+import { SupportDrawer } from "./SupportDrawer";
+import { UserContextInterface } from "@churchapps/helpers";
+import { NotificationService } from "../../helpers/NotificationService";
+
+type Props = {
+  primaryMenuLabel: string;
+  primaryMenuItems:{ url: string, icon:string, label: string }[];
+  secondaryMenuLabel: string;
+  secondaryMenuItems:{ url: string, label: string }[];
+  context: UserContextInterface;
+  appName: string;
+  onNavigate: (url: string) => void;
+}
+
+export const SiteHeader = React.memo((props:Props) => {
+  // Initialize NotificationService without subscribing to count changes to prevent re-renders
+  React.useEffect(() => {
+    const initializeNotifications = async () => {
+      if (props.context?.person?.id && props.context?.userChurch?.church?.id) {
+        const service = NotificationService.getInstance();
+        await service.initialize(props.context);
+      }
+    };
+    
+    initializeNotifications();
+  }, [props.context?.person?.id, props.context?.userChurch?.church?.id]);
+  
+  const refresh = React.useCallback(async () => {
+    // Direct access to NotificationService for refresh functionality
+    await NotificationService.getInstance().refresh();
+  }, []);
+  
+  // Memoize userName to prevent recreation
+  const userName = React.useMemo(() => {
+    if (props.context?.user) {
+      return `${props.context.user.firstName} ${props.context.user.lastName}`;
+    }
+    return '';
+  }, [props.context?.user?.firstName, props.context?.user?.lastName]);
+  
+  // Memoize profilePicture URL
+  const profilePicture = React.useMemo(() => {
+    return PersonHelper.getPhotoUrl(props.context?.person);
+  }, [props.context?.person]);
+  
+  // Create a stable context object to prevent UserMenu recreation
+  const stableContext = React.useMemo(() => {
+    console.log('SiteHeader - Creating stableContext');
+    console.log('SiteHeader - props.context:', props.context);
+    console.log('SiteHeader - props.context.userChurches:', props.context?.userChurches);
+    
+    if (!props.context) return undefined;
+    
+    return {
+      user: props.context.user,
+      person: props.context.person,
+      userChurch: props.context.userChurch,
+      userChurches: props.context.userChurches,
+      setUser: props.context.setUser,
+      setPerson: props.context.setPerson,
+      setUserChurch: props.context.setUserChurch,
+      setUserChurches: props.context.setUserChurches
+    };
+  }, [
+    props.context?.user?.id,
+    props.context?.user?.firstName,
+    props.context?.user?.lastName,
+    props.context?.person?.id,
+    props.context?.userChurch?.church?.id,
+    props.context?.userChurches,
+    props.context?.setUser,
+    props.context?.setPerson,
+    props.context?.setUserChurch,
+    props.context?.setUserChurches
+  ]);
+
+  const CustomAppBar = styled(AppBar)(
+    ({ theme }) => ({
+      zIndex: theme.zIndex.drawer + 1,
+      backgroundColor: "var(--c1, #1565C0)",
+      transition: theme.transitions.create(["width", "margin"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen
+      }),
+      "& .MuiIcon-root": { color: "#FFFFFF" }
+    })
+  );
+
+  const getRelatedArticles = () => {
+    let result: any [] = [];
+    if (props.appName === "CHUMS") {
+      if (props.primaryMenuLabel === "People") {
+        if (props.secondaryMenuLabel === "People") result = ["chums/adding-people", "chums/advanced-search", "chums/assigning-roles"];
+        else if (props.secondaryMenuLabel === "Groups") result = ["chums/group-roster", "chums/groups", "chums/group-calendar"];
+        else if (props.secondaryMenuLabel === "Attendance") result = ["chums/attendance", "chums/checkin"];
+      }
+      else if (props.primaryMenuLabel === "Donations") {
+        if (props.secondaryMenuLabel === "Summary") result = ["chums/donation-report"];
+        else if (props.secondaryMenuLabel === "Batches" || props.secondaryMenuLabel === "Funds") result = ["chums/giving", "chums/manual-input"];
+      }
+      else if (props.primaryMenuLabel === "Serving") {
+        if (props.secondaryMenuLabel === "Plans") result = ["chums/plans"];
+        else if (props.secondaryMenuLabel === "Tasks") result = ["chums/tasks", "chums/automations"];
+      }
+      else if (props.primaryMenuLabel === "Settings") {
+        if (props.secondaryMenuLabel === "Settings") result = ["chums/assigning-roles", "chums/exporting-data", "chums/import-csv", "chums/import-from-breeze"];
+        else if (props.secondaryMenuLabel === "Forms") result = ["chums/forms"];
+      }
+    } else if (props.appName === "B1") {
+      if (props.primaryMenuLabel === "Mobile App") result = ["b1/admin/portal", "b1/mobile/setup"];
+      else if (props.primaryMenuLabel === "Website") result = ["b1/admin/portal", "b1/admin/website-elements", "b1/admin/website-setup"];
+      else if (props.primaryMenuLabel === "Sermons") result = ["b1/admin/sermons", "b1/admin/stream-setup"];
+      else if (props.primaryMenuLabel === "Calendars") result = ["b1/portal/calendars"];
+    }
+    return result;
+  }
+
+  /*<Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>*/
+  return (<>
+    <div id="site-header" style={{
+      '--c1': '#1565C0',
+      '--c1d1': '#1358AD', 
+      '--c1d2': '#114A99',
+      '--c1l2': '#568BDA',
+      backgroundColor:"var(--c1)", 
+      color: "#FFF"
+    } as React.CSSProperties}>
+      <CustomAppBar id="site-app-bar" position="absolute">
+        <Toolbar id="site-toolbar" sx={{ pr: "24px", backgroundColor: "var(--c1)", minHeight: "64px !important" }}>
+          <PrimaryMenu label={props.primaryMenuLabel} menuItems={props.primaryMenuItems} onNavigate={props.onNavigate} />
+          <SecondaryMenu label={props.secondaryMenuLabel} menuItems={props.secondaryMenuItems} onNavigate={props.onNavigate} />
+          <div id="secondary-menu-container" style={{ flex: 1 }}>
+            <SecondaryMenuAlt label={props.secondaryMenuLabel} menuItems={props.secondaryMenuItems} onNavigate={props.onNavigate} />
+          </div>
+          {props.context?.user?.id && (
+            <UserMenu 
+              key="user-menu-stable" 
+              profilePicture={profilePicture} 
+              userName={userName} 
+              context={stableContext} 
+              appName={props.appName} 
+              loadCounts={refresh} 
+              notificationCounts={{notificationCount: 0, pmCount: 0}} 
+              onNavigate={props.onNavigate} 
+            />
+          )}
+          {!props.context?.user?.id && <Link id="login-link" href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
+          <SupportDrawer appName={props.appName} relatedArticles={getRelatedArticles()} />
+        </Toolbar>
+      </CustomAppBar>
+      <div id="app-bar-spacer" style={{ height: '64px' }}></div>
+    </div>
+  </>
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison to prevent unnecessary re-renders
+  
+  // Check if essential props have changed
+  if (prevProps.primaryMenuLabel !== nextProps.primaryMenuLabel ||
+      prevProps.secondaryMenuLabel !== nextProps.secondaryMenuLabel ||
+      prevProps.appName !== nextProps.appName) {
+    return false;
+  }
+  
+  // Check if menu items arrays have changed (shallow comparison)
+  if (prevProps.primaryMenuItems?.length !== nextProps.primaryMenuItems?.length ||
+      prevProps.secondaryMenuItems?.length !== nextProps.secondaryMenuItems?.length) {
+    return false;
+  }
+  
+  // Check if user context has actually changed (deep comparison of essential parts)
+  const prevUser = prevProps.context?.user;
+  const nextUser = nextProps.context?.user;
+  
+  if (prevUser?.id !== nextUser?.id ||
+      prevUser?.firstName !== nextUser?.firstName ||
+      prevUser?.lastName !== nextUser?.lastName) {
+    return false;
+  }
+  
+  // Check if person context has changed
+  if (prevProps.context?.person?.id !== nextProps.context?.person?.id) {
+    return false;
+  }
+  
+  // Check if church context has changed
+  if (prevProps.context?.userChurch?.church?.id !== nextProps.context?.userChurch?.church?.id) {
+    return false;
+  }
+  
+  // Check if onNavigate function reference has changed
+  if (prevProps.onNavigate !== nextProps.onNavigate) {
+    return false;
+  }
+  
+  // All essential props are the same, skip re-render
+  return true;
+});
+
+SiteHeader.displayName = 'SiteHeader';

package/src/components/header/SupportDrawer.tsx

@@ -1,111 +1,111 @@
-import React, { 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";
-
-type Props = {
-  appName: string;
-  relatedArticles?: string[];
-};
-
-export const SupportDrawer = (props: Props) => {
-  const [open, setOpen] = useState<boolean>(false);
-  const [supportContact, setSupportContact] = useState<string>(null);
-  const [churchLogo, setChurchLogo] = useState<string>(null);
-  const supportHref = "https://support.churchapps.org/";
-
-  let currentAppName = "";
-  if (props.appName === "CHUMS") currentAppName = "chums";
-  if (props.appName === "B1") currentAppName = "b1";
-
-  const validateEmail = (email: string) => {
-    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: any) => {
-        const contactRes = data?.supportContact;
-        if (contactRes && contactRes !== "") setSupportContact(contactRes);
-        
-        const logoRes = data?.favicon_16x16;
-        if (logoRes && logoRes !== "") setChurchLogo(logoRes);
-      });
-    }
-  };
-
-  useEffect(loadData, []);
-
-  return (
-    <>
-      <IconButton sx={{ color: "white !important", borderRadius: 2 }} onClick={() => setOpen(true)} aria-label="Open support help" data-testid="support-help-button">
-        <Icon sx={{ fontSize: "26px !important" }}>help</Icon>
-      </IconButton>
-      <Drawer open={open} onClose={() => setOpen(false)} anchor="right" PaperProps={{ sx: { width: { xs: "80%", sm: "40%", md: "30%", lg: "20%" } } }}>
-        <Box
-          sx={{ paddingTop: 10, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: "98vh" }}>
-          <Box>
-            {supportContact ? (
-              <Box sx={{ display: "flex", justifyContent: "end", alignItems: "center" }}>
-                <Box sx={{ cursor: "pointer", display: "flex", justifyContent: "center", alignItems: "center", marginRight: 2, borderRadius: 2, padding: "7px", backgroundColor: "#e9e9e9" }} component="div" onClick={() => handleChurchSupportClick()}>
-                  <Avatar variant="rounded" src={churchLogo ? churchLogo : null} sx={{ marginRight: 1, bgcolor: "#568bda", width: 25, height: 25 }}>
-                    <Icon fontSize="small">church</Icon>
-                  </Avatar>
-                  <Typography sx={{ color: "#568bda", fontSize: "13px" }}>Support</Typography>
-                </Box>
-              </Box>
-            ) : null}
-            <List>
-              <ListItem disablePadding>
-                <ListItemButton href={supportHref + currentAppName} target="_blank" rel="noopener noreferrer">
-                  <ListItemIcon sx={{ minWidth: "38px" }}><Icon sx={{ color: "#568bda" }}>article</Icon></ListItemIcon>
-                  <ListItemText sx={{ color: "#568bda" }}>View Documentation</ListItemText>
-                </ListItemButton>
-              </ListItem>
-            </List>
-            {props?.relatedArticles?.length > 0 ? (
-              <Box sx={{ marginTop: 2 }}>
-                <Typography sx={{ color: "#568bda", textDecoration: "underline", textUnderlineOffset: 10, textDecorationThickness: 2, marginLeft: 2 }}>Features Tour</Typography>
-                <List sx={{ marginTop: 1.5 }}>
-                  {props.relatedArticles.map((a) => {
-                    const parts = a.split("/");
-                    const lastPart = parts[parts.length - 1];
-                    const result = lastPart.replace("-", " ");
-                    return (
-                      <ListItem disablePadding>
-                        <ListItemButton href={supportHref + a} target="_blank" rel="noopener noreferrer">
-                          <ListItemIcon sx={{ minWidth: "35px" }}><Icon sx={{ color: "#568bda" }}>play_circle</Icon></ListItemIcon>
-                          <ListItemText><Typography sx={{ color: "#568bda", textTransform: "capitalize" }} fontSize="15px">{result}</Typography></ListItemText>
-                        </ListItemButton>
-                      </ListItem>
-                    );
-                  })}
-                </List>
-              </Box>
-            ) : null}
-          </Box>
-          <Box sx={{ marginRight: 4, marginLeft: 4, marginTop: "auto" }}>
-            <hr style={{ color: "#568bda", borderColor: "#568bda", marginLeft: -13, marginRight: -13 }} />
-            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", color: "#568bda", marginBottom: 1.5, marginTop: 1.5 }}>
-              <Avatar src="https://avatars.githubusercontent.com/u/74469593?s=200&v=4" variant="rounded" sx={{ width: 25, height: 25, marginRight: 1 }}>C</Avatar>
-              <Typography>ChurchApps</Typography>
-            </Box>
-            <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 4, marginBottom: 1 }}>
-              <Button variant="contained" size="small" startIcon={<Icon fontSize="small">mail</Icon>} fullWidth sx={{ backgroundColor: "#568bda" }} href="mailto:support@livecs.org">Support</Button>
-              <Button variant="contained" size="small" startIcon={<Icon fontSize="small">forum</Icon>} fullWidth sx={{ backgroundColor: "#568bda" }} href="https://github.com/orgs/ChurchApps/discussions" target="_blank" rel="noopener noreferrer">Forum</Button>
-            </Box>
-          </Box>
-        </Box>
-      </Drawer>
-    </>
-  );
-};
+import React, { 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";
+
+type Props = {
+  appName: string;
+  relatedArticles?: string[];
+};
+
+export const SupportDrawer = (props: Props) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [supportContact, setSupportContact] = useState<string>(null);
+  const [churchLogo, setChurchLogo] = useState<string>(null);
+  const supportHref = "https://support.churchapps.org/";
+
+  let currentAppName = "";
+  if (props.appName === "CHUMS") currentAppName = "chums";
+  if (props.appName === "B1") currentAppName = "b1";
+
+  const validateEmail = (email: string) => {
+    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: any) => {
+        const contactRes = data?.supportContact;
+        if (contactRes && contactRes !== "") setSupportContact(contactRes);
+        
+        const logoRes = data?.favicon_16x16;
+        if (logoRes && logoRes !== "") setChurchLogo(logoRes);
+      });
+    }
+  };
+
+  useEffect(loadData, []);
+
+  return (
+    <>
+      <IconButton sx={{ color: "white !important", borderRadius: 2 }} onClick={() => setOpen(true)} aria-label="Open support help" data-testid="support-help-button">
+        <Icon sx={{ fontSize: "26px !important" }}>help</Icon>
+      </IconButton>
+      <Drawer open={open} onClose={() => setOpen(false)} anchor="right" PaperProps={{ sx: { width: { xs: "80%", sm: "40%", md: "30%", lg: "20%" } } }}>
+        <Box
+          sx={{ paddingTop: 10, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: "98vh" }}>
+          <Box>
+            {supportContact ? (
+              <Box sx={{ display: "flex", justifyContent: "end", alignItems: "center" }}>
+                <Box sx={{ cursor: "pointer", display: "flex", justifyContent: "center", alignItems: "center", marginRight: 2, borderRadius: 2, padding: "7px", backgroundColor: "#e9e9e9" }} component="div" onClick={() => handleChurchSupportClick()}>
+                  <Avatar variant="rounded" src={churchLogo ? churchLogo : null} sx={{ marginRight: 1, bgcolor: "#568bda", width: 25, height: 25 }}>
+                    <Icon fontSize="small">church</Icon>
+                  </Avatar>
+                  <Typography sx={{ color: "#568bda", fontSize: "13px" }}>Support</Typography>
+                </Box>
+              </Box>
+            ) : null}
+            <List>
+              <ListItem disablePadding>
+                <ListItemButton href={supportHref + currentAppName} target="_blank" rel="noopener noreferrer">
+                  <ListItemIcon sx={{ minWidth: "38px" }}><Icon sx={{ color: "#568bda" }}>article</Icon></ListItemIcon>
+                  <ListItemText sx={{ color: "#568bda" }}>View Documentation</ListItemText>
+                </ListItemButton>
+              </ListItem>
+            </List>
+            {props?.relatedArticles?.length > 0 ? (
+              <Box sx={{ marginTop: 2 }}>
+                <Typography sx={{ color: "#568bda", textDecoration: "underline", textUnderlineOffset: 10, textDecorationThickness: 2, marginLeft: 2 }}>Features Tour</Typography>
+                <List sx={{ marginTop: 1.5 }}>
+                  {props.relatedArticles.map((a) => {
+                    const parts = a.split("/");
+                    const lastPart = parts[parts.length - 1];
+                    const result = lastPart.replace("-", " ");
+                    return (
+                      <ListItem disablePadding>
+                        <ListItemButton href={supportHref + a} target="_blank" rel="noopener noreferrer">
+                          <ListItemIcon sx={{ minWidth: "35px" }}><Icon sx={{ color: "#568bda" }}>play_circle</Icon></ListItemIcon>
+                          <ListItemText><Typography sx={{ color: "#568bda", textTransform: "capitalize" }} fontSize="15px">{result}</Typography></ListItemText>
+                        </ListItemButton>
+                      </ListItem>
+                    );
+                  })}
+                </List>
+              </Box>
+            ) : null}
+          </Box>
+          <Box sx={{ marginRight: 4, marginLeft: 4, marginTop: "auto" }}>
+            <hr style={{ color: "#568bda", borderColor: "#568bda", marginLeft: -13, marginRight: -13 }} />
+            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", color: "#568bda", marginBottom: 1.5, marginTop: 1.5 }}>
+              <Avatar src="https://avatars.githubusercontent.com/u/74469593?s=200&v=4" variant="rounded" sx={{ width: 25, height: 25, marginRight: 1 }}>C</Avatar>
+              <Typography>ChurchApps</Typography>
+            </Box>
+            <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 4, marginBottom: 1 }}>
+              <Button variant="contained" size="small" startIcon={<Icon fontSize="small">mail</Icon>} fullWidth sx={{ backgroundColor: "#568bda" }} href="mailto:support@livecs.org">Support</Button>
+              <Button variant="contained" size="small" startIcon={<Icon fontSize="small">forum</Icon>} fullWidth sx={{ backgroundColor: "#568bda" }} href="https://github.com/orgs/ChurchApps/discussions" target="_blank" rel="noopener noreferrer">Forum</Button>
+            </Box>
+          </Box>
+        </Box>
+      </Drawer>
+    </>
+  );
+};