@griddo/ax 11.10.23 → 11.10.24

package/src/modules/StructuredData/StructuredDataList/index.tsx

@@ -26,7 +26,15 @@ import {
 import { sitesActions } from "@ax/containers/Sites";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { getMaxColumns, 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,
 	IColumn,
@@ -53,7 +61,6 @@ import GlobalPageItem from "./GlobalPageItem";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import OptionTable from "./OptionTable";
 import StructuredDataItem from "./StructuredDataItem";
-import * as S from "./style";
 import {
 	filterByStatus,
 	getAllLangPagesIds,
@@ -64,6 +71,8 @@ import {
 	getSortedListStatus,
 } from "./utils";
 
+import * as S from "./style";
+
 const StructuredDataList = (props: IProps): JSX.Element => {
 	const {
 		setHistoryPush,
@@ -160,7 +169,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	const scope = currentSiteID ? "site" : "global";
 
 	const isDataEditable = filter === "all-pages" || !currentStructuredData || currentStructuredData.editable;
-	const isDataTranslatable = currentStructuredData && currentStructuredData.translate;
+	const isDataTranslatable = currentStructuredData?.translate;
 	const isAllPages = filter === "all-pages";
 	const isStructuredDataFromPage = !!currentStructuredData?.fromPage || isAllPages;
 	const isDataExportable = currentStructuredData?.exportable || false;
@@ -171,10 +180,9 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	const [windowWidth] = useWindowSize();
 	const maxColumns = getMaxColumns(windowWidth, !isStructuredDataFromPage);
 
-	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 type = currentStructuredData ? currentStructuredData.id : "all";
 	const columns = getColumns(categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns.value);
@@ -216,6 +224,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 		[getParams, getStructuredDataContents],
 	);
 
+	const { schemas } = useSchemasUI();
+
 	const handleGetGlobalPages = async () => {
 		const params: IGetGlobalPagesParams = getParams();
 		params.filterStructuredData = isStructuredDataFromPage && !isAllPages && filter;
@@ -472,7 +482,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 				}
 			: undefined;
 
-	const currentDataColumnsState = currentStructuredData ? columnsState[structuredDataType] || [] : columnsState["all"];
+	const currentDataColumnsState = currentStructuredData ? columnsState[structuredDataType] || [] : columnsState.all;
 
 	const TableHeader = (
 		<BulkHeader
@@ -530,7 +540,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
 	const options: { filters: IStructuredDataFilter[]; values: IStructuredDataValue[] } = {
 		filters: getOptionFilters(structuredData),
-		values: getOptionValues(structuredData),
+		values: getOptionValues(structuredData, schemas),
 	};
 
 	const notEditableText =
@@ -557,8 +567,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	const selectedValue = getSelectedValue(options, filter);
 
 	const mapCurrentDataContent = () =>
-		currentDataContent &&
-		currentDataContent.map((sData: IStructuredDataContent) => {
+		currentDataContent?.map((sData: IStructuredDataContent) => {
 			const isItemSelected = isSelected(sData.id);
 			return (
 				<StructuredDataItem
@@ -583,8 +592,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 		});
 
 	const mapGlobalPages = () =>
-		currentSitePages &&
-		currentSitePages.map((globalPage: IPage) => {
+		currentSitePages?.map((globalPage: IPage) => {
 			const isItemSelected = isSelected(globalPage.id);
 			const relatedStructuredData = structuredData.global.find(
 				(data: IStructuredData) => data.id === globalPage.structuredData,
@@ -738,7 +746,7 @@ const mapStateToProps = (state: IRootState) => ({
 	totalItems: state.sites.totalItems,
 	lang: state.app.lang,
 	globalLangs: state.app.globalLangs,
-	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+	currentSiteID: state.sites.currentSiteInfo?.id || null,
 	activatedDataPacks: state.dataPacks.activated,
 	isLoading: state.app.isLoading,
 	template: state.pageEditor.template,

package/src/modules/StructuredData/StructuredDataList/utils.tsx

@@ -1,6 +1,7 @@
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { arrayInsert } from "@ax/helpers";
 import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IUISchemas } from "@ax/services";
 import type {
 	IColumn,
 	IPage,
@@ -11,11 +12,6 @@ import type {
 	IStructuredDataValue,
 } from "@ax/types";
 
-import { config } from "components";
-
-const schemas = config.schemas.ui;
-const { templates } = schemas;
-
 const getOptionFilters = (options: { global: IStructuredData[]; site: IStructuredData[] }): IStructuredDataFilter[] => {
 	const pageOptions = options.global.filter((option: IStructuredData) => option.fromPage);
 
@@ -52,8 +48,14 @@ const mapStructuredOptions = (options: { global: IStructuredData[]; site: IStruc
 	});
 };
 
-const getOptionValues = (options: { global: IStructuredData[]; site: IStructuredData[] }): IStructuredDataValue[] => {
+const getOptionValues = (
+	options: { global: IStructuredData[]; site: IStructuredData[] },
+	schemas: IUISchemas | null,
+): IStructuredDataValue[] => {
 	const templatesOptionsValues: IStructuredDataValue[] = [];
+	const { templates } = schemas || {};
+
+	if (!templates) return [];
 
 	Object.keys(templates).forEach((schema: string) => {
 		const currSchema = templates[schema];
@@ -67,7 +69,7 @@ const getOptionValues = (options: { global: IStructuredData[]; site: IStructured
 			isDetailTemplate &&
 			templatesOptionsValues.push({
 				name: component,
-				title: displayName,
+				title: displayName || "",
 				type,
 				value: component,
 			});
@@ -143,6 +145,8 @@ const getAllLangPagesIds = (
 		const selectedPages = currentSitePages.filter((page: IPage) => selectedItems.all.includes(page.id));
 		langsPagesIds = selectedPages.reduce((ids: number[], page: IPage) => {
 			const langsPageIds = page.pageLanguages.map((lang: IPageLanguage) => lang.pageId);
+
+			// biome-ignore lint/performance/noAccumulatingSpread: TODO: fix this
 			return [...ids, ...langsPageIds];
 		}, []);
 	}
@@ -167,10 +171,7 @@ const getColumns = (
 	}
 
 	if (isStructuredDataFromPage) {
-		defaultColumns = [
-			{ id: "site", title: "Site", show: isAllPages ? false : true, default: isAllPages ? false : true },
-			...defaultColumns,
-		];
+		defaultColumns = [{ id: "site", title: "Site", show: !isAllPages, default: !isAllPages }, ...defaultColumns];
 	}
 
 	if (isAllPages) {

package/src/schemas/index.tsx

@@ -1,7 +1,8 @@
-import pageSchemas from "./pages";
+import getPageSchemas from "./pages";
 
-const fixedSchemas = {
-	...pageSchemas,
+const getFixedSchemas = () => {
+	const pageSchemas = getPageSchemas();
+	return { ...pageSchemas };
 };
 
-export { fixedSchemas, pageSchemas };
+export { getFixedSchemas, getPageSchemas };

package/src/schemas/pages/Page.ts

@@ -0,0 +1,308 @@
+import { schemasService } from "@ax/services";
+
+const getThemes = () => {
+	if (!schemasService.isLoaded()) {
+		return [];
+	}
+	return schemasService.getSchemas().config.themes;
+};
+
+export default () => {
+	const themes = getThemes();
+
+	return {
+		schemaType: "page",
+		displayName: "Page",
+		component: "Page",
+		dataPacks: null,
+		configTabs: [
+			{
+				title: "content",
+				fields: [
+					{
+						title: "",
+						type: "TranslateButton",
+						key: "translate",
+						contentType: "page",
+					},
+					{
+						title: "Title",
+						type: "TextField",
+						key: "title",
+						autoComplete: "false",
+					},
+					{
+						title: "Template",
+						key: "template",
+						type: "template",
+					},
+				],
+			},
+			{
+				title: "config",
+				fields: [
+					{
+						type: "UniqueCheck",
+						key: "isHome",
+						options: [
+							{
+								title: "Set as home",
+							},
+						],
+					},
+					{
+						title: "Parent",
+						type: "AsyncSelect",
+						entity: "pages",
+						key: "parent",
+						options: { excludeDetailPages: true },
+					},
+					{
+						title: "Slug",
+						type: "TextField",
+						key: "slug",
+					},
+					{
+						title: "Template",
+						key: "template",
+						type: "template",
+					},
+					{
+						title: "Page Options",
+						type: "FieldGroup",
+						key: "pageOptions",
+						collapsed: false,
+						fields: [
+							{
+								title: "Theme",
+								type: "Select",
+								key: "theme",
+								options: themes,
+								helptext: "It affects the whole page: Header, Content, and footer.",
+							},
+							{
+								title: "Customize header and footer themes",
+								type: "ConditionalField",
+								key: "customizeThemes",
+								mandatory: true,
+								defaultValue: false,
+								options: [
+									{
+										value: true,
+										title: "Yes",
+										name: "Yes",
+									},
+									{
+										value: false,
+										title: "No",
+										name: "No",
+									},
+								],
+								fields: [
+									{
+										title: "Header Theme",
+										type: "Select",
+										key: "headerTheme",
+										options: themes,
+										condition: true,
+									},
+									{
+										title: "Footer Theme",
+										type: "Select",
+										key: "footerTheme",
+										options: themes,
+										condition: true,
+									},
+								],
+							},
+						],
+					},
+					{
+						type: "IntegrationsField",
+						key: "integrations",
+					},
+				],
+			},
+			{
+				title: "SEO & Analytics",
+				fields: [
+					{
+						title: "SEO Data",
+						type: "FieldGroup",
+						key: "seoData",
+						collapsed: true,
+						fields: [
+							{
+								title: "",
+								type: "SummaryButton",
+								key: "summary",
+							},
+							{
+								title: "Meta title",
+								type: "TextField",
+								key: "metaTitle",
+							},
+							{
+								title: "Meta description",
+								type: "TextArea",
+								key: "metaDescription",
+							},
+							{
+								title: "Keywords",
+								type: "TagsField",
+								key: "metaKeywords",
+							},
+							{
+								title: "Canonical URL",
+								type: "TextField",
+								key: "canonicalURL",
+							},
+							{
+								title: "Meta robots index",
+								type: "RadioGroup",
+								key: "isIndexed",
+								options: [
+									{
+										value: true,
+										title: "Index",
+										name: "index",
+									},
+									{
+										value: false,
+										title: "No index",
+										name: "noindex",
+									},
+								],
+							},
+							{
+								title: "Meta robots follow",
+								type: "RadioGroup",
+								key: "follow",
+								options: [
+									{
+										value: true,
+										title: "Follow",
+										name: "follow",
+									},
+									{
+										value: false,
+										title: "No follow",
+										name: "nofollow",
+									},
+								],
+							},
+							{
+								title: "Meta robots advanced",
+								type: "CheckGroup",
+								key: "metasAdvanced",
+								options: [
+									{
+										value: "noimageindex",
+										title: "No image index",
+										name: "noimage",
+									},
+									{
+										value: "nosnippet",
+										title: "No snippet",
+										name: "nosnippet",
+									},
+									{
+										value: "noodp",
+										title: "No ODP",
+										name: "noodp",
+									},
+									{
+										value: "noarchive",
+										title: "No archive",
+										name: "noarchive",
+									},
+									{
+										value: "noTranslate",
+										title: "No translate",
+										name: "noTranslate",
+									},
+								],
+							},
+						],
+					},
+					{
+						title: "GEO (LLMS)",
+						type: "FieldGroup",
+						key: "geo",
+						collapsed: true,
+						fields: [
+							{
+								type: "UniqueCheck",
+								key: "isLlmsEnabled",
+								options: [{ title: "Include this page in LLMs.txt" }],
+								description: "If enabled, this page will be listed in LLMs.txt for language models.",
+							},
+						],
+					},
+					{
+						title: "Analytics Data Layer",
+						type: "FieldGroup",
+						key: "analytics",
+						collapsed: true,
+						fields: [
+							{
+								type: "AnalyticsField",
+								key: "dimensions",
+								collapsed: true,
+							},
+						],
+					},
+					{
+						title: "Social Media",
+						type: "FieldGroup",
+						key: "socialShare",
+						collapsed: true,
+						fields: [
+							{
+								title: "Title",
+								type: "TextField",
+								key: "socialTitle",
+							},
+							{
+								title: "Description",
+								type: "TextField",
+								key: "socialDescription",
+							},
+							{
+								title: "Image",
+								type: "ImageField",
+								key: "socialImage",
+							},
+						],
+					},
+				],
+			},
+		],
+		default: {
+			component: "Page",
+			isHome: false,
+			slug: "new-page",
+			title: "New Page",
+			headerConfig: "{}",
+			footerConfig: "{}",
+			liveStatus: { id: 1 },
+			template: {},
+			metaTitle: "",
+			metaDescription: "",
+			canonicalURL: "",
+			isIndexed: true,
+			follow: true,
+			metasAdvanced: "",
+			socialTitle: "",
+			socialDescription: "",
+			socialImage: {},
+			dimensions: {},
+			integrations: null,
+			theme: null,
+			customizeThemes: false,
+			headerTheme: null,
+			footerTheme: null,
+			isLlmsEnabled: true,
+		},
+	};
+};

package/src/schemas/pages/index.ts

@@ -0,0 +1,9 @@
+import FormPage from "./FormPage";
+import GlobalPage from "./GlobalPage";
+import getPageSchema from "./Page";
+
+export default () => ({
+	Page: getPageSchema(),
+	GlobalPage,
+	FormPage,
+});