@griddo/ax 11.11.6 → 11.11.7-rc.0

package/README.md

@@ -6,10 +6,6 @@
 - [AGENTS.md](#agentsmd)
 - [Centralización de textos de UI](docs/LOCALE-UI-TEXTS.md)
 
-## AGENTS.md
-
-Este repositorio incluye un archivo llamado [AGENTS.md](docs/AGENTS.md) que contiene las directrices y reglas de arquitectura que la IA sigue al generar o modificar código. Este archivo define la estructura del proyecto, las convenciones tecnológicas (por ejemplo, el uso de React Router v5, estilo con styled-components, Redux manual), y recomendaciones específicas para mantener la coherencia y calidad del proyecto. Cada vez que la IA realiza cambios en el código, consulta este documento para asegurarse de respetar los patrones legacy y las mejores prácticas establecidas por el equipo de Griddo AX.
-
 ## Comandos de npm
 
 ### Desarrollo
@@ -45,7 +41,6 @@ biome lint . --only=<GROUP|RULE|DOMAIN>
 node_modules/.bin/biome lint . --only=noConsole
 ```
 
-
 ## Extras
 
 ### Biome organize imports constants group

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.11.6",
+  "version": "11.11.7-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fed7cc70b03ba1e4d5e24f99e9a83259e7c5cd49"
+  "gitHead": "8b7d5ecf70920b98364c6207ff6079a7af98b430"
 }

package/src/__tests__/components/Browser/Browser.test.tsx

@@ -56,93 +56,7 @@ describe("Browser component rendering", () => {
 		expect(browserContentWrapper).not.toBeTruthy();
 	});
 
-	it("should do the copyUrl action and return console error", async () => {
-		defaultProps.isPreview = true;
-		defaultProps.showIframe = true;
-		defaultProps.content = {
-			id: 1,
-			entity: 123,
-		};
-
-		document.execCommand = jest.fn();
-		console.error = jest.fn();
-
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Browser {...defaultProps} />
-			</ThemeProvider>,
-		);
-
-		const navActionsWrapper = screen.queryByTestId("nav-actions-wrapper");
-		expect(navActionsWrapper).toBeTruthy();
-		const browserWrapper = screen.getByTestId("browser-wrapper");
-		expect(browserWrapper).toBeTruthy();
-
-		const iconWrapperBrowser = screen.getAllByTestId("icon-wrapper-browser");
-
-		fireEvent.click(iconWrapperBrowser[0]);
-
-		await waitFor(() => expect(console.error).toHaveBeenCalledWith("Could not copy text: ", undefined));
-	});
-
-	it("should do the copyUrl action and return document.execCommand call", async () => {
-		defaultProps.isPreview = true;
-		defaultProps.showIframe = true;
-
-		Object.assign(document, {
-			execCommand: jest.fn().mockImplementation(() => Promise.resolve()),
-		});
-
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Browser {...defaultProps} />
-			</ThemeProvider>,
-			{ wrapper: BrowserRouter },
-		);
-		const browserWrapper = screen.getByTestId("browser-wrapper");
-		expect(browserWrapper).toBeTruthy();
-
-		const iconWrapperBrowser = screen.getAllByTestId("icon-wrapper-browser");
-
-		fireEvent.click(iconWrapperBrowser[0]);
-		await waitFor(() => expect(screen.getByText(/URL Copied/i)).toBeInTheDocument());
-	});
-
-	it("should do the copyUrl action and return clipboard call", async () => {
-		defaultProps.isPreview = true;
-		defaultProps.showIframe = true;
-		defaultProps.content = {
-			id: 2,
-			entity: 456,
-		};
-
-		Object.assign(navigator, {
-			clipboard: {
-				writeText: jest.fn().mockImplementation(() => Promise.resolve()),
-			},
-		});
-
-		Object.assign(window, {
-			isSecureContext: {},
-		});
-
-		jest.spyOn(navigator.clipboard, "writeText");
-
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Browser {...defaultProps} />
-			</ThemeProvider>,
-		);
-
-		const browserWrapper = screen.getByTestId("browser-wrapper");
-		expect(browserWrapper).toBeTruthy();
-
-		const iconWrapperBrowser = screen.getAllByTestId("icon-wrapper-browser");
-		fireEvent.click(iconWrapperBrowser[0]);
-		await waitFor(() => expect(navigator.clipboard.writeText).toBeCalledWith("http://localhost/page-preview/2/456"));
-	});
-
-	it("should render the browserContent", () => {
+it("should render the browserContent", () => {
 		defaultProps.isPreview = false;
 		defaultProps.showIframe = false;
 		const deleteModuleActionMock = defaultProps.actions?.deleteModuleAction as jest.MockedFunction<

package/src/__tests__/helpers/shareToken.test.ts

@@ -0,0 +1,91 @@
+import type { IShareData } from "@ax/api";
+
+import { getShareTokenInfo } from "@ax/helpers";
+
+const makeShareData = (overrides: Partial<IShareData> = {}): IShareData => ({
+	entity: "test-entity",
+	daysValid: 30,
+	startDate: "2026-03-01T00:00:00.000Z",
+	endDate: "2026-03-31T00:00:00.000Z",
+	visitCount: 5,
+	...overrides,
+});
+
+describe("getShareTokenInfo", () => {
+	describe("token expiration", () => {
+		it("should detect an active token", () => {
+			const now = new Date("2026-03-15");
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.tokenHasExpired).toBe(false);
+		});
+
+		it("should detect an expired token", () => {
+			const now = new Date("2026-04-01");
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.tokenHasExpired).toBe(true);
+		});
+
+		it("should detect expiration on the exact end date", () => {
+			const now = new Date("2026-03-31T12:00:00.000Z");
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.tokenHasExpired).toBe(true);
+		});
+	});
+
+	describe("days until expiration", () => {
+		it("should return remaining days for an active token", () => {
+			const now = new Date("2026-03-21");
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.validTokenDaysUntilExpires).toBe(10);
+		});
+
+		it("should return 0 for an expired token", () => {
+			const now = new Date("2026-05-01");
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.validTokenDaysUntilExpires).toBe(0);
+		});
+
+		it("should return 0 on the exact end date", () => {
+			const now = new Date("2026-03-31");
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.validTokenDaysUntilExpires).toBe(0);
+		});
+	});
+
+	describe("token renewal", () => {
+		it("should allow renewal when less than 14 days remain", () => {
+			const now = new Date("2026-03-20"); // 11 days left
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.tokenCanBeRenewed).toBe(true);
+		});
+
+		it("should not allow renewal when 14 or more days remain", () => {
+			const now = new Date("2026-03-10"); // 21 days left
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.tokenCanBeRenewed).toBe(false);
+		});
+
+		it("should not allow renewal for an expired token", () => {
+			const now = new Date("2026-04-15");
+			const result = getShareTokenInfo(makeShareData(), now);
+
+			expect(result.tokenCanBeRenewed).toBe(false);
+		});
+	});
+
+	describe("formatted expiration date", () => {
+		it("should format the expiration date", () => {
+			const result = getShareTokenInfo(makeShareData());
+
+			expect(result.tokenExpirationDate).toBe("March 31, 2026");
+		});
+	});
+});

package/src/api/index.tsx

@@ -22,6 +22,9 @@ import forms from "./forms";
 import folders from "./folders";
 import logs from "./logs";
 import schemas from "./schemas";
+import shareToken from "./shareToken";
+
+export type { IShareData } from "./shareToken";
 
 export {
 	sites,
@@ -48,4 +51,5 @@ export {
 	folders,
 	logs,
 	schemas,
+	shareToken,
 };

package/src/api/pages.tsx

@@ -1,9 +1,11 @@
-import { AxiosResponse } from "axios";
+import type { IGetPagesParams } from "@ax/types";
+
+import type { AxiosResponse } from "axios";
+
 import { template } from "./config";
-import { IServiceConfig, sendRequest } from "./utils";
-import { IGetPagesParams } from "@ax/types";
+import { type IServiceConfig, sendRequest } from "./utils";
 
-const PUBLIC_BASE_PATH = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+const PUBLIC_BASE_PATH = process.env.GRIDDO_PUBLIC_API_URL || process.env.REACT_APP_PUBLIC_API_ENDPOINT;
 
 const SERVICES: { [key: string]: IServiceConfig } = {
 	GET_PAGES: {
@@ -116,20 +118,21 @@ const getPages = async (params: IGetPagesParams, filterQuery = ""): Promise<Axio
 		type,
 	} = params;
 
-	SERVICES.GET_PAGES.dynamicUrl = `${host}${endpoint}?deleted=${deleted}${filterQuery}`;
-
-	if (page && itemsPerPage)
-		SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&page=${page}&itemsPerPage=${itemsPerPage}`;
-	if (query && query.trim() !== "") SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&query=${query}`;
-	if (filterStructuredData)
-		SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&filterStructuredData=${filterStructuredData}`;
-	if (format) SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&format=${format}`;
-	if (type) SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&type=${type}`;
-	if (filterPages)
-		SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&filterPages=${filterPages.join(",")}`;
-	if (filterSites)
-		SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&filterSites=${filterSites.join(",")}`;
-	if (ignoreLang) SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&ignoreLang=${ignoreLang}`;
+	// init
+	let dynamicUrl = `${host}${endpoint}?deleted=${deleted}${filterQuery}`;
+
+	// concatenate...
+	if (page && itemsPerPage) dynamicUrl += `&page=${page}&itemsPerPage=${itemsPerPage}`;
+	if (query?.trim()) dynamicUrl += `&query=${encodeURIComponent(query)}`;
+	if (filterStructuredData) dynamicUrl += `&filterStructuredData=${filterStructuredData}`;
+	if (format) dynamicUrl += `&format=${format}`;
+	if (type) dynamicUrl += `&type=${type}`;
+	if (filterPages?.length) dynamicUrl += `&filterPages=${filterPages.join(",")}`;
+	if (filterSites?.length) dynamicUrl += `&filterSites=${filterSites.join(",")}`;
+	if (ignoreLang) dynamicUrl += `&ignoreLang=${ignoreLang}`;
+
+	// mutate
+	SERVICES.GET_PAGES.dynamicUrl = dynamicUrl;
 
 	const dataHeader = {
 		...(lang && { lang }),

package/src/api/shareToken.tsx

@@ -0,0 +1,62 @@
+import type { AxiosResponse } from "axios";
+
+import { template } from "./config";
+import { type IServiceConfig, sendRequest } from "./utils";
+
+export interface IShareData {
+	entity: string;
+	daysValid: number;
+	startDate: string;
+	endDate: string;
+	visitCount: number;
+}
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+	CREATE_SHARE: {
+		...template,
+		endpoint: ["/page/", "/share"],
+		method: "POST",
+	},
+	GET_SHARE: {
+		...template,
+		endpoint: ["/page/", "/share"],
+		method: "GET",
+	},
+	RENEW_SHARE: {
+		...template,
+		endpoint: ["/page/", "/share"],
+		method: "PUT",
+	},
+};
+
+const createShare = async (pageID: number): Promise<AxiosResponse> => {
+	const {
+		host,
+		endpoint: [prefix, suffix],
+	} = SERVICES.CREATE_SHARE;
+	SERVICES.CREATE_SHARE.dynamicUrl = `${host}${prefix}${pageID}${suffix}`;
+
+	return sendRequest(SERVICES.CREATE_SHARE);
+};
+
+const getShare = async (pageID: number): Promise<AxiosResponse> => {
+	const {
+		host,
+		endpoint: [prefix, suffix],
+	} = SERVICES.GET_SHARE;
+	SERVICES.GET_SHARE.dynamicUrl = `${host}${prefix}${pageID}${suffix}`;
+
+	return sendRequest(SERVICES.GET_SHARE);
+};
+
+const renewShare = async (pageID: number): Promise<AxiosResponse> => {
+	const {
+		host,
+		endpoint: [prefix, suffix],
+	} = SERVICES.RENEW_SHARE;
+	SERVICES.RENEW_SHARE.dynamicUrl = `${host}${prefix}${pageID}${suffix}`;
+
+	return sendRequest(SERVICES.RENEW_SHARE);
+};
+
+export default { createShare, getShare, renewShare };

package/src/api/utils.tsx

@@ -36,17 +36,30 @@ const getSite = (): Record<string, unknown> => {
 };
 
 const getHeaders = (headers: Record<string, unknown>, hasToken: boolean) => {
+	// Check if we're in preview mode and add preview share headers
+	const previewPageId = sessionStorage.getItem("previewPageId");
+	const previewEntity = sessionStorage.getItem("previewEntity");
+	const previewHeaders =
+		previewPageId && previewEntity
+			? {
+					"x-preview-share-page-id": previewPageId,
+					"x-preview-share-entity": previewEntity,
+				}
+			: {};
+
 	return hasToken
 		? {
 				...headers,
 				...getToken(),
 				...getLang(),
 				...getSite(),
+				...previewHeaders,
 			}
 		: {
 				...headers,
 				...getLang(),
 				...getSite(),
+				...previewHeaders,
 			};
 };
 

package/src/components/Browser/index.tsx

@@ -1,13 +1,17 @@
 import { useEffect, useState } from "react";
 
+import type { IShareData } from "@ax/api";
+import { shareToken as shareTokenApi } from "@ax/api";
+import { PageInfoBanner } from "@ax/components";
 import { findByEditorID } from "@ax/forms";
-import { copyTextToClipboard } from "@ax/helpers";
-import { useOnMessageReceivedFromIframe, useToast } from "@ax/hooks";
+import { DEV_NOW, getShareTokenInfo } from "@ax/helpers";
+import { useModal, useOnMessageReceivedFromIframe, useToast } from "@ax/hooks";
 
+import BrowserContent from "../BrowserContent";
 import Icon from "../Icon";
-import Tooltip from "../Tooltip";
+import SharePageModal from "../SharePageModal";
 import Toast from "../Toast";
-import BrowserContent from "../BrowserContent";
+import Tooltip from "../Tooltip";
 
 import * as S from "./style";
 
@@ -31,7 +35,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		editorType = "page",
 	} = props;
 
-	const { id, entity } = content;
+	const { id, entity, haveDraftPage } = content;
 	const domain = window.location.origin;
 	const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}`;
 	const isPageEditor = editorType === "page";
@@ -39,6 +43,10 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
 	const [resolution, setResolution] = useState("desktop");
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
+	const { isOpen: isShareOpen, toggleModal: toggleSharePageModal } = useModal(false, true);
+	const [shareData, setShareData] = useState<IShareData | null>(null);
+
+	const tokenInfo = shareData ? getShareTokenInfo(shareData, DEV_NOW) : null;
 
 	useOnMessageReceivedFromIframe(actions);
 
@@ -47,9 +55,22 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		(window as any).browserRef = null;
 	}, []);
 
+	// Fetch share data when in preview mode
+	useEffect(() => {
+		if (isPreview && id) {
+			const fetchShare = async () => {
+				const response = await shareTokenApi.getShare(id);
+				if (response.status === 200) {
+					setShareData(response.data);
+				}
+			};
+			fetchShare();
+		}
+	}, [isPreview, id]);
+
 	const selectEditorID = (
 		selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
-		parentComponent: string | undefined | null,
+		_parentComponent: string | undefined | null,
 		e: React.SyntheticEvent,
 	) => {
 		const { element } = findByEditorID(content, selectedComponent.parentEditorID);
@@ -64,29 +85,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		}
 	};
 
-	const getWidth = (res: string) => {
-		switch (res) {
-			case "tablet":
-				return "768px";
-			case "phone":
-				return "425px";
-			default:
-				return "100%";
-		}
-	};
-
-	const copyUrl = () => {
-		const sharedUrl = `${domain}/page-preview/${id}/${entity}`;
-		copyTextToClipboard(sharedUrl).then(
-			() => {
-				toggleToast("URL Copied");
-			},
-			(err) => {
-				console.error("Could not copy text: ", err);
-			},
-		);
-	};
-
 	const deleteModuleSelected = (editorID: number) => {
 		actions?.setSelectedContentAction(0);
 		actions?.deleteModuleAction?.([editorID]);
@@ -115,8 +113,18 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 					<S.NavUrl>{url}</S.NavUrl>
 					{isPreview && (
 						<S.NavActions data-testid="nav-actions-wrapper">
-							<S.IconWrapper data-testid="icon-wrapper-browser" onClick={copyUrl}>
-								<Tooltip content="Copy url to share draft" bottom>
+							<S.IconWrapper
+								data-testid="icon-wrapper-browser"
+								onClick={haveDraftPage ? undefined : toggleSharePageModal}
+								active={!haveDraftPage}
+							>
+								<Tooltip
+									hideOnClick={!haveDraftPage}
+									content={
+										haveDraftPage ? "Only available for drafts. This page already has a public URL." : "Share draft"
+									}
+									bottom
+								>
 									<Icon name="share" size="24" />
 								</Tooltip>
 							</S.IconWrapper>
@@ -147,6 +155,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 					)}
 				</S.NavBar>
 			)}
+
 			{showIframe ? (
 				<S.FrameWrapper hasBorder={isPageEditor} isFormEditor={isFormEditor} data-testid="navbar-iframe-wrapper">
 					<iframe
@@ -161,6 +170,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 			) : (
 				<S.Wrapper
 					data-testid="browser-content-wrapper"
+					// biome-ignore lint/suspicious/noAssignInExpressions: TODO: fix this
 					ref={(ref: any) => ((window as any).browserRef = ref)}
 					className="browser-content"
 				>
@@ -182,11 +192,47 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 					/>
 				</S.Wrapper>
 			)}
+
 			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
+
+			{isPreview && shareData && tokenInfo && (
+				<PageInfoBanner
+					message={
+						tokenInfo.tokenHasExpired
+							? `Access to this draft link expired on ${tokenInfo.tokenExpirationDate}. You need to generate a`
+							: `This draft link expires on ${tokenInfo.tokenExpirationDate}. ${tokenInfo.tokenCanBeRenewed ? "Renew it" : "Open details"}`
+					}
+					actionLabel={tokenInfo.tokenHasExpired ? "new one" : "here"}
+					icon={tokenInfo.tokenHasExpired ? "hide" : "view"}
+					onAction={toggleSharePageModal}
+				/>
+			)}
+
+			{isPreview && (
+				<SharePageModal
+					pageTitle={content.title}
+					isOpen={isShareOpen}
+					hide={toggleSharePageModal}
+					pageID={id}
+					entity={entity}
+					shareData={shareData}
+					onShareChange={setShareData}
+				/>
+			)}
 		</S.BrowserWrapper>
 	);
 };
 
+function getWidth(res: string) {
+	switch (res) {
+		case "tablet":
+			return "768px";
+		case "phone":
+			return "425px";
+		default:
+			return "100%";
+	}
+}
 export interface IBrowserProps {
 	content: any;
 	header?: any;

package/src/components/Browser/style.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 const BrowserWrapper = styled.div`
   background-color: ${(p) => p.theme.color.uiBackground01};
@@ -31,14 +31,21 @@ const NavActions = styled.div`
 
 const IconWrapper = styled.div<{ active?: boolean }>`
   margin-left: ${(p) => p.theme.spacing.m};
-  cursor: pointer;
-  :hover {
-    svg {
-      path {
-        fill: ${(p) => p.theme.color.interactive01};
+
+  cursor: ${(p) => (p.active === false ? "default" : "pointer")};
+
+  ${(p) =>
+		p.active !== false &&
+		css`
+    :hover {
+      svg {
+        path {
+          fill: ${p.theme.color.interactive01};
+        }
       }
     }
-  }
+  `}
+
   svg {
     path {
       fill: ${(p) => (p.active ? p.theme.color.interactive01 : p.theme.color.iconNonActive)};
@@ -70,4 +77,4 @@ const Wrapper = styled.div`
   }
 `;
 
-export { BrowserWrapper, NavBar, NavUrl, NavActions, IconWrapper, FrameWrapper, Wrapper };
+export { BrowserWrapper, FrameWrapper, IconWrapper, NavActions, NavBar, NavUrl, Wrapper };

package/src/components/BrowserContent/index.tsx

@@ -1,9 +1,13 @@
-import { useCallback, useEffect } from "react";
-import * as components from "components";
-import { builderSSR, ssrHelpers, SiteProvider } from "components";
-import { type Core, Preview } from "@griddo/core";
+import { useCallback, useEffect, useState } from "react";
+
+import { PageInfoBanner } from "@ax/components";
+import { formatDate } from "@ax/helpers";
 import type { ILanguage, ISocialState } from "@ax/types";
 
+import { type Core, Preview } from "@griddo/core";
+import * as components from "components";
+import { builderSSR, SiteProvider, ssrHelpers } from "components";
+
 const BrowserContent = (props: IProps) => {
 	const {
 		content,
@@ -21,6 +25,7 @@ const BrowserContent = (props: IProps) => {
 		moduleActions,
 		renderer,
 		selectHoverEditorID,
+		shareEndDate,
 	} = props;
 
 	const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
@@ -33,6 +38,8 @@ const BrowserContent = (props: IProps) => {
 		}
 	}, []);
 
+	const [showBanner, setShowBanner] = useState(true);
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: fix
 	useEffect(useInstanceExternalAssets, [useInstanceExternalAssets]);
 
@@ -51,6 +58,13 @@ const BrowserContent = (props: IProps) => {
 			moduleActions={moduleActions}
 			selectHoverEditorID={selectHoverEditorID}
 		>
+			{renderer === "sharedPage" && showBanner && (
+				<PageInfoBanner
+					message={`This draft link expires on ${shareEndDate ? formatDate(new Date(shareEndDate)) : "..."}`}
+					icon="scheduled"
+					onDismiss={() => setShowBanner(false)}
+				/>
+			)}
 			<Preview
 				isPage={isPage}
 				apiUrl={API_URL}
@@ -77,7 +91,7 @@ interface IProps {
 	footer?: any;
 	languageID: number;
 	pageLanguages: Core.Page["pageLanguages"];
-	renderer: "editor" | "preview" | "forms";
+	renderer: "editor" | "preview" | "forms" | "sharedPage";
 	selectEditorID?(
 		selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
 		parentComponent: string | undefined | null,
@@ -89,6 +103,7 @@ interface IProps {
 		duplicateModuleAction?(editorID: number): void;
 		copyModuleAction?(editorID: number): void;
 	};
+	shareEndDate?: string | null;
 }
 
 export default BrowserContent;