@flozy/editor 1.6.6 → 1.6.8

package/dist/Editor/Elements/Form/Workflow/MoreOptions.js

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
+import { MoreHorizontal } from "../../../common/iconslist";
+import Icon from "../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function MoreOptions(props) {
+  const {
+    classes,
+    menus,
+    onMenuClick,
+    selectedFlow
+  } = props;
+
+  //state
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleClick = event => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = event => {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      arrow: true,
+      title: "More Options",
+      children: /*#__PURE__*/_jsxs(IconButton, {
+        sx: classes.moreOption,
+        onClick: handleClick,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: "moreHorizantal"
+        }), /*#__PURE__*/_jsx(MoreHorizontal, {
+          width: "24px",
+          height: "24px"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Menu, {
+      id: "basic-menu",
+      open: Boolean(anchorEl),
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      children: menus.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
+        sx: {
+          color: "#64748B",
+          paddingRight: "100px"
+        },
+        onClick: onMenuClick(m, selectedFlow),
+        children: m
+      }, `menu_${i}_${m}`))
+    })]
+  });
+}
+export default MoreOptions;

package/dist/Editor/Elements/Form/Workflow/Styles.js

@@ -0,0 +1,207 @@
+const FormStyles = () => ({
+  addButton: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  infoText: {
+    fontSize: '12px',
+    fontWeight: '400',
+    color: '#94A3B8'
+  },
+  bodyTextArea: {
+    '& textarea': {
+      border: 'none',
+      width: '96%',
+      maxWidth: '96%',
+      outline: 'none'
+    },
+    '& textarea: focus-visible': {
+      outline: 'none',
+      border: 'none'
+    }
+  },
+  formHeadings: {
+    fontSize: '14px',
+    fontWeight: 500,
+    paddingBottom: '10px',
+    paddingTop: '10px'
+  },
+  flowListCard: {
+    border: '1px solid #6F6F6F33',
+    borderRadius: '8px',
+    padding: '10px'
+  },
+  listHeading: {
+    fontSize: '14px',
+    fontWeight: 700
+  },
+  listSubHeading: {
+    fontSize: '12px',
+    fontWeight: 500,
+    color: '#64748B',
+    maxWidth: '380px',
+    textTransform: 'capitalize',
+    whiteSpace: "nowrap",
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  addBtnTypo: {
+    color: '#94A3B8',
+    fontWeight: 500,
+    fontSize: '12px'
+  },
+  emptyList: {
+    justifyContent: 'center',
+    display: 'flex',
+    border: '1px solid #6F6F6F33',
+    borderRadius: '8px',
+    padding: '10px',
+    color: '#94A3B8'
+  },
+  popupTitle: {
+    fontWeight: 600,
+    fontSize: '16px',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  subHeadings: {
+    fontWeight: 500,
+    fontSize: '14px'
+  },
+  radioBtn: {
+    '& .MuiFormControlLabel-label': {
+      fontSize: '14px',
+      color: '#64748B'
+    }
+  },
+  dialogTitle: {
+    '& MuiDialogTitle-root': {
+      padding: '16px 12px'
+    }
+  },
+  closeBtn: {
+    background: '#F4F6F9',
+    color: '#64748B',
+    fontSize: '14px',
+    fontWeight: 500,
+    padding: '4px 22px',
+    textTransform: 'none',
+    border: '1px solid #D8DDE1',
+    '&:hover': {
+      border: '1px solid #64748B'
+    }
+  },
+  variableBtn: {
+    background: '#F4F6F9',
+    color: '#64748B',
+    fontSize: '14px',
+    fontWeight: 500,
+    padding: '4px 22px',
+    textTransform: 'none',
+    border: '1px solid #D8DDE1',
+    '& svg': {
+      '& path': {
+        stroke: '#64748B'
+      }
+    },
+    '&:hover': {
+      border: '1px solid #64748B'
+    }
+  },
+  saveBtn: {
+    background: '#2563EB',
+    fontSize: '14px',
+    fontWeight: 500,
+    padding: '4px 24px',
+    textTransform: 'none'
+  },
+  select: {
+    minWidth: '110px',
+    '& .MuiOutlinedInput-notchedOutline': {
+      borderRadius: '8px',
+      border: '1px solid #6F6F6F33',
+      boxShadow: '0px 4px 16px 0px #0000000D'
+    },
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderRadius: '8px',
+      border: '1px solid #6F6F6F33',
+      boxShadow: '0px 4px 16px 0px #0000000D'
+    },
+    '& .MuiSelect-select': {
+      color: '#94A3B8',
+      fontSize: '14px'
+    }
+  },
+  selectList: {
+    color: '#94A3B8',
+    fontSize: '14px'
+  },
+  toolbarContainer: {
+    border: '1px solid #6F6F6F33',
+    borderRadius: '10px'
+  },
+  toolBar: {
+    padding: '5px'
+  },
+  colorButtons: {
+    "& .buttonsWrpr": {
+      display: "flex",
+      justifyContent: "center"
+    },
+    "& button": {
+      width: "16px",
+      height: "16px",
+      marginRight: "8px"
+    }
+  },
+  colorButtonSingle: {
+    "&.active": {
+      "&:before": {
+        content: '" "',
+        position: "absolute",
+        top: "-5px",
+        left: "-5px",
+        width: "calc(100% + 4px)",
+        height: "calc(100% + 4px)",
+        border: "3px solid blue",
+        borderRadius: "50%"
+      }
+    }
+  },
+  colorButtonsInner: {
+    width: "100%",
+    padding: "4px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    "& .buttonsWrpr": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    ".more-btn-cbs": {
+      display: "none"
+    },
+    "& button": {
+      width: "16px",
+      height: "16px",
+      margin: "0px 4px",
+      border: "1px solid #ccc"
+    }
+  },
+  moreOption: {
+    background: '#F4F4F4',
+    borderRadius: '8px'
+  },
+  dialogFooter: {
+    '&.MuiDialogActions-root': {
+      padding: '8px 24px'
+    }
+  },
+  toolButtons: {
+    width: '36px',
+    height: '36px'
+  }
+});
+export default FormStyles;

package/dist/Editor/Elements/Form/Workflow/UserInputs.js

@@ -0,0 +1,207 @@
+import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextareaAutosize, Tooltip } from "@mui/material";
+import React, { useState } from "react";
+import FormStyles from "./Styles";
+import Icon from "../../../common/Icon";
+import { PlusIcon, RestRight } from "../../../common/iconslist";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { AllColors } from "../../Color Picker/ColorButtons";
+import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const UserInputs = props => {
+  const {
+    element,
+    type,
+    subject,
+    handleField,
+    handleSelectedVariables,
+    handleInputReset
+  } = props;
+  const variables = element?.children;
+  const classes = FormStyles();
+  const popupClasses = PopupToolStyle();
+  const [activeColor, setActiveColor] = useState(['#000000']);
+  //state
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [colorAnchorEl, setColorAnchorEl] = useState(null);
+  const colorPopover = Boolean(colorAnchorEl);
+  const handleVariables = event => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleColorPicker = event => {
+    event.stopPropagation();
+    setColorAnchorEl(event.currentTarget);
+  };
+  const handleClose = event => {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
+  const handleColorClose = event => {
+    event.stopPropagation();
+    setColorAnchorEl(null);
+  };
+  const handleTextColor = color => () => {
+    setActiveColor(color);
+    setColorAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    sx: classes.toolbarContainer,
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        sx: classes.toolBar,
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(Grid, {
+              item: true,
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                arrow: true,
+                title: "Bold",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  sx: classes.toolButtons,
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    icon: "bold"
+                  })
+                })
+              })
+            }), /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                arrow: true,
+                title: "Underline",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  sx: classes.toolButtons,
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    icon: "underline"
+                  })
+                })
+              })
+            }), /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                arrow: true,
+                title: "Italic",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  sx: classes.toolButtons,
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    icon: "italic"
+                  })
+                })
+              })
+            }), /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                arrow: true,
+                title: "Link",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  sx: classes.toolButtons,
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    icon: "link"
+                  })
+                })
+              })
+            }), /*#__PURE__*/_jsxs(Grid, {
+              item: true,
+              children: [/*#__PURE__*/_jsx(Tooltip, {
+                arrow: true,
+                title: "Current Color",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  style: {
+                    borderRadius: '50px',
+                    background: activeColor
+                  }
+                })
+              }), /*#__PURE__*/_jsx(Tooltip, {
+                arrow: true,
+                title: "Color Picker",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: handleColorPicker,
+                  children: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {})
+                })
+              }), /*#__PURE__*/_jsx(AllColors, {
+                classes: popupClasses,
+                open: colorPopover,
+                activeColor: activeColor,
+                anchorEl: colorAnchorEl,
+                onClose: handleColorClose,
+                onSelect: handleTextColor
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          children: /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            children: [/*#__PURE__*/_jsx(Grid, {
+              item: true,
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                arrow: true,
+                title: "Reset",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: handleInputReset(type),
+                  sx: classes.toolButtons,
+                  children: /*#__PURE__*/_jsx(RestRight, {})
+                })
+              })
+            }), /*#__PURE__*/_jsxs(Grid, {
+              item: true,
+              children: [/*#__PURE__*/_jsx(Button, {
+                sx: classes.variableBtn,
+                variant: "outlined",
+                size: "small",
+                onClick: handleVariables,
+                startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
+                children: "Variables"
+              }), /*#__PURE__*/_jsx(Menu, {
+                id: "basic-menu",
+                open: Boolean(anchorEl),
+                anchorEl: anchorEl,
+                onClose: handleClose,
+                anchorOrigin: {
+                  vertical: 'bottom',
+                  horizontal: 'right'
+                },
+                transformOrigin: {
+                  vertical: 'top',
+                  horizontal: 'right'
+                },
+                children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
+                  sx: {
+                    color: "#64748B"
+                  },
+                  onClick: handleSelectedVariables(m, type),
+                  children: m.name
+                }, `menu_${i}_${m.name}`))
+              })]
+            })]
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Divider, {})]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: type === 2 && /*#__PURE__*/_jsx(TextareaAutosize, {
+        margin: "none",
+        minRows: 6,
+        value: subject,
+        onChange: handleField,
+        className: classes.bodyTextArea,
+        style: {
+          border: 'none',
+          width: "96%",
+          padding: '10px',
+          outline: "none"
+        }
+      })
+    })]
+  });
+};
+export default UserInputs;

package/dist/Editor/Elements/Form/Workflow/constant.js

@@ -0,0 +1,3 @@
+export const minutes = [30, 35, 40, 45, 50, 55];
+export const hours = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
+export const days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];

package/dist/Editor/Elements/Form/Workflow/index.js

@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from "@mui/material";
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import FormStyles from "./Styles";
+import FormWorkflow from "./FormWorkflow";
+
+//Constants
+import { minutes, hours, days } from './constant';
+import ListWorkflow from "./ListWorkflow";
+import { PlusIcon } from "../../../common/iconslist";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Workflow = props => {
+  const {
+    openWorkflow,
+    element,
+    closeWorkflow,
+    onSave
+  } = props;
+  const {
+    workflow
+  } = element;
+  const classes = FormStyles();
+  const [workflowList, setWorkflowList] = useState([]);
+  const [formData, setFormData] = useState(false);
+  const [schedule, setSchedule] = useState('immediately');
+  const [scheduleEvery, setScheduleEvery] = useState('min');
+  const currentInstant = scheduleEvery === 'min' ? minutes : scheduleEvery === 'hr' ? hours : scheduleEvery === 'day' ? days : [];
+  const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
+  const [subject, setSubject] = useState('');
+  const [bodyData, setBodyData] = useState('');
+  const [flowEdited, setFlowEdited] = useState({
+    isEdited: false,
+    listIndex: null
+  });
+  useEffect(() => {
+    setWorkflowList(workflow || []);
+  }, [workflow]);
+  useEffect(() => {
+    setScheduleOn(currentInstant[0]);
+  }, [currentInstant]);
+  const handleAddFormWorkflow = () => {
+    setFormData(true);
+  };
+  const onFormBack = () => {
+    setFormData(false);
+    setBodyData('');
+    setSubject('');
+    setSchedule('immediately');
+  };
+  const saveFormWorkflow = () => {
+    let workflowData = [...workflowList];
+    let data = {
+      schedule_type: schedule,
+      schedule_every: schedule === 'after' ? scheduleEvery : 0,
+      schedule_on: schedule === 'after' ? scheduleOn : 0,
+      subject_data: subject,
+      body_data: bodyData
+    };
+    if (flowEdited.isEdited) {
+      workflowData[flowEdited.listIndex] = data;
+    } else {
+      workflowData.push(data);
+    }
+    let saveData = {
+      workflow: workflowData
+    };
+    onSave(saveData);
+    setFormData(false);
+    setBodyData('');
+    setSubject('');
+    setSchedule('immediately');
+    setFlowEdited({
+      isEdited: false,
+      listIndex: null
+    });
+  };
+  const handleEditFormWorkflow = index => {
+    const result = workflowList.find((flow, indx) => indx === index);
+    setBodyData(result.body_data);
+    setSubject(result.subject_data);
+    setSchedule(result.schedule_type);
+    setFormData(true);
+    setFlowEdited({
+      isEdited: true,
+      listIndex: index
+    });
+  };
+  const handleDeleteFormWorkflow = index => {
+    const result = workflowList.filter((flow, indx) => indx !== index);
+    let saveData = {
+      workflow: result
+    };
+    onSave(saveData);
+    setWorkflowList(result);
+  };
+  const handleSelectedVariables = (data, type) => () => {
+    if (type === 1) {
+      let newString = subject.concat(` %${data.name}%`);
+      setSubject(newString);
+    } else if (type === 2) {
+      let newString = bodyData.concat(` %${data.name}%`);
+      setBodyData(newString);
+    }
+  };
+  const handleInputReset = type => () => {
+    if (type === 1) {
+      setSubject("");
+    } else if (type === 2) {
+      setBodyData("");
+    }
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: openWorkflow,
+    onClose: closeWorkflow,
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsxs(DialogTitle, {
+      sx: classes.popupTitle,
+      style: {
+        padding: formData ? '16px 12px' : '16px 24px',
+        justifyContent: !formData ? "space-between" : ""
+      },
+      children: [formData && /*#__PURE__*/_jsx(IconButton, {
+        onClick: onFormBack,
+        children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
+      }), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        sx: {
+          textTransform: 'none',
+          background: '#EBF1F9'
+        },
+        onClick: handleAddFormWorkflow,
+        size: "small",
+        startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
+        children: " New Email"
+      })]
+    }), /*#__PURE__*/_jsxs(DialogContent, {
+      dividers: true,
+      children: [!formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(ListWorkflow, {
+        workflow: workflowList,
+        handleEditFormWorkflow: handleEditFormWorkflow,
+        handleDeleteFormWorkflow: handleDeleteFormWorkflow
+      }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(FormWorkflow, {
+        subject: subject,
+        schedule: schedule,
+        bodyData: bodyData,
+        element: element,
+        currentInstant: currentInstant,
+        scheduleEvery: scheduleEvery,
+        scheduleOn: scheduleOn,
+        onFormBack: onFormBack,
+        setSubject: setSubject,
+        setBodyData: setBodyData,
+        setSchedule: setSchedule,
+        setScheduleEvery: setScheduleEvery,
+        setScheduleOn: setScheduleOn,
+        handleSelectedVariables: handleSelectedVariables,
+        handleInputReset: handleInputReset
+      })]
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      sx: classes.dialogFooter,
+      children: [/*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        sx: classes.closeBtn,
+        variant: "outlined",
+        onClick: closeWorkflow,
+        size: "small",
+        children: "Close"
+      }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(Button, {
+        sx: classes.saveBtn,
+        variant: "contained",
+        onClick: saveFormWorkflow,
+        size: "small",
+        children: "Save"
+      })]
+    })]
+  });
+};
+export default Workflow;