@griddo/ax 1.63.5 → 1.64.2

package/src/components/TableFilters/SiteFilter/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const Site = styled(Header)<{ isActive: boolean; center: boolean }>`
+const Site = styled((props) => <Header {...props} />)<{ isActive: boolean; center: boolean }>`
   width: 170px;
   justify-content: ${(p) => (p.center ? "center" : "flex-start")};
   &:hover {

package/src/components/TableFilters/StatusFilter/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const Status = styled(Header)<{ isActive: boolean }>`
+const Status = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 170px;
   justify-content: center;
   &:hover {

package/src/components/TableFilters/TranslationsFilter/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const Translations = styled(Header)<{ isActive: boolean }>`
+const Translations = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 115px;
   justify-content: center;
   &:hover {

package/src/components/TableFilters/TypeFilter/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const Types = styled(Header)<{ isActive: boolean }>`
+const Types = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 170px;
   justify-content: center;
   &:hover {

package/src/components/Tag/index.tsx

@@ -4,16 +4,16 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Tag = (props: ITagProps): JSX.Element => {
-  const { type, text, color, deleteAction } = props;
+  const { type, text, color, onDeleteAction } = props;
 
   const handleClick = () => {
-    if (deleteAction) {
-      deleteAction();
+    if (onDeleteAction) {
+      onDeleteAction();
     }
   };
 
-  const deleteIcon = deleteAction ? (
-    <S.IconWrapper onClick={handleClick}>
+  const deleteIcon = onDeleteAction ? (
+    <S.IconWrapper onClick={handleClick} data-testid="tagComponent">
       <Icon name="close" size="16" />
     </S.IconWrapper>
   ) : null;
@@ -26,6 +26,8 @@ const Tag = (props: ITagProps): JSX.Element => {
           {text}
         </S.TagStatus>
       );
+    case "square":
+      return <S.TagSquare color={color}>{text}</S.TagSquare>;
     default:
       return (
         <S.TagFixed color={color}>
@@ -39,10 +41,10 @@ const Tag = (props: ITagProps): JSX.Element => {
 };
 
 interface ITagProps {
-  type?: "status" | "fixed" | "interactive" | undefined;
+  type?: "status" | "fixed" | "interactive" | "square" | undefined;
   text: string;
   color?: string;
-  deleteAction?: () => void;
+  onDeleteAction?: () => void;
 }
 
 export default Tag;

package/src/components/Tag/style.tsx

@@ -12,6 +12,18 @@ export const TagStatus = styled.div`
   text-transform: capitalize;
 `;
 
+export const TagSquare = styled.div<{ color: string | undefined }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  background-color: ${(p) => (p.color ? p.color : p.theme.colors.uiBackground01)};
+  box-sizing: border-box;
+  border-radius: ${(p) => p.theme.radii.xs};
+  color: ${(p) => (p.color ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis)};
+  white-space: nowrap;
+  display: inline-block;
+  padding: 3px 8px;
+  text-transform: capitalize;
+`;
+
 export const Bullet = styled.span<{ color: string | undefined }>`
   background-color: ${(p) => (p.color ? p.color : `#4096D6`)};
   display: inline-block;
@@ -22,26 +34,26 @@ export const Bullet = styled.span<{ color: string | undefined }>`
 `;
 
 export const TagFixed = styled.div<{ color: string | undefined }>`
-  ${(p) => p.theme.textStyle.uiS};
-  background-color: ${(p) => (p.color ? p.color : p.theme.color.interactive02)};
-  border-radius: ${(p) => p.theme.spacing.s};
+  ${(p) => p.theme.textStyle?.uiS};
+  background-color: ${(p) => (p.color ? p.color : p.theme.color?.interactive02)};
+  border-radius: ${(p) => p.theme.spacing?.s};
   box-sizing: border-box;
-  color: ${(p) => p.theme.color.textMediumEmphasis};
+  color: ${(p) => p.theme.color?.textMediumEmphasis};
   display: inline-block;
   padding: 3px 8px;
-  margin-right: ${(p) => p.theme.spacing.xxs};
-  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  margin-right: ${(p) => p.theme.spacing?.xxs};
+  margin-bottom: ${(p) => p.theme.spacing?.xxs};
 `;
 
 export const Title = styled.div``;
 
 export const IconWrapper = styled.div`
   height: 16px;
-  margin-left: ${(p) => p.theme.spacing.xxs};
+  margin-left: ${(p) => p.theme.spacing?.xxs};
   cursor: pointer;
   svg {
     path {
-      fill: ${(p) => p.theme.color.textMediumEmphasis};
+      fill: ${(p) => p.theme.color?.textMediumEmphasis};
     }
   }
 `;

package/src/components/index.tsx

@@ -48,8 +48,10 @@ import Breadcrumb from "./Breadcrumb";
 import Browser from "./Browser";
 import BulkSelectionOptions from "./BulkSelectionOptions";
 import Button from "./Button";
+import CategoryCell from "./CategoryCell";
 import ConfigPanel from "./ConfigPanel";
 import DragAndDrop from "./DragAndDrop";
+import ElementsTooltip from "./ElementsTooltip";
 import EmptyState from "./EmptyState";
 import ErrorCenter from "./ErrorCenter";
 import ErrorToast from "./ErrorToast";
@@ -85,7 +87,6 @@ import Tabs from "./Tabs";
 import Tag from "./Tag";
 import Tooltip from "./Tooltip";
 import Toast from "./Toast";
-import ElementsTooltip from "./ElementsTooltip";
 
 export {
   //Fields
@@ -138,8 +139,10 @@ export {
   Browser,
   BulkSelectionOptions,
   Button,
+  CategoryCell,
   ConfigPanel,
   DragAndDrop,
+  ElementsTooltip,
   EmptyState,
   ErrorCenter,
   ErrorToast,
@@ -175,5 +178,4 @@ export {
   Tag,
   Tooltip,
   Toast,
-  ElementsTooltip,
 };

package/src/containers/App/reducer.tsx

@@ -38,7 +38,6 @@ export interface IUser {
 
 export interface IGlobalSettings {
   cloudinaryName: string | null;
-  damDomain: string | null;
   globalLogoBig: string;
   globalLogoMini: string;
   siteLogoBig: string;
@@ -67,7 +66,6 @@ export const initialState = {
   globalLangs: [],
   globalSettings: {
     cloudinaryName: "",
-    damDomain: "",
     globalLogoBig: "",
     globalLogoMini: "",
     siteLogoBig: "",

package/src/containers/PageEditor/actions.tsx

@@ -457,7 +457,7 @@ function deleteBulk(ids: any): (dispatch: Dispatch) => Promise<boolean> {
 
       return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
       return false;
     }
   };
@@ -473,7 +473,7 @@ function restorePage(id: number | number[]): (dispatch: Dispatch) => Promise<boo
 
       const callback = async () => (Array.isArray(id) ? pages.bulkRestore(id) : pages.restorePage(id));
 
-      return await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
+      return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
       console.log(e); // TODO: capturar error bien
       return false;

package/src/containers/Sites/actions.tsx

@@ -20,7 +20,6 @@ import {
 } from "./interfaces";
 
 import { ISite, IGetSitePagesParams, ISettingsForm, IGetGlobalPagesParams, IPage } from "@ax/types";
-
 import { sites, languages, dataPack, social, structuredData, analytics } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
@@ -29,13 +28,15 @@ import { pageEditorActions } from "@ax/containers/PageEditor";
 import { analyticsActions } from "@ax/containers/Analytics";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { socialActions } from "@ax/containers/Settings/Social";
-import { handleRequest, isReqOk, sortBy } from "@ax/helpers";
+import { getDefaultTheme, handleRequest, isReqOk, sortBy } from "@ax/helpers";
+import { usersActions } from "@ax/containers/Users";
 
 const { setIsLoading, setIsSaving, setLanguage } = appActions;
 const { resetDefaultsValues } = navigationActions;
 const { resetPageEditor } = pageEditorActions;
 const { resetMenuValues } = menuActions;
 const { getAnalytics } = analyticsActions;
+const { getUsers } = usersActions;
 
 function setSites(sitesList: ISite[]): ISetSitesAction {
   return { type: SET_SITES, payload: { sites: sitesList } };
@@ -87,25 +88,23 @@ function getSites(token: string): (dispatch: Dispatch) => Promise<void> {
 function saveSettings(form: ISettingsForm): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
-      dispatch(setIsSaving(true));
       const {
         sites: { currentSiteInfo },
       } = getState();
 
-      const saveResponse = currentSiteInfo
-        ? await sites.updateSite(currentSiteInfo.id, form)
-        : await sites.createSite(form);
+      const isNewSite = !currentSiteInfo;
 
-      // TODO: refactor con handleRequest
-      if (isReqOk(saveResponse.status)) {
-        const { data } = saveResponse;
+      const theme = getDefaultTheme();
 
-        await setSiteInfo(data)(dispatch, getState);
-        dispatch(setIsSaving(false));
-        return true;
-      } else {
-        appActions.handleError(saveResponse)(dispatch);
-      }
+      const responseActions = {
+        handleSuccess: (response: any) => setSiteInfo(response)(dispatch, getState),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () =>
+        isNewSite ? sites.createSite({ ...form, theme }) : sites.updateSite(currentSiteInfo.id, form);
+
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
       console.log(e); // TODO: capturar error bien
     }
@@ -378,10 +377,7 @@ function importPageFromGlobal(pageID: number | number[]): (dispatch: any, getSta
   return async (dispatch, getState) => {
     try {
       const {
-        sites: {
-          currentSiteInfo,
-          currentFilter
-        },
+        sites: { currentSiteInfo, currentFilter },
       } = getState();
 
       const responseActions = {
@@ -409,6 +405,20 @@ function importPageFromGlobal(pageID: number | number[]): (dispatch: any, getSta
   };
 }
 
+function removeUsersBulk(siteId: number, users: number[]): (dispatch: Dispatch, getState: any) => Promise<void> {
+  return async (dispatch, getState) => {
+    try {
+      const response = await sites.removeUsersBulk(siteId, users);
+      if (isReqOk(response.status)) {
+        const params = { filterQuery: "?order=dateCreated" };
+        getUsers(params)(dispatch);
+      }
+    } catch (e) {
+      console.log(e); // TODO: capturar error bien
+    }
+  };
+}
+
 function removePageFromSite(
   pageID: number | number[],
   refresh = true
@@ -467,4 +477,5 @@ export {
   saveCurrentSiteInfo,
   importPageFromGlobal,
   removePageFromSite,
+  removeUsersBulk,
 };

package/src/containers/Users/actions.tsx

@@ -64,7 +64,12 @@ function getUser(id: string | number, token?: string): (dispatch: Dispatch) => P
   };
 }
 
-function updateUser(id: number, data: any, isProfile: boolean): (dispatch: Dispatch, getState: any) => Promise<void> {
+function updateUser(
+  id: number,
+  data: any,
+  isProfile: boolean,
+  isList?: boolean
+): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch) => {
     try {
       const callback = async () => users.updateUser(id, data);
@@ -73,6 +78,9 @@ function updateUser(id: number, data: any, isProfile: boolean): (dispatch: Dispa
         handleSuccess: (response: any) => {
           if (isProfile) {
             dispatch(setCurrentUser(response));
+          } else if (isList) {
+            const params = { filterQuery: "?order=dateCreated" };
+            getUsers(params)(dispatch);
           } else {
             dispatch(setUserForm(response));
           }
@@ -125,7 +133,7 @@ function createUser(data: { name: string; email: string; sites: any[] }): (dispa
 function deleteUser(id: number | number[]): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
-      const params = { order: "dateCreated" };
+      const params = { filterQuery: "?order=dateCreated" };
 
       const responseActions = {
         handleSuccess: () => getUsers(params)(dispatch),

package/src/containers/Users/reducer.tsx

@@ -16,6 +16,7 @@ export const initialState = {
     name: "",
     email: "",
     failed: 0,
+    sites: ["all"],
   },
   currentUser: {
     id: null,
@@ -23,6 +24,7 @@ export const initialState = {
     name: "",
     email: "",
     failed: 0,
+    sites: ["all"],
   },
 };
 
@@ -37,4 +39,4 @@ export function reducer(state = initialState, action: UsersActionsCreators): IUs
   }
 }
 
-export { initialState as usersInitialState, reducer as usersReducer };
+export { initialState as usersInitialState, reducer as usersReducer };

package/src/helpers/fields.tsx

@@ -1,7 +1,5 @@
 const fields = require.context("./../components/Fields", true);
 
-const getFieldByPath = (name: string) => fields(`./${name}`).default;
+const getFieldByPath = (name: string) => fields(`./${name}/index.tsx`).default;
 
-export {
-  getFieldByPath
-};
+export { getFieldByPath };

package/src/helpers/index.tsx

@@ -92,6 +92,8 @@ import { getActivatedDataPacksIds, isModuleDisabled } from "./dataPacks";
 
 import { isDevelopment } from "./environment";
 
+import { getDefaultTheme } from "./themes";
+
 export {
   isComponentEmpty,
   setAsContainedComponent,
@@ -165,5 +167,6 @@ export {
   getDataPackSchema,
   splitAndJoin,
   splitAndTrim,
+  getDefaultTheme,
   copyTextToClipboard,
 };

package/src/helpers/themes.tsx

@@ -0,0 +1,9 @@
+import { themes } from "components";
+
+const getDefaultTheme = (): string => {
+  const defaultTheme = themes.find((theme: any) => theme.default);
+  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+  return theme;
+}
+
+export { getDefaultTheme }

package/src/modules/Analytics/GroupPanel/utils.tsx

@@ -21,9 +21,9 @@ const getTemplateOptions = (): ITemplateOption[] => {
 };
 
 interface ITemplateOption {
-  name: string,
-  title: string,
-  value: string,
+  name: string;
+  title: string;
+  value: string;
 }
 
 export { getTemplateOptions };

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

@@ -1,16 +1,17 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
+import { version } from "./../../../../../package.json";
 
 import { IRouter, multisite, site } from "@ax/routes";
 
 import { IRootState } from "@ax/types";
 import { appActions } from "@ax/containers/App";
+import { Icon, Tag } from "@ax/components";
 
 import NavItem from "./NavItem";
 import { NavProvider } from "./context";
 
-import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const NavMenu = (props: IProps) => {
@@ -52,7 +53,8 @@ const NavMenu = (props: IProps) => {
   };
 
   const goToProfile = () => {
-    setHistoryPush("/profile");
+    const profileRoute = isSite ? "/sites/profile" : "profile";
+    setHistoryPush(profileRoute);
   };
 
   const config: IConfig = isSite
@@ -97,7 +99,7 @@ const NavMenu = (props: IProps) => {
     component: "",
     name: "Profile",
     icon: "User",
-    path: "/profile",
+    path: isSite ? "/site/profile" : "/profile",
     onClick: goToProfile,
   };
 
@@ -124,6 +126,7 @@ const NavMenu = (props: IProps) => {
             </S.GoBack>
           )}
           <S.NavLink>{config.logo}</S.NavLink>
+          {isOpened && !isSite ? <Tag type="square" text={`V ${version}`} color="rgba(80, 87, 255, 0.16)" /> : null}
         </S.Home>
         <S.Lists>
           <S.List>
@@ -150,15 +153,13 @@ const NavMenu = (props: IProps) => {
                 <S.Separator />
               </>
             )}
-            {!isSite && (
-              <NavItem
-                setHistoryPush={setHistoryPush}
-                route={profileRoute}
-                type={config.type}
-                isOpened={isOpened}
-                location={location}
-              />
-            )}
+            <NavItem
+              setHistoryPush={setHistoryPush}
+              route={profileRoute}
+              type={config.type}
+              isOpened={isOpened}
+              location={location}
+            />
             <NavItem setHistoryPush={setHistoryPush} route={logoutRoute} type={config.type} isOpened={isOpened} />
             <S.Separator />
             <NavItem setHistoryPush={setHistoryPush} route={collapseRoute} type={config.type} isOpened={isOpened} />

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

@@ -2,7 +2,7 @@ import React, { memo, useState } from "react";
 
 import { useModal } from "@ax/hooks";
 import { getHumanLastModifiedDate, getTemplateDisplayName, slugify } from "@ax/helpers";
-import { IPage, ISite, ISavePageParams, ICheck, IColumn, IDataPack } from "@ax/types";
+import { IPage, ISite, ISavePageParams, ICheck, IColumn, IPageLanguage, IDataPack } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 
 import {
@@ -15,9 +15,10 @@ import {
   Modal,
   Tag,
   Tooltip,
+  CategoryCell,
 } from "@ax/components";
 
-import { CategoryCell } from "./atoms";
+import { DeleteModal } from "../atoms";
 
 import * as S from "./style";
 
@@ -46,6 +47,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     languageActions,
     duplicatePage,
     removePageFromSite,
+    deleteBulk,
     getDataPack,
   } = functions;
   const { locale } = lang;
@@ -63,11 +65,14 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const initValue = { title: "", slug: "" };
   const [modalState, setModalState] = useState(initValue);
+  const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 
   const isGlobal = origin === "GLOBAL";
+  const isTranslated = pageLanguages.length > 1;
   const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
 
   const publishedTooltip: any = {
@@ -86,7 +91,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
     const { templateId } = item.page;
     const dataPack = dataPacks.find((pack) => pack.templates.some((template) => template.id === templateId));
-    dataPack && await getDataPack(dataPack.id);
+    dataPack && (await getDataPack(dataPack.id));
 
     setRoute("pages/editor");
   };
@@ -151,7 +156,9 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   };
 
   const handleDeleteItem = async () => {
-    await deletePage();
+    const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
+    deleteAllVersions ? await deleteBulk(allPageVersions) : await deletePage();
+    toggleDeleteModal();
   };
 
   const handleRemoveItemFromSite = async () => {
@@ -277,14 +284,14 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     isGlobal && !manuallyImported
       ? "This page has been provided by subscription. You cannot remove it."
       : canBeUnpublished === false
-        ? "This is the canonical site of the page. You cannot remove it."
-        : null;
+      ? "This is the canonical site of the page. You cannot remove it."
+      : null;
 
   let menuOptions: IPageOption[] = [
     {
       label: isGlobal ? "Remove from site" : "delete",
       icon: "delete",
-      action: isGlobal ? toggleRemoveModal : handleDeleteItem,
+      action: isGlobal ? toggleRemoveModal : toggleDeleteModal,
       disabled: deleteDisabled,
       helpText: deleteHelpText,
     },
@@ -382,6 +389,13 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
+  const mainDeleteModalAction = {
+    title: "Delete page",
+    onClick: handleDeleteItem,
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
   const CategoryColumns =
     isGlobal &&
     categoryColumns.map((col: any) => {
@@ -511,6 +525,13 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
           </S.ModalContent>
         )}
       </Modal>
+      <DeleteModal
+        isOpen={isDeleteOpen}
+        toggleModal={toggleDeleteModal}
+        mainModalAction={mainDeleteModalAction}
+        secondaryModalAction={secondaryDeleteModalAction}
+        {...{ isTranslated, deleteAllVersions, setDeleteAllVersions, title: page.title }}
+      />
     </>
   );
 };
@@ -540,13 +561,14 @@ interface IPageItemProps {
     };
     onClick: (e: any) => void;
     onCheck: (e: any) => void;
-    deletePage(params?: ISavePageParams, currentLanguage?: string): any;
+    deletePage(params?: ISavePageParams, currentLanguage?: string): void;
     getSiteContent(): any;
     setHistoryPush(path: string, isEditor: boolean): void;
-    updatePageStatus(ids: number[], status: string, updatedFromList: boolean): any;
+    updatePageStatus(ids: number[], status: string, updatedFromList: boolean): Promise<boolean>;
     setCurrentPageID(currentPageID: number | null): ISetCurrentPageIDAction;
     duplicatePage(pageID: number, data: any): Promise<void>;
     removePageFromSite(pageID: number): Promise<boolean>;
+    deleteBulk(ids: number[]): void;
     getDataPack: (id: string) => Promise<void>;
   };
   activatedTemplates: any[];

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

@@ -93,12 +93,6 @@ const ActionsCell = styled(Cell)`
   text-align: center;
 `;
 
-const CategoryCell = styled(Cell)`
-  flex: 0 0 150px;
-  align-items: center;
-  position: relative;
-`;
-
 const StyledActionMenu = styled(ActionMenu)`
   opacity: 0;
   width: 32px;
@@ -197,5 +191,4 @@ export {
   ModalContent,
   GlobalCell,
   Mark,
-  CategoryCell,
 };