@griddo/ax 10.1.96 → 10.2.0

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPackConfigImport, IDataPackConfigImportCategory, IRootState, ITemplate } from "@ax/types";
+import { IDataPackConfigImport, IDataPackConfigImportCategory, IRootState, ISite, ITemplate } from "@ax/types";
 import { dataPacksActions } from "@ax/containers/Settings";
 import { FieldsBehavior, Modal, Tag } from "@ax/components";
 import { useModal } from "@ax/hooks";
@@ -13,6 +13,10 @@ const Form = (props: IProps): JSX.Element => {
   const { currentSite, selected, updateFormValue, configFormData, allStructuredData } = props;
   const { templates, categories, structuredData } = selected;
 
+  if (!currentSite) {
+    throw new Error(`ERROR: User reached Data Pack form with null site info`);
+  }
+
   const getSubscribedData = (importValue: IDataPackConfigImport[]) => {
     const value: Record<string, ICategoryValue[]> = {};
     if (!importValue) return value;
@@ -176,7 +180,7 @@ const Form = (props: IProps): JSX.Element => {
             onChange={setIndexDefault}
           />
         </S.SectionContent>
-        <TemplateConfig templates={templates} currentSite={currentSite}/>
+        <TemplateConfig templates={templates} currentSite={currentSite} />
       </S.Config>
       <Modal
         isOpen={isOpen}
@@ -212,7 +216,7 @@ interface ICategoryValue {
 
 interface IProps {
   selected: any;
-  currentSite: number;
+  currentSite: ISite | null;
   updateFormValue: (config?: any) => void;
   configFormData: any;
   allStructuredData: any;

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

@@ -14,6 +14,10 @@ const ConfigPack = (props: IProps): JSX.Element => {
   const { title, description, categories, templates, modules, structuredData } = selected;
   const isFromPage = templates && templates.length > 0;
 
+  if (!currentSiteInfo) {
+    throw new Error(`ERROR: User reached DataPacks with null site info`);
+  }
+
   return (
     <S.Wrapper>
       <S.Pack>
@@ -69,7 +73,7 @@ const ConfigPack = (props: IProps): JSX.Element => {
 
 interface IProps {
   selected: any;
-  currentSiteInfo: ISite;
+  currentSiteInfo: ISite | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -12,6 +12,10 @@ import * as S from "./style";
 const Item = (props: IProps): JSX.Element => {
   const { getActivatedDataPack, pack, toggleToast, deleteSiteDataPack, setDeactivatedPack, currentSiteInfo } = props;
 
+  if (!currentSiteInfo) {
+    throw new Error(`ERROR: User reached DataPacks with null site info`);
+  }
+
   const { title, id, templates, config } = pack;
   const isFromPage = templates && templates.length > 0;
   const { isOpen, toggleModal } = useModal();
@@ -103,7 +107,7 @@ const Item = (props: IProps): JSX.Element => {
 
 interface IProps {
   pack: any;
-  currentSiteInfo: ISite;
+  currentSiteInfo: ISite | null;
   getActivatedDataPack: (selected: string) => void;
   toggleToast: () => void;
   setDeactivatedPack: Dispatch<SetStateAction<string>>;

package/src/modules/Settings/Integrations/BulkHeader/index.tsx

@@ -6,8 +6,6 @@ const BulkHeader = (props: IProps): JSX.Element => {
   const {
     showBulk,
     checkState,
-    bulkDelete,
-    bulkDeactivate,
     selectItems,
     selectAllItems,
     totalItems,
@@ -16,21 +14,9 @@ const BulkHeader = (props: IProps): JSX.Element => {
     filterValues,
     sortItems,
     sortedListStatus,
+    bulkActions,
   } = props;
 
-  const bulkActions = [
-    {
-      icon: "delete",
-      text: "delete",
-      action: bulkDelete,
-    },
-    {
-      icon: "deactivate",
-      text: "Deactivate",
-      action: bulkDeactivate,
-    },
-  ];
-
   return showBulk ? (
     <BulkSelectionOptions
       checkState={checkState}
@@ -54,8 +40,6 @@ const BulkHeader = (props: IProps): JSX.Element => {
 interface IProps {
   showBulk: boolean;
   checkState: any;
-  bulkDelete: () => void;
-  bulkDeactivate: () => void;
   selectItems: () => void;
   selectAllItems: () => void;
   totalItems: number;
@@ -64,6 +48,7 @@ interface IProps {
   filterValues: any;
   sortItems: (orderPointer: string, isAscending: boolean) => void;
   sortedListStatus: { isAscending: boolean; sortedByTitle: boolean };
+  bulkActions: { icon: string; text: string; action: () => void }[];
 }
 
 export default BulkHeader;

package/src/modules/Settings/Integrations/IntegrationForm/index.tsx

@@ -18,6 +18,10 @@ const IntegrationForm = (props: IProps) => {
   const { setHistoryPush, createIntegration, updateIntegration, siteID, isSaving, siteLangs, setError, integration } =
     props;
 
+  if (!siteID) {
+    throw new Error(`ERROR: User reached Integrations with null site info`);
+  }
+
   const isNew = !integration?.id;
   const initState: IIntegration = integration
     ? integration
@@ -288,7 +292,7 @@ const IntegrationForm = (props: IProps) => {
 const mapStateToProps = (state: IRootState) => ({
   isSaving: state.app.isSaving,
   isLoading: state.app.isLoading,
-  siteID: state.sites.currentSiteInfo.id,
+  siteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   siteLangs: state.sites.currentSiteLanguages,
   integration: state.integrations.currentIntegration,
 });
@@ -310,7 +314,7 @@ const mapDispatchToProps = {
 interface IIntegrationFromProps {
   isSaving: boolean;
   isLoading: boolean;
-  siteID: number;
+  siteID: number | null;
   siteLangs: ILanguage[];
   integration: IIntegration | null;
 }

package/src/modules/Settings/Integrations/IntegrationItem/index.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { connect } from "react-redux";
 import { DraggableProvided } from "react-beautiful-dnd";
 
+import { useModal, usePermission, useToast } from "@ax/hooks";
 import { ICheck, IIntegration } from "@ax/types";
 import { CheckField, Icon, Modal, Toast, ToggleField } from "@ax/components";
-import { useModal, useToast } from "@ax/hooks";
 import { integrations } from "@ax/api";
 import { integrationsActions } from "@ax/containers/Integrations";
 import { appActions } from "@ax/containers/App";
@@ -32,6 +32,11 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
   const { isOpen: isOpenCopy, toggleModal: toggleModalCopy } = useModal();
   const { isVisible: isVisibleCopy, toggleToast: toggleToastCopy, setIsVisible: setIsVisibleCopy } = useToast();
 
+  const isAllowedToManageIntegrations = usePermission("general.manageSiteThirdPartyIntegrations");
+  const isAllowedToActivateIntegrations = usePermission("general.activateSiteThirdPartyIntegrations");
+  const isAllowedToDeactivateIntegrations = usePermission("general.deactivateSiteThirdPartyIntegrations");
+  const isAllowedToDeleteIntegrations = usePermission("general.deleteSiteThirdPartyIntegrations");
+
   const handleOnChange = (value: ICheck) => onChange(value);
 
   const getContentPresence = (contentPresence: {
@@ -75,12 +80,15 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
       icon: "copy2",
       action: toggleModalCopy,
     },
-    {
+  ];
+
+  if (isAllowedToDeleteIntegrations) {
+    menuOptions.push({
       label: "delete",
       icon: "delete",
       action: toggleModalDelete,
-    },
-  ];
+    });
+  }
 
   const mainDeleteModalAction = {
     title: "Delete add-on",
@@ -115,6 +123,8 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
     setHistoryPush("addons/edit");
   };
 
+  const isToggleDisabled = (integration.active && !isAllowedToDeactivateIntegrations) || (!integration.active && !isAllowedToActivateIntegrations);
+
   return (
     <>
       <S.ItemRow
@@ -132,18 +142,18 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
         <S.CheckCell role="cell" hasHandle={listLength >= 2}>
           <CheckField name="check" value={integration.id ?? ""} checked={isSelected} onChange={handleOnChange} />
         </S.CheckCell>
-        <S.NameCell role="cell" onClick={handleClick}>
+        <S.NameCell role="cell" onClick={handleClick}  clickable={isAllowedToManageIntegrations} >
           <S.Order>#{integration.correlativeScriptOrder}</S.Order>
           <div>{integration.name}</div>
         </S.NameCell>
-        <S.DescriptionCell role="cell" onClick={handleClick}>
+        <S.DescriptionCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations} >
           {integration.description}
         </S.DescriptionCell>
-        <S.AppliedOnCell role="cell" onClick={handleClick}>
+        <S.AppliedOnCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations} >
           Applied on: <S.ContentPresence>{getContentPresence(integration.contentPresence)}</S.ContentPresence>
         </S.AppliedOnCell>
         <S.StateCell role="cell">
-          <ToggleField name="state" value={integration.active} onChange={toggleModalChangeState} />
+          <ToggleField name="state" value={integration.active} onChange={toggleModalChangeState} disabled={isToggleDisabled} />
         </S.StateCell>
         <S.ActionsCell role="cell">
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />

package/src/modules/Settings/Integrations/IntegrationItem/style.tsx

@@ -11,8 +11,9 @@ const CheckCell = styled(Cell)<{ hasHandle: boolean }>`
   }
 `;
 
-const NameCell = styled(Cell)`
+const NameCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiM};
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textHighEmphasis};
   width: 350px;
   flex-flow: row wrap;
@@ -25,14 +26,16 @@ const Order = styled.div`
   margin-right: ${(p) => p.theme.spacing.xxs};
 `;
 
-const DescriptionCell = styled(Cell)`
+const DescriptionCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   flex: 1;
 `;
 
-const AppliedOnCell = styled(Cell)`
+const AppliedOnCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   flex: 1;
   display: inline;

package/src/modules/Settings/Integrations/index.tsx

@@ -6,7 +6,7 @@ import { IEmptyStateProps, IIntegration, IRootState } from "@ax/types";
 import { MainWrapper, ErrorToast, TableList, EmptyState, Toast } from "@ax/components";
 import { integrationsActions } from "@ax/containers/Integrations";
 import { appActions } from "@ax/containers/App";
-import { useBulkSelection, useEmptyState, useModal, useToast } from "@ax/hooks";
+import { useBulkSelection, useEmptyState, useModal, usePermission, useToast } from "@ax/hooks";
 
 import BulkHeader from "./BulkHeader";
 import IntegrationItem from "./IntegrationItem";
@@ -55,11 +55,16 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
     state: stateToastChange,
   } = useToast();
 
+  const isAllowedToManageIntegrations = usePermission("general.manageSiteThirdPartyIntegrations");
+  const isAllowedToDeactivateIntegrations = usePermission("general.deactivateSiteThirdPartyIntegrations");
+  const isAllowedToDeleteIntegrations = usePermission("general.deleteSiteThirdPartyIntegrations");
+
   const noElementsProps: IEmptyStateProps = {
     message: "To start using add-ons in your site, create as many Custom Code as you need.",
     button: "Create custom code",
     action: () => setHistoryPush(`/sites/settings/addons/new`),
   };
+
   const fetchState = { isLoading, isFiltered };
   const { isEmpty, emptyStateProps } = useEmptyState(integrations, fetchState, { noElementsProps });
 
@@ -136,11 +141,28 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
     setCurrentFilterQuery(filterQuery);
   };
 
+  const bulkActions: { icon: string; text: string; action: () => void | Promise<void> }[] =
+    isAllowedToDeleteIntegrations
+      ? [
+          {
+            icon: "delete",
+            text: "delete",
+            action: bulkDelete,
+          },
+        ]
+      : [];
+
+  if (isAllowedToDeactivateIntegrations) {
+    bulkActions.push({
+      icon: "deactivate",
+      text: "Deactivate",
+      action: toggleModalDeactivate,
+    });
+  }
+
   const TableHeader = (
     <BulkHeader
       showBulk={areItemsSelected(integrationsIds)}
-      bulkDelete={toggleModalDelete}
-      bulkDeactivate={toggleModalDeactivate}
       selectAllItems={handleSelectAll}
       totalItems={totalItems}
       selectItems={selectItems}
@@ -150,6 +172,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
       filterValues={filterValues}
       sortItems={sortItems}
       sortedListStatus={sortedListStatus}
+      bulkActions={bulkActions}
     />
   );
 
@@ -197,10 +220,12 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
     }`,
   };
 
-  const rightButtonProps = {
-    label: "New Custom Code",
-    action: () => setHistoryPush(`/sites/settings/addons/new`),
-  };
+  const rightButtonProps = isAllowedToManageIntegrations
+    ? {
+        label: "New Custom Code",
+        action: () => setHistoryPush(`/sites/settings/addons/new`),
+      }
+    : undefined;
 
   const ComponentList = React.memo(function ComponentList({ components }: any) {
     return components.map((integration: IIntegration, index: number) => {

package/src/modules/Settings/Languages/LanguagePanel/index.tsx

@@ -12,6 +12,10 @@ import * as S from "./style";
 const LanguagePanel = (props: IProps): JSX.Element => {
   const { isOpen, toggleModal, createSiteLanguage, updateSiteLanguage, currentSiteID, languageData, item } = props;
 
+  if (!currentSiteID) {
+    throw new Error(`ERROR: User reached Languages with null site info`);
+  }
+
   const addItemAction = () => {
     createSiteLanguage(currentSiteID, languageData);
     toggleModal();
@@ -55,7 +59,7 @@ const LanguagePanel = (props: IProps): JSX.Element => {
 };
 
 const mapStateToProps = (state: IRootState) => ({
-  currentSiteID: state.sites.currentSiteInfo.id,
+  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   languageData: state.languages.form,
 });
 
@@ -65,7 +69,7 @@ const mapDispatchToProps = {
 };
 
 interface IStateProps {
-  currentSiteID: number;
+  currentSiteID: number | null;
   languageData: ISiteLanguage;
 }
 

package/src/modules/Settings/Languages/Table/Header/index.tsx

@@ -4,8 +4,8 @@ import { connect } from "react-redux";
 import { useModal } from "@ax/hooks";
 import { languagesActions } from "@ax/containers/Settings";
 import { ILanguage } from "@ax/types";
-
 import { IconAction } from "@ax/components";
+import { Restricted } from "@ax/guards";
 import LanguagePanel from "../../LanguagePanel";
 
 import * as S from "./style";
@@ -27,7 +27,9 @@ const Header = (props: IProps): JSX.Element => {
   return (
     <S.Header>
       <S.Title>{title}</S.Title>
-      <IconAction icon="add" size="m" onClick={openModal} />
+      <Restricted to="general.createLanguages">
+        <IconAction icon="add" size="m" onClick={openModal} />
+      </Restricted>
       <LanguagePanel isOpen={isOpen} toggleModal={toggleModal} />
     </S.Header>
   );

package/src/modules/Settings/Languages/Table/Item/index.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import { useModal } from "@ax/hooks";
-import { ILanguage, ISiteLanguage, IRootState } from "@ax/types";
+import { useModal, usePermission } from "@ax/hooks";
+import { ILanguage, ISiteLanguage, IRootState, ISite } from "@ax/types";
 import { languagesActions } from "@ax/containers/Settings";
-
-import { Icon, IconAction, FloatingMenu, Flag } from "@ax/components";
+import { Flag } from "@ax/components";
 import LanguagePanel from "../../LanguagePanel";
 
 import * as S from "./style";
@@ -13,6 +12,14 @@ import * as S from "./style";
 const Item = (props: IItemProps): JSX.Element => {
   const { item, resetForm, setForm, deleteSiteLanguage, currentSiteInfo } = props;
 
+  if (!currentSiteInfo) {
+    throw new Error(`ERROR: User reached Site Languages with null site info`);
+  }
+
+  const { isOpen, toggleModal } = useModal();
+  const isAllowedToEdit = usePermission("general.editLanguage");
+  const isAllowedToDelete = usePermission("general.deleteLanguages");
+
   const siteLanguage: ISiteLanguage = {
     language: item.id,
     path: item.path,
@@ -20,48 +27,19 @@ const Item = (props: IItemProps): JSX.Element => {
     isDefault: item.isDefault,
   };
 
-  const MoreInfoButton = () => (
-    <S.IconWrapper>
-      <IconAction icon="more" />
-    </S.IconWrapper>
-  );
-
-  const ActionMenuOption = (option: any) => (
-    <S.ActionItem key={option.icon} onClick={option.action}>
-      <Icon name={option.icon} />
-      <S.ActionText>{option.label}</S.ActionText>
-    </S.ActionItem>
-  );
-
-  const ActionMenu = (menu: any) => (
-    <S.ActionMenu>{menu.map((option: any, i: number) => ActionMenuOption(option))}</S.ActionMenu>
-  );
+  const removeItemAction = () => deleteSiteLanguage(currentSiteInfo.id, item.id);
 
-  const deleteItem = (item: ILanguage) => {
-    deleteSiteLanguage(currentSiteInfo.id, item.id);
-  };
-
-  const removeItemAction = () => {
-    deleteItem(item);
-  };
-
-  const actionMenuOptions = [
+  const menuOptions = isAllowedToDelete ? [
     {
       label: "Delete",
       icon: "delete",
       action: removeItemAction,
     },
-  ];
+  ] : [];
 
-  const { isOpen, toggleModal } = useModal();
-
-  const resetValues = () => {
-    resetForm();
-  };
+  const resetValues = () => resetForm();
 
-  const setItem = (item: ISiteLanguage) => {
-    setForm(item);
-  };
+  const setItem = (item: ISiteLanguage) => setForm(item);
 
   const openModal = () => {
     resetValues();
@@ -71,15 +49,13 @@ const Item = (props: IItemProps): JSX.Element => {
 
   return (
     <>
-      <S.Component onClick={openModal}>
+      <S.Component onClick={openModal} disabled={!isAllowedToEdit}>
         <S.FlagWrapper>
           <Flag name={item.locale} />
         </S.FlagWrapper>
         {item.language}
         <S.Default>{item.isDefault ? "Default" : ""}</S.Default>
-        <FloatingMenu Button={MoreInfoButton}>
-          {ActionMenu(actionMenuOptions)}
-        </FloatingMenu>
+        <S.StyledActionMenu icon="more" options={menuOptions} />
       </S.Component>
       <LanguagePanel isOpen={isOpen} toggleModal={toggleModal} item={item} />
     </>
@@ -88,7 +64,7 @@ const Item = (props: IItemProps): JSX.Element => {
 
 interface IProps {
   item: ILanguage;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/modules/Settings/Languages/Table/Item/style.tsx

@@ -1,57 +1,11 @@
 import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
 
-export const IconWrapper = styled.div`
+const StyledActionMenu = styled(ActionMenu)`
   opacity: 0;
-  position: absolute;
-  top: ${(p) => p.theme.spacing.xs};
-  bottom: ${(p) => p.theme.spacing.xs};
-  right: 0;
-  width: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${(p) => p.theme.spacing.xs};
-`;
-
-export const ActionsWrapper = styled.div`
-  opacity: 0;
-  transition: opacity 0.1s;
-  text-align: right;
 `;
 
-export const ActionMenu = styled.ul`
-  padding: ${(p) => p.theme.spacing.s};
-`;
-
-export const ActionText = styled.span`
-  padding-left: ${(p) => p.theme.spacing.xs};
-  margin-left: ${(p) => p.theme.spacing.xxs};
-`;
-
-export const ActionItem = styled.li`
-  display: flex;
-  align-items: center;
-  ${(p) => p.theme.textStyle.uiM};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.iconMediumEmphasis};
-    }
-  }
-`;
-
-export const IconWrapperDrag = styled.div`
-  margin-right: ${(p) => p.theme.spacing.xxs};
-  ${(p) => p.theme.textStyle.uiXS};
-  opacity: 1;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.textLowEmphasis};
-    }
-  }
-`;
-
-export const Component = styled.span`
+const Component = styled.span<{ disabled: boolean }>`
   color: ${(p) => p.theme.color.textHighEmphasis};
   position: relative;
   display: flex;
@@ -67,29 +21,32 @@ export const Component = styled.span`
   ${(p) => p.theme.textStyle.fieldLabel};
   text-align: left;
   cursor: pointer;
+  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
 
   &:hover {
-    background: ${(p) => p.theme.color.overlayHoverPrimary};
-    ${IconWrapper} {
+    background: ${(p) => (p.disabled ? p.theme.color.uiBackground02 : p.theme.color.overlayHoverPrimary)};
+    ${StyledActionMenu} {
       opacity: 1;
     }
   }
 
   &:focus,
   &:active {
-    background: ${(p) => p.theme.color.overlayFocusPrimary};
+    background: ${(p) => (p.disabled ? p.theme.color.uiBackground02 : p.theme.color.overlayFocusPrimary)};
     border: 1px solid ${(p) => p.theme.color.interactive01};
     outline: none;
   }
 `;
 
-export const FlagWrapper = styled.div`
+const FlagWrapper = styled.div`
   margin-right: ${(p) => p.theme.spacing.xs};
 `;
 
-export const Default = styled.div`
+const Default = styled.div`
   ${(p) => p.theme.textStyle.uiM};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-left: auto;
   margin-right: ${(p) => p.theme.spacing.l};
 `;
+
+export { StyledActionMenu, Component, FlagWrapper, Default };

package/src/modules/Settings/Languages/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 
-import { INavItem, IRootState } from "@ax/types";
+import { INavItem, IRootState, ISite } from "@ax/types";
 import { sitesActions } from "@ax/containers/Sites";
 import { appActions } from "@ax/containers/App";
 import { MainWrapper, Loading, ErrorToast, Nav } from "@ax/components";
@@ -58,7 +58,7 @@ interface IDispatchProps {
 }
 
 interface ILanguagesProps {
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
   isLoading: boolean;
   navItems: INavItem[];
   currentNavItem: INavItem;

package/src/modules/Settings/SeoAnalyticsSettings/Analytics/index.tsx

@@ -68,7 +68,7 @@ const Analytics = (props: IProps): JSX.Element => {
         </S.AnalyticsWrapper>
       )}
     </>
-  )
+  );
 
   return (
     <>
@@ -76,9 +76,7 @@ const Analytics = (props: IProps): JSX.Element => {
       <MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
         <S.Wrapper>
           <Nav current={currentNavItem} items={navItems} onClick={setRoute} />
-          <S.ContentWrapper>
-            {isLoading ? <Loading /> : analyticsSettings}
-          </S.ContentWrapper>
+          <S.ContentWrapper>{isLoading ? <Loading /> : analyticsSettings}</S.ContentWrapper>
         </S.Wrapper>
       </MainWrapper>
     </>

package/src/modules/Settings/SeoAnalyticsSettings/index.tsx

@@ -9,11 +9,13 @@ const navItems = [
     title: "SEO",
     path: "/sites/settings/seo",
     component: Redirects,
+    permission: "seoAnalytics.manageAnalyticsSiteSettings",
   },
   {
     title: "Analytics",
     path: "/sites/settings/analytics",
-    component: Analytics
+    component: Analytics,
+    permission: "seoAnalytics.manageAnalyticsSiteSettings",
   },
 ];
 
@@ -26,7 +28,7 @@ const SeoAnalyticsSettings = (): JSX.Element => {
         </Route>
       ))}
     </Switch>
-  )
+  );
 };
 
 export default SeoAnalyticsSettings;

package/src/modules/Settings/Social/index.tsx

@@ -20,7 +20,7 @@ const Social = (props: IProps): JSX.Element => {
     { name: "instagram", title: "Instagram URL" },
     { name: "linkedIn", title: "LinkedIn URL" },
     { name: "facebook", title: "Facebook URL" },
-    { name: "twitter", title: "Twitter URL" },
+    { name: "twitter", title: "X/Twitter URL" },
     { name: "youtube", title: "YouTube URL" },
     { name: "flicker", title: "Flicker URL" },
     { name: "tiktok", title: "Tiktok URL" },