add: support church field in settings (#300)

public/locales/en.json

@@ -730,6 +730,12 @@
 			"none": "None",
 			"noGroups": "No Groups available"
 		},
+		"supportContactSettingsEdit": {
+			"supportContact": "Support Contact",
+			"forceMsg": "This link will be used by users to contact the church",
+			"link": "Link",
+			"linkHelperText": "It must be either church's email or a link to the church's contact form"
+		},
 		"imageEditor": {
 			"crop": "Crop",
 			"upload": "Upload"

src/settings/components/ChurchSettingsEdit.tsx

@@ -4,6 +4,7 @@ import { GivingSettingsEdit } from "./GivingSettingsEdit";
 import { TextField, Grid } from "@mui/material";
 import { DomainSettingsEdit } from "./DomainSettingsEdit";
 import { DirectoryApproveSettingsEdit } from "./DirectoryApproveSettingsEdit";
+import { SupportContactSettingsEdit } from "./SupportContactSettingsEdit";
 
 interface Props { church: ChurchInterface, updatedFunction: () => void }
 
@@ -89,6 +90,7 @@ export const ChurchSettingsEdit: React.FC<Props> = (props) => {
         </Grid>
       </Grid>
       <TextField fullWidth name="country" label={Locale.label("person.country")} value={church?.country || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
+      <SupportContactSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
       <DirectoryApproveSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger}  />
       {giveSection()}
       <DomainSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />

src/settings/components/SupportContactSettingsEdit.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from "react";
+import { Icon, Stack, TextField, Tooltip, Typography } from "@mui/material";
+import { GenericSettingInterface, UniqueIdHelper, ApiHelper, Locale } from "@churchapps/apphelper";
+
+interface Props { churchId: string; saveTrigger: Date | null; }
+
+export const SupportContactSettingsEdit: React.FC<Props> = (props) => {
+  const [value, setValue] = useState<string>("");
+  const [setting, setSetting] = useState<GenericSettingInterface>(null);
+
+  const save = () => {
+    const s: GenericSettingInterface = setting === null ? { churchId: props.churchId, public: 1, keyName: "supportContact" } : setting;
+    s.value = value;
+    ApiHelper.post("/settings", [s], "MembershipApi");
+  };
+
+  const checkSave = () => {
+    if (props.saveTrigger !== null) save();
+  };
+
+  const loadData = async () => {
+    const publicSettings = await ApiHelper.get("/settings", "MembershipApi");
+    const contactSetting = publicSettings.filter((c: GenericSettingInterface) => c.keyName === "supportContact");
+    if (contactSetting.length > 0) {
+      setSetting(contactSetting[0]);
+      setValue(contactSetting[0].value);
+    }
+  };
+
+  useEffect(() => { if (!UniqueIdHelper.isMissing(props.churchId)) loadData(); }, [props.churchId]); //eslint-disable-line
+  useEffect(checkSave, [props.saveTrigger]); //eslint-disable-line
+
+  return (
+    <div style={{ marginTop: 10, marginBottom: 10 }}>
+      <Stack direction="row" alignItems="center">
+        <Typography>{Locale.label("settings.supportContactSettingsEdit.supportContact")}</Typography>
+        <Tooltip arrow title={Locale.label("settings.supportContactSettingsEdit.forceMsg")}>
+          <Icon fontSize="small" sx={{ cursor: "pointer", color: "#757575", paddingLeft: "2px" }}>help</Icon>
+        </Tooltip>
+      </Stack>
+      <TextField
+        fullWidth
+        name="supportContact"
+        label={Locale.label("settings.supportContactSettingsEdit.link")}
+        value={value || ""}
+        onChange={(e) => { e.preventDefault(); setValue(e.target.value); }}
+        helperText={Locale.label("settings.supportContactSettingsEdit.linkHelperText")}
+      />
+    </div>
+  );
+};