@griddo/ax 1.59.8 → 1.60.0

package/src/containers/Settings/DataPacks/constants.tsx

@@ -1,17 +1,17 @@
-const NAME: string = "dataPacks";
+const NAME = "dataPacks";
 
-const SET_ACTIVATED: string = `${NAME}/SET_ACTIVATED`;
-const SET_SELECTED: string = `${NAME}/SET_SELECTED`;
-const SET_CONFIG_FORM_DATA: string = `${NAME}/SET_CONFIG_FORM_DATA`;
-const SET_AVAILABLE: string = `${NAME}/SET_AVAILABLE`;
-const SET_CATEGORIES: string = `${NAME}/SET_CATEGORIES`;
-const SET_MODULES: string = `${NAME}/SET_MODULES`;
-const SET_TEMPLATES: string = `${NAME}/SET_TEMPLATES`;
+const SET_ACTIVATED = `${NAME}/SET_ACTIVATED`;
+const SET_SELECTED = `${NAME}/SET_SELECTED`;
+const SET_CONFIG_FORM_DATA = `${NAME}/SET_CONFIG_FORM_DATA`;
+const SET_AVAILABLE = `${NAME}/SET_AVAILABLE`;
+const SET_CATEGORIES = `${NAME}/SET_CATEGORIES`;
+const SET_MODULES = `${NAME}/SET_MODULES`;
+const SET_TEMPLATES = `${NAME}/SET_TEMPLATES`;
 
 // TODO ERROR DICTIONARY
 const ERROR_CODE = {
-  isBeingUsed: 409
-}
+  isBeingUsed: 409,
+};
 
 export {
   SET_ACTIVATED,
@@ -21,5 +21,5 @@ export {
   SET_CATEGORIES,
   SET_MODULES,
   SET_TEMPLATES,
-  ERROR_CODE
+  ERROR_CODE,
 };

package/src/containers/Sites/actions.tsx

@@ -112,28 +112,6 @@ function saveSettings(form: ISettingsForm): (dispatch: Dispatch, getState: any)
   };
 }
 
-function getOrderedSitePages(siteId: number | string, query: string): (dispatch: any) => Promise<void> {
-  return async (dispatch) => {
-    try {
-      dispatch(setIsLoading(true));
-      const response: any = await sites.getOrderedSitePages(siteId, query);
-
-      if (isReqOk(response.status)) {
-        const { items, totalItems } = response.data;
-        dispatch(setCurrentSitePages(items));
-        dispatch(setTotalItems(totalItems));
-        dispatch(setIsLoading(false));
-      } else {
-        console.log("Error en getOrderedSitePages"); // FIXME: capturar errores mejor
-        dispatch(setIsLoading(false));
-      }
-    } catch (e) {
-      console.log("error");
-      console.log(e); // FIXME: capturar errores
-    }
-  };
-}
-
 function getGlobalPages(params: IGetGlobalPagesParams, filterQuery: string): (dispatch: any) => Promise<void> {
   return async (dispatch) => {
     try {
@@ -269,7 +247,7 @@ function getSitePages(
       dispatch(setIsLoading(true));
       const response: any = structuredData
         ? await sites.getStructuredSitePages(params, structuredData, filterQuery)
-        : await sites.getSitePages(params);
+        : await sites.getSitePages(params, filterQuery);
 
       if (isReqOk(response.status)) {
         const { items, totalItems } = response.data;
@@ -455,14 +433,12 @@ function removePageFromSite(
 }
 
 export {
-  // setSites,
   setCurrentSiteInfo,
   setCurrentSitePages,
   setFilter,
   setTotalItems,
   setCurrentSiteLanguages,
   getSites,
-  getOrderedSitePages,
   setSiteInfo,
   getFilteredContent,
   getSitePages,

package/src/helpers/environment.tsx

@@ -0,0 +1,5 @@
+const isDevelopment = (): boolean => {
+  return process.env.NODE_ENV === "development";
+}
+
+export { isDevelopment }

package/src/helpers/index.tsx

@@ -83,6 +83,8 @@ import { isEmptyArray, moveArrayElement } from "./arrays";
 
 import { getActivatedDataPacksIds, isModuleDisabled } from "./dataPacks";
 
+import { isDevelopment } from "./environment";
+
 export {
   isComponentEmpty,
   setAsContainedComponent,
@@ -149,4 +151,5 @@ export {
   isNumber,
   getFileExtension,
   moveArrayElement,
+  isDevelopment,
 };

package/src/helpers/thumbnails.tsx

@@ -17,7 +17,7 @@ const getThumbnailProps = (option: any, template: boolean, path?: string) => {
   if (path) {
     PATH = `/img/${path}/${option}/thumbnails/`;
     thumbnails["1x"] = imageExists(PATH) ? `${PATH}thumbnail@1x.png` : "/img/placeholder/thumbnail@1x.png";
-    thumbnails["2x"] = imageExists(PATH) ? `${PATH}thumbnail@2x.png` : "/img/placeholder/thumbnail@2x.png" ;
+    thumbnails["2x"] = imageExists(PATH) ? `${PATH}thumbnail@2x.png` : "/img/placeholder/thumbnail@2x.png";
   } else {
     if (template) {
       thumbnails = getTemplateThumbnails(option);
@@ -32,10 +32,10 @@ const getThumbnailProps = (option: any, template: boolean, path?: string) => {
 
   const fallback = thumbnails["2x"];
   const imgDensity1x = thumbnails["1x"];
-  const srcset = `${fallback}, ${imgDensity1x} `;
+  const srcSet = `${imgDensity1x} 1x, ${fallback} 2x`;
 
   return {
-    srcset,
+    srcSet,
     src: fallback,
     alt: option,
   };

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

@@ -47,8 +47,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     removePageFromSite,
   } = functions;
   const { locale } = lang;
-  const { pageLanguages, template, isHome, fullPath, canBeUnpublished, origin, manuallyImported } = page;
-  const displayName = getTemplateDisplayName(template.templateType);
+  const { pageLanguages, isHome, fullPath, canBeUnpublished, origin, manuallyImported, templateId, structuredDataContent } = page;
+  const displayName = getTemplateDisplayName(templateId);
 
   const initValue = { title: "", slug: "" };
   const [modalState, setModalState] = useState(initValue);
@@ -217,10 +217,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const currentLanguages = getCurrentPageLanguages();
 
-  let isTemplateActivated = true;
-  if (page && page.template) {
-    isTemplateActivated = activatedTemplates.find((temp: any) => temp.id === template.templateType) ? true : false;
-  }
+  const isTemplateActivated = activatedTemplates.some((temp: any) => temp.id === templateId);
 
   let availableLanguages = siteLanguages;
 
@@ -372,8 +369,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const CategoryColumns =
     isGlobal &&
     categoryColumns.map((col: any) => {
-      const type = page.template[col.from];
-      const categories = type && type.map((cat: any) => cat.title);
+      const type = structuredDataContent[col.from];
+      const categories = type && type.map((cat: any) => cat.label || cat.title);
       return (
         activeColumns.includes(col.key) && (
           <CategoryCell

package/src/modules/Content/index.tsx

@@ -55,7 +55,6 @@ const Content = (props: IProps): JSX.Element => {
     setCurrentPageName,
     addTemplate,
     getSitePages,
-    getOrderedSitePages,
     updatePageStatus,
     deletePage,
     setLanguage,
@@ -162,26 +161,27 @@ const Content = (props: IProps): JSX.Element => {
 
   const getParams = useCallback(() => {
     const siteID = currentSiteInfo ? currentSiteInfo.id : null;
-    const params = isStructuredData
-      ? {
-          siteID,
-          dataID: typeof filter === "object" ? filter.value : filter,
-          page,
-          itemsPerPage,
-          pagination: true,
-          deleted: false,
-          include_draft: true,
-          query: searchQuery,
-        }
-      : {
-          siteID,
-          deleted: false,
-          page,
-          itemsPerPage,
-          query: searchQuery,
-        };
+    const params = isStructuredData ?
+      {
+        siteID,
+        dataID: typeof filter === "object" ? filter.value : filter,
+        page,
+        itemsPerPage,
+        pagination: true,
+        deleted: false,
+        include_draft: true,
+        query: searchQuery,
+        format: "list",
+      } : {
+        siteID,
+        deleted: false,
+        page,
+        itemsPerPage,
+        query: searchQuery,
+        format: "list",
+      };
 
-    return { params, siteID };
+    return params;
   }, [filter, currentSiteInfo, isStructuredData, page, searchQuery]);
 
   const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
@@ -194,24 +194,16 @@ const Content = (props: IProps): JSX.Element => {
 
   const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
 
-  const getPages = (params: any, siteID: number, filterQuery?: any) => {
+  const getPages = (params: any, filterQuery?: any) => {
     const isStructuredDataPage = filter !== "unique-pages";
-    if (filterQuery && !isStructuredDataPage) {
-      const { deleted, page, itemsPerPage, query } = params;
-      const fullQuery = filterQuery.concat(
-        `&deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}&query=${query}`
-      );
-      getOrderedSitePages(siteID, fullQuery);
-    } else {
-      const pageFilter = isStructuredDataPage ? filter : undefined;
-      getSitePages(params, pageFilter, filterQuery);
-    }
+    const pageFilter = isStructuredDataPage ? filter : undefined;
+    getSitePages(params, pageFilter, filterQuery);
   };
 
   const getSiteContent = useCallback(
     (filterQuery?: any) => {
-      const { params, siteID } = getParams();
-      isStructuredData ? getStructuredDataContents(params, siteID) : getPages(params, siteID, filterQuery);
+      const params = getParams();
+      isStructuredData ? getStructuredDataContents(params, params.siteID) : getPages(params, filterQuery);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [getParams, getSitePages, getStructuredDataContents, currentSiteInfo, isStructuredData, lang]
@@ -657,7 +649,6 @@ interface IDispatchProps {
   resetForm(): void;
   deleteBulk(ids: any): Promise<boolean>;
   duplicatePage(pageID: number, data: any): Promise<void>;
-  getOrderedSitePages(siteID: number, query: string): Promise<void>;
   deleteDataContent(dataID: number[]): Promise<boolean>;
   restoreDataContent(catID: number | number[]): void;
   setFilter(value: string): void;
@@ -670,7 +661,6 @@ interface IDispatchProps {
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   setLanguage: appActions.setLanguage,
-  getOrderedSitePages: sitesActions.getOrderedSitePages,
   getSitePages: sitesActions.getSitePages,
   setCurrentPageID: pageEditorActions.setCurrentPageID,
   setCurrentPageStatus: pageEditorActions.setCurrentPageStatus,

package/src/modules/GlobalSettings/Robots/Item/index.tsx

@@ -13,7 +13,7 @@ const Item = (props: IProps): JSX.Element => {
 
   const handleClick = () => toggleModal();
 
-  const buttonText = item.content.trim() !== "" ? "Edit robots.txt" : "Add robots.txt";
+  const buttonText = item.content && item.content.trim() !== "" ? "Edit robots.txt" : "Add robots.txt";
 
   return (
     <>

package/src/modules/GlobalSettings/Robots/index.tsx

@@ -24,14 +24,17 @@ const Robots = (props: IProps): JSX.Element => {
   } = props;
 
   const [robotItems, setRobotItems] = useState(robots);
-  const { isDirty, setIsDirty } = useIsDirty(robotItems);
+  const { isDirty, setIsDirty, resetDirty } = useIsDirty(robotItems);
 
   useEffect(() => {
     getDomainsRobots();
-  }, [getDomainsRobots]);
+    resetDirty();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     setRobotItems(robots);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [robots]);
 
   const handleSave = async () => {

package/src/modules/GlobalSettings/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 
+import Redirects from "../Redirects";
 import Robots from "./Robots";
 
 const navItems = [
@@ -9,6 +10,11 @@ const navItems = [
     path: "/settings/robots",
     component: Robots,
   },
+  {
+    title: "URL Redirect Manager",
+    path: "/settings/redirects",
+    component: Redirects,
+  },
 ];
 
 const GlobalSettings = (): JSX.Element => {

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

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { CheckField, SiteFilter, TableCounter } from "@ax/components";
+import * as S from "./style";
+
+const TableHeader = (props: IProps) => {
+  const { totalItems, selectAllItems, isScrolling, filterItems, filterValues, isSiteItem } = props;
+  return (
+    <S.TableHeader isScrolling={isScrolling}>
+      <S.CheckHeader>
+        <CheckField
+          key="selectAll"
+          name="selectAll"
+          value="selectAll"
+          onChange={selectAllItems}
+          checked={false}
+          disabled={false}
+          error={false}
+        />
+      </S.CheckHeader>
+      {!isSiteItem && (
+        <S.SiteHeader>
+          <SiteFilter filterItems={filterItems} value={filterValues} pointer="sites" center={false} />
+        </S.SiteHeader>
+      )}
+      <S.UrlHeader>Old URL</S.UrlHeader>
+      <S.UrlHeader>New URL</S.UrlHeader>
+      <S.ActionsHeader>
+        <TableCounter totalItems={totalItems} />
+      </S.ActionsHeader>
+    </S.TableHeader>
+  );
+};
+
+interface IProps {
+  totalItems: number;
+  isScrolling: boolean;
+  selectAllItems: () => void;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  filterValues: any;
+  isSiteItem: boolean;
+}
+
+export default TableHeader;

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

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const TableHeader = styled.div<{ isScrolling?: boolean }>`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: ${(p) => p.theme.spacing.m};
+  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+`;
+
+const CheckHeader = styled(Header)`
+  padding-left: ${(p) => p.theme.spacing.m};
+  width: 32px;
+`;
+
+const SiteHeader = styled(Header)`
+  width: 270px;
+`;
+
+const UrlHeader = styled(Header)`
+  width: 50%;
+`;
+
+const ActionsHeader = styled(Header)`
+  width: 125px;
+  padding-right: 0;
+  justify-content: flex-end;
+`;
+
+export { TableHeader, CheckHeader, SiteHeader, UrlHeader, ActionsHeader };

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { BulkSelectionOptions } from "@ax/components";
+import TableHeader from "./TableHeader";
+
+const BulkHeader = (props: IProps): JSX.Element => {
+  const {
+    showBulk,
+    checkState,
+    bulkDelete,
+    selectItems,
+    selectAllItems,
+    totalItems,
+    isScrolling,
+    filterItems,
+    filterValues,
+    isSiteItem,
+  } = props;
+
+  const bulkActions = [
+    {
+      icon: "delete",
+      text: "delete",
+      action: bulkDelete,
+    },
+  ];
+
+  return showBulk ? (
+    <BulkSelectionOptions
+      checkState={checkState}
+      actions={bulkActions}
+      selectItems={selectItems}
+      totalItems={totalItems}
+    />
+  ) : (
+    <TableHeader
+      totalItems={totalItems}
+      selectAllItems={selectAllItems}
+      isScrolling={isScrolling}
+      filterItems={filterItems}
+      filterValues={filterValues}
+      isSiteItem={isSiteItem}
+    />
+  );
+};
+
+interface IProps {
+  showBulk: boolean;
+  checkState: any;
+  bulkDelete: () => void;
+  selectItems: () => void;
+  selectAllItems: () => void;
+  totalItems: number;
+  isScrolling: boolean;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  filterValues: any;
+  isSiteItem: boolean;
+}
+
+export default BulkHeader;

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

@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+
+import { useModal } from "@ax/hooks";
+import { ICheck, IRedirect } from "@ax/types";
+import { CheckField, ElementsTooltip, Modal } from "@ax/components";
+import { redirectsActions } from "@ax/containers/Redirects";
+import RedirectPanel from "../RedirectPanel";
+
+import * as S from "./style";
+
+const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
+  const {
+    redirect,
+    isSelected,
+    onChange,
+    deleteRedirect,
+    toggleToast,
+    setFormValues,
+    formValues,
+    addRedirect,
+    currentFilter,
+    isSiteItem,
+  } = props;
+
+  const { isOpen, toggleModal } = useModal();
+  const [isOpenedSecond, setIsOpenedSecond] = useState(false);
+  const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
+
+  const toggleSecondaryPanel = () => setIsOpenedSecond(!isOpenedSecond);
+
+  const handleClick = () => {
+    const mappedRedirect = { ...redirect, to: { ...redirect.to, linkTo: redirect.to.pageId, href: redirect.to.url } };
+    setFormValues(mappedRedirect);
+    setIsOpenedSecond(false);
+    toggleModal();
+  };
+
+  const handleOnChange = (value: ICheck) => onChange(value);
+
+  const removeItem = async () => {
+    if (redirect.id) {
+      const deleted = await deleteRedirect(redirect.id, currentFilter);
+      if (deleted) {
+        toggleToast();
+      }
+    }
+  };
+
+  const menuOptions = [
+    {
+      label: "delete",
+      icon: "delete",
+      action: toggleModalDelete,
+    },
+  ];
+
+  const mainDeleteModalAction = {
+    title: "Delete redirect",
+    onClick: removeItem,
+  };
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
+
+  return (
+    <>
+      <S.ItemRow role="rowgroup" selected={isSelected}>
+        <S.CheckCell role="cell">
+          <CheckField name="check" value={redirect.id ?? ""} checked={isSelected} onChange={handleOnChange} />
+        </S.CheckCell>
+        {!isSiteItem && (
+          <S.SiteCell role="cell" onClick={handleClick}>
+            {redirect.site && redirect.site.siteName && (
+              <ElementsTooltip elements={[redirect.site.siteName]} maxChar={20} />
+            )}
+          </S.SiteCell>
+        )}
+        <S.UrlCell role="cell" onClick={handleClick}>
+          {redirect.from}
+        </S.UrlCell>
+        <S.UrlCell role="cell" onClick={handleClick}>
+          {redirect.to?.url}
+        </S.UrlCell>
+        <S.ActionsCell role="cell">
+          <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
+        </S.ActionsCell>
+      </S.ItemRow>
+      {isOpen && (
+        <RedirectPanel
+          isOpen={isOpen}
+          isOpenedSecond={isOpenedSecond}
+          toggleModal={toggleModal}
+          toggleSecondaryPanel={toggleSecondaryPanel}
+          redirect={redirect}
+          setFormValues={setFormValues}
+          formValues={formValues}
+          addRedirect={addRedirect}
+          currentFilter={currentFilter}
+        />
+      )}
+      <Modal
+        isOpen={isOpenDelete}
+        hide={toggleModalDelete}
+        title="Delete Redirect"
+        secondaryAction={secondaryDeleteModalAction}
+        mainAction={mainDeleteModalAction}
+        size="S"
+      >
+        <S.ModalContent>
+          Are you sure you want to delete <strong>{redirect.from} redirect</strong>? This action{" "}
+          <strong>cannot be undone</strong>.
+        </S.ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+interface IProps {
+  redirect: IRedirect;
+  isSelected: boolean;
+  onChange: (e: any) => void;
+  toggleToast: () => void;
+  setFormValues: (redirect: IRedirect) => void;
+  formValues: IRedirect;
+  addRedirect: (force?: boolean) => void;
+  currentFilter: string;
+  isSiteItem: boolean;
+}
+
+interface IDispatchProps {
+  deleteRedirect(redirectID: number, filter?: string): Promise<boolean>;
+}
+
+type IRedirectItemProps = IProps & IDispatchProps;
+
+const mapDispatchToProps = {
+  deleteRedirect: redirectsActions.deleteRedirect,
+};
+
+export default connect(null, mapDispatchToProps)(RedirectItem);

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

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+import { ActionMenu } from "@ax/components";
+
+const CheckCell = styled(Cell)`
+  padding-left: ${(p) => p.theme.spacing.m};
+  width: 32px;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const SiteCell = styled(Cell)`
+  width: 270px;
+`;
+
+const UrlCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  width: 50%;
+`;
+
+const ActionsCell = styled(Cell)`
+  width: 125px;
+`;
+
+const StyledActionMenu = styled(ActionMenu)`
+  opacity: 0;
+  width: 32px;
+  display: flex;
+  margin-left: auto;
+`;
+
+const ItemRow = styled(Row)`
+  &:hover {
+    ${StyledActionMenu} {
+      opacity: 1;
+    }
+  }
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+export { CheckCell, SiteCell, ActionsCell, UrlCell, StyledActionMenu, ItemRow, ModalContent };