add: tax deductible to funds (#293)

* add: tax deductible to funds

* localize tax deductible

* update churchapps/apphelper

Author: Himali-Malvawala

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@churchapps/apphelper": "0.2.37",
+    "@churchapps/apphelper": "0.2.42",
     "@mui/icons-material": "^5.14.7",
     "@mui/material": "^5.14.7",
     "@types/react-cropper": "^1.3.2",

package.json

@@ -133,7 +133,10 @@
 		"fundEdit": {
 			"confirmMsg": "Are you sure you wish to permanently delete this batch and all donations within it?",
 			"edit": "Edit Fund",
-			"errBlank": "Enter a fund name"
+			"errBlank": "Enter a fund name",
+			"taxDeductible": "Tax Deductible",
+			"trackDonations": "Tracks donations.",
+			"trackNonDonations": "Tracks non-donation transactions like camp registrations, tshirts, event tickets, etc."
 		},
 		"funds": {
 			"fund": "Funds",

public/locales/en.json

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { ApiHelper, InputBox, FundInterface, ErrorMessages, Locale } from "@churchapps/apphelper";
-import { TextField } from "@mui/material";
+import { Checkbox, FormControlLabel, TextField, Typography } from "@mui/material";
 
 interface Props { fund: FundInterface, updatedFunction: () => void }
 export const FundEdit: React.FC<Props> = (props) => {
-  const [fund, setFund] = useState<FundInterface>({ id: "", name: "" });
+  const [fund, setFund] = useState<FundInterface>({ id: "", name: "", taxDeductible: true });
   const [errors, setErrors] = useState<string[]>([]);
 
   const handleCancel = () => props.updatedFunction();
@@ -31,7 +31,16 @@ export const FundEdit: React.FC<Props> = (props) => {
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let f = { ...fund };
-    f.name = e.target.value;
+    switch (e.target.name) {
+      case "fundName":
+        f.name = e.target.value;
+        break;
+      case "taxDeductible":
+        f.taxDeductible = e.target.checked;
+        break;
+      default:
+        break;
+    }
     setFund(f);
   }
 
@@ -41,6 +50,8 @@ export const FundEdit: React.FC<Props> = (props) => {
     <InputBox id="fundsBox" headerIcon="volunteer_activism" headerText={Locale.label("common.edit")} cancelFunction={handleCancel} saveFunction={handleSave} deleteFunction={(fund.id === "") ? undefined : handleDelete} help="chums/giving">
       <ErrorMessages errors={errors} />
       <TextField fullWidth name="fundName" label={Locale.label("common.name")} value={fund.name} onChange={handleChange} onKeyDown={handleKeyDown} />
+      <FormControlLabel control={<Checkbox sx={{ marginLeft: "5px" }} checked={fund.taxDeductible} onChange={handleChange} name="taxDeductible" />} label={Locale.label("donations.fundEdit.taxDeductible")} />
+      <Typography sx={{ fontStyle: "italic", fontSize: "12px", marginLeft: "5px" }}>{fund.taxDeductible ? Locale.label("donations.fundEdit.trackDonations") : Locale.label("donations.fundEdit.trackNonDonations")}</Typography>
     </InputBox>
 
   );

src/donations/components/FundEdit.tsx

@@ -17,7 +17,7 @@ export const Funds: React.FC = () => {
   }
   const handleFundUpdated = () => { loadData(); setEditFund(null); }
   const getEditSection = () => {
-    if (UserHelper.checkAccess(Permissions.givingApi.donations.edit)) return (<SmallButton onClick={() => { setEditFund({ id: "", name: "" }) }} icon="add" />);
+    if (UserHelper.checkAccess(Permissions.givingApi.donations.edit)) return (<SmallButton onClick={() => { setEditFund({ id: "", name: "", taxDeductible: true }) }} icon="add" />);
     else return null;
   }