@griddo/ax 11.11.8-rc.0 → 11.11.8-rc.1

package/package.json

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

package/src/components/Browser/index.tsx

@@ -2,9 +2,9 @@ import { useEffect, useMemo, useRef, useState } from "react";
 
 import type { IShareData } from "@ax/api";
 import { shareToken as shareTokenApi } from "@ax/api";
-import { BrowserContent, Icon, PageInfoBanner, Select, SharePageModal, Toast, Tooltip } from "@ax/components";
+import { BrowserContent, Icon, OcassionalToast, Select, SharePageModal, Toast, Tooltip } from "@ax/components";
 import { findByEditorID } from "@ax/forms";
-import { copyTextToClipboard, DEV_NOW, getShareTokenInfo } from "@ax/helpers";
+import { DEV_NOW, getShareTokenInfo } from "@ax/helpers";
 import { useModal, useOnMessageReceivedFromIframe, useToast } from "@ax/hooks";
 import type { HeadingFilter } from "@ax/types";
 
@@ -144,18 +144,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		}
 	};
 
-	const copyUrl = () => {
-		const sharedUrl = `${domain}/page-preview/${id}/${entity}`;
-		copyTextToClipboard(sharedUrl).then(
-			() => {
-				toggleToast("URL Copied");
-			},
-			(err) => {
-				console.error("Could not copy text: ", err);
-			},
-		);
-	};
-
 	const moduleActions = useMemo(
 		() => ({
 			deleteModuleAction: (editorID: number) => {
@@ -358,15 +346,20 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 				)}
 				{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
 				{isPreview && shareData && tokenInfo && (
-					<PageInfoBanner
+					<OcassionalToast
 						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"}`
+							<>
+								{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"}${" "}`}
+								<button type="button" onClick={toggleSharePageModal}>
+									<strong style={{ textDecoration: "underline" }}>
+										{tokenInfo.tokenHasExpired ? "new one" : "here"}
+									</strong>
+								</button>
+							</>
 						}
-						actionLabel={tokenInfo.tokenHasExpired ? "new one" : "here"}
 						icon={tokenInfo.tokenHasExpired ? "hide" : "view"}
-						onAction={toggleSharePageModal}
 					/>
 				)}
 
@@ -386,16 +379,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 	);
 };
 
-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/BrowserContent/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { PageInfoBanner } from "@ax/components";
+import { OcassionalToast } from "@ax/components";
 import { formatDate } from "@ax/helpers";
 import type { ILanguage, ISocialState } from "@ax/types";
 
@@ -59,7 +59,7 @@ const BrowserContent = (props: IProps) => {
 			selectHoverEditorID={selectHoverEditorID}
 		>
 			{renderer === "sharedPage" && showBanner && (
-				<PageInfoBanner
+				<OcassionalToast
 					message={`This draft link expires on ${shareEndDate ? formatDate(new Date(shareEndDate)) : "..."}`}
 					icon="scheduled"
 					onDismiss={() => setShowBanner(false)}

package/src/components/OcassionalToast/index.tsx

@@ -1,10 +1,11 @@
 import { createPortal } from "react-dom";
+
 import { Icon } from "@ax/components";
 
 import * as S from "./style";
 
 const OcassionalToast = (props: IOcassionalToastProps): JSX.Element => {
-	const { message, icon = "alert" } = props;
+	const { message, icon = "alert", onDismiss } = props;
 
 	return createPortal(
 		<S.Wrapper data-testid="occasional-toast-wrapper">
@@ -12,6 +13,11 @@ const OcassionalToast = (props: IOcassionalToastProps): JSX.Element => {
 				<Icon name={icon} />
 			</S.IconWrapper>
 			<S.Text data-testid="occasional-toast-message">{message}</S.Text>
+			{onDismiss && (
+				<S.DismissButton type="button" onClick={onDismiss}>
+					<Icon name="close" size="16px" />
+				</S.DismissButton>
+			)}
 		</S.Wrapper>,
 		document.body,
 	);
@@ -20,6 +26,7 @@ const OcassionalToast = (props: IOcassionalToastProps): JSX.Element => {
 export interface IOcassionalToastProps {
 	message: string | React.ReactNode;
 	icon?: string;
+	onDismiss?: () => void;
 }
 
 export default OcassionalToast;

package/src/components/OcassionalToast/style.tsx

@@ -37,4 +37,18 @@ const IconWrapper = styled.div`
   }
 `;
 
-export { Wrapper, Text, IconWrapper };
+const DismissButton = styled.button`
+  background: none;
+  border: none;
+	svg {
+		path {
+			fill: ${(p) => p.theme.color.textHighEmphasisInverse};
+		}
+	}
+  cursor: pointer;
+  margin-left: ${(p) => p.theme.spacing.xs};
+  display: flex;
+  align-items: center;
+`;
+
+export { Wrapper, Text, IconWrapper, DismissButton };

package/src/components/index.tsx

@@ -88,7 +88,6 @@ 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";
@@ -206,7 +205,6 @@ export {
 	NumberField,
 	OcassionalToast,
 	PageFinder,
-	PageInfoBanner,
 	Pagination,
 	PermissionsFilter,
 	ProgressBar,

package/src/modules/PublicPreview/index.tsx

@@ -11,7 +11,7 @@ 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 [tokenError, setTokenError] = useState<string | null>(null);
 	const [shareEndDate, setShareEndDate] = useState<string | null>(null);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
@@ -39,7 +39,7 @@ const PublicPreview = () => {
 					setShareEndDate(shareResponse.data.endDate);
 				}
 			} else {
-				setTokenError(true);
+				setTokenError(response.status === 404 ? "404" : response.status === 400 ? "linkExpired" : "wrong");
 			}
 			setIsLoading(false);
 		};
@@ -62,7 +62,7 @@ const PublicPreview = () => {
 	const siteID = state?.siteInfo ? state.siteInfo.siteId : undefined;
 
 	if (tokenError) {
-		return <ErrorPage type="linkExpired" />;
+		return <ErrorPage type={tokenError} />;
 	}
 
 	if (isLoading || !state) return <Loading />;

package/src/components/PageInfoBanner/index.tsx

@@ -1,38 +0,0 @@
-import { Icon } from "@ax/components";
-
-import * as S from "./styles";
-
-const PageInfoBanner = (props: PageInfoBannerProps) => {
-	const { message, actionLabel, onAction, onDismiss, icon = "view" } = props;
-
-	return (
-		<S.Container>
-			<S.Header>
-				<S.Info>
-					<Icon name={icon} size="16px" />
-					{message}{" "}
-					{onAction && (
-						<button type="button" onClick={onAction}>
-							<strong style={{ textDecoration: "underline" }}>{actionLabel}</strong>
-						</button>
-					)}
-					{onDismiss && (
-						<S.DismissButton type="button" onClick={onDismiss}>
-							<Icon name="close" size="16px" />
-						</S.DismissButton>
-					)}
-				</S.Info>
-			</S.Header>
-		</S.Container>
-	);
-};
-
-interface PageInfoBannerProps {
-	message: string;
-	actionLabel?: string;
-	onAction?: () => void;
-	onDismiss?: () => void;
-	icon?: string;
-}
-
-export default PageInfoBanner;

package/src/components/PageInfoBanner/styles.tsx

@@ -1,40 +0,0 @@
-import styled from "styled-components";
-
-const Container = styled.div`
-	left: 0px;
-	bottom: ${(p) => p.theme.spacing.s};
-	width: 100vw;
-	display: flex;
-	position: fixed;
-	z-index: 100;
-	justify-content: center;
-	align-items: center;
-	`;
-
-const Header = styled.span`
-	${({ theme }) => theme.textStyle.uiS}
-	border-radius: ${(p) => p.theme.radii.s};
-	background-color: ${(p) => p.theme.color.uiBackground04};
-	color: ${(p) => p.theme.color.textHighEmphasisInverse};
-	padding: ${(p) => p.theme.spacing.s};
-	svg {
-		path {
-			fill: ${(p) => p.theme.color.textHighEmphasisInverse};
-		}
-	}
-`;
-
-const Info = styled.div`
-	display: flex;
-	align-items: center;
-	column-gap: ${(p) => p.theme.spacing.xs};
-`;
-
-const DismissButton = styled.button`
-	background: none;
-	border: none;
-	color: inherit;
-	cursor: pointer;
-`;
-
-export { Container, DismissButton, Header, Info };