@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
144 lines • 7.1 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useRef } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { ErrorMessages, InputBox, QuestionEdit } from "./";
import { ApiHelper, Locale, UniqueIdHelper } from "../helpers";
export const FormSubmissionEdit = ({ showHeader = true, noBackground = false, ...props }) => {
const [stripePromise, setStripe] = React.useState(null);
const [formSubmission, setFormSubmission] = React.useState(null);
const [errors, setErrors] = React.useState([]);
const [isSubmitting, setIsSubmitting] = React.useState(false);
const paymentRef = useRef(null);
const getDeleteFunction = () => (!UniqueIdHelper.isMissing(formSubmission?.id)) ? handleDelete : undefined;
const handleDelete = () => {
if (window.confirm(Locale.label("formSubmissionEdit.confirmDelete"))) {
ApiHelper.delete("/formsubmissions/" + formSubmission.id, "MembershipApi").then(() => {
props.updatedFunction();
});
}
};
const getAnswer = (questionId) => {
const answers = formSubmission.answers;
for (let i = 0; i < answers.length; i++)
if (answers[i].questionId === questionId)
return answers[i];
return null;
};
const setFormSubmissionData = (data) => {
const formId = props.addFormId || props.unRestrictedFormId;
const fs = { formId, contentType: props.contentType, contentId: props.contentId, answers: [] };
fs.questions = data;
fs.answers = [];
fs.questions.forEach((q) => {
const answer = { formSubmissionId: fs.id, questionId: q.id, required: q.required };
answer.value = getDefaultValue(q);
fs.answers.push(answer);
});
setFormSubmission(fs);
};
const loadData = () => {
if (!UniqueIdHelper.isMissing(props.formSubmissionId))
ApiHelper.get("/formsubmissions/" + props.formSubmissionId + "/?include=questions,answers,form", "MembershipApi").then((data) => setFormSubmission(data));
else if (!UniqueIdHelper.isMissing(props.addFormId))
ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then((data) => setFormSubmissionData(data));
else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId))
ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then((data) => setFormSubmissionData(data));
};
const getDefaultValue = (q) => {
let result = "";
if (q.fieldType === "Yes/No")
result = "False";
else if (q.fieldType === "Multiple Choice") {
if (q.choices !== undefined && q.choices !== null && q.choices.length > 0)
result = q.choices[0].value;
}
return result;
};
const validate = (fs) => {
const e = [];
fs.answers.forEach((a) => {
if (a.required && a.value === "") {
const q = fs.questions.find((q) => q.id === a.questionId);
e.push(q.title + " " + Locale.label("formSubmissionEdit.isRequired"));
setErrors(e);
}
});
return e.length === 0;
};
const handleSave = async () => {
const fs = formSubmission;
if (validate(fs)) {
setIsSubmitting(true);
// First, handle the payment if there's a payment component
if (paymentRef.current) {
const paymentResult = await paymentRef.current.handlePayment();
if (!paymentResult.paymentSuccessful) {
setErrors(paymentResult.errors);
setIsSubmitting(false);
return;
}
else {
// Mark payment as successful in answers
const paymentAnswer = fs.answers.find((a) => a.questionId === paymentRef.current.questionId);
if (paymentAnswer) {
paymentAnswer.value = `Payment Successful [${paymentResult?.name}]`;
}
else {
fs.answers.push({
questionId: paymentRef.current.questionId,
value: "Payment Successful"
});
}
}
}
// If payment is successful or there's no payment, proceed with form submission
fs.submittedBy = props.personId || null;
fs.submissionDate = new Date();
fs.churchId = props.churchId || null;
ApiHelper.post("/formsubmissions/", [fs], "MembershipApi").then((res) => {
if (res?.[0]?.error) {
setErrors([res?.[0].error]);
}
else {
props.updatedFunction();
}
})
.finally(() => {
setIsSubmitting(false);
});
}
};
const handleChange = (questionId, value) => {
const fs = { ...formSubmission };
let answer = null;
for (let i = 0; i < fs.answers.length; i++)
if (fs.answers[i].questionId === questionId)
answer = fs.answers[i];
if (answer !== null)
answer.value = value;
else {
answer = { formSubmissionId: fs.id, questionId: questionId, value: value };
fs.answers.push(answer);
}
setFormSubmission(fs);
};
React.useEffect(() => {
if (props.churchId) {
ApiHelper.get("/gateways/churchId/" + props.churchId, "GivingApi").then((data) => {
if (data.length && data[0]?.publicKey) {
setStripe(loadStripe(data[0].publicKey));
}
});
}
}, [props.churchId]);
React.useEffect(loadData, []);
const questionList = [];
if (formSubmission != null) {
const questions = formSubmission.questions;
for (let i = 0; i < questions.length; i++)
questionList.push(_jsx(QuestionEdit, { noBackground: noBackground, question: questions[i], answer: getAnswer(questions[i].id), changeFunction: handleChange, churchId: props.churchId, ref: questions[i].fieldType === "Payment" ? paymentRef : null, stripePromise: stripePromise }, questions[i].id));
}
return (_jsxs(InputBox, { id: "formSubmissionBox", headerText: showHeader ? (formSubmission?.form?.name || Locale.label("formSubmissionEdit.editForm")) : "", headerIcon: showHeader ? "person" : "", mainContainerCssProps: noBackground ? { sx: { backgroundColor: "transparent", boxShadow: 0 } } : {}, saveFunction: handleSave, isSubmitting: isSubmitting, saveText: props.contentType === "form" ? Locale.label("formSubmissionEdit.submit") : "", cancelFunction: props.cancelFunction, deleteFunction: getDeleteFunction(), children: [_jsx(ErrorMessages, { errors: errors }), questionList] }));
};
//# sourceMappingURL=FormSubmissionEdit.js.map