@griddo/ax 1.75.183 → 1.75.184

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.183",
+  "version": "1.75.184",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -234,5 +234,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a3187f0be6bed10e3b88a625eda847ef6621d53d"
+  "gitHead": "2200f9bc4190ae41967b895813666980c7a59909"
 }

package/src/api/structuredData.tsx

@@ -120,6 +120,7 @@ const getDataContents = (params: IGetStructuredDataParams, siteID?: number | nul
     filterQuery,
     relatedFields = false,
     order,
+    lang,
   } = params;
 
   const url = siteID ? `${host}/site/${siteID}${endpoint}` : `${host}${endpoint}`;
@@ -130,7 +131,11 @@ const getDataContents = (params: IGetStructuredDataParams, siteID?: number | nul
   if (order) SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&order=${order}`;
   if (filterQuery) SERVICES.GET_DATA_CONTENTS.dynamicUrl += filterQuery;
 
-  return sendRequest(SERVICES.GET_DATA_CONTENTS);
+  const dataHeader = {
+    ...(lang && { lang }),
+  };
+
+  return sendRequest(SERVICES.GET_DATA_CONTENTS, null, dataHeader);
 };
 
 const createDataContent = (data: any) => {

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import { IDataSource, ISite, IStructuredData } from "@ax/types";
-import { Button, FloatingMenu, IconAction, RadioGroup, Select, FieldsBehavior } from "@ax/components";
+import { Button, FloatingMenu, IconAction, RadioGroup, Select, FieldsBehavior, UniqueCheck } from "@ax/components";
 
 import { IReferenceState, useReference } from "../Context";
 import AutoItem from "./AutoItem";
@@ -102,6 +102,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
       filter: state.filter,
       fullRelations: state.fullRelations,
       allLanguages: state.allLanguages,
+      preferenceLanguage: state.preferenceLanguage,
     };
 
     onChange(newValue);
@@ -171,6 +172,9 @@ const AutoPanel = (props: IProps): JSX.Element => {
     }
   };
 
+  const handleAllLanguagesChange = (value: any) =>
+    setState((state: IReferenceState) => ({ ...state, allLanguages: value }));
+
   return (
     <S.Wrapper data-testid="auto-panel-wrapper">
       <S.FormWrapper>
@@ -197,6 +201,18 @@ const AutoPanel = (props: IProps): JSX.Element => {
               );
             })}
         </S.SourcesWrapper>
+        <S.AllLanguagesWrapper>
+          <S.AllLanguagesText>
+            The content is displayed in the language of the page, but if the content you want is not available in that
+            language, you have the option to include content in another language.
+          </S.AllLanguagesText>
+          <UniqueCheck
+            name="AllLanguagesCheck"
+            options={[{ value: false, name: "AllLanguages", title: "Include content in another language" }]}
+            value={state.allLanguages}
+            onChange={handleAllLanguagesChange}
+          />
+        </S.AllLanguagesWrapper>
         <S.RadioWrapper>
           <S.FieldLabel>Sort</S.FieldLabel>
           <RadioGroup {...radioGroupProps} />

package/src/components/Fields/ReferenceField/AutoPanel/style.tsx

@@ -75,6 +75,21 @@ const SourceItem = styled.li`
   }
 `;
 
+const AllLanguagesWrapper = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const AllLanguagesText = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
 export {
   Wrapper,
   FormWrapper,
@@ -87,5 +102,7 @@ export {
   IconWrapper,
   SourceMenu,
   SourceItem,
-  SelectWrapper
+  SelectWrapper,
+  AllLanguagesWrapper,
+  AllLanguagesText,
 };

package/src/components/Fields/ReferenceField/Context/index.tsx

@@ -18,6 +18,7 @@ const initState = {
   sourceTitles: [],
   fullRelations: false,
   allLanguages: false,
+  preferenceLanguage: false,
 };
 
 const ReferenceContext = createContext({ state: { ...initState } });
@@ -86,6 +87,7 @@ export interface IReferenceState {
   sourceTitles: any;
   fullRelations: boolean;
   allLanguages: boolean;
+  preferenceLanguage: boolean;
 }
 
 export { ReferenceProvider, useReference };

package/src/components/Fields/ReferenceField/ManualPanel/Item/index.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
-import { IDataSource } from "@ax/types";
+import { IDataSource, IStructuredDataContent } from "@ax/types";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
-import { CheckField } from "@ax/components";
+import { CheckField, Tooltip } from "@ax/components";
 
 import * as S from "./style";
 
-const Item = (props: IProps) => {
-  const { handleOnClick, item, isChecked, source, disabled } = props;
+const Item = (props: IProps): JSX.Element => {
+  const { handleOnClick, item, isChecked, source, disabled, tooltip } = props;
 
   const handleItemClick = (e: any) => {
     e.preventDefault();
@@ -15,25 +15,28 @@ const Item = (props: IProps) => {
   };
 
   return (
-    <S.Item onClick={handleItemClick} data-testid="manual-panel-item">
-      <CheckField name="check" value={item.id} checked={isChecked} disabled={disabled} />
-      <S.TextWrapper>
-        <S.Header>
-          <S.Type>{source.title.toUpperCase()}</S.Type>
-          {item.modified && <S.Date>{getFormattedDateWithTimezone(item.modified, "d MMM Y")}</S.Date>}
-        </S.Header>
-        <S.Title>{item.content.title}</S.Title>
-      </S.TextWrapper>
-    </S.Item>
+    <Tooltip content={tooltip} bottom>
+      <S.Item onClick={handleItemClick} data-testid="manual-panel-item">
+        <CheckField name="check" value={item.id} checked={isChecked} disabled={disabled} />
+        <S.TextWrapper>
+          <S.Header>
+            <S.Type>{source.title.toUpperCase()}</S.Type>
+            {item.modified && <S.Date>{getFormattedDateWithTimezone(item.modified, "d MMM Y")}</S.Date>}
+          </S.Header>
+          <S.Title>{item.content.title}</S.Title>
+        </S.TextWrapper>
+      </S.Item>
+    </Tooltip>
   );
 };
 
 interface IProps {
-  handleOnClick: (item: any) => void;
-  item: any;
+  handleOnClick: (item: IStructuredDataContent) => void;
+  item: IStructuredDataContent;
   isChecked: boolean;
   source: IDataSource;
   disabled: boolean;
+  tooltip: string;
 }
 
 export default Item;

package/src/components/Fields/ReferenceField/ManualPanel/index.tsx

@@ -1,26 +1,36 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataSource, IGetStructuredDataParams, IRootState, IStructuredDataContent } from "@ax/types";
+import {
+  IDataLanguage,
+  IDataSource,
+  IGetStructuredDataParams,
+  ILanguage,
+  IRootState,
+  IStructuredDataContent,
+} from "@ax/types";
 import { isReqOk } from "@ax/helpers";
 import { structuredData } from "@ax/api";
 import { Button, Loader, Select, TextField } from "@ax/components";
-
 import { useDebounce } from "@ax/hooks";
-
 import { IReferenceState, useReference } from "../Context";
 import Item from "./Item";
+
 import * as S from "./style";
 
 const ManualPanel = (props: IProps) => {
-  const { onChange, currentSite, hasMaxItems, handleValidation, validators } = props;
+  const { onChange, currentSite, hasMaxItems, handleValidation, validators, lang, siteLangs, globalLangs } = props;
 
   const { state, setState } = useReference();
 
   const [isLoading, setIsLoading] = useState(false);
   const [selectedSource, setSelectedSource] = useState(state.sourceTitles[0].id);
+  const [selectedLang, setSelectedLang] = useState(lang.id);
   const debouncedSearch = useDebounce(state.search);
 
+  const availableLangs = currentSite ? siteLangs : globalLangs;
+  const langOptions = availableLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
+
   useEffect(() => {
     let isMounted = true;
     const params: IGetStructuredDataParams = {
@@ -31,6 +41,7 @@ const ManualPanel = (props: IProps) => {
       deleted: false,
       include_draft: false,
       query: debouncedSearch,
+      lang: selectedLang,
     };
 
     const getAndSetItems = async () => {
@@ -53,14 +64,16 @@ const ManualPanel = (props: IProps) => {
       isMounted = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSite, selectedSource, debouncedSearch, state.mode]);
+  }, [currentSite, selectedSource, debouncedSearch, state.mode, selectedLang]);
 
   const handleOnClick = (item: IStructuredDataContent) => {
     let newSelIds: number[];
     let selItems: number[];
-    if (state.fixed.includes(item.id)) {
-      newSelIds = state.fixed.filter((a: any) => a !== item.id);
-      selItems = state.selectedItems.filter((b: any) => b.id !== item.id);
+    const itemSelected = item.dataLanguages.find((dataLang: IDataLanguage) => state.fixed.includes(dataLang.id));
+
+    if (itemSelected) {
+      newSelIds = state.fixed.filter((a: number) => a !== itemSelected.id);
+      selItems = state.selectedItems.filter((b: IStructuredDataContent) => b.id !== itemSelected.id);
     } else {
       newSelIds = [...state.fixed, item.id];
       selItems = [...state.selectedItems, item];
@@ -69,9 +82,8 @@ const ManualPanel = (props: IProps) => {
     setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems, showSelected }));
   };
 
-  const handleSelectedClick = () => {
+  const handleSelectedClick = () =>
     setState((state: IReferenceState) => ({ ...state, showSelected: !state.showSelected }));
-  };
 
   const handleAdd = () => {
     const { mode, fixed, fullRelations } = state;
@@ -96,9 +108,9 @@ const ManualPanel = (props: IProps) => {
     return { label: singleSource.title, value: singleSource.id };
   });
 
-  const handleSource = (newSource: string) => {
-    setSelectedSource(newSource);
-  };
+  const handleSource = (newSource: string) => setSelectedSource(newSource);
+
+  const handleLang = (newLang: string) => setSelectedLang(parseInt(newLang));
 
   return (
     <S.Wrapper>
@@ -111,9 +123,26 @@ const ManualPanel = (props: IProps) => {
       )}
       {!state.showSelected && (
         <>
-          {state.sourceTitles.length > 1 && (
-            <Select name="select" options={options} onChange={handleSource} value={selectedSource} type="inline" />
-          )}
+          <S.SelectsWrapper>
+            {availableLangs.length > 1 && (
+              <Select
+                name="selectLang"
+                options={langOptions}
+                onChange={handleLang}
+                value={selectedLang.toString()}
+                type="inline"
+              />
+            )}
+            {state.sourceTitles.length > 1 && (
+              <Select
+                name="selectSource"
+                options={options}
+                onChange={handleSource}
+                value={selectedSource}
+                type="inline"
+              />
+            )}
+          </S.SelectsWrapper>
           <S.SearchWrapper>
             <TextField {...textFieldProps} />
           </S.SearchWrapper>
@@ -129,16 +158,23 @@ const ManualPanel = (props: IProps) => {
             {showedItems &&
               showedItems.map((item: IStructuredDataContent) => {
                 const isChecked = state.fixed.includes(item.id);
+                const hasVersionInPageLanguage = item.dataLanguages.find(
+                  (dataLang: IDataLanguage) => dataLang.language === lang.id && item.language !== lang.id
+                );
+                const isSelectedOtherLanguage = item.dataLanguages.find(
+                  (dataLang: IDataLanguage) => state.fixed.includes(dataLang.id) && dataLang.language !== selectedLang
+                );
                 const source = state.sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
-                const disabled = hasMaxItems && !isChecked;
+                const disabled = (hasMaxItems && !isChecked) || !!hasVersionInPageLanguage;
                 return (
                   <Item
-                    key={item.id}
-                    isChecked={isChecked}
+                    key={`${item.content.title}-${item.id}`}
+                    isChecked={isChecked || !!isSelectedOtherLanguage}
                     handleOnClick={handleOnClick}
                     item={item}
                     source={source}
                     disabled={disabled}
+                    tooltip={hasVersionInPageLanguage ? "Content has version in page language" : ""}
                   />
                 );
               })}
@@ -162,11 +198,16 @@ interface IProps {
   hasMaxItems: boolean;
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
   validators?: Record<string, unknown>;
+  lang: { locale: string; id: number };
+  siteLangs: ILanguage[];
+  globalLangs: ILanguage[];
 }
 
 const mapStateToProps = (state: IRootState) => ({
   lang: state.app.lang,
   currentSite: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+  siteLangs: state.sites.currentSiteLanguages,
+  globalLangs: state.app.globalLangs,
 });
 
 export default connect(mapStateToProps)(ManualPanel);

package/src/components/Fields/ReferenceField/ManualPanel/style.tsx

@@ -40,12 +40,11 @@ const ActionsWrapper = styled.div`
   padding-top: ${(p) => p.theme.spacing.s};
 `;
 
-export {
-  Wrapper,
-  LoadingWrapper,
-  ListWrapper,
-  ItemList,
-  SearchWrapper,
-  ButtonWrapper,
-  ActionsWrapper
-}
+const SelectsWrapper = styled.div`
+  display: flex;
+  & > div {
+    margin-right: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+export { Wrapper, LoadingWrapper, ListWrapper, ItemList, SearchWrapper, ButtonWrapper, ActionsWrapper, SelectsWrapper };

package/src/components/Fields/ReferenceField/index.tsx

@@ -9,7 +9,7 @@ import { IconAction, FloatingPanel, Select, Tag } from "@ax/components";
 import AutoPanel from "./AutoPanel";
 import ItemList from "./ItemList";
 import ManualPanel from "./ManualPanel";
-import { useReference, ReferenceProvider } from "./Context";
+import { useReference, ReferenceProvider, IReferenceState } from "./Context";
 
 import * as S from "./style";
 
@@ -45,7 +45,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   const hasMaxItems = !!(value && value.fixed && maxItems && !isAuto && value.fixed.length >= maxItems);
 
   const handleMode = (mode: string) => {
-    const { fixed, order, quantity, filter, allLanguages, fullRelations = false } = state;
+    const { fixed, order, quantity, filter, allLanguages, preferenceLanguage, fullRelations = false } = state;
 
     const manualSources: string[] = state.selectedItems.reduce(
       (unique: string[], selItem: IStructuredDataContent) =>
@@ -65,6 +65,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
             filter,
             fullRelations,
             allLanguages,
+            preferenceLanguage,
           }
         : {
             mode,
@@ -107,6 +108,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   }, [editorID]);
 
   const handleAddItems = () => {
+    setState((state: IReferenceState) => ({ ...state, showSelected: false }));
     toggleModal();
   };
 

package/src/components/TableList/index.tsx

@@ -6,7 +6,7 @@ import { Loading, Pagination } from "@ax/components";
 import * as S from "./style";
 
 const TableList = (props: ITableListProps): JSX.Element => {
-  const { tableHeader, children, pagination, isLoading, onScroll, hasFixedHeader, tableRef, overflow = "auto" } = props;
+  const { tableHeader, children, pagination, isLoading, onScroll, hasFixedHeader, tableRef } = props;
 
   const { totalItems, setPage, itemsPerPage, currPage } = pagination;
 
@@ -16,7 +16,9 @@ const TableList = (props: ITableListProps): JSX.Element => {
     <S.TableList onScroll={onScroll} ref={tableRef} data-testid="table-list">
       <S.Table>
         <>
-          <S.TableHeader hasFixedHeader={hasFixedHeader} data-testid="table-list-header">{tableHeader}</S.TableHeader>
+          <S.TableHeader hasFixedHeader={hasFixedHeader} data-testid="table-list-header">
+            {tableHeader}
+          </S.TableHeader>
           {isLoading ? <Loading /> : <S.TableBody data-testid="table-body">{children}</S.TableBody>}
         </>
       </S.Table>
@@ -46,7 +48,6 @@ export interface ITableListProps {
   onScroll?: any;
   hasFixedHeader?: boolean;
   tableRef?: any;
-  overflow?: string;
 }
 
 export default connect(mapStateToProps, null)(TableList);

package/src/containers/Analytics/actions.tsx

@@ -21,7 +21,7 @@ function getAnalytics(siteId: number | string = "global"): (dispatch: any) => Pr
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
-      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+      await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
       console.log(e);
     }

package/src/containers/PageEditor/actions.tsx

@@ -955,7 +955,7 @@ function generatePageContent(editorContent: IPage, dispatch: Dispatch, getState:
   } = getState();
 
   const { header, footer, isGlobal } = editorContent;
-  const { defaultHeader, defaultFooter } = (configFormData.templates && configFormData.templates[template]) || {};
+  const { defaultHeader, defaultFooter } = (configFormData?.templates && configFormData?.templates[template]) || {};
 
   const headerID =
     header === null || header === undefined ? defaultHeader : typeof header === "object" ? header.id : header;

package/src/containers/Sites/actions.tsx

@@ -366,12 +366,12 @@ function getSiteLanguages(siteID: number): (dispatch: any) => Promise<void> {
   };
 }
 
-function deleteSite(siteID: number): (dispatch: Dispatch, getState: any) => Promise<void> {
-  return async (dispatch, getState) => {
+function deleteSite(siteID: number, params?: IGetSitesParams): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
     try {
       const responseActions = {
         handleSuccess: () => {
-          getSites()(dispatch);
+          getSites(params)(dispatch);
         },
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
@@ -384,12 +384,12 @@ function deleteSite(siteID: number): (dispatch: Dispatch, getState: any) => Prom
   };
 }
 
-function publishSite(siteID: number): (dispatch: Dispatch, getState: any) => Promise<void> {
-  return async (dispatch, getState) => {
+function publishSite(siteID: number, params?: IGetSitesParams): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
     try {
       const response = await sites.publishSite(siteID);
       if (isReqOk(response.status)) {
-        getSites()(dispatch);
+        getSites(params)(dispatch);
       }
     } catch (e) {
       console.log(e); // TODO: capturar error bien
@@ -397,8 +397,8 @@ function publishSite(siteID: number): (dispatch: Dispatch, getState: any) => Pro
   };
 }
 
-function publishSitesBulk(ids: number[]): (dispatch: Dispatch, getState: any) => Promise<void> {
-  return async (dispatch, getState) => {
+function publishSitesBulk(ids: number[]): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
     try {
       const responseActions = {
         handleSuccess: () => {
@@ -415,12 +415,12 @@ function publishSitesBulk(ids: number[]): (dispatch: Dispatch, getState: any) =>
   };
 }
 
-function unpublishSite(siteID: number): (dispatch: Dispatch, getState: any) => Promise<void> {
-  return async (dispatch, getState) => {
+function unpublishSite(siteID: number, params?: IGetSitesParams): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
     try {
       const response = await sites.unpublishSite(siteID);
       if (isReqOk(response.status)) {
-        getSites()(dispatch);
+        getSites(params)(dispatch);
       }
     } catch (e) {
       console.log(e); // TODO: capturar error bien
@@ -428,8 +428,8 @@ function unpublishSite(siteID: number): (dispatch: Dispatch, getState: any) => P
   };
 }
 
-function unpublishSitesBulk(ids: number[]): (dispatch: Dispatch, getState: any) => Promise<void> {
-  return async (dispatch, getState) => {
+function unpublishSitesBulk(ids: number[]): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
     try {
       const responseActions = {
         handleSuccess: () => {

package/src/modules/GlobalEditor/index.tsx

@@ -115,15 +115,14 @@ const GlobalEditor = (props: IProps) => {
   const setRoute = (path: string) => props.setHistoryPush(path, true);
 
   const removePage = async () => {
-    console.log(props, "props");
     const { deletePage } = props;
-    const path = "/sites/pages";
+    const path = "/data";
 
-    deletePage().then((deleted: boolean) => {
-      if (deleted) {
-        setRoute(path);
-      }
-    });
+    const deleted = await deletePage();
+
+    if (deleted) {
+      setRoute(path);
+    }
   };
 
   const publishPage = async () => {

package/src/modules/Settings/ContentTypes/DataPacks/index.tsx

@@ -38,15 +38,19 @@ const DataPacks = (props: IProps): JSX.Element => {
   const { isDirty } = useShouldBeSaved(selected, form);
   const { isOpen, toggleModal } = useModal();
   const { isVisible, toggleToast, setIsVisible } = useToast();
+  const errorRef = React.useRef<HTMLDivElement>(null);
 
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [deactivatedPack, setDeactivatedPack] = useState("");
 
   const toggleDeleteModal = () => setIsDeleteModalOpen(!isDeleteModalOpen);
 
-  const saveConfig = () => {
+  const saveConfig = async () => {
     setIsSavedData(true);
-    updateDataPack(selected.id);
+    const saved = await updateDataPack(selected.id);
+    if (!saved && errorRef.current) {
+      errorRef.current.scrollIntoView();
+    }
   };
 
   const getActivatedPacks = useCallback((): void => {
@@ -191,7 +195,7 @@ const DataPacks = (props: IProps): JSX.Element => {
         {isVisible && <Toast {...toastProps} />}
         <Nav isDirty={isDirty} />
         <S.ContentWrapper>
-          <ErrorToast />
+          <ErrorToast ref={errorRef} />
           {isLoading ? (
             <S.LoadingWrapper>
               <Loading />
@@ -217,7 +221,7 @@ interface IProps {
   routerAction: string;
   getSiteDataPacks: (queryParams?: string) => void;
   setSelected: (dataPack?: any) => void;
-  updateDataPack: (dataPack?: any) => void;
+  updateDataPack: (dataPack?: any) => Promise<boolean>;
   setHistoryPush(path: string): any;
   getDataPacksCategories: () => void;
   addDataPacks: (dataPack?: any, fromConfig?: boolean) => void;

package/src/modules/Sites/SitesList/GridView/GridSiteItem/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { useModal } from "@ax/hooks";
 import { isDevelopment } from "@ax/helpers";
-import { ISite } from "@ax/types";
+import { IGetSitesParams, ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { FieldsBehavior, Icon, Modal, Tooltip } from "@ax/components";
@@ -13,7 +13,7 @@ import { ItemName, ItemThumbnail } from "./../../atoms";
 import * as S from "./style";
 
 const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
-  const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite } = props;
+  const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams } = props;
   const { isOpen: isOpenDelete, toggleModal: toggleDeleteModal } = useModal();
   const { isOpen: isOpenPublish, toggleModal: togglePublishModal } = useModal();
   const [inputValue, setInputValue] = useState("");
@@ -62,7 +62,8 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   ];
 
   const handleDeleteSite = () => {
-    deleteSite(site.id);
+    const params = getParams();
+    deleteSite(site.id, params);
     toggleDeleteModal();
   };
 
@@ -74,12 +75,14 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleDeleteModal };
 
   const handlePublishSite = () => {
-    publishSite(site.id);
+    const params = getParams();
+    publishSite(site.id, params);
     togglePublishModal();
   };
 
   const handleUnpublishSite = () => {
-    unpublishSite(site.id);
+    const params = getParams();
+    unpublishSite(site.id, params);
     togglePublishModal();
   };
 
@@ -117,7 +120,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   return (
     <>
       <S.SiteWrapper key={site.id} onClick={setSite} data-testid="grid-site-item">
-        <Tooltip content={siteTooltip} >
+        <Tooltip content={siteTooltip}>
           <ItemThumbnail src={site.thumbnail} width={280} height={199} />
         </Tooltip>
         <S.Wrapper>
@@ -170,9 +173,10 @@ interface IGridSiteItemProps {
   site: ISite;
   setSiteInfo(currentSiteInfo: any): void;
   setHistoryPush(page: string, isEditor: boolean): void;
-  deleteSite(siteID: number): void;
-  publishSite(siteID: number): void;
-  unpublishSite(siteID: number): void;
+  deleteSite(siteID: number, params?: IGetSitesParams): void;
+  publishSite(siteID: number, params?: IGetSitesParams): void;
+  unpublishSite(siteID: number, params?: IGetSitesParams): void;
+  getParams: () => IGetSitesParams;
 }
 
 const mapDispatchToProps = {

package/src/modules/Sites/SitesList/ListView/ListSiteItem/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { useModal } from "@ax/hooks";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
-import { ICheck, ISite } from "@ax/types";
+import { ICheck, IGetSitesParams, ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { FieldsBehavior, Icon, Modal, Tooltip, CheckField } from "@ax/components";
@@ -13,7 +13,8 @@ import { ItemName, ItemThumbnail } from "./../../atoms";
 import * as S from "./style";
 
 const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
-  const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, isSelected, onCheck } = props;
+  const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, isSelected, onCheck, getParams } =
+    props;
 
   const { isOpen: isOpenDelete, toggleModal: toggleDeleteModal } = useModal();
   const { isOpen: isOpenPublish, toggleModal: togglePublishModal } = useModal();
@@ -63,7 +64,8 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
   ];
 
   const handleDeleteSite = () => {
-    deleteSite(site.id);
+    const params = getParams();
+    deleteSite(site.id, params);
     toggleDeleteModal();
   };
 
@@ -75,12 +77,14 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleDeleteModal };
 
   const handlePublishSite = () => {
-    publishSite(site.id);
+    const params = getParams();
+    publishSite(site.id, params);
     togglePublishModal();
   };
 
   const handleUnpublishSite = () => {
-    unpublishSite(site.id);
+    const params = getParams();
+    unpublishSite(site.id, params);
     togglePublishModal();
   };
 
@@ -183,10 +187,11 @@ interface IListSiteItemProps {
   isSelected: boolean;
   setSiteInfo(currentSiteInfo: any): void;
   setHistoryPush(site: string, isEditor: boolean): void;
-  deleteSite(siteID: number): void;
-  publishSite(siteID: number): void;
-  unpublishSite(siteID: number): void;
+  deleteSite(siteID: number, params?: IGetSitesParams): void;
+  publishSite(siteID: number, params?: IGetSitesParams): void;
+  unpublishSite(siteID: number, params?: IGetSitesParams): void;
   onCheck: (e: any) => void;
+  getParams: () => IGetSitesParams;
 }
 
 const mapDispatchToProps = {

package/src/modules/Sites/SitesList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
@@ -6,7 +6,7 @@ import { sitesActions } from "@ax/containers/Sites";
 import { ICheck, IGetSitesParams, IRootState, ISettingsForm, ISite, ISiteListConfig, IUser } from "@ax/types";
 import { IError } from "@ax/containers/App/reducer";
 import { useBulkSelection, useModal } from "@ax/hooks";
-import { MainWrapper, Modal, ErrorToast, Icon, IconAction, TableList, EmptyState } from "@ax/components";
+import { MainWrapper, Modal, ErrorToast, Icon, IconAction, TableList, EmptyState, Pagination } from "@ax/components";
 
 import { useFilterQuery, useSortedListStatus, useIsMount } from "./hooks";
 import { filterByStatus, getSortedListStatus } from "./utils";
@@ -47,7 +47,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 
   const itemsPerPage = 30;
   const firstPage = 1;
-  const [sitesIds, setsitesIds] = useState<any[]>([]);
+  const [sitesIds, setsitesIds] = useState<number[]>([]);
 
   const [page, setPage] = useState(firstPage);
   const [form, setForm] = useState(initialState);
@@ -81,19 +81,22 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   const { setSortedListStatus } = useSortedListStatus();
   const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery(currentConfig.filterValues);
 
+  const getParams = useCallback((): IGetSitesParams => {
+    const query = searchQuery ? `&query=${searchQuery}` : "";
+    return {
+      pagination: true,
+      language: undefined,
+      recentSitesNumber: 7,
+      page,
+      itemsPerPage,
+      filterQuery: currentFilterQuery,
+      searchQuery: query,
+    };
+  }, [currentFilterQuery, searchQuery, page]);
+
   useEffect(() => {
     if (token) {
-      const query = searchQuery ? `&query=${searchQuery}` : "";
-      const params = {
-        pagination: true,
-        language: undefined,
-        recentSitesNumber: 7,
-        page,
-        itemsPerPage,
-        filterQuery: currentFilterQuery,
-        searchQuery: query,
-      };
-
+      const params = getParams();
       if (isMount) {
         getSites({ ...params, token });
       } else {
@@ -101,11 +104,11 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, currentFilterQuery, searchQuery, page]);
+  }, [token, getParams]);
 
   useEffect(() => {
     if (sites.length > 0) {
-      const currentSitesId = sites?.map((site: any) => site.id);
+      const currentSitesId = sites?.map((site: ISite) => site.id);
       setsitesIds(currentSitesId);
     }
   }, [sites]);
@@ -259,16 +262,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
       unpublishSitesBulk(published);
     }
 
-    const query = searchQuery ? `&query=${searchQuery}` : "";
-    const params = {
-      pagination: true,
-      language: undefined,
-      recentSitesNumber: 7,
-      page,
-      itemsPerPage,
-      filterQuery: currentFilterQuery,
-      searchQuery: query,
-    };
+    const params = getParams();
     getSites(params);
     unselectAllItems();
   };
@@ -299,9 +293,15 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
       currentSites.map((site: ISite) => {
         const isItemSelected = isSelected(site.id);
         return displayMode === "grid" ? (
-          <GridSiteItem key={site.id} site={site} />
+          <GridSiteItem key={site.id} site={site} getParams={getParams} />
         ) : (
-          <ListSiteItem key={site.id} site={site} isSelected={isItemSelected} onCheck={handleAddToBulk} />
+          <ListSiteItem
+            key={site.id}
+            site={site}
+            isSelected={isItemSelected}
+            onCheck={handleAddToBulk}
+            getParams={getParams}
+          />
         );
       })
     ) : (
@@ -310,19 +310,28 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
       </S.EmptyStateWrapper>
     );
 
-  const GridList = () => (
-    <S.GridList data-testid="sites-grid-list" isEmpty={currentSites.length === 0} fullWidth={currentSites.length >= 5}>
-      {mappedSites}
-    </S.GridList>
-  );
+  const GridList = () => {
+    const showPagination = totalItems > itemsPerPage;
+    return (
+      <>
+        <S.GridList
+          data-testid="sites-grid-list"
+          isEmpty={currentSites.length === 0}
+          fullWidth={currentSites.length >= 5}
+        >
+          {mappedSites}
+        </S.GridList>
+        {showPagination && (
+          <S.PaginationWrapper>
+            <Pagination totalItems={totalItems} setPage={setPage} itemsPerPage={itemsPerPage} currPage={page} />
+          </S.PaginationWrapper>
+        )}
+      </>
+    );
+  };
+
   const ListTable = () => (
-    <TableList
-      tableHeader={Header}
-      pagination={pagination}
-      hasFixedHeader={true}
-      tableRef={tableRef}
-      overflow="visible"
-    >
+    <TableList tableHeader={Header} pagination={pagination} hasFixedHeader={true} tableRef={tableRef}>
       {mappedSites}
     </TableList>
   );

package/src/modules/Sites/SitesList/style.tsx

@@ -151,6 +151,13 @@ const Thumbnail = styled.div<{ backgroundUrl: string; height: number; width: num
 
 const ItemName = styled.span``;
 
+const PaginationWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: ${(p) => p.theme.spacing.m};
+  padding-right: ${(p) => p.theme.spacing.m};
+`;
+
 export {
   SectionHeader,
   CollapseButton,
@@ -167,4 +174,5 @@ export {
   ImageWrapper,
   Thumbnail,
   ItemName,
+  PaginationWrapper,
 };

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

@@ -181,7 +181,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     const params = {
       page,
       itemsPerPage,
-      lang: lang.locale,
       pagination: true,
       deleted: false,
       include_draft: true,
@@ -191,7 +190,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     };
 
     return params;
-  }, [lang.locale, page, searchQuery]);
+  }, [page, searchQuery]);
 
   const getStructuredData = useCallback(
     (id: string, filterQuery?: string) => {

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

@@ -8,6 +8,7 @@ const TableListWrapper = styled.div`
   position: relative;
   width: 100%;
   height: calc(100vh - ${(p) => p.theme.spacing.xl});
+  overflow: auto;
 `;
 
 const NotificationWrapper = styled.div`

package/src/types/index.tsx

@@ -333,6 +333,7 @@ export interface IGetStructuredDataParams {
   filterQuery?: string;
   relatedFields?: boolean;
   order?: string;
+  lang?: number;
 }
 
 export interface IMenu {