@griddo/ax 1.68.7 → 1.69.0

package/src/components/Fields/ReferenceField/ItemList/Item/index.tsx

@@ -1,13 +1,15 @@
 import React from "react";
+import { DraggableProvided } from "react-beautiful-dnd";
+
 import { IDataSource, IStructuredDataContent } from "@ax/types";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
 
-import { FloatingMenu, Icon, IconAction, ReorderArrows } from "@ax/components";
+import { FloatingMenu, Icon, IconAction } from "@ax/components";
 
 import * as S from "./style";
 
 const Item = (props: IProps) => {
-  const { item, handleDelete, handleReorder, index, listLength, source } = props;
+  const { item, handleDelete, listLength, source, innerRef, provided } = props;
 
   const removeItem = () => {
     handleDelete(item);
@@ -20,22 +22,12 @@ const Item = (props: IProps) => {
   );
 
   const actionMenuItem = (item: any) => (
-    <S.ActionItem key={item.icon} onClick={item.action}>
+    <S.ActionItem key={item.icon} onClick={item.action} data-testid="action-menu-item">
       <Icon name={item.icon} />
       <S.ActionText>{item.label}</S.ActionText>
     </S.ActionItem>
   );
 
-  const moveModule = (e: any, isPush: boolean) => {
-    e.preventDefault();
-    e.stopPropagation();
-    handleReorder(item, isPush);
-  };
-
-  const handleUpClick = (e: any) => moveModule(e, false);
-
-  const handleDownClick = (e: any) => moveModule(e, true);
-
   const editMenu = {
     options: [
       {
@@ -53,19 +45,18 @@ const Item = (props: IProps) => {
   );
 
   return (
-    <S.Item>
+    <S.Item ref={innerRef} data-testid="reference-field-item" {...provided?.draggableProps}>
+      {listLength > 1 && (
+        <S.HandleWrapper {...provided?.dragHandleProps}>
+          <S.IconHandleWrapper>
+            <Icon name="drag" size="16" />
+          </S.IconHandleWrapper>
+        </S.HandleWrapper>
+      )}
       <S.TextWrapper>
         <S.Header>
           <S.Type>{source?.title.toUpperCase()}</S.Type>
           {item.modified && <S.Date>{getFormattedDateWithTimezone(item.modified, "d MMM Y")}</S.Date>}
-          <S.ReorderArrowsWrapper>
-            <ReorderArrows
-              handleDownClick={handleDownClick}
-              handleUpClick={handleUpClick}
-              listLength={listLength}
-              index={index}
-            />
-          </S.ReorderArrowsWrapper>
         </S.Header>
         <S.Title>{item.content.title}</S.Title>
       </S.TextWrapper>
@@ -76,11 +67,11 @@ const Item = (props: IProps) => {
 
 interface IProps {
   item: IStructuredDataContent;
-  index: number;
   listLength: number;
   source: IDataSource;
   handleDelete(item: IStructuredDataContent): void;
-  handleReorder(item: any, isPush: boolean): void;
+  innerRef: any;
+  provided: DraggableProvided;
 }
 
 export default Item;

package/src/components/Fields/ReferenceField/ItemList/Item/style.tsx

@@ -20,10 +20,11 @@ const IconActionWrapper = styled.div`
 const Item = styled.li`
   position: relative;
   display: flex;
+  align-items: stretch;
   background-color: ${(p) => p.theme.color.uiBarBackground};
   border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   border-radius: ${(p) => p.theme.radii.s};
-  padding: ${(p) => p.theme.spacing.s};
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} ${p.theme.spacing.s} ${p.theme.spacing.xs}`};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
   cursor: pointer;
   &:hover {
@@ -49,7 +50,7 @@ const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-right: ${p => p.theme.spacing.l};
+  padding-right: ${(p) => p.theme.spacing.l};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
@@ -66,7 +67,6 @@ const Type = styled.div`
 const Title = styled.div`
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  max-width: 75%;
 `;
 
 const ActionMenu = styled.ul`
@@ -104,19 +104,25 @@ const ActionItem = styled.li`
 const ButtonsWrapper = styled.span`
   display: flex;
   position: absolute;
-  bottom: ${p => p.theme.spacing.xs};
-  right: ${p => p.theme.spacing.xs};
+  bottom: ${(p) => p.theme.spacing.xs};
+  right: ${(p) => p.theme.spacing.xs};
 `;
 
-const ReorderArrowsWrapper = styled.div`
-  position: absolute;
-  right: 0;
-  bottom: -${p => p.theme.spacing.xxs};
-  white-space: nowrap;
+const HandleWrapper = styled.div`
   display: flex;
-  justify-content: flex-end;
-  min-width: ${p => p.theme.spacing.l};
-`
+  align-items: center;
+  padding-right: ${(p) => p.theme.spacing.xxs};
+`;
+
+const IconHandleWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.textLowEmphasis};
+    }
+  }
+`;
 
 export {
   IconActionWrapper,
@@ -130,5 +136,6 @@ export {
   ActionText,
   ActionItem,
   ButtonsWrapper,
-  ReorderArrowsWrapper
-}
+  HandleWrapper,
+  IconHandleWrapper,
+};

package/src/components/Fields/ReferenceField/ItemList/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 
 import { structuredData } from "@ax/api";
 import { IDataSource, IRootState, IStructuredDataContent } from "@ax/types";
@@ -58,23 +59,53 @@ const ItemList = (props: IProps) => {
     }
   };
 
-  return (
-    <S.ItemList>
-      {selectedItems &&
-        selectedItems.map((item: IStructuredDataContent, index: number) => {
-          const source = sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
-          return (
+  const onDragEnd = (result: DropResult) => {
+    if (!result.destination) {
+      return;
+    }
+
+    if (result.destination.index === result.source.index) {
+      return;
+    }
+
+    const item = selectedItems.find((elem: IStructuredDataContent) => elem.id === parseInt(result.draggableId));
+    setReorderElements(item, result.destination.index);
+  };
+
+  const ComponentList = React.memo(function ComponentList({ components }: any) {
+    return components.map((item: IStructuredDataContent, index: number) => {
+      const source = sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
+      return (
+        <Draggable draggableId={`${item.id}`} index={index} key={item.id}>
+          {(provided) => (
             <Item
-              key={index}
               item={item}
               handleDelete={handleDelete}
-              handleReorder={setReorderElements}
-              index={index}
               listLength={selectedItems.length}
               source={source}
+              innerRef={provided.innerRef}
+              provided={provided}
             />
-          );
-        })}
+          )}
+        </Draggable>
+      );
+    });
+  });
+
+  return (
+    <S.ItemList>
+      {selectedItems && (
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="referenceList">
+            {(provided) => (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                <ComponentList components={selectedItems} />
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      )}
     </S.ItemList>
   );
 };

package/src/components/Fields/ReferenceField/ManualPanel/Item/index.tsx

@@ -15,7 +15,7 @@ const Item = (props: IProps) => {
   };
 
   return (
-    <S.Item onClick={handleItemClick}>
+    <S.Item onClick={handleItemClick} data-testid="manual-panel-item">
       <CheckField name="check" value={item.id} checked={isChecked} disabled={disabled} />
       <S.TextWrapper>
         <S.Header>

package/src/components/Fields/ReferenceField/index.tsx

@@ -13,13 +13,13 @@ import { useReference, ReferenceProvider } from "./Context";
 
 import * as S from "./style";
 
-const ReferenceFieldWithProvider = (props: IProps) => (
+const ReferenceFieldWithProvider = (props: IReferenceFieldProps) => (
   <ReferenceProvider modes={props.selectionType}>
     <ReferenceField {...props} />
   </ReferenceProvider>
 );
 
-const ReferenceField = (props: IProps) => {
+const ReferenceField = (props: IReferenceFieldProps) => {
   const {
     source,
     value,
@@ -139,9 +139,8 @@ const ReferenceField = (props: IProps) => {
     const directionLabel = state.orderDirection === "ASC" ? "(ascendent)" : "(descendent)";
     return `${orderLabel} ${directionLabel}`;
   };
-
   const autoData = (
-    <S.DataWrapper>
+    <S.DataWrapper data-testid="auto-data-wrapper">
       <S.SourcesWrapper>
         {value &&
           value.source &&
@@ -182,7 +181,7 @@ const ReferenceField = (props: IProps) => {
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="reference-field-wrapper">
       <S.Label>
         Elements
         <Asterisk />
@@ -218,7 +217,7 @@ const ReferenceField = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IReferenceFieldProps {
   source: string[];
   value: any;
   onChange: (value: any) => void;

package/src/components/Fields/Wysiwyg/index.tsx

@@ -9,7 +9,7 @@ import { wysiwygConfig, buttons, buttonsFull } from "./config";
 import "./vendors";
 import * as S from "./style";
 
-const Wysiwyg = (props: IProps): JSX.Element => {
+const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
   const {
     value,
     error,
@@ -64,13 +64,13 @@ const Wysiwyg = (props: IProps): JSX.Element => {
   const config = { ...wysiwygConfig, ...dynamicConfig };
 
   return (
-    <S.EditorWrapper error={error} disabled={disabled}>
+    <S.EditorWrapper error={error} disabled={disabled} data-testid="wysiwyg-wrapper">
       <FroalaEditor tag="textarea" model={value} config={config} onModelChange={handleChange} />
     </S.EditorWrapper>
   );
 };
 
-interface IWysiwygProps {
+interface IProps {
   name: string;
   value: string;
   title: string;
@@ -97,6 +97,6 @@ const mapDispatchToProps = {
   uploadImage: galleryActions.uploadImage,
 };
 
-type IProps = IWysiwygProps & IDispatchProps;
+export type IWysiwygProps = IProps & IDispatchProps;
 
 export default connect(mapStateToProps, mapDispatchToProps)(Wysiwyg);

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -145,10 +145,18 @@ const GalleryDetailPanel = (props: IProps) => {
           <IconAction icon="OpenOutside" size="m" onClick={handleOpenUrl} />
         </S.ImageWrapper>
         <S.ImageName>{imageSelected.name}</S.ImageName>
-        <S.Date><strong>Uploaded:</strong> {getFormattedDateWithTimezone(imageSelected.published, "d MMM Y")}</S.Date>
-        <S.Type><strong>Type:</strong> {getFileExtension(imageSelected.name)}</S.Type>
-        <S.ImageSize><strong>Size:</strong> {formatBytes(imageSelected.size)}</S.ImageSize>
-        <S.ImageDimensions><strong>Resolution:</strong> {dimensions}</S.ImageDimensions>
+        <S.Date>
+          <strong>Uploaded:</strong> {getFormattedDateWithTimezone(imageSelected.published, "d MMM Y")}
+        </S.Date>
+        <S.Type>
+          <strong>Type:</strong> {getFileExtension(imageSelected.name)}
+        </S.Type>
+        <S.ImageSize>
+          <strong>Size:</strong> {formatBytes(imageSelected.size)}
+        </S.ImageSize>
+        <S.ImageDimensions>
+          <strong>Resolution:</strong> {dimensions}
+        </S.ImageDimensions>
       </S.ImageInfoWrapper>
       <S.FormWrapper>
         <FieldsBehavior

package/src/components/Gallery/GalleryPanel/index.tsx

@@ -7,8 +7,16 @@ import DetailPanel from "./DetailPanel";
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-  const { isImageSelected, imageSelected, validFormats, setImage, isGlobalTab, site, selectedTab, refreshImages } =
-    props;
+  const {
+    isImageSelected,
+    imageSelected,
+    validFormats,
+    setImage,
+    isGlobalTab,
+    site,
+    selectedTab,
+    refreshImages,
+  } = props;
   const allowUpload = !isGlobalTab || !selectedTab;
 
   return (

package/src/components/Gallery/index.tsx

@@ -56,6 +56,10 @@ const Gallery = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [galleryScope]);
 
+  useEffect(() => {
+    setImageSelectedData(data);
+  }, [data]);
+
   useEffect(() => {
     const handleScroll = () => {
       const loadMore =
@@ -172,7 +176,7 @@ const Gallery = (props: IProps): JSX.Element => {
                         <S.GridItem key={item.name + index} orientation={item.orientation}>
                           <S.ImageWrapper
                             onClick={handleClick(item)}
-                            selected={isSelected || selectedImage === item.id}
+                            selected={isSelected}
                             orientation={item.orientation}
                           >
                             <img src={item.thumb} alt={item.alt} />

package/src/components/MainWrapper/AppBar/index.tsx

@@ -208,7 +208,7 @@ const AppBar = (props: IProps): JSX.Element => {
             <S.Separator />
           </>
         )}
-        {errors && errors.length > 0 && (
+        {isFromEditor && errors && errors.length > 0 && (
           <>
             <S.IconStatusWrapper>
               <FloatingMenu Button={ErrorCenterBtn} isInAppBar={true} position="left" offset={-20}>

package/src/containers/App/reducer.tsx

@@ -44,6 +44,7 @@ export interface IGlobalSettings {
   siteLogoMini: string;
   welcomeText1: string;
   welcomeText2: string;
+  skipReviewOnPublish?: boolean;
 }
 
 export const initialState = {

package/src/containers/Gallery/actions.tsx

@@ -67,8 +67,8 @@ function getSiteImages(props: IGetSiteImages): (dispatch: Dispatch, getState: ()
           setData({
             items: images,
             page,
-            isImageSelected: false,
-            imageSelected: null,
+            isImageSelected: data.isImageSelected,
+            imageSelected: data.imageSelected,
             isFinished: result.data.items.length < items,
           })
         );
@@ -86,7 +86,7 @@ function selectImage(item: IImage): (dispatch: Dispatch, getState: () => IRootSt
     const {
       gallery: { data },
     } = getState();
-    if (data.imageSelected === item) {
+    if (data?.imageSelected?.id === item.id) {
       dispatch(setData({ ...data, imageSelected: null, isImageSelected: false }));
     } else {
       dispatch(setData({ ...data, imageSelected: item, isImageSelected: true }));
@@ -147,10 +147,16 @@ function updateImage(
 }
 
 function deleteImage(imageID: number): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
-  return async (dispatch) => {
+  return async (dispatch, getState) => {
     try {
+      const {
+        gallery: { data },
+      } = getState();
       const responseActions = {
-        handleSuccess: () => true,
+        handleSuccess: () => {
+          dispatch(setData({ ...data, isImageSelected: false, imageSelected: null }));
+          return true;
+        },
         handleError: (response: any) => {
           appActions.handleError(response)(dispatch);
           return false;

package/src/containers/Navigation/Defaults/actions.tsx

@@ -573,7 +573,7 @@ function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, g
 function moveModule(
   elementID: number,
   content: any,
-  isPush: boolean,
+  newIndex: number,
   key: string
 ): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
@@ -584,7 +584,7 @@ function moveModule(
 
       const contentElements = [...selectedContent[key]];
       const { element: selectedModule } = findByEditorID(editorContent, selectedContent.editorID);
-      selectedModule[key] = moveElement(elementID, contentElements, isPush);
+      selectedModule[key] = moveElement(elementID, contentElements, newIndex);
 
       generateContent(editorContent, dispatch, getState);
     } catch {

package/src/containers/PageEditor/actions.tsx

@@ -525,6 +525,9 @@ function updatePageStatus(
     try {
       dispatch(setIsSaving(true));
       const {
+        app: {
+          globalSettings: { skipReviewOnPublish },
+        },
         pageEditor: {
           editorContent: { header, footer },
         },
@@ -532,7 +535,7 @@ function updatePageStatus(
       } = getState();
 
       const pagesWithErrors: number[] = [];
-      if (status === pageStatus.UPLOAD_PENDING && updatedFromList) {
+      if (status === pageStatus.UPLOAD_PENDING && updatedFromList && !skipReviewOnPublish && ids.length > 1) {
         const getPagesParams = {
           siteID: currentSiteInfo?.id,
           filterPages: ids,
@@ -829,7 +832,10 @@ function copyModule(editorID: number): (dispatch: Dispatch, getState: any) => bo
   };
 }
 
-function pasteModule(editorID: number): (dispatch: Dispatch, getState: any) => Promise<{ error?: INotification }> {
+function pasteModule(
+  editorID: number,
+  key: string
+): (dispatch: Dispatch, getState: any) => Promise<{ error?: INotification }> {
   return async (dispatch, getState) => {
     const {
       pageEditor: { moduleCopy },
@@ -873,7 +879,7 @@ function pasteModule(editorID: number): (dispatch: Dispatch, getState: any) => P
       }
     }
 
-    const itemsArr = originalElement.modules;
+    const itemsArr = originalElement[key];
     itemsArr.push(validatedModuleCopy);
 
     const updatedPageContent = {
@@ -884,7 +890,7 @@ function pasteModule(editorID: number): (dispatch: Dispatch, getState: any) => P
 
     const { sections: generatedSections } = getStateValues(getState);
     const { element: generatedElement } = findByEditorID(generatedSections, editorID);
-    const pastedEditorID = generatedElement.modules[itemsArr.length - 1].editorID;
+    const pastedEditorID = generatedElement[key][itemsArr.length - 1].editorID;
 
     localStorage.setItem("selectedID", `${pastedEditorID}`);
     return { error };
@@ -1059,7 +1065,7 @@ function resetPageEditor(): (dispatch: Dispatch) => Promise<void> {
 function moveElement(
   elementID: number,
   content: any,
-  isPush: boolean,
+  newIndex: number,
   key: string
 ): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
@@ -1069,7 +1075,7 @@ function moveElement(
         elementID,
         content,
         selectedContent,
-        isPush,
+        newIndex,
         page: editorContent.editorContent,
         key,
       });
@@ -1106,6 +1112,8 @@ function validatePage(publish?: boolean): (dispatch: Dispatch, getState: any) =>
   return async (dispatch, getState) => {
     try {
       const { editorContent } = getStateValues(getState);
+      const { component } = editorContent;
+      const isGlobalPage = component === "GlobalPage";
       const content = deepClone(editorContent);
 
       const {
@@ -1133,7 +1141,10 @@ function validatePage(publish?: boolean): (dispatch: Dispatch, getState: any) =>
       const fieldErrors = findFieldsErrors(content);
 
       errors = [...errors, ...fieldErrors];
-      const packagesActivationErrors = findPackagesActivationErrors(pageEditor, modules, templates);
+      let packagesActivationErrors;
+      if (!isGlobalPage) {
+        packagesActivationErrors = findPackagesActivationErrors(pageEditor, modules, templates);
+      }
       errors = packagesActivationErrors ? [...errors, packagesActivationErrors] : errors;
 
       let warnings: IErrorItem[] = [];

package/src/forms/elements.tsx

@@ -150,11 +150,10 @@ const updateByEditorID = (content: any, editorID: number, contentKey: string, va
   return content;
 };
 
-const moveElement = (elementID: number, arr: any[], isPush: boolean, idKey = "editorID") => {
+const moveElement = (elementID: number, arr: any[], newIndex: number, idKey = "editorID") => {
   const arrCopy = [...arr];
   if (arrCopy.length <= 1) return arrCopy;
   const elementIndex = arrCopy.findIndex((el: any) => el[idKey] === elementID);
-  const newIndex = isPush ? elementIndex + 1 : elementIndex - 1;
   const element = { ...arrCopy[elementIndex] };
   arrCopy.splice(elementIndex, 1);
   arrCopy.splice(newIndex, 0, element);
@@ -163,12 +162,12 @@ const moveElement = (elementID: number, arr: any[], isPush: boolean, idKey = "ed
 };
 
 const moveModule = (params: IMoveElementParams) => {
-  const { elementID, content, selectedContent, isPush, page, key } = params;
+  const { elementID, content, selectedContent, newIndex, page, key } = params;
   const isPage = ["Page", "GlobalPage"].includes(selectedContent.component);
   let newContent;
   if (isPage) {
     const { modules } = content;
-    const newModules = moveElement(elementID, modules, isPush);
+    const newModules = moveElement(elementID, modules, newIndex);
     const { template } = selectedContent;
     const selectedSection = Object.keys(template).find(
       (key: string) => template[key] && template[key].editorID === content.editorID
@@ -189,7 +188,7 @@ const moveModule = (params: IMoveElementParams) => {
     const contentElements = content[key];
     const { template } = page;
     const { element: selectedModule } = findByEditorID(page, selectedContent.editorID);
-    selectedModule[key] = moveElement(elementID, contentElements, isPush);
+    selectedModule[key] = moveElement(elementID, contentElements, newIndex);
 
     newContent = {
       ...page,
@@ -216,7 +215,7 @@ function replaceElements(elements: any, elemType: string): any {
 interface IMoveElementParams {
   elementID: number;
   content: any;
-  isPush: boolean;
+  newIndex: number;
   selectedContent: any;
   page: any;
   key: string;

package/src/helpers/arrays.tsx

@@ -1,10 +1,9 @@
 const isEmptyArray = (arr: any[]) => arr && arr.length === 0;
 
-const moveArrayElement = (element: unknown, arr: unknown[], isPush: boolean): Array<unknown> => {
+const moveArrayElement = (element: unknown, arr: unknown[], newIndex: number): Array<unknown> => {
   const arrCopy = [...arr];
   if (arrCopy.length <= 1) return arrCopy;
   const elementIndex = arrCopy.findIndex((el: unknown) => el === element);
-  const newIndex = isPush ? elementIndex + 1 : elementIndex - 1;
   const el = arrCopy[elementIndex];
   arrCopy.splice(elementIndex, 1);
   arrCopy.splice(newIndex, 0, el);

package/src/modules/Content/PageItem/index.tsx

@@ -37,6 +37,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     addCategoryColors,
     dataPacks,
     sites,
+    skipReview,
   } = props;
   const { isSelected, siteLanguages, page, lang, isDuplicable } = item;
   const {
@@ -49,6 +50,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     setCurrentPageID,
     languageActions,
     duplicatePage,
+    validatePage,
+    getPage,
     removePageFromSite,
     deleteBulk,
     getDataPack,
@@ -181,8 +184,13 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   };
 
   const publishPage = async () => {
-    await updatePageStatus([page.id], pageStatus.UPLOAD_PENDING, true);
-    await getSiteContent();
+    await getPage(page.id);
+    const isValidated = skipReview ? true : await validatePage(true);
+
+    if (isValidated) {
+      await updatePageStatus([page.id], pageStatus.UPLOAD_PENDING, true);
+      await getSiteContent();
+    }
   };
 
   const unpublishPage = async () => {
@@ -630,6 +638,8 @@ interface IPageItemProps {
     setTemplateInstanceError(error: any): void;
     getDataPack: (id: string) => Promise<void>;
     toggleCopiedToast(): void;
+    getPage(pageID?: number, global?: boolean): Promise<void>;
+    validatePage(publish?: boolean, browserRef?: any, currentPage?: IPage): Promise<boolean>;
   };
   activatedTemplates: any[];
   toggleToast(): void;
@@ -640,6 +650,7 @@ interface IPageItemProps {
   addCategoryColors(cats: string[]): void;
   dataPacks: IDataPack[];
   sites: ISite[];
+  skipReview?: boolean;
 }
 
 export default memo(PageItem);