@churchapps/apphelper 0.6.15 → 0.6.16

package/src/components/InputBox.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import React from "react";
-import { Paper, Box, Typography, Stack, Button, PaperProps } from "@mui/material";
-import { Icon } from "@mui/material";
-import { HelpIcon } from "./HelpIcon";
-import { Locale } from "../helpers";
-import { styled, useTheme } from '@mui/material/styles';
-
-declare module '@mui/material/styles' {
-  interface Palette {
-    InputBox: { headerText: string; };
-  }
-  interface PaletteOptions {
-    InputBox?: { headerText?: string; };
-  }
-}
-
-
-interface Props {
-  id?: string;
-  children?: React.ReactNode;
-  headerIcon?: string;
-  headerText?: string;
-  help?: string;
-  saveText?: string;
-  saveTextSubmitting?: string;
-  deleteText?: string;
-  cancelText?: string;
-  headerActionContent?: React.ReactNode;
-  cancelFunction?: () => void;
-  deleteFunction?: () => void;
-  saveFunction?: () => void;
-  "data-testid"?: string;
-  className?: string;
-  isSubmitting?: boolean;
-  ariaLabelDelete?: string;
-  ariaLabelSave?: string;
-  saveButtonType?: "submit" | "button";
-  mainContainerCssProps?: PaperProps;
-}
-
-const CustomContextBox = styled(Box)({
-  name: "InputBox",
-  slot: "root",
-  marginTop: 10,
-  overflowX: "hidden",
-  "& p": { color: "#666" },
-  "& label": { color: "#999" },
-  "& ul": { paddingLeft: 15 },
-  "& li": {
-    marginBottom: 10,
-    "& i": { marginRight: 5 }
-  },
-  "& td": {
-    "& i": { marginRight: 5 }
-  }
-})
-
-
-export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
-  const theme = useTheme();
-  const headerText = theme?.palette?.InputBox?.headerText ? theme?.palette?.InputBox?.headerText : "primary";
-
-  let buttons = [];
-  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>{props.cancelText || Locale.label("common.cancel")}</Button>);
-  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>{props.deleteText || Locale.label("common.delete")}</Button>);
-  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.isSubmitting && props.saveTextSubmitting ? props.saveTextSubmitting : (props.saveText || Locale.label("common.save"))}</Button>);
-
-  let classNames = ["inputBox"];
-  if (props.className) {
-    classNames.push(props.className);
-  }
-
-  return (
-    <Paper id={props.id || "input-box"} sx={{ padding: 2, marginBottom: 4 }} data-testid={props["data-testid"]} {...mainContainerCssProps}>
-      {props.help && <HelpIcon article={props.help} />}
-      <Box id="input-box-header" sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-testid="input-box-header">
-        <Box id="input-box-title-section" display="flex" alignItems="center">
-          {props.headerIcon && <Icon id="input-box-icon" sx={{ color: headerText }}>{props.headerIcon}</Icon>}
-          {props.headerText && (
-            <Typography id="input-box-title" component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={headerText}>
-              {props.headerText}
-            </Typography>
-          )}
-        </Box>
-        <Box id="input-box-actions">
-          {props.headerActionContent}
-        </Box>
-      </Box>
-      <CustomContextBox id="input-box-content">{props.children}</CustomContextBox>
-      <Stack id="input-box-buttons" direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
-        {buttons}
-      </Stack>
-    </Paper>
-  );
-}

package/src/components/Loading.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import React from "react";
-import { Dots } from "react-activity";
-import "react-activity/dist/Dots.css";
-
-interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
-
-export const Loading: React.FC<Props> = (props) => {
-
-  const getContents = () => {
-    const text = (props.loadingText) ? props.loadingText : "Loading"
-    const color = (props.color) ? props.color : "#222"
-    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
-    switch (props.size) {
-      case "sm":
-        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
-        break;
-      case "lg":
-        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
-        break;
-    }
-    return result;
-  }
-
-  return (
-    <div id="loading-component" style={{ textAlign: "center", fontFamily: "Roboto" }}>
-      {getContents()}
-    </div>
-  )
-}

package/src/components/PageHeader.tsx

@@ -1,111 +0,0 @@
-import React, { ReactNode } from "react";
-import { Box, Typography, Stack } from "@mui/material";
-
-interface PageHeaderProps {
-  icon: ReactNode;
-  title: string;
-  subtitle?: string;
-  children?: ReactNode; // For action buttons or tabs
-  statistics?: Array<{ icon: ReactNode; value: string; label: string }>;
-}
-
-export const PageHeader: React.FC<PageHeaderProps> = ({ icon, title, subtitle, children, statistics }) => {
-  return (
-    <Box id="page-header" sx={{ 
-      backgroundColor: "var(--c1l2)", 
-      color: "#FFF", 
-      position: 'relative',
-      left: '50%',
-      right: '50%',
-      marginLeft: '-50vw',
-      marginRight: '-50vw',
-      width: '100vw',
-      '--c1': '#1565C0',
-      '--c1d1': '#1358AD', 
-      '--c1d2': '#114A99',
-      '--c1l2': '#568BDA'
-    }}>
-      <Box sx={{ 
-        paddingX: { xs: 2, sm: 3, md: 4 }, 
-        paddingY: 3
-      }}>
-        <Stack direction={{ xs: "column", md: "row" }} spacing={{ xs: 2, md: 4 }} alignItems={{ xs: "flex-start", md: "center" }} sx={{ width: "100%" }}>
-        {/* Left side: Title and Icon */}
-        <Stack id="page-header-title-section" direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
-          <Box
-            id="page-header-icon"
-            sx={{
-              backgroundColor: "rgba(255,255,255,0.2)",
-              borderRadius: "12px",
-              p: 1.5,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            {React.cloneElement(icon as React.ReactElement<any>, { sx: { fontSize: 32, color: "#FFF" } })}
-          </Box>
-          <Box id="page-header-text">
-            <Typography
-              id="page-header-title"
-              variant="h4"
-              sx={{
-                fontWeight: 600,
-                mb: 0.5,
-                fontSize: { xs: "1.75rem", md: "2.125rem" },
-              }}
-            >
-              {title}
-            </Typography>
-            {subtitle && (
-              <Typography
-                id="page-header-subtitle"
-                variant="body1"
-                sx={{
-                  color: "rgba(255,255,255,0.9)",
-                  fontSize: { xs: "0.875rem", md: "1rem" },
-                }}
-              >
-                {subtitle}
-              </Typography>
-            )}
-          </Box>
-        </Stack>
-
-        {/* Right side: Action Buttons/Tabs */}
-        {children && (
-          <Stack
-            id="page-header-actions"
-            direction="row"
-            spacing={1}
-            sx={{
-              flexShrink: 0,
-              justifyContent: { xs: "flex-start", md: "flex-end" },
-              width: { xs: "100%", md: "auto" },
-            }}
-          >
-            {children}
-          </Stack>
-        )}
-      </Stack>
-
-      {/* Statistics row */}
-      {statistics && statistics.length > 0 && (
-        <Stack id="page-header-statistics" direction={{ xs: "column", sm: "row" }} spacing={3} sx={{ mt: 3 }}>
-          {statistics.map((stat) => (
-            <Stack key={stat.label} direction="row" spacing={1} alignItems="center">
-              {React.cloneElement(stat.icon as React.ReactElement<any>, { sx: { color: "#FFF", fontSize: 20 } })}
-              <Typography variant="h6" sx={{ color: "#FFF", fontWeight: 600, mr: 1 }}>
-                {stat.value}
-              </Typography>
-              <Typography variant="body2" sx={{ color: "rgba(255,255,255,0.9)", fontSize: "0.875rem" }}>
-                {stat.label}
-              </Typography>
-            </Stack>
-          ))}
-        </Stack>
-      )}
-      </Box>
-    </Box>
-  );
-};

package/src/components/PersonAvatar.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import React from "react";
-import { Avatar, SxProps } from "@mui/material";
-import { PersonInterface } from "@churchapps/helpers";
-import { PersonHelper } from "../helpers";
-
-interface Props {
-  person: PersonInterface;
-  size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "responsive";
-  sx?: SxProps;
-  onClick?: () => void;
-}
-
-export const PersonAvatar: React.FC<Props> = ({ person, size = "medium", sx, onClick }) => {
-  const [imageError, setImageError] = React.useState(false);
-  
-  const getSizeProps = () => {
-    switch (size) {
-      case "small":
-        return { width: 48, height: 48 };
-      case "medium":
-        return { width: 56, height: 56 };
-      case "large":
-        return { width: 80, height: 80 };
-      case "xlarge":
-        return { width: 100, height: 100 };
-      case "xxlarge":
-        return { width: 120, height: 120 };
-      case "responsive":
-        return { width: { xs: 70, sm: 80, md: 100 }, height: { xs: 70, sm: 80, md: 100 } };
-      default:
-        return { width: 56, height: 56 };
-    }
-  };
-
-  const getInitials = () => {
-    if (!person?.name?.display) return "?";
-    
-    const names = person.name.display.trim().split(" ");
-    if (names.length >= 2) {
-      return (names[0][0] + names[names.length - 1][0]).toUpperCase();
-    } else if (names.length === 1) {
-      return names[0][0]?.toUpperCase() || "?";
-    }
-    return "?";
-  };
-
-  const photoUrl = PersonHelper.getPhotoUrl(person);
-  const sizeProps = getSizeProps();
-  
-  // Combine default styles with custom sx
-  const combinedSx = {
-    ...sizeProps,
-    cursor: onClick ? "pointer" : "default",
-    "&:hover": onClick ? {
-      opacity: 0.8,
-      transition: "opacity 0.2s ease-in-out",
-    } : {},
-    ...sx,
-  };
-
-  const handleImageError = () => {
-    setImageError(true);
-  };
-
-  return (
-    <Avatar
-      src={!imageError ? photoUrl : undefined}
-      alt={person?.name?.display || "User avatar"}
-      sx={combinedSx}
-      onClick={onClick}
-      onError={handleImageError}
-    >
-      {(imageError || !photoUrl) && getInitials()}
-    </Avatar>
-  );
-};

package/src/components/QuestionEdit.tsx

@@ -1,99 +0,0 @@
-"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={q.choices[i].value} 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={q.choices[i].value} 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 +0,0 @@
-"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 if (props.onClick) 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 +0,0 @@
-"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 +0,0 @@
-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>
-  );
-}