@griddo/ax 11.11.6 → 11.11.7-rc.1

package/src/components/index.tsx

@@ -1,3 +1,22 @@
+import ActionMenu from "./ActionMenu";
+import Avatar from "./Avatar";
+import BackFolder from "./BackFolder";
+import Breadcrumb from "./Breadcrumb";
+import Browser from "./Browser";
+import BrowserContent from "./BrowserContent";
+import BulkSelectionOptions from "./BulkSelectionOptions";
+import Button from "./Button";
+import CategoryCell from "./CategoryCell";
+import Circle from "./Circle";
+import ConfigPanel from "./ConfigPanel";
+import DragAndDrop from "./DragAndDrop";
+import ElementsTooltip from "./ElementsTooltip";
+import EmptyState from "./EmptyState";
+import ErrorCenter from "./ErrorCenter";
+import ErrorPage from "./ErrorPage";
+import ErrorToast from "./ErrorToast";
+import ExportButton from "./ExportButton";
+import FieldContainer from "./FieldContainer";
 import {
 	AIReferenceField,
 	ArrayFieldGroup,
@@ -18,6 +37,7 @@ import {
 	HeadingField,
 	HiddenField,
 	ImageField,
+	IntegrationsField,
 	LinkField,
 	NoteField,
 	NumberField,
@@ -37,46 +57,7 @@ import {
 	VisualOption,
 	VisualUniqueSelection,
 	Wysiwyg,
-	IntegrationsField,
 } from "./Fields";
-import { ListTitle, ListItem } from "./Lists";
-import {
-	CategoryFilter,
-	CustomizeFilters,
-	LiveFilter,
-	NameFilter,
-	SiteFilter,
-	StatusFilter,
-	TranslationsFilter,
-	TypeFilter,
-	DateFilter,
-	LastAccessFilter,
-	PermissionsFilter,
-	UsersFilter,
-	RoleFilter,
-	CheckGroupFilter,
-	StateFilter,
-} from "./TableFilters";
-
-import ActionMenu from "./ActionMenu";
-import Avatar from "./Avatar";
-import BackFolder from "./BackFolder";
-import Breadcrumb from "./Breadcrumb";
-import Browser from "./Browser";
-import BrowserContent from "./BrowserContent";
-import BulkSelectionOptions from "./BulkSelectionOptions";
-import Button from "./Button";
-import CategoryCell from "./CategoryCell";
-import Circle from "./Circle";
-import ConfigPanel from "./ConfigPanel";
-import DragAndDrop from "./DragAndDrop";
-import ElementsTooltip from "./ElementsTooltip";
-import EmptyState from "./EmptyState";
-import ErrorCenter from "./ErrorCenter";
-import ErrorPage from "./ErrorPage";
-import ErrorToast from "./ErrorToast";
-import ExportButton from "./ExportButton";
-import FieldContainer from "./FieldContainer";
 import FieldsBehavior from "./FieldsBehavior";
 import FileGallery from "./FileGallery";
 import FilterTagsBar from "./FilterTagsBar";
@@ -91,96 +72,61 @@ import IconAction from "./IconAction";
 import Image from "./Image";
 import InformativeMenu from "./InformativeMenu";
 import LanguageMenu from "./LanguageMenu";
+import { ListItem, ListTitle } from "./Lists";
 import Loader from "./Loader";
 import Loading from "./Loading";
 import Login from "./Login";
 import MainWrapper from "./MainWrapper";
-import MenuItem from "./MenuItem";
 import MenuGroup from "./MenuGroup";
+import MenuItem from "./MenuItem";
 import Modal from "./Modal";
 import Nav from "./Nav";
 import Notification from "./Notification";
 import OcassionalToast from "./OcassionalToast";
 import PageFinder from "./PageFinder";
+import PageInfoBanner from "./PageInfoBanner";
 import Pagination from "./Pagination";
 import ProgressBar from "./ProgressBar";
 import ReorderArrows from "./ReorderArrows";
 import ResizePanel from "./ResizePanel";
 import RestoreModal from "./RestoreModal";
-import { ScheduleModal, CancelScheduleModal } from "./ScheduleModal";
+import { CancelScheduleModal, ScheduleModal } from "./ScheduleModal";
 import SearchField from "./SearchField";
 import SearchTagsBar from "./SearchTagsBar";
+import SharePageModal from "./SharePageModal";
 import SideModal from "./SideModal";
+import StatusTile from "./StatusTile";
 import SubNav from "./SubNav";
 import TableCounter from "./TableCounter";
-import TableList from "./TableList";
-import Tabs from "./Tabs";
-import Tag from "./Tag";
-import Tooltip from "./Tooltip";
-import Toast from "./Toast";
-
-export {
-	//Fields
-	AIReferenceField,
-	ArrayFieldGroup,
-	AsyncCheckGroup,
-	AsyncSelect,
-	CheckField,
-	CheckGroup,
-	ComponentArray,
-	ComponentContainer,
-	ConditionalField,
-	DateField,
-	FieldGroup,
-	FieldsDivider,
-	FileField,
-	FormCategorySelect,
-	FormContainer,
-	FormFieldArray,
-	HeadingField,
-	HiddenField,
-	ImageField,
-	LinkField,
-	NoteField,
-	NumberField,
-	RadioField,
-	RadioGroup,
-	ReferenceField,
-	RichText,
-	Select,
-	SummaryButton,
-	TextArea,
-	TextField,
-	TimeField,
-	ToggleField,
-	TranslateButton,
-	UniqueCheck,
-	UrlField,
-	VisualOption,
-	VisualUniqueSelection,
-	Wysiwyg,
-	IntegrationsField,
-	//Lists
-	ListTitle,
-	ListItem,
-	//Filters
-	CheckGroupFilter,
-	DateFilter,
+import {
 	CategoryFilter,
+	CheckGroupFilter,
 	CustomizeFilters,
+	DateFilter,
+	LastAccessFilter,
 	LiveFilter,
 	NameFilter,
+	PermissionsFilter,
+	RoleFilter,
 	SiteFilter,
+	StateFilter,
 	StatusFilter,
 	TranslationsFilter,
 	TypeFilter,
-	StateFilter,
-	LastAccessFilter,
-	PermissionsFilter,
 	UsersFilter,
-	RoleFilter,
-	// Components
+} from "./TableFilters";
+import TableList from "./TableList";
+import Tabs from "./Tabs";
+import Tag from "./Tag";
+import Toast from "./Toast";
+import Tooltip from "./Tooltip";
+
+export {
 	ActionMenu,
+	AIReferenceField,
+	ArrayFieldGroup,
+	AsyncCheckGroup,
+	AsyncSelect,
 	Avatar,
 	BackFolder,
 	Breadcrumb,
@@ -188,9 +134,20 @@ export {
 	BrowserContent,
 	BulkSelectionOptions,
 	Button,
+	CancelScheduleModal,
 	CategoryCell,
+	CategoryFilter,
+	CheckField,
+	CheckGroup,
+	CheckGroupFilter,
 	Circle,
+	ComponentArray,
+	ComponentContainer,
+	ConditionalField,
 	ConfigPanel,
+	CustomizeFilters,
+	DateField,
+	DateFilter,
 	DragAndDrop,
 	ElementsTooltip,
 	EmptyState,
@@ -199,46 +156,90 @@ export {
 	ErrorToast,
 	ExportButton,
 	FieldContainer,
+	FieldGroup,
 	FieldsBehavior,
+	FieldsDivider,
+	FileField,
 	FileGallery,
 	FilterTagsBar,
 	Flag,
 	FloatingButton,
 	FloatingMenu,
 	FloatingPanel,
+	FormCategorySelect,
+	FormContainer,
+	FormFieldArray,
 	Gallery,
 	GuardModal,
+	HeadingField,
+	HiddenField,
 	Icon,
 	IconAction,
 	Image,
+	ImageField,
 	InformativeMenu,
+	IntegrationsField,
 	LanguageMenu,
+	LastAccessFilter,
+	LinkField,
+	ListItem,
+	ListTitle,
+	LiveFilter,
 	Loader,
 	Loading,
 	Login,
 	MainWrapper,
-	MenuItem,
 	MenuGroup,
+	MenuItem,
 	Modal,
+	NameFilter,
 	Nav,
+	NoteField,
 	Notification,
+	NumberField,
 	OcassionalToast,
 	PageFinder,
+	PageInfoBanner,
 	Pagination,
+	PermissionsFilter,
 	ProgressBar,
+	RadioField,
+	RadioGroup,
+	ReferenceField,
 	ReorderArrows,
 	ResizePanel,
 	RestoreModal,
+	RichText,
+	RoleFilter,
 	ScheduleModal,
-	CancelScheduleModal,
 	SearchField,
 	SearchTagsBar,
+	Select,
+	SharePageModal,
 	SideModal,
+	SiteFilter,
+	StateFilter,
+	StatusFilter,
+	StatusTile,
 	SubNav,
+	SummaryButton,
 	TableCounter,
 	TableList,
 	Tabs,
 	Tag,
-	Tooltip,
+	TextArea,
+	TextField,
+	TimeField,
 	Toast,
+	ToggleField,
+	Tooltip,
+	TranslateButton,
+	TranslationsFilter,
+	TypeFilter,
+	UniqueCheck,
+	UrlField,
+	UsersFilter,
+	VisualOption,
+	VisualUniqueSelection,
+	Wysiwyg,
 };

package/src/global.d.ts

@@ -8,3 +8,11 @@ declare module "react-draft-wysiwyg";
 declare module "history";
 declare module "draftjs-to-html";
 declare module "html-to-draftjs";
+declare module "*.module.css" {
+	const classes: { [key: string]: string };
+	export default classes;
+}
+declare module "*.css" {
+	const classes: { [key: string]: string };
+	export default classes;
+}

package/src/helpers/dates.tsx

@@ -1,4 +1,5 @@
-import { format, formatDistanceToNowStrict, addMinutes, isValid, parse } from "date-fns";
+import { addMinutes, format, formatDistanceToNowStrict, isValid, parse } from "date-fns";
+import { enUS } from "date-fns/locale";
 
 const formatString = "dd/MM/yyyy";
 
@@ -83,17 +84,22 @@ const getScheduleFormatDate = (date: string): string => {
 	return dateToString(dateObj, "dd/MM/yy · HH:mm");
 };
 
+const formatDate = (date: number | Date): string => {
+	return format(date, "MMMM d, yyyy", { locale: enUS });
+};
+
 export {
+	areEqualDates,
 	dateToString,
-	stringToDate,
-	isValidDate,
-	isValidDateRange,
+	formatDate,
 	getDateRange,
-	areEqualDates,
-	getStringifyDateRange,
-	getHumanLastModifiedDate,
-	getFormattedDateWithTimezone,
 	getDaysAgo,
+	getFormattedDateWithTimezone,
+	getHumanLastModifiedDate,
 	getRange,
 	getScheduleFormatDate,
+	getStringifyDateRange,
+	isValidDate,
+	isValidDateRange,
+	stringToDate,
 };

package/src/helpers/index.tsx

@@ -11,6 +11,7 @@ import { getActivatedDataPacksIds, getDeactivatedModules, isModuleDisabled } fro
 import {
 	areEqualDates,
 	dateToString,
+	formatDate,
 	getDateRange,
 	getDaysAgo,
 	getFormattedDateWithTimezone,
@@ -73,6 +74,7 @@ import {
 	getTemplateType,
 	isMultipleNavigationModules,
 } from "./schemas";
+import { DEV_NOW, getShareTokenInfo } from "./shareToken";
 import {
 	camelize,
 	capitalize,
@@ -132,6 +134,7 @@ export {
 	filterThemeTemplates,
 	findObjectValue,
 	formatBytes,
+	formatDate,
 	getActivatedDataPacksIds,
 	getCurrentPageStructuredData,
 	getDataPackSchema,
@@ -171,6 +174,8 @@ export {
 	getSchemaFormCategories,
 	getSchemaThumbnails,
 	getSchemaType,
+	DEV_NOW,
+	getShareTokenInfo,
 	getSlugFromUrl,
 	getStringifyDateRange,
 	getStructuredDataFromPage,

package/src/helpers/shareToken.ts

@@ -0,0 +1,27 @@
+import type { IShareData } from "@ax/api";
+
+import { differenceInCalendarDays, isBefore } from "date-fns";
+
+import { formatDate } from "./dates";
+
+const TOKEN_CAN_BE_RENEWED_DAYS = 14;
+const TOKEN_EXPIRING_SOON_DAYS = 3;
+
+// DEV ONLY — set a future/past date to simulate token states, then revert to undefined
+export const DEV_NOW: Date | undefined = undefined; // new Date("2026-08-06");
+
+export const getShareTokenInfo = (shareData: IShareData, now = new Date()) => {
+	const expirationDate = new Date(shareData.endDate);
+	const tokenHasExpired = isBefore(expirationDate, now);
+	const validTokenDaysUntilExpires = Math.max(0, differenceInCalendarDays(expirationDate, now));
+
+	return {
+		tokenExpirationDate: formatDate(expirationDate),
+		tokenHasExpired,
+		tokenCanBeRenewed: !tokenHasExpired && validTokenDaysUntilExpires < TOKEN_CAN_BE_RENEWED_DAYS,
+		tokenExpiringSoon: !tokenHasExpired && validTokenDaysUntilExpires <= TOKEN_EXPIRING_SOON_DAYS,
+		validTokenDaysUntilExpires,
+	};
+};
+
+export type ShareTokenInfo = ReturnType<typeof getShareTokenInfo>;

package/src/modules/PublicPreview/index.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
-import { pages } from "@ax/api";
-import { BrowserContent, Loading } from "@ax/components";
+import { pages, shareToken as shareTokenApi } from "@ax/api";
+import { BrowserContent, ErrorPage, Loading } from "@ax/components";
 import { getDefaultTheme, isReqOk } from "@ax/helpers";
 
 import * as S from "./style";
@@ -11,21 +11,35 @@ const PublicPreview = () => {
 	const { id: pageID, entity } = useParams<{ id: string; entity: string }>();
 	const [state, setState] = useState<any>(null);
 	const [isLoading, setIsLoading] = useState(false);
+	const [tokenError, setTokenError] = useState(false);
+	const [shareEndDate, setShareEndDate] = useState<string | null>(null);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		let isMounted = true;
 		document.body.classList.add("preview");
 
+		// Store preview credentials in sessionStorage for API calls
+		if (pageID && entity) {
+			sessionStorage.setItem("previewPageId", pageID);
+			sessionStorage.setItem("previewEntity", entity);
+		}
+
 		const getPage = async () => {
 			if (!isMounted) return;
 
 			setIsLoading(true);
+
 			const response = await pages.getPublicPage(parseInt(pageID), entity);
 			if (isReqOk(response.status)) {
 				setState(response.data);
+
+				const shareResponse = await shareTokenApi.getShare(parseInt(pageID));
+				if (isReqOk(shareResponse.status)) {
+					setShareEndDate(shareResponse.data.endDate);
+				}
 			} else {
-				console.log("Error en getPublicPage");
+				setTokenError(true);
 			}
 			setIsLoading(false);
 		};
@@ -35,14 +49,21 @@ const PublicPreview = () => {
 		return function cleanup() {
 			isMounted = false;
 			document.body.classList.remove("preview");
+			// Clean up preview credentials when leaving preview
+			sessionStorage.removeItem("previewPageId");
+			sessionStorage.removeItem("previewEntity");
 		};
 	}, []);
 
 	const globalTheme = getDefaultTheme();
-	const theme = state && state.site ? state.siteInfo.theme : globalTheme;
-	const socials = state && state.site ? state.siteInfo.socials : [];
-	const langs = state && state.site ? state.siteInfo.siteLanguages : [];
-	const siteID = state && state.siteInfo ? state.siteInfo.siteId : undefined;
+	const theme = state?.site ? state.siteInfo.theme : globalTheme;
+	const socials = state?.site ? state.siteInfo.socials : [];
+	const langs = state?.site ? state.siteInfo.siteLanguages : [];
+	const siteID = state?.siteInfo ? state.siteInfo.siteId : undefined;
+
+	if (tokenError) {
+		return <ErrorPage type="linkExpired" />;
+	}
 
 	if (isLoading || !state) return <Loading />;
 
@@ -50,18 +71,19 @@ const PublicPreview = () => {
 		// biome-ignore lint/suspicious/noAssignInExpressions: TODO: fix this
 		<S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
 			<BrowserContent
-				cloudinaryName={state && state.cloudinaryName}
+				cloudinaryName={state?.cloudinaryName}
 				theme={theme}
 				socials={socials}
 				siteLangs={langs}
 				siteID={siteID}
 				isPage={true}
 				content={state}
-				header={state && state.headerContent}
-				footer={state && state.footerContent}
-				languageID={state && state.language}
-				pageLanguages={state && state.pageLanguages}
-				renderer="preview"
+				header={state?.headerContent}
+				footer={state?.footerContent}
+				languageID={state?.language}
+				pageLanguages={state?.pageLanguages}
+				renderer="sharedPage"
+				shareEndDate={shareEndDate}
 			/>
 		</S.Wrapper>
 	);

package/src/routes/publicRoutes.tsx

@@ -1,14 +1,14 @@
-import ResetPass from "./../modules/ResetPass";
 import CreatePass from "./../modules/CreatePass";
 import Login from "./../modules/Login";
 import PublicPreview from "./../modules/PublicPreview";
+import ResetPass from "./../modules/ResetPass";
 
 const publicRoutes = [
 	{ path: "/login/:petitionId", component: Login, name: "Login", hideNav: true },
 	{ path: "/login", component: Login, name: "Login", hideNav: true },
 	{ path: "/new-password/:id/:token", component: ResetPass, name: "Reset Password", hideNav: true },
 	{ path: "/set-password/:id/:token", component: CreatePass, name: "Create Password", hideNav: true },
-	{ path: "/page-preview/:id/:entity", component: PublicPreview, name: "Preview", hideNav: true },
+	{ path: "/page-preview/:id/:entity/:token?", component: PublicPreview, name: "Preview", hideNav: true },
 ];
 
 export default publicRoutes;

package/src/themes/theme.json

@@ -227,6 +227,10 @@
 				"description": "warning modified",
 				"value": "#ffbb37"
 			},
+			"success": {
+				"description": "success",
+				"value": "#afc628"
+			},
 			"borderInverse": {
 				"description": "Border for ocassional toasts",
 				"type": "RGB",