@churchapps/apphelper 0.6.14 → 0.6.16

package/src/components/gallery/GalleryModal.tsx

@@ -1,170 +0,0 @@
-"use client";
-
-import { FileHelper } from "../../helpers/FileHelper";
-import { ApiHelper } from "../../helpers";
-import { Locale } from "../../helpers";
-import { CommonEnvironmentHelper } from "@churchapps/helpers";
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, Grid, IconButton, InputLabel, MenuItem, Select, Tab, Tabs, Tooltip, Icon } from "@mui/material";
-import React, { useState } from "react";
-import { ImageEditor } from "../ImageEditor";
-import { TabPanel } from "../TabPanel";
-import { StockPhotos } from "./StockPhotos";
-
-interface Props {
-  aspectRatio: number,
-  onClose: () => void,
-  onSelect: (img: string) => void
-}
-
-export const GalleryModal: React.FC<Props> = (props: Props) => {
-  const [images, setImages] = useState<string[]>([]);
-  const [tabIndex, setTabIndex] = React.useState(0);
-  const [aspectRatio, setAspectRatio] = React.useState(Math.round(props.aspectRatio * 100) / 100);
-  const [editorPhotoUrl, setEditorPhotoUrl] = React.useState("");
-
-  const contentRoot = CommonEnvironmentHelper.ContentRoot;
-
-  const handleTabChange = (el: any, newValue: any) => { setTabIndex(newValue); }
-
-  const loadData = () => { ApiHelper.get("/gallery/" + aspectRatio.toString(), "ContentApi").then((data: any) => setImages(data.images)); }
-
-  const handleImageUpdated = async (dataUrl: string) => {
-    
-    if (!dataUrl) {
-      console.warn('No dataUrl provided to handleImageUpdated');
-      return;
-    }
-
-    try {
-      const fileName = Math.floor(Date.now() / 1000).toString() + ".jpg"
-      const blob = FileHelper.dataURLtoBlob(dataUrl);
-      const file = new File([blob], "file_name");
-
-      const params = { folder: aspectRatio.toString(), fileName };
-      
-      const presigned = await ApiHelper.post("/gallery/requestUpload", params, "ContentApi");
-      const doUpload = presigned.key !== undefined;
-      
-      if (doUpload) {
-        await FileHelper.postPresignedFile(presigned, file, () => { });
-      } else {
-        console.warn('Upload failed - no presigned key received');
-      }
-      
-      setTabIndex(0);
-      loadData();
-    } catch (error) {
-      console.error('Error in handleImageUpdated:', error);
-      // In case of API failure, still provide feedback to user
-      alert('Image processing completed, but upload failed. API may not be available in this environment.');
-    }
-  };
-
-  const handleDelete = (folder: string, image: string) => {
-    if (window.confirm(Locale.label("gallery.confirmDelete"))) {
-      ApiHelper.delete("/gallery/" + folder + "/" + image, "ContentApi").then(() => { loadData(); });
-    }
-  }
-
-  React.useEffect(() => { if (aspectRatio !== props.aspectRatio) setAspectRatio(Math.round(props.aspectRatio * 100) / 100) }, [props.aspectRatio]); //eslint-disable-line
-  React.useEffect(loadData, [aspectRatio]); //eslint-disable-line
-
-  const getImages = () => {
-    let result: React.ReactElement[] = [];
-    images.forEach((img: any, index: number) => {
-      const parts = img.split("/");
-
-      result.push(<Grid key={img || index} size={{ xs: 12, md: 4 }}>
-        <Box sx={{ position: "relative", ":hover #deleteIcon": { visibility: "visible" } }}>
-          <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img) }} aria-label="Select image" data-testid="select-image">
-            <Box 
-              component="img" 
-              src={contentRoot + "/" + img} 
-              alt="custom"
-              sx={{
-                width: '100%',
-                height: 'auto',
-                maxWidth: '100%',
-                display: 'block'
-              }}
-            />
-          </a>
-          <Box id="deleteIcon" sx={{ position: "absolute", top: 3, right: 3, visibility: "hidden", backgroundColor: "whitesmoke", borderRadius: 5 }}>
-            <Tooltip title="Delete">
-              <IconButton size="small" color="error" onClick={() => handleDelete(parts[2], parts[3])} aria-label="Delete image" data-testid="delete-image">
-                <Icon sx={{ fontSize: "17px !important" }}>delete_outline</Icon>
-              </IconButton>
-            </Tooltip>
-          </Box>
-        </Box>
-      </Grid>);
-    })
-    return result;
-  }
-
-  const handleStockSelect = (url: string) => {
-    setEditorPhotoUrl(url);
-    setTabIndex(1);
-  }
-
-  const getDisplayAspect = () => {
-    let result = aspectRatio.toString();
-    if (aspectRatio === 0) result = "Free Form";
-    else if (aspectRatio === 1) result = "1:1";
-    else if (aspectRatio === 2) result = "2:1";
-    else if (aspectRatio === 3) result = "3:1";
-    else if (aspectRatio === 4) result = "4:1";
-    else if (aspectRatio === 1.33) result = "4:3";
-    else if (aspectRatio === 1.78) result = "16:9";
-    else if (aspectRatio === 0.5) result = "1:2";
-    else if (aspectRatio === 0.5625) result = "9:16";
-    return result;
-  }
-
-  return (<>
-    <Dialog open={true} onClose={props.onClose}>
-      <DialogTitle>Select a Photo</DialogTitle>
-      <DialogContent style={{ overflowX: "hidden" }}>
-
-        {(props.aspectRatio === 0) && (
-          <FormControl fullWidth>
-            <InputLabel>{Locale.label("gallery.aspectRatio")}</InputLabel>
-            <Select size="small" label={Locale.label("gallery.aspectRatio")} name="aspectRatio" value={aspectRatio} onChange={(e) => setAspectRatio(parseFloat(e.target.value.toString()))}>
-              <MenuItem value="0">{Locale.label("gallery.freeForm")}</MenuItem>
-              <MenuItem value="1">1:1</MenuItem>
-              <MenuItem value="2">2:1</MenuItem>
-              <MenuItem value="3">3:1</MenuItem>
-              <MenuItem value="4">4:1</MenuItem>
-              <MenuItem value="1.33">4:3</MenuItem>
-              <MenuItem value="1.78">16:9</MenuItem>
-              <MenuItem value="0.5">1:2</MenuItem>
-              <MenuItem value="0.5625">9:16</MenuItem>
-            </Select>
-          </FormControl>
-        )}
-
-        <Tabs variant="fullWidth" value={tabIndex} onChange={handleTabChange}>
-          <Tab label="Gallery" />
-          <Tab label="Upload" />
-          <Tab label="Stock Photos" />
-        </Tabs>
-        <TabPanel value={tabIndex} index={0}>
-
-          <Grid container spacing={3} alignItems="center">
-            {getImages()}
-          </Grid>
-        </TabPanel>
-        <TabPanel value={tabIndex} index={1}>
-          <div>{Locale.label("gallery.aspectRatio")}: {getDisplayAspect()}</div>
-          <ImageEditor onUpdate={handleImageUpdated} photoUrl={editorPhotoUrl} aspectRatio={aspectRatio} outputWidth={1280} outputHeight={768} hideDelete={true} />
-        </TabPanel>
-        <TabPanel value={tabIndex} index={2}>
-          <StockPhotos aspectRatio={aspectRatio} onSelect={props.onSelect} onStockSelect={handleStockSelect} />
-        </TabPanel>
-      </DialogContent>
-      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
-        <Button variant="outlined" onClick={props.onClose}>Close</Button>
-      </DialogActions>
-    </Dialog>
-  </>);
-};

package/src/components/gallery/StockPhotos.tsx

@@ -1,96 +0,0 @@
-"use client";
-import { Button, Grid, TextField } from "@mui/material";
-import React, { useState } from "react";
-import { ApiHelper } from "../../helpers";
-import { Locale } from "../../helpers";
-import { CommonEnvironmentHelper } from "@churchapps/helpers";
-
-interface Props {
-  aspectRatio: number,
-  onSelect: (img: string) => void,
-  onStockSelect: (img: string) => void
-}
-
-interface SearchResult { description: string, url: string, photographer: string, photographerUrl: string, large: string, thumbnail: string }
-
-export const StockPhotos: React.FC<Props> = (props: Props) => {
-  const [images, setImages] = useState<string[]>([]);
-  const [searchText, setSearchText] = useState("");
-  const [searchResults, setSearchResults] = useState<SearchResult[]>(null);
-
-  const contentRoot = CommonEnvironmentHelper.ContentRoot;
-
-  const loadData = () => { ApiHelper.getAnonymous("/gallery/stock/" + props.aspectRatio.toString(), "ContentApi").then((data: any) => setImages(data.images)); }
-
-  React.useEffect(loadData, [props.aspectRatio]); //eslint-disable-line
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setSearchText(e.currentTarget.value); }
-
-  const handleSearch = (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    let term = searchText.trim();
-    ApiHelper.post("/stock/search", { term: term }, "ContentApi").then((data: SearchResult[]) => { setSearchResults(data) });
-  }
-
-  const getImages = () => {
-    if (searchResults) return getResults();
-    else return getSuggested();
-  }
-
-  const getResults = () => {
-    let result: React.ReactElement[] = [];
-    searchResults.forEach((p: any) => {
-      result.push(<Grid size={{ xs: 12, md: 4 }}>
-        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onStockSelect(p.large) }}>
-          <img 
-            src={p.thumbnail} 
-            alt="stock" 
-            style={{ 
-              width: '100%', 
-              height: 'auto', 
-              maxWidth: '100%',
-              display: 'block'
-            }}
-          />
-        </a>
-        <div>
-          <i style={{ fontSize: 12 }}>
-            <a href={p.url} target="_blank" rel="noreferrer noopener">{Locale.label("stockPhotos.photoBy")}</a> <a href={p.photographerUrl} target="_blank" rel="noreferrer noopener">{p.photographer}</a></i>
-        </div>
-      </Grid>);
-    })
-    return result;
-  }
-
-  const getSuggested = () => {
-    let result: React.ReactElement[] = [];
-    images.forEach((img: any) => {
-      result.push(<Grid size={{ xs: 12, md: 4 }}>
-        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img) }}>
-          <img 
-            src={contentRoot + "/" + img} 
-            alt="stock" 
-            style={{ 
-              width: '100%', 
-              height: 'auto', 
-              maxWidth: '100%',
-              display: 'block'
-            }}
-          />
-        </a>
-      </Grid>);
-    })
-    return result;
-  }
-
-  return (<>
-    <TextField fullWidth name="personAddText" label="Search Term" value={searchText} onChange={handleChange}
-      InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-testid="search-button" onClick={handleSearch}>Search</Button> }}
-    />
-    {searchResults && <div>{Locale.label("stockPhotos.providedBy")} <a href="https://pexels.com">Pexels</a>.</div>}
-    <Grid container spacing={3} alignItems="center">
-      {getImages()}
-    </Grid>
-
-  </>);
-};

package/src/components/gallery/index.ts

@@ -1,2 +0,0 @@
-export * from "./GalleryModal";
-export * from "./StockPhotos";

package/src/components/header/Banner.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-
-interface Props {
-  children: React.ReactNode
-}
-
-export const Banner = (props:Props) => {
-  return (<div id="banner">
-    {props.children}
-  </div>);
-}

package/src/components/header/PrimaryMenu.tsx

@@ -1,101 +0,0 @@
-'use client'
-import React, { useState, useRef } from "react";
-import { Box, Button, Icon, Paper, Popper, Grow, ClickAwayListener } from "@mui/material";
-import { NavItem } from "../wrapper/NavItem";
-
-interface Props {
-  label: string;
-  menuItems: { url: string; icon: string; label: string }[];
-  onNavigate: (url: string) => void;
-}
-
-export const PrimaryMenu = (props: Props) => {
-  const [open, setOpen] = useState(false);
-  const anchorRef = useRef<HTMLButtonElement>(null);
-
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleClose = (event: Event | React.SyntheticEvent) => {
-    if (
-      anchorRef.current &&
-      anchorRef.current.contains(event.target as HTMLElement)
-    ) {
-      return;
-    }
-    setOpen(false);
-  };
-
-  const handleItemClick = (url: string) => {
-    setOpen(false);
-    props.onNavigate(url);
-  };
-
-  const getNavItems = () => {
-    let result: React.ReactElement[] = [];
-    props.menuItems.forEach((item) => {
-      result.push(
-        <NavItem
-          url={item.url}
-          label={item.label.toUpperCase()}
-          icon={item.icon}
-          key={item.url}
-          onNavigate={handleItemClick}
-        />
-      );
-    });
-    return result;
-  };
-
-  return (
-    <>
-      <Button
-        ref={anchorRef}
-        onClick={handleToggle}
-        color="inherit"
-        endIcon={<Icon>expand_more</Icon>}
-        id="primaryNavButton"
-      >
-        <img src="/images/logo-icon.png" alt="Primary Menu" />
-        <h2>{props.label}</h2>
-      </Button>
-
-      <Popper
-        open={open}
-        anchorEl={anchorRef.current}
-        role={undefined}
-        placement="bottom-end"
-        transition
-        disablePortal={true}
-        style={{ zIndex: 1300, color: "#FFF" }}
-      >
-        {({ TransitionProps }) => (
-          <Grow {...TransitionProps}>
-            <Paper
-              elevation={3}
-              sx={{
-                backgroundColor: "var(--c1)",
-                color: "#FFF",
-                minWidth: 300,
-                paddingY: "10px",
-                filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-              }}
-            >
-              <ClickAwayListener onClickAway={handleClose}>
-                <Box
-                  sx={{
-                    "& a": { color: "#FFF", textDecoration: "none" },
-                    "& a:hover": { color: "#DDD" },
-                  }}
-                >
-                  {getNavItems()}
-                </Box>
-              </ClickAwayListener>
-            </Paper>
-          </Grow>
-        )}
-      </Popper>
-    </>
-  );
-};

package/src/components/header/SecondaryMenu.tsx

@@ -1,23 +0,0 @@
-import { Chip } from "@mui/material";
-
-interface Props {
-  label: string,
-  menuItems: { url: string, label: string }[]
-	onNavigate: (url: string) => void;
-}
-
-export const SecondaryMenu= (props:Props) => {
-
-  const getItems = () => {
-    const result:any[] = [];
-    props.menuItems.forEach((item, index) => {
-      if (item.label === props.label) result.push(<Chip key={item.url} onClick={() => props.onNavigate(item.url)} label={item.label} component="a" variant="filled" clickable style={{backgroundColor:"var(--c1d2)", color:"#FFF", fontSize:16}} />);
-      else result.push(<a key={item.url} href="about:blank" onClick={(e) => { e.preventDefault(); props.onNavigate(item.url) }} style={{ color:"#FFF", textDecoration: "none", marginLeft:10, marginRight:10}}>{item.label}</a>);
-    });
-    return result;
-  }
-
-  return (<div id="secondaryMenu">
-    {getItems()}
-  </div>)
-}

package/src/components/header/SecondaryMenuAlt.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { Box, Button, Icon, Menu  } from "@mui/material";
-import { NavItem } from "../wrapper/NavItem";
-
-interface Props {
-  label: string,
-  menuItems: { url: string, label: string }[]
-	onNavigate: (url: string) => void;
-}
-
-export const SecondaryMenuAlt = (props:Props) => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const handleClose = () => { setAnchorEl(null); };
-  const open = Boolean(anchorEl);
-
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    setAnchorEl(e.currentTarget);
-  };
-
-  const getItems = () => {
-    const result:any[] = [];
-    props.menuItems.forEach(item => {
-      result.push(<NavItem url={item.url} label={item.label} key={item.url} onNavigate={props.onNavigate} icon="people" />);
-    });
-    return result;
-  }
-
-  return (
-    <div id="secondaryMenuAlt">
-      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} endIcon={<Icon>expand_more</Icon>} id="secondaryMenuButton">
-        <h3 style={{lineHeight:1}}>{props.label}</h3>
-      </Button>
-      <Menu anchorEl={anchorEl} id="account-menu" open={anchorEl!==null} onClose={handleClose} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
-        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-          {getItems()}
-        </Box>
-      </Menu>
-    </div>)
-}

package/src/components/header/SiteHeader.tsx

@@ -1,205 +0,0 @@
-import React from "react";
-import { AppBar, Link, Toolbar } from "@mui/material";
-import { styled } from "@mui/material/styles";
-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(() => {
-    
-    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 === "B1Admin") {
-      if (props.primaryMenuLabel === "People") {
-        if (props.secondaryMenuLabel === "People") result = ["b1admin/adding-people", "b1admin/advanced-search", "b1admin/assigning-roles"];
-        else if (props.secondaryMenuLabel === "Groups") result = ["b1admin/group-roster", "b1admin/groups", "b1admin/group-calendar"];
-        else if (props.secondaryMenuLabel === "Attendance") result = ["b1admin/attendance", "b1admin/checkin"];
-      }
-      else if (props.primaryMenuLabel === "Donations") {
-        if (props.secondaryMenuLabel === "Summary") result = ["b1admin/donation-report"];
-        else if (props.secondaryMenuLabel === "Batches" || props.secondaryMenuLabel === "Funds") result = ["b1admin/giving", "b1admin/manual-input"];
-      }
-      else if (props.primaryMenuLabel === "Serving") {
-        if (props.secondaryMenuLabel === "Plans") result = ["b1admin/plans"];
-        else if (props.secondaryMenuLabel === "Tasks") result = ["b1admin/tasks", "b1admin/automations"];
-      }
-      else if (props.primaryMenuLabel === "Settings") {
-        if (props.secondaryMenuLabel === "Settings") result = ["b1admin/assigning-roles", "b1admin/exporting-data", "b1admin/import-csv", "b1admin/import-from-breeze"];
-        else if (props.secondaryMenuLabel === "Forms") result = ["b1admin/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';