@griddo/ax 11.0.29-rc.0 → 11.0.30-rc.0

package/src/modules/App/Routing/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, matchPath } from "react-router-dom";
 
 import { ErrorGuard } from "@ax/guards";
 import { IRootState, IUser } from "@ax/types";
@@ -9,6 +9,7 @@ import { publicRoutes, privateRoutes, routes, IRouter } from "@ax/routes";
 import { ILogoutAction } from "@ax/containers/App/interfaces";
 import { ErrorPage } from "@ax/components";
 import { usePermission } from "@ax/hooks";
+import { IGlobalSettings } from "@ax/containers/App/reducer";
 import NavMenu from "./NavMenu";
 import PrivateRoute from "./PrivateRoute";
 import Logout from "./Logout";
@@ -16,7 +17,9 @@ import Logout from "./Logout";
 import * as S from "./style";
 
 const Routing = (props: IProps) => {
-  const { path, token, currentUser, setHistoryPush, logout } = props;
+  const { path, token, currentUser, globalSettings, setHistoryPush, logout } = props;
+
+  const { useForms } = globalSettings;
 
   useEffect(() => {
     path === "/" && setHistoryPush("/login");
@@ -34,8 +37,17 @@ const Routing = (props: IProps) => {
 
   const route: IRouter | undefined = routes.find((item: IRouter) => {
     const cleanPath = path && path.replace(/\/$/, "");
+
+    const match = cleanPath
+      ? matchPath(cleanPath, {
+          path: item.path,
+          exact: true,
+          strict: false,
+        })
+      : null;
+
     return (
-      item.path === cleanPath ||
+      !!match ||
       (item.routesGroups &&
         item.routesGroups.find((subitem) => {
           return subitem.routes.find((subroute) => subroute.path === path);
@@ -72,12 +84,15 @@ const Routing = (props: IProps) => {
   };
 
   const mapRoutes = (routeArr: IRouter[], isPrivate: boolean) =>
-    routeArr.map((singleRoute: IRouter, i) => (
-      <React.Fragment key={i}>
-        {getRoute(singleRoute.component, singleRoute.path, isPrivate, singleRoute.permission)}
-        {singleRoute.routesGroups && singleRoute.routesGroups.map((subgroup: any) => mapSubroutes(subgroup, isPrivate))}
-      </React.Fragment>
-    ));
+    routeArr
+      .filter((singleRoute: IRouter) => useForms || (!useForms && !singleRoute.path.includes("/forms")))
+      .map((singleRoute: IRouter, i) => (
+        <React.Fragment key={i}>
+          {getRoute(singleRoute.component, singleRoute.path, isPrivate, singleRoute.permission)}
+          {singleRoute.routesGroups &&
+            singleRoute.routesGroups.map((subgroup: any) => mapSubroutes(subgroup, isPrivate))}
+        </React.Fragment>
+      ));
 
   return (
     <>
@@ -102,6 +117,7 @@ const mapStateToProps = (state: IRootState) => ({
   path: state.router.location.pathname,
   token: state.app.token,
   currentUser: state.users.currentUser,
+  globalSettings: state.app.globalSettings,
 });
 
 interface IDispatchProps {
@@ -113,6 +129,7 @@ interface IStateProps {
   path?: string;
   token: string;
   currentUser: IUser | null;
+  globalSettings: IGlobalSettings;
 }
 
 const mapDispatchToProps = {

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -98,11 +98,11 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
     : [];
 
   const getCurrentLanguages = () => {
-    const availables: any[] = [];
+    const availables: ILanguage[] = [];
 
     dataLanguages &&
       dataLanguages.forEach(
-        (dataLang: any) =>
+        (dataLang) =>
           languages &&
           languages.forEach((language) => {
             if (language.id === dataLang.language) {
@@ -131,7 +131,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
     }
   };
 
-  const handleLanguage = (language: ILanguage) => async () => {
+  const handleLanguage = async (language: ILanguage) => {
     const lang = {
       locale: language.locale,
       id: language.id,
@@ -257,7 +257,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 
 interface IProps {
   category: IStructuredDataCategory | ICategoryGroup;
-  languages: any[];
+  languages: ILanguage[];
   lang: { locale: string; id: number | null };
   isTranslatable: boolean;
   isSelected: boolean;

package/src/modules/Categories/CategoriesList/index.tsx

@@ -22,6 +22,7 @@ import {
   ICategoryGroup,
   IOrderCategoryParams,
   IQueryValue,
+  ILanguage,
 } from "@ax/types";
 import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
 import {
@@ -95,6 +96,11 @@ const CategoriesList = (props: IProps): JSX.Element => {
 
   const scope = currentSiteID ? "site" : "global";
   const currentCategories = categories[scope].sort(sortBy("title", false));
+  const isEmpty = currentDataContent && currentDataContent.length === 0;
+  const hasCategories = currentCategories.length > 0;
+  const categoryName = currentStructuredData && currentStructuredData.title;
+  const availableLanguages = currentSiteID ? siteLanguages : globalLangs;
+  const isTranslatable = currentStructuredData ? currentStructuredData.translate : true;
 
   const catIds = getIDsFromTree(currentDataContent);
 
@@ -227,14 +233,6 @@ const CategoriesList = (props: IProps): JSX.Element => {
     />
   );
 
-  const availableLanguages = currentSiteID ? siteLanguages : globalLangs;
-
-  const isTranslatable = currentStructuredData ? currentStructuredData.translate : true;
-
-  const languageActions = {
-    setLanguage,
-  };
-
   const getIcon = (item: TreeItem, onExpand: (itemId: ItemId) => void, onCollapse: (itemId: ItemId) => void) => {
     const handleCollapse = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {
       e.stopPropagation();
@@ -335,8 +333,8 @@ const CategoriesList = (props: IProps): JSX.Element => {
         destination.index !== undefined
           ? destination.index - (isGoingUp ? 1 : 0)
           : parent
-          ? parent.children.length - 1
-          : 0;
+            ? parent.children.length - 1
+            : 0;
 
       const itemDestination = findChildByIndex(tree, parentId, index);
 
@@ -355,9 +353,11 @@ const CategoriesList = (props: IProps): JSX.Element => {
     }
   };
 
-  const isEmpty = currentDataContent && currentDataContent.length === 0;
-  const hasCategories = currentCategories.length > 0;
-  const categoryName = currentStructuredData && currentStructuredData.title;
+  const handleLanguage = (language: ILanguage) => {
+    const { locale, id } = language;
+    setLanguage({ locale, id });
+  };
+
   const emptyStateProps = {
     message: hasCategories
       ? `To start using ${categoryName} categories, create as many of them as yo need.`
@@ -386,7 +386,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
       rightButton={rightButtonProps}
       language={lang}
       availableLanguages={availableLanguages}
-      languageActions={languageActions}
+      languageAction={handleLanguage}
       searchAction={setSearchQuery}
       searchValue={searchQuery}
     >
@@ -494,8 +494,8 @@ interface ICategoriesProps {
   currentDataContent: (IStructuredDataCategory | ICategoryGroup)[];
   currentStructuredData: IStructuredData | null;
   lang: { locale: string; id: number };
-  siteLanguages: any[];
-  globalLangs: any[];
+  siteLanguages: ILanguage[];
+  globalLangs: ILanguage[];
   totalItems: number;
   categories: { global: IStructuredData[]; site: IStructuredData[] };
   activatedDataPacks: IDataPack[];

package/src/modules/Content/BulkHeader/TableHeader/index.tsx

@@ -76,11 +76,7 @@ const TableHeader = (props: IProps): JSX.Element => {
           </S.NameWrapper>
           {activeColumns.includes("live") && (
             <S.HeaderWrapper>
-              <LiveFilter
-                filterItems={filterItems}
-                value={filterValues.liveStatus}
-                statusOptions={["offline", "active", "scheduled"]}
-              />
+              <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} hasBasicStatus={true} />
             </S.HeaderWrapper>
           )}
           {CategoryColumns}

package/src/modules/Content/PageItem/index.tsx

@@ -1,10 +1,11 @@
-import React, { memo, useRef, useState } from "react";
-import { schemas } from "components";
+import React, { useRef, useState } from "react";
+import { connect } from "react-redux";
+import { config } from "components";
 import { useTheme } from "styled-components";
 
 import { useAdaptiveText, useModal, usePermission } from "@ax/hooks";
 import { getHumanLastModifiedDate, getScheduleFormatDate, getTemplateDisplayName, slugify } from "@ax/helpers";
-import { IPage, ISite, ISavePageParams, ICheck, IColumn, IPageLanguage, IDataPack } from "@ax/types";
+import { IPage, ISite, ISavePageParams, ICheck, IColumn, IPageLanguage, IDataPack, ILanguage } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import {
   CheckField,
@@ -18,11 +19,15 @@ import {
   Tooltip,
   CategoryCell,
 } from "@ax/components";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { appActions } from "@ax/containers/App";
 
 import { DeleteModal, CopyModal } from "../atoms";
 
 import * as S from "./style";
 
+const schemas = config.schemas.ui;
+
 const PageItem = (props: IPageItemProps): JSX.Element => {
   const {
     functions,
@@ -38,6 +43,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     sites,
     skipReview,
     hoverCheck,
+    createNewTranslation,
+    setLanguage,
   } = props;
   const { isSelected, siteLanguages, page, lang, isDuplicable } = item;
   const {
@@ -48,7 +55,6 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     setHistoryPush,
     updatePageStatus,
     setCurrentPageID,
-    languageActions,
     duplicatePage,
     validatePage,
     getPage,
@@ -227,34 +233,27 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     await getSiteContent();
   };
 
-  const getSelectedPageLanguage = (language: any) => pageLanguages.find((lang: any) => lang.languageId === language.id);
-
-  const handleLanguage = (language: any) => () => {
-    if (!languageActions || !languageActions.setLanguage) return;
+  const getSelectedPageLanguage = (language: ILanguage) =>
+    pageLanguages.find((lang: IPageLanguage) => lang.languageId === language.id);
 
+  const handleLanguage = (language: ILanguage) => {
     const { locale, id } = language;
 
-    const lang = {
+    setLanguage({
       locale,
       id,
-    };
-
-    languageActions.setLanguage(lang);
+    });
 
     const selectedPageLanguage = getSelectedPageLanguage(language);
-
-    selectedPageLanguage
-      ? setCurrentPageID(selectedPageLanguage.pageId)
-      : languageActions.createNewTranslation && languageActions.createNewTranslation(true);
-
+    selectedPageLanguage ? setCurrentPageID(selectedPageLanguage.pageId) : createNewTranslation(true);
     setHistoryPush("pages/editor", true);
   };
 
   const getCurrentPageLanguages = () => {
-    const languages: any[] = [];
+    const languages: ILanguage[] = [];
 
     pageLanguages.forEach(
-      (pageLang: any) =>
+      (pageLang: IPageLanguage) =>
         siteLanguages &&
         siteLanguages.forEach((siteLang) => {
           if (siteLang.id === pageLang.languageId) {
@@ -294,14 +293,14 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   let availableLanguages = siteLanguages;
 
   if (!isTemplateActivated || isGlobal || !isAllowedToCreatePages) {
-    const pageLanguagesIDs = pageLanguages.map((language: any) => language.languageId);
+    const pageLanguagesIDs = pageLanguages.map((language: IPageLanguage) => language.languageId);
     availableLanguages = siteLanguages && siteLanguages.filter((language) => pageLanguagesIDs.includes(language.id));
   }
 
   const languageMenu = () => (
     <LanguageMenu
       language={locale}
-      availableLanguages={availableLanguages}
+      availableLanguages={availableLanguages || []}
       setLanguage={handleLanguage}
       currentLanguages={currentLanguages}
     />
@@ -309,7 +308,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const FlagsButton = () => (
     <S.FlagsWrapper onClick={onClick}>
-      {currentLanguages.slice(0, 2).map((pageLanguage: any, i: number) => (
+      {currentLanguages.slice(0, 2).map((pageLanguage: ILanguage, i: number) => (
         <Flag key={`${pageLanguage.language}${i}`} name={pageLanguage.locale} size="15" />
       ))}
       <span>({currentLanguages.length})</span>
@@ -329,8 +328,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     isGlobal && !manuallyImported
       ? "This page has been provided by subscription. You cannot remove it."
       : canBeUnpublished === false
-      ? "This is the canonical site of the page. You cannot remove it."
-      : null;
+        ? "This is the canonical site of the page. You cannot remove it."
+        : null;
 
   let menuOptions: IPageOption[] = [];
 
@@ -477,8 +476,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     const categories: string[] = !type
       ? []
       : Array.isArray(type)
-      ? type.map((cat: any) => cat.label || cat.title)
-      : [type.label || type.title];
+        ? type.map((cat: any) => cat.label || cat.title)
+        : [type.label || type.title];
 
     return (
       activeColumns.includes(col.key) && (
@@ -656,18 +655,13 @@ interface IPageOption {
 interface IPageItemProps {
   item: {
     isSelected: boolean;
-    siteLanguages?: any[];
+    siteLanguages?: ILanguage[];
     page: IPage;
     site: ISite;
     lang: { locale: string; id: number };
     isDuplicable: boolean;
   };
   functions: {
-    languageActions?: {
-      setLanguage?(lang: { locale: string; id: number | null }): void;
-      createNewTranslation?(isNewTranslation: boolean): void;
-      getContent?(id?: number): void;
-    };
     onClick: (e: any) => void;
     onCheck: (e: any) => void;
     deletePage(params?: ISavePageParams, currentLanguage?: string): void;
@@ -695,6 +689,13 @@ interface IPageItemProps {
   sites: ISite[];
   skipReview?: boolean;
   hoverCheck?: boolean;
+  createNewTranslation(isNewTranslation: boolean): void;
+  setLanguage(lang: { locale: string; id: number | null }): void;
 }
 
-export default memo(PageItem);
+const mapDispatchToProps = {
+  createNewTranslation: pageEditorActions.createNewTranslation,
+  setLanguage: appActions.setLanguage,
+};
+
+export default connect(null, mapDispatchToProps)(PageItem);

package/src/modules/Content/index.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useCallback, useState, useRef, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
-import { schemas } from "components";
+import { config } from "components";
+
+const schemas = config.schemas.ui;
 
 import { useModal, useBulkSelection, useToast, useCategoryColors, usePermission, useWindowSize } from "@ax/hooks";
 import {
@@ -23,6 +25,7 @@ import {
   IStructuredData,
   ISchemaField,
   IExportDataParams,
+  ILanguage,
 } from "@ax/types";
 import {
   MainWrapper,
@@ -100,7 +103,6 @@ const Content = (props: IProps): JSX.Element => {
     currentDataContent,
     isData,
     setSelectedStructuredData,
-    createNewTranslation,
     resetForm,
     deleteBulk,
     getPage,
@@ -199,7 +201,7 @@ const Content = (props: IProps): JSX.Element => {
   const [pagesSelected, setPagesSelected] = useState<any[]>([]);
   const history = useHistory();
 
-  const [windowWidth, windowHeight] = useWindowSize();
+  const [windowWidth] = useWindowSize();
   const maxColumns = getMaxColumns(windowWidth, isStructuredData);
 
   const initialColumns = getColumns(categoryColumns, isStructuredData, isGlobalPages, maxColumns.value);
@@ -292,7 +294,7 @@ const Content = (props: IProps): JSX.Element => {
       tableRef.current.scrollTo(0, 0);
     }
     // eslint-disable-next-line
-  }, [page, filter, currentFilterQuery, currentSearch]);
+  }, [page, filter, currentFilterQuery, currentSearch, lang]);
 
   useLayoutEffect(() => {
     setPage(firstPage);
@@ -344,13 +346,13 @@ const Content = (props: IProps): JSX.Element => {
         emptyState.message = isContentType
           ? "You don’t have pages with this content type yet."
           : isAllowedToCreatePages
-          ? "To start using pages in your site, create as many pages as you need."
-          : undefined;
+            ? "To start using pages in your site, create as many pages as you need."
+            : undefined;
         emptyState.button = isContentType
           ? "View all content"
           : isAllowedToCreatePages
-          ? "Create the first page"
-          : undefined;
+            ? "Create the first page"
+            : undefined;
         emptyState.action = isContentType ? () => setFilter("unique-pages") : toggleNewModal;
       }
       setIsEmpty(!content.length);
@@ -432,7 +434,7 @@ const Content = (props: IProps): JSX.Element => {
 
   const createContent = isData ? addNewData : addNewPage;
 
-  const goToPage = (page: IPage) => (e: React.MouseEvent<HTMLElement>) => {
+  const goToPage = (page: IPage) => () => {
     const pageID = page.haveDraftPage ? page.haveDraftPage : page.id;
     setCurrentPageID(pageID);
   };
@@ -488,8 +490,8 @@ const Content = (props: IProps): JSX.Element => {
           }
         })
       : deleteAllVersions
-      ? await handleBulkDelete(allPageVersions)
-      : await handleBulkDelete(selectedItems.all);
+        ? await handleBulkDelete(allPageVersions)
+        : await handleBulkDelete(selectedItems.all);
     toggleDeleteModal();
     const allPageItemsSelected = selectedItems.all.length >= currentSitePages.length;
     const previousPage = page - 1;
@@ -606,17 +608,6 @@ const Content = (props: IProps): JSX.Element => {
     setHistoryPush(path, isFromPage);
   };
 
-  const changeLanguage = (language: { locale: string; id: number | null }) => {
-    setPage(firstPage);
-    resetBulkSelection();
-    return setLanguage(language);
-  };
-
-  const dataLanguageActions = {
-    setLanguage: changeLanguage,
-    getSiteContent,
-  };
-
   const mapStructuredData = () =>
     currentDataContent &&
     currentDataContent.map((item: any) => {
@@ -644,12 +635,6 @@ const Content = (props: IProps): JSX.Element => {
       );
     });
 
-  const pageLanguageActions = {
-    setLanguage: changeLanguage,
-    createNewTranslation,
-    getSiteContent,
-  };
-
   const mapPages = () =>
     currentSitePages &&
     currentSitePages.map((pageItem: IPage) => {
@@ -705,7 +690,6 @@ const Content = (props: IProps): JSX.Element => {
         setCurrentPageID,
         duplicatePage,
         removePageFromSite,
-        languageActions: pageLanguageActions,
         deleteBulk: deleteCurrentPageBulk,
         getDataPack: getDataPack,
         setTemplateInstanceError,
@@ -762,8 +746,6 @@ const Content = (props: IProps): JSX.Element => {
 
   const content = isStructuredData ? mapStructuredData() : mapPages();
 
-  const languageActions = isStructuredData ? dataLanguageActions : pageLanguageActions;
-
   const title = currentSiteInfo ? currentSiteInfo.name : `Site Content`;
 
   const options = {
@@ -800,6 +782,13 @@ const Content = (props: IProps): JSX.Element => {
     }
   };
 
+  const handleLanguage = (language: ILanguage) => {
+    const { locale, id } = language;
+    setLanguage({ locale, id });
+    setPage(firstPage);
+    resetBulkSelection();
+  };
+
   const createContentAction = isOptionImportable
     ? { onClick: handleImport, title: "NEXT" }
     : { onClick: createContent, title: "Create new" };
@@ -863,7 +852,7 @@ const Content = (props: IProps): JSX.Element => {
     <MainWrapper
       title={title}
       language={lang}
-      languageActions={languageActions}
+      languageAction={handleLanguage}
       availableLanguages={siteLanguages}
       rightButton={rightButtonProps}
       searchAction={updateCurrentSearch}
@@ -1012,7 +1001,6 @@ interface IDispatchProps {
   deletePage(params?: ISavePageParams): Promise<boolean>;
   setHistoryPush(page: string, isEditor: boolean): Promise<void>;
   setLanguage(lang: { locale: string; id: number | null }): void;
-  createNewTranslation(isNewTranslation: boolean): void;
   getFilteredContent(filter: string | null): void;
   getStructuredDataContents(params: any, siteID: number): Promise<void>;
   resetForm(setDefault?: boolean): void;
@@ -1052,7 +1040,6 @@ const mapDispatchToProps = {
   addTemplate: pageEditorActions.addTemplate,
   updatePageStatus: pageEditorActions.updatePageStatus,
   deletePage: pageEditorActions.deletePage,
-  createNewTranslation: pageEditorActions.createNewTranslation,
   deleteBulk: pageEditorActions.deleteBulk,
   duplicatePage: pageEditorActions.duplicatePage,
   getPage: pageEditorActions.getPage,
@@ -1092,9 +1079,9 @@ interface IPagesProps {
   totalItems: number;
   lang: { locale: string; id: number };
   langID?: number;
-  pageLanguages: any[];
+  pageLanguages: IPageLanguage[];
   errors: IErrorItem[];
-  siteLanguages: any[];
+  siteLanguages: ILanguage[];
   structuredData: IStructuredData[];
   currentStructuredData: IStructuredData | null;
   currentDataContent: IStructuredDataContent[];

package/src/modules/Content/utils.tsx

@@ -1,8 +1,10 @@
-import { schemas } from "components";
+import { config } from "components";
 import { arrayInsert, getActivatedDataPacksIds } from "@ax/helpers";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { IColumn, IDataPack, IPage, ISchemaField, IStructuredData } from "@ax/types";
 
+const schemas = config.schemas.ui;
+
 const getTemplatesFilters = (activatedDataPacks: IDataPack[]) => {
   const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
   const { templates } = schemas;

package/src/modules/Forms/FormCategoriesList/BulkHeader/TableHeader/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { CheckField, TableCounter, Tooltip } from "@ax/components";
+
+import * as S from "./style";
+
+const TableHeader = (props: IProps): JSX.Element => {
+  const { totalItems, selectAllItems, isScrolling, setHoverCheck, checkState } = props;
+  return (
+    <S.TableHeader isScrolling={isScrolling}>
+      <S.CheckHeader>
+        <Tooltip content="Select All Items">
+          <CheckField
+            key="selectAll"
+            name="selectAll"
+            value="selectAll"
+            onChange={selectAllItems}
+            checked={checkState.isAllSelected || checkState.hoverCheck}
+            disabled={false}
+            error={false}
+            setHoverCheck={setHoverCheck}
+          />
+        </Tooltip>
+      </S.CheckHeader>
+      <S.NameHeader>Name</S.NameHeader>
+      <S.CodeHeader>Code</S.CodeHeader>
+      <S.ActionsHeader>
+        <TableCounter totalItems={totalItems} />
+      </S.ActionsHeader>
+    </S.TableHeader>
+  );
+};
+
+interface IProps {
+  totalItems: number;
+  isScrolling: boolean;
+  selectAllItems: () => void;
+  setHoverCheck: (state: boolean) => void;
+  checkState: Record<string, boolean>;
+}
+
+export default TableHeader;

package/src/modules/Forms/FormCategoriesList/BulkHeader/TableHeader/style.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const TableHeader = styled.div<{ isScrolling?: boolean }>`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m}`};
+  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+`;
+
+const CheckHeader = styled(Header)`
+  padding-left: ${(p) => p.theme.spacing.m};
+  width: 32px;
+`;
+
+const NameHeader = styled(Header)`
+  flex-grow: 1;
+`;
+
+const CodeHeader = styled(Header)`
+  flex: 0 0 250px;
+`;
+
+const SelectHeader = styled(Header)`
+  flex: 0 0 115px;
+  justify-content: center;
+`;
+
+const ActionsHeader = styled(Header)`
+  flex: 0 0 80px;
+  padding-right: 0;
+  justify-content: flex-end;
+`;
+
+export { TableHeader, CheckHeader, NameHeader, CodeHeader, ActionsHeader, SelectHeader };

package/src/modules/Forms/FormCategoriesList/BulkHeader/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import TableHeader from "./TableHeader";
+
+import * as S from "./style";
+
+const BulkHeader = (props: IProps): JSX.Element => {
+  const { showBulk, checkState, selectItems, totalItems, isScrolling, bulkActions, setHoverCheck } = props;
+
+  return showBulk ? (
+    <S.StyledBulkSelectionOptions
+      checkState={checkState}
+      actions={bulkActions}
+      selectItems={selectItems}
+      totalItems={totalItems}
+    />
+  ) : (
+    <TableHeader
+      totalItems={totalItems}
+      selectAllItems={selectItems}
+      isScrolling={isScrolling}
+      setHoverCheck={setHoverCheck}
+      checkState={checkState}
+    />
+  );
+};
+
+interface IProps {
+  showBulk: boolean;
+  checkState: Record<string, boolean>;
+  selectItems: () => void;
+  totalItems: number;
+  isScrolling: boolean;
+  bulkActions: { icon: string; text: string; action: () => void }[];
+  setHoverCheck: (state: boolean) => void;
+}
+
+export default BulkHeader;