@churchapps/apphelper 0.2.31 → 0.2.33

package/src/donationComponents/components/RecurringDonationsEdit.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ApiHelper } from "../../helpers";
+import { ApiHelper, Locale } from "../../helpers";
 import { InputBox } from "../../components";
 import { StripePaymentMethod, SubscriptionInterface } from "@churchapps/helpers";
 import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material"
@@ -20,16 +20,16 @@ export const RecurringDonationsEdit: React.FC<Props> = (props) => {
       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."))
+    ApiHelper.post("/subscriptions", [sub], "GivingApi").then(() => props.subscriptionUpdated(Locale.label("donation.donationForm.recurringUpdated")))
   }
 
   const handleDelete = () => {
-    const conf = window.confirm("Are you sure you want to delete this recurring donation?");
+    const conf = window.confirm(Locale.label("donation.donationForm.confirmDelete"));
     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."));
+    Promise.all(promises).then(() => props.subscriptionUpdated(Locale.label("donation.donationForm.cancelled")));
   }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
@@ -56,21 +56,21 @@ export const RecurringDonationsEdit: React.FC<Props> = (props) => {
       <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}>
+            <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}>
               {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>
+            <InputLabel>{Locale.label("donation.donationForm.frequency")}</InputLabel>
+            <Select label={Locale.label("donation.donationForm.frequency")} name="interval" aria-label="interval" value={interval} onChange={handleChange}>
+              <MenuItem value="one_week">{Locale.label("donation.donationForm.weekly")}</MenuItem>
+              <MenuItem value="two_week">{Locale.label("donation.donationForm.biWeekly")}</MenuItem>
+              <MenuItem value="one_month">{Locale.label("donation.donationForm.monthly")}</MenuItem>
+              <MenuItem value="three_month">{Locale.label("donation.donationForm.quarterly")}</MenuItem>
+              <MenuItem value="one_year">{Locale.label("donation.donationForm.annually")}</MenuItem>
             </Select>
           </FormControl>
         </Grid>
@@ -86,7 +86,7 @@ export const RecurringDonationsEdit: React.FC<Props> = (props) => {
   }, [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}>
+    <InputBox aria-label="person-details-box" headerIcon="person" headerText={Locale.label("donation.donationForm.editRecurring")} ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} deleteFunction={handleDelete} saveFunction={handleSave}>
       {getFields()}
     </InputBox>
   );

package/src/donationComponents/modals/DonationPreviewModal.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DateHelper, CurrencyHelper } from "../../helpers";
+import { DateHelper, CurrencyHelper, Locale } from "../../helpers";
 import { StripeDonationInterface } from "@churchapps/helpers";
 import { Table, TableBody, TableRow, TableCell, Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material"
 
@@ -38,28 +38,28 @@ export const DonationPreviewModal: React.FC<Props> = (props) => {
       <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>
+            <TableRow><TableCell>{Locale.label("person.name")}:</TableCell><TableCell>{props.donation.person.name}</TableCell></TableRow>
+            <TableRow><TableCell>{Locale.label("donation.preview.method")}:</TableCell><TableCell className="capitalize">{props.paymentMethodName}</TableCell></TableRow>
+            <TableRow><TableCell>{Locale.label("donation.preview.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>{Locale.label("donation.preview.date")}:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
             }
-            <TableRow><TableCell>Notes:</TableCell><TableCell>{props.donation.notes}</TableCell></TableRow>
+            <TableRow><TableCell>{Locale.label("donation.preview.weekly")}:</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>{Locale.label("donation.preview.startingOn")}:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
+                <TableRow><TableCell>{Locale.label("donation.preview.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>
+            <TableRow><TableCell>{Locale.label("donation.preview.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>{Locale.label("donation.preview.fee")}:</TableCell><TableCell>{CurrencyHelper.formatCurrency(props.payFee)}</TableCell></TableRow>}
+            <TableRow><TableCell>{Locale.label("donation.preview.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>
+        <Button onClick={props.onHide} variant="outlined" aria-label="cancel-button">{Locale.label("donation.common.cancel")}</Button>
+        <Button onClick={handleClick} variant="contained" aria-label="donate-button" disabled={isLoading}>{Locale.label("donation.preview.donate")}</Button>
       </DialogActions>
     </Dialog>
   );

package/src/helpers/Locale.ts

@@ -8,12 +8,16 @@ import HttpBackend from 'i18next-http-backend';
 
 export class Locale {
 
+  private static supportedLanguages = ["de", "en", "es", "fr", "hi", "it", "ko", "no", "pt", "ru", "tl", "zh"];
+  private static extraCodes: {[key: string]: string[]} = {no: ["nb", "nn"]}
+
   private static keys:any = {}
 
   static init = async (backends:string[]) => {
-    const l = navigator.language.split("-")[0];
-    const langs = (l==="en") ? [l] : ["en", l];
-    console.log("LANGUAGE", navigator.language, l, langs);
+    let l = navigator.language.split("-")[0];
+    l = Object.keys(this.extraCodes).find(code => this.extraCodes[code].includes(l)) || l
+    const notSupported = this.supportedLanguages.indexOf(l) === -1
+    const langs = (l==="en" || notSupported) ? ["en"] : ["en", l];
 
     let result = {};
     for (let lang of langs) {
@@ -21,12 +25,26 @@ export class Locale {
         let url = backend.replace("{{lng}}", lang);
         console.log(url);
         const data = await fetch(url).then((response) => response.json());
-        result = {...result, ...data};
+        result = this.deepMerge(result, data);
       }
     }
     this.keys = result;
   }
 
+  private static deepMerge(target:any, source:any) {
+    for (const key in source) {
+      if (this.isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        this.deepMerge(target[key], source[key]);
+      } else Object.assign(target, { [key]: source[key] });
+    }
+    return target;
+  }
+
+  private static isObject(obj:any) {
+    return obj && typeof obj === 'object' && !Array.isArray(obj);
+  }
+
   static label(key:string) {
     const parts = key.split(".");
     let result = key;
@@ -42,40 +60,5 @@ export class Locale {
     return result;
   }
 
-  /*
-  //'/locales/{{lng}}.json'
-  static init = async (backends:string[]) => {
-
-    const backendOptions = backends.map((path) => ({ loadPath: path }));
-
-
-    console.log("backend options", backendOptions)
-    console.log({backend: {
-      backends: backends.map(() => HttpBackend),
-      backendOptions,
-    }})
-
-    await i18n
-  	  .use(Backend)
-  	  .use(LanguageDetector)
-      .use(initReactI18next)
-      .init({
-        fallbackLng: 'en',
-        debug: true,
-        interpolation: {
-          escapeValue: false, // React already does escaping
-        },
-        backend: {
-          backends: backends.map(() => HttpBackend),
-          backendOptions,
-        },
-        supportedLngs: ['en', 'es'],
-      });
-  }
-
-  static label(key:string) {
-    return i18n.t(key);
-  }
-  */
 
 }

package/src/helpers/PersonHelper.ts

@@ -1,5 +1,6 @@
 import { PersonInterface, ContactInfoInterface } from "@churchapps/helpers";
 import { CommonEnvironmentHelper } from "./CommonEnvironmentHelper";
+import { Locale } from "./Locale";
 
 export class PersonHelper {
 
@@ -13,7 +14,7 @@ export class PersonHelper {
       let ageDifMs = Date.now() - new Date(birthdate).getTime();
       let ageDate = new Date(ageDifMs);
       let years = Math.abs(ageDate.getUTCFullYear() - 1970);
-      return years + " years";
+      return years + " " + Locale.label("person.years");
     }
     else return "";
   }

package/src/helpers/ReportHelper.ts

@@ -1,4 +1,3 @@
-import { parse } from "path";
 import { ColumnInterface } from "@churchapps/helpers";
 import { DateHelper } from "./DateHelper";
 

package/src/pageComponents/LoginPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ErrorMessages, FloatingSupport, Loading } from "../components";
 import { LoginResponseInterface, UserContextInterface, ChurchInterface, UserInterface, LoginUserChurchInterface } from "@churchapps/helpers";
-import { AnalyticsHelper, ApiHelper, ArrayHelper, UserHelper } from "../helpers";
+import { AnalyticsHelper, ApiHelper, ArrayHelper, Locale, UserHelper } from "../helpers";
 import { useCookies } from "react-cookie"
 import jwt_decode from "jwt-decode"
 import { Register } from "./components/Register"
@@ -183,7 +183,7 @@ export const LoginPage: React.FC<Props> = ({ showLogo = true, loginContainerCssP
       UserHelper.selectChurch(props.context, churchId, null).then(() => { continueLoginProcess() });
     } catch (err) {
       console.log("Error in selecting church: ", err)
-      setErrors(["Error in selecting church. Please verify and try again"])
+      setErrors([Locale.label("login.validate.selectChurch")])
       loginFormRef?.current?.setSubmitting(false);
     }
 
@@ -192,7 +192,7 @@ export const LoginPage: React.FC<Props> = ({ showLogo = true, loginContainerCssP
   const handleLoginErrors = (errors: string[]) => {
     setWelcomeBackName("");
     console.log(errors);
-    setErrors(["Invalid login. Please check your email or password."]);
+    setErrors([Locale.label("login.validate.invalid")]);
   }
 
   const login = async (data: any) => {
@@ -209,8 +209,8 @@ export const LoginPage: React.FC<Props> = ({ showLogo = true, loginContainerCssP
     }
   };
 
-  const getWelcomeBack = () => { if (welcomeBackName !== "") return (<><Alert severity="info">Welcome back, <b>{welcomeBackName}</b>!  Please wait while we load your data.</Alert><Loading /></>); }
-  const getCheckEmail = () => { if (new URLSearchParams(location?.search).get("checkEmail") === "1") return <Alert severity="info"> Thank you for registering.  Please check your email to continue.</Alert> }
+  const getWelcomeBack = () => { if (welcomeBackName !== "") return (<><Alert severity="info">{Locale.label("login.welcomeName").replace("{}", welcomeBackName)}</Alert><Loading /></>); }
+  const getCheckEmail = () => { if (new URLSearchParams(location?.search).get("checkEmail") === "1") return <Alert severity="info">{Locale.label("login.registerThankYou")}</Alert> }
   const handleRegisterCallback = () => { setShowForgot(false); setShowRegister(true); }
   const handleLoginCallback = () => { setShowForgot(false); setShowRegister(false); }
   const handleChurchRegistered = (church: ChurchInterface) => { registeredChurch = church; setShowRegister(false); console.log("Updated VERSION********") }
@@ -218,7 +218,7 @@ export const LoginPage: React.FC<Props> = ({ showLogo = true, loginContainerCssP
   const getInputBox = () => {
     if (showRegister) return (
       <Box id="loginBox" sx={{ backgroundColor: "#FFF", border: "1px solid #CCC", borderRadius: "5px", padding: "20px" }}>
-        <Typography component="h2" sx={{ fontSize: "32px", fontWeight: 500, lineHeight: 1.2, margin: "0 0 8px 0" }}>Create an Account</Typography>
+        <Typography component="h2" sx={{ fontSize: "32px", fontWeight: 500, lineHeight: 1.2, margin: "0 0 8px 0" }}>{Locale.label("login.createAccount")}</Typography>
         <Register updateErrors={setErrors} appName={props.appName} appUrl={cleanAppUrl()} loginCallback={handleLoginCallback} userRegisteredCallback={props.userRegisteredCallback} />
       </Box>
     );

package/src/pageComponents/components/Forgot.tsx

@@ -1,5 +1,5 @@
 import React, { FormEventHandler } from "react";
-import { ApiHelper } from "../../helpers";
+import { ApiHelper, Locale } from "../../helpers";
 import { ErrorMessages } from "../../components";
 import { ResetPasswordRequestInterface, ResetPasswordResponseInterface } from "@churchapps/helpers";
 import { Stack, TextField, Box, Typography } from "@mui/material";
@@ -24,8 +24,8 @@ export const Forgot: React.FC<Props> = props => {
 
   const validate = () => {
     const result = [];
-    if (!email) result.push("Please enter your email address.");
-    else if (!validateEmail(email)) result.push("Please enter a valid email address.");
+    if (!email) result.push(Locale.label("login.validate.email"));
+    else if (!validateEmail(email)) result.push(Locale.label("login.validate.email"));
     setErrors(result);
     return result.length === 0;
   }
@@ -40,7 +40,7 @@ export const Forgot: React.FC<Props> = props => {
           setErrors([]);
           setSuccessMessage(
             <Typography textAlign="center" marginTop="35px">
-              Password reset email sent! <br /><br /><a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>Go to Login</a>
+              {Locale.label("login.resetSent")} <br /><br /><a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>{Locale.label("login.goLogin")}</a>
             </Typography>
           );
           setEmail("");
@@ -54,22 +54,22 @@ export const Forgot: React.FC<Props> = props => {
 
   return (
     <Box id="loginBox" sx={{ backgroundColor: "#FFF", border: "1px solid #CCC", borderRadius: "5px", padding: "20px" }}>
-      <Typography component="h2" sx={{ fontSize: "32px", fontWeight: 500, lineHeight: 1.2, margin: "0 0 8px 0" }}>Reset Password</Typography>
+      <Typography component="h2" sx={{ fontSize: "32px", fontWeight: 500, lineHeight: 1.2, margin: "0 0 8px 0" }}>{Locale.label("login.resetPassword")}</Typography>
 
       <form onSubmit={reset}>
-        <p>Enter your email address to request a password reset.</p>
+        <p>{Locale.label("login.resetInstructions")}</p>
         <ErrorMessages errors={errors} />
         {successMessage}
         {!successMessage && (
           <>
-            <TextField fullWidth autoFocus label="Email" aria-label="email" id="email" name="email" value={email} onChange={handleChange} placeholder="Email address" onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && reset} />
+            <TextField fullWidth autoFocus label={Locale.label("login.email")} aria-label="email" id="email" name="email" value={email} onChange={handleChange} placeholder={Locale.label("login.email")} onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && reset} />
             <br />
             <Box sx={{ textAlign: "right", marginY: 1 }}>
-              <a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.registerCallback(); }}>Register</a> &nbsp; | &nbsp;
-              <a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>Login</a>&nbsp;
+              <a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.registerCallback(); }}>{Locale.label("login.register")}</a> &nbsp; | &nbsp;
+              <a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>{Locale.label("login.login")}</a>&nbsp;
             </Box>
             <Stack direction="row" sx={{ marginTop: 1.5 }} spacing={1} justifyContent="flex-end">
-              <LoadingButton loading={isSubmitting} variant="contained" type="submit" disabled={isSubmitting}>Reset</LoadingButton>
+              <LoadingButton loading={isSubmitting} variant="contained" type="submit" disabled={isSubmitting}>{Locale.label("login.reset")}</LoadingButton>
             </Stack>
           </>
         )}

package/src/pageComponents/components/LoginSetPassword.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { InputBox } from "../../components";
 import { TextField } from "@mui/material";
 import { LoginResponseInterface, UserInterface } from "@churchapps/helpers";
-import { ApiHelper } from "../../helpers";
+import { ApiHelper, Locale } from "../../helpers";
 
 interface Props {
   appName: string,
@@ -21,9 +21,9 @@ export const LoginSetPassword: React.FC<Props> = props => {
 
   const validate = () => {
     const result = [];
-    if (!password) result.push("Please enter your password.");
-    else if (password.length < 8) result.push("Please enter at least an 8 character password.");
-    else if (password !== verifyPassword) result.push("Passwords do not match");
+    if (!password) result.push(Locale.label("login.validate.password"));
+    else if (password.length < 8) result.push(Locale.label("login.validate.passwordLength"));
+    else if (password !== verifyPassword) result.push(Locale.label("login.validate.passwordMatch"));
     props.setErrors(result);
     return result.length === 0;
   }
@@ -54,10 +54,10 @@ export const LoginSetPassword: React.FC<Props> = props => {
   React.useEffect(loadUser, []); //eslint-disable-line
 
   return (
-    <InputBox headerText="Set Password" saveFunction={submitChangePassword} saveButtonType="submit" saveText={(props.isSubmitting || !user) ? "Please wait..." : "Sign in"} isSubmitting={props.isSubmitting}>
-      {user && <p style={{ marginTop: 0, marginBottom: 0 }}>Welcome back {user.firstName}.</p>}
-      <TextField fullWidth name="password" type="password" label="Set Password" value={password} onChange={(e) => { e.preventDefault(); setPassword(e.target.value) }} />
-      <TextField fullWidth name="verifyPassword" type="password" label="Verify Password" value={verifyPassword} onChange={(e) => { e.preventDefault(); setVerifyPassword(e.target.value) }} />
+    <InputBox headerText={Locale.label("login.setPassword")} saveFunction={submitChangePassword} saveButtonType="submit" saveText={(props.isSubmitting || !user) ? Locale.label("common.pleaseWait") : Locale.label("login.signIn")} isSubmitting={props.isSubmitting}>
+      {user && <p style={{ marginTop: 0, marginBottom: 0 }}>{Locale.label("login.welcomeBack")} {user.firstName}.</p>}
+      <TextField fullWidth name="password" type="password" label={Locale.label("login.setPassword")} value={password} onChange={(e) => { e.preventDefault(); setPassword(e.target.value) }} />
+      <TextField fullWidth name="verifyPassword" type="password" label={Locale.label("login.verifyPassword")} value={verifyPassword} onChange={(e) => { e.preventDefault(); setVerifyPassword(e.target.value) }} />
     </InputBox>
   );
 }

package/src/pageComponents/components/Register.tsx

@@ -1,6 +1,6 @@
 import React, { FormEventHandler } from "react";
 import { LoginResponseInterface, RegisterUserInterface, UserInterface } from "@churchapps/helpers";
-import { AnalyticsHelper, ApiHelper } from "../../helpers";
+import { AnalyticsHelper, ApiHelper, Locale } from "../../helpers";
 import { ErrorMessages } from "../../components";
 import { Button, Stack, TextField, Link } from "@mui/material";
 
@@ -52,10 +52,10 @@ export const Register: React.FC<Props> = (props) => {
 
   const validate = () => {
     let errors = [];
-    if (!user.email?.trim()) errors.push("Please enter your email address.");
-    else if (!validateEmail(user.email)) errors.push("Please enter a valid email address.");
-    if (!user.firstName?.trim()) errors.push("Please enter your first name.");
-    if (!user.lastName?.trim()) errors.push("Please enter your last name.");
+    if (!user.email?.trim()) errors.push(Locale.label("login.validate.email"));
+    else if (!validateEmail(user.email)) errors.push(Locale.label("login.validate.email"));
+    if (!user.firstName?.trim()) errors.push(Locale.label("login.validate.firstName"));
+    if (!user.lastName?.trim()) errors.push(Locale.label("login.validate.lastName"));
     setErrors(errors);
     return errors.length === 0;
   }
@@ -79,12 +79,6 @@ export const Register: React.FC<Props> = (props) => {
     }
   };
 
-  const getThankYou = () => (
-    <>
-      <p>Thank you for registering. Please check your email to continue.</p>
-    </>
-  )
-
   const getForm = () => (<>
     <ErrorMessages errors={errors} />
     <form onSubmit={register}>
@@ -93,7 +87,7 @@ export const Register: React.FC<Props> = (props) => {
       <TextField fullWidth type="email" name="email" label="Email" value={user.email} onChange={handleChange} />
       <br />
       <Stack direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
-        {props.loginCallback && (<Button variant="text" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>Login</Button>)}
+        {props.loginCallback && (<Button variant="text" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>{Locale.label("login.login")}</Button>)}
         <Button id="signInButton" variant="contained" disableElevation type="submit" disabled={isSubmitting} color="primary" onClick={register} sx={{ "&:focus": { outline: "none" } }}>
           {isSubmitting ? "Please wait..." : "Register"}
         </Button>
@@ -101,7 +95,7 @@ export const Register: React.FC<Props> = (props) => {
     </form>
   </>)
 
-  if (registered) return getThankYou();
+  if (registered) return (<p>{Locale.label("login.registerThankYou")}</p>);
   else return getForm();
 
 };

package/src/pageComponents/components/SelectChurchModal.tsx

@@ -4,6 +4,7 @@ import { SelectChurchSearch } from "./SelectChurchSearch";
 import { SelectableChurch } from "./SelectableChurch";
 import { ErrorMessages } from "../../components"
 import { Dialog, DialogContent, DialogTitle, Icon, IconButton, Tooltip } from "@mui/material";
+import { Locale } from "../../helpers";
 
 interface Props {
   appName: string,
@@ -25,13 +26,14 @@ export const SelectChurchModal: React.FC<Props> = (props) => {
     if (showSearch || props.userChurches?.length === 0) return <SelectChurchSearch selectChurch={props.selectChurch} registeredChurchCallback={props.registeredChurchCallback} appName={props.appName} />
     else return (<>
       {props.userChurches?.map(uc => (<SelectableChurch church={uc.church} selectChurch={props.selectChurch} key={uc.church.id} />))}
-      <a href="about:blank" style={{ display: "block", textAlign: "center" }} onClick={(e) => { e.preventDefault(); setShowSearch(true); }}>Choose another church</a>
+      <a href="about:blank" style={{ display: "block", textAlign: "center" }} onClick={(e) => { e.preventDefault(); setShowSearch(true); }}>{Locale.label("selectChurch.another")}</a>
     </>);
   }
 
   return (
     <Dialog open={props.show} onClose={handleClose}>
-      <DialogTitle>Select Church</DialogTitle>
+      <DialogTitle>{Locale.label("selectChurch.selectChurch")}
+      </DialogTitle>
       <Tooltip title="Logout" arrow>
         <IconButton sx={{ position: "absolute", right: 8, top: 8 }} color="error" onClick={() => { window.location.href = "/logout" }}>
           <Icon>logout</Icon>

package/src/pageComponents/components/SelectChurchRegister.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { ApiHelper } from "../../helpers"
+import { ApiHelper, Locale } from "../../helpers"
 import { ChurchInterface, RegisterChurchRequestInterface } from "@churchapps/helpers";
 import { ErrorMessages, InputBox } from "../../components"
-import { Grid, InputAdornment, TextField } from "@mui/material";
+import { Grid, TextField } from "@mui/material";
 
 interface Props {
   initialChurchName: string,
@@ -38,13 +38,12 @@ export const SelectChurchRegister: React.FC<Props> = (props) => {
 
   const validate = () => {
     let errors = [];
-    if (!church.name?.trim()) errors.push("Church name cannot be blank.");
-    //if (!church.subDomain?.trim()) errors.push("Subdomain cannot be blank.");
-    if (!church.address1?.trim()) errors.push("Address cannot be blank.");
-    if (!church.city?.trim()) errors.push("City cannot be blank.");
-    if (!church.state?.trim()) errors.push("State/Province cannot be blank.");
-    if (!church.zip?.trim()) errors.push("Zip/Postal cannot be blank.");
-    if (!church.country?.trim()) errors.push("Country cannot be blank.");
+    if (!church.name?.trim()) errors.push(Locale.label("selectChurch.validate.name"));
+    if (!church.address1?.trim()) errors.push(Locale.label("selectChurch.validate.address"));
+    if (!church.city?.trim()) errors.push(Locale.label("selectChurch.validate.city"));
+    if (!church.state?.trim()) errors.push(Locale.label("selectChurch.validate.state"));
+    if (!church.zip?.trim()) errors.push(Locale.label("selectChurch.validate.zip"));
+    if (!church.country?.trim()) errors.push(Locale.label("selectChurch.validate.country"));
     setErrors(errors);
     return errors.length === 0;
   }
@@ -65,25 +64,21 @@ export const SelectChurchRegister: React.FC<Props> = (props) => {
     }
   }
 
-  /*<TextField required fullWidth name="subDomain" label="Subdomain" id="subDomain" InputProps={{
-    endAdornment: <InputAdornment position="end">.churchapps.org</InputAdornment>
-  }} value={church.subDomain} onChange={handleChange} />
-  */
   return (
-    <InputBox id="churchBox" saveFunction={handleSave} headerText="Register a New Church" headerIcon="church" isSubmitting={isSubmitting}>
+    <InputBox id="churchBox" saveFunction={handleSave} headerText={Locale.label("selectChurch.register")} headerIcon="church" isSubmitting={isSubmitting}>
       <ErrorMessages errors={errors} />
-      <TextField required fullWidth name="churchName" label="Church Name" value={church.name} onChange={handleChange} />
+      <TextField required fullWidth name="churchName" label={Locale.label("selectChurch.name")} value={church.name} onChange={handleChange} />
 
-      <TextField required fullWidth name="address1" label="Address Line 1" value={church.address1} onChange={handleChange} />
+      <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="Address Line 2" value={church.address2} onChange={handleChange} /></Grid>
-        <Grid item xs={6}><TextField required fullWidth name="city" label="City" value={church.city} onChange={handleChange} /></Grid>
+        <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>
       <Grid container spacing={3}>
-        <Grid item xs={6}><TextField required fullWidth name="state" label="State / Province" value={church.state} onChange={handleChange} /></Grid>
-        <Grid item xs={6}><TextField required fullWidth name="zip" label="Zip / Postal" value={church.zip} onChange={handleChange} /></Grid>
+        <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>
-      <TextField required fullWidth name="country" label="Country" value={church.country} onChange={handleChange} />
+      <TextField required fullWidth name="country" label={Locale.label("selectChurch.country")} value={church.country} onChange={handleChange} />
     </InputBox>
   );
 };

package/src/pageComponents/components/SelectChurchSearch.tsx

@@ -1,6 +1,6 @@
 import { Button, TextField } from "@mui/material";
 import React from "react";
-import { ApiHelper } from "../../helpers"
+import { ApiHelper, Locale } from "../../helpers"
 import { ChurchInterface } from "@churchapps/helpers";
 import { SelectableChurch } from "./SelectableChurch";
 import { SelectChurchRegister } from "./SelectChurchRegister";
@@ -28,7 +28,7 @@ export const SelectChurchSearch: React.FC<Props> = (props) => {
 
   const handleRegisterClick = (e: React.MouseEvent) => {
     e.preventDefault();
-    if (window.confirm("Are you sure you wish to register a new church?")) {
+    if (window.confirm(Locale.label("selectChurch.confirmRegister"))) {
       setShowRegister(true);
     }
   }
@@ -36,7 +36,7 @@ export const SelectChurchSearch: React.FC<Props> = (props) => {
   const getRegisterLink = () => (
     <div>
       <a style={{ display: "block", textAlign: "center" }} href="about:blank" onClick={handleRegisterClick}>
-        Register a New Church
+        {Locale.label("selectChurch.register")}
       </a>
     </div>
   )
@@ -52,7 +52,7 @@ export const SelectChurchSearch: React.FC<Props> = (props) => {
 
   const getResults = () => {
     if (churches === null) return;
-    else if (churches.length === 0) return <><p>No matches found</p>{getRegisterLink()}</>
+    else if (churches.length === 0) return <><p>{Locale.label("selectChurch.noMatches")}</p>{getRegisterLink()}</>
     else return getChurches();
   }
 
@@ -60,7 +60,7 @@ export const SelectChurchSearch: React.FC<Props> = (props) => {
   else return (
     <>
       <TextField fullWidth name="searchText" label="Name" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
-        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>Search</Button> }}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSubmit}>{Locale.label("common.search")}</Button> }}
       />
       {getResults()}
     </>