@griddo/ax 11.11.5 → 11.11.7-rc.0

package/src/components/SharePageModal/index.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react";
+
+import type { IShareData } from "@ax/api";
+import { shareToken as shareTokenApi } from "@ax/api";
+import { Button, Loader, StatusTile, TextField } from "@ax/components";
+import { copyTextToClipboard, DEV_NOW, formatDate, getShareTokenInfo, isReqOk } from "@ax/helpers";
+import { useToast } from "@ax/hooks";
+
+import Modal from "../Modal";
+import Toast from "../Toast";
+
+import * as S from "./style";
+
+const SharePageModal = (props: SharePageModalProps): JSX.Element | null => {
+	const { isOpen, hide, pageID, entity, pageTitle, shareData, onShareChange } = props;
+
+	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
+	const [showActions, setShowActions] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	useEffect(() => {
+		if (isOpen && !shareData && !loading) {
+			handleCreateShare();
+		}
+	}, [isOpen, shareData]);
+
+	if (!isOpen) return null;
+
+	const tokenInfo = shareData ? getShareTokenInfo(shareData, DEV_NOW) : null;
+	const shareUrl = shareData ? `${window.location.origin}/page-preview/${pageID}/${entity}` : "";
+
+	const renewalPreview =
+		shareData && showActions && tokenInfo
+			? (() => {
+					const currentExpiration = new Date(shareData.endDate);
+					const renewalDate = new Date(currentExpiration);
+					renewalDate.setDate(renewalDate.getDate() + shareData.daysValid);
+					return {
+						date: formatDate(renewalDate),
+						days: tokenInfo.validTokenDaysUntilExpires + shareData.daysValid,
+					};
+				})()
+			: null;
+
+	const handleCopy = () => {
+		copyTextToClipboard(shareUrl).then(
+			() => toggleToast("URL Copied"),
+			(err) => console.error("Could not copy text: ", err),
+		);
+	};
+
+	const handleCreateShare = async () => {
+		setLoading(true);
+		const response = await shareTokenApi.createShare(pageID);
+		if (isReqOk(response.status)) {
+			onShareChange(response.data);
+		}
+		setShowActions(false);
+		setLoading(false);
+	};
+
+	const handleRenew = async () => {
+		setLoading(true);
+		const response = await shareTokenApi.renewShare(pageID);
+		if (isReqOk(response.status)) {
+			onShareChange(response.data);
+		}
+		setShowActions(false);
+		setLoading(false);
+	};
+
+	const handleHide = () => {
+		setShowActions(false);
+		hide();
+	};
+
+	const getModalActions = () => {
+		if (tokenInfo?.tokenHasExpired) {
+			return {
+				main: { title: "generate new link", onClick: handleCreateShare, disabled: loading, icon: "refresh" },
+				secondary: { title: "cancel", onClick: handleHide },
+			};
+		}
+		if (showActions) {
+			return {
+				main: { title: "renew link", onClick: handleRenew, disabled: loading, icon: "refresh" },
+				secondary: { title: "cancel", onClick: () => setShowActions(false) },
+			};
+		}
+		return { main: undefined, secondary: undefined };
+	};
+
+	const { main: mainAction, secondary: secondaryAction } = getModalActions();
+
+	return (
+		<>
+			<Modal
+				isOpen={isOpen}
+				hide={hide}
+				size="S"
+				height="auto"
+				title="Share Draft"
+				mainAction={mainAction}
+				secondaryAction={secondaryAction}
+			>
+				<S.ModalContent>
+					<S.Description>
+						Generate a secure, time-limited link to share the draft <strong>{pageTitle}</strong> with external
+						reviewers. They won't need a Griddo account to view it.
+					</S.Description>
+
+					{loading && (
+						<S.LoaderWrapper>
+							<Loader name="circle" size="60px" />
+						</S.LoaderWrapper>
+					)}
+
+					{!loading && shareData && tokenInfo && (
+						<>
+							<S.PreviewLinkWrapper expired={tokenInfo.tokenHasExpired}>
+								<S.Label>Secure preview link</S.Label>
+								<TextField
+									value={shareUrl}
+									icon="copy"
+									onChange={() => {}}
+									onClickIcon={handleCopy}
+									noeditable
+									selectOnFocus
+									disabled={tokenInfo.tokenHasExpired}
+								/>
+							</S.PreviewLinkWrapper>
+							<S.StatusLineWrapper>
+								{tokenInfo.tokenHasExpired ? (
+									<StatusTile
+										icon="user"
+										title="Expired"
+										description={`${tokenInfo.validTokenDaysUntilExpires} days`}
+										detail={`Expired on ${tokenInfo.tokenExpirationDate}`}
+										mode="warning"
+									/>
+								) : (
+									<StatusTile
+										icon="user"
+										title="Valid"
+										description={`${renewalPreview ? renewalPreview.days : tokenInfo.validTokenDaysUntilExpires} days`}
+										detail={`Expires ${renewalPreview ? renewalPreview.date : tokenInfo.tokenExpirationDate}`}
+										mode="info"
+									/>
+								)}
+
+								<StatusTile
+									icon="scheduled"
+									title="Activity"
+									description={`${shareData.visitCount} views`}
+									detail={`Shared since ${formatDate(new Date(shareData.startDate))}`}
+									mode="info"
+								/>
+							</S.StatusLineWrapper>
+						</>
+					)}
+					{!showActions && tokenInfo?.tokenCanBeRenewed && shareData && (
+						<S.RenewTextButton>
+							<Button type="button" buttonStyle="text" icon="refresh" onClick={() => setShowActions(true)}>
+								{`renew for ${shareData.daysValid} days`}
+							</Button>
+						</S.RenewTextButton>
+					)}
+				</S.ModalContent>
+			</Modal>
+			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
+		</>
+	);
+};
+
+interface SharePageModalProps {
+	isOpen: boolean;
+	hide: () => void;
+	pageID: number;
+	entity: string;
+	pageTitle: string;
+	shareData: IShareData | null;
+	onShareChange: (shareData: IShareData) => void;
+	height?: string;
+}
+
+export default SharePageModal;

package/src/components/SharePageModal/style.tsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+	padding: ${({ theme }) => `${theme.spacing.m} ${theme.spacing.m}`};
+`;
+
+const Description = styled.p`
+${(p) => p.theme.textStyle.uiM};
+	color: ${({ theme }) => theme.color.textHighEmphasis};
+`;
+
+const Label = styled.p`
+	${(p) => p.theme.textStyle.fieldLabel};
+	color: ${({ theme }) => theme.color.textMediumEmphasis};
+	margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const LoaderWrapper = styled.div`
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	padding: 32px;
+`;
+
+const RenewTextButton = styled.div`
+	margin-top: 32px;
+`;
+
+const PreviewLinkWrapper = styled.div<{ expired?: boolean }>`
+	pointer-events: ${(p) => (p.expired ? "none" : "unset")};
+	user-select: ${(p) => (p.expired ? "none" : "unset")};
+	padding: ${(p) => p.theme.spacing.s} 0;
+`;
+
+const StatusLineWrapper = styled.div`
+	display: flex;
+	gap: 10px;
+	width: 100%;
+`;
+
+export { Description, Label, LoaderWrapper, ModalContent, PreviewLinkWrapper, RenewTextButton, StatusLineWrapper };

package/src/components/StatusTile/index.tsx

@@ -0,0 +1,28 @@
+import * as S from "./styles";
+
+function StatusTile(props: StatusTileProps) {
+	const { detail, description, icon, title, mode } = props;
+
+	return (
+		<S.Content colorMode={mode}>
+			<S.Header colorMode={mode}>
+				<S.StyledIcon name={icon} size="16px" />
+				<S.Title>{title}</S.Title>
+			</S.Header>
+			<S.Description>{description}</S.Description>
+			<S.Detail>{detail}</S.Detail>
+		</S.Content>
+	);
+}
+
+export type ColorMode = "info" | "success" | "warning";
+
+interface StatusTileProps {
+	icon: string;
+	title: string;
+	description: string;
+	detail: string;
+	mode: ColorMode;
+}
+
+export default StatusTile;

package/src/components/StatusTile/styles.ts

@@ -0,0 +1,63 @@
+import Icon from "@ax/components/Icon";
+
+import styled from "styled-components";
+
+import type { ColorMode } from ".";
+
+const getColorFromMode = (mode: ColorMode, theme: any) => {
+	const modes = {
+		info: {
+			border: "#DBDDE9", // No hay border1 en el theme...
+			main: theme.colors.interactive01,
+		},
+		warning: {
+			border: theme.colors.error,
+			main: theme.colors.error,
+		},
+		success: {
+			border: theme.colors.success,
+			main: theme.colors.success,
+		},
+	};
+
+	return modes[mode];
+};
+
+const Content = styled.div<{ colorMode: ColorMode }>`
+	border: 1px solid ${({ colorMode, theme }) => getColorFromMode(colorMode, theme).border};
+	padding: ${({ theme }) => theme.spacing.s};
+	background: #ffffff;
+	border-radius: 6px;
+	width: 100%;
+`;
+
+const StyledIcon = styled(Icon)`
+	margin-right: 4px;
+`;
+
+const Header = styled.p<{ colorMode: ColorMode }>`
+	color: ${({ colorMode, theme }) => getColorFromMode(colorMode, theme).main};
+	column-gap: ${({ theme }) => theme.spacing.xs};
+	display: flex;
+	align-items: center;
+	text-transform: uppercase;
+	font-weight: 600;
+	svg path {
+	  fill: ${({ colorMode, theme }) => getColorFromMode(colorMode, theme).main};
+	}
+`;
+
+const Title = styled.p`
+	font-size: 12px;
+`;
+
+const Description = styled.span`
+	font-weight: bold;
+`;
+
+const Detail = styled.p`
+	font-size: 12px;
+	color: ${({ theme }) => theme.colors.textMediumEmphasis};
+`;
+
+export { Content, Description, Detail, Header, StyledIcon, Title };

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,