@churchapps/apphelper 0.4.12 → 0.4.18

package/src/components/reporting/ReportWithFilter.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import React from "react";
-import { ReportInterface, ReportPermissionInterface } from "@churchapps/helpers";
-import { ApiHelper, UserHelper } from "../../helpers"
-import { Loading } from "../Loading"
-import { Grid } from "@mui/material"
-import { ReportOutput } from "./ReportOutput"
-import { ReportFilter } from "./ReportFilter"
-import { useMountedState } from "../../hooks/useMountedState";
-
-interface Props { keyName: string, autoRun: boolean }
-
-export const ReportWithFilter = (props: Props) => {
-  const [report, setReport] = React.useState<ReportInterface>(null);
-  const [reportToRun, setReportToRun] = React.useState<ReportInterface>(null);
-  const isMounted = useMountedState();
-
-  const loadData = () => {
-    setReportToRun(null);
-    setReport(null);
-    ApiHelper.get("/reports/" + props.keyName, "ReportingApi").then(data => {
-      if(isMounted()) {
-        setReport(data);
-      }
-    });
-  }
-
-  const handleAutoRun = () => {
-    if (props.autoRun && report) {
-      setReportToRun(report);
-    }
-  }
-
-  React.useEffect(loadData, [props.keyName, isMounted]);
-  React.useEffect(handleAutoRun, [report, props.autoRun]);
-
-  const handleRun = () => { setReportToRun(report); }
-
-  const handleChange = (r: ReportInterface) => setReport(r);
-
-  const checkAccess = () => {
-    let result = true;
-    report.permissions.forEach(rpg => {
-      let groupResult = checkGroup(rpg.requireOne);
-      if (!groupResult) result = false;  //between groups use AND
-    })
-    return result;
-  }
-
-  //Within groups use OR
-  const checkGroup = (pa: ReportPermissionInterface[]) => {
-    let result = false;
-    pa.forEach(p => {
-      if (UserHelper.checkAccess(p)) result = true;
-    });
-    return result;
-  }
-
-  if (!report) return <Loading />
-  if (!checkAccess()) return <></>
-  else {
-    return (<Grid container spacing={3}>
-      <Grid size={{ xs: 12, md: 8 }}>
-        <ReportOutput keyName={props.keyName} report={reportToRun} />
-      </Grid>
-      <Grid size={{ xs: 12, md: 4 }}>
-        <ReportFilter report={report} onChange={handleChange} onRun={handleRun} />
-      </Grid>
-    </Grid>)
-  }
-}

package/src/components/reporting/TableReport.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import React from "react";
-import { ReportOutputInterface, ReportResultInterface } from "@churchapps/helpers";
-import { Table, TableBody, TableRow, TableCell, TableHead } from "@mui/material";
-import { ReportHelper } from "../../helpers/ReportHelper";
-
-interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
-
-export const TableReport = (props: Props) => {
-
-  const getHeaders = () => {
-    const result: React.ReactElement[] = []
-    props.output.columns.forEach((c, i) => {
-      result.push(<TableCell key={i} style={{fontWeight:"bold"}}>{c.header}</TableCell>);
-    })
-    return result;
-  }
-
-  const getRows = () => {
-    const result: React.ReactElement[] = []
-    props.reportResult.table.forEach(d => {
-      const row: React.ReactElement[] = [];
-      props.output.columns.forEach(c => {
-        row.push(<TableCell>{ReportHelper.getField(c, d)}</TableCell>);
-      })
-      result.push(<TableRow>{row}</TableRow>);
-    });
-    return result;
-  }
-
-  return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          {getHeaders()}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {getRows()}
-      </TableBody>
-    </Table>
-  );
-}

package/src/components/reporting/TreeReport.tsx

@@ -1,103 +0,0 @@
-"use client";
-
-import React from "react";
-import { ReportOutputInterface, ReportResultInterface } from "@churchapps/helpers"
-import { Table, TableBody, TableRow, TableCell, TableHead } from "@mui/material"
-import { ReportHelper } from "../../helpers/ReportHelper";
-
-interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
-
-export const TreeReport = (props: Props) => {
-
-  const getPreviousGroupingCount = (depth: number) => {
-    let result = 0;
-    for (let i = 0; i < depth; i++) result += props.output.groupings[i];
-    return result;
-  }
-
-  let totalGroupings = getPreviousGroupingCount(props.output.groupings.length);
-
-  const getHeaders = () => {
-    const result: React.ReactElement[] = []
-    const columns = props.output.columns;
-    for (let i = totalGroupings; i < columns.length; i++) {
-      const c = columns[i];
-      if (i === totalGroupings) result.push(<th key={i}>{c.header}</th>);
-      else result.push(<th key={i}>{c.header}</th>);
-    }
-    return result;
-  }
-
-  const getRows = () => {
-    const result: React.ReactElement[] = []
-    const columns = props.output.columns;
-    let previousData = {}
-    props.reportResult.table.forEach(d => {
-      const row: React.ReactElement[] = [];
-      const groupingRows: React.ReactElement[] = getGroupingRows(previousData, d);
-      groupingRows.forEach(gr => result.push(gr));
-      for (let i = totalGroupings; i < columns.length; i++) {
-        const c = columns[i];
-        if (i === totalGroupings) row.push(<TableCell style={{ paddingLeft: 30 * totalGroupings }}>{ReportHelper.getField(c, d)}</TableCell>);
-        else row.push(<TableCell>{ReportHelper.getField(c, d)}</TableCell>);
-      }
-      result.push(<TableRow>{row}</TableRow>);
-      previousData = d;
-    });
-    return result;
-  }
-
-  const getGroupingRows = (previousData: any, data: any) => {
-    const result: React.ReactElement[] = [];
-    let firstGroupModified = getFirstGroupModified(previousData, data);
-    for (let i = firstGroupModified; i <= props.output.groupings.length; i++) {
-      result.push(getGroupingRow(data, i))
-    }
-    return result;
-  }
-
-  const getGroupingRow = (row: any, groupNumber: number) => {
-    const g = props.output.groupings[groupNumber];
-    const prevCols = getPreviousGroupingCount(groupNumber);
-    const outputRow: React.ReactElement[] = [];
-    for (let i = prevCols; i < prevCols + g; i++) {
-      const c = props.output.columns[i];
-      const className = "heading" + (groupNumber + 1);
-      if (i === prevCols && i > 0) outputRow.push(<TableCell className={className} style={{ paddingLeft: 30 * groupNumber }}>{ReportHelper.getField(c, row)}</TableCell>);
-      else outputRow.push(<TableCell className={className}>{ReportHelper.getField(c, row)}</TableCell>);
-    }
-    return (<TableRow>{outputRow}</TableRow>);
-  }
-
-  const getFirstGroupModified = (previousRow: any, row: any) => {
-    let firstColumnModified = props.output.columns.length - 1;
-    for (let i = props.output.columns.length - 1; i >= 0; i--) {
-      const colName = props.output.columns[i].value;
-      if (row[colName] !== previousRow[colName]) {
-        firstColumnModified = i;
-      }
-    }
-
-    let firstGroupModified = props.output.groupings.length;
-    for (let i = props.output.groupings.length - 1; i >= 0; i--) {
-      let totalColumns = getPreviousGroupingCount(i);
-      if (totalColumns >= firstColumnModified) firstGroupModified = i;
-    }
-
-    return firstGroupModified;
-  }
-
-
-  return (
-    <Table className="table table-sm report">
-      <TableHead className="thead-dark">
-        <TableRow>
-          {getHeaders()}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {getRows()}
-      </TableBody>
-    </Table>
-  );
-}

package/src/components/reporting/index.ts

@@ -1,4 +0,0 @@
-export { ReportFilter } from "./ReportFilter"
-export { ReportFilterField } from "./ReportFilterField"
-export { ReportOutput } from "./ReportOutput"
-export { ReportWithFilter } from "./ReportWithFilter"

package/src/components/wrapper/Drawers.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { AppBar, Drawer, styled } from "@mui/material";
-
-export const OpenDrawer = (styles:any) => styled(Drawer)(
-  ({ theme }) => ({
-    "& .MuiDrawer-paper": {
-      position: "relative",
-      backgroundColor: styles.backgroundColor || theme.palette.primary.main,
-      color: "#FFFFFF",
-      whiteSpace: "nowrap",
-      width: "100vw",
-      zIndex: 9999,
-      [theme.breakpoints.up("md")]: { width: 220 },
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen
-      }),
-      boxSizing: "border-box"
-    },
-    "& .MuiListItemButton-root, & .MuiListItemIcon-root": { color: "#FFFFFF" }
-  })
-);
-
-export const ClosedDrawer = (styles:any) => styled(OpenDrawer(styles))(
-  ({ theme }) => ({
-    overflowX: "hidden",
-    transition: theme.transitions.create("width", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
-    }),
-    zIndex: 1,
-    width: theme.spacing(7),
-    [theme.breakpoints.up("sm")]: { width: theme.spacing(7) },
-    "& .MuiListSubheader-root": {
-      opacity: 0
-    }
-  })
-);
-
-export const ClosedDrawerAppBar = styled(AppBar)(
-  ({ theme }) => ({
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(["width", "margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
-    }),
-    "& .MuiIcon-root": { color: "#FFFFFF" }
-  })
-);
-
-export const OpenDrawerAppBar = styled(ClosedDrawerAppBar)(
-  ({ theme }) => ({
-    marginLeft: 220,
-    width: `calc(100% - ${220}px)`,
-    transition: theme.transitions.create(["width", "margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen
-    })
-  })
-);
-

package/src/components/wrapper/SiteWrapper.tsx

@@ -1,99 +0,0 @@
-"use client";
-
-import React, { CSSProperties } from "react";
-import { IconButton, Toolbar, Icon, Typography, Box, Container, Link } from "@mui/material";
-import { UserHelper, AppearanceHelper, PersonHelper, AppearanceInterface, ApiHelper } from "../../helpers";
-import { UserMenu } from "./UserMenu";
-import { UserContextInterface } from "@churchapps/helpers";
-import { useMountedState } from "../../hooks/useMountedState";
-import { SocketHelper } from "../../helpers/SocketHelper";
-import { ClosedDrawer, ClosedDrawerAppBar, OpenDrawer, OpenDrawerAppBar } from "./Drawers";
-
-interface Props {
-  navContent: React.ReactElement,
-  context: UserContextInterface,
-  children: React.ReactNode,
-  appName: string,
-  onNavigate: (url: string) => void,
-  appearance?: AppearanceInterface,
-  omitOverflow?: boolean
-}
-
-export const SiteWrapper: React.FC<Props> = props => {
-  const [churchLogo, setChurchLogo] = React.useState<string>();
-  const [open, setOpen] = React.useState(false);
-  const [notificationCounts, setNotificationCounts] = React.useState({notificationCount:0, pmCount:0});
-  const toggleDrawer = () => { setOpen(!open); };
-  const isMounted = useMountedState();
-
-  const CustomDrawer = (open) ? OpenDrawer({backgroundColor:props.appearance.wrapperBackground}) : ClosedDrawer({backgroundColor:props.appearance.wrapperBackground});
-  const CustomAppBar = (open) ? OpenDrawerAppBar : ClosedDrawerAppBar;
-
-  const loadCounts = () => {
-    ApiHelper.get("/notifications/unreadCount", "MessagingApi").then(data => {
-      if (!notificationCounts || JSON.stringify(notificationCounts) !== JSON.stringify(data)) setNotificationCounts(data);
-    });
-  }
-
-  const handleNotification = () => {
-    loadCounts();
-  }
-
-
-
-  React.useEffect(() => {
-    const getChurchLogo = async () => {
-      if (UserHelper.currentUserChurch) {
-        setChurchLogo(AppearanceHelper.getLogoDark(props.appearance, "/images/logo-wrapper.png"));
-      }
-    }
-
-    if (!isMounted()) {
-      getChurchLogo();
-    }
-  }, [isMounted, props.appearance]);
-
-
-  React.useEffect(() => {
-    if (!props.context.userChurch) SocketHelper.setPersonChurch({personId:null, churchId:null});
-    else SocketHelper.setPersonChurch({personId:props.context.userChurch?.person?.id, churchId:props.context.userChurch?.church?.id});
-  }, [props.context.userChurch]);
-
-  React.useEffect(() => {
-    SocketHelper.addHandler("notification", "notificationBell", handleNotification);
-    SocketHelper.init();
-    loadCounts();
-  }, []);
-
-  const boxStyle: CSSProperties = { flexGrow: 1, marginTop: 8, minHeight: "90vh" }
-  if (!props.omitOverflow) boxStyle.overflow = "auto";
-
-  return <>
-    <CustomAppBar position="absolute">
-      <Toolbar sx={{ pr: "24px", backgroundColor: props.appearance?.wrapperBackground }}>
-        <IconButton edge="start" color="inherit" aria-label="open drawer" onClick={toggleDrawer} sx={{ marginRight: "36px", ...(open && { display: "none" }) }} data-testid="open-navigation-drawer">
-          <Icon>menu</Icon>
-        </IconButton>
-        <Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>
-        <div style={{ flex: 1 }}></div>
-        {UserHelper.user && <UserMenu profilePicture={PersonHelper.getPhotoUrl(props.context?.person)} userName={`${UserHelper.user?.firstName} ${UserHelper.user?.lastName}`} userChurches={UserHelper.userChurches} currentUserChurch={UserHelper.currentUserChurch} context={props.context} appName={props.appName} onNavigate={props.onNavigate} loadCounts={loadCounts} notificationCounts={notificationCounts} />}
-        {!UserHelper.user && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
-      </Toolbar>
-    </CustomAppBar>
-
-    <CustomDrawer style={{ backgroundColor: props.appearance?.wrapperBackground }} variant="permanent" open={open} onMouseOver={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
-      <Toolbar sx={{ display: "flex", alignItems: "center", width: "100%", px: [1] }}>
-        <img src={churchLogo || "/images/logo-wrapper.png"} alt="logo" style={{ maxWidth: 170 }} />
-        <div style={{ justifyContent: "flex-end", flex: 1, display: "flex" }}>
-          <IconButton onClick={toggleDrawer} aria-label="close navigation drawer" data-testid="close-navigation-drawer"><Icon style={{ color: "#FFFFFF" }}>chevron_left</Icon></IconButton>
-        </div>
-      </Toolbar>
-      {props.navContent}
-    </CustomDrawer>
-    <Box component="main" sx={boxStyle}>
-      <Container maxWidth={false} sx={{ mt: 4, mb: 4 }}>
-        {props.children}
-      </Container>
-    </Box>
-  </>
-};

package/src/components/wrapper/TabPanel.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import React from "react";
-import { Box, styled } from "@mui/material";
-
-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" }
-  })
-);
-
-export 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>
-  );
-}

package/src/donationComponents/components/BankForm.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import React from "react";
-import { FormControl, Grid, InputLabel, MenuItem, Select, TextField } from "@mui/material";
-import type { SelectChangeEvent } from "@mui/material";
-import { useStripe } from "@stripe/react-stripe-js";
-import { InputBox, ErrorMessages } from "../../components";
-import { ApiHelper, Locale } from "../../helpers";
-import { PersonInterface, StripePaymentMethod, PaymentMethodInterface, StripeBankAccountInterface, StripeBankAccountUpdateInterface, StripeBankAccountVerifyInterface } from "@churchapps/helpers";
-
-interface Props { bank: StripePaymentMethod, showVerifyForm: boolean, customerId: string, person: PersonInterface, setMode: any, deletePayment: any, updateList: (message?: string) => void }
-
-export const BankForm: React.FC<Props> = (props) => {
-  const stripe = useStripe();
-  const [bankAccount, setBankAccount] = React.useState<StripeBankAccountInterface>({ account_holder_name: props.bank.account_holder_name, account_holder_type: props.bank.account_holder_type, country: "US", currency: "usd" } as StripeBankAccountInterface);
-  const [paymentMethod] = React.useState<PaymentMethodInterface>({ customerId: props.customerId, personId: props.person.id, email: props.person.contactInfo.email, name: props.person.name.display });
-  const [updateBankData] = React.useState<StripeBankAccountUpdateInterface>({ paymentMethodId: props.bank.id, customerId: props.customerId, personId: props.person.id, bankData: { account_holder_name: props.bank.account_holder_name, account_holder_type: props.bank.account_holder_type } } as StripeBankAccountUpdateInterface);
-  const [verifyBankData, setVerifyBankData] = React.useState<StripeBankAccountVerifyInterface>({ paymentMethodId: props.bank.id, customerId: props.customerId, amountData: { amounts: [] } });
-  const [showSave, setShowSave] = React.useState<boolean>(true);
-  const [errorMessage, setErrorMessage] = React.useState<string>(null);
-  const saveDisabled = () => { };
-  const handleCancel = () => { props.setMode("display"); };
-  const handleDelete = () => { props.deletePayment(); };
-  const handleSave = () => {
-    setShowSave(false);
-    if (props.showVerifyForm) verifyBank();
-    else props.bank.id ? updateBank() : createBank();
-  };
-
-  const createBank = async () => {
-    if (!bankAccount.routing_number || !bankAccount.account_number) setErrorMessage(Locale.label("donation.bankForm.validate.accountNumber"));
-    else {
-      await stripe.createToken("bank_account", bankAccount).then(response => {
-        if (response?.error?.message) setErrorMessage(response.error.message);
-        else {
-          const pm = { ...paymentMethod };
-          pm.id = response.token.id;
-          ApiHelper.post("/paymentmethods/addbankaccount", pm, "GivingApi").then(result => {
-            if (result?.raw?.message) setErrorMessage(result.raw.message);
-            else {
-              props.updateList(Locale.label("donation.bankForm.added"));
-              props.setMode("display");
-            }
-          });
-        }
-      });
-    }
-    setShowSave(true);
-  };
-
-  const updateBank = () => {
-    if (bankAccount.account_holder_name === "") setErrorMessage(Locale.label("donation.bankForm.validate.holderName"));
-    else {
-      const bank = { ...updateBankData };
-      bank.bankData.account_holder_name = bankAccount.account_holder_name;
-      bank.bankData.account_holder_type = bankAccount.account_holder_type;
-      ApiHelper.post("/paymentmethods/updatebank", bank, "GivingApi").then(response => {
-        if (response?.raw?.message) setErrorMessage(response.raw.message);
-        else {
-          props.updateList(Locale.label("donation.bankForm.updated"));
-          props.setMode("display");
-        }
-      });
-    }
-    setShowSave(true);
-  };
-
-  const verifyBank = () => {
-    const amounts = verifyBankData?.amountData?.amounts;
-    if (amounts && amounts.length === 2 && amounts[0] !== "" && amounts[1] !== "") {
-      ApiHelper.post("/paymentmethods/verifyBank", verifyBankData, "GivingApi").then(response => {
-        if (response?.raw?.message) setErrorMessage(response.raw.message);
-        else {
-          props.updateList(Locale.label("donation.bankForm.verified"));
-          props.setMode("display");
-        }
-      });
-    } else setErrorMessage("Both deposit amounts are required.");
-    setShowSave(true);
-  };
-
-  const getHeaderText = () => props.bank.id
-    ? `${props.bank.name.toUpperCase()} ****${props.bank.last4}`
-    : "Add New Bank Account";
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    const bankData = { ...bankAccount };
-    const inputData = { [e.target.name]: e.target.value };
-    setBankAccount({ ...bankData, ...inputData });
-    setShowSave(true);
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent<any>) => {
-    const pattern = /^\d+$/;
-    if (!pattern.test(e.key)) e.preventDefault();
-  };
-
-  const handleVerify = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const verifyData = { ...verifyBankData };
-    if (e.currentTarget.name === "amount1") verifyData.amountData.amounts[0] = e.currentTarget.value;
-    if (e.currentTarget.name === "amount2") verifyData.amountData.amounts[1] = e.currentTarget.value;
-    setVerifyBankData(verifyData);
-  };
-
-  const getForm = () => {
-    if (props.showVerifyForm) {
-      return (<>
-        <p>{Locale.label("donation.bankForm.twoDeposits")}</p>
-        <Grid container columnSpacing={2}>
-          <Grid size={{ xs: 12, md: 6 }}>
-            <TextField fullWidth aria-label="amount1" label={Locale.label("donation.bankForm.firstDeposit")} name="amount1" placeholder="00" inputProps={{ maxLength: 2 }} onChange={handleVerify} onKeyPress={handleKeyPress} />
-          </Grid>
-          <Grid size={{ xs: 12, md: 6 }}>
-            <TextField fullWidth aria-label="amount2" label={Locale.label("donation.bankForm.secondDeposit")} name="amount2" placeholder="00" inputProps={{ maxLength: 2 }} onChange={handleVerify} onKeyPress={handleKeyPress} />
-          </Grid>
-        </Grid>
-      </>);
-
-    } else {
-      let accountDetails = <></>;
-      if (!props.bank.id) {
-accountDetails = (
-        <Grid container spacing={3}>
-          <Grid size={{ xs: 12, md: 6 }} style={{ marginBottom: "20px" }}>
-            <TextField fullWidth label={Locale.label("donation.bankForm.routingNumber")} type="number" name="routing_number" aria-label="routing-number" placeholder="Routing Number" className="form-control" onChange={handleChange} />
-          </Grid>
-          <Grid size={{ xs: 12, md: 6 }} style={{ marginBottom: "20px" }}>
-            <TextField fullWidth label={Locale.label("donation.bankForm.accountNumber")} type="number" name="account_number" aria-label="account-number" placeholder="Account Number" className="form-control" onChange={handleChange} />
-          </Grid>
-        </Grid>
-      );
-}
-      return (<>
-        <Grid container spacing={3}>
-          <Grid size={{ xs: 12, md: 6 }} style={{ marginBottom: "20px" }}>
-            <TextField fullWidth label="Account Holder Name" name="account_holder_name" required aria-label="account-holder-name" placeholder="Account Holder Name" value={bankAccount.account_holder_name} className="form-control" onChange={handleChange} />
-          </Grid>
-          <Grid size={{ xs: 12, md: 6 }} style={{ marginBottom: "20px" }}>
-            <FormControl fullWidth>
-              <InputLabel>{Locale.label("donation.bankForm.name")}</InputLabel>
-              <Select label={Locale.label("donation.bankForm.name")} name="account_holder_type" aria-label="account-holder-type" value={bankAccount.account_holder_type} onChange={handleChange}>
-                <MenuItem value="individual">{Locale.label("donation.bankForm.individual")}</MenuItem>
-                <MenuItem value="company">{Locale.label("donation.bankForm.company")}</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
-        </Grid>
-        {accountDetails}
-      </>);
-    }
-  };
-
-  return (
-    <InputBox headerIcon="volunteer_activism" headerText={getHeaderText()} ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} saveFunction={showSave ? handleSave : saveDisabled} deleteFunction={props.bank.id && !props.showVerifyForm ? handleDelete : undefined}>
-      {errorMessage && <ErrorMessages errors={[errorMessage]}></ErrorMessages>}
-      <div>
-        {!props.bank.id && <p>{Locale.label("donation.bankForm.needVerified")}</p>}
-        {getForm()}
-      </div>
-    </InputBox>
-  );
-
-};