@griddo/ax 10.1.96 → 10.2.1

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

@@ -1,16 +1,22 @@
 import React from "react";
 import { Route, Redirect } from "react-router-dom";
 
-const PrivateRoute = (props: IProps) => {
-  const { component: Component, token, ...rest } = props;
+import { usePermission } from "@ax/hooks";
+import { IUser } from "@ax/types";
+
+const PrivateRoute = (props: IProps): JSX.Element => {
+  const { component: Component, token, permission, currentUser, ...rest } = props;
+
+  const isAllowed = usePermission(permission);
 
   const getComponent = (routeProps: any) => {
+    if (!!currentUser && !isAllowed) {
+      return <>{`You don't have permissions to access this section`}</>;
+    }
     return token ? <Component {...routeProps} /> : <Redirect to="/login" />;
   };
 
-  return (
-    <Route {...rest} render={getComponent} />
-  );
+  return <Route {...rest} render={getComponent} />;
 };
 
 interface IProps {
@@ -18,6 +24,8 @@ interface IProps {
   path: string;
   token: string;
   exact: any;
+  permission: string | string[] | undefined;
+  currentUser: IUser | null;
 }
 
 export default PrivateRoute;

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

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { Switch, Route } from "react-router-dom";
 
 import { ErrorGuard } from "@ax/guards";
-import { IRootState } from "@ax/types";
+import { IRootState, IUser } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { publicRoutes, privateRoutes, routes, IRouter } from "@ax/routes";
 import { ILogoutAction } from "@ax/containers/App/interfaces";
@@ -13,7 +13,7 @@ import PrivateRoute from "./PrivateRoute";
 import * as S from "./style";
 
 const Routing = (props: IProps) => {
-  const { path, token, setHistoryPush, logout } = props;
+  const { path, token, currentUser, setHistoryPush, logout } = props;
 
   useEffect(() => {
     path === "/" && setHistoryPush("/login");
@@ -40,23 +40,32 @@ const Routing = (props: IProps) => {
     );
   });
 
-  const getRoute = (component: any, path: string, isPrivate: boolean) =>
+  const getRoute = (component: any, path: string, isPrivate: boolean, permission: string | string[] | undefined) =>
     isPrivate ? (
-      <PrivateRoute token={token} path={path} component={component} exact />
+      <PrivateRoute
+        token={token}
+        path={path}
+        component={component}
+        permission={permission}
+        currentUser={currentUser}
+        exact
+      />
     ) : (
       <Route path={path} component={component} exact />
     );
 
   const mapSubroutes = (subgroup: any, isPrivate: boolean) => {
     return subgroup.routes.map((subRoute: any, subI: number) => (
-      <React.Fragment key={subI}>{getRoute(subRoute.component, subRoute.path, isPrivate)}</React.Fragment>
+      <React.Fragment key={subI}>
+        {getRoute(subRoute.component, subRoute.path, isPrivate, subRoute.permission)}
+      </React.Fragment>
     ));
   };
 
   const mapRoutes = (routeArr: IRouter[], isPrivate: boolean) =>
     routeArr.map((singleRoute: IRouter, i) => (
       <React.Fragment key={i}>
-        {getRoute(singleRoute.component, singleRoute.path, isPrivate)}
+        {getRoute(singleRoute.component, singleRoute.path, isPrivate, singleRoute.permission)}
         {singleRoute.routesGroups && singleRoute.routesGroups.map((subgroup: any) => mapSubroutes(subgroup, isPrivate))}
       </React.Fragment>
     ));
@@ -80,6 +89,7 @@ const Routing = (props: IProps) => {
 const mapStateToProps = (state: IRootState) => ({
   path: state.router.location.pathname,
   token: state.app.token,
+  currentUser: state.users.currentUser,
 });
 
 interface IDispatchProps {
@@ -90,6 +100,7 @@ interface IDispatchProps {
 interface IStateProps {
   path?: string;
   token: string;
+  currentUser: IUser | null;
 }
 
 const mapDispatchToProps = {

package/src/modules/Categories/CategoriesList/BulkHeader/TableHeader/style.tsx

@@ -30,6 +30,7 @@ const TransHeader = styled(Header)`
 const ActionsHeader = styled(Header)`
   width: 125px;
   padding-right: 0;
+  justify-content: flex-end;
 `;
 
 export { TableHeader, CheckHeader, NameHeader, CodeHeader, TransHeader, ActionsHeader };

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

@@ -3,15 +3,7 @@ import { BulkSelectionOptions } from "@ax/components";
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
-  const { showBulk, checkState, bulkDelete, selectItems, selectAllItems, totalItems, isScrolling } = props;
-
-  const bulkActions = [
-    {
-      icon: "delete",
-      text: "delete",
-      action: bulkDelete,
-    },
-  ];
+  const { showBulk, checkState, selectItems, selectAllItems, totalItems, isScrolling, bulkActions } = props;
 
   return showBulk ? (
     <BulkSelectionOptions
@@ -28,11 +20,11 @@ const BulkHeader = (props: IProps): JSX.Element => {
 interface IProps {
   showBulk: boolean;
   checkState: any;
-  bulkDelete: () => void;
   selectItems: () => void;
   selectAllItems: () => void;
   totalItems: number;
   isScrolling: boolean;
+  bulkActions: { icon: string; text: string; action: () => void }[];
 }
 
 export default BulkHeader;

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

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { connect } from "react-redux";
 
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import { useModal } from "@ax/hooks";
-import { IStructuredDataContent, ICategory, ICheck, IDataLanguage } from "@ax/types";
+import { useModal, usePermission } from "@ax/hooks";
+import { IStructuredDataContent, ICategory, ICheck, IRootState, IDataLanguage } from "@ax/types";
 import { CheckField, FloatingMenu, Flag, LanguageMenu } from "@ax/components";
 import CategoryPanel from "../CategoryPanel";
 import { DeleteModal } from "../atoms";
@@ -26,12 +26,20 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
     toggleToast,
     setDeletedItem,
     getContents,
+    currentSiteID,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 
+  const allowedToEditSiteCategory = usePermission("categories.editSiteTaxonomies");
+  const allowedToEditGlobalCategory = usePermission("global.globalData.editTaxonomies");
+  const allowedToDeleteSiteCategory = usePermission("categories.deleteSiteTaxonomies");
+  const allowedToDeleteGlobalCategory = usePermission("global.globalData.deleteTaxonomies");
+  const allowedToEditTaxonomy = currentSiteID ? allowedToEditSiteCategory : allowedToEditGlobalCategory;
+  const allowedToDeleteTaxonomy = currentSiteID ? allowedToDeleteSiteCategory : allowedToDeleteGlobalCategory;
+
   const { locale } = lang;
   const { dataLanguages, content } = category;
   const isTranslated = dataLanguages.length > 1;
@@ -56,13 +64,15 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
     }
   };
 
-  const menuOptions = [
-    {
-      label: "delete",
-      icon: "delete",
-      action: isTranslated ? toggleDeleteModal : removeItem,
-    },
-  ];
+  const menuOptions = allowedToDeleteTaxonomy
+    ? [
+        {
+          label: "delete",
+          icon: "delete",
+          action: isTranslated ? toggleDeleteModal : removeItem,
+        },
+      ]
+    : [];
 
   const getCurrentLanguages = () => {
     const availables: any[] = [];
@@ -143,10 +153,10 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
         <S.CheckCell role="cell">
           <CheckField name="check" value={category.id} checked={isSelected} onChange={handleOnChange} />
         </S.CheckCell>
-        <S.NameCell role="cell" onClick={handleClick}>
+        <S.NameCell role="cell" onClick={handleClick} clickable={allowedToEditTaxonomy}>
           {content.title}
         </S.NameCell>
-        <S.CodeCell role="cell" onClick={handleClick}>
+        <S.CodeCell role="cell" onClick={handleClick} clickable={allowedToEditTaxonomy}>
           {content.code}
         </S.CodeCell>
         <S.TransCell role="cell">{translations}</S.TransCell>
@@ -178,6 +188,7 @@ interface IProps {
   toggleToast(): void;
   setDeletedItem(item: number | number[]): void;
   getContents(dataId: string): void;
+  currentSiteID: number | null;
 }
 
 interface IDispatchProps {
@@ -190,6 +201,10 @@ interface IDispatchProps {
 
 type ICategoryItemProps = IProps & IDispatchProps;
 
+const mapStateToProps = (state: IRootState) => ({
+  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+});
+
 const mapDispatchToProps = {
   setCategoryValues: structuredDataActions.setCategoryValues,
   deleteStructuredDataContent: structuredDataActions.deleteStructuredDataContent,
@@ -198,4 +213,4 @@ const mapDispatchToProps = {
   getTranslatedCategory: structuredDataActions.getTranslatedCategory,
 };
 
-export default connect(null, mapDispatchToProps)(CategoryItem);
+export default connect(mapStateToProps, mapDispatchToProps)(CategoryItem);

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

@@ -11,7 +11,8 @@ const CheckCell = styled(Cell)`
   }
 `;
 
-const NameCell = styled(Cell)`
+const NameCell = styled(Cell)<{ clickable: boolean }>`
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   width: 40%;
 `;
 
@@ -25,8 +26,9 @@ const TransCell = styled(Cell)`
   align-items: center;
 `;
 
-const CodeCell = styled(Cell)`
+const CodeCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   width: 40%;
 `;
 

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

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { appActions } from "@ax/containers/App";
 import { IRootState, IStructuredData, IStructuredDataContent, IGetStructuredDataParams, IDataPack } from "@ax/types";
-import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
 import { MainWrapper, TableList, ErrorToast, Toast, EmptyState } from "@ax/components";
 
 import { DeleteModal } from "./atoms";
@@ -46,6 +46,13 @@ const CategoriesList = (props: IProps): JSX.Element => {
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const tableRef = useRef<HTMLDivElement>(null);
 
+  const allowedToCreateSiteCategory = usePermission("categories.createSiteTaxonomies");
+  const allowedToCreateGlobalCategory = usePermission("global.globalData.createTaxonomies");
+  const allowedToDeleteSiteCategory = usePermission("categories.deleteSiteTaxonomies");
+  const allowedToDeleteGlobalCategory = usePermission("global.globalData.deleteTaxonomies");
+  const allowedToDeleteTaxonomy = currentSiteID ? allowedToDeleteSiteCategory : allowedToDeleteGlobalCategory;
+  const allowedToCreateTaxonomy = currentSiteID ? allowedToCreateSiteCategory : allowedToCreateGlobalCategory;
+
   const scope = currentSiteID ? "site" : "global";
   const currentCategories = categories[scope];
 
@@ -103,10 +110,12 @@ const CategoriesList = (props: IProps): JSX.Element => {
     toggleModal();
   };
 
-  const rightButtonProps = {
-    label: "New",
-    action: openModal,
-  };
+  const rightButtonProps = allowedToCreateTaxonomy
+    ? {
+        label: "New",
+        action: openModal,
+      }
+    : undefined;
 
   const bulkDelete = async () => {
     const idsToBeDeleted = getAllLangCategoriesIds(currentDataContent, selectedItems, deleteAllVersions);
@@ -146,15 +155,25 @@ const CategoriesList = (props: IProps): JSX.Element => {
     message: deletedItem ? `Categories deleted` : "",
   };
 
+  const bulkActions = allowedToDeleteTaxonomy
+    ? [
+        {
+          icon: "delete",
+          text: "delete",
+          action: handleToggleDeleteModal,
+        },
+      ]
+    : [];
+
   const TableHeader = (
     <BulkHeader
       showBulk={areItemsSelected(catIds)}
-      bulkDelete={handleToggleDeleteModal}
       selectAllItems={handleSelectAll}
       totalItems={totalItems}
       selectItems={selectItems}
       checkState={checkState}
       isScrolling={isScrolling}
+      bulkActions={bulkActions}
     />
   );
 
@@ -269,7 +288,7 @@ const mapStateToProps = (state: IRootState) => ({
 });
 
 interface IDispatchProps {
-  getStructuredDataContents(params: IGetStructuredDataParams, siteID?: number | undefined): Promise<void>;
+  getStructuredDataContents(params: IGetStructuredDataParams, siteID: number | null): Promise<void>;
   resetCategoryValues(): void;
   setLanguage(lang: { locale: string; id: number | null }): void;
   setSelectedCategory(id: string, scope: string): void;
@@ -280,7 +299,7 @@ interface IDispatchProps {
 }
 
 interface ICategoriesProps {
-  currentSiteID: number;
+  currentSiteID: number | null;
   currentDataContent: IStructuredDataContent[];
   currentStructuredData: IStructuredData | null;
   lang: { locale: string; id: number | null };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
 import { IColumn } from "@ax/types";
+import { usePermission } from "@ax/hooks";
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -27,13 +28,16 @@ const BulkHeader = (props: IProps): JSX.Element => {
     siteID,
   } = props;
 
+  const isAllowedToDeletePage = usePermission("content.deletePages");
+  const isAllowedToPublishPages = usePermission("content.publishUnpublishPages");
+
   const deleteAction = {
     icon: "delete",
     text: "delete",
     action: bulkDelete,
   };
 
-  const actions = [
+  const actions = isAllowedToPublishPages ? [
     {
       icon: "upload-pending",
       text: "publish",
@@ -44,9 +48,9 @@ const BulkHeader = (props: IProps): JSX.Element => {
       text: "unpublish",
       action: bulkUnpublish,
     },
-  ];
+  ] : [];
 
-  const bulkActions = isEditable ? [deleteAction, ...actions] : actions;
+  const bulkActions = isEditable && isAllowedToDeletePage ? [deleteAction, ...actions] : actions;
 
   return showBulk ? (
     <BulkSelectionOptions

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

@@ -133,7 +133,7 @@ const mapStateToProps = (
   state: IRootState,
   ownProps: { structuredData: string; setPagesToImport: React.Dispatch<React.SetStateAction<never[]>> }
 ) => ({
-  siteID: state.sites.currentSiteInfo.id,
+  siteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   lang: state.app.lang,
   structuredData: ownProps.structuredData,
   setPagesToImport: ownProps.setPagesToImport,

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

@@ -2,7 +2,7 @@ import React, { memo, useRef, useState } from "react";
 import { schemas } from "components";
 import { useTheme } from "styled-components";
 
-import { useAdaptiveText, useModal } from "@ax/hooks";
+import { useAdaptiveText, useModal, usePermission } from "@ax/hooks";
 import { getHumanLastModifiedDate, getTemplateDisplayName, slugify } from "@ax/helpers";
 import { IPage, ISite, ISavePageParams, ICheck, IColumn, IPageLanguage, IDataPack } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
@@ -67,7 +67,9 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     manuallyImported,
     templateId,
     structuredDataContent,
+    liveStatus,
   } = page;
+
   const displayName = getTemplateDisplayName(templateId);
 
   const initValue = { title: "", slug: "" };
@@ -86,6 +88,14 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const title = useAdaptiveText(nameCellRef, page.title, nameCellPadding);
   const path = useAdaptiveText(nameCellRef, fullPath.page, nameCellPadding);
 
+  const isAllowedToDuplicatePages = usePermission("content.duplicatePages");
+  const isAllowedToPublishPages = usePermission("content.publishUnpublishPages");
+  const isAllowedToCreatePages = usePermission("content.createPages");
+  const isAllowedToCopyPage = usePermission("content.copyPageInOtherSite");
+  const isAllowedToDeletePage = usePermission("content.deletePages");
+  const isAllowedToDeletePublishedPage = usePermission("content.deletePublishedPages");
+  const isAllowedToEditContentPage = usePermission("content.editContentPages");
+
   const currentTemplateDataPacks = schemas.templates[templateId].dataPacks;
 
   const isCopyable = !currentTemplateDataPacks;
@@ -93,6 +103,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const isTranslated = pageLanguages.length > 1;
   const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
+  const isPublished = liveStatus.status === pageStatus.PUBLISHED || liveStatus.status === pageStatus.UPLOAD_PENDING;
+  const isAllowedToDelete = (isPublished && isAllowedToDeletePublishedPage) || (!isPublished && isAllowedToDeletePage);
 
   const publishedTooltip: any = {
     active: "Live",
@@ -275,13 +287,9 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   let availableLanguages = siteLanguages;
 
-  if (!isTemplateActivated || isGlobal) {
+  if (!isTemplateActivated || isGlobal || !isAllowedToCreatePages) {
     const pageLanguagesIDs = pageLanguages.map((language: any) => language.languageId);
-    availableLanguages =
-      siteLanguages &&
-      siteLanguages.filter((language) => {
-        return pageLanguagesIDs.includes(language.id);
-      });
+    availableLanguages = siteLanguages && siteLanguages.filter((language) => pageLanguagesIDs.includes(language.id));
   }
 
   const languageMenu = () => (
@@ -318,30 +326,33 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
       ? "This is the canonical site of the page. You cannot remove it."
       : null;
 
-  let menuOptions: IPageOption[] = [
-    {
+  let menuOptions: IPageOption[] = [];
+
+  if (isAllowedToDelete) {
+    menuOptions.push({
       label: isGlobal ? "Remove from site" : "delete",
       icon: "delete",
       action: isGlobal ? toggleRemoveModal : toggleDeleteModal,
       disabled: deleteDisabled,
       helpText: deleteHelpText,
-    },
-  ];
-
-  const duplicateOption = {
-    label: "duplicate",
-    icon: "duplicate",
-    action: toggleModal,
-  };
+    });
+  }
 
-  const copyOption = {
-    label: "Copy page in another site",
-    icon: "copy",
-    action: toggleCopyModal,
-  };
+  if (isCopyable && isAllowedToCopyPage) {
+    menuOptions.unshift({
+      label: "Copy page in another site",
+      icon: "copy",
+      action: toggleCopyModal,
+    });
+  }
 
-  if (isCopyable) menuOptions.unshift(copyOption);
-  if (!isGlobal) menuOptions.unshift(duplicateOption);
+  if (!isGlobal && isAllowedToDuplicatePages) {
+    menuOptions.unshift({
+      label: "duplicate",
+      icon: "duplicate",
+      action: toggleModal,
+    });
+  }
 
   const getPublishItem = (status: string, canBeUnpublished: boolean) => {
     const helpText =
@@ -387,15 +398,9 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const publishAction = getPublishItem(page.liveStatus.status, canBeUnpublished);
 
-  menuOptions = publishAction ? [publishAction, ...menuOptions] : menuOptions;
+  menuOptions = publishAction && isAllowedToPublishPages ? [publishAction, ...menuOptions] : menuOptions;
 
   const editOptions = [
-    {
-      label: "Edit draft",
-      icon: "modified",
-      action: goToPage,
-      color: true,
-    },
     {
       label: "View live",
       icon: "active",
@@ -404,6 +409,15 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     },
   ];
 
+  if (isAllowedToEditContentPage) {
+    editOptions.unshift({
+      label: "Edit draft",
+      icon: "modified",
+      action: goToPage,
+      color: true,
+    });
+  }
+
   menuOptions = page.haveDraftPage ? [...editOptions, ...menuOptions] : menuOptions;
 
   menuOptions = page.liveStatus.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;

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

@@ -91,7 +91,7 @@ const Mark = styled.div`
   align-items: center;
 `;
 
-const Home = styled.span`
+const Home = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   width: 63px;
   height: 20px;
@@ -101,6 +101,7 @@ const Home = styled.span`
   justify-content: center;
   align-items: center;
   padding: 2px 10px 2px 4px;
+  word-break: normal;
 `;
 
 const Wrapper = styled.div`

package/src/modules/Content/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 import { schemas } from "components";
 
-import { useModal, useBulkSelection, useToast, useCategoryColors } from "@ax/hooks";
+import { useModal, useBulkSelection, useToast, useCategoryColors, usePermission } from "@ax/hooks";
 import {
   IRootState,
   IPage,
@@ -18,6 +18,7 @@ import {
   IUser,
   IErrorItem,
   IGetSitesParams,
+  ISiteRoles,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState, Notification } from "@ax/components";
 import { isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
@@ -142,8 +143,8 @@ const Content = (props: IProps): JSX.Element => {
   const dataIds = currentDataContent && currentDataContent.map((data: any) => data.id);
   const contentIds = isStructuredData ? dataIds : pagesIds;
   const currentSitePagesTemplatesIds = currentSitePages && currentSitePages.map((page: any) => page.templateId);
-  const currentSitesByLang = sitesByLang?.filter(
-    (site) => user?.sites?.includes("all") || user.sites.includes(site.id)
+  const currentSitesByLang = sitesByLang?.filter((site: ISite) =>
+    user?.roles.find((siteRole: ISiteRoles) => siteRole.siteId === site.id || siteRole.siteId === "all")
   );
   const categoryColumns =
     currentStructuredData && currentStructuredData.schema
@@ -184,6 +185,8 @@ const Content = (props: IProps): JSX.Element => {
   const [pagesSelected, setPagesSelected] = useState<any[]>([]);
   const history = useHistory();
 
+  const isAllowedToCreatePages = usePermission("content.createPages");
+
   const {
     resetBulkSelection,
     selectedItems,
@@ -302,8 +305,14 @@ const Content = (props: IProps): JSX.Element => {
       } else {
         emptyState.message = isContentType
           ? "You don’t have pages with this content type yet."
-          : "To start using pages in your site, create as many pages as you need.";
-        emptyState.button = isContentType ? "View all content" : "Create the first page";
+          : isAllowedToCreatePages
+          ? "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;
         emptyState.action = isContentType ? () => setFilter("unique-pages") : toggleNewModal;
       }
       setIsEmpty(!content.length);
@@ -729,17 +738,17 @@ const Content = (props: IProps): JSX.Element => {
 
   const addNewAction = filter === "unique-pages" || isGlobalPages ? toggleNewModal : addNewData;
 
+  const rightButtonProps = isAllowedToCreatePages ? {
+    label: "New",
+    action: addNewAction,
+    disabled: !isDataEditable,
+  } : undefined;
+
   const errorPagesText =
     currentSiteErrorPages.length > 1
       ? "These pages contains some errors, so you can not publish them yet. Please, review the errors on the pages."
       : "This page contains some errors, so you can not publish it yet. Please, review the errors on the page.";
 
-  const rightButtonProps = {
-    label: "New",
-    action: addNewAction,
-    disabled: !isDataEditable,
-  };
-
   const notEditableText =
     "Sorry, this content cannot be edited because it comes from an external source or belongs to a preconfigured system.";
 
@@ -933,7 +942,7 @@ const mapDispatchToProps = {
 
 interface IPagesProps {
   isData: boolean;
-  currentSiteInfo: ISite;
+  currentSiteInfo: ISite | null;
   currentSitePages: IPage[];
   filter: any;
   template: string;
@@ -954,7 +963,7 @@ interface IPagesProps {
   currentSiteErrorPages: number[];
   sites: ISite[];
   sitesByLang: ISite[];
-  user: IUser;
+  user: IUser | null;
   skipReviewOnPublish?: boolean;
   contentFilters: Record<string, string> | null;
 }

package/src/modules/FramePreview/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { getDefaultTheme } from "@ax/helpers";
 import { Loading, BrowserContent } from "@ax/components";
-import { ILanguage, IRootState, ISocialState } from "@ax/types";
+import { ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { findByEditorID } from "@ax/forms";
 import { useOnMessageReceivedFromOutside, useURLSearchParam } from "@ax/hooks";
@@ -99,7 +99,7 @@ interface IProps {
   content: any;
   socials: ISocialState;
   cloudinaryName: string | null;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
   siteLangs: ILanguage[];
   globalLangs: ILanguage[];
   isLoading: boolean;