@flozy/editor 10.2.5 → 10.2.6

package/dist/Editor/themeSettings/index.js

@@ -0,0 +1,369 @@
+import React, { useEffect, useState } from "react";
+import { Box, CircularProgress, Drawer, Grid, IconButton, Tab, Tabs, Typography, styled } from "@mui/material";
+
+// Style
+import Style from "./style";
+
+// icons
+import { CloseIcon2 as CloseIcon } from "../common/iconslist";
+import { TickIcon } from "./icons";
+import ColorTheme from "./colorTheme";
+import Buttons from "./buttons";
+import Fonts from "./fonts";
+import { useEditorTheme } from "../hooks/useEditorTheme";
+import ActiveTheme from "./ActiveTheme";
+import SaveTheme from "../themeSettingsAI/saveTheme";
+import BackIcon from "../assets/svg/BackIcon";
+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 getColors(themeColors) {
+  const colors = Object.values(themeColors || {});
+  const primaryColors = colors.slice(0, 2);
+  const otherColors = colors.slice(2);
+  return {
+    primaryColors,
+    otherColors
+  };
+}
+const ThemeSettings = props => {
+  const {
+    className,
+    open,
+    setOpen,
+    services,
+    appTheme,
+    customProps
+  } = props;
+
+  // State
+  // const [themeDrawer, setThemeDrawer] = useState(true);
+  const [themeTabType, setThemeTabType] = React.useState(0);
+  const [themeMoodboard, setThemeMoodboard] = React.useState(false);
+  const [openSettings, setOpenSettings] = useState("");
+  const onSettingsChange = type => {
+    setOpenSettings(prev => prev === type ? "" : type);
+  };
+  const [themes, setThemes] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [savingTheme, setSavingTheme] = useState(false);
+  const {
+    theme: userSelectedTheme,
+    updateTheme
+  } = useEditorTheme();
+  const {
+    colors = {}
+  } = userSelectedTheme?.theme?.cssVars || {};
+  const {
+    id,
+    name,
+    mood_name,
+    template_tag
+  } = userSelectedTheme || {};
+  const onClose = () => setOpen(false);
+  const getThemesList = async themeTabType => {
+    setLoading(true);
+    setThemes([]);
+    try {
+      const themeType = themeTabType === 0 ? "default" : "";
+      const result = await services("getThemes", {
+        type: themeType,
+        template_tag
+      });
+      const currentSelectedTheme = result?.data?.find(d => d.id === id);
+      const currThemeName = currentSelectedTheme?.name;
+      if (currThemeName && currThemeName !== name) {
+        // for theme templates created by design team
+        updateTheme({
+          name: currThemeName
+        });
+      }
+      setThemes(result?.data || []);
+    } catch (err) {
+      console.log(err);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    getThemesList(themeTabType);
+  }, []);
+  const handleThemeChange = theme => {
+    updateTheme(theme, {
+      action: "THEME_CHANGE"
+    });
+  };
+  const onColorChange = (color, colorIndex) => {
+    updateTheme({
+      [`color${colorIndex}`]: color
+    }, {
+      action: "CSS_VAR_CHANGE",
+      fieldName: "colors"
+    });
+  };
+  const handleTabChange = (event, newValue) => {
+    setThemeTabType(newValue);
+    getThemesList(newValue);
+  };
+  const isUpdateTheme = Number(userSelectedTheme?.type) === 2;
+  const onSaveTheme = async (formData = {}, addNewTheme) => {
+    setSavingTheme(true);
+    try {
+      let type = isUpdateTheme && !addNewTheme ? "update" : "create";
+      const result = await services("saveTheme", {
+        type,
+        id,
+        template_tag,
+        ...formData,
+        theme: userSelectedTheme?.theme
+      });
+      const update = {
+        ...userSelectedTheme,
+        ...formData,
+        type: "2"
+      };
+      const createdId = result?.data?.id;
+      if (createdId) {
+        update.id = createdId;
+      }
+      updateTheme(update);
+      getThemesList(themeTabType);
+    } catch (err) {
+      console.log(err);
+    }
+    setSavingTheme(false);
+  };
+
+  // themeCard
+  const ThemeCard = ({
+    theme
+  }) => {
+    const {
+      name,
+      mood_name = ""
+    } = theme;
+    const {
+      colors = {}
+    } = theme?.theme?.cssVars || {};
+    const {
+      primaryColors,
+      otherColors
+    } = getColors(colors);
+    const isSelected = theme.id === userSelectedTheme?.id;
+    return /*#__PURE__*/_jsxs(Grid, {
+      className: `themeCardWrapper ${isSelected ? "activeWrapper" : ""}`,
+      onClick: () => handleThemeChange(theme),
+      children: [isSelected ? /*#__PURE__*/_jsx(TickIcon, {}) : null, /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        justifyContent: "space-between",
+        className: "themeCard",
+        gap: 2,
+        children: [/*#__PURE__*/_jsxs(Grid, {
+          style: {
+            width: "90px"
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            className: "title",
+            style: {
+              whiteSpace: "nowrap",
+              textOverflow: "ellipsis",
+              overflow: "hidden",
+              fontWeight: "500"
+            },
+            children: name
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            className: "fs-12 textSecondary moodName",
+            children: mood_name
+          })]
+        }), /*#__PURE__*/_jsxs(Grid, {
+          className: "flexAlign",
+          sx: {
+            gap: "5px"
+          },
+          children: [primaryColors?.map((color, i) => {
+            return /*#__PURE__*/_jsx(Grid, {
+              className: "primaryCard",
+              style: {
+                backgroundColor: color
+              }
+            }, i);
+          }), /*#__PURE__*/_jsx(Grid, {
+            className: "otherColors",
+            sx: {
+              gap: "5px"
+            },
+            children: otherColors.map((color, i) => {
+              return /*#__PURE__*/_jsx(Grid, {
+                className: "smallCard",
+                style: {
+                  backgroundColor: color
+                }
+              }, i);
+            })
+          })]
+        })]
+      })]
+    });
+  };
+  const showThemeSettings = id && !themeMoodboard;
+  return /*#__PURE__*/_jsx(Grid, {
+    className: className,
+    children: /*#__PURE__*/_jsxs(Drawer, {
+      className: className,
+      open: open,
+      onClose: onClose,
+      anchor: "right",
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        className: "settingsContainer",
+        children: [/*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "space-between",
+          wrap: "nowrap",
+          className: "header"
+          // sx={{ px: 2 }}
+          ,
+          children: [/*#__PURE__*/_jsxs(Grid, {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              className: "title",
+              children: "Theme/Brand Setting"
+            }), /*#__PURE__*/_jsxs(Typography, {
+              variant: "body1",
+              className: "fs-12 textSecondary",
+              sx: {
+                mt: 0.5
+              },
+              children: ["Change the entire style of your website with a single click.", " "]
+            })]
+          }), /*#__PURE__*/_jsx(IconButton, {
+            className: "closeBtn",
+            onClick: onClose,
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })]
+        }), /*#__PURE__*/_jsx(Grid, {
+          className: "activeTheme",
+          children: !themeMoodboard ? /*#__PURE__*/_jsx(ActiveTheme, {
+            onExplore: () => setThemeMoodboard(true)
+          }) : /*#__PURE__*/_jsxs(Grid, {
+            className: "sectionDetail",
+            children: [/*#__PURE__*/_jsxs(Typography, {
+              variant: "body1",
+              className: "sectionTitle flexAlign",
+              children: [/*#__PURE__*/_jsx(IconButton, {
+                onClick: () => setThemeMoodboard(false),
+                className: "backBtn",
+                children: /*#__PURE__*/_jsx(BackIcon, {})
+              }), "Theme Moodboard"]
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                borderBottom: 1,
+                borderColor: "divider"
+              },
+              className: "tabWrapper",
+              children: /*#__PURE__*/_jsxs(Tabs, {
+                value: themeTabType,
+                onChange: handleTabChange,
+                variant: "fullWidth",
+                scrollButtons: false,
+                "aria-label": "scrollable prevent tabs example",
+                children: [/*#__PURE__*/_jsx(Tab, {
+                  label: /*#__PURE__*/_jsx(Typography, {
+                    variant: "body1",
+                    className: "fs-14 fw-500 transformNone",
+                    children: "Key themes"
+                  })
+                }), /*#__PURE__*/_jsx(Tab, {
+                  label: /*#__PURE__*/_jsx(Typography, {
+                    variant: "body1",
+                    className: "fs-14 fw-500 transformNone",
+                    children: "Saved themes"
+                  })
+                })]
+              })
+            }), loading ? /*#__PURE__*/_jsx("div", {
+              style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                margin: 0,
+                padding: 0,
+                height: "50px",
+                overflow: "hidden"
+              },
+              children: /*#__PURE__*/_jsx(CircularProgress, {})
+            }) : null, themes.map((theme, i) => {
+              return /*#__PURE__*/_jsx(ThemeCard, {
+                theme: theme
+              }, i);
+            })]
+          })
+        }), showThemeSettings ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Grid, {
+            sx: {
+              px: 1,
+              mt: 1
+            },
+            children: /*#__PURE__*/_jsx(ColorTheme, {
+              colors: getColors(colors),
+              onColorChange: onColorChange,
+              openDefault: open === "editThemeColor",
+              appTheme: appTheme,
+              openSettings: openSettings,
+              onSettingsChange: onSettingsChange,
+              type: "colors"
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            sx: {
+              px: 1,
+              mt: 1
+            },
+            children: /*#__PURE__*/_jsx(Fonts, {
+              appTheme: appTheme,
+              customProps: customProps,
+              openSettings: openSettings,
+              onSettingsChange: onSettingsChange,
+              type: "fonts"
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            sx: {
+              px: 1,
+              mt: 1
+            },
+            children: /*#__PURE__*/_jsx(Buttons, {
+              appTheme: appTheme,
+              customProps: customProps,
+              openSettings: openSettings,
+              onSettingsChange: onSettingsChange,
+              type: "buttons"
+            })
+          })]
+        }) : null]
+      }), showThemeSettings ? /*#__PURE__*/_jsxs(Box, {
+        className: "saveThemeBtnsWrapper",
+        component: "div",
+        children: [isUpdateTheme ? /*#__PURE__*/_jsx(SaveTheme, {
+          saveBtnLabel: "Add new theme",
+          loading: savingTheme,
+          onSave: onSaveTheme,
+          defaultFormData: {
+            name,
+            mood_name
+          },
+          addNewTheme: true,
+          appTheme: appTheme
+        }) : null, /*#__PURE__*/_jsx(SaveTheme, {
+          saveBtnLabel: isUpdateTheme ? "Update theme" : "Save to my theme",
+          loading: savingTheme,
+          onSave: onSaveTheme,
+          defaultFormData: {
+            name,
+            mood_name
+          },
+          appTheme: appTheme
+        })]
+      }) : null]
+    })
+  });
+};
+export default styled(ThemeSettings)(Style);

package/dist/Editor/themeSettings/style.js

@@ -0,0 +1,299 @@
+const Style = ({
+  appTheme
+}) => {
+  const {
+    textColor,
+    tv_text,
+    uploadFileBg,
+    closeButtonBgColor,
+    closeButtonSvgStroke,
+    deviderBgColor,
+    activeColor,
+    cardOutsetBg,
+    cardBorder,
+    cardBg,
+    selectedCardOutsetBg,
+    cardBorder2,
+    cardShadow,
+    sidebarBorder,
+    cardBg2,
+    miniToolBarBackground,
+    closeButtonBackground,
+    customDialogueCloseBtnColor,
+    customDialogueCloseBtnBorder
+  } = appTheme?.palette?.editor || {};
+  return {
+    ".fs-12": {
+      fontSize: "12px"
+    },
+    ".fs-14": {
+      fontSize: "14px"
+    },
+    ".fs-10": {
+      fontSize: "10px"
+    },
+    ".fw-500": {
+      fontWeight: "500"
+    },
+    ".fw-600": {
+      fontWeight: "600"
+    },
+    ".pointer": {
+      cursor: "pointer"
+    },
+    ".transformNone": {
+      textTransform: "none"
+    },
+    "& .MuiDrawer-paper": {
+      background: cardBg,
+      color: textColor,
+      border: `1px solid ${sidebarBorder}`,
+      display: "flex",
+      flexDirection: "column",
+      fontFamily: '"Inter", sans-serif'
+    },
+    "& .MuiTypography-root": {
+      fontFamily: '"Inter", sans-serif'
+    },
+    "& .textSecondary": {
+      color: tv_text
+    },
+    ".settingsContainer": {
+      width: "340px",
+      padding: "16px 5px",
+      position: "relative",
+      overflowY: "auto",
+      flexGrow: 1,
+      ".header": {
+        borderBottom: `1px solid ${deviderBgColor}`,
+        width: "calc(100% - 32px)",
+        margin: "auto",
+        marginBottom: "16px",
+        paddingBottom: "16px"
+      }
+    },
+    ".title": {
+      fontWeight: "600",
+      fontSize: "14px"
+    },
+    ".moodName": {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    ".closeBtn, .backBtn": {
+      width: "20px",
+      height: "20px",
+      BorderRadius: "4px",
+      flexShrik: "0",
+      padding: "1px",
+      borderRadius: "4px",
+      background: closeButtonBgColor,
+      color: `${closeButtonSvgStroke} !important`,
+      "& svg": {
+        color: `${closeButtonSvgStroke} !important`
+      }
+    },
+    ".activeTheme": {
+      background: cardOutsetBg,
+      padding: "14px 10px",
+      borderRadius: "4px"
+    },
+    ".activeThemeInnner": {
+      borderRadius: "7px",
+      padding: "16px",
+      boxShadow: "1px 2px 5px 0px #00000014",
+      background: cardBg,
+      border: `1px solid ${cardBorder}`
+    },
+    "& .activeThemeTitle": {
+      paddingBottom: "6px"
+    },
+    "& .exploreBtn": {
+      color: "#2563EB",
+      textDecorationColor: "#2563EB"
+    },
+    ".flexAlign": {
+      display: "flex",
+      alignItems: "center"
+    },
+    ".flexItem": {
+      maxWidth: "50%",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    ".activeColorBox, .xsColorBox": {
+      width: "24px",
+      height: "24px",
+      borderRadius: "5px",
+      border: `1px solid #929292`
+    },
+    ".themeCard": {
+      borderRadius: "7px",
+      padding: "16px",
+      border: `1px solid ${uploadFileBg}`,
+      boxShadow: "1px 2px 5px 0px #00000014",
+      background: cardBg2,
+      flexWrap: "nowrap",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    ".themeCardWrapper": {
+      padding: "6px 14px",
+      cursor: "pointer",
+      "&.active": {
+        background: "#ECF2FF"
+      }
+    },
+    ".primaryCard, .secondaryCard": {
+      width: "44px",
+      height: "44px",
+      borderRadius: "5px",
+      border: `1px solid #929292`
+    },
+    ".otherColors": {
+      display: "flex",
+      flexWrap: "wrap",
+      width: "48px",
+      ".smallCard": {
+        width: "20px",
+        height: "20px",
+        borderRadius: "5px",
+        border: `1px solid #929292`
+      }
+    },
+    ".sectionDetail": {
+      borderRadius: "4px",
+      background: cardBg
+    },
+    ".sectionTitle": {
+      borderBottom: `1px solid ${deviderBgColor}`,
+      fontWeight: "600",
+      fontSize: "14px",
+      padding: "14px 0px",
+      width: "calc(100% - 30px)",
+      margin: "auto",
+      gap: "8px"
+    },
+    // ".activeThemeInnner": {
+    //   borderRadius: "7px",
+    //   padding: "16px",
+    //   boxShadow: "1px 2px 5px 0px #00000014",
+    //   background: "#fff",
+    // },
+    ".activeWrapper": {
+      background: selectedCardOutsetBg,
+      padding: "14px 10px",
+      position: "relative",
+      ".tickIcon": {
+        position: "absolute",
+        right: "5px",
+        top: "8px",
+        rect: {
+          stroke: cardBorder2
+        }
+      }
+    },
+    ".MuiDivider-root": {
+      border: `0.5px solid ${deviderBgColor}`
+    },
+    ".settingAccordion": {
+      background: cardBg2,
+      color: textColor,
+      boxShadow: `1px 2px 8px 0px ${cardShadow}`,
+      border: `1px solid ${uploadFileBg}`,
+      borderRadius: "8px !important",
+      marginTop: "10px",
+      marginBottom: "10px",
+      padding: "0px 12px",
+      "&&.Mui-expanded": {
+        border: `1.5px solid #2563EB`,
+        boxShadow: "1px 2px 14px 0px #2563EB47",
+        "& .MuiAccordionSummary-expandIconWrapper": {
+          color: "#2563EB !important"
+        }
+      },
+      "&:before": {
+        background: "transparent"
+      },
+      ".MuiAccordionSummary-expandIconWrapper": {
+        color: textColor
+      },
+      ".MuiAccordionSummary-root ": {
+        // minHeight: "20px",
+        padding: "0px",
+        minHeight: "42px !important",
+        "&.Mui-expanded": {
+          // minHeight: "48px !important",
+          borderBottom: `1px solid ${deviderBgColor}`
+        }
+      },
+      ".MuiAccordionSummary-content ": {
+        // padding: "12px 0px !important",
+        margin: "0px !important",
+        // minHeight: "45px",
+        fontSize: "14px",
+        fontWeight: "600"
+      },
+      ".MuiAccordionDetails-root ": {
+        padding: "12px 0px !important"
+      }
+    },
+    ".MuiTab-root": {
+      color: textColor
+    },
+    ".saveThemeBtnsWrapper": {
+      position: "sticky",
+      bottom: "0px",
+      right: "0px",
+      boxShadow: `0px -3px 12px 0px ${cardShadow}`,
+      padding: "10px",
+      borderRadius: "8px",
+      display: "flex",
+      justifyContent: "end",
+      alignItems: "center",
+      gap: "6px",
+      background: cardBg,
+      "& .outlineBtn": {
+        background: miniToolBarBackground
+      },
+      "& button": {
+        fontWeight: 600,
+        fontSize: "14px",
+        opacity: 1,
+        borderRadius: "8px",
+        textTransform: "math-auto",
+        padding: "4px 20px",
+        height: "fit-content",
+        minWidth: "90px",
+        lineHeight: "1.75 !important",
+        "@media only screen and (max-width: 899px)": {
+          width: "50%"
+        },
+        "&.confirmBtn": {
+          backgroundColor: "#2563EB",
+          color: "#ffffff",
+          border: `1px solid #2563EB`
+        },
+        "&.cancelBtn": {
+          backgroundColor: closeButtonBackground,
+          color: customDialogueCloseBtnColor,
+          border: `1px solid ${customDialogueCloseBtnBorder}`
+        }
+      }
+    },
+    ".tabWrapper": {
+      borderBottom: `1px solid ${deviderBgColor}`,
+      marginBottom: "6px",
+      "& .Mui-selected": {
+        color: activeColor
+      },
+      "& .MuiTabs-indicator": {
+        backgroundColor: activeColor
+      }
+    }
+  };
+};
+export default Style;