@griddo/ax 1.58.4 → 1.59.0

package/src/modules/Settings/Globals/style.tsx

@@ -17,4 +17,4 @@ const FormWrapper = styled.div`
   margin: ${(p) => `${p.theme.spacing.m} 0 0 ${p.theme.spacing.m}`};
 `;
 
-export { Wrapper, ContentWrapper, FormWrapper }
+export { Wrapper, ContentWrapper, FormWrapper };

package/src/modules/StructuredData/Form/ConnectedField/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import { IRootState } from "@ax/types";
+import { IErrorItem, IRootState } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { FieldsBehavior } from "@ax/components";
 import { getStructuredDataInnerFields } from "@ax/forms";
@@ -9,9 +9,10 @@ import { getStructuredDataInnerFields } from "@ax/forms";
 import * as S from "./style";
 
 const ConnectedField = (props: IProps) => {
-  const { field, site, form, fieldKey, updateFormValue, disabled } = props;
+  const { field, site, form, fieldKey, updateFormValue, disabled, errors, deleteError } = props;
 
   const value = form.content && form.content[fieldKey];
+  const error = errors.find((err: any) => err.key === field.key);
 
   const handleChange = (newValue: any) => updateFormValue({ [fieldKey]: newValue });
 
@@ -25,6 +26,7 @@ const ConnectedField = (props: IProps) => {
   }
 
   const fieldProps = {
+    objKey: field.key,
     value,
     onChange: handleChange,
     site,
@@ -32,6 +34,8 @@ const ConnectedField = (props: IProps) => {
     fieldType: field.type,
     ...field,
     innerFields,
+    error,
+    deleteError,
   };
 
   return (
@@ -47,15 +51,19 @@ interface IProps {
   site: any;
   fieldKey: string;
   disabled: boolean;
+  errors: IErrorItem[];
   updateFormValue: (value: any) => void;
+  deleteError: (error: IErrorItem) => void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   form: state.structuredData.form,
+  errors: state.structuredData.errors,
 });
 
 const mapDispatchToProps = {
   updateFormValue: structuredDataActions.updateFormValue,
+  deleteError: structuredDataActions.deleteError,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ConnectedField);

package/src/modules/StructuredData/Form/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IRootState } from "@ax/types";
+import { IDataPack, IErrorItem, IRootState } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { MainWrapper, ErrorToast, Notification, Loading } from "@ax/components";
 import { getActivatedDataPacksIds } from "@ax/helpers";
@@ -36,9 +36,12 @@ const Form = (props: IProps) => {
     getSiteDataPack,
     setDataStatus,
     deleteStructuredDataContent,
+    errors,
+    validated,
   } = props;
 
-  const [isNewStructuredData, setisNewStructuredData] = useState(!form.id);
+  const [isNewStructuredData, setIsNewStructuredData] = useState(!form.id);
+  const { isDirty, resetDirty } = useIsDirty(form);
 
   const { fields } = schema;
 
@@ -58,7 +61,7 @@ const Form = (props: IProps) => {
       return <ConnectedField fieldKey={key} field={field} key={`${type}${i}`} site={site} disabled={isDisabled} />;
     });
 
-  const handleSave = (publish?: boolean) => {
+  const handleSave = async (publish?: boolean) => {
     setIsSavedData(true);
     const status = isNewStructuredData ? true : form.draft;
 
@@ -74,9 +77,14 @@ const Form = (props: IProps) => {
       payload = { ...payload, ...form };
     }
 
-    isNewStructuredData
-      ? createStructuredDataContent(payload).then((created: boolean) => created && setisNewStructuredData(false))
-      : updateStructuredDataContent(payload);
+    let saved = false;
+    if (isNewStructuredData) {
+      saved = await createStructuredDataContent(payload);
+      saved && setIsNewStructuredData(false);
+    } else {
+      saved = await updateStructuredDataContent(payload);
+    }
+    saved && resetDirty();
   };
 
   const getSaveLabel = () => {
@@ -92,7 +100,7 @@ const Form = (props: IProps) => {
 
   const inversed = !currentSite;
 
-  const createNewTranslation = (value: boolean) => setisNewStructuredData(value);
+  const createNewTranslation = (value: boolean) => setIsNewStructuredData(value);
 
   const languageActions = {
     setLanguage,
@@ -126,7 +134,6 @@ const Form = (props: IProps) => {
 
   const setRoute = (path: string) => setHistoryPush(path);
 
-  const { isDirty } = useIsDirty(form);
   const modalText = (
     <>
       Some content <strong>is not saved</strong> on this page.
@@ -182,10 +189,20 @@ const Form = (props: IProps) => {
     };
   };
 
+  const reviewForm = async () => {
+    const { validateForm } = props;
+    await validateForm();
+  };
+
   const downArrowMenu = {
     displayed: true,
     button: getPublishButton(form.draft),
     options: [
+      {
+        label: "Review",
+        icon: "question",
+        action: reviewForm,
+      },
       {
         label: "Delete",
         icon: "delete",
@@ -201,6 +218,11 @@ const Form = (props: IProps) => {
     languageActions: isDataTranslatable ? languageActions : null,
   };
 
+  const errorNotificationText =
+    "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
+
+  const validatedNotificationText = "Everything seems ok, you can publish the page.";
+
   return isLoading ? (
     <Loading />
   ) : (
@@ -220,6 +242,7 @@ const Form = (props: IProps) => {
         downArrowMenu={downArrowMenu}
         isFromEditor={true}
         currentPageID={form.id}
+        errors={errors}
       >
         {isDisabled && (
           <S.NotificationWrapper>
@@ -231,6 +254,16 @@ const Form = (props: IProps) => {
             />
           </S.NotificationWrapper>
         )}
+        {errors.length > 0 && (
+          <S.NotificationWrapper>
+            <Notification type="error" text={errorNotificationText} />
+          </S.NotificationWrapper>
+        )}
+        {validated && (
+          <S.NotificationWrapper>
+            <Notification type="success" text={validatedNotificationText} />
+          </S.NotificationWrapper>
+        )}
         <ErrorToast size="l" />
         <S.Wrapper>{Fields}</S.Wrapper>
       </MainWrapper>
@@ -250,14 +283,17 @@ interface IProps {
   currentSite: any;
   lang: { locale: string; id: number | null };
   activatedDataPacks: IDataPack[];
+  errors: IErrorItem[];
+  validated: boolean;
   createStructuredDataContent: (payload: any) => Promise<boolean>;
-  updateStructuredDataContent: (payload: any) => void;
+  updateStructuredDataContent: (payload: any) => Promise<boolean>;
   setLanguage(lang: { locale: string; id: number | null }): void;
   getDataContent(id: number): void;
   setHistoryPush(path: string, isEditor?: boolean): void;
   getSiteDataPack(packID: string): void;
   setDataStatus(id: number, status: string): Promise<boolean>;
   deleteStructuredDataContent(id: number): Promise<boolean>;
+  validateForm(): Promise<boolean>;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -272,6 +308,8 @@ const mapStateToProps = (state: IRootState) => ({
   globalLangs: state.app.globalLangs,
   currentSite: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   activatedDataPacks: state.dataPacks.activated,
+  errors: state.structuredData.errors,
+  validated: state.structuredData.validated,
 });
 
 const mapDispatchToProps = {
@@ -283,6 +321,7 @@ const mapDispatchToProps = {
   getSiteDataPack: dataPacksActions.getSiteDataPack,
   setDataStatus: structuredDataActions.setStatusStructuredDataContent,
   deleteStructuredDataContent: structuredDataActions.deleteStructuredDataContent,
+  validateForm: structuredDataActions.validateForm,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Form);

package/src/modules/StructuredData/Form/style.tsx

@@ -8,13 +8,10 @@ const Wrapper = styled.section`
 const NotificationWrapper = styled.div`
   position: fixed;
   width: 100%;
-  top: ${p => `calc(${p.theme.spacing.s} * 4)`};
+  top: ${(p) => `calc(${p.theme.spacing.s} * 4)`};
   left: 0;
   right: 0;
-  z-index: 1100;
+  z-index: 2;
 `;
 
-export {
-  Wrapper,
-  NotificationWrapper
-};
+export { Wrapper, NotificationWrapper };

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/index.tsx

@@ -1,14 +1,19 @@
 import React from "react";
 
-import { CheckField, TableCounter } from "@ax/components";
-import { IStructuredDataQueryValues } from "@ax/types";
-
-import Name from "../../HeaderMenus/Name";
-import Status from "../../HeaderMenus/Status";
-import Types from "../../HeaderMenus/Types";
-import Site from "../../HeaderMenus/Site";
-import Translations from "../../HeaderMenus/Translations";
-import Live from "../../HeaderMenus/Live";
+import {
+  CheckField,
+  TableCounter,
+  CustomizeFilters,
+  CategoryFilter,
+  NameFilter,
+  TypeFilter,
+  StatusFilter,
+  SiteFilter,
+  LiveFilter,
+  TranslationsFilter,
+} from "@ax/components";
+import { IColumn, IStructuredDataQueryValues } from "@ax/types";
+import { getGlobalPageTypes } from "@ax/helpers";
 
 import * as S from "./style";
 
@@ -24,8 +29,29 @@ const TableHeader = (props: IProps): JSX.Element => {
     sortedListStatus,
     isAllPages,
     checkState,
+    categoryColumns,
+    columns,
+    setColumns,
   } = props;
 
+  const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
+
+  const CategoryColumns =
+    !isAllPages &&
+    categoryColumns.map(
+      (col: any) =>
+        activeColumns.includes(col.key) && (
+          <S.HeaderWrapper key={col.key}>
+            <CategoryFilter filterItems={filterItems} value={filterValues.categories} structuredData={col} />
+          </S.HeaderWrapper>
+        )
+    );
+
+  const globalPageTypes = getGlobalPageTypes();
+  const typeFilters = globalPageTypes.map(({ type, title }) => ({ name: type, value: type, title }));
+  const allFilter = { name: "all", value: "all", title: "All types" };
+  typeFilters.unshift(allFilter);
+
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -42,39 +68,59 @@ const TableHeader = (props: IProps): JSX.Element => {
       {isFromPage ? (
         <>
           <S.NameWrapper>
-            <Name sortItems={sortItems} sortedState={sortedListStatus} />
+            <NameFilter sortItems={sortItems} sortedState={sortedListStatus} urlSorting={true} />
           </S.NameWrapper>
-          {isAllPages ? (
-            <S.TypesWrapper>
-              <Types filterItems={filterItems} />
-            </S.TypesWrapper>
-          ) : (
-            <S.SiteWrapper>
-              <Site filterItems={filterItems} value={filterValues.filterSites} />
-            </S.SiteWrapper>
+          {isAllPages && activeColumns.includes("type") && (
+            <S.HeaderWrapper>
+              <TypeFilter filterItems={filterItems} filters={typeFilters} pointer="types" />
+            </S.HeaderWrapper>
+          )}
+          {!isAllPages && activeColumns.includes("site") && (
+            <S.HeaderWrapper>
+              <SiteFilter filterItems={filterItems} value={filterValues.filterSites} />
+            </S.HeaderWrapper>
           )}
-          <S.LiveWrapper>
-            <Live filterItems={filterItems} value={filterValues.liveStatus} />
-          </S.LiveWrapper>
-          <S.StatusWrapper>
-            <Status sortItems={sortItems} sortedState={sortedListStatus} />
-          </S.StatusWrapper>
-          <S.TranslationsWrapper>
-            <Translations filterItems={filterItems} value={filterValues.translated} />
-          </S.TranslationsWrapper>
-          <S.SeoHeader>SEO</S.SeoHeader>
+          {activeColumns.includes("live") && (
+            <S.HeaderWrapper>
+              <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} />
+            </S.HeaderWrapper>
+          )}
+          {CategoryColumns}
+          {activeColumns.includes("status") && (
+            <S.HeaderWrapper>
+              <StatusFilter sortItems={sortItems} sortedState={sortedListStatus} />
+            </S.HeaderWrapper>
+          )}
+          {activeColumns.includes("translation") && (
+            <S.HeaderWrapper>
+              <TranslationsFilter filterItems={filterItems} value={filterValues.translated} />
+            </S.HeaderWrapper>
+          )}
+          {activeColumns.includes("seo") && <S.SeoHeader>SEO</S.SeoHeader>}
+          <S.ActionsHeader>
+            <TableCounter totalItems={totalItems} />
+            <CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} />
+          </S.ActionsHeader>
         </>
       ) : (
         <>
-          <S.NameHeader>Name</S.NameHeader>
-          <S.LiveHeader>Live</S.LiveHeader>
-          <S.StatusHeader>Status</S.StatusHeader>
-          <S.TransHeader>Translations</S.TransHeader>
+          <S.NameWrapper>
+            <NameFilter sortItems={sortItems} sortedState={sortedListStatus} />
+          </S.NameWrapper>
+          <S.HeaderWrapper>
+            <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} isStructuredData={true} />
+          </S.HeaderWrapper>
+          <S.HeaderWrapper>
+            <StatusFilter sortItems={sortItems} sortedState={sortedListStatus} isStructuredData={true} />
+          </S.HeaderWrapper>
+          <S.HeaderWrapper>
+            <TranslationsFilter filterItems={filterItems} value={filterValues.translated} />
+          </S.HeaderWrapper>
+          <S.ActionsHeader>
+            <TableCounter totalItems={totalItems} />
+          </S.ActionsHeader>
         </>
       )}
-      <S.ActionsHeader>
-        <TableCounter totalItems={totalItems} />
-      </S.ActionsHeader>
     </S.TableHeader>
   );
 };
@@ -90,6 +136,9 @@ interface IProps {
   isAllPages: boolean;
   filterValues: IStructuredDataQueryValues;
   checkState: Record<string, boolean>;
+  categoryColumns: any[];
+  columns: Record<string, IColumn>;
+  setColumns: (columns: Record<string, IColumn>) => void;
 }
 
 export default TableHeader;

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/style.tsx

@@ -15,12 +15,11 @@ const CheckHeader = styled(Header)`
 `;
 
 const NameHeader = styled(Header)`
-  width: 35%;
   flex-grow: 1;
 `;
 
 const SiteHeader = styled(Header)`
-  width: 230px;
+  width: 170px;
   justify-content: center;
 `;
 
@@ -40,8 +39,10 @@ const TransHeader = styled(Header)`
 `;
 
 const ActionsHeader = styled(Header)`
-  width: 92px;
+  width: 100px;
   padding-right: 0;
+  justify-content: flex-end;
+  align-items: center;
 `;
 
 const SeoHeader = styled(Header)`
@@ -53,23 +54,7 @@ const NameWrapper = styled.div`
   position: relative;
 `;
 
-const TypesWrapper = styled.div`
-  position: relative;
-`;
-
-const LiveWrapper = styled.div`
-  position: relative;
-`;
-
-const StatusWrapper = styled.div`
-  position: relative;
-`;
-
-const TranslationsWrapper = styled.div`
-  position: relative;
-`;
-
-const SiteWrapper = styled.div`
+const HeaderWrapper = styled.div`
   position: relative;
 `;
 
@@ -83,10 +68,6 @@ export {
   ActionsHeader,
   SiteHeader,
   NameWrapper,
-  TypesWrapper,
-  LiveWrapper,
-  StatusWrapper,
-  TranslationsWrapper,
-  SiteWrapper,
+  HeaderWrapper,
   SeoHeader,
 };

package/src/modules/StructuredData/StructuredDataList/BulkHeader/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
 import TableHeader from "./TableHeader";
 
-import { IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
+import { IColumn, IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
 
 const BulkHeader = (props: IProps): JSX.Element => {
   const {
@@ -22,6 +22,9 @@ const BulkHeader = (props: IProps): JSX.Element => {
     filterValues,
     sortedListStatus,
     isAllPages,
+    categoryColumns,
+    columns,
+    setColumns,
   } = props;
 
   const deleteAction = {
@@ -65,6 +68,9 @@ const BulkHeader = (props: IProps): JSX.Element => {
       filterValues={filterValues}
       isAllPages={isAllPages}
       checkState={checkState}
+      categoryColumns={categoryColumns}
+      columns={columns}
+      setColumns={setColumns}
     />
   );
 };
@@ -86,6 +92,9 @@ interface IProps {
   sortedListStatus: IStructuredDataSortedInitialState;
   isAllPages: boolean;
   filterValues: IStructuredDataQueryValues;
+  categoryColumns: any[];
+  columns: Record<string, IColumn>;
+  setColumns: (columns: Record<string, IColumn>) => void;
 }
 
 export default BulkHeader;

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/atoms.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import { Modal, FieldsBehavior, ElementsTooltip } from "@ax/components";
 import { slugify } from "@ax/helpers";
 
 import * as S from "./style";
@@ -124,6 +124,27 @@ const UnpublishModal = (props: IModal): JSX.Element => {
   );
 };
 
+const CategoryCell = (props: ICategoryCellProps): JSX.Element => {
+  const { categories, categoryColors, addCategoryColors } = props;
+
+  useEffect(() => {
+    addCategoryColors(categories);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [categories]);
+
+  return (
+    <S.CategoryCell>
+      <ElementsTooltip elements={categories} colors={categoryColors} maxChar={30} rounded={true} />
+    </S.CategoryCell>
+  );
+};
+
+interface ICategoryCellProps {
+  categories: any;
+  categoryColors: any;
+  addCategoryColors(cats: string[]): void;
+}
+
 interface IDeleteModal extends IModal {
   title: string;
   isTranslated: boolean;
@@ -136,4 +157,4 @@ interface IDuplicateModal extends IModal {
   setDuplicateModalState: React.Dispatch<React.SetStateAction<{ title: string; slug: string }>>;
 }
 
-export { DeleteModal, DuplicateModal, UnpublishModal };
+export { DeleteModal, DuplicateModal, UnpublishModal, CategoryCell };

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -1,17 +1,17 @@
 import React, { memo, useState } from "react";
 import { connect } from "react-redux";
 
-import { ICheck, IAvailableSites, ISavePageParams, ILanguage, IPageLanguage, IPage } from "@ax/types";
+import { ICheck, IAvailableSites, ISavePageParams, ILanguage, IPageLanguage, IPage, IColumn } from "@ax/types";
 import { getHumanLastModifiedDate, getStructuredDataTitle } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import { CheckField, FloatingMenu, Icon, Flag, LanguageMenu, Tooltip, ElementsTooltip } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { useModal } from "@ax/hooks";
+import { DeleteModal, DuplicateModal, UnpublishModal, CategoryCell } from "./atoms";
+import { getCurrentLanguages } from "./utils";
 
 import * as S from "./style";
-import { DeleteModal, DuplicateModal, UnpublishModal } from "./atoms";
-import { getCurrentLanguages } from "./utils";
 
 const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const {
@@ -35,8 +35,14 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     toggleToast,
     setDeletedItem,
     deleteBulk,
+    categoryColumns,
+    columns,
+    categoryColors,
+    addCategoryColors,
   } = props;
 
+  const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
+
   const initValue = { title: "", slug: "" };
   const [duplicateModalState, setDuplicateModalState] = useState(initValue);
   const { isOpen: isDuplicateOpen, toggleModal: toggleDuplicateModal } = useModal();
@@ -287,9 +293,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   );
 
   const translations = isTranslatable ? (
-    <FloatingMenu Button={FlagsButton}>
-      {languageMenu()}
-    </FloatingMenu>
+    <FloatingMenu Button={FlagsButton}>{languageMenu()}</FloatingMenu>
   ) : (
     "Not translatable"
   );
@@ -300,6 +304,21 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
+  const CategoryColumns = categoryColumns.map((col: any) => {
+    const type = globalPage.template[col.from];
+    const categories = type && type.map((cat: any) => cat.title);
+    return (
+      activeColumns.includes(col.key) && (
+        <CategoryCell
+          key={col.key}
+          categories={categories}
+          categoryColors={categoryColors}
+          addCategoryColors={addCategoryColors}
+        />
+      )
+    );
+  });
+
   return (
     <>
       <S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
@@ -309,27 +328,35 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
         <S.NameCell role="cell" onClick={_handleClick}>
           {title}
         </S.NameCell>
-        {isAllPages ? (
+        {isAllPages && activeColumns.includes("type") && (
           <S.TypeCell role="cell">{structuredData && getStructuredDataTitle(structuredData)}</S.TypeCell>
-        ) : (
+        )}
+        {!isAllPages && activeColumns.includes("site") && (
           <S.SiteCell role="cell">
             <ElementsTooltip elements={availableSiteNames} />
           </S.SiteCell>
         )}
-        <S.LiveCell role="cell" onClick={_handleClick}>
-          <Tooltip content={publishedTooltip[getLiveStatus()]}>
-            <Icon name={getLiveStatus()} />
-          </Tooltip>
-        </S.LiveCell>
-        <S.StatusCell role="cell" onClick={_handleClick}>
-          <S.ModDate>{`Mod. ${getHumanLastModifiedDate(globalPage.modified)}`}</S.ModDate>
-        </S.StatusCell>
-        <S.TransCell role="cell">{translations}</S.TransCell>
-        <S.SeoCell role="cell">
-          <SeoItems.Index />
-          {SeoTitleMenu()}
-          {SeoDescriptionMenu()}
-        </S.SeoCell>
+        {activeColumns.includes("live") && (
+          <S.LiveCell role="cell" onClick={_handleClick}>
+            <Tooltip content={publishedTooltip[getLiveStatus()]}>
+              <Icon name={getLiveStatus()} />
+            </Tooltip>
+          </S.LiveCell>
+        )}
+        {CategoryColumns}
+        {activeColumns.includes("status") && (
+          <S.StatusCell role="cell" onClick={_handleClick}>
+            <S.ModDate>{`Mod. ${getHumanLastModifiedDate(globalPage.modified)}`}</S.ModDate>
+          </S.StatusCell>
+        )}
+        {activeColumns.includes("translation") && <S.TransCell role="cell">{translations}</S.TransCell>}
+        {activeColumns.includes("seo") && (
+          <S.SeoCell role="cell">
+            <SeoItems.Index />
+            {SeoTitleMenu()}
+            {SeoDescriptionMenu()}
+          </S.SeoCell>
+        )}
         <S.ActionsCell role="cell">
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
         </S.ActionsCell>
@@ -378,6 +405,10 @@ interface IGlobalPageItemProps {
   toggleToast(): void;
   setDeletedItem(item: number): void;
   deleteBulk(ids: number[]): Promise<boolean>;
+  categoryColumns: any[];
+  columns: Record<string, IColumn>;
+  categoryColors: any;
+  addCategoryColors(cats: string[]): void;
 }
 
 const mapDispatchToProps = {