@griddo/ax 10.4.32 → 10.4.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.4.32",
+  "version": "10.4.34",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -232,5 +232,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "151e9f780f11806f31b75c6a7fe425548377feee"
+  "gitHead": "21a939f48088c711230a887664d83565dd7caa92"
 }

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/ConnectedField.test.tsx

@@ -96,6 +96,7 @@ const initialStore = {
         editorID: 1,
       },
     ],
+    themeElements: null,
   },
   app: {
     lang: { locale: "es-ES", id: 0 },

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/NavConnectedField/NavConnectedField.test.tsx

@@ -98,6 +98,7 @@ const initialStore = {
         editorID: 1,
       },
     ],
+    themeElements: null,
   },
   app: {
     lang: { locale: "es-ES", id: 0 },

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/PageConnectedField.test.tsx

@@ -52,6 +52,7 @@ const initialStore = {
         editorID: 1,
       },
     ],
+    themeElements: null,
   },
   app: {
     lang: { locale: "es-ES", id: 0 },
@@ -201,6 +202,7 @@ describe("PageConnectedField component rendering", () => {
             editorID: 1,
           },
         ],
+        themeElements: null,
       },
       app: {
         lang: { locale: "es-ES", id: 0 },
@@ -254,6 +256,7 @@ describe("PageConnectedField component rendering", () => {
             editorID: 1,
           },
         ],
+        themeElements: null,
       },
       app: {
         lang: { locale: "es-ES", id: 0 },
@@ -307,6 +310,7 @@ describe("PageConnectedField component rendering", () => {
             editorID: 1,
           },
         ],
+        themeElements: null,
       },
       app: {
         lang: { locale: "es-ES", id: 0 },
@@ -362,6 +366,7 @@ describe("PageConnectedField component rendering", () => {
             editorID: 1,
           },
         ],
+        themeElements: null,
       },
       app: {
         lang: { locale: "es-ES", id: 0 },

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/TemplateManager.test.tsx

@@ -72,6 +72,8 @@ const defaultProps = {
   theme: "griddo-alt-theme",
   moduleCopy: null,
   availableDataPacks: [],
+  activatedModules: [],
+  lang: 4,
 };
 
 const initialStore = {
@@ -112,6 +114,9 @@ const initialStore = {
     available: [],
     modules: [],
   },
+  sites: {
+    themeElements: null,
+  },
 };
 
 const store = mockStore(initialStore);

package/src/__tests__/components/ConfigPanel/Form/Form.test.tsx

@@ -98,6 +98,7 @@ const initialStore = {
         editorID: 1,
       },
     ],
+    themeElements: null,
   },
   app: {
     lang: { locale: "es-ES", id: 0 },

package/src/__tests__/components/ConfigPanel/GlobalPageForm/GlobalPageForm.test.tsx

@@ -52,6 +52,7 @@ const initialStore = {
     currentSiteInfo: {
       id: 1,
     },
+    themeElements: null,
   },
   app: {
     lang: { locale: "es-ES", id: 0 },

package/src/__tests__/components/ConfigPanel/Header/Header.test.tsx

@@ -10,10 +10,16 @@ import { parseTheme } from "@ax/helpers";
 import Header, { IHeaderProps } from "@ax/components/ConfigPanel/Header";
 import globalTheme from "@ax/themes/theme.json";
 
+window.scrollTo = jest.fn();
+
 beforeEach(() => {
   cleanup();
 });
 
+afterAll(() => {
+  jest.clearAllMocks();
+});
+
 const middlewares: any = [];
 const mockStore = configureStore(middlewares);
 const updateEditorContentMock = jest.fn();

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -5,7 +5,7 @@ import { FieldContainer } from "@ax/components";
 import { navigationActions } from "@ax/containers/Navigation";
 import { getInnerFields } from "@ax/forms";
 import { IRootState } from "@ax/types";
-import { areEqual } from "@ax/helpers";
+import { areEqual, filterThemeElements } from "@ax/helpers";
 
 const NavConnectedField = (props: any) => {
   const {
@@ -26,6 +26,7 @@ const NavConnectedField = (props: any) => {
     theme,
     disabled,
     moduleCopy,
+    themeElements,
   } = props;
 
   const updateValue = (key: string, value: any) => {
@@ -68,9 +69,11 @@ const NavConnectedField = (props: any) => {
     );
   }
 
+  const filteredWhiteList = whiteList ? filterThemeElements(themeElements, whiteList, "modules") : whiteList;
+
   return (
     <FieldContainer
-      whiteList={whiteList}
+      whiteList={filteredWhiteList}
       key={objKey}
       objKey={objKey}
       field={field}
@@ -99,6 +102,7 @@ const mapStateToProps = (state: IRootState) => ({
   activatedTemplates: state.dataPacks.templates,
   menus: state.menu.savedMenus,
   moduleCopy: state.navigation.moduleCopy,
+  themeElements: state.sites.themeElements,
 });
 
 const mapDispatchToProps = {

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IErrorItem, IRootState, ISchemaField, ISite } from "@ax/types";
-import { getModuleCategories } from "@ax/helpers";
+import { IDataPack, IErrorItem, IRootState, ISchemaField, ISite, IThemeElements } from "@ax/types";
+import { filterThemeElements, getModuleCategories } from "@ax/helpers";
 import Field from "../Field";
 
 import * as S from "./style";
@@ -29,6 +29,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     availableDataPacks,
     setHistoryPush,
     lang,
+    themeElements,
   } = props;
 
   const isConfig = selectedTab === "config";
@@ -60,10 +61,11 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     }, []);
 
     const mappedWhiteList: string[] = whiteList ? [...whiteList, ...addedModules].sort() : [...addedModules.sort()];
-    const categories = getModuleCategories(mappedWhiteList);
+    const filteredWhiteList = filterThemeElements(themeElements, mappedWhiteList, "modules");
+    const categories = getModuleCategories(filteredWhiteList);
 
     return {
-      whiteList: mappedWhiteList,
+      whiteList: filteredWhiteList,
       categories,
       key,
       fieldObjKey,
@@ -93,7 +95,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
               handleUpdate,
               error,
               readonly,
-              disabledField
+              disabledField,
             } = getFieldProps(templateField);
 
             return (
@@ -141,7 +143,7 @@ interface IProps {
   site?: ISite;
   activatedPacks: IDataPack[];
   disabled?: boolean;
-  activatedModules?: string[];
+  activatedModules: string[];
   isTemplateActivated: boolean;
   deleteError(error: IErrorItem): void;
   errors: IErrorItem[];
@@ -150,12 +152,13 @@ interface IProps {
   availableDataPacks: Record<string, any>[];
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   lang: number;
+  themeElements: IThemeElements | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   activatedPacks: state.dataPacks.activated,
-  activatedModules: state.dataPacks.modules,
   availableDataPacks: state.dataPacks.available,
+  themeElements: state.sites.themeElements,
 });
 
 export default connect(mapStateToProps)(TemplateManager);

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -1,7 +1,14 @@
 import React, { memo, useEffect } from "react";
 import { connect } from "react-redux";
 
-import { getTemplate, isModuleDisabled, slugify, areEqual } from "@ax/helpers";
+import {
+  getTemplate,
+  isModuleDisabled,
+  slugify,
+  areEqual,
+  filterThemeElements,
+  isTemplateExcludedFromTheme,
+} from "@ax/helpers";
 import { IRootState } from "@ax/types";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 
@@ -39,6 +46,7 @@ const PageConnectedField = (props: any) => {
     setHistoryPush,
     languages,
     isReadOnly,
+    themeElements,
   } = props;
 
   const isTemplate = field.type === "template";
@@ -51,9 +59,11 @@ const PageConnectedField = (props: any) => {
 
   let isTemplateActivated = true;
   if (selectedContent.template && !isGlobal) {
-    isTemplateActivated = activatedTemplates.find((temp: any) => temp.id === selectedContent.template.templateType)
-      ? true
-      : false;
+    isTemplateActivated =
+      activatedTemplates.find((temp: any) => temp.id === selectedContent.template.templateType) &&
+      !isTemplateExcludedFromTheme(themeElements, selectedContent.template.templateType)
+        ? true
+        : false;
   }
 
   const parentIsReadOnly =
@@ -72,10 +82,14 @@ const PageConnectedField = (props: any) => {
 
   const isFieldReadOnly = (["parent", "slug"].includes(objKey) && isPageHome) || parentIsReadOnly || field.readonly;
 
+  const filteredActivatedModules = filterThemeElements(themeElements, activatedModules, "modules");
+  const filteredWhiteList = whiteList ? filterThemeElements(themeElements, whiteList, "modules") : whiteList;
+
   const isDisabled =
     (!isGlobal &&
-      (isModuleDisabled(selectedContent.component, componentType, activatedModules) || !isTemplateActivated)) ||
-    isFieldReadOnly || field.disabled;
+      (isModuleDisabled(selectedContent.component, componentType, filteredActivatedModules) || !isTemplateActivated)) ||
+    isFieldReadOnly ||
+    field.disabled;
 
   const isMetaTitleModified = selectedContent.metaTitle && selectedContent.metaTitle !== selectedContent.title;
 
@@ -160,13 +174,14 @@ const PageConnectedField = (props: any) => {
         moduleCopy={moduleCopy}
         setHistoryPush={setHistoryPush}
         lang={lang.id}
+        activatedModules={filteredActivatedModules}
       />
     );
   }
 
   return (
     <Field
-      whiteList={whiteList}
+      whiteList={filteredWhiteList}
       objKey={objKey}
       field={field}
       selectedContent={selectedContent}
@@ -178,7 +193,7 @@ const PageConnectedField = (props: any) => {
       lang={lang.id}
       disabled={isDisabled}
       readonly={isFieldReadOnly}
-      activatedModules={activatedModules}
+      activatedModules={filteredActivatedModules}
       isTemplateActivated={isTemplateActivated}
       error={error}
       deleteError={deleteError}
@@ -207,6 +222,7 @@ const mapStateToProps = (state: IRootState) => ({
   availableDataPacks: state.dataPacks.available,
   template: state.pageEditor.template,
   languages: state.sites.currentSiteLanguages,
+  themeElements: state.sites.themeElements,
 });
 
 const mapDispatchToProps = {

package/src/components/ErrorToast/index.tsx

@@ -2,8 +2,8 @@ import React, { forwardRef } from "react";
 
 import * as S from "./style";
 
-const ErrorToast = (props: IProps) => {
-  return <S.ErrorWrapper id="error" data-testid="error-wrapper" {...props} />;
+const ErrorToast = (props: IProps, ref: any) => {
+  return <S.ErrorWrapper id="error" data-testid="error-wrapper" {...props} ref={ref} />;
 };
 
 export interface IProps {

package/src/containers/Settings/DataPacks/actions.tsx

@@ -1,6 +1,6 @@
 import { Dispatch } from "redux";
 
-import { handleRequest, sortBy } from "@ax/helpers";
+import { filterThemeDatapacks, handleRequest, sortBy } from "@ax/helpers";
 import { dataPack } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
@@ -25,7 +25,7 @@ import {
   ISetModules,
   ISetTemplates,
 } from "./interfaces";
-import { IDataPack, IDataPackCategory } from "@ax/types";
+import { IDataPack, IDataPackCategory, IRootState } from "@ax/types";
 import { dataPacksInitialState } from "./reducer";
 
 function setActivated(activated: any): ISetActivated {
@@ -258,19 +258,20 @@ function resetForm(): (dispatch: Dispatch) => void {
 
 function getAvailableSiteDataPacks(
   queryParams: string | null,
-  loading = true,
+  loading = true
 ): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const {
-        sites: { currentSiteInfo },
-      } = getState();
-      const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+        sites: { currentSiteInfo, themeElements },
+      }: IRootState = getState();
+
       const query = queryParams ? `?status=deactivated${queryParams}` : `?status=deactivated`;
 
       const handleSuccess = (data: any) => {
         const { items } = data;
-        dispatch(setAvailable(items));
+        const filteredDatapacks = filterThemeDatapacks(themeElements, items);
+        dispatch(setAvailable(filteredDatapacks));
       };
 
       const responseActions = {
@@ -278,7 +279,7 @@ function getAvailableSiteDataPacks(
         handleError: () => console.log("Error en getAvailableSiteDataPacks"),
       };
 
-      const callback = async () => dataPack.getSiteDataPack(currentSiteID, query);
+      const callback = async () => currentSiteInfo && dataPack.getSiteDataPack(currentSiteInfo.id, query);
 
       const setLoading = loading ? [appActions.setIsLoading] : [];
 

package/src/containers/Sites/actions.tsx

@@ -15,6 +15,7 @@ import {
   SET_CONTENT_FILTERS,
   SET_CONFIG,
   SET_CURRENT_SEARCH,
+  SET_THEME_ELEMENTS,
 } from "./constants";
 
 import {
@@ -32,6 +33,7 @@ import {
   ISetSitesTotalItems,
   ISetConfig,
   ISetCurrentSearch,
+  ISetThemeElements,
 } from "./interfaces";
 
 import {
@@ -43,6 +45,7 @@ import {
   IGetSitesParams,
   ISiteListConfig,
   IQueryValue,
+  IThemeElements,
 } from "@ax/types";
 import { sites, languages, dataPack, social, structuredData, analytics, pages } from "@ax/api";
 import { appActions } from "@ax/containers/App";
@@ -53,7 +56,7 @@ import { analyticsActions } from "@ax/containers/Analytics";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { socialActions } from "@ax/containers/Settings/Social";
 import { integrationsActions } from "@ax/containers/Integrations";
-import { getDefaultTheme, handleRequest, isReqOk, sortBy } from "@ax/helpers";
+import { getDefaultTheme, getThemeElements, handleRequest, isReqOk, sortBy } from "@ax/helpers";
 import { usersActions } from "@ax/containers/Users";
 
 const { setIsLoading, setIsSaving, setLanguage } = appActions;
@@ -119,6 +122,10 @@ function setCurrentSearch(currentSearch: string): ISetCurrentSearch {
   return { type: SET_CURRENT_SEARCH, payload: { currentSearch } };
 }
 
+function setThemeElements(themeElements: IThemeElements | null): ISetThemeElements {
+  return { type: SET_THEME_ELEMENTS, payload: { themeElements } };
+}
+
 // TODO: hay que controlar que cuando da error la API borrar los sites ya guardados y sacar el error (ver los siguientes FIXME)
 function getSites(params: IGetSitesParams = { recentSitesNumber: 7 }): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
@@ -192,7 +199,11 @@ function saveSettings(form: ISettingsForm): (dispatch: Dispatch, getState: any)
       const theme = getDefaultTheme();
 
       const responseActions = {
-        handleSuccess: (response: any) => setSiteInfo(response)(dispatch, getState),
+        handleSuccess: (response: ISite) => {
+          setSiteInfo(response)(dispatch, getState);
+          const themeElements = getThemeElements(response.theme) || null;
+          dispatch(setThemeElements(themeElements));
+        },
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
@@ -245,6 +256,9 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: any, getState: any) =>
       dispatch(setCurrentSiteInfo(currentSiteInfo));
       await getRoles({ siteId: currentSiteInfo.id }, undefined, false)(dispatch);
 
+      const themeElements = getThemeElements(currentSiteInfo.theme) || null;
+      dispatch(setThemeElements(themeElements));
+
       // get site languages
       const response: any = await languages.getSiteLanguages(currentSiteInfo.id);
       if (isReqOk(response.status)) {
@@ -486,6 +500,7 @@ function resetSiteValues(siteID: number): (dispatch: Dispatch) => void {
     dispatch(setTotalItems(0));
     getAnalytics(siteID)(dispatch);
     dispatch(setCurrentSearch(""));
+    dispatch(setThemeElements(null));
   };
 }
 

package/src/containers/Sites/constants.tsx

@@ -15,6 +15,7 @@ export const SET_CURRENT_SITE_ERROR_PAGES = `${NAME}/SET_CURRENT_SITE_ERROR_PAGE
 export const SET_CONTENT_FILTERS = `${NAME}/SET_CONTENT_FILTERS`;
 export const SET_CONFIG = `${NAME}/SET_CONFIG`;
 export const SET_CURRENT_SEARCH = `${NAME}/SET_CURRENT_SEARCH`;
+export const SET_THEME_ELEMENTS = `${NAME}/SET_THEME_ELEMENTS`;
 
 export const ITEMS_PER_PAGE = 50;
 

package/src/containers/Sites/interfaces.tsx

@@ -14,8 +14,9 @@ import {
   SET_SITES_TOTAL_ITEMS,
   SET_CONFIG,
   SET_CURRENT_SEARCH,
+  SET_THEME_ELEMENTS,
 } from "./constants";
-import { IQueryValue, ISite, ISiteListConfig } from "@ax/types";
+import { IQueryValue, ISite, ISiteListConfig, IThemeElements } from "@ax/types";
 
 export interface ISetFilter {
   type: typeof SET_FILTER;
@@ -92,4 +93,9 @@ export interface ISetCurrentSearch {
   payload: { currentSearch: string };
 }
 
+export interface ISetThemeElements {
+  type: typeof SET_THEME_ELEMENTS;
+  payload: { themeElements: IThemeElements | null };
+}
+
 export type SitesActionsCreators = ISetSitesAction & ISetCurrentSiteInfoAction;

package/src/containers/Sites/reducer.tsx

@@ -14,9 +14,10 @@ import {
   SET_CONTENT_FILTERS,
   SET_CONFIG,
   SET_CURRENT_SEARCH,
+  SET_THEME_ELEMENTS,
 } from "./constants";
 
-import { ISite, IPage, ILanguage, ISiteListConfig, IQueryValue } from "@ax/types";
+import { ISite, IPage, ILanguage, ISiteListConfig, IQueryValue, IThemeElements } from "@ax/types";
 
 import { SitesActionsCreators } from "./interfaces";
 
@@ -36,6 +37,7 @@ export interface ISitesState {
   contentFilters: Record<string, IQueryValue[]> | null;
   config: ISiteListConfig;
   currentSearch: string;
+  themeElements: IThemeElements | null;
 }
 
 const config = {
@@ -67,6 +69,7 @@ export const initialState = {
   contentFilters: null,
   config,
   currentSearch: "",
+  themeElements: null,
 };
 
 export function reducer(state = initialState, action: any): ISitesState {
@@ -86,6 +89,7 @@ export function reducer(state = initialState, action: any): ISitesState {
     case SET_CONTENT_FILTERS:
     case SET_CONFIG:
     case SET_CURRENT_SEARCH:
+    case SET_THEME_ELEMENTS:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/helpers/index.tsx

@@ -100,7 +100,14 @@ import { getActivatedDataPacksIds, isModuleDisabled, getDeactivatedModules } fro
 
 import { isDevelopment } from "./environment";
 
-import { getDefaultTheme } from "./themes";
+import {
+  getDefaultTheme,
+  getThemeElements,
+  filterThemeElements,
+  filterThemeTemplates,
+  filterThemeDatapacks,
+  isTemplateExcludedFromTheme,
+} from "./themes";
 
 import { parseTheme } from "./parseTheme";
 
@@ -183,6 +190,11 @@ export {
   splitAndJoin,
   splitAndTrim,
   getDefaultTheme,
+  getThemeElements,
+  filterThemeElements,
+  filterThemeTemplates,
+  filterThemeDatapacks,
+  isTemplateExcludedFromTheme,
   copyTextToClipboard,
   getNavigationModules,
   getDefaultNavigationModules,

package/src/helpers/themes.tsx

@@ -1,9 +1,88 @@
+import { IDataPack, IGriddoTheme, ITemplateOption, IThemeElements } from "@ax/types";
 import { themes } from "components";
 
 const getDefaultTheme = (): string => {
-  const defaultTheme = themes.find((theme: any) => theme.default);
+  const defaultTheme = (themes as IGriddoTheme[]).find((theme) => theme.default);
   const theme = defaultTheme ? defaultTheme.value : themes[0].value;
   return theme;
-}
+};
 
-export { getDefaultTheme }
+const getThemeElements = (theme: string): IThemeElements | undefined => {
+  return (themes as IGriddoTheme[]).find((griddoTheme) => griddoTheme.value === theme)?.elements;
+};
+
+const filterThemeElements = (
+  themeElements: IThemeElements | null,
+  elements: string[],
+  type: "modules" | "templates" | "datapacks"
+): string[] => {
+  if (themeElements === null) return elements;
+
+  const { exclude, include } = themeElements;
+
+  let filteredElements: string[] = elements;
+  if (exclude && Array.isArray(exclude[type])) {
+    filteredElements = elements.filter((element: string) => !exclude[type]?.includes(element));
+  } else if (include && Array.isArray(include[type])) {
+    filteredElements = elements.filter((element: string) => include[type]?.includes(element));
+  }
+
+  return filteredElements;
+};
+
+const filterThemeTemplates = (
+  themeElements: IThemeElements | null,
+  templates: ITemplateOption[]
+): ITemplateOption[] => {
+  if (themeElements === null) return templates;
+
+  const { exclude, include } = themeElements;
+
+  let filteredElements: ITemplateOption[] = templates;
+  if (exclude && Array.isArray(exclude.templates)) {
+    filteredElements = templates.filter((template) => !exclude.templates?.includes(template.value));
+  } else if (include && Array.isArray(include.templates)) {
+    filteredElements = templates.filter((template) => include.templates?.includes(template.value));
+  }
+
+  return filteredElements;
+};
+
+const filterThemeDatapacks = (themeElements: IThemeElements | null, datapacks: IDataPack[]): IDataPack[] => {
+  if (themeElements === null) return datapacks;
+
+  const { exclude, include } = themeElements;
+
+  let filteredElements: IDataPack[] = datapacks;
+  if (exclude && Array.isArray(exclude.datapacks)) {
+    filteredElements = datapacks.filter((datapack) => !exclude.datapacks?.includes(datapack.id));
+  } else if (include && Array.isArray(include.datapacks)) {
+    filteredElements = datapacks.filter((datapack) => include.datapacks?.includes(datapack.id));
+  }
+
+  return filteredElements;
+};
+
+const isTemplateExcludedFromTheme = (themeElements: IThemeElements | null, template: string): boolean => {
+  if (themeElements === null) return false;
+
+  const { exclude, include } = themeElements;
+
+  if (
+    (exclude && Array.isArray(exclude.templates) && exclude.templates.includes(template)) ||
+    (include && Array.isArray(include.templates) && !include.templates.includes(template))
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export {
+  getDefaultTheme,
+  getThemeElements,
+  filterThemeElements,
+  filterThemeTemplates,
+  filterThemeDatapacks,
+  isTemplateExcludedFromTheme,
+};

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

@@ -1,13 +1,13 @@
 import React, { useReducer, useEffect, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, IStructuredData } from "@ax/types";
-import { getThumbnailProps } from "@ax/helpers";
+import { IRootState, IStructuredData, ITemplateOption, IThemeElements } from "@ax/types";
+import { filterThemeTemplates, getThumbnailProps } from "@ax/helpers";
 import { MenuItem, RadioGroup } from "@ax/components";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { SecondaryActionButton, MainActionButton } from "./../atoms";
 
-import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelectedType, setOption } from "./store";
+import { reducer, IOptionTableStore, setColumnValues, setSelectedType, setOption } from "./store";
 
 import * as S from "./style";
 
@@ -23,12 +23,16 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     mainAction,
     secondaryAction,
     structuredData,
+    themeElements,
   } = props;
 
-  const filterOptions = (value: string, objKey: string) => values.filter((item: any) => item[objKey] === value);
+  const filteredValues = filterThemeTemplates(themeElements, values);
+
+  const filterOptions = (value: string, objKey: "value" | "type") =>
+    filteredValues.filter((item) => item[objKey] === value);
 
   const filterOptionsByDataPack = (value: string) => {
-    return values.filter((item: any) => {
+    return filteredValues.filter((item) => {
       return (
         item.editable !== false && (item.dataPacks ? item.dataPacks.includes(value.toUpperCase()) : item.type === value)
       );
@@ -47,11 +51,11 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  const selectOption = (option: any, currentOptions?: any) => {
+  const selectOption = (option: string, currentOptions?: ITemplateOption[]) => {
     const { columnValues } = state;
     const availableOptions = currentOptions ? currentOptions : columnValues;
 
-    const optionObj = availableOptions.find((item: any) => item.value === option);
+    const optionObj = availableOptions.find((item) => item.value === option);
     setSelectedOption(option);
     if (optionObj) {
       const { isData } = optionObj;
@@ -59,10 +63,10 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     }
   };
 
-  let filteredOptionsByDataPack: any = filterOptionsByDataPack(state.selectedType);
+  let filteredOptionsByDataPack = filterOptionsByDataPack(state.selectedType);
 
   useLayoutEffect(() => {
-    displayOptions({ value: state.selectedType });
+    displayOptions({ value: state.selectedType, label: state.selectedType });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -77,12 +81,11 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     isStructuredData ? selectData(value) : selectPage(value);
   };
 
-  const showThumbnail = (isDisplayed: boolean) => dispatch(setShowThumbnail(isDisplayed));
   const setType = (type: string) => dispatch(setSelectedType(type));
-  const setValues = (columns: any) => dispatch(setColumnValues(columns));
-  const setSelectedOption = (selectedOption: any) => dispatch(setOption({ selectedOption }));
+  const setValues = (columns: ITemplateOption[]) => dispatch(setColumnValues(columns));
+  const setSelectedOption = (selectedOption: string) => dispatch(setOption({ selectedOption }));
 
-  const isOptionInType = (column: any) => {
+  const isOptionInType = (column: ITemplateOption[]) => {
     const optionValues = filterOptions(state.selectedOption, "value");
     return column.includes(optionValues[0]);
   };
@@ -92,20 +95,19 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     isOptionInType(filteredOptionsByDataPack) &&
     getThumbnailProps(state.selectedOption, true, theme);
 
-  const displayOptions = (item: any) => {
+  const displayOptions = (item: IOptionFilter) => {
     const { value } = item;
+
     setType(value);
     filteredOptionsByDataPack = filterOptionsByDataPack(value);
-
-    filteredOptionsByDataPack.forEach((option: any) => {
+    filteredOptionsByDataPack.forEach((option) => {
       const { name } = option;
 
-      const currentGlobalStructuredData = structuredData.global.find((data: any) =>
-        data.schema.templates?.includes(name)
-      );
-      const currentLocalStructuredData = structuredData.site.find((data: any) => data.schema.templates?.includes(name));
+      const currentGlobalStructuredData = structuredData.global.find((data) => data.schema.templates?.includes(name));
+      const currentLocalStructuredData = structuredData.site.find((data) => data.schema.templates?.includes(name));
+
       if (currentGlobalStructuredData || currentLocalStructuredData) {
-        filteredOptionsByDataPack = filteredOptionsByDataPack.map((option: any) => {
+        filteredOptionsByDataPack = filteredOptionsByDataPack.map((option) => {
           if (option.mode !== "detail") return option;
           const optionType = option.type;
           const currentStructuredDataId = currentGlobalStructuredData?.id || currentLocalStructuredData?.id;
@@ -113,17 +115,17 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
             const title = currentGlobalStructuredData
               ? `Get ${currentGlobalStructuredData.title} from Global`
               : currentLocalStructuredData?.title;
-            return { ...option, title };
+            return { ...option, title: title || "" };
           }
           return option;
         });
-        const globalOptionIdx = filteredOptionsByDataPack.findIndex((option: any) => option.mode === "detail");
+        const globalOptionIdx = filteredOptionsByDataPack.findIndex((option) => option.mode === "detail");
         const globalOption = filteredOptionsByDataPack.splice(globalOptionIdx, 1);
         filteredOptionsByDataPack.push(...globalOption);
       }
     });
 
-    filteredOptionsByDataPack.sort((ele: any, comp: any) => {
+    filteredOptionsByDataPack.sort((ele, comp) => {
       // Use localeCompare to compare strings alphabetically
       return ele.title.localeCompare(comp.title);
     });
@@ -131,24 +133,21 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     setValues(filteredOptionsByDataPack);
     const firstOption = filteredOptionsByDataPack[0] && filteredOptionsByDataPack[0].value;
     selectOption(firstOption, filteredOptionsByDataPack);
-
-    const optionList = filterOptions(state.selectedOption, "value");
-    const displayThumbnail = optionList.type !== value;
-
-    showThumbnail(displayThumbnail);
   };
 
+  const handleChange = (value: string | boolean) => typeof value === "string" && selectOption(value);
+
   const hasThumbnail = state.showThumbnail && thumbnailProps && isOptionInType(filteredOptionsByDataPack);
 
   return (
     <S.Table>
       <S.LeftColumn>
-        {filters.map((item: any, i: number) => {
-          const displayFilteredOptions = () => state.selectedType !== item.type && displayOptions(item);
+        {filters.map((item, i: number) => {
+          const displayFilteredOptions = () => state.selectedType !== item.value && displayOptions(item);
           const isSelected = item.value === state.selectedType;
           const selectedClass = isSelected ? "selected" : "";
           return (
-            <MenuItem key={`${item.type}${i}`}>
+            <MenuItem key={`${item.value}${i}`}>
               <S.NavLink onClick={displayFilteredOptions} className={selectedClass}>
                 <S.Link active={isSelected}>{item.label}</S.Link>
               </S.NavLink>
@@ -157,7 +156,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
         })}
       </S.LeftColumn>
       <S.Column>
-        <RadioGroup options={state.columnValues} onChange={selectOption} value={state.selectedOption} name="" />
+        <RadioGroup options={state.columnValues} onChange={handleChange} value={state.selectedOption} name="" />
       </S.Column>
       <S.Column>
         {hasThumbnail && (
@@ -176,24 +175,34 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
 
 interface IAction {
   title: string;
-  onClick: any;
+  onClick: () => void;
+}
+
+interface IOptionFilter {
+  label: string;
+  value: string;
+  isData?: boolean;
+  special?: string;
+  mode?: string;
 }
 
 interface IOptionTableProps {
   selectData: (value: string) => void;
   selectPage: (value: string) => void;
   setIsStructuredData: (isActive: boolean) => void;
-  filters: any;
-  values: any;
+  filters: IOptionFilter[];
+  values: ITemplateOption[];
   selectedValue: string;
   theme: string;
   mainAction: IAction;
   secondaryAction: IAction;
   structuredData: { global: IStructuredData[]; site: IStructuredData[] };
+  themeElements: IThemeElements | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   structuredData: state.structuredData.structuredData,
+  themeElements: state.sites.themeElements,
 });
 
 const mapDispatchToProps = {

package/src/modules/Content/OptionTable/store.tsx

@@ -1,3 +1,4 @@
+import { ITemplateOption } from "@ax/types";
 
 const SET_COLUMN_VALUES = "SET_COLUMN_VALUES";
 const SET_SHOW_THUMBNAIL = "SET_SHOW_THUMBNAIL";
@@ -39,8 +40,8 @@ export function setOption(data: any) {
 }
 
 export interface IOptionTableStore {
-  columnValues: any;
+  columnValues: ITemplateOption[];
   showThumbnail: boolean;
   selectedOption: string;
-  selectedType: any;
-}
+  selectedType: string;
+}

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

@@ -2,11 +2,11 @@ import React, { useState } from "react";
 import { connect } from "react-redux";
 import { themes } from "components";
 
-import { IImage, INavItem, IRootState, ISettingsForm } from "@ax/types";
+import { IGriddoTheme, IImage, INavItem, IRootState, ISettingsForm } from "@ax/types";
 import { RouteLeavingGuard } from "@ax/guards";
-import { useShouldBeSaved } from "@ax/hooks";
+import { useModal, useShouldBeSaved } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
-import { FieldsBehavior, FieldGroup, MainWrapper, ErrorToast, Nav, Notification } from "@ax/components";
+import { FieldsBehavior, FieldGroup, MainWrapper, ErrorToast, Nav, Notification, Modal } from "@ax/components";
 import { sitesActions } from "@ax/containers/Sites";
 import { getNavigationModules } from "@ax/helpers";
 
@@ -18,6 +18,8 @@ const Globals = (props: IProps): JSX.Element => {
   const { isSaving, currentSiteInfo, saveSettings, setHistoryPush, navItems, currentNavItem } = props;
 
   const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
+  const [tempTheme, setTempTheme] = useState<string | undefined>();
+  const { isOpen, toggleModal } = useModal();
 
   const title = "General settings";
 
@@ -38,13 +40,26 @@ const Globals = (props: IProps): JSX.Element => {
 
   const setNameValue = (value: string) => setValue({ name: value });
   const setTimezoneValue = (value: string) => setValue({ timezone: value });
-  const setThemeValue = (value: string) => setValue({ theme: value });
+  const setThemeValue = (value: string) => {
+    const theme = (themes as IGriddoTheme[]).find((th) => th.value === value);
+    if (theme && theme.elements) {
+      setTempTheme(value);
+      toggleModal();
+    } else {
+      setValue({ theme: value });
+    }
+  };
   const setFaviconValue = (value: IImage) => setValue({ favicon: value.url ? value.url : null });
   const setSmallAvatarValue = (value: IImage) => setValue({ smallAvatar: value.url ? value.url : null });
   const setBigAvatarValue = (value: IImage) => setValue({ bigAvatar: value.url ? value.url : null });
   const setThumbnailValue = (value: IImage) => setValue({ thumbnail: value.url ? value.url : null });
   const setNavigationModulesValue = (value: any) => setValue({ navigationModules: value });
 
+  const handleChangeTheme = () => {
+    tempTheme && setValue({ theme: tempTheme });
+    toggleModal();
+  };
+
   const saveForm = async () => {
     const isSaved = await saveSettings(form);
     const isNavigationModulesChanging =
@@ -73,6 +88,9 @@ const Globals = (props: IProps): JSX.Element => {
   const closeNavigationNotification = () => setIsNavigationNotificationOpen(false);
   const goToNavigationModules = () => setHistoryPush("/sites/navigations/modules");
 
+  const mainDeleteAction = { title: "Understood", onClick: handleChangeTheme };
+  const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
+
   return (
     <>
       <RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
@@ -163,6 +181,21 @@ const Globals = (props: IProps): JSX.Element => {
             </S.FormWrapper>
           </S.ContentWrapper>
         </S.Wrapper>
+        <Modal
+          isOpen={isOpen}
+          hide={toggleModal}
+          title="Theme Change Warning"
+          secondaryAction={secondaryDeleteAction}
+          mainAction={mainDeleteAction}
+          size="S"
+        >
+          <S.ModalContent>
+            <p>
+              The selected theme has some restrictions. By switching to this theme,{" "}
+              <strong>you may lose access to some modules or templates.</strong>
+            </p>
+          </S.ModalContent>
+        </Modal>
       </MainWrapper>
     </>
   );

package/src/modules/Settings/Globals/style.tsx

@@ -17,4 +17,8 @@ const FormWrapper = styled.div`
   margin: ${(p) => `${p.theme.spacing.m} 0 0 ${p.theme.spacing.m}`};
 `;
 
-export { Wrapper, ContentWrapper, FormWrapper };
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export { Wrapper, ContentWrapper, FormWrapper, ModalContent };

package/src/types/index.tsx

@@ -983,6 +983,29 @@ export interface IBulkAction {
   action: () => void;
 }
 
+export interface IGriddoTheme {
+  label: string;
+  value: string;
+  default: boolean;
+  elements?: IThemeElements;
+}
+
+export interface IThemeElements {
+  include?: { datapacks?: string[]; templates?: string[]; modules?: string[] };
+  exclude?: { datapacks?: string[]; templates?: string[]; modules?: string[] };
+}
+
+export interface ITemplateOption {
+  dataPacks?: string[];
+  value: string;
+  name: string;
+  title: string;
+  type: string;
+  mode?: string;
+  editable?: boolean;
+  isData?: boolean;
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"