@griddo/ax 1.75.91 → 1.75.93

package/src/modules/GlobalEditor/index.tsx

@@ -33,7 +33,7 @@ const GlobalEditor = (props: IProps) => {
     errors,
     setSelectedContent,
     setTab,
-    pageEditor: { editorContent },
+    editorContent,
     sitePageID,
     setHistoryPush,
     setCurrentPageID,
@@ -49,15 +49,15 @@ const GlobalEditor = (props: IProps) => {
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [selectedTab, setSelectedTab] = useState("edit");
   const [notification, setNotification] = useState<INotification | null>(null);
-  const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
+  const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
   const [errorPagesChecked, setErrorPagesChecked] = useState(false);
   const browserRef = useRef<HTMLDivElement>(null);
 
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
-  const hasDraft = editorContent.editorContent && editorContent.editorContent.haveDraftPage;
-  const isLivePageChanged = editorContent.editorContent && editorContent.editorContent.liveChanged;
-  const structuredData = editorContent.editorContent ? editorContent.editorContent.structuredData : "";
+  const hasDraft = editorContent && editorContent.haveDraftPage;
+  const isLivePageChanged = editorContent && editorContent.liveChanged;
+  const structuredData = editorContent ? editorContent.structuredData : "";
 
   const errorNotificationText =
     "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
@@ -68,9 +68,7 @@ const GlobalEditor = (props: IProps) => {
   useEffect(() => {
     const { pageID, getPage, setTab, setCurrentSiteInfo, sendPagePing, setStructuredDataFilter } = props;
     setCurrentSiteInfo(null);
-    editorContent.editorContent &&
-      editorContent.editorContent.structuredData &&
-      setStructuredDataFilter(editorContent.editorContent.structuredData);
+    editorContent && editorContent.structuredData && setStructuredDataFilter(editorContent.structuredData);
     const defaultTab = "content";
     const handleGetPage = async () => await getPage(pageID, true);
     setTab(defaultTab);
@@ -105,8 +103,8 @@ const GlobalEditor = (props: IProps) => {
   }, [userEditing]);
 
   useEffect(() => {
-    if (!errorPagesChecked && !isLoading && editorContent.editorContent) {
-      const pageId = editorContent.editorContent.id;
+    if (!errorPagesChecked && !isLoading && editorContent) {
+      const pageId = editorContent.id;
       const hasErrors = currentSiteErrorPages.some((errorPageId) => pageId === errorPageId);
       hasErrors && reviewPage();
       setErrorPagesChecked(true);
@@ -297,7 +295,7 @@ const GlobalEditor = (props: IProps) => {
     ],
   };
 
-  const isEditable = editorContent.editorContent && editorContent.editorContent.editable;
+  const isEditable = editorContent && editorContent.editable;
 
   const handleSavePage = async () => {
     const { savePage } = props;
@@ -346,7 +344,7 @@ const GlobalEditor = (props: IProps) => {
   };
 
   const goToLivePage = () => {
-    const currentPageUrl = editorContent.editorContent.fullUrl;
+    const currentPageUrl = editorContent.fullUrl;
     if (currentPageUrl) {
       window.open(currentPageUrl, "_blank");
     }
@@ -355,7 +353,7 @@ const GlobalEditor = (props: IProps) => {
   const toggleDraftPage = async () => {
     const { getPage } = props;
     resetDirty();
-    const pageID = isDraft ? editorContent.editorContent.draftFromPage : editorContent.editorContent.haveDraftPage;
+    const pageID = isDraft ? editorContent.draftFromPage : editorContent.haveDraftPage;
     await getPage(pageID);
   };
 
@@ -533,7 +531,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   lang: state.app.lang,
   globalLangs: state.app.globalLangs,
   pageLanguages: state.pageEditor.currentPageLanguages,
-  pageEditor: state.pageEditor,
+  editorContent: state.pageEditor.editorContent,
   errors: state.pageEditor.errors,
   sitePageID: state.pageEditor.sitePageID,
   savedSiteInfo: state.sites.savedSiteInfo,
@@ -553,7 +551,7 @@ interface IPageEditorStateProps {
   lang: { locale: string; id: number | null };
   globalLangs: any[];
   pageLanguages: any[];
-  pageEditor: any;
+  editorContent: any;
   errors: IErrorItem[];
   sitePageID: number | null;
   savedSiteInfo: any;

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

@@ -44,9 +44,7 @@ const Editor = (props: IProps) => {
     content,
   } = props;
 
-  const {
-    editorContent: { header, footer },
-  } = content;
+  const { header, footer } = content;
 
   const actions = {
     deleteModuleAction: deleteModule,

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

@@ -9,11 +9,7 @@ const PageBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
-    content: {
-      editorContent: { path, slug },
-      header,
-      footer,
-    },
+    content: { header, footer, path, slug },
     setSelectedContent,
     currentSiteInfo: { theme, id: siteID },
     siteLangs,
@@ -39,7 +35,7 @@ const PageBrowser = (props: IProps) => {
   return (
     <Browser
       isPage={true}
-      content={props.content.editorContent}
+      content={props.content}
       header={header}
       footer={footer}
       socials={socials}

package/src/modules/PageEditor/index.tsx

@@ -40,7 +40,8 @@ const PageEditor = (props: IProps) => {
     errors,
     setSelectedContent,
     setTab,
-    pageEditor: { editorContent, schema },
+    editorContent,
+    schema,
     userEditing,
     isNewTranslation,
     currentSiteErrorPages,
@@ -50,21 +51,21 @@ const PageEditor = (props: IProps) => {
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [selectedTab, setSelectedTab] = useState("edit");
   const [notification, setNotification] = useState<INotification | null>(null);
-  const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
+  const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const [errorPagesChecked, setErrorPagesChecked] = useState(false);
   const browserRef = useRef<HTMLDivElement>(null);
 
-  const isGlobal = editorContent.editorContent && editorContent.editorContent.origin === "GLOBAL";
-  const isEditable = editorContent.editorContent && editorContent.editorContent.editable;
+  const isGlobal = editorContent && editorContent.origin === "GLOBAL";
+  const isEditable = editorContent && editorContent.editable;
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
-  const hasDraft = editorContent.editorContent && editorContent.editorContent.haveDraftPage;
-  const isLivePageChanged = editorContent.editorContent && editorContent.editorContent.liveChanged;
+  const hasDraft = editorContent && editorContent.haveDraftPage;
+  const isLivePageChanged = editorContent && editorContent.liveChanged;
   const isTranslated = pageLanguages.length > 1;
-  const structuredData = editorContent.editorContent ? editorContent.editorContent.structuredData : "";
+  const structuredData = editorContent ? editorContent.structuredData : "";
 
   const errorNotificationText =
     "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
@@ -108,8 +109,8 @@ const PageEditor = (props: IProps) => {
   }, [lang]);
 
   useEffect(() => {
-    if (!errorPagesChecked && !isLoading && editorContent.editorContent) {
-      const pageId = editorContent.editorContent.id;
+    if (!errorPagesChecked && !isLoading && editorContent) {
+      const pageId = editorContent.id;
       const hasErrors = currentSiteErrorPages.some((errorPageId) => pageId === errorPageId);
       hasErrors && reviewPage();
       setErrorPagesChecked(true);
@@ -323,10 +324,10 @@ const PageEditor = (props: IProps) => {
 
   const goToPages = (path: string) => setRoute(path);
 
-  const goToError = (editorID: number | null, tab: string, template: boolean) => {
+  const goToError = async (editorID: number | null, tab: string, template: boolean) => {
     const realEditorID = template ? 0 : editorID;
     if (realEditorID !== null) {
-      setSelectedContent(realEditorID);
+      await setSelectedContent(realEditorID);
       setTab(tab);
     }
   };
@@ -340,8 +341,8 @@ const PageEditor = (props: IProps) => {
   let isTemplateActivated = true;
   let hasDeactivatedModules = false;
   let deactivatedModules: string[] = [];
-  if (editorContent.editorContent && editorContent.editorContent.template) {
-    const editorTemplate = editorContent.editorContent.template;
+  if (editorContent && editorContent.template) {
+    const editorTemplate = editorContent.template;
     const mainContentModules = editorTemplate?.mainContent?.modules;
 
     if (mainContentModules) {
@@ -389,7 +390,7 @@ const PageEditor = (props: IProps) => {
   };
 
   const goToLivePage = () => {
-    const currentPageUrl = editorContent.editorContent.fullUrl;
+    const currentPageUrl = editorContent.fullUrl;
     if (currentPageUrl) {
       window.open(currentPageUrl, "_blank");
     }
@@ -398,7 +399,7 @@ const PageEditor = (props: IProps) => {
   const toggleDraftPage = async () => {
     const { getPage } = props;
     resetDirty();
-    const pageID = isDraft ? editorContent.editorContent.draftFromPage : editorContent.editorContent.haveDraftPage;
+    const pageID = isDraft ? editorContent.draftFromPage : editorContent.haveDraftPage;
     await getPage(pageID);
   };
 
@@ -429,8 +430,8 @@ const PageEditor = (props: IProps) => {
     "This content is part of disabled content type package. To edit it, you must first activate it.";
 
   const handleClickNotification = () => {
-    if (editorContent.editorContent && editorContent.editorContent.template) {
-      const editorTemplate = editorContent.editorContent.template;
+    if (editorContent && editorContent.template) {
+      const editorTemplate = editorContent.template;
       if (!isTemplateActivated) {
         getSiteDataPackbyTemplate(editorTemplate.templateType);
       } else if (hasDeactivatedModules) {
@@ -596,7 +597,8 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   lang: state.app.lang,
   siteLanguages: state.sites.currentSiteLanguages,
   pageLanguages: state.pageEditor.currentPageLanguages,
-  pageEditor: state.pageEditor,
+  editorContent: state.pageEditor.editorContent,
+  schema: state.pageEditor.schema,
   activatedTemplates: state.dataPacks.templates,
   activatedModules: state.dataPacks.modules,
   errors: state.pageEditor.errors,
@@ -617,7 +619,7 @@ interface IPageEditorStateProps {
   lang: { locale: string; id: number | null };
   siteLanguages: any[];
   pageLanguages: any[];
-  pageEditor: any;
+  editorContent: any;
   activatedTemplates: any[];
   activatedModules: string[];
   errors: IErrorItem[];
@@ -626,6 +628,7 @@ interface IPageEditorStateProps {
   isNewTranslation: boolean;
   currentSiteErrorPages: number[];
   skipReviewOnPublish?: boolean;
+  schema: any;
 }
 
 const mapDispatchToProps = {
@@ -662,7 +665,7 @@ interface IPageEditorDispatchProps {
   getSiteDataPackbyTemplate(templateType: string): void;
   getSiteDataPackbyModule(module: string): void;
   getDefaults(): void;
-  setSelectedContent(editorID: number): void;
+  setSelectedContent(editorID: number): Promise<void>;
   sendPagePing(pageID: number): Promise<boolean>;
   discardDraft(): Promise<void>;
   deleteBulk(ids: number[]): Promise<boolean>;

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/Field/index.tsx

@@ -48,7 +48,7 @@ const Field = (props: IField): JSX.Element => {
       },
     };
     updateDataPackFormValue(configFormData);
-    updateEditorContent(pageEditorID, type, option.id);
+    updateEditorContent(pageEditorID, type, option.id ? option : null);
     toggleModal();
   };
 

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/TemplateBrowser/index.tsx

@@ -8,18 +8,18 @@ const TemplateBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
-    content: { editorContent, header, footer },
+    content,
     currentSiteInfo: { theme, id: siteID },
     siteLangs,
   } = props;
 
-  const updatedContent = { ...editorContent };
+  const { header, footer } = content;
 
   return (
     <Browser
       isPage={true}
       socials={socials}
-      content={updatedContent}
+      content={content}
       url=""
       theme={theme}
       cloudinaryName={cloudinaryName}

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/index.tsx

@@ -4,11 +4,12 @@ import { connect } from "react-redux";
 import { ITemplate } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { pageEditorActions } from "@ax/containers/PageEditor";
+import { getTemplateThumbnails } from "@ax/helpers";
 
 import * as S from "./style";
 
 const TemplateConfig = (props: IProps): React.ReactElement => {
-  const { setHistoryPush, templates, getTemplatePage } = props;
+  const { setHistoryPush, templates, getTemplatePage, currentSite } = props;
 
   const goToEditor = async (template: ITemplate) => {
     await getTemplatePage(template.id);
@@ -19,22 +20,28 @@ const TemplateConfig = (props: IProps): React.ReactElement => {
     <>
       <S.Heading>Template configuration</S.Heading>
       <S.Text>
-        {"You can set custom settings in these templates and will be shown by default. However, they can be modified on the page's editor."}
+        {
+          "You can set custom settings in these templates and will be shown by default. However, they can be modified on the page's editor."
+        }
       </S.Text>
       <S.TemplatesWrapper>
         {templates &&
-          templates.map((template: ITemplate, key: number) => (
-            <S.TemplateCard key={`${key}${template.title}`} onClick={() => goToEditor(template)}>
-              {template.thumbnails && <S.TemplateThumbnail backgroundUrl={template.thumbnails["2x"]} />}
-              <S.TemplateCardTitle>{template.title}</S.TemplateCardTitle>
-            </S.TemplateCard>
-          ))}
+          templates.map((template: ITemplate, key: number) => {
+            const thumbnails = getTemplateThumbnails(template.id, currentSite.theme);
+            return (
+              <S.TemplateCard key={`${key}${template.title}`} onClick={() => goToEditor(template)}>
+                {template.thumbnails && <S.TemplateThumbnail backgroundUrl={thumbnails && thumbnails["2x"]} />}
+                <S.TemplateCardTitle>{template.title}</S.TemplateCardTitle>
+              </S.TemplateCard>
+            );
+          })}
       </S.TemplatesWrapper>
     </>
-  )
-}
+  );
+};
 
 interface IProps {
+  currentSite: any;
   templates: ITemplate[];
   setHistoryPush(path: string, isEditor?: boolean): void;
   getTemplatePage: (template: string) => Promise<void>;

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/index.tsx

@@ -105,30 +105,28 @@ const Form = (props: IProps): JSX.Element => {
     updateFormValue({ import: filteredNewCategories });
   };
 
-  const getCategoryLabels = () => {
-    return (
-      <S.CategoriesWrapper>
-        {configFormData &&
-          configFormData.import &&
-          configFormData.import.map((data: IDataPackConfigImport) => {
-            return (
-              data.categories &&
-              data.categories.map((category: IDataPackConfigImportCategory) => {
-                const categoryText = getCategoryText(category.structuredData);
-                const handleDeleteTag = () => deleteTag(category.id);
-                return (
-                  <Tag
-                    key={`${categoryText}-${category.title}`}
-                    text={`${categoryText}: ${category.title}`}
-                    onDeleteAction={handleDeleteTag}
-                  />
-                );
-              })
-            );
-          })}
-      </S.CategoriesWrapper>
-    );
-  };
+  const getCategoryLabels = () => (
+    <S.CategoriesWrapper isEmpty={!Object.keys(selectedCategories).length}>
+      {configFormData &&
+        configFormData.import &&
+        configFormData.import.map((data: IDataPackConfigImport) => {
+          return (
+            data.categories &&
+            data.categories.map((category: IDataPackConfigImportCategory) => {
+              const categoryText = getCategoryText(category.structuredData);
+              const handleDeleteTag = () => deleteTag(category.id);
+              return (
+                <Tag
+                  key={`${categoryText}-${category.title}`}
+                  text={`${categoryText}: ${category.title}`}
+                  onDeleteAction={handleDeleteTag}
+                />
+              );
+            })
+          );
+        })}
+    </S.CategoriesWrapper>
+  );
 
   const isGlobalDataPage = structuredData[0] && structuredData[0].fromPage && !structuredData[0].local;
 
@@ -178,7 +176,7 @@ const Form = (props: IProps): JSX.Element => {
             onChange={setIndexDefault}
           />
         </S.SectionContent>
-        <TemplateConfig templates={templates} />
+        <TemplateConfig templates={templates} currentSite={currentSite}/>
       </S.Config>
       <Modal
         isOpen={isOpen}

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/style.tsx

@@ -30,11 +30,11 @@ const Text = styled.div`
   ${(p) => p.theme.textStyle.uiM};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   width: calc(${(p) => p.theme.spacing.l} * 12);
+  padding-bottom: ${(p) => p.theme.spacing.m};
 `;
 
-const CategoriesWrapper = styled.div`
-  margin-top: ${(p) => p.theme.spacing.m};
-  padding-bottom: ${(p) => p.theme.spacing.m};
+const CategoriesWrapper = styled.div<{isEmpty: boolean}>`
+  padding-bottom: ${(p) => p.isEmpty ? 0 : p.theme.spacing.m};
 `;
 
 const StyledButton = styled(Button)`

package/src/modules/Sites/SitesList/GridView/GridHeaderFilter/index.tsx

@@ -54,10 +54,10 @@ const GridHeaderFilter = ({ sortItems, sortedState }: IGridHeaderFilterProps): J
         Oldest
       </ListItem>
       <ListTitle>Sort by creation</ListTitle>
-      <ListItem isSelected={sortedByDateCreated && isAscending} onClick={sortAscendingDateCreated}>
+      <ListItem isSelected={sortedByDateCreated && !isAscending} onClick={sortDescendingDateCreated}>
         Newest
       </ListItem>
-      <ListItem isSelected={sortedByDateCreated && !isAscending} onClick={sortDescendingDateCreated}>
+      <ListItem isSelected={sortedByDateCreated && isAscending} onClick={sortAscendingDateCreated}>
         Oldest
       </ListItem>
     </FloatingMenu>

package/src/modules/Sites/SitesList/GridView/GridSiteItem/index.tsx

@@ -117,7 +117,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   return (
     <>
       <S.SiteWrapper key={site.id} onClick={setSite} data-testid="grid-site-item">
-        <Tooltip content={siteTooltip}>
+        <Tooltip content={siteTooltip} >
           <ItemThumbnail src={site.thumbnail} width={280} height={199} />
         </Tooltip>
         <S.Wrapper>

package/src/modules/Sites/SitesList/atoms.tsx

@@ -9,7 +9,7 @@ export const ItemName = (props: IItemNameProps): JSX.Element => {
   const { name, length } = props;
   return name.length > length ? (
     <Tooltip content={name} left={120}>
-      <S.ItemName data-testid="trimmed-item-name">{trimText(name, 36)}</S.ItemName>
+      <S.ItemName data-testid="trimmed-item-name">{trimText(name, length)}</S.ItemName>
     </Tooltip>
   ) : (
     <S.ItemName data-testid="sites-item-name">{name}</S.ItemName>

package/src/modules/Sites/SitesList/hooks.tsx

@@ -22,10 +22,10 @@ const useSortedListStatus = () => {
   };
 };
 
-const useFilterQuery = (): ISitesFilterQuery => {
+const useFilterQuery = (defaultValues?: { order: string; liveStatus: string }): ISitesFilterQuery => {
   const initialQueryValues = {
-    order: "lastAccess-desc",
-    liveStatus: "all",
+    order: defaultValues ? defaultValues.order : "lastAccess-desc",
+    liveStatus: defaultValues ? defaultValues.liveStatus : "all",
   };
 
   const [query, setQuery] = useState(initialQueryValues);
@@ -57,7 +57,6 @@ const useFilterQuery = (): ISitesFilterQuery => {
 
   const setFiltersSelection = (pointer: string, filter: string, orderMethod?: string) => {
     const { order, liveStatus } = query;
-
     const liveStatusValue: any = {
       all: "all",
       active: "online",