@griddo/ax 1.63.5 → 1.64.0

package/src/modules/Content/atoms.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import { IModal } from "@ax/types";
+import { Modal, FieldsBehavior } from "@ax/components";
+
+import * as S from "./style";
+
+const DeleteModal = (props: IDeleteModal): JSX.Element => {
+  const {
+    isOpen,
+    toggleModal,
+    mainModalAction,
+    secondaryModalAction,
+    isTranslated,
+    deleteAllVersions,
+    setDeleteAllVersions,
+    title,
+  } = props;
+
+  const options = [
+    {
+      title: "Delete only this version",
+      name: "deletePage",
+      value: false,
+    },
+    {
+      title: "Delete all languages versions",
+      name: "deleteAll",
+      value: true,
+    },
+  ];
+
+  const pageTitle = title ? <strong>{title}</strong> : "this";
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Delete Page?"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+    >
+      {isTranslated ? (
+        <>
+          <S.ModalContent>
+            <p>
+              You are going to delete {pageTitle} page that have some translations associated. Choose if you want to
+              delete all languages versions or only this one.
+            </p>
+            <FieldsBehavior
+              name="removeAllVersions"
+              fieldType="RadioGroup"
+              value={deleteAllVersions}
+              options={options}
+              onChange={setDeleteAllVersions}
+            />
+          </S.ModalContent>
+        </>
+      ) : (
+        <S.ModalContent>
+          Are you sure you want to delete {pageTitle} page?
+          <br />
+          This action <strong>cannot be undone</strong>.
+        </S.ModalContent>
+      )}
+    </Modal>
+  );
+};
+
+interface IDeleteModal extends IModal {
+  isTranslated: boolean;
+  deleteAllVersions: boolean;
+  setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
+  title?: string;
+}
+
+export { DeleteModal };

package/src/modules/Content/index.tsx

@@ -39,6 +39,7 @@ import PageItem from "./PageItem";
 import StructuredDataItem from "./../StructuredData/StructuredDataList/StructuredDataItem";
 import BulkHeader from "./BulkHeader";
 import PageImporter from "./PageImporter";
+import { DeleteModal } from "./atoms";
 
 import * as S from "./style";
 
@@ -81,15 +82,18 @@ const Content = (props: IProps): JSX.Element => {
     resetPageEditor,
     removePageFromSite,
     importPageFromGlobal,
+    restorePage,
     getDataPack,
     dataPacks,
   } = props;
 
-  !currentSiteInfo && setHistoryPush("/sites", false);
+  const itemsPerPage = 50;
+  const firstPage = 1;
 
   const tableRef = useRef<HTMLDivElement>(null);
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isImporterOpen, toggleModal: toggleImporterModal } = useModal();
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
   const { setFiltersSelection, setFilterQuery, resetFilterQuery, filterValues } = useFilterQuery();
   const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
@@ -123,23 +127,9 @@ const Content = (props: IProps): JSX.Element => {
   }, {});
 
   const filterColumns = { ...extraColumns, ...defaultColumns };
-
   const initialColumns = isGlobalPages ? filterColumns : defaultColumns;
-
   const [columnsState, setColumnsState] = useState(initialColumns);
 
-  const {
-    resetBulkSelection,
-    selectedItems,
-    isSelected,
-    areItemsSelected,
-    checkState,
-    addToBulkSelection,
-    selectAllItems,
-  } = useBulkSelection(contentIds);
-
-  const itemsPerPage = 50;
-  const firstPage = 1;
   const [page, setPage] = useState(firstPage);
   const lastPage = Math.ceil(totalItems / itemsPerPage);
   const isLastItem = page === lastPage && currentSitePages.length === 1;
@@ -147,19 +137,35 @@ const Content = (props: IProps): JSX.Element => {
   const [isScrolling, setIsScrolling] = useState(false);
   const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
-  const { isVisible, toggleToast, setIsVisible } = useToast();
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [pagesToImport, setPagesToImport] = useState([]);
-
   const [isEmpty, setIsEmpty] = useState(false);
   const [emptyStateProps, setEmptyStateProps] = useState<IEmptyStateProps>({});
-
   const [removedPage, setRemovedPage] = useState<number | number[] | null>(null);
+  const [deleteAllVersions, setDeleteAllVersions] = useState(false);
+  const [arePagesTranslated, setArePagesTranslated] = useState(false);
+
+  const {
+    resetBulkSelection,
+    selectedItems,
+    isSelected,
+    areItemsSelected,
+    checkState,
+    addToBulkSelection,
+    selectAllItems,
+  } = useBulkSelection(contentIds);
+
+  const { isVisible, toggleToast, setIsVisible } = useToast();
   const {
     isVisible: isVisibleRemovedToast,
     toggleToast: toggleRemovedToast,
     setIsVisible: setIsVisibleRemovedToast,
   } = useToast();
+  const {
+    isVisible: isVisibleDeletedToast,
+    toggleToast: toggleDeletedToast,
+    setIsVisible: setIsVisibleDeletedToast,
+  } = useToast();
 
   const { categoryColors, addCategoryColors } = useCategoryColors();
 
@@ -189,16 +195,6 @@ const Content = (props: IProps): JSX.Element => {
     return params;
   }, [filter, currentSiteInfo, isStructuredData, page, searchQuery]);
 
-  const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
-
-  const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
-
-  const handleSelectAll = () => selectAllItems(bulkFilter);
-
-  const unselectAllItems = () => resetBulkSelection();
-
-  const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
-
   const getPages = (params: any, filterQuery?: any) => {
     const isStructuredDataPage = filter !== "unique-pages";
     const pageFilter = isStructuredDataPage ? filter : undefined;
@@ -263,6 +259,16 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading, currentSitePages]);
 
+  const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
+
+  const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
+
+  const handleSelectAll = () => selectAllItems(bulkFilter);
+
+  const unselectAllItems = () => resetBulkSelection();
+
+  const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
+
   const addNewData = () => {
     resetForm();
     const path = `/sites/data/${currentStructuredData.id}/editor`;
@@ -296,11 +302,17 @@ const Content = (props: IProps): JSX.Element => {
       .filter((page: IPage) => pageIds.includes(page.id) && page.origin !== "GLOBAL")
       .map((page: IPage) => page.id);
 
+    let deleted = false;
     if (filteredPageIds.length > 0) {
-      await deleteBulk(filteredPageIds);
+      deleted = await deleteBulk(filteredPageIds);
     }
     if (globalPageIds.length > 0) {
-      await removePageFromSite(globalPageIds, false);
+      deleted = await removePageFromSite(globalPageIds, false);
+    }
+
+    if (deleted) {
+      setDeletedItem(pageIds);
+      toggleDeletedToast();
     }
   };
 
@@ -313,12 +325,20 @@ const Content = (props: IProps): JSX.Element => {
           }
         })
       : await handleBulkDelete(selectedItems.all);
+    toggleDeleteModal();
     const allPageItemsSelected = selectedItems.all.length >= currentSitePages.length;
     const previousPage = page - 1;
     page > 1 && (isLastItem || allPageItemsSelected) ? setPage(previousPage) : getSiteContent();
     unselectAllItems();
   };
 
+  const handleToggleDeleteModal = () => {
+    const selectedPages = currentSitePages.filter((page) => selectedItems.all.includes(page.id));
+    const hasTranslations = selectedPages.some((page) => page.pageLanguages.length > 1);
+    setArePagesTranslated(hasTranslations);
+    toggleDeleteModal();
+  };
+
   const bulkPublishAction = async (isPublish: boolean) => {
     const { notPublished, published } = selectedItems;
 
@@ -362,7 +382,7 @@ const Content = (props: IProps): JSX.Element => {
   const Header = (
     <BulkHeader
       showBulk={areItemsSelected(contentIds)}
-      bulkDelete={bulkDelete}
+      bulkDelete={handleToggleDeleteModal}
       bulkPublish={bulkPublish}
       bulkUnpublish={bulkUnpublish}
       selectAllItems={handleSelectAll}
@@ -427,6 +447,10 @@ const Content = (props: IProps): JSX.Element => {
           setDeletedItem={setDeletedItem}
           isEditable={isDataEditable}
           activatedDataPacks={activatedDataPacks}
+          categoryColumns={categoryColumns}
+          columns={columnsState}
+          categoryColors={categoryColors}
+          addCategoryColors={addCategoryColors}
         />
       );
     });
@@ -458,7 +482,22 @@ const Content = (props: IProps): JSX.Element => {
         };
         const previousPage = page - 1 || 1;
 
-        await deletePage(deletePageParams);
+        const deleted = await deletePage(deletePageParams);
+        if (deleted) {
+          setDeletedItem(item.page.id);
+          toggleDeletedToast();
+        }
+        isLastItem && previousPage !== 1 ? setPage(previousPage) : getSiteContent();
+      };
+
+      const deleteCurrentPageBulk = async (ids: number[]) => {
+        const previousPage = page - 1 || 1;
+
+        const deleted = await deleteBulk(ids);
+        if (deleted) {
+          setDeletedItem(ids);
+          toggleDeletedToast();
+        }
         isLastItem && previousPage !== 1 ? setPage(previousPage) : getSiteContent();
       };
 
@@ -473,6 +512,7 @@ const Content = (props: IProps): JSX.Element => {
         duplicatePage,
         removePageFromSite,
         languageActions: pageLanguageActions,
+        deleteBulk: deleteCurrentPageBulk,
         getDataPack: getDataPack,
       };
 
@@ -570,6 +610,27 @@ const Content = (props: IProps): JSX.Element => {
     setCurrentFilterQuery("");
   };
 
+  const mainDeleteModalAction = {
+    title: "Delete pages",
+    onClick: bulkDelete,
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
+  const undoDeleteAction = async () => {
+    if (deletedItem) {
+      await restorePage(deletedItem);
+      getSiteContent();
+    }
+    setIsVisible(false);
+  };
+
+  const deletedToastProps = {
+    action: () => undoDeleteAction(),
+    setIsVisible: setIsVisibleDeletedToast,
+    message: "Page deleted.",
+  };
+
   return (
     <MainWrapper
       title={title}
@@ -620,8 +681,16 @@ const Content = (props: IProps): JSX.Element => {
       >
         <PageImporter structuredData={selectedOptionType} {...{ setPagesToImport }} />
       </Modal>
+      <DeleteModal
+        isOpen={isDeleteOpen}
+        toggleModal={toggleDeleteModal}
+        mainModalAction={mainDeleteModalAction}
+        secondaryModalAction={secondaryDeleteModalAction}
+        {...{ isTranslated: arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
+      />
       {isVisible && <Toast {...toastProps} />}
       {isVisibleRemovedToast && <Toast {...removedToastProps} />}
+      {isVisibleDeletedToast && <Toast {...deletedToastProps} />}
     </MainWrapper>
   );
 };
@@ -654,7 +723,7 @@ interface IDispatchProps {
   addTemplate(template: string): void;
   getSitePages(params: IGetSitePagesParams, structuredData?: string | undefined, filterQuery?: string): Promise<void>;
   updatePageStatus(ids: number[], status: string, updatePageStatus?: boolean): Promise<boolean>;
-  deletePage(params?: ISavePageParams): any;
+  deletePage(params?: ISavePageParams): Promise<boolean>;
   setHistoryPush(page: string, isEditor: boolean): any;
   setLanguage(lang: { locale: string; id: number | null }): void;
   createNewTranslation(isNewTranslation: boolean): void;
@@ -670,6 +739,7 @@ interface IDispatchProps {
   resetPageEditor(): Promise<void>;
   removePageFromSite(pageID: number | number[], refresh?: boolean): Promise<boolean>;
   importPageFromGlobal(pageID: number | number[]): Promise<boolean>;
+  restorePage(id: number | number[]): Promise<boolean>;
   getDataPack: (id: string) => Promise<void>;
 }
 
@@ -697,6 +767,7 @@ const mapDispatchToProps = {
   resetPageEditor: pageEditorActions.resetPageEditor,
   removePageFromSite: sitesActions.removePageFromSite,
   importPageFromGlobal: sitesActions.importPageFromGlobal,
+  restorePage: pageEditorActions.restorePage,
   getDataPack: dataPacksActions.getSiteDataPack,
 };
 

package/src/modules/Content/style.tsx

@@ -22,14 +22,17 @@ const PaginationWrapper = styled.span`
 `;
 
 const EmptyWrapper = styled.div`
-  height: ${p => (`calc(100vh - (${p.theme.spacing.xl} * 3))`)};
+  height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 3))`};
   display: flex;
   align-items: center;
 `;
 
-export {
-  ContentListWrapper,
-  TableWrapper,
-  PaginationWrapper,
-  EmptyWrapper
-};
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+export { ContentListWrapper, TableWrapper, PaginationWrapper, EmptyWrapper, ModalContent };

package/src/modules/GlobalEditor/PageBrowser/index.tsx

@@ -9,7 +9,6 @@ const PageBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
-    damDomain,
     content: {
       editorContent: { path, slug, canonicalSite },
     },
@@ -35,7 +34,6 @@ const PageBrowser = (props: IProps) => {
       url={url}
       theme={theme}
       cloudinaryName={cloudinaryName}
-      damDomain={damDomain}
       siteLangs={globalLangs}
       disabled={isReadOnly}
       siteID={canonicalSite}
@@ -50,7 +48,6 @@ interface IEditorStateProps {
   selectedEditorID: number;
   socials: ISocialState;
   cloudinaryName: string | null;
-  damDomain: string | null;
   globalLangs: ILanguage[];
   schema: ISchema | Record<string, unknown>;
   breadcrumb: IBreadcrumbItem[];
@@ -72,7 +69,6 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   selectedEditorID: state.pageEditor.selectedEditorID as number,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
-  damDomain: state.app.globalSettings.damDomain,
   globalLangs: state.app.globalLangs,
   schema: state.pageEditor.schema,
   breadcrumb: state.pageEditor.breadcrumb,

package/src/modules/GlobalEditor/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
-import { themes } from "components";
 import { IErrorItem, IRootState, ISavePageParams, IUserEditing } from "@ax/types";
 import { MainWrapper, Loading, ErrorToast, Notification, Modal } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
@@ -12,6 +11,8 @@ import { sitesActions } from "@ax/containers/Sites";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty, useModal } from "@ax/hooks";
+import { getDefaultTheme } from "@ax/helpers";
+
 import Editor from "./Editor";
 import Preview from "./Preview";
 
@@ -55,8 +56,7 @@ const GlobalEditor = (props: IProps) => {
   const isLivePageChanged = editorContent.editorContent && editorContent.editorContent.liveChanged;
   const structuredData = editorContent.editorContent ? editorContent.editorContent.structuredData : "";
 
-  const defaultTheme = themes.find((theme: any) => theme.default);
-  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+  const theme = getDefaultTheme();
 
   useEffect(() => {
     const { pageID, getPage, setTab, setCurrentSiteInfo, sendPagePing, setStructuredDataFilter } = props;

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/DefaultsBrowser/index.tsx

@@ -9,7 +9,6 @@ const DefaultsBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
-    damDomain,
     content,
     selectedEditorID,
     setSelectedContent,
@@ -29,7 +28,6 @@ const DefaultsBrowser = (props: IProps) => {
       url={content.slug}
       theme={theme}
       cloudinaryName={cloudinaryName}
-      damDomain={damDomain}
       siteLangs={siteLangs}
       siteID={siteID}
     />
@@ -43,7 +41,6 @@ interface IEditorStateProps {
   currentSiteInfo: any;
   socials: ISocialState;
   cloudinaryName: string | null;
-  damDomain: string | null;
   siteLangs: ILanguage[];
 }
 
@@ -59,7 +56,6 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   currentSiteInfo: state.sites.currentSiteInfo,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
-  damDomain: state.app.globalSettings.damDomain,
   siteLangs: state.sites.currentSiteLanguages,
 });
 

package/src/modules/PageEditor/PageBrowser/index.tsx

@@ -9,7 +9,6 @@ const PageBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
-    damDomain,
     content: {
       editorContent: { path, slug },
       header,
@@ -41,7 +40,6 @@ const PageBrowser = (props: IProps) => {
       url={url}
       theme={theme}
       cloudinaryName={cloudinaryName}
-      damDomain={damDomain}
       siteLangs={siteLangs}
       disabled={disabled}
       siteID={siteID}
@@ -57,7 +55,6 @@ interface IEditorStateProps {
   currentSiteInfo: any;
   socials: ISocialState;
   cloudinaryName: string | null;
-  damDomain: string | null;
   siteLangs: ILanguage[];
   schema: ISchema | Record<string, unknown>;
   breadcrumb: IBreadcrumbItem[];
@@ -80,7 +77,6 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   currentSiteInfo: state.sites.currentSiteInfo,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
-  damDomain: state.app.globalSettings.damDomain,
   siteLangs: state.sites.currentSiteLanguages,
   schema: state.pageEditor.schema,
   breadcrumb: state.pageEditor.breadcrumb,

package/src/modules/PageEditor/atoms.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import { IModal } from "@ax/types";
+import { Modal, FieldsBehavior } from "@ax/components";
+
+import * as S from "./style";
+
+const DeleteModal = (props: IDeleteModal): JSX.Element => {
+  const {
+    isOpen,
+    toggleModal,
+    mainModalAction,
+    secondaryModalAction,
+    isTranslated,
+    deleteAllVersions,
+    setDeleteAllVersions,
+  } = props;
+
+  const options = [
+    {
+      title: "Delete only this version",
+      name: "deletePage",
+      value: false,
+    },
+    {
+      title: "Delete all languages versions",
+      name: "deleteAll",
+      value: true,
+    },
+  ];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Delete Page?"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+    >
+      {isTranslated ? (
+        <>
+          <S.ModalContent>
+            <p>
+              You are going to delete this page that have some translations associated. Choose if you want to delete all
+              languages versions or only this one.
+            </p>
+            <FieldsBehavior
+              name="removeAllVersions"
+              fieldType="RadioGroup"
+              value={deleteAllVersions}
+              options={options}
+              onChange={setDeleteAllVersions}
+            />
+          </S.ModalContent>
+        </>
+      ) : (
+        <S.ModalContent>
+          Are you sure you want to delete this page?
+          <br />
+          This action <strong>cannot be undone</strong>.
+        </S.ModalContent>
+      )}
+    </Modal>
+  );
+};
+
+interface IDeleteModal extends IModal {
+  isTranslated: boolean;
+  deleteAllVersions: boolean;
+  setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export { DeleteModal };