@griddo/ax 11.12.0 → 11.12.1-rc.0

package/src/modules/PageEditor/index.tsx

@@ -7,6 +7,8 @@ import {
 	CancelScheduleModal,
 	ErrorPage,
 	ErrorToast,
+	HeadingsPreviewModal,
+	KeywordsPreviewModal,
 	Loading,
 	MainWrapper,
 	Modal,
@@ -22,8 +24,9 @@ import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getDeactivatedModules, isModuleDisabled } from "@ax/helpers";
-import { useIsDirty, useModal, usePermission } from "@ax/hooks";
+import { useIsDirty, useModals, usePermissions } from "@ax/hooks";
 import type {
+	HeadingFilter,
 	IErrorItem,
 	ILanguage,
 	INotification,
@@ -70,15 +73,18 @@ const PageEditor = (props: IProps) => {
 		setCurrentPageID,
 		restorePage,
 		schemaVersion,
+		updateEditorContent,
 	} = props;
 
-	const isAllowedToPublishPages = usePermission("content.publishUnpublishPages");
-	const isAllowedToCreatePages = usePermission("content.createPages");
-	const isAllowedToDeletePage = usePermission("content.deletePages");
-	const isAllowedToDeletePublishedPage = usePermission("content.deletePublishedPages");
-	const isAllowedToEditContentPage = usePermission("content.editContentPages");
+	const isAllowedTo = usePermissions({
+		publishPages: "content.publishUnpublishPages",
+		createPages: "content.createPages",
+		deletePages: "content.deletePages",
+		deletePublishedPages: "content.deletePublishedPages",
+		editContentPages: "content.editContentPages",
+	});
 
-	const defaultTab = isAllowedToEditContentPage ? "edit" : "view";
+	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const [isReadOnly, setIsReadOnly] = useState(false);
@@ -86,18 +92,26 @@ const PageEditor = (props: IProps) => {
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [toastMsg, setToastMsg] = useState<string | null>(null);
 	const [scheduleDate, setScheduleDate] = useState({ date: dateToString(new Date(), "yyy/MM/dd"), time: "12:00 am" });
-	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
-	const { isOpen, toggleModal } = useModal();
-	const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
-	const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
-	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
-	const { isOpen: isDirtyNavigateOpen, toggleModal: toggleDirtyNavigateModal } = useModal();
 	const [pendingNavigateCallback, setPendingNavigateCallback] = useState<(() => void) | null>(null);
 	const [errorPagesChecked, setErrorPagesChecked] = useState(false);
+	const [headingsFilter, setHeadingsFilter] = useState<HeadingFilter>("all");
+	const [keywordsFilter, setKeywordsFilter] = useState<string[]>([]);
 	const browserRef = useRef<HTMLDivElement>(null);
 
+	const { isOpen, toggleModal } = useModals([
+		"userEditing",
+		"unpublish",
+		"delete",
+		"schedule",
+		"cancelSchedule",
+		"restore",
+		"headingsPreview",
+		"keywordsPreview",
+		"dirtyNavigate",
+	]);
+
+	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
+
 	const isGlobal = editorContent && editorContent.origin === "GLOBAL";
 	const isEditable = editorContent?.editable;
 	const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
@@ -107,11 +121,13 @@ const PageEditor = (props: IProps) => {
 	const isTranslated = pageLanguages.length > 1;
 	const structuredData = editorContent ? editorContent.structuredData : "";
 	const isEditLive = isPublished && hasDraft;
-	const isAllowedToDelete = (isPublished && isAllowedToDeletePublishedPage) || (!isPublished && isAllowedToDeletePage);
+	const isAllowedToDelete =
+		(isPublished && isAllowedTo.deletePublishedPages) || (!isPublished && isAllowedTo.deletePages);
 	const canBeUnpublished = editorContent?.canBeUnpublished;
 	const deleteHelpText = !canBeUnpublished ? "This is the canonical site of the page. You cannot unpublish it." : null;
 	const isScheduled = !!editorContent && !!editorContent.publicationScheduled;
 	const isDeleted = editorContent.deleted;
+	const defaultContentTab = "content";
 
 	const errorNotificationText =
 		"There are some errors on the page so you can not publish yet. Please review them in the error panel.";
@@ -126,13 +142,13 @@ const PageEditor = (props: IProps) => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const { pageID, getPage, setTab, sendPagePing } = props;
-		const defaultTab = "content";
+		const { pageID, getPage, sendPagePing } = props;
+
 		const handleGetPage = async () => {
 			await getPage(pageID);
 		};
 
-		setTab(defaultTab);
+		setTab(defaultContentTab);
 		resetDirty();
 		setToastMsg(null);
 		handleGetPage();
@@ -152,11 +168,11 @@ const PageEditor = (props: IProps) => {
 		const { pageID, sendPagePing, currentUserID } = props;
 		if (userEditing && userEditing.id !== currentUserID) {
 			setIsReadOnly(true);
-			!isOpen && toggleModal();
+			!isOpen("userEditing") && toggleModal("userEditing");
 		} else {
 			setIsReadOnly(false);
 			pageID && sendPagePing(pageID);
-			isOpen && toggleModal();
+			isOpen("userEditing") && toggleModal("userEditing");
 		}
 	}, [userEditing]);
 
@@ -179,7 +195,7 @@ const PageEditor = (props: IProps) => {
 		const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
 		const isDeleted = deleteAllVersions ? await deleteBulk(allPageVersions) : await deletePage();
 
-		toggleDeleteModal();
+		toggleModal("delete");
 		if (isDeleted) {
 			setRoute(path);
 		}
@@ -265,7 +281,7 @@ const PageEditor = (props: IProps) => {
 		discardDraft();
 	};
 
-	const handleDiscarChanges = () => {
+	const handleDiscardChanges = () => {
 		const { getPage, pageID } = props;
 		resetDirty();
 
@@ -285,7 +301,7 @@ const PageEditor = (props: IProps) => {
 		const saved = await schedulePublication(dateString, isDraft);
 		if (saved) {
 			resetDirty();
-			toggleScheduleModal();
+			toggleModal("schedule");
 		}
 	};
 
@@ -294,7 +310,7 @@ const PageEditor = (props: IProps) => {
 		if (saved) {
 			setScheduleDate({ date: "", time: "12:00 am" });
 			resetDirty();
-			toggleCancelScheduleModal();
+			toggleModal("cancelSchedule");
 		}
 	};
 
@@ -315,7 +331,7 @@ const PageEditor = (props: IProps) => {
 						}
 					: {
 							label: status === pageStatus.UPLOAD_PENDING ? "Cancel publication" : "Unpublish",
-							action: hasDraft ? toggleUnpublishModal : unpublishPage,
+							action: hasDraft ? () => toggleModal("unpublish") : unpublishPage,
 							disabled: !canBeUnpublished,
 							helpText: deleteHelpText,
 						};
@@ -332,24 +348,24 @@ const PageEditor = (props: IProps) => {
 
 	const menuOptions = [];
 
-	if (isAllowedToPublishPages && !isScheduled && !isPublished && props.pageStatus !== pageStatus.OFFLINE_PENDING) {
+	if (isAllowedTo.publishPages && !isScheduled && !isPublished && props.pageStatus !== pageStatus.OFFLINE_PENDING) {
 		menuOptions.push({
 			label: "Schedule",
 			icon: "calendar",
-			action: toggleScheduleModal,
+			action: () => toggleModal("schedule"),
 		});
 	}
 
-	if (isAllowedToPublishPages && isScheduled) {
+	if (isAllowedTo.publishPages && isScheduled) {
 		menuOptions.push({
 			label: "Cancel Schedule",
 			icon: "cancelEvent",
-			action: toggleCancelScheduleModal,
+			action: () => toggleModal("cancelSchedule"),
 		});
 	}
 
 	if (
-		isAllowedToEditContentPage &&
+		isAllowedTo.editContentPages &&
 		(props.pageStatus === pageStatus.PUBLISHED ||
 			props.pageStatus === pageStatus.OFFLINE ||
 			props.pageStatus === pageStatus.OFFLINE_PENDING ||
@@ -363,19 +379,19 @@ const PageEditor = (props: IProps) => {
 		});
 	}
 
-	if (props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty && isAllowedToPublishPages) {
+	if (props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty && isAllowedTo.publishPages) {
 		menuOptions.push({
 			label: "Unpublish",
 			icon: "offline",
-			action: isDraft ? toggleUnpublishModal : unpublishPage,
+			action: isDraft ? () => toggleModal("unpublish") : unpublishPage,
 		});
 	}
 
-	if (isAllowedToEditContentPage && !isScheduled && (isDraft || (isPublished && isDirty))) {
+	if (isAllowedTo.editContentPages && !isScheduled && (isDraft || (isPublished && isDirty))) {
 		menuOptions.push({
 			label: "Discard changes",
 			icon: "close",
-			action: isDraft ? handleDiscardDraft : handleDiscarChanges,
+			action: isDraft ? handleDiscardDraft : handleDiscardChanges,
 		});
 	}
 
@@ -383,13 +399,13 @@ const PageEditor = (props: IProps) => {
 		menuOptions.push({
 			label: "Delete page",
 			icon: "delete",
-			action: toggleDeleteModal,
+			action: () => toggleModal("delete"),
 		});
 	}
 
 	const downArrowMenu = {
 		displayed: !isReadOnly && !isDeleted,
-		button: isAllowedToPublishPages ? getPublishButton(props.pageStatus) : undefined,
+		button: isAllowedTo.publishPages ? getPublishButton(props.pageStatus) : undefined,
 		options: !isGlobal ? menuOptions : [],
 	};
 
@@ -437,7 +453,7 @@ const PageEditor = (props: IProps) => {
 	}
 
 	let availableLanguages = siteLanguages;
-	if (!isTemplateActivated || hasDeactivatedModules || !isAllowedToCreatePages || isDeleted) {
+	if (!isTemplateActivated || hasDeactivatedModules || !isAllowedTo.createPages || isDeleted) {
 		const pageLanguagesIDs = pageLanguages.map((language) => language.languageId);
 		availableLanguages = siteLanguages.filter((language) => {
 			return pageLanguagesIDs.includes(language.id);
@@ -462,7 +478,7 @@ const PageEditor = (props: IProps) => {
 		}
 	};
 
-	const rightButtonProps = isAllowedToEditContentPage
+	const rightButtonProps = isAllowedTo.editContentPages
 		? {
 				label: isSaving ? "Saving" : getSaveLabel(),
 				disabled:
@@ -539,33 +555,33 @@ const PageEditor = (props: IProps) => {
 		props.setHistoryPush(backLinkRoute, false);
 	};
 
-	const mainAction = { title: "Preview Page", onClick: toggleModal };
+	const mainAction = { title: "Preview Page", onClick: () => toggleModal("userEditing") };
 	const secondaryAction = { title: "Ok, go back", onClick: handleGoBack };
 
-	const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
+	const mainUnpublishAction = { title: "Ok", onClick: () => toggleModal("unpublish") };
 
 	const mainDeleteModalAction = {
 		title: "Delete page",
 		onClick: removePage,
 	};
 
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+	const secondaryDeleteModalAction = { title: "Cancel", onClick: () => toggleModal("delete") };
 
 	const mainScheduleModalAction = {
 		title: "Schedule",
 		onClick: handleSchedulePublication,
 	};
 
-	const secondaryScheduleModalAction = { title: "Cancel", onClick: toggleScheduleModal };
+	const secondaryScheduleModalAction = { title: "Cancel", onClick: () => toggleModal("schedule") };
 
 	const mainCancelScheduleModalAction = {
 		title: "Cancel Schedule",
 		onClick: handleCancelSchedulePublication,
 	};
 
-	const secondaryCancelScheduleModalAction = { title: "Back", onClick: toggleCancelScheduleModal };
+	const secondaryCancelScheduleModalAction = { title: "Back", onClick: () => toggleModal("cancelSchedule") };
 
-	const tabIcons = isAllowedToEditContentPage
+	const tabIcons = isAllowedTo.editContentPages
 		? [
 				{ name: "edit", text: "Edit mode" },
 				{ name: "view", text: "Preview mode" },
@@ -583,6 +599,7 @@ const PageEditor = (props: IProps) => {
 		icons: tabIcons,
 		selectedTab,
 		action: (tab: string) => handleSelectedTab(tab),
+		disabled: isOpen("headingsPreview") || isOpen("keywordsPreview"),
 	};
 
 	const contentLanguages: ILanguage[] = [];
@@ -610,7 +627,7 @@ const PageEditor = (props: IProps) => {
 			await getPage(selectedPageLanguage.pageId, false, isDraft);
 			resetDirty();
 		} else {
-			isAllowedToEditContentPage && setSelectedTab("edit");
+			isAllowedTo.editContentPages && setSelectedTab("edit");
 			createNewTranslation(true);
 			await getPage(pageID);
 		}
@@ -619,18 +636,40 @@ const PageEditor = (props: IProps) => {
 	const handleRestorePage = async () => {
 		const isRestored = await restorePage(pageID);
 		if (isRestored) {
-			isRestoreOpen && toggleRestoreModal();
+			isOpen("restore") && toggleModal("restore");
 			await getPage(pageID);
 		}
 	};
 
+	const handleAddKeywords = (newKeywords: string[]) => {
+		const keywords: string[] = [...editorContent.metaKeywords, ...newKeywords];
+		updateEditorContent(0, "metaKeywords", keywords);
+		handleSavePage();
+	};
+
+	const handledeleteKeyword = (keyword: string) => {
+		const newKeywords = (editorContent.metaKeywords as string[]).filter((key) => key !== keyword);
+		updateEditorContent(0, "metaKeywords", newKeywords);
+		handleSavePage();
+	};
+
+	const handleToggleHeadingsEditor = () => {
+		toggleModal("headingsPreview");
+		setTab(defaultContentTab);
+	};
+
+	const handleToggleKeywordsEditor = () => {
+		toggleModal("keywordsPreview");
+		setTab(defaultContentTab);
+	};
+
 	const onNavigateWithDirty = (navigateCallback: () => void) => {
 		setPendingNavigateCallback(() => navigateCallback);
-		toggleDirtyNavigateModal();
+		toggleModal("dirtyNavigate");
 	};
 
 	const handleConfirmDirtyNavigation = () => {
-		toggleDirtyNavigateModal();
+		toggleModal("dirtyNavigate");
 		if (pendingNavigateCallback) {
 			pendingNavigateCallback();
 			setPendingNavigateCallback(null);
@@ -638,7 +677,7 @@ const PageEditor = (props: IProps) => {
 	};
 
 	const handleCancelDirtyNavigation = () => {
-		toggleDirtyNavigateModal();
+		toggleModal("dirtyNavigate");
 		setPendingNavigateCallback(null);
 	};
 
@@ -704,7 +743,7 @@ const PageEditor = (props: IProps) => {
 									type="error"
 									text={deletedNotificationText}
 									btnText="Restore page"
-									onClick={toggleRestoreModal}
+									onClick={() => toggleModal("restore")}
 								/>
 							</S.NotificationWrapper>
 						)}
@@ -736,6 +775,12 @@ const PageEditor = (props: IProps) => {
 								setNotification={setNotification}
 								isEditLive={isEditLive}
 								isDisabled={isDeleted}
+								toggleHeadingsPreview={handleToggleHeadingsEditor}
+								isHeadingsPreviewOpen={isOpen("headingsPreview")}
+								headingsFilter={headingsFilter}
+								toggleKeywordsPreview={handleToggleKeywordsEditor}
+								isKeywordsPreviewOpen={isOpen("keywordsPreview")}
+								keywordsFilter={keywordsFilter}
 								isDirty={isDirty}
 								onNavigateWithDirty={onNavigateWithDirty}
 							/>
@@ -749,14 +794,14 @@ const PageEditor = (props: IProps) => {
 				)}
 
 				<Modal
-					isOpen={isOpen}
-					hide={toggleModal}
+					isOpen={isOpen("userEditing")}
+					hide={() => toggleModal("userEditing")}
 					size="S"
 					title="This page is currently being edited"
 					mainAction={mainAction}
 					secondaryAction={secondaryAction}
 				>
-					{isOpen && (
+					{isOpen("userEditing") && (
 						<S.ModalContent>
 							<p>
 								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview the page but{" "}
@@ -766,13 +811,13 @@ const PageEditor = (props: IProps) => {
 					)}
 				</Modal>
 				<Modal
-					isOpen={isUnpublishOpen}
-					hide={toggleUnpublishModal}
+					isOpen={isOpen("unpublish")}
+					hide={() => toggleModal("unpublish")}
 					size="S"
 					title="Unpublish Modified Page"
 					mainAction={mainUnpublishAction}
 				>
-					{isUnpublishOpen && (
+					{isOpen("unpublish") && (
 						<S.ModalContent>
 							<p>
 								There are some saved changes that are not published on this page. To Unpublish this page,{" "}
@@ -782,37 +827,54 @@ const PageEditor = (props: IProps) => {
 					)}
 				</Modal>
 				<DeleteModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					mainModalAction={mainDeleteModalAction}
 					secondaryModalAction={secondaryDeleteModalAction}
 					{...{ isTranslated, deleteAllVersions, setDeleteAllVersions }}
 				/>
 				<ScheduleModal
-					isOpen={isScheduleOpen}
-					toggleModal={toggleScheduleModal}
+					isOpen={isOpen("schedule")}
+					toggleModal={() => toggleModal("schedule")}
 					mainModalAction={mainScheduleModalAction}
 					secondaryModalAction={secondaryScheduleModalAction}
 					scheduleDate={scheduleDate}
 					setScheduleDate={setScheduleDate}
 				/>
 				<CancelScheduleModal
-					isOpen={isCancelScheduleOpen}
-					toggleModal={toggleCancelScheduleModal}
+					isOpen={isOpen("cancelSchedule")}
+					toggleModal={() => toggleModal("cancelSchedule")}
 					mainModalAction={mainCancelScheduleModalAction}
 					secondaryModalAction={secondaryCancelScheduleModalAction}
 				/>
 				<RestoreModal
-					isOpen={isRestoreOpen}
-					toggleModal={toggleRestoreModal}
+					isOpen={isOpen("restore")}
+					toggleModal={() => toggleModal("restore")}
 					{...{
 						isChild: false,
 						hasIssues: schemaVersion !== editorContent.schemaVersionTimestamp,
 						restorePage: handleRestorePage,
 					}}
 				/>
+				<HeadingsPreviewModal
+					isOpen={isOpen("headingsPreview")}
+					toggleModal={handleToggleHeadingsEditor}
+					browserRef={browserRef}
+					headingsFilter={headingsFilter}
+					setHeadingsFilter={setHeadingsFilter}
+				/>
+				<KeywordsPreviewModal
+					isOpen={isOpen("keywordsPreview")}
+					toggleModal={handleToggleKeywordsEditor}
+					browserRef={browserRef}
+					keywords={editorContent?.metaKeywords || []}
+					keywordsFilter={keywordsFilter}
+					setKeywordsFilter={setKeywordsFilter}
+					addKeywords={handleAddKeywords}
+					deleteKeyword={handledeleteKeyword}
+				/>
 				<Modal
-					isOpen={isDirtyNavigateOpen}
+					isOpen={isOpen("dirtyNavigate")}
 					hide={handleCancelDirtyNavigation}
 					size="S"
 					title="Unsaved changes"
@@ -895,6 +957,7 @@ const mapDispatchToProps = {
 	schedulePublication: pageEditorActions.schedulePublication,
 	setCurrentPageID: pageEditorActions.setCurrentPageID,
 	restorePage: pageEditorActions.restorePage,
+	updateEditorContent: pageEditorActions.updateEditorContent,
 };
 
 interface IPageEditorDispatchProps {
@@ -922,6 +985,7 @@ interface IPageEditorDispatchProps {
 	schedulePublication(date: string | null, isDraft: boolean): Promise<boolean>;
 	setCurrentPageID: (currentPageID: number | null) => void;
 	restorePage(id: number | number[]): Promise<boolean>;
+	updateEditorContent(selectedEditorID: number, key: string, value: any): void;
 }
 
 type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;

package/src/modules/PublicPreview/index.tsx

@@ -67,9 +67,12 @@ const PublicPreview = () => {
 
 	if (isLoading || !state) return <Loading />;
 
+	const setBrowserRef = (ref: any) => {
+		(window as any).browserRef = ref;
+	};
+
 	return (
-		// biome-ignore lint/suspicious/noAssignInExpressions: TODO: fix this
-		<S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+		<S.Wrapper ref={setBrowserRef}>
 			<BrowserContent
 				cloudinaryName={state?.cloudinaryName}
 				theme={theme}