@churchapps/apphelper 0.4.7 → 0.4.9

package/src/components/iconPicker/IconPicker.tsx

@@ -1,160 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { styled, Icon, InputBase, Typography, debounce, Grid, IconButton, Pagination, Stack } from "@mui/material";
-import MuiPaper from "@mui/material/Paper";
-import IconNamesList from "./IconNamesList"
-import { Locale } from "../../helpers";
-import FlexSearch from "flexsearch";
-const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
-
-//const FlexSearch = require("flexsearch");
-
-const StyledIconSpan = styled("span")(({ theme }) => ({
-  display: "inline-flex",
-  flexDirection: "column",
-  color: theme.palette.text.secondary,
-  margin: "0 4px",
-  "& > div": {
-    display: "flex"
-  },
-  "& > div > *": {
-    flexGrow: 1,
-    fontSize: ".6rem",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    textAlign: "center",
-    width: 0
-  }
-}));
-
-const StyledIcon: any = styled(Icon)(({ theme }) => ({
-  boxSizing: "content-box",
-  cursor: "pointer",
-  color: theme.palette.text.primary,
-  borderRadius: theme.shape.borderRadius,
-  transition: theme.transitions.create(["background-color", "box-shadow"], {
-    duration: theme.transitions.duration.shortest
-  }),
-  padding: theme.spacing(1),
-  margin: theme.spacing(0.5, 0),
-  "&:hover": {
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[1]
-  }
-}));
-
-const Icons = React.memo(function Icons(props: { icons: string[]; handleOpenClick: (name: string) => void; }) {
-  const { icons, handleOpenClick } = props;
-
-  const handleIconClick = (name: string) => {
-    const camel = name.substring(0, 1).toLocaleLowerCase() + name.substring(1, name.length);
-    const underscored = camel.replace(/[A-Z]/g, m => "_" + m.toLowerCase());
-    handleOpenClick(underscored)
-  }
-
-  return (
-    <div>
-      {icons.map((icon) => (
-        <StyledIconSpan key={icon}>
-          <StyledIcon tabIndex={-1} sx={{ fontSize: "34px !important" }} onClick={() => { handleIconClick(icon) }} aria-label={`Select ${icon} icon`} data-testid={`icon-${icon}`}>
-            {icon}
-          </StyledIcon>
-        </StyledIconSpan>
-      ))}
-    </div>
-  );
-});
-
-const Paper = styled(MuiPaper)(({ theme }) => ({ padding: "2px 4px", display: "flex", alignItems: "center", marginBottom: theme.spacing(2), width: "100%" }));
-
-const Input = styled(InputBase)({ marginLeft: 8, flex: 1 });
-
-const searchIndex = new FlexSearch.Index({ tokenize: "full" });
-//const searchIndex = FlexSearch.create({ tokenize: "full" });
-
-function createSearchIndex() {
-  // create component names from icons list
-  const iconsAndComponentNames = IconNamesList.map(icon => {
-    const split = icon.split("_");
-    const capitalizedSplit = split.map(s => {
-      if (isAlphabet(s[0])) {
-        s = s[0].toUpperCase() + s.slice(1)
-      }
-      return s
-    })
-    return {
-      iconName: icon,
-      componentName: capitalizedSplit.join("")
-    };
-  })
-
-  // create search index
-  iconsAndComponentNames.forEach(icon => {
-    let searchTerm = icon.iconName + " " + icon.componentName;
-
-    searchIndex.addAsync(icon.iconName, searchTerm)
-    //searchIndex.add(searchTerm);
-  })
-
-}
-
-function isAlphabet(character: string) {
-  return /[a-zA-Z]/.test(character);
-}
-
-createSearchIndex();
-
-type Props = {
-  onSelect: (iconName: string) => void;
-};
-
-const defaultIcons = ["person", "group", "groups", "contact_mail", "mail", "church", "favorite", "volunteer_activism", "link", "home", "apps", "web", "public", "rss_feed", "videocam", "live_tv", "music_note", "menu_book", "star", "accessible", "woman", "man", "child_care", "handshake", "location_on", "restaurant", "local_cafe" ];
-
-export function IconPicker(props: Props) {
-  const pageSize = 27;
-  const [keys, setKeys] = React.useState<any[] | null>(null);
-  const [query, setQuery] = React.useState("");
-  const [page, setPage] = React.useState(1);
-
-  const updateSearchResults = React.useMemo(
-    () =>
-      debounce((value) => {
-        if (value === "") setKeys(defaultIcons);
-        else searchIndex.searchAsync(value, { limit: 3000 }).then((results: any) => { setKeys(results); setPage(1); });
-        //else searchIndex.search(value, { limit: 3000 }).then((results: any) => { setKeys(results); setPage(1); });
-      }, UPDATE_SEARCH_INDEX_WAIT_MS),
-    []
-  );
-
-  React.useEffect(() => { updateSearchResults(query); return () => { updateSearchResults.clear(); }; }, [query, updateSearchResults]);
-
-  function paged<T>(array: Array<T>, p: number) {
-    return array.slice((p - 1) * pageSize, p * pageSize);
-  }
-
-  const icons = keys || IconNamesList;
-
-  const pagesCount = Math.ceil(icons.length / pageSize);
-
-  return (
-    <Grid container sx={{ minHeight: 360, padding: "16px" }}>
-      <Grid size={12}>
-        <Paper>
-          <IconButton sx={{ padding: "10px" }} aria-label="search" data-testid="icon-search-button">
-            <Icon>search</Icon>
-          </IconButton>
-          <Input autoFocus value={query} onChange={(event) => setQuery(event.target.value)} placeholder={Locale.label("iconPicker.searchIcons")} inputProps={{ "aria-label": "search icons" }} data-testid="icon-search-input" />
-        </Paper>
-        {(query === "") && <Typography sx={{ mb: 1 }}>{IconNamesList.length} {Locale.label("iconPicker.iconsAvailable")}</Typography>}
-        {(query !== "") && <Typography sx={{ mb: 1 }}>{icons.length} {Locale.label("iconPicker.matchingResults")}</Typography>}
-
-        <Icons icons={paged(icons, page)} handleOpenClick={props.onSelect} />
-      </Grid>
-
-      <Stack spacing={2} sx={{ margin: "0 auto" }}>
-        <Pagination count={pagesCount} page={page} onChange={(_, p) => setPage(p)} size="small" />
-      </Stack>
-    </Grid>
-  );
-}

package/src/components/notes/Conversation.tsx

@@ -1,84 +0,0 @@
-"use client";
-
-import { Box, Paper, Stack } from "@mui/material";
-import React from "react";
-import { ApiHelper, ArrayHelper, DateHelper, Locale, PersonHelper } from "../../helpers";
-import { ConversationInterface, MessageInterface, UserContextInterface } from "@churchapps/helpers";
-import { AddNote } from "./AddNote";
-import { Note } from "./Note";
-
-interface Props {
-  conversation: ConversationInterface;
-  context: UserContextInterface;
-  showCommentCount?: boolean;
-  noWrapper?: boolean;
-}
-
-export function Conversation(props: Props) {
-  const [conversation, setConversation] = React.useState<ConversationInterface>(null)
-  const [editMessageId, setEditMessageId] = React.useState(null)
-
-  const loadNotes = async () => {
-    const messages: MessageInterface[] = (conversation.id) ? await ApiHelper.get("/messages/conversation/" + conversation.id, "MessagingApi") : [];
-    if (messages.length > 0) {
-      const peopleIds = ArrayHelper.getIds(messages, "personId");
-      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
-      messages.forEach(n => {
-        n.person = ArrayHelper.getOne(people, "id", n.personId);
-      })
-    }
-    const c = { ...conversation }
-    c.messages = messages;
-    setConversation(c);
-    setEditMessageId(null);
-  };
-
-  React.useEffect(() => { setConversation(props.conversation) }, [props.conversation]); //eslint-disable-line
-
-  if (conversation === null) return null;
-  else {
-    const message = conversation.messages[0];
-    const photoUrl = PersonHelper.getPhotoUrl(message?.person);
-    let datePosted = new Date(message.timeUpdated || message.timeSent);
-    const displayDuration = DateHelper.getDisplayDuration(datePosted);
-
-    const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent && <>(edited)</>;
-    const contents = message.content?.split("\n");
-
-    const getNotes = () => {
-      let noteArray: React.ReactNode[] = [];
-      for (let i = 1; i < conversation.messages.length; i++) noteArray.push(<Note context={props.context} message={conversation.messages[i]} key={conversation.messages[i].id} showEditNote={setEditMessageId} />);
-      return noteArray;
-    }
-
-    let result = (<>
-      <div className="conversation">
-        <div className="postedBy">
-          <img src={photoUrl} alt="avatar" />
-        </div>
-        <Box sx={{ width: "100%" }} className="conversationContents">
-          <Stack direction="row" justifyContent="space-between">
-            <div>
-              <b>{message.person?.name?.display}</b> · <span className="text-grey">{displayDuration}{isEdited}</span>
-              {contents.map((c, i) => c ? <p key={i}>{c}</p> : <br />)}
-            </div>
-          </Stack>
-        </Box>
-      </div>
-      {props.showCommentCount && (
-        <div className="commentCount">
-          <div>{(conversation.postCount === 1) ? "1 " + Locale.label("notes.comment") : conversation.postCount + " " + Locale.label("notes.comments")}</div>
-          {(conversation.postCount > conversation.messages.length) ? <a href="about:blank" onClick={(e) => { e.preventDefault(); loadNotes(); }}>{Locale.label("notes.viewAll")} {conversation.postCount} {Locale.label("notes.comments")}</a> : <>&nbsp;</>}
-        </div>
-      )}
-      <div className="messages">
-        {getNotes()}
-        <AddNote context={props.context} conversationId={props.conversation.id} onUpdate={loadNotes} createConversation={async () => (props.conversation.id)} messageId={editMessageId} />
-      </div>
-    </>);
-
-
-    if (props.noWrapper) return result;
-    else return (<Paper sx={{ padding: 1, marginBottom: 2 }}>{result}</Paper>);
-  }
-};

package/src/components/notes/Conversations.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import React from "react";
-import { Loading } from "../";
-import { ApiHelper, ArrayHelper } from "../../helpers";
-import { ConversationInterface, UserContextInterface } from "@churchapps/helpers";
-import { Conversation } from "./Conversation";
-import { NewConversation } from "./NewConversation";
-
-interface Props {
-  contentType: string;
-  contentId: string;
-  groupId: string;
-  context: UserContextInterface;
-}
-
-export function Conversations(props: Props) {
-
-  const [conversations, setConversations] = React.useState<ConversationInterface[]>(null)
-  //const [editMessageId, setEditMessageId] = React.useState(null)
-
-  const loadConversations = async () => {
-    const conversations: ConversationInterface[] = (props.contentId) ? await ApiHelper.get("/conversations/" + props.contentType + "/" + props.contentId, "MessagingApi") : [];
-    if (conversations.length > 0) {
-      const peopleIds: string[] = [];
-      conversations.forEach(c => {
-        c.messages.forEach(m => {
-          if (peopleIds.indexOf(m.personId) === -1) peopleIds.push(m.personId);
-        });
-      })
-      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
-      conversations.forEach(c => {
-        c.messages.forEach(m => {
-          m.person = ArrayHelper.getOne(people, "id", m.personId);
-        });
-      })
-    }
-    setConversations(conversations);
-    //setEditMessageId(null);
-  };
-
-  const getConversations = () => {
-    if (conversations.length === 0) return <></>
-    else {
-      let noteArray: React.ReactNode[] = [];
-      for (let i = 0; i < conversations.length; i++) noteArray.push(<Conversation context={props.context} conversation={conversations[i]} key={conversations[i].id} />);
-      return noteArray;
-    }
-  }
-
-  React.useEffect(() => { loadConversations() }, [props.contentId]); //eslint-disable-line
-
-  if (!conversations) return <Loading />
-  else return (
-    <>
-      <NewConversation context={props.context} contentType={props.contentType} contentId={props.contentId} onUpdate={loadConversations} groupId={props.groupId} visibility="public" />
-      {getConversations()}
-    </>
-  );
-};

package/src/components/notes/NewConversation.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import { Icon, Paper, Stack, TextField } from "@mui/material";
-import React from "react";
-import { ApiHelper, Locale, PersonHelper } from "../../helpers";
-import { ConversationInterface, MessageInterface, UserContextInterface } from "@churchapps/helpers";
-import { ErrorMessages } from "../ErrorMessages";
-import { SmallButton } from "../SmallButton";
-
-interface Props {
-  contentType: string;
-  contentId: string;
-  groupId: string;
-  visibility: "public" | "hidden";
-  context: UserContextInterface;
-  onUpdate: () => void;
-}
-
-export function NewConversation({ context, ...props }: Props) {
-  const [message, setMessage] = React.useState<MessageInterface>({})
-  const [errors, setErrors] = React.useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    setErrors([]);
-    const m = { ...message } as MessageInterface;
-    m.content = e.target.value;
-    setMessage(m);
-  }
-
-  const validate = () => {
-    const result = [];
-    if (!message.content.trim()) result.push(Locale.label("notes.validate.content"));
-    setErrors(result);
-    return result.length === 0;
-  }
-
-  async function handleSave() {
-    if (validate()) {
-      setIsSubmitting(true);
-
-      const conv: ConversationInterface = { contentType: props.contentType, contentId: props.contentId, title: props.contentType + " " + props.contentId + " Conversation", groupId: props.groupId, visibility: props.visibility, allowAnonymousPosts: false }
-      const result = await ApiHelper.post("/conversations", [conv], "MessagingApi");
-      const cId = result[0].id;
-
-      const m = { ...message };
-      m.conversationId = cId;
-      ApiHelper.post("/messages", [m], "MessagingApi")
-        .then(() => {
-          props.onUpdate();
-          const m = { ...message } as MessageInterface;
-          m.content = "";
-          setMessage(m);
-        })
-        .finally(() => { setIsSubmitting(false); });
-
-    }
-  };
-
-  const image = PersonHelper.getPhotoUrl(context?.person)
-
-  return (
-    <Paper sx={{ padding: 1, marginBottom: 2 }}>
-      <ErrorMessages errors={errors} />
-
-      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
-
-        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
-        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
-          <div><b>{context?.person?.name?.display}</b></div>
-          <TextField fullWidth name="noteText" aria-label={Locale.label("notes.startConversation")} placeholder={Locale.label("notes.startConversation")} multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message.content} />
-        </Stack>
-        <Stack direction="column" spacing={1} justifyContent="end">
-          <SmallButton icon="send" onClick={handleSave} disabled={isSubmitting} />
-        </Stack>
-      </Stack>
-    </Paper>
-  );
-
-};

package/src/donationComponents/DonationPage.tsx

@@ -1,215 +0,0 @@
-"use client";
-
-import React from "react";
-import { loadStripe, Stripe } from "@stripe/stripe-js";
-import { DonationForm, RecurringDonations, PaymentMethods } from "./components";
-import { DisplayBox, ExportLink, Loading } from "../components";
-import { ApiHelper, DateHelper, UniqueIdHelper, CurrencyHelper, Locale } from "../helpers";
-import { DonationInterface, PersonInterface, StripePaymentMethod, ChurchInterface } from "@churchapps/helpers";
-// import { Link } from "react-router-dom"
-import { Table, TableBody, TableRow, TableCell, TableHead, Alert, Button, Icon, Link, Menu, MenuItem } from "@mui/material"
-import { useMountedState } from "../hooks/useMountedState";
-
-interface Props { personId: string, appName?: string, church?: ChurchInterface, churchLogo?: string }
-
-export const DonationPage: React.FC<Props> = (props) => {
-  const [donations, setDonations] = React.useState<DonationInterface[]>(null);
-  const [stripePromise, setStripe] = React.useState<Promise<Stripe>>(null);
-  const [paymentMethods, setPaymentMethods] = React.useState<StripePaymentMethod[]>(null);
-  const [customerId, setCustomerId] = React.useState(null);
-  const [person, setPerson] = React.useState<PersonInterface>(null);
-  const [message, setMessage] = React.useState<string>(null);
-  const [appName, setAppName] = React.useState<string>("");
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const isMounted = useMountedState();
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  }
-
-  const loadPaymentMethods = async () => {
-    try {
-      const data = await ApiHelper.get("/paymentmethods/personid/" + props.personId, "GivingApi");
-      if (!data.length) {
-        setPaymentMethods([]);
-        return;
-      }
-      
-      const cards = data[0].cards.data.map((card: any) => new StripePaymentMethod(card));
-      const banks = data[0].banks.data.map((bank: any) => new StripePaymentMethod(bank));
-      setCustomerId(data[0].customer.id);
-      setPaymentMethods(cards.concat(banks));
-    } catch (error) {
-      console.error("Error loading payment methods:", error);
-      setPaymentMethods([]);
-    }
-  }
-
-  const loadPersonData = async () => {
-    try {
-      const data = await ApiHelper.get("/people/" + props.personId, "MembershipApi");
-      setPerson(data);
-    } catch (error) {
-      console.error("Error loading person data:", error);
-    }
-  }
-
-  const loadStripeData = async (gatewayData: any) => {
-    if (!gatewayData.length || !gatewayData[0]?.publicKey) {
-      setPaymentMethods([]);
-      return;
-    }
-    
-    setStripe(loadStripe(gatewayData[0].publicKey));
-    await Promise.all([
-      // loadPersonData(),
-      loadPaymentMethods()
-    ]);
-  }
-
-  const loadData = async () => {
-    if (props?.appName) setAppName(props.appName);
-    if (UniqueIdHelper.isMissing(props.personId)) return;
-    
-    try {
-      const [donationsData, gatewaysData] = await Promise.all([
-        ApiHelper.get("/donations?personId=" + props.personId, "GivingApi"),
-        ApiHelper.get("/gateways", "GivingApi")
-      ]);
-      
-      setDonations(donationsData);
-      await loadPersonData(); //moved this outside of loadStripeData to fix issue with person data not loading when there's no gateway data
-      await loadStripeData(gatewaysData);
-    } catch (error) {
-      console.error("Error loading donation data:", error);
-      setDonations([]);
-      setPaymentMethods([]);
-    }
-  }
-
-  const handleDataUpdate = (message?: string) => {
-    setMessage(message)
-    setPaymentMethods(null);
-    loadData();
-  }
-
-  const getEditContent = () => {
-    const result: React.ReactElement[] = [];
-    const date = new Date();
-    const currentY = date.getFullYear();
-    const lastY = date.getFullYear() - 1;
-
-    const current_year = (donations.length>0) ? donations.filter(d => new Date(d.donationDate || "2000-01-01").getFullYear() === currentY) : [];
-    const last_year = (donations.length>0) ? donations.filter(d => new Date(d.donationDate || "2000-01-01").getFullYear() === lastY) : [];
-    const customHeaders = [
-      { label: "amount", key: "amount" },
-      { label: "donationDate", key: "donationDate" },
-      { label: "fundName", key: "fund.name" },
-      { label: "method", key: "method"},
-      { label: "methodDetails", key: "methodDetails"},
-    ]
-
-    result.push(<>
-      <Button
-        id="download-button"
-        aria-controls={open ? "download-menu" : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-          setAnchorEl(e.currentTarget);
-        }}
-      >
-        <Icon>download</Icon>
-      </Button>
-      <Menu
-        id="download-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        MenuListProps={{ 'aria-labelledby': "download-button" }}
-      >
-        <MenuItem onClick={handleClose} dense><ExportLink data={current_year} filename="current_year_donations" customHeaders={customHeaders} text="Current Year (CSV)" icon="table_chart" /></MenuItem>
-        <MenuItem onClick={handleClose} dense><Link href={"/donations/print/" + person?.id}><Button><Icon>print</Icon> &nbsp; Current Year (PRINT)</Button></Link></MenuItem>
-        <MenuItem onClick={handleClose} dense><ExportLink data={last_year} filename="last_year_donations" customHeaders={customHeaders} text="Last Year (CSV)" icon="table_chart" /></MenuItem>
-        <MenuItem onClick={handleClose} dense><Link href={"/donations/print/" + person?.id + "?prev=1"}><Button><Icon>print</Icon> &nbsp; Last Year (PRINT)</Button></Link></MenuItem>
-      </Menu>
-    </>);
-
-    return result;
-  }
-
-  const getRows = () => {
-    let rows: React.ReactElement[] = [];
-
-    if (donations.length === 0) {
-      rows.push(<TableRow key="0"><TableCell>{Locale.label("donation.page.willAppear")}</TableCell></TableRow>);
-      return rows;
-    }
-
-    for (let i = 0; i < donations.length; i++) {
-      let d = donations[i];
-      rows.push(
-        <TableRow key={i}>
-          {appName !== "B1App" && <TableCell><Link href={"/donations/" + d.batchId}>{d.batchId}</Link></TableCell>}
-          <TableCell>{DateHelper.prettyDate(new Date(d.donationDate))}</TableCell>
-          <TableCell>{d.method} - {d.methodDetails}</TableCell>
-          <TableCell>{d.fund.name}</TableCell>
-          <TableCell>{CurrencyHelper.formatCurrency(d.fund.amount)}</TableCell>
-        </TableRow>
-      );
-    }
-    return rows;
-  }
-
-  const getTableHeader = () => {
-    const rows: React.ReactElement[] = []
-
-    if (donations.length > 0) {
-      rows.push(
-        <TableRow key="header" sx={{textAlign: "left"}}>
-          {appName !== "B1App" && <th>{Locale.label("donation.page.batch")}</th>}
-          <th>{Locale.label("donation.page.date")}</th>
-          <th>{Locale.label("donation.page.method")}</th>
-          <th>{Locale.label("donation.page.fund")}</th>
-          <th>{Locale.label("donation.page.amount")}</th>
-        </TableRow>
-      );
-    }
-
-    return rows;
-  }
-
-  React.useEffect(() => {
-    loadData();
-  }, [props.personId]); //eslint-disable-line
-
-  const getTable = () => {
-    if (!donations) return <Loading />;
-    else return (<Table>
-      <TableHead>{getTableHeader()}</TableHead>
-      <TableBody>{getRows()}</TableBody>
-    </Table>);
-  }
-
-  const getPaymentMethodComponents = () => {
-    if (!paymentMethods || !donations) return <Loading />;
-    else return (
-      <>
-        <DonationForm person={person} customerId={customerId} paymentMethods={paymentMethods} stripePromise={stripePromise} donationSuccess={handleDataUpdate} church={props?.church} churchLogo={props?.churchLogo} />
-        <DisplayBox headerIcon="payments" headerText="Donations" editContent={getEditContent()}>
-          {getTable()}
-        </DisplayBox>
-        <RecurringDonations customerId={customerId} paymentMethods={paymentMethods} appName={appName} dataUpdate={handleDataUpdate} />
-        <PaymentMethods person={person} customerId={customerId} paymentMethods={paymentMethods} appName={appName} stripePromise={stripePromise} dataUpdate={handleDataUpdate} />
-      </>
-    );
-  }
-
-  return (
-    <>
-      {paymentMethods && message && <Alert severity="success">{message}</Alert>}
-      {getPaymentMethodComponents()}
-    </>
-  );
-}