@churchapps/apphelper 0.1.7 → 0.1.9

package/src/donationComponents/components/RecurringDonationsEdit.tsx

@@ -1,93 +1,93 @@
-import React from "react";
-import { ApiHelper } from "../../helpers";
-import { InputBox } from "../../components";
-import { StripePaymentMethod, SubscriptionInterface } from "../../interfaces";
-import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material"
-import { DonationHelper } from "../../helpers"
-
-interface Props { subscriptionUpdated: (message?: string) => void, customerId: string, paymentMethods: StripePaymentMethod[], editSubscription: SubscriptionInterface };
-
-export const RecurringDonationsEdit: React.FC<Props> = (props) => {
-  const [editSubscription, setEditSubscription] = React.useState<SubscriptionInterface>(props.editSubscription);
-  const [interval, setInterval] = React.useState("one_month");
-
-  const handleCancel = () => { props.subscriptionUpdated(); }
-  const handleSave = () => {
-    let sub = { ...editSubscription } as SubscriptionInterface;
-    const pmFound = props.paymentMethods.find((pm: StripePaymentMethod) => pm.id === sub.id);
-    if (!pmFound) {
-      let pm = props.paymentMethods[0];
-      sub.default_payment_method = pm.type === "card" ? pm.id : null;
-      sub.default_source = pm.type === "bank" ? pm.id : null;
-    }
-    ApiHelper.post("/subscriptions", [sub], "GivingApi").then(() => props.subscriptionUpdated("Recurring donation updated."))
-  }
-
-  const handleDelete = () => {
-    const conf = window.confirm("Are you sure you want to delete this recurring donation?");
-    if (!conf) return;
-    let promises = [];
-    promises.push(ApiHelper.delete("/subscriptions/" + props.editSubscription.id, "GivingApi"));
-    promises.push(ApiHelper.delete("/subscriptionfunds/subscription/" + props.editSubscription.id, "GivingApi"));
-    Promise.all(promises).then(() => props.subscriptionUpdated("Recurring donation canceled."));
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    let sub = { ...editSubscription } as SubscriptionInterface;
-    let value = e.target.value;
-    switch (e.target.name) {
-      case "method":
-        let pm = props.paymentMethods.find((pm: StripePaymentMethod) => pm.id === value);
-        sub.default_payment_method = pm.type === "card" ? value : null;
-        sub.default_source = pm.type === "bank" ? value : null;
-        break;
-      case "interval":
-        setInterval(value);
-        const inter = DonationHelper.getInterval(value);
-        sub.plan.interval_count = inter.interval_count;
-        sub.plan.interval = inter.interval;
-        break;
-    }
-    setEditSubscription(sub);
-  }
-
-  const getFields = () => (
-    <>
-      <Grid container spacing={3}>
-        <Grid item md={6} xs={12}>
-          <FormControl fullWidth>
-            <InputLabel>Method</InputLabel>
-            <Select label="Method" name="method" aria-label="method" value={editSubscription.default_payment_method || editSubscription.default_source} className="capitalize" onChange={handleChange}>
-              {props.paymentMethods.map((paymentMethod: any, i: number) => <MenuItem key={i} value={paymentMethod.id}>{paymentMethod.name} ****{paymentMethod.last4}</MenuItem>)}
-            </Select>
-          </FormControl>
-        </Grid>
-        <Grid item md={6} xs={12}>
-          <FormControl fullWidth>
-            <InputLabel>Frequency</InputLabel>
-            <Select label="Frequency" name="interval" aria-label="interval" value={interval} onChange={handleChange}>
-              <MenuItem value="one_week">Weekly</MenuItem>
-              <MenuItem value="two_week">Bi-Weekly</MenuItem>
-              <MenuItem value="one_month">Monthly</MenuItem>
-              <MenuItem value="three_month">Quarterly</MenuItem>
-              <MenuItem value="one_year">Annually</MenuItem>
-            </Select>
-          </FormControl>
-        </Grid>
-      </Grid>
-    </>
-  )
-
-  React.useEffect(() => {
-    if (props.editSubscription) {
-      const keyName = DonationHelper.getIntervalKeyName(props.editSubscription.plan.interval_count, props.editSubscription.plan.interval);
-      setInterval(keyName);
-    }
-  }, [props.editSubscription]);
-
-  return (
-    <InputBox aria-label="person-details-box" headerIcon="person" headerText="Edit Recurring Donation" ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} deleteFunction={handleDelete} saveFunction={handleSave}>
-      {getFields()}
-    </InputBox>
-  );
-}
+import React from "react";
+import { ApiHelper } from "../../helpers";
+import { InputBox } from "../../components";
+import { StripePaymentMethod, SubscriptionInterface } from "../../interfaces";
+import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material"
+import { DonationHelper } from "../../helpers"
+
+interface Props { subscriptionUpdated: (message?: string) => void, customerId: string, paymentMethods: StripePaymentMethod[], editSubscription: SubscriptionInterface };
+
+export const RecurringDonationsEdit: React.FC<Props> = (props) => {
+  const [editSubscription, setEditSubscription] = React.useState<SubscriptionInterface>(props.editSubscription);
+  const [interval, setInterval] = React.useState("one_month");
+
+  const handleCancel = () => { props.subscriptionUpdated(); }
+  const handleSave = () => {
+    let sub = { ...editSubscription } as SubscriptionInterface;
+    const pmFound = props.paymentMethods.find((pm: StripePaymentMethod) => pm.id === sub.id);
+    if (!pmFound) {
+      let pm = props.paymentMethods[0];
+      sub.default_payment_method = pm.type === "card" ? pm.id : null;
+      sub.default_source = pm.type === "bank" ? pm.id : null;
+    }
+    ApiHelper.post("/subscriptions", [sub], "GivingApi").then(() => props.subscriptionUpdated("Recurring donation updated."))
+  }
+
+  const handleDelete = () => {
+    const conf = window.confirm("Are you sure you want to delete this recurring donation?");
+    if (!conf) return;
+    let promises = [];
+    promises.push(ApiHelper.delete("/subscriptions/" + props.editSubscription.id, "GivingApi"));
+    promises.push(ApiHelper.delete("/subscriptionfunds/subscription/" + props.editSubscription.id, "GivingApi"));
+    Promise.all(promises).then(() => props.subscriptionUpdated("Recurring donation canceled."));
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    let sub = { ...editSubscription } as SubscriptionInterface;
+    let value = e.target.value;
+    switch (e.target.name) {
+      case "method":
+        let pm = props.paymentMethods.find((pm: StripePaymentMethod) => pm.id === value);
+        sub.default_payment_method = pm.type === "card" ? value : null;
+        sub.default_source = pm.type === "bank" ? value : null;
+        break;
+      case "interval":
+        setInterval(value);
+        const inter = DonationHelper.getInterval(value);
+        sub.plan.interval_count = inter.interval_count;
+        sub.plan.interval = inter.interval;
+        break;
+    }
+    setEditSubscription(sub);
+  }
+
+  const getFields = () => (
+    <>
+      <Grid container spacing={3}>
+        <Grid item md={6} xs={12}>
+          <FormControl fullWidth>
+            <InputLabel>Method</InputLabel>
+            <Select label="Method" name="method" aria-label="method" value={editSubscription.default_payment_method || editSubscription.default_source} className="capitalize" onChange={handleChange}>
+              {props.paymentMethods.map((paymentMethod: any, i: number) => <MenuItem key={i} value={paymentMethod.id}>{paymentMethod.name} ****{paymentMethod.last4}</MenuItem>)}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <FormControl fullWidth>
+            <InputLabel>Frequency</InputLabel>
+            <Select label="Frequency" name="interval" aria-label="interval" value={interval} onChange={handleChange}>
+              <MenuItem value="one_week">Weekly</MenuItem>
+              <MenuItem value="two_week">Bi-Weekly</MenuItem>
+              <MenuItem value="one_month">Monthly</MenuItem>
+              <MenuItem value="three_month">Quarterly</MenuItem>
+              <MenuItem value="one_year">Annually</MenuItem>
+            </Select>
+          </FormControl>
+        </Grid>
+      </Grid>
+    </>
+  )
+
+  React.useEffect(() => {
+    if (props.editSubscription) {
+      const keyName = DonationHelper.getIntervalKeyName(props.editSubscription.plan.interval_count, props.editSubscription.plan.interval);
+      setInterval(keyName);
+    }
+  }, [props.editSubscription]);
+
+  return (
+    <InputBox aria-label="person-details-box" headerIcon="person" headerText="Edit Recurring Donation" ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} deleteFunction={handleDelete} saveFunction={handleSave}>
+      {getFields()}
+    </InputBox>
+  );
+}

package/src/donationComponents/components/index.tsx

@@ -1,9 +1,9 @@
-export { BankForm } from "./BankForm";
-export { CardForm } from "./CardForm";
-export { DonationForm } from "./DonationForm";
-export { NonAuthDonation } from "./NonAuthDonation";
-export { PaymentMethods } from "./PaymentMethods";
-export { RecurringDonations } from "./RecurringDonations";
-export { RecurringDonationsEdit } from "./RecurringDonationsEdit";
-export { FundDonations } from "./FundDonations";
-export { FundDonation } from "./FundDonation";
+export { BankForm } from "./BankForm";
+export { CardForm } from "./CardForm";
+export { DonationForm } from "./DonationForm";
+export { NonAuthDonation } from "./NonAuthDonation";
+export { PaymentMethods } from "./PaymentMethods";
+export { RecurringDonations } from "./RecurringDonations";
+export { RecurringDonationsEdit } from "./RecurringDonationsEdit";
+export { FundDonations } from "./FundDonations";
+export { FundDonation } from "./FundDonation";

package/src/donationComponents/index.ts

@@ -1,3 +1,3 @@
-export { DonationPage } from "./DonationPage";
-export { FundDonations } from "./components/FundDonations";
-export { NonAuthDonation } from "./components/NonAuthDonation";
+export { DonationPage } from "./DonationPage";
+export { FundDonations } from "./components/FundDonations";
+export { NonAuthDonation } from "./components/NonAuthDonation";

package/src/donationComponents/modals/DonationPreviewModal.tsx

@@ -1,66 +1,66 @@
-import React from "react";
-import { DateHelper, CurrencyHelper } from "../../helpers";
-import { StripeDonationInterface } from "../../interfaces";
-import { Table, TableBody, TableRow, TableCell, Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material"
-
-interface Props {
-  show: boolean;
-  onHide: () => void;
-  handleDonate: (message: string) => void;
-  donation: StripeDonationInterface;
-  donationType: string;
-  paymentMethodName: string;
-  funds: any;
-  payFee: number;
-}
-
-export const DonationPreviewModal: React.FC<Props> = (props) => {
-  const donationType: any = { once: "One-time Donation", recurring: "Recurring Donation" };
-  const [isLoading, setLoading] = React.useState<boolean>(false);
-
-  const handleClick = () => {
-    setLoading(true);
-    let message = "Thank you for your donation.";
-    if (props.donationType === "recurring") message = "Recurring donation created. " + message;
-    props.handleDonate(message);
-  }
-
-  const formatInterval = () => {
-    const count = props.donation.interval.interval_count;
-    const interval = props.donation.interval.interval;
-    let result = `${count} ${interval}`;
-    return count > 1 ? result + "s" : result;
-  }
-
-  return (
-    <Dialog open={props.show} {...props}>
-      <DialogTitle>Donation Preview</DialogTitle>
-      <DialogContent>
-        <Table>
-          <TableBody>
-            <TableRow><TableCell>Name:</TableCell><TableCell>{props.donation.person.name}</TableCell></TableRow>
-            <TableRow><TableCell>Payment Method:</TableCell><TableCell className="capitalize">{props.paymentMethodName}</TableCell></TableRow>
-            <TableRow><TableCell>Type:</TableCell><TableCell>{donationType[props.donationType]}</TableCell></TableRow>
-            {props.donationType === "once"
-              && <TableRow><TableCell>Donation Date:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
-            }
-            <TableRow><TableCell>Notes:</TableCell><TableCell>{props.donation.notes}</TableCell></TableRow>
-            {props.donationType === "recurring"
-              && <>
-                <TableRow><TableCell>Starting On:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
-                <TableRow><TableCell>Recurring Every:</TableCell><TableCell className="capitalize">{formatInterval()}</TableCell></TableRow>
-              </>
-            }
-            <TableRow><TableCell>Funds:</TableCell><TableCell>{props.donation.funds.map((fund: any, i: number) => <p key={i}>{CurrencyHelper.formatCurrency(fund.amount)} - {fund.name}</p>)}</TableCell></TableRow>
-            {props.payFee > 0 && <TableRow><TableCell>Transaction Fee:</TableCell><TableCell>{CurrencyHelper.formatCurrency(props.payFee)}</TableCell></TableRow>}
-            <TableRow><TableCell>Total:</TableCell><TableCell><h4>{CurrencyHelper.formatCurrency(props.donation.amount)}</h4></TableCell></TableRow>
-          </TableBody>
-        </Table>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={props.onHide} variant="outlined" aria-label="cancel-button">Cancel</Button>
-        <Button onClick={handleClick} variant="contained" aria-label="donate-button" disabled={isLoading}>Donate</Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
+import React from "react";
+import { DateHelper, CurrencyHelper } from "../../helpers";
+import { StripeDonationInterface } from "../../interfaces";
+import { Table, TableBody, TableRow, TableCell, Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material"
+
+interface Props {
+  show: boolean;
+  onHide: () => void;
+  handleDonate: (message: string) => void;
+  donation: StripeDonationInterface;
+  donationType: string;
+  paymentMethodName: string;
+  funds: any;
+  payFee: number;
+}
+
+export const DonationPreviewModal: React.FC<Props> = (props) => {
+  const donationType: any = { once: "One-time Donation", recurring: "Recurring Donation" };
+  const [isLoading, setLoading] = React.useState<boolean>(false);
+
+  const handleClick = () => {
+    setLoading(true);
+    let message = "Thank you for your donation.";
+    if (props.donationType === "recurring") message = "Recurring donation created. " + message;
+    props.handleDonate(message);
+  }
+
+  const formatInterval = () => {
+    const count = props.donation.interval.interval_count;
+    const interval = props.donation.interval.interval;
+    let result = `${count} ${interval}`;
+    return count > 1 ? result + "s" : result;
+  }
+
+  return (
+    <Dialog open={props.show} {...props}>
+      <DialogTitle>Donation Preview</DialogTitle>
+      <DialogContent>
+        <Table>
+          <TableBody>
+            <TableRow><TableCell>Name:</TableCell><TableCell>{props.donation.person.name}</TableCell></TableRow>
+            <TableRow><TableCell>Payment Method:</TableCell><TableCell className="capitalize">{props.paymentMethodName}</TableCell></TableRow>
+            <TableRow><TableCell>Type:</TableCell><TableCell>{donationType[props.donationType]}</TableCell></TableRow>
+            {props.donationType === "once"
+              && <TableRow><TableCell>Donation Date:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
+            }
+            <TableRow><TableCell>Notes:</TableCell><TableCell>{props.donation.notes}</TableCell></TableRow>
+            {props.donationType === "recurring"
+              && <>
+                <TableRow><TableCell>Starting On:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
+                <TableRow><TableCell>Recurring Every:</TableCell><TableCell className="capitalize">{formatInterval()}</TableCell></TableRow>
+              </>
+            }
+            <TableRow><TableCell>Funds:</TableCell><TableCell>{props.donation.funds.map((fund: any, i: number) => <p key={i}>{CurrencyHelper.formatCurrency(fund.amount)} - {fund.name}</p>)}</TableCell></TableRow>
+            {props.payFee > 0 && <TableRow><TableCell>Transaction Fee:</TableCell><TableCell>{CurrencyHelper.formatCurrency(props.payFee)}</TableCell></TableRow>}
+            <TableRow><TableCell>Total:</TableCell><TableCell><h4>{CurrencyHelper.formatCurrency(props.donation.amount)}</h4></TableCell></TableRow>
+          </TableBody>
+        </Table>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={props.onHide} variant="outlined" aria-label="cancel-button">Cancel</Button>
+        <Button onClick={handleClick} variant="contained" aria-label="donate-button" disabled={isLoading}>Donate</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/helpers/AnalyticsHelper.ts

@@ -1,33 +1,33 @@
-import ReactGA from "react-ga4";
-import { CommonEnvironmentHelper } from "./CommonEnvironmentHelper";
-import { UserHelper } from "./UserHelper";
-
-export class AnalyticsHelper {
-
-  static init = () => {
-    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
-      ReactGA.initialize([{trackingId: CommonEnvironmentHelper.GoogleAnalyticsTag}]);
-      AnalyticsHelper.logPageView();
-    }
-  }
-
-  static logPageView = () => {
-    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
-      this.setChurchKey();
-      ReactGA.send({ hitType: "pageview", page: window.location.pathname + window.location.search });
-    }
-  }
-
-  static logEvent = (category: string, action: string, label?:string) => {
-    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
-      this.setChurchKey();
-      ReactGA.event({ category, action, label });
-    }
-  }
-
-  private static setChurchKey = () => {
-    const churchKey = UserHelper?.currentUserChurch?.church?.subDomain;
-    if (churchKey) ReactGA.set({church_key: churchKey });
-  }
-
-}
+import ReactGA from "react-ga4";
+import { CommonEnvironmentHelper } from "./CommonEnvironmentHelper";
+import { UserHelper } from "./UserHelper";
+
+export class AnalyticsHelper {
+
+  static init = () => {
+    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
+      ReactGA.initialize([{trackingId: CommonEnvironmentHelper.GoogleAnalyticsTag}]);
+      AnalyticsHelper.logPageView();
+    }
+  }
+
+  static logPageView = () => {
+    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
+      this.setChurchKey();
+      ReactGA.send({ hitType: "pageview", page: window.location.pathname + window.location.search });
+    }
+  }
+
+  static logEvent = (category: string, action: string, label?:string) => {
+    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
+      this.setChurchKey();
+      ReactGA.event({ category, action, label });
+    }
+  }
+
+  private static setChurchKey = () => {
+    const churchKey = UserHelper?.currentUserChurch?.church?.subDomain;
+    if (churchKey) ReactGA.set({church_key: churchKey });
+  }
+
+}