@flozy/editor 9.3.2 → 9.3.3

package/dist/Editor/themeSettingsAI/saveTheme.js

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from "react";
+import { Box, Button, CircularProgress, Dialog, Divider, Grid, IconButton, TextField, Typography, styled } from "@mui/material";
+
+// Style
+import Style from "./style";
+
+// icons
+import { CloseIcon } from "../common/iconslist";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const SaveTheme = props => {
+  const {
+    className,
+    // enableGenerateTheme,
+    saveBtnLabel,
+    loading,
+    onSave,
+    defaultFormData = {}
+  } = props;
+
+  // State
+  const [saveTheme, setSaveTheme] = useState(false);
+  const [error, setError] = useState({});
+  const [form, setForm] = useState(defaultFormData);
+  const {
+    name,
+    mood_name,
+    template_tags
+  } = form;
+  const updateForm = update => {
+    setForm(prev => ({
+      ...prev,
+      ...update
+    }));
+  };
+  useEffect(() => {
+    setForm(defaultFormData);
+  }, [defaultFormData]);
+  const onClose = () => {
+    setSaveTheme(false);
+    setError({});
+    setForm({});
+  };
+  const validate = () => {
+    let err = {};
+    if (!name) {
+      err.name = "This field is required!";
+    }
+    if (!mood_name) {
+      err.mood_name = "This field is required!";
+    }
+    return err;
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    className: className,
+    children: [/*#__PURE__*/_jsx(Button, {
+      variant: "contained",
+      size: "small"
+      // className={`blueBtn ${enableGenerateTheme ? "eanbled" : "disabled"}`}
+      // disabled={!enableGenerateTheme}
+      ,
+      className: `blueBtn`,
+      onClick: () => setSaveTheme(true),
+      children: saveBtnLabel
+    }), /*#__PURE__*/_jsx(Dialog, {
+      fullWidth: true,
+      maxWidth: "sm",
+      open: saveTheme,
+      onClose: onClose,
+      className: className,
+      sx: {
+        borderRadius: "10px"
+      },
+      children: /*#__PURE__*/_jsxs(Grid, {
+        className: "saveThemeContainer",
+        sx: {
+          p: 2,
+          pt: 2.5
+        },
+        children: [/*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "h4",
+            sx: {
+              fontSize: "18px"
+            },
+            className: "fw-600",
+            children: "Save Your theme"
+          }), /*#__PURE__*/_jsx(IconButton, {
+            onClick: onClose,
+            className: "closeBtn",
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })]
+        }), /*#__PURE__*/_jsx(Divider, {
+          sx: {
+            mt: 2,
+            mb: 2
+          }
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fw-500",
+          sx: {
+            pb: 1
+          },
+          children: "Theme name"
+        }), /*#__PURE__*/_jsx(TextField, {
+          variant: "outlined",
+          fullWidth: true,
+          size: "small",
+          placeholder: "Ex : Forest green",
+          onChange: e => updateForm({
+            name: e.target.value
+          }),
+          value: name
+        }), /*#__PURE__*/_jsx(Error, {
+          error: error?.name
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fw-500",
+          sx: {
+            pt: 2,
+            pb: 1
+          },
+          children: "Category"
+        }), /*#__PURE__*/_jsx(TextField, {
+          variant: "outlined",
+          size: "small",
+          placeholder: "Ex : Nature and Calm",
+          fullWidth: true,
+          onChange: e => updateForm({
+            mood_name: e.target.value
+          }),
+          value: mood_name
+        }), /*#__PURE__*/_jsx(Error, {
+          error: error?.mood_name
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fw-500",
+          sx: {
+            pt: 2,
+            pb: 1
+          },
+          children: "Template Tags"
+        }), /*#__PURE__*/_jsx(TextField, {
+          variant: "outlined",
+          size: "small",
+          placeholder: "template_tags",
+          fullWidth: true,
+          onChange: e => updateForm({
+            template_tags: e.target.value
+          }),
+          value: template_tags
+        }), /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "flex-end",
+          sx: {
+            mt: 3
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "outlined",
+            className: "seondaryOutlineBtn",
+            color: "secondary",
+            onClick: onClose,
+            children: "Cancel"
+          }), /*#__PURE__*/_jsxs(Button, {
+            variant: "contained",
+            color: "primary",
+            className: "blueBtn",
+            sx: {
+              ml: 1
+            },
+            disabled: loading,
+            onClick: async () => {
+              const err = validate();
+              setError(err);
+              if (Object.keys(err)?.length) {
+                return;
+              }
+              await onSave({
+                ...form
+              });
+              onClose();
+            },
+            children: [loading ? /*#__PURE__*/_jsx(CircularProgress, {
+              size: 14,
+              style: {
+                marginRight: "10px"
+              }
+            }) : null, saveBtnLabel]
+          })]
+        })]
+      })
+    })]
+  });
+};
+export default styled(SaveTheme)(Style);
+function Error({
+  error = ""
+}) {
+  if (error) {
+    return /*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      sx: {
+        color: "red",
+        mt: 1
+      },
+      children: error
+    });
+  } else {
+    return /*#__PURE__*/_jsx(_Fragment, {});
+  }
+}

package/dist/Editor/themeSettingsAI/style.js

@@ -0,0 +1,250 @@
+const style = () => ({
+  ".fs-12": {
+    fontSize: "12px"
+  },
+  ".fs-14": {
+    fontSize: "14px"
+  },
+  ".fw-500": {
+    fontWeight: "500"
+  },
+  ".fw-600": {
+    fontWeight: "600"
+  },
+  ".pointer": {
+    cursor: "pointer"
+  },
+  ".transformNone": {
+    textTransform: "none"
+  },
+  ".settingsContainer": {
+    width: "340px",
+    padding: "16px 16px",
+    background: "#fff",
+    ".header": {
+      borderBottom: `1px solid #DCE4EC`,
+      paddingBottom: "8px"
+      //   marginBottom: "16px",
+    }
+  },
+
+  ".title": {
+    fontWeight: "700",
+    fontSize: "14px"
+  },
+  ".closeBtn": {
+    width: "26px",
+    height: "26px",
+    BorderRadius: "4px",
+    flexShrik: "0",
+    padding: "4px",
+    background: " #F8FAFC",
+    borderRadius: "4px"
+  },
+  ".MuiTabs-scroller": {
+    borderBottom: `1px solid #DCE4EC`
+  },
+  ".themeCardWrapper": {
+    borderRadius: "4px",
+    ".active": {
+      background: "#ECF2FF"
+    }
+  },
+  ".primaryCard, .secondaryCard": {
+    width: "44px",
+    height: "44px",
+    borderRadius: "5px",
+    border: `1px solid #929292`
+  },
+  ".flexAlign": {
+    display: "flex",
+    alignItems: "center"
+  },
+  ".activeColorBox, .xsColorBox": {
+    width: "24px",
+    height: "24px",
+    borderRadius: "5px",
+    border: `1px solid #929292`
+  },
+  ".themeCard": {
+    borderRadius: "7px",
+    padding: "16px",
+    border: "1px solid #F3F3F3",
+    boxShadow: "1px 2px 5px 0px #00000014",
+    position: "relative",
+    flexWrap: "nowrap",
+    ".tickIcon": {
+      visibility: "hidden",
+      opacity: "0",
+      position: "absolute",
+      right: "-8px",
+      top: "-8px"
+    },
+    "&.selected": {
+      ".tickIcon": {
+        visibility: "visible",
+        opacity: "1"
+      }
+    }
+  },
+  ".otherColors": {
+    display: "flex",
+    flexWrap: "wrap",
+    width: "48px",
+    ".smallCard": {
+      width: "20px",
+      height: "20px",
+      borderRadius: "5px",
+      border: `1px solid #929292`
+    }
+  },
+  ".imageUpload": {
+    background: "#F3F3F3",
+    borderRadius: "12px",
+    padding: "10px",
+    height: "208px",
+    position: "relative",
+    "& .resetIcon": {
+      position: "absolute",
+      right: "10px",
+      top: "10px"
+    },
+    ".changeImgText": {
+      position: "absolute",
+      left: "50%",
+      top: "50%",
+      transform: "translate(-50%, -50%)",
+      zIndex: 1,
+      background: "#0000004D",
+      color: "#fff",
+      padding: "6px",
+      borderRadius: "6px",
+      fontSize: "12px",
+      fontWeight: 600,
+      opacity: "0",
+      visibility: "hidden"
+    },
+    "&:hover": {
+      ".changeImgText": {
+        opacity: "1",
+        visibility: "visible"
+      }
+    }
+  },
+  ".imgUploadInner": {
+    background: "#fff",
+    borderRadius: "10px",
+    border: "0.79px dashed #8360FD",
+    height: "100%"
+  },
+  ".outlineBtn": {
+    color: "#2563EB",
+    borderRadius: "8px",
+    boxShadow: "0px 4px 10px 0px #00000026",
+    border: "1px solid #2563EB",
+    background: "#EBF1F9",
+    height: "34px",
+    textTransform: "unset"
+  },
+  ".seondaryOutlineBtn": {
+    border: "1px solid #D8DDE1",
+    borderRadius: "8px",
+    // boxShadow: "0px 4px 10px 0px #00000026",
+    height: "34px",
+    textTransform: "unset",
+    background: "#eceef3",
+    color: "#64748B"
+  },
+  ".blueBtn": {
+    boxShadow: "0px 4px 10px 0px #00000026",
+    background: "#2563EB",
+    borderRadius: "8px",
+    textTransform: "unset",
+    height: "34px",
+    color: "#fff",
+    "&.disabled": {
+      background: "#D9D9DD !important",
+      color: "#fff !important"
+    }
+  },
+  ".generatedItem": {
+    border: "1px solid #E4E6E9",
+    borderRadius: "7px",
+    padding: "14px",
+    display: "flex",
+    gap: "16px",
+    position: "relative",
+    justifyContent: "space-between",
+    marginBottom: "12px",
+    ".tickIcon": {
+      visibility: "hidden",
+      opacity: "0",
+      position: "absolute",
+      right: "-8px",
+      top: "-8px"
+    },
+    "&.selected": {
+      border: "1px solid #2563EB",
+      boxShadow: " 3px 3px 8px 0px #2563EB40",
+      ".tickIcon": {
+        visibility: "visible",
+        opacity: "1"
+      }
+    },
+    ".colorBox": {
+      border: "1px solid #929292",
+      height: "28px",
+      width: "28px",
+      borderRadius: "5px"
+    }
+  },
+  ".textArea": {
+    background: "#F3F3F3",
+    borderRadius: "12px",
+    padding: "10px",
+    height: "208px",
+    "& textarea": {
+      width: "100%",
+      height: "100% !important",
+      border: "0.79px solid #8360FD",
+      background: "#FFFFFF",
+      borderRadius: "8px",
+      padding: "10px"
+    }
+  },
+  ".imageUrl": {
+    height: "auto !important",
+    ".MuiOutlinedInput-root": {
+      border: "0.79px solid #8360FD",
+      background: "#FFFFFF",
+      borderRadius: "8px",
+      ".tickIcon": {
+        width: "18px"
+      }
+    },
+    "&.invalidUrl": {
+      ".MuiInputAdornment-root": {
+        ".tickIcon": {
+          ".fillPath": {
+            fill: "#D9D9DD!important"
+          }
+        }
+      }
+    }
+  },
+  ".saveThemeContainer": {
+    ".MuiOutlinedInput-root": {
+      borderRadius: "8px",
+      boxShadow: "0px 4px 16px 0px #0000000D"
+    }
+  },
+  ".uploadedImage": {
+    width: "126px",
+    height: "126px",
+    borderRadius: "126px"
+  },
+  ".MuiDialog-paper": {
+    borderRadius: "10px"
+  }
+});
+export default style;