@churchapps/apphelper 0.2.30 → 0.2.32

package/src/components/ImageEditor.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import Cropper from "react-cropper";
 import "cropperjs/dist/cropper.css";
 import { InputBox, SmallButton } from ".";
+import { Locale } from "../helpers";
 
 interface Props {
   title?: string;
@@ -105,7 +106,7 @@ export function ImageEditor(props: Props) {
       headerIcon=""
       headerText={props.title}
       ariaLabelDelete="deletePhoto"
-      saveText="Update"
+      saveText={Locale.label("common.update")}
       saveFunction={handleSave}
       cancelFunction={props.onCancel}
       deleteFunction={(!props.hideDelete) && handleDelete}

package/src/components/InputBox.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Paper, Box, Typography, Stack, styled, Button, Icon, PaperProps } from "@mui/material";
 import { HelpIcon } from "./HelpIcon";
+import { Locale } from "../helpers";
 
 interface Props {
   id?: string;
@@ -41,9 +42,9 @@ const CustomContextBox = styled(Box)({
 
 export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
   let buttons = [];
-  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>{props.cancelText || "Cancel"}</Button>);
-  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>{props.deleteText || "Delete"}</Button>);
-  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.saveText || "Save"}</Button>);
+  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>{props.cancelText || Locale.label("common.cancel")}</Button>);
+  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>{props.deleteText || Locale.label("common.delete")}</Button>);
+  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.saveText || Locale.label("common.save")}</Button>);
 
   let classNames = ["inputBox"];
   if (props.className) {

package/src/components/PersonAdd.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ApiHelper } from "../helpers";
+import { ApiHelper, Locale } from "../helpers";
 import { PersonInterface } from "@churchapps/helpers"
 import { TextField, Button, Table, TableBody, TableRow, TableCell } from "@mui/material";
 import { SmallButton } from "./SmallButton";
@@ -63,8 +63,8 @@ export const PersonAdd: React.FC<Props> = ({ addFunction, getPhotoUrl, searchCli
 
   return (
     <>
-      <TextField fullWidth name="personAddText" label="Person" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
-        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>Search</Button> }}
+      <TextField fullWidth name="personAddText" label={Locale.label("person.person")} value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>{Locale.label("common.search")}</Button> }}
       />
       {showCreatePersonOnNotFound && hasSearched && searchText && searchResults.length === 0 && (
         <CreatePerson navigateOnCreate={false} onCreate={person => { setSearchText(""); setSearchResults([person]) }} />

package/src/components/SupportModal.tsx

@@ -1,5 +1,6 @@
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Icon, Stack } from "@mui/material";
 import React from "react";
+import { Locale } from "../helpers";
 
 interface Props {
   appName?: string
@@ -13,10 +14,10 @@ export const SupportModal: React.FC<Props> = ({ appName = "", onClose }) => {
     <Dialog open={true} onClose={onClose}>
       <DialogTitle>Get Support</DialogTitle>
       <DialogContent>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>mail</Icon> Email:</Stack></b> <a href={"mailto:support@livecs.org" + subject}>support@livecs.org</a></Stack>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>phone_iphone</Icon> Phone:</Stack></b> <a href="tel:+19189942638">+1 (918) 994-2638</a></Stack>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>forum</Icon> Messenger:</Stack></b> <a href="https://m.me/livecsolutions" target="_new">https://m.me/livecsolutions</a></Stack>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> Knowledge Base:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>mail</Icon> {Locale.label("support.email")}:</Stack></b> <a href={"mailto:support@livecs.org" + subject}>support@churchapps.org</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>phone_iphone</Icon> {Locale.label("support.phone")}:</Stack></b> <a href="tel:+19189942638">+1 (918) 994-2638</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>forum</Icon> {Locale.label("support.messenger")}:</Stack></b> <a href="https://m.me/livecsolutions" target="_new">https://m.me/livecsolutions</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> {Locale.label("support.knowledgeBase")}:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
       </DialogContent>
       <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
         <Button variant="outlined" onClick={onClose}>Close</Button>

package/src/components/gallery/GalleryModal.tsx

@@ -1,4 +1,4 @@
-import { FileHelper, ApiHelper } from "../../helpers";
+import { FileHelper, ApiHelper, Locale } from "../../helpers";
 import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
 import { } from "../../helpers";
 import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, Grid, IconButton, InputLabel, MenuItem, Select, Tab, Tabs, Tooltip, Icon } from "@mui/material";
@@ -38,7 +38,7 @@ export const GalleryModal: React.FC<Props> = (props: Props) => {
   };
 
   const handleDelete = (folder: string, image: string) => {
-    if (window.confirm("Are you sure you wish to delete this image from gallery?")){
+    if (window.confirm(Locale.label("gallery.confirmDelete"))){
       ApiHelper.delete("/gallery/" + folder + "/" + image, "ContentApi").then(() => { loadData(); });
     }
   }
@@ -101,9 +101,9 @@ export const GalleryModal: React.FC<Props> = (props: Props) => {
         <TabPanel value={tabIndex} index={0}>
           {(props.aspectRatio === 0) && (
             <FormControl fullWidth>
-              <InputLabel>Aspect Ratio</InputLabel>
-              <Select size="small" label="Aspect Ratio" name="aspectRatio" value={aspectRatio} onChange={(e) => setAspectRatio(parseFloat(e.target.value.toString()))}>
-                <MenuItem value="0">Free Form</MenuItem>
+              <InputLabel>{Locale.label("gallery.aspectRatio")}</InputLabel>
+              <Select size="small" label={Locale.label("gallery.aspectRatio")} name="aspectRatio" value={aspectRatio} onChange={(e) => setAspectRatio(parseFloat(e.target.value.toString()))}>
+                <MenuItem value="0">{Locale.label("gallery.freeForm")}</MenuItem>
                 <MenuItem value="1">1:1</MenuItem>
                 <MenuItem value="2">2:1</MenuItem>
                 <MenuItem value="3">3:1</MenuItem>
@@ -120,7 +120,7 @@ export const GalleryModal: React.FC<Props> = (props: Props) => {
           </Grid>
         </TabPanel>
         <TabPanel value={tabIndex} index={1}>
-          <div>Aspect Ratio: {getDisplayAspect()}</div>
+          <div>{Locale.label("gallery.aspectRatio")}: {getDisplayAspect()}</div>
           <ImageEditor onUpdate={handleImageUpdated} photoUrl={editorPhotoUrl} aspectRatio={aspectRatio} outputWidth={1280} outputHeight={768} hideDelete={true} />
         </TabPanel>
         <TabPanel value={tabIndex} index={2}>

package/src/components/gallery/StockPhotos.tsx

@@ -1,6 +1,6 @@
 import { Button, Grid, TextField } from "@mui/material";
 import React, { useState } from "react";
-import { ApiHelper } from "../../helpers";
+import { ApiHelper, Locale } from "../../helpers";
 import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
 
 interface Props {
@@ -42,7 +42,7 @@ export const StockPhotos: React.FC<Props> = (props: Props) => {
         </a>
         <div>
           <i style={{ fontSize: 12 }}>
-            <a href={p.url} target="_blank" rel="noreferrer noopener">Photo</a> by: <a href={p.photographerUrl} target="_blank" rel="noreferrer noopener">{p.photographer}</a></i>
+            <a href={p.url} target="_blank" rel="noreferrer noopener">{Locale.label("stockPhotos.photoBy")}</a> <a href={p.photographerUrl} target="_blank" rel="noreferrer noopener">{p.photographer}</a></i>
         </div>
       </Grid>);
     })
@@ -65,7 +65,7 @@ export const StockPhotos: React.FC<Props> = (props: Props) => {
     <TextField fullWidth name="personAddText" label="Search Term" value={searchText} onChange={handleChange}
       InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>Search</Button> }}
     />
-    {searchResults && <div>Stock photos provided by <a href="https://pexels.com">Pexels</a>.</div>}
+    {searchResults && <div>{Locale.label("stockPhotos.providedBy")} <a href="https://pexels.com">Pexels</a>.</div>}
     <Grid container spacing={3} alignItems="center">
       {getImages()}
     </Grid>

package/src/components/iconPicker/IconPicker.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { styled, Icon, InputBase, Typography, debounce, Grid, IconButton, Pagination, Stack } from "@mui/material";
 import MuiPaper from "@mui/material/Paper";
 import IconNamesList from "./IconNamesList"
+import { Locale } from "../../helpers";
 //import FlexSearch from "flexsearch";
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
@@ -141,10 +142,10 @@ export function IconPicker(props: Props) {
           <IconButton sx={{ padding: "10px" }} aria-label="search">
             <Icon>search</Icon>
           </IconButton>
-          <Input autoFocus value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search icons…" inputProps={{ "aria-label": "search icons" }} />
+          <Input autoFocus value={query} onChange={(event) => setQuery(event.target.value)} placeholder={Locale.label("iconPicker.searchIcons")} inputProps={{ "aria-label": "search icons" }} />
         </Paper>
-        {(query === "") && <Typography sx={{ mb: 1 }}>{`${IconNamesList.length} icons available`}</Typography>}
-        {(query !== "") && <Typography sx={{ mb: 1 }}>{`${icons.length} matching results`}</Typography>}
+        {(query === "") && <Typography sx={{ mb: 1 }}>{IconNamesList.length} {Locale.label("iconPicker.iconsAvailable")}</Typography>}
+        {(query !== "") && <Typography sx={{ mb: 1 }}>{icons.length} {Locale.label("iconPicker.matchingResults")}</Typography>}
 
         <Icons icons={paged(icons, page)} handleOpenClick={props.onSelect} />
       </Grid>

package/src/components/markdownEditor/MarkdownModal.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, TextField } from "@mui/material";
 import { MarkdownPreview } from "./MarkdownPreview";
+import { Locale } from "../../helpers";
 
 interface Props {
   hideModal: () => void
@@ -8,7 +9,7 @@ interface Props {
   value?: string;
 }
 
-const guideLink = <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank" rel="noopener noreferrer" style={{ float: "right" }}>Markdown Guide</a>;
+const guideLink = <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank" rel="noopener noreferrer" style={{ float: "right" }}>{Locale.label("markdownEditor.markdownGuide")}</a>;
 
 
 export const MarkdownModal: React.FC<Props> = ({ value, onChange, hideModal }) => {
@@ -23,11 +24,11 @@ export const MarkdownModal: React.FC<Props> = ({ value, onChange, hideModal }) =
   useEffect(() => { onChange(inputVal); }, [inputVal, onChange]);
 
   return (<Dialog open={true} onClose={() => { hideModal() }} fullScreen={true}>
-    <DialogTitle>Markdown Editor</DialogTitle>
+    <DialogTitle>{Locale.label("markdownEditor.markdownGuide")}</DialogTitle>
     <DialogContent>
       <Grid container spacing={3}>
         <Grid item xs={6}>
-          <TextField fullWidth multiline label={<>Content &nbsp; {guideLink}</>} name="modalMarkdown" className="modalMarkdown" InputProps={{ style: { height: "80vh" } }} value={inputVal} onChange={(e) => {
+          <TextField fullWidth multiline label={<>{Locale.label("markdownEditor.content")} &nbsp; {guideLink}</>} name="modalMarkdown" className="modalMarkdown" InputProps={{ style: { height: "80vh" } }} value={inputVal} onChange={(e) => {
             setInputVal(e.target.value);
           }} placeholder="" />
         </Grid>
@@ -40,7 +41,7 @@ export const MarkdownModal: React.FC<Props> = ({ value, onChange, hideModal }) =
       </Grid>
     </DialogContent>
     <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
-      <Button variant="outlined" onClick={() => { hideModal() }}>Close</Button>
+      <Button variant="outlined" onClick={() => { hideModal() }}>{Locale.label("common.close")}</Button>
     </DialogActions>
   </Dialog>)
 };

package/src/components/notes/AddNote.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import { ApiHelper, PersonHelper } from "../../helpers"
+import { ApiHelper, Locale, PersonHelper } from "../../helpers"
 import { MessageInterface, UserContextInterface } from "@churchapps/helpers"
 import { Icon, Stack, TextField } from "@mui/material"
 import { ErrorMessages } from "../ErrorMessages"
@@ -36,7 +36,7 @@ export function AddNote({ context, ...props }: Props) {
 
   const validate = () => {
     const result = [];
-    if (!message.content.trim()) result.push("Please enter a note.");
+    if (!message.content.trim()) result.push(Locale.label("notes.validate.content"));
     setErrors(result);
     return result.length === 0;
   }

package/src/components/notes/Conversation.tsx

@@ -1,6 +1,6 @@
 import { Box, Paper, Stack } from "@mui/material";
 import React from "react";
-import { ApiHelper, ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
+import { ApiHelper, ArrayHelper, DateHelper, Locale, PersonHelper } from "../../helpers";
 import { ConversationInterface, MessageInterface, UserContextInterface } from "@churchapps/helpers";
 import { AddNote } from "./AddNote";
 import { Note } from "./Note";
@@ -65,8 +65,8 @@ export function Conversation(props: Props) {
       </div>
       {props.showCommentCount && (
         <div className="commentCount">
-          <div>{(conversation.postCount === 1) ? "1 comment" : conversation.postCount + " comments"}</div>
-          {(conversation.postCount > conversation.messages.length) ? <a href="about:blank" onClick={(e) => { e.preventDefault(); loadNotes(); }}>View all {conversation.postCount} comments</a> : <>&nbsp;</>}
+          <div>{(conversation.postCount === 1) ? "1 " + Locale.label("notes.comment") : conversation.postCount + " " + Locale.label("notes.comments")}</div>
+          {(conversation.postCount > conversation.messages.length) ? <a href="about:blank" onClick={(e) => { e.preventDefault(); loadNotes(); }}>{Locale.label("notes.viewAll")} {conversation.postCount} {Locale.label("notes.comments")}</a> : <>&nbsp;</>}
         </div>
       )}
       <div className="messages">

package/src/components/notes/NewConversation.tsx

@@ -1,6 +1,6 @@
 import { Icon, Paper, Stack, TextField } from "@mui/material";
 import React from "react";
-import { ApiHelper, PersonHelper } from "../../helpers";
+import { ApiHelper, Locale, PersonHelper } from "../../helpers";
 import { ConversationInterface, MessageInterface, UserContextInterface } from "@churchapps/helpers";
 import { ErrorMessages } from "../ErrorMessages";
 import { SmallButton } from "../SmallButton";
@@ -28,7 +28,7 @@ export function NewConversation({ context, ...props }: Props) {
 
   const validate = () => {
     const result = [];
-    if (!message.content.trim()) result.push("Please enter a note.");
+    if (!message.content.trim()) result.push(Locale.label("notes.validate.content"));
     setErrors(result);
     return result.length === 0;
   }
@@ -66,7 +66,7 @@ export function NewConversation({ context, ...props }: Props) {
         {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
         <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
           <div><b>{context?.person?.name?.display}</b></div>
-          <TextField fullWidth name="noteText" aria-label={"Start a conversation"} placeholder="Start a conversation" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message.content} />
+          <TextField fullWidth name="noteText" aria-label={Locale.label("notes.startConversation")} placeholder={Locale.label("notes.startConversation")} multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message.content} />
         </Stack>
         <Stack direction="column" spacing={1} justifyContent="end">
           <SmallButton icon="send" onClick={handleSave} disabled={isSubmitting} />

package/src/components/notes/Notes.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Note } from "./Note";
 import { AddNote } from "./AddNote";
 import { DisplayBox, Loading } from "../";
-import { ApiHelper, ArrayHelper } from "../../helpers";
+import { ApiHelper, ArrayHelper, Locale } from "../../helpers";
 import { MessageInterface, UserContextInterface } from "@churchapps/helpers";
 
 interface Props {
@@ -65,5 +65,5 @@ export function Notes(props: Props) {
     {messages && (<AddNote context={props.context} conversationId={props.conversationId} onUpdate={loadNotes} createConversation={props.createConversation} messageId={editMessageId} />)}
   </>
   if (props.noDisplayBox) return result;
-  else return (<DisplayBox id="notesBox" data-cy="notes-box" headerIcon="sticky_note_2" headerText="Notes">{result}</DisplayBox>);
+  else return (<DisplayBox id="notesBox" data-cy="notes-box" headerIcon="sticky_note_2" headerText={Locale.label("notes.notes")}>{result}</DisplayBox>);
 };

package/src/components/reporting/ChartReport.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Chart } from "react-google-charts";
 import { ReportOutputInterface, ReportResultInterface } from "@churchapps/helpers";
 import { ReportHelper } from "../../helpers/ReportHelper";
+import { Locale } from "../../helpers";
 
 interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
 
@@ -78,7 +79,7 @@ export const ChartReport = (props: Props) => {
     return rows;
   }
 
-  let result = <p>There is no data to display</p>
+  let result = <p>{Locale.label("reporting.noData")}</p>
   if (props.reportResult.table?.length > 0) result = (<Chart chartType="ColumnChart" data={getChartData()} width="100%" height="400px" options={{ height: 400, legend: { position: "top", maxLines: 3 }, bar: { groupWidth: "75%" }, isStacked: true }} />);
 
   return result;

package/src/components/reporting/ReportFilter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ReportInterface, ParameterInterface } from "@churchapps/helpers";
-import { ArrayHelper } from "../../helpers"
+import { ArrayHelper, Locale } from "../../helpers"
 import { InputBox } from "../"
 import { ReportFilterField } from "./ReportFilterField";
 
@@ -47,7 +47,7 @@ export const ReportFilter = (props: Props) => {
 
   const inputs = getInputs();
   if (inputs.length > 0) {
-    return <InputBox id="formSubmissionBox" headerText="Filter Report" headerIcon="summarize" saveFunction={props.onRun} saveText="Run Report">
+    return <InputBox id="formSubmissionBox" headerText="Filter Report" headerIcon="summarize" saveFunction={props.onRun} saveText={Locale.label("reporting.runReport")}>
       {inputs}
     </InputBox>
   } else return <> </>

package/src/components/reporting/ReportFilterField.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ReportInterface, ParameterInterface } from "@churchapps/helpers";
-import { ApiHelper, ArrayHelper, DateHelper } from "../../helpers";
+import { ApiHelper, ArrayHelper, DateHelper, Locale } from "../../helpers";
 import { FormControl, InputLabel, Select, SelectChangeEvent, TextField, MenuItem } from "@mui/material";
 import { useMountedState } from "../../hooks/useMountedState";
 
@@ -73,7 +73,8 @@ export const ReportFilterField = (props: Props) => {
   }
 
   const getMonths = () => {
-    const list = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novermber", "December"]
+    const list = [Locale.label("month.january"), Locale.label("month.february"), Locale.label("month.march"), Locale.label("month.april"), Locale.label("month.may"), Locale.label("month.june"), Locale.label("month.july"), Locale.label("month.august"), Locale.label("month.september"), Locale.label("month.october"), Locale.label("month.november"), Locale.label("month.december")]
+
     const result = [];
     for (let i = 0; i < list.length; i++) result.push({ value: (i + 1).toString(), text: list[i] });
     return result;
@@ -152,7 +153,7 @@ export const ReportFilterField = (props: Props) => {
       );
       break;
     case "date":
-      result = (<TextField type="date" fullWidth InputLabelProps={{shrink: true}} label="Date" value={props.parameter.value || ""} onChange={handleChange} name={props.parameter.keyName} />)
+      result = (<TextField type="date" fullWidth InputLabelProps={{shrink: true}} label={Locale.label("common.date")} value={props.parameter.value || ""} onChange={handleChange} name={props.parameter.keyName} />)
       break;
   }
   return result;

package/src/components/reporting/ReportOutput.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { ArrayHelper, PersonInterface, ReportInterface, ReportResultInterface } from "@churchapps/helpers";
 import { DisplayBox, ExportLink, Loading } from "../"
-import { ApiHelper } from "../../helpers"
+import { ApiHelper, Locale } from "../../helpers"
 import { useReactToPrint } from "react-to-print";
 import { TableReport } from "./TableReport";
 import { ChartReport } from "./ChartReport";
@@ -62,9 +62,7 @@ export const ReportOutput = (props: Props) => {
     }
 
     //set custom headers
-    const maxKeysObj = result?.reduce((a, b) => {
-      return Object.keys(a).length > Object.keys(b).length ? a : b;
-    }, []);
+    const maxKeysObj = result?.reduce((a, b) => Object.keys(a).length > Object.keys(b).length ? a : b, []);
     const objKeys = Object.keys(maxKeysObj);
     objKeys.forEach(key => headers.push({ label: key, key: key }));
 
@@ -101,10 +99,10 @@ export const ReportOutput = (props: Props) => {
       setAnchorEl(null);
     }
     return (<>
-      <Button size="small" title="Download Options" onClick={handleClick} key={key}><Icon>download</Icon></Button>
+      <Button size="small" title={Locale.label("reporting.downloadOptions")} onClick={handleClick} key={key}><Icon>download</Icon></Button>
       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-        {reportResult?.table?.length > 0 && <MenuItem sx={{ padding: "5px" }} onClick={handleClose}><ExportLink data={reportResult.table} filename={props.report.displayName.replace(" ", "_") + ".csv"} text="Fund Summary" icon="volunteer_activism" /></MenuItem>}
-        {detailedPersonSummary?.length > 0 && <MenuItem sx={{ padding: "5px" }} onClick={handleClose}><ExportLink data={detailedPersonSummary} filename="Detailed_Donation_Summary.csv" text="Detailed Summary" icon="person" customHeaders={customHeaders} spaceAfter={true} /></MenuItem>}
+        {reportResult?.table?.length > 0 && <MenuItem sx={{ padding: "5px" }} onClick={handleClose}><ExportLink data={reportResult.table} filename={props.report.displayName.replace(" ", "_") + ".csv"} text={Locale.label("reporting.detailedSummary")} icon="volunteer_activism" /></MenuItem>}
+        {detailedPersonSummary?.length > 0 && <MenuItem sx={{ padding: "5px" }} onClick={handleClose}><ExportLink data={detailedPersonSummary} filename="Detailed_Donation_Summary.csv" text={Locale.label("reporting.detailedSummary")} icon="person" customHeaders={customHeaders} spaceAfter={true} /></MenuItem>}
       </Menu>
     </>)
   }
@@ -135,7 +133,7 @@ export const ReportOutput = (props: Props) => {
   }
 
   const getResults = () => {
-    if (!props.report) return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText="Run Report" editContent={getEditContent()}><p>Use the filter to run the report.</p></DisplayBox>);
+    if (!props.report) return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText={Locale.label("reporting.runReport")} editContent={getEditContent()}><p>{Locale.label("reporting.useFilter")}</p></DisplayBox>);
 
     else if (!reportResult) return <Loading />
     else {

package/src/components/wrapper/ChurchList.tsx

@@ -3,6 +3,7 @@ import { LoginUserChurchInterface, UserContextInterface, ArrayHelper } from "@ch
 import { ApiHelper } from "../../helpers/ApiHelper";
 import { UserHelper } from "../../helpers/UserHelper";
 import { NavItem } from "./NavItem";
+import { Locale } from "../../helpers";
 
 export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface, onDelete?: () => void }
 
@@ -10,17 +11,18 @@ export const ChurchList: React.FC<Props> = props => {
   const [userChurches, setUserChurches] = useState(UserHelper.userChurches.filter(uc => uc.apis.length > 0 && uc.person.id !== null));
 
   const handleDelete = (uc: LoginUserChurchInterface) => {
-    if (window.confirm(`Are you sure you wish to delete ${(uc.church.name).toUpperCase()} church from the list?`)) {
+    const label = Locale.label("wrapper.sureRemoveChurch").replace("{}", uc.church.name.toUpperCase());
+    if (window.confirm(label)) {
       ApiHelper.delete(`/userchurch/record/${props.context.user.id}/${uc.church.id}/${uc.person.id}`, "MembershipApi")
-      .then(() => {
+        .then(() => {
         // remove the same from userChurches
-        const idx = ArrayHelper.getIndex(UserHelper.userChurches, "church.id", uc.church.id);
-        if (idx > -1) UserHelper.userChurches.splice(idx, 1);
-        //@ts-ignore
-        UserHelper.userChurches.push({ apis: uc.apis, church: uc.church, groups: uc.groups, jwt: uc.jwt, person: { id: null, membershipStatus: null } });
-        setUserChurches(UserHelper.userChurches.filter(uc => uc.apis.length > 0 && uc.person.id !== null));
-        props?.onDelete();
-      }) 
+          const idx = ArrayHelper.getIndex(UserHelper.userChurches, "church.id", uc.church.id);
+          if (idx > -1) UserHelper.userChurches.splice(idx, 1);
+          //@ts-ignore
+          UserHelper.userChurches.push({ apis: uc.apis, church: uc.church, groups: uc.groups, jwt: uc.jwt, person: { id: null, membershipStatus: null } });
+          setUserChurches(UserHelper.userChurches.filter(uc => uc.apis.length > 0 && uc.person.id !== null));
+          props?.onDelete();
+        })
     }
   }
 
@@ -30,14 +32,14 @@ export const ChurchList: React.FC<Props> = props => {
     userChurches.forEach(uc => {
       const userChurch = uc;
       const churchName = uc.church.name;
-      result.push(<NavItem 
+      result.push(<NavItem
         key={userChurch.church.id}
         selected={(uc.church.id === props.currentUserChurch.church.id) && true}
         onClick={() => UserHelper.selectChurch(props.context, userChurch.church.id, null)}
         label={churchName}
         icon="church"
         deleteIcon={uc.church.id !== props.currentUserChurch.church.id ? "delete" : null}
-        deleteLabel="Delete church from the list"
+        deleteLabel={Locale.label("wrapper.deleteChurch")}
         deleteFunction={() => { handleDelete(uc); }}
       />);
     });

package/src/components/wrapper/NavItem.tsx

@@ -36,13 +36,15 @@ export const NavItem: React.FC<Props> = (props) => {
       <ListItemIcon sx={{ minWidth: "40px" }}>{getIcon()}</ListItemIcon>
     </Tooltip>
     <ListItemText primary={props.label} />
-    {props?.deleteIcon ? (
-      <Tooltip title={props.deleteLabel || ""} arrow placement="left">
-        <IconButton onClick={props.deleteFunction ? (e) => { e.stopPropagation(); e.preventDefault(); props.deleteFunction() } : null} sx={{ color: "#f7a9a9" }} size="small">
-          <Icon sx={{ fontSize: 19 }}>delete</Icon>
-        </IconButton>
-      </Tooltip>
-    ) : ""}
+    {props?.deleteIcon
+      ? (
+        <Tooltip title={props.deleteLabel || ""} arrow placement="left">
+          <IconButton onClick={props.deleteFunction ? (e) => { e.stopPropagation(); e.preventDefault(); props.deleteFunction() } : null} sx={{ color: "#f7a9a9" }} size="small">
+            <Icon sx={{ fontSize: 19 }}>delete</Icon>
+          </IconButton>
+        </Tooltip>
+      )
+      : ""}
   </ListItemButton>)
 
   if (props.router) return (<a href={props.url} target={props.target} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : props.router.push(props.url) }} className={(props.selected) ? "selected" : ""}>{getLinkContents()}</a>)

package/src/components/wrapper/NewPrivateMessage.tsx

@@ -1,6 +1,6 @@
 import { Button, TextField, TableRow, TableCell, Table, TableBody } from "@mui/material";
 import React from "react";
-import { ApiHelper, PersonHelper } from "../../helpers";
+import { ApiHelper, Locale, PersonHelper } from "../../helpers";
 import { ConversationInterface, PersonInterface, PrivateMessageInterface, UserContextInterface } from "@churchapps/helpers";
 import { AddNote } from "../notes/AddNote";
 import { SmallButton } from "../SmallButton";
@@ -59,7 +59,7 @@ export const NewPrivateMessage: React.FC<Props> = (props) => {
   }
 
   const createConversation = async () => {
-    const conv: ConversationInterface = { allowAnonymousPosts: false, contentType: "privateMessage", contentId: props.context.person.id, title: props.context.person.name.display + " Private Message", visibility: "hidden" }
+    const conv: ConversationInterface = { allowAnonymousPosts: false, contentType: "privateMessage", contentId: props.context.person.id, title: props.context.person.name.display + " " + Locale.label("wrapper.privateMessage"), visibility: "hidden" }
     const result: ConversationInterface[] = await ApiHelper.post("/conversations", [conv], "MessagingApi");
 
     const pm: PrivateMessageInterface = {
@@ -76,12 +76,12 @@ export const NewPrivateMessage: React.FC<Props> = (props) => {
       <span style={{ float: "right" }}>
         <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
       </span>
-      <b>New Private Message</b>
-      <div>Search for a person</div>
+      <b>{Locale.label("wrapper.newPrivateMessage")}</b>
+      <div>{Locale.label("wrapper.searchForPerson")}</div>
 
       <TextField fullWidth label="Name" id="searchText" data-cy="search-input" name="searchText" type="text" placeholder="Name" value={searchText} onChange={handleChange}
         onKeyDown={(e) => {e.stopPropagation()}}
-        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> }}
       />
       <br />
       <Table id="smallPeopleTable" size="small">
@@ -95,7 +95,7 @@ export const NewPrivateMessage: React.FC<Props> = (props) => {
         <span style={{ float: "right" }}>
           <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
         </span>
-        <b>New Private Message</b>
+        <b>{Locale.label("wrapper.newPrivateMessage")}</b>
         <div>To: {selectedPerson.name.display}</div>
         <AddNote context={props.context} conversationId={null} onUpdate={handleNoteAdded} createConversation={createConversation} />
       </div>

package/src/components/wrapper/NotificationMenu.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Menu, Icon, Button, Box, Tabs, Tab } from "@mui/material";
 import { UserContextInterface } from "@churchapps/helpers";
 import { PrivateMessages } from "./PrivateMessages";
-import { TabPanel } from "../TabPanel";
 import { Notifications } from "./Notifications";
 import { Badge } from "@mui/base";
 

package/src/components/wrapper/PrivateMessageDetails.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { SmallButton } from "../SmallButton";
 import { PrivateMessageInterface, UserContextInterface } from "@churchapps/helpers";
 import { Notes } from "../notes/Notes";
+import { Locale } from "../../helpers";
 
 interface Props {
   context: UserContextInterface;
@@ -16,7 +17,7 @@ export const PrivateMessageDetails: React.FC<Props> = (props) => (
       <span style={{ float: "right" }}>
         <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
       </span>
-      Chat with {props.privateMessage.person.name.display}
+      {Locale.label("wrapper.chatWith")} {props.privateMessage.person.name.display}
     </div>
     <Notes maxHeight={"50vh"} context={props.context} conversationId={props.privateMessage.conversationId} noDisplayBox={true} refreshKey={props.refreshKey} />
   </>

package/src/components/wrapper/UserMenu.tsx

@@ -1,15 +1,14 @@
 import React from "react";
 import { ApiHelper } from "../../helpers/ApiHelper";
 import { UserHelper } from "../../helpers/UserHelper";
-import { Avatar, Menu, Typography, Icon, Button, Box, Tabs, Tab, Divider } from "@mui/material";
+import { Avatar, Menu, Typography, Icon, Button, Box } from "@mui/material";
 import { NavItem, AppList } from ".";
 import { LoginUserChurchInterface, UserContextInterface } from "@churchapps/helpers";
 import { ChurchList } from "./ChurchList";
 import { SupportModal } from "../SupportModal";
 import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
 import { TabPanel } from "../TabPanel";
-import { NavLink } from "react-router-dom";
-
+import { Locale } from "../../helpers";
 
 interface Props {
   userName: string;
@@ -41,13 +40,13 @@ export const UserMenu: React.FC<Props> = (props) => {
     const jwt = ApiHelper.getConfig("MembershipApi").jwt;
     const churchId = UserHelper.currentUserChurch.church.id;
     let result: JSX.Element[] = [];
-    if (props.appName === "CHUMS") result.push(<NavItem url={"/profile"} key="/profile" label="Profile" icon="person" router={props.router} />);
-    else result.push(<NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}&returnUrl=/profile`} key="/profile" label="Profile" icon="person" external={true} router={props.router} />);
-    result.push(<NavItem url="/logout" label="Logout" icon="logout" key="/logout" router={props.router} />);
-    result.push(<NavItem label="Support" key="Support" icon="help" onClick={() => { setShowSupport(true) }} />);
+    if (props.appName === "CHUMS") result.push(<NavItem url={"/profile"} key="/profile" label={Locale.label("wrapper.profile")} icon="person" router={props.router} />);
+    else result.push(<NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}&returnUrl=/profile`} key="/profile" label={Locale.label("wrapper.profile")} icon="person" external={true} router={props.router} />);
+    result.push(<NavItem url="/logout" label={Locale.label("wrapper.logout")} icon="logout" key="/logout" router={props.router} />);
+    result.push(<NavItem label="Support" key={Locale.label("wrapper.support")} icon="help" onClick={() => { setShowSupport(true) }} />);
     result.push(<div style={{borderTop:"1px solid #CCC", paddingTop:2, paddingBottom:2}}></div>)
-    result.push(<NavItem label="Switch App" key="Switch App" icon="apps" onClick={() => { setTabIndex(1); }} />);
-    if (props.userChurches.length > 1) result.push(<NavItem label="Switch Church" key="Switch Church" icon="church" onClick={() => { setTabIndex(2); }} />);
+    result.push(<NavItem label="Switch App" key={Locale.label("wrapper.switchApp")} icon="apps" onClick={() => { setTabIndex(1); }} />);
+    if (props.userChurches.length > 1) result.push(<NavItem label={Locale.label("wrapper.switchChurch")} key="Switch Church" icon="church" onClick={() => { setTabIndex(2); }} />);
     return result;
   }