@griddo/ax 11.0.26 → 11.0.27-rc.0

package/config/griddo-config/cx-polyfills/componentsBundle.js

@@ -1,4 +1,4 @@
-export * from "__componentsConfig";
+export { default as config } from "__componentsConfig";
 export * from "__componentsIndex";
 export { default as builderSSR } from "__ssrConfig";
 export * as ssrHelpers from "__ssrHelpers";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.0.26",
+  "version": "11.0.27-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9f3c72f1c4e3a730e0b18f47260a62477e0bcb0e"
+  "gitHead": "15beb457f7fddc15b542afc42274a740b267da67"
 }

package/scripts/griddo-sync-schemas.js

@@ -7,36 +7,32 @@ const dotenv = require("dotenv");
 const path = require("path");
 const fs = require("fs");
 const compiler = require("../config/webpackSchemas.config");
-
 const { resolveComponentsPath, resolveComponentsGriddoConfig } = require("../config/griddo-config");
 
 dotenv.config({ path: findUp.sync(".env") });
 
-const API_URL = process.env.API_URL || process.env.REACT_APP_API_ENDPOINT;
-// TODO: Cambiar por /schemas al pasar a producción
-const API_ENDPOINT = `${API_URL}/schemas`;
-const API_METHOD = "PUT";
-const API_DEV_KEY = process.env.developerKey;
+const { API_URL, REACT_APP_API_ENDPOINT, GRIDDO_API_URL, developerKey } = process.env;
+const apiURL = API_URL || REACT_APP_API_ENDPOINT || GRIDDO_API_URL;
+const tempFile = "__griddo_config_parsed__.js";
 
-async function main() {
+(async () => {
   console.clear();
-  const tempFile = "__griddo_config_parsed__.js";
-  const componentsGriddoConfig = resolveComponentsGriddoConfig();
 
-  const inputFile = componentsGriddoConfig;
+  const instanceGriddoConfigFile = resolveComponentsGriddoConfig();
+  const inputFile = instanceGriddoConfigFile;
   const outputFile = `${__dirname}/${tempFile}`;
 
-  if (fs.existsSync(outputFile)) {
-    fs.unlinkSync(outputFile);
-  }
-
   try {
+    if (fs.existsSync(outputFile)) {
+      fs.unlinkSync(outputFile);
+    }
+
     if (!fs.existsSync(inputFile)) {
-      throw new Error(`Source schemas config not found: ${inputFile}`);
+      throw new Error(`Griddo config file not found: ${inputFile}`);
     }
 
     await compiler({
-      input: componentsGriddoConfig,
+      input: instanceGriddoConfigFile,
       output: { filename: tempFile, path: __dirname },
     });
 
@@ -49,10 +45,30 @@ async function main() {
   }
 
   const _griddoConfig = require(path.resolve(__dirname, `./${tempFile}`));
-  const griddoConfig = _griddoConfig.default || _griddoConfig;
+  const griddoConfig = _griddoConfig.default;
+
+  const gcs = griddoConfig.schemas;
+
+  const _schemas = {
+    all: {
+      ...gcs.ui.modules,
+      ...gcs.ui.components,
+    },
+    modules: gcs.ui.modules,
+    templates: gcs.ui.templates,
+    structuredData: gcs.contentTypes.structuredData,
+    dataPacks: gcs.contentTypes.dataPacks,
+    dataPacksCategories: gcs.contentTypes.dataPacksCategories,
+    languages: gcs.config.languages,
+    menus: gcs.config.menus,
+    menuItems: gcs.config.menuItems,
+    richTextConfig: gcs.config.richTextConfig,
+    forms: gcs.forms,
+  };
 
-  // La propiedad computed en los schemas de datos estructurados se perderá si no la stringificamos primero
-  checkComputedSchemas(griddoConfig.schemas);
+  // La propiedad computed en los schemas de datos estructurados se perderá si
+  // no la stringificamos primero.
+  parseComputedPropInStructuredDataSchemas(_schemas.structuredData);
 
   const { version } = require(resolveComponentsPath("package.json"));
 
@@ -64,29 +80,31 @@ async function main() {
     dataPacksCategories: {},
     languages: [],
   };
-
+  const data = { version, ...emptySchemas, ..._schemas };
+  console.log("En sync schemas mandamos este data: \n");
+  console.log(data);
+  console.log("----------");
   try {
     await axios({
-      url: API_ENDPOINT,
-      headers: {
-        authorization: API_DEV_KEY,
-      },
-      method: API_METHOD,
-      data: { version, ...emptySchemas, ...griddoConfig.schemas },
+      url: `${apiURL}/schemas`,
+      headers: { authorization: developerKey },
+      method: "PUT",
+      data,
     });
-    console.log("📦 Schemas ✓");
+    console.log(`${chalk.green(" ✔")} Schemas`);
   } catch (e) {
     console.log(chalk.red("ERROR:"), e.response?.data?.message || e.response || e.message);
     process.exit(1);
   }
-}
-
-const checkComputedSchemas = (schemas) => {
-  const structuredDataSchemas = schemas.structuredData;
+})();
 
-  for (const structuredData in structuredDataSchemas) {
-    const value = structuredDataSchemas[structuredData];
-    const fields = value.schema?.fields;
+/**
+ * Parse the computed property of structured data schemas to string.
+ * @mutates
+ */
+function parseComputedPropInStructuredDataSchemas(schemas) {
+  for (const schema in schemas) {
+    const fields = schemas[schema].schema?.fields;
 
     if (!fields) continue;
 
@@ -96,6 +114,4 @@ const checkComputedSchemas = (schemas) => {
       if (computed) field.computed = computed.toString();
     }
   }
-};
-
-main();
+}

package/src/GlobalStore.tsx

@@ -21,6 +21,7 @@ import { redirectsReducer, redirectsInitialState } from "./containers/Redirects/
 import { analyticsReducer, analyticsInitialState } from "./containers/Analytics/reducer";
 import { integrationsReducer, integrationsInitialState } from "./containers/Integrations/reducer";
 import { fileDriveReducer, fileDriveInitialState } from "./containers/FileDrive/reducer";
+import { formsReducer, formsInitialState } from "./containers/Forms/reducer";
 import { LOGOUT } from "./containers/App/constants";
 
 import { IRootState } from "@ax/types";
@@ -56,6 +57,7 @@ export class GlobalStore {
       analytics: analyticsReducer as Reducer<any, Action<any>>,
       integrations: integrationsReducer as Reducer<any, Action<any>>,
       fileDrive: fileDriveReducer as Reducer<any, Action<any>>,
+      forms: formsReducer as Reducer<any, Action<any>>,
     });
 
     const rootReducer = (state: IRootState | undefined, action: any) => {
@@ -78,6 +80,7 @@ export class GlobalStore {
           analytics: analyticsInitialState,
           integrations: integrationsInitialState,
           fileDrive: fileDriveInitialState,
+          forms: formsInitialState,
         };
       }
 

package/src/__tests__/components/TableFilters/LiveFilter/LiveFilter.test.tsx

@@ -17,6 +17,7 @@ const defaultProps = mock<ILiveFilterProps>();
 
 describe("LiveFilter component rendering", () => {
   it("should render live filter", async () => {
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -52,6 +53,7 @@ describe("LiveFilter component rendering", () => {
   });
 
   it("should render the component with no options", async () => {
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -89,6 +91,7 @@ describe("LiveFilter component rendering", () => {
 
 describe("LiveFilter events", () => {
   it("should render check group on click", async () => {
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -129,6 +132,7 @@ describe("LiveFilter events", () => {
   });
 
   it("should check option on click", async () => {
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -172,6 +176,7 @@ describe("LiveFilter events", () => {
   });
 
   it("should uncheck selected option on click and select 'All' option", async () => {
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -220,6 +225,7 @@ describe("LiveFilter events", () => {
   });
 
   it("should call filterItems action on change", async () => {
+    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 

package/src/api/forms.tsx

@@ -0,0 +1,191 @@
+import {
+  FormCategoriesOrderParams,
+  FormContent,
+  FormState,
+  GetFormsParams,
+  PostFormCategoryParams,
+  PutFormCategoryParams,
+} from "@ax/types";
+import { template } from "./config";
+import { IServiceConfig, sendRequest } from "./utils";
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+  GET_FORMS: {
+    ...template,
+    endpoint: ["/site/", "/forms"],
+    method: "GET",
+  },
+  GET_FORM: {
+    ...template,
+    endpoint: "/form/",
+    method: "GET",
+  },
+  CREATE_FORM: {
+    ...template,
+    endpoint: "/form",
+    method: "POST",
+  },
+  UPDATE_FORM: {
+    ...template,
+    endpoint: "/form/",
+    method: "PUT",
+  },
+  DELETE_FORM: {
+    ...template,
+    endpoint: "/form/",
+    method: "DELETE",
+  },
+  DELETE_FORM_BULK: {
+    ...template,
+    endpoint: "/form/bulk",
+    method: "DELETE",
+  },
+  UPDATE_FORM_STATE: {
+    ...template,
+    endpoint: ["/form/", "/state/"],
+    method: "PUT",
+  },
+  GET_FORM_CATEGORIES: {
+    ...template,
+    endpoint: ["/site/", "/form/categories/"],
+    method: "GET",
+  },
+  CREATE_FORM_CATEGORY: {
+    ...template,
+    endpoint: "/form/category",
+    method: "POST",
+  },
+  UPDATE_FORM_CATEGORY: {
+    ...template,
+    endpoint: "/form/category/",
+    method: "PUT",
+  },
+  DELETE_FORM_CATEGORY: {
+    ...template,
+    endpoint: "/form/category/",
+    method: "DELETE",
+  },
+  DELETE_FORM_CATEGORY_BULK: {
+    ...template,
+    endpoint: "/form/category/bulk",
+    method: "DELETE",
+  },
+  ORDER_FORM_CATEGORY: {
+    ...template,
+    endpoint: "/form/category/order",
+    method: "PUT",
+  },
+  FORM_AI_TRANSLATION: {
+    ...template,
+    endpoint: "/translations/form/",
+    method: "POST",
+  },
+};
+
+const getForms = async (siteID: number | "global", params: GetFormsParams) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_FORMS;
+
+  const { page, itemsPerPage, pagination } = params;
+
+  SERVICES.GET_FORMS.dynamicUrl = `${host}${prefix}${siteID}${suffix}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}`;
+  return sendRequest(SERVICES.GET_FORMS);
+};
+
+const getForm = async (formID: number) => {
+  const { host, endpoint } = SERVICES.GET_FORM;
+  SERVICES.GET_FORM.dynamicUrl = `${host}${endpoint}${formID}`;
+
+  return sendRequest(SERVICES.GET_FORM);
+};
+
+const createForm = async (data: any) => sendRequest(SERVICES.CREATE_FORM, { ...data });
+
+const updateForm = async (formID: number, data: any) => {
+  const { host, endpoint } = SERVICES.UPDATE_FORM;
+  SERVICES.UPDATE_FORM.dynamicUrl = `${host}${endpoint}${formID}`;
+
+  return sendRequest(SERVICES.UPDATE_FORM, { ...data });
+};
+
+const deleteForm = async (formID: number) => {
+  const { host, endpoint } = SERVICES.DELETE_FORM;
+
+  SERVICES.DELETE_FORM.dynamicUrl = `${host}${endpoint}${formID}`;
+
+  return sendRequest(SERVICES.DELETE_FORM);
+};
+
+const updateFormState = async (formID: number, state: FormState) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.UPDATE_FORM_STATE;
+
+  SERVICES.UPDATE_FORM_STATE.dynamicUrl = `${host}${prefix}${formID}${suffix}${state}`;
+  return sendRequest(SERVICES.UPDATE_FORM_STATE);
+};
+
+const deleteFormBulk = async (formIds: number[]) => {
+  return sendRequest(SERVICES.DELETE_FORM_BULK, { formIds });
+};
+
+const getFormTranslation = async (data: FormContent, langID: number) => {
+  const { host, endpoint } = SERVICES.FORM_AI_TRANSLATION;
+  SERVICES.FORM_AI_TRANSLATION.dynamicUrl = `${host}${endpoint}${langID}`;
+
+  return sendRequest(SERVICES.FORM_AI_TRANSLATION, { ...data });
+};
+
+const getFormCategories = async (siteID: number | "global", type: string) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_FORM_CATEGORIES;
+
+  SERVICES.GET_FORM_CATEGORIES.dynamicUrl = `${host}${prefix}${siteID}${suffix}${type}`;
+  return sendRequest(SERVICES.GET_FORM_CATEGORIES);
+};
+
+const createFormCategory = async (data: PostFormCategoryParams) =>
+  sendRequest(SERVICES.CREATE_FORM_CATEGORY, { ...data });
+
+const updateFormCategory = async (categoryID: number, data: PutFormCategoryParams) => {
+  const { host, endpoint } = SERVICES.UPDATE_FORM_CATEGORY;
+  SERVICES.UPDATE_FORM_CATEGORY.dynamicUrl = `${host}${endpoint}${categoryID}`;
+
+  return sendRequest(SERVICES.UPDATE_FORM_CATEGORY, { ...data });
+};
+
+const deleteFormCategory = async (categoryID: number) => {
+  const { host, endpoint } = SERVICES.DELETE_FORM_CATEGORY;
+
+  SERVICES.DELETE_FORM_CATEGORY.dynamicUrl = `${host}${endpoint}${categoryID}`;
+
+  return sendRequest(SERVICES.DELETE_FORM_CATEGORY);
+};
+
+const deleteFormCategoryBulk = async (categoryIds: number[]) => {
+  return sendRequest(SERVICES.DELETE_FORM_CATEGORY_BULK, { categoryIds });
+};
+
+const orderFormCategory = (data: FormCategoriesOrderParams) => sendRequest(SERVICES.ORDER_FORM_CATEGORY, { ...data });
+
+export default {
+  getForms,
+  getForm,
+  createForm,
+  updateForm,
+  deleteForm,
+  deleteFormBulk,
+  getFormCategories,
+  createFormCategory,
+  updateFormCategory,
+  deleteFormCategory,
+  deleteFormCategoryBulk,
+  orderFormCategory,
+  updateFormState,
+  getFormTranslation,
+};

package/src/api/index.tsx

@@ -18,6 +18,7 @@ import redirects from "./redirects";
 import analytics from "./analytics";
 import roles from "./roles";
 import integrations from "./integrations";
+import forms from "./forms";
 
 export {
   sites,
@@ -40,4 +41,5 @@ export {
   analytics,
   roles,
   integrations,
+  forms,
 };

package/src/components/Browser/index.tsx

@@ -28,11 +28,13 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     showIframe,
     browserRef,
     actions,
+    editorType = "page",
   } = props;
 
   const { id, entity } = content;
   const domain = window.location.origin;
-  const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}`;
+  const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}`;
+  const isPageEditor = editorType === "page";
 
   const [resolution, setResolution] = useState("desktop");
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -106,43 +108,45 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
   return (
     <S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef}>
-      <S.NavBar>
-        <S.NavUrl>{url}</S.NavUrl>
-        {isPreview && (
-          <S.NavActions data-testid="nav-actions-wrapper">
-            <S.IconWrapper data-testid="icon-wrapper-browser" onClick={copyUrl}>
-              <Tooltip content="Copy url to share draft" bottom>
-                <Icon name="share" size="24" />
-              </Tooltip>
-            </S.IconWrapper>
-            <S.IconWrapper active={resolution === "desktop"} onClick={() => setResolution("desktop")}>
-              <Tooltip content="Desktop" bottom>
-                <Icon name="desktop" size="24" />
-              </Tooltip>
-            </S.IconWrapper>
-            <S.IconWrapper
-              data-testid="icon-res-tablet"
-              active={resolution === "tablet"}
-              onClick={() => setResolution("tablet")}
-            >
-              <Tooltip content="Tablet" bottom>
-                <Icon name="tablet" size="24" />
-              </Tooltip>
-            </S.IconWrapper>
-            <S.IconWrapper
-              data-testid="icon-res-phone"
-              active={resolution === "phone"}
-              onClick={() => setResolution("phone")}
-            >
-              <Tooltip content="Mobile" bottom>
-                <Icon name="phone" size="24" />
-              </Tooltip>
-            </S.IconWrapper>
-          </S.NavActions>
-        )}
-      </S.NavBar>
+      {isPageEditor && (
+        <S.NavBar>
+          <S.NavUrl>{url}</S.NavUrl>
+          {isPreview && (
+            <S.NavActions data-testid="nav-actions-wrapper">
+              <S.IconWrapper data-testid="icon-wrapper-browser" onClick={copyUrl}>
+                <Tooltip content="Copy url to share draft" bottom>
+                  <Icon name="share" size="24" />
+                </Tooltip>
+              </S.IconWrapper>
+              <S.IconWrapper active={resolution === "desktop"} onClick={() => setResolution("desktop")}>
+                <Tooltip content="Desktop" bottom>
+                  <Icon name="desktop" size="24" />
+                </Tooltip>
+              </S.IconWrapper>
+              <S.IconWrapper
+                data-testid="icon-res-tablet"
+                active={resolution === "tablet"}
+                onClick={() => setResolution("tablet")}
+              >
+                <Tooltip content="Tablet" bottom>
+                  <Icon name="tablet" size="24" />
+                </Tooltip>
+              </S.IconWrapper>
+              <S.IconWrapper
+                data-testid="icon-res-phone"
+                active={resolution === "phone"}
+                onClick={() => setResolution("phone")}
+              >
+                <Tooltip content="Mobile" bottom>
+                  <Icon name="phone" size="24" />
+                </Tooltip>
+              </S.IconWrapper>
+            </S.NavActions>
+          )}
+        </S.NavBar>
+      )}
       {showIframe ? (
-        <S.FrameWrapper data-testid="navbar-iframe-wrapper">
+        <S.FrameWrapper hasBorder={isPageEditor} data-testid="navbar-iframe-wrapper">
           <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} loading="lazy" />
         </S.FrameWrapper>
       ) : (
@@ -189,6 +193,7 @@ export interface IBrowserProps {
   isPreview?: boolean;
   showIframe?: boolean;
   browserRef?: React.RefObject<HTMLDivElement>;
+  editorType?: "form" | "page";
   actions?: {
     setSelectedContentAction: any;
     deleteModuleAction(editorID: number[]): void;

package/src/components/Browser/style.tsx

@@ -46,10 +46,10 @@ const IconWrapper = styled.div<{ active?: boolean }>`
   }
 `;
 
-const FrameWrapper = styled.div`
-  border-left: 1px solid ${(p) => p.theme.color.uiLine};
+const FrameWrapper = styled.div<{ hasBorder: boolean }>`
+  border-left: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
   border-right: 1px solid ${(p) => p.theme.color.uiLine};
-  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  border-bottom: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
   display: flex;
   justify-content: center;
   height: 100%;

package/src/components/BrowserContent/index.tsx

@@ -76,7 +76,7 @@ interface IProps {
   footer?: any;
   languageID: number;
   pageLanguages: Core.Page["pageLanguages"];
-  renderer: "editor" | "preview";
+  renderer: "editor" | "preview" | "forms";
   selectEditorID?(
     selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
     parentComponent: string | undefined | null,

package/src/components/ConfigPanel/Form/index.tsx

@@ -35,7 +35,7 @@ export const Form = (props: IFormProps): JSX.Element => {
     (!isGlobal && isAllowedToEditConfigPages) || (isGlobal && isAllowedToEditGlobalData);
   const isAllowedToEditPageSEO = (!isGlobal && isAllowedToEditSiteSeo) || (isGlobal && isAllowedToEditGlobalSeo);
 
-  const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
+  const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title.toLowerCase() === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
 
   const generateFields = (field: ISchemaField) => {
@@ -76,14 +76,15 @@ export const Form = (props: IFormProps): JSX.Element => {
         .filter((value: string | boolean) => !!value);
     } else {
       mappedTabs = schema.configTabs.reduce((acc: string[], curr: ISchemaTab) => {
+        const currTitle = curr.title.toLowerCase();
         if (
           !isPageSchema ||
           (isPageSchema &&
-            ((curr.title === "content" && isAllowedToEditPageContent) ||
-              (curr.title === "config" && isAllowedToEditPageConfig) ||
-              (curr.title === "SEO & Analytics" && isAllowedToEditPageSEO)))
+            ((currTitle === "content" && isAllowedToEditPageContent) ||
+              (currTitle === "config" && isAllowedToEditPageConfig) ||
+              (currTitle === "seo & analytics" && isAllowedToEditPageSEO)))
         ) {
-          return [...acc, curr.title];
+          return [...acc, currTitle];
         }
         return acc;
       }, []);

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { themes } from "components";
+import { config } from "components";
 
 import { Icon, NoteField, Tabs } from "@ax/components";
 import { INotification, ISchema } from "@ax/types";
@@ -9,6 +9,8 @@ import ConnectedField from "../Form/ConnectedField";
 
 import * as S from "./style";
 
+const themes = config.schemas.config.themes;
+
 const noteText = "This is Global content and you cannot edit it here. To do so, you must go to the Global page";
 const noteTitle = "Global content";
 const errorText = "You don't have the permissions to edit the original content.";

package/src/components/ConfigPanel/Header/index.tsx

@@ -66,6 +66,7 @@ const Header = (props: IHeaderProps) => {
         setBreadcrumbOld(breadcrumb);
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [headerRef, breadcrumb, setHeaderHeight]);
 
   const removeItem = () => {

package/src/components/Fields/ComponentArray/MixableComponentArray/AddItemButton/index.tsx

@@ -2,11 +2,10 @@ import React, { memo } from "react";
 import { IconAction, SideModal, Tooltip } from "@ax/components";
 
 const AddItemButton = (props: IProps) => {
-  const { handleClick, whiteList, isModuleArr, categories, theme, isOpen, toggleModal } = props;
-  const optionsType = isModuleArr ? "modules" : "components";
+  const { handleClick, whiteList, categories, theme, isOpen, contentType, toggleModal } = props;
   const addAction = whiteList.length <= 1 ? () => handleClick(whiteList[0]) : toggleModal;
 
-  const tooltip = isModuleArr ? "Add module" : "Add component";
+  const tooltip = contentType === "fields" ? "Add field" : contentType === "module" ? "Add module" : "Add component";
 
   return (
     <>
@@ -14,7 +13,7 @@ const AddItemButton = (props: IProps) => {
         <IconAction icon="add" onClick={addAction} />
       </Tooltip>
       <SideModal
-        optionsType={optionsType}
+        optionsType={contentType}
         whiteList={whiteList}
         categories={categories}
         toggleModal={toggleModal}
@@ -30,11 +29,11 @@ const AddItemButton = (props: IProps) => {
 interface IProps {
   handleClick: any;
   whiteList: any[];
-  isModuleArr: boolean;
   categories?: any;
   theme: string;
   toggleModal: () => void;
   isOpen: boolean;
+  contentType: string;
 }
 
 export default memo(AddItemButton);