@churchapps/apphelper 0.6.14 → 0.6.16

package/src/components/ExportLink.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { Button, Icon } from "@mui/material";
-import React, { Suspense, lazy } from "react";
-import { Loading } from "./Loading";
-
-// Lazy load the CSVLink component
-const CSVLink = lazy(() => import("react-csv").then(module => ({ default: module.CSVLink })));
-
-interface Props {
-  data: any[],
-  spaceAfter?: boolean,
-  spaceBefore?: boolean,
-  filename?: string,
-  icon?: string,
-  text?: string,
-  customHeaders?: {label: string, key: string}[]
-}
-
-export const ExportLink: React.FC<Props> = (props) => {
-
-  const people = props.data ? [...props.data] : [];
-
-  const getHeaders = () => {
-    let result = [];
-    if (people?.length > 0) {
-      let names = getAllPropertyNames();
-      for (let i = 0; i < names.length; i++) { result.push({ label: names[i], key: names[i] }); }
-    }
-    return result;
-  }
-
-  const getAllPropertyNames = () => {
-    let result = [];
-    for (let i = 0; i < people.length; i++) {
-      let p = {...people[i]}
-      p.birthDate = p.birthDate ? new Date(p.birthDate).toISOString() : null;
-      p.anniversary = p.anniversary ? new Date(p.anniversary).toISOString() : null;
-      people[i] = p;
-      let propertyNames = getPropertyNames("", people[i]);
-      for (let j = 0; j < propertyNames.length; j++) if (result.indexOf(propertyNames[j]) === -1) result.push(propertyNames[j]);
-    }
-    return result.sort();
-  }
-
-  const getPropertyNames = (prefix: string, obj: any) => {
-    let result = [];
-    let names = Object.getOwnPropertyNames(obj)
-    for (let i = 0; i < names.length; i++) {
-      let t = typeof obj[names[i]];
-      switch (t) {
-        case "number":
-        case "string":
-        case "boolean":
-          result.push(prefix + names[i]);
-          break;
-        case "object":
-          if ((obj[names[i]] !== null)) {
-            let children: string[] = getPropertyNames(prefix + names[i] + ".", obj[names[i]]);
-            for (let j = 0; j < children.length; j++) result.push(children[j]);
-          }
-      }
-    }
-    return result;
-  }
-
-  if (!people || people?.length === 0) return null;
-  else {
-    let items = [];
-    if (props.spaceBefore) items.push(" ");
-    items.push(
-      <Suspense key={props.filename} fallback={<Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button>}>
-        <CSVLink data={people} headers={props.customHeaders || getHeaders()} filename={props.filename || "export.csv"}>
-          <Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button>
-        </CSVLink>
-      </Suspense>
-    );
-    if (props.spaceAfter) items.push(" ");
-    return (<>{items}</>);
-  }
-}

package/src/components/FloatingSupport.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import { Fab, Icon } from "@mui/material";
-import React from "react";
-import { SupportModal } from "./SupportModal";
-
-interface Props { appName?: string }
-
-export const FloatingSupport: React.FC<Props> = (props) => {
-  const [showSupport, setShowSupport] = React.useState(false);
-
-  return (<>
-    <Fab color="primary" style={{ position: "fixed", cursor: "pointer", bottom: "20px", right: (showSupport) ? 47 : 30 }} onClick={() => { setShowSupport(!showSupport) }} aria-label="Support">
-      <Icon style={{ fontSize: 40 }}>contact_support</Icon>
-    </Fab>
-    {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
-  </>);
-};

package/src/components/FormCardPayment.tsx

@@ -1,184 +0,0 @@
-"use client";
-
-import React, { forwardRef, useImperativeHandle } from "react";
-import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { Box, Grid, TextField } from "@mui/material";
-import { ApiHelper, Locale, UserInterface, PersonInterface, StripeDonationInterface, ChurchInterface, FundInterface, ArrayHelper, UserHelper, QuestionInterface } from "../helpers";
-import { StripePaymentMethod } from "@churchapps/helpers";
-
-interface Props {
-	churchId: string,
-	question: QuestionInterface
-}
-
-export const FormCardPayment = forwardRef((props: Props, ref) => {
-  const formStyling = { style: { base: { fontSize: "18px" } } };
-  const elements = useElements();
-  const stripe = useStripe();
-  const [email, setEmail] = React.useState<string>((ApiHelper.isAuthenticated && UserHelper.user.email) ? UserHelper.user.email : "");
-  const [firstName, setFirstName] = React.useState<string>((ApiHelper.isAuthenticated && UserHelper.user.firstName) ? UserHelper.user.firstName : "");
-  const [lastName, setLastName] = React.useState<string>((ApiHelper.isAuthenticated && UserHelper.user.lastName) ? UserHelper.user.lastName : "");
-  const [church, setChurch] = React.useState<ChurchInterface>();
-  const [fund, setFund] = React.useState<FundInterface>();
-  const [gateway, setGateway] = React.useState<any>(null);
-  let amt = Number(props.question.choices?.find((c: any) => c.text === "Amount")?.value);
-  let fundId = props.question.choices?.find((c: any) => c.text === "FundId")?.value;
-
-  const getChurchData = () => {
-    let fundId = props.question.choices?.find((c: any) => c.text === "FundId")?.value;
-    ApiHelper.get("/churches/" + props.churchId, "MembershipApi").then((data: any) => {
-      setChurch(data);
-    });
-    ApiHelper.get("/funds/churchId/" + props.churchId, "GivingApi").then((data: any) => {
-      const result = ArrayHelper.getOne(data, "id", fundId);
-      setFund(result);
-    });
-    ApiHelper.get(`/donate/gateways/${props.churchId}`, "GivingApi").then((response: any) => {
-      const gateways = Array.isArray(response?.gateways) ? response.gateways : [];
-      const stripeGateway = gateways.find((g: any) => g.provider?.toLowerCase() === "stripe");
-      if (stripeGateway) setGateway(stripeGateway);
-    });
-  }
-
-  const handlePayment = async () => {
-    const validateErrors = validate();
-    if (validateErrors.length > 0) {
-      return { paymentSuccessful: false, errors: validateErrors }
-    }
-
-    try {
-      const userData = await ApiHelper.post("/users/loadOrCreate", { userEmail: email, firstName, lastName }, "MembershipApi");
-
-      const personData = { churchId: props.churchId, firstName, lastName, email };
-      const person = await ApiHelper.post("/people/loadOrCreate", personData, "MembershipApi");
-
-      const cardSavedRes = await saveCard(userData, person);
-      if (!cardSavedRes.success) {
-        return { paymentSuccessful: false, name: "", errors: cardSavedRes.errors }
-      }
-
-      return { paymentSuccessful: true, name: person?.name?.display || "", errors: [] as string[] }
-    } catch (err) {
-      const errorMessage = "An error occurred while processing your payment.";
-      return { paymentSuccessful: false, name: "", errors: [errorMessage] as string[] }
-    }
-  }
-
-  const saveCard = async (user: UserInterface, person: PersonInterface) => {
-    const cardData = elements.getElement(CardElement);
-    try {
-      const stripePM = await stripe.createPaymentMethod({ type: "card", card: cardData });
-      if (stripePM.error) {
-        return { success: false, errors: [stripePM.error.message] };
-      } else {
-        const pm = {
-          id: stripePM.paymentMethod.id,
-          personId: person.id,
-          email: email,
-          name: person.name.display,
-          churchId: props.churchId,
-          provider: "stripe",
-          gatewayId: gateway?.id
-        };
-        try {
-          const result = await ApiHelper.post("/paymentmethods/addcard", pm, "GivingApi");
-          if (result?.raw?.message) {
-            return { success: false, errors: [result.raw.message] };
-          } else {
-            const p: { paymentMethod: StripePaymentMethod, customerId: string } = result
-            const savedPaymentRes = await savePayment(p.paymentMethod, p.customerId, person);
-            if (!savedPaymentRes.success) {
-              return { success: false, errors: savedPaymentRes.errors }
-            }
-            return { success: true, errors: [] }
-          }
-        } catch (apiError) {
-          return { success: false, errors: ["An error occurred while saving the card."] }
-        }
-      }
-    } catch (stripeError) {
-      return { success: false, errors: ["An error occurred while processing your payment method."] };
-    }
-  }
-
-  const savePayment = async (paymentMethod: StripePaymentMethod, customerId: string, person?: PersonInterface) => {
-
-    let payment: any = {
-      amount: amt,
-      id: paymentMethod.id,
-      customerId: customerId,
-      type: paymentMethod.type,
-      churchId: props.churchId,
-      funds: [{ id: fundId, amount: amt, name: fund?.name }],
-      person: {
-        id: person?.id,
-        email: person?.contactInfo?.email,
-        name: person?.name?.display,
-      },
-      provider: "stripe",
-      gatewayId: gateway?.id || (paymentMethod as any).gatewayId
-    }
-
-    const churchObj = {
-      name: church?.name,
-      subDomain: church?.subDomain,
-      churchURL: typeof window !== "undefined" && window.location.origin,
-      logo: ""
-    }
-
-    try {
-      const result = await ApiHelper.post("/donate/charge", { ...payment, church: churchObj }, "GivingApi");
-      if (result?.status === "succeeded" || result?.status === "pending") {
-        return { success: true, errors: [] }
-      }
-
-      if (result?.raw?.message) {
-        return { success: false, errors: [result.raw.message] }
-      }
-
-    } catch (err) {
-      return { success: false, errors: ["An error occurred while saving your payment."] }
-    }
-
-  }
-
-  const validate = () => {
-    const result = [];
-    if (!firstName) result.push(Locale.label("donation.donationForm.validate.firstName"));
-    if (!lastName) result.push(Locale.label("donation.donationForm.validate.lastName"));
-    if (!email) result.push(Locale.label("donation.donationForm.validate.email"));
-    if (result.length === 0) {
-      if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) result.push(Locale.label("donation.donationForm.validate.validEmail"));
-    }
-    return result;
-  }
-
-  useImperativeHandle(ref, () => ({
-    handlePayment,
-    questionId: props.question.id
-  }));
-
-  React.useEffect(getChurchData, []);
-
-  return <div style={{ backgroundColor: "#bdbdbd", padding: 35, borderRadius: 20 }}>
-    <Grid container spacing={2}>
-      <Grid size={12}>
-        <TextField fullWidth required size="small" margin="none" style={{backgroundColor: "white", borderRadius: "4px"}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={Locale.label("person.email")} value={email} onChange={(e) => setEmail(e.target.value)} disabled={ApiHelper.isAuthenticated && UserHelper.user.email !== ""} />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6 }}>
-        <TextField fullWidth required size="small" margin="none" style={{backgroundColor: "white", borderRadius: "4px"}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={Locale.label("person.firstName")} value={firstName} onChange={(e) => setFirstName(e.target.value)} disabled={ApiHelper.isAuthenticated && UserHelper.user.firstName !== ""} />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6 }}>
-        <TextField fullWidth required size="small" margin="none" style={{backgroundColor: "white", borderRadius: "4px"}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={Locale.label("person.lastName")} value={lastName} onChange={(e) => setLastName(e.target.value)} disabled={ApiHelper.isAuthenticated && UserHelper.user.lastName !== ""} />
-      </Grid>
-      <Grid size={12}>
-        <Box sx={{ backgroundColor: "white", padding: 1.5, borderRadius: 1, color: "gray", fontWeight: "bold", fontSize: 18 }}>$ {amt}</Box>
-      </Grid>
-      <Grid size={12}>
-        <div style={{ padding: 10, border: "1px solid #CCC", borderRadius: 5, backgroundColor: "white" }}>
-          <CardElement options={formStyling} />
-        </div>
-      </Grid>
-    </Grid>
-  </div>
-});

package/src/components/FormSubmissionEdit.tsx

@@ -1,168 +0,0 @@
-"use client";
-
-import React, { useRef } from "react";
-import { loadStripe, Stripe } from "@stripe/stripe-js";
-import { ErrorMessages, InputBox, QuestionEdit } from "./";
-import { ApiHelper, Locale, UniqueIdHelper, UserHelper } from "../helpers";
-import { AnswerInterface, QuestionInterface, FormSubmissionInterface } from "@churchapps/helpers";
-
-interface Props {
-  addFormId: string,
-  contentType: string,
-  contentId: string,
-  formSubmissionId: string,
-  unRestrictedFormId?: string,
-  personId?: string,
-  churchId?: string,
-  showHeader?: boolean,
-  noBackground?:boolean,
-  updatedFunction: () => void,
-  cancelFunction?: () => void
-}
-
-export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackground = false, ...props}) => {
-  const [stripePromise, setStripe] = React.useState<Promise<Stripe>>(null);
-  const [formSubmission, setFormSubmission] = React.useState(null);
-  const [errors, setErrors] = React.useState([]);
-  const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);
-  const paymentRef = useRef<any>(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: string) => {
-    let answers = formSubmission.answers;
-    for (let i = 0; i < answers.length; i++) if (answers[i].questionId === questionId) return answers[i];
-    return null;
-  }
-
-  const setFormSubmissionData = (data: any) => {
-    const formId = props.addFormId || props.unRestrictedFormId;
-    let fs: FormSubmissionInterface = {
-      formId, contentType: props.contentType, contentId: props.contentId, answers: []
-    };
-    fs.questions = data;
-    fs.answers = [];
-    fs.questions.forEach((q) => {
-      let answer: AnswerInterface = { 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: any) => setFormSubmission(data));
-    else if (!UniqueIdHelper.isMissing(props.addFormId)) ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then((data: any) => setFormSubmissionData(data));
-    else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId)) ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then((data: any) => setFormSubmissionData(data));
-  }
-
-  const getDefaultValue = (q: QuestionInterface) => {
-    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: any) => {
-    let e: any = [];
-    fs.answers.forEach((a: AnswerInterface) => {
-
-      if (a.required && a.value === "") {
-        const q: QuestionInterface = fs.questions.find((q: QuestionInterface) => 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: AnswerInterface) => 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: any) => {
-        if (res?.[0]?.error) {
-          setErrors([res?.[0].error]);
-        } else {
-          props.updatedFunction();
-        }
-      })
-      .finally(() => {
-        setIsSubmitting(false);
-      });
-    }
-  }
-
-  const handleChange = (questionId: string, value: string) => {
-    let fs = { ...formSubmission };
-    let answer: AnswerInterface = 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: any) => {
-        if (data.length && data[0]?.publicKey) {
-          setStripe(loadStripe(data[0].publicKey));
-        }
-      });
-    }
-  }, [props.churchId]);
-
-  React.useEffect(loadData, []); //eslint-disable-line
-
-  let questionList = [];
-  if (formSubmission != null) {
-    let questions = formSubmission.questions;
-    for (let i = 0; i < questions.length; i++) questionList.push(<QuestionEdit noBackground={noBackground} key={questions[i].id} question={questions[i]} answer={getAnswer(questions[i].id)} changeFunction={handleChange} churchId={props.churchId} ref={questions[i].fieldType === "Payment" ? paymentRef : null} stripePromise={stripePromise} />);
-  }
-
-  return (
-    <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()}>
-      <ErrorMessages errors={errors} />
-      {questionList}
-    </InputBox>
-  );
-}
-

package/src/components/HelpIcon.tsx

@@ -1,12 +0,0 @@
-"use client";
-
-import React from "react";
-import { SmallButton } from "./SmallButton";
-
-interface Props { article: string; }
-
-export const HelpIcon = (props: Props) => (
-  <span style={{ float: "right", color: "#1976d2" }}>
-    <SmallButton icon="help" aria-label={"help"} onClick={() => window.open("https://support.churchapps.org/" + props.article, "_blank")} />
-  </span>
-)

package/src/components/ImageEditor.tsx

@@ -1,167 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useRef, Suspense, lazy } from "react";
-import { InputBox, SmallButton, Loading } from ".";
-import { Locale } from "../helpers";
-import "../../public/css/cropper.css";
-
-// Lazy load the Cropper component
-const Cropper = lazy(() => import("react-cropper").then(module => ({ default: module.default })));
-
-interface Props {
-  title?: string;
-  photoUrl: string;
-  aspectRatio: number;
-  onUpdate: (dataUrl?: string) => void;
-  onCancel?: () => void;
-  outputWidth?: number;
-  outputHeight?: number;
-  hideDelete?: boolean;
-}
-
-export function ImageEditor(props: Props) {
-  const [photoSrc, setPhotoSrc] = useState<string>("");
-  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
-  const cropperRef = useRef<HTMLImageElement>(null);
-  const timeoutRef = useRef<number | null>(null);
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current !== null) {
-        window.clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleSave = () => {
-    props.onUpdate(croppedImageDataUrl);
-  };
-
-  const handleDelete = () => props.onUpdate("");
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    let files;
-    if (e.target) {
-      files = e.target.files;
-    }
-    if (!files || files.length === 0) return;
-    
-    const reader = new FileReader();
-    reader.onload = () => {
-      const url = reader.result.toString();
-      setPhotoSrc(url);
-      setCroppedImageDataUrl("");
-    };
-    reader.readAsDataURL(files[0]);
-    
-    // Clear the input value to allow re-uploading the same file
-    e.target.value = "";
-  };
-
-  const selectDefaultCropZone = () => {
-    const imageElement: any = cropperRef?.current;
-    let cropper: any = imageElement?.cropper;
-    if (props.aspectRatio===0)
-    {
-      let containerData = cropper.getContainerData();
-      const imgWidth = cropper.getImageData().width;
-      const imgHeight = cropper.getImageData().height;
-      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
-      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
-      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
-    } else {
-      let desiredAspect = props.aspectRatio;
-      let containerData = cropper.getContainerData();
-      let imgAspect = cropper.getImageData().aspectRatio;
-      let scale = imgAspect / desiredAspect;
-      if (scale < 1) {
-        const imgWidth = cropper.getImageData().width;
-        let l = (containerData.width - imgWidth) / 2.0;
-        let t = (containerData.height - (containerData.height * scale)) / 2.0;
-        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
-      } else {
-        const imgHeight = cropper.getImageData().height;
-        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
-        let t = cropper.canvasData.top;
-        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
-      }
-    }
-
-  }
-
-  const handleCrop = () => {
-    if (timeoutRef.current !== null) {
-      window.clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-
-    timeoutRef.current = window.setTimeout(() => {
-      if (cropperRef.current !== null) {
-        const imageElement: any = cropperRef?.current;
-        const cropper: any = imageElement?.cropper;
-
-        //Do not enlarge if less
-        const imageData = cropper.getImageData();
-        let width = props.outputWidth || 400;
-        let height = props.outputHeight || 300;
-        if (imageData.naturalWidth < width && imageData.naturalHeight < height) {
-          width = imageData.naturalWidth;
-          height = imageData.naturalHeight;
-        }
-
-        const url = cropper.getCroppedCanvas({ width, height }).toDataURL("image/png", 0.4);
-        setCroppedImageDataUrl(url);
-      }
-    }, 200);
-  };
-
-  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
-
-  return (
-    <InputBox
-      id="cropperBox"
-      headerIcon=""
-      headerText={props.title}
-      ariaLabelDelete="deletePhoto"
-      saveText={Locale.label("common.update")}
-      saveFunction={handleSave}
-      cancelFunction={props.onCancel}
-      deleteFunction={(!props.hideDelete) && handleDelete}
-      headerActionContent={
-        <div>
-          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
-          <SmallButton
-            icon="upload"
-            text="Upload"
-            onClick={() => {
-              document.getElementById("fileUpload").click();
-            }}
-          />
-        </div>
-      }
-    >
-      <Suspense fallback={<Loading />}>
-        <Cropper
-          ref={cropperRef}
-          src={photoSrc}
-          key={photoSrc}
-          style={{ height: 240, width: "100%" }}
-          aspectRatio={props.aspectRatio}
-          guides={false}
-          crop={handleCrop}
-          autoCropArea={1}
-          viewMode={0}
-          responsive={true}
-          restore={false}
-          checkOrientation={false}
-          background={false}
-          ready={() => {
-            setTimeout(selectDefaultCropZone, 100);
-          }}
-        />
-      </Suspense>
-    </InputBox>
-  );
-}