@churchapps/apphelper 0.3.49 → 0.4.0

package/src/components/wrapper/ChurchList.tsx

@@ -24,7 +24,7 @@ export const ChurchList: React.FC<Props> = props => {
     }
   }
 
-  let result: JSX.Element[] = [];
+  let result: React.ReactElement[] = [];
   userChurches.forEach(uc => {
     const userChurch = uc;
     const churchName = uc.church.name;

package/src/components/wrapper/Notifications.tsx

@@ -53,7 +53,7 @@ export const Notifications: React.FC<Props> = (props) => {
   }
 
   const getMainLinks = () => {
-    let result: JSX.Element[] = [];
+    let result: React.ReactElement[] = [];
     notifications.forEach(notification => {
       let datePosted = new Date(notification.timeSent);
       const displayDuration = DateHelper.getDisplayDuration(datePosted);

package/src/components/wrapper/PrivateMessages.tsx

@@ -44,7 +44,7 @@ export const PrivateMessages: React.FC<Props> = (props) => {
   React.useEffect(() => { console.log("RELOADED PMS") }, []);
 
   const getMainLinks = () => {
-    let result: JSX.Element[] = [];
+    let result: React.ReactElement[] = [];
     privateMessages.forEach(pm => {
 
       const person = pm.person;

package/src/components/wrapper/SiteWrapper.tsx

@@ -10,7 +10,7 @@ import { SocketHelper } from "../../helpers/SocketHelper";
 import { ClosedDrawer, ClosedDrawerAppBar, OpenDrawer, OpenDrawerAppBar } from "./Drawers";
 
 interface Props {
-  navContent: JSX.Element,
+  navContent: React.ReactElement,
   context: UserContextInterface,
   children: React.ReactNode,
   appName: string,

package/src/components/wrapper/UserMenu.tsx

@@ -55,7 +55,7 @@ export const UserMenu: React.FC<Props> = (props) => {
   const getMainLinks = () => {
     const jwt = ApiHelper.getConfig("MembershipApi").jwt;
     const churchId = UserHelper.currentUserChurch.church.id;
-    let result: JSX.Element[] = [];
+    let result: React.ReactElement[] = [];
 
 
     result.push(<NavItem onClick={() => {setShowPM(true)}} label={Locale.label("wrapper.messages")} icon="mail" key="/messages" onNavigate={props.onNavigate} badgeCount={props.notificationCounts.pmCount} />);

package/src/donationComponents/DonationPage.tsx

@@ -94,7 +94,7 @@ export const DonationPage: React.FC<Props> = (props) => {
   }
 
   const getEditContent = () => {
-    const result: JSX.Element[] = [];
+    const result: React.ReactElement[] = [];
     const date = new Date();
     const currentY = date.getFullYear();
     const lastY = date.getFullYear() - 1;
@@ -139,7 +139,7 @@ export const DonationPage: React.FC<Props> = (props) => {
   }
 
   const getRows = () => {
-    let rows: JSX.Element[] = [];
+    let rows: React.ReactElement[] = [];
 
     if (donations.length === 0) {
       rows.push(<TableRow key="0"><TableCell>{Locale.label("donation.page.willAppear")}</TableCell></TableRow>);
@@ -162,7 +162,7 @@ export const DonationPage: React.FC<Props> = (props) => {
   }
 
   const getTableHeader = () => {
-    const rows: JSX.Element[] = []
+    const rows: React.ReactElement[] = []
 
     if (donations.length > 0) {
       rows.push(

package/src/donationComponents/components/BankForm.tsx

@@ -107,10 +107,10 @@ export const BankForm: React.FC<Props> = (props) => {
       return (<>
         <p>{Locale.label("donation.bankForm.twoDeposits")}</p>
         <Grid container columnSpacing={2}>
-          <Grid item md={6} xs={12}>
+          <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 item md={6} xs={12}>
+          <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>
@@ -120,20 +120,20 @@ export const BankForm: React.FC<Props> = (props) => {
       let accountDetails = <></>
       if (!props.bank.id) accountDetails = (
         <Grid container spacing={3}>
-          <Grid item md={6} xs={12} style={{ marginBottom: "20px" }}>
+          <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 item md={6} xs={12} style={{ marginBottom: "20px" }}>
+          <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 item md={6} xs={12} style={{ marginBottom: "20px" }}>
+          <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 item md={6} xs={12} style={{ marginBottom: "20px" }}>
+          <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}>

package/src/donationComponents/components/CardForm.tsx

@@ -91,10 +91,10 @@ export const CardForm: React.FC<Props> = (props) => {
         {!props.card.id
           ? <CardElement options={formStyling} />
           : <Grid container spacing={3}>
-            <Grid item md={6} xs={12}>
+            <Grid size={{ xs: 12, md: 6 }}>
               <TextField fullWidth aria-label="card-exp-month" label={Locale.label("donation.cardForm.expirationMonth")} name="exp_month" value={cardUpdate.cardData.card.exp_month} placeholder="MM" inputProps={{ maxLength: 2 }} onChange={handleChange} onKeyPress={handleKeyPress} />
             </Grid>
-            <Grid item md={6} xs={12}>
+            <Grid size={{ xs: 12, md: 6 }}>
               <TextField fullWidth aria-label="card-exp-year" label={Locale.label("donation.cardForm.expirationYear")} name="exp_year" value={cardUpdate.cardData.card.exp_year} placeholder="YY" inputProps={{ maxLength: 2 }} onChange={handleChange} onKeyPress={handleKeyPress} />
             </Grid>
           </Grid>

package/src/donationComponents/components/DonationForm.tsx

@@ -189,17 +189,17 @@ export const DonationForm: React.FC<Props> = (props) => {
       <DonationPreviewModal show={showDonationPreviewModal} onHide={() => setShowDonationPreviewModal(false)} handleDonate={makeDonation} donation={donation} donationType={donationType} payFee={payFee} paymentMethodName={paymentMethodName} funds={funds} />
       <InputBox id="donationBox" aria-label="donation-box" headerIcon="volunteer_activism" headerText={Locale.label("donation.donationForm.donate")} ariaLabelSave="save-button" cancelFunction={donationType ? handleCancel : undefined} saveFunction={donationType ? handleSave : undefined} saveText={Locale.label("donation.donationForm.preview")}>
         <Grid container spacing={3}>
-          <Grid item md={6} xs={12}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <Button aria-label="single-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "once" ? "contained" : "outlined"} onClick={() => handleDonationSelect("once")}>{Locale.label("donation.donationForm.make")}</Button>
           </Grid>
-          <Grid item md={6} xs={12}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <Button aria-label="recurring-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "recurring" ? "contained" : "outlined"} onClick={() => handleDonationSelect("recurring")}>{Locale.label("donation.donationForm.makeRecurring")}</Button>
           </Grid>
         </Grid>
         {donationType
           && <div style={{ marginTop: "20px" }}>
             <Grid container spacing={3}>
-              <Grid item md={12} xs={12}>
+              <Grid size={12}>
                 <FormControl fullWidth>
                   <InputLabel>{Locale.label("donation.donationForm.method")}</InputLabel>
                   <Select label={Locale.label("donation.donationForm.method")} name="method" aria-label="method" value={donation.id} className="capitalize" onChange={handleChange}>
@@ -210,10 +210,10 @@ export const DonationForm: React.FC<Props> = (props) => {
             </Grid>
             {donationType === "recurring"
               && <Grid container spacing={3} style={{marginTop:10}}>
-                <Grid item md={6} xs={12}>
+                <Grid size={{ xs: 12, md: 6 }}>
                   <TextField fullWidth name="date" type="date" aria-label="date" label={Locale.label("donation.donationForm.startDate")} value={DateHelper.formatHtml5Date(new Date(donation.billing_cycle_anchor))} onChange={handleChange} onKeyDown={handleKeyDown} />
                 </Grid>
-                <Grid item md={6} xs={12}>
+                <Grid size={{ xs: 12, md: 6 }}>
                   <FormControl fullWidth>
                     <InputLabel>{Locale.label("donation.donationForm.frequency")}</InputLabel>
                     <Select label={Locale.label("donation.donationForm.frequency")} name="interval" aria-label="interval" value={interval} onChange={handleChange}>

package/src/donationComponents/components/FundDonation.tsx

@@ -40,10 +40,10 @@ export const FundDonation: React.FC<Props> = (props) => {
   return (
     <>
       <Grid container spacing={3}>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <TextField fullWidth name="amount" label={Locale.label("donation.fundDonations.amount")} type="number" disabled={props.params?.amount && props.params.amount !== ""} aria-label="amount" lang="en-150" value={props.fundDonation.amount || ""} onChange={handleChange} />
         </Grid>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <FormControl fullWidth>
             <InputLabel>{Locale.label("donation.fundDonations.fund")}</InputLabel>
             <Select fullWidth label={Locale.label("donation.fundDonations.fund")} name="fund" aria-label="fund" value={props.fundDonation.fundId} onChange={handleChange}>

package/src/donationComponents/components/NonAuthDonationInner.tsx

@@ -234,22 +234,22 @@ export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, s
     <InputBox headerIcon={showHeader ? "volunteer_activism" : ""} headerText={showHeader ? "Donate" : ""} saveFunction={handleSave} saveText="Donate" isSubmitting={processing || !captchaResponse || captchaResponse === "robot"} mainContainerCssProps={mainContainerCssProps}>
       <ErrorMessages errors={errors} />
       <Grid container spacing={3}>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <Button aria-label="single-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "once" ? "contained" : "outlined"} onClick={() => setDonationType("once")}>{Locale.label("donation.donationForm.make")}</Button>
         </Grid>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <Button aria-label="recurring-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "recurring" ? "contained" : "outlined"} onClick={() => setDonationType("recurring")}>{Locale.label("donation.donationForm.makeRecurring")}</Button>
         </Grid>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <TextField fullWidth label={Locale.label("person.firstName")} name="firstName" value={firstName} onChange={handleChange} />
         </Grid>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <TextField fullWidth label={Locale.label("person.lastName")} name="lastName" value={lastName} onChange={handleChange} />
         </Grid>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <TextField fullWidth label={Locale.label("person.email")} name="email" value={email} onChange={handleChange} />
         </Grid>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <ReCAPTCHA sitekey={props.recaptchaSiteKey} ref={captchaRef} onChange={handleCaptchaChange} />
         </Grid>
       </Grid>
@@ -258,7 +258,7 @@ export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, s
       </div>
       {donationType === "recurring"
         && <Grid container spacing={3} style={{ marginTop: 0 }}>
-          <Grid item md={6} xs={12}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <FormControl fullWidth>
               <InputLabel>{Locale.label("donation.donationForm.frequency")}</InputLabel>
               <Select label="Frequency" name="interval" aria-label="interval" value={interval} onChange={(e) => { setInterval(e.target.value) }}>
@@ -270,7 +270,7 @@ export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, s
               </Select>
             </FormControl>
           </Grid>
-          <Grid item md={6} xs={12}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <TextField fullWidth name="startDate" type="date" aria-label="startDate" label={Locale.label("donation.donationForm.startDate")} value={DateHelper.formatHtml5Date(new Date(startDate))} onChange={handleChange} />
           </Grid>
         </Grid>

package/src/donationComponents/components/PaymentMethods.tsx

@@ -87,7 +87,7 @@ export const PaymentMethods: React.FC<Props> = (props) => {
   const getPMIcon = (type: string) => (type === "card" ? <Icon>credit_card</Icon> : <Icon>account_balance</Icon>)
 
   const getPaymentRows = () => {
-    let rows: JSX.Element[] = [];
+    let rows: React.ReactElement[] = [];
 
     props.paymentMethods.forEach((method: StripePaymentMethod) => {
       rows.push(

package/src/donationComponents/components/RecurringDonations.tsx

@@ -53,7 +53,7 @@ export const RecurringDonations: React.FC<Props> = (props) => {
   }
 
   const getFunds = (subscription: SubscriptionInterface) => {
-    let result: JSX.Element[] = [];
+    let result: React.ReactElement[] = [];
     subscription.funds.forEach((fund: any) => {
       result.push(
         <div key={subscription.id + fund.id}>
@@ -76,13 +76,13 @@ export const RecurringDonations: React.FC<Props> = (props) => {
   }
 
   const getTableHeader = () => {
-    let result: JSX.Element[] = [];
+    let result: React.ReactElement[] = [];
     result.push(<TableRow key="header" sx={{textAlign: "left"}}><TableCell><b>{Locale.label("donation.recurring.startDate")}</b></TableCell><TableCell><b>{Locale.label("donation.recurring.amount")}</b></TableCell><TableCell><b>{Locale.label("donation.recurring.interval")}</b></TableCell><TableCell><b>{Locale.label("donation.recurring.paymentMethod")}</b></TableCell>{props?.paymentMethods?.length > 0 && <TableCell></TableCell>}</TableRow>);
     return result;
   }
 
   const getTableRows = () => {
-    let rows: JSX.Element[] = [];
+    let rows: React.ReactElement[] = [];
 
     subscriptions.forEach((sub: any) => {
       rows.push(

package/src/donationComponents/components/RecurringDonationsEdit.tsx

@@ -56,7 +56,7 @@ export const RecurringDonationsEdit: React.FC<Props> = (props) => {
   const getFields = () => (
     <>
       <Grid container spacing={3}>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <FormControl fullWidth>
             <InputLabel>{Locale.label("donation.donationForm.method")}</InputLabel>
             <Select label={Locale.label("donation.donationForm.method")} name="method" aria-label="method" value={editSubscription.default_payment_method || editSubscription.default_source} className="capitalize" onChange={handleChange}>
@@ -64,7 +64,7 @@ export const RecurringDonationsEdit: React.FC<Props> = (props) => {
             </Select>
           </FormControl>
         </Grid>
-        <Grid item md={6} xs={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <FormControl fullWidth>
             <InputLabel>{Locale.label("donation.donationForm.frequency")}</InputLabel>
             <Select label={Locale.label("donation.donationForm.frequency")} name="interval" aria-label="interval" value={interval} onChange={handleChange}>

package/src/pageComponents/LoginPage.tsx

@@ -5,7 +5,7 @@ import { ErrorMessages, FloatingSupport, Loading } from "../components";
 import { LoginResponseInterface, UserContextInterface, ChurchInterface, UserInterface, LoginUserChurchInterface } from "@churchapps/helpers";
 import { AnalyticsHelper, ApiHelper, ArrayHelper, Locale, UserHelper } from "../helpers";
 import { useCookies } from "react-cookie"
-import jwt_decode from "jwt-decode"
+import { jwtDecode } from "jwt-decode"
 import { Register } from "./components/Register"
 import { SelectChurchModal } from "./components/SelectChurchModal"
 import { Forgot } from "./components/Forgot";
@@ -97,7 +97,7 @@ export const LoginPage: React.FC<Props> = ({ showLogo = true, loginContainerCssP
 		UserHelper.user = resp.user;
 
 		if (props.jwt) {
-			const decoded: any = jwt_decode(userJwtBackup)
+			const decoded: any = jwtDecode(userJwtBackup)
 			selectedChurchId = decoded.churchId
 		}
 

package/src/pageComponents/components/SelectChurchRegister.tsx

@@ -73,12 +73,12 @@ export const SelectChurchRegister: React.FC<Props> = (props) => {
 
       <TextField required fullWidth name="address1" label={Locale.label("selectChurch.address1")} value={church.address1} onChange={handleChange} />
       <Grid container spacing={3}>
-        <Grid item xs={6}><TextField fullWidth name="address2" label={Locale.label("selectChurch.address2")} value={church.address2} onChange={handleChange} /></Grid>
-        <Grid item xs={6}><TextField required fullWidth name="city" label={Locale.label("selectChurch.city")} value={church.city} onChange={handleChange} /></Grid>
+        <Grid size={6}><TextField fullWidth name="address2" label={Locale.label("selectChurch.address2")} value={church.address2} onChange={handleChange} /></Grid>
+        <Grid size={6}><TextField required fullWidth name="city" label={Locale.label("selectChurch.city")} value={church.city} onChange={handleChange} /></Grid>
       </Grid>
       <Grid container spacing={3}>
-        <Grid item xs={6}><TextField required fullWidth name="state" label={Locale.label("selectChurch.state")} value={church.state} onChange={handleChange} /></Grid>
-        <Grid item xs={6}><TextField required fullWidth name="zip" label={Locale.label("selectChurch.zip")} value={church.zip} onChange={handleChange} /></Grid>
+        <Grid size={6}><TextField required fullWidth name="state" label={Locale.label("selectChurch.state")} value={church.state} onChange={handleChange} /></Grid>
+        <Grid size={6}><TextField required fullWidth name="zip" label={Locale.label("selectChurch.zip")} value={church.zip} onChange={handleChange} /></Grid>
       </Grid>
       <TextField required fullWidth name="country" label={Locale.label("selectChurch.country")} value={church.country} onChange={handleChange} />
     </InputBox>

package/src/pageComponents/components/SelectChurchSearch.tsx

@@ -44,7 +44,7 @@ export const SelectChurchSearch: React.FC<Props> = (props) => {
 	)
 
 	const getChurches = () => {
-		const result: JSX.Element[] = [];
+		const result: React.ReactElement[] = [];
 		churches.forEach(church => {
 			result.push(<SelectableChurch church={church} selectChurch={props.selectChurch} />);
 		});

package/src/pageComponents/components/SelectableChurch.tsx

@@ -19,12 +19,12 @@ export const SelectableChurch: React.FC<Props> = (props) => {
   }
   return (
     <Grid container spacing={3}>
-      <Grid item md={6} xs={12}>
+      <Grid size={{ xs: 12, md: 6 }}>
         <a href="about:blank" style={{ fontSize: "1.125rem", display: "block", marginTop: 15, marginBottom: 15 }} onClick={(e) => { e.preventDefault(); props.selectChurch(props.church.id) }}>
           <img src={logo} alt="church logo" className="w-100 img-fluid" />
         </a>
       </Grid>
-      <Grid item md={6} xs={12}>
+      <Grid size={{ xs: 12, md: 6 }}>
         <div>
           <a href="about:blank" style={{ fontSize: "1.125rem", display: "block" }} onClick={(e) => { e.preventDefault(); props.selectChurch(props.church.id) }}>{props.church.name}</a>
           {(props.church.address1) && <div>{props.church.address1}</div>}