@churchapps/apphelper 0.0.14 → 0.1.1

package/src/components/{material → wrapper}/UserMenu.tsx

@@ -1,141 +1,106 @@
-import React from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { UserHelper } from "../../helpers/UserHelper";
-import { Avatar, Menu, Typography, Icon, Button, Box, Tabs, Tab, styled } from "@mui/material";
-import { NavItem, AppList } from "./";
-import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
-import { ChurchList } from "./ChurchList";
-import { SupportModal } from "../SupportModal";
-import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
-import { PrivateMessages } from "./PrivateMessages";
-
-interface TabPanelProps { children?: React.ReactNode; index: number; value: number; }
-
-const StyledMenuBox = styled(Box)(
-  ({ theme }) => ({
-    paddingTop: 10,
-    "& .MuiListItemButton-root": { paddingLeft: 30 },
-    "& .MuiListItemIcon-root": {
-      color: theme.palette.primary.main
-    },
-    "& .MuiListItemText-root": { color: theme.palette.text.primary },
-    "& .selected .MuiListItemText-root span": { fontWeight: "bold" }
-  })
-);
-
-function TabPanel(props: TabPanelProps) {
-  const { children, value, index } = props;
-
-  return (
-    <div role="tabpanel" hidden={value !== index} id={`userMenuPanel-${index}`}>
-      {value === index && (
-        <StyledMenuBox>
-          <Box>{children}</Box>
-        </StyledMenuBox>
-      )}
-    </div>
-  );
-}
-
-interface Props {
-  userName: string;
-  profilePicture: string;
-  userChurches: LoginUserChurchInterface[];
-  currentUserChurch: LoginUserChurchInterface;
-  context: UserContextInterface;
-  appName: string;
-  router?: any;
-}
-
-export const UserMenu: React.FC<Props> = (props) => {
-  const userName = props.userName;
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const [showSupport, setShowSupport] = React.useState(false);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    setAnchorEl(e.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const getMainLinks = () => {
-    const jwt = ApiHelper.getConfig("MembershipApi").jwt;
-    const churchId = UserHelper.currentUserChurch.church.id;
-    let result: JSX.Element[] = [];
-    if (props.appName === "CHUMS") result.push(<NavItem url={"/profile"} key="/profile" label="Profile" icon="person" router={props.router} />);
-    else result.push(<NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}&returnUrl=/profile`} key="/profile" label="Profile" icon="person" external={true} router={props.router} />);
-    result.push(<NavItem url="/logout" label="Logout" icon="logout" key="/logout" router={props.router} />);
-    result.push(<NavItem label="Support" key="Support" icon="help" onClick={() => { setShowSupport(true) }} />);
-    return result;
-  }
-
-  const getProfilePic = () => {
-    if (props.profilePicture) return props.profilePicture
-    else return "/images/sample-profile.png";
-  }
-
-  const paperProps = {
-    elevation: 0,
-    sx: {
-      overflow: "visible",
-      filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-      mt: 1.5,
-      "& .MuiAvatar-root": { width: 32, height: 32, ml: -0.5, mr: 1 },
-      minWidth: 450
-    }
-  };
-
-  const handleItemClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    console.log(e);
-  }
-
-  const [tabIndex, setTabIndex] = React.useState(0);
-
-  function handleChange(el: any, newValue: any) {
-    setTabIndex(newValue);
-  }
-
-  const getTabs = () => (
-    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-      <Tabs variant="fullWidth" value={tabIndex} onChange={handleChange}>
-        <Tab label="User" />
-        <Tab label="Messages" />
-        {props.userChurches.length > 1 && <Tab label="Church" />}
-        <Tab label="App" />
-      </Tabs>
-
-      <TabPanel value={tabIndex} index={0}>
-        {getMainLinks()}
-      </TabPanel>
-      <TabPanel value={tabIndex} index={1}>
-        <PrivateMessages context={props.context} />
-      </TabPanel>
-
-      {props.userChurches.length > 1 && <TabPanel value={tabIndex} index={2}>
-        <ChurchList userChurches={props.userChurches} currentUserChurch={props.currentUserChurch} context={props.context} />
-      </TabPanel>}
-      <TabPanel value={tabIndex} index={(props.userChurches.length > 1) ? 3 : 2}>
-        <AppList currentUserChurch={props.currentUserChurch} appName={props.appName} />
-      </TabPanel>
-    </Box>
-  );
-
-  return (
-    <>
-      {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
-      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} style={{ textTransform: "none" }} endIcon={<Icon>expand_more</Icon>}>
-        <Avatar src={getProfilePic()} sx={{ width: 32, height: 32, marginRight: 1 }}></Avatar>
-        <Typography color="inherit" noWrap>{userName}</Typography>
-      </Button>
-
-      <Menu anchorEl={anchorEl} id="account-menu" open={open} onClose={handleClose} onClick={(e) => { handleItemClick(e) }} PaperProps={paperProps} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
-        {getTabs()}
-
-      </Menu>
-    </>
-  );
-};
+import React from "react";
+import { ApiHelper } from "../../helpers/ApiHelper";
+import { UserHelper } from "../../helpers/UserHelper";
+import { Avatar, Menu, Typography, Icon, Button, Box, Tabs, Tab, Divider } from "@mui/material";
+import { NavItem, AppList } from ".";
+import { LoginUserChurchInterface, UserContextInterface } from "../../interfaces";
+import { ChurchList } from "./ChurchList";
+import { SupportModal } from "../SupportModal";
+import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
+import { TabPanel } from "../TabPanel";
+import { NavLink } from "react-router-dom";
+
+
+interface Props {
+  userName: string;
+  profilePicture: string;
+  userChurches: LoginUserChurchInterface[];
+  currentUserChurch: LoginUserChurchInterface;
+  context: UserContextInterface;
+  appName: string;
+  router?: any;
+}
+
+export const UserMenu: React.FC<Props> = (props) => {
+  const userName = props.userName;
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [showSupport, setShowSupport] = React.useState(false);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setAnchorEl(e.currentTarget);
+  };
+
+  const handleClose = () => {
+    setTabIndex(0);
+    setAnchorEl(null);
+  };
+
+  const getMainLinks = () => {
+    const jwt = ApiHelper.getConfig("MembershipApi").jwt;
+    const churchId = UserHelper.currentUserChurch.church.id;
+    let result: JSX.Element[] = [];
+    if (props.appName === "CHUMS") result.push(<NavItem url={"/profile"} key="/profile" label="Profile" icon="person" router={props.router} />);
+    else result.push(<NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}&returnUrl=/profile`} key="/profile" label="Profile" icon="person" external={true} router={props.router} />);
+    result.push(<NavItem url="/logout" label="Logout" icon="logout" key="/logout" router={props.router} />);
+    result.push(<NavItem label="Support" key="Support" icon="help" onClick={() => { setShowSupport(true) }} />);
+    result.push(<div style={{borderTop:"1px solid #CCC", paddingTop:2, paddingBottom:2}}></div>)
+    result.push(<NavItem label="Switch App" key="Switch App" icon="apps" onClick={() => { setTabIndex(1); }} />);
+    if (props.userChurches.length > 1) result.push(<NavItem label="Switch Church" key="Switch Church" icon="church" onClick={() => { setTabIndex(2); }} />);
+    return result;
+  }
+
+  const getProfilePic = () => {
+    if (props.profilePicture) return props.profilePicture
+    else return "/images/sample-profile.png";
+  }
+
+  const paperProps = {
+    elevation: 0,
+    sx: {
+      overflow: "visible",
+      filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+      mt: 1.5,
+      "& .MuiAvatar-root": { width: 32, height: 32, ml: -0.5, mr: 1 },
+      minWidth: 450
+    }
+  };
+
+  const handleItemClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    console.log(e);
+  }
+
+  const [tabIndex, setTabIndex] = React.useState(0);
+
+  const getTabs = () => (
+    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <TabPanel value={tabIndex} index={0}>
+        {getMainLinks()}
+      </TabPanel>
+      <TabPanel value={tabIndex} index={1}>
+        <NavItem label="Back" key="AppBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
+        <AppList currentUserChurch={props.currentUserChurch} appName={props.appName} />
+      </TabPanel>
+      {props.userChurches.length > 1 && <TabPanel value={tabIndex} index={2}>
+        <NavItem label="Back" key="ChurchBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
+        <ChurchList userChurches={props.userChurches} currentUserChurch={props.currentUserChurch} context={props.context} />
+      </TabPanel>}
+
+    </Box>
+  );
+
+  return (
+    <>
+      {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
+      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} style={{ textTransform: "none" }} endIcon={<Icon>expand_more</Icon>}>
+        <Avatar src={getProfilePic()} sx={{ width: 32, height: 32, marginRight: 1 }}></Avatar>
+        <Typography color="inherit" noWrap>{userName}</Typography>
+      </Button>
+
+      <Menu anchorEl={anchorEl} id="account-menu" open={open} onClose={handleClose} onClick={(e) => { handleItemClick(e) }} PaperProps={paperProps} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
+        {getTabs()}
+      </Menu>
+    </>
+  );
+};

package/src/components/{material → wrapper}/index.tsx

@@ -1,6 +1,5 @@
-export { NavItem } from "./NavItem";
-export { AppList } from "./AppList";
-export { SiteWrapper } from "./SiteWrapper";
-export { ChurchList } from "./ChurchList";
-export { UserMenu } from "./UserMenu";
-export { IconPicker } from "./iconPicker/IconPicker";
+export { NavItem } from "./NavItem";
+export { AppList } from "./AppList";
+export { SiteWrapper } from "./SiteWrapper";
+export { ChurchList } from "./ChurchList";
+export { UserMenu } from "./UserMenu";

package/src/donationComponents/DonationPage.tsx

@@ -1,136 +1,136 @@
-import React from "react";
-import { loadStripe, Stripe } from "@stripe/stripe-js";
-import { DonationForm, RecurringDonations, PaymentMethods } from "./components";
-import { DisplayBox, Loading } from "../components";
-import { ApiHelper, DateHelper, UniqueIdHelper, CurrencyHelper } from "../helpers";
-import { DonationInterface, PersonInterface, StripePaymentMethod, ChurchInterface } from "../interfaces";
-import { Link } from "react-router-dom"
-import { Table, TableBody, TableRow, TableCell, TableHead, Alert } 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 isMounted = useMountedState();
-
-  const loadData = () => {
-    if (props?.appName) setAppName(props.appName);
-    if (!UniqueIdHelper.isMissing(props.personId)) {
-      ApiHelper.get("/donations?personId=" + props.personId, "GivingApi").then(data => {
-        if(isMounted()) {
-          setDonations(data);
-        }});
-      ApiHelper.get("/gateways", "GivingApi").then(data => {
-        if (data.length && data[0]?.publicKey) {
-          if(isMounted()) {
-            setStripe(loadStripe(data[0].publicKey));
-          }
-          ApiHelper.get("/paymentmethods/personid/" + props.personId, "GivingApi").then(results => {
-            if(!isMounted()) {
-              return;
-            }
-            if (!results.length) setPaymentMethods([]);
-            else {
-              let cards = results[0].cards.data.map((card: any) => new StripePaymentMethod(card));
-              let banks = results[0].banks.data.map((bank: any) => new StripePaymentMethod(bank));
-              let methods = cards.concat(banks);
-              setCustomerId(results[0].customer.id);
-              setPaymentMethods(methods);
-            }
-          });
-          ApiHelper.get("/people/" + props.personId, "MembershipApi").then(data => {
-            if(isMounted()) {
-              setPerson(data);
-            }
-          });
-        }
-        else setPaymentMethods([]);
-      });
-    }
-  }
-
-  const handleDataUpdate = (message?: string) => {
-    setMessage(message)
-    setPaymentMethods(null);
-    loadData();
-  }
-
-  const getRows = () => {
-    let rows: JSX.Element[] = [];
-
-    if (donations.length === 0) {
-      rows.push(<TableRow key="0"><TableCell>Donations will appear once a donation has been entered.</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 to={"/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: JSX.Element[] = []
-
-    if (donations.length > 0) {
-      rows.push(
-        <TableRow key="header" sx={{textAlign: "left"}}>
-          {appName !== "B1App" && <th>Batch</th>}
-          <th>Date</th>
-          <th>Method</th>
-          <th>Fund</th>
-          <th>Amount</th>
-        </TableRow>
-      );
-    }
-
-    return rows;
-  }
-
-  React.useEffect(loadData, [isMounted]); //eslint-disable-line
-
-  const getTable = () => {
-    if (!donations) return <Loading />;
-    else return (<Table>
-      <TableHead>{getTableHeader()}</TableHead>
-      <TableBody>{getRows()}</TableBody>
-    </Table>);
-  }
-
-  const getPaymentMethodComponents = () => {
-    if (!paymentMethods) 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">
-          {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()}
-    </>
-  );
-}
+import React from "react";
+import { loadStripe, Stripe } from "@stripe/stripe-js";
+import { DonationForm, RecurringDonations, PaymentMethods } from "./components";
+import { DisplayBox, Loading } from "../components";
+import { ApiHelper, DateHelper, UniqueIdHelper, CurrencyHelper } from "../helpers";
+import { DonationInterface, PersonInterface, StripePaymentMethod, ChurchInterface } from "../interfaces";
+import { Link } from "react-router-dom"
+import { Table, TableBody, TableRow, TableCell, TableHead, Alert } 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 isMounted = useMountedState();
+
+  const loadData = () => {
+    if (props?.appName) setAppName(props.appName);
+    if (!UniqueIdHelper.isMissing(props.personId)) {
+      ApiHelper.get("/donations?personId=" + props.personId, "GivingApi").then(data => {
+        if(isMounted()) {
+          setDonations(data);
+        }});
+      ApiHelper.get("/gateways", "GivingApi").then(data => {
+        if (data.length && data[0]?.publicKey) {
+          if(isMounted()) {
+            setStripe(loadStripe(data[0].publicKey));
+          }
+          ApiHelper.get("/paymentmethods/personid/" + props.personId, "GivingApi").then(results => {
+            if(!isMounted()) {
+              return;
+            }
+            if (!results.length) setPaymentMethods([]);
+            else {
+              let cards = results[0].cards.data.map((card: any) => new StripePaymentMethod(card));
+              let banks = results[0].banks.data.map((bank: any) => new StripePaymentMethod(bank));
+              let methods = cards.concat(banks);
+              setCustomerId(results[0].customer.id);
+              setPaymentMethods(methods);
+            }
+          });
+          ApiHelper.get("/people/" + props.personId, "MembershipApi").then(data => {
+            if(isMounted()) {
+              setPerson(data);
+            }
+          });
+        }
+        else setPaymentMethods([]);
+      });
+    }
+  }
+
+  const handleDataUpdate = (message?: string) => {
+    setMessage(message)
+    setPaymentMethods(null);
+    loadData();
+  }
+
+  const getRows = () => {
+    let rows: JSX.Element[] = [];
+
+    if (donations.length === 0) {
+      rows.push(<TableRow key="0"><TableCell>Donations will appear once a donation has been entered.</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 to={"/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: JSX.Element[] = []
+
+    if (donations.length > 0) {
+      rows.push(
+        <TableRow key="header" sx={{textAlign: "left"}}>
+          {appName !== "B1App" && <th>Batch</th>}
+          <th>Date</th>
+          <th>Method</th>
+          <th>Fund</th>
+          <th>Amount</th>
+        </TableRow>
+      );
+    }
+
+    return rows;
+  }
+
+  React.useEffect(loadData, [isMounted]); //eslint-disable-line
+
+  const getTable = () => {
+    if (!donations) return <Loading />;
+    else return (<Table>
+      <TableHead>{getTableHeader()}</TableHead>
+      <TableBody>{getRows()}</TableBody>
+    </Table>);
+  }
+
+  const getPaymentMethodComponents = () => {
+    if (!paymentMethods) 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">
+          {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()}
+    </>
+  );
+}