@churchapps/apphelper 0.1.6 → 0.1.7

package/src/components/QuestionEdit.tsx

@@ -1,63 +1,63 @@
-import React from "react";
-import { MuiTelInput } from "mui-tel-input";
-import { AnswerInterface, QuestionInterface } from "../interfaces";
-import { Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField } from "@mui/material";
-
-interface Props {
-  answer: AnswerInterface
-  question: QuestionInterface,
-  noBackground?: boolean,
-  changeFunction: (questionId: string, value: string) => void
-}
-
-export const QuestionEdit: React.FC<Props> = ({noBackground = false, ...props}) => {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    props.changeFunction(props.question.id, e.target.value);
-  }
-  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) {
-      for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
-    }
-
-    let answerValue = (props.answer === null) ? "" : props.answer.value
-    switch (q.fieldType) {
-      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Multiple Choice": {
-        input = (
-          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
-            <InputLabel>{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>{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 "Whole Number":
-      case "Decimal":
-        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{shrink: true}} 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}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Phone Number": input = <MuiTelInput fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} 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" 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} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      default: return null;
-    }
-    return input;
-  }
-
-}
-
+import React from "react";
+import { MuiTelInput } from "mui-tel-input";
+import { AnswerInterface, QuestionInterface } from "../interfaces";
+import { Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField } from "@mui/material";
+
+interface Props {
+  answer: AnswerInterface
+  question: QuestionInterface,
+  noBackground?: boolean,
+  changeFunction: (questionId: string, value: string) => void
+}
+
+export const QuestionEdit: React.FC<Props> = ({noBackground = false, ...props}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    props.changeFunction(props.question.id, e.target.value);
+  }
+  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) {
+      for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
+    }
+
+    let answerValue = (props.answer === null) ? "" : props.answer.value
+    switch (q.fieldType) {
+      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Multiple Choice": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel>{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>{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 "Whole Number":
+      case "Decimal":
+        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{shrink: true}} 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}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Phone Number": input = <MuiTelInput fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} 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" 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} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      default: return null;
+    }
+    return input;
+  }
+
+}
+

package/src/components/SmallButton.tsx

@@ -1,39 +1,39 @@
-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
-}
-
-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">
-        <Icon>{props.icon}</Icon>{(props.text) ? props.text : ""}
-      </Button>
-    </Tooltip>
-  );
-});
-
-SmallButton.displayName = "SmallButton";
+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
+}
+
+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">
+        <Icon>{props.icon}</Icon>{(props.text) ? props.text : ""}
+      </Button>
+    </Tooltip>
+  );
+});
+
+SmallButton.displayName = "SmallButton";

package/src/components/SupportModal.tsx

@@ -1,26 +1,26 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Icon, Stack } from "@mui/material";
-import React from "react";
-
-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}>
-      <DialogTitle>Get Support</DialogTitle>
-      <DialogContent>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>mail</Icon> Email:</Stack></b> <a href={"mailto:support@livecs.org" + subject}>support@livecs.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"}}>phone_iphone</Icon> Phone:</Stack></b> <a href="tel:+19189942638">+1 (918) 994-2638</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> Messenger:</Stack></b> <a href="https://m.me/livecsolutions" target="_new">https://m.me/livecsolutions</a></Stack>
-        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> Knowledge Base:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
-      </DialogContent>
-      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
-        <Button variant="outlined" onClick={onClose}>Close</Button>
-      </DialogActions>
-    </Dialog>
-  </>);
-};
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Icon, Stack } from "@mui/material";
+import React from "react";
+
+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}>
+      <DialogTitle>Get Support</DialogTitle>
+      <DialogContent>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>mail</Icon> Email:</Stack></b> <a href={"mailto:support@livecs.org" + subject}>support@livecs.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"}}>phone_iphone</Icon> Phone:</Stack></b> <a href="tel:+19189942638">+1 (918) 994-2638</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> Messenger:</Stack></b> <a href="https://m.me/livecsolutions" target="_new">https://m.me/livecsolutions</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> Knowledge Base:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
+      </DialogContent>
+      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
+        <Button variant="outlined" onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  </>);
+};

package/src/components/TabPanel.tsx

@@ -1,34 +1,34 @@
-import { Box, styled } from "@mui/material";
-import React from "react"
-
-interface Props {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
-export const TabPanel: React.FC<Props> = (props: Props) => {
-
-  const { children, value, index } = props;
-  const StyledMenuBox = styled(Box)(
-    ({ theme }) => ({
-      paddingTop: 10,
-      "& .MuiListItemButton-root": { paddingLeft: 30 },
-      "& .MuiListItemIcon-root": {
-        color: theme.palette.primary.main
-      },
-      "& .MuiListItemText-root": { color: theme.palette.text.primary },
-      "& .selected .MuiListItemText-root span": { fontWeight: "bold" }
-    })
-  );
-
-  return (
-    <div role="tabpanel" hidden={value !== index} id={`userMenuPanel-${index}`}>
-      {value === index && (
-        <StyledMenuBox>
-          <Box>{children}</Box>
-        </StyledMenuBox>
-      )}
-    </div>
-  );
-}
+import { Box, styled } from "@mui/material";
+import React from "react"
+
+interface Props {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+export const TabPanel: React.FC<Props> = (props: Props) => {
+
+  const { children, value, index } = props;
+  const StyledMenuBox = styled(Box)(
+    ({ theme }) => ({
+      paddingTop: 10,
+      "& .MuiListItemButton-root": { paddingLeft: 30 },
+      "& .MuiListItemIcon-root": {
+        color: theme.palette.primary.main
+      },
+      "& .MuiListItemText-root": { color: theme.palette.text.primary },
+      "& .selected .MuiListItemText-root span": { fontWeight: "bold" }
+    })
+  );
+
+  return (
+    <div role="tabpanel" hidden={value !== index} id={`userMenuPanel-${index}`}>
+      {value === index && (
+        <StyledMenuBox>
+          <Box>{children}</Box>
+        </StyledMenuBox>
+      )}
+    </div>
+  );
+}

package/src/components/gallery/GalleryModal.tsx

@@ -1,102 +1,102 @@
-import { FileHelper, ApiHelper } from "../../helpers";
-import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
-import { } from "../../helpers";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, Grid, InputLabel, MenuItem, Select, Tab, Tabs } from "@mui/material";
-import React, { useState } from "react";
-import { ImageEditor } from "../ImageEditor";
-import { TabPanel } from "../TabPanel";
-import { StockPhotos } from "./StockPhotos";
-
-interface Props {
-  aspectRatio: number,
-  onClose: () => void,
-  onSelect: (img: string) => void
-}
-
-export const GalleryModal: React.FC<Props> = (props: Props) => {
-  const [images, setImages] = useState<string[]>([]);
-  const [tabIndex, setTabIndex] = React.useState(0);
-  const [aspectRatio, setAspectRatio] = React.useState(Math.round(props.aspectRatio * 100) / 100);
-  const [editorPhotoUrl, setEditorPhotoUrl] = React.useState("");
-
-  const handleTabChange = (el: any, newValue: any) => { setTabIndex(newValue); }
-
-  const loadData = () => { ApiHelper.get("/gallery/" + aspectRatio.toString(), "ContentApi").then(data => setImages(data.images)); }
-
-  const handleImageUpdated = async (dataUrl: string) => {
-    const fileName = Math.floor(Date.now() / 1000).toString() + ".jpg"
-    const blob = FileHelper.dataURLtoBlob(dataUrl);
-    const file = new File([blob], "file_name");
-
-    const params = { folder: aspectRatio.toString(), fileName };
-    const presigned = await ApiHelper.post("/gallery/requestUpload", params, "ContentApi");
-    const doUpload = presigned.key !== undefined;
-    if (doUpload) await FileHelper.postPresignedFile(presigned, file, () => { });
-    //return doUpload;
-    setTabIndex(0);
-    loadData();
-  };
-
-  React.useEffect(() => { if (aspectRatio !== props.aspectRatio) setAspectRatio(Math.round(props.aspectRatio * 100) / 100) }, [props.aspectRatio]); //eslint-disable-line
-  React.useEffect(loadData, [aspectRatio]); //eslint-disable-line
-
-  const getImages = () => {
-    let result: JSX.Element[] = [];
-    images.forEach(img => {
-      result.push(<Grid item md={4} xs={12}>
-        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(CommonEnvironmentHelper.ContentRoot + "/" + img) }}>
-          <img src={CommonEnvironmentHelper.ContentRoot + "/" + img} className="img-fluid" alt="custom" />
-        </a>
-      </Grid>);
-    })
-    return result;
-  }
-
-  const handleStockSelect = (url: string) => {
-    setEditorPhotoUrl(url);
-    setTabIndex(1);
-  }
-
-  return (<>
-    <Dialog open={true} onClose={props.onClose}>
-      <DialogTitle>Select a Photo</DialogTitle>
-      <DialogContent style={{ minWidth: 600 }}>
-
-        <Tabs variant="fullWidth" value={tabIndex} onChange={handleTabChange}>
-          <Tab label="Gallery" />
-          <Tab label="Upload" />
-          <Tab label="Stock Photos" />
-        </Tabs>
-        <TabPanel value={tabIndex} index={0}>
-          {(props.aspectRatio === 0) && (
-            <FormControl fullWidth>
-              <InputLabel>Aspect Ratio</InputLabel>
-              <Select size="small" label="Aspect Ratio" name="aspectRatio" value={aspectRatio} onChange={(e) => setAspectRatio(parseFloat(e.target.value.toString()))}>
-                <MenuItem value="0">Free Form</MenuItem>
-                <MenuItem value="1">1:1</MenuItem>
-                <MenuItem value="2">2:1</MenuItem>
-                <MenuItem value="4">4:1</MenuItem>
-                <MenuItem value="1.33">4:3</MenuItem>
-                <MenuItem value="1.78">16:9</MenuItem>
-                <MenuItem value="0.5">1:2</MenuItem>
-                <MenuItem value="0.5625">9:16</MenuItem>
-              </Select>
-            </FormControl>
-          )}
-          <Grid container spacing={3} alignItems="center">
-            {getImages()}
-          </Grid>
-        </TabPanel>
-        <TabPanel value={tabIndex} index={1}>
-          <ImageEditor onUpdate={handleImageUpdated} photoUrl={editorPhotoUrl} aspectRatio={aspectRatio} outputWidth={1280} outputHeight={768} hideDelete={true} />
-        </TabPanel>
-        <TabPanel value={tabIndex} index={2}>
-          <StockPhotos aspectRatio={aspectRatio} onSelect={props.onSelect} onStockSelect={handleStockSelect} />
-        </TabPanel>
-      </DialogContent>
-      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
-        <Button variant="outlined" onClick={props.onClose}>Close</Button>
-      </DialogActions>
-    </Dialog>
-  </>);
-};
+import { FileHelper, ApiHelper } from "../../helpers";
+import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
+import { } from "../../helpers";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, Grid, InputLabel, MenuItem, Select, Tab, Tabs } from "@mui/material";
+import React, { useState } from "react";
+import { ImageEditor } from "../ImageEditor";
+import { TabPanel } from "../TabPanel";
+import { StockPhotos } from "./StockPhotos";
+
+interface Props {
+  aspectRatio: number,
+  onClose: () => void,
+  onSelect: (img: string) => void
+}
+
+export const GalleryModal: React.FC<Props> = (props: Props) => {
+  const [images, setImages] = useState<string[]>([]);
+  const [tabIndex, setTabIndex] = React.useState(0);
+  const [aspectRatio, setAspectRatio] = React.useState(Math.round(props.aspectRatio * 100) / 100);
+  const [editorPhotoUrl, setEditorPhotoUrl] = React.useState("");
+
+  const handleTabChange = (el: any, newValue: any) => { setTabIndex(newValue); }
+
+  const loadData = () => { ApiHelper.get("/gallery/" + aspectRatio.toString(), "ContentApi").then(data => setImages(data.images)); }
+
+  const handleImageUpdated = async (dataUrl: string) => {
+    const fileName = Math.floor(Date.now() / 1000).toString() + ".jpg"
+    const blob = FileHelper.dataURLtoBlob(dataUrl);
+    const file = new File([blob], "file_name");
+
+    const params = { folder: aspectRatio.toString(), fileName };
+    const presigned = await ApiHelper.post("/gallery/requestUpload", params, "ContentApi");
+    const doUpload = presigned.key !== undefined;
+    if (doUpload) await FileHelper.postPresignedFile(presigned, file, () => { });
+    //return doUpload;
+    setTabIndex(0);
+    loadData();
+  };
+
+  React.useEffect(() => { if (aspectRatio !== props.aspectRatio) setAspectRatio(Math.round(props.aspectRatio * 100) / 100) }, [props.aspectRatio]); //eslint-disable-line
+  React.useEffect(loadData, [aspectRatio]); //eslint-disable-line
+
+  const getImages = () => {
+    let result: JSX.Element[] = [];
+    images.forEach(img => {
+      result.push(<Grid item md={4} xs={12}>
+        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(CommonEnvironmentHelper.ContentRoot + "/" + img) }}>
+          <img src={CommonEnvironmentHelper.ContentRoot + "/" + img} className="img-fluid" alt="custom" />
+        </a>
+      </Grid>);
+    })
+    return result;
+  }
+
+  const handleStockSelect = (url: string) => {
+    setEditorPhotoUrl(url);
+    setTabIndex(1);
+  }
+
+  return (<>
+    <Dialog open={true} onClose={props.onClose}>
+      <DialogTitle>Select a Photo</DialogTitle>
+      <DialogContent style={{ minWidth: 600 }}>
+
+        <Tabs variant="fullWidth" value={tabIndex} onChange={handleTabChange}>
+          <Tab label="Gallery" />
+          <Tab label="Upload" />
+          <Tab label="Stock Photos" />
+        </Tabs>
+        <TabPanel value={tabIndex} index={0}>
+          {(props.aspectRatio === 0) && (
+            <FormControl fullWidth>
+              <InputLabel>Aspect Ratio</InputLabel>
+              <Select size="small" label="Aspect Ratio" name="aspectRatio" value={aspectRatio} onChange={(e) => setAspectRatio(parseFloat(e.target.value.toString()))}>
+                <MenuItem value="0">Free Form</MenuItem>
+                <MenuItem value="1">1:1</MenuItem>
+                <MenuItem value="2">2:1</MenuItem>
+                <MenuItem value="4">4:1</MenuItem>
+                <MenuItem value="1.33">4:3</MenuItem>
+                <MenuItem value="1.78">16:9</MenuItem>
+                <MenuItem value="0.5">1:2</MenuItem>
+                <MenuItem value="0.5625">9:16</MenuItem>
+              </Select>
+            </FormControl>
+          )}
+          <Grid container spacing={3} alignItems="center">
+            {getImages()}
+          </Grid>
+        </TabPanel>
+        <TabPanel value={tabIndex} index={1}>
+          <ImageEditor onUpdate={handleImageUpdated} photoUrl={editorPhotoUrl} aspectRatio={aspectRatio} outputWidth={1280} outputHeight={768} hideDelete={true} />
+        </TabPanel>
+        <TabPanel value={tabIndex} index={2}>
+          <StockPhotos aspectRatio={aspectRatio} onSelect={props.onSelect} onStockSelect={handleStockSelect} />
+        </TabPanel>
+      </DialogContent>
+      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
+        <Button variant="outlined" onClick={props.onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  </>);
+};