@griddo/ax 10.3.23 → 10.3.25

package/src/components/TableFilters/PermissionsFilter/index.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const PermissionsFilter = ({ sortItems, sortedState }: IPermissionsHeaderProps): JSX.Element => {
   const { isAscending, sortedByPermissions } = sortedState;
-  const sortAscendingPermissions = () => sortItems("permissions", true);
-  const sortDescendingPermissions = () => sortItems("permissions", false);
+  const sortAscendingPermissions = () => sortItems([{ value: "permissions", label: "permissions"}], true);
+  const sortDescendingPermissions = () => sortItems([{ value: "permissions", label: "permissions"}], false);
 
   const SortedStateArrow = () =>
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
@@ -44,7 +45,7 @@ interface IPermissionsHeaderProps {
     isAscending: boolean;
     sortedByPermissions: boolean;
   };
-  sortItems(orderPointer: string, isAscendent: boolean): void;
+  sortItems(orderPointer: IQueryValue[], isAscendent: boolean): void;
 }
 
 export default PermissionsFilter;

package/src/components/TableFilters/RoleFilter/index.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals } from "@ax/helpers";
-import { IFilterValue } from "@ax/types";
+import { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -10,11 +10,18 @@ const RoleFilter = (props: IRoleFilterProps): JSX.Element => {
   const { filterItems, value, pointer, center = true, label = "Roles", selectAllOption = "all", filters } = props;
 
   const initialState = [selectAllOption];
-  const [selectedValue, setSelectedValue] = useState([selectAllOption]);
+  const parsedValue =
+    value && Array.isArray(value[pointer]) && value[pointer].length
+      ? value[pointer].map((val: IQueryValue) => val.value)
+      : initialState;
+  const [selectedValue, setSelectedValue] = useState(parsedValue);
 
   useLayoutEffect(() => {
-    const storedValue = value && value[pointer] ? value[pointer].split(",") : [];
-    setSelectedValue(storedValue);
+    const parsedValue =
+      value && Array.isArray(value[pointer]) && value[pointer].length
+        ? value[pointer].map((val: IQueryValue) => val.value)
+        : initialState;
+    setSelectedValue(parsedValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
@@ -23,7 +30,10 @@ const RoleFilter = (props: IRoleFilterProps): JSX.Element => {
       selection = initialState;
     }
     setSelectedValue(selection);
-    const queryFilters = selection.join(",");
+    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
+      const label = filters && filters.find((opt: IFilterValue) => opt.value === value);
+      return { value, label: label?.title || "" };
+    });
     filterItems(pointer, queryFilters);
   };
 
@@ -49,8 +59,8 @@ const RoleFilter = (props: IRoleFilterProps): JSX.Element => {
 };
 
 export interface IRoleFilterProps {
-  filterItems(pointer: string, filter: string): void;
-  value: any;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: Record<string, IQueryValue[]>;
   pointer: string;
   center?: boolean;
   label?: string;

package/src/components/TableFilters/SiteFilter/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useLayoutEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
-import { areEquals, isNumber, isReqOk } from "@ax/helpers";
+import { areEquals, isReqOk } from "@ax/helpers";
 import { selects } from "@ax/api";
-import { IFilterValue } from "@ax/types";
+import { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -25,12 +25,18 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
   } = props;
 
   const initialState = [selectAllOption];
-  const [selectedValue, setSelectedValue] = useState([selectAllOption]);
+  const parsedValue =
+    Array.isArray(value[pointer]) && value[pointer].length
+      ? value[pointer].map((val: IQueryValue) => val.value)
+      : initialState;
+  const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
 
   useLayoutEffect(() => {
-    const storedValue = value && value[pointer] ? value[pointer].split(",") : [];
-    const parsedValue = storedValue.map((value: any) => (isNumber(value) ? parseInt(value) : value));
+    const parsedValue =
+      Array.isArray(value[pointer]) && value[pointer].length
+        ? value[pointer].map((val: IQueryValue) => val.value)
+        : initialState;
     setSelectedValue(parsedValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
@@ -71,7 +77,10 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
       selection = initialState;
     }
     setSelectedValue(selection);
-    const queryFilters = selection.join(",");
+    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
+      const label = options.find((opt: IFilterValue) => opt.value === value);
+      return { value, label: label?.title || "" };
+    });
     filterItems(pointer, queryFilters);
   };
 
@@ -90,14 +99,20 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
     <FloatingMenu Button={Header} position="left" closeOnSelect={false} isCheckGroup={true}>
       <ListTitle>Filter by Site</ListTitle>
       <S.ChecksWrapper>
-        <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />
+        <CheckGroup
+          options={options}
+          value={selectedValue}
+          onChange={setQuery}
+          selectAllOption={selectAllOption}
+          multipleSelection={true}
+        />
       </S.ChecksWrapper>
     </FloatingMenu>
   );
 };
 
 export interface ISiteFilterProps {
-  filterItems(pointer: string, filter: string): void;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
   value: any;
   pointer: string;
   center?: boolean;

package/src/components/TableFilters/StateFilter/index.tsx

@@ -3,24 +3,33 @@ import React, { useEffect, useState } from "react";
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
 
 import * as S from "./style";
+import { IQueryValue } from "@ax/types";
 
 const StateFilter = (props: IProps): JSX.Element => {
   const { value, filterItems } = props;
 
-  const [selectedValue, setSelectedValue] = useState<string>("all");
+  const initialState = value && value.length ? value[0].value.toString() : "all";
+  const [selectedValue, setSelectedValue] = useState<string>(initialState);
 
   const isFilterActived = selectedValue !== "all";
 
+  const filters: Record<string, string> = {
+    all: "All",
+    enable: "Enabled",
+    disable: "Disabled",
+  };
+
   useEffect(() => {
-    value && setSelectedValue(value);
+    const filterValue = value && value.length ? value[0].value.toString() : "all";
+    value && setSelectedValue(filterValue);
   }, [value]);
 
-  const setFilterQuery = (selection: any) => {
+  const setFilterQuery = (selection: string) => {
     if (!selection.length) {
       selection = "";
     }
     setSelectedValue(selection);
-    filterItems("filterState", selection);
+    filterItems("filterState", [{ value: selection, label: filters[selection] }]);
   };
 
   const sortAllStates = () => setFilterQuery("all");
@@ -59,8 +68,8 @@ const StateFilter = (props: IProps): JSX.Element => {
 };
 
 interface IProps {
-  filterItems(pointer: string, filter: string): void;
-  value: string;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
 }
 
 export default StateFilter;

package/src/components/TableFilters/StatusFilter/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -8,7 +9,7 @@ const StatusFilter = (props: IStatusFilterProps) => {
   const { sortItems, sortedState, isStructuredData } = props;
   const { isAscending, sortedByDate } = sortedState;
   const value = isStructuredData ? "date" : "modified";
-  const sortByModifiedDate = (isAscending: boolean) => sortItems(value, isAscending);
+  const sortByModifiedDate = (isAscending: boolean) => sortItems([{ value, label: value }], isAscending);
 
   const sortOldestModifiedDate = () => sortByModifiedDate(true);
   const sortMostRecentModifiedDate = () => sortByModifiedDate(false);
@@ -46,7 +47,7 @@ const StatusFilter = (props: IStatusFilterProps) => {
 
 export interface IStatusFilterProps {
   sortedState: any;
-  sortItems(orderPointer: string, isAscendent: boolean): any;
+  sortItems(orderPointer: IQueryValue[], isAscendent: boolean): any;
   isStructuredData?: boolean;
 }
 

package/src/components/TableFilters/TranslationsFilter/index.tsx

@@ -1,14 +1,15 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
-import { areEquals, isNumber } from "@ax/helpers";
+import { areEquals } from "@ax/helpers";
+import { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const TranslationsFilter = (props: ITranslationsFilterProps): JSX.Element => {
   const { filterItems, value } = props;
 
-  const filters = [
+  const filters: IFilterValue[] = [
     {
       name: "all",
       value: "all",
@@ -21,16 +22,23 @@ const TranslationsFilter = (props: ITranslationsFilterProps): JSX.Element => {
     },
   ];
 
-  const storedValue = value.split(",");
-  const parsedValue = storedValue.map((value) => (isNumber(value) ? parseInt(value) : value));
-  const [initialState] = useState(parsedValue);
   const selectAllOption = "all";
-  const [selectedValue, setSelectedValue] = useState([...initialState]);
+  const pointer = "translated";
+  const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : [selectAllOption];
+  const [selectedValue, setSelectedValue] = useState(parsedValue);
+
+  useEffect(() => {
+    const arrayValues = Array.isArray(value) && value.length ? value.map((value) => value.value) : [selectAllOption];
+    setSelectedValue(arrayValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
 
   const setQuery = (selection: any) => {
     setSelectedValue(selection);
-    const queryFilters = selection.join("&");
-    const pointer = "translated";
+    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
+      const label = filters.find((opt: IFilterValue) => opt.value === value);
+      return { value, label: label?.title || "" };
+    });
     filterItems(pointer, queryFilters);
   };
 
@@ -56,8 +64,8 @@ const TranslationsFilter = (props: ITranslationsFilterProps): JSX.Element => {
 };
 
 export interface ITranslationsFilterProps {
-  filterItems(pointer: string, filter: string): void;
-  value: string;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
 }
 
 export default TranslationsFilter;

package/src/components/TableFilters/TypeFilter/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals } from "@ax/helpers";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -9,11 +10,11 @@ const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
 
   const initialState = ["all"];
   const selectAllOption = "all";
-  const arrayValues = value ? value.split(",") : initialState;
+  const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
   const [selectedValue, setSelectedValue] = useState(arrayValues);
 
   useEffect(() => {
-    const arrayValues = value ? value.split(","): initialState;
+    const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
     setSelectedValue(arrayValues);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
@@ -23,7 +24,10 @@ const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
       selection = initialState;
     }
     setSelectedValue(selection);
-    const queryFilters = selection.join(",");
+    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
+      const label = filters.find((opt: IFilter) => opt.value === value);
+      return { value, label: label?.title || "" };
+    });
     filterItems(pointer, queryFilters);
   };
 
@@ -61,10 +65,10 @@ interface IFilter {
 }
 
 export interface ITypeFilterProps {
-  filterItems(pointer: string, filter: string): void;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
   filters: IFilter[];
   pointer: string;
-  value?: string;
+  value?: IQueryValue[];
 }
 
 export default TypeFilter;

package/src/components/TableFilters/UsersFilter/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -8,13 +9,13 @@ const UsersFilter = (props: IUsersFilterProps): JSX.Element => {
   const { sortItems, sortedState } = props;
   const { isAscending, sortedByUsers } = sortedState;
 
-  const sortByUsers = (isAscending: boolean) => sortItems('users', isAscending);
+  const sortByUsers = (isAscending: boolean) => sortItems([{ value: "users", label: "users"}], isAscending);
   const sortAscendingUsers = () => sortByUsers(true);
   const sortDescendingUsers = () => sortByUsers(false);
 
   const SortedStateArrow = () =>
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
-    
+
   const isActive = sortedByUsers;
   const title = 'Users';
 
@@ -48,7 +49,7 @@ const UsersFilter = (props: IUsersFilterProps): JSX.Element => {
 
 export interface IUsersFilterProps {
   sortedState: any;
-  sortItems(orderPointer: string, isAscendent: boolean): void;
+  sortItems(orderPointer: IQueryValue[], isAscendent: boolean): void;
   pointer?: string;
 }
 

package/src/components/Tag/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Tag = (props: ITagProps): JSX.Element => {
-  const { type, text, color, icon, rounded = true, onDeleteAction } = props;
+  const { type, text, color, icon, rounded = true, className, onDeleteAction } = props;
 
   const handleClick = () => {
     if (onDeleteAction) {
@@ -21,14 +21,14 @@ const Tag = (props: ITagProps): JSX.Element => {
   switch (type) {
     case "status":
       return (
-        <S.TagStatus data-testid="tag-status">
+        <S.TagStatus className={className} data-testid="tag-status">
           <S.Bullet color={color} />
           {text}
         </S.TagStatus>
       );
     case "square":
       return (
-        <S.TagSquare color={color} data-testid="tag-square">
+        <S.TagSquare color={color} className={className} data-testid="tag-square">
           {icon && (
             <S.IconTag>
               <Icon name={icon} size="16" />
@@ -39,7 +39,7 @@ const Tag = (props: ITagProps): JSX.Element => {
       );
     default:
       return (
-        <S.TagFixed color={color} rounded={rounded} data-testid="tag-fixed">
+        <S.TagFixed color={color} rounded={rounded} className={className} data-testid="tag-fixed">
           <S.TagText>
             <S.Title data-testid="tag-fixed-title">{text}</S.Title>
             {deleteIcon}
@@ -56,6 +56,7 @@ export interface ITagProps {
   rounded?: boolean;
   icon?: string;
   onDeleteAction?: () => void;
+  className?: string;
 }
 
 export default Tag;

package/src/components/index.tsx

@@ -71,6 +71,7 @@ import ErrorToast from "./ErrorToast";
 import FieldContainer from "./FieldContainer";
 import FieldsBehavior from "./FieldsBehavior";
 import FileGallery from "./FileGallery";
+import FilterTagsBar from "./FilterTagsBar";
 import Flag from "./Flag";
 import FloatingMenu from "./FloatingMenu";
 import FloatingPanel from "./FloatingPanel";
@@ -95,6 +96,7 @@ import ProgressBar from "./ProgressBar";
 import ReorderArrows from "./ReorderArrows";
 import ResizePanel from "./ResizePanel";
 import SearchField from "./SearchField";
+import SearchTagsBar from "./SearchTagsBar";
 import SideModal from "./SideModal";
 import SubNav from "./SubNav";
 import TableCounter from "./TableCounter";
@@ -178,6 +180,7 @@ export {
   FieldContainer,
   FieldsBehavior,
   FileGallery,
+  FilterTagsBar,
   Flag,
   FloatingMenu,
   FloatingPanel,
@@ -202,6 +205,7 @@ export {
   ReorderArrows,
   ResizePanel,
   SearchField,
+  SearchTagsBar,
   SideModal,
   SubNav,
   TableCounter,

package/src/containers/Navigation/Menu/actions.tsx

@@ -8,7 +8,6 @@ import { IMenuItem, IMenu } from "@ax/types";
 import {
   SET_ORIGINAL_MENUS,
   SET_EDITOR_MENU,
-  SET_TYPE,
   SET_ID,
   SET_ITEM,
   SET_MENU_FORM_DATA,
@@ -19,7 +18,6 @@ import {
   ISetSavedMenus,
   ISetEditorMenu,
   ISetId,
-  ISetMenuType,
   ISetItem,
   ISetMenuForm,
   ISetSavedMenu,
@@ -57,13 +55,6 @@ function setId(id: number): ISetId {
   };
 }
 
-function setType(type: string): ISetMenuType {
-  return {
-    type: SET_TYPE,
-    payload: { type },
-  };
-}
-
 function setItem(item: IMenuItem): ISetItem {
   return {
     type: SET_ITEM,
@@ -98,7 +89,7 @@ const getStateValues = (getState: any) => {
 };
 
 function setEditorMenuContent(menus: IMenu[], menuType: string, dispatch: Dispatch) {
-  const menu: any = menus.find((menu: IMenu) => menu.name === menuType);
+  const menu: any = menus.find((menu: IMenu) => menu.name === menuType) || menus[0];
   const currentMenu = generateEditorIDs(menu).pageContent;
   const id = menu.id;
 
@@ -136,7 +127,6 @@ function getCurrentMenu(menuType: string): (dispatch: Dispatch, getState: any) =
   return async (dispatch, getState) => {
     try {
       dispatch(setIsLoading(true));
-      dispatch(setType(menuType));
       const { savedMenus } = getStateValues(getState);
       setEditorMenuContent(savedMenus, menuType, dispatch);
       updateTotalItems(dispatch, getState);
@@ -301,7 +291,6 @@ function resetItemValues(): (dispatch: Dispatch) => Promise<void> {
 const resetMenuValues = (dispatch: Dispatch) => {
   dispatch(setSavedMenus([]));
   dispatch(setEditorMenu([]));
-  dispatch(setType("MainMenu"));
   dispatch(setMenuFormData(menuInitialState.form));
 };
 
@@ -326,7 +315,6 @@ export {
   setSavedMenus,
   setEditorMenu,
   setId,
-  setType,
   setItem,
   setEditorMenuContent,
   getMenus,

package/src/containers/Navigation/Menu/constants.tsx

@@ -3,7 +3,6 @@ export const NAME: string = "menu";
 export const SET_ORIGINAL_MENUS: string = `${NAME}/SET_ORIGINAL_MENUS`;
 export const SET_ORIGINAL_MENU: string = `${NAME}/SET_CURRENT_ORIGINAL_MENU`;
 export const SET_EDITOR_MENU: string = `${NAME}/SET_EDITOR_MENU`;
-export const SET_TYPE: string = `${NAME}/SET_MENU_TYPE`;
 export const SET_ID: string = `${NAME}/SET_ID`;
 export const SET_ITEM: string = `${NAME}/SET_ITEM`;
 export const SET_MENU_FORM_DATA: string = `${NAME}/SET_MENU_FORM_DATA`;

package/src/containers/Navigation/Menu/interfaces.tsx

@@ -4,7 +4,6 @@ import {
   SET_ORIGINAL_MENU,
   SET_EDITOR_MENU,
   SET_ID,
-  SET_TYPE,
   SET_ITEM,
   SET_MENU_FORM_DATA,
 } from "./constants";
@@ -29,11 +28,6 @@ export interface ISetId {
   payload: { id: number };
 }
 
-export interface ISetMenuType {
-  type: typeof SET_TYPE;
-  payload: { type: string };
-}
-
 export interface ISetItem {
   type: typeof SET_ITEM;
   payload: { item: any };
@@ -49,4 +43,4 @@ export interface ISetTotalItems {
   payload: { totalItems: number };
 }
 
-export type MenuActionsCreators = ISetSavedMenus & ISetEditorMenu & ISetMenuType & ISetItem & ISetTotalItems;
+export type MenuActionsCreators = ISetSavedMenus & ISetEditorMenu & ISetItem & ISetTotalItems;

package/src/containers/Navigation/Menu/reducer.tsx

@@ -2,7 +2,6 @@ import {
   SET_ORIGINAL_MENUS,
   SET_ORIGINAL_MENU,
   SET_EDITOR_MENU,
-  SET_TYPE,
   SET_ID,
   SET_ITEM,
   SET_MENU_FORM_DATA,
@@ -17,7 +16,6 @@ export interface IMenuState {
   savedMenu: any;
   editorMenu: any;
   id: number | null;
-  type: string;
   item: IMenuItem | null;
   form: IMenuForm;
   totalItems: number;
@@ -30,7 +28,6 @@ const initialState = {
     elements: [],
   },
   id: null,
-  type: "MainMenu",
   item: null,
   form: {
     url: null,
@@ -47,7 +44,6 @@ function reducer(state = initialState, action: MenuActionsCreators): IMenuState
     case SET_ORIGINAL_MENUS:
     case SET_ORIGINAL_MENU:
     case SET_EDITOR_MENU:
-    case SET_TYPE:
     case SET_ID:
     case SET_ITEM:
     case SET_MENU_FORM_DATA:

package/src/containers/Sites/actions.tsx

@@ -40,6 +40,7 @@ import {
   IPage,
   IGetSitesParams,
   ISiteListConfig,
+  IQueryValue,
 } from "@ax/types";
 import { sites, languages, dataPack, social, structuredData, analytics, pages } from "@ax/api";
 import { appActions } from "@ax/containers/App";
@@ -104,7 +105,7 @@ function setCurrentSiteErrorPages(currentSiteErrorPages: number[]): ISetCurrentS
   return { type: SET_CURRENT_SITE_ERROR_PAGES, payload: { currentSiteErrorPages } };
 }
 
-function setContentFilters(contentFilters: Record<string, string> | null): ISetContentFilters {
+function setContentFilters(contentFilters: Record<string, IQueryValue[]> | null): ISetContentFilters {
   return { type: SET_CONTENT_FILTERS, payload: { contentFilters } };
 }
 

package/src/containers/Sites/interfaces.tsx

@@ -14,7 +14,7 @@ import {
   SET_SITES_TOTAL_ITEMS,
   SET_CONFIG,
 } from "./constants";
-import { ISite, ISiteListConfig } from "@ax/types";
+import { IQueryValue, ISite, ISiteListConfig } from "@ax/types";
 
 export interface ISetFilter {
   type: typeof SET_FILTER;
@@ -78,7 +78,7 @@ export interface ISetCurrentSiteErrorPages {
 
 export interface ISetContentFilters {
   type: typeof SET_CONTENT_FILTERS;
-  payload: { contentFilters: Record<string, string> | null };
+  payload: { contentFilters: Record<string, IQueryValue[]> | null };
 }
 
 export interface ISetConfig {

package/src/containers/Sites/reducer.tsx

@@ -15,7 +15,7 @@ import {
   SET_CONFIG,
 } from "./constants";
 
-import { ISite, IPage, ILanguage, ISiteListConfig } from "@ax/types";
+import { ISite, IPage, ILanguage, ISiteListConfig, IQueryValue } from "@ax/types";
 
 import { SitesActionsCreators } from "./interfaces";
 
@@ -32,7 +32,7 @@ export interface ISitesState {
   currentSiteLanguages: ILanguage[];
   savedSiteInfo: any;
   currentSiteErrorPages: number[];
-  contentFilters: Record<string, string> | null;
+  contentFilters: Record<string, IQueryValue[]> | null;
   config: ISiteListConfig;
 }
 

package/src/containers/StructuredData/actions.tsx

@@ -132,7 +132,7 @@ function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) =>
     const {
       structuredData: { form },
     } = getState();
-    let updatedForm = { ...form, content: { ...form?.content, ...valueObj } };
+    const updatedForm = { ...form, content: { ...form?.content, ...valueObj } };
 
     dispatch(updateForm(updatedForm));
   };
@@ -598,6 +598,7 @@ function resetStructuredData(): (dispatch: Dispatch) => void {
     }
   };
 }
+
 function getDataContentTranslation(langID: number): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {

package/src/forms/editor.tsx

@@ -70,7 +70,7 @@ const generateEditorIDs = (originalPageContent: any) => {
     return component;
   };
 
-  let pageContent = deepClone(originalPageContent);
+  let pageContent = (originalPageContent && deepClone(originalPageContent)) || {};
   pageContent = setEditorID(pageContent, null);
 
   return { pageContent };

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

@@ -51,6 +51,8 @@ const FlagsWrapper = styled.div`
   svg {
     margin-right: 2px;
     margin-bottom: -3px; // TODO
+    display: inline;
+    vertical-align: baseline;
   }
 `;