@churchapps/apphelper 0.5.0 → 0.5.2

package/src/components/QuestionEdit.tsx

@@ -1,99 +1,99 @@
-"use client";
-
-import React from "react";
-import { Elements } from "@stripe/react-stripe-js";
-import { Stripe } from "@stripe/stripe-js";
-import { MuiTelInput } from "mui-tel-input";
-import { AnswerInterface, QuestionInterface } from "@churchapps/helpers";
-import { Checkbox, Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField, FormLabel, FormGroup, FormControlLabel, Box } from "@mui/material";
-import { FormCardPayment } from "./FormCardPayment";
-
-interface Props {
-  answer: AnswerInterface
-  question: QuestionInterface,
-  noBackground?: boolean,
-  changeFunction: (questionId: string, value: string) => void,
-  churchId?: string,
-  ref?: React.ForwardedRef<any>,
-  stripePromise?: Promise<Stripe>
-}
-
-export const QuestionEdit = React.forwardRef<any, Props>(({noBackground = false, ...props}, ref) => {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    props.changeFunction(props.question.id, e.target.value);
-  }
-
-  const handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedOptions = props.answer.value ? props.answer.value.split(",") : [];
-    if (e.target.checked) {
-      selectedOptions.push(e.target.name);
-    } else {
-      const idx = selectedOptions.indexOf(e.target.name);
-      selectedOptions.splice(idx, 1);
-    }
-    props.changeFunction(props.question.id, selectedOptions.join());
-  }
-
-  let q = props.question;
-
-  if (q.fieldType === "Heading") return <h5>{q.title}</h5>;
-  else {
-    let input = null;
-    let choiceOptions = [];
-    if (q.choices !== undefined && q.choices !== null) {
-      if (q.fieldType === "Multiple Choice") {
-        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
-      } else if (q.fieldType === "Checkbox") {
-        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<FormControlLabel key={i} label={q.choices[i].text} control={<Checkbox onChange={handleCheck} name={q.choices[i].value} />} />);
-      }
-    }
-
-    let answerValue = (props.answer === null) ? "" : props.answer.value
-    switch (q.fieldType) {
-      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Multiple Choice": {
-        input = (
-          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
-            <InputLabel sx={{ fontWeight: "bold" }}>{q.title}</InputLabel>
-            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>{choiceOptions}</Select>
-          </FormControl>);
-        break;
-      }
-      case "Yes/No": {
-        input = (
-          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
-            <InputLabel sx={{ fontWeight: "bold" }}>{q.title}</InputLabel>
-            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>
-              <MenuItem value="False">No</MenuItem>
-              <MenuItem value="True">Yes</MenuItem>
-            </Select>
-          </FormControl>);
-        break;
-      }
-      case "Checkbox": {
-        input = (
-          <FormControl fullWidth sx={{ marginLeft: 1 }}>
-            <FormLabel sx={{ fontWeight: "bold" }}>{q.title}</FormLabel>
-            <FormGroup>
-              {choiceOptions}
-            </FormGroup>
-          </FormControl>
-        );
-        break;
-      }
-      case "Whole Number":
-      case "Decimal":
-        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{ shrink: true, sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />;
-        break;
-      case "Date": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="date" InputLabelProps={{ shrink: true, sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Phone Number": input = <MuiTelInput fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder="" value={answerValue} onChange={(value) => { props.changeFunction(props.question.id, value); }} defaultCountry="US" focusOnSelectCountry excludedCountries={["TA", "AC"]} />; break;
-      case "Email": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="email" InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder="john@doe.com" value={answerValue} onChange={handleChange} />; break;
-      case "Text Area": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} multiline rows={4} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Payment": input = <Elements stripe={props.stripePromise}><FormCardPayment churchId={props.churchId} question={q} ref={ref} /></Elements>; break;
-      default: return null;
-    }
-    return input;
-  }
-
-});
-
+"use client";
+
+import React from "react";
+import { Elements } from "@stripe/react-stripe-js";
+import { Stripe } from "@stripe/stripe-js";
+import { MuiTelInput } from "mui-tel-input";
+import { AnswerInterface, QuestionInterface } from "@churchapps/helpers";
+import { Checkbox, Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField, FormLabel, FormGroup, FormControlLabel, Box } from "@mui/material";
+import { FormCardPayment } from "./FormCardPayment";
+
+interface Props {
+  answer: AnswerInterface
+  question: QuestionInterface,
+  noBackground?: boolean,
+  changeFunction: (questionId: string, value: string) => void,
+  churchId?: string,
+  ref?: React.ForwardedRef<any>,
+  stripePromise?: Promise<Stripe>
+}
+
+export const QuestionEdit = React.forwardRef<any, Props>(({noBackground = false, ...props}, ref) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    props.changeFunction(props.question.id, e.target.value);
+  }
+
+  const handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedOptions = props.answer.value ? props.answer.value.split(",") : [];
+    if (e.target.checked) {
+      selectedOptions.push(e.target.name);
+    } else {
+      const idx = selectedOptions.indexOf(e.target.name);
+      selectedOptions.splice(idx, 1);
+    }
+    props.changeFunction(props.question.id, selectedOptions.join());
+  }
+
+  let q = props.question;
+
+  if (q.fieldType === "Heading") return <h5>{q.title}</h5>;
+  else {
+    let input = null;
+    let choiceOptions = [];
+    if (q.choices !== undefined && q.choices !== null) {
+      if (q.fieldType === "Multiple Choice") {
+        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
+      } else if (q.fieldType === "Checkbox") {
+        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<FormControlLabel key={i} label={q.choices[i].text} control={<Checkbox onChange={handleCheck} name={q.choices[i].value} />} />);
+      }
+    }
+
+    let answerValue = (props.answer === null) ? "" : props.answer.value
+    switch (q.fieldType) {
+      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Multiple Choice": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel sx={{ fontWeight: "bold" }}>{q.title}</InputLabel>
+            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>{choiceOptions}</Select>
+          </FormControl>);
+        break;
+      }
+      case "Yes/No": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel sx={{ fontWeight: "bold" }}>{q.title}</InputLabel>
+            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>
+              <MenuItem value="False">No</MenuItem>
+              <MenuItem value="True">Yes</MenuItem>
+            </Select>
+          </FormControl>);
+        break;
+      }
+      case "Checkbox": {
+        input = (
+          <FormControl fullWidth sx={{ marginLeft: 1 }}>
+            <FormLabel sx={{ fontWeight: "bold" }}>{q.title}</FormLabel>
+            <FormGroup>
+              {choiceOptions}
+            </FormGroup>
+          </FormControl>
+        );
+        break;
+      }
+      case "Whole Number":
+      case "Decimal":
+        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{ shrink: true, sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />;
+        break;
+      case "Date": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="date" InputLabelProps={{ shrink: true, sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Phone Number": input = <MuiTelInput fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder="" value={answerValue} onChange={(value) => { props.changeFunction(props.question.id, value); }} defaultCountry="US" focusOnSelectCountry excludedCountries={["TA", "AC"]} />; break;
+      case "Email": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="email" InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder="john@doe.com" value={answerValue} onChange={handleChange} />; break;
+      case "Text Area": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} multiline rows={4} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Payment": input = <Elements stripe={props.stripePromise}><FormCardPayment churchId={props.churchId} question={q} ref={ref} /></Elements>; break;
+      default: return null;
+    }
+    return input;
+  }
+
+});
+

package/src/components/SmallButton.tsx

@@ -1,42 +1,42 @@
-"use client";
-
-import React from "react";
-import { Button, Icon, Tooltip } from "@mui/material";
-import { Navigate } from "react-router-dom";
-
-interface Props {
-  ariaLabel?: string;
-  text?: string;
-  icon: string;
-  color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
-  toolTip?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  href?: string;
-  disabled?: boolean;
-  "data-testid"?: string;
-}
-
-export const SmallButton = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const [redirectUrl, setRedirectUrl] = React.useState("");
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (props.href) setRedirectUrl(props.href);
-    else props.onClick(e);
-  }
-
-  const style = (props.text)
-    ? { backgroundColor: props.color, "& span": { marginRight: 1 } }
-    : { minWidth: "auto", padding: "4px 4px" }
-
-  if (redirectUrl) return <Navigate to={redirectUrl} />
-  else return (
-    <Tooltip title={props.toolTip || ""} arrow placement="top">
-      <Button sx={style} disabled={props.disabled} variant={props.text ? "outlined" : "text"} color={props.color} aria-label={props.ariaLabel || "editButton"} onClick={handleClick} size="small" data-testid={props["data-testid"] || `small-button-${props.icon}`}>
-        <Icon>{props.icon}</Icon>{(props.text) ? props.text : ""}
-      </Button>
-    </Tooltip>
-  );
-});
-
-SmallButton.displayName = "SmallButton";
+"use client";
+
+import React from "react";
+import { Button, Icon, Tooltip } from "@mui/material";
+import { Navigate } from "react-router-dom";
+
+interface Props {
+  ariaLabel?: string;
+  text?: string;
+  icon: string;
+  color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+  toolTip?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  href?: string;
+  disabled?: boolean;
+  "data-testid"?: string;
+}
+
+export const SmallButton = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const [redirectUrl, setRedirectUrl] = React.useState("");
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (props.href) setRedirectUrl(props.href);
+    else props.onClick(e);
+  }
+
+  const style = (props.text)
+    ? { backgroundColor: props.color, "& span": { marginRight: 1 } }
+    : { minWidth: "auto", padding: "4px 4px" }
+
+  if (redirectUrl) return <Navigate to={redirectUrl} />
+  else return (
+    <Tooltip title={props.toolTip || ""} arrow placement="top">
+      <Button sx={style} disabled={props.disabled} variant={props.text ? "outlined" : "text"} color={props.color} aria-label={props.ariaLabel || "editButton"} onClick={handleClick} size="small" data-testid={props["data-testid"] || `small-button-${props.icon}`}>
+        <Icon>{props.icon}</Icon>{(props.text) ? props.text : ""}
+      </Button>
+    </Tooltip>
+  );
+});
+
+SmallButton.displayName = "SmallButton";

package/src/components/SupportModal.tsx

@@ -1,32 +1,32 @@
-"use client";
-
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Icon, Stack } from "@mui/material";
-import React from "react";
-import { Locale } from "../helpers";
-
-interface Props {
-  appName?: string
-  onClose: () => void
-}
-
-export const SupportModal: React.FC<Props> = ({ appName = "", onClose }) => {
-  const subject = appName ? `?subject=${appName} Support` : ""
-
-  return (<>
-    <Dialog 
-      open={true} 
-      onClose={onClose}
-      aria-labelledby="support-modal-title"
-      aria-describedby="support-modal-content"
-    >
-      <DialogTitle id="support-modal-title">Get Support</DialogTitle>
-      <DialogContent id="support-modal-content">
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> {Locale.label("support.documentation")}:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>forum</Icon> {Locale.label("support.discussions")}:</Stack></b> <a href="https://github.com/orgs/ChurchApps/discussions" target="_new">https://github.com/orgs/ChurchApps/discussions</a></Stack>
-      </DialogContent>
-      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
-        <Button variant="outlined" onClick={onClose}>Close</Button>
-      </DialogActions>
-    </Dialog>
-  </>);
-};
+"use client";
+
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Icon, Stack } from "@mui/material";
+import React from "react";
+import { Locale } from "../helpers";
+
+interface Props {
+  appName?: string
+  onClose: () => void
+}
+
+export const SupportModal: React.FC<Props> = ({ appName = "", onClose }) => {
+  const subject = appName ? `?subject=${appName} Support` : ""
+
+  return (<>
+    <Dialog 
+      open={true} 
+      onClose={onClose}
+      aria-labelledby="support-modal-title"
+      aria-describedby="support-modal-content"
+    >
+      <DialogTitle id="support-modal-title">Get Support</DialogTitle>
+      <DialogContent id="support-modal-content">
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> {Locale.label("support.documentation")}:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>forum</Icon> {Locale.label("support.discussions")}:</Stack></b> <a href="https://github.com/orgs/ChurchApps/discussions" target="_new">https://github.com/orgs/ChurchApps/discussions</a></Stack>
+      </DialogContent>
+      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
+        <Button variant="outlined" onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  </>);
+};

package/src/components/TabPanel.tsx

@@ -1,28 +1,28 @@
-import React from "react";
-import { Box } from "@mui/material";
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
-export function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <Box sx={{ p: 3 }}>
-          {children}
-        </Box>
-      )}
-    </div>
-  );
-}
+import React from "react";
+import { Box } from "@mui/material";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+export function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          {children}
+        </Box>
+      )}
+    </div>
+  );
+}