@churchapps/apphelper 0.0.1

package/src/components/reporting/ReportFilter.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { ReportInterface, ParameterInterface } from "../../interfaces";
+import { ArrayHelper } from "../../helpers"
+import { InputBox } from "../"
+import { ReportFilterField } from "./ReportFilterField";
+
+interface Props { report: ReportInterface, onChange: (report: ReportInterface) => void, onRun: () => void }
+
+export const ReportFilter = (props: Props) => {
+
+  const handleChange = (parameter: ParameterInterface, permittedChildIds: string[]) => {
+    const r = { ...props.report };
+    const p: ParameterInterface = ArrayHelper.getOne(r.parameters, "keyName", parameter.keyName);
+    p.value = parameter.value;
+    updateChildIds(r, p, permittedChildIds)
+    props.onChange(r);
+  }
+
+  const updateChildIds = (report: ReportInterface, parameter: ParameterInterface, permittedChildIds: string[]) => {
+    switch (parameter.sourceKey) {
+      case "campus":
+        setRequiredParentIds(report, "service", permittedChildIds);
+        break;
+      case "service":
+        setRequiredParentIds(report, "serviceTime", permittedChildIds);
+        break;
+      case "serviceTime":
+        setRequiredParentIds(report, "group", permittedChildIds);
+        break;
+    }
+  }
+
+  const setRequiredParentIds = (report: ReportInterface, childSourceKey: string, requiredParentIds: string[]) => {
+    const child: ParameterInterface = ArrayHelper.getOne(report.parameters, "sourceKey", childSourceKey);
+    if (child) child.requiredParentIds = requiredParentIds;
+  }
+
+  const getInputs = () => {
+    const result: JSX.Element[] = [];
+    props.report.parameters.forEach((p, i) => {
+      if (p.source === "dropdown" || p.source === "date") {
+        result.push(<ReportFilterField key={i} parameter={p} report={props.report} onChange={handleChange} />)
+      }
+    });
+    return result;
+  }
+
+  const inputs = getInputs();
+  if (inputs.length > 0) {
+    return <InputBox id="formSubmissionBox" headerText="Filter Report" headerIcon="summarize" saveFunction={props.onRun} saveText="Run Report">
+      {inputs}
+    </InputBox>
+  } else return <> </>
+}

package/src/components/reporting/ReportFilterField.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import { ReportInterface, ParameterInterface } from "../../interfaces";
+import { ApiHelper, ArrayHelper, DateHelper } from "../../helpers";
+import { FormControl, InputLabel, Select, SelectChangeEvent, TextField, MenuItem } from "@mui/material";
+import { useMountedState } from "../../hooks/useMountedState";
+
+interface Props {
+  parameter: ParameterInterface,
+  report: ReportInterface,
+  onChange: (parameter: ParameterInterface, permittedChildIds: string[]) => void
+}
+
+export const ReportFilterField = (props: Props) => {
+
+  const [rawData, setRawData] = React.useState<any[]>(null);
+  const [secondaryData, setSecondaryData] = React.useState<any[]>(null);
+  const isMounted = useMountedState();
+
+  const init = async () => {
+    switch (props.parameter.sourceKey) {
+      case "provided":
+        setRawData(props.parameter.options);
+        break;
+      case "month":
+        setRawData(getMonths());
+        break;
+      case "campus":
+        ApiHelper.get("/campuses", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
+          if(isMounted()) {
+            setRawData(data);
+          }})
+        break;
+      case "service":
+        ApiHelper.get("/services", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
+          if(isMounted()) {
+            setRawData(data);
+          }})
+        break;
+      case "serviceTime":
+        ApiHelper.get("/serviceTimes", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
+          if(isMounted()) {
+            setRawData(data);
+          }})
+        break;
+      case "group":
+        ApiHelper.get("/groups", "MembershipApi").then(data => { data.unshift({ id: "", name: "Any" });
+          if(isMounted()) {
+            setRawData(data);
+          }})
+        ApiHelper.get("/groupServiceTimes", "AttendanceApi").then(data => {
+          if(isMounted()) {
+            setSecondaryData(data);
+          }})
+        break;
+    }
+    setDefaultValue();
+  }
+
+  const setDefaultValue = () => {
+    switch (props.parameter.source) {
+      case "date":
+        if (props.parameter.defaultValue) {
+          let dt = new Date();
+          if (props.parameter.defaultValue === "yesterday") dt.setDate(dt.getDate() - 1);
+          if (props.parameter.defaultValue === "lastYear") dt.setFullYear(dt.getFullYear() - 1);
+          if (props.parameter.defaultValue === "lastSunday") dt = DateHelper.getLastSunday();
+          const p = { ...props.parameter };
+          p.value = DateHelper.formatHtml5Date(dt);
+          props.onChange(p, []);
+        }
+        break;
+    }
+  }
+
+  const getMonths = () => {
+    const list = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novermber", "December"]
+    const result = [];
+    for (let i = 0; i < list.length; i++) result.push({ value: (i + 1).toString(), text: list[i] });
+    return result;
+  }
+
+  const getIdName = () => {
+    const result: { value: string, text: string }[] = [];
+    filterOptions().forEach(d => { result.push({ value: d.id, text: d.name }); });
+    return result;
+  }
+
+  const filterOptions = () => {
+    let result = rawData;
+    if (props.parameter.requiredParentIds?.length > 0) {
+      switch (props.parameter.sourceKey) {
+        case "service":
+          result = ArrayHelper.getAllArray(rawData, "campusId", props.parameter.requiredParentIds);
+          result.unshift({ id: "", name: "Any" });
+          break;
+        case "serviceTime":
+          result = ArrayHelper.getAllArray(rawData, "serviceId", props.parameter.requiredParentIds);
+          result.unshift({ id: "", name: "Any" });
+          break;
+        case "group":
+          const times = ArrayHelper.getAllArray(secondaryData, "serviceTimeId", props.parameter.requiredParentIds)
+          result = ArrayHelper.getAllArray(rawData, "id", ArrayHelper.getUniqueValues(times, "groupId"));
+          result.unshift({ id: "", name: "Any" });
+          break;
+      }
+    }
+    return result;
+  }
+
+  const getOptions = () => {
+    let options: { value: string, text: string }[] = []
+    if (rawData) {
+      switch (props.parameter.sourceKey) {
+        case "campus":
+        case "service":
+        case "serviceTime":
+        case "group":
+          options = getIdName();
+          break;
+        case "month":
+        case "provided":
+          options = rawData;
+          break;
+      }
+    }
+
+    return options;
+  }
+
+  const options = getOptions();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    const p = { ...props.parameter };
+    p.value = e.target.value;
+    let parentIds = [];
+    if (p.value) parentIds.push(p.value);
+    props.onChange(p, parentIds);
+  }
+
+  React.useEffect(() => { init() }, [props.parameter.keyName, isMounted]); //eslint-disable-line
+
+  let result = <></>
+  switch (props.parameter.source) {
+    case "dropdown":
+      result = (
+        <FormControl fullWidth>
+          <InputLabel>{props.parameter.displayName}</InputLabel>
+          <Select value={options.find(v => v.value === props.parameter.value)?.value || ""} label={props.parameter.displayName} onChange={handleChange} name={props.parameter.keyName}>
+            {options.map((o,i) => <MenuItem key={i} value={o.value}>{o.text}</MenuItem>)}
+          </Select>
+        </FormControl>
+      );
+      break;
+    case "date":
+      result = (<TextField type="date" fullWidth InputLabelProps={{shrink: true}} label="Date" value={props.parameter.value || ""} onChange={handleChange} name={props.parameter.keyName} />)
+      break;
+  }
+  return result;
+
+}

package/src/components/reporting/ReportOutput.tsx

@@ -0,0 +1,79 @@
+import React, { useRef } from "react";
+import { ReportInterface, ReportResultInterface } from "../../interfaces";
+import { DisplayBox, ExportLink, Loading } from "../"
+import { ApiHelper } from "../../helpers"
+import { useReactToPrint } from "react-to-print";
+import { TableReport } from "./TableReport";
+import { ChartReport } from "./ChartReport";
+import { TreeReport } from "./TreeReport";
+import { Icon } from "@mui/material";
+import { useMountedState } from "../../hooks/useMountedState";
+
+interface Props { report: ReportInterface }
+
+export const ReportOutput = (props: Props) => {
+  const [reportResult, setReportResult] = React.useState<ReportResultInterface>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const isMounted = useMountedState();
+
+  const handlePrint = useReactToPrint({
+    content: () => contentRef.current
+  })
+
+  const runReport = () => {
+    if (props.report) {
+      const queryParams: string[] = [];
+      props.report.parameters.forEach(p => {
+        if (p.value) queryParams.push(p.keyName + "=" + p.value);
+      });
+      let url = "/reports/" + props.report.keyName + "/run";
+      if (queryParams) url += "?" + queryParams.join("&");
+
+      ApiHelper.get(url, "ReportingApi").then((data: ReportResultInterface) => {
+        if(isMounted()) {
+          setReportResult(data);
+        }
+      });
+    }
+  }
+
+  React.useEffect(runReport, [props.report, isMounted]);
+
+  const getEditContent = () => {
+    const result: JSX.Element[] = [];
+
+    if (reportResult) {
+      result.push(<button type="button" className="no-default-style" key={result.length - 2} onClick={handlePrint} title="print"><Icon>print</Icon></button>);
+      result.push(<ExportLink key={result.length - 1} data={reportResult.table} filename={props.report.displayName.replace(" ", "_") + ".csv"} />);
+    }
+    return result;
+  }
+
+  const getOutputs = () => {
+    const result: JSX.Element[] = [];
+    reportResult.outputs.forEach(o => {
+      if (o.outputType === "table") result.push(<TableReport key={o.outputType} reportResult={reportResult} output={o} />)
+      if (o.outputType === "tree") result.push(<TreeReport key={o.outputType} reportResult={reportResult} output={o} />)
+      else if (o.outputType === "barChart") result.push(<ChartReport key={o.outputType} reportResult={reportResult} output={o} />)
+    })
+
+    return result;
+  }
+
+  const getResults = () => {
+    if (!props.report) return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText="Run Report" editContent={getEditContent()}><p>Use the filter to run the report.</p></DisplayBox>);
+
+    else if (!reportResult) return <Loading />
+    else {
+      return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText={props.report.displayName} editContent={getEditContent()}>
+        {getOutputs()}
+      </DisplayBox>);
+    }
+  }
+
+  return (
+    <>
+      {getResults()}
+    </>
+  );
+}

package/src/components/reporting/ReportWithFilter.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { ReportInterface, ReportPermissionInterface } from "../../interfaces";
+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 item md={8} xs={12}>
+        <ReportOutput report={reportToRun} />
+      </Grid>
+      <Grid item md={4} xs={12}>
+        <ReportFilter report={report} onChange={handleChange} onRun={handleRun} />
+      </Grid>
+    </Grid>)
+  }
+}

package/src/components/reporting/TableReport.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces";
+import { DateHelper } from "../../helpers";
+import { Table, TableBody, TableRow, TableCell, TableHead } from "@mui/material";
+
+interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
+
+export const TableReport = (props: Props) => {
+
+  const getHeaders = () => {
+    const result: JSX.Element[] = []
+    props.output.columns.forEach((c, i) => {
+      result.push(<th key={i}>{c.header}</th>);
+    })
+    return result;
+  }
+
+  const getRows = () => {
+    const result: JSX.Element[] = []
+    props.reportResult.table.forEach(d => {
+      const row: JSX.Element[] = [];
+      props.output.columns.forEach(c => {
+        row.push(<TableCell>{getField(c, d)}</TableCell>);
+      })
+      result.push(<TableRow>{row}</TableRow>);
+    });
+    return result;
+  }
+
+  const getField = (column: ColumnInterface, dataRow: any) => {
+    let result = ""
+    try {
+      result = dataRow[column.value]?.toString() || "";
+    } catch { }
+
+    switch (column.formatter) {
+      case "date":
+        let dt = new Date(result);
+        result = DateHelper.prettyDate(dt);
+        break;
+    }
+    return result;
+  }
+
+  return (
+    <Table className="table">
+      <TableHead>
+        <TableRow>
+          {getHeaders()}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {getRows()}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/reporting/TreeReport.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces"
+import { DateHelper } from "../../helpers"
+import { Table, TableBody, TableRow, TableCell, TableHead } from "@mui/material"
+
+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: JSX.Element[] = []
+    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: JSX.Element[] = []
+    const columns = props.output.columns;
+    let previousData = {}
+    props.reportResult.table.forEach(d => {
+      const row: JSX.Element[] = [];
+      const groupingRows: JSX.Element[] = 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 }}>{getField(c, d)}</TableCell>);
+        else row.push(<TableCell>{getField(c, d)}</TableCell>);
+      }
+      result.push(<TableRow>{row}</TableRow>);
+      previousData = d;
+    });
+    return result;
+  }
+
+  const getGroupingRows = (previousData: any, data: any) => {
+    const result: JSX.Element[] = [];
+    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: JSX.Element[] = [];
+    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 }}>{getField(c, row)}</TableCell>);
+      else outputRow.push(<TableCell className={className}>{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;
+  }
+
+  const getField = (column: ColumnInterface, dataRow: any) => {
+    let result = dataRow[column.value].toString() || "";
+    switch (column.formatter) {
+      case "date":
+        let dt = new Date(result);
+        result = DateHelper.prettyDate(dt);
+        break;
+    }
+    return result;
+  }
+
+  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

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

package/src/donationComponents/DonationPage.tsx

@@ -0,0 +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 } 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, churchName?: 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} churchName={props?.churchName} />
+        <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()}
+    </>
+  );
+}