@griddo/ax 1.75.92 → 1.75.93

package/src/containers/Sites/constants.tsx

@@ -13,6 +13,7 @@ export const SET_INITIAL_VALUES = `${NAME}/SET_INITIAL_VALUES`;
 export const SET_SAVED_SITE_INFO = `${NAME}/SET_SAVED_SITE_INFO`;
 export const SET_CURRENT_SITE_ERROR_PAGES = `${NAME}/SET_CURRENT_SITE_ERROR_PAGES`;
 export const SET_CONTENT_FILTERS = `${NAME}/SET_CONTENT_FILTERS`;
+export const SET_CONFIG = `${NAME}/SET_CONFIG`;
 
 export const ITEMS_PER_PAGE = 50;
 

package/src/containers/Sites/interfaces.tsx

@@ -12,8 +12,9 @@ import {
   SET_CURRENT_SITE_ERROR_PAGES,
   SET_CONTENT_FILTERS,
   SET_SITES_TOTAL_ITEMS,
+  SET_CONFIG
 } from "./constants";
-import { ISite } from "@ax/types";
+import { ISite, ISiteListConfig } from "@ax/types";
 
 export interface ISetFilter {
   type: typeof SET_FILTER;
@@ -77,7 +78,12 @@ export interface ISetCurrentSiteErrorPages {
 
 export interface ISetContentFilters {
   type: typeof SET_CONTENT_FILTERS;
-  payload: { contentFilters: Record<string,string> | null };
+  payload: { contentFilters: Record<string, string> | null };
+}
+export interface ISetConfig {
+  type: typeof SET_CONFIG;
+  payload: { config: ISiteListConfig };
 }
 
 export type SitesActionsCreators = ISetSitesAction & ISetCurrentSiteInfoAction;
+

package/src/containers/Sites/reducer.tsx

@@ -12,9 +12,10 @@ import {
   SET_SAVED_SITE_INFO,
   SET_CURRENT_SITE_ERROR_PAGES,
   SET_CONTENT_FILTERS,
+  SET_CONFIG,
 } from "./constants";
 
-import { ISite, IPage, ILanguage } from "@ax/types";
+import { ISite, IPage, ILanguage, ISiteListConfig } from "@ax/types";
 
 import { SitesActionsCreators } from "./interfaces";
 
@@ -32,8 +33,22 @@ export interface ISitesState {
   savedSiteInfo: any;
   currentSiteErrorPages: number[];
   contentFilters: Record<string, string> | null;
+  config: ISiteListConfig;
 }
 
+const config = {
+  displayRecentSites: false,
+  mode: "grid",
+  filter: "&order=lastAccess-desc",
+  filterValues: { order: "desc", liveStatus: "all" },
+  sortedListStatus: {
+    isAscending: false,
+    sortedByDateCreated: false,
+    sortedByLastAccess: true,
+    sortedByTitle: false,
+  },
+};
+
 export const initialState = {
   currentSiteName: null,
   currentSitePages: [],
@@ -48,6 +63,7 @@ export const initialState = {
   savedSiteInfo: null,
   currentSiteErrorPages: [],
   contentFilters: null,
+  config,
 };
 
 export function reducer(state = initialState, action: SitesActionsCreators): ISitesState {
@@ -65,6 +81,7 @@ export function reducer(state = initialState, action: SitesActionsCreators): ISi
     case SET_SAVED_SITE_INFO:
     case SET_CURRENT_SITE_ERROR_PAGES:
     case SET_CONTENT_FILTERS:
+    case SET_CONFIG:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/Users/actions.tsx

@@ -2,8 +2,8 @@ import { Dispatch } from "redux";
 import { SET_USERS, SET_USER_FORM, SET_CURRENT_USER } from "./constants";
 
 import { ISetUsers, ISetCurrentUser, ISetUserForm } from "./interfaces";
-import { IUser } from "@ax/types";
-import { users } from "@ax/api";
+import { ICreatePasswordParams, IUser } from "@ax/types";
+import { global, users } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { handleRequest, isReqOk } from "@ax/helpers";
 
@@ -130,6 +130,26 @@ function createUser(data: { name: string; email: string; sites: any[] }): (dispa
   };
 }
 
+function createPassword(id: string, params: ICreatePasswordParams): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => global.createPassword(id, params);
+
+      const responseActions = {
+        handleSuccess: async (response: any) => {
+          await getUser("me", response.token)(dispatch);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+    } catch (e) {
+      console.log(e); // TODO: capturar error bien
+      return false;
+    }
+  };
+}
+
 function deleteUser(id: number | number[]): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
@@ -201,4 +221,5 @@ export {
   setCurrentUser,
   deleteUser,
   resendInvitation,
+  createPassword,
 };

package/src/forms/validators.tsx

@@ -338,9 +338,7 @@ const findPackagesActivationErrors = (
   let isCurrentTemplateActivated = true;
   let hasDeactivatedModules = false;
 
-  const {
-    editorContent: { template },
-  } = pageEditor?.editorContent;
+  const { template } = pageEditor?.editorContent;
 
   if (template && !isGlobal) {
     const mainContentModules = template?.mainContent?.modules;

package/src/helpers/requests.tsx

@@ -24,7 +24,7 @@ function handleRequest(callback: any, responseActions: any, loadingActions: any[
       }
     })
 
-    if (result) handleSuccess(response.data);
+    if (result) await handleSuccess(response.data);
 
     loadingActions.map(action => dispatch(action(false)));
 

package/src/hooks/bulk.tsx

@@ -4,10 +4,11 @@ import { areEquals } from "@ax/helpers";
 import { ICheck } from "@ax/types";
 
 const useBulkSelection = (itemIDs: any[]) => {
-  const selectedItemsInitialState: { all: any[]; notPublished: any[]; published: any[] } = {
+  const selectedItemsInitialState: { all: any[]; notPublished: any[]; published: any[]; drafts: any[] } = {
     all: [],
     notPublished: [],
     published: [],
+    drafts: [],
   };
 
   const [items, setItems] = useState<any[]>([]);

package/src/hooks/content.tsx

@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
+import { useWindowSize } from "./window";
 
 const useCategoryColors = (): any => {
   const fixedColors = [
@@ -38,4 +39,28 @@ const useCategoryColors = (): any => {
   };
 };
 
-export { useCategoryColors };
+const useAdaptiveText = (
+  containerRef: React.RefObject<HTMLDivElement>,
+  fullText: string,
+  padding = 0
+): { text: string; width: number } => {
+  const [output, setTitle] = useState({ text: "", width: 0 });
+
+  const [width] = useWindowSize();
+
+  useEffect(() => {
+    setTitle({ text: "", width: 0 });
+  }, [width]);
+
+  useLayoutEffect(() => {
+    if (containerRef.current) {
+      const cellWidth = containerRef.current.offsetWidth;
+      const cellPadding = padding * 2;
+      setTitle({ text: fullText, width: cellWidth - cellPadding });
+    }
+  }, [containerRef, fullText, output.width, padding]);
+
+  return output;
+};
+
+export { useCategoryColors, useAdaptiveText };

package/src/hooks/index.tsx

@@ -2,7 +2,8 @@ import { useBulkSelection } from "./bulk";
 import { useDebounce, useEqualStructured, useIsDirty, usePrevious } from "./forms";
 import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useURLSearchParam } from "./location";
-import { useCategoryColors } from "./content";
+import { useCategoryColors, useAdaptiveText } from "./content";
+import { useWindowSize } from "./window";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 
 export {
@@ -16,6 +17,8 @@ export {
   useBulkSelection,
   useURLSearchParam,
   useCategoryColors,
+  useWindowSize,
+  useAdaptiveText,
   useOnMessageReceivedFromIframe,
   useOnMessageReceivedFromOutside,
 };

package/src/hooks/window.ts

@@ -0,0 +1,16 @@
+import { useLayoutEffect, useState } from "react";
+
+const useWindowSize = (): number[] => {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    const updateSize = () => {
+      setSize([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener("resize", updateSize);
+    updateSize();
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+  return size;
+};
+
+export { useWindowSize };

package/src/modules/App/Routing/NavMenu/index.tsx

@@ -40,6 +40,7 @@ const NavMenu = (props: IProps) => {
 
   const sitesPath = "/sites/";
   const isSite = location.pathname.includes(sitesPath) && location.pathname.length > sitesPath.length;
+  const siteSelector = location.pathname === "/sites";
 
   const goToPublishedSite = () => {
     const language = siteLanguages.find((l) => l.id === lang.id);
@@ -49,7 +50,7 @@ const NavMenu = (props: IProps) => {
   };
 
   const goToSites = () => {
-    isSite && setHistoryPush("/sites");
+    !siteSelector && setHistoryPush("/sites");
   };
 
   const goToProfile = () => {
@@ -125,7 +126,7 @@ const NavMenu = (props: IProps) => {
   return (
     <NavProvider value={{ state, toggleSubmenu }}>
       <S.NavWrapper type={config.type} isOpened={isOpened}>
-        <S.Home type={config.type} onClick={goToSites} isSite={isSite} isOpened={isOpened}>
+        <S.Home type={config.type} onClick={goToSites} isSite={isSite} isOpened={isOpened} siteSelector={siteSelector}>
           {isSite && (
             <S.GoBack>
               <Icon name="LeftArrow" />

package/src/modules/App/Routing/NavMenu/style.tsx

@@ -14,7 +14,7 @@ export const GoBack = styled.div`
   width: auto;
 `;
 
-export const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolean }>`
+export const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolean; siteSelector: boolean }>`
   padding: ${(p) => `${p.theme.spacing.xs} 12px`};
   background-color: ${(p) =>
     p.type === "multisite" ? p.theme.color.uiMainMenuBackground : p.theme.color.uiBarBackground};
@@ -28,7 +28,7 @@ export const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolea
   & + ul {
     margin-top: ${(p) => p.theme.spacing.s};
   }
-  cursor: ${(p) => (p.isSite ? "pointer" : "default")};
+  cursor: ${(p) => (p.siteSelector ? "default" : "pointer")};
 
   &:hover {
     & > ${NavLink} {

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

@@ -1,12 +1,11 @@
-import React, { memo, useState } from "react";
-
+import React, { memo, useRef, useState } from "react";
 import { schemas } from "components";
+import { useTheme } from "styled-components";
 
-import { useModal } from "@ax/hooks";
+import { useAdaptiveText, useModal } from "@ax/hooks";
 import { getHumanLastModifiedDate, getTemplateDisplayName, slugify } from "@ax/helpers";
 import { IPage, ISite, ISavePageParams, ICheck, IColumn, IPageLanguage, IDataPack } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
-
 import {
   CheckField,
   FieldsBehavior,
@@ -81,6 +80,12 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { isOpen: isCopyOpen, toggleModal: toggleCopyModal } = useModal();
 
+  const nameCellRef = useRef<HTMLDivElement>(null);
+  const theme: any = useTheme();
+  const nameCellPadding = Number(theme.spacing.s.slice(0, -2));
+  const title = useAdaptiveText(nameCellRef, page.title, nameCellPadding);
+  const path = useAdaptiveText(nameCellRef, fullPath.page, nameCellPadding);
+
   const currentTemplateDataPacks = schemas.templates[templateId].dataPacks;
 
   const isCopyable = !currentTemplateDataPacks;
@@ -472,12 +477,15 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
         <S.CheckCell role="cell">
           <CheckField name="check" value={page.id} checked={isSelected} onChange={handleOnChange} />
         </S.CheckCell>
-        <S.NameCell role="cell" onClick={goToPage}>
-          <S.Title>
-            {page.title}
-            {isHome && <Icon name="home" />}
-          </S.Title>
-          <S.Slug>{fullPath && fullPath.page}</S.Slug>
+        <S.NameCell role="cell" onClick={goToPage} ref={nameCellRef}>
+          {isHome && (
+            <S.Home>
+              <Icon name="home" />
+              Home
+            </S.Home>
+          )}
+          <S.Title width={title.width}>{title.text}</S.Title>
+          {!isHome && <S.Slug width={path.width}>{path.text}</S.Slug>}
         </S.NameCell>
         {CategoryColumns}
         {activeColumns.includes("type") && (

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

@@ -24,14 +24,23 @@ const NameCell = styled(Cell)`
   }
 `;
 
-const Title = styled.div`
+const Title = styled.div<{ width: number }>`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  display: flex;
-  align-items: center;
+  display: inline;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: ${(p) => `${p.width}px`};
 `;
 
-const Slug = styled.div``;
+const Slug = styled.div<{ width: number }>`
+  display: inline;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: ${(p) => `${p.width}px`};
+`;
 
 const TypeCell = styled(Cell)`
   flex: 0 0 170px;
@@ -84,6 +93,18 @@ const Mark = styled.div`
   align-items: center;
 `;
 
+const Home = styled.span`
+  ${(p) => p.theme.textStyle.uiXS};
+  width: 63px;
+  height: 20px;
+  margin-bottom: 8px;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 10px 2px 4px;
+`;
+
 const Wrapper = styled.div`
   cursor: pointer;
 `;
@@ -191,4 +212,5 @@ export {
   ModalContent,
   GlobalCell,
   Mark,
+  Home,
 };

package/src/modules/Content/index.tsx

@@ -119,6 +119,10 @@ const Content = (props: IProps): JSX.Element => {
     query: currentFilterQuery,
   } = useFilterQuery(contentFilters);
   const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
+  const [notification, setNotification] = useState<{
+    text: string;
+    subErrors?: { id: number; error: string }[];
+  } | null>(null);
 
   const currentFilter = getCurrentFilter(structuredData, filter);
   const checkFromPage = currentFilter ? currentFilter.fromPage : undefined;
@@ -169,6 +173,7 @@ const Content = (props: IProps): JSX.Element => {
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [arePagesTranslated, setArePagesTranslated] = useState(false);
   const [templateInstanceError, setTemplateInstanceError] = useState({ error: false, templateName: "" });
+  const [pagesSelected, setPagesSelected] = useState<any[]>([]);
 
   const {
     resetBulkSelection,
@@ -302,11 +307,22 @@ const Content = (props: IProps): JSX.Element => {
 
   const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
 
-  const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
+  const handleAddToBulk = (item: ICheck) => {
+    const page = currentSitePages.find((page: IPage) => page.id === item.value);
+
+    item.isChecked && !pagesSelected.includes(item)
+      ? setPagesSelected((pagesSelected) => [...pagesSelected, page])
+      : setPagesSelected(pagesSelected.filter((page: IPage) => page.id !== item.value));
+
+    addToBulkSelection(item, bulkFilter);
+  };
 
   const handleSelectAll = () => selectAllItems(bulkFilter);
 
-  const unselectAllItems = () => resetBulkSelection();
+  const unselectAllItems = () => {
+    resetBulkSelection();
+    setPagesSelected([]);
+  };
 
   const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
 
@@ -345,11 +361,11 @@ const Content = (props: IProps): JSX.Element => {
   };
 
   const handleBulkDelete = async (pageIds: number[]) => {
-    const globalPageIds = currentSitePages
+    const globalPageIds = pagesSelected
       .filter((page: IPage) => pageIds.includes(page.id) && page.origin === "GLOBAL")
       .map((page: IPage) => page.id);
 
-    const filteredPageIds = currentSitePages
+    const filteredPageIds = pagesSelected
       .filter((page: IPage) => pageIds.includes(page.id) && page.origin !== "GLOBAL")
       .map((page: IPage) => page.id);
 
@@ -385,7 +401,19 @@ const Content = (props: IProps): JSX.Element => {
   };
 
   const bulkPublishAction = async (isPublish: boolean) => {
-    const { notPublished, published } = selectedItems;
+    const { notPublished, published, drafts } = selectedItems;
+
+    if (drafts && drafts.length > 0) {
+      const multiplePages = drafts.length > 1;
+      const getPage = (id: number) => currentSitePages.find((page) => page.id === id);
+      const getPageWarning = (pageId: number) =>
+        `The '${getPage(pageId)?.title}' page has a draft version. To publish it, you must do it from the editor.`;
+      const text = multiplePages
+        ? `There are ${drafts.length} pages that cannot be published.`
+        : getPageWarning(drafts[0]);
+      const subErrors = multiplePages && drafts.map((draft) => ({ id: draft, error: getPageWarning(draft) }));
+      setNotification({ text, ...(subErrors && { subErrors }) });
+    }
 
     const status = isPublish ? pageStatus.UPLOAD_PENDING : pageStatus.OFFLINE_PENDING;
 
@@ -713,6 +741,14 @@ const Content = (props: IProps): JSX.Element => {
             />
           )}
           {(!!currentSiteErrorPages.length || errors.length > 0) && <Notification type="error" text={errorPagesText} />}
+          {notification && (
+            <Notification
+              type="warning"
+              text={notification.text}
+              subErrors={notification.subErrors}
+              resetError={() => setNotification(null)}
+            />
+          )}
           <TableList
             tableHeader={Header}
             pagination={pagination}

package/src/modules/Content/utils.tsx

@@ -103,18 +103,20 @@ const getCurrentFilter = (structuredData: any, filter: any) =>
 const filterByStatus = (bulkSelection: number[], currentSitePages: IPage[]): Record<string, number[]> => {
   const notPublishedItems: number[] = [];
   const publishedItems: number[] = [];
+  const draftItems: number[] = [];
 
   currentSitePages.forEach((page: IPage) => {
-    const { id, liveStatus } = page;
+    const { id, liveStatus, haveDraftPage } = page;
     if (bulkSelection.includes(id)) {
       switch (liveStatus.status) {
         case pageStatus.OFFLINE_PENDING:
         case pageStatus.OFFLINE:
         case pageStatus.UPLOAD_PENDING:
           notPublishedItems.push(id);
+          haveDraftPage ? draftItems.push(id) : notPublishedItems.push(id);
           break;
         case pageStatus.PUBLISHED:
-          publishedItems.push(id);
+          haveDraftPage ? draftItems.push(id) : publishedItems.push(id);
           break;
       }
     }
@@ -124,6 +126,7 @@ const filterByStatus = (bulkSelection: number[], currentSitePages: IPage[]): Rec
     all: bulkSelection,
     notPublished: notPublishedItems,
     published: publishedItems,
+    drafts: draftItems,
   };
 
   return filteredItems;

package/src/modules/CreatePass/index.tsx

@@ -2,16 +2,15 @@ import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { connect } from "react-redux";
 
-import { isReqOk } from "@ax/helpers";
-import { global } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
 import { Button, FieldsBehavior, ErrorToast } from "@ax/components";
+import { ICreatePasswordParams } from "@ax/types";
 
 import * as S from "./style";
 
 const CreatePass = (props: IProps) => {
-  const { setHistoryPush, getUser } = props;
+  const { setHistoryPush, createPassword } = props;
 
   const { id, token } = useParams<{ id: string; token: string }>();
 
@@ -36,12 +35,8 @@ const CreatePass = (props: IProps) => {
       retypedPassword: state.pass2,
     };
 
-    const response = await global.createPassword(id, params);
-    if (isReqOk(response.status)) {
-      const {
-        data: { token },
-      } = response;
-      await getUser("me", token);
+    const passCreated = await createPassword(id, params);
+    if (passCreated) {
       setHistoryPush("/profile?init=true");
     }
   };
@@ -65,6 +60,7 @@ const CreatePass = (props: IProps) => {
             value={state.pass1}
             onChange={handlePass1Change}
             validators={{ mandatory: true }}
+            autoComplete="off"
           />
           <FieldsBehavior
             fieldType="TextField"
@@ -74,6 +70,7 @@ const CreatePass = (props: IProps) => {
             value={state.pass2}
             onChange={handlePass2Change}
             validators={{ isSamePass: state.pass1, mandatory: true }}
+            autoComplete="off"
           />
           <Button type="submit" disabled={!validPasswords}>
             Create and log in
@@ -86,12 +83,12 @@ const CreatePass = (props: IProps) => {
 
 interface IProps {
   setHistoryPush(path: string): any;
-  getUser(id: string, token: string): any;
+  createPassword(id: string, params: ICreatePasswordParams): Promise<boolean>;
 }
 
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
-  getUser: usersActions.getUser,
+  createPassword: usersActions.createPassword,
 };
 
 export default connect(null, mapDispatchToProps)(CreatePass);

package/src/modules/FramePreview/index.tsx

@@ -30,11 +30,7 @@ const FramePreview = (props: IProps) => {
 
   useOnMessageReceivedFromOutside(setEditorContent, setSelectedContent);
 
-  const {
-    editorContent: { canonicalSite, language, pageLanguages },
-    header,
-    footer,
-  } = content;
+  const { canonicalSite, language, pageLanguages, header, footer } = content;
 
   document.body.classList.add("preview");
 
@@ -87,7 +83,7 @@ const FramePreview = (props: IProps) => {
         selectEditorID={selectEditorID}
         siteID={siteID}
         isPage={true}
-        content={content.editorContent}
+        content={content}
         header={currentSiteInfo && header}
         footer={currentSiteInfo && footer}
         languageID={language}

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

@@ -9,9 +9,7 @@ const PageBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
-    content: {
-      editorContent: { path, slug, canonicalSite },
-    },
+    content: { path, slug, canonicalSite },
     setSelectedContent,
     globalLangs,
     theme,
@@ -35,7 +33,7 @@ const PageBrowser = (props: IProps) => {
   return (
     <Browser
       isPage={true}
-      content={props.content.editorContent}
+      content={props.content}
       socials={socials}
       url={url}
       theme={theme}