@griddo/ax 11.10.23 → 11.10.24

package/src/helpers/themes.tsx

@@ -1,17 +1,35 @@
-import { IDataPack, IGriddoTheme, ITemplateOption, IThemeElements } from "@ax/types";
-import { config } from "components";
 import { getSchema } from "@ax/helpers";
-
-const themes = config.schemas.config.themes;
+import { schemasService } from "@ax/services";
+import type { IDataPack, IGriddoTheme, ITemplateOption, IThemeElements } from "@ax/types";
 
 const getDefaultTheme = (): string => {
-	const defaultTheme = (themes as IGriddoTheme[]).find((theme) => theme.default);
-	const theme = defaultTheme ? defaultTheme.value : themes[0].value;
-	return theme;
+	if (!schemasService.isLoaded()) {
+		return "NON-THEME-SELECTED";
+	}
+
+	try {
+		const themes = schemasService.getSchemas().config.themes;
+		const defaultTheme = (themes as IGriddoTheme[]).find((theme) => theme.default);
+		const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+		return theme || "NON-THEME-SELECTED";
+	} catch (e) {
+		console.error(`[helpers/themes] getDefaultTheme failed to get schemas:`, e);
+		return "NON-THEME-SELECTED";
+	}
 };
 
 const getThemeElements = (theme: string): IThemeElements | undefined => {
-	return (themes as IGriddoTheme[]).find((griddoTheme) => griddoTheme.value === theme)?.elements;
+	if (!schemasService.isLoaded()) {
+		return { include: {}, exclude: {} };
+	}
+
+	try {
+		const themes = schemasService.getSchemas().config.themes;
+		return (themes as IGriddoTheme[]).find((griddoTheme) => griddoTheme.value === theme)?.elements;
+	} catch (e) {
+		console.error(`[helpers/themes] getThemeElements failed to get schemas:`, e);
+		return { include: {}, exclude: {} };
+	}
 };
 
 const filterThemeModules = (themeElements: IThemeElements | null, elements: string[]): string[] => {

package/src/hooks/index.tsx

@@ -7,9 +7,11 @@ import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
 import { useResizable } from "./resize";
 import { useGlobalPermission, usePermission } from "./users";
+import { useDefaultTheme, useSchemas, useSchemasUI, useThemes } from "./useSchemas";
 import { useWindowSize } from "./window";
 
 export {
+	useDefaultTheme,
 	useModal,
 	useHandleClickOutside,
 	useDebounce,
@@ -30,5 +32,8 @@ export {
 	useOnMessageReceivedFromIframe,
 	useOnMessageReceivedFromOutside,
 	useNetworkStatus,
+	useSchemas,
+	useSchemasUI,
+	useThemes,
 	type IBulkSelectedItems,
 };

package/src/hooks/useSchemas.ts

@@ -0,0 +1,151 @@
+/**
+ * Hooks para acceder a los schemas del sistema.
+ *
+ * Este módulo proporciona una serie de hooks personalizados que facilitan el acceso
+ * a los schemas de la instancia.
+ *
+ * Hooks disponibles:
+ * - useSchemas: Hook principal que carga y proporciona acceso a todos los schemas
+ * - useSchemasUI: Hook especializado para acceder solo a los schemas de UI (modules, components, templates)
+ * - useThemes: Hook para obtener la lista de themes disponibles
+ * - useDefaultTheme: Hook para obtener el theme por defecto configurado en la instancia
+ */
+
+import { useEffect, useMemo } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { loadSchemas } from "@ax/containers/App/actions";
+import { type ISchemas, type ISchemasConfig, type IUISchemas, schemasService } from "@ax/services";
+import type { IRootState } from "@ax/types";
+
+/**
+ * Hook para acceder a todos los schemas.
+ * Carga automáticamente los schemas si no están disponibles.
+ *
+ * @example
+ * const { schemas, isLoading, error } = useSchemas();
+ *
+ * if (isLoading) return <Loader />;
+ * if (error) return <Error message={error} />;
+ *
+ * const modules = schemas.ui.modules;
+ */
+const useSchemas = (): UseSchemasResult => {
+	const dispatch = useDispatch();
+	const { schemasLoading, schemasError } = useSelector((state: IRootState) => state.app);
+
+	// Este useEffect despacha la acción loadSchemas() para cargar los schemas
+	// globales si aún no están disponibles en el servicio.
+	useEffect(() => {
+		dispatch(loadSchemas());
+	}, [dispatch]);
+
+	let schemas: ISchemas | null = null;
+	const isLoaded = schemasService.isLoaded();
+
+	if (isLoaded) {
+		try {
+			schemas = schemasService.getSchemas();
+		} catch (e) {
+			console.error(`[useSchemas] isLoaded() returned true but getSchemas() failed:`, e);
+			schemas = null;
+		}
+	}
+
+	return {
+		schemas,
+		isLoading: schemasLoading,
+		error: schemasError,
+	};
+};
+
+/**
+ * Hook para acceder solo a los schemas de UI (modules, components, templates).
+ *
+ * @example
+ * const { schemas, isLoading } = useSchemasUI();
+ *
+ * if (isLoading || !schemas) return <Loader />;
+ *
+ * const moduleSchema = schemas.modules["BasicModule"];
+ */
+const useSchemasUI = (): UseSchemasUIResult => {
+	const { schemas, isLoading, error } = useSchemas();
+
+	return {
+		schemas: schemas?.ui ?? null,
+		isLoading,
+		error,
+	};
+};
+
+/**
+ * Hook para acceder a los themes disponibles.
+ *
+ * @example
+ * const { themes, isLoading } = useThemes();
+ *
+ * if (isLoading || !themes) return <Loader />;
+ *
+ * const defaultTheme = themes.find(t => t.default);
+ */
+const useThemes = (): UseThemesResult => {
+	const { schemas, isLoading, error } = useSchemas();
+
+	return {
+		themes: schemas?.config.themes ?? [],
+		isLoading,
+		error,
+	};
+};
+
+/**
+ * Hook para obtener el theme por defecto.
+ * Espera a que los schemas estén cargados antes de retornar el theme.
+ *
+ * @example
+ * const { defaultTheme, isLoading } = useDefaultTheme();
+ *
+ * if (isLoading) return <Loader />;
+ *
+ * // Usar defaultTheme
+ */
+const useDefaultTheme = (): { defaultTheme: string; isLoading: boolean; error: string | null } => {
+	const { schemas, isLoading, error } = useSchemas();
+
+	const defaultTheme = useMemo(() => {
+		if (!schemas) {
+			return "NON-THEME-SELECTED";
+		}
+
+		const themes = schemas.config.themes;
+		const defaultThemeObj = (themes as any[]).find((theme: any) => theme.default);
+		return defaultThemeObj ? defaultThemeObj.value : themes[0]?.value || "NON-THEME-SELECTED";
+	}, [schemas]);
+
+	return {
+		defaultTheme,
+		isLoading,
+		error,
+	};
+};
+
+interface UseSchemasResult {
+	schemas: ISchemas | null;
+	isLoading: boolean;
+	error: string | null;
+}
+
+interface UseSchemasUIResult {
+	schemas: IUISchemas | null;
+	isLoading: boolean;
+	error: string | null;
+}
+
+interface UseThemesResult {
+	themes: ISchemasConfig["themes"] | [];
+	isLoading: boolean;
+	error: string | null;
+}
+
+export { useSchemas, useSchemasUI, useThemes, useDefaultTheme };

package/src/locales/en-US.ts

@@ -15,6 +15,7 @@ export const enUS = {
 		search: "Search",
 		noResults: "No results found",
 		copyUrl: "Copy URL",
+		filterByPageType: "Filter by page type",
 	},
 	fields: {
 		tags: {

package/src/locales/es-ES.ts

@@ -15,6 +15,7 @@ export const esES = {
 		search: "Buscar",
 		noResults: "No se encontraron resultados",
 		copyUrl: "Copiar URL",
+		filterByPageType: "Filtrar por tipo de página",
 	},
 	fields: {
 		tags: {

package/src/modules/Analytics/GroupPanel/index.tsx

@@ -1,12 +1,14 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
-import { IDimension, IDimensionsGroup } from "@ax/types";
-import { FloatingPanel, Button, FieldsBehavior, CheckGroup, RadioGroup } from "@ax/components";
+import { Button, CheckGroup, FieldsBehavior, FloatingPanel, RadioGroup } from "@ax/components";
 import { splitAndTrim } from "@ax/helpers";
+import { useSchemasUI } from "@ax/hooks";
+import type { IDimension, IDimensionsGroup } from "@ax/types";
 
-import * as S from "./style";
 import { getTemplateOptions } from "./utils";
 
+import * as S from "./style";
+
 const GroupPanel = (props: IProps): JSX.Element => {
 	const { isOpen, toggleModal, item, setGroupItem, dimensions } = props;
 
@@ -16,7 +18,8 @@ const GroupPanel = (props: IProps): JSX.Element => {
 	const [hasTemplate, setHasTemplate] = useState(false);
 	const [errors, setErrors] = useState({ name: false });
 
-	const templates = getTemplateOptions();
+	const { schemas } = useSchemasUI();
+	const templates = getTemplateOptions(schemas);
 	const resetState = () => {
 		setName(item?.name || "");
 		setErrors({ name: false });
@@ -89,7 +92,7 @@ const GroupPanel = (props: IProps): JSX.Element => {
 			value: name,
 			title: name,
 		};
-		return dimensionOptions.push(option);
+		dimensionOptions.push(option);
 	});
 
 	const setDimensions = (selection: any) => {

package/src/modules/Analytics/GroupPanel/utils.tsx

@@ -1,31 +1,15 @@
-import { config } from "components";
-
-const schemas = config.schemas.ui;
-
-const getTemplateOptions = (): ITemplateOption[] => {
-	const { templates } = schemas;
-	const templatesOptionsValues: ITemplateOption[] = [];
-
-	Object.keys(templates).forEach((schema: string) => {
-		const currSchema = templates[schema];
-		const { component, displayName } = currSchema;
-
-		!!currSchema.type &&
-			["list", "detail"].includes(currSchema.type.mode) &&
-			templatesOptionsValues.push({
-				name: component,
-				title: displayName,
-				value: component,
-			});
-	});
-
-	return templatesOptionsValues;
+import type { IUISchemas } from "@ax/services";
+
+const getTemplateOptions = (schemas: IUISchemas | null) => {
+	if (!schemas) return [];
+
+	return Object.values(schemas.templates)
+		.filter((template) => template.type?.mode && ["list", "detail"].includes(template.type.mode))
+		.map(({ component, displayName }) => ({
+			name: component,
+			title: displayName,
+			value: component,
+		}));
 };
 
-interface ITemplateOption {
-	name: string;
-	title: string;
-	value: string;
-}
-
 export { getTemplateOptions };

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

@@ -1,44 +1,42 @@
 import React, { useRef, useState } from "react";
 import { connect } from "react-redux";
-import { config } from "components";
-import { useTheme } from "styled-components";
 
-import { useAdaptiveText, useModal, usePermission } from "@ax/hooks";
-import { getHumanLastModifiedDate, getScheduleFormatDate, getTemplateDisplayName, slugify } from "@ax/helpers";
-import {
-	IPage,
-	ISite,
-	ISavePageParams,
-	ICheck,
-	IColumn,
-	IPageLanguage,
-	IDataPack,
-	ILanguage,
-	ISchemaField,
-	IRootState,
-} from "@ax/types";
-import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import {
+	CategoryCell,
 	CheckField,
+	ErrorToast,
 	FieldsBehavior,
+	Flag,
 	FloatingMenu,
 	Icon,
-	Flag,
 	LanguageMenu,
 	Modal,
 	Tag,
 	Tooltip,
-	CategoryCell,
-	ErrorToast,
 } from "@ax/components";
-import { pageEditorActions } from "@ax/containers/PageEditor";
 import { appActions } from "@ax/containers/App";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { type ISetCurrentPageIDAction, pageStatus } from "@ax/containers/PageEditor/interfaces";
+import { getHumanLastModifiedDate, getScheduleFormatDate, getTemplateDisplayName, slugify } from "@ax/helpers";
+import { useAdaptiveText, useModal, usePermission, useSchemasUI } from "@ax/hooks";
+import type {
+	ICheck,
+	IColumn,
+	IDataPack,
+	ILanguage,
+	IPage,
+	IPageLanguage,
+	IRootState,
+	ISavePageParams,
+	ISchemaField,
+	ISite,
+} from "@ax/types";
 
-import { DeleteModal, CopyModal } from "../atoms";
+import { useTheme } from "styled-components";
 
-import * as S from "./style";
+import { CopyModal, DeleteModal } from "../atoms";
 
-const schemas = config.schemas.ui;
+import * as S from "./style";
 
 const PageItem = (props: IPageItemProps): JSX.Element => {
 	const {
@@ -93,6 +91,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	} = page;
 
 	const displayName = getTemplateDisplayName(templateId);
+	const { schemas } = useSchemasUI();
 
 	const initValue = { title: "", slug: "" };
 	const [site, setSite] = useState(null);
@@ -118,7 +117,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	const isAllowedToDeletePublishedPage = usePermission("content.deletePublishedPages");
 	const isAllowedToEditContentPage = usePermission("content.editContentPages");
 
-	const currentTemplateDataPacks = schemas.templates[templateId].dataPacks;
+	const currentTemplateDataPacks = schemas?.templates[templateId].dataPacks;
 
 	const isCopyable = !currentTemplateDataPacks;
 	const isGlobal = origin === "GLOBAL";
@@ -265,15 +264,13 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	const getCurrentPageLanguages = () => {
 		const languages: ILanguage[] = [];
 
-		pageLanguages.forEach(
-			(pageLang: IPageLanguage) =>
-				siteLanguages &&
-				siteLanguages.forEach((siteLang) => {
-					if (siteLang.id === pageLang.languageId) {
-						languages.push(siteLang);
-					}
-				}),
-		);
+		pageLanguages.forEach((pageLang) => {
+			siteLanguages?.forEach((siteLang) => {
+				if (siteLang.id === pageLang.languageId) {
+					languages.push(siteLang);
+				}
+			});
+		});
 
 		return languages;
 	};
@@ -313,7 +310,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
 	if (!isTemplateActivated || isGlobal || !isAllowedToCreatePages) {
 		const pageLanguagesIDs = pageLanguages.map((language: IPageLanguage) => language.languageId);
-		availableLanguages = siteLanguages && siteLanguages.filter((language) => pageLanguagesIDs.includes(language.id));
+		availableLanguages = siteLanguages?.filter((language) => pageLanguagesIDs.includes(language.id));
 	}
 
 	const languageMenu = () => (
@@ -495,7 +492,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 			return <React.Fragment key={col.key} />;
 		}
 
-		const type: any = structuredDataContent && structuredDataContent[col.key];
+		const type: any = structuredDataContent?.[col.key];
 
 		if (typeof type !== "object") {
 			return (

package/src/modules/Content/index.tsx

@@ -2,10 +2,6 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react
 import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 
-import { config } from "components";
-
-const schemas = config.schemas.ui;
-
 import {
 	EmptyState,
 	ErrorToast,
@@ -18,23 +14,31 @@ import {
 	Toast,
 } from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { IError } from "@ax/containers/App/reducer";
+import type { IError } from "@ax/containers/App/reducer";
 import { integrationsActions } from "@ax/containers/Integrations";
 import { navigationActions } from "@ax/containers/Navigation/Defaults";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { INITIAL_TEMPLATE } from "@ax/containers/PageEditor/constants";
 import {
-	ISetCurrentPageIDAction,
-	ISetCurrentPageNameAction,
-	ISetCurrentPageStatusAction,
+	type ISetCurrentPageIDAction,
+	type ISetCurrentPageNameAction,
+	type ISetCurrentPageStatusAction,
 	pageStatus,
 } from "@ax/containers/PageEditor/interfaces";
 import { dataPacksActions } from "@ax/containers/Settings";
 import { sitesActions } from "@ax/containers/Sites";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { getMaxColumns, isGlobalStructuredData, isStructuredDataFromPage, updateColumns } from "@ax/helpers";
-import { useBulkSelection, useCategoryColors, useModal, usePermission, useToast, useWindowSize } from "@ax/hooks";
 import {
+	useBulkSelection,
+	useCategoryColors,
+	useModal,
+	usePermission,
+	useSchemasUI,
+	useToast,
+	useWindowSize,
+} from "@ax/hooks";
+import type {
 	ICheck,
 	IDataPack,
 	IEmptyStateProps,
@@ -64,7 +68,6 @@ import { useFilterQuery, useSortedListStatus } from "./hooks";
 import OptionTable from "./OptionTable";
 import PageImporter from "./PageImporter";
 import PageItem from "./PageItem";
-import * as S from "./style";
 import {
 	filterByStatus,
 	getColumns,
@@ -74,6 +77,8 @@ import {
 	getSortedListStatus,
 } from "./utils";
 
+import * as S from "./style";
+
 // TODO: Make this monster manageable
 const Content = (props: IProps): JSX.Element => {
 	const {
@@ -169,23 +174,22 @@ const Content = (props: IProps): JSX.Element => {
 	const baseFilters = ["unique-pages", "basic", "list", "static"];
 	const isStructuredData = !baseFilters.includes(filter) && !checkFromPage;
 	const isGlobalPages = !baseFilters.includes(filter) && checkFromPage;
-	const isDataEditable = !isStructuredData || (currentStructuredData && currentStructuredData.editable);
+	const isDataEditable = (!isStructuredData || currentStructuredData?.editable) ?? null;
 	const isDataPrivate = currentStructuredData?.private || false;
 	const isDataExportable = currentStructuredData?.exportable || false;
 
-	const pagesIds = currentSitePages && currentSitePages.map((page: any) => page.id);
-	const dataIds = currentDataContent && currentDataContent.map((data: any) => data.id);
+	const pagesIds = currentSitePages?.map((page) => page.id);
+	const dataIds = currentDataContent?.map((data) => data.id);
 	const contentIds = isStructuredData ? dataIds : pagesIds;
-	const currentSitePagesTemplatesIds = allSitePages && allSitePages.map((page: any) => page.templateId);
+	const currentSitePagesTemplatesIds = allSitePages?.map((page) => page.templateId);
 	const currentSitesByLang = sitesByLang?.filter(
 		(site: ISite) =>
 			user?.isSuperAdmin ||
 			user?.roles.find((siteRole: ISiteRoles) => siteRole.siteId === site.id || siteRole.siteId === "all"),
 	);
-	const categoryColumns: ISchemaField[] =
-		currentStructuredData && currentStructuredData.schema
-			? currentStructuredData.schema.fields.filter((field: ISchemaField) => field.showList)
-			: [];
+	const categoryColumns: ISchemaField[] = currentStructuredData?.schema
+		? currentStructuredData.schema.fields.filter((field: ISchemaField) => field.showList)
+		: [];
 
 	const [page, setPage] = useState(firstPage);
 	const lastPage = Math.ceil(totalItems / itemsPerPage);
@@ -369,7 +373,7 @@ const Content = (props: IProps): JSX.Element => {
 	}, [filterValues]);
 
 	useEffect(() => {
-		const errorCode = (error && error.code) || undefined;
+		const errorCode = error?.code ?? undefined;
 		if (errorCode === 400 && errorRef.current) {
 			errorRef.current.scrollIntoView({
 				behavior: "smooth",
@@ -418,11 +422,11 @@ const Content = (props: IProps): JSX.Element => {
 
 	const addNewPage = () => {
 		const selectedTemplate = schemas?.templates[template];
-		const { singleInstance, displayName } = selectedTemplate;
+		const { singleInstance, displayName } = selectedTemplate || {};
 		const isAlreadyActive = currentSitePagesTemplatesIds.includes(template);
 
 		if (singleInstance && isAlreadyActive) {
-			setTemplateInstanceError({ error: true, templateName: displayName });
+			setTemplateInstanceError({ error: true, templateName: displayName || "" });
 			toggleNewModal();
 		} else {
 			setTemplateInstanceError({ error: false, templateName: "" });
@@ -599,7 +603,7 @@ const Content = (props: IProps): JSX.Element => {
 
 	const goToData = (item: any) => {
 		const isFromPage = !!item.relatedPage;
-		let path;
+		let path: string;
 
 		if (isFromPage) {
 			setCurrentPageID(item.relatedPage.pageId);
@@ -613,8 +617,7 @@ const Content = (props: IProps): JSX.Element => {
 	};
 
 	const mapStructuredData = () =>
-		currentDataContent &&
-		currentDataContent.map((item: any) => {
+		currentDataContent?.map((item) => {
 			const handleClick = () => goToData(item);
 			const isItemSelected = isSelected(item.id);
 			return (
@@ -639,12 +642,13 @@ const Content = (props: IProps): JSX.Element => {
 			);
 		});
 
+	const { schemas } = useSchemasUI();
+
 	const mapPages = () =>
-		currentSitePages &&
-		currentSitePages.map((pageItem: IPage) => {
+		currentSitePages?.map((pageItem) => {
 			const isItemSelected = isSelected(pageItem.id);
 			const selectedTemplate = schemas?.templates[pageItem.templateId];
-			const { singleInstance } = selectedTemplate;
+			const { singleInstance } = selectedTemplate || {};
 			const isAlreadyActive = currentSitePagesTemplatesIds.includes(template);
 			const isDuplicable = !singleInstance || (singleInstance && !isAlreadyActive);
 
@@ -753,8 +757,8 @@ const Content = (props: IProps): JSX.Element => {
 	const title = currentSiteInfo ? currentSiteInfo.name : `Site Content`;
 
 	const options = {
-		filters: getOptionFilters(structuredData, activatedDataPacks),
-		values: getOptionValues(structuredData),
+		filters: getOptionFilters(structuredData, activatedDataPacks, schemas),
+		values: getOptionValues(structuredData, schemas),
 	};
 
 	const selectedOption = isStructuredData ? filter : template;
@@ -769,7 +773,7 @@ const Content = (props: IProps): JSX.Element => {
 	const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
 	const selectedOptionObject = options.values.find((option) => option.value === selectedOption);
-	const selectedOptionType = selectedOptionObject.type.toUpperCase();
+	const selectedOptionType = selectedOptionObject?.type.toUpperCase();
 	const isOptionGlobal = selectedOptionType !== "STATIC" && isGlobalStructuredData(selectedOptionType);
 	const isOptionImportable =
 		!isData && isOptionGlobal && isStructuredDataFromPage(selectedOptionType) && selectedOptionObject.mode === "detail";

package/src/modules/Content/utils.tsx

@@ -1,11 +1,9 @@
-import { config } from "components";
-import { arrayInsert, getActivatedDataPacksIds } from "@ax/helpers";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
-import { IColumn, IDataPack, IPage, ISchemaField, IStructuredData } from "@ax/types";
-
-const schemas = config.schemas.ui;
+import { arrayInsert, getActivatedDataPacksIds } from "@ax/helpers";
+import type { IUISchemas } from "@ax/services";
+import type { IColumn, IDataPack, IPage, ISchemaField, IStructuredData } from "@ax/types";
 
-const getTemplatesFilters = (activatedDataPacks: IDataPack[]) => {
+const getTemplatesFilters = (activatedDataPacks: IDataPack[], schemas: IUISchemas) => {
 	const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
 	const { templates } = schemas;
 
@@ -61,15 +59,17 @@ const mapStructuredOptions = (options: any[]) => {
 	});
 };
 
-const getOptionValues = (options: IStructuredData[]) => {
+const getOptionValues = (options: IStructuredData[], schemas: IUISchemas | null) => {
 	const templatesOptionsValues: any = [];
-	const { templates } = schemas;
+	const { templates } = schemas || {};
+
+	if (!templates) return [];
 
 	Object.keys(templates).forEach((schema: any) => {
 		const currSchema = templates[schema];
 		const { component, displayName, dataPacks } = currSchema;
-		const type = currSchema.type && currSchema.type.value && currSchema.type.value.toLowerCase();
-		const mode = currSchema.type && currSchema.type.mode;
+		const type = currSchema.type?.value?.toLowerCase();
+		const mode = currSchema.type?.mode;
 
 		!!currSchema.type &&
 			templatesOptionsValues.push({
@@ -85,9 +85,11 @@ const getOptionValues = (options: IStructuredData[]) => {
 	return [...templatesOptionsValues, ...mapStructuredOptions(options)];
 };
 
-const getOptionFilters = (options: IStructuredData[], activatedDataPacks: IDataPack[]) => {
+const getOptionFilters = (options: IStructuredData[], activatedDataPacks: IDataPack[], schemas: IUISchemas | null) => {
+	if (!schemas) return [];
+
 	const pureOptions = options.filter((option: IStructuredData) => !option.fromPage);
-	const { staticFilters, dataPackFilters } = getTemplatesFilters(activatedDataPacks);
+	const { staticFilters, dataPackFilters } = getTemplatesFilters(activatedDataPacks, schemas);
 	const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
 
 	const mappedOptions = pureOptions.flatMap((option: IStructuredData) =>
@@ -102,6 +104,8 @@ const getOptionFilters = (options: IStructuredData[], activatedDataPacks: IDataP
 						value: currentDataPack.id,
 						isData: true,
 					};
+
+					// biome-ignore lint/performance/noAccumulatingSpread: TODO: fix this
 					return [...acc, option];
 				}
 			}