@griddo/ax 11.11.5 → 11.11.7-rc.0

package/src/helpers/shareToken.ts

@@ -0,0 +1,25 @@
+import type { IShareData } from "@ax/api";
+
+import { differenceInCalendarDays, isBefore } from "date-fns";
+
+import { formatDate } from "./dates";
+
+const TOKEN_CAN_BE_RENEWED_DAYS = 14;
+
+// DEV ONLY — set a future/past date to simulate token states, then revert to undefined
+export const DEV_NOW: Date | undefined = undefined; //  new Date("2036-04-13");
+
+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,
+		validTokenDaysUntilExpires,
+	};
+};
+
+export type ShareTokenInfo = ReturnType<typeof getShareTokenInfo>;

package/src/locales/en-US.ts

@@ -26,6 +26,7 @@ export const enUS = {
 		moving: "moving",
 		deactivating: "deactivating",
 		activating: "activating",
+		typeSomething: "Type something",
 	},
 	fields: {
 		tags: {

package/src/locales/es-ES.ts

@@ -26,6 +26,7 @@ export const esES = {
 		moving: "moviendo",
 		deactivating: "desactivando",
 		activating: "activando",
+		typeSomething: "Escribe algo",
 	},
 	fields: {
 		tags: {

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",