@flozy/editor 2.1.0 → 2.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. package/dist/Editor/CommonEditor.js +35 -5
  2. package/dist/Editor/Elements/Button/EditorButton.js +2 -1
  3. package/dist/Editor/Elements/Color Picker/ColorButtons.js +21 -7
  4. package/dist/Editor/Elements/Color Picker/ColorPicker.js +18 -10
  5. package/dist/Editor/Elements/Color Picker/colorPicker.svg +14 -0
  6. package/dist/Editor/Elements/Embed/Image.js +13 -2
  7. package/dist/Editor/Elements/Form/Form.js +1 -1
  8. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +20 -5
  9. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +132 -129
  10. package/dist/Editor/Elements/Form/Workflow/Styles.js +16 -10
  11. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +21 -180
  12. package/dist/Editor/Elements/Form/Workflow/index.js +25 -6
  13. package/dist/Editor/Elements/Grid/Grid.js +13 -6
  14. package/dist/Editor/Elements/{SimpleText.js → SimpleText/index.js} +5 -43
  15. package/dist/Editor/Elements/SimpleText/style.js +40 -0
  16. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  17. package/dist/Editor/Elements/Variables/Style.js +29 -4
  18. package/dist/Editor/Elements/Variables/VariableButton.js +4 -4
  19. package/dist/Editor/Styles/EditorStyles.js +18 -0
  20. package/dist/Editor/Toolbar/Basic/index.js +54 -25
  21. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +46 -0
  22. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +41 -0
  23. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +72 -0
  24. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +92 -0
  25. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +172 -0
  26. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +124 -0
  27. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +73 -0
  28. package/dist/Editor/Toolbar/PopupTool/index.js +34 -33
  29. package/dist/Editor/assets/svg/DownArrowIcon.js +16 -0
  30. package/dist/Editor/assets/svg/PaintIcon.js +15 -0
  31. package/dist/Editor/assets/svg/TextToolIcon.js +32 -0
  32. package/dist/Editor/common/Section/index.js +1 -43
  33. package/dist/Editor/common/Section/styles.js +44 -0
  34. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +10 -0
  35. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +3 -1
  36. package/dist/Editor/common/StyleBuilder/gridStyle.js +7 -5
  37. package/dist/Editor/common/StyleBuilder/index.js +8 -0
  38. package/dist/Editor/helper/deserialize/index.js +10 -6
  39. package/dist/Editor/plugins/withEmbeds.js +0 -1
  40. package/dist/Editor/plugins/withHTML.js +36 -4
  41. package/dist/Editor/service/formSubmit.js +2 -1
  42. package/dist/Editor/utils/button.js +3 -1
  43. package/dist/Editor/utils/formfield.js +2 -0
  44. package/dist/Editor/utils/helper.js +40 -1
  45. package/package.json +1 -1
@@ -2,7 +2,7 @@
2
2
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
3
3
  import { createEditor, Transforms } from "slate";
4
4
  import { Slate, Editable, ReactEditor } from "slate-react";
5
- import { useDebounce } from "use-debounce";
5
+ import { useDebounce, useDebouncedCallback } from "use-debounce";
6
6
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
7
7
  import CodeToText from "./Elements/CodeToText/CodeToText";
8
8
  import { draftToSlate } from "./utils/draftToSlate";
@@ -30,6 +30,8 @@ import "animate.css";
30
30
  import decorators from "./utils/Decorators";
31
31
  import useElement from "./utils/customHooks/useElement";
32
32
  import { getTRBLBreakPoints } from "./helper/theme";
33
+ import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
34
+ import useWindowResize from "./hooks/useWindowResize";
33
35
  import { jsx as _jsx } from "react/jsx-runtime";
34
36
  import { jsxs as _jsxs } from "react/jsx-runtime";
35
37
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -93,6 +95,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
93
95
  w: null,
94
96
  h: null
95
97
  });
98
+ const [isScrolling, setIsScrolling] = useState(false);
99
+ const [isTextSelected, setIsTextSelected] = useState(false);
100
+ const [size] = useWindowResize();
96
101
  const {
97
102
  needDotsBG,
98
103
  footer,
@@ -341,6 +346,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
341
346
  backgroundSize: "40px 40px",
342
347
  backgroundPosition: "-19px -19px"
343
348
  } : {};
349
+ const handleScrollStop = useDebouncedCallback(() => {
350
+ setIsScrolling(false);
351
+ }, 200);
352
+ const handleScroll = () => {
353
+ setIsScrolling(true);
354
+ handleScrollStop();
355
+ };
344
356
  const hasTopBanner = () => {
345
357
  const tb = editor.children[0];
346
358
  return tb?.type === "topbanner" ? tb : null;
@@ -353,6 +365,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
353
365
  customProps: customProps
354
366
  }) : null;
355
367
  };
368
+ const hideMiniToolBar = useMemo(() => {
369
+ if (readOnly) {
370
+ return true;
371
+ }
372
+
373
+ // if (size?.device === "xs" && isTextSelected) {
374
+ // return true;
375
+ // }
376
+ }, [readOnly, isTextSelected]);
356
377
  return /*#__PURE__*/_jsx(EditorProvider, {
357
378
  theme: theme,
358
379
  editor: editor,
@@ -375,18 +396,24 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
375
396
  children: [/*#__PURE__*/_jsx(DragAndDrop, {
376
397
  children: /*#__PURE__*/_jsx(Overlay, {
377
398
  children: /*#__PURE__*/_jsx(Box, {
378
- className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""}`,
399
+ className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content`,
379
400
  sx: classes.slateWrapper,
380
401
  id: "slate-wrapper-scroll-container",
381
402
  style: {
382
403
  background: pageColor || "",
383
404
  color: pageTextColor || ""
384
405
  },
406
+ onClick: e => {
407
+ handleInsertLastElement(e, editor);
408
+ },
409
+ onScroll: handleScroll,
385
410
  children: /*#__PURE__*/_jsxs(Box, {
386
411
  component: "div",
387
412
  className: "max-content",
413
+ "data-info": outsideEditorClickLabel,
388
414
  children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
389
415
  className: "scroll-area",
416
+ "data-info": outsideEditorClickLabel,
390
417
  children: /*#__PURE__*/_jsxs(Box, {
391
418
  component: "div",
392
419
  ref: editorWrapper,
@@ -404,9 +431,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
404
431
  minHeight: "87%",
405
432
  maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
406
433
  },
434
+ "data-info": outsideEditorClickLabel,
407
435
  children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
408
436
  onDrawerOpen: onDrawerOpen,
409
- theme: theme
437
+ theme: theme,
438
+ setIsTextSelected: setIsTextSelected
410
439
  }) : null, /*#__PURE__*/_jsx(Editable, {
411
440
  className: "innert-editor-textbox",
412
441
  readOnly: isReadOnly,
@@ -426,7 +455,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
426
455
  theme: theme
427
456
  }) : null]
428
457
  })
429
- }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
458
+ }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
430
459
  customProps: customProps,
431
460
  toolbarOptions: toolbarOptions,
432
461
  theme: theme
@@ -434,9 +463,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
434
463
  sx: {
435
464
  color: "rgb(100, 116, 139)",
436
465
  fontSize: "13px",
437
- paddingBottom: "12px"
466
+ paddingBottom: hideMiniToolBar ? "0px" : "12px"
438
467
  },
439
468
  align: "center",
469
+ "data-info": outsideEditorClickLabel,
440
470
  children: footer
441
471
  })]
442
472
  })
@@ -5,11 +5,11 @@ import { IconButton, Tooltip, Box } from "@mui/material";
5
5
  import * as fIcons from "@mui/icons-material";
6
6
  import SettingsIcon from "@mui/icons-material/Settings";
7
7
  import OpenInNewIcon from "@mui/icons-material/OpenInNew";
8
- import DeleteIcon from "@mui/icons-material/Delete";
9
8
  import ButtonPopup from "./ButtonPopup";
10
9
  import { actionButtonRedirect } from "../../service/actionTrigger";
11
10
  import { WorkflowIcon } from "../../common/iconslist";
12
11
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
12
+ import { windowVar } from "../../utils/helper";
13
13
  import { jsx as _jsx } from "react/jsx-runtime";
14
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
15
  const EditorButton = props => {
@@ -53,6 +53,7 @@ const EditorButton = props => {
53
53
  } = buttonLink || {};
54
54
  const isTrigger = linkType === "actionTrigger";
55
55
  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
56
+ windowVar.lastButtonProps = element;
56
57
  const onClick = async e => {
57
58
  if (readOnly) {
58
59
  if (isTrigger) {
@@ -3,6 +3,7 @@ import { Box, IconButton, Popover } from "@mui/material";
3
3
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
4
4
  import Button from "../../common/Button";
5
5
  import { colors } from "./defaultColors";
6
+ import ColorPicker from "./colorPicker.svg";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  let c = [];
@@ -104,7 +105,11 @@ const ColorButtons = props => {
104
105
  id,
105
106
  onSelect,
106
107
  classes,
107
- activeColor
108
+ activeColor,
109
+ forMiniTool,
110
+ openColorTool,
111
+ onClose,
112
+ onColorPickerClick
108
113
  } = props;
109
114
  const [row1, ...restRows] = ColorChunks([]);
110
115
  const [anchorEl, setAnchorEl] = useState(null);
@@ -114,6 +119,9 @@ const ColorButtons = props => {
114
119
  };
115
120
  const handleClose = () => {
116
121
  setAnchorEl(null);
122
+ if (onClose) {
123
+ onClose();
124
+ }
117
125
  };
118
126
  const handleSelect = color => () => {
119
127
  onSelect(color);
@@ -121,7 +129,7 @@ const ColorButtons = props => {
121
129
  return /*#__PURE__*/_jsxs(Box, {
122
130
  component: "span",
123
131
  sx: classes.colorButtons,
124
- children: [/*#__PURE__*/_jsx(Box, {
132
+ children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
125
133
  className: "buttonsWrpr first",
126
134
  children: [row1].map((m, i) => {
127
135
  return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -134,9 +142,9 @@ const ColorButtons = props => {
134
142
  activeColor: activeColor
135
143
  }, `si_btn_row1_${m}_${i}`);
136
144
  })
137
- }), /*#__PURE__*/_jsx(Popover, {
138
- open: open,
139
- anchorEl: anchorEl,
145
+ }), /*#__PURE__*/_jsxs(Popover, {
146
+ open: open || openColorTool,
147
+ anchorEl: anchorEl || openColorTool,
140
148
  onClose: handleClose,
141
149
  anchorOrigin: {
142
150
  vertical: "bottom",
@@ -148,7 +156,7 @@ const ColorButtons = props => {
148
156
  },
149
157
  sx: classes.colorPopper,
150
158
  className: "colorPopper",
151
- children: /*#__PURE__*/_jsx(Box, {
159
+ children: [/*#__PURE__*/_jsx(Box, {
152
160
  sx: classes.colorButtonsInner,
153
161
  children: restRows.map((m, i) => {
154
162
  return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -160,7 +168,13 @@ const ColorButtons = props => {
160
168
  activeColor: activeColor
161
169
  }, `si_btn_${m}_${i}`);
162
170
  })
163
- })
171
+ }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
172
+ onClick: onColorPickerClick,
173
+ children: /*#__PURE__*/_jsx("img", {
174
+ src: ColorPicker,
175
+ alt: "color wheel"
176
+ })
177
+ }) : null]
164
178
  })]
165
179
  });
166
180
  };
@@ -16,14 +16,18 @@ const DEFAULT_COLOR = {
16
16
  color: "#000000",
17
17
  bgcolor: "#FFFFFF"
18
18
  };
19
- const ColorPicker = ({
20
- id,
21
- format,
22
- editor,
23
- showHex,
24
- title,
25
- classes
26
- }) => {
19
+ const ColorPicker = props => {
20
+ const {
21
+ id,
22
+ format,
23
+ editor,
24
+ showHex,
25
+ title,
26
+ classes,
27
+ forMiniTool,
28
+ openColorTool,
29
+ closeColorTool
30
+ } = props;
27
31
  const {
28
32
  theme
29
33
  } = useEditorContext();
@@ -55,7 +59,7 @@ const ColorPicker = ({
55
59
  };
56
60
  const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
57
61
  return /*#__PURE__*/_jsxs(_Fragment, {
58
- children: [/*#__PURE__*/_jsx(Tooltip, {
62
+ children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
59
63
  title: title,
60
64
  arrow: true,
61
65
  children: /*#__PURE__*/_jsx(IconButton, {
@@ -73,7 +77,11 @@ const ColorPicker = ({
73
77
  classes: pickerStyles,
74
78
  onSelect: onSelect,
75
79
  activeColor: activeColor,
76
- id: id
80
+ id: id,
81
+ forMiniTool: forMiniTool,
82
+ openColorTool: openColorTool,
83
+ onClose: closeColorTool,
84
+ onColorPickerClick: onOpen
77
85
  }, id), /*#__PURE__*/_jsx(Popover, {
78
86
  open: open,
79
87
  anchorEl: anchorEl,
@@ -0,0 +1,14 @@
1
+ <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="13" cy="13" r="11.5" fill="#E9F3FE" stroke="url(#paint0_linear_15513_22074)" stroke-width="3"/>
3
+ <path d="M13.168 6C13.168 6 8 11.9233 8 14.8319C8 18.0176 10.6552 20 13.168 20C15.8326 20 18.3359 17.9129 18.3359 14.8319C18.3359 11.9233 13.168 6 13.168 6ZM16.7402 15.7079C16.4528 17.3396 15.0339 18.0548 13.8992 18.0548C13.8071 18.0543 17.1447 16.6134 15.8583 12.3032C16.5362 13.0678 16.9627 14.4448 16.7402 15.7079Z" fill="#778599"/>
4
+ <defs>
5
+ <linearGradient id="paint0_linear_15513_22074" x1="20.9965" y1="23.8333" x2="5.28819" y2="2.16667" gradientUnits="userSpaceOnUse">
6
+ <stop stop-color="#7025EB"/>
7
+ <stop offset="0.170377" stop-color="#30C8E9"/>
8
+ <stop offset="0.351324" stop-color="#2967F0"/>
9
+ <stop offset="0.537615" stop-color="#DE1E1E"/>
10
+ <stop offset="0.754249" stop-color="#EECE28"/>
11
+ <stop offset="1" stop-color="#64EA61"/>
12
+ </linearGradient>
13
+ </defs>
14
+ </svg>
@@ -30,7 +30,9 @@ const Image = ({
30
30
  width: oldWidth,
31
31
  xsHidden,
32
32
  objectFit,
33
- frame = null
33
+ frame = null,
34
+ webAddress,
35
+ isNewTab
34
36
  } = element;
35
37
  const {
36
38
  readOnly
@@ -86,6 +88,14 @@ const Image = ({
86
88
  anchor: Editor.start(editor, path),
87
89
  focus: Editor.end(editor, path)
88
90
  });
91
+ if (webAddress) {
92
+ const refUrl = webAddress ? webAddress.includes("http") ? webAddress : `//${webAddress}` : "Link";
93
+ if (isNewTab) {
94
+ window.open(refUrl, "_blank").focus();
95
+ } else {
96
+ window.location.href = refUrl;
97
+ }
98
+ }
89
99
  };
90
100
  const onSettings = () => {
91
101
  setOpenSettings(true);
@@ -149,7 +159,8 @@ const Image = ({
149
159
  objectFit: "cover",
150
160
  boxShadow: boxShadow || "none",
151
161
  height: objectFit ? "100%" : "auto",
152
- opacity: frame ? 0 : 1
162
+ opacity: frame ? 0 : 1,
163
+ cursor: webAddress ? "pointer" : ""
153
164
  },
154
165
  alt: alt,
155
166
  src: url,
@@ -71,10 +71,10 @@ const Form = props => {
71
71
  const formData = new FormData(formEle?.current);
72
72
  setLoading(true);
73
73
  let response = {};
74
- const emailObject = getFieldProps("field_type", "email");
75
74
  let user_email = "";
76
75
  const validations = [];
77
76
  for (let pair of formData.entries()) {
77
+ const emailObject = getFieldProps("element", "email");
78
78
  if (emailObject?.name === pair[0]) {
79
79
  user_email = pair[1];
80
80
  }
@@ -26,8 +26,12 @@ const FormWorkflow = props => {
26
26
  const [anchorEl, setAnchorEl] = useState(null);
27
27
  const variables = element?.children;
28
28
  const type = 1;
29
- const handleBodyField = event => {
30
- setBodyData(event.target.value);
29
+ const handleBodyField = data => {
30
+ // setBodyData(data);
31
+ };
32
+ const onSaveBodyField = data => {
33
+ let bodyData = typeof data === 'string' ? JSON.parse(data) : data;
34
+ setBodyData(bodyData);
31
35
  };
32
36
  const handleScheduleInstant = event => {
33
37
  setScheduleEvery(event.target.value);
@@ -67,11 +71,11 @@ const FormWorkflow = props => {
67
71
  children: [/*#__PURE__*/_jsx(Grid, {
68
72
  item: true,
69
73
  sx: classes.radioBtn,
70
- children: /*#__PURE__*/_jsx(RadioGroup, {
74
+ children: /*#__PURE__*/_jsxs(RadioGroup, {
71
75
  name: "set timing",
72
76
  value: schedule,
73
77
  defaultValue: 1,
74
- children: /*#__PURE__*/_jsx(FormControlLabel, {
78
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
75
79
  value: "immediately",
76
80
  label: "Immediately",
77
81
  onChange: () => {
@@ -80,7 +84,16 @@ const FormWorkflow = props => {
80
84
  control: /*#__PURE__*/_jsx(Radio, {
81
85
  size: "small"
82
86
  })
83
- })
87
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
88
+ value: "after",
89
+ label: "After",
90
+ onChange: () => {
91
+ setSchedule("after");
92
+ },
93
+ control: /*#__PURE__*/_jsx(Radio, {
94
+ size: "small"
95
+ })
96
+ })]
84
97
  })
85
98
  }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
86
99
  item: true,
@@ -149,6 +162,7 @@ const FormWorkflow = props => {
149
162
  onChange: onSubjectChange,
150
163
  fullWidth: true,
151
164
  maxRows: 5,
165
+ className: "workflowSubject",
152
166
  sx: {
153
167
  "& fieldset": {
154
168
  border: "1px solid #6F6F6F33",
@@ -210,6 +224,7 @@ const FormWorkflow = props => {
210
224
  type: 2,
211
225
  subject: bodyData,
212
226
  handleField: handleBodyField,
227
+ onSave: onSaveBodyField,
213
228
  handleSelectedVariables: handleSelectedVariables,
214
229
  handleInputReset: handleInputReset
215
230
  })]
@@ -22,135 +22,138 @@ const ListWorkflow = props => {
22
22
  return /*#__PURE__*/_jsx(Grid, {
23
23
  container: true,
24
24
  gap: 2,
25
- children: workflow?.map((flow, index) => /*#__PURE__*/_jsx(Grid, {
26
- item: true,
27
- xs: 12,
28
- children: /*#__PURE__*/_jsxs(Grid, {
29
- container: true,
30
- children: [/*#__PURE__*/_jsx(Grid, {
31
- item: true,
32
- sx: classes.emailIndexCard,
33
- children: /*#__PURE__*/_jsxs(Typography, {
34
- sx: {
35
- fontSize: "12px",
36
- fontWeight: 600
37
- },
38
- children: ["Email ", index + 1]
39
- })
40
- }), /*#__PURE__*/_jsx(Grid, {
41
- item: true,
42
- xs: 12,
43
- children: /*#__PURE__*/_jsxs(Grid, {
44
- container: true,
45
- sx: classes.flowListCard,
46
- alignItems: "center",
47
- justifyContent: "space-between",
48
- children: [/*#__PURE__*/_jsx(Grid, {
49
- item: true,
50
- xs: 11,
51
- children: /*#__PURE__*/_jsxs(Grid, {
52
- container: true,
53
- gap: 1,
54
- children: [/*#__PURE__*/_jsx(Grid, {
55
- item: true,
56
- xs: 12,
57
- children: /*#__PURE__*/_jsxs(Grid, {
58
- container: true,
59
- alignItems: "center",
60
- children: [/*#__PURE__*/_jsx(Grid, {
61
- item: true,
62
- children: /*#__PURE__*/_jsx(Typography, {
63
- sx: classes.listHeading,
64
- children: "Subject:"
65
- })
66
- }), /*#__PURE__*/_jsx(Grid, {
67
- item: true,
68
- children: /*#__PURE__*/_jsx(Typography, {
69
- sx: classes.listSubHeading,
70
- style: {
71
- paddingLeft: '24px'
72
- },
73
- children: flow.subject_data
74
- })
75
- })]
76
- })
77
- }), /*#__PURE__*/_jsx(Grid, {
78
- item: true,
79
- xs: 12,
80
- children: /*#__PURE__*/_jsxs(Grid, {
81
- container: true,
82
- alignItems: "center",
83
- children: [/*#__PURE__*/_jsx(Grid, {
84
- item: true,
85
- children: /*#__PURE__*/_jsx(Typography, {
86
- sx: classes.listHeading,
87
- children: "Body:"
88
- })
89
- }), /*#__PURE__*/_jsx(Grid, {
90
- item: true,
91
- children: /*#__PURE__*/_jsx(Typography, {
92
- sx: classes.listSubHeading,
93
- style: {
94
- paddingLeft: '40px'
95
- },
96
- children: flow.body_data
97
- })
98
- })]
99
- })
100
- }), /*#__PURE__*/_jsx(Grid, {
101
- item: true,
102
- xs: 12,
103
- children: /*#__PURE__*/_jsxs(Grid, {
104
- container: true,
105
- alignItems: "center",
106
- children: [/*#__PURE__*/_jsx(Grid, {
107
- item: true,
108
- children: /*#__PURE__*/_jsx(Typography, {
109
- sx: classes.listHeading,
110
- children: "Scheduled:"
111
- })
112
- }), /*#__PURE__*/_jsx(Grid, {
113
- item: true,
114
- children: /*#__PURE__*/_jsxs(Grid, {
115
- container: true,
116
- children: [/*#__PURE__*/_jsx(Grid, {
117
- item: true,
118
- children: /*#__PURE__*/_jsx(Typography, {
119
- sx: classes.listSubHeading,
120
- style: {
121
- paddingLeft: '5px'
122
- },
123
- children: flow.schedule_type
124
- })
125
- }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
126
- item: true,
127
- children: /*#__PURE__*/_jsxs(Typography, {
128
- sx: classes.listSubHeading,
129
- style: {
130
- paddingLeft: '5px'
131
- },
132
- children: [flow.schedule_on, flow.schedule_every]
133
- })
134
- })]
135
- })
136
- })]
137
- })
138
- })]
139
- })
140
- }), /*#__PURE__*/_jsx(Grid, {
141
- item: true,
142
- xs: 1,
143
- children: /*#__PURE__*/_jsx(MoreOptions, {
144
- classes: classes,
145
- menus: optionsList,
146
- selectedFlow: index,
147
- onMenuClick: onMenuClick
148
- })
149
- })]
150
- })
151
- })]
152
- })
153
- }, `workflow_list_${index}`))
25
+ children: workflow?.map((flow, index) => {
26
+ const bodyData = flow?.body_data;
27
+ return /*#__PURE__*/_jsx(Grid, {
28
+ item: true,
29
+ xs: 12,
30
+ children: /*#__PURE__*/_jsxs(Grid, {
31
+ container: true,
32
+ children: [/*#__PURE__*/_jsx(Grid, {
33
+ item: true,
34
+ sx: classes.emailIndexCard,
35
+ children: /*#__PURE__*/_jsxs(Typography, {
36
+ sx: {
37
+ fontSize: "12px",
38
+ fontWeight: 600
39
+ },
40
+ children: ["Email ", index + 1]
41
+ })
42
+ }), /*#__PURE__*/_jsx(Grid, {
43
+ item: true,
44
+ xs: 12,
45
+ children: /*#__PURE__*/_jsxs(Grid, {
46
+ container: true,
47
+ sx: classes.flowListCard,
48
+ alignItems: "center",
49
+ justifyContent: "space-between",
50
+ children: [/*#__PURE__*/_jsx(Grid, {
51
+ item: true,
52
+ xs: 11,
53
+ children: /*#__PURE__*/_jsxs(Grid, {
54
+ container: true,
55
+ gap: 1,
56
+ children: [/*#__PURE__*/_jsx(Grid, {
57
+ item: true,
58
+ xs: 12,
59
+ children: /*#__PURE__*/_jsxs(Grid, {
60
+ container: true,
61
+ alignItems: "center",
62
+ children: [/*#__PURE__*/_jsx(Grid, {
63
+ item: true,
64
+ children: /*#__PURE__*/_jsx(Typography, {
65
+ sx: classes.listHeading,
66
+ children: "Subject:"
67
+ })
68
+ }), /*#__PURE__*/_jsx(Grid, {
69
+ item: true,
70
+ children: /*#__PURE__*/_jsx(Typography, {
71
+ sx: classes.listSubHeading,
72
+ style: {
73
+ paddingLeft: '24px'
74
+ },
75
+ children: flow.subject_data
76
+ })
77
+ })]
78
+ })
79
+ }), /*#__PURE__*/_jsx(Grid, {
80
+ item: true,
81
+ xs: 12,
82
+ children: /*#__PURE__*/_jsxs(Grid, {
83
+ container: true,
84
+ alignItems: "center",
85
+ children: [/*#__PURE__*/_jsx(Grid, {
86
+ item: true,
87
+ children: /*#__PURE__*/_jsx(Typography, {
88
+ sx: classes.listHeading,
89
+ children: "Body:"
90
+ })
91
+ }), /*#__PURE__*/_jsx(Grid, {
92
+ item: true,
93
+ children: /*#__PURE__*/_jsx(Typography, {
94
+ sx: classes.listSubHeading,
95
+ style: {
96
+ paddingLeft: '40px'
97
+ },
98
+ children: typeof bodyData === 'string' ? bodyData : bodyData[0]?.children[0]?.text
99
+ })
100
+ })]
101
+ })
102
+ }), /*#__PURE__*/_jsx(Grid, {
103
+ item: true,
104
+ xs: 12,
105
+ children: /*#__PURE__*/_jsxs(Grid, {
106
+ container: true,
107
+ alignItems: "center",
108
+ children: [/*#__PURE__*/_jsx(Grid, {
109
+ item: true,
110
+ children: /*#__PURE__*/_jsx(Typography, {
111
+ sx: classes.listHeading,
112
+ children: "Scheduled:"
113
+ })
114
+ }), /*#__PURE__*/_jsx(Grid, {
115
+ item: true,
116
+ children: /*#__PURE__*/_jsxs(Grid, {
117
+ container: true,
118
+ children: [/*#__PURE__*/_jsx(Grid, {
119
+ item: true,
120
+ children: /*#__PURE__*/_jsx(Typography, {
121
+ sx: classes.listSubHeading,
122
+ style: {
123
+ paddingLeft: '5px'
124
+ },
125
+ children: flow.schedule_type
126
+ })
127
+ }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
128
+ item: true,
129
+ children: /*#__PURE__*/_jsxs(Typography, {
130
+ sx: classes.listSubHeading,
131
+ style: {
132
+ paddingLeft: '5px'
133
+ },
134
+ children: [flow.schedule_on, flow.schedule_every]
135
+ })
136
+ })]
137
+ })
138
+ })]
139
+ })
140
+ })]
141
+ })
142
+ }), /*#__PURE__*/_jsx(Grid, {
143
+ item: true,
144
+ xs: 1,
145
+ children: /*#__PURE__*/_jsx(MoreOptions, {
146
+ classes: classes,
147
+ menus: optionsList,
148
+ selectedFlow: index,
149
+ onMenuClick: onMenuClick
150
+ })
151
+ })]
152
+ })
153
+ })]
154
+ })
155
+ }, `workflow_list_${index}`);
156
+ })
154
157
  });
155
158
  };
156
159
  export default ListWorkflow;