@griddo/ax 1.59.11 → 1.60.3

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 };

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

@@ -0,0 +1,117 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { IRedirect } from "@ax/types";
+import { Button, FieldsBehavior, FloatingPanel } from "@ax/components";
+import { redirectsActions } from "@ax/containers/Redirects";
+
+import * as S from "./style";
+
+const RedirectPanel = (props: IProps): JSX.Element => {
+  const {
+    isOpen,
+    toggleModal,
+    redirect,
+    isOpenedSecond,
+    toggleSecondaryPanel,
+    addRedirect,
+    updateRedirect,
+    formValues,
+    setFormValues,
+    currentFilter,
+  } = props;
+
+  const handleOldUrl = (newValue: string) => setFormValues({ ...formValues, from: newValue });
+
+  const handleNewUrl = (newValue: any) => {
+    const url = !newValue ? "" : newValue.linkTo ? newValue.linkToURL : newValue.href;
+    const pageId = newValue ? newValue.linkTo : undefined;
+    const toValue = { ...newValue, pageId, url };
+    setFormValues({ ...formValues, to: toValue });
+  };
+
+  const addItemAction = () => addRedirect();
+
+  const editItemAction = async () => {
+    const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
+    formValues.id && (await updateRedirect({ from: formValues.from, to: toPage }, formValues.id, currentFilter));
+    toggleModal();
+  };
+
+  const addButton = {
+    label: "Add Redirect",
+    action: addItemAction,
+    disabled: false,
+  };
+
+  const editButton = {
+    label: "Update Redirect",
+    action: editItemAction,
+    disabled: false,
+  };
+
+  const title = redirect ? "Update Redirect" : "Add Redirect";
+
+  return (
+    <FloatingPanel
+      title={title}
+      toggleModal={toggleModal}
+      isOpen={isOpen}
+      isOpenedSecond={isOpenedSecond}
+      handlePanel={toggleSecondaryPanel}
+    >
+      <FieldsBehavior
+        title="Old URL"
+        name="oldUrl"
+        fieldType="TextField"
+        value={formValues.from}
+        onChange={handleOldUrl}
+        autoComplete="redirect-old"
+      />
+      <FieldsBehavior
+        title="New URL"
+        name="newUrl"
+        fieldType="UrlField"
+        value={formValues.to}
+        onChange={handleNewUrl}
+        handlePanel={toggleSecondaryPanel}
+        inFloatingPanel={true}
+        autoComplete="redirect-new"
+      />
+      <S.Footer>
+        {redirect ? (
+          <Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
+            {editButton.label}
+          </Button>
+        ) : (
+          <Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
+            {addButton.label}
+          </Button>
+        )}
+      </S.Footer>
+    </FloatingPanel>
+  );
+};
+
+const mapDispatchToProps = {
+  updateRedirect: redirectsActions.updateRedirect,
+};
+interface ICategoryPanelProps {
+  isOpen: boolean;
+  isOpenedSecond: boolean;
+  toggleSecondaryPanel(): any;
+  toggleModal(): any;
+  redirect?: IRedirect;
+  formValues: IRedirect;
+  setFormValues(redirect: IRedirect): void;
+  currentFilter: string;
+}
+
+interface IDispatchProps {
+  addRedirect(force?: boolean): void;
+  updateRedirect(redirect: { from: string; to: string | number }, redirectID: number, filter?: string): Promise<void>;
+}
+
+type IProps = ICategoryPanelProps & IDispatchProps;
+
+export default connect(null, mapDispatchToProps)(RedirectPanel);

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

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const Footer = styled.div`
+  position: absolute;
+  bottom: ${(p) => p.theme.spacing.m};
+  right: ${(p) => p.theme.spacing.m};
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export { Footer, ModalContent };