@griddo/ax 1.62.6 → 1.63.0

package/src/modules/PageEditor/Preview/style.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const BrowserWrapper = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground01};
+  height: calc(100% - 44px);
+  width: 100%;
+`;
+
+export { BrowserWrapper };

package/src/modules/PageEditor/index.tsx

@@ -9,10 +9,11 @@ import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty, useModal } from "@ax/hooks";
+import { useIsDirty, useModal, useToast } from "@ax/hooks";
 import { isModuleDisabled } from "@ax/helpers";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import Editor from "./Editor";
+import Preview from "./Preview";
 
 import * as S from "./style";
 
@@ -44,7 +45,8 @@ const PageEditor = (props: IProps) => {
     isNewTranslation,
   } = props;
 
-  const [isPreviewMode, setIsPreviewMode] = useState(false);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+  const [selectedTab, setSelectedTab] = useState("edit");
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
@@ -55,6 +57,7 @@ const PageEditor = (props: IProps) => {
   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 : "";
 
   useEffect(() => {
     const { pageID, getPage, setTab, sendPagePing } = props;
@@ -77,10 +80,10 @@ const PageEditor = (props: IProps) => {
   useEffect(() => {
     const { pageID, sendPagePing, currentUserID } = props;
     if (userEditing && userEditing.id !== currentUserID) {
-      setIsPreviewMode(true);
+      setIsReadOnly(true);
       !isOpen && toggleModal();
     } else {
-      setIsPreviewMode(false);
+      setIsReadOnly(false);
       pageID && sendPagePing(pageID);
       isOpen && toggleModal();
     }
@@ -89,6 +92,7 @@ const PageEditor = (props: IProps) => {
 
   useEffect(() => {
     getDefaults();
+    resetDirty();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lang]);
 
@@ -204,9 +208,14 @@ const PageEditor = (props: IProps) => {
     }
   };
 
+  const handleNewTranlation = (isNewTranslation: boolean) => {
+    setSelectedTab("edit");
+    createNewTranslation && createNewTranslation(isNewTranslation);
+  };
+
   const languageActions = {
     setLanguage,
-    createNewTranslation,
+    createNewTranslation: handleNewTranlation,
     getContent: getPage,
   };
 
@@ -246,7 +255,7 @@ const PageEditor = (props: IProps) => {
     : [];
 
   const downArrowMenu = {
-    displayed: !isPreviewMode,
+    displayed: !isReadOnly,
     button: getPublishButton(props.pageStatus),
     options: menuOptions,
   };
@@ -316,7 +325,7 @@ const PageEditor = (props: IProps) => {
     disabled:
       (!isDirty && pageID !== null && !isNewTranslation) ||
       isSaving ||
-      isPreviewMode ||
+      isReadOnly ||
       (!isTemplateActivated && !isGlobal),
     action: handleSavePage,
   };
@@ -392,6 +401,15 @@ const PageEditor = (props: IProps) => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
+  const tabsPreview = {
+    icons: [
+      { name: "edit", text: "Edit mode" },
+      { name: "view", text: "Preview mode" },
+    ],
+    selectedTab,
+    action: (tab: string) => setSelectedTab(tab),
+  };
+
   return isLoading ? (
     <Loading />
   ) : (
@@ -399,6 +417,7 @@ const PageEditor = (props: IProps) => {
       <RouteLeavingGuard when={isDirty} action={goToPages} text={modalText} />
       <MainWrapper
         title={pageName}
+        subtitle={structuredData}
         backLink={backLinkRoute}
         rightButton={rightButtonProps}
         downArrowMenu={downArrowMenu}
@@ -414,6 +433,7 @@ const PageEditor = (props: IProps) => {
         errors={errors}
         errorActions={{ goToError }}
         isFromEditor={true}
+        tabs={tabsPreview}
       >
         {(!isTemplateActivated || hasDeactivatedModules) && !isGlobal && (
           <S.NotificationWrapper>
@@ -441,15 +461,19 @@ const PageEditor = (props: IProps) => {
           </S.NotificationWrapper>
         )}
         <ErrorToast size="l" />
-        <S.Content>
-          <Editor
-            isTemplateActivated={isTemplateActivated}
-            isGlobal={isGlobal}
-            isEditable={isEditable}
-            pageTitle={pageName}
-            isPreviewMode={isPreviewMode}
-          />
-        </S.Content>
+        {selectedTab === "edit" ? (
+          <S.Content>
+            <Editor
+              isTemplateActivated={isTemplateActivated}
+              isGlobal={isGlobal}
+              isEditable={isEditable}
+              pageTitle={pageName}
+              isReadOnly={isReadOnly}
+            />
+          </S.Content>
+        ) : (
+          <Preview />
+        )}
         <Modal
           isOpen={isOpen}
           hide={toggleModal}

package/src/modules/PublicPreview/index.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+import * as components from "components";
+import { providers, translations, cloudinaryDefaults, themes, griddoDamDefaults } from "components";
+import { Preview } from "@griddo/core";
+import { pages } from "@ax/api";
+import { isReqOk } from "@ax/helpers";
+import { Loading } from "@ax/components";
+
+import * as S from "./style";
+
+const PublicPreview = () => {
+  const { id: pageID, entity } = useParams<{ id: string; entity: string }>();
+  const [state, setState] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+    document.body.classList.add("preview");
+
+    const getPage = async () => {
+      if (!isMounted) return;
+
+      setIsLoading(true);
+      const response = await pages.getPublicPage(parseInt(pageID), entity);
+      if (isReqOk(response.status)) {
+        setState(response.data);
+      } else {
+        console.log("Error en getPublicPage");
+      }
+      setIsLoading(false);
+    };
+
+    getPage();
+
+    return function cleanup() {
+      isMounted = false;
+      document.body.classList.remove("preview");
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const API_URL = process.env.REACT_APP_API_ENDPOINT;
+  const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+  const { SiteProvider, AnimationProvider } = providers;
+
+  const defaultTheme = themes.find((theme: any) => theme.default);
+  const globalTheme = defaultTheme ? defaultTheme.value : themes[0].value;
+  const theme = state && state.site ? state.siteInfo.theme : globalTheme;
+  const socials = state && state.site ? state.siteInfo.socials : [];
+  const langs = state && state.site ? state.siteInfo.siteLanguages : [];
+
+  if (isLoading) return <Loading />;
+
+  return (
+    <SiteProvider
+      cloudinaryCloudName={state && state.cloudinaryName}
+      damDomain={state && state.damDomain}
+      theme={theme}
+      socials={socials}
+      siteLangs={langs}
+      translations={translations}
+      selectEditorID={0}
+      cloudinaryDefaults={cloudinaryDefaults}
+      griddoDamDefaults={griddoDamDefaults}
+      renderer="editor"
+      apiUrl={API_URL}
+      publicApiUrl={PUBLIC_API_URL}
+      siteId={state && state.site}
+    >
+      <AnimationProvider showOnScroll={{ active: false }}>
+        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+          {state && (
+            <Preview
+              isPage={true}
+              apiUrl={API_URL}
+              library={components}
+              content={state}
+              header={state && state.headerContent}
+              footer={state && state.footerContent}
+              languageId={state && state.language}
+              pageLanguages={state && state.pageLanguages}
+            />
+          )}
+        </S.Wrapper>
+      </AnimationProvider>
+    </SiteProvider>
+  );
+};
+
+export default PublicPreview;

package/src/modules/PublicPreview/style.tsx

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  overflow: auto;
+  scroll-behavior: smooth;
+  height: 100%;
+  position: relative;
+
+  .headroom {
+    position: relative !important;
+  }
+
+  body.preview:not(&) {
+    min-width: 0 !important;
+  }
+`;
+
+export { Wrapper };

package/src/modules/Redirects/BulkHeader/TableHeader/index.tsx

@@ -1,10 +1,20 @@
 import React from "react";
 
-import { CheckField, SiteFilter, TableCounter } from "@ax/components";
+import { CheckField, SiteFilter, TableCounter, DateFilter } from "@ax/components";
 import * as S from "./style";
 
-const TableHeader = (props: IProps) => {
-  const { totalItems, selectAllItems, isScrolling, filterItems, filterValues, isSiteItem } = props;
+const TableHeader = (props: IProps): JSX.Element => {
+  const {
+    totalItems,
+    selectAllItems,
+    isScrolling,
+    filterItems,
+    filterValues,
+    isSiteItem,
+    sortItems,
+    sortedListStatus,
+  } = props;
+
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -25,6 +35,7 @@ const TableHeader = (props: IProps) => {
       )}
       <S.UrlHeader>Old URL</S.UrlHeader>
       <S.UrlHeader>New URL</S.UrlHeader>
+      <DateFilter sortItems={sortItems} sortedState={sortedListStatus} />
       <S.ActionsHeader>
         <TableCounter totalItems={totalItems} />
       </S.ActionsHeader>
@@ -39,6 +50,8 @@ interface IProps {
   filterItems: (filterPointer: string, filtersSelected: string) => void;
   filterValues: any;
   isSiteItem: boolean;
+  sortItems: (orderPointer: string, isAscending: boolean) => void;
+  sortedListStatus: { isAscending: boolean; sortedByDate: boolean };
 }
 
 export default TableHeader;

package/src/modules/Redirects/BulkHeader/TableHeader/style.tsx

@@ -15,11 +15,11 @@ const CheckHeader = styled(Header)`
 `;
 
 const SiteHeader = styled(Header)`
-  width: 270px;
+  width: 200px;
 `;
 
 const UrlHeader = styled(Header)`
-  width: 50%;
+  flex: 1;
 `;
 
 const ActionsHeader = styled(Header)`
@@ -28,4 +28,10 @@ const ActionsHeader = styled(Header)`
   justify-content: flex-end;
 `;
 
-export { TableHeader, CheckHeader, SiteHeader, UrlHeader, ActionsHeader };
+export {
+  TableHeader,
+  CheckHeader,
+  SiteHeader,
+  UrlHeader,
+  ActionsHeader,
+};

package/src/modules/Redirects/BulkHeader/index.tsx

@@ -14,6 +14,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
     filterItems,
     filterValues,
     isSiteItem,
+    sortItems,
+    sortedListStatus,
   } = props;
 
   const bulkActions = [
@@ -39,7 +41,9 @@ const BulkHeader = (props: IProps): JSX.Element => {
       filterItems={filterItems}
       filterValues={filterValues}
       isSiteItem={isSiteItem}
-    />
+        sortItems={sortItems}
+        sortedListStatus={sortedListStatus}
+      />
   );
 };
 
@@ -54,6 +58,8 @@ interface IProps {
   filterItems: (filterPointer: string, filtersSelected: string) => void;
   filterValues: any;
   isSiteItem: boolean;
+  sortItems: (orderPointer: string, isAscending: boolean) => void;
+  sortedListStatus: { isAscending: boolean; sortedByDate: boolean };
 }
 
 export default BulkHeader;

package/src/modules/Redirects/RedirectItem/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
+import { format } from "date-fns";
 
 import { useModal } from "@ax/hooks";
 import { ICheck, IRedirect } from "@ax/types";
@@ -84,6 +85,9 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
         <S.UrlCell role="cell" onClick={handleClick}>
           {redirect.to?.url.replace(regex, "")}
         </S.UrlCell>
+        <S.DateCell role="cell" onClick={handleClick}>
+          {redirect.date && format(new Date(redirect.date), "dd MMM yyyy")}
+        </S.DateCell>
         <S.ActionsCell role="cell">
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
         </S.ActionsCell>

package/src/modules/Redirects/RedirectItem/style.tsx

@@ -12,12 +12,19 @@ const CheckCell = styled(Cell)`
 `;
 
 const SiteCell = styled(Cell)`
-  width: 270px;
+  width: 200px;
 `;
 
 const UrlCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
-  width: 50%;
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  flex: 1;
+`;
+
+const DateCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  width: 100px;
 `;
 
 const ActionsCell = styled(Cell)`
@@ -47,4 +54,13 @@ const ModalContent = styled.div`
   }
 `;
 
-export { CheckCell, SiteCell, ActionsCell, UrlCell, StyledActionMenu, ItemRow, ModalContent };
+export {
+  CheckCell,
+  SiteCell,
+  ActionsCell,
+  UrlCell,
+  StyledActionMenu,
+  ItemRow,
+  ModalContent,
+  DateCell,
+};

package/src/modules/Redirects/atoms.tsx

@@ -2,7 +2,6 @@ import React, { useRef } from "react";
 
 import { IModal, IRedirect } from "@ax/types";
 import { Button, Icon, Modal } from "@ax/components";
-import { trimText } from "@ax/helpers";
 
 import * as S from "./style";
 

package/src/modules/Redirects/hooks.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+
+const useSortedListStatus = () => {
+  const sortedInitialState: { isAscending: boolean; sortedByDate: boolean; } = {
+    isAscending: false,
+    sortedByDate: false,
+  };
+
+  const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
+
+  return {
+    sortedListStatus,
+    setSortedListStatus,
+  };
+};
+
+const useFilterQuery = (currentSiteID: number | null) => {
+  const initialQueryValues = {
+    sites: currentSiteID || "all",
+    order: "",
+  };
+
+  const [query, setQuery] = useState(initialQueryValues);
+
+  const setFilterQuery = (filterValues: any) => {
+    const { sites, order } = filterValues;
+    let filterQuery = "";
+
+    const currentQuery = (pointer: string, values: string) => {
+      return filterQuery.concat(`&${pointer}=${values}`);
+    };
+
+    if (sites) {
+      filterQuery = currentQuery("sites", sites);
+    }
+
+    if (order) {
+      filterQuery = currentQuery("order", order);
+    }
+
+    return filterQuery;
+  };
+
+  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+    const { sites, order } = query;
+    const orderMethod = isAscendent ? "asc" : "desc";
+    const filterValues = {
+      sites: pointer === "sites" ? filter : sites,
+      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+    };
+
+    setQuery(filterValues);
+
+    return filterValues;
+  };
+
+  const resetFilterQuery = () => setQuery(initialQueryValues);
+
+  return {
+    setFiltersSelection,
+    setFilterQuery,
+    resetFilterQuery,
+    filterValues: query,
+  };
+};
+
+export { useSortedListStatus, useFilterQuery };

package/src/modules/Redirects/index.tsx

@@ -6,10 +6,13 @@ import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
 import { MainWrapper, ErrorToast, Nav, TableList, EmptyState, Toast } from "@ax/components";
 import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+
 import BulkHeader from "./BulkHeader";
 import RedirectItem from "./RedirectItem";
 import RedirectPanel from "./RedirectPanel";
 import { DeleteModal, ImportCheckModal, ImportModal, OverwriteModal } from "./atoms";
+import { getSortedListStatus } from "./utils";
+import { useSortedListStatus, useFilterQuery } from "./hooks";
 
 import * as S from "./style";
 
@@ -30,14 +33,16 @@ const Redirects = (props: IProps): JSX.Element => {
   } = props;
 
   const itemsPerPage = 50;
+  const firstPage = 1;
   const [page, setPage] = useState(1);
   const [isScrolling, setIsScrolling] = useState(false);
   const [isOpenedSecond, setIsOpenedSecond] = useState(false);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
   const tableRef = useRef<HTMLDivElement>(null);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
-  const [filterValues, setFilterValues] = useState({ sites: "all" });
+  const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
+  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery(currentSiteID);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState(`&sites=${currentSiteID}`);
   const { isVisible, toggleToast, setIsVisible } = useToast();
   const { isVisible: isImportVisible, toggleToast: toggleImportToast, setIsVisible: setIsImportVisible } = useToast();
   const { isOpen: isOpenOverwrite, toggleModal: toggleOverwriteModal } = useModal();
@@ -71,8 +76,7 @@ const Redirects = (props: IProps): JSX.Element => {
 
   useEffect(() => {
     const params = getParams();
-    const siteFilterQuery = currentSiteID ? `&sites=${currentSiteID}` : currentFilterQuery;
-    getRedirects(params, siteFilterQuery);
+    getRedirects(params, currentFilterQuery);
     if (tableRef.current) {
       tableRef.current.scrollTo(0, 0);
     }
@@ -103,12 +107,20 @@ const Redirects = (props: IProps): JSX.Element => {
 
   const handleSelectAll = () => selectAllItems();
 
+  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+    setPage(firstPage);
+    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    setSortedListStatus(sortedState);
+
+    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
-    let filterQuery = "";
-    if (filtersSelected !== "all") {
-      filterQuery = `&${filterPointer}=${filtersSelected}`;
-    }
-    setFilterValues({ sites: filtersSelected });
+    setPage(firstPage);
+    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
+    const filterQuery = setFilterQuery(filtersSelection);
     setCurrentFilterQuery(filterQuery);
   };
 
@@ -124,6 +136,8 @@ const Redirects = (props: IProps): JSX.Element => {
       filterItems={filterItems}
       filterValues={filterValues}
       isSiteItem={!!currentSiteID}
+      sortItems={sortItems}
+      sortedListStatus={sortedListStatus}
     />
   );
 

package/src/modules/Redirects/utils.tsx

@@ -0,0 +1,10 @@
+const getSortedListStatus = (orderPointer: string, isAscending: boolean): { isAscending: boolean, sortedByDate: boolean } => {
+  const sortedListStatus = {
+    isAscending,
+    sortedByDate: orderPointer === "date",
+  };
+
+  return sortedListStatus;
+};
+
+export { getSortedListStatus }

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

@@ -0,0 +1,107 @@
+import React from "react";
+
+import { useModal } from "@ax/hooks";
+import { SideModal, ActionMenu } from "@ax/components";
+
+import * as S from "./style";
+
+const pageEditorID = 0;
+
+const Field = (props: IField): JSX.Element => {
+  const {
+    type,
+    template,
+    defaults,
+    updateEditorContent,
+    content,
+    updateDataPackFormValue,
+    dataPackConfigFormData,
+    theme,
+  } = props;
+  const { isOpen, toggleModal } = useModal();
+  const options = defaults.filter((component: any) =>
+    component.type === type && content[component.type]?.id !== component.id && !component.setAsDefault
+  );
+  const optionsType = `${type}s`;
+
+  const actionMenuOptions = [
+    {
+      label: "replace",
+      icon: "change",
+      action: toggleModal,
+    },
+  ];
+
+  const actionMenuIcon = "more";
+
+  const handleReplace = (option: any) => {
+    const configFormData = {
+      ...dataPackConfigFormData,
+      templates: {
+        ...dataPackConfigFormData.templates,
+        [template]: {
+          ...(!!dataPackConfigFormData.templates && dataPackConfigFormData.templates[template]),
+          ...(type === "header" && { defaultHeader: option.id }),
+          ...(type === "footer" && { defaultFooter: option.id }),
+        }
+      },
+    }
+    updateDataPackFormValue(configFormData);
+    updateEditorContent(pageEditorID, type, option.id);
+    toggleModal();
+  };
+
+  const isDefaultNavigation = () => {
+    const defaultType = type === "header" ? "defaultHeader" : "defaultFooter";
+    const templateNavigation = dataPackConfigFormData.templates && dataPackConfigFormData.templates[template]
+    const templateDefaultNavigation = templateNavigation && templateNavigation[defaultType];
+    if (!templateDefaultNavigation) return true;
+    const siteDefaultNavigation = defaults.find((navigation: any) => navigation.id === templateDefaultNavigation);
+    return !!siteDefaultNavigation?.isDefault;
+  }
+
+  const setDefault = {
+    title: `Put the default ${type}`,
+    action: () => handleReplace({ id: null }),
+    checked: isDefaultNavigation(),
+  }
+
+  const hasOptions: boolean | undefined = options?.length > 0 || !isDefaultNavigation();
+
+  if (!content[type]) return <></>;
+
+  return (
+    <>
+      <S.Component isArray disabled>
+        <S.Label>{content[type].title}</S.Label>
+        <S.HiddenButtonsWrapper>
+          {hasOptions && <ActionMenu options={actionMenuOptions} icon={actionMenuIcon} />}
+        </S.HiddenButtonsWrapper>
+      </S.Component>
+      {hasOptions && (
+        <SideModal
+          optionsType={optionsType}
+          whiteList={options}
+          handleClick={handleReplace}
+          toggleModal={toggleModal}
+          isOpen={isOpen}
+          setDefault={setDefault}
+          theme={theme}
+        />
+      )}
+    </>
+  )
+}
+
+interface IField {
+  type: string;
+  template: string;
+  defaults: any;
+  content: any,
+  dataPackConfigFormData: any;
+  theme: string;
+  updateEditorContent: (selectedEditorID: number, key: string, value: any) => void;
+  updateDataPackFormValue: (value: any) => void;
+}
+
+export { Field }