@churchapps/apphelper 0.3.49 → 0.4.1

package/src/components/reporting/ReportOutput.tsx

@@ -25,7 +25,7 @@ export const ReportOutput = (props: Props) => {
 	const isMounted = useMountedState();
 
 	const handlePrint = useReactToPrint({
-		content: () => contentRef.current
+		contentRef
 	})
 
 	const populatePeople = async (data: any[]) => {
@@ -127,7 +127,7 @@ export const ReportOutput = (props: Props) => {
 	React.useEffect(runReport, [props.report, isMounted]);
 
 	const getEditContent = () => {
-		const result: JSX.Element[] = [];
+		const result: React.ReactElement[] = [];
 
 		if (reportResult) {
 			result.push(<button type="button" className="no-default-style" key={result.length - 2} onClick={handlePrint} title="print"><Icon>print</Icon></button>);
@@ -139,7 +139,7 @@ export const ReportOutput = (props: Props) => {
 	}
 
 	const getOutputs = () => {
-		const result: JSX.Element[] = [];
+		const result: React.ReactElement[] = [];
 		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} />)

package/src/components/reporting/ReportWithFilter.tsx

@@ -61,10 +61,10 @@ export const ReportWithFilter = (props: Props) => {
   if (!checkAccess()) return <></>
   else {
     return (<Grid container spacing={3}>
-      <Grid item md={8} xs={12}>
+      <Grid size={{ xs: 12, md: 8 }}>
         <ReportOutput keyName={props.keyName} report={reportToRun} />
       </Grid>
-      <Grid item md={4} xs={12}>
+      <Grid size={{ xs: 12, md: 4 }}>
         <ReportFilter report={report} onChange={handleChange} onRun={handleRun} />
       </Grid>
     </Grid>)

package/src/components/reporting/TableReport.tsx

@@ -10,7 +10,7 @@ interface Props { reportResult: ReportResultInterface, output: ReportOutputInter
 export const TableReport = (props: Props) => {
 
   const getHeaders = () => {
-    const result: JSX.Element[] = []
+    const result: React.ReactElement[] = []
     props.output.columns.forEach((c, i) => {
       result.push(<TableCell key={i} style={{fontWeight:"bold"}}>{c.header}</TableCell>);
     })
@@ -18,9 +18,9 @@ export const TableReport = (props: Props) => {
   }
 
   const getRows = () => {
-    const result: JSX.Element[] = []
+    const result: React.ReactElement[] = []
     props.reportResult.table.forEach(d => {
-      const row: JSX.Element[] = [];
+      const row: React.ReactElement[] = [];
       props.output.columns.forEach(c => {
         row.push(<TableCell>{ReportHelper.getField(c, d)}</TableCell>);
       })

package/src/components/reporting/TreeReport.tsx

@@ -18,7 +18,7 @@ export const TreeReport = (props: Props) => {
   let totalGroupings = getPreviousGroupingCount(props.output.groupings.length);
 
   const getHeaders = () => {
-    const result: JSX.Element[] = []
+    const result: React.ReactElement[] = []
     const columns = props.output.columns;
     for (let i = totalGroupings; i < columns.length; i++) {
       const c = columns[i];
@@ -29,12 +29,12 @@ export const TreeReport = (props: Props) => {
   }
 
   const getRows = () => {
-    const result: JSX.Element[] = []
+    const result: React.ReactElement[] = []
     const columns = props.output.columns;
     let previousData = {}
     props.reportResult.table.forEach(d => {
-      const row: JSX.Element[] = [];
-      const groupingRows: JSX.Element[] = getGroupingRows(previousData, 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];
@@ -48,7 +48,7 @@ export const TreeReport = (props: Props) => {
   }
 
   const getGroupingRows = (previousData: any, data: any) => {
-    const result: JSX.Element[] = [];
+    const result: React.ReactElement[] = [];
     let firstGroupModified = getFirstGroupModified(previousData, data);
     for (let i = firstGroupModified; i <= props.output.groupings.length; i++) {
       result.push(getGroupingRow(data, i))
@@ -59,7 +59,7 @@ export const TreeReport = (props: Props) => {
   const getGroupingRow = (row: any, groupNumber: number) => {
     const g = props.output.groupings[groupNumber];
     const prevCols = getPreviousGroupingCount(groupNumber);
-    const outputRow: JSX.Element[] = [];
+    const outputRow: React.ReactElement[] = [];
     for (let i = prevCols; i < prevCols + g; i++) {
       const c = props.output.columns[i];
       const className = "heading" + (groupNumber + 1);

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

@@ -12,7 +12,7 @@ import { TabPanel } from "../TabPanel";
 import { Locale } from "../../helpers";
 import { PrivateMessages } from "./PrivateMessages";
 import { Notifications } from "./Notifications";
-import { useCookies } from "react-cookie";
+import { useCookies, CookiesProvider } from "react-cookie";
 
 
 interface Props {
@@ -27,7 +27,7 @@ interface Props {
   onNavigate: (url: string) => void;
 }
 
-export const UserMenu: React.FC<Props> = (props) => {
+const UserMenuContent: React.FC<Props> = (props) => {
   const userName = props.userName;
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [showPM, setShowPM] = React.useState(false);
@@ -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} />);
@@ -151,3 +151,11 @@ export const UserMenu: React.FC<Props> = (props) => {
     </>
   );
 };
+
+export const UserMenu: React.FC<Props> = (props) => {
+  return (
+    <CookiesProvider defaultSetOptions={{ path: '/' }}>
+      <UserMenuContent {...props} />
+    </CookiesProvider>
+  );
+};

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

@@ -4,8 +4,8 @@ import * as React from "react";
 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 { useCookies, CookiesProvider } from "react-cookie"
+import { jwtDecode } from "jwt-decode"
 import { Register } from "./components/Register"
 import { SelectChurchModal } from "./components/SelectChurchModal"
 import { Forgot } from "./components/Forgot";
@@ -35,7 +35,7 @@ interface Props {
 	handleRedirect?: (url: string) => void; // Function to handle redirects from parent component
 }
 
-export const LoginPage: React.FC<Props> = ({ showLogo = true, loginContainerCssProps, ...props }) => {
+const LoginPageContent: React.FC<Props> = ({ showLogo = true, loginContainerCssProps, ...props }) => {
 	const [welcomeBackName, setWelcomeBackName] = React.useState("");
 	const [pendingAutoLogin, setPendingAutoLogin] = React.useState(false);
 	const [errors, setErrors] = React.useState([]);
@@ -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
 		}
 
@@ -269,3 +269,16 @@ export const LoginPage: React.FC<Props> = ({ showLogo = true, loginContainerCssP
 	);
 
 };
+
+export const LoginPage: React.FC<Props> = (props) => {
+	// Try to detect if CookiesProvider is available
+	const CookiesContext = React.createContext(null);
+	const context = React.useContext(CookiesContext);
+	
+	// Always wrap with CookiesProvider to ensure context is available
+	return (
+		<CookiesProvider defaultSetOptions={{ path: '/' }}>
+			<LoginPageContent {...props} />
+		</CookiesProvider>
+	);
+};

package/src/pageComponents/LogoutPage.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import React from "react";
-import { useCookies } from "react-cookie"
+import { useCookies, CookiesProvider } from "react-cookie"
 import { ApiHelper, UserContextInterface } from "../helpers";
 
 interface Props { context?: UserContextInterface, handleRedirect?: (url: string) => void }
 
-export const LogoutPage: React.FC<Props> = (props) => {
+const LogoutPageContent: React.FC<Props> = (props) => {
 	const [, , removeCookie] = useCookies(["jwt", "email", "name", "lastChurchId"]);
 
 	removeCookie("jwt");
@@ -33,3 +33,11 @@ export const LogoutPage: React.FC<Props> = (props) => {
 	}, 300);
 	return null;
 }
+
+export const LogoutPage: React.FC<Props> = (props) => {
+	return (
+		<CookiesProvider defaultSetOptions={{ path: '/' }}>
+			<LogoutPageContent {...props} />
+		</CookiesProvider>
+	);
+}

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>}