@churchapps/apphelper 0.6.14 → 0.6.16

package/src/components/header/SupportDrawer.tsx

@@ -1,112 +0,0 @@
-'use client';
-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 = "";
-  currentAppName = props.appName.toLowerCase();
-  if (currentAppName==="b1admin") currentAppName="b1Admin"
-
-  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@churchapps.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>
-    </>
-  );
-};

package/src/components/header/index.tsx

@@ -1,2 +0,0 @@
-export { Banner } from "./Banner";
-export { SiteHeader } from "./SiteHeader";

package/src/components/index.tsx

@@ -1,20 +0,0 @@
-export { ErrorMessages } from "./ErrorMessages";
-export { ExportLink } from "./ExportLink";
-export { DisplayBox } from "./DisplayBox";
-export { FloatingSupport } from "./FloatingSupport";
-export { FormSubmissionEdit } from "./FormSubmissionEdit";
-export { HelpIcon } from "./HelpIcon";
-export { ImageEditor } from "./ImageEditor";
-export { InputBox } from "./InputBox";
-export { Loading } from "./Loading";
-export { Notes } from "./notes/Notes";
-export { PageHeader } from "./PageHeader";
-export { PersonAvatar } from "./PersonAvatar";
-export { QuestionEdit } from "./QuestionEdit";
-export { SmallButton } from "./SmallButton";
-export { SupportModal } from "./SupportModal";
-export { TabPanel } from "./TabPanel";
-export * from "./wrapper";
-export * from "./notes";
-export * from "./header";
-export * from "./gallery";

package/src/components/notes/AddNote.tsx

@@ -1,185 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { ApiHelper, Locale, PersonHelper } from "../../helpers";
-import { MessageInterface, UserContextInterface, UserHelper } from "@churchapps/helpers";
-import { 
-  Box,
-  Stack,
-  TextField,
-  IconButton,
-  Paper,
-  CircularProgress,
-  Avatar,
-  Icon
-} from "@mui/material";
-import { ErrorMessages } from "../ErrorMessages";
-
-type Props = {
-  messageId?: string;
-  onUpdate: () => void;
-  createConversation: () => Promise<string>;
-  conversationId?: string;
-  context: UserContextInterface;
-  onCancel?: () => void;
-};
-
-export function AddNote({ context, onCancel, ...props }: Props) {
-  const [message, setMessage] = useState<MessageInterface>();
-  const [errors, setErrors] = useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const headerText = props.messageId ? "Edit note" : "Add a note";
-  const churchId = UserHelper.currentUserChurch?.church?.id || "";
-
-  useEffect(() => {
-    if (props.messageId) {
-      ApiHelper.get(`/messages/${churchId}/${props.messageId}`, "MessagingApi")
-        .then((n: any) => setMessage(n));
-    } else {
-      setMessage({ conversationId: props.conversationId, content: "" });
-    }
-    return () => setMessage(null);
-  }, [props.messageId, props.conversationId]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
-    setErrors([]);
-    setMessage({ ...message, content: e.target.value });
-  };
-
-  const validate = () => {
-    const result = [];
-    if (!message?.content?.trim()) result.push(Locale.label("notes.validate.content", "Please enter a message"));
-    setErrors(result);
-    return result.length === 0;
-  };
-
-  async function handleSave() {
-    if (!validate()) return;
-
-    setIsSubmitting(true);
-    let cId = props.conversationId;
-    if (!cId) cId = await props.createConversation();
-
-    const m = { ...message, conversationId: cId };
-    ApiHelper.post("/messages", [m], "MessagingApi")
-      .then(() => {
-        props.onUpdate();
-        setMessage({ ...message, content: "" });
-      })
-      .catch((error: any) => {
-        console.error("Error saving message:", error);
-        if (error?.message === "Forbidden") {
-          setErrors(["You can't edit the message sent by others."]);
-        } else {
-          setErrors([error?.message || "Failed to save message. Please try again."]);
-        }
-      })
-      .finally(() => setIsSubmitting(false));
-  }
-
-  async function deleteNote() {
-    if (!props.messageId) return;
-    await ApiHelper.delete(`/messages/${churchId}/${props.messageId}`, "MessagingApi");
-    props.onUpdate();
-  }
-
-  const deleteFunction = props.messageId ? deleteNote : null;
-  const image = PersonHelper.getPhotoUrl(context?.person);
-
-  return (
-    <Box sx={{ width: '100%' }}>
-      <ErrorMessages errors={errors} />
-
-      <Paper variant="outlined" sx={{ p: 2, bgcolor: 'grey.50', borderColor: 'grey.300' }}>
-        <Stack direction="row" spacing={2} alignItems="flex-start">
-          <Avatar 
-            src={image} 
-            alt={context?.person?.name?.display}
-            sx={{ width: 48, height: 48 }}
-          />
-
-          <Box sx={{ flex: 1 }}>
-            <TextField
-              fullWidth
-              multiline
-              rows={2}
-              name="noteText"
-              aria-label={headerText}
-              placeholder={props.messageId ? "Edit your message..." : "Type a message..."}
-              variant="standard"
-              value={message?.content || ''}
-              onChange={handleChange}
-              disabled={isSubmitting}
-              InputProps={{
-                disableUnderline: true,
-                sx: { 
-                  fontSize: '1rem',
-                  '& textarea': { resize: 'vertical', minHeight: '40px' }
-                }
-              }}
-              sx={{ 
-                bgcolor: 'white',
-                borderRadius: 1,
-                p: 1,
-                border: '1px solid',
-                borderColor: 'grey.300',
-                '&:hover': { borderColor: 'grey.400' },
-                '&.Mui-focused': { borderColor: 'primary.main' }
-              }}
-            />
-
-            {/* Buttons: Cancel (left), Delete + Send (right) */}
-            <Box sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
-              {/* Cancel Button */}
-              {props.messageId && (
-                <IconButton
-                  size="small"
-                  onClick={() => {
-                    setMessage({ ...message, content: "" });
-                    onCancel?.();
-                  }}
-                  disabled={isSubmitting}
-                  sx={{ color: 'grey.700' }}
-                >
-                  <Icon fontSize="small">cancel</Icon>
-                </IconButton>
-              )}
-
-              {/* Spacer */}
-              <Box sx={{ flex: 1 }} />
-
-              {/* Right buttons: Delete + Send */}
-              <Box sx={{ display: 'flex', gap: 0.5 }}>
-                {deleteFunction && (
-                  <IconButton
-                    size="small"
-                    onClick={deleteFunction}
-                    disabled={isSubmitting}
-                    sx={{ color: 'error.main' }}
-                  >
-                    <Icon fontSize="small">delete</Icon>
-                  </IconButton>
-                )}
-
-                <IconButton
-                  size="small"
-                  color="primary"
-                  onClick={handleSave}
-                  disabled={isSubmitting || !message?.content?.trim()}
-                  sx={{ 
-                    bgcolor: 'primary.main', 
-                    color: 'white',
-                    '&:hover': { bgcolor: 'primary.dark' },
-                    '&:disabled': { bgcolor: 'action.disabledBackground', color: 'action.disabled' }
-                  }}
-                >
-                  {isSubmitting ? <CircularProgress size={18} color="inherit" /> : <Icon fontSize="small">send</Icon>}
-                </IconButton>
-              </Box>
-            </Box>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}

package/src/components/notes/Note.tsx

@@ -1,84 +0,0 @@
-'use client';
-
-import { Icon, IconButton, Stack, Box, Typography } from "@mui/material";
-import React, { useState, useEffect } from "react";
-import { DateHelper } from "../../helpers"
-import { MessageInterface, UserContextInterface } from "@churchapps/helpers"
-import { PersonAvatar } from "../PersonAvatar"
-
-interface Props {
-  message: MessageInterface;
-  showEditNote: (noteId?: string) => void;
-  context: UserContextInterface;
-  isEditing?: boolean;
-  hideEdit?: boolean;
-}
-
-export const Note: React.FC<Props> = (props) => {
-  const [message, setMessage] = useState<MessageInterface>(null);
-
-  useEffect(() => setMessage(props.message), [props.message]);
-
-  if (message === null) return null;
-  const datePosted = new Date(message.timeUpdated || message.timeSent);
-  const displayDuration = DateHelper.getDisplayDuration(datePosted);
-
-  const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent;
-  const contents = message.content?.split("\n");
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        gap: 2,
-        mb: 2,
-        p: 1,
-        borderRadius: 1,
-        bgcolor: props.isEditing ? 'rgba(255, 243, 224, 0.5)' : 'transparent',
-        border: props.isEditing ? '1px solid #FFA726' : 'none',
-        transition: 'background-color 0.3s, border 0.3s',
-        '&:hover': { bgcolor: 'action.hover' }
-      }}
-    >
-      <PersonAvatar person={message.person} size="small" />
-      <Box sx={{ flex: 1 }}>
-        <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
-          <Box sx={{ flex: 1 }}>
-            <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 0.5 }}>
-              <Typography variant="subtitle2" fontWeight="bold">
-                {message.person?.name?.display}
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                {displayDuration}
-              </Typography>
-              {isEdited && (
-                <Typography variant="caption" color="text.secondary">
-                  (edited)
-                </Typography>
-              )}
-            </Stack>
-            <Box>
-              {contents.map((c, i) => c ? (
-                <Typography key={`content-${i}-${c.substring(0, 20)}`} variant="body2" sx={{ mb: 0.5 }}>
-                  {c}
-                </Typography>
-              ) : (
-                <Box key={`empty-${i}`} sx={{ height: '1em' }} />
-              ))}
-            </Box>
-          </Box>
-          {(message?.id && message.personId === props.context?.person.id && !props.hideEdit) && (
-            <IconButton 
-              size="small" 
-              aria-label="editNote" 
-              onClick={() => props.showEditNote(message.id)}
-              sx={{ opacity: 0.7, '&:hover': { opacity: 1 } }}
-            >
-              <Icon fontSize="small">edit</Icon>
-            </IconButton>
-          )}
-        </Stack>
-      </Box>
-    </Box>
-  );
-};

package/src/components/notes/Notes.tsx

@@ -1,208 +0,0 @@
-import React from "react";
-import { Note } from "./Note";
-import { AddNote } from "./AddNote";
-import { DisplayBox, Loading } from "../";
-import { ApiHelper, ArrayHelper, Locale } from "../../helpers";
-import { MessageInterface, UserContextInterface } from "@churchapps/helpers";
-
-interface Props {
-  //showEditNote: (messageId?: string) => void;
-  conversationId: string;
-  createConversation?: () => Promise<string>;
-  noDisplayBox?: boolean;
-  context: UserContextInterface;
-  maxHeight?: any;
-  refreshKey?: number;
-}
-
-export function Notes(props: Props) {
-
-  const [messages, setMessages] = React.useState<MessageInterface[]>(null)
-  const [editMessageId, setEditMessageId] = React.useState(null)
-  const [isInitialLoad, setIsInitialLoad] = React.useState(true)
-  const [previousMessageCount, setPreviousMessageCount] = React.useState(0)
-
-  // Add CSS for custom scrollbar styling
-  React.useEffect(() => {
-    const styleId = 'notes-scrollbar-styles';
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement('style');
-      style.id = styleId;
-      style.textContent = `
-        .notes-scroll-container {
-          scrollbar-width: thin;
-          scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
-        }
-        .notes-scroll-container::-webkit-scrollbar {
-          width: 12px;
-          background: transparent;
-        }
-        .notes-scroll-container::-webkit-scrollbar-track {
-          background: rgba(0, 0, 0, 0.1);
-          border-radius: 6px;
-          margin: 4px;
-        }
-        .notes-scroll-container::-webkit-scrollbar-thumb {
-          background: rgba(0, 0, 0, 0.3);
-          border-radius: 6px;
-          border: 2px solid transparent;
-          background-clip: content-box;
-        }
-        .notes-scroll-container::-webkit-scrollbar-thumb:hover {
-          background: rgba(0, 0, 0, 0.5);
-          background-clip: content-box;
-        }
-        .notes-scroll-container::-webkit-scrollbar-corner {
-          background: transparent;
-        }
-      `;
-      document.head.appendChild(style);
-    }
-  }, []);
-
-  const loadNotes = async () => {
-    try {
-      const messages: MessageInterface[] = (props.conversationId) ? await ApiHelper.get("/messages/conversation/" + props.conversationId, "MessagingApi") : [];
-      if (messages.length > 0) {
-        const peopleIds = ArrayHelper.getIds(messages, "personId");
-        const people = await ApiHelper.get("/people/basic?ids=" + peopleIds.join(","), "MembershipApi");
-        messages.forEach(n => {
-          n.person = ArrayHelper.getOne(people, "id", n.personId);
-        })
-      }
-      setMessages(messages);
-      setEditMessageId(null);
-      
-      // Mark as no longer initial load after first load
-      if (isInitialLoad) {
-        setIsInitialLoad(false);
-      }
-    } catch (error) {
-      console.error("❌ Failed to load messages for conversation:", props.conversationId, error);
-      // Don't clear messages on error - keep showing existing messages
-      // Only set isInitialLoad to false if this was the first load attempt
-      if (isInitialLoad) {
-        setIsInitialLoad(false);
-      }
-    }
-  };
-
-  const getNotes = () => {
-    if (!messages) return <Loading />
-    if (messages.length === 0) return <></>
-    else {
-      let noteArray: React.ReactNode[] = [];
-      for (let i = 0; i < messages.length; i++) noteArray.push(<Note message={messages[i]} key={messages[i].id} showEditNote={setEditMessageId} context={props.context} />);
-      return noteArray;
-    }
-  }
-
-  const getNotesWrapper = () => {
-    const notes = getNotes();
-    if (props.maxHeight) {
-      return (
-        <div 
-          id="notesScroll" 
-          style={{
-            flex: 1,
-            minHeight: 0,
-            overflowY: "auto",
-            overflowX: "hidden",
-            padding: "8px 12px",
-            scrollBehavior: "smooth",
-            height: "100%"
-          }}
-          className="notes-scroll-container"
-          data-testid="message-scroll-area"
-        >
-          <div style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px",
-            minHeight: "min-content"
-          }}>
-            {notes}
-          </div>
-        </div>
-      );
-    }
-    else return notes;
-  }
-
-  React.useEffect(() => { loadNotes() }, [props.conversationId, props.refreshKey]); //eslint-disable-line
-
-  // Simply reload notes when refreshKey changes
-  // This is triggered by the parent component when WebSocket messages arrive
-
-  // Auto-scroll to bottom only when new messages are added (not on initial load)
-  React.useEffect(() => {
-    if (props.maxHeight && messages?.length > 0 && !isInitialLoad) {
-      const currentMessageCount = messages.length;
-      
-      // Only auto-scroll if messages were added
-      if (currentMessageCount > previousMessageCount) {
-        // Use requestAnimationFrame for smoother scrolling
-        requestAnimationFrame(() => {
-          const element = window?.document?.getElementById("notesScroll");
-          if (element) {
-            element.scrollTop = element.scrollHeight;
-          }
-        });
-      }
-      
-      setPreviousMessageCount(currentMessageCount);
-    } else if (messages?.length > 0 && isInitialLoad) {
-      // On initial load, just set the previous count without scrolling
-      setPreviousMessageCount(messages.length);
-    }
-  }, [messages, props.maxHeight, isInitialLoad, previousMessageCount]);
-
-  let result = props.maxHeight ? (
-    <div style={{ 
-      height: "100%", 
-      display: "flex", 
-      flexDirection: "column", 
-      overflow: "hidden",
-      minHeight: 0
-    }}>
-      {/* Messages area - scrollable */}
-      <div style={{ 
-        flex: 1, 
-        minHeight: 0, 
-        display: "flex", 
-        flexDirection: "column",
-        overflow: "hidden"
-      }}>
-        {getNotesWrapper()}
-      </div>
-      
-      {/* Input area - always visible at bottom */}
-      {messages && (
-        <div style={{ 
-          flexShrink: 0, 
-          borderTop: "1px solid #e0e0e0", 
-          backgroundColor: "#fafafa", 
-          padding: "12px",
-          minHeight: "auto",
-          maxHeight: "200px"
-        }}>
-          <AddNote 
-            context={props.context} 
-            conversationId={props.conversationId} 
-            onUpdate={loadNotes} 
-            createConversation={props.createConversation} 
-            messageId={editMessageId} 
-          />
-        </div>
-      )}
-    </div>
-  ) : (
-    <>
-      {getNotesWrapper()}
-      {messages && (<AddNote context={props.context} conversationId={props.conversationId} onUpdate={loadNotes} createConversation={props.createConversation} messageId={editMessageId} />)}
-    </>
-  );
-  
-  if (props.noDisplayBox) return result;
-  else return (<DisplayBox id="notesBox" data-testid="notes-box" headerIcon="sticky_note_2" headerText={Locale.label("notes.notes", "Notes")}>{result}</DisplayBox>);
-};

package/src/components/notes/index.ts

@@ -1,3 +0,0 @@
-export { Notes } from "./Notes";
-export { Note } from "./Note";
-export { AddNote } from "./AddNote";

package/src/components/wrapper/AppList.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import React from "react";
-import { ApiHelper, UserHelper, CommonEnvironmentHelper, LoginUserChurchInterface } from "@churchapps/helpers";
-import { NavItem } from "./NavItem";
-
-export interface Props { appName: string; currentUserChurch: LoginUserChurchInterface; onNavigate: (url: string) => void; }
-
-export const AppList: React.FC<Props> = props => {
-  const jwt = ApiHelper.getConfig("MembershipApi").jwt;
-  const churchId = UserHelper.currentUserChurch.church.id;
-  return (
-    <>
-      <NavItem url={`${CommonEnvironmentHelper.B1Root.replace("{key}", props.currentUserChurch.church.subDomain)}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "B1.church"} external={true} label="B1.Church" icon="logout" onNavigate={props.onNavigate} />
-      <NavItem url={`${CommonEnvironmentHelper.LessonsRoot}/login?jwt=${jwt}&churchId=${churchId}`} selected={props.appName === "Lessons.church"} external={true} label="Lessons.church" icon="logout" onNavigate={props.onNavigate} />
-    </>
-  );
-}