@griddo/ax 10.1.96 → 10.2.0

package/src/modules/Navigation/Menus/List/Table/Item/index.tsx

@@ -1,16 +1,16 @@
 import React, { useState } from "react";
-
 import { connect } from "react-redux";
-import { menuActions } from "@ax/containers/Navigation";
 
-import { useModal } from "@ax/hooks";
+import { menuActions } from "@ax/containers/Navigation";
+import { useModal, usePermission } from "@ax/hooks";
 import { IMenuItem } from "@ax/types";
 import { Icon, IconAction, Tooltip } from "@ax/components";
+
 import SidePanel from "./../SidePanel";
+import ConfigPanel from "./../ConfigPanel";
 import { RemoveModal } from "./atoms";
 
 import * as S from "./style";
-import ConfigPanel from "../ConfigPanel";
 
 const DragButton = ({ dragHandleProps }: any) => (
   <S.IconWrapperDrag {...dragHandleProps}>
@@ -23,9 +23,9 @@ const Item = (props: IItemProps): JSX.Element => {
   const deleteItem = (item: IMenuItem, deleteChildren?: boolean) => deleteMenuItem(item.id, deleteChildren);
   const hasChildren = !!item.children.length;
 
-  const removeItemAction = () => {
-    hasChildren ? toggleRemoveModal() : deleteItem(item);
-  };
+  const isAllowedToMangageMenus = usePermission("navigation.manageSiteMenu");
+
+  const removeItemAction = () => (hasChildren ? toggleRemoveModal() : deleteItem(item));
 
   const actionMenuOptions = [
     {
@@ -72,7 +72,7 @@ const Item = (props: IItemProps): JSX.Element => {
 
   return (
     <>
-      <S.Container>
+      <S.Container disabled={!isAllowedToMangageMenus}>
         <S.Component onClick={openModal} isGroup={isGroupingElement}>
           <S.FlexWrapper>
             <DragButton dragHandleProps={dragHandleProps} />
@@ -85,14 +85,14 @@ const Item = (props: IItemProps): JSX.Element => {
           </S.FlexWrapper>
           <S.FlexWrapper>
             <S.IconWrapper>{icon}</S.IconWrapper>
-            {depth === 1 && hasChildren && (
+            {depth === 1 && hasChildren && isAllowedToMangageMenus && (
               <S.IconWrapper>
                 <Tooltip content="Options view">
                   <IconAction icon="settings" size="m" onClick={openConfigModal} />
                 </Tooltip>
               </S.IconWrapper>
             )}
-            <S.StyledActionMenu options={actionMenuOptions} icon="more" />
+            {isAllowedToMangageMenus && <S.StyledActionMenu options={actionMenuOptions} icon="more" />}
           </S.FlexWrapper>
         </S.Component>
         {isOpen && (

package/src/modules/Navigation/Menus/List/Table/Item/style.tsx

@@ -1,10 +1,11 @@
 import styled from "styled-components";
 import { ActionMenu } from "@ax/components";
 
-const Container = styled.div`
+const Container = styled.div<{ disabled: boolean }>`
   display: flex;
   align-items: center;
   width: 100%;
+  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
 `;
 
 const IconWrapper = styled.div`

package/src/modules/Navigation/Menus/List/index.tsx

@@ -15,6 +15,10 @@ import * as S from "./style";
 const List = (props: IMenuList): JSX.Element => {
   const { getMenus, lang, getSitePages, currentSiteID, editorMenu, savedMenu, currentType } = props;
 
+  if (!currentSiteID) {
+    throw new Error(`ERROR: User reached Menu List with null site info`);
+  }
+
   const { isDirty } = useShouldBeSaved(editorMenu, savedMenu, currentType);
   const memoizedGetMenus = useCallback(() => getMenus(), [getMenus]);
   const memoizedGetSitePages = useCallback(
@@ -47,7 +51,7 @@ const List = (props: IMenuList): JSX.Element => {
 };
 
 const mapStateToProps = (state: IRootState) => ({
-  currentSiteID: state.sites.currentSiteInfo.id,
+  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   lang: state.app.lang,
   currentType: state.menu.type,
   editorMenu: state.menu.editorMenu.elements,
@@ -60,7 +64,7 @@ const mapDispatchToProps = {
 };
 
 interface IStateProps {
-  currentSiteID: number;
+  currentSiteID: number | null;
   lang: { locale: string; id: number | null };
   currentType: string;
   editorMenu: IMenuItem[] | undefined;

package/src/modules/Navigation/Menus/index.tsx

@@ -1,27 +1,32 @@
 import React from "react";
-
 import { connect } from "react-redux";
+
 import { menuActions } from "@ax/containers/Navigation";
 import { appActions } from "@ax/containers/App";
-
 import { IRootState } from "@ax/types";
 import { setIsSavedData } from "@ax/forms";
 import { MainWrapper } from "@ax/components";
+import { usePermission } from "@ax/hooks";
+
 import List from "./List";
 
 const MenuView = (props: IMenus) => {
   const { updateMenu, setLanguage, isSaving, lang, siteLanguages } = props;
 
+  const isAllowedToMangageMenus = usePermission("navigation.manageSiteMenu");
+
   const saveMenu = () => {
     setIsSavedData(true);
     return updateMenu();
   };
 
-  const rightButtonProps = {
-    label: isSaving ? "Saving" : "Save",
-    disabled: isSaving,
-    action: saveMenu,
-  };
+  const rightButtonProps = isAllowedToMangageMenus
+    ? {
+        label: isSaving ? "Saving" : "Save",
+        disabled: isSaving,
+        action: saveMenu,
+      }
+    : undefined;
 
   const languageActions = {
     setLanguage,

package/src/modules/PageEditor/Editor/index.tsx

@@ -45,6 +45,10 @@ const Editor = (props: IProps) => {
     isEditLive,
   } = props;
 
+  if (!site) {
+    throw new Error(`ERROR: User reached Editor with null site info`);
+  }
+
   const { header, footer, theme: pageTheme } = content;
   const { theme: siteTheme } = site;
 
@@ -111,7 +115,7 @@ interface IEditorStateProps {
   selectedTab: string;
   isLoading: boolean;
   userEditing: IUserEditing | null;
-  site: ISite;
+  site: ISite | null;
   lastElementAddedId: null | number;
   content: any;
 }

package/src/modules/PageEditor/PageBrowser/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 
 import { Browser } from "@ax/components";
-import { ILanguage, IRootState, ISocialState } from "@ax/types";
+import { ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
 
 const PageBrowser = (props: IProps) => {
   const {
@@ -11,7 +11,7 @@ const PageBrowser = (props: IProps) => {
     cloudinaryName,
     content: { header, footer, path, slug },
     setSelectedContent,
-    currentSiteInfo: { theme, id: siteID },
+    currentSiteInfo,
     siteLangs,
     isTemplateActivated,
     isReadOnly,
@@ -21,6 +21,12 @@ const PageBrowser = (props: IProps) => {
     duplicateModule,
   } = props;
 
+  if (!currentSiteInfo) {
+    throw new Error(`ERROR: User reached Page Editor with null site info`);
+  }
+
+  const { theme, id: siteID } = currentSiteInfo;
+
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
   const pathWithoutSlash = path ? (path.endsWith("/") ? path.slice(0, -1) : path) : "";
   const url = `${pathWithoutSlash}${slugWithSlash}`;
@@ -56,7 +62,7 @@ const PageBrowser = (props: IProps) => {
 interface IPageBrowserStateProps {
   // TODO: Define content Type
   content: any;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
   socials: ISocialState;
   cloudinaryName: string | null;
   siteLangs: ILanguage[];

package/src/modules/PageEditor/index.tsx

@@ -9,7 +9,7 @@ import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty, useModal } from "@ax/hooks";
+import { useIsDirty, useModal, usePermission } from "@ax/hooks";
 import { isModuleDisabled, getDeactivatedModules } from "@ax/helpers";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { DeleteModal } from "./atoms";
@@ -47,9 +47,17 @@ const PageEditor = (props: IProps) => {
     currentSiteErrorPages,
   } = props;
 
+  const isAllowedToPublishPages = usePermission("content.publishUnpublishPages");
+  const isAllowedToCreatePages = usePermission("content.createPages");
+  const isAllowedToDeletePage = usePermission("content.deletePages");
+  const isAllowedToDeletePublishedPage = usePermission("content.deletePublishedPages");
+  const isAllowedToEditContentPage = usePermission("content.editContentPages");
+
+  const defaultTab = isAllowedToEditContentPage ? "edit" : "view";
+
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [isReadOnly, setIsReadOnly] = useState(false);
-  const [selectedTab, setSelectedTab] = useState("edit");
+  const [selectedTab, setSelectedTab] = useState(defaultTab);
   const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
   const { isOpen, toggleModal } = useModal();
@@ -67,6 +75,7 @@ const PageEditor = (props: IProps) => {
   const isTranslated = pageLanguages.length > 1;
   const structuredData = editorContent ? editorContent.structuredData : "";
   const isEditLive = isPublished && hasDraft;
+  const isAllowedToDelete = (isPublished && isAllowedToDeletePublishedPage) || (!isPublished && isAllowedToDeletePage);
   const canBeUnpublished = editorContent && editorContent.canBeUnpublished;
   const deleteHelpText = !canBeUnpublished ? "This is the canonical site of the page. You cannot unpublish it." : null;
 
@@ -263,7 +272,7 @@ const PageEditor = (props: IProps) => {
   };
 
   const handleNewTranlation = (isNewTranslation: boolean) => {
-    setSelectedTab("edit");
+    isAllowedToEditContentPage && setSelectedTab("edit");
     createNewTranslation && createNewTranslation(isNewTranslation);
   };
 
@@ -273,49 +282,44 @@ const PageEditor = (props: IProps) => {
     getContent: handleGetTranlation,
   };
 
-  const unpublishOption =
-    props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty
-      ? {
-          label: "Unpublish",
-          icon: "offline",
-          action: isDraft ? toggleUnpublishModal : unpublishPage,
-        }
-      : undefined;
-
-  const discardOption =
-    isDraft || (isPublished && isDirty)
-      ? {
-          label: "Discard changes",
-          icon: "close",
-          action: isDraft ? handleDiscardDraft : handleDiscarChanges,
-        }
-      : undefined;
-
-  const deleteOption = !isDraft
-    ? {
-        label: "Delete",
-        icon: "delete",
-        action: toggleDeleteModal,
-      }
-    : undefined;
+  const menuOptions = [];
 
-  const menuOptions = !isGlobal
-    ? [
-        {
-          label: "Review",
-          icon: "question",
-          action: reviewPage,
-        },
-        unpublishOption,
-        discardOption,
-        deleteOption,
-      ]
-    : [];
+  if (isAllowedToEditContentPage) {
+    menuOptions.push({
+      label: "Review",
+      icon: "question",
+      action: reviewPage,
+    });
+  }
+
+  if (props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty && isAllowedToPublishPages) {
+    menuOptions.push({
+      label: "Unpublish",
+      icon: "offline",
+      action: isDraft ? toggleUnpublishModal : unpublishPage,
+    });
+  }
+
+  if (isAllowedToEditContentPage && (isDraft || (isPublished && isDirty))) {
+    menuOptions.push({
+      label: "Discard changes",
+      icon: "close",
+      action: isDraft ? handleDiscardDraft : handleDiscarChanges,
+    });
+  }
+
+  if (!isDraft && isAllowedToDelete) {
+    menuOptions.push({
+      label: "Delete",
+      icon: "delete",
+      action: toggleDeleteModal,
+    });
+  }
 
   const downArrowMenu = {
     displayed: !isReadOnly,
-    button: getPublishButton(props.pageStatus),
-    options: menuOptions,
+    button: isAllowedToPublishPages ? getPublishButton(props.pageStatus) : undefined,
+    options: !isGlobal ? menuOptions : [],
   };
 
   const handleSavePage = async () => {
@@ -361,7 +365,7 @@ const PageEditor = (props: IProps) => {
   }
 
   let availableLanguages = siteLanguages;
-  if (!isTemplateActivated || hasDeactivatedModules) {
+  if (!isTemplateActivated || hasDeactivatedModules || !isAllowedToCreatePages) {
     const pageLanguagesIDs = pageLanguages.map((language) => language.languageId);
     availableLanguages = siteLanguages.filter((language) => {
       return pageLanguagesIDs.includes(language.id);
@@ -386,15 +390,17 @@ const PageEditor = (props: IProps) => {
     }
   };
 
-  const rightButtonProps = {
-    label: isSaving ? "Saving" : getSaveLabel(),
-    disabled:
-      (!isDirty && pageID !== null && !isNewTranslation) ||
-      isSaving ||
-      isReadOnly ||
-      (!isTemplateActivated && !isGlobal),
-    action: isPublished ? publishChanges : handleSavePage,
-  };
+  const rightButtonProps = isAllowedToEditContentPage
+    ? {
+        label: isSaving ? "Saving" : getSaveLabel(),
+        disabled:
+          (!isDirty && pageID !== null && !isNewTranslation) ||
+          isSaving ||
+          isReadOnly ||
+          (!isTemplateActivated && !isGlobal),
+        action: isPublished ? publishChanges : handleSavePage,
+      }
+    : undefined;
 
   const goToLivePage = () => {
     const currentPageUrl = editorContent.fullUrl;
@@ -470,11 +476,15 @@ const PageEditor = (props: IProps) => {
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
 
+  const tabIcons = isAllowedToEditContentPage
+    ? [
+        { name: "edit", text: "Edit mode" },
+        { name: "view", text: "Preview mode" },
+      ]
+    : [{ name: "view", text: "Preview mode" }];
+
   const tabsPreview = {
-    icons: [
-      { name: "edit", text: "Edit mode" },
-      { name: "view", text: "Preview mode" },
-    ],
+    icons: tabIcons,
     selectedTab,
     action: (tab: string) => setSelectedTab(tab),
   };
@@ -611,7 +621,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   activatedModules: state.dataPacks.modules,
   errors: state.pageEditor.errors,
   userEditing: state.pageEditor.userEditing,
-  currentUserID: state.users.currentUser.id,
+  currentUserID: state.users.currentUser && state.users.currentUser.id,
   isNewTranslation: state.pageEditor.isNewTranslation,
   currentSiteErrorPages: state.sites.currentSiteErrorPages,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,

package/src/modules/Redirects/index.tsx

@@ -35,6 +35,7 @@ const Redirects = (props: IProps): JSX.Element => {
 
   const itemsPerPage = 50;
   const firstPage = 1;
+  const siteID = currentSiteID ? currentSiteID : "global";
   const [page, setPage] = useState(1);
   const [isScrolling, setIsScrolling] = useState(false);
   const [isOpenedSecond, setIsOpenedSecond] = useState(false);
@@ -43,7 +44,7 @@ const Redirects = (props: IProps): JSX.Element => {
   const tableRef = useRef<HTMLDivElement>(null);
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
   const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery(currentSiteID);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState(`&sites=${currentSiteID}`);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState(`&sites=${siteID}`);
   const { isVisible, toggleToast, setIsVisible } = useToast();
   const { isVisible: isImportVisible, toggleToast: toggleImportToast, setIsVisible: setIsImportVisible } = useToast();
   const { isOpen: isOpenOverwrite, toggleModal: toggleOverwriteModal } = useModal();
@@ -262,104 +263,102 @@ const Redirects = (props: IProps): JSX.Element => {
   ];
 
   return (
-    <>
-      <MainWrapper
-        backLink={false}
-        title="SEO Settings"
-        rightButton={rightButtonProps}
-        rightLineButton={rightLineButtonProps}
-        searchAction={setSearchQuery}
-        filterSearchAction={setSearchFilter}
-        searchFilters={searchFilters}
-      >
-        <S.Wrapper>
-          <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
-          <S.ContentWrapper>
-            <ErrorToast />
-            <S.TitleWrapper>
-              <S.Title>URL Redirects Manager</S.Title>
-              <S.Description>
-                You can create 301 redirects to direct users and search engines from an old URL to a new one.
-              </S.Description>
-            </S.TitleWrapper>
-            <S.TableWrapper>
-              <TableList
-                tableHeader={TableHeader}
-                pagination={pagination}
-                onScroll={onScroll}
-                hasFixedHeader={true}
-                tableRef={tableRef}
-              >
-                {isEmpty ? (
-                  <S.EmptyWrapper>
-                    <EmptyState {...emptyStateProps} />
-                  </S.EmptyWrapper>
-                ) : (
-                  redirects.map((redirect: any) => {
-                    const isItemSelected = isSelected(redirect.id);
-                    return (
-                      <RedirectItem
-                        key={redirect.id}
-                        redirect={redirect}
-                        isSelected={isItemSelected}
-                        onChange={addToBulkSelection}
-                        toggleToast={toggleToast}
-                        setFormValues={setFormValues}
-                        formValues={formValues}
-                        addRedirect={handleAddRedirect}
-                        currentFilter={currentFilterQuery}
-                        isSiteItem={!!currentSiteID}
-                      />
-                    );
-                  })
-                )}
-              </TableList>
-            </S.TableWrapper>
-            {isVisible && <Toast {...toastProps} />}
-            {isImportVisible && <Toast {...toastImportProps} />}
-          </S.ContentWrapper>
-        </S.Wrapper>
-        {isOpen && (
-          <RedirectPanel
-            isOpen={isOpen}
-            isOpenedSecond={isOpenedSecond}
-            toggleModal={toggleModal}
-            toggleSecondaryPanel={toggleSecondaryPanel}
-            formValues={formValues}
-            setFormValues={setFormValues}
-            addRedirect={handleAddRedirect}
-            currentFilter={currentFilterQuery}
-          />
-        )}
-        <DeleteModal
-          isOpen={isOpenDelete}
-          toggleModal={toggleModalDelete}
-          secondaryModalAction={secondaryDeleteModalAction}
-          mainModalAction={mainDeleteModalAction}
+    <MainWrapper
+      backLink={false}
+      title="SEO Settings"
+      rightButton={rightButtonProps}
+      rightLineButton={rightLineButtonProps}
+      searchAction={setSearchQuery}
+      filterSearchAction={setSearchFilter}
+      searchFilters={searchFilters}
+    >
+      <S.Wrapper>
+        <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
+        <S.ContentWrapper>
+          <ErrorToast />
+          <S.TitleWrapper>
+            <S.Title>URL Redirects Manager</S.Title>
+            <S.Description>
+              You can create 301 redirects to direct users and search engines from an old URL to a new one.
+            </S.Description>
+          </S.TitleWrapper>
+          <S.TableWrapper>
+            <TableList
+              tableHeader={TableHeader}
+              pagination={pagination}
+              onScroll={onScroll}
+              hasFixedHeader={true}
+              tableRef={tableRef}
+            >
+              {isEmpty ? (
+                <S.EmptyWrapper>
+                  <EmptyState {...emptyStateProps} />
+                </S.EmptyWrapper>
+              ) : (
+                redirects.map((redirect: any) => {
+                  const isItemSelected = isSelected(redirect.id);
+                  return (
+                    <RedirectItem
+                      key={redirect.id}
+                      redirect={redirect}
+                      isSelected={isItemSelected}
+                      onChange={addToBulkSelection}
+                      toggleToast={toggleToast}
+                      setFormValues={setFormValues}
+                      formValues={formValues}
+                      addRedirect={handleAddRedirect}
+                      currentFilter={currentFilterQuery}
+                      isSiteItem={!!currentSiteID}
+                    />
+                  );
+                })
+              )}
+            </TableList>
+          </S.TableWrapper>
+          {isVisible && <Toast {...toastProps} />}
+          {isImportVisible && <Toast {...toastImportProps} />}
+        </S.ContentWrapper>
+      </S.Wrapper>
+      {isOpen && (
+        <RedirectPanel
+          isOpen={isOpen}
+          isOpenedSecond={isOpenedSecond}
+          toggleModal={toggleModal}
+          toggleSecondaryPanel={toggleSecondaryPanel}
+          formValues={formValues}
+          setFormValues={setFormValues}
+          addRedirect={handleAddRedirect}
+          currentFilter={currentFilterQuery}
         />
-        <OverwriteModal
-          isOpen={isOpenOverwrite}
-          toggleModal={toggleOverwriteModal}
-          secondaryModalAction={secondaryOverwriteModalAction}
-          mainModalAction={mainOverwriteModalAction}
-        />
-        <ImportModal
-          isOpen={isOpenImport}
-          toggleModal={toggleImportModal}
-          checkImportData={handleCheckImportData}
-          isUploading={isUploading}
-          setIsUploading={setIsUploading}
-        />
-        <ImportCheckModal
-          isOpen={isOpenCheckImport}
-          toggleModal={toggleCheckImportModal}
-          mainModalAction={mainImportModalAction}
-          secondaryModalAction={secondaryImportModalAction}
-          imports={imports}
-          totalImports={totalImports}
-        />
-      </MainWrapper>
-    </>
+      )}
+      <DeleteModal
+        isOpen={isOpenDelete}
+        toggleModal={toggleModalDelete}
+        secondaryModalAction={secondaryDeleteModalAction}
+        mainModalAction={mainDeleteModalAction}
+      />
+      <OverwriteModal
+        isOpen={isOpenOverwrite}
+        toggleModal={toggleOverwriteModal}
+        secondaryModalAction={secondaryOverwriteModalAction}
+        mainModalAction={mainOverwriteModalAction}
+      />
+      <ImportModal
+        isOpen={isOpenImport}
+        toggleModal={toggleImportModal}
+        checkImportData={handleCheckImportData}
+        isUploading={isUploading}
+        setIsUploading={setIsUploading}
+      />
+      <ImportCheckModal
+        isOpen={isOpenCheckImport}
+        toggleModal={toggleCheckImportModal}
+        mainModalAction={mainImportModalAction}
+        secondaryModalAction={secondaryImportModalAction}
+        imports={imports}
+        totalImports={totalImports}
+      />
+    </MainWrapper>
   );
 };
 

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

@@ -15,6 +15,10 @@ import * as S from "./style";
 const AddModal = (props: IProps) => {
   const { toggleModal, getAvailableDataPacks, isLoading, available, addDataPacks, categories, currentSiteInfo } = props;
 
+  if (!currentSiteInfo) {
+    throw new Error(`ERROR: User reached DataPacks with null site info`);
+  }
+
   const initialState: IState = {
     packsSelected: [],
     currentFilter: null,
@@ -117,7 +121,7 @@ interface IProps {
   isLoading: boolean;
   available: IDataPack[];
   categories: IDataPackCategory[];
-  currentSiteInfo: ISite;
+  currentSiteInfo: ISite | null;
   toggleModal: () => void;
   getAvailableDataPacks: (queryParams: string | null) => void;
   addDataPacks: (dataPackID: string, fromConfig?: boolean) => void;

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/TemplateBrowser/index.tsx

@@ -2,17 +2,16 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { Browser } from "@ax/components";
-import { ILanguage, IRootState, ISocialState } from "@ax/types";
+import { ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
 
 const TemplateBrowser = (props: IProps) => {
-  const {
-    socials,
-    cloudinaryName,
-    content,
-    currentSiteInfo: { theme, id: siteID },
-    siteLangs,
-  } = props;
+  const { socials, cloudinaryName, content, currentSiteInfo, siteLangs } = props;
 
+  if (!currentSiteInfo) {
+    throw new Error(`ERROR: User reached Template Editor with null site info`);
+  }
+
+  const { theme, id: siteID } = currentSiteInfo;
   const { header, footer } = content;
 
   return (
@@ -33,7 +32,7 @@ const TemplateBrowser = (props: IProps) => {
 
 interface IProps {
   content: any;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
   socials: ISocialState;
   cloudinaryName: string | null;
   siteLangs: ILanguage[];