fix: update total donation amount live when fee coverage option is selected

apphelper/src/donations/components/FundDonation.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { FundDonationInterface, FundInterface, CurrencyHelper } from "@churchapps/helpers";
-import { FormControl, Grid, Icon, InputLabel, MenuItem, Select, TextField, Typography } from "@mui/material";
+import { FormControl, Grid, Icon, InputLabel, MenuItem, Select, TextField, Typography, IconButton } from "@mui/material";
 import type { SelectChangeEvent } from "@mui/material";
 import { Locale } from "../helpers";
 
@@ -11,6 +11,7 @@ interface Props {
   funds: FundInterface[],
   index: number,
   updatedFunction: (fundDonation: FundDonationInterface, index: number) => void,
+  removeFunction?: (index: number) => void,
   params?: any,
   currency?: string,
   hideFundSelect?: boolean,
@@ -42,8 +43,8 @@ export const FundDonation: React.FC<Props> = (props) => {
 
   return (
     <>
-      <Grid container spacing={3}>
-        <Grid size={{ xs: 12, md: props.hideFundSelect ? 12 : 6 }}>
+      <Grid container spacing={1} alignItems="center" sx={{ mb: 2 }}>
+        <Grid size={{ xs: props.removeFunction ? 10 : 12, md: props.hideFundSelect ? (props.removeFunction ? 11 : 12) : 5 }}>
           <TextField fullWidth name="amount" label={Locale.label("donation.fundDonations.amount")} type="number" disabled={props.params?.amount && props.params.amount !== ""} aria-label="amount" lang="en-150" value={props.fundDonation.amount || ""} onChange={handleChange} InputProps={{ startAdornment: <Icon><Typography>{props.currency ? CurrencyHelper.getCurrencySymbol(props.currency) : "$"}</Typography></Icon> }} />
         </Grid>
         {!props.hideFundSelect && (
@@ -56,6 +57,13 @@ export const FundDonation: React.FC<Props> = (props) => {
             </FormControl>
           </Grid>
         )}
+        {props.removeFunction && (
+          <Grid size={{ xs: 2, md: 1 }} sx={{ display: "flex", justifyContent: "flex-end" }}>
+            <IconButton onClick={() => props.removeFunction?.(props.index)} color="error" aria-label="remove">
+              <Icon>delete</Icon>
+            </IconButton>
+          </Grid>
+        )}
       </Grid>
     </>
   );

apphelper/src/donations/components/FundDonations.tsx

@@ -23,11 +23,18 @@ export const FundDonations: React.FC<Props> = (props) => {
     props.updatedFunction(fundDonations);
   };
 
+  const removeRow = (index: number) => {
+    const fundDonations = [...props.fundDonations];
+    fundDonations.splice(index, 1);
+    props.updatedFunction(fundDonations);
+  };
+
   const getRows = () => {
     const result = [];
     for (let i = 0; i < props.fundDonations.length; i++) {
       const fd = props.fundDonations[i];
-      result.push(<FundDonation fundDonation={fd} funds={props.funds} updatedFunction={handleUpdated} params={props?.params} key={fd.fundId || i} index={i} currency={props?.currency} hideFundSelect={props?.hideFundSelect} />);
+      const canRemove = props.fundDonations.length > 1;
+      result.push(<FundDonation fundDonation={fd} funds={props.funds} updatedFunction={handleUpdated} removeFunction={canRemove ? removeRow : undefined} params={props?.params} key={fd.fundId || i} index={i} currency={props?.currency} hideFundSelect={props?.hideFundSelect} />);
     }
 
     return result;

apphelper/src/donations/components/MultiGatewayDonationForm.tsx

@@ -63,6 +63,7 @@ const MultiGatewayDonationInner: React.FC<Props> = (props) => {
   const [transactionFee, setTransactionFee] = useState<number>(0);
   const [payFee, setPayFee] = useState<number>(0);
   const [total, setTotal] = useState<number>(0);
+  const [coverFee, setCoverFee] = useState<boolean>(false);
   const [paymentMethodName, setPaymentMethodName] = useState<string>(
     props?.paymentMethods?.length > 0 ? `${props.paymentMethods[0].name} ${props.paymentMethods[0].last4 ? `****${props.paymentMethods[0].last4}` : props.paymentMethods[0].email || ""}` : ""
   );
@@ -146,6 +147,7 @@ const MultiGatewayDonationInner: React.FC<Props> = (props) => {
     const d = { ...donation } as MultiGatewayDonationInterface;
     d.amount = checked ? fundsTotal + transactionFee : fundsTotal;
     const showFee = checked ? transactionFee : 0;
+    setCoverFee(checked);
     setTotal(d.amount);
     setPayFee(showFee);
     setDonation(d);
@@ -352,9 +354,15 @@ const MultiGatewayDonationInner: React.FC<Props> = (props) => {
         setTotal(updatedAmount);
         setPayFee(fee);
         setDonation(prev => ({ ...prev, amount: updatedAmount }));
+      } else if (coverFee) {
+        // User has opted in to cover fees — recalculate total with the updated fee
+        const updatedAmount = totalAmount + fee;
+        setTotal(updatedAmount);
+        setPayFee(fee);
+        setDonation(prev => ({ ...prev, amount: updatedAmount }));
       }
     }, 500);
-  }, [donation, funds, gateway, selectedGatewayObj?.id, selectedGateway, getTransactionFee]);
+  }, [donation, funds, gateway, selectedGatewayObj?.id, selectedGateway, getTransactionFee, coverFee]);
 
   useEffect(() => {
     loadFunds();
@@ -593,7 +601,7 @@ const MultiGatewayDonationInner: React.FC<Props> = (props) => {
                     ) : (
                       <FormGroup>
                         <FormControlLabel
-                          control={<Checkbox />}
+                          control={<Checkbox checked={coverFee} />}
                           name="transaction-fee"
                           label={Locale.label("donation.donationForm.cover").replace("{}", CurrencyHelper.formatCurrencyWithLocale(transactionFee, gateway?.currency || "USD"))}
                           onChange={handleCheckChange}