@flozy/editor 3.3.2 → 3.3.4

package/dist/Editor/common/StyleBuilder/fieldTypes/card.js

@@ -0,0 +1,117 @@
+import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
+import React from "react";
+import Icon from "../../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const RenderCard = ({
+  value,
+  handleChange,
+  title,
+  content,
+  infoIcon,
+  classes
+}) => {
+  return /*#__PURE__*/_jsx(Card, {
+    sx: {
+      position: 'relative',
+      padding: "10px"
+    },
+    children: /*#__PURE__*/_jsx(FormControlLabel, {
+      control: /*#__PURE__*/_jsx(Checkbox, {
+        sx: {
+          padding: 0,
+          marginTop: '3px'
+        },
+        onChange: handleChange,
+        checked: value,
+        size: "small",
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "uncheckedIcon"
+        }),
+        checkedIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: "checkedIcon"
+        })
+      }),
+      label: /*#__PURE__*/_jsx(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          "& .MuiTypography-root": {
+            fontWeight: `500 !important`
+          }
+        },
+        children: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: classes?.cardsTypo,
+            style: {
+              fontWeight: `500 !important`
+            },
+            children: title
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: content,
+            children: infoIcon && content && /*#__PURE__*/_jsx("span", {
+              children: infoIcon
+            })
+          })]
+        })
+      }),
+      sx: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        margin: 0
+      },
+      labelPlacement: "start"
+    })
+  });
+};
+const CardsMapping = props => {
+  const {
+    value,
+    data,
+    onChange,
+    classes
+  } = props;
+  const {
+    key,
+    label,
+    content,
+    selectedCard,
+    infoIcon
+  } = data;
+  const activeCard = value === selectedCard;
+  const handleChange = e => {
+    if (selectedCard === data?.value) {
+      onChange({
+        [key]: ""
+      });
+    } else {
+      onChange({
+        [key]: data?.value
+      });
+    }
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    sx: {
+      marginBottom: "12px",
+      "& .MuiPaper-root": {
+        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
+        borderRadius: "8px",
+        boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
+      }
+    },
+    children: /*#__PURE__*/_jsx(RenderCard, {
+      value: activeCard,
+      handleChange: handleChange,
+      title: label,
+      content: content,
+      infoIcon: infoIcon,
+      classes: classes
+    })
+  });
+};
+export default CardsMapping;

package/dist/Editor/common/StyleBuilder/fieldTypes/index.js

@@ -15,6 +15,9 @@ import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
 import Icons from "./icons";
 import FontSize from "./fontSize";
+import SelectSwitch from "./selectSwitch";
+import CardsMapping from "./card";
+import MetaDataMapping from "./metaDataMapping";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -32,6 +35,9 @@ const FieldMap = {
   textOptions: TextOptions,
   selectBox: SelectBox,
   icons: Icons,
-  fontSize: FontSize
+  fontSize: FontSize,
+  selectSwitch: SelectSwitch,
+  card: CardsMapping,
+  metadatamapping: MetaDataMapping
 };
 export default FieldMap;

package/dist/Editor/common/StyleBuilder/fieldTypes/metaDataMapping.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Grid } from "@mui/material";
+import FieldMap from ".";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MetaDataMapping = props => {
+  const {
+    value,
+    data,
+    onChange,
+    elementProps
+  } = props;
+  const {
+    compType
+  } = data;
+  const previousCardRef = useRef(null);
+  const [selectedCard, setSelectedCard] = useState(null);
+  const updatedData = {
+    ...data,
+    selectedCard
+  };
+  const FieldComponent = FieldMap[compType] || null;
+  useEffect(() => {
+    setSelectedCard(elementProps?.metadatamapping);
+  }, [elementProps?.metadatamapping]);
+  const handleCardSelect = data => {
+    previousCardRef.current = selectedCard;
+    setSelectedCard(data);
+    onChange(data);
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    children: FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
+      element: elementProps,
+      value: data?.value,
+      data: updatedData,
+      onChange: handleCardSelect
+    }) : null
+  });
+};
+export default MetaDataMapping;

package/dist/Editor/common/StyleBuilder/fieldTypes/selectSwitch.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { Grid, Switch, styled, FormControlLabel, FormHelperText } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AntSwitch = styled(Switch)(({
+  theme
+}) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: 'flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
+      width: 15
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(9px)'
+    }
+  },
+  '& .MuiSwitch-switchBase': {
+    padding: 2,
+    '&.Mui-checked': {
+      transform: 'translateX(12px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? '#177ddc' : '#1890ff'
+      }
+    }
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: theme.transitions.create(['width'], {
+      duration: 200
+    })
+  },
+  '& .MuiSwitch-track': {
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
+    boxSizing: 'border-box'
+  }
+}));
+const SelectSwitch = props => {
+  const {
+    value,
+    data,
+    onChange,
+    elementProps
+  } = props;
+  const {
+    key,
+    label
+  } = data;
+  const handleChange = e => {
+    if (elementProps?.metadatamapping === data?.value) {
+      onChange({
+        [key]: null
+      });
+    } else {
+      onChange({
+        [key]: data?.value
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    style: {
+      marginBottom: "12px"
+    },
+    children: [/*#__PURE__*/_jsx(FormControlLabel, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        marginLeft: 0,
+        '& .MuiFormControlLabel-label': {
+          marginLeft: 0,
+          fontSize: '14px',
+          fontWeight: 700
+        }
+      },
+      labelPlacement: "start",
+      label: label,
+      control: /*#__PURE__*/_jsx(AntSwitch, {
+        inputProps: {
+          'aria-label': 'ant design'
+        },
+        onChange: handleChange,
+        checked: Boolean(value) || false
+      })
+    }), /*#__PURE__*/_jsx(FormHelperText, {
+      children: data?.helperText
+    })]
+  });
+};
+export default SelectSwitch;

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, MenuItem, Select, Typography } from "@mui/material";
+import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,8 +11,12 @@ const TextOptions = props => {
     data,
     onChange,
     elementProps,
-    classes
+    classes,
+    customProps
   } = props;
+  const {
+    metaMappings
+  } = customProps;
   const {
     key,
     isBreakpoint,
@@ -22,7 +26,9 @@ const TextOptions = props => {
   } = data;
   const [size] = useWindowResize();
   const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
-  const handleChange = e => {
+  const metaDataMappingOptions = metaMappings?.boards || [];
+  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
+  const handleChange = (e, d) => {
     if (isBreakpoint) {
       onChange({
         [key]: {
@@ -32,7 +38,9 @@ const TextOptions = props => {
       });
     } else {
       onChange({
-        [key]: e.target.value
+        [key]: e.target.value,
+        [`${key}_metadatakey`]: d?.props?.item,
+        isrequired: d?.props?.isrequired
       });
     }
   };
@@ -52,21 +60,40 @@ const TextOptions = props => {
           marginBottom: "4px"
         },
         children: data?.label
-      }), /*#__PURE__*/_jsx(Select, {
-        onChange: handleChange,
-        value: value || options[0]?.value,
-        placeholder: data?.label,
+      }), /*#__PURE__*/_jsx(FormControl, {
+        sx: {
+          "& .MuiSelect-select": {
+            display: "flex",
+            alignItems: "center"
+          }
+        },
         fullWidth: true,
         size: "small",
-        style: {
-          marginBottom: "16px"
-        },
-        sx: classes.textOptions,
-        children: options.map(m => {
-          return /*#__PURE__*/_jsx(MenuItem, {
-            value: m.value,
-            children: renderOption ? renderOption(m, elementProps) : m.label || m.text
-          }, `${key}_${m.value}`);
+        children: /*#__PURE__*/_jsx(Select, {
+          onChange: handleChange,
+          value: value || updatedOption[0]?.value,
+          placeholder: data?.label,
+          fullWidth: true,
+          size: "small",
+          style: {
+            marginBottom: "16px"
+          },
+          sx: classes.textOptions,
+          children: updatedOption?.map((m, i) => {
+            return m?.value === "listSubHeader" ? /*#__PURE__*/_jsx(ListSubheader, {
+              children: m?.label
+            }, `subHeader_${i}`) : /*#__PURE__*/_jsxs(MenuItem, {
+              value: m?.value,
+              item: m?.metaDataKey,
+              isrequired: m?.isRequired?.toString(),
+              children: [m?.icon && /*#__PURE__*/_jsx(ListItemIcon, {
+                sx: {
+                  minWidth: "25px"
+                },
+                children: m?.icon
+              }), renderOption ? renderOption(m, elementProps) : m.label || m.text]
+            }, `${key}_${i}`);
+          })
         })
       })]
     })

package/dist/Editor/common/StyleBuilder/formStyle.js

@@ -1,4 +1,5 @@
 import { fontOptions } from "../../utils/font";
+import Icon from "../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const formStyle = [{
   tab: "General",
@@ -128,6 +129,30 @@ const formStyle = [{
     key: "backgroundImage",
     type: "backgroundImage"
   }]
+}, {
+  tab: "Add to Boards",
+  value: "metadatamapping",
+  fields: [{
+    label: "Add each response to contacts board",
+    key: "metadatamapping",
+    type: "metadatamapping",
+    compType: "card",
+    content: "By default, form responses are added as separate cards on the default contact board.",
+    value: "mappingToContactBoard",
+    infoIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "info"
+    })
+  }, {
+    label: "Create a separate board",
+    key: "metadatamapping",
+    type: "metadatamapping",
+    compType: "card",
+    content: "By default, form responses are added as separate cards on a new board (Contact Us).",
+    value: "mappingToSeparateBoard",
+    infoIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "info"
+    })
+  }]
 }, {
   tab: "Save As Template",
   value: "saveAsTemplate",

package/dist/Editor/common/StyleBuilder/textOptionsStyles.js

@@ -0,0 +1,43 @@
+import Icon from "../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const textOptions = [{
+  label: "Default Fields",
+  value: "listSubHeader"
+}, {
+  label: "Text(Single Line)",
+  value: "text",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "text"
+  })
+}, {
+  label: "Text(Multiple Line)",
+  value: "textArea",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "textArea"
+  })
+}, {
+  label: "Contact Number",
+  value: "numbers",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "phone"
+  })
+}, {
+  label: "Email",
+  value: "email",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "mail"
+  })
+}
+// {
+//     label: "Radio Button",
+//     value: "radioButton",
+//     icon: <Icon icon="radioButton" />,
+// },
+// {
+//     label: "Checkbox",
+//     value: "checkbox",
+//     icon: <Icon icon="checkbox" />,
+// },
+];
+
+export default textOptions;