feat: add payment field to forms

public/locales/en.json

@@ -198,14 +198,17 @@
 			"view": "View Only"
 		},
 		"formQuestionEdit": {
+			"amt": "Amount",
 			"ansReq": "Require an answer for this question",
 			"checkBox": "Checkbox",
 			"confirmMsg": "Are you sure you wish to permanently delete this question?",
 			"date": "Date",
 			"decNum": "Decimal",
 			"desc": "Description",
 			"fieldReq": "Field type is required.",
+			"fund": "Fund",
 			"multiChoice": "Multiple Choice",
+			"payment": "Payment",
 			"phoneNum": "Phone Number",
 			"plcOp": "Placeholder (optional)",
 			"prov": "Provider",

src/forms/components/FormQuestionEdit.tsx

@@ -2,6 +2,7 @@ import { Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select,
 import React, { useState } from "react";
 import { ChoicesEdit } from ".";
 import { useMountedState, QuestionInterface, ApiHelper, InputBox, UniqueIdHelper, ErrorMessages, Locale } from "@churchapps/apphelper";
+import { PaymentEdit } from "./PaymentEdit";
 
 interface Props {
   questionId: string,
@@ -43,6 +44,23 @@ export function FormQuestionEdit(props: Props) {
     setQuestion(q);
   }
 
+  const getChoices = (fieldType: string) => {
+    let result = <></>;
+    switch (fieldType) {
+      case "Multiple Choice":
+      case "Checkbox":
+        result = <ChoicesEdit question={question} updatedFunction={setQuestion} />;
+        break;
+      case "Payment":
+        result = <PaymentEdit question={question} updatedFunction={setQuestion} />;
+        break;
+      default:
+        result = <TextField fullWidth label={Locale.label("forms.formQuestionEdit.plcOp")} id="placeholder" type="text" name="placeholder" value={question.placeholder || ""} onChange={handleChange} />;
+        break;
+    }
+    return result;
+  }
+
   const validate = () => {
     const result = [];
     if (!question.title) result.push(Locale.label("forms.formQuestionEdit.questionReq"));
@@ -82,18 +100,15 @@ export function FormQuestionEdit(props: Props) {
           <MenuItem value="Text Area">{Locale.label("forms.formQuestionEdit.textArea")}</MenuItem>
           <MenuItem value="Multiple Choice">{Locale.label("forms.formQuestionEdit.multiChoice")}</MenuItem>
           <MenuItem value="Checkbox">{Locale.label("forms.formQuestionEdit.checkBox")}</MenuItem>
+          <MenuItem value="Payment">{Locale.label("forms.formQuestionEdit.payment")}</MenuItem>
         </Select>
       </FormControl>
 
       <TextField fullWidth label={Locale.label("common.title")} id="title" type="text" name="title" value={question.title || ""} onChange={handleChange} />
       <TextField fullWidth label={Locale.label("forms.formQuestionEdit.desc")} id="description" type="text" name="description" value={question.description || ""} onChange={handleChange} />
 
-      {
-        (question.fieldType === "Multiple Choice" || question.fieldType === "Checkbox")
-          ? <ChoicesEdit question={question} updatedFunction={setQuestion} />
-          : <TextField fullWidth label={Locale.label("forms.formQuestionEdit.plcOp")} id="placeholder" type="text" name="placeholder" value={question.placeholder || ""} onChange={handleChange} />
-      }
-      <FormControlLabel control={<Checkbox />} label={Locale.label("forms.formQuestionEdit.ansReq")} name="required" checked={!!question.required} onChange={handleCheckChange} />
+      {getChoices(question.fieldType)}
+      {question.fieldType !== "Payment" && <FormControlLabel control={<Checkbox />} label={Locale.label("forms.formQuestionEdit.ansReq")} name="required" checked={!!question.required} onChange={handleCheckChange} />}
     </InputBox>
   );
 }

src/forms/components/PaymentEdit.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { FormControl, InputAdornment, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material";
+import { ApiHelper, ArrayHelper, FundInterface, Locale, QuestionInterface } from "@churchapps/apphelper";
+
+interface Props { question: QuestionInterface, updatedFunction: (question: QuestionInterface) => void }
+
+export const PaymentEdit: React.FC<Props> = (props) => {
+  const [funds, setFunds] = React.useState([]);
+  const [fundId, setFundId] = React.useState(props.question.choices?.find((c: any) => c.text === "FundId")?.value || "");
+  const [amount, setAmount] = React.useState(props.question.choices?.find((c: any) => c.text === "Amount")?.value || 0);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    e.preventDefault();
+    switch(e.target.name) {
+      case "fundId": setFundId(e.target.value); break;
+      case "amount": setAmount(Number(e.target.value)); break;
+    }
+    let q = { ...props.question };
+    if (e.target.name === "fundId") {
+      let fundIndex = q.choices.findIndex((c: any) => c.text === "FundId");
+      q.choices[fundIndex].value = e.target.value;
+    }
+    else if (e.target.name === "amount") {
+      let amountIndex = q.choices.findIndex((c: any) => c.text === "Amount");
+      q.choices[amountIndex].value = e.target.value.toString();
+    }
+    props.updatedFunction(q);
+  }
+
+  React.useEffect(() => {
+    ApiHelper.get("/funds", "GivingApi").then((data: any) => {
+      const result = ArrayHelper.getAll(data, "taxDeductible", false);
+      setFunds(result);
+      if (fundId === "" && result.length > 0) {
+        setFundId(result[0].id);
+        let q = { ...props.question };
+        if (!q.choices) {
+          q.choices = [{ value: result[0].id, text: "FundId" }];
+          q.choices.push({ value: "0", text: "Amount" });
+        }
+        props.updatedFunction(q)
+      }
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return <>
+    <FormControl fullWidth>
+      <InputLabel id="fund">{Locale.label("forms.formQuestionEdit.fund")}</InputLabel>
+      <Select name="fundId" labelId="fund" label={Locale.label("forms.formQuestionEdit.fund")} value={fundId} onChange={handleChange}>
+        {funds.map((fund: FundInterface, index: number) => <MenuItem key={index} value={fund.id}>{fund.name}</MenuItem>)}
+      </Select>
+    </FormControl>
+    <TextField fullWidth name="amount" label={Locale.label("forms.formQuestionEdit.amt")} type="number" value={amount} onChange={handleChange} InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }} />
+  </>;
+}