@churchapps/apphelper 0.2.30 → 0.2.32

package/src/donationComponents/DonationPage.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loadStripe, Stripe } from "@stripe/stripe-js";
 import { DonationForm, RecurringDonations, PaymentMethods } from "./components";
 import { DisplayBox, Loading } from "../components";
-import { ApiHelper, DateHelper, UniqueIdHelper, CurrencyHelper } from "../helpers";
+import { ApiHelper, DateHelper, UniqueIdHelper, CurrencyHelper, Locale } from "../helpers";
 import { DonationInterface, PersonInterface, StripePaymentMethod, ChurchInterface } from "@churchapps/helpers";
 import { Link } from "react-router-dom"
 import { Table, TableBody, TableRow, TableCell, TableHead, Alert } from "@mui/material"
@@ -66,7 +66,7 @@ export const DonationPage: React.FC<Props> = (props) => {
     let rows: JSX.Element[] = [];
 
     if (donations.length === 0) {
-      rows.push(<TableRow key="0"><TableCell>Donations will appear once a donation has been entered.</TableCell></TableRow>);
+      rows.push(<TableRow key="0"><TableCell>{Locale.label("donation.page.willAppear")}</TableCell></TableRow>);
       return rows;
     }
 
@@ -91,11 +91,11 @@ export const DonationPage: React.FC<Props> = (props) => {
     if (donations.length > 0) {
       rows.push(
         <TableRow key="header" sx={{textAlign: "left"}}>
-          {appName !== "B1App" && <th>Batch</th>}
-          <th>Date</th>
-          <th>Method</th>
-          <th>Fund</th>
-          <th>Amount</th>
+          {appName !== "B1App" && <th>{Locale.label("donation.page.bath")}</th>}
+          <th>{Locale.label("donation.page.date")}</th>
+          <th>{Locale.label("donation.page.method")}</th>
+          <th>{Locale.label("donation.page.fund")}</th>
+          <th>{Locale.label("donation.page.amount")}</th>
         </TableRow>
       );
     }

package/src/donationComponents/components/BankForm.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material"
 import { useStripe } from "@stripe/react-stripe-js";
 import { InputBox, ErrorMessages } from "../../components";
-import { ApiHelper } from "../../helpers";
+import { ApiHelper, Locale } from "../../helpers";
 import { PersonInterface, StripePaymentMethod, PaymentMethodInterface, StripeBankAccountInterface, StripeBankAccountUpdateInterface, StripeBankAccountVerifyInterface } from "@churchapps/helpers";
 
 interface Props { bank: StripePaymentMethod, showVerifyForm: boolean, customerId: string, person: PersonInterface, setMode: any, deletePayment: any, updateList: (message?: string) => void }
@@ -25,7 +25,7 @@ export const BankForm: React.FC<Props> = (props) => {
   }
 
   const createBank = async () => {
-    if (!bankAccount.routing_number || !bankAccount.account_number) setErrorMessage("Routing and account number are required.")
+    if (!bankAccount.routing_number || !bankAccount.account_number) setErrorMessage(Locale.label("donation.bankForm.validate.accountNumber"))
     else {
       await stripe.createToken("bank_account", bankAccount).then(response => {
         if (response?.error?.message) setErrorMessage(response.error.message);
@@ -35,7 +35,7 @@ export const BankForm: React.FC<Props> = (props) => {
           ApiHelper.post("/paymentmethods/addbankaccount", pm, "GivingApi").then(result => {
             if (result?.raw?.message) setErrorMessage(result.raw.message);
             else {
-              props.updateList("Bank account added. Verify your bank account to make a donation.");
+              props.updateList(Locale.label("donation.bankForm.added"));
               props.setMode("display");
             }
           });
@@ -46,7 +46,7 @@ export const BankForm: React.FC<Props> = (props) => {
   }
 
   const updateBank = () => {
-    if (bankAccount.account_holder_name === "") setErrorMessage("Account holder name is required.");
+    if (bankAccount.account_holder_name === "") setErrorMessage(Locale.label("donation.bankForm.validate.holderName"));
     else {
       let bank = { ...updateBankData };
       bank.bankData.account_holder_name = bankAccount.account_holder_name;
@@ -54,7 +54,7 @@ export const BankForm: React.FC<Props> = (props) => {
       ApiHelper.post("/paymentmethods/updatebank", bank, "GivingApi").then(response => {
         if (response?.raw?.message) setErrorMessage(response.raw.message);
         else {
-          props.updateList("Bank account updated.");
+          props.updateList(Locale.label("donation.bankForm.updated"));
           props.setMode("display");
         }
       });
@@ -68,7 +68,7 @@ export const BankForm: React.FC<Props> = (props) => {
       ApiHelper.post("/paymentmethods/verifyBank", verifyBankData, "GivingApi").then(response => {
         if (response?.raw?.message) setErrorMessage(response.raw.message);
         else {
-          props.updateList("Bank account verified.");
+          props.updateList(Locale.label("donation.bankForm.verified"));
           props.setMode("display");
         }
       });
@@ -103,13 +103,13 @@ export const BankForm: React.FC<Props> = (props) => {
   const getForm = () => {
     if (props.showVerifyForm) {
       return (<>
-        <p>Enter the two deposits you received in your account to finish verifying your bank account.</p>
+        <p>{Locale.label("donation.bankForm.twoDeposits")}</p>
         <Grid container columnSpacing={2}>
           <Grid item md={6} xs={12}>
-            <TextField fullWidth aria-label="amount1" label="First Deposit" name="amount1" placeholder="00" inputProps={{ maxLength: 2 }} onChange={handleVerify} onKeyPress={handleKeyPress} />
+            <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}>
-            <TextField fullWidth aria-label="amount2" label="Second Deposit" name="amount2" placeholder="00" inputProps={{ maxLength: 2 }} onChange={handleVerify} onKeyPress={handleKeyPress} />
+            <TextField fullWidth aria-label="amount2" label={Locale.label("donation.bankForm.secondDeposit")} name="amount2" placeholder="00" inputProps={{ maxLength: 2 }} onChange={handleVerify} onKeyPress={handleKeyPress} />
           </Grid>
         </Grid>
       </>);
@@ -119,10 +119,10 @@ export const BankForm: React.FC<Props> = (props) => {
       if (!props.bank.id) accountDetails = (
         <Grid container spacing={3}>
           <Grid item md={6} xs={12} style={{ marginBottom: "20px" }}>
-            <TextField fullWidth label="Routing Number" type="number" name="routing_number" aria-label="routing-number" placeholder="Routing Number" className="form-control" onChange={handleChange} />
+            <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" }}>
-            <TextField fullWidth label="Account Number" type="number" name="account_number" aria-label="account-number" placeholder="Account Number" className="form-control" onChange={handleChange} />
+            <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>
       );
@@ -133,10 +133,10 @@ export const BankForm: React.FC<Props> = (props) => {
           </Grid>
           <Grid item md={6} xs={12} style={{ marginBottom: "20px" }}>
             <FormControl fullWidth>
-              <InputLabel>Account Holder Type</InputLabel>
-              <Select label="Account Holder Type" name="account_holder_type" aria-label="account-holder-type" value={bankAccount.account_holder_type} onChange={handleChange}>
-                <MenuItem value="individual">Individual</MenuItem>
-                <MenuItem value="company">Company</MenuItem>
+              <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}>
+                <MenuItem value="individual">{Locale.label("donation.bankForm.individual")}</MenuItem>
+                <MenuItem value="company">{Locale.label("donation.bankForm.company")}</MenuItem>
               </Select>
             </FormControl>
           </Grid>
@@ -150,7 +150,7 @@ export const BankForm: React.FC<Props> = (props) => {
     <InputBox headerIcon="volunteer_activism" headerText={getHeaderText()} ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} saveFunction={showSave ? handleSave : saveDisabled} deleteFunction={props.bank.id && !props.showVerifyForm ? handleDelete : undefined}>
       {errorMessage && <ErrorMessages errors={[errorMessage]}></ErrorMessages>}
       <div>
-        {!props.bank.id && <p>Bank accounts will need to be verified before making any donations. Your account will receive two small deposits in approximately 1-3 business days. You will need to enter those deposit amounts to finish verifying your account by selecting the verify account link next to your bank account under the payment methods section.</p>}
+        {!props.bank.id && <p>{Locale.label("donation.bankForm.needVerified")}</p>}
         {getForm()}
       </div>
     </InputBox>

package/src/donationComponents/components/CardForm.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { Grid, TextField } from "@mui/material"
 import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
 import { InputBox, ErrorMessages } from "../../components";
-import { ApiHelper } from "../../helpers";
+import { ApiHelper, Locale } from "../../helpers";
 import { PersonInterface, StripePaymentMethod, PaymentMethodInterface, StripeCardUpdateInterface } from "@churchapps/helpers";
 
 interface Props { card: StripePaymentMethod, customerId: string, person: PersonInterface, setMode: any, deletePayment: any, updateList: (message: string) => void }
@@ -55,7 +55,7 @@ export const CardForm: React.FC<Props> = (props) => {
           setShowSave(true);
         }
         else {
-          props.updateList("Card added successfully");
+          props.updateList(Locale.label("donation.cardForm.added"));
           props.setMode("display");
         }
       });
@@ -71,7 +71,7 @@ export const CardForm: React.FC<Props> = (props) => {
           setShowSave(true);
         }
         else {
-          props.updateList("Card updated successfully");
+          props.updateList(Locale.label("donation.cardForm.updated"));
           props.setMode("display");
         }
       });
@@ -80,7 +80,7 @@ export const CardForm: React.FC<Props> = (props) => {
 
   const getHeaderText = () => props.card.id
     ? `${props.card.name.toUpperCase()} ****${props.card.last4}`
-    : "Add New Card"
+    : Locale.label("donation.cardForm.addNew")
 
   return (
     <InputBox headerIcon="volunteer_activism" headerText={getHeaderText()} ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} saveFunction={showSave ? handleSave : saveDisabled} deleteFunction={props.card.id ? handleDelete : undefined}>
@@ -90,10 +90,10 @@ export const CardForm: React.FC<Props> = (props) => {
           ? <CardElement options={formStyling} />
           : <Grid container spacing={3}>
             <Grid item md={6} xs={12}>
-              <TextField fullWidth aria-label="card-exp-month" label="Card Expiration Month:" name="exp_month" value={cardUpdate.cardData.card.exp_month} placeholder="MM" inputProps={{ maxLength: 2 }} onChange={handleChange} onKeyPress={handleKeyPress} />
+              <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}>
-              <TextField fullWidth aria-label="card-exp-year" label="Card Expiration Year:" name="exp_year" value={cardUpdate.cardData.card.exp_year} placeholder="YY" inputProps={{ maxLength: 2 }} onChange={handleChange} onKeyPress={handleKeyPress} />
+              <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

@@ -4,7 +4,7 @@ import { Stripe } from "@stripe/stripe-js";
 import { InputBox, ErrorMessages } from "../../components";
 import { FundDonations } from ".";
 import { DonationPreviewModal } from "../modals/DonationPreviewModal";
-import { ApiHelper, CurrencyHelper, DateHelper } from "../../helpers";
+import { ApiHelper, CurrencyHelper, DateHelper, Locale } from "../../helpers";
 import { PersonInterface, StripePaymentMethod, StripeDonationInterface, FundDonationInterface, FundInterface, ChurchInterface } from "@churchapps/helpers";
 import { Grid, InputLabel, MenuItem, Select, TextField, FormControl, Button, SelectChangeEvent, FormControlLabel, Checkbox, FormGroup, Typography } from "@mui/material"
 import { DonationHelper } from "../../helpers";
@@ -102,7 +102,7 @@ export const DonationForm: React.FC<Props> = (props) => {
 
   const handleCancel = () => { setDonationType(null); }
   const handleSave = () => {
-    if (donation.amount < .5) setErrorMessage("Donation amount must be greater than $0.50");
+    if (donation.amount < .5) setErrorMessage(Locale.label("donation.donationForm.tooLow"));
     else setShowDonationPreviewModal(true);
   }
   const handleDonationSelect = (type: string) => {
@@ -130,7 +130,7 @@ export const DonationForm: React.FC<Props> = (props) => {
     }
     if (results?.raw?.message) {
       setShowDonationPreviewModal(false);
-      setErrorMessage("Error: " + results?.raw?.message);
+      setErrorMessage(Locale.label("donation.common.error") + ": " + results?.raw?.message);
     }
   }
 
@@ -167,13 +167,13 @@ export const DonationForm: React.FC<Props> = (props) => {
   else return (
     <>
       <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="Donate" ariaLabelSave="save-button" cancelFunction={donationType ? handleCancel : undefined} saveFunction={donationType ? handleSave : undefined} saveText="Preview Donation">
+      <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}>
-            <Button aria-label="single-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "once" ? "contained" : "outlined"} onClick={() => handleDonationSelect("once")}>Make a Donation</Button>
+            <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}>
-            <Button aria-label="recurring-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "recurring" ? "contained" : "outlined"} onClick={() => handleDonationSelect("recurring")}>Make a Recurring Donation</Button>
+            <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
@@ -181,8 +181,8 @@ export const DonationForm: React.FC<Props> = (props) => {
             <Grid container spacing={3}>
               <Grid item md={12} xs={12}>
                 <FormControl fullWidth>
-                  <InputLabel>Method</InputLabel>
-                  <Select label="Method" name="method" aria-label="method" value={donation.id} className="capitalize" onChange={handleChange}>
+                  <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}>
                     {props.paymentMethods.map((paymentMethod: any, i: number) => <MenuItem key={i} value={paymentMethod.id}>{paymentMethod.name} ****{paymentMethod.last4}</MenuItem>)}
                   </Select>
                 </FormControl>
@@ -191,17 +191,17 @@ export const DonationForm: React.FC<Props> = (props) => {
             {donationType === "recurring"
               && <Grid container spacing={3} style={{marginTop:10}}>
                 <Grid item md={6} xs={12}>
-                  <TextField fullWidth name="date" type="date" aria-label="date" label="Start Date" value={DateHelper.formatHtml5Date(new Date(donation.billing_cycle_anchor))} onChange={handleChange} onKeyDown={handleKeyDown} />
+                  <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}>
                   <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>
@@ -210,21 +210,21 @@ export const DonationForm: React.FC<Props> = (props) => {
             <div className="form-group">
               {funds && fundDonations
                 && <>
-                  <h4>Fund</h4>
+                  <h4>{Locale.label("donation.donationForm.fund")}</h4>
                   <FundDonations fundDonations={fundDonations} funds={funds} updatedFunction={handleFundDonationsChange} />
                 </>
               }
               {fundsTotal > 0
                 && <>
-                  {(gateway && gateway.payFees === true) ? <Typography fontSize={14} fontStyle="italic">*Transaction fees of {CurrencyHelper.formatCurrency(transactionFee)} are applied.</Typography> : (
+                  {(gateway && gateway.payFees === true) ? <Typography fontSize={14} fontStyle="italic">*{Locale.label("donation.donationForm.fees").replace("{}", CurrencyHelper.formatCurrency(transactionFee))}</Typography> : (
                     <FormGroup>
-                      <FormControlLabel control={<Checkbox />} name="transaction-fee" label={`I'll generously add ${CurrencyHelper.formatCurrency(transactionFee)} to cover the transaction fees so you can keep 100% of my donation.`} onChange={handleCheckChange} />
+                      <FormControlLabel control={<Checkbox />} name="transaction-fee" label={Locale.label("donation.donationForm.cover").replace("{}", CurrencyHelper.formatCurrency(transactionFee))} onChange={handleCheckChange} />
                     </FormGroup>
                   )}
-                  <p>Total Donation Amount: ${total}</p>
+                  <p>{Locale.label("donation.donationForm.total")}: ${total}</p>
                 </>
               }
-              <TextField fullWidth label="Notes" multiline aria-label="note" name="notes" value={donation.notes || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
+              <TextField fullWidth label={Locale.label("donation.donationForm.notes")} multiline aria-label="note" name="notes" value={donation.notes || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
             </div>
             {errorMessage && <ErrorMessages errors={[errorMessage]}></ErrorMessages>}
           </div>

package/src/donationComponents/components/FundDonation.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FundDonationInterface, FundInterface } from "@churchapps/helpers";
 import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material"
+import { Locale } from "../../helpers";
 
 interface Props {
   fundDonation: FundDonationInterface,
@@ -33,12 +34,12 @@ export const FundDonation: React.FC<Props> = (props) => {
   return (
     <Grid container spacing={3}>
       <Grid item md={6} xs={12}>
-        <TextField fullWidth name="amount" label="Amount" type="number" aria-label="amount" lang="en-150" value={props.fundDonation.amount || ""} onChange={handleChange} />
+        <TextField fullWidth name="amount" label={Locale.label("donation.fundDonations.amount")} type="number" aria-label="amount" lang="en-150" value={props.fundDonation.amount || ""} onChange={handleChange} />
       </Grid>
       <Grid item md={6} xs={12}>
         <FormControl fullWidth>
-          <InputLabel>Fund</InputLabel>
-          <Select fullWidth label="Fund" name="fund" aria-label="fund" value={props.fundDonation.fundId} onChange={handleChange}>
+          <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}>
             {getOptions()}
           </Select>
         </FormControl>

package/src/donationComponents/components/FundDonations.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FundDonation } from ".";
 import { FundDonationInterface, FundInterface } from "@churchapps/helpers";
+import { Locale } from "../../helpers";
 
 interface Props { fundDonations: FundDonationInterface[], funds: FundInterface[], updatedFunction: (fundDonations: FundDonationInterface[]) => void }
 
@@ -32,7 +33,7 @@ export const FundDonations: React.FC<Props> = (props) => {
   return (
     <>
       {getRows()}
-      <a href="about:blank" aria-label="add-fund-donation" className="text-decoration" style={{ display: "block", marginBottom: "15px" }} onClick={addRow}>Add more</a>
+      <a href="about:blank" aria-label="add-fund-donation" className="text-decoration" style={{ display: "block", marginBottom: "15px" }} onClick={addRow}>{Locale.label("donation.fundDonations.addMore")}</a>
     </>
   );
 }

package/src/donationComponents/components/NonAuthDonationInner.tsx

@@ -2,7 +2,7 @@ import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import React, { useState, useRef } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
 import { ErrorMessages, InputBox } from "../../components";
-import { ApiHelper, DateHelper, CurrencyHelper } from "../../helpers";
+import { ApiHelper, DateHelper, CurrencyHelper, Locale } from "../../helpers";
 import { FundDonationInterface, FundInterface, PersonInterface, StripeDonationInterface, StripePaymentMethod, UserInterface, ChurchInterface } from "@churchapps/helpers";
 import { FundDonations } from "./FundDonations";
 import { Grid, Alert, TextField, Button, FormControl, InputLabel, Select, MenuItem, PaperProps, FormGroup, FormControlLabel, Checkbox, Typography } from "@mui/material"
@@ -140,12 +140,12 @@ export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, s
 
   const validate = () => {
     const result = [];
-    if (!firstName) result.push("Please enter your first name.");
-    if (!lastName) result.push("Please enter your last name.");
-    if (!email) result.push("Please enter your email address.");
-    if (fundsTotal === 0) result.push("Amount cannot be $0");
+    if (!firstName) result.push(Locale.label("donation.donationForm.validate.firstName"));
+    if (!lastName) result.push(Locale.label("donation.donationForm.validate.lastName"));
+    if (!email) result.push(Locale.label("donation.donationForm.validate.email"));
+    if (fundsTotal === 0) result.push(Locale.label("donation.donationForm.validate.amount"));
     if (result.length === 0) {
-      if (!email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) result.push("Please enter a valid email address");  //eslint-disable-line
+      if (!email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) result.push(Locale.label("donation.donationForm.validate.validEmail"));  //eslint-disable-line
     }
     //Todo - make sure the account doesn't exist. (loadOrCreate?)
     setErrors(result);
@@ -186,7 +186,7 @@ export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, s
   const getFundList = () => {
     if (funds) return (<>
       <hr />
-      <h4>Funds</h4>
+      <h4>{Locale.label("donation.donationForm.funds")}</h4>
       <FundDonations fundDonations={fundDonations} funds={funds} updatedFunction={handleFundDonationsChange} />
     </>);
   }
@@ -195,25 +195,25 @@ export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, s
 
   React.useEffect(() => { gateway && gateway.payFees === true && handleAutoPayFee() }, [fundDonations]);
 
-  if (donationComplete) return <Alert severity="success">Thank you for your donation.</Alert>
+  if (donationComplete) return <Alert severity="success">{Locale.label("donation.donationForm.thankYou")}</Alert>
   else return (
     <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}>
-          <Button aria-label="single-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "once" ? "contained" : "outlined"} onClick={() => setDonationType("once")}>Make a Donation</Button>
+          <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}>
-          <Button aria-label="recurring-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "recurring" ? "contained" : "outlined"} onClick={() => setDonationType("recurring")}>Make a Recurring Donation</Button>
+          <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}>
-          <TextField fullWidth label="First Name" name="firstName" value={firstName} onChange={handleChange} />
+          <TextField fullWidth label={Locale.label("person.firstName")} name="firstName" value={firstName} onChange={handleChange} />
         </Grid>
         <Grid item md={6} xs={12}>
-          <TextField fullWidth label="Last Name" name="lastName" value={lastName} onChange={handleChange} />
+          <TextField fullWidth label={Locale.label("person.lastName")} name="lastName" value={lastName} onChange={handleChange} />
         </Grid>
         <Grid item md={6} xs={12}>
-          <TextField fullWidth label="Email" name="email" value={email} onChange={handleChange} />
+          <TextField fullWidth label={Locale.label("person.email")} name="email" value={email} onChange={handleChange} />
         </Grid>
         <Grid item md={6} xs={12}>
           <ReCAPTCHA sitekey={props.recaptchaSiteKey} ref={captchaRef} onChange={handleCaptchaChange} />
@@ -226,18 +226,18 @@ export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, s
         && <Grid container spacing={3} style={{marginTop:0}}>
           <Grid item md={6} xs={12}>
             <FormControl fullWidth>
-              <InputLabel>Frequency</InputLabel>
+              <InputLabel>{Locale.label("donation.donationForm.frequency")}</InputLabel>
               <Select label="Frequency" name="interval" aria-label="interval" value={interval} onChange={(e) => {setInterval(e.target.value) }}>
-                <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>
+                <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>
           <Grid item md={6} xs={12}>
-            <TextField fullWidth name="startDate" type="date" aria-label="startDate" label="Start Date" value={DateHelper.formatHtml5Date(new Date(startDate))} onChange={handleChange} />
+            <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>
       }
@@ -246,10 +246,10 @@ export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, s
         {fundsTotal > 0
           && <>
             {(gateway && gateway.payFees === true)
-              ? <Typography fontSize={14} fontStyle="italic">*Transaction fees of {CurrencyHelper.formatCurrency(transactionFee)} are applied.</Typography>
+              ? <Typography fontSize={14} fontStyle="italic">*{Locale.label("donation.donationForm.fees").replace("{}", CurrencyHelper.formatCurrency(transactionFee))}</Typography>
               : (
                 <FormGroup>
-                  <FormControlLabel control={<Checkbox />} name="transaction-fee" label={`I'll generously add ${CurrencyHelper.formatCurrency(transactionFee)} to cover the transaction fees so you can keep 100% of my donation.`} onChange={handleCheckChange} />
+                  <FormControlLabel control={<Checkbox />} name="transaction-fee" label={Locale.label("donation.donationForm.cover").replace("{}", CurrencyHelper.formatCurrency(transactionFee))} onChange={handleCheckChange} />
                 </FormGroup>
               )}
             <p>Total Donation Amount: ${total}</p>

package/src/donationComponents/components/PaymentMethods.tsx

@@ -3,7 +3,7 @@ import { Stripe } from "@stripe/stripe-js";
 import { Elements } from "@stripe/react-stripe-js";
 import { CardForm, BankForm } from ".";
 import { DisplayBox, Loading } from "../../components";
-import { ApiHelper, UserHelper } from "../../helpers";
+import { ApiHelper, Locale, UserHelper } from "../../helpers";
 import { PersonInterface, StripePaymentMethod, Permissions } from "@churchapps/helpers";
 import { Icon, Table, TableBody, TableCell, TableRow, IconButton, Menu, MenuItem } from "@mui/material";
 
@@ -22,11 +22,11 @@ export const PaymentMethods: React.FC<Props> = (props) => {
   }
 
   const handleDelete = async () => {
-    let confirmed = window.confirm("Are you sure you want to delete this payment method?");
+    let confirmed = window.confirm(Locale.label("donation.paymentMethods.confirmDelete"));
     if (confirmed) {
       ApiHelper.delete("/paymentmethods/" + editPaymentMethod.id + "/" + props.customerId, "GivingApi").then(() => {
         setMode("display");
-        props.dataUpdate("Payment method deleted.");
+        props.dataUpdate(Locale.label("donation.paymentMethods.deleted"));
       })
     }
   }
@@ -62,10 +62,10 @@ export const PaymentMethods: React.FC<Props> = (props) => {
           onClose={handleClose}
         >
           <MenuItem aria-label="add-card" onClick={handleEdit(new StripePaymentMethod({ type: "card" }))}>
-            <Icon sx={{mr: "3px"}}>credit_card</Icon> Add Card
+            <Icon sx={{mr: "3px"}}>credit_card</Icon> {Locale.label("donation.paymentMethods.addCard")}
           </MenuItem>
           <MenuItem aria-label="add-bank" onClick={handleEdit(new StripePaymentMethod({ type: "bank" }))}>
-            <Icon sx={{mr: "3px"}}>account_balance</Icon> Add Bank
+            <Icon sx={{mr: "3px"}}>account_balance</Icon> {Locale.label("donation.paymentMethods.addBank")}
           </MenuItem>
         </Menu>
       </>
@@ -91,7 +91,7 @@ export const PaymentMethods: React.FC<Props> = (props) => {
       rows.push(
         <TableRow key={method.id}>
           <TableCell className="capitalize">{getPMIcon(method.type)} {method.name + " ****" + method.last4}</TableCell>
-          <TableCell>{method?.status === "new" && <a href="about:blank" aria-label="verify-account" onClick={handleEdit(method, true)}>Verify Account</a>}</TableCell>
+          <TableCell>{method?.status === "new" && <a href="about:blank" aria-label="verify-account" onClick={handleEdit(method, true)}>{Locale.label("donation.paymentMethods.verify")}</a>}</TableCell>
           <TableCell align="right">{getEditOptions(method)}</TableCell>
         </TableRow>
       );
@@ -110,7 +110,7 @@ export const PaymentMethods: React.FC<Props> = (props) => {
         </Table>
       );
     }
-    else return <div>No payment methods. Add a payment method to make a donation.</div>
+    else return <div>{Locale.label("donation.paymentMethods.noMethod")}</div>
   }
 
   const EditForm = () => (

package/src/donationComponents/components/RecurringDonations.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { DisplayBox } from "../../components";
-import { ApiHelper, UserHelper, CurrencyHelper, DateHelper } from "../../helpers";
+import { ApiHelper, UserHelper, CurrencyHelper, DateHelper, Locale } from "../../helpers";
 import { Permissions, SubscriptionInterface } from "@churchapps/helpers";
 import { RecurringDonationsEdit } from ".";
 import { Icon, Table, TableBody, TableCell, TableRow, TableHead } from "@mui/material";
@@ -41,7 +41,7 @@ export const RecurringDonations: React.FC<Props> = (props) => {
 
   const getPaymentMethod = (sub: SubscriptionInterface) => {
     const pm = props.paymentMethods.find((pm: any) => pm.id === (sub.default_payment_method || sub.default_source));
-    if (!pm) return <span style={{ color: "red" }}>Payment method not found.</span>;
+    if (!pm) return <span style={{ color: "red" }}>{Locale.label("donation.recurring.notFound")}</span>;
     return `${pm.name} ****${pm.last4}`;
   }
 
@@ -75,7 +75,7 @@ export const RecurringDonations: React.FC<Props> = (props) => {
 
   const getTableHeader = () => {
     let result: JSX.Element[] = [];
-    result.push(<TableRow key="header" sx={{textAlign: "left"}}><TableCell><b>Start Date</b></TableCell><TableCell><b>Amount</b></TableCell><TableCell><b>Interval</b></TableCell><TableCell><b>Payment Method</b></TableCell>{props?.paymentMethods?.length > 0 && <TableCell></TableCell>}</TableRow>);
+    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;
   }
 
@@ -87,7 +87,7 @@ export const RecurringDonations: React.FC<Props> = (props) => {
         <TableRow key={sub.id}>
           <TableCell>{DateHelper.prettyDate(new Date(sub.billing_cycle_anchor * 1000))}</TableCell>
           <TableCell>{getFunds(sub)}</TableCell>
-          <TableCell>Every {getInterval(sub)}</TableCell>
+          <TableCell>{Locale.label("donation.recurring.every")} {getInterval(sub)}</TableCell>
           <TableCell className="capitalize">{getPaymentMethod(sub)}</TableCell>
           <TableCell align="right">{getEditOptions(sub)}</TableCell>
         </TableRow>