show correct currency symbol (website elements)

Author: Himali-Malvawala

src/forms/components/PaymentEdit.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { FormControl, InputAdornment, InputLabel, MenuItem, Select, TextField, type SelectChangeEvent } from "@mui/material";
-import { type QuestionInterface } from "@churchapps/helpers";
+import { CurrencyHelper, type QuestionInterface } from "@churchapps/helpers";
 import { ApiHelper, Locale } from "@churchapps/apphelper";
 import { type FundInterface } from "@churchapps/helpers";
 
@@ -13,6 +13,7 @@ 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 [currency, setCurrency] = React.useState<string>("usd");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent) => {
     e.preventDefault();
@@ -46,6 +47,12 @@ export const PaymentEdit: React.FC<Props> = (props) => {
     });
   }, [fundId, props.question, props.updatedFunction]);
 
+  React.useEffect(() => {
+    CurrencyHelper.loadCurrency().then((result) => {
+      setCurrency(result);
+    })
+  }, []);
+
   const getFundOptions = () =>
     funds.map((fund: FundInterface) => (
       <MenuItem key={fund.id} value={fund.id}>
@@ -68,7 +75,11 @@ export const PaymentEdit: React.FC<Props> = (props) => {
         type="number"
         value={amount}
         onChange={handleChange}
-        InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }}
+        slotProps={{
+          input: {
+            startAdornment: <InputAdornment position="start">{CurrencyHelper.getCurrencySymbol(currency)}</InputAdornment>
+          }
+        }}
       />
     </>
   );

src/site/admin/elements/DonateLinkEdit.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import type { SelectChangeEvent } from "@mui/material";
 import { Button, Chip, FormControl, Icon, InputAdornment, InputLabel, MenuItem, Select, TextField, Typography } from "@mui/material";
-import { ApiHelper, Locale } from "@churchapps/apphelper";
+import { ApiHelper, CurrencyHelper, Locale } from "@churchapps/apphelper";
 
 type Props = {
   parsedData: any;
@@ -12,6 +12,7 @@ export function DonateLinkEdit({ parsedData, onRealtimeChange }: Props) {
   const [funds, setFunds] = useState(null);
   const [amounts, setAmounts] = useState<number[]>([]);
   const [amountValue, setAmountValue] = useState<number>();
+  const [currency, setCurrency] = useState<string>("usd");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
     const data = { ...parsedData };
@@ -60,6 +61,10 @@ export function DonateLinkEdit({ parsedData, onRealtimeChange }: Props) {
     if (parsedData?.amounts) {
       setAmounts(JSON.parse(parsedData.amounts));
     }
+
+    CurrencyHelper.loadCurrency().then((result) => {
+      setCurrency(result);
+    })
   }, []);
 
   return (
@@ -106,9 +111,27 @@ export function DonateLinkEdit({ parsedData, onRealtimeChange }: Props) {
         {Locale.label("site.donateLink.donationAmountsHelper")}
       </Typography>
       <div>
-        {amounts?.map((a) => (<Chip color="primary" size="small" label={`$ ${a}`} onDelete={() => { handleAmountDelete(a); }} sx={{ mr: 1, mt: 1, minWidth: 70 }} deleteIcon={<Icon sx={{ float: "right", marginLeft: "auto !important" }}>cancel</Icon>} data-testid={`amount-chip-${a}`} aria-label={`Remove $${a} donation amount`} />))}
+        {amounts?.map((a) => (<Chip color="primary" size="small" label={`${CurrencyHelper.getCurrencySymbol(currency)} ${a}`} onDelete={() => { handleAmountDelete(a); }} sx={{ mr: 1, mt: 1, minWidth: 70 }} deleteIcon={<Icon sx={{ float: "right", marginLeft: "auto !important" }}>cancel</Icon>} data-testid={`amount-chip-${a}`} aria-label={`Remove ${CurrencyHelper.getCurrencySymbol(currency)} ${a} donation amount`} />))}
       </div>
-      <TextField fullWidth size="small" type="number" placeholder={Locale.label("site.donateLink.amountPlaceholder")} label={Locale.label("site.donateLink.amount")} name="amount" value={amountValue} onChange={handleChange} data-testid="donate-amount-input" aria-label={Locale.label("site.donateLink.donationAmount")} InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment>, endAdornment: <Button size="small" variant="contained" onClick={handleAmountAdd} disabled={!amountValue || amountValue === 0} data-testid="add-amount-button" aria-label={Locale.label("site.donateLink.addAmount")}>{Locale.label("site.donateLink.add")}</Button>, inputProps: { min: 0 } }} />
+      <TextField
+        fullWidth
+        size="small"
+        type="number"
+        placeholder={Locale.label("site.donateLink.amountPlaceholder")}
+        label={Locale.label("site.donateLink.amount")}
+        name="amount"
+        value={amountValue}
+        onChange={handleChange}
+        data-testid="donate-amount-input"
+        aria-label={Locale.label("site.donateLink.donationAmount")}
+        slotProps={{ 
+          input: {
+            startAdornment: <InputAdornment position="start">{CurrencyHelper.getCurrencySymbol(currency)}</InputAdornment>,
+            endAdornment: <Button size="small" variant="contained" onClick={handleAmountAdd} disabled={!amountValue || amountValue === 0} data-testid="add-amount-button" aria-label={Locale.label("site.donateLink.addAmount")}>{Locale.label("site.donateLink.add")}</Button>,
+            inputProps: { min: 0 }
+          }
+        }}
+      />
     </>
   );
 }